{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card-layout",
  "title": "Card-layout hover",
  "description": "Styled hover: the Card-layout set. 5 decorative hover variations (HorizontalHoverCard, CompactHoverCard, WideHoverCard, StackedHoverCard, SplitHoverCard) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2",
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/hover-card-layout.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { Activity, Building2, Star, User, Zap } from \"lucide-react\"\nimport { useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Styled hover-card \"Layout\" family: 5 decorative hover cards share the same\n   opening mechanism but the INNER content layout changes. SELF-CONTAINED (no radix,\n   no portal) - a trigger + a card positioned below it, opened with CSS group-hover /\n   group-focus (opacity + a slight slide). The opening mechanism and the data-slot\n   are preserved from essentials. The transition/transform is disabled through\n   useReducedMotion(): in the reduce case the card appears instantly. Color comes\n   ONLY from tokens; alpha via color-mix. Size = card width. trigger = the trigger,\n   children = extra card content (optional). The content is a tokenized placeholder;\n   each export shows a different layout. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\n/* The standard card width scale. */\nconst cardWidth: Record<StyledSize, string> = {\n  sm: \"w-56\",\n  md: \"w-64\",\n  lg: \"w-72\",\n  xl: \"w-80\",\n}\n\n/* Compact duzen bir adim dar. */\nconst compactWidth: Record<StyledSize, string> = {\n  sm: \"w-44\",\n  md: \"w-48\",\n  lg: \"w-52\",\n  xl: \"w-56\",\n}\n\n/* The Wide layout is one step wider, for two columns. */\nconst wideWidth: Record<StyledSize, string> = {\n  sm: \"w-72\",\n  md: \"w-80\",\n  lg: \"w-96\",\n  xl: \"w-[28rem]\",\n}\n\n/* The card shell: position + visibility toggle. No padding - each layout pads its\n   own section, so the Split top/bottom band reaches all the way to the edge. */\nconst cardShellBase =\n  \"invisible absolute left-1/2 top-full z-20 mt-2 -translate-x-1/2 overflow-hidden rounded-xl border border-border bg-popover text-left text-popover-foreground opacity-0 shadow-lg outline-none group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100 [&_svg]:shrink-0 [&_i]:leading-none\"\n\n/* Added only when motion is on: an initial slide plus a transition. Dropped under reduce. */\nconst cardMotion =\n  \"translate-y-1 transition-[opacity,transform] duration-(--motion-base) ease-(--motion-ease) group-hover:translate-y-0 group-focus-within:translate-y-0\"\n\nconst triggerBase =\n  \"inline-flex items-center gap-1.5 rounded-md font-medium text-primary underline-offset-4 outline-none hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\ninterface Props {\n  size?: StyledSize\n  trigger?: React.ReactNode\n  children?: React.ReactNode\n  className?: string\n}\n\n/* Shared shell: a group wrapper plus trigger plus a card that opens on hover. The width comes from the layout; the reduce hook turns off the transform and transition. */\nfunction Shell({\n  width,\n  trigger,\n  className,\n  children,\n}: {\n  width: string\n  trigger: React.ReactNode\n  className?: string\n  children: React.ReactNode\n}) {\n  const reduce = useReducedMotion()\n  const fallback = (\n    <button type=\"button\" className={triggerBase}>\n      Hover me\n    </button>\n  )\n  return (\n    <span data-slot=\"styled-hover-card\" className=\"group relative inline-flex\">\n      {trigger ?? fallback}\n      <span\n        role=\"dialog\"\n        data-slot=\"styled-hover-card-content\"\n        className={cn(cardShellBase, !reduce && cardMotion, width, className)}\n      >\n        {children}\n      </span>\n    </span>\n  )\n}\n\n/* HorizontalHoverCard: avatar solda, metin sagda. Klasik profil ozeti satiri. */\nexport function HorizontalHoverCard({ size = \"md\", trigger, children, className }: Props) {\n  return (\n    <Shell width={cardWidth[size]} trigger={trigger} className={className}>\n      <span className=\"flex items-start gap-3 p-4\">\n        <span\n          data-slot=\"styled-hover-card-avatar\"\n          className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-secondary text-secondary-foreground [&_svg]:size-5 [&_i]:text-xl\"\n        >\n          <User />\n        </span>\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block text-sm font-semibold text-foreground\">ai2 team</span>\n          <span className=\"block text-xs text-muted-foreground\">@ai2</span>\n          <span className=\"mt-1.5 block text-sm text-muted-foreground\">\n            {children ?? \"A distributed component system you can trust.\"}\n          </span>\n        </span>\n      </span>\n    </Shell>\n  )\n}\n\n/* CompactHoverCard: small and dense. An icon plus one tight block of text, narrow width. */\nexport function CompactHoverCard({ size = \"md\", trigger, children, className }: Props) {\n  return (\n    <Shell width={compactWidth[size]} trigger={trigger} className={className}>\n      <span className=\"flex items-center gap-2.5 p-3\">\n        <span\n          data-slot=\"styled-hover-card-icon\"\n          className=\"flex size-7 shrink-0 items-center justify-center rounded-md bg-secondary text-secondary-foreground [&_svg]:size-4 [&_i]:text-base\"\n        >\n          <Zap />\n        </span>\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-sm font-medium text-foreground\">Quick note</span>\n          <span className=\"block truncate text-xs text-muted-foreground\">\n            {children ?? \"Dense single row.\"}\n          </span>\n        </span>\n      </span>\n    </Shell>\n  )\n}\n\n/* WideHoverCard: wide, two columns. Text on the left, a token statistics list on the right. */\nexport function WideHoverCard({ size = \"md\", trigger, children, className }: Props) {\n  return (\n    <Shell width={wideWidth[size]} trigger={trigger} className={className}>\n      <span className=\"grid grid-cols-2 gap-4 p-4\">\n        <span className=\"min-w-0\">\n          <span className=\"flex items-center gap-2\">\n            <span\n              data-slot=\"styled-hover-card-icon\"\n              className=\"flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary text-secondary-foreground [&_svg]:size-3.5 [&_i]:text-sm\"\n            >\n              <Building2 />\n            </span>\n            <span className=\"block text-sm font-semibold text-foreground\">ai2 labs</span>\n          </span>\n          <span className=\"mt-2 block text-sm text-muted-foreground\">\n            {children ?? \"A wider card splits into two readable columns.\"}\n          </span>\n        </span>\n        <span className=\"flex flex-col gap-2 border-l border-border pl-4\">\n          <span className=\"flex items-center justify-between\">\n            <span className=\"text-xs text-muted-foreground\">Members</span>\n            <span className=\"text-sm font-semibold text-foreground\">24</span>\n          </span>\n          <span className=\"flex items-center justify-between\">\n            <span className=\"text-xs text-muted-foreground\">Projects</span>\n            <span className=\"text-sm font-semibold text-foreground\">12</span>\n          </span>\n          <span className=\"flex items-center justify-between\">\n            <span className=\"text-xs text-muted-foreground\">Uptime</span>\n            <span className=\"text-sm font-semibold text-foreground\">99.9%</span>\n          </span>\n        </span>\n      </span>\n    </Shell>\n  )\n}\n\n/* StackedHoverCard: dikey istif - baslik + aciklama + istatistik satiri alt alta. */\nexport function StackedHoverCard({ size = \"md\", trigger, children, className }: Props) {\n  return (\n    <Shell width={cardWidth[size]} trigger={trigger} className={className}>\n      <span className=\"flex flex-col p-4\">\n        <span className=\"flex items-center gap-2\">\n          <span\n            data-slot=\"styled-hover-card-icon\"\n            className=\"flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary text-secondary-foreground [&_svg]:size-3.5 [&_i]:text-sm\"\n          >\n            <Star />\n          </span>\n          <span className=\"block text-sm font-semibold text-foreground\">Design system</span>\n        </span>\n        <span className=\"mt-2 block text-sm text-muted-foreground\">\n          {children ?? \"A title and description stacked above a stat row.\"}\n        </span>\n        <span className=\"mt-3 grid grid-cols-3 gap-2\">\n          <span className=\"flex flex-col items-center rounded-lg bg-secondary px-2 py-2\">\n            <span className=\"text-sm font-semibold text-secondary-foreground\">128</span>\n            <span className=\"text-xs text-muted-foreground\">Tokens</span>\n          </span>\n          <span className=\"flex flex-col items-center rounded-lg bg-secondary px-2 py-2\">\n            <span className=\"text-sm font-semibold text-secondary-foreground\">51</span>\n            <span className=\"text-xs text-muted-foreground\">Parts</span>\n          </span>\n          <span className=\"flex flex-col items-center rounded-lg bg-secondary px-2 py-2\">\n            <span className=\"text-sm font-semibold text-secondary-foreground\">6</span>\n            <span className=\"text-xs text-muted-foreground\">Axes</span>\n          </span>\n        </span>\n      </span>\n    </Shell>\n  )\n}\n\n/* SplitHoverCard: ust icerik + alt aksiyon bari ayrik. Aradaki border iki bolgeyi\n   gorsel olarak ayirir. */\nexport function SplitHoverCard({ size = \"md\", trigger, children, className }: Props) {\n  return (\n    <Shell width={cardWidth[size]} trigger={trigger} className={className}>\n      <span className=\"block p-4\">\n        <span className=\"flex items-center gap-2\">\n          <span\n            data-slot=\"styled-hover-card-icon\"\n            className=\"flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary text-secondary-foreground [&_svg]:size-3.5 [&_i]:text-sm\"\n          >\n            <Activity />\n          </span>\n          <span className=\"block text-sm font-semibold text-foreground\">Live status</span>\n        </span>\n        <span className=\"mt-2 block text-sm text-muted-foreground\">\n          {children ?? \"Content on top, an action bar separated below.\"}\n        </span>\n      </span>\n      <span\n        data-slot=\"styled-hover-card-actions\"\n        className=\"flex items-center justify-between border-t border-border bg-[color-mix(in_oklab,var(--color-secondary)_45%,transparent)] px-4 py-2.5\"\n      >\n        <span className=\"text-xs text-muted-foreground\">Updated just now</span>\n        <span className=\"inline-flex items-center rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground\">\n          Open\n        </span>\n      </span>\n    </Shell>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/hover-card-layout.tsx"
    }
  ],
  "categories": [
    "styled",
    "hover"
  ],
  "type": "registry:component"
}