{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theme-switcher",
  "title": "ThemeSwitcher",
  "description": "Light, dark or match the system. This one really switches this page, starting from its current theme.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "theme-switcher/ThemeSwitcher.css",
      "content": ".cr-theme-switcher {\n  display: inline-flex;\n  gap: 2px;\n  padding: 3px;\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-bg-subtle);\n}\n\n.cr-theme-switcher__option {\n  display: grid;\n  place-items: center;\n  width: 36px;\n  height: 32px;\n  border-radius: var(--cr-radius-full);\n  color: var(--cr-color-text-secondary);\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.cr-theme-switcher__option:hover {\n  color: var(--cr-color-text-default);\n}\n\n.cr-theme-switcher__option:has(:checked) {\n  background: var(--cr-color-glass-popover);\n  box-shadow: var(--cr-shadow-sm);\n  color: var(--cr-color-text-default);\n}\n\n.cr-theme-switcher__option:has(:focus-visible) {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/theme-switcher/ThemeSwitcher.css"
    },
    {
      "path": "theme-switcher/ThemeSwitcher.tsx",
      "content": "'use client';\n\nimport { useEffect, useId, useState } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport { MonitorIcon, MoonIcon, SunIcon } from '@/lib/creance/icons';\nimport './ThemeSwitcher.css';\n\nexport type ThemeChoice = 'light' | 'dark' | 'system';\n\nexport interface ThemeSwitcherProps {\n  value?: ThemeChoice;\n  defaultValue?: ThemeChoice;\n  onValueChange?: (value: ThemeChoice) => void;\n  /**\n   * Sets `data-theme` on `<html>` (removed for \"system\"), which is how @creance-ui/tokens switch theme.\n   * Turn off to apply the theme yourself. Default true. Saving the choice is up to the app.\n   */\n  apply?: boolean;\n  /** Accessible name of the group. Default \"Theme\". */\n  label?: string;\n  className?: string;\n}\n\nconst choices = [\n  { value: 'light', label: 'Light', Icon: SunIcon },\n  { value: 'dark', label: 'Dark', Icon: MoonIcon },\n  { value: 'system', label: 'Match system', Icon: MonitorIcon },\n] as const;\n\n/** Light, dark or match the system: native radios drawn as an icon segmented control. */\nexport function ThemeSwitcher({ value, defaultValue = 'system', onValueChange, apply = true, label = 'Theme', className }: ThemeSwitcherProps) {\n  const name = useId();\n  const [own, setOwn] = useState<ThemeChoice>(defaultValue);\n  const current = value ?? own;\n\n  useEffect(() => {\n    if (!apply) return;\n    const root = document.documentElement;\n    if (current === 'system') delete root.dataset.theme;\n    else root.dataset.theme = current;\n  }, [apply, current]);\n\n  return (\n    <div role=\"radiogroup\" aria-label={label} className={cx('cr-theme-switcher', className)}>\n      {choices.map(({ value: v, label: l, Icon }) => (\n        <label key={v} className=\"cr-theme-switcher__option\" title={l}>\n          <input\n            type=\"radio\"\n            name={name}\n            value={v}\n            className=\"cr-visually-hidden\"\n            aria-label={l}\n            checked={current === v}\n            onChange={() => {\n              if (value === undefined) setOwn(v);\n              onValueChange?.(v);\n            }}\n          />\n          <Icon />\n        </label>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/theme-switcher/ThemeSwitcher.tsx"
    }
  ],
  "categories": [
    "molecule",
    "forms"
  ],
  "type": "registry:ui"
}