{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-empty-loading-error",
  "title": "Chart Empty Loading Error",
  "description": "A standardized chart state frame for ready, loading, empty, and error states.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://ui.corr.sh/r/empty-state.json",
    "https://ui.corr.sh/r/notice-alert.json",
    "https://ui.corr.sh/r/shimmer-skeleton.json"
  ],
  "files": [
    {
      "path": "registry/corr/components/chart-empty-loading-error.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { AlertTriangleIcon, BarChart3Icon, RefreshCwIcon } from \"lucide-react\"\n\nimport { EmptyState } from \"./empty-state\"\nimport { NoticeAlert } from \"./notice-alert\"\nimport { ShimmerSkeleton, ShimmerSkeletonBox } from \"./shimmer-skeleton\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ChartStateFrameState = \"ready\" | \"loading\" | \"empty\" | \"error\"\n\nexport function ChartStateFrame({\n  state = \"ready\",\n  title,\n  description,\n  action,\n  minHeight = 320,\n  className,\n  children,\n}: {\n  state?: ChartStateFrameState\n  title?: string\n  description?: string\n  action?: React.ReactNode\n  minHeight?: number | string\n  className?: string\n  children: React.ReactNode\n}) {\n  const style = {\n    minHeight: typeof minHeight === \"number\" ? `${minHeight}px` : minHeight,\n  }\n\n  if (state === \"ready\") {\n    return (\n      <div className={cn(\"min-w-0\", className)} style={style}>\n        {children}\n      </div>\n    )\n  }\n\n  if (state === \"loading\") {\n    return (\n      <div\n        className={cn(\n          \"grid min-w-0 content-center gap-4 rounded-md border bg-card p-4\",\n          className\n        )}\n        style={style}\n      >\n        <div className=\"flex items-center justify-between gap-4\">\n          <ShimmerSkeleton lines={2} className=\"max-w-52\" />\n          <ShimmerSkeletonBox className=\"h-8 w-20\" />\n        </div>\n        <div className=\"grid h-40 grid-cols-8 items-end gap-2\">\n          {Array.from({ length: 8 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"flex h-full items-end\"\n              style={{ height: `${42 + ((index * 17) % 58)}%` }}\n            >\n              <ShimmerSkeletonBox className=\"h-full w-full\" />\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n\n  if (state === \"empty\") {\n    return (\n      <div className={cn(\"grid min-w-0 place-items-center\", className)} style={style}>\n        <EmptyState\n          icon={<BarChart3Icon className=\"size-4\" />}\n          title={title ?? \"No chart data\"}\n          description={\n            description ?? \"There is no data available for this reporting period.\"\n          }\n          action={action}\n          variant=\"bordered\"\n          className=\"w-full\"\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(\"grid min-w-0 content-center\", className)} style={style}>\n      <NoticeAlert\n        tone=\"destructive\"\n        title={title ?? \"Unable to load chart\"}\n        description={\n          description ??\n          \"The data source did not respond. Retry the request or check the connection.\"\n        }\n      />\n      {action ? (\n        <div className=\"mt-3 flex justify-end\">{action}</div>\n      ) : (\n        <div className=\"mt-3 flex justify-end\">\n          <Button variant=\"outline\" size=\"sm\">\n            <RefreshCwIcon className=\"size-3.5\" />\n            Retry\n          </Button>\n        </div>\n      )}\n      <AlertTriangleIcon className=\"sr-only\" />\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}