{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-typing-indicator",
  "type": "registry:component",
  "title": "Typing indicator",
  "description": "The classic three dots, tuned to read as presence rather than noise.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/typing-indicator.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/typing-indicator.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { paper } from \"./surfaces\";\n\nconst DOT_DELAYS = [\"-0.32s\", \"-0.16s\", \"0s\"];\n\nexport function TypingIndicator({\n  variant = \"bubble\",\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"variant\" | \"role\" | \"aria-label\"\n> & {\n  variant?: \"bubble\" | \"bare\";\n}) {\n  const dots = DOT_DELAYS.map((delay) => (\n    <span\n      key={delay}\n      aria-hidden\n      className=\"bg-foreground/40 size-1.5 animate-bounce rounded-full motion-reduce:animate-none\"\n      style={{ animationDelay: delay, animationDuration: \"1.1s\" }}\n    />\n  ));\n\n  if (variant === \"bare\") {\n    return (\n      <div\n        data-slot=\"typing-indicator\"\n        data-variant=\"bare\"\n        role=\"status\"\n        aria-label=\"Assistant is typing\"\n        className={cn(\"flex gap-1\", className)}\n        {...props}\n      >\n        {dots}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"typing-indicator\"\n      data-variant=\"bubble\"\n      className={cn(paper, \"w-fit rounded-full px-4 py-3.5\", className)}\n      {...props}\n    >\n      <div\n        role=\"status\"\n        aria-label=\"Assistant is typing\"\n        className=\"flex gap-1\"\n      >\n        {dots}\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}