{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card-accent",
  "title": "Card-accent hover",
  "description": "Styled hover: the Card-accent set. 5 decorative hover variations (BorderHoverCard, GlowHoverCard, RingHoverCard, TopBarHoverCard, FillHoverCard) 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-accent.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { Droplet, Focus, PanelTop, Sparkles, SquareDashed } from \"lucide-react\"\nimport { useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Accent hover-card family: 5 decorative hover cards in a token accent color. Each\n   export is a complete hover card and SELF-CONTAINED (no radix, no portal): a\n   trigger + a card positioned below it, opened on hover/focus with CSS. The opening\n   mechanism is group-hover / group-focus-within (the same as the essentials shell);\n   gated on useReducedMotion(), reduced motion drops the slide + transition and the\n   card appears instantly. Color comes ONLY from tokens; transparency ONLY via\n   color-mix(in oklab, var(--color-x) N%, transparent). The accent color is the\n   primary token; the variants apply the accent to a DIFFERENT part of the card: a\n   pronounced border, a glow box-shadow, a double-ring box-shadow, a top strip, a\n   soft fill. Size = card width. trigger = the trigger, children = the card\n   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\n/* The card's static (always valid) classes: position, hidden initial state, becoming visible and opaque on hover or focus. */\nconst cardBase =\n  \"invisible absolute left-1/2 top-full z-20 mt-2 -translate-x-1/2 rounded-xl p-4 text-left opacity-0 shadow-lg group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100\"\n\n/* Motion layer: a slight slide plus a transition. Dropped entirely under reduced motion. */\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 motion-reduce:transition-none\"\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\ntype CoreProps = Props & {\n  /** Kartin cerceve / box-shadow / dolgu aksan siniflari. */\n  panelClassName?: string\n  /** The decorative layer added inside the card (a top accent strip and so on). */\n  accent?: React.ReactNode\n  /** Baslik satiri ikonu. */\n  icon: React.ReactNode\n  /** Baslik metni. */\n  label: string\n  /** children verilmezse gosterilen govde metni. */\n  body: string\n}\n\n/* Shared shell: trigger plus an accent card positioned below. */\nfunction AccentHoverCard({\n  size = \"md\",\n  trigger,\n  children,\n  className,\n  panelClassName,\n  accent,\n  icon,\n  label,\n  body,\n}: CoreProps) {\n  const reduce = useReducedMotion()\n  const fallback = (\n    <button type=\"button\" className={triggerBase}>\n      {icon}\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        className={cn(\n          cardBase,\n          reduce ? null : cardMotion,\n          cardWidth[size],\n          \"block border border-border bg-popover text-popover-foreground\",\n          panelClassName,\n          className\n        )}\n      >\n        {accent}\n        <span className=\"flex items-center gap-2 text-sm font-semibold text-foreground\">\n          <span\n            aria-hidden=\"true\"\n            className=\"flex text-primary [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n          >\n            {icon}\n          </span>\n          {label}\n        </span>\n        <span className=\"mt-1.5 block text-sm text-muted-foreground\">\n          {children ?? body}\n        </span>\n      </span>\n    </span>\n  )\n}\n\n/* BorderHoverCard: a pronounced token border. A thick (2px) frame in the primary\n   token color instead of a thin (1px) border. */\nexport function BorderHoverCard(props: Props) {\n  return (\n    <AccentHoverCard\n      icon={<SquareDashed />}\n      label=\"Bordered\"\n      body=\"A prominent token border frames the card on hover.\"\n      panelClassName=\"border-2 border-[color-mix(in_oklab,var(--color-primary)_55%,transparent)]\"\n      {...props}\n    />\n  )\n}\n\n/* GlowHoverCard: kart etrafinda genis, dusuk yogunluklu primary token glow. */\nexport function GlowHoverCard(props: Props) {\n  return (\n    <AccentHoverCard\n      icon={<Sparkles />}\n      label=\"Glow\"\n      body=\"A soft token glow radiates from behind the card.\"\n      panelClassName=\"border-[color-mix(in_oklab,var(--color-primary)_35%,transparent)] shadow-[0_0_30px_color-mix(in_oklab,var(--color-primary)_28%,transparent),0_0_0_1px_color-mix(in_oklab,var(--color-primary)_20%,transparent)]\"\n      {...props}\n    />\n  )\n}\n\n/* RingHoverCard: cift halka. Border + iki azalan yogunlukta primary token box-shadow\n   cizgisi (color-mix ile). */\nexport function RingHoverCard(props: Props) {\n  return (\n    <AccentHoverCard\n      icon={<Focus />}\n      label=\"Ring\"\n      body=\"A token ring wraps the card with a soft outer halo.\"\n      panelClassName=\"border-[color-mix(in_oklab,var(--color-primary)_40%,transparent)] shadow-[0_0_0_1px_color-mix(in_oklab,var(--color-primary)_45%,transparent),0_0_0_4px_color-mix(in_oklab,var(--color-primary)_18%,transparent)]\"\n      {...props}\n    />\n  )\n}\n\n/* TopBarHoverCard: a full-width primary token accent strip above the card (h-1). overflow-hidden clips the strip's top corners to match the card. */\nexport function TopBarHoverCard(props: Props) {\n  return (\n    <AccentHoverCard\n      icon={<PanelTop />}\n      label=\"Top bar\"\n      body=\"A token accent strip runs across the top edge of the card.\"\n      panelClassName=\"overflow-hidden\"\n      accent={\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-x-0 top-0 h-1 bg-primary\"\n        />\n      }\n      {...props}\n    />\n  )\n}\n\n/* FillHoverCard: the card surface is a light primary token soft fill (mixed over\n   popover with color-mix), plus a thin accent border. */\nexport function FillHoverCard(props: Props) {\n  return (\n    <AccentHoverCard\n      icon={<Droplet />}\n      label=\"Fill\"\n      body=\"The card surface carries a faint token fill.\"\n      panelClassName=\"border-[color-mix(in_oklab,var(--color-primary)_30%,transparent)] bg-[color-mix(in_oklab,var(--color-primary)_6%,var(--color-popover))]\"\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/hover-card-accent.tsx"
    }
  ],
  "categories": [
    "styled",
    "hover"
  ],
  "type": "registry:component"
}