{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-state",
  "title": "EmptyState",
  "description": "An empty list as an invitation to act.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "empty-state/EmptyState.css",
      "content": ".cr-empty {\n  display: grid;\n  justify-items: center;\n  gap: var(--cr-space-3);\n  padding: var(--cr-space-8) var(--cr-space-4);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n  text-align: center;\n}\n\n.cr-empty__icon {\n  display: flex;\n  color: var(--cr-color-text-muted);\n  font-size: 48px;\n}\n\n.cr-empty__title {\n  margin: 0;\n  font-family: var(--cr-font-family-display);\n  font-size: var(--cr-font-size-xl);\n  font-weight: var(--cr-font-weight-semibold);\n  letter-spacing: -0.015em;\n}\n\n.cr-empty__description {\n  max-width: 44ch;\n  margin: 0;\n  color: var(--cr-color-text-secondary);\n  font-size: var(--cr-font-size-md);\n  line-height: var(--cr-font-line-height-normal);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/empty-state/EmptyState.css"
    },
    {
      "path": "empty-state/EmptyState.tsx",
      "content": "import type { ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport './EmptyState.css';\n\nexport interface EmptyStateProps {\n  title: ReactNode;\n  /** Why it is empty and what will fill it. */\n  description?: ReactNode;\n  /** The one action that fills it, such as \"Start a run\". */\n  action?: ReactNode;\n  /** A decorative illustration or icon. */\n  icon?: ReactNode;\n  /** Heading level of the title in your page outline. Default 2. */\n  headingLevel?: 2 | 3 | 4;\n  className?: string;\n}\n\n/** An empty list or page as an invitation to act: what goes here, and how to start. */\nexport function EmptyState({ title, description, action, icon, headingLevel = 2, className }: EmptyStateProps) {\n  const H = `h${headingLevel}` as const;\n  return (\n    <div className={cx('cr-empty', className)}>\n      {icon && (\n        <span className=\"cr-empty__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <H className=\"cr-empty__title\">{title}</H>\n      {description && <p className=\"cr-empty__description\">{description}</p>}\n      {action}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/empty-state/EmptyState.tsx"
    }
  ],
  "categories": [
    "molecule",
    "data-display"
  ],
  "type": "registry:ui"
}