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:T38e3,"use client" import { useEffect, useState } from "react" import { animate, useMotionValue } from "motion/react" import * as motion from "motion/react-client" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" // Theme-aware color configurations const themes = { dark: { bg: "#111113", containerBg: "#141416", underLayerBg: "#101012", borderFrom: "#0a0a0b", borderVia: "#1a1a1c", borderTo: "#252527", wellBg: "#0a0a0b", innerRingBg: "#0c0c0d", buttonBg: "#111113", textActive: "text-white", textInactive: "text-[#6b6b6d] hover:text-zinc-400", iconColor: "text-white hover:text-zinc-300", }, light: { bg: "#f5f5f7", containerBg: "#ffffff", underLayerBg: "#e8e8ea", borderFrom: "#d0d0d5", borderVia: "#e5e5e8", borderTo: "#f0f0f2", wellBg: "#e0e0e3", innerRingBg: "#d8d8db", buttonBg: "#f0f0f2", textActive: "text-zinc-900", textInactive: "text-zinc-400 hover:text-zinc-600", iconColor: "text-zinc-700 hover:text-zinc-900", }, } interface NavItem { id: string icon: React.ReactNode label: string } const navItems: NavItem[] = [ { id: "dashboard", label: "Dashboard", icon: ( ), }, { id: "analytics", label: "Analytics", icon: ( ), }, { id: "layers", label: "Layers", icon: ( ), }, { id: "storage", label: "Storage", icon: ( ), }, ] function InnerButtonOverlay({ isOverlayActive, isDarkMode, }: { isOverlayActive: boolean isDarkMode: boolean }) { const overlayProgress = useMotionValue(isOverlayActive ? 1 : 0) useEffect(() => { const controls = animate(overlayProgress, isOverlayActive ? 1 : 0, { delay: isOverlayActive ? 0.02 : 0, duration: isOverlayActive ? 0.18 : 0.14, ease: "easeOut", }) return () => controls.stop() }, [isOverlayActive, overlayProgress]) return ( ) } export function GradientButtonGroup() { const [activeId, setActiveId] = useState("dashboard") const [overlayReadyId, setOverlayReadyId] = useState( "dashboard" ) const { resolvedTheme, setTheme } = useTheme() const isDarkMode = resolvedTheme !== "light" const theme = isDarkMode ? themes.dark : themes.light return (

{/* Background tray layer (recessed) - spans full width including theme toggle */}

{/* Foreground nav layer (raised) - sits on the left */}

{/* Outer rim/bezel */}

{/* Inner container */}

{navItems.map((item) => { const isActive = activeId === item.id const isOverlayActive = isActive && overlayReadyId === item.id const wellStyle = isDarkMode ? { background: "linear-gradient(180deg, #0a0a0c 0%, #0e0e10 50%, #0c0c0e 100%)", boxShadow: "inset 0 2px 6px rgba(0,0,0,0.9), inset 0 0 4px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05)", } : { boxShadow: "inset 0 2px 6px rgba(0,0,0,0.12), inset 0 0 4px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.9)", } const innerGapStyle = isDarkMode ? { background: "#0a0a0d", boxShadow: "inset 0 1px 3px rgba(0,0,0,0.9), inset 0 0 2px rgba(0,0,0,0.6)", } : { boxShadow: "inset 0 1px 3px rgba(0,0,0,0.18), inset 0 0 2px rgba(0,0,0,0.1)", } return ( ) })}

{/* Theme toggle - sits in the recessed tray on the right */}

) } 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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/gradient-button-group.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]