{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-empty-state",
  "type": "registry:component",
  "title": "Empty state",
  "description": "The first screen: a greeting, three ways in, and the composer front and center.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/empty-state.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/empty-state.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { ArrowUpIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { inkButton, paper } from \"./surfaces\";\n\nexport function EmptyState({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-state\"\n      className={cn(\n        \"flex w-full max-w-md flex-col items-center gap-7\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function EmptyStateGreeting({\n  className,\n  ...props\n}: ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"empty-state-greeting\"\n      className={cn(\n        \"fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-center text-2xl font-medium tracking-tight duration-500 motion-reduce:animate-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function EmptyStateSuggestions({\n  className,\n  ...props\n}: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-state-suggestions\"\n      className={cn(\"flex flex-wrap justify-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function EmptyStateSuggestion({\n  index = 0,\n  className,\n  style,\n  ...props\n}: ComponentProps<\"button\"> & { index?: number }) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"empty-state-suggestion\"\n      style={{ animationDelay: `${120 + index * 70}ms`, ...style }}\n      className={cn(\n        paper,\n        \"fade-in slide-in-from-bottom-2 animate-in fill-mode-both focus-visible:ring-foreground/20 rounded-full px-4 py-2 text-[13px] transition-transform duration-500 outline-none hover:-translate-y-px focus-visible:ring-1 active:scale-[0.96] motion-reduce:animate-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function EmptyStateComposer({\n  placeholder,\n  onSend,\n  className,\n  style,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"children\" | \"placeholder\"> & {\n  placeholder: string;\n  onSend?: () => void;\n}) {\n  return (\n    <div\n      data-slot=\"empty-state-composer\"\n      style={{ animationDelay: \"360ms\", ...style }}\n      className={cn(\n        paper,\n        \"fade-in slide-in-from-bottom-2 animate-in fill-mode-both flex h-13 w-full items-center justify-between rounded-full py-2 ps-5 pe-2.5 duration-500 motion-reduce:animate-none\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-foreground/35 text-[15px]\">{placeholder}</span>\n      <button\n        type=\"button\"\n        aria-label=\"Send\"\n        onClick={onSend}\n        disabled={!onSend}\n        className={cn(\n          inkButton,\n          \"flex size-8 items-center justify-center rounded-full disabled:pointer-events-none disabled:opacity-30\",\n        )}\n      >\n        <ArrowUpIcon className=\"size-4\" />\n      </button>\n    </div>\n  );\n}\n"
    }
  ]
}