{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltips-animated",
  "title": "Animated tooltips",
  "description": "Styled tooltips: the Animated set. 5 decorative tooltips variations (PopTooltip, FlipTooltip, SwingTooltip, TypeTooltip, GlowInTooltip) 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-animated.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Animated tooltip family: 5 bubbles with an entrance animation (CSS, driven by\n   group-hover/focus). Self-contained (no radix, no new deps). The positioning is on\n   a static outer layer; the inner layer carries the entrance transform. ALL\n   transform transitions are disabled with motion-reduce - under reduced motion the\n   bubble appears instantly/flat. Color comes ONLY from tokens. size = the bubble\n   padding/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 positioner = \"pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2\"\nconst skin = \"border border-border bg-popover text-popover-foreground\"\n\ninterface Props {\n  size?: StyledSize\n  content: React.ReactNode\n  children: React.ReactNode\n  className?: string\n}\n\nfunction Shell({ children, bubble }: { children: React.ReactNode; bubble: React.ReactNode }) {\n  return (\n    <span data-slot=\"styled-tooltip\" className=\"group relative inline-flex\">\n      {children}\n      <span className={positioner}>{bubble}</span>\n    </span>\n  )\n}\n\n/* Pop: yayli olcekle patlayarak girer. */\nexport function PopTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Shell\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(\n            \"block w-max max-w-56 origin-bottom scale-50 rounded-lg font-medium opacity-0 shadow-md transition-[opacity,transform] duration-(--motion-base) ease-[cubic-bezier(0.34,1.56,0.64,1)] 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            skin,\n            className\n          )}\n        >\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Shell>\n  )\n}\n\n/* Flip: X ekseninde donerek girer. */\nexport function FlipTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Shell\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(\n            \"block w-max max-w-56 origin-bottom rounded-lg font-medium opacity-0 shadow-md transition-[opacity,transform] duration-(--motion-base) ease-(--motion-ease) [transform:perspective(400px)_rotateX(-85deg)] group-hover:opacity-100 group-hover:[transform:perspective(400px)_rotateX(0deg)] group-focus-within:opacity-100 group-focus-within:[transform:perspective(400px)_rotateX(0deg)] motion-reduce:transition-none\",\n            bubbleSize[size],\n            skin,\n            className\n          )}\n        >\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Shell>\n  )\n}\n\n/* Swing: hafif donme ile sallanarak girer. */\nexport function SwingTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Shell\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(\n            \"block w-max max-w-56 origin-top -rotate-6 rounded-lg font-medium opacity-0 shadow-md transition-[opacity,transform] duration-(--motion-base) ease-[cubic-bezier(0.34,1.56,0.64,1)] group-hover:rotate-0 group-hover:opacity-100 group-focus-within:rotate-0 group-focus-within:opacity-100 motion-reduce:transition-none\",\n            bubbleSize[size],\n            skin,\n            className\n          )}\n        >\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Shell>\n  )\n}\n\n/* Type: the content opens as if being typed (width + opacity). */\nexport function TypeTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Shell\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(\n            \"block max-w-0 overflow-hidden whitespace-nowrap rounded-lg font-medium opacity-0 shadow-md transition-[opacity,max-width] duration-(--motion-slow) ease-(--motion-ease) group-hover:max-w-56 group-hover:opacity-100 group-focus-within:max-w-56 group-focus-within:opacity-100 motion-reduce:transition-none\",\n            bubbleSize[size],\n            skin,\n            className\n          )}\n        >\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Shell>\n  )\n}\n\n/* GlowIn: token isima ile birlikte belirir. */\nexport function GlowInTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Shell\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(\n            \"block w-max max-w-56 rounded-lg font-medium opacity-0 shadow-none transition-[opacity,box-shadow] duration-(--motion-base) ease-(--motion-ease) group-hover:opacity-100 group-hover:shadow-[0_0_18px_-2px_color-mix(in_oklab,var(--color-info)_55%,transparent)] group-focus-within:opacity-100 group-focus-within:shadow-[0_0_18px_-2px_color-mix(in_oklab,var(--color-info)_55%,transparent)] motion-reduce:transition-none\",\n            bubbleSize[size],\n            skin,\n            className\n          )}\n        >\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Shell>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/tooltips-animated.tsx"
    }
  ],
  "categories": [
    "styled",
    "tooltips"
  ],
  "type": "registry:component"
}