{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-state",
  "type": "registry:ui",
  "title": "EmptyState",
  "description": "Centered icon tile, title, subtitle, and optional call to action for an empty list or a fresh install.",
  "categories": [
    "overlays",
    "display"
  ],
  "registryDependencies": [
    "https://whiskeyjack.net/r/button.json",
    "https://whiskeyjack.net/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/empty-state.tsx",
      "type": "registry:ui",
      "target": "components/ui/empty-state.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\n\nexport interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon element rendered inside the accent-tinted tile. Pass a Phosphor (or any) icon node. */\n  icon: React.ReactNode\n  /** Primary heading. */\n  title: string\n  /** Supporting text below the heading. */\n  subtitle: string\n  /**\n   * Label for the optional call-to-action button. Renders an accent `Button`.\n   * For anything the shorthand cannot express -- an icon in the button, a\n   * different variant, a `<label>` wrapping a file input -- use `action`.\n   */\n  ctaLabel?: string\n  /** Handler for the optional call-to-action button. */\n  onCta?: () => void\n  /**\n   * Arbitrary call-to-action node, rendered in place of the `ctaLabel` button.\n   * Takes precedence over `ctaLabel`/`onCta` when both are given.\n   */\n  action?: React.ReactNode\n}\n\n/**\n * Centered empty-state layout: icon tile + title + subtitle + optional CTA.\n *\n * The icon tile uses the accent color for its background. Pass translated\n * strings -- the DS is i18n-free.\n *\n * Two ways to give it an action. `ctaLabel` + `onCta` is the shorthand and\n * renders an accent `Button`. `action` is the slot, for when the shorthand is\n * too narrow: an upload button that needs an icon, a secondary variant, or a\n * control that is not a button at all. The slot was added in 0.6.0 after an\n * external consumer hit the shorthand's ceiling building a file drop zone.\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  { icon, title, subtitle, ctaLabel, onCta, action, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn('flex flex-col items-center justify-center text-center py-20 px-4', className)}\n      {...props}\n    >\n      <div className=\"w-16 h-16 rounded-2xl bg-[var(--color-accent-50)] dark:bg-[var(--color-surface-muted-dark)] flex items-center justify-center mb-4\">\n        {icon}\n      </div>\n      <h2 className=\"text-lg font-semibold text-[var(--color-text-primary-light)] dark:text-[var(--color-text-primary-dark)] mb-1\">\n        {title}\n      </h2>\n      <p className=\"text-sm text-[var(--color-text-secondary-light)] dark:text-[var(--color-text-secondary-dark)] mb-6 max-w-xs\">\n        {subtitle}\n      </p>\n      {action ??\n        (ctaLabel && onCta ? (\n          <Button variant=\"accent\" onClick={onCta}>\n            {ctaLabel}\n          </Button>\n        ) : null)}\n    </div>\n  )\n})\n\nEmptyState.displayName = \"EmptyState\"\n"
    }
  ],
  "docs": "Use it wherever a list, tab, or screen has no content yet: a first run, an empty search, a cleared history. The subtitle sets expectations and the call to action points at the obvious next step. `ctaLabel` + `onCta` is the shorthand and renders an accent Button; pass `action` instead when you need an icon in the button, a different variant, or a control that is not a button at all.",
  "meta": {
    "group": "overlays",
    "related": [
      "card"
    ],
    "exports": [
      "EmptyState"
    ],
    "siteSlug": "empty-state"
  }
}