{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltips-shape",
  "title": "Shape tooltips",
  "description": "Styled tooltips: the Shape set. 5 decorative tooltips variations (BubbleTooltip, PillTooltip, NotchTooltip, CalloutTooltip, BadgeTooltip) 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-shape.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Shape tooltip family: 5 shaped bubbles (a speech bubble, a pill, a notched/ticket\n   edge, a protrusion, a small chip). 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. The arrow/tail is colored 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\n/* A base with no radius - each shape adds its own corner rounding. */\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 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/* Bubble: alt ucunda token kuyruklu konusma balonu. */\nexport function BubbleTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Wrapper\n      bubble={\n        <span role=\"tooltip\" className={cn(bubbleBase, bubbleSize[size], \"rounded-xl border border-border bg-popover text-popover-foreground\", className)}>\n          {content}\n          <span className=\"absolute left-1/2 top-full size-2.5 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-[2px] border-b border-r border-border bg-popover\" />\n        </span>\n      }\n    >\n      {children}\n    </Wrapper>\n  )\n}\n\n/* Pill: tam yuvarlak hap balon. */\nexport function PillTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Wrapper\n      bubble={\n        <span role=\"tooltip\" className={cn(bubbleBase, bubbleSize[size], \"rounded-full border border-border bg-popover text-popover-foreground\", className)}>\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Wrapper>\n  )\n}\n\n/* Notch: yanlarindan cenetlenmis bilet kenari (token background delikler). */\nexport function NotchTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Wrapper\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(\n            bubbleBase,\n            bubbleSize[size],\n            \"rounded-lg border border-border bg-popover text-popover-foreground\",\n            \"before:absolute before:left-0 before:top-1/2 before:size-2.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:border before:border-border before:bg-background before:content-['']\",\n            \"after:absolute after:right-0 after:top-1/2 after:size-2.5 after:translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-border after:bg-background after:content-['']\",\n            className\n          )}\n        >\n          {content}\n        </span>\n      }\n    >\n      {children}\n    </Wrapper>\n  )\n}\n\n/* Callout: renkli token sol kenarli cikinti balonu. */\nexport function CalloutTooltip({ size = \"md\", content, children, className }: Props) {\n  return (\n    <Wrapper\n      bubble={\n        <span\n          role=\"tooltip\"\n          className={cn(bubbleBase, bubbleSize[size], \"rounded-md border border-l-4 border-border border-l-info bg-popover text-left text-popover-foreground\", className)}\n        >\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/* Badge: kucuk, kompakt cip stili ipucu. */\nexport function BadgeTooltip({ 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-1.5 w-max max-w-56 -translate-x-1/2 translate-y-1 rounded-full px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-wide opacity-0 shadow-sm 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            \"bg-info text-info-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-shape.tsx"
    }
  ],
  "categories": [
    "styled",
    "tooltips"
  ],
  "type": "registry:component"
}