{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "system-states",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Three variants. Always one next action.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { Button } from \"@/components/ledger/button\";\nimport { InfoTip } from \"@/components/ledger/info-tip\";\nimport { type IsometricScene, IsometricSpot } from \"@/components/ledger/isometric-spot\";\n\nexport interface EmptyStateProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  actionLabel: string;\n  /** One short line. Anything longer than a line belongs in `detail`. */\n  description?: string;\n  /**\n   * The particulars — which three filters are active, what the setup actually\n   * does — behind the ⓘ beside the title. An empty state is read at a glance;\n   * the person who wants the specifics will ask for them.\n   */\n  detail?: React.ReactNode;\n  onAction?: () => void;\n  scene?: IsometricScene;\n  title: string;\n  /** Three genuinely different components sharing one shell. */\n  variant?: \"first-run\" | \"filtered\" | \"period\";\n}\n\n/**\n * Always exactly one clear next action. An empty state with no action is a\n * dead end.\n *\n * No illustration on `filtered` — the user knows exactly what happened and\n * wants the fix, not a picture.\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      className,\n      variant = \"first-run\",\n      title,\n      description,\n      detail,\n      actionLabel,\n      onAction,\n      scene = \"ledger\",\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      className={cn(\"flex flex-col items-center justify-center gap-4 px-6 py-16 text-center\", className)}\n      ref={ref}\n      {...props}\n    >\n      {variant === \"first-run\" ? <IsometricSpot scene={scene} size=\"spot\" /> : null}\n      <div className=\"max-w-[340px] space-y-1.5\">\n        <p className=\"text-title-sm font-medium\">\n          {title}\n          {detail ? (\n            <InfoTip\n              about={`More about: ${title}`}\n              className=\"text-left\"\n              triggerClassName=\"ml-1.5 align-[-1px]\"\n            >\n              {detail}\n            </InfoTip>\n          ) : null}\n        </p>\n        {description ? <p className=\"text-body text-text-secondary\">{description}</p> : null}\n      </div>\n      <Button onClick={onAction} variant={variant === \"first-run\" ? \"primary\" : \"secondary\"}>\n        {actionLabel}\n      </Button>\n    </div>\n  ),\n);\nEmptyState.displayName = \"EmptyState\";\n",
      "path": "components/ledger/empty-state.tsx",
      "target": "components/ledger/empty-state.tsx",
      "type": "registry:component"
    }
  ],
  "name": "empty-state",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/button",
    "@lopifi/cn",
    "@lopifi/info-tip",
    "@lopifi/isometric-spot"
  ],
  "title": "EmptyState",
  "type": "registry:component"
}
