{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "system-states",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "With the financial reassurance sentence.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { Button } from \"@/components/ledger/button\";\nimport {\n  ExclamationTriangleIcon,\n  LockClosedIcon,\n  MagnifyingGlassMinusIcon,\n  ServerStackIcon,\n  SignalSlashIcon,\n} from \"@/components/ledger/icons\";\nimport { InfoTip } from \"@/components/ledger/info-tip\";\n\ntype ErrorVariant = \"network\" | \"permission\" | \"not-found\" | \"server\" | \"stale-data\";\n\nconst ICONS = {\n  network: SignalSlashIcon,\n  \"not-found\": MagnifyingGlassMinusIcon,\n  permission: LockClosedIcon,\n  server: ServerStackIcon,\n  \"stale-data\": ExclamationTriangleIcon,\n} as const;\n\nexport interface ErrorStateProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The technical account of what failed. It is the least urgent thing on the\n   * screen and the longest, so it lives behind the ⓘ beside the title — an\n   * InfoTip rather than a Tooltip, because it opens on press and so survives\n   * touch.\n   */\n  detail: string;\n  onRetry?: () => void;\n  onSupport?: () => void;\n  /**\n   * The one line of prose that stays visible. An error in a financial product\n   * makes users worry something happened to their money; saying explicitly\n   * that nothing did is worth more than the retry button — and worth more\n   * than the paragraph explaining the outage.\n   */\n  reassurance: string;\n  retryLabel?: string;\n  title: string;\n  variant?: ErrorVariant;\n}\n\nexport const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(\n  (\n    {\n      className,\n      variant = \"network\",\n      title,\n      detail,\n      reassurance,\n      onRetry,\n      retryLabel = \"Try again\",\n      onSupport,\n      ...props\n    },\n    ref,\n  ) => {\n    const Icon = ICONS[variant];\n    return (\n      <div\n        className={cn(\n          \"flex flex-col items-center gap-4 rounded-xl border border-border bg-surface px-6 py-12 text-center\",\n          className,\n        )}\n        ref={ref}\n        role=\"alert\"\n        {...props}\n      >\n        <div className=\"grid size-12 place-items-center rounded-md bg-negative-subtle\">\n          <Icon aria-hidden=\"true\" className=\"size-5 text-negative\" />\n        </div>\n        <div className=\"max-w-[360px] space-y-1.5\">\n          <p className=\"text-title-sm font-medium\">\n            {title}\n            <InfoTip\n              about={`What happened: ${title}`}\n              className=\"text-left\"\n              triggerClassName=\"ml-1.5 align-[-1px]\"\n            >\n              {detail}\n            </InfoTip>\n          </p>\n          <p className=\"text-body text-text-secondary\">{reassurance}</p>\n        </div>\n        <div className=\"flex gap-2\">\n          {onRetry ? (\n            <Button onClick={onRetry} variant=\"primary\">\n              {retryLabel}\n            </Button>\n          ) : null}\n          {onSupport ? (\n            <Button onClick={onSupport} variant=\"secondary\">\n              Contact support\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\nErrorState.displayName = \"ErrorState\";\n",
      "path": "components/ledger/error-state.tsx",
      "target": "components/ledger/error-state.tsx",
      "type": "registry:component"
    }
  ],
  "name": "error-state",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/button",
    "@lopifi/cn",
    "@lopifi/icons",
    "@lopifi/info-tip"
  ],
  "title": "ErrorState",
  "type": "registry:component"
}