4e: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"] 4f: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"] 50:T3e0a,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; export interface ExpandableMobileNavItem { id: string; label: React.ReactNode; ariaLabel?: string; icon: React.ElementType; panelContent?: React.ReactNode; disabled?: boolean; className?: string; onSelect?: () => void; type?: "item"; } export interface ExpandableMobileNavSeparator { id: string; type: "separator"; } export type ExpandableMobileNavEntry = ExpandableMobileNavItem | ExpandableMobileNavSeparator; export interface ExpandableMobileNavPanel { triggerId: string; navItems?: readonly ExpandableMobileNavEntry[]; content?: React.ReactNode; className?: string; navClassName?: string; } export interface ExpandableMobileNavClassNames { shell?: string; item?: string; activeItem?: string; label?: string; panel?: string; panelNav?: string; panelItem?: string; activePanelItem?: string; separator?: string; } export interface ExpandableMobileNavLayout { iconSize?: number; panelIconSize?: number; gap?: number; collapsedPadding?: number; expandedPadding?: number; labelGap?: number; } export interface ExpandableMobileNavProps extends Omit, "onChange" | "defaultValue"> { navItems: readonly ExpandableMobileNavEntry[]; expandedPanel?: ExpandableMobileNavPanel; nestedExpandedPanel?: ExpandableMobileNavPanel; hideExpandedPanel?: boolean; hideNestedPanel?: boolean; value?: string | null; defaultValue?: string | null; onValueChange?: (value: string | null) => void; onItemSelect?: (item: ExpandableMobileNavItem) => void; classNames?: ExpandableMobileNavClassNames; layout?: ExpandableMobileNavLayout; closeOnOutsideClick?: boolean; } const SHELL_PADDING = 4; const BUTTON_VERTICAL_PADDING = 8; const SEPARATOR_WIDTH = 9; function isNavItem(entry: ExpandableMobileNavEntry): entry is ExpandableMobileNavItem { return entry.type !== "separator"; } function getItemAriaLabel(item: ExpandableMobileNavItem) { return item.ariaLabel ?? (typeof item.label === "string" ? item.label : undefined); } function AnimatedPanel({ children, className, id, }: { children: React.ReactNode; className?: string; id: string; }) { const shouldReduceMotion = useReducedMotion(); return ( {children} ); } function PanelNavItems({ navItems, value, onValueChange, expandedTriggerId, expandedPanelId, iconSize, classNames, navClassName, }: { navItems: readonly ExpandableMobileNavEntry[]; value: string | null; onValueChange: (item: ExpandableMobileNavItem) => void; expandedTriggerId?: string; expandedPanelId?: string; iconSize: number; classNames?: ExpandableMobileNavClassNames; navClassName?: string; }) { if (!navItems.length) return null; return (

{navItems.map((entry) => { if (!isNavItem(entry)) { return (

); } const Icon = entry.icon; const isActive = value === entry.id; const controlsExpandedPanel = entry.id === expandedTriggerId; return ( ); })}

); } function StructuredExpandedPanel({ expandedPanel, nestedExpandedPanel, hideNestedPanel, expandedPanelId, nestedExpandedPanelId, panelIconSize, classNames, onItemSelect, }: { expandedPanel: ExpandableMobileNavPanel; nestedExpandedPanel?: ExpandableMobileNavPanel; hideNestedPanel: boolean; expandedPanelId: string; nestedExpandedPanelId: string; panelIconSize: number; classNames?: ExpandableMobileNavClassNames; onItemSelect?: (item: ExpandableMobileNavItem) => void; }) { const [expandedValue, setExpandedValue] = React.useState(null); const [nestedValue, setNestedValue] = React.useState(null); const nestedPanelOpen = !hideNestedPanel && Boolean(nestedExpandedPanel) && expandedValue === nestedExpandedPanel?.triggerId; const handleExpandedItemSelect = (item: ExpandableMobileNavItem) => { const nextValue = expandedValue === item.id ? null : item.id; setExpandedValue(nextValue); if (nextValue !== nestedExpandedPanel?.triggerId) setNestedValue(null); item.onSelect?.(); onItemSelect?.(item); }; const handleNestedItemSelect = (item: ExpandableMobileNavItem) => { setNestedValue((currentValue) => (currentValue === item.id ? null : item.id)); item.onSelect?.(); onItemSelect?.(item); }; return ( {expandedPanel.content} {nestedPanelOpen && nestedExpandedPanel ? ( {nestedExpandedPanel.content} ) : null} ); } export function ExpandableMobileNav({ navItems, expandedPanel, nestedExpandedPanel, hideExpandedPanel = false, hideNestedPanel = false, value, defaultValue = null, onValueChange, onItemSelect, classNames, layout, closeOnOutsideClick = true, className, style, "aria-label": ariaLabel = "Mobile navigation", ...props }: ExpandableMobileNavProps) { const [internalValue, setInternalValue] = React.useState(defaultValue); const containerRef = React.useRef(null); const expandedPanelId = React.useId(); const nestedExpandedPanelId = React.useId(); const isControlled = value !== undefined; const activeValue = isControlled ? value : internalValue; const iconSize = layout?.iconSize ?? 20; const panelIconSize = layout?.panelIconSize ?? 18; const gap = layout?.gap ?? 8; const collapsedPadding = layout?.collapsedPadding ?? 8; const expandedPadding = layout?.expandedPadding ?? 16; const labelGap = layout?.labelGap ?? 8; const setActiveValue = React.useCallback( (nextValue: string | null) => { if (!isControlled) setInternalValue(nextValue); onValueChange?.(nextValue); }, [isControlled, onValueChange], ); const activeItem = React.useMemo( () => navItems.find( (entry): entry is ExpandableMobileNavItem => isNavItem(entry) && entry.id === activeValue, ) ?? null, [activeValue, navItems], ); const collapsedToolbarWidth = React.useMemo(() => { const itemsWidth = navItems.reduce((width, entry) => { if (!isNavItem(entry)) return width + SEPARATOR_WIDTH; return width + iconSize + collapsedPadding * 2; }, 0); const gapsWidth = Math.max(0, navItems.length - 1) * gap; return SHELL_PADDING * 2 + itemsWidth + gapsWidth; }, [collapsedPadding, gap, iconSize, navItems]); const toolbarHeight = SHELL_PADDING * 2 + iconSize + BUTTON_VERTICAL_PADDING * 2; const structuredPanelOpen = !hideExpandedPanel && Boolean(expandedPanel) && activeValue === expandedPanel?.triggerId; const customPanelOpen = !hideExpandedPanel && !structuredPanelOpen && Boolean(activeItem?.panelContent); React.useEffect(() => { if (!closeOnOutsideClick) return; const handleMouseDown = (event: MouseEvent) => { if (!containerRef.current?.contains(event.target as Node)) setActiveValue(null); }; document.addEventListener("mousedown", handleMouseDown); return () => document.removeEventListener("mousedown", handleMouseDown); }, [closeOnOutsideClick, setActiveValue]); const handleItemClick = (item: ExpandableMobileNavItem) => { if (item.disabled) return; setActiveValue(activeValue === item.id ? null : item.id); item.onSelect?.(); onItemSelect?.(item); }; const buttonVariants = { initial: { gap: 0, paddingLeft: collapsedPadding, paddingRight: collapsedPadding, }, animate: (isActive: boolean) => ({ gap: isActive ? labelGap : 0, paddingLeft: isActive ? expandedPadding : collapsedPadding, paddingRight: isActive ? expandedPadding : collapsedPadding, }), }; const labelVariants = { initial: { width: 0, opacity: 0, transform: "translateY(-10px)" }, animate: { width: "auto", opacity: 1, transform: "translateY(0px)" }, exit: { width: 0, opacity: 0, transform: "translateY(-10px)" }, }; return (

{ if (event.key === "Escape") setActiveValue(null); }} > {structuredPanelOpen && expandedPanel ? ( ) : customPanelOpen && activeItem?.panelContent ? ( {activeItem.panelContent} ) : null}

{navItems.map((entry) => { if (!isNavItem(entry)) { return (

); } const Icon = entry.icon; const isActive = activeValue === entry.id; const controlsPanel = !hideExpandedPanel && (entry.id === expandedPanel?.triggerId || Boolean(entry.panelContent)); return ( handleItemClick(entry)} aria-label={getItemAriaLabel(entry)} aria-expanded={controlsPanel ? isActive : undefined} aria-controls={controlsPanel && isActive ? expandedPanelId : undefined} data-state={isActive ? "open" : "closed"} transition={{ delay: 0.1, duration: 0.3, ease: [0.08, 0.82, 0.17, 1], }} className={cn( "relative flex items-center whitespace-nowrap rounded-xl py-2 text-sm font-medium transition-colors duration-300 disabled:pointer-events-none disabled:opacity-50", isActive ? cn("bg-muted text-primary", classNames?.activeItem) : "text-muted-foreground hover:bg-muted hover:text-foreground", classNames?.item, entry.className, )} > ); })}

); } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/ui-components/expandable-mobile-nav.tsx","content":"$50","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]