feat: add component hover-card

Ohh-889 · Ohh-889 · commit 3054b7980879 · 2025-07-24T22:13:43.000+08:00
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -11,7 +11,9 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "pnpm run pgk:prod && pnpm run build:components && pnpm run registry",
     "build:components": "tsdown",
@@ -32,6 +34,7 @@
     "@radix-ui/react-context-menu": "^2.2.15",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
     "@radix-ui/react-label": "2.1.7",
     "@radix-ui/react-menu": "^2.1.15",
     "@radix-ui/react-popover": "1.1.14",
diff --git a/packages/ui/src/components/hover-card/HoverCard.tsx b/packages/ui/src/components/hover-card/HoverCard.tsx
@@ -0,0 +1,43 @@
+import { Root, Trigger } from '@radix-ui/react-hover-card';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import HoverCardArrow from './HoverCardArrow';
+import HoverCardContent from './HoverCardContent';
+import type { HoverCardProps } from './types';
+
+const HoverCard = forwardRef<ComponentRef<typeof HoverCardContent>, HoverCardProps>((props, ref) => {
+  const { arrowProps, children, className, classNames, showArrow, trigger, ...rest } = props;
+
+  return (
+    <Root
+      data-slot="hover-card-root"
+      {...rest}
+    >
+      <Trigger
+        asChild
+        data-slot="hover-card-trigger"
+      >
+        {trigger}
+      </Trigger>
+
+      <HoverCardContent
+        className={className || classNames?.content}
+        ref={ref}
+      >
+        {children}
+
+        {showArrow && (
+          <HoverCardArrow
+            {...arrowProps}
+            className={classNames?.arrow}
+          />
+        )}
+      </HoverCardContent>
+    </Root>
+  );
+});
+
+HoverCard.displayName = 'HoverCard';
+
+export default HoverCard;
diff --git a/packages/ui/src/components/hover-card/HoverCardArrow.tsx b/packages/ui/src/components/hover-card/HoverCardArrow.tsx
@@ -0,0 +1,24 @@
+import { Arrow } from '@radix-ui/react-hover-card';
+
+import { cn } from '@/lib/utils';
+
+import { hoverCardVariants } from './hover-card-variants';
+import type { HoverCardArrowProps } from './types';
+
+const HoverCardArrow = (props: HoverCardArrowProps) => {
+  const { className, size, ...rest } = props;
+
+  const { arrow } = hoverCardVariants({ size });
+
+  const mergedClass = cn(arrow(), className);
+
+  return (
+    <Arrow
+      {...rest}
+      className={mergedClass}
+      data-slot="hover-card-arrow"
+    />
+  );
+};
+
+export default HoverCardArrow;
diff --git a/packages/ui/src/components/hover-card/HoverCardContent.tsx b/packages/ui/src/components/hover-card/HoverCardContent.tsx
@@ -0,0 +1,33 @@
+import { Content, Portal } from '@radix-ui/react-hover-card';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { hoverCardVariants } from './hover-card-variants';
+import type { HoverCardContentProps } from './types';
+
+const HoverCardContent = forwardRef<ComponentRef<typeof Content>, HoverCardContentProps>((props, ref) => {
+  const { align = 'center', className, sideOffset = 8, ...rest } = props;
+
+  const { content } = hoverCardVariants();
+
+  const mergedCls = cn(content(), className);
+
+  return (
+    <Portal data-slot="hover-card-portal">
+      <Content
+        align={align}
+        className={mergedCls}
+        data-slot="hover-card-content"
+        ref={ref}
+        sideOffset={sideOffset}
+        {...rest}
+      />
+    </Portal>
+  );
+});
+
+HoverCardContent.displayName = 'HoverCardContent';
+
+export default HoverCardContent;
diff --git a/packages/ui/src/components/hover-card/hover-card-variants.ts b/packages/ui/src/components/hover-card/hover-card-variants.ts
@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+
+export const hoverCardVariants = tv({
+  slots: {
+    arrow: 'fill-popover stroke-border',
+    content: [
+      `w-auto p-4 rounded-md border bg-popover  text-popover-foreground shadow-md outline-none z-50 will-change-transform`,
+      `data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0  data-[state=open]:animate-in`,
+      `data-[state=closed]:zoom-out-95 data-[state=closed]:fade-out-0  data-[state=closed]:animate-out`,
+      `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`
+    ]
+  }
+});
+
+export type HoverCardSlots = keyof typeof hoverCardVariants.slots;
diff --git a/packages/ui/src/components/hover-card/index.ts b/packages/ui/src/components/hover-card/index.ts
@@ -0,0 +1,7 @@
+export { Root as HoverCardRoot, Trigger as HoverCardTrigger } from '@radix-ui/react-hover-card';
+
+export { default as HoverCard } from './HoverCard';
+export { default as HoverCardArrow } from './HoverCardArrow';
+export { default as HoverCardContent } from './HoverCardContent';
+
+export * from './types';
diff --git a/packages/ui/src/components/hover-card/types.ts b/packages/ui/src/components/hover-card/types.ts
@@ -0,0 +1,23 @@
+import type {
+  HoverCardArrowProps as _HoverCardArrowProps,
+  HoverCardContentProps as _HoverCardContentProps,
+  HoverCardProps as _HoverCardProps
+} from '@radix-ui/react-hover-card';
+
+import type { BaseNodeProps, ClassValue } from '@/types/other';
+
+import type { HoverCardSlots } from './hover-card-variants';
+
+export type HoverCardClassNames = Partial<Record<HoverCardSlots, ClassValue>>;
+
+export type HoverCardProps = BaseNodeProps<_HoverCardProps> & {
+  arrowProps?: HoverCardArrowProps;
+  classNames?: HoverCardClassNames;
+  contentProps?: Omit<HoverCardContentProps, 'children' | 'className'>;
+  showArrow?: boolean;
+  trigger?: React.ReactNode;
+};
+
+export type HoverCardArrowProps = BaseNodeProps<_HoverCardArrowProps>;
+
+export type HoverCardContentProps = BaseNodeProps<_HoverCardContentProps>;
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -24,6 +24,8 @@ export * from './components/chip';
 
 export * from './components/collapsible';
 
+export * from './components/combobox';
+
 export * from './components/command';
 
 export * from './components/config-provider';
@@ -38,6 +40,8 @@ export * from './components/divider';
 
 export * from './components/dropdown-menu';
 
+export * from './components/hover-card';
+
 export * from './components/icon';
 
 export * from './components/keyboard-key';
diff --git a/playground/public/icon.svg b/playground/public/icon.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"><path d="M81.28 55.9c-.1-11.67-2.93-22.55-9.37-32.38-1-1.5-2.14-2.86-2.5-4.71a8.1 8.1 0 014-8.61 7.89 7.89 0 019.3 1.23 35.999 35.999 0 015.9 8.83 75.18 75.18 0 018.44 28.58 83.211 83.211 0 01-5.23 36.74 102.983 102.983 0 01-3 7.28 1.2 1.2 0 000 1.41c9.58 13.3 21.76 23 37.85 27.24a54.37 54.37 0 0019.68 1.57 7.72 7.72 0 018.36 6.9 7.903 7.903 0 01-6.7 9 64.744 64.744 0 01-23-1.33 77.68 77.68 0 01-36.93-19.88 93.628 93.628 0 01-11.91-13.71 2.18 2.18 0 00-2.3-1.06 72.744 72.744 0 00-27.38 7.55c-11.6 6-20.67 14.58-26.4 26.45a10.134 10.134 0 01-3.7 4.7 8 8 0 01-9.19-.7 7.86 7.86 0 01-2.36-9.28 60.324 60.324 0 018.72-14.52c12.2-15.43 28.21-24.59 47.32-28.57A85.085 85.085 0 0173.07 87c.524.015 1-.307 1.18-.8a76.06 76.06 0 006.53-22.3c.351-2.652.518-5.325.5-8z" fill="#646cff"/><path d="M136.26 108.34a44.742 44.742 0 01-11.13-2.87 46.108 46.108 0 01-19.66-13.76 8 8 0 015.72-13.22 7.93 7.93 0 016.54 2.93 33.27 33.27 0 0018.87 10.75c1.546.155 3.058.553 4.48 1.18a8.08 8.08 0 013.84 9.21c-.92 3.52-4.13 5.81-8.66 5.78zm-80.6-75.02a7.61 7.61 0 016.64 5 49.139 49.139 0 013.64 17 46.33 46.33 0 01-2.46 17.28c-2 5.77-8.24 7.79-12.89 4.15a8.1 8.1 0 01-2.39-9 31.679 31.679 0 001.68-12.36 35.77 35.77 0 00-2.43-11c-2.1-5.45 1.75-11.07 8.21-11.07zm22.26 93.25a8 8 0 01-6.68 7.86 32.88 32.88 0 00-19.7 12.19 8.13 8.13 0 01-11.21 1.62 8 8 0 01-1.41-11.58A51.043 51.043 0 0154 123.81a45.842 45.842 0 0114-5.1c5.35-1.04 9.91 2.56 9.92 7.86z" fill="#646cff"/></svg>
diff --git a/playground/src/app/(demo)/hover-card/modules/HoverCardDefaultDemo.tsx b/playground/src/app/(demo)/hover-card/modules/HoverCardDefaultDemo.tsx
@@ -0,0 +1,29 @@
+import { Avatar, Button, Card, HoverCard } from 'soybean-react-ui';
+
+const HoverCardDefaultDemo = () => {
+  return (
+    <Card
+      split
+      title="Default"
+    >
+      <HoverCard
+        classNames={{ content: 'w-64' }}
+        trigger={<Button variant="link">@soybeanjs</Button>}
+      >
+        <div className="flex justify-between space-x-4">
+          <Avatar
+            fallback="VC"
+            src="/icon.svg"
+          />
+
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@soybeanjs</h4>
+            <p className="text-sm">SoybeanJS is a front-end technology team, built by Soybean.</p>
+          </div>
+        </div>
+      </HoverCard>
+    </Card>
+  );
+};
+
+export default HoverCardDefaultDemo;
diff --git a/playground/src/app/(demo)/hover-card/modules/HoverCardWithArrow.tsx b/playground/src/app/(demo)/hover-card/modules/HoverCardWithArrow.tsx
@@ -0,0 +1,30 @@
+import { Avatar, Button, Card, HoverCard } from 'soybean-react-ui';
+
+const HoverCardWithArrow = () => {
+  return (
+    <Card
+      split
+      title="With Arrow"
+    >
+      <HoverCard
+        showArrow
+        classNames={{ content: 'w-64' }}
+        trigger={<Button variant="link">@soybeanjs</Button>}
+      >
+        <div className="flex justify-between space-x-4">
+          <Avatar
+            fallback="VC"
+            src="/icon.svg"
+          />
+
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@soybeanjs</h4>
+            <p className="text-sm">SoybeanJS is a front-end technology team, built by Soybean.</p>
+          </div>
+        </div>
+      </HoverCard>
+    </Card>
+  );
+};
+
+export default HoverCardWithArrow;
diff --git a/playground/src/app/(demo)/hover-card/page.tsx b/playground/src/app/(demo)/hover-card/page.tsx
@@ -0,0 +1,13 @@
+import HoverCardDefaultDemo from './modules/HoverCardDefaultDemo';
+import HoverCardWithArrow from './modules/HoverCardWithArrow';
+
+const HoverCardPage = () => {
+  return (
+    <div className="flex-c gap-4">
+      <HoverCardDefaultDemo />
+      <HoverCardWithArrow />
+    </div>
+  );
+};
+
+export default HoverCardPage;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
