{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-block-theme-demo",
  "registryDependencies": [
    "toggle-group",
    "@delta/code-block"
  ],
  "files": [
    {
      "path": "examples/code-block-theme-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { PrismTheme } from \"prism-react-renderer\"\n\nimport { CodeBlock } from \"@/components/ui/code-block\"\nimport { Switch } from \"@/components/ui/switch\"\n\n// Custom C++ theme - Dark variant\nconst cppTheme: PrismTheme = {\n  plain: {\n    color: \"#e6e6fa\",\n    backgroundColor: \"#1a1a2e\",\n  },\n  styles: [\n    {\n      types: [\"comment\"],\n      style: {\n        color: \"#6a7b9a\",\n        fontStyle: \"italic\",\n      },\n    },\n    {\n      types: [\"keyword\", \"operator\"],\n      style: {\n        color: \"#bb86fc\",\n        fontWeight: \"bold\",\n      },\n    },\n    {\n      types: [\"string\", \"char\"],\n      style: {\n        color: \"#98d982\",\n      },\n    },\n    {\n      types: [\"number\"],\n      style: {\n        color: \"#f39c12\",\n      },\n    },\n    {\n      types: [\"function\", \"method\"],\n      style: {\n        color: \"#61dafb\",\n      },\n    },\n    {\n      types: [\"class-name\", \"type\"],\n      style: {\n        color: \"#ffd700\",\n        fontWeight: \"500\",\n      },\n    },\n    {\n      types: [\"punctuation\", \"symbol\"],\n      style: {\n        color: \"#c5c8c6\",\n      },\n    },\n    {\n      types: [\"preprocessor\", \"directive\"],\n      style: {\n        color: \"#ff79c6\",\n      },\n    },\n    {\n      types: [\"namespace\", \"scope\"],\n      style: {\n        color: \"#8be9fd\",\n      },\n    },\n  ],\n}\n\n// Light theme variant for C++\nconst cppLightTheme: PrismTheme = {\n  plain: {\n    color: \"#2d3748\",\n    backgroundColor: \"#f7fafc\",\n  },\n  styles: [\n    {\n      types: [\"comment\"],\n      style: {\n        color: \"#718096\",\n        fontStyle: \"italic\",\n      },\n    },\n    {\n      types: [\"keyword\", \"operator\"],\n      style: {\n        color: \"#805ad5\",\n        fontWeight: \"bold\",\n      },\n    },\n    {\n      types: [\"string\", \"char\"],\n      style: {\n        color: \"#38a169\",\n      },\n    },\n    {\n      types: [\"number\"],\n      style: {\n        color: \"#d69e2e\",\n      },\n    },\n    {\n      types: [\"function\", \"method\"],\n      style: {\n        color: \"#3182ce\",\n      },\n    },\n    {\n      types: [\"class-name\", \"type\"],\n      style: {\n        color: \"#b7791f\",\n        fontWeight: \"500\",\n      },\n    },\n    {\n      types: [\"punctuation\", \"symbol\"],\n      style: {\n        color: \"#4a5568\",\n      },\n    },\n    {\n      types: [\"preprocessor\", \"directive\"],\n      style: {\n        color: \"#e53e3e\",\n      },\n    },\n    {\n      types: [\"namespace\", \"scope\"],\n      style: {\n        color: \"#319795\",\n      },\n    },\n  ],\n}\n\nconst goCode = `package main\n\nimport \"fmt\"\n\nfunc main() {\n    fmt.Println(\"Hello, World!\")\n}`\n\nexport default function CodeBlockThemeDemo() {\n  const [options, setOptions] = useState<string[]>([\"line-numbers\"])\n\n  const showLineNumbers = options.includes(\"line-numbers\")\n  const showHeader = options.includes(\"header\")\n  const useThemeBackground = options.includes(\"theme-background\")\n  const useCustomStyling = options.includes(\"custom-styling\")\n\n  const customClassName = useCustomStyling\n    ? \"text-lg border-none rounded-[1rem]\"\n    : \"\"\n\n  const toggleOption = (option: string) => {\n    setOptions((prev) =>\n      prev.includes(option)\n        ? prev.filter((o) => o !== option)\n        : [...prev, option]\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col items-center gap-8\">\n      <div className=\"flex flex-wrap items-center justify-center gap-6\">\n        <label className=\"flex cursor-pointer items-center gap-2.5\">\n          <Switch\n            checked={showLineNumbers}\n            onCheckedChange={() => toggleOption(\"line-numbers\")}\n          />\n          <span className=\"text-sm font-medium\">Line Numbers</span>\n        </label>\n        <label className=\"flex cursor-pointer items-center gap-2.5\">\n          <Switch\n            checked={showHeader}\n            onCheckedChange={() => toggleOption(\"header\")}\n          />\n          <span className=\"text-sm font-medium\">Header</span>\n        </label>\n        <label className=\"flex cursor-pointer items-center gap-2.5\">\n          <Switch\n            checked={useThemeBackground}\n            onCheckedChange={() => toggleOption(\"theme-background\")}\n          />\n          <span className=\"text-sm font-medium\">Theme Background</span>\n        </label>\n        <label className=\"flex cursor-pointer items-center gap-2.5\">\n          <Switch\n            checked={useCustomStyling}\n            onCheckedChange={() => toggleOption(\"custom-styling\")}\n          />\n          <span className=\"text-sm font-medium\">Custom Styling</span>\n        </label>\n      </div>\n\n      <div className=\"w-full max-w-full\">\n        <CodeBlock\n          code={goCode}\n          language=\"go\"\n          filename={showHeader ? \"hello.go\" : undefined}\n          showLineNumbers={showLineNumbers}\n          useThemeBackground={useThemeBackground}\n          className={customClassName}\n          adaptiveTheme={{\n            dark: cppTheme,\n            light: cppLightTheme,\n          }}\n        />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}