@zendir/ui 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +1 -1
  2. package/dist/react/core/SideNav.js +9 -8
  3. package/dist/react/core/SideNav.js.map +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
  </p>
7
7
 
8
8
  <p align="center">
9
- <img src="https://img.shields.io/badge/version-0.1.0-6C47FF.svg?style=flat&colorA=18181B" alt="version" />
9
+ <img src="https://img.shields.io/npm/v/@zendir/ui?style=flat&colorA=18181B&colorB=6C47FF" alt="npm version" />
10
10
  <img src="https://img.shields.io/badge/license-MIT-6C47FF.svg?style=flat&colorA=18181B" alt="License" />
11
11
  <img src="https://img.shields.io/badge/TypeScript-5.0+-6C47FF.svg?style=flat&colorA=18181B" alt="TypeScript" />
12
12
  <img src="https://img.shields.io/badge/React-18%2F19-6C47FF.svg?style=flat&colorA=18181B" alt="React" />
package/dist/react/core/SideNav.js CHANGED
@@ -132,22 +132,23 @@ const SideNavRoot = memo(function SideNav2({
132
132
  onClick: () => setMobileOpen(true),
133
133
  style: {
134
134
  position: "fixed",
135
- top: tokens.spacing.sm,
136
- left: tokens.spacing.sm,
135
+ top: 6,
136
+ left: 6,
137
137
  zIndex: 1001,
138
138
  display: "flex",
139
139
  alignItems: "center",
140
140
  justifyContent: "center",
141
- width: 44,
142
- height: 44,
143
- border: `1px solid ${tokens.colors.border.muted}`,
144
- borderRadius: tokens.borderRadius.md,
145
- backgroundColor: tokens.colors.background.elevated,
141
+ width: 32,
142
+ height: 32,
143
+ border: "none",
144
+ borderRadius: tokens.borderRadius.sm,
145
+ backgroundColor: "transparent",
146
146
  color: tokens.colors.text.primary,
147
147
  cursor: "pointer",
148
+ padding: 0,
148
149
  transition: tokens.animation.fast
149
150
  },
150
- children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
151
+ children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
151
152
  /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
152
153
  /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
153
154
  /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
package/dist/react/core/SideNav.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SideNav.js","sources":["../../../src/react/core/SideNav.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - SideNav Component\r\n * \r\n * Persistent sidebar navigation for operator dashboards. Compound component\r\n * pattern with Header, Item, Section, Divider, and Footer subcomponents.\r\n * \r\n * Responsive: Full sidebar on desktop, hamburger overlay on mobile.\r\n * \r\n * Astro UX Compliance:\r\n * - Persistent side navigation pattern (AstroUXDS Navigation)\r\n * - Status indicator integration\r\n * - Active state highlighting with accent color\r\n * - Keyboard navigation support\r\n * - Reduced motion support\r\n * \r\n * @example\r\n * ```tsx\r\n * <SideNav>\r\n * <SideNav.Header logo={<Icon name=\"satellite\" size={24} />} title=\"Space Range\" badge=\"Operator\" />\r\n * <SideNav.Section title=\"Operations\">\r\n * <SideNav.Item icon=\"controls\" label=\"Controls\" description=\"System command interface\" href=\"/controls\" active />\r\n * <SideNav.Item icon=\"telemetry\" label=\"Telemetry\" href=\"/telemetry\" badge={3} tag=\"LIVE\" tagVariant=\"success\" />\r\n * <SideNav.Item icon=\"images\" label=\"Images\" href=\"/images\" />\r\n * </SideNav.Section>\r\n * <SideNav.Divider />\r\n * <SideNav.Section title=\"Analysis\">\r\n * <SideNav.Item icon=\"chart\" label=\"Plots\" href=\"/plots\" />\r\n * <SideNav.Item icon=\"map\" label=\"Map\" href=\"/map\" />\r\n * </SideNav.Section>\r\n * <SideNav.Footer>\r\n * <SideNav.Item icon=\"settings\" label=\"Settings\" href=\"/settings\" />\r\n * </SideNav.Footer>\r\n * </SideNav>\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, createContext, useContext, useCallback, useEffect } from 'react';\r\nimport { useTheme } from '../theme';\r\nimport { safeAccentText } from '../utils';\r\nimport { Icon } from './Icon';\r\nimport type { IconName } from './Icon';\r\n\r\n// ─── Astro UX Status Shape ───────────────────────────────────────────────────\r\n\r\nconst SIDENAV_STATUS_COLORS: Record<string, string> = {\r\n off: '#a4abb6',\r\n standby: '#2dccff',\r\n normal: '#56f000',\r\n caution: '#fce83a',\r\n serious: '#ffb302',\r\n critical: '#ff3838',\r\n};\r\n\r\n/** Astro UX dual-coded status shape (color + geometry). */\r\nfunction NavStatusShape({ status, size = 8 }: { status: string; size?: number }) {\r\n const color = SIDENAV_STATUS_COLORS[status] ?? SIDENAV_STATUS_COLORS.off;\r\n const glow = `${color}50`;\r\n const style = { flexShrink: 0 as const, filter: `drop-shadow(0 0 3px ${glow})` };\r\n\r\n switch (status) {\r\n case 'caution':\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} /></svg>;\r\n case 'serious':\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><polygon points=\"6,1 11,6 6,11 1,6\" fill={color} /></svg>;\r\n case 'critical':\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><polygon points=\"6,11 1,2 11,2\" fill={color} /></svg>;\r\n case 'standby':\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" /></svg>;\r\n case 'off':\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} /></svg>;\r\n default: // normal\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} /></svg>;\r\n }\r\n}\r\n\r\n// ─── Responsive Breakpoints ──────────────────────────────────────────────────\r\n\r\nconst SIDENAV_BREAKPOINTS = {\r\n mobile: 768,\r\n tablet: 1024,\r\n} as const;\r\n\r\ntype SideNavMode = 'desktop' | 'tablet' | 'mobile';\r\n\r\nfunction getSideNavMode(width: number): SideNavMode {\r\n if (width < SIDENAV_BREAKPOINTS.mobile) return 'mobile';\r\n if (width < SIDENAV_BREAKPOINTS.tablet) return 'tablet';\r\n return 'desktop';\r\n}\r\n\r\n// ─── Context ─────────────────────────────────────────────────────────────────\r\n\r\ninterface SideNavContextValue {\r\n collapsed: boolean;\r\n mobileOpen: boolean;\r\n mode: SideNavMode;\r\n showCollapseToggle: boolean;\r\n setMobileOpen: (open: boolean) => void;\r\n toggleCollapse: () => void;\r\n}\r\n\r\nconst SideNavContext = createContext<SideNavContextValue>({\r\n collapsed: false,\r\n mobileOpen: false,\r\n mode: 'desktop',\r\n showCollapseToggle: true,\r\n setMobileOpen: () => {},\r\n toggleCollapse: () => {},\r\n});\r\n\r\n// ─── SideNav ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavProps {\r\n /** Collapsed mode (icon-only). When omitted, auto-collapses on tablet viewports. */\r\n collapsed?: boolean;\r\n /** Callback when collapsed state changes (via toggle button or responsive breakpoint). */\r\n onCollapsedChange?: (collapsed: boolean) => void;\r\n /** Show a collapse/expand toggle button in the sidebar (default true). */\r\n showCollapseToggle?: boolean;\r\n /** Width in pixels (default 260) */\r\n width?: number;\r\n /** Collapsed width in pixels (default 64) */\r\n collapsedWidth?: number;\r\n /**\r\n * Mobile viewport behavior.\r\n * - `'drawer'` (default): hamburger button with slide-out overlay drawer.\r\n * - `'collapsed'`: persistent collapsed icon-only strip (same as tablet).\r\n */\r\n mobileVariant?: 'drawer' | 'collapsed';\r\n /** Children (SideNav.Header, SideNav.Item, SideNav.Section, SideNav.Footer) */\r\n children?: React.ReactNode;\r\n /** Custom style */\r\n style?: React.CSSProperties;\r\n}\r\n\r\nconst SideNavRoot = memo(function SideNav({\r\n collapsed,\r\n onCollapsedChange,\r\n showCollapseToggle = true,\r\n width = 260,\r\n collapsedWidth = 64,\r\n mobileVariant = 'drawer',\r\n children,\r\n style,\r\n}: SideNavProps): React.ReactElement {\r\n const { tokens, theme } = useTheme();\r\n const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n const [mobileOpen, setMobileOpen] = useState(false);\r\n const [userCollapsed, setUserCollapsed] = useState<boolean | null>(null);\r\n const [viewMode, setViewMode] = useState<SideNavMode>(() => {\r\n if (typeof window !== 'undefined') return getSideNavMode(window.innerWidth);\r\n return 'desktop';\r\n });\r\n \r\n useEffect(() => {\r\n if (typeof window === 'undefined') return;\r\n let rafId: number;\r\n const handleResize = () => {\r\n cancelAnimationFrame(rafId);\r\n rafId = requestAnimationFrame(() => setViewMode(getSideNavMode(window.innerWidth)));\r\n };\r\n window.addEventListener('resize', handleResize, { passive: true });\r\n return () => {\r\n window.removeEventListener('resize', handleResize);\r\n cancelAnimationFrame(rafId);\r\n };\r\n }, []);\r\n\r\n // When mobileVariant='collapsed', promote mobile to tablet (collapsed inline strip)\r\n const effectiveMode = mobileVariant === 'collapsed' && viewMode === 'mobile' ? 'tablet' : viewMode;\r\n\r\n // Reset user toggle when crossing breakpoints\r\n useEffect(() => {\r\n setUserCollapsed(null);\r\n }, [effectiveMode]);\r\n\r\n // Close mobile drawer when switching away from mobile\r\n useEffect(() => {\r\n if (effectiveMode !== 'mobile' && mobileOpen) setMobileOpen(false);\r\n }, [effectiveMode, mobileOpen]);\r\n \r\n // Close mobile nav on escape\r\n useEffect(() => {\r\n if (!mobileOpen) return;\r\n const handleEsc = (e: KeyboardEvent) => {\r\n if (e.key === 'Escape') setMobileOpen(false);\r\n };\r\n document.addEventListener('keydown', handleEsc);\r\n return () => document.removeEventListener('keydown', handleEsc);\r\n }, [mobileOpen]);\r\n\r\n // Resolve collapsed: explicit prop > user toggle > auto (tablet = collapsed)\r\n const autoCollapsed = effectiveMode === 'tablet';\r\n const isCollapsed = collapsed !== undefined\r\n ? collapsed\r\n : userCollapsed !== null\r\n ? userCollapsed\r\n : autoCollapsed;\r\n const isMobile = effectiveMode === 'mobile';\r\n const navWidth = isCollapsed ? collapsedWidth : width;\r\n\r\n const handleToggleCollapse = useCallback(() => {\r\n const next = !isCollapsed;\r\n setUserCollapsed(next);\r\n onCollapsedChange?.(next);\r\n }, [isCollapsed, onCollapsedChange]);\r\n \r\n const navStyle: React.CSSProperties = {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: isMobile ? 280 : navWidth,\r\n height: '100%',\r\n backgroundColor: isTransparentTheme\r\n ? 'rgba(15, 12, 30, 0.7)'\r\n : tokens.colors.background.surface,\r\n borderRight: `1px solid ${tokens.colors.border.muted}`,\r\n transition: 'width 0.25s ease, transform 0.25s ease',\r\n overflowX: 'hidden',\r\n overflowY: 'auto',\r\n flexShrink: 0,\r\n fontFamily: tokens.typography.fontFamily.primary,\r\n ...(isTransparentTheme ? {\r\n backdropFilter: 'blur(16px)',\r\n WebkitBackdropFilter: 'blur(16px)',\r\n } : {}),\r\n ...style,\r\n };\r\n \r\n const contextValue: SideNavContextValue = { collapsed: isCollapsed, mobileOpen, mode: effectiveMode, showCollapseToggle, setMobileOpen, toggleCollapse: handleToggleCollapse };\r\n \r\n // Mobile: hamburger button + overlay drawer\r\n if (isMobile) {\r\n return (\r\n <SideNavContext.Provider value={contextValue}>\r\n {/* Hamburger button */}\r\n <button\r\n aria-label=\"Open navigation\"\r\n onClick={() => setMobileOpen(true)}\r\n style={{\r\n position: 'fixed',\r\n top: tokens.spacing.sm,\r\n left: tokens.spacing.sm,\r\n zIndex: 1001,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n width: 44,\r\n height: 44,\r\n border: `1px solid ${tokens.colors.border.muted}`,\r\n borderRadius: tokens.borderRadius.md,\r\n backgroundColor: tokens.colors.background.elevated,\r\n color: tokens.colors.text.primary,\r\n cursor: 'pointer',\r\n transition: tokens.animation.fast,\r\n }}\r\n >\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\r\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\r\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\r\n <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n \r\n {/* Overlay */}\r\n <div\r\n aria-hidden=\"true\"\r\n style={{\r\n position: 'fixed',\r\n inset: 0,\r\n zIndex: 1002,\r\n backgroundColor: `${tokens.colors.background.base}99`,\r\n backdropFilter: 'blur(4px)',\r\n opacity: mobileOpen ? 1 : 0,\r\n pointerEvents: mobileOpen ? 'auto' : 'none',\r\n transition: 'opacity 0.25s ease',\r\n }}\r\n onClick={() => setMobileOpen(false)}\r\n />\r\n \r\n {/* Slide-out nav */}\r\n <nav\r\n role=\"navigation\"\r\n aria-label=\"Main navigation\"\r\n style={{\r\n ...navStyle,\r\n position: 'fixed',\r\n top: 0,\r\n left: 0,\r\n zIndex: 1003,\r\n transform: mobileOpen ? 'translateX(0)' : 'translateX(-100%)',\r\n boxShadow: mobileOpen ? tokens.shadows.xl : 'none',\r\n }}\r\n >\r\n {children}\r\n </nav>\r\n </SideNavContext.Provider>\r\n );\r\n }\r\n \r\n return (\r\n <SideNavContext.Provider value={contextValue}>\r\n <nav role=\"navigation\" aria-label=\"Main navigation\" style={navStyle}>\r\n {children}\r\n </nav>\r\n </SideNavContext.Provider>\r\n );\r\n});\r\n\r\n// ─── Header ──────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavHeaderProps {\r\n /** Logo element (Icon, image, or ReactNode) */\r\n logo?: React.ReactNode;\r\n /** Compact logo shown when sidebar is collapsed or on tablet (e.g., just the icon mark) */\r\n collapsedLogo?: React.ReactNode;\r\n /** App title */\r\n title?: string;\r\n /** Subtitle or version */\r\n subtitle?: string;\r\n /** Role badge (e.g., \"Operator\", \"Admin\") */\r\n badge?: string;\r\n /** Badge variant for color */\r\n badgeVariant?: 'info' | 'success' | 'warning' | 'caution';\r\n /** Children override (advanced: replaces default header content entirely) */\r\n children?: React.ReactNode;\r\n}\r\n\r\n/** Chevron toggle button for collapsing/expanding the sidebar. */\r\nfunction CollapseToggleButton() {\r\n const { tokens } = useTheme();\r\n const { collapsed, toggleCollapse } = useContext(SideNavContext);\r\n const [hovered, setHovered] = useState(false);\r\n\r\n return (\r\n <button\r\n type=\"button\"\r\n aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\r\n onClick={toggleCollapse}\r\n onMouseEnter={() => setHovered(true)}\r\n onMouseLeave={() => setHovered(false)}\r\n style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n width: 28,\r\n height: 28,\r\n border: `1px solid ${hovered ? tokens.colors.border.focus : tokens.colors.border.muted}`,\r\n borderRadius: tokens.borderRadius.md,\r\n backgroundColor: hovered ? `${tokens.colors.accent.primary}15` : 'transparent',\r\n color: hovered ? tokens.colors.accent.primary : tokens.colors.text.tertiary,\r\n cursor: 'pointer',\r\n flexShrink: 0,\r\n padding: 0,\r\n transition: tokens.animation.fast,\r\n outline: 'none',\r\n }}\r\n >\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n style={{\r\n transition: 'transform 0.25s ease',\r\n transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)',\r\n }}\r\n >\r\n <polyline points=\"15 18 9 12 15 6\" />\r\n </svg>\r\n </button>\r\n );\r\n}\r\n\r\nconst SideNavHeader = memo(function SideNavHeader({\r\n logo,\r\n collapsedLogo,\r\n title,\r\n subtitle,\r\n badge,\r\n badgeVariant = 'info',\r\n children,\r\n}: SideNavHeaderProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n const { collapsed, mode, showCollapseToggle, toggleCollapse } = useContext(SideNavContext);\r\n const displayLogo = collapsed && collapsedLogo ? collapsedLogo : logo;\r\n const showToggle = showCollapseToggle && mode !== 'mobile';\r\n \r\n const badgeColors: Record<string, string> = {\r\n info: tokens.colors.accent.primary,\r\n success: tokens.colors.status.normal,\r\n warning: tokens.colors.status.caution,\r\n caution: tokens.colors.status.serious,\r\n };\r\n \r\n return (\r\n <div style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: tokens.spacing.sm,\r\n padding: collapsed ? `${tokens.spacing.md} ${tokens.spacing.sm}` : `0 16px 0 15px`,\r\n minHeight: 91,\r\n borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n flexShrink: 0,\r\n justifyContent: collapsed ? 'center' : 'flex-start',\r\n boxSizing: 'border-box',\r\n }}>\r\n {children ? children : (<>\r\n {displayLogo && <div style={{ flexShrink: 0, cursor: collapsed && showToggle ? 'pointer' : undefined }} onClick={collapsed && showToggle ? toggleCollapse : undefined}>{displayLogo}</div>}\r\n {!collapsed && (\r\n <div style={{ flex: 1, minWidth: 0 }}>\r\n {title && (\r\n <div style={{\r\n fontSize: tokens.typography.fontSize.sm,\r\n fontWeight: tokens.typography.fontWeight.bold,\r\n color: tokens.colors.text.primary,\r\n lineHeight: tokens.typography.lineHeight.tight,\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n }}>\r\n {title}\r\n </div>\r\n )}\r\n <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.xs, marginTop: '2px' }}>\r\n {subtitle && (\r\n <span style={{\r\n fontSize: tokens.typography.fontSize.xxs,\r\n color: tokens.colors.text.tertiary,\r\n }}>\r\n {subtitle}\r\n </span>\r\n )}\r\n {badge && (\r\n <span style={{\r\n fontSize: '0.6rem',\r\n fontWeight: tokens.typography.fontWeight.bold,\r\n color: badgeColors[badgeVariant] || safeAccentText(tokens.colors.accent.primary),\r\n backgroundColor: `${badgeColors[badgeVariant] || tokens.colors.accent.primary}18`,\r\n border: `1px solid ${badgeColors[badgeVariant] || tokens.colors.accent.primary}30`,\r\n padding: '1px 6px',\r\n borderRadius: tokens.borderRadius.sm,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.05em',\r\n }}>\r\n {badge}\r\n </span>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {showToggle && <CollapseToggleButton />}\r\n </>)}\r\n </div>\r\n );\r\n});\r\n\r\n// ─── Item ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavItemProps {\r\n /** Icon name from zendir-ui icon library */\r\n icon?: IconName | React.ReactNode;\r\n /** Label text */\r\n label: string;\r\n /** Description text displayed beneath the label (hidden in collapsed mode) */\r\n description?: string;\r\n /** Small tag/chip displayed after the label (e.g. \"v2\", \"NEW\", \"BETA\") */\r\n tag?: string;\r\n /** Tag color variant */\r\n tagVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger';\r\n /** Link href (renders <a>) */\r\n href?: string;\r\n /** Click handler (renders <button>) */\r\n onClick?: () => void;\r\n /** Active state */\r\n active?: boolean;\r\n /** Disabled state */\r\n disabled?: boolean;\r\n /** Notification badge count */\r\n badge?: number;\r\n /** External link indicator */\r\n external?: boolean;\r\n /**\r\n * Astro UX status level — renders a dual-coded indicator (color + shape).\r\n * Shapes per official Astro UXDS: normal = ● filled circle, standby = ◎ ring,\r\n * caution = ■ square, serious = ◆ diamond, critical = ▼ triangle, off = · small circle.\r\n */\r\n status?: 'off' | 'standby' | 'normal' | 'caution' | 'serious' | 'critical';\r\n /** Optional status label shown as tooltip or text next to status shape */\r\n statusLabel?: string;\r\n /** Right-side slot — arbitrary ReactNode rendered at the end of the item row */\r\n suffix?: React.ReactNode;\r\n}\r\n\r\nconst TAG_COLORS: Record<string, { bg: string; fg: string; border: string }> = {\r\n default: { bg: '#ffffff10', fg: '#9590a8', border: '#ffffff15' },\r\n info: { bg: '#8a2be218', fg: '#c4a0ff', border: '#8a2be230' },\r\n success: { bg: '#56f00018', fg: '#56f000', border: '#56f00030' },\r\n warning: { bg: '#fce83a18', fg: '#fce83a', border: '#fce83a30' },\r\n danger: { bg: '#ff383818', fg: '#ff3838', border: '#ff383830' },\r\n};\r\n\r\nconst SideNavItem = memo(function SideNavItem({\r\n icon,\r\n label,\r\n description,\r\n tag,\r\n tagVariant = 'default',\r\n href,\r\n onClick,\r\n active = false,\r\n disabled = false,\r\n badge,\r\n external = false,\r\n status,\r\n statusLabel,\r\n suffix,\r\n}: SideNavItemProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n const { collapsed, setMobileOpen } = useContext(SideNavContext);\r\n const [isHovered, setIsHovered] = useState(false);\r\n \r\n const handleClick = useCallback(() => {\r\n if (disabled) return;\r\n setMobileOpen(false);\r\n onClick?.();\r\n }, [disabled, onClick, setMobileOpen]);\r\n \r\n // Status-aware accent: when an item has a status, tint active/hover with its color\r\n const statusColor = status ? (SIDENAV_STATUS_COLORS[status] ?? undefined) : undefined;\r\n const accentColor = statusColor && active ? statusColor : safeAccentText(tokens.colors.accent.primary);\r\n \r\n const hasDescription = !!description && !collapsed;\r\n \r\n const iconElement = typeof icon === 'string'\r\n ? <Icon name={icon as IconName} size={hasDescription ? 22 : 20} color={active ? accentColor : tokens.colors.text.secondary} />\r\n : icon;\r\n \r\n const itemStyle: React.CSSProperties = {\r\n display: 'flex',\r\n alignItems: hasDescription ? 'flex-start' : 'center',\r\n gap: tokens.spacing.sm,\r\n padding: collapsed\r\n ? `${tokens.spacing.sm} 0`\r\n : hasDescription\r\n ? `10px 16px 10px 12px`\r\n : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,\r\n justifyContent: collapsed ? 'center' : 'flex-start',\r\n color: active\r\n ? accentColor\r\n : disabled\r\n ? tokens.colors.text.tertiary\r\n : tokens.colors.text.secondary,\r\n backgroundColor: active\r\n ? `${accentColor}12`\r\n : isHovered && !disabled\r\n ? `${accentColor}08`\r\n : 'transparent',\r\n fontSize: tokens.typography.fontSize.sm,\r\n fontWeight: active ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal,\r\n fontFamily: tokens.typography.fontFamily.primary,\r\n cursor: disabled ? 'not-allowed' : 'pointer',\r\n textDecoration: 'none',\r\n borderTop: 'none',\r\n borderRight: 'none',\r\n borderBottom: 'none',\r\n borderLeft: active\r\n ? `3px solid ${accentColor}`\r\n : '3px solid transparent',\r\n outline: 'none',\r\n width: '100%',\r\n boxSizing: 'border-box',\r\n transition: tokens.animation.fast,\r\n position: 'relative',\r\n opacity: disabled ? 0.5 : 1,\r\n };\r\n \r\n const tagColors = TAG_COLORS[tagVariant] ?? TAG_COLORS.default;\r\n \r\n const content = (\r\n <>\r\n {/* Icon + collapsed status overlay */}\r\n {iconElement && (\r\n <span style={{ flexShrink: 0, display: 'flex', position: 'relative', marginTop: hasDescription ? '2px' : 0 }}>\r\n {iconElement}\r\n {/* In collapsed mode, show a small status shape overlaid on the icon (top-left) */}\r\n {collapsed && status && (\r\n <span\r\n style={{\r\n position: 'absolute',\r\n top: -3,\r\n left: -4,\r\n lineHeight: 0,\r\n }}\r\n title={statusLabel ?? status}\r\n >\r\n <NavStatusShape status={status} size={7} />\r\n </span>\r\n )}\r\n </span>\r\n )}\r\n {!collapsed && (\r\n <>\r\n {/* Label + description block */}\r\n <span style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>\r\n <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>\r\n <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>\r\n {label}\r\n </span>\r\n {tag && (\r\n <span style={{\r\n fontSize: '0.6rem',\r\n fontWeight: tokens.typography.fontWeight.bold,\r\n color: tagColors.fg,\r\n backgroundColor: tagColors.bg,\r\n border: `1px solid ${tagColors.border}`,\r\n padding: '1px 5px',\r\n borderRadius: tokens.borderRadius.sm,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.04em',\r\n flexShrink: 0,\r\n lineHeight: '1.3',\r\n whiteSpace: 'nowrap',\r\n }}>\r\n {tag}\r\n </span>\r\n )}\r\n </span>\r\n {description && (\r\n <span style={{\r\n display: 'block',\r\n fontSize: tokens.typography.fontSize.xxs,\r\n color: tokens.colors.text.tertiary,\r\n lineHeight: tokens.typography.lineHeight.normal,\r\n marginTop: '2px',\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n fontWeight: tokens.typography.fontWeight.normal,\r\n }}>\r\n {description}\r\n </span>\r\n )}\r\n </span>\r\n {/* Right-side trailing elements — badge, status, suffix, external icon */}\r\n {(badge !== undefined && badge > 0 || status || suffix || external) && (\r\n <span style={{\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n gap: 8,\r\n flexShrink: 0,\r\n marginTop: hasDescription ? '2px' : 0,\r\n }}>\r\n {/* Badge */}\r\n {badge !== undefined && badge > 0 && (\r\n <span style={{\r\n fontSize: '0.65rem',\r\n fontWeight: tokens.typography.fontWeight.bold,\r\n color: '#fff',\r\n backgroundColor: tokens.colors.status.critical,\r\n borderRadius: tokens.borderRadius.full,\r\n minWidth: '18px',\r\n height: '18px',\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n padding: '0 5px',\r\n flexShrink: 0,\r\n lineHeight: 1,\r\n boxSizing: 'border-box',\r\n }}>\r\n {badge > 99 ? '99+' : badge}\r\n </span>\r\n )}\r\n {/* Status */}\r\n {status && (\r\n <span\r\n style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}\r\n role=\"status\"\r\n aria-label={`Status: ${statusLabel ?? status}`}\r\n title={statusLabel ?? status}\r\n >\r\n <NavStatusShape status={status} size={8} />\r\n </span>\r\n )}\r\n {/* Suffix */}\r\n {suffix && (\r\n <span style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center' }}>\r\n {suffix}\r\n </span>\r\n )}\r\n {/* External */}\r\n {external && (\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" style={{ flexShrink: 0, opacity: 0.5 }}>\r\n <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\r\n <polyline points=\"15 3 21 3 21 9\" />\r\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />\r\n </svg>\r\n )}\r\n </span>\r\n )}\r\n </>\r\n )}\r\n </>\r\n );\r\n \r\n const props = {\r\n style: itemStyle,\r\n onMouseEnter: () => setIsHovered(true),\r\n onMouseLeave: () => setIsHovered(false),\r\n title: collapsed ? label : undefined,\r\n 'aria-current': active ? ('page' as const) : undefined,\r\n 'aria-disabled': disabled,\r\n };\r\n \r\n if (href && !disabled) {\r\n return (\r\n <a href={href} onClick={handleClick} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} {...props}>\r\n {content}\r\n </a>\r\n );\r\n }\r\n \r\n return (\r\n <button type=\"button\" onClick={handleClick} disabled={disabled} {...props}>\r\n {content}\r\n </button>\r\n );\r\n});\r\n\r\n// ─── Section ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavSectionProps {\r\n /** Section title */\r\n title?: string;\r\n /** Children (SideNav.Item elements) */\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst SideNavSection = memo(function SideNavSection({\r\n title,\r\n children,\r\n}: SideNavSectionProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n const { collapsed } = useContext(SideNavContext);\r\n \r\n return (\r\n <div style={{ marginTop: tokens.spacing.sm }}>\r\n {title && !collapsed && (\r\n <div style={{\r\n padding: `${tokens.spacing.xs} 16px ${tokens.spacing.xs} 15px`,\r\n fontSize: tokens.typography.fontSize.xxs,\r\n fontWeight: tokens.typography.fontWeight.bold,\r\n color: tokens.colors.text.tertiary,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.08em',\r\n }}>\r\n {title}\r\n </div>\r\n )}\r\n {collapsed && title && (\r\n <div style={{\r\n width: '60%',\r\n height: '1px',\r\n backgroundColor: tokens.colors.border.muted,\r\n margin: `${tokens.spacing.xs} auto`,\r\n }} />\r\n )}\r\n {children}\r\n </div>\r\n );\r\n});\r\n\r\n// ─── Divider ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavDividerProps {\r\n /** Optional label shown in the center of the divider line */\r\n label?: string;\r\n}\r\n\r\nconst SideNavDivider = memo(function SideNavDivider({\r\n label,\r\n}: SideNavDividerProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n const { collapsed } = useContext(SideNavContext);\r\n\r\n if (collapsed) {\r\n return (\r\n <div style={{\r\n width: '60%',\r\n height: '1px',\r\n backgroundColor: tokens.colors.border.muted,\r\n margin: `${tokens.spacing.sm} auto`,\r\n }} />\r\n );\r\n }\r\n\r\n if (label) {\r\n return (\r\n <div style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: tokens.spacing.sm,\r\n padding: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\r\n }}>\r\n <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\r\n <span style={{\r\n fontSize: tokens.typography.fontSize.xxs,\r\n color: tokens.colors.text.tertiary,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.06em',\r\n whiteSpace: 'nowrap',\r\n }}>\r\n {label}\r\n </span>\r\n <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div style={{\r\n height: '1px',\r\n backgroundColor: tokens.colors.border.muted,\r\n margin: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\r\n }} />\r\n );\r\n});\r\n\r\n// ─── Footer ──────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavFooterProps {\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst SideNavFooter = memo(function SideNavFooter({\r\n children,\r\n}: SideNavFooterProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n \r\n return (\r\n <div style={{\r\n marginTop: 'auto',\r\n borderTop: `1px solid ${tokens.colors.border.muted}`,\r\n paddingTop: tokens.spacing.xs,\r\n paddingBottom: tokens.spacing.xs,\r\n }}>\r\n {children}\r\n </div>\r\n );\r\n});\r\n\r\n// ─── Compound Export ─────────────────────────────────────────────────────────\r\n\r\ntype SideNavComponent = typeof SideNavRoot & {\r\n Header: typeof SideNavHeader;\r\n Item: typeof SideNavItem;\r\n Section: typeof SideNavSection;\r\n Divider: typeof SideNavDivider;\r\n Footer: typeof SideNavFooter;\r\n};\r\n\r\nexport const SideNav: SideNavComponent = Object.assign(SideNavRoot, {\r\n Header: SideNavHeader,\r\n Item: SideNavItem,\r\n Section: SideNavSection,\r\n Divider: SideNavDivider,\r\n Footer: SideNavFooter,\r\n});\r\n\r\nexport default SideNav;\r\n"],"names":["SideNav","SideNavHeader","SideNavItem","SideNavSection","SideNavDivider","SideNavFooter"],"mappings":"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"}
1
+ {"version":3,"file":"SideNav.js","sources":["../../../src/react/core/SideNav.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - SideNav Component\r\n * \r\n * Persistent sidebar navigation for operator dashboards. Compound component\r\n * pattern with Header, Item, Section, Divider, and Footer subcomponents.\r\n * \r\n * Responsive: Full sidebar on desktop, hamburger overlay on mobile.\r\n * \r\n * Astro UX Compliance:\r\n * - Persistent side navigation pattern (AstroUXDS Navigation)\r\n * - Status indicator integration\r\n * - Active state highlighting with accent color\r\n * - Keyboard navigation support\r\n * - Reduced motion support\r\n * \r\n * @example\r\n * ```tsx\r\n * <SideNav>\r\n * <SideNav.Header logo={<Icon name=\"satellite\" size={24} />} title=\"Space Range\" badge=\"Operator\" />\r\n * <SideNav.Section title=\"Operations\">\r\n * <SideNav.Item icon=\"controls\" label=\"Controls\" description=\"System command interface\" href=\"/controls\" active />\r\n * <SideNav.Item icon=\"telemetry\" label=\"Telemetry\" href=\"/telemetry\" badge={3} tag=\"LIVE\" tagVariant=\"success\" />\r\n * <SideNav.Item icon=\"images\" label=\"Images\" href=\"/images\" />\r\n * </SideNav.Section>\r\n * <SideNav.Divider />\r\n * <SideNav.Section title=\"Analysis\">\r\n * <SideNav.Item icon=\"chart\" label=\"Plots\" href=\"/plots\" />\r\n * <SideNav.Item icon=\"map\" label=\"Map\" href=\"/map\" />\r\n * </SideNav.Section>\r\n * <SideNav.Footer>\r\n * <SideNav.Item icon=\"settings\" label=\"Settings\" href=\"/settings\" />\r\n * </SideNav.Footer>\r\n * </SideNav>\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, createContext, useContext, useCallback, useEffect } from 'react';\r\nimport { useTheme } from '../theme';\r\nimport { safeAccentText } from '../utils';\r\nimport { Icon } from './Icon';\r\nimport type { IconName } from './Icon';\r\n\r\n// ─── Astro UX Status Shape ───────────────────────────────────────────────────\r\n\r\nconst SIDENAV_STATUS_COLORS: Record<string, string> = {\r\n off: '#a4abb6',\r\n standby: '#2dccff',\r\n normal: '#56f000',\r\n caution: '#fce83a',\r\n serious: '#ffb302',\r\n critical: '#ff3838',\r\n};\r\n\r\n/** Astro UX dual-coded status shape (color + geometry). */\r\nfunction NavStatusShape({ status, size = 8 }: { status: string; size?: number }) {\r\n const color = SIDENAV_STATUS_COLORS[status] ?? SIDENAV_STATUS_COLORS.off;\r\n const glow = `${color}50`;\r\n const style = { flexShrink: 0 as const, filter: `drop-shadow(0 0 3px ${glow})` };\r\n\r\n switch (status) {\r\n case 'caution':\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} /></svg>;\r\n case 'serious':\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><polygon points=\"6,1 11,6 6,11 1,6\" fill={color} /></svg>;\r\n case 'critical':\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><polygon points=\"6,11 1,2 11,2\" fill={color} /></svg>;\r\n case 'standby':\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" /></svg>;\r\n case 'off':\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} /></svg>;\r\n default: // normal\r\n return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} /></svg>;\r\n }\r\n}\r\n\r\n// ─── Responsive Breakpoints ──────────────────────────────────────────────────\r\n\r\nconst SIDENAV_BREAKPOINTS = {\r\n mobile: 768,\r\n tablet: 1024,\r\n} as const;\r\n\r\ntype SideNavMode = 'desktop' | 'tablet' | 'mobile';\r\n\r\nfunction getSideNavMode(width: number): SideNavMode {\r\n if (width < SIDENAV_BREAKPOINTS.mobile) return 'mobile';\r\n if (width < SIDENAV_BREAKPOINTS.tablet) return 'tablet';\r\n return 'desktop';\r\n}\r\n\r\n// ─── Context ─────────────────────────────────────────────────────────────────\r\n\r\ninterface SideNavContextValue {\r\n collapsed: boolean;\r\n mobileOpen: boolean;\r\n mode: SideNavMode;\r\n showCollapseToggle: boolean;\r\n setMobileOpen: (open: boolean) => void;\r\n toggleCollapse: () => void;\r\n}\r\n\r\nconst SideNavContext = createContext<SideNavContextValue>({\r\n collapsed: false,\r\n mobileOpen: false,\r\n mode: 'desktop',\r\n showCollapseToggle: true,\r\n setMobileOpen: () => {},\r\n toggleCollapse: () => {},\r\n});\r\n\r\n// ─── SideNav ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavProps {\r\n /** Collapsed mode (icon-only). When omitted, auto-collapses on tablet viewports. */\r\n collapsed?: boolean;\r\n /** Callback when collapsed state changes (via toggle button or responsive breakpoint). */\r\n onCollapsedChange?: (collapsed: boolean) => void;\r\n /** Show a collapse/expand toggle button in the sidebar (default true). */\r\n showCollapseToggle?: boolean;\r\n /** Width in pixels (default 260) */\r\n width?: number;\r\n /** Collapsed width in pixels (default 64) */\r\n collapsedWidth?: number;\r\n /**\r\n * Mobile viewport behavior.\r\n * - `'drawer'` (default): hamburger button with slide-out overlay drawer.\r\n * - `'collapsed'`: persistent collapsed icon-only strip (same as tablet).\r\n */\r\n mobileVariant?: 'drawer' | 'collapsed';\r\n /** Children (SideNav.Header, SideNav.Item, SideNav.Section, SideNav.Footer) */\r\n children?: React.ReactNode;\r\n /** Custom style */\r\n style?: React.CSSProperties;\r\n}\r\n\r\nconst SideNavRoot = memo(function SideNav({\r\n collapsed,\r\n onCollapsedChange,\r\n showCollapseToggle = true,\r\n width = 260,\r\n collapsedWidth = 64,\r\n mobileVariant = 'drawer',\r\n children,\r\n style,\r\n}: SideNavProps): React.ReactElement {\r\n const { tokens, theme } = useTheme();\r\n const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n const [mobileOpen, setMobileOpen] = useState(false);\r\n const [userCollapsed, setUserCollapsed] = useState<boolean | null>(null);\r\n const [viewMode, setViewMode] = useState<SideNavMode>(() => {\r\n if (typeof window !== 'undefined') return getSideNavMode(window.innerWidth);\r\n return 'desktop';\r\n });\r\n \r\n useEffect(() => {\r\n if (typeof window === 'undefined') return;\r\n let rafId: number;\r\n const handleResize = () => {\r\n cancelAnimationFrame(rafId);\r\n rafId = requestAnimationFrame(() => setViewMode(getSideNavMode(window.innerWidth)));\r\n };\r\n window.addEventListener('resize', handleResize, { passive: true });\r\n return () => {\r\n window.removeEventListener('resize', handleResize);\r\n cancelAnimationFrame(rafId);\r\n };\r\n }, []);\r\n\r\n // When mobileVariant='collapsed', promote mobile to tablet (collapsed inline strip)\r\n const effectiveMode = mobileVariant === 'collapsed' && viewMode === 'mobile' ? 'tablet' : viewMode;\r\n\r\n // Reset user toggle when crossing breakpoints\r\n useEffect(() => {\r\n setUserCollapsed(null);\r\n }, [effectiveMode]);\r\n\r\n // Close mobile drawer when switching away from mobile\r\n useEffect(() => {\r\n if (effectiveMode !== 'mobile' && mobileOpen) setMobileOpen(false);\r\n }, [effectiveMode, mobileOpen]);\r\n \r\n // Close mobile nav on escape\r\n useEffect(() => {\r\n if (!mobileOpen) return;\r\n const handleEsc = (e: KeyboardEvent) => {\r\n if (e.key === 'Escape') setMobileOpen(false);\r\n };\r\n document.addEventListener('keydown', handleEsc);\r\n return () => document.removeEventListener('keydown', handleEsc);\r\n }, [mobileOpen]);\r\n\r\n // Resolve collapsed: explicit prop > user toggle > auto (tablet = collapsed)\r\n const autoCollapsed = effectiveMode === 'tablet';\r\n const isCollapsed = collapsed !== undefined\r\n ? collapsed\r\n : userCollapsed !== null\r\n ? userCollapsed\r\n : autoCollapsed;\r\n const isMobile = effectiveMode === 'mobile';\r\n const navWidth = isCollapsed ? collapsedWidth : width;\r\n\r\n const handleToggleCollapse = useCallback(() => {\r\n const next = !isCollapsed;\r\n setUserCollapsed(next);\r\n onCollapsedChange?.(next);\r\n }, [isCollapsed, onCollapsedChange]);\r\n \r\n const navStyle: React.CSSProperties = {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: isMobile ? 280 : navWidth,\r\n height: '100%',\r\n backgroundColor: isTransparentTheme\r\n ? 'rgba(15, 12, 30, 0.7)'\r\n : tokens.colors.background.surface,\r\n borderRight: `1px solid ${tokens.colors.border.muted}`,\r\n transition: 'width 0.25s ease, transform 0.25s ease',\r\n overflowX: 'hidden',\r\n overflowY: 'auto',\r\n flexShrink: 0,\r\n fontFamily: tokens.typography.fontFamily.primary,\r\n ...(isTransparentTheme ? {\r\n backdropFilter: 'blur(16px)',\r\n WebkitBackdropFilter: 'blur(16px)',\r\n } : {}),\r\n ...style,\r\n };\r\n \r\n const contextValue: SideNavContextValue = { collapsed: isCollapsed, mobileOpen, mode: effectiveMode, showCollapseToggle, setMobileOpen, toggleCollapse: handleToggleCollapse };\r\n \r\n // Mobile: hamburger button + overlay drawer\r\n if (isMobile) {\r\n return (\r\n <SideNavContext.Provider value={contextValue}>\r\n {/* Hamburger button */}\r\n <button\r\n aria-label=\"Open navigation\"\r\n onClick={() => setMobileOpen(true)}\r\n style={{\r\n position: 'fixed',\r\n top: 6,\r\n left: 6,\r\n zIndex: 1001,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n width: 32,\r\n height: 32,\r\n border: 'none',\r\n borderRadius: tokens.borderRadius.sm,\r\n backgroundColor: 'transparent',\r\n color: tokens.colors.text.primary,\r\n cursor: 'pointer',\r\n padding: 0,\r\n transition: tokens.animation.fast,\r\n }}\r\n >\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\">\r\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\r\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\r\n <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n \r\n {/* Overlay */}\r\n <div\r\n aria-hidden=\"true\"\r\n style={{\r\n position: 'fixed',\r\n inset: 0,\r\n zIndex: 1002,\r\n backgroundColor: `${tokens.colors.background.base}99`,\r\n backdropFilter: 'blur(4px)',\r\n opacity: mobileOpen ? 1 : 0,\r\n pointerEvents: mobileOpen ? 'auto' : 'none',\r\n transition: 'opacity 0.25s ease',\r\n }}\r\n onClick={() => setMobileOpen(false)}\r\n />\r\n \r\n {/* Slide-out nav */}\r\n <nav\r\n role=\"navigation\"\r\n aria-label=\"Main navigation\"\r\n style={{\r\n ...navStyle,\r\n position: 'fixed',\r\n top: 0,\r\n left: 0,\r\n zIndex: 1003,\r\n transform: mobileOpen ? 'translateX(0)' : 'translateX(-100%)',\r\n boxShadow: mobileOpen ? tokens.shadows.xl : 'none',\r\n }}\r\n >\r\n {children}\r\n </nav>\r\n </SideNavContext.Provider>\r\n );\r\n }\r\n \r\n return (\r\n <SideNavContext.Provider value={contextValue}>\r\n <nav role=\"navigation\" aria-label=\"Main navigation\" style={navStyle}>\r\n {children}\r\n </nav>\r\n </SideNavContext.Provider>\r\n );\r\n});\r\n\r\n// ─── Header ──────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavHeaderProps {\r\n /** Logo element (Icon, image, or ReactNode) */\r\n logo?: React.ReactNode;\r\n /** Compact logo shown when sidebar is collapsed or on tablet (e.g., just the icon mark) */\r\n collapsedLogo?: React.ReactNode;\r\n /** App title */\r\n title?: string;\r\n /** Subtitle or version */\r\n subtitle?: string;\r\n /** Role badge (e.g., \"Operator\", \"Admin\") */\r\n badge?: string;\r\n /** Badge variant for color */\r\n badgeVariant?: 'info' | 'success' | 'warning' | 'caution';\r\n /** Children override (advanced: replaces default header content entirely) */\r\n children?: React.ReactNode;\r\n}\r\n\r\n/** Chevron toggle button for collapsing/expanding the sidebar. */\r\nfunction CollapseToggleButton() {\r\n const { tokens } = useTheme();\r\n const { collapsed, toggleCollapse } = useContext(SideNavContext);\r\n const [hovered, setHovered] = useState(false);\r\n\r\n return (\r\n <button\r\n type=\"button\"\r\n aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\r\n onClick={toggleCollapse}\r\n onMouseEnter={() => setHovered(true)}\r\n onMouseLeave={() => setHovered(false)}\r\n style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n width: 28,\r\n height: 28,\r\n border: `1px solid ${hovered ? tokens.colors.border.focus : tokens.colors.border.muted}`,\r\n borderRadius: tokens.borderRadius.md,\r\n backgroundColor: hovered ? `${tokens.colors.accent.primary}15` : 'transparent',\r\n color: hovered ? tokens.colors.accent.primary : tokens.colors.text.tertiary,\r\n cursor: 'pointer',\r\n flexShrink: 0,\r\n padding: 0,\r\n transition: tokens.animation.fast,\r\n outline: 'none',\r\n }}\r\n >\r\n <svg\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n style={{\r\n transition: 'transform 0.25s ease',\r\n transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)',\r\n }}\r\n >\r\n <polyline points=\"15 18 9 12 15 6\" />\r\n </svg>\r\n </button>\r\n );\r\n}\r\n\r\nconst SideNavHeader = memo(function SideNavHeader({\r\n logo,\r\n collapsedLogo,\r\n title,\r\n subtitle,\r\n badge,\r\n badgeVariant = 'info',\r\n children,\r\n}: SideNavHeaderProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n const { collapsed, mode, showCollapseToggle, toggleCollapse } = useContext(SideNavContext);\r\n const displayLogo = collapsed && collapsedLogo ? collapsedLogo : logo;\r\n const showToggle = showCollapseToggle && mode !== 'mobile';\r\n \r\n const badgeColors: Record<string, string> = {\r\n info: tokens.colors.accent.primary,\r\n success: tokens.colors.status.normal,\r\n warning: tokens.colors.status.caution,\r\n caution: tokens.colors.status.serious,\r\n };\r\n \r\n return (\r\n <div style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: tokens.spacing.sm,\r\n padding: collapsed ? `${tokens.spacing.md} ${tokens.spacing.sm}` : `0 16px 0 15px`,\r\n minHeight: 91,\r\n borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n flexShrink: 0,\r\n justifyContent: collapsed ? 'center' : 'flex-start',\r\n boxSizing: 'border-box',\r\n }}>\r\n {children ? children : (<>\r\n {displayLogo && <div style={{ flexShrink: 0, cursor: collapsed && showToggle ? 'pointer' : undefined }} onClick={collapsed && showToggle ? toggleCollapse : undefined}>{displayLogo}</div>}\r\n {!collapsed && (\r\n <div style={{ flex: 1, minWidth: 0 }}>\r\n {title && (\r\n <div style={{\r\n fontSize: tokens.typography.fontSize.sm,\r\n fontWeight: tokens.typography.fontWeight.bold,\r\n color: tokens.colors.text.primary,\r\n lineHeight: tokens.typography.lineHeight.tight,\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n }}>\r\n {title}\r\n </div>\r\n )}\r\n <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.xs, marginTop: '2px' }}>\r\n {subtitle && (\r\n <span style={{\r\n fontSize: tokens.typography.fontSize.xxs,\r\n color: tokens.colors.text.tertiary,\r\n }}>\r\n {subtitle}\r\n </span>\r\n )}\r\n {badge && (\r\n <span style={{\r\n fontSize: '0.6rem',\r\n fontWeight: tokens.typography.fontWeight.bold,\r\n color: badgeColors[badgeVariant] || safeAccentText(tokens.colors.accent.primary),\r\n backgroundColor: `${badgeColors[badgeVariant] || tokens.colors.accent.primary}18`,\r\n border: `1px solid ${badgeColors[badgeVariant] || tokens.colors.accent.primary}30`,\r\n padding: '1px 6px',\r\n borderRadius: tokens.borderRadius.sm,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.05em',\r\n }}>\r\n {badge}\r\n </span>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {showToggle && <CollapseToggleButton />}\r\n </>)}\r\n </div>\r\n );\r\n});\r\n\r\n// ─── Item ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavItemProps {\r\n /** Icon name from zendir-ui icon library */\r\n icon?: IconName | React.ReactNode;\r\n /** Label text */\r\n label: string;\r\n /** Description text displayed beneath the label (hidden in collapsed mode) */\r\n description?: string;\r\n /** Small tag/chip displayed after the label (e.g. \"v2\", \"NEW\", \"BETA\") */\r\n tag?: string;\r\n /** Tag color variant */\r\n tagVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger';\r\n /** Link href (renders <a>) */\r\n href?: string;\r\n /** Click handler (renders <button>) */\r\n onClick?: () => void;\r\n /** Active state */\r\n active?: boolean;\r\n /** Disabled state */\r\n disabled?: boolean;\r\n /** Notification badge count */\r\n badge?: number;\r\n /** External link indicator */\r\n external?: boolean;\r\n /**\r\n * Astro UX status level — renders a dual-coded indicator (color + shape).\r\n * Shapes per official Astro UXDS: normal = ● filled circle, standby = ◎ ring,\r\n * caution = ■ square, serious = ◆ diamond, critical = ▼ triangle, off = · small circle.\r\n */\r\n status?: 'off' | 'standby' | 'normal' | 'caution' | 'serious' | 'critical';\r\n /** Optional status label shown as tooltip or text next to status shape */\r\n statusLabel?: string;\r\n /** Right-side slot — arbitrary ReactNode rendered at the end of the item row */\r\n suffix?: React.ReactNode;\r\n}\r\n\r\nconst TAG_COLORS: Record<string, { bg: string; fg: string; border: string }> = {\r\n default: { bg: '#ffffff10', fg: '#9590a8', border: '#ffffff15' },\r\n info: { bg: '#8a2be218', fg: '#c4a0ff', border: '#8a2be230' },\r\n success: { bg: '#56f00018', fg: '#56f000', border: '#56f00030' },\r\n warning: { bg: '#fce83a18', fg: '#fce83a', border: '#fce83a30' },\r\n danger: { bg: '#ff383818', fg: '#ff3838', border: '#ff383830' },\r\n};\r\n\r\nconst SideNavItem = memo(function SideNavItem({\r\n icon,\r\n label,\r\n description,\r\n tag,\r\n tagVariant = 'default',\r\n href,\r\n onClick,\r\n active = false,\r\n disabled = false,\r\n badge,\r\n external = false,\r\n status,\r\n statusLabel,\r\n suffix,\r\n}: SideNavItemProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n const { collapsed, setMobileOpen } = useContext(SideNavContext);\r\n const [isHovered, setIsHovered] = useState(false);\r\n \r\n const handleClick = useCallback(() => {\r\n if (disabled) return;\r\n setMobileOpen(false);\r\n onClick?.();\r\n }, [disabled, onClick, setMobileOpen]);\r\n \r\n // Status-aware accent: when an item has a status, tint active/hover with its color\r\n const statusColor = status ? (SIDENAV_STATUS_COLORS[status] ?? undefined) : undefined;\r\n const accentColor = statusColor && active ? statusColor : safeAccentText(tokens.colors.accent.primary);\r\n \r\n const hasDescription = !!description && !collapsed;\r\n \r\n const iconElement = typeof icon === 'string'\r\n ? <Icon name={icon as IconName} size={hasDescription ? 22 : 20} color={active ? accentColor : tokens.colors.text.secondary} />\r\n : icon;\r\n \r\n const itemStyle: React.CSSProperties = {\r\n display: 'flex',\r\n alignItems: hasDescription ? 'flex-start' : 'center',\r\n gap: tokens.spacing.sm,\r\n padding: collapsed\r\n ? `${tokens.spacing.sm} 0`\r\n : hasDescription\r\n ? `10px 16px 10px 12px`\r\n : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,\r\n justifyContent: collapsed ? 'center' : 'flex-start',\r\n color: active\r\n ? accentColor\r\n : disabled\r\n ? tokens.colors.text.tertiary\r\n : tokens.colors.text.secondary,\r\n backgroundColor: active\r\n ? `${accentColor}12`\r\n : isHovered && !disabled\r\n ? `${accentColor}08`\r\n : 'transparent',\r\n fontSize: tokens.typography.fontSize.sm,\r\n fontWeight: active ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal,\r\n fontFamily: tokens.typography.fontFamily.primary,\r\n cursor: disabled ? 'not-allowed' : 'pointer',\r\n textDecoration: 'none',\r\n borderTop: 'none',\r\n borderRight: 'none',\r\n borderBottom: 'none',\r\n borderLeft: active\r\n ? `3px solid ${accentColor}`\r\n : '3px solid transparent',\r\n outline: 'none',\r\n width: '100%',\r\n boxSizing: 'border-box',\r\n transition: tokens.animation.fast,\r\n position: 'relative',\r\n opacity: disabled ? 0.5 : 1,\r\n };\r\n \r\n const tagColors = TAG_COLORS[tagVariant] ?? TAG_COLORS.default;\r\n \r\n const content = (\r\n <>\r\n {/* Icon + collapsed status overlay */}\r\n {iconElement && (\r\n <span style={{ flexShrink: 0, display: 'flex', position: 'relative', marginTop: hasDescription ? '2px' : 0 }}>\r\n {iconElement}\r\n {/* In collapsed mode, show a small status shape overlaid on the icon (top-left) */}\r\n {collapsed && status && (\r\n <span\r\n style={{\r\n position: 'absolute',\r\n top: -3,\r\n left: -4,\r\n lineHeight: 0,\r\n }}\r\n title={statusLabel ?? status}\r\n >\r\n <NavStatusShape status={status} size={7} />\r\n </span>\r\n )}\r\n </span>\r\n )}\r\n {!collapsed && (\r\n <>\r\n {/* Label + description block */}\r\n <span style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>\r\n <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>\r\n <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>\r\n {label}\r\n </span>\r\n {tag && (\r\n <span style={{\r\n fontSize: '0.6rem',\r\n fontWeight: tokens.typography.fontWeight.bold,\r\n color: tagColors.fg,\r\n backgroundColor: tagColors.bg,\r\n border: `1px solid ${tagColors.border}`,\r\n padding: '1px 5px',\r\n borderRadius: tokens.borderRadius.sm,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.04em',\r\n flexShrink: 0,\r\n lineHeight: '1.3',\r\n whiteSpace: 'nowrap',\r\n }}>\r\n {tag}\r\n </span>\r\n )}\r\n </span>\r\n {description && (\r\n <span style={{\r\n display: 'block',\r\n fontSize: tokens.typography.fontSize.xxs,\r\n color: tokens.colors.text.tertiary,\r\n lineHeight: tokens.typography.lineHeight.normal,\r\n marginTop: '2px',\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n fontWeight: tokens.typography.fontWeight.normal,\r\n }}>\r\n {description}\r\n </span>\r\n )}\r\n </span>\r\n {/* Right-side trailing elements — badge, status, suffix, external icon */}\r\n {(badge !== undefined && badge > 0 || status || suffix || external) && (\r\n <span style={{\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n gap: 8,\r\n flexShrink: 0,\r\n marginTop: hasDescription ? '2px' : 0,\r\n }}>\r\n {/* Badge */}\r\n {badge !== undefined && badge > 0 && (\r\n <span style={{\r\n fontSize: '0.65rem',\r\n fontWeight: tokens.typography.fontWeight.bold,\r\n color: '#fff',\r\n backgroundColor: tokens.colors.status.critical,\r\n borderRadius: tokens.borderRadius.full,\r\n minWidth: '18px',\r\n height: '18px',\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n padding: '0 5px',\r\n flexShrink: 0,\r\n lineHeight: 1,\r\n boxSizing: 'border-box',\r\n }}>\r\n {badge > 99 ? '99+' : badge}\r\n </span>\r\n )}\r\n {/* Status */}\r\n {status && (\r\n <span\r\n style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}\r\n role=\"status\"\r\n aria-label={`Status: ${statusLabel ?? status}`}\r\n title={statusLabel ?? status}\r\n >\r\n <NavStatusShape status={status} size={8} />\r\n </span>\r\n )}\r\n {/* Suffix */}\r\n {suffix && (\r\n <span style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center' }}>\r\n {suffix}\r\n </span>\r\n )}\r\n {/* External */}\r\n {external && (\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" style={{ flexShrink: 0, opacity: 0.5 }}>\r\n <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\r\n <polyline points=\"15 3 21 3 21 9\" />\r\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />\r\n </svg>\r\n )}\r\n </span>\r\n )}\r\n </>\r\n )}\r\n </>\r\n );\r\n \r\n const props = {\r\n style: itemStyle,\r\n onMouseEnter: () => setIsHovered(true),\r\n onMouseLeave: () => setIsHovered(false),\r\n title: collapsed ? label : undefined,\r\n 'aria-current': active ? ('page' as const) : undefined,\r\n 'aria-disabled': disabled,\r\n };\r\n \r\n if (href && !disabled) {\r\n return (\r\n <a href={href} onClick={handleClick} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} {...props}>\r\n {content}\r\n </a>\r\n );\r\n }\r\n \r\n return (\r\n <button type=\"button\" onClick={handleClick} disabled={disabled} {...props}>\r\n {content}\r\n </button>\r\n );\r\n});\r\n\r\n// ─── Section ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavSectionProps {\r\n /** Section title */\r\n title?: string;\r\n /** Children (SideNav.Item elements) */\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst SideNavSection = memo(function SideNavSection({\r\n title,\r\n children,\r\n}: SideNavSectionProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n const { collapsed } = useContext(SideNavContext);\r\n \r\n return (\r\n <div style={{ marginTop: tokens.spacing.sm }}>\r\n {title && !collapsed && (\r\n <div style={{\r\n padding: `${tokens.spacing.xs} 16px ${tokens.spacing.xs} 15px`,\r\n fontSize: tokens.typography.fontSize.xxs,\r\n fontWeight: tokens.typography.fontWeight.bold,\r\n color: tokens.colors.text.tertiary,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.08em',\r\n }}>\r\n {title}\r\n </div>\r\n )}\r\n {collapsed && title && (\r\n <div style={{\r\n width: '60%',\r\n height: '1px',\r\n backgroundColor: tokens.colors.border.muted,\r\n margin: `${tokens.spacing.xs} auto`,\r\n }} />\r\n )}\r\n {children}\r\n </div>\r\n );\r\n});\r\n\r\n// ─── Divider ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavDividerProps {\r\n /** Optional label shown in the center of the divider line */\r\n label?: string;\r\n}\r\n\r\nconst SideNavDivider = memo(function SideNavDivider({\r\n label,\r\n}: SideNavDividerProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n const { collapsed } = useContext(SideNavContext);\r\n\r\n if (collapsed) {\r\n return (\r\n <div style={{\r\n width: '60%',\r\n height: '1px',\r\n backgroundColor: tokens.colors.border.muted,\r\n margin: `${tokens.spacing.sm} auto`,\r\n }} />\r\n );\r\n }\r\n\r\n if (label) {\r\n return (\r\n <div style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: tokens.spacing.sm,\r\n padding: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\r\n }}>\r\n <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\r\n <span style={{\r\n fontSize: tokens.typography.fontSize.xxs,\r\n color: tokens.colors.text.tertiary,\r\n textTransform: 'uppercase',\r\n letterSpacing: '0.06em',\r\n whiteSpace: 'nowrap',\r\n }}>\r\n {label}\r\n </span>\r\n <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div style={{\r\n height: '1px',\r\n backgroundColor: tokens.colors.border.muted,\r\n margin: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\r\n }} />\r\n );\r\n});\r\n\r\n// ─── Footer ──────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavFooterProps {\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst SideNavFooter = memo(function SideNavFooter({\r\n children,\r\n}: SideNavFooterProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n \r\n return (\r\n <div style={{\r\n marginTop: 'auto',\r\n borderTop: `1px solid ${tokens.colors.border.muted}`,\r\n paddingTop: tokens.spacing.xs,\r\n paddingBottom: tokens.spacing.xs,\r\n }}>\r\n {children}\r\n </div>\r\n );\r\n});\r\n\r\n// ─── Compound Export ─────────────────────────────────────────────────────────\r\n\r\ntype SideNavComponent = typeof SideNavRoot & {\r\n Header: typeof SideNavHeader;\r\n Item: typeof SideNavItem;\r\n Section: typeof SideNavSection;\r\n Divider: typeof SideNavDivider;\r\n Footer: typeof SideNavFooter;\r\n};\r\n\r\nexport const SideNav: SideNavComponent = Object.assign(SideNavRoot, {\r\n Header: SideNavHeader,\r\n Item: SideNavItem,\r\n Section: SideNavSection,\r\n Divider: SideNavDivider,\r\n Footer: SideNavFooter,\r\n});\r\n\r\nexport default SideNav;\r\n"],"names":["SideNav","SideNavHeader","SideNavItem","SideNavSection","SideNavDivider","SideNavFooter"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendir/ui",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "React UI components for space operations, built on the Astro UX Design System",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",