4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:Tb1f,"use client"; import * as React from "react"; import { motion } from "motion/react"; import { Button, type ButtonProps } from "@/components/ui/button"; import { useChoreography } from "@/lib/cojeev-motion/choreography"; import { cn } from "@/lib/utils"; import { rememberThemeOrigin, type ThemeChangeDetails } from "@/lib/cojeev-motion/theme-transition"; export type ThemeMode = "light" | "dark"; export { applyTheme } from "@/lib/cojeev-motion/theme-transition"; export type { ThemeChangeDetails, ThemeRevealOrigin, ThemeRevealOptions } from "@/lib/cojeev-motion/theme-transition"; export type ThemeToggleProps = Omit & { mode: ThemeMode; onModeChange: (mode: ThemeMode, details?:ThemeChangeDetails) => void; showLabel?: boolean; label?: React.ReactNode; /** Keep a label on desktop and the same 44px icon target on small screens. */ responsive?: boolean; }; const sun = "M12 5C15.866 5 19 8.134 19 12C19 15.866 15.866 19 12 19C8.134 19 5 15.866 5 12C5 8.134 8.134 5 12 5Z"; const moon = "M18.9 15.2C17.2 19.3 12.9 21.2 8.8 19.4C4.7 17.6 2.7 13 4.4 8.8C5.4 6.2 7.7 4.3 10.4 3.8C8.1 10.4 12.3 16.8 18.9 15.2Z"; /** Controlled theme switch: the application owns persistence and the theme scope. */ export function ThemeToggle({mode,onModeChange,showLabel=true,label,responsive=false,className,onClick,...props}:ThemeToggleProps) { const {quiet,transition}=useChoreography(); const dark=mode==="dark"; return ; } 52:T8a1,@layer cojeev-states { :root .v-btn.v-theme-toggle[data-slot][data-label] { --mfill:var(--v-paper); --mstroke:var(--v-border); gap:8px; height:44px; width:112px; min-width:112px; padding:0 14px; border-radius:999px; background:var(--mfill); color:var(--v-text); box-shadow:inset 0 0 0 1px var(--v-border); } :root .v-btn.v-theme-toggle[data-slot][data-label]:is(:hover,:focus-visible) { --mfill:var(--v-beige); --mstroke:var(--v-text-2); } :root .v-btn.v-theme-toggle[data-slot][data-label]:has(>svg.v-morph) { background:transparent; box-shadow:none; } [data-slot="theme-toggle-icon"] { flex:none; overflow:visible; } .v-theme-toggle__label { color:inherit; font:500 13px/1 var(--font-text); } :root .v-btn.v-theme-toggle[data-slot][data-label="hidden"] { min-width:44px; width:44px; padding:0; } :root .v-btn.v-theme-toggle[data-slot][data-label]:is(:disabled,[aria-disabled="true"]:not([aria-busy="true"])) { --mfill:var(--v-disabled-face); --mstroke:var(--v-disabled-edge); color:var(--v-disabled-ink); } @media (max-width:640px) { :root .v-btn.v-theme-toggle[data-slot][data-responsive="true"] { min-width:44px; width:44px; padding:0; } .v-theme-toggle[data-responsive="true"] .v-theme-toggle__label { display:none; } } /* The destination DOM is clipped; Motion owns the changing organic contour. */ :root[data-theme-reveal]::view-transition { pointer-events:none; } :root[data-theme-reveal]::view-transition-group(root) { animation:none; background-image:var(--v-theme-glyph,none); background-position:var(--v-theme-glyph-position,0 0); background-size:var(--v-theme-glyph-size,0 0); background-repeat:no-repeat; } :root[data-theme-reveal]::view-transition-image-pair(root) { isolation:isolate; } :root[data-theme-reveal]::view-transition-old(root), :root[data-theme-reveal]::view-transition-new(root) { mix-blend-mode:normal; opacity:1; mask-image:var(--v-theme-glyph-mask,none); mask-size:100% 100%; } :root[data-theme-reveal]::view-transition-old(root) { animation:none; z-index:1; } :root[data-theme-reveal]::view-transition-new(root) { animation:v-theme-retain 8s linear; clip-path:var(--v-theme-clip); z-index:2; } @keyframes v-theme-retain { from { opacity:1; } to { opacity:1; } } } 4c:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/theme-toggle.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/theme-toggle.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/theme-toggle.css","content":"$52","type":"registry:file","target":"styles/cojeev/theme-toggle.css"}],"className":"h-[70svh] min-h-80"}]]}]