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[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"] 4f:T2bbc,"use client"; import { Compass, Feather, FlameKindling, type LucideIcon, Moon } from "lucide-react"; import { AnimatePresence, LayoutGroup, MotionConfig, motion, useReducedMotion } from "motion/react"; import { useState } from "react"; type DockDirection = -1 | 0 | 1; type DockItem = { id: string; label: string; icon: LucideIcon; tone: string; eyebrow: string; paragraph: string; cue: string; }; type MorphingActionDockProps = { items?: DockItem[]; className?: string; defaultActiveId?: string; }; const DOCK_ITEMS: DockItem[] = [ { id: "signal", label: "Signal", icon: Compass, tone: "from-zinc-900 via-zinc-800 to-zinc-700", eyebrow: "Clear Direction", paragraph: "A good interface reduces the number of things a person has to keep in their head. It points gently, removes hesitation, and lets the next action feel obvious without being loud.", cue: "Structure the next step", }, { id: "craft", label: "Craft", icon: Feather, tone: "from-neutral-900 via-neutral-800 to-stone-700", eyebrow: "Quiet Detail", paragraph: "The details that make software feel expensive are usually small: the right easing, a button that answers the finger, a surface that appears from where your eye already is.", cue: "Tune the invisible parts", }, { id: "energy", label: "Energy", icon: FlameKindling, tone: "from-slate-900 via-zinc-800 to-neutral-700", eyebrow: "Motion With Intent", paragraph: "Animation should explain a state change, not decorate a delay. When motion has a job, it makes the product feel quicker, more spatial, and easier to trust.", cue: "Use motion as feedback", }, { id: "calm", label: "Calm", icon: Moon, tone: "from-black via-neutral-800 to-zinc-700", eyebrow: "Lower The Noise", paragraph: "The strongest components know when to disappear. They hold their shape, avoid surprise, and give people a place to rest while they decide what to do next.", cue: "Keep the surface steady", }, ]; const spring = { type: "spring" as const, duration: 0.46, bounce: 0.16, }; const contentSpring = { type: "spring" as const, duration: 0.5, bounce: 0, }; const fastOut = [0.4, 0, 0.2, 1] as const; const bgShadow = "shadow-[0px_32px_64px_-16px_transparent,0px_16px_32px_-8px_transparent,0px_8px_16px_-4px_transparent,0px_4px_8px_-2px_transparent,0px_-8px_16px_-1px_transparent,0px_2px_4px_-1px_transparent,0px_0px_0px_1px_transparent,inset_0px_0px_0px_1px_rgba(0,0,0,0.1),inset_0px_1px_0px_rgb(0,0,0,0.15)] dark:bg-neutral-900 dark:shadow-[0px_32px_64px_-16px_transparent,0px_16px_32px_-8px_transparent,0px_8px_16px_-4px_transparent,0px_4px_8px_-2px_transparent,0px_-8px_16px_-1px_transparent,0px_2px_4px_-1px_transparent,0px_0px_0px_1px_transparent,inset_0px_0px_0px_1px_rgba(255,255,255,0.1),inset_0px_1px_0px_rgb(255,255,255,0.15)]"; const contentVariants = { enter: (direction: DockDirection) => ({ opacity: 0, x: direction === 0 ? 0 : direction > 0 ? "110%" : "-110%", }), center: { opacity: 1, x: 0, }, exit: (direction: DockDirection) => ({ opacity: 0, x: direction === 0 ? 0 : direction > 0 ? "-110%" : "110%", }), }; function cn(...classes: Array) { return classes.filter(Boolean).join(" "); } export function MorphingActionDock({ items = DOCK_ITEMS, className, defaultActiveId = DOCK_ITEMS[0]?.id, }: MorphingActionDockProps) { const shouldReduceMotion = useReducedMotion(); const [activeId, setActiveId] = useState(defaultActiveId); const [pinnedId, setPinnedId] = useState(null); const [isDockOpen, setIsDockOpen] = useState(false); const [direction, setDirection] = useState(1); const activeItem = items.find((item) => item.id === activeId) ?? items[0]; const activeIndex = Math.max( 0, items.findIndex((item) => item.id === activeItem?.id), ); function setActiveById(id: string, source: "pointer" | "keyboard" | "press") { const nextIndex = items.findIndex((item) => item.id === id); if (nextIndex === -1 || id === activeId) { return; } if (source === "keyboard" || shouldReduceMotion) { setDirection(0); } else { setDirection(nextIndex > activeIndex ? 1 : -1); } setActiveId(id); } function setPointerActive(id: string) { setActiveById(id, "pointer"); } function togglePinned(id: string) { setActiveById(id, "press"); setPinnedId((current) => (current === id ? null : id)); } function clearPointerActive() { if (pinnedId) { setActiveById(pinnedId, "pointer"); return; } setIsDockOpen(false); setActiveById(defaultActiveId, "pointer"); } if (!activeItem) { return null; } const contentDirection = shouldReduceMotion ? 0 : direction; return (

setIsDockOpen(true)} onBlurCapture={(event) => { if (!event.currentTarget.contains(event.relatedTarget) && !pinnedId) { clearPointerActive(); } }} onPointerEnter={() => setIsDockOpen(true)} onPointerLeave={clearPointerActive} >

{isDockOpen || pinnedId ? ( ) : null}

{items.map((item) => { const Icon = item.icon; const isActive = item.id === activeItem.id; const isItemPinned = pinnedId === item.id; return ( ); })}

); } export default MorphingActionDock; 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","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"}]]}]}],["$","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":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ui-components/morphing-action-dock.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]