feat: hovercard component (#88)

.changeset/tame-lemons-relax.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add hover card component

package.json

@@ -59,6 +59,7 @@
 		"@radix-ui/react-collapsible": "^1.0.3",
 		"@radix-ui/react-dialog": "^1.0.5",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
+		"@radix-ui/react-hover-card": "^1.1.1",
 		"@radix-ui/react-progress": "^1.0.3",
 		"@radix-ui/react-scroll-area": "^1.1.0",
 		"@radix-ui/react-select": "^2.0.0",

src/components/HoverCard/HoverCard.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from ".";
+import { StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Elements/HoverCard",
+	component: HoverCard,
+	argTypes: {},
+	parameters: {
+		layout: "centered"
+	},
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof HoverCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	render: () => (
+		<HoverCard>
+			<HoverCardTrigger className="border border-theme-border-moderate px-3 py-2 bg-theme-surface-primary rounded-md">
+				Hover
+			</HoverCardTrigger>
+			<HoverCardContent>This is a hover card</HoverCardContent>
+		</HoverCard>
+	)
+};