{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltips-styled",
  "title": "Tooltips essentials",
  "description": "Styled tooltips: the essentials set. 5 decorative tooltips variations (GlassTooltip, GradientTooltip, ArrowTooltip, DarkTooltip, SlideTooltip) 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-styled.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Tooltip family: 5 decorative tooltips. Self-contained (no radix, no new deps) - it\n   opens on hover/focus with CSS, and the transform transitions are protected with\n   motion-reduce. Color comes ONLY from tokens. Size = the bubble padding/text.\n   children = the trigger, content = the tooltip text. The bubble is centered above\n   the trigger. */\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/* Glass: buzlu cam balon. */\nexport function GlassTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Wrapper\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(bubbleBase, bubbleSize[size], \"border border-border bg-surface-2/70 text-foreground supports-[backdrop-filter]:bg-surface-2/40 supports-[backdrop-filter]:backdrop-blur-md\", className)}\n        >\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Wrapper>\n  )\n}\n\n/* Gradient: token gradyan balon. */\nexport function GradientTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Wrapper\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(bubbleBase, bubbleSize[size], \"text-info-foreground [background-image:linear-gradient(135deg,var(--info),var(--brand))]\", className)}\n        >\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Wrapper>\n  )\n}\n\n/* Arrow: alt ucunda oklu klasik balon. */\nexport function ArrowTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Wrapper\n      bubble={\n        <span role=\"tooltip\" className={cn(bubbleBase, bubbleSize[size], \"border border-border bg-popover text-popover-foreground\", className)}>\n          {content}\n          <span className=\"absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-border bg-popover\" />\n        </span>\n      }\n    >\n      {children}\n    </Wrapper>\n  )\n}\n\n/* Dark: yuksek kontrast (foreground zemin). */\nexport function DarkTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Wrapper\n      bubble={\n        <span role=\"tooltip\" className={cn(bubbleBase, bubbleSize[size], \"bg-foreground text-background\", className)}>\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Wrapper>\n  )\n}\n\n/* Slide: daha belirgin kayma ile giren balon. */\nexport function SlideTooltip({ 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 translate-y-3 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            bubbleSize[size],\n            \"border border-border bg-secondary text-secondary-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-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "tooltips"
  ],
  "type": "registry:component"
}