{
  "name": "empty-state",
  "type": "registry:ui",
  "title": "EmptyState",
  "description": "Teaches the surface's verb, in voice; never 'nothing here.' Two variants: panel and inline.",
  "dependencies": [
    "@candlelight-ds/tokens",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "button",
    "utils"
  ],
  "files": [
    {
      "path": "components/ui/EmptyState.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\n/**\n * EmptyState — teaches the surface's verb, in voice; never \"nothing here.\"\n * Two variants (spec §4): `panel` for a region's primary empty state,\n * `inline` for small list areas.\n *\n * Use when: a list or region has no content yet and there is a next verb\n * to teach (\"Find a sound…\").\n * Don't use when: content is loading (Skeleton) or an error needs naming\n * (name the thing and the recovery instead).\n */\n\nimport { Button } from './Button'\nimport { cn } from '@/lib/utils'\n\ninterface EmptyStateProps {\n  /** The teaching line — a verb, in the product's voice. */\n  title: string\n  description?: string\n  actionLabel?: string\n  onAction?: () => void\n  icon?: React.ReactNode\n  variant?: 'panel' | 'inline'\n  className?: string\n}\n\nexport function EmptyState({\n  title,\n  description,\n  actionLabel,\n  onAction,\n  icon,\n  variant = 'panel',\n  className,\n}: EmptyStateProps) {\n  if (variant === 'inline') {\n    return (\n      <div className={cn('py-8 text-center text-body text-ink-faint', className)}>\n        {title}\n        {actionLabel && onAction ? (\n          <button\n            type=\"button\"\n            onClick={onAction}\n            className=\"ms-2 font-medium text-brass transition-colors hover:text-brass-hot\"\n          >\n            {actionLabel}\n          </button>\n        ) : null}\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        'rounded-md border border-dashed border-hairline p-12 text-center',\n        className\n      )}\n    >\n      {icon ? <div className=\"mb-4 flex justify-center text-ink-faint\">{icon}</div> : null}\n      <h3 className=\"text-title font-semibold tracking-title text-ink\">{title}</h3>\n      {description ? (\n        <p className=\"mx-auto mt-2 max-w-[42ch] text-body leading-6 text-ink-faint\">\n          {description}\n        </p>\n      ) : null}\n      {actionLabel && onAction ? (\n        <Button className=\"mt-5\" variant=\"secondary\" onClick={onAction}>\n          {actionLabel}\n        </Button>\n      ) : null}\n    </div>\n  )\n}\n",
      "target": "components/ui/EmptyState.tsx"
    }
  ],
  "meta": {
    "candlelight": {
      "category": "primitive",
      "gRules": [
        "G5"
      ],
      "useWhen": "A list or region has no content yet and there is a next verb to teach.",
      "dontUseWhen": "Content is loading (Skeleton) or an error needs naming.",
      "states": [
        "panel",
        "inline",
        "with action"
      ],
      "keyboard": [],
      "acceptanceTests": [
        "The title is a verb in the product's voice, never 'No items found.'"
      ]
    }
  }
}