{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card-styled",
  "title": "Card-styled hover",
  "description": "Styled hover: the Card-styled set. 5 decorative hover variations (ProfileHoverCard, GlassHoverCard, PreviewHoverCard, StatsHoverCard, MediaHoverCard) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/hover-card-styled.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* HoverCard family: 5 decorative hover cards. Self-contained (no radix, no portal) - a trigger plus a card positioned below, opening on hover and focus through CSS (opacity plus a slight slide), with the transform transitions guarded by motion-reduce. Colour comes ONLY from tokens; alpha via color-mix. Size = the card width. trigger = the trigger, children = the card content. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst cardWidth: Record<StyledSize, string> = {\n  sm: \"w-56\",\n  md: \"w-64\",\n  lg: \"w-72\",\n  xl: \"w-80\",\n}\n\nconst cardBase =\n  \"invisible absolute left-1/2 top-full z-20 mt-2 -translate-x-1/2 translate-y-1 rounded-xl border border-border p-4 text-left opacity-0 shadow-lg transition-[opacity,transform] duration-(--motion-base) ease-(--motion-ease) group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:visible group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:transition-none\"\n\nconst triggerBase =\n  \"inline-flex items-center rounded-md font-medium text-primary underline-offset-4 outline-none hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n\ninterface Props {\n  size?: StyledSize\n  trigger?: React.ReactNode\n  children?: React.ReactNode\n  className?: string\n}\n\nfunction Wrapper({\n  trigger,\n  card,\n}: {\n  trigger: React.ReactNode\n  card: React.ReactNode\n}) {\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      {card}\n    </span>\n  )\n}\n\n/* Profile: bas harf avatar + isim + kisa bio + takip butonu. */\nexport function ProfileHoverCard({ size = \"md\", trigger, children, className }: Props) {\n  return (\n    <Wrapper\n      trigger={trigger}\n      card={\n        <span\n          role=\"dialog\"\n          className={cn(cardBase, cardWidth[size], \"block bg-popover text-popover-foreground\", className)}\n        >\n          <span className=\"flex items-center gap-3\">\n            <span className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-secondary text-sm font-medium text-secondary-foreground select-none\">\n              AI\n            </span>\n            <span className=\"flex flex-col\">\n              <span className=\"text-sm font-semibold\">ai2 team</span>\n              <span className=\"text-xs text-muted-foreground\">@ai2</span>\n            </span>\n          </span>\n          <span className=\"mt-3 block text-sm text-muted-foreground\">\n            {children ?? \"Designing a distributed component system you can trust.\"}\n          </span>\n          <span className=\"mt-3 inline-flex items-center rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground\">\n            Follow\n          </span>\n        </span>\n      }\n    />\n  )\n}\n\n/* Glass: buzlu cam kart + backdrop-blur, genel icerik. */\nexport function GlassHoverCard({ size = \"md\", trigger, children, className }: Props) {\n  return (\n    <Wrapper\n      trigger={trigger}\n      card={\n        <span\n          role=\"dialog\"\n          className={cn(\n            cardBase,\n            cardWidth[size],\n            \"block text-popover-foreground [background-color:color-mix(in_oklab,var(--popover)_70%,transparent)] supports-[backdrop-filter]:[background-color:color-mix(in_oklab,var(--popover)_45%,transparent)] supports-[backdrop-filter]:backdrop-blur-md\",\n            className\n          )}\n        >\n          {children ?? (\n            <span className=\"block text-sm text-muted-foreground\">\n              A frosted glass surface that layers softly over the content behind it.\n            </span>\n          )}\n        </span>\n      }\n    />\n  )\n}\n\n/* Preview: a title plus a few lines of preview text. */\nexport function PreviewHoverCard({ size = \"md\", trigger, children, className }: Props) {\n  return (\n    <Wrapper\n      trigger={trigger}\n      card={\n        <span\n          role=\"dialog\"\n          className={cn(cardBase, cardWidth[size], \"block bg-popover text-popover-foreground\", className)}\n        >\n          <span className=\"text-sm font-semibold\">Preview</span>\n          <span className=\"mt-1.5 block text-sm leading-relaxed text-muted-foreground\">\n            {children ??\n              \"A short preview of the linked content. Just enough context to decide whether to open it in full.\"}\n          </span>\n        </span>\n      }\n    />\n  )\n}\n\n/* Stats: 2-3 token istatistik blogu satiri. */\nexport function StatsHoverCard({ size = \"md\", trigger, children, className }: Props) {\n  return (\n    <Wrapper\n      trigger={trigger}\n      card={\n        <span\n          role=\"dialog\"\n          className={cn(cardBase, cardWidth[size], \"block bg-popover text-popover-foreground\", className)}\n        >\n          {children ?? (\n            <span className=\"grid grid-cols-3 gap-2\">\n              <span className=\"flex flex-col items-center rounded-lg bg-secondary px-2 py-2.5\">\n                <span className=\"text-sm font-semibold text-secondary-foreground\">128</span>\n                <span className=\"text-xs text-muted-foreground\">Posts</span>\n              </span>\n              <span className=\"flex flex-col items-center rounded-lg bg-secondary px-2 py-2.5\">\n                <span className=\"text-sm font-semibold text-secondary-foreground\">4.2k</span>\n                <span className=\"text-xs text-muted-foreground\">Followers</span>\n              </span>\n              <span className=\"flex flex-col items-center rounded-lg bg-secondary px-2 py-2.5\">\n                <span className=\"text-sm font-semibold text-secondary-foreground\">312</span>\n                <span className=\"text-xs text-muted-foreground\">Following</span>\n              </span>\n            </span>\n          )}\n        </span>\n      }\n    />\n  )\n}\n\n/* Media: ustte token thumbnail bloku + altta baslik. */\nexport function MediaHoverCard({ size = \"md\", trigger, children, className }: Props) {\n  return (\n    <Wrapper\n      trigger={trigger}\n      card={\n        <span\n          role=\"dialog\"\n          className={cn(cardBase, cardWidth[size], \"block bg-popover text-popover-foreground\", className)}\n        >\n          <span\n            aria-hidden=\"true\"\n            className=\"block h-28 w-full rounded-lg [background-image:linear-gradient(135deg,var(--surface-2),var(--surface-3))]\"\n          />\n          <span className=\"mt-3 block text-sm text-muted-foreground\">\n            {children ?? \"A thumbnail preview with a short caption below.\"}\n          </span>\n        </span>\n      }\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/hover-card-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "hover"
  ],
  "type": "registry:component"
}