{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "z-theme-switcher",
  "title": "Z Theme Switcher",
  "dependencies": [
    "@heroicons/react@2.2.0",
    "tanstack-theme-kit@0.2.1"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://ui.orchid.ai/r/orchid-foundation.json",
    "https://ui.orchid.ai/r/orchid-theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/orchid/spectrum/atoms/z-theme-switcher/z-theme-switcher.tsx",
      "content": "\"use client\";\nimport { ComputerDesktopIcon, SunIcon, MoonIcon } from '@heroicons/react/16/solid';\nimport { useTheme } from 'tanstack-theme-kit';\nimport { cn } from \"../../../lib/ui-utils\";\nimport { useMemo } from 'react';\nexport default function ZThemeSwitcher() {\n    const { theme, setTheme } = useTheme();\n    const getIndicatorClass = useMemo(() => {\n        if (theme === 'system')\n            return '';\n        if (theme === 'light')\n            return 'translate-x-[100%]';\n        if (theme === 'dark')\n            return 'translate-x-[200%]';\n        return '';\n    }, [theme]);\n    return (<div className=\"h-8 rounded-lg p-0.5\">\n      <div className=\"border-neutral relative flex w-full rounded-full *:flex-1\">\n        <div suppressHydrationWarning className={cn(`bg-surface-subtle pointer-events-none absolute aspect-square h-full w-1/3 rounded-md transition-transform`, getIndicatorClass)}/>\n\n        <button suppressHydrationWarning className={`focus-visible:ring-neutral-strong relative z-10 grid aspect-square h-[28px] cursor-pointer place-items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-inset ${theme === 'system' ? 'text-neutral' : 'text-neutral-subtle hover:text-neutral'}`} onClick={() => setTheme('system')}>\n          <ComputerDesktopIcon className=\"size-4\"/>\n        </button>\n\n        <button suppressHydrationWarning className={`focus-visible:ring-neutral-strong relative z-10 grid aspect-square h-[28px] cursor-pointer place-items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-inset ${theme === 'light' ? 'text-neutral' : 'text-neutral-subtle hover:text-neutral'}`} onClick={() => setTheme('light')}>\n          <SunIcon className=\"size-4\"/>\n        </button>\n\n        <button suppressHydrationWarning className={`focus-visible:ring-neutral-strong relative z-10 grid aspect-square h-[28px] cursor-pointer place-items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-inset ${theme === 'dark' ? 'text-neutral' : 'text-neutral-subtle hover:text-neutral'}`} onClick={() => setTheme('dark')}>\n          <MoonIcon className=\"size-4\"/>\n        </button>\n      </div>\n    </div>);\n}\n",
      "type": "registry:ui",
      "target": "@ui/orchid/spectrum/atoms/z-theme-switcher/z-theme-switcher.tsx"
    }
  ],
  "type": "registry:ui"
}