{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-state",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "empty-state.tsx",
      "target": "components/ui/empty-state.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface EmptyStateProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n  variant?: \"solid\" | \"dashed\";\n}\n\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      className,\n      icon,\n      title,\n      description,\n      action,\n      variant = \"solid\",\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"group flex flex-col items-center justify-center rounded-2xl border border-border px-6 py-14 text-center\",\n        \"transition-tint duration-slow ease-soft hover:border-border-strong\",\n        variant === \"dashed\" ? \"border-dashed bg-transparent\" : \"bg-surface\",\n        className,\n      )}\n      {...props}\n    >\n      {icon != null && (\n        <div\n          aria-hidden=\"true\"\n          className={cn(\n            \"mb-4 flex h-11 w-11 items-center justify-center rounded-xl border border-border bg-surface-2 text-faint [&_svg]:h-5 [&_svg]:w-5\",\n            \"transition-control duration-slow ease-soft\",\n            \"group-hover:-translate-y-0.5 group-hover:border-border-strong group-hover:text-accent group-hover:glow-accent\",\n            \"motion-reduce:transition-none motion-reduce:group-hover:translate-y-0\",\n          )}\n        >\n          {icon}\n        </div>\n      )}\n      <h3 className=\"text-balance text-base font-semibold tracking-[-0.01em] text-ink\">\n        {title}\n      </h3>\n      {description != null && (\n        <p className=\"mt-2 max-w-sm text-sm leading-relaxed text-pretty text-muted\">\n          {description}\n        </p>\n      )}\n      {action != null && <div className=\"mt-6\">{action}</div>}\n    </div>\n  ),\n);\nEmptyState.displayName = \"EmptyState\";\n"
    }
  ]
}