{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltips-interactive",
  "title": "Interactive tooltips",
  "description": "Styled tooltips: the Interactive set. 5 decorative tooltips variations (ScaleTooltip, UnderlineTooltip, LiftTooltip, FadeScaleTooltip, DelayTooltip) 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/tooltips-interactive.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Interactive tooltip family: 5 variations with richer trigger/bubble responses.\n   Self-contained (no radix, no new deps) - it opens on hover/focus with CSS, and the\n   transform transitions are protected with motion-reduce. Color comes ONLY from\n   tokens. size = the bubble padding/text. children = the trigger, content = the\n   tooltip text. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst bubbleSize: Record<StyledSize, string> = {\n  sm: \"px-2 py-1 text-xs\",\n  md: \"px-2.5 py-1.5 text-xs\",\n  lg: \"px-3 py-2 text-sm\",\n  xl: \"px-3.5 py-2.5 text-sm\",\n}\n\nconst bubbleBase =\n  \"pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-56 -translate-x-1/2 translate-y-1 rounded-lg font-medium opacity-0 shadow-md transition-[opacity,transform] duration-(--motion-base) ease-(--motion-ease) group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:transition-none\"\n\ninterface Props {\n  size?: StyledSize\n  content: React.ReactNode\n  children: React.ReactNode\n  className?: string\n}\n\nfunction Wrapper({ children, bubble }: { children: React.ReactNode; bubble: React.ReactNode }) {\n  return (\n    <span data-slot=\"styled-tooltip\" className=\"group relative inline-flex\">\n      {children}\n      {bubble}\n    </span>\n  )\n}\n\n/* Scale: acikken tetikleyici hafifce buyur. */\nexport function ScaleTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <span data-slot=\"styled-tooltip\" className=\"group relative inline-flex\">\n      <span className=\"inline-flex transition-transform duration-(--motion-base) ease-(--motion-ease) group-hover:scale-105 group-focus-within:scale-105 motion-reduce:transition-none\">\n        {children}\n      </span>\n      <span role=\"tooltip\" className={cn(bubbleBase, bubbleSize[size], \"border border-border bg-popover text-popover-foreground\", className)}>\n        {content}\n      </span>\n    </span>\n  )\n}\n\n/* Underline: the trigger gains a token underline while open. */\nexport function UnderlineTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <span data-slot=\"styled-tooltip\" className=\"group relative inline-flex\">\n      <span className=\"inline-flex underline decoration-transparent decoration-2 underline-offset-4 transition-[text-decoration-color] duration-(--motion-base) ease-(--motion-ease) group-hover:decoration-info group-focus-within:decoration-info motion-reduce:transition-none\">\n        {children}\n      </span>\n      <span role=\"tooltip\" className={cn(bubbleBase, bubbleSize[size], \"border border-border bg-popover text-popover-foreground\", className)}>\n        {content}\n      </span>\n    </span>\n  )\n}\n\n/* Lift: balon daha yuksek bir yoldan kalkarak girer. */\nexport function LiftTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Wrapper\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(\n            \"pointer-events-none absolute bottom-full left-1/2 z-10 mb-3 w-max max-w-56 -translate-x-1/2 translate-y-4 rounded-lg font-medium opacity-0 shadow-lg transition-[opacity,transform] duration-(--motion-base) ease-(--motion-ease) group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:transition-none\",\n            bubbleSize[size],\n            \"border border-border bg-popover text-popover-foreground\",\n            className\n          )}\n        >\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Wrapper>\n  )\n}\n\n/* FadeScale: balon opaklik + olcekle birlikte belirir. */\nexport function FadeScaleTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Wrapper\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(\n            \"pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-56 -translate-x-1/2 scale-90 rounded-lg font-medium opacity-0 shadow-md transition-[opacity,transform] duration-(--motion-base) ease-(--motion-ease) group-hover:scale-100 group-hover:opacity-100 group-focus-within:scale-100 group-focus-within:opacity-100 motion-reduce:transition-none\",\n            bubbleSize[size],\n            \"border border-border bg-popover text-popover-foreground\",\n            className\n          )}\n        >\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Wrapper>\n  )\n}\n\n/* Delay: the transition starts later, for a considered feel. */\nexport function DelayTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Wrapper\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(\n            bubbleBase,\n            \"duration-(--motion-slow) group-hover:delay-300 group-focus-within:delay-300\",\n            bubbleSize[size],\n            \"border border-border bg-popover text-popover-foreground\",\n            className\n          )}\n        >\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Wrapper>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/tooltips-interactive.tsx"
    }
  ],
  "categories": [
    "styled",
    "tooltips"
  ],
  "type": "registry:component"
}