52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T3013,"use client" import * as React from "react" import { Monitor, Moon, Sun } from "lucide-react" import { ThemeProvider as NextThemesProvider, useTheme, type ThemeProviderProps, } from "next-themes" import { cn } from "@/lib/utils" /* ============================================================================= * ThemeSwitcher — Motoko UI * * Lightweight light/dark control built on next-themes. Three variants, CSS-only * motion (no framer/motion dependency), typed props, and a thin ThemeProvider * re-export so the switcher works out of the box. * * * * * ============================================================================= */ export type ThemeMode = "light" | "dark" | "system" export type ThemeSwitcherVariant = "icon" | "toggle" | "segmented" export type ThemeSwitcherSize = "sm" | "default" | "lg" const DEFAULT_THEMES: ThemeMode[] = ["light", "dark"] const SEGMENTED_DEFAULT_THEMES: ThemeMode[] = ["light", "dark", "system"] const ICON_BY_THEME = { light: Sun, dark: Moon, system: Monitor, } as const const LABEL_BY_THEME: Record = { light: "Light", dark: "Dark", system: "System", } const EASE_CLASS = "ease-[cubic-bezier(0.2,0,0,1)]" const SIZE_MAP = { sm: { icon: "size-7", iconGlyph: "size-3.5", toggle: "h-7 w-14", segmented: "h-8 gap-0.5 p-1", segmentedItem: "px-2.5 text-xs", segmentedIcon: "size-3.5", }, default: { icon: "size-8", iconGlyph: "size-4", toggle: "h-8 w-16", segmented: "h-9 gap-0.5 p-1", segmentedItem: "px-3 text-sm", segmentedIcon: "size-4", }, lg: { icon: "size-10", iconGlyph: "size-5", toggle: "h-10 w-20", segmented: "h-11 gap-1 p-1", segmentedItem: "px-3.5 text-sm", segmentedIcon: "size-4", }, } as const /** Lucide Moon is left-heavy — nudge so it shares the Sun's optical center. */ const MOON_OPTICAL = "translate-x-px" function nextTheme(current: ThemeMode, themes: ThemeMode[]): ThemeMode { const index = themes.indexOf(current) if (index < 0) return themes[0] ?? "light" return themes[(index + 1) % themes.length] ?? themes[0] ?? "light" } function useMounted() { const [mounted, setMounted] = React.useState(false) React.useEffect(() => { setMounted(true) }, []) return mounted } export interface ThemeSwitcherProps extends Omit< React.ComponentProps<"button">, "children" | "onChange" | "value" > { /** * Visual style. * - `icon` — compact sun/moon button (header-friendly) * - `toggle` — sliding track switch * - `segmented` — Motoko pill control (optional system) */ variant?: ThemeSwitcherVariant /** Themes available to cycle / select. */ themes?: ThemeMode[] /** Controlled theme. When set, pair with `onThemeChange`. */ value?: ThemeMode /** Uncontrolled initial theme hint (falls back to next-themes). */ defaultValue?: ThemeMode /** Fires after the theme is applied. */ onThemeChange?: (theme: ThemeMode) => void /** Disable enter/exit icon and pill transitions. */ disableAnimation?: boolean /** Control size. */ size?: ThemeSwitcherSize /** Override accessible / visible labels per theme. */ labels?: Partial> /** Show text labels next to icons in `segmented` variant. */ showLabels?: boolean } function ThemeSwitcher({ className, variant = "icon", themes: themesProp, value: valueProp, defaultValue, onThemeChange, disableAnimation = false, size = "default", labels, showLabels = false, disabled, title, ...props }: ThemeSwitcherProps) { const mounted = useMounted() const { theme, resolvedTheme, setTheme } = useTheme() const themes = themesProp ?? (variant === "segmented" ? SEGMENTED_DEFAULT_THEMES : DEFAULT_THEMES) const sizes = SIZE_MAP[size] const activeTheme: ThemeMode = React.useMemo(() => { if (valueProp) return valueProp if (theme === "light" || theme === "dark" || theme === "system") { return theme } if (defaultValue) return defaultValue return resolvedTheme === "dark" ? "dark" : "light" }, [valueProp, theme, defaultValue, resolvedTheme]) const resolved: "light" | "dark" = resolvedTheme === "dark" ? "dark" : "light" const applyTheme = React.useCallback( (next: ThemeMode) => { setTheme(next) onThemeChange?.(next) }, [onThemeChange, setTheme] ) const cycle = React.useCallback(() => { const current = variant === "segmented" ? activeTheme : resolved === "dark" ? "dark" : "light" applyTheme(nextTheme(current, themes)) }, [activeTheme, applyTheme, resolved, themes, variant]) const labelFor = (mode: ThemeMode) => labels?.[mode] ?? LABEL_BY_THEME[mode] if (!mounted) { return ( ) } if (variant === "toggle") { const isDark = resolved === "dark" return ( ) } if (variant === "segmented") { const activeIndex = Math.max(0, themes.indexOf(activeTheme)) const count = themes.length return (

{themes.map((mode) => { const Icon = ICON_BY_THEME[mode] const selected = activeTheme === mode return ( ) })}

) } // variant === "icon" const isDark = resolved === "dark" return ( ) } /** * Thin next-themes wrapper. Mount once at the app root with * `attribute="class"` so Motoko / Tailwind `dark:` variants work. */ function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } export { ThemeSwitcher, ThemeProvider } export type { ThemeProviderProps } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","next-themes",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next-themes","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"next-themes"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L52",null,{"namespace":"@motokoui","registryDependencies":["utils"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/motokoui/theme-switcher.tsx","content":"$54","type":"registry:ui","target":"components/ui/theme-switcher.tsx"}],"className":"h-[70svh] min-h-80"}]]}]