feat: add new component

.changeset/gold-coins-hide.md

@@ -0,0 +1,5 @@
+---
+"@itsrakesh/ui": minor
+---
+
+Added new component

packages/ui/package.json

@@ -95,6 +95,7 @@
  "@radix-ui/react-checkbox": "^1.0.4",
  "@radix-ui/react-dialog": "^1.0.4",
  "@radix-ui/react-dropdown-menu": "^2.0.6",
+ "@radix-ui/react-hover-card": "^1.0.7",
  "@radix-ui/react-icons": "^1.3.0",
  "@radix-ui/react-label": "^2.0.2",
  "@radix-ui/react-menubar": "^1.0.3",

packages/ui/src/components/HoverCard/HoverCard.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "@itsrakesh/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+ React.ElementRef<typeof HoverCardPrimitive.Content>,
+ React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+ <HoverCardPrimitive.Content
+ ref={ref}
+ align={align}
+ sideOffset={sideOffset}
+ className={cn(
+ "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+ className
+ )}
+ {...props}
+ />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

packages/ui/src/components/HoverCard/index.ts

@@ -0,0 +1 @@
+export { HoverCard, HoverCardTrigger, HoverCardContent } from "./HoverCard";

packages/ui/src/components/index.ts

@@ -25,3 +25,4 @@ export * from "./Tabs";
 export * from "./Textarea";
 export * from "./Toast";
 export * from "./Tooltip";
+export * from "./HoverCard";

packages/ui/src/index.ts

@@ -1,3 +1 @@
-import "./globals.css";
-
 export * from "./components";

packages/ui/src/stories/HoverCard.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+ Button,
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "../";
+import { CalendarIcon } from "@radix-ui/react-icons";
+
+const meta: Meta<typeof HoverCard> = {
+ component: HoverCard,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HoverCard>;
+
+export const Default: Story = {
+ render: () => (
+ <HoverCard>
+ <HoverCardTrigger asChild>
+ <Button variant="link">@nextjs</Button>
+ </HoverCardTrigger>
+ <HoverCardContent className="w-80">
+ <div className="flex justify-between space-x-4">
+ <Avatar>
+ <AvatarImage src="https://github.com/vercel.png" />
+ <AvatarFallback>VC</AvatarFallback>
+ </Avatar>
+ <div className="space-y-1">
+ <h4 className="text-sm font-semibold">@nextjs</h4>
+ <p className="text-sm">
+ The React Framework - created and maintained by @vercel.
+ </p>
+ <div className="flex items-center pt-2">
+ <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
+ <span className="text-xs text-muted-foreground">
+ Joined December 2021
+ </span>
+ </div>
+ </div>
+ </div>
+ </HoverCardContent>
+ </HoverCard>
+ ),
+};