mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
19 lines
3.2 KiB
JSON
19 lines
3.2 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "hover-card-example",
|
|
"title": "Hover Card",
|
|
"registryDependencies": [
|
|
"button",
|
|
"dialog",
|
|
"hover-card",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/radix-nova/examples/hover-card-example.tsx",
|
|
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from \"@/registry/radix-nova/ui/hover-card\"\n\nexport default function HoverCardExample() {\n return (\n <ExampleWrapper>\n <HoverCardSides />\n <HoverCardInDialog />\n </ExampleWrapper>\n )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n return (\n <Example title=\"Sides\">\n <div className=\"flex flex-wrap items-center justify-center gap-4\">\n {HOVER_CARD_SIDES.map((side) => (\n <HoverCard key={side} openDelay={100} closeDelay={100}>\n <HoverCardTrigger asChild>\n <Button variant=\"outline\" className=\"capitalize\">\n {side}\n </Button>\n </HoverCardTrigger>\n <HoverCardContent side={side} className=\"w-64\">\n <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n <h4 className=\"font-medium\">Hover Card</h4>\n <p>\n This hover card appears on the {side} side of the trigger.\n </p>\n </div>\n </HoverCardContent>\n </HoverCard>\n ))}\n </div>\n </Example>\n )\n}\n\nfunction HoverCardInDialog() {\n return (\n <Example title=\"In Dialog\">\n <Dialog>\n <DialogTrigger asChild>\n <Button variant=\"outline\">Open Dialog</Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Hover Card Example</DialogTitle>\n <DialogDescription>\n Hover over the button below to see the hover card.\n </DialogDescription>\n </DialogHeader>\n <HoverCard openDelay={100} closeDelay={100}>\n <HoverCardTrigger asChild>\n <Button variant=\"outline\" className=\"w-fit\">\n Hover me\n </Button>\n </HoverCardTrigger>\n <HoverCardContent className=\"w-64\">\n <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n <h4 className=\"font-medium\">Hover Card</h4>\n <p>\n This hover card appears inside a dialog. Hover over the button\n to see it.\n </p>\n </div>\n </HoverCardContent>\n </HoverCard>\n </DialogContent>\n </Dialog>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |