{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"theme-switch","type":"registry:ui","title":"Theme switcher","description":"Four smooth ways to move between light and dark appearance.","categories":["actions"],"dependencies":["lucide-react","motion"],"registryDependencies":["https://ui.teamofsilicons.com/r/silicon-motion-tokens.json","https://ui.teamofsilicons.com/r/button.json"],"files":[{"path":"registry/components/theme-switch/theme-switch.tsx","type":"registry:component","target":"@components/silicon-ui/theme-switch/theme-switch.tsx","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { Moon, Sun } from \"lucide-react\";\nimport { motionTokens } from \"../lib/motion-tokens\";\nimport { Button } from \"../button/button\";\nimport styles from \"./theme-switch.module.css\";\n\nexport type ThemeSwitchVariant = \"reveal\" | \"eclipse\" | \"split\" | \"rise\";\nexport type Theme = \"light\" | \"dark\";\n\nexport interface ThemeSwitchProps {\n  theme: Theme;\n  variant?: ThemeSwitchVariant;\n  onThemeChange: (next: Theme, variant: ThemeSwitchVariant, trigger: HTMLElement) => void;\n  label?: string;\n  iconOnly?: boolean;\n}\n\n/** Rotation and scale ride the spring; opacity and blur tween so the blur never overshoots below zero. */\nconst iconSpring = { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] }, filter: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } } as const;\nconst iconExit = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } as const;\nconst blur = `blur(${motionTokens.blur.subtle}px)`;\n\n/** A stored preference usually reaches the theme prop just after hydration. That correction swaps the icon in place;\n *  only changes after the first painted frames animate, so a page that loads in dark mode never spins its switches. */\nfunction useSettled() {\n  const [settled, setSettled] = useState(false);\n  useEffect(() => {\n    let second = 0;\n    const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => setSettled(true)); });\n    return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); };\n  }, []);\n  return settled;\n}\n\n/** Both icons turn the same way (clockwise into dark, back out of it), so the swap reads as one rotation rather than two fades. */\nfunction ThemeIcon({ theme, reduced, settled }: { theme: Theme; reduced: boolean; settled: boolean }) {\n  const Icon = theme === \"light\" ? Sun : Moon;\n  const angle = theme === \"light\" ? 30 : -30;\n  return (\n    <AnimatePresence initial={false} mode=\"popLayout\">\n      <motion.span\n        key={theme}\n        className={styles.icon}\n        initial={!settled ? false : reduced ? { opacity: 0 } : { opacity: 0, scale: .7, rotate: angle, filter: blur }}\n        animate={{ opacity: 1, scale: 1, rotate: 0, filter: \"blur(0px)\" }}\n        exit={!settled ? { opacity: 0, transition: { duration: 0 } } : reduced ? { opacity: 0, transition: { duration: motionTokens.duration.instant } } : { opacity: 0, scale: .7, rotate: angle, filter: blur, transition: iconExit }}\n        transition={reduced ? { duration: motionTokens.duration.instant } : iconSpring}\n        aria-hidden=\"true\"\n      >\n        <Icon size={16} strokeWidth={1.75} />\n      </motion.span>\n    </AnimatePresence>\n  );\n}\n\nexport function ThemeSwitch({ theme, variant = \"reveal\", onThemeChange, label, iconOnly = false }: ThemeSwitchProps) {\n  const reduced = useReducedMotion() ?? false;\n  const settled = useSettled();\n  const next = theme === \"light\" ? \"dark\" : \"light\";\n  const classes = [styles.themeSwitch, styles[variant], iconOnly ? styles.iconOnly : \"\", settled ? styles.settled : \"\"].join(\" \");\n\n  return (\n    <Button\n      type=\"button\"\n      size=\"sm\"\n      variant=\"secondary\"\n      className={classes}\n      data-theme={theme}\n      aria-label={label ?? `Switch to ${next} mode`}\n      aria-pressed={theme === \"dark\"}\n      onClick={event => onThemeChange(next, variant, event.currentTarget)}\n    >\n      <span className={styles.iconWrap}><ThemeIcon theme={theme} reduced={reduced} settled={settled} /></span>\n      {!iconOnly && <span className={styles.label}>Switch theme</span>}\n    </Button>\n  );\n}\n\nexport default ThemeSwitch;\n"},{"path":"registry/components/theme-switch/theme-switch.module.css","type":"registry:component","target":"@components/silicon-ui/theme-switch/theme-switch.module.css","content":"/* Each transition uses the same library Button, which owns the press scale; this file only animates the icon in place. */\n.themeSwitch {\n  position: relative;\n  width: auto;\n  padding-inline: var(--space-group);\n}\n.iconOnly { width: 38px; min-width: 38px; height: 38px; min-height: 38px; border-radius: var(--radius-control); padding: 0; }\n@media (hover: hover) and (pointer: fine) {\n  .themeSwitch:hover:not(:disabled) { border-color: var(--border-strong); }\n  .iconOnly:hover:not(:disabled) { background: var(--surface-muted); box-shadow: none; }\n}\n.iconWrap {\n  position: relative;\n  display: inline-grid;\n  width: 20px;\n  height: 20px;\n  flex: 0 0 20px;\n  place-items: center;\n}\n/* The nudge only eases once the switch has settled, so a theme that arrives during hydration lands without motion. */\n.settled .iconWrap { transition: transform var(--duration-spring) var(--ease-spring); }\n.icon { position: absolute; display: grid; width: 18px; height: 18px; place-items: center; }\n.label { white-space: nowrap; }\n/* Each variant nudges the icon the way its page transition travels, and eases back when the theme returns. */\n.themeSwitch.reveal[data-theme=\"dark\"] .iconWrap { transform: scale(1.08); }\n.themeSwitch.eclipse[data-theme=\"dark\"] .iconWrap { transform: translateX(-2px); }\n.themeSwitch.split[data-theme=\"dark\"] .iconWrap { transform: translateX(1px); }\n.themeSwitch.rise[data-theme=\"dark\"] .iconWrap { transform: translateY(-2px); }\n@media (prefers-reduced-motion: reduce) {\n  .settled .iconWrap { transition: none; }\n}\n"},{"path":"registry/components/button/button.tsx","type":"registry:component","target":"@components/silicon-ui/button/button.tsx","content":"\"use client\";\n\nimport { forwardRef, isValidElement, useCallback, useEffect, useLayoutEffect, useRef } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode, Ref, RefObject } from \"react\";\nimport { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion } from \"motion/react\";\nimport type { TargetAndTransition, Variants } from \"motion/react\";\nimport { motionTokens } from \"../lib/motion-tokens\";\nimport styles from \"./button.module.css\";\n\n/** `soft` is filled and borderless, for controls in a bar (experimental). `link` is text with an underline, for an action\n * among words (a switch under a field); `--button-link-underline` sets the resting underline (transparent: on hover only). */\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"soft\" | \"link\";\n/** `xs` (24px) is for dense UI such as tree rows and toolbars, usually icon-only with an aria-label. */\nexport type ButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onDrag\" | \"onDragEnd\" | \"onDragStart\" | \"onAnimationStart\"> {\n  /** The look: `primary` (default) for the main action, `secondary` bordered, `ghost` quiet, `danger` destructive, `soft` filled for bars, `link` underlined text. */\n  variant?: ButtonVariant;\n  /** Height: `xs` 24px, `sm` 36px, `md` 44px (default), `lg` 50px. */\n  size?: ButtonSize;\n  /** Shows a spinner in place of the label and sets aria-busy, keeping the button's width. */\n  loading?: boolean;\n}\n\n/** Icon buttons press a little deeper, wide buttons a little less, so every size reads as the same push. */\nconst pressVariants: Variants = {\n  pressed: (button: RefObject<HTMLButtonElement | null>) => {\n    const width = button.current?.offsetWidth ?? 0;\n    return { scale: width > 220 ? .985 : width && width <= 48 ? .96 : .97, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } };\n  },\n};\n\nconst rest: TargetAndTransition = { opacity: 1, y: 0, scale: 1, filter: \"blur(0px)\" };\n/** Text rises about .3em out of a soft blur; the outgoing label lifts away a little faster. */\nconst textIn: TargetAndTransition = { opacity: 0, y: 4, filter: `blur(${motionTokens.blur.soft}px)` };\nconst textOut: TargetAndTransition = { opacity: 0, y: -3, filter: `blur(${motionTokens.blur.soft}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } };\nconst iconIn: TargetAndTransition = { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` };\nconst iconOut: TargetAndTransition = { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } };\nconst fadeIn: TargetAndTransition = { ...rest, opacity: 0 };\nconst fadeOut: TargetAndTransition = { opacity: 0, transition: { duration: motionTokens.duration.instant } };\n/** Scale rides the spring; opacity and blur tween so blur never overshoots below zero. */\nconst iconEnter = { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] }, filter: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } } as const;\n\n/** A key for the label content: text plus element names, so a new label or icon crossfades while prop-only updates stay in place. */\nfunction labelKey(node: ReactNode): string {\n  if (node == null || typeof node === \"boolean\") return \"\";\n  if (typeof node === \"string\" || typeof node === \"number\" || typeof node === \"bigint\") return String(node);\n  if (Array.isArray(node)) return node.map(labelKey).join(\"\");\n  if (!isValidElement(node)) return \"\";\n  const type = node.type as string | { displayName?: string; name?: string };\n  return `<${typeof type === \"string\" ? type : type?.displayName ?? type?.name ?? \"\"}>${labelKey((node.props as { children?: ReactNode }).children)}`;\n}\n\n/** Springs the slot to the natural width of the incoming label when it changes, so a new label never snaps the button's size.\n *  The outgoing label is popped out of flow at once, so it never holds the old width. Other resizes (a late web font, a parent reflow) jump straight to the new width, so nothing wobbles on first paint. */\nfunction useMorphWidth(content: RefObject<HTMLElement | null>, key: string, reduced: boolean) {\n  const width = useMotionValue<number | \"auto\">(\"auto\");\n  const lastKey = useRef(key), armedUntil = useRef(0);\n  useLayoutEffect(() => {\n    if (lastKey.current === key) return;\n    lastKey.current = key;\n    armedUntil.current = performance.now() + 700;\n  }, [key]);\n  useEffect(() => {\n    const node = content.current, slot = node?.parentElement;\n    if (!node || !slot || typeof ResizeObserver === \"undefined\") return;\n    let measured = false;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const next = entry.contentRect.width;\n      if (!next || !measured || reduced || performance.now() > armedUntil.current) { measured = next > 0; width.jump(next || \"auto\"); delete slot.dataset.morphing; return; }\n      slot.dataset.morphing = \"\";\n      animate(width, next, { ...motionTokens.spring.morph, onComplete: () => { delete slot.dataset.morphing; } });\n    });\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [content, reduced, width]);\n  return width;\n}\n\nfunction LabelPhase({ children, icon, reduced, ref }: { children: ReactNode; icon: boolean; reduced: boolean; ref?: Ref<HTMLSpanElement> }) {\n  const present = useIsPresent();\n  return <motion.span ref={ref} className={styles.labelPhase} aria-hidden={present ? undefined : true} initial={reduced ? fadeIn : icon ? iconIn : textIn} animate={rest} exit={reduced ? fadeOut : icon ? iconOut : textOut} transition={reduced ? { duration: motionTokens.duration.instant } : icon ? iconEnter : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }}>{children}</motion.span>;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { className, variant = \"primary\", size = \"md\", loading = false, disabled, children, onClick, ...props },\n  ref,\n) {\n  const reduceMotion = useReducedMotion() ?? false;\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const key = labelKey(children);\n  const width = useMorphWidth(contentRef, key, reduceMotion);\n  const setRefs = useCallback((node: HTMLButtonElement | null) => {\n    buttonRef.current = node;\n    if (typeof ref === \"function\") ref(node); else if (ref) ref.current = node;\n  }, [ref]);\n  // A trigger that anchors a menu, popover, or dialog keeps its rect still while pressed, so the layer never measures a scaled anchor.\n  // Radix triggers (asChild) pass aria-haspopup or data-state through; the stylesheet repeats the guard.\n  const popup = props[\"aria-haspopup\"];\n  const anchorsLayer = (popup !== undefined && popup !== false && popup !== \"false\") || props.role === \"combobox\" || (props as Record<string, unknown>)[\"data-state\"] !== undefined;\n  const inert = disabled || loading || props[\"aria-disabled\"] === true || props[\"aria-disabled\"] === \"true\";\n  const classes = [styles.button, styles[variant], styles[size], className].filter(Boolean).join(\" \");\n  // An icon with no text: square at the compact size.\n  const iconOnly = !/\\S/.test(key.replace(/<[^>]*>/g, \"\"));\n\n  return (\n    <motion.button\n      ref={setRefs}\n      tabIndex={props.tabIndex ?? 0}\n      className={classes}\n      data-variant={variant}\n      data-icon-only={iconOnly || undefined}\n      disabled={disabled}\n      aria-busy={loading || undefined}\n      custom={buttonRef}\n      variants={pressVariants}\n      whileTap={reduceMotion || anchorsLayer || inert ? undefined : \"pressed\"}\n      transition={motionTokens.spring.snappy}\n      {...props}\n      // Loading keeps the button focusable (a disabled button would drop keyboard focus mid-action) and swallows presses instead.\n      aria-disabled={loading || props[\"aria-disabled\"] || undefined}\n      onClick={loading ? event => event.preventDefault() : onClick}\n    >\n      <AnimatePresence initial={false}>\n        {loading ? <motion.span key=\"loader\" className={styles.loader} aria-hidden=\"true\" initial={reduceMotion ? { opacity: 0 } : { opacity: 0, scale: .6 }} animate={{ opacity: 1, scale: 1 }} exit={reduceMotion ? fadeOut : { ...iconOut, scale: .8 }} transition={reduceMotion ? { duration: motionTokens.duration.instant } : iconEnter}><span className={styles.spinner} /></motion.span> : null}\n      </AnimatePresence>\n      <motion.span className={[styles.labelSlot, loading ? styles.loadingLabel : \"\"].filter(Boolean).join(\" \")} style={{ width }}>\n        <span ref={contentRef} className={styles.labelContent}>\n          <AnimatePresence mode=\"popLayout\" initial={false}>\n            <LabelPhase key={key} icon={!/\\S/.test(key.replace(/<[^>]*>/g, \"\"))} reduced={reduceMotion}>{children}</LabelPhase>\n          </AnimatePresence>\n        </span>\n      </motion.span>\n    </motion.button>\n  );\n});\n\nButton.displayName = \"Button\";\n\nexport default Button;\n"},{"path":"registry/components/button/button.module.css","type":"registry:component","target":"@components/silicon-ui/button/button.module.css","content":"/* Press scale is driven by Motion (whileTap) alone, so transform never gets a CSS transition here. */\n.button { position: relative; display: inline-flex; min-height: var(--control-height-md); align-items: center; justify-content: center; gap: var(--space-related); border: 1px solid transparent; border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: 0 var(--space-inset); font: inherit; font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); line-height: var(--leading-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }\n.button:disabled { cursor: not-allowed; opacity: .52; }\n.button[aria-busy=\"true\"] { cursor: progress; }\n/* Anchors of floating layers never scale: Radix opens on pointerdown and would measure a shrunken trigger. */\n.button:is([aria-haspopup]:not([aria-haspopup=\"false\"]), [data-state], [role=\"combobox\"]) { transform: none !important; }\n/* The slot's width follows the incoming label on a spring. The label stays centered and may overflow evenly while the slot catches up;\n   the outgoing label pops out of flow against the slot itself, so it keeps its place instead of following the new content box. */\n.labelSlot { position: relative; display: inline-flex; min-width: 0; align-items: center; justify-content: center; transition: opacity var(--duration-fast) var(--ease-standard); }\n.labelSlot[data-morphing] { clip-path: inset(-50% calc(var(--space-group) * -1)); }\n.labelContent { display: inline-flex; flex: none; align-items: center; }\n.labelPhase { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-related); white-space: nowrap; }\n.labelPhase svg { flex: none; }\n.primary { color: var(--primary-foreground); background: var(--primary); border-color: var(--primary); }\n.secondary { color: var(--foreground); background: var(--surface); border-color: var(--border); }\n.ghost { color: var(--text-secondary); background: transparent; border-color: transparent; }\n.danger { color: var(--danger); background: var(--surface); border-color: var(--border); }\n/* Filled and borderless, for controls that live in a bar (a search trigger, a toolbar, a switcher). Place it on --background or\n   --surface; on a --surface-muted panel it has no fill to show. */\n.soft { color: var(--foreground); background: var(--surface-muted); border-color: transparent; }\n/* A disabled outlined button keeps its shape and fades only its label, so it still reads as a button that is off, not as plain text. */\n.secondary:disabled, .danger:disabled { opacity: 1; color: var(--text-muted); background: var(--surface-muted); border-color: var(--border); }\n.danger:disabled { color: color-mix(in oklab, var(--danger) 55%, var(--surface-muted)); }\n.ghost:disabled, .soft:disabled { opacity: 1; color: var(--text-muted); }\n@media (hover: hover) and (pointer: fine) {\n  .primary:hover:not(:disabled) { opacity: .91; box-shadow: var(--shadow-resting); }\n  .secondary:hover:not(:disabled) { background: var(--surface-muted); box-shadow: var(--shadow-resting); }\n  .ghost:hover:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }\n  .danger:hover:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); }\n  .soft:hover:not(:disabled) { background: var(--surface-pressed); }\n}\n/* Color feedback on press, so touch and menu triggers (which never scale) still answer the finger. */\n.primary:active:not(:disabled) { opacity: .84; }\n.secondary:active:not(:disabled), .ghost:active:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }\n.danger:active:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); }\n.soft:active:not(:disabled) { background: var(--surface-pressed); }\n.xs { min-height: var(--control-height-xs); gap: var(--space-tight); padding-inline: var(--space-related); font-size: var(--text-xs); letter-spacing: var(--tracking-body); }\n/* A compact icon-only button is a square, with the icon at its usual 16px. */\n.xs[data-icon-only] { min-width: var(--control-height-xs); padding-inline: 0; }\n.xs svg { width: 16px; height: 16px; }\n.sm { min-height: var(--control-height-sm); padding-inline: var(--space-group); font-size: var(--text-sm); }\n.md { min-height: var(--control-height-md); }\n.lg { min-height: var(--control-height-lg); padding-inline: var(--space-comfort); font-size: var(--text-sm); }\n/* link: text with an underline, no box. The underline is light at rest (--button-link-underline, default --border-strong;\n   transparent shows it on hover only) and takes the text's colour on hover and focus. After the sizes, so it drops their\n   height and padding but keeps their font size. */\n.button.link { min-width: 0; min-height: 0; padding: 0; gap: var(--space-tight); border: 0; background: transparent; color: var(--text-secondary); }\n.link .labelPhase { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--button-link-underline, var(--border-strong)); transition: text-decoration-color var(--duration-fast) var(--ease-standard); }\n@media (hover: hover) and (pointer: fine) { .link:hover:not(:disabled) { color: var(--foreground); } .link:hover:not(:disabled) .labelPhase { text-decoration-color: currentColor; } }\n.link:focus-visible, .link:active:not(:disabled) { color: var(--foreground); }\n.link:focus-visible .labelPhase, .link:active:not(:disabled) .labelPhase { text-decoration-color: currentColor; }\n.link:disabled { opacity: 1; color: var(--text-muted); }\n.loader { position: absolute; left: 50%; top: 50%; display: grid; width: var(--space-inset); height: var(--space-inset); margin: calc(var(--space-inset) / -2); }\n.spinner { border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; corner-shape: round; animation: spin .7s linear infinite; }\n.loadingLabel { opacity: 0; }\n@keyframes spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) { .button { transition: none; } .labelSlot { transition: opacity var(--duration-instant) linear; } .spinner { animation-duration: .01ms; animation-iteration-count: 1; } }\n"}],"docs":"Docs and live preview: https://ui.teamofsilicons.com/theme-switch","meta":{"tier":"free","kind":"component","docs":"https://ui.teamofsilicons.com/theme-switch","markdown":"https://ui.teamofsilicons.com/theme-switch.md","tags":["theme","appearance","motion"],"status":"stable"}}