export declare const demoThemeTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { ThemeContext } from \"cherry-styled-components\";\nimport { theme, themeDark, Theme } from \"@/app/theme\";\nimport { Button } from \"@/components/layout/Button\";\nimport { Columns } from \"@/components/layout/Columns\";\n\ninterface DemoThemeProps {\n variant: \"purple\" | \"green\" | \"yellow\";\n}\n\ntype Palette = Record;\n\n// Each preset is light + dark color overrides, mirroring what a user editing\n// theme.json would see. Applying one does two things: writes the overrides as\n// --color-* custom properties on , which is where every painted color\n// resolves from, and switches the mode through Cherry's setTheme so the choice\n// persists and the \"dark\" class follows. Reset removes the properties so the\n// values from theme.json (or the defaults) take over again.\nconst PRESETS: Record<\n DemoThemeProps[\"variant\"],\n { light: Palette; dark: Palette; label: string }\n> = {\n purple: {\n label: \"Purple\",\n light: {\n primaryLight: \"#c4b5fd\",\n primary: \"#8b5cf6\",\n primaryDark: \"#5b21b6\",\n },\n dark: {\n primaryLight: \"#ddd6fe\",\n primary: \"#a78bfa\",\n primaryDark: \"#7c3aed\",\n },\n },\n green: {\n label: \"Green\",\n light: {\n primaryLight: \"#86efac\",\n primary: \"#22c55e\",\n primaryDark: \"#15803d\",\n },\n dark: {\n primaryLight: \"#6ee7b7\",\n primary: \"#10b981\",\n primaryDark: \"#065f46\",\n },\n },\n yellow: {\n label: \"Yellow\",\n light: {\n primaryLight: \"#fbbf24\",\n primary: \"#f59e0b\",\n primaryDark: \"#d97706\",\n },\n dark: {\n primaryLight: \"#fed7aa\",\n primary: \"#fb923c\",\n primaryDark: \"#ea580c\",\n },\n },\n};\n\nconst PRESET_KEYS = [\"primaryLight\", \"primary\", \"primaryDark\"] as const;\n\nfunction applyPresetVars(palette: Palette) {\n const root = document.documentElement;\n for (const key of PRESET_KEYS) {\n if (palette[key]) root.style.setProperty(`--color-${key}`, palette[key]);\n }\n}\n\nfunction clearPresetVars() {\n const root = document.documentElement;\n for (const key of PRESET_KEYS) {\n root.style.removeProperty(`--color-${key}`);\n }\n}\n\nfunction DemoTheme({ variant }: DemoThemeProps) {\n const { setTheme } = useContext(ThemeContext);\n const activeTheme = useTheme() as Theme;\n const preset = PRESETS[variant];\n\n if (!preset) {\n return (\n \n {\n clearPresetVars();\n setTheme(activeTheme.isDark ? themeDark : theme);\n }}\n fullWidth\n >\n Reset to Default\n \n \n );\n }\n\n return (\n \n {\n applyPresetVars(preset.light);\n setTheme(theme);\n }}\n icon=\"sun\"\n fullWidth\n >\n Demo {preset.label} Light\n \n {\n applyPresetVars(preset.dark);\n setTheme(themeDark);\n }}\n icon=\"moon-star\"\n fullWidth\n >\n Demo {preset.label} Dark\n \n \n );\n}\n\nexport { DemoTheme };\n";