{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-tokens-demo",
  "title": "Status Tokens Example",
  "author": "MR <contact@bimframe.co>",
  "description": "A full page rendering Status Tokens, with its own sample data — what \"Open in v0\" hands over, and what to copy when wiring the component into a real screen.",
  "registryDependencies": [
    "@cantera/status-tokens"
  ],
  "files": [
    {
      "path": "registry/examples/status-tokens-demo.tsx",
      "content": "import { statusCssVars } from '@/lib/status-tokens'\n\n/**\n * One color, one meaning. Recoverable states are warning, not danger; absence is\n * neutral, not an error. The classes come from the installed CSS variables, and\n * `statusCssVars` carries the same twelve tokens for the places a class cannot\n * reach — here, the inline swatch a chart series would use.\n */\nconst tones = [\n  {\n    name: 'success',\n    meaning: 'Healthy. A live grant that needs nothing.',\n    solid: 'bg-status-success text-status-success-foreground',\n    surface: 'bg-status-success-surface text-status-success',\n    swatch: statusCssVars.success,\n  },\n  {\n    name: 'warning',\n    meaning: 'Recoverable, needs attention. Expiring soon and expired both live here.',\n    solid: 'bg-status-warning text-status-warning-foreground',\n    surface: 'bg-status-warning-surface text-status-warning',\n    swatch: statusCssVars.warning,\n  },\n  {\n    name: 'danger',\n    meaning: 'A failure the user must act on — a revoked grant, a rejected scope.',\n    solid: 'bg-status-danger text-status-danger-foreground',\n    surface: 'bg-status-danger-surface text-status-danger',\n    swatch: statusCssVars.danger,\n  },\n  {\n    name: 'neutral',\n    meaning: 'Absence. Never connected, nothing to report.',\n    solid: 'bg-status-neutral text-status-neutral-foreground',\n    surface: 'bg-status-neutral-surface text-status-neutral',\n    swatch: statusCssVars.neutral,\n  },\n]\n\n/** Server-safe: no state, no effects, nothing to hydrate. */\nexport function StatusTokensDemo() {\n  return (\n    <div className=\"flex w-full flex-col gap-4\">\n      {tones.map((tone) => (\n        <div key={tone.name} className=\"flex flex-col gap-2 sm:flex-row sm:items-stretch sm:gap-3\">\n          <div className=\"flex min-w-0 flex-col justify-center gap-0.5 sm:w-56\">\n            <span className=\"flex items-center gap-2 font-mono text-sm\">\n              <span\n                aria-hidden\n                className=\"size-2.5 shrink-0 rounded-full\"\n                style={{ backgroundColor: tone.swatch }}\n              />\n              --status-{tone.name}\n            </span>\n            <span className=\"text-muted-foreground text-xs\">{tone.meaning}</span>\n          </div>\n          <div className={`flex flex-1 items-center rounded-md px-3 py-2 text-sm ${tone.solid}`}>\n            Solid fill, -foreground ink\n          </div>\n          <div className={`flex flex-1 items-center rounded-md px-3 py-2 text-sm ${tone.surface}`}>\n            -surface, text-status ink\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/examples/status-tokens-demo.tsx"
    },
    {
      "path": "registry/examples/pages/status-tokens-demo-page.tsx",
      "content": "// Generated by scripts/build-examples.mts. Edit the demo, not this file.\nimport { StatusTokensDemo } from '@/components/examples/status-tokens-demo'\n\nexport default function Page() {\n  return (\n    <main className=\"flex min-h-svh items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-3xl\">\n        <StatusTokensDemo />\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/examples/status-tokens/page.tsx"
    }
  ],
  "categories": [
    "theming",
    "status"
  ],
  "type": "registry:example"
}