{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "token-swap",
  "type": "registry:component",
  "title": "TokenSwap",
  "description": "Set data-brand on any wrapper and every descendant re-skins instantly via CSS variables, with a filmic crossfade. One mechanism, unlimited themes.",
  "dependencies": [],
  "registryDependencies": [],
  "tier": "free",
  "note": "Requires the --bx-* token palettes and [data-brand] blocks from globals.css — copy them into your own global stylesheet (they are not bundled in the manifest).",
  "files": [
    {
      "path": "components/prism/TokenSwap.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\n/**\n * TokenSwap — the highest-leverage internal tool here. Set `data-brand` on any\n * wrapper and every descendant that reads the `--bx-*` CSS variables re-skins\n * instantly, with a filmic crossfade. One mechanism = unlimited themes. Ported\n * from Snupix's brand explorer. The six palettes live in globals.css.\n */\nconst BRANDS: { id: string; label: string }[] = [\n  { id: \"prism\", label: \"Prism\" },\n  { id: \"golden\", label: \"Golden\" },\n  { id: \"noir\", label: \"Noir\" },\n  { id: \"romance\", label: \"Romance\" },\n  { id: \"studio\", label: \"Studio\" },\n  { id: \"neon\", label: \"Neon\" },\n];\n\nexport function TokenSwap() {\n  const [brand, setBrand] = useState(\"prism\");\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"mb-5 flex flex-wrap gap-2\">\n        {BRANDS.map((b) => (\n          <button\n            key={b.id}\n            onClick={() => setBrand(b.id)}\n            className={`rounded-full border px-3.5 py-1.5 text-sm transition-colors ${\n              brand === b.id\n                ? \"border-ink/40 bg-ink/10 text-ink\"\n                : \"border-line text-muted hover:border-line-2 hover:text-ink\"\n            }`}\n          >\n            {b.label}\n          </button>\n        ))}\n      </div>\n\n      {/* Everything below re-skins from the data-brand tokens */}\n      <div\n        data-brand={brand}\n        className=\"grain relative overflow-hidden rounded-2xl p-6 sm:p-8\"\n        style={{ background: \"var(--bx-bg)\", border: \"1px solid var(--bx-line)\" }}\n      >\n        <div className=\"flex flex-col gap-5 sm:flex-row sm:items-stretch\">\n          {/* Mock product card */}\n          <div\n            className=\"flex-1 rounded-xl p-5\"\n            style={{ background: \"var(--bx-surface)\", border: \"1px solid var(--bx-line)\" }}\n          >\n            <div className=\"mb-4 h-28 w-full rounded-lg\" style={{ background: \"var(--bx-grad)\" }} />\n            <div\n              className=\"mb-2 text-xs font-medium uppercase tracking-widest\"\n              style={{ color: \"var(--bx-acc)\" }}\n            >\n              New release\n            </div>\n            <div className=\"mb-1 text-xl font-semibold\" style={{ color: \"var(--bx-ink)\" }}>\n              The same markup, six brands\n            </div>\n            <p className=\"mb-4 text-sm\" style={{ color: \"var(--bx-sub)\" }}>\n              Not a single class changed between themes — only the token layer.\n            </p>\n            <div className=\"flex items-center gap-2\">\n              <button\n                className=\"rounded-lg px-4 py-2 text-sm font-medium\"\n                style={{ background: \"var(--bx-acc)\", color: \"var(--bx-acc-ink)\" }}\n              >\n                Primary action\n              </button>\n              <button\n                className=\"rounded-lg px-4 py-2 text-sm font-medium\"\n                style={{ border: \"1px solid var(--bx-line)\", color: \"var(--bx-ink)\" }}\n              >\n                Secondary\n              </button>\n            </div>\n          </div>\n\n          {/* Token swatches */}\n          <div\n            className=\"flex w-full flex-col justify-between rounded-xl p-5 sm:w-56\"\n            style={{ background: \"var(--bx-surface)\", border: \"1px solid var(--bx-line)\" }}\n          >\n            <div className=\"text-xs font-medium uppercase tracking-widest\" style={{ color: \"var(--bx-sub)\" }}>\n              Tokens\n            </div>\n            <div className=\"grid grid-cols-4 gap-2 py-4\">\n              {[\"--bx-bg\", \"--bx-surface\", \"--bx-ink\", \"--bx-sub\", \"--bx-line\", \"--bx-acc\", \"--bx-acc-ink\", \"--bx-acc2\"].map(\n                (v) => (\n                  <div\n                    key={v}\n                    title={v}\n                    className=\"aspect-square rounded-md\"\n                    style={{ background: `var(${v})`, border: \"1px solid var(--bx-line)\" }}\n                  />\n                )\n              )}\n            </div>\n            <code className=\"text-xs\" style={{ color: \"var(--bx-sub)\" }}>\n              data-brand=&quot;{brand}&quot;\n            </code>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/prism/TokenSwap.tsx"
    }
  ]
}