npm - @zendir/ui - Versions diffs - 0.6.0 → 0.6.1 - Mend

@zendir/ui 0.6.0 → 0.6.1

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 (116) hide show

package/dist/react/core/navigation/Pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/react/core/navigation/Pagination.tsx"],"sourcesContent":["/*\n @zendir/ui - Pagination Component\n \n Pagination following Astro UX Design System.\n \n @example\n * ```tsx\n * <Pagination\n * currentPage={page}\n * totalPages={10}\n * onChange={setPage}\n * />\n * ```\n /\n\nimport React, { memo, useMemo } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { classNames } from \"../../utils\";\n\nexport interface PaginationProps {\n /* Current page (1-indexed) /\n currentPage: number;\n /* Total number of pages /\n totalPages: number;\n /* Change handler /\n onChange: (page: number) => void;\n /* Number of page buttons to show /\n siblingCount?: number;\n /* Show first/last buttons /\n showFirstLast?: boolean;\n /* Show prev/next buttons /\n showPrevNext?: boolean;\n /* Size variant /\n size?: \"small\" \| \"medium\";\n /\n Display mode.\n * - `'buttons'` — numbered page buttons with ellipsis (default).\n * - `'text'` — compact \"Page X of Y\" label with prev/next arrows.\n /\n displayMode?: \"buttons\" \| \"text\";\n /* Disabled state /\n disabled?: boolean;\n /* Custom className /\n className?: string;\n}\n\nexport const Pagination = memo(function Pagination({\n currentPage,\n totalPages,\n onChange,\n siblingCount = 1,\n showFirstLast = true,\n showPrevNext = true,\n size = \"medium\",\n displayMode = \"buttons\",\n disabled = false,\n className = \"\",\n}: PaginationProps): React.ReactElement {\n const { tokens, theme } = useTheme();\n const isTransparentTheme =\n theme === \"transparent\" \|\|\n theme === \"transparent-bold\" \|\|\n theme === \"transparent-minimal\";\n\n const sizeConfig = {\n small: { buttonSize: \"28px\", fontSize: tokens.typography.fontSize.xxs },\n medium: { buttonSize: \"34px\", fontSize: tokens.typography.fontSize.xs },\n };\n const config = sizeConfig[size];\n\n // Calculate visible page numbers\n const pageNumbers = useMemo(() => {\n const range: (number \| \"ellipsis\")[] = [];\n const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\n const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\n\n const showLeftEllipsis = leftSiblingIndex > 2;\n const showRightEllipsis = rightSiblingIndex < totalPages - 1;\n\n if (!showLeftEllipsis && showRightEllipsis) {\n const leftRange = Array.from(\n { length: 3 + 2 siblingCount },\n (_, i) => i + 1,\n );\n range.push(...leftRange, \"ellipsis\", totalPages);\n } else if (showLeftEllipsis && !showRightEllipsis) {\n const rightRange = Array.from(\n { length: 3 + 2 * siblingCount },\n (_, i) => totalPages - 3 - 2 * siblingCount + i + 1,\n );\n range.push(1, \"ellipsis\", ...rightRange);\n } else if (showLeftEllipsis && showRightEllipsis) {\n const middleRange = Array.from(\n { length: 2 * siblingCount + 1 },\n (_, i) => leftSiblingIndex + i,\n );\n range.push(1, \"ellipsis\", ...middleRange, \"ellipsis\", totalPages);\n } else {\n range.push(...Array.from({ length: totalPages }, (_, i) => i + 1));\n }\n\n return range;\n }, [currentPage, totalPages, siblingCount]);\n\n const buttonStyle: React.CSSProperties = {\n width: config.buttonSize,\n height: config.buttonSize,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: config.fontSize,\n fontFamily: tokens.typography.fontFamily.mono,\n fontWeight: tokens.typography.fontWeight.medium,\n backgroundColor: isTransparentTheme\n ? `${tokens.colors.background.surface}99`\n : \"transparent\",\n border: `1px solid ${tokens.colors.border.muted}`,\n borderRadius: tokens.borderRadius.md,\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n opacity: disabled ? 0.5 : 1,\n transition: `all ${tokens.animation.fast}`,\n color: tokens.colors.text.primary,\n backdropFilter: isTransparentTheme ? \"blur(8px)\" : undefined,\n WebkitBackdropFilter: isTransparentTheme ? \"blur(8px)\" : undefined,\n };\n\n const activeButtonStyle: React.CSSProperties = {\n ...buttonStyle,\n backgroundColor: tokens.colors.accent.primary,\n borderColor: tokens.colors.accent.primary,\n color: tokens.colors.text.inverse,\n boxShadow: `0 0 0 1px ${tokens.colors.accent.primary}55, 0 0 14px ${tokens.colors.accent.primary}55`,\n };\n\n const handleClick = (page: number) => {\n if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n onChange(page);\n }\n };\n\n const NavButton = ({\n direction,\n targetPage,\n children,\n }: {\n direction: \"first\" \| \"prev\" \| \"next\" \| \"last\";\n targetPage: number;\n children: React.ReactNode;\n }) => {\n const isDisabled =\n disabled \|\|\n (direction === \"first\" \|\| direction === \"prev\"\n ? currentPage <= 1\n : currentPage >= totalPages);\n\n return (\n <button\n type=\"button\"\n onClick={() => handleClick(targetPage)}\n disabled={isDisabled}\n aria-label={\n direction === \"first\"\n ? \"Go to first page\"\n : direction === \"prev\"\n ? \"Go to previous page\"\n : direction === \"next\"\n ? \"Go to next page\"\n : \"Go to last page\"\n }\n style={{\n ...buttonStyle,\n opacity: isDisabled ? 0.3 : 1,\n cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n }}\n >\n {children}\n </button>\n );\n };\n\n return (\n <nav\n className={classNames(\"zendir-pagination\", className)}\n aria-label=\"Pagination\"\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacing.xs,\n padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n borderRadius: tokens.borderRadius.lg,\n ...(tokens.colors.border.cardStyle ?? {\n border: `1px solid ${tokens.colors.border.muted}`,\n }),\n background: isTransparentTheme\n ? `${tokens.colors.background.surface}66`\n : `${tokens.colors.background.surface}66`,\n backdropFilter: isTransparentTheme ? \"blur(10px)\" : undefined,\n WebkitBackdropFilter: isTransparentTheme ? \"blur(10px)\" : undefined,\n }}\n >\n {showFirstLast && (\n <NavButton direction=\"first\" targetPage={1}>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z\" />\n </svg>\n </NavButton>\n )}\n\n {showPrevNext && (\n <NavButton direction=\"prev\" targetPage={currentPage - 1}>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n </svg>\n </NavButton>\n )}\n\n {displayMode === \"text\" ? (\n <span\n style={{\n padding: `0 ${tokens.spacing.sm}`,\n color: tokens.colors.text.secondary,\n fontSize: tokens.typography.fontSize.xs,\n fontFamily: tokens.typography.fontFamily.mono,\n letterSpacing: \"0.02em\",\n whiteSpace: \"nowrap\",\n }}\n >\n Page {currentPage} of {totalPages}\n </span>\n ) : (\n pageNumbers.map((page, index) =>\n page === \"ellipsis\" ? (\n <span\n key={`ellipsis-${index}`}\n style={{\n width: config.buttonSize,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: tokens.colors.text.muted,\n }}\n >\n ...\n </span>\n ) : (\n <button\n key={page}\n type=\"button\"\n onClick={() => handleClick(page)}\n disabled={disabled}\n aria-current={page === currentPage ? \"page\" : undefined}\n style={page === currentPage ? activeButtonStyle : buttonStyle}\n onMouseEnter={(e) => {\n if (!disabled && page !== currentPage) {\n e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}22`;\n e.currentTarget.style.borderColor =\n tokens.colors.accent.primary;\n e.currentTarget.style.transform = \"translateY(-1px)\";\n }\n }}\n onMouseLeave={(e) => {\n if (!disabled && page !== currentPage) {\n e.currentTarget.style.backgroundColor = isTransparentTheme\n ? `${tokens.colors.background.surface}99`\n : \"transparent\";\n e.currentTarget.style.borderColor =\n tokens.colors.border.muted;\n e.currentTarget.style.transform = \"translateY(0)\";\n }\n }}\n >\n {page}\n </button>\n ),\n )\n )}\n\n {showPrevNext && (\n <NavButton direction=\"next\" targetPage={currentPage + 1}>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </NavButton>\n )}\n\n {showFirstLast && (\n <NavButton direction=\"last\" targetPage={totalPages}>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z\" />\n </svg>\n </NavButton>\n )}\n </nav>\n );\n});\n\nexport default Pagination;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA8CA,IAAa,aAAa,KAAK,SAAS,WAAW,EACjD,aACA,YACA,UACA,eAAe,GACf,gBAAgB,MAChB,eAAe,MACf,OAAO,UACP,cAAc,WACd,WAAW,OACX,YAAY,MAC0B;CACtC,MAAM,EAAE,QAAQ,UAAU,SAAS;CACnC,MAAM,qBACJ,UAAU,iBACV,UAAU,sBACV,UAAU;CAMZ,MAAM,SAAS;EAHb,OAAO;GAAE,YAAY;GAAQ,UAAU,OAAO,WAAW,SAAS;EAAI;EACtE,QAAQ;GAAE,YAAY;GAAQ,UAAU,OAAO,WAAW,SAAS;EAAG;CAEzD,EAAW;CAG1B,MAAM,cAAc,cAAc;EAChC,MAAM,QAAiC,CAAC;EACxC,MAAM,mBAAmB,KAAK,IAAI,cAAc,cAAc,CAAC;EAC/D,MAAM,oBAAoB,KAAK,IAAI,cAAc,cAAc,UAAU;EAEzE,MAAM,mBAAmB,mBAAmB;EAC5C,MAAM,oBAAoB,oBAAoB,aAAa;EAE3D,IAAI,CAAC,oBAAoB,mBAAmB;GAC1C,MAAM,YAAY,MAAM,KACtB,EAAE,QAAQ,IAAI,IAAI,aAAa,IAC9B,GAAG,MAAM,IAAI,CAChB;GACA,MAAM,KAAK,GAAG,WAAW,YAAY,UAAU;EACjD,OAAO,IAAI,oBAAoB,CAAC,mBAAmB;GACjD,MAAM,aAAa,MAAM,KACvB,EAAE,QAAQ,IAAI,IAAI,aAAa,IAC9B,GAAG,MAAM,aAAa,IAAI,IAAI,eAAe,IAAI,CACpD;GACA,MAAM,KAAK,GAAG,YAAY,GAAG,UAAU;EACzC,OAAO,IAAI,oBAAoB,mBAAmB;GAChD,MAAM,cAAc,MAAM,KACxB,EAAE,QAAQ,IAAI,eAAe,EAAE,IAC9B,GAAG,MAAM,mBAAmB,CAC/B;GACA,MAAM,KAAK,GAAG,YAAY,GAAG,aAAa,YAAY,UAAU;EAClE,OACE,MAAM,KAAK,GAAG,MAAM,KAAK,EAAE,QAAQ,WAAW,IAAI,GAAG,MAAM,IAAI,CAAC,CAAC;EAGnE,OAAO;CACT,GAAG;EAAC;EAAa;EAAY;CAAY,CAAC;CAE1C,MAAM,cAAmC;EACvC,OAAO,OAAO;EACd,QAAQ,OAAO;EACf,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,UAAU,OAAO;EACjB,YAAY,OAAO,WAAW,WAAW;EACzC,YAAY,OAAO,WAAW,WAAW;EACzC,iBAAiB,qBACb,GAAG,OAAO,OAAO,WAAW,QAAQ,MACpC;EACJ,QAAQ,aAAa,OAAO,OAAO,OAAO;EAC1C,cAAc,OAAO,aAAa;EAClC,QAAQ,WAAW,gBAAgB;EACnC,SAAS,WAAW,KAAM;EAC1B,YAAY,OAAO,OAAO,UAAU;EACpC,OAAO,OAAO,OAAO,KAAK;EAC1B,gBAAgB,qBAAqB,cAAc,KAAA;EACnD,sBAAsB,qBAAqB,cAAc,KAAA;CAC3D;CAEA,MAAM,oBAAyC;EAC7C,GAAG;EACH,iBAAiB,OAAO,OAAO,OAAO;EACtC,aAAa,OAAO,OAAO,OAAO;EAClC,OAAO,OAAO,OAAO,KAAK;EAC1B,WAAW,aAAa,OAAO,OAAO,OAAO,QAAQ,eAAe,OAAO,OAAO,OAAO,QAAQ;CACnG;CAEA,MAAM,eAAe,SAAiB;EACpC,IAAI,CAAC,YAAY,QAAQ,KAAK,QAAQ,cAAc,SAAS,aAC3D,SAAS,IAAI;CAEjB;CAEA,MAAM,aAAa,EACjB,WACA,YACA,eAKI;EACJ,MAAM,aACJ,aACC,cAAc,WAAW,cAAc,SACpC,eAAe,IACf,eAAe;EAErB,OACE,oBAAC,UAAD;GACE,MAAK;GACL,eAAe,YAAY,UAAU;GACrC,UAAU;GACV,cACE,cAAc,UACV,qBACA,cAAc,SACZ,wBACA,cAAc,SACZ,oBACA;GAEV,OAAO;IACL,GAAG;IACH,SAAS,aAAa,KAAM;IAC5B,QAAQ,aAAa,gBAAgB;GACvC;GAEC;EACK,CAAA;CAEZ;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,WAAW,qBAAqB,SAAS;EACpD,cAAW;EACX,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK,OAAO,QAAQ;GACpB,SAAS,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,QAAQ;GAChD,cAAc,OAAO,aAAa;GAClC,GAAI,OAAO,OAAO,OAAO,aAAa,EACpC,QAAQ,aAAa,OAAO,OAAO,OAAO,QAC5C;GACA,YAAY,qBACR,GAAG,OAAO,OAAO,WAAW,QAAQ,MACpC,GAAG,OAAO,OAAO,WAAW,QAAQ;GACxC,gBAAgB,qBAAqB,eAAe,KAAA;GACpD,sBAAsB,qBAAqB,eAAe,KAAA;EAC5D;YAjBF;GAmBG,iBACC,oBAAC,WAAD;IAAW,WAAU;IAAQ,YAAY;cACvC,oBAAC,OAAD;KAAK,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,MAAK;eACnD,oBAAC,QAAD,EAAM,GAAE,6DAA8D,CAAA;IACnE,CAAA;GACI,CAAA;GAGZ,gBACC,oBAAC,WAAD;IAAW,WAAU;IAAO,YAAY,cAAc;cACpD,oBAAC,OAAD;KAAK,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,MAAK;eACnD,oBAAC,QAAD,EAAM,GAAE,gDAAiD,CAAA;IACtD,CAAA;GACI,CAAA;GAGZ,gBAAgB,SACf,qBAAC,QAAD;IACE,OAAO;KACL,SAAS,KAAK,OAAO,QAAQ;KAC7B,OAAO,OAAO,OAAO,KAAK;KAC1B,UAAU,OAAO,WAAW,SAAS;KACrC,YAAY,OAAO,WAAW,WAAW;KACzC,eAAe;KACf,YAAY;IACd;cARF;KASC;KACO;KAAY;KAAK;IACnB;QAEN,YAAY,KAAK,MAAM,UACrB,SAAS,aACP,oBAAC,QAAD;IAEE,OAAO;KACL,OAAO,OAAO;KACd,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,OAAO,OAAO,OAAO,KAAK;IAC5B;cACD;GAEK,GAVC,YAAY,OAUb,IAEN,oBAAC,UAAD;IAEE,MAAK;IACL,eAAe,YAAY,IAAI;IACrB;IACV,gBAAc,SAAS,cAAc,SAAS,KAAA;IAC9C,OAAO,SAAS,cAAc,oBAAoB;IAClD,eAAe,MAAM;KACnB,IAAI,CAAC,YAAY,SAAS,aAAa;MACrC,EAAE,cAAc,MAAM,kBAAkB,GAAG,OAAO,OAAO,OAAO,QAAQ;MACxE,EAAE,cAAc,MAAM,cACpB,OAAO,OAAO,OAAO;MACvB,EAAE,cAAc,MAAM,YAAY;KACpC;IACF;IACA,eAAe,MAAM;KACnB,IAAI,CAAC,YAAY,SAAS,aAAa;MACrC,EAAE,cAAc,MAAM,kBAAkB,qBACpC,GAAG,OAAO,OAAO,WAAW,QAAQ,MACpC;MACJ,EAAE,cAAc,MAAM,cACpB,OAAO,OAAO,OAAO;MACvB,EAAE,cAAc,MAAM,YAAY;KACpC;IACF;cAEC;GACK,GA1BD,IA0BC,CAEZ;GAGD,gBACC,oBAAC,WAAD;IAAW,WAAU;IAAO,YAAY,cAAc;cACpD,oBAAC,OAAD;KAAK,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,MAAK;eACnD,oBAAC,QAAD,EAAM,GAAE,iDAAkD,CAAA;IACvD,CAAA;GACI,CAAA;GAGZ,iBACC,oBAAC,WAAD;IAAW,WAAU;IAAO,YAAY;cACtC,oBAAC,OAAD;KAAK,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,MAAK;eACnD,oBAAC,QAAD,EAAM,GAAE,6DAA8D,CAAA;IACnE,CAAA;GACI,CAAA;EAEV;;AAET,CAAC"}
1	+ {"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/react/core/navigation/Pagination.tsx"],"sourcesContent":["/*\r\n @zendir/ui - Pagination Component\r\n \r\n Pagination following Astro UX Design System.\r\n \r\n @example\r\n * ```tsx\r\n * <Pagination\r\n * currentPage={page}\r\n * totalPages={10}\r\n * onChange={setPage}\r\n * />\r\n * ```\r\n /\r\n\r\nimport React, { memo, useMemo } from \"react\";\r\nimport { useTheme } from \"../../theme\";\r\nimport { classNames } from \"../../utils\";\r\n\r\nexport interface PaginationProps {\r\n /* Current page (1-indexed) /\r\n currentPage: number;\r\n /* Total number of pages /\r\n totalPages: number;\r\n /* Change handler /\r\n onChange: (page: number) => void;\r\n /* Number of page buttons to show /\r\n siblingCount?: number;\r\n /* Show first/last buttons /\r\n showFirstLast?: boolean;\r\n /* Show prev/next buttons /\r\n showPrevNext?: boolean;\r\n /* Size variant /\r\n size?: \"small\" \| \"medium\";\r\n /\r\n Display mode.\r\n * - `'buttons'` — numbered page buttons with ellipsis (default).\r\n * - `'text'` — compact \"Page X of Y\" label with prev/next arrows.\r\n /\r\n displayMode?: \"buttons\" \| \"text\";\r\n /* Disabled state /\r\n disabled?: boolean;\r\n /* Custom className /\r\n className?: string;\r\n}\r\n\r\nexport const Pagination = memo(function Pagination({\r\n currentPage,\r\n totalPages,\r\n onChange,\r\n siblingCount = 1,\r\n showFirstLast = true,\r\n showPrevNext = true,\r\n size = \"medium\",\r\n displayMode = \"buttons\",\r\n disabled = false,\r\n className = \"\",\r\n}: PaginationProps): React.ReactElement {\r\n const { tokens, theme } = useTheme();\r\n const isTransparentTheme =\r\n theme === \"transparent\" \|\|\r\n theme === \"transparent-bold\" \|\|\r\n theme === \"transparent-minimal\";\r\n\r\n const sizeConfig = {\r\n small: { buttonSize: \"28px\", fontSize: tokens.typography.fontSize.xxs },\r\n medium: { buttonSize: \"34px\", fontSize: tokens.typography.fontSize.xs },\r\n };\r\n const config = sizeConfig[size];\r\n\r\n // Calculate visible page numbers\r\n const pageNumbers = useMemo(() => {\r\n const range: (number \| \"ellipsis\")[] = [];\r\n const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\r\n const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\r\n\r\n const showLeftEllipsis = leftSiblingIndex > 2;\r\n const showRightEllipsis = rightSiblingIndex < totalPages - 1;\r\n\r\n if (!showLeftEllipsis && showRightEllipsis) {\r\n const leftRange = Array.from(\r\n { length: 3 + 2 siblingCount },\r\n (_, i) => i + 1,\r\n );\r\n range.push(...leftRange, \"ellipsis\", totalPages);\r\n } else if (showLeftEllipsis && !showRightEllipsis) {\r\n const rightRange = Array.from(\r\n { length: 3 + 2 * siblingCount },\r\n (_, i) => totalPages - 3 - 2 * siblingCount + i + 1,\r\n );\r\n range.push(1, \"ellipsis\", ...rightRange);\r\n } else if (showLeftEllipsis && showRightEllipsis) {\r\n const middleRange = Array.from(\r\n { length: 2 * siblingCount + 1 },\r\n (_, i) => leftSiblingIndex + i,\r\n );\r\n range.push(1, \"ellipsis\", ...middleRange, \"ellipsis\", totalPages);\r\n } else {\r\n range.push(...Array.from({ length: totalPages }, (_, i) => i + 1));\r\n }\r\n\r\n return range;\r\n }, [currentPage, totalPages, siblingCount]);\r\n\r\n const buttonStyle: React.CSSProperties = {\r\n width: config.buttonSize,\r\n height: config.buttonSize,\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n fontSize: config.fontSize,\r\n fontFamily: tokens.typography.fontFamily.mono,\r\n fontWeight: tokens.typography.fontWeight.medium,\r\n backgroundColor: isTransparentTheme\r\n ? `${tokens.colors.background.surface}99`\r\n : \"transparent\",\r\n border: `1px solid ${tokens.colors.border.muted}`,\r\n borderRadius: tokens.borderRadius.md,\r\n cursor: disabled ? \"not-allowed\" : \"pointer\",\r\n opacity: disabled ? 0.5 : 1,\r\n transition: `all ${tokens.animation.fast}`,\r\n color: tokens.colors.text.primary,\r\n backdropFilter: isTransparentTheme ? \"blur(8px)\" : undefined,\r\n WebkitBackdropFilter: isTransparentTheme ? \"blur(8px)\" : undefined,\r\n };\r\n\r\n const activeButtonStyle: React.CSSProperties = {\r\n ...buttonStyle,\r\n backgroundColor: tokens.colors.accent.primary,\r\n borderColor: tokens.colors.accent.primary,\r\n color: tokens.colors.text.inverse,\r\n boxShadow: `0 0 0 1px ${tokens.colors.accent.primary}55, 0 0 14px ${tokens.colors.accent.primary}55`,\r\n };\r\n\r\n const handleClick = (page: number) => {\r\n if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\r\n onChange(page);\r\n }\r\n };\r\n\r\n const NavButton = ({\r\n direction,\r\n targetPage,\r\n children,\r\n }: {\r\n direction: \"first\" \| \"prev\" \| \"next\" \| \"last\";\r\n targetPage: number;\r\n children: React.ReactNode;\r\n }) => {\r\n const isDisabled =\r\n disabled \|\|\r\n (direction === \"first\" \|\| direction === \"prev\"\r\n ? currentPage <= 1\r\n : currentPage >= totalPages);\r\n\r\n return (\r\n <button\r\n type=\"button\"\r\n onClick={() => handleClick(targetPage)}\r\n disabled={isDisabled}\r\n aria-label={\r\n direction === \"first\"\r\n ? \"Go to first page\"\r\n : direction === \"prev\"\r\n ? \"Go to previous page\"\r\n : direction === \"next\"\r\n ? \"Go to next page\"\r\n : \"Go to last page\"\r\n }\r\n style={{\r\n ...buttonStyle,\r\n opacity: isDisabled ? 0.3 : 1,\r\n cursor: isDisabled ? \"not-allowed\" : \"pointer\",\r\n }}\r\n >\r\n {children}\r\n </button>\r\n );\r\n };\r\n\r\n return (\r\n <nav\r\n className={classNames(\"zendir-pagination\", className)}\r\n aria-label=\"Pagination\"\r\n style={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacing.xs,\r\n padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n borderRadius: tokens.borderRadius.lg,\r\n ...(tokens.colors.border.cardStyle ?? {\r\n border: `1px solid ${tokens.colors.border.muted}`,\r\n }),\r\n background: isTransparentTheme\r\n ? `${tokens.colors.background.surface}66`\r\n : `${tokens.colors.background.surface}66`,\r\n backdropFilter: isTransparentTheme ? \"blur(10px)\" : undefined,\r\n WebkitBackdropFilter: isTransparentTheme ? \"blur(10px)\" : undefined,\r\n }}\r\n >\r\n {showFirstLast && (\r\n <NavButton direction=\"first\" targetPage={1}>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z\" />\r\n </svg>\r\n </NavButton>\r\n )}\r\n\r\n {showPrevNext && (\r\n <NavButton direction=\"prev\" targetPage={currentPage - 1}>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\r\n </svg>\r\n </NavButton>\r\n )}\r\n\r\n {displayMode === \"text\" ? (\r\n <span\r\n style={{\r\n padding: `0 ${tokens.spacing.sm}`,\r\n color: tokens.colors.text.secondary,\r\n fontSize: tokens.typography.fontSize.xs,\r\n fontFamily: tokens.typography.fontFamily.mono,\r\n letterSpacing: \"0.02em\",\r\n whiteSpace: \"nowrap\",\r\n }}\r\n >\r\n Page {currentPage} of {totalPages}\r\n </span>\r\n ) : (\r\n pageNumbers.map((page, index) =>\r\n page === \"ellipsis\" ? (\r\n <span\r\n key={`ellipsis-${index}`}\r\n style={{\r\n width: config.buttonSize,\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n color: tokens.colors.text.muted,\r\n }}\r\n >\r\n ...\r\n </span>\r\n ) : (\r\n <button\r\n key={page}\r\n type=\"button\"\r\n onClick={() => handleClick(page)}\r\n disabled={disabled}\r\n aria-current={page === currentPage ? \"page\" : undefined}\r\n style={page === currentPage ? activeButtonStyle : buttonStyle}\r\n onMouseEnter={(e) => {\r\n if (!disabled && page !== currentPage) {\r\n e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}22`;\r\n e.currentTarget.style.borderColor =\r\n tokens.colors.accent.primary;\r\n e.currentTarget.style.transform = \"translateY(-1px)\";\r\n }\r\n }}\r\n onMouseLeave={(e) => {\r\n if (!disabled && page !== currentPage) {\r\n e.currentTarget.style.backgroundColor = isTransparentTheme\r\n ? `${tokens.colors.background.surface}99`\r\n : \"transparent\";\r\n e.currentTarget.style.borderColor =\r\n tokens.colors.border.muted;\r\n e.currentTarget.style.transform = \"translateY(0)\";\r\n }\r\n }}\r\n >\r\n {page}\r\n </button>\r\n ),\r\n )\r\n )}\r\n\r\n {showPrevNext && (\r\n <NavButton direction=\"next\" targetPage={currentPage + 1}>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n </NavButton>\r\n )}\r\n\r\n {showFirstLast && (\r\n <NavButton direction=\"last\" targetPage={totalPages}>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z\" />\r\n </svg>\r\n </NavButton>\r\n )}\r\n </nav>\r\n );\r\n});\r\n\r\nexport default Pagination;\r\n"],"mappings":"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"}

package/dist/react/core/navigation/SideNav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNav.js","names":[],"sources":["../../../../src/react/core/navigation/SideNav.tsx"],"sourcesContent":["/*\n @zendir/ui - SideNav Component\n \n Persistent sidebar navigation for operator dashboards. Compound component\n * pattern with Header, Item, Section, Divider, and Footer subcomponents.\n \n Responsive: Full sidebar on desktop, hamburger overlay on mobile.\n \n Astro UX Compliance:\n * - Persistent side navigation pattern (AstroUXDS Navigation)\n * - Status indicator integration\n * - Active state highlighting with accent color\n * - Keyboard navigation support\n * - Reduced motion support\n \n @example\n * ```tsx\n * <SideNav>\n * <SideNav.Header logo={<Icon name=\"satellite\" size={24} />} title=\"Space Range\" badge=\"Operator\" />\n * <SideNav.Section title=\"Operations\">\n * <SideNav.Item icon=\"controls\" label=\"Controls\" description=\"System command interface\" href=\"/controls\" active />\n * <SideNav.Item icon=\"telemetry\" label=\"Telemetry\" href=\"/telemetry\" badge={3} tag=\"LIVE\" tagVariant=\"success\" />\n * <SideNav.Item icon=\"images\" label=\"Images\" href=\"/images\" />\n * </SideNav.Section>\n * <SideNav.Divider />\n * <SideNav.Section title=\"Analysis\">\n * <SideNav.Item icon=\"chart\" label=\"Plots\" href=\"/plots\" />\n * <SideNav.Item icon=\"map\" label=\"Map\" href=\"/map\" />\n * </SideNav.Section>\n * <SideNav.Footer>\n * <SideNav.Item icon=\"settings\" label=\"Settings\" href=\"/settings\" />\n * </SideNav.Footer>\n * </SideNav>\n * ```\n /\n\nimport React, {\n memo,\n useState,\n createContext,\n useContext,\n useCallback,\n useEffect,\n useLayoutEffect,\n} from \"react\";\n\nconst useIsomorphicLayoutEffect =\n typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\nimport { useTheme } from \"../../theme\";\nimport { safeAccentText } from \"../../utils\";\nimport { Icon } from \"../display/Icon\";\nimport type { IconName } from \"../display/Icon\";\n\n// ─── Reveal animation ────────────────────────────────────────────────────────\n\n/\n Content that only renders when expanded (item labels, section titles, the\n * header meta block) fades and slides in rather than popping, so widening the\n * rail reads as material flowing in. Injected once as a stylesheet because\n * keyframes can't be expressed inline; honours `prefers-reduced-motion`.\n /\nconst SIDENAV_REVEAL_STYLE_ID = \"zendir-sidenav-reveal\";\nfunction ensureSideNavReveal(): void {\n if (typeof document === \"undefined\") return;\n if (document.getElementById(SIDENAV_REVEAL_STYLE_ID)) return;\n const el = document.createElement(\"style\");\n el.id = SIDENAV_REVEAL_STYLE_ID;\n el.textContent =\n \"@keyframes zsn-reveal{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}\" +\n \".zsn-reveal{animation:zsn-reveal 220ms cubic-bezier(0.22,1,0.36,1)}\" +\n // Item label is always mounted and toggled via data-collapsed, so it fades\n // and slides BOTH on expand and collapse (the icon stays put as the anchor).\n \".zsn-label{transition:opacity 220ms cubic-bezier(0.22,1,0.36,1),transform 220ms cubic-bezier(0.22,1,0.36,1)}\" +\n '.zsn-label[data-collapsed=\"true\"]{opacity:0;transform:translateX(-6px);pointer-events:none}' +\n \"@media (prefers-reduced-motion: reduce){.zsn-reveal,.zsn-label{animation:none;transition:none}}\";\n document.head.appendChild(el);\n}\n\n// ─── Astro UX Status Shape ───────────────────────────────────────────────────\n\n/* Astro UX dual-coded status shape (color + geometry). /\nfunction NavStatusShape({\n status,\n size = 8,\n}: {\n status: string;\n size?: number;\n}) {\n const { tokens } = useTheme();\n const color =\n tokens.colors.status[status as keyof typeof tokens.colors.status] ??\n tokens.colors.status.off;\n const glow = `${color}50`;\n const style = {\n flexShrink: 0 as const,\n filter: `drop-shadow(0 0 3px ${glow})`,\n };\n\n switch (status) {\n case \"caution\":\n return (\n <svg\n viewBox=\"0 0 12 12\"\n width={size}\n height={size}\n style={style}\n aria-hidden=\"true\"\n >\n <rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} />\n </svg>\n );\n case \"serious\":\n return (\n <svg\n viewBox=\"0 0 12 12\"\n width={size}\n height={size}\n style={style}\n aria-hidden=\"true\"\n >\n <polygon points=\"6,1 11,6 6,11 1,6\" fill={color} />\n </svg>\n );\n case \"critical\":\n return (\n <svg\n viewBox=\"0 0 12 12\"\n width={size}\n height={size}\n style={style}\n aria-hidden=\"true\"\n >\n <polygon points=\"6,11 1,2 11,2\" fill={color} />\n </svg>\n );\n case \"standby\":\n return (\n <svg\n viewBox=\"0 0 12 12\"\n width={size}\n height={size}\n style={style}\n aria-hidden=\"true\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3.5\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n />\n </svg>\n );\n case \"off\":\n return (\n <svg\n viewBox=\"0 0 12 12\"\n width={size}\n height={size}\n style={style}\n aria-hidden=\"true\"\n >\n <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\n </svg>\n );\n default: // normal\n return (\n <svg\n viewBox=\"0 0 12 12\"\n width={size}\n height={size}\n style={style}\n aria-hidden=\"true\"\n >\n <circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} />\n </svg>\n );\n }\n}\n\n// ─── Responsive Breakpoints ──────────────────────────────────────────────────\n\nconst SIDENAV_BREAKPOINTS = {\n mobile: 768,\n tablet: 1024,\n} as const;\n\ntype SideNavMode = \"desktop\" \| \"tablet\" \| \"mobile\";\n\nfunction getSideNavMode(width: number): SideNavMode {\n if (width < SIDENAV_BREAKPOINTS.mobile) return \"mobile\";\n if (width < SIDENAV_BREAKPOINTS.tablet) return \"tablet\";\n return \"desktop\";\n}\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface SideNavContextValue {\n collapsed: boolean;\n mobileOpen: boolean;\n mode: SideNavMode;\n density: \"default\" \| \"compact\";\n showCollapseToggle: boolean;\n setMobileOpen: (open: boolean) => void;\n toggleCollapse: () => void;\n}\n\nconst SideNavContext = createContext<SideNavContextValue>({\n collapsed: false,\n mobileOpen: false,\n mode: \"desktop\",\n density: \"default\",\n showCollapseToggle: true,\n setMobileOpen: () => {},\n toggleCollapse: () => {},\n});\n\n// ─── SideNav ─────────────────────────────────────────────────────────────────\n\nexport interface SideNavProps {\n /* Collapsed mode (icon-only). When omitted, auto-collapses on tablet viewports. /\n collapsed?: boolean;\n /* Callback when collapsed state changes (via toggle button or responsive breakpoint). /\n onCollapsedChange?: (collapsed: boolean) => void;\n /* Show a collapse/expand toggle button in the sidebar (default true). /\n showCollapseToggle?: boolean;\n /* Width in pixels (default 260) /\n width?: number;\n /* Collapsed width in pixels (default 64) /\n collapsedWidth?: number;\n /\n Row density. `'compact'` tightens row padding, drops the left accent bar\n * in favour of a pill-style (rounded, bg-tinted) active row, and shrinks the\n * label — matching the v2.3 operator/admin secondary-nav mock. Default\n * `'default'`. (TODO: row inset + mono section headings for full mock parity.)\n /\n density?: \"default\" \| \"compact\";\n /\n Mobile viewport behavior.\n * - `'drawer'` (default): hamburger button with slide-out overlay drawer.\n * - `'collapsed'`: persistent collapsed icon-only strip (same as tablet).\n /\n mobileVariant?: \"drawer\" \| \"collapsed\";\n /* Children (SideNav.Header, SideNav.Item, SideNav.Section, SideNav.Footer) /\n children?: React.ReactNode;\n /* Custom style /\n style?: React.CSSProperties;\n}\n\nconst SideNavRoot = memo(function SideNav({\n collapsed,\n onCollapsedChange,\n showCollapseToggle = true,\n width = 260,\n collapsedWidth = 64,\n density = \"default\",\n mobileVariant = \"drawer\",\n children,\n style,\n}: SideNavProps): React.ReactElement {\n const { tokens, theme } = useTheme();\n const isTransparentTheme =\n theme === \"transparent\" \|\|\n theme === \"transparent-bold\" \|\|\n theme === \"transparent-minimal\";\n const [mobileOpen, setMobileOpen] = useState(false);\n const [userCollapsed, setUserCollapsed] = useState<boolean \| null>(null);\n\n // Initialize to 'desktop' to guarantee the first client render matches SSR\n // (where window is undefined), preventing a React hydration mismatch if the\n // client happens to be on a mobile/tablet width at initial load.\n const [viewMode, setViewMode] = useState<SideNavMode>(\"desktop\");\n\n useIsomorphicLayoutEffect(() => {\n if (typeof window === \"undefined\") return;\n\n // Synchronously correct the viewMode right after hydration but before paint\n setViewMode(getSideNavMode(window.innerWidth));\n\n let rafId: number;\n const handleResize = () => {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(() =>\n setViewMode(getSideNavMode(window.innerWidth)),\n );\n };\n window.addEventListener(\"resize\", handleResize, { passive: true });\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n cancelAnimationFrame(rafId);\n };\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n ensureSideNavReveal();\n }, []);\n\n // When mobileVariant='collapsed', promote mobile to tablet (collapsed inline strip)\n const effectiveMode =\n mobileVariant === \"collapsed\" && viewMode === \"mobile\"\n ? \"tablet\"\n : viewMode;\n\n // Reset user toggle when crossing breakpoints\n useEffect(() => {\n setUserCollapsed(null);\n }, [effectiveMode]);\n\n // Close mobile drawer when switching away from mobile\n useEffect(() => {\n if (effectiveMode !== \"mobile\" && mobileOpen) setMobileOpen(false);\n }, [effectiveMode, mobileOpen]);\n\n // Close mobile nav on escape\n useEffect(() => {\n if (!mobileOpen) return;\n const handleEsc = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") setMobileOpen(false);\n };\n document.addEventListener(\"keydown\", handleEsc);\n return () => document.removeEventListener(\"keydown\", handleEsc);\n }, [mobileOpen]);\n\n // Resolve collapsed: explicit prop > user toggle > auto (tablet = collapsed)\n const autoCollapsed = effectiveMode === \"tablet\";\n const isCollapsed =\n collapsed !== undefined\n ? collapsed\n : userCollapsed !== null\n ? userCollapsed\n : autoCollapsed;\n const isMobile = effectiveMode === \"mobile\";\n const navWidth = isCollapsed ? collapsedWidth : width;\n\n const handleToggleCollapse = useCallback(() => {\n const next = !isCollapsed;\n setUserCollapsed(next);\n onCollapsedChange?.(next);\n }, [isCollapsed, onCollapsedChange]);\n\n const navStyle: React.CSSProperties = {\n display: \"flex\",\n flexDirection: \"column\",\n width: isMobile ? 280 : navWidth,\n height: \"100%\",\n backgroundColor: isTransparentTheme\n ? \"rgba(15, 12, 30, 0.7)\"\n : tokens.colors.background.surface,\n borderRight: `1px solid ${tokens.colors.border.muted}`,\n transition:\n \"width 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s ease\",\n overflowX: \"hidden\",\n overflowY: \"auto\",\n flexShrink: 0,\n fontFamily: tokens.typography.fontFamily.primary,\n ...(isTransparentTheme\n ? {\n backdropFilter: \"blur(16px)\",\n WebkitBackdropFilter: \"blur(16px)\",\n }\n : {}),\n ...style,\n };\n\n const contextValue: SideNavContextValue = {\n collapsed: isCollapsed,\n mobileOpen,\n mode: effectiveMode,\n density,\n showCollapseToggle,\n setMobileOpen,\n toggleCollapse: handleToggleCollapse,\n };\n\n // Mobile: hamburger button + overlay drawer\n if (isMobile) {\n return (\n <SideNavContext.Provider value={contextValue}>\n {/ Hamburger button /}\n <button\n aria-label=\"Open navigation\"\n onClick={() => setMobileOpen(true)}\n style={{\n position: \"fixed\",\n top: 6,\n left: 6,\n zIndex: 1001,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: 32,\n height: 32,\n border: \"none\",\n borderRadius: tokens.borderRadius.sm,\n backgroundColor: \"transparent\",\n color: tokens.colors.text.primary,\n cursor: \"pointer\",\n padding: 0,\n transition: tokens.animation.fast,\n }}\n >\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n >\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\n <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" />\n </svg>\n </button>\n\n {/ Overlay /}\n <div\n aria-hidden=\"true\"\n style={{\n position: \"fixed\",\n inset: 0,\n zIndex: 1002,\n backgroundColor: `${tokens.colors.background.base}99`,\n backdropFilter: \"blur(4px)\",\n opacity: mobileOpen ? 1 : 0,\n pointerEvents: mobileOpen ? \"auto\" : \"none\",\n transition: \"opacity 0.25s ease\",\n }}\n onClick={() => setMobileOpen(false)}\n />\n\n {/ Slide-out nav /}\n <nav\n role=\"navigation\"\n aria-label=\"Main navigation\"\n style={{\n ...navStyle,\n position: \"fixed\",\n top: 0,\n left: 0,\n zIndex: 1003,\n transform: mobileOpen ? \"translateX(0)\" : \"translateX(-100%)\",\n boxShadow: mobileOpen ? tokens.shadows.xl : \"none\",\n }}\n >\n {children}\n </nav>\n </SideNavContext.Provider>\n );\n }\n\n return (\n <SideNavContext.Provider value={contextValue}>\n <nav role=\"navigation\" aria-label=\"Main navigation\" style={navStyle}>\n {children}\n </nav>\n </SideNavContext.Provider>\n );\n});\n\n// ─── Header ──────────────────────────────────────────────────────────────────\n\n/* Default height for the logo row so dashboard / operator / other apps align the same mark. /\nexport const SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX = 44;\n\nexport interface SideNavHeaderProps {\n /* Logo element (Icon, image, or ReactNode) /\n logo?: React.ReactNode;\n /* Compact logo shown when sidebar is collapsed or on tablet (e.g., just the icon mark) /\n collapsedLogo?: React.ReactNode;\n /* App title /\n title?: string;\n /* Subtitle or version /\n subtitle?: string;\n /* Role badge (e.g., \"Operator\", \"Admin\") /\n badge?: string;\n /* Badge variant for color /\n badgeVariant?: \"info\" \| \"success\" \| \"warning\" \| \"caution\";\n /\n Fixed height (px) for the top logo band. Title, subtitle, and badge render below this band\n * so different logo assets still line up across apps (dashboard vs operator).\n /\n logoSlotHeight?: number;\n /* Children override (advanced: replaces default header content entirely) /\n children?: React.ReactNode;\n}\n\n/* Chevron toggle button for collapsing/expanding the sidebar. /\nfunction CollapseToggleButton() {\n const { tokens } = useTheme();\n const { collapsed, toggleCollapse } = useContext(SideNavContext);\n const [hovered, setHovered] = useState(false);\n\n return (\n <button\n type=\"button\"\n aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n onClick={toggleCollapse}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: 28,\n height: 28,\n border: `1px solid ${hovered ? tokens.colors.border.focus : tokens.colors.border.muted}`,\n borderRadius: tokens.borderRadius.md,\n backgroundColor: hovered\n ? `${tokens.colors.accent.primary}15`\n : \"transparent\",\n color: hovered\n ? tokens.colors.accent.primary\n : tokens.colors.text.tertiary,\n cursor: \"pointer\",\n flexShrink: 0,\n padding: 0,\n transition: tokens.animation.fast,\n outline: \"none\",\n }}\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n style={{\n transition: \"transform 0.25s ease\",\n transform: collapsed ? \"rotate(180deg)\" : \"rotate(0deg)\",\n }}\n >\n <polyline points=\"15 18 9 12 15 6\" />\n </svg>\n </button>\n );\n}\n\nconst SideNavHeader = memo(function SideNavHeader({\n logo,\n collapsedLogo,\n title,\n subtitle,\n badge,\n badgeVariant = \"info\",\n logoSlotHeight = SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX,\n children,\n}: SideNavHeaderProps): React.ReactElement {\n const { tokens } = useTheme();\n const { collapsed, mode, showCollapseToggle, toggleCollapse } =\n useContext(SideNavContext);\n const displayLogo = collapsed && collapsedLogo ? collapsedLogo : logo;\n const showToggle = showCollapseToggle && mode !== \"mobile\";\n const hasMeta = Boolean(title \|\| subtitle \|\| badge);\n const slotH = logoSlotHeight;\n\n const badgeColors: Record<string, string> = {\n info: tokens.colors.accent.primary,\n success: tokens.colors.status.normal,\n warning: tokens.colors.status.caution,\n caution: tokens.colors.status.serious,\n };\n\n const metaBlock =\n !collapsed && hasMeta ? (\n <div\n className=\"zsn-reveal\"\n style={{ flex: 1, minWidth: 0, width: \"100%\" }}\n >\n {title ? (\n <div\n style={{\n fontSize: tokens.typography.fontSize.sm,\n fontWeight: tokens.typography.fontWeight.bold,\n color: tokens.colors.text.primary,\n lineHeight: tokens.typography.lineHeight.tight,\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {title}\n </div>\n ) : null}\n {subtitle \|\| badge ? (\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacing.xs,\n marginTop: title ? \"2px\" : 0,\n flexWrap: \"wrap\",\n }}\n >\n {subtitle ? (\n <span\n style={{\n fontSize: tokens.typography.fontSize.xxs,\n color: tokens.colors.text.tertiary,\n }}\n >\n {subtitle}\n </span>\n ) : null}\n {badge ? (\n <span\n style={{\n fontSize: \"0.6rem\",\n fontWeight: tokens.typography.fontWeight.bold,\n color:\n badgeColors[badgeVariant] \|\|\n safeAccentText(tokens.colors.accent.primary),\n backgroundColor: `${badgeColors[badgeVariant] \|\| tokens.colors.accent.primary}18`,\n border: `1px solid ${badgeColors[badgeVariant] \|\| tokens.colors.accent.primary}30`,\n padding: \"1px 6px\",\n borderRadius: tokens.borderRadius.sm,\n textTransform: \"uppercase\",\n letterSpacing: \"0.05em\",\n }}\n >\n {badge}\n </span>\n ) : null}\n </div>\n ) : null}\n </div>\n ) : null;\n\n const logoSlot = displayLogo ? (\n <div\n style={{\n height: slotH,\n minHeight: slotH,\n maxHeight: slotH,\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: collapsed ? \"center\" : \"flex-start\",\n overflow: \"hidden\",\n boxSizing: \"border-box\",\n marginBottom:\n !collapsed && hasMeta && displayLogo ? tokens.spacing.sm : 0,\n }}\n >\n <div\n style={{\n maxHeight: \"100%\",\n maxWidth: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: collapsed ? \"center\" : \"flex-start\",\n minWidth: 0,\n cursor: collapsed && showToggle ? \"pointer\" : undefined,\n }}\n onClick={collapsed && showToggle ? toggleCollapse : undefined}\n >\n {displayLogo}\n </div>\n </div>\n ) : null;\n\n if (children) {\n return (\n <div\n style={{\n padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\n borderBottom: `1px solid ${tokens.colors.border.muted}`,\n flexShrink: 0,\n boxSizing: \"border-box\",\n position: \"relative\",\n }}\n >\n {children}\n </div>\n );\n }\n\n // Collapsed: centered logo in the same fixed slot height as expanded (visual parity with operator).\n if (collapsed) {\n return (\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n padding: `${tokens.spacing.md} ${tokens.spacing.sm}`,\n minHeight: slotH + 24,\n borderBottom: `1px solid ${tokens.colors.border.muted}`,\n flexShrink: 0,\n boxSizing: \"border-box\",\n position: \"relative\",\n justifyContent: \"center\",\n }}\n >\n {logoSlot}\n {showToggle ? (\n <div\n style={{\n position: \"absolute\",\n right: 4,\n top: \"50%\",\n transform: \"translateY(-50%)\",\n }}\n >\n <CollapseToggleButton />\n </div>\n ) : null}\n </div>\n );\n }\n\n return (\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"stretch\",\n padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\n borderBottom: `1px solid ${tokens.colors.border.muted}`,\n flexShrink: 0,\n boxSizing: \"border-box\",\n position: \"relative\",\n }}\n >\n {showToggle ? (\n <div\n style={{\n position: \"absolute\",\n top: tokens.spacing.sm,\n right: tokens.spacing.sm,\n zIndex: 1,\n }}\n >\n <CollapseToggleButton />\n </div>\n ) : null}\n <div\n style={{\n paddingRight: showToggle ? 36 : 0,\n width: \"100%\",\n minWidth: 0,\n }}\n >\n {logoSlot}\n {metaBlock}\n </div>\n </div>\n );\n});\n\n// ─── Item ────────────────────────────────────────────────────────────────────\n\nexport interface SideNavItemProps {\n /* Icon name from zendir-ui icon library /\n icon?: IconName \| React.ReactNode;\n /* Label text /\n label: string;\n /* Description text displayed beneath the label (hidden in collapsed mode) /\n description?: string;\n /* Small tag/chip displayed after the label (e.g. \"v2\", \"NEW\", \"BETA\") /\n tag?: string;\n /* Tag color variant /\n tagVariant?: \"default\" \| \"info\" \| \"success\" \| \"warning\" \| \"danger\";\n /* Link href (renders <a>) /\n href?: string;\n /* Click handler (renders <button>) /\n onClick?: () => void;\n /* Active state /\n active?: boolean;\n /* Disabled state /\n disabled?: boolean;\n /* Notification badge count /\n badge?: number;\n /* External link indicator /\n external?: boolean;\n /\n Astro UX status level — renders a dual-coded indicator (color + shape).\n * Shapes per official Astro UXDS: normal = ● filled circle, standby = ◎ ring,\n * caution = ■ square, serious = ◆ diamond, critical = ▼ triangle, off = · small circle.\n /\n status?: \"off\" \| \"standby\" \| \"normal\" \| \"caution\" \| \"serious\" \| \"critical\";\n /* Optional status label shown as tooltip or text next to status shape /\n statusLabel?: string;\n /* Right-side slot — arbitrary ReactNode rendered at the end of the item row /\n suffix?: React.ReactNode;\n}\n\nconst TAG_COLORS: Record<string, { bg: string; fg: string; border: string }> = {\n default: { bg: \"#ffffff10\", fg: \"#9590a8\", border: \"#ffffff15\" },\n info: { bg: \"#8a2be218\", fg: \"#c4a0ff\", border: \"#8a2be230\" },\n success: { bg: \"#56f00018\", fg: \"#56f000\", border: \"#56f00030\" },\n warning: { bg: \"#fce83a18\", fg: \"#fce83a\", border: \"#fce83a30\" },\n danger: { bg: \"#ff383818\", fg: \"#ff3838\", border: \"#ff383830\" },\n};\n\nconst SideNavItem = memo(function SideNavItem({\n icon,\n label,\n description,\n tag,\n tagVariant = \"default\",\n href,\n onClick,\n active = false,\n disabled = false,\n badge,\n external = false,\n status,\n statusLabel,\n suffix,\n}: SideNavItemProps): React.ReactElement {\n const { tokens } = useTheme();\n const { collapsed, setMobileOpen, density } = useContext(SideNavContext);\n const compact = density === \"compact\" && !collapsed;\n const [isHovered, setIsHovered] = useState(false);\n\n const handleClick = useCallback(\n (e: React.MouseEvent) => {\n if (disabled) return;\n if (onClick && href && !e.metaKey && !e.ctrlKey && !e.shiftKey) {\n e.preventDefault();\n }\n setMobileOpen(false);\n onClick?.();\n },\n [disabled, onClick, href, setMobileOpen],\n );\n\n // Status-aware accent: when an item has a status, tint active/hover with its color\n const statusColor = status\n ? (tokens.colors.status[status] ?? undefined)\n : undefined;\n const accentColor =\n statusColor && active\n ? statusColor\n : safeAccentText(tokens.colors.accent.primary);\n\n const hasDescription = !!description && !collapsed;\n\n const iconElement =\n typeof icon === \"string\" ? (\n <Icon\n name={icon as IconName}\n size={hasDescription ? 22 : 20}\n color={active ? accentColor : tokens.colors.text.secondary}\n />\n ) : (\n icon\n );\n\n const itemStyle: React.CSSProperties = {\n display: \"flex\",\n alignItems: hasDescription ? \"flex-start\" : \"center\",\n gap: tokens.spacing.sm,\n // Collapsed keeps the SAME 12px left inset as the expanded row, so the\n // icon holds its horizontal position when the rail expands — it doesn't\n // jump from a centered slot to a left-aligned one. Size the collapsed\n // width so that fixed inset reads as centered.\n padding: collapsed\n ? `${tokens.spacing.sm} 12px`\n : compact\n ? \"7px 8px\"\n : hasDescription\n ? `10px 16px 10px 12px`\n : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,\n // Compact: pill-style rounded row (mock parity). Default: square row.\n borderRadius: compact ? tokens.borderRadius.md : 0,\n justifyContent: \"flex-start\",\n color: active\n ? accentColor\n : disabled\n ? tokens.colors.text.tertiary\n : tokens.colors.text.secondary,\n backgroundColor: active\n ? `${accentColor}12`\n : isHovered && !disabled\n ? `${accentColor}08`\n : \"transparent\",\n fontSize: compact\n ? tokens.typography.fontSize.xs\n : tokens.typography.fontSize.sm,\n fontWeight: active\n ? tokens.typography.fontWeight.semibold\n : tokens.typography.fontWeight.normal,\n fontFamily: tokens.typography.fontFamily.primary,\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n textDecoration: \"none\",\n borderTop: \"none\",\n borderRight: \"none\",\n borderBottom: \"none\",\n // Compact drops the left accent bar — the active row is conveyed by the\n // bg tint + accent text alone (mock parity). Default keeps the 3px bar.\n borderLeft: compact\n ? \"none\"\n : active\n ? `3px solid ${accentColor}`\n : \"3px solid transparent\",\n outline: \"none\",\n width: \"100%\",\n boxSizing: \"border-box\",\n transition: tokens.animation.fast,\n position: \"relative\",\n opacity: disabled ? 0.5 : 1,\n };\n\n const tagColors = TAG_COLORS[tagVariant] ?? TAG_COLORS.default;\n\n const content = (\n <>\n {/ Icon + collapsed status overlay /}\n {iconElement && (\n <span\n style={{\n flexShrink: 0,\n display: \"flex\",\n position: \"relative\",\n marginTop: hasDescription ? \"2px\" : 0,\n }}\n >\n {iconElement}\n {/ In collapsed mode, show a small status shape overlaid on the icon (top-left) /}\n {collapsed && status && (\n <span\n style={{\n position: \"absolute\",\n top: -3,\n left: -4,\n lineHeight: 0,\n }}\n title={statusLabel ?? status}\n >\n <NavStatusShape status={status} size={7} />\n </span>\n )}\n </span>\n )}\n {/ Label — always mounted and toggled via data-collapsed so it fades and\n slides BOTH on expand and collapse; the icon holds its position as\n the anchor and only the label moves. /}\n <span\n className=\"zsn-label\"\n data-collapsed={collapsed ? \"true\" : \"false\"}\n style={{ flex: 1, minWidth: 0, overflow: \"hidden\" }}\n >\n <span style={{ display: \"flex\", alignItems: \"center\", gap: 6 }}>\n <span\n style={{\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {label}\n </span>\n {tag && (\n <span\n style={{\n fontSize: \"0.6rem\",\n fontWeight: tokens.typography.fontWeight.bold,\n color: tagColors.fg,\n backgroundColor: tagColors.bg,\n border: `1px solid ${tagColors.border}`,\n padding: \"1px 5px\",\n borderRadius: tokens.borderRadius.sm,\n textTransform: \"uppercase\",\n letterSpacing: \"0.04em\",\n flexShrink: 0,\n lineHeight: \"1.3\",\n whiteSpace: \"nowrap\",\n }}\n >\n {tag}\n </span>\n )}\n </span>\n {description && !collapsed && (\n <span\n style={{\n display: \"block\",\n fontSize: tokens.typography.fontSize.xxs,\n color: tokens.colors.text.tertiary,\n lineHeight: tokens.typography.lineHeight.normal,\n marginTop: \"2px\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n fontWeight: tokens.typography.fontWeight.normal,\n }}\n >\n {description}\n </span>\n )}\n </span>\n {/ Right-side trailing elements — expanded only; collapsed shows the\n status overlay on the icon instead. /}\n {!collapsed &&\n ((badge !== undefined && badge > 0) \|\|\n status \|\|\n suffix \|\|\n external) && (\n <span\n className=\"zsn-reveal\"\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n gap: 8,\n flexShrink: 0,\n marginTop: hasDescription ? \"2px\" : 0,\n }}\n >\n {/ Badge /}\n {badge !== undefined && badge > 0 && (\n <span\n style={{\n fontSize: \"0.65rem\",\n fontWeight: tokens.typography.fontWeight.bold,\n color: \"#fff\",\n backgroundColor: tokens.colors.status.critical,\n borderRadius: tokens.borderRadius.full,\n minWidth: \"18px\",\n height: \"18px\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"0 5px\",\n flexShrink: 0,\n lineHeight: 1,\n boxSizing: \"border-box\",\n }}\n >\n {badge > 99 ? \"99+\" : badge}\n </span>\n )}\n {/ Status /}\n {status && (\n <span\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n flexShrink: 0,\n }}\n role=\"status\"\n aria-label={`Status: ${statusLabel ?? status}`}\n title={statusLabel ?? status}\n >\n <NavStatusShape status={status} size={8} />\n </span>\n )}\n {/ Suffix /}\n {suffix && (\n <span\n style={{\n flexShrink: 0,\n display: \"inline-flex\",\n alignItems: \"center\",\n }}\n >\n {suffix}\n </span>\n )}\n {/ External /}\n {external && (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n style={{ flexShrink: 0, opacity: 0.5 }}\n >\n <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\n <polyline points=\"15 3 21 3 21 9\" />\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />\n </svg>\n )}\n </span>\n )}\n </>\n );\n\n const props = {\n style: itemStyle,\n onMouseEnter: () => setIsHovered(true),\n onMouseLeave: () => setIsHovered(false),\n title: collapsed ? label : undefined,\n \"aria-current\": active ? (\"page\" as const) : undefined,\n \"aria-disabled\": disabled,\n };\n\n if (href && !disabled) {\n return (\n <a\n href={href}\n onClick={handleClick}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noopener noreferrer\" : undefined}\n {...props}\n >\n {content}\n </a>\n );\n }\n\n return (\n <button type=\"button\" onClick={handleClick} disabled={disabled} {...props}>\n {content}\n </button>\n );\n});\n\n// ─── Section ─────────────────────────────────────────────────────────────────\n\nexport interface SideNavSectionProps {\n /* Section title /\n title?: string;\n /* Children (SideNav.Item elements) /\n children?: React.ReactNode;\n}\n\nconst SideNavSection = memo(function SideNavSection({\n title,\n children,\n}: SideNavSectionProps): React.ReactElement {\n const { tokens } = useTheme();\n const { collapsed } = useContext(SideNavContext);\n\n return (\n <div style={{ marginTop: tokens.spacing.sm }}>\n {title && !collapsed && (\n <div\n className=\"zsn-reveal\"\n style={{\n padding: `${tokens.spacing.xs} 16px ${tokens.spacing.xs} 15px`,\n fontSize: tokens.typography.fontSize.xxs,\n fontWeight: tokens.typography.fontWeight.bold,\n color: tokens.colors.text.tertiary,\n textTransform: \"uppercase\",\n letterSpacing: \"0.08em\",\n }}\n >\n {title}\n </div>\n )}\n {collapsed && title && (\n <div\n style={{\n width: \"60%\",\n height: \"1px\",\n backgroundColor: tokens.colors.border.muted,\n margin: `${tokens.spacing.xs} auto`,\n }}\n />\n )}\n {children}\n </div>\n );\n});\n\n// ─── Divider ─────────────────────────────────────────────────────────────────\n\nexport interface SideNavDividerProps {\n /* Optional label shown in the center of the divider line */\n label?: string;\n}\n\nconst SideNavDivider = memo(function SideNavDivider({\n label,\n}: SideNavDividerProps): React.ReactElement {\n const { tokens } = useTheme();\n const { collapsed } = useContext(SideNavContext);\n\n if (collapsed) {\n return (\n <div\n style={{\n width: \"60%\",\n height: \"1px\",\n backgroundColor: tokens.colors.border.muted,\n margin: `${tokens.spacing.sm} auto`,\n }}\n />\n );\n }\n\n if (label) {\n return (\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacing.sm,\n padding: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\n }}\n >\n <div\n style={{\n flex: 1,\n height: \"1px\",\n backgroundColor: tokens.colors.border.muted,\n }}\n />\n <span\n style={{\n fontSize: tokens.typography.fontSize.xxs,\n color: tokens.colors.text.tertiary,\n textTransform: \"uppercase\",\n letterSpacing: \"0.06em\",\n whiteSpace: \"nowrap\",\n }}\n >\n {label}\n </span>\n <div\n style={{\n flex: 1,\n height: \"1px\",\n backgroundColor: tokens.colors.border.muted,\n }}\n />\n </div>\n );\n }\n\n return (\n <div\n style={{\n height: \"1px\",\n backgroundColor: tokens.colors.border.muted,\n margin: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\n }}\n />\n );\n});\n\n// ─── Footer ──────────────────────────────────────────────────────────────────\n\nexport interface SideNavFooterProps {\n children?: React.ReactNode;\n}\n\nconst SideNavFooter = memo(function SideNavFooter({\n children,\n}: SideNavFooterProps): React.ReactElement {\n const { tokens } = useTheme();\n\n return (\n <div\n style={{\n marginTop: \"auto\",\n borderTop: `1px solid ${tokens.colors.border.muted}`,\n paddingTop: tokens.spacing.xs,\n paddingBottom: tokens.spacing.xs,\n }}\n >\n {children}\n </div>\n );\n});\n\n// ─── Compound Export ─────────────────────────────────────────────────────────\n\ntype SideNavComponent = typeof SideNavRoot & {\n Header: typeof SideNavHeader;\n Item: typeof SideNavItem;\n Section: typeof SideNavSection;\n Divider: typeof SideNavDivider;\n Footer: typeof SideNavFooter;\n};\n\nexport const SideNav: SideNavComponent = Object.assign(SideNavRoot, {\n Header: SideNavHeader,\n Item: SideNavItem,\n Section: SideNavSection,\n Divider: SideNavDivider,\n Footer: SideNavFooter,\n});\n\nexport default SideNav;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,IAAM,4BACJ,OAAO,WAAW,cAAc,kBAAkB;;;;;;;AAcpD,IAAM,0BAA0B;AAChC,SAAS,sBAA4B;CACnC,IAAI,OAAO,aAAa,aAAa;CACrC,IAAI,SAAS,eAAe,uBAAuB,GAAG;CACtD,MAAM,KAAK,SAAS,cAAc,OAAO;CACzC,GAAG,KAAK;CACR,GAAG,cACD;CAOF,SAAS,KAAK,YAAY,EAAE;AAC9B;;AAKA,SAAS,eAAe,EACtB,QACA,OAAO,KAIN;CACD,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,QACJ,OAAO,OAAO,OAAO,WACrB,OAAO,OAAO,OAAO;CAEvB,MAAM,QAAQ;EACZ,YAAY;EACZ,QAAQ,uBAAuB,GAHjB,MAAM,IAGgB;CACtC;CAEA,QAAQ,QAAR;EACE,KAAK,WACH,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACD;GACP,eAAY;aAEZ,oBAAC,QAAD;IAAM,GAAE;IAAI,GAAE;IAAI,OAAM;IAAK,QAAO;IAAK,MAAM;GAAQ,CAAA;EACpD,CAAA;EAET,KAAK,WACH,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACD;GACP,eAAY;aAEZ,oBAAC,WAAD;IAAS,QAAO;IAAoB,MAAM;GAAQ,CAAA;EAC/C,CAAA;EAET,KAAK,YACH,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACD;GACP,eAAY;aAEZ,oBAAC,WAAD;IAAS,QAAO;IAAgB,MAAM;GAAQ,CAAA;EAC3C,CAAA;EAET,KAAK,WACH,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACD;GACP,eAAY;aAEZ,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAQ;IACR,aAAY;GACb,CAAA;EACE,CAAA;EAET,KAAK,OACH,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACD;GACP,eAAY;aAEZ,oBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAI,MAAM;GAAQ,CAAA;EACvC,CAAA;EAET,SACE,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACD;GACP,eAAY;aAEZ,oBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAI,MAAM;GAAQ,CAAA;EACvC,CAAA;CAEX;AACF;AAIA,IAAM,sBAAsB;CAC1B,QAAQ;CACR,QAAQ;AACV;AAIA,SAAS,eAAe,OAA4B;CAClD,IAAI,QAAQ,oBAAoB,QAAQ,OAAO;CAC/C,IAAI,QAAQ,oBAAoB,QAAQ,OAAO;CAC/C,OAAO;AACT;AAcA,IAAM,iBAAiB,cAAmC;CACxD,WAAW;CACX,YAAY;CACZ,MAAM;CACN,SAAS;CACT,oBAAoB;CACpB,qBAAqB,CAAC;CACtB,sBAAsB,CAAC;AACzB,CAAC;AAkCD,IAAM,cAAc,KAAK,SAAS,QAAQ,EACxC,WACA,mBACA,qBAAqB,MACrB,QAAQ,KACR,iBAAiB,IACjB,UAAU,WACV,gBAAgB,UAChB,UACA,SACmC;CACnC,MAAM,EAAE,QAAQ,UAAU,SAAS;CACnC,MAAM,qBACJ,UAAU,iBACV,UAAU,sBACV,UAAU;CACZ,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,CAAC,eAAe,oBAAoB,SAAyB,IAAI;CAKvE,MAAM,CAAC,UAAU,eAAe,SAAsB,SAAS;CAE/D,gCAAgC;EAC9B,IAAI,OAAO,WAAW,aAAa;EAGnC,YAAY,eAAe,OAAO,UAAU,CAAC;EAE7C,IAAI;EACJ,MAAM,qBAAqB;GACzB,qBAAqB,KAAK;GAC1B,QAAQ,4BACN,YAAY,eAAe,OAAO,UAAU,CAAC,CAC/C;EACF;EACA,OAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;EACjE,aAAa;GACX,OAAO,oBAAoB,UAAU,YAAY;GACjD,qBAAqB,KAAK;EAC5B;CACF,GAAG,CAAC,CAAC;CAEL,gCAAgC;EAC9B,oBAAoB;CACtB,GAAG,CAAC,CAAC;CAGL,MAAM,gBACJ,kBAAkB,eAAe,aAAa,WAC1C,WACA;CAGN,gBAAgB;EACd,iBAAiB,IAAI;CACvB,GAAG,CAAC,aAAa,CAAC;CAGlB,gBAAgB;EACd,IAAI,kBAAkB,YAAY,YAAY,cAAc,KAAK;CACnE,GAAG,CAAC,eAAe,UAAU,CAAC;CAG9B,gBAAgB;EACd,IAAI,CAAC,YAAY;EACjB,MAAM,aAAa,MAAqB;GACtC,IAAI,EAAE,QAAQ,UAAU,cAAc,KAAK;EAC7C;EACA,SAAS,iBAAiB,WAAW,SAAS;EAC9C,aAAa,SAAS,oBAAoB,WAAW,SAAS;CAChE,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,cACJ,cAAc,KAAA,IACV,YACA,kBAAkB,OAChB,gBALc,kBAAkB;CAOxC,MAAM,WAAW,kBAAkB;CACnC,MAAM,WAAW,cAAc,iBAAiB;CAEhD,MAAM,uBAAuB,kBAAkB;EAC7C,MAAM,OAAO,CAAC;EACd,iBAAiB,IAAI;EACrB,oBAAoB,IAAI;CAC1B,GAAG,CAAC,aAAa,iBAAiB,CAAC;CAEnC,MAAM,WAAgC;EACpC,SAAS;EACT,eAAe;EACf,OAAO,WAAW,MAAM;EACxB,QAAQ;EACR,iBAAiB,qBACb,0BACA,OAAO,OAAO,WAAW;EAC7B,aAAa,aAAa,OAAO,OAAO,OAAO;EAC/C,YACE;EACF,WAAW;EACX,WAAW;EACX,YAAY;EACZ,YAAY,OAAO,WAAW,WAAW;EACzC,GAAI,qBACA;GACE,gBAAgB;GAChB,sBAAsB;EACxB,IACA,CAAC;EACL,GAAG;CACL;CAEA,MAAM,eAAoC;EACxC,WAAW;EACX;EACA,MAAM;EACN;EACA;EACA;EACA,gBAAgB;CAClB;CAGA,IAAI,UACF,OACE,qBAAC,eAAe,UAAhB;EAAyB,OAAO;YAAhC;GAEE,oBAAC,UAAD;IACE,cAAW;IACX,eAAe,cAAc,IAAI;IACjC,OAAO;KACL,UAAU;KACV,KAAK;KACL,MAAM;KACN,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,OAAO;KACP,QAAQ;KACR,QAAQ;KACR,cAAc,OAAO,aAAa;KAClC,iBAAiB;KACjB,OAAO,OAAO,OAAO,KAAK;KAC1B,QAAQ;KACR,SAAS;KACT,YAAY,OAAO,UAAU;IAC/B;cAEA,qBAAC,OAAD;KACE,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;eAPhB;MASE,oBAAC,QAAD;OAAM,IAAG;OAAI,IAAG;OAAI,IAAG;OAAK,IAAG;MAAK,CAAA;MACpC,oBAAC,QAAD;OAAM,IAAG;OAAI,IAAG;OAAK,IAAG;OAAK,IAAG;MAAM,CAAA;MACtC,oBAAC,QAAD;OAAM,IAAG;OAAI,IAAG;OAAK,IAAG;OAAK,IAAG;MAAM,CAAA;KACnC;;GACC,CAAA;GAGR,oBAAC,OAAD;IACE,eAAY;IACZ,OAAO;KACL,UAAU;KACV,OAAO;KACP,QAAQ;KACR,iBAAiB,GAAG,OAAO,OAAO,WAAW,KAAK;KAClD,gBAAgB;KAChB,SAAS,aAAa,IAAI;KAC1B,eAAe,aAAa,SAAS;KACrC,YAAY;IACd;IACA,eAAe,cAAc,KAAK;GACnC,CAAA;GAGD,oBAAC,OAAD;IACE,MAAK;IACL,cAAW;IACX,OAAO;KACL,GAAG;KACH,UAAU;KACV,KAAK;KACL,MAAM;KACN,QAAQ;KACR,WAAW,aAAa,kBAAkB;KAC1C,WAAW,aAAa,OAAO,QAAQ,KAAK;IAC9C;IAEC;GACE,CAAA;EACkB;;CAI7B,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;YAC9B,oBAAC,OAAD;GAAK,MAAK;GAAa,cAAW;GAAkB,OAAO;GACxD;EACE,CAAA;CACkB,CAAA;AAE7B,CAAC;;AAKD,IAAa,qCAAqC;;AAyBlD,SAAS,uBAAuB;CAC9B,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,EAAE,WAAW,mBAAmB,WAAW,cAAc;CAC/D,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,OACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY,YAAY,mBAAmB;EAC3C,SAAS;EACT,oBAAoB,WAAW,IAAI;EACnC,oBAAoB,WAAW,KAAK;EACpC,OAAO;GACL,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,QAAQ,aAAa,UAAU,OAAO,OAAO,OAAO,QAAQ,OAAO,OAAO,OAAO;GACjF,cAAc,OAAO,aAAa;GAClC,iBAAiB,UACb,GAAG,OAAO,OAAO,OAAO,QAAQ,MAChC;GACJ,OAAO,UACH,OAAO,OAAO,OAAO,UACrB,OAAO,OAAO,KAAK;GACvB,QAAQ;GACR,YAAY;GACZ,SAAS;GACT,YAAY,OAAO,UAAU;GAC7B,SAAS;EACX;YAEA,oBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,OAAO;IACL,YAAY;IACZ,WAAW,YAAY,mBAAmB;GAC5C;aAEA,oBAAC,YAAD,EAAU,QAAO,kBAAmB,CAAA;EACjC,CAAA;CACC,CAAA;AAEZ;AAEA,IAAM,gBAAgB,KAAK,SAAS,cAAc,EAChD,MACA,eACA,OACA,UACA,OACA,eAAe,QACf,iBAAA,IACA,YACyC;CACzC,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,EAAE,WAAW,MAAM,oBAAoB,mBAC3C,WAAW,cAAc;CAC3B,MAAM,cAAc,aAAa,gBAAgB,gBAAgB;CACjE,MAAM,aAAa,sBAAsB,SAAS;CAClD,MAAM,UAAU,QAAQ,SAAS,YAAY,KAAK;CAClD,MAAM,QAAQ;CAEd,MAAM,cAAsC;EAC1C,MAAM,OAAO,OAAO,OAAO;EAC3B,SAAS,OAAO,OAAO,OAAO;EAC9B,SAAS,OAAO,OAAO,OAAO;EAC9B,SAAS,OAAO,OAAO,OAAO;CAChC;CAEA,MAAM,YACJ,CAAC,aAAa,UACZ,qBAAC,OAAD;EACE,WAAU;EACV,OAAO;GAAE,MAAM;GAAG,UAAU;GAAG,OAAO;EAAO;YAF/C,CAIG,QACC,oBAAC,OAAD;GACE,OAAO;IACL,UAAU,OAAO,WAAW,SAAS;IACrC,YAAY,OAAO,WAAW,WAAW;IACzC,OAAO,OAAO,OAAO,KAAK;IAC1B,YAAY,OAAO,WAAW,WAAW;IACzC,YAAY;IACZ,UAAU;IACV,cAAc;GAChB;aAEC;EACE,CAAA,IACH,MACH,YAAY,QACX,qBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,YAAY;IACZ,KAAK,OAAO,QAAQ;IACpB,WAAW,QAAQ,QAAQ;IAC3B,UAAU;GACZ;aAPF,CASG,WACC,oBAAC,QAAD;IACE,OAAO;KACL,UAAU,OAAO,WAAW,SAAS;KACrC,OAAO,OAAO,OAAO,KAAK;IAC5B;cAEC;GACG,CAAA,IACJ,MACH,QACC,oBAAC,QAAD;IACE,OAAO;KACL,UAAU;KACV,YAAY,OAAO,WAAW,WAAW;KACzC,OACE,YAAY,iBACZ,eAAe,OAAO,OAAO,OAAO,OAAO;KAC7C,iBAAiB,GAAG,YAAY,iBAAiB,OAAO,OAAO,OAAO,QAAQ;KAC9E,QAAQ,aAAa,YAAY,iBAAiB,OAAO,OAAO,OAAO,QAAQ;KAC/E,SAAS;KACT,cAAc,OAAO,aAAa;KAClC,eAAe;KACf,eAAe;IACjB;cAEC;GACG,CAAA,IACJ,IACD;OACH,IACD;MACH;CAEN,MAAM,WAAW,cACf,oBAAC,OAAD;EACE,OAAO;GACL,QAAQ;GACR,WAAW;GACX,WAAW;GACX,OAAO;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB,YAAY,WAAW;GACvC,UAAU;GACV,WAAW;GACX,cACE,CAAC,aAAa,WAAW,cAAc,OAAO,QAAQ,KAAK;EAC/D;YAEA,oBAAC,OAAD;GACE,OAAO;IACL,WAAW;IACX,UAAU;IACV,SAAS;IACT,YAAY;IACZ,gBAAgB,YAAY,WAAW;IACvC,UAAU;IACV,QAAQ,aAAa,aAAa,YAAY,KAAA;GAChD;GACA,SAAS,aAAa,aAAa,iBAAiB,KAAA;aAEnD;EACE,CAAA;CACF,CAAA,IACH;CAEJ,IAAI,UACF,OACE,oBAAC,OAAD;EACE,OAAO;GACL,SAAS,GAAG,OAAO,QAAQ,GAAG,QAAQ,OAAO,QAAQ,GAAG;GACxD,cAAc,aAAa,OAAO,OAAO,OAAO;GAChD,YAAY;GACZ,WAAW;GACX,UAAU;EACZ;EAEC;CACE,CAAA;CAKT,IAAI,WACF,OACE,qBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,eAAe;GACf,YAAY;GACZ,SAAS,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,QAAQ;GAChD,WAAW,QAAQ;GACnB,cAAc,aAAa,OAAO,OAAO,OAAO;GAChD,YAAY;GACZ,WAAW;GACX,UAAU;GACV,gBAAgB;EAClB;YAZF,CAcG,UACA,aACC,oBAAC,OAAD;GACE,OAAO;IACL,UAAU;IACV,OAAO;IACP,KAAK;IACL,WAAW;GACb;aAEA,oBAAC,sBAAD,CAAuB,CAAA;EACpB,CAAA,IACH,IACD;;CAIT,OACE,qBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,eAAe;GACf,YAAY;GACZ,SAAS,GAAG,OAAO,QAAQ,GAAG,QAAQ,OAAO,QAAQ,GAAG;GACxD,cAAc,aAAa,OAAO,OAAO,OAAO;GAChD,YAAY;GACZ,WAAW;GACX,UAAU;EACZ;YAVF,CAYG,aACC,oBAAC,OAAD;GACE,OAAO;IACL,UAAU;IACV,KAAK,OAAO,QAAQ;IACpB,OAAO,OAAO,QAAQ;IACtB,QAAQ;GACV;aAEA,oBAAC,sBAAD,CAAuB,CAAA;EACpB,CAAA,IACH,MACJ,qBAAC,OAAD;GACE,OAAO;IACL,cAAc,aAAa,KAAK;IAChC,OAAO;IACP,UAAU;GACZ;aALF,CAOG,UACA,SACE;IACF;;AAET,CAAC;AAuCD,IAAM,aAAyE;CAC7E,SAAS;EAAE,IAAI;EAAa,IAAI;EAAW,QAAQ;CAAY;CAC/D,MAAM;EAAE,IAAI;EAAa,IAAI;EAAW,QAAQ;CAAY;CAC5D,SAAS;EAAE,IAAI;EAAa,IAAI;EAAW,QAAQ;CAAY;CAC/D,SAAS;EAAE,IAAI;EAAa,IAAI;EAAW,QAAQ;CAAY;CAC/D,QAAQ;EAAE,IAAI;EAAa,IAAI;EAAW,QAAQ;CAAY;AAChE;AAEA,IAAM,cAAc,KAAK,SAAS,YAAY,EAC5C,MACA,OACA,aACA,KACA,aAAa,WACb,MACA,SACA,SAAS,OACT,WAAW,OACX,OACA,WAAW,OACX,QACA,aACA,UACuC;CACvC,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,EAAE,WAAW,eAAe,YAAY,WAAW,cAAc;CACvE,MAAM,UAAU,YAAY,aAAa,CAAC;CAC1C,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,MAAM,cAAc,aACjB,MAAwB;EACvB,IAAI,UAAU;EACd,IAAI,WAAW,QAAQ,CAAC,EAAE,WAAW,CAAC,EAAE,WAAW,CAAC,EAAE,UACpD,EAAE,eAAe;EAEnB,cAAc,KAAK;EACnB,UAAU;CACZ,GACA;EAAC;EAAU;EAAS;EAAM;CAAa,CACzC;CAGA,MAAM,cAAc,SACf,OAAO,OAAO,OAAO,WAAW,KAAA,IACjC,KAAA;CACJ,MAAM,cACJ,eAAe,SACX,cACA,eAAe,OAAO,OAAO,OAAO,OAAO;CAEjD,MAAM,iBAAiB,CAAC,CAAC,eAAe,CAAC;CAEzC,MAAM,cACJ,OAAO,SAAS,WACd,oBAAC,MAAD;EACE,MAAM;EACN,MAAM,iBAAiB,KAAK;EAC5B,OAAO,SAAS,cAAc,OAAO,OAAO,KAAK;CAClD,CAAA,IAED;CAGJ,MAAM,YAAiC;EACrC,SAAS;EACT,YAAY,iBAAiB,eAAe;EAC5C,KAAK,OAAO,QAAQ;EAKpB,SAAS,YACL,GAAG,OAAO,QAAQ,GAAG,SACrB,UACE,YACA,iBACE,wBACA,GAAG,OAAO,QAAQ,GAAG,QAAQ,OAAO,QAAQ,GAAG;EAEvD,cAAc,UAAU,OAAO,aAAa,KAAK;EACjD,gBAAgB;EAChB,OAAO,SACH,cACA,WACE,OAAO,OAAO,KAAK,WACnB,OAAO,OAAO,KAAK;EACzB,iBAAiB,SACb,GAAG,YAAY,MACf,aAAa,CAAC,WACZ,GAAG,YAAY,MACf;EACN,UAAU,UACN,OAAO,WAAW,SAAS,KAC3B,OAAO,WAAW,SAAS;EAC/B,YAAY,SACR,OAAO,WAAW,WAAW,WAC7B,OAAO,WAAW,WAAW;EACjC,YAAY,OAAO,WAAW,WAAW;EACzC,QAAQ,WAAW,gBAAgB;EACnC,gBAAgB;EAChB,WAAW;EACX,aAAa;EACb,cAAc;EAGd,YAAY,UACR,SACA,SACE,aAAa,gBACb;EACN,SAAS;EACT,OAAO;EACP,WAAW;EACX,YAAY,OAAO,UAAU;EAC7B,UAAU;EACV,SAAS,WAAW,KAAM;CAC5B;CAEA,MAAM,YAAY,WAAW,eAAe,WAAW;CAEvD,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA;EAEG,eACC,qBAAC,QAAD;GACE,OAAO;IACL,YAAY;IACZ,SAAS;IACT,UAAU;IACV,WAAW,iBAAiB,QAAQ;GACtC;aANF,CAQG,aAEA,aAAa,UACZ,oBAAC,QAAD;IACE,OAAO;KACL,UAAU;KACV,KAAK;KACL,MAAM;KACN,YAAY;IACd;IACA,OAAO,eAAe;cAEtB,oBAAC,gBAAD;KAAwB;KAAQ,MAAM;IAAI,CAAA;GACtC,CAAA,CAEJ;;EAKR,qBAAC,QAAD;GACE,WAAU;GACV,kBAAgB,YAAY,SAAS;GACrC,OAAO;IAAE,MAAM;IAAG,UAAU;IAAG,UAAU;GAAS;aAHpD,CAKE,qBAAC,QAAD;IAAM,OAAO;KAAE,SAAS;KAAQ,YAAY;KAAU,KAAK;IAAE;cAA7D,CACE,oBAAC,QAAD;KACE,OAAO;MACL,YAAY;MACZ,UAAU;MACV,cAAc;KAChB;eAEC;IACG,CAAA,GACL,OACC,oBAAC,QAAD;KACE,OAAO;MACL,UAAU;MACV,YAAY,OAAO,WAAW,WAAW;MACzC,OAAO,UAAU;MACjB,iBAAiB,UAAU;MAC3B,QAAQ,aAAa,UAAU;MAC/B,SAAS;MACT,cAAc,OAAO,aAAa;MAClC,eAAe;MACf,eAAe;MACf,YAAY;MACZ,YAAY;MACZ,YAAY;KACd;eAEC;IACG,CAAA,CAEJ;OACL,eAAe,CAAC,aACf,oBAAC,QAAD;IACE,OAAO;KACL,SAAS;KACT,UAAU,OAAO,WAAW,SAAS;KACrC,OAAO,OAAO,OAAO,KAAK;KAC1B,YAAY,OAAO,WAAW,WAAW;KACzC,WAAW;KACX,YAAY;KACZ,UAAU;KACV,cAAc;KACd,YAAY,OAAO,WAAW,WAAW;IAC3C;cAEC;GACG,CAAA,CAEJ;;EAGL,CAAC,cACE,UAAU,KAAA,KAAa,QAAQ,KAC/B,UACA,UACA,aACA,qBAAC,QAAD;GACE,WAAU;GACV,OAAO;IACL,SAAS;IACT,YAAY;IACZ,KAAK;IACL,YAAY;IACZ,WAAW,iBAAiB,QAAQ;GACtC;aARF;IAWG,UAAU,KAAA,KAAa,QAAQ,KAC9B,oBAAC,QAAD;KACE,OAAO;MACL,UAAU;MACV,YAAY,OAAO,WAAW,WAAW;MACzC,OAAO;MACP,iBAAiB,OAAO,OAAO,OAAO;MACtC,cAAc,OAAO,aAAa;MAClC,UAAU;MACV,QAAQ;MACR,SAAS;MACT,YAAY;MACZ,gBAAgB;MAChB,SAAS;MACT,YAAY;MACZ,YAAY;MACZ,WAAW;KACb;eAEC,QAAQ,KAAK,QAAQ;IAClB,CAAA;IAGP,UACC,oBAAC,QAAD;KACE,OAAO;MACL,SAAS;MACT,YAAY;MACZ,YAAY;KACd;KACA,MAAK;KACL,cAAY,WAAW,eAAe;KACtC,OAAO,eAAe;eAEtB,oBAAC,gBAAD;MAAwB;MAAQ,MAAM;KAAI,CAAA;IACtC,CAAA;IAGP,UACC,oBAAC,QAAD;KACE,OAAO;MACL,YAAY;MACZ,SAAS;MACT,YAAY;KACd;eAEC;IACG,CAAA;IAGP,YACC,qBAAC,OAAD;KACE,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,OAAO;MAAE,YAAY;MAAG,SAAS;KAAI;eARvC;MAUE,oBAAC,QAAD,EAAM,GAAE,2DAA4D,CAAA;MACpE,oBAAC,YAAD,EAAU,QAAO,iBAAkB,CAAA;MACnC,oBAAC,QAAD;OAAM,IAAG;OAAK,IAAG;OAAK,IAAG;OAAK,IAAG;MAAK,CAAA;KACnC;;GAEH;;CAEV,EAAA,CAAA;CAGJ,MAAM,QAAQ;EACZ,OAAO;EACP,oBAAoB,aAAa,IAAI;EACrC,oBAAoB,aAAa,KAAK;EACtC,OAAO,YAAY,QAAQ,KAAA;EAC3B,gBAAgB,SAAU,SAAmB,KAAA;EAC7C,iBAAiB;CACnB;CAEA,IAAI,QAAQ,CAAC,UACX,OACE,oBAAC,KAAD;EACQ;EACN,SAAS;EACT,QAAQ,WAAW,WAAW,KAAA;EAC9B,KAAK,WAAW,wBAAwB,KAAA;EACxC,GAAI;YAEH;CACA,CAAA;CAIP,OACE,oBAAC,UAAD;EAAQ,MAAK;EAAS,SAAS;EAAuB;EAAU,GAAI;YACjE;CACK,CAAA;AAEZ,CAAC;AAWD,IAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,OACA,YAC0C;CAC1C,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,EAAE,cAAc,WAAW,cAAc;CAE/C,OACE,qBAAC,OAAD;EAAK,OAAO,EAAE,WAAW,OAAO,QAAQ,GAAG;YAA3C;GACG,SAAS,CAAC,aACT,oBAAC,OAAD;IACE,WAAU;IACV,OAAO;KACL,SAAS,GAAG,OAAO,QAAQ,GAAG,QAAQ,OAAO,QAAQ,GAAG;KACxD,UAAU,OAAO,WAAW,SAAS;KACrC,YAAY,OAAO,WAAW,WAAW;KACzC,OAAO,OAAO,OAAO,KAAK;KAC1B,eAAe;KACf,eAAe;IACjB;cAEC;GACE,CAAA;GAEN,aAAa,SACZ,oBAAC,OAAD,EACE,OAAO;IACL,OAAO;IACP,QAAQ;IACR,iBAAiB,OAAO,OAAO,OAAO;IACtC,QAAQ,GAAG,OAAO,QAAQ,GAAG;GAC/B,EACD,CAAA;GAEF;EACE;;AAET,CAAC;AASD,IAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,SAC0C;CAC1C,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,EAAE,cAAc,WAAW,cAAc;CAE/C,IAAI,WACF,OACE,oBAAC,OAAD,EACE,OAAO;EACL,OAAO;EACP,QAAQ;EACR,iBAAiB,OAAO,OAAO,OAAO;EACtC,QAAQ,GAAG,OAAO,QAAQ,GAAG;CAC/B,EACD,CAAA;CAIL,IAAI,OACF,OACE,qBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK,OAAO,QAAQ;GACpB,SAAS,GAAG,OAAO,QAAQ,GAAG,QAAQ,OAAO,QAAQ,GAAG;EAC1D;YANF;GAQE,oBAAC,OAAD,EACE,OAAO;IACL,MAAM;IACN,QAAQ;IACR,iBAAiB,OAAO,OAAO,OAAO;GACxC,EACD,CAAA;GACD,oBAAC,QAAD;IACE,OAAO;KACL,UAAU,OAAO,WAAW,SAAS;KACrC,OAAO,OAAO,OAAO,KAAK;KAC1B,eAAe;KACf,eAAe;KACf,YAAY;IACd;cAEC;GACG,CAAA;GACN,oBAAC,OAAD,EACE,OAAO;IACL,MAAM;IACN,QAAQ;IACR,iBAAiB,OAAO,OAAO,OAAO;GACxC,EACD,CAAA;EACE;;CAIT,OACE,oBAAC,OAAD,EACE,OAAO;EACL,QAAQ;EACR,iBAAiB,OAAO,OAAO,OAAO;EACtC,QAAQ,GAAG,OAAO,QAAQ,GAAG,QAAQ,OAAO,QAAQ,GAAG;CACzD,EACD,CAAA;AAEL,CAAC;AAQD,IAAM,gBAAgB,KAAK,SAAS,cAAc,EAChD,YACyC;CACzC,MAAM,EAAE,WAAW,SAAS;CAE5B,OACE,oBAAC,OAAD;EACE,OAAO;GACL,WAAW;GACX,WAAW,aAAa,OAAO,OAAO,OAAO;GAC7C,YAAY,OAAO,QAAQ;GAC3B,eAAe,OAAO,QAAQ;EAChC;EAEC;CACE,CAAA;AAET,CAAC;AAYD,IAAa,UAA4B,OAAO,OAAO,aAAa;CAClE,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;AACV,CAAC"}
1	+ {"version":3,"file":"SideNav.js","names":[],"sources":["../../../../src/react/core/navigation/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, {\r\n memo,\r\n useState,\r\n createContext,\r\n useContext,\r\n useCallback,\r\n useEffect,\r\n useLayoutEffect,\r\n} from \"react\";\r\n\r\nconst useIsomorphicLayoutEffect =\r\n typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\r\nimport { useTheme } from \"../../theme\";\r\nimport { safeAccentText } from \"../../utils\";\r\nimport { Icon } from \"../display/Icon\";\r\nimport type { IconName } from \"../display/Icon\";\r\n\r\n// ─── Reveal animation ────────────────────────────────────────────────────────\r\n\r\n/\r\n Content that only renders when expanded (item labels, section titles, the\r\n * header meta block) fades and slides in rather than popping, so widening the\r\n * rail reads as material flowing in. Injected once as a stylesheet because\r\n * keyframes can't be expressed inline; honours `prefers-reduced-motion`.\r\n /\r\nconst SIDENAV_REVEAL_STYLE_ID = \"zendir-sidenav-reveal\";\r\nfunction ensureSideNavReveal(): void {\r\n if (typeof document === \"undefined\") return;\r\n if (document.getElementById(SIDENAV_REVEAL_STYLE_ID)) return;\r\n const el = document.createElement(\"style\");\r\n el.id = SIDENAV_REVEAL_STYLE_ID;\r\n el.textContent =\r\n \"@keyframes zsn-reveal{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}\" +\r\n \".zsn-reveal{animation:zsn-reveal 220ms cubic-bezier(0.22,1,0.36,1)}\" +\r\n // Item label is always mounted and toggled via data-collapsed, so it fades\r\n // and slides BOTH on expand and collapse (the icon stays put as the anchor).\r\n \".zsn-label{transition:opacity 220ms cubic-bezier(0.22,1,0.36,1),transform 220ms cubic-bezier(0.22,1,0.36,1)}\" +\r\n '.zsn-label[data-collapsed=\"true\"]{opacity:0;transform:translateX(-6px);pointer-events:none}' +\r\n \"@media (prefers-reduced-motion: reduce){.zsn-reveal,.zsn-label{animation:none;transition:none}}\";\r\n document.head.appendChild(el);\r\n}\r\n\r\n// ─── Astro UX Status Shape ───────────────────────────────────────────────────\r\n\r\n/* Astro UX dual-coded status shape (color + geometry). /\r\nfunction NavStatusShape({\r\n status,\r\n size = 8,\r\n}: {\r\n status: string;\r\n size?: number;\r\n}) {\r\n const { tokens } = useTheme();\r\n const color =\r\n tokens.colors.status[status as keyof typeof tokens.colors.status] ??\r\n tokens.colors.status.off;\r\n const glow = `${color}50`;\r\n const style = {\r\n flexShrink: 0 as const,\r\n filter: `drop-shadow(0 0 3px ${glow})`,\r\n };\r\n\r\n switch (status) {\r\n case \"caution\":\r\n return (\r\n <svg\r\n viewBox=\"0 0 12 12\"\r\n width={size}\r\n height={size}\r\n style={style}\r\n aria-hidden=\"true\"\r\n >\r\n <rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} />\r\n </svg>\r\n );\r\n case \"serious\":\r\n return (\r\n <svg\r\n viewBox=\"0 0 12 12\"\r\n width={size}\r\n height={size}\r\n style={style}\r\n aria-hidden=\"true\"\r\n >\r\n <polygon points=\"6,1 11,6 6,11 1,6\" fill={color} />\r\n </svg>\r\n );\r\n case \"critical\":\r\n return (\r\n <svg\r\n viewBox=\"0 0 12 12\"\r\n width={size}\r\n height={size}\r\n style={style}\r\n aria-hidden=\"true\"\r\n >\r\n <polygon points=\"6,11 1,2 11,2\" fill={color} />\r\n </svg>\r\n );\r\n case \"standby\":\r\n return (\r\n <svg\r\n viewBox=\"0 0 12 12\"\r\n width={size}\r\n height={size}\r\n style={style}\r\n aria-hidden=\"true\"\r\n >\r\n <circle\r\n cx=\"6\"\r\n cy=\"6\"\r\n r=\"3.5\"\r\n fill=\"none\"\r\n stroke={color}\r\n strokeWidth=\"2\"\r\n />\r\n </svg>\r\n );\r\n case \"off\":\r\n return (\r\n <svg\r\n viewBox=\"0 0 12 12\"\r\n width={size}\r\n height={size}\r\n style={style}\r\n aria-hidden=\"true\"\r\n >\r\n <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\r\n </svg>\r\n );\r\n default: // normal\r\n return (\r\n <svg\r\n viewBox=\"0 0 12 12\"\r\n width={size}\r\n height={size}\r\n style={style}\r\n aria-hidden=\"true\"\r\n >\r\n <circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} />\r\n </svg>\r\n );\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 density: \"default\" \| \"compact\";\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 density: \"default\",\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 Row density. `'compact'` tightens row padding, drops the left accent bar\r\n * in favour of a pill-style (rounded, bg-tinted) active row, and shrinks the\r\n * label — matching the v2.3 operator/admin secondary-nav mock. Default\r\n * `'default'`. (TODO: row inset + mono section headings for full mock parity.)\r\n /\r\n density?: \"default\" \| \"compact\";\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 density = \"default\",\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 =\r\n theme === \"transparent\" \|\|\r\n theme === \"transparent-bold\" \|\|\r\n theme === \"transparent-minimal\";\r\n const [mobileOpen, setMobileOpen] = useState(false);\r\n const [userCollapsed, setUserCollapsed] = useState<boolean \| null>(null);\r\n\r\n // Initialize to 'desktop' to guarantee the first client render matches SSR\r\n // (where window is undefined), preventing a React hydration mismatch if the\r\n // client happens to be on a mobile/tablet width at initial load.\r\n const [viewMode, setViewMode] = useState<SideNavMode>(\"desktop\");\r\n\r\n useIsomorphicLayoutEffect(() => {\r\n if (typeof window === \"undefined\") return;\r\n\r\n // Synchronously correct the viewMode right after hydration but before paint\r\n setViewMode(getSideNavMode(window.innerWidth));\r\n\r\n let rafId: number;\r\n const handleResize = () => {\r\n cancelAnimationFrame(rafId);\r\n rafId = requestAnimationFrame(() =>\r\n setViewMode(getSideNavMode(window.innerWidth)),\r\n );\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 useIsomorphicLayoutEffect(() => {\r\n ensureSideNavReveal();\r\n }, []);\r\n\r\n // When mobileVariant='collapsed', promote mobile to tablet (collapsed inline strip)\r\n const effectiveMode =\r\n mobileVariant === \"collapsed\" && viewMode === \"mobile\"\r\n ? \"tablet\"\r\n : 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 =\r\n 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:\r\n \"width 0.3s cubic-bezier(0.22, 1, 0.36, 1), 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 ? {\r\n backdropFilter: \"blur(16px)\",\r\n WebkitBackdropFilter: \"blur(16px)\",\r\n }\r\n : {}),\r\n ...style,\r\n };\r\n\r\n const contextValue: SideNavContextValue = {\r\n collapsed: isCollapsed,\r\n mobileOpen,\r\n mode: effectiveMode,\r\n density,\r\n showCollapseToggle,\r\n setMobileOpen,\r\n toggleCollapse: handleToggleCollapse,\r\n };\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\r\n width=\"18\"\r\n height=\"18\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2.5\"\r\n strokeLinecap=\"round\"\r\n >\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\n/* Default height for the logo row so dashboard / operator / other apps align the same mark. /\r\nexport const SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX = 44;\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 /\r\n Fixed height (px) for the top logo band. Title, subtitle, and badge render below this band\r\n * so different logo assets still line up across apps (dashboard vs operator).\r\n /\r\n logoSlotHeight?: number;\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\r\n ? `${tokens.colors.accent.primary}15`\r\n : \"transparent\",\r\n color: hovered\r\n ? tokens.colors.accent.primary\r\n : 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 logoSlotHeight = SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX,\r\n children,\r\n}: SideNavHeaderProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n const { collapsed, mode, showCollapseToggle, toggleCollapse } =\r\n useContext(SideNavContext);\r\n const displayLogo = collapsed && collapsedLogo ? collapsedLogo : logo;\r\n const showToggle = showCollapseToggle && mode !== \"mobile\";\r\n const hasMeta = Boolean(title \|\| subtitle \|\| badge);\r\n const slotH = logoSlotHeight;\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 const metaBlock =\r\n !collapsed && hasMeta ? (\r\n <div\r\n className=\"zsn-reveal\"\r\n style={{ flex: 1, minWidth: 0, width: \"100%\" }}\r\n >\r\n {title ? (\r\n <div\r\n 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 >\r\n {title}\r\n </div>\r\n ) : null}\r\n {subtitle \|\| badge ? (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacing.xs,\r\n marginTop: title ? \"2px\" : 0,\r\n flexWrap: \"wrap\",\r\n }}\r\n >\r\n {subtitle ? (\r\n <span\r\n style={{\r\n fontSize: tokens.typography.fontSize.xxs,\r\n color: tokens.colors.text.tertiary,\r\n }}\r\n >\r\n {subtitle}\r\n </span>\r\n ) : null}\r\n {badge ? (\r\n <span\r\n style={{\r\n fontSize: \"0.6rem\",\r\n fontWeight: tokens.typography.fontWeight.bold,\r\n color:\r\n badgeColors[badgeVariant] \|\|\r\n 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 >\r\n {badge}\r\n </span>\r\n ) : null}\r\n </div>\r\n ) : null}\r\n </div>\r\n ) : null;\r\n\r\n const logoSlot = displayLogo ? (\r\n <div\r\n style={{\r\n height: slotH,\r\n minHeight: slotH,\r\n maxHeight: slotH,\r\n width: \"100%\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: collapsed ? \"center\" : \"flex-start\",\r\n overflow: \"hidden\",\r\n boxSizing: \"border-box\",\r\n marginBottom:\r\n !collapsed && hasMeta && displayLogo ? tokens.spacing.sm : 0,\r\n }}\r\n >\r\n <div\r\n style={{\r\n maxHeight: \"100%\",\r\n maxWidth: \"100%\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: collapsed ? \"center\" : \"flex-start\",\r\n minWidth: 0,\r\n cursor: collapsed && showToggle ? \"pointer\" : undefined,\r\n }}\r\n onClick={collapsed && showToggle ? toggleCollapse : undefined}\r\n >\r\n {displayLogo}\r\n </div>\r\n </div>\r\n ) : null;\r\n\r\n if (children) {\r\n return (\r\n <div\r\n style={{\r\n padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\r\n borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n flexShrink: 0,\r\n boxSizing: \"border-box\",\r\n position: \"relative\",\r\n }}\r\n >\r\n {children}\r\n </div>\r\n );\r\n }\r\n\r\n // Collapsed: centered logo in the same fixed slot height as expanded (visual parity with operator).\r\n if (collapsed) {\r\n return (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n padding: `${tokens.spacing.md} ${tokens.spacing.sm}`,\r\n minHeight: slotH + 24,\r\n borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n flexShrink: 0,\r\n boxSizing: \"border-box\",\r\n position: \"relative\",\r\n justifyContent: \"center\",\r\n }}\r\n >\r\n {logoSlot}\r\n {showToggle ? (\r\n <div\r\n style={{\r\n position: \"absolute\",\r\n right: 4,\r\n top: \"50%\",\r\n transform: \"translateY(-50%)\",\r\n }}\r\n >\r\n <CollapseToggleButton />\r\n </div>\r\n ) : null}\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"stretch\",\r\n padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\r\n borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n flexShrink: 0,\r\n boxSizing: \"border-box\",\r\n position: \"relative\",\r\n }}\r\n >\r\n {showToggle ? (\r\n <div\r\n style={{\r\n position: \"absolute\",\r\n top: tokens.spacing.sm,\r\n right: tokens.spacing.sm,\r\n zIndex: 1,\r\n }}\r\n >\r\n <CollapseToggleButton />\r\n </div>\r\n ) : null}\r\n <div\r\n style={{\r\n paddingRight: showToggle ? 36 : 0,\r\n width: \"100%\",\r\n minWidth: 0,\r\n }}\r\n >\r\n {logoSlot}\r\n {metaBlock}\r\n </div>\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, density } = useContext(SideNavContext);\r\n const compact = density === \"compact\" && !collapsed;\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n const handleClick = useCallback(\r\n (e: React.MouseEvent) => {\r\n if (disabled) return;\r\n if (onClick && href && !e.metaKey && !e.ctrlKey && !e.shiftKey) {\r\n e.preventDefault();\r\n }\r\n setMobileOpen(false);\r\n onClick?.();\r\n },\r\n [disabled, onClick, href, setMobileOpen],\r\n );\r\n\r\n // Status-aware accent: when an item has a status, tint active/hover with its color\r\n const statusColor = status\r\n ? (tokens.colors.status[status] ?? undefined)\r\n : undefined;\r\n const accentColor =\r\n statusColor && active\r\n ? statusColor\r\n : safeAccentText(tokens.colors.accent.primary);\r\n\r\n const hasDescription = !!description && !collapsed;\r\n\r\n const iconElement =\r\n typeof icon === \"string\" ? (\r\n <Icon\r\n name={icon as IconName}\r\n size={hasDescription ? 22 : 20}\r\n color={active ? accentColor : tokens.colors.text.secondary}\r\n />\r\n ) : (\r\n icon\r\n );\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 // Collapsed keeps the SAME 12px left inset as the expanded row, so the\r\n // icon holds its horizontal position when the rail expands — it doesn't\r\n // jump from a centered slot to a left-aligned one. Size the collapsed\r\n // width so that fixed inset reads as centered.\r\n padding: collapsed\r\n ? `${tokens.spacing.sm} 12px`\r\n : compact\r\n ? \"7px 8px\"\r\n : hasDescription\r\n ? `10px 16px 10px 12px`\r\n : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,\r\n // Compact: pill-style rounded row (mock parity). Default: square row.\r\n borderRadius: compact ? tokens.borderRadius.md : 0,\r\n justifyContent: \"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: compact\r\n ? tokens.typography.fontSize.xs\r\n : tokens.typography.fontSize.sm,\r\n fontWeight: active\r\n ? tokens.typography.fontWeight.semibold\r\n : 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 // Compact drops the left accent bar — the active row is conveyed by the\r\n // bg tint + accent text alone (mock parity). Default keeps the 3px bar.\r\n borderLeft: compact\r\n ? \"none\"\r\n : 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\r\n style={{\r\n flexShrink: 0,\r\n display: \"flex\",\r\n position: \"relative\",\r\n marginTop: hasDescription ? \"2px\" : 0,\r\n }}\r\n >\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 {/ Label — always mounted and toggled via data-collapsed so it fades and\r\n slides BOTH on expand and collapse; the icon holds its position as\r\n the anchor and only the label moves. /}\r\n <span\r\n className=\"zsn-label\"\r\n data-collapsed={collapsed ? \"true\" : \"false\"}\r\n style={{ flex: 1, minWidth: 0, overflow: \"hidden\" }}\r\n >\r\n <span style={{ display: \"flex\", alignItems: \"center\", gap: 6 }}>\r\n <span\r\n style={{\r\n whiteSpace: \"nowrap\",\r\n overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n }}\r\n >\r\n {label}\r\n </span>\r\n {tag && (\r\n <span\r\n 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 >\r\n {tag}\r\n </span>\r\n )}\r\n </span>\r\n {description && !collapsed && (\r\n <span\r\n 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 >\r\n {description}\r\n </span>\r\n )}\r\n </span>\r\n {/ Right-side trailing elements — expanded only; collapsed shows the\r\n status overlay on the icon instead. /}\r\n {!collapsed &&\r\n ((badge !== undefined && badge > 0) \|\|\r\n status \|\|\r\n suffix \|\|\r\n external) && (\r\n <span\r\n className=\"zsn-reveal\"\r\n 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 >\r\n {/ Badge /}\r\n {badge !== undefined && badge > 0 && (\r\n <span\r\n 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 >\r\n {badge > 99 ? \"99+\" : badge}\r\n </span>\r\n )}\r\n {/ Status /}\r\n {status && (\r\n <span\r\n style={{\r\n display: \"inline-flex\",\r\n alignItems: \"center\",\r\n flexShrink: 0,\r\n }}\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\r\n style={{\r\n flexShrink: 0,\r\n display: \"inline-flex\",\r\n alignItems: \"center\",\r\n }}\r\n >\r\n {suffix}\r\n </span>\r\n )}\r\n {/ External /}\r\n {external && (\r\n <svg\r\n width=\"12\"\r\n height=\"12\"\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 style={{ flexShrink: 0, opacity: 0.5 }}\r\n >\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 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\r\n href={href}\r\n onClick={handleClick}\r\n target={external ? \"_blank\" : undefined}\r\n rel={external ? \"noopener noreferrer\" : undefined}\r\n {...props}\r\n >\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\r\n className=\"zsn-reveal\"\r\n 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 >\r\n {title}\r\n </div>\r\n )}\r\n {collapsed && title && (\r\n <div\r\n 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 )}\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\r\n 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\r\n if (label) {\r\n return (\r\n <div\r\n 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 >\r\n <div\r\n style={{\r\n flex: 1,\r\n height: \"1px\",\r\n backgroundColor: tokens.colors.border.muted,\r\n }}\r\n />\r\n <span\r\n 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 >\r\n {label}\r\n </span>\r\n <div\r\n style={{\r\n flex: 1,\r\n height: \"1px\",\r\n backgroundColor: tokens.colors.border.muted,\r\n }}\r\n />\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div\r\n 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\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\r\n 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 >\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"],"mappings":"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"}

package/dist/react/core/navigation/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","names":[],"sources":["../../../../src/react/core/navigation/Tabs.tsx"],"sourcesContent":["/*\n @zendir/ui - Tabs Component\n \n Tab navigation following Astro UX Design System.\n \n @example\n * ```tsx\n * <Tabs value={activeTab} onChange={setActiveTab}>\n * <Tabs.List>\n * <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n * <Tabs.Tab value=\"telemetry\">Telemetry</Tabs.Tab>\n * <Tabs.Tab value=\"commands\">Commands</Tabs.Tab>\n * </Tabs.List>\n * <Tabs.Panel value=\"overview\">Overview content</Tabs.Panel>\n * <Tabs.Panel value=\"telemetry\">Telemetry content</Tabs.Panel>\n * <Tabs.Panel value=\"commands\">Commands content</Tabs.Panel>\n * </Tabs>\n * ```\n /\n\nimport React, { memo, createContext, useContext, useId } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { classNames, safeAccentText } from \"../../utils\";\n\ninterface TabsContextValue {\n value: string;\n onChange: (value: string) => void;\n baseId: string;\n}\n\nconst TabsContext = createContext<TabsContextValue \| null>(null);\n\nconst useTabsContext = () => {\n const context = useContext(TabsContext);\n if (!context) {\n throw new Error(\"Tabs components must be used within a Tabs provider\");\n }\n return context;\n};\n\nexport interface TabsProps {\n /* Active tab value /\n value: string;\n /* Change handler /\n onChange: (value: string) => void;\n /* Children /\n children: React.ReactNode;\n /* Custom className /\n className?: string;\n}\n\nexport interface TabsListProps {\n /* Children (Tab components) /\n children: React.ReactNode;\n /* Custom className /\n className?: string;\n}\n\nexport interface TabProps {\n /* Tab value /\n value: string;\n /* Disabled state /\n disabled?: boolean;\n /* Icon before label /\n icon?: React.ReactNode;\n /* Children (label) /\n children: React.ReactNode;\n /* Custom className /\n className?: string;\n}\n\nexport interface TabsPanelProps {\n /* Panel value (must match Tab value) /\n value: string;\n /* Children /\n children: React.ReactNode;\n /* Custom className */\n className?: string;\n}\n\nconst TabsList = memo(function TabsList({\n children,\n className = \"\",\n}: TabsListProps): React.ReactElement {\n const { tokens } = useTheme();\n\n return (\n <div\n role=\"tablist\"\n className={classNames(\"zendir-tabs-list\", className)}\n style={{\n display: \"flex\",\n gap: tokens.spacing.xs,\n borderBottom: tokens.borders.divider,\n marginBottom: tokens.spacing.md,\n }}\n >\n {children}\n </div>\n );\n});\n\nconst Tab = memo(function Tab({\n value,\n disabled = false,\n icon,\n children,\n className = \"\",\n}: TabProps): React.ReactElement {\n const { tokens } = useTheme();\n const { value: activeValue, onChange, baseId } = useTabsContext();\n\n const isActive = value === activeValue;\n\n return (\n <button\n type=\"button\"\n role=\"tab\"\n id={`${baseId}-tab-${value}`}\n aria-controls={`${baseId}-panel-${value}`}\n aria-selected={isActive}\n aria-disabled={disabled}\n disabled={disabled}\n onClick={() => !disabled && onChange(value)}\n className={classNames(\n \"zendir-tab\",\n isActive && \"zendir-tab--active\",\n className,\n )}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacing.xs,\n padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\n fontSize: tokens.typography.fontSize.sm,\n fontWeight: isActive\n ? tokens.typography.fontWeight.semibold\n : tokens.typography.fontWeight.normal,\n fontFamily: tokens.typography.fontFamily.primary,\n color: isActive\n ? safeAccentText(tokens.colors.accent.primary)\n : tokens.colors.text.secondary,\n backgroundColor: \"transparent\",\n border: \"none\",\n borderBottom: `${tokens.borders.width.thick} solid ${isActive ? tokens.colors.accent.primary : \"transparent\"}`,\n marginBottom: \"-1px\",\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n opacity: disabled ? 0.5 : 1,\n transition: `all ${tokens.animation.fast}`,\n outline: \"none\",\n }}\n onMouseEnter={(e) => {\n if (!disabled && !isActive) {\n e.currentTarget.style.color = tokens.colors.text.primary;\n }\n }}\n onMouseLeave={(e) => {\n if (!disabled && !isActive) {\n e.currentTarget.style.color = tokens.colors.text.secondary;\n }\n }}\n onFocus={(e) => {\n e.currentTarget.style.boxShadow = tokens.borders.focusRing.subtle;\n }}\n onBlur={(e) => {\n e.currentTarget.style.boxShadow = \"none\";\n }}\n >\n {icon}\n {children}\n </button>\n );\n});\n\nconst TabsPanel = memo(function TabsPanel({\n value,\n children,\n className = \"\",\n}: TabsPanelProps): React.ReactElement \| null {\n const { value: activeValue, baseId } = useTabsContext();\n\n if (value !== activeValue) return null;\n\n return (\n <div\n role=\"tabpanel\"\n id={`${baseId}-panel-${value}`}\n aria-labelledby={`${baseId}-tab-${value}`}\n className={classNames(\"zendir-tabs-panel\", className)}\n >\n {children}\n </div>\n );\n});\n\nexport const Tabs = memo(function Tabs({\n value,\n onChange,\n children,\n className = \"\",\n}: TabsProps): React.ReactElement {\n const baseId = useId();\n return (\n <TabsContext.Provider value={{ value, onChange, baseId }}>\n <div className={classNames(\"zendir-tabs\", className)}>{children}</div>\n </TabsContext.Provider>\n );\n}) as React.NamedExoticComponent<TabsProps> & {\n List: typeof TabsList;\n Tab: typeof Tab;\n Panel: typeof TabsPanel;\n};\n\n// Attach subcomponents\n(Tabs as any).List = TabsList;\n(Tabs as any).Tab = Tab;\n(Tabs as any).Panel = TabsPanel;\n\nexport default Tabs;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Tabs.js","names":[],"sources":["../../../../src/react/core/navigation/Tabs.tsx"],"sourcesContent":["/*\r\n @zendir/ui - Tabs Component\r\n \r\n Tab navigation following Astro UX Design System.\r\n \r\n @example\r\n * ```tsx\r\n * <Tabs value={activeTab} onChange={setActiveTab}>\r\n * <Tabs.List>\r\n * <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\r\n * <Tabs.Tab value=\"telemetry\">Telemetry</Tabs.Tab>\r\n * <Tabs.Tab value=\"commands\">Commands</Tabs.Tab>\r\n * </Tabs.List>\r\n * <Tabs.Panel value=\"overview\">Overview content</Tabs.Panel>\r\n * <Tabs.Panel value=\"telemetry\">Telemetry content</Tabs.Panel>\r\n * <Tabs.Panel value=\"commands\">Commands content</Tabs.Panel>\r\n * </Tabs>\r\n * ```\r\n /\r\n\r\nimport React, { memo, createContext, useContext, useId } from \"react\";\r\nimport { useTheme } from \"../../theme\";\r\nimport { classNames, safeAccentText } from \"../../utils\";\r\n\r\ninterface TabsContextValue {\r\n value: string;\r\n onChange: (value: string) => void;\r\n baseId: string;\r\n}\r\n\r\nconst TabsContext = createContext<TabsContextValue \| null>(null);\r\n\r\nconst useTabsContext = () => {\r\n const context = useContext(TabsContext);\r\n if (!context) {\r\n throw new Error(\"Tabs components must be used within a Tabs provider\");\r\n }\r\n return context;\r\n};\r\n\r\nexport interface TabsProps {\r\n /* Active tab value /\r\n value: string;\r\n /* Change handler /\r\n onChange: (value: string) => void;\r\n /* Children /\r\n children: React.ReactNode;\r\n /* Custom className /\r\n className?: string;\r\n}\r\n\r\nexport interface TabsListProps {\r\n /* Children (Tab components) /\r\n children: React.ReactNode;\r\n /* Custom className /\r\n className?: string;\r\n}\r\n\r\nexport interface TabProps {\r\n /* Tab value /\r\n value: string;\r\n /* Disabled state /\r\n disabled?: boolean;\r\n /* Icon before label /\r\n icon?: React.ReactNode;\r\n /* Children (label) /\r\n children: React.ReactNode;\r\n /* Custom className /\r\n className?: string;\r\n}\r\n\r\nexport interface TabsPanelProps {\r\n /* Panel value (must match Tab value) /\r\n value: string;\r\n /* Children /\r\n children: React.ReactNode;\r\n /* Custom className */\r\n className?: string;\r\n}\r\n\r\nconst TabsList = memo(function TabsList({\r\n children,\r\n className = \"\",\r\n}: TabsListProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n\r\n return (\r\n <div\r\n role=\"tablist\"\r\n className={classNames(\"zendir-tabs-list\", className)}\r\n style={{\r\n display: \"flex\",\r\n gap: tokens.spacing.xs,\r\n borderBottom: tokens.borders.divider,\r\n marginBottom: tokens.spacing.md,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n );\r\n});\r\n\r\nconst Tab = memo(function Tab({\r\n value,\r\n disabled = false,\r\n icon,\r\n children,\r\n className = \"\",\r\n}: TabProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n const { value: activeValue, onChange, baseId } = useTabsContext();\r\n\r\n const isActive = value === activeValue;\r\n\r\n return (\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n id={`${baseId}-tab-${value}`}\r\n aria-controls={`${baseId}-panel-${value}`}\r\n aria-selected={isActive}\r\n aria-disabled={disabled}\r\n disabled={disabled}\r\n onClick={() => !disabled && onChange(value)}\r\n className={classNames(\r\n \"zendir-tab\",\r\n isActive && \"zendir-tab--active\",\r\n className,\r\n )}\r\n style={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacing.xs,\r\n padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\r\n fontSize: tokens.typography.fontSize.sm,\r\n fontWeight: isActive\r\n ? tokens.typography.fontWeight.semibold\r\n : tokens.typography.fontWeight.normal,\r\n fontFamily: tokens.typography.fontFamily.primary,\r\n color: isActive\r\n ? safeAccentText(tokens.colors.accent.primary)\r\n : tokens.colors.text.secondary,\r\n backgroundColor: \"transparent\",\r\n border: \"none\",\r\n borderBottom: `${tokens.borders.width.thick} solid ${isActive ? tokens.colors.accent.primary : \"transparent\"}`,\r\n marginBottom: \"-1px\",\r\n cursor: disabled ? \"not-allowed\" : \"pointer\",\r\n opacity: disabled ? 0.5 : 1,\r\n transition: `all ${tokens.animation.fast}`,\r\n outline: \"none\",\r\n }}\r\n onMouseEnter={(e) => {\r\n if (!disabled && !isActive) {\r\n e.currentTarget.style.color = tokens.colors.text.primary;\r\n }\r\n }}\r\n onMouseLeave={(e) => {\r\n if (!disabled && !isActive) {\r\n e.currentTarget.style.color = tokens.colors.text.secondary;\r\n }\r\n }}\r\n onFocus={(e) => {\r\n e.currentTarget.style.boxShadow = tokens.borders.focusRing.subtle;\r\n }}\r\n onBlur={(e) => {\r\n e.currentTarget.style.boxShadow = \"none\";\r\n }}\r\n >\r\n {icon}\r\n {children}\r\n </button>\r\n );\r\n});\r\n\r\nconst TabsPanel = memo(function TabsPanel({\r\n value,\r\n children,\r\n className = \"\",\r\n}: TabsPanelProps): React.ReactElement \| null {\r\n const { value: activeValue, baseId } = useTabsContext();\r\n\r\n if (value !== activeValue) return null;\r\n\r\n return (\r\n <div\r\n role=\"tabpanel\"\r\n id={`${baseId}-panel-${value}`}\r\n aria-labelledby={`${baseId}-tab-${value}`}\r\n className={classNames(\"zendir-tabs-panel\", className)}\r\n >\r\n {children}\r\n </div>\r\n );\r\n});\r\n\r\nexport const Tabs = memo(function Tabs({\r\n value,\r\n onChange,\r\n children,\r\n className = \"\",\r\n}: TabsProps): React.ReactElement {\r\n const baseId = useId();\r\n return (\r\n <TabsContext.Provider value={{ value, onChange, baseId }}>\r\n <div className={classNames(\"zendir-tabs\", className)}>{children}</div>\r\n </TabsContext.Provider>\r\n );\r\n}) as React.NamedExoticComponent<TabsProps> & {\r\n List: typeof TabsList;\r\n Tab: typeof Tab;\r\n Panel: typeof TabsPanel;\r\n};\r\n\r\n// Attach subcomponents\r\n(Tabs as any).List = TabsList;\r\n(Tabs as any).Tab = Tab;\r\n(Tabs as any).Panel = TabsPanel;\r\n\r\nexport default Tabs;\r\n"],"mappings":"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"}

package/dist/react/core/overlays/Popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.js","names":[],"sources":["../../../../src/react/core/overlays/Popover.tsx"],"sourcesContent":["/*\n @zendir/ui - Popover & Menu Components\n \n General-purpose popover for dropdown menus, sort controls, action menus,\n * and contextual information. Portal-rendered with auto-positioning.\n \n Astro UX Compliance:\n * - Consistent with Dialog/Tooltip styling\n * - Focus trap for keyboard navigation\n * - Escape to close\n * - Click outside to close\n * - Reduced motion support\n \n @example\n * ```tsx\n * <Popover\n * trigger={<Button variant=\"secondary\">Sort</Button>}\n * placement=\"bottom-start\"\n * >\n * <Menu>\n * <Menu.Item onClick={...}>Sort by Time</Menu.Item>\n * <Menu.Item onClick={...}>Sort by Name</Menu.Item>\n * <Menu.Divider />\n * <Menu.Item onClick={...} destructive>Clear All</Menu.Item>\n * </Menu>\n * </Popover>\n * ```\n /\n\nimport React, {\n memo,\n useState,\n useRef,\n useEffect,\n useCallback,\n createContext,\n useContext,\n} from \"react\";\nimport { useTheme } from \"../../theme\";\n\n// ─── Popover ─────────────────────────────────────────────────────────────────\n\nexport type PopoverPlacement =\n \| \"top\"\n \| \"top-start\"\n \| \"top-end\"\n \| \"bottom\"\n \| \"bottom-start\"\n \| \"bottom-end\"\n \| \"left\"\n \| \"left-start\"\n \| \"left-end\"\n \| \"right\"\n \| \"right-start\"\n \| \"right-end\";\n\nexport interface PopoverProps {\n /* Trigger element /\n trigger: React.ReactElement;\n /* Popover content /\n children: React.ReactNode;\n /* Placement relative to trigger /\n placement?: PopoverPlacement;\n /* Open on hover instead of click /\n hover?: boolean;\n /* Controlled open state /\n open?: boolean;\n /* Controlled open change /\n onOpenChange?: (open: boolean) => void;\n /* Close on content click /\n closeOnClick?: boolean;\n /* Width: 'trigger' matches trigger width, number for px, 'auto' /\n width?: \"trigger\" \| \"auto\" \| number;\n /* Custom style for popover panel /\n style?: React.CSSProperties;\n}\n\nconst PopoverContext = createContext<{ close: () => void }>({\n close: () => {},\n});\n\nexport const Popover = memo(function Popover({\n trigger,\n children,\n placement = \"bottom-start\",\n hover = false,\n open: controlledOpen,\n onOpenChange,\n closeOnClick = true,\n width = \"auto\",\n style,\n}: PopoverProps): React.ReactElement {\n const { tokens, theme } = useTheme();\n const isTransparentTheme =\n theme === \"transparent\" \|\|\n theme === \"transparent-bold\" \|\|\n theme === \"transparent-minimal\";\n const [internalOpen, setInternalOpen] = useState(false);\n const triggerRef = useRef<HTMLDivElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();\n\n const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n const setOpen = useCallback(\n (val: boolean) => {\n if (controlledOpen === undefined) setInternalOpen(val);\n onOpenChange?.(val);\n },\n [controlledOpen, onOpenChange],\n );\n\n const close = useCallback(() => setOpen(false), [setOpen]);\n\n // Click outside\n useEffect(() => {\n if (!isOpen) return;\n const handler = (e: MouseEvent) => {\n if (\n triggerRef.current &&\n !triggerRef.current.contains(e.target as Node) &&\n popoverRef.current &&\n !popoverRef.current.contains(e.target as Node)\n ) {\n close();\n }\n };\n document.addEventListener(\"mousedown\", handler);\n return () => document.removeEventListener(\"mousedown\", handler);\n }, [isOpen, close]);\n\n // Escape key + cleanup hoverTimeout on unmount\n useEffect(() => {\n if (!isOpen) return;\n const handler = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") close();\n };\n document.addEventListener(\"keydown\", handler);\n return () => document.removeEventListener(\"keydown\", handler);\n }, [isOpen, close]);\n\n useEffect(() => {\n return () => {\n clearTimeout(hoverTimeout.current);\n };\n }, []);\n\n // Position calculation — `positioned` gates visibility so the panel is never\n // painted in document flow before the first RAF resolves coordinates.\n // Initializing with position: 'fixed' ensures that the hidden first-frame\n // measurement doesn't get constrained by the trigger's parent container.\n const [position, setPosition] = useState<React.CSSProperties>({\n position: \"fixed\",\n left: 0,\n top: 0,\n });\n const [positioned, setPositioned] = useState(false);\n\n // Reset visibility guard whenever the popover closes so the next open starts\n // hidden again rather than flashing the stale coordinates for one frame.\n useEffect(() => {\n if (!isOpen) setPositioned(false);\n }, [isOpen]);\n\n useEffect(() => {\n if (!isOpen \|\| !triggerRef.current) return;\n const gap = 8;\n const viewportPadding = 8;\n\n const updatePosition = () => {\n const rect = triggerRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n const panelWidth =\n width === \"trigger\"\n ? rect.width\n : typeof width === \"number\"\n ? width\n : (popoverRef.current?.offsetWidth ?? 220);\n const panelHeight = popoverRef.current?.offsetHeight ?? 220;\n\n let left = rect.left;\n let top = rect.bottom + gap;\n\n if (placement.startsWith(\"top\")) {\n top = rect.top - panelHeight - gap;\n } else if (placement.startsWith(\"bottom\")) {\n top = rect.bottom + gap;\n } else if (placement.startsWith(\"left\")) {\n left = rect.left - panelWidth - gap;\n } else if (placement.startsWith(\"right\")) {\n left = rect.right + gap;\n }\n\n if (placement.startsWith(\"top\") \|\| placement.startsWith(\"bottom\")) {\n if (placement.endsWith(\"-start\")) {\n left = rect.left;\n } else if (placement.endsWith(\"-end\")) {\n left = rect.right - panelWidth;\n } else {\n left = rect.left + (rect.width - panelWidth) / 2;\n }\n } else {\n if (placement.endsWith(\"-start\")) {\n top = rect.top;\n } else if (placement.endsWith(\"-end\")) {\n top = rect.bottom - panelHeight;\n } else {\n top = rect.top + (rect.height - panelHeight) / 2;\n }\n }\n\n left = Math.max(\n viewportPadding,\n Math.min(left, window.innerWidth - panelWidth - viewportPadding),\n );\n top = Math.max(\n viewportPadding,\n Math.min(top, window.innerHeight - panelHeight - viewportPadding),\n );\n\n const pos: React.CSSProperties = {\n position: \"fixed\",\n zIndex: 9990,\n left,\n top,\n };\n\n if (width === \"trigger\") {\n pos.width = rect.width;\n pos.minWidth = rect.width;\n } else if (typeof width === \"number\") {\n pos.width = width;\n }\n\n setPosition(pos);\n setPositioned(true);\n };\n\n const raf = requestAnimationFrame(updatePosition);\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n return () => {\n cancelAnimationFrame(raf);\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }, [isOpen, placement, width]);\n\n const triggerProps: Record<string, (() => void) \| undefined> = {};\n if (hover) {\n triggerProps.onMouseEnter = () => {\n clearTimeout(hoverTimeout.current);\n setOpen(true);\n };\n triggerProps.onMouseLeave = () => {\n hoverTimeout.current = setTimeout(close, 150);\n };\n } else {\n triggerProps.onClick = () => setOpen(!isOpen);\n }\n\n const popoverHoverProps = hover\n ? {\n onMouseEnter: () => clearTimeout(hoverTimeout.current),\n onMouseLeave: () => {\n hoverTimeout.current = setTimeout(close, 150);\n },\n }\n : {};\n\n return (\n <PopoverContext.Provider value={{ close }}>\n <div\n ref={triggerRef}\n style={{ display: \"inline-flex\" }}\n aria-expanded={isOpen}\n aria-haspopup=\"true\"\n {...triggerProps}\n >\n {trigger}\n </div>\n\n {isOpen && (\n <div\n ref={popoverRef}\n role=\"dialog\"\n onClick={closeOnClick ? close : undefined}\n {...popoverHoverProps}\n style={{\n ...position,\n visibility: positioned ? \"visible\" : \"hidden\",\n backgroundColor: isTransparentTheme\n ? \"rgba(15, 12, 30, 0.85)\"\n : tokens.colors.background.elevated,\n border: `1px solid ${tokens.colors.border.muted}`,\n borderRadius: tokens.borderRadius.md,\n boxShadow: tokens.shadows.lg,\n padding: tokens.spacing.xs,\n maxWidth: \"min(320px, calc(100vw - 16px))\",\n fontFamily: tokens.typography.fontFamily.primary,\n animation: `zendir-popover-enter 150ms ${tokens.animation.easing.default}`,\n ...(isTransparentTheme\n ? {\n backdropFilter: \"blur(16px)\",\n WebkitBackdropFilter: \"blur(16px)\",\n }\n : {}),\n ...style,\n }}\n >\n {children}\n </div>\n )}\n\n <style>{`\n @keyframes zendir-popover-enter {\n from { opacity: 0; transform: translateY(-4px) scale(0.98); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n `}</style>\n </PopoverContext.Provider>\n );\n});\n\n// ─── Menu ────────────────────────────────────────────────────────────────────\n\nexport interface MenuProps {\n children: React.ReactNode;\n style?: React.CSSProperties;\n}\n\nconst MenuRoot = memo(function Menu({\n children,\n style,\n}: MenuProps): React.ReactElement {\n return (\n <div\n role=\"menu\"\n style={{ minWidth: \"min(160px, calc(100vw - 32px))\", ...style }}\n >\n {children}\n </div>\n );\n});\n\n// ─── Menu.Item ───────────────────────────────────────────────────────────────\n\nexport interface MenuItemProps {\n /* Click handler /\n onClick?: () => void;\n /* Icon (ReactNode or IconName string) /\n icon?: React.ReactNode;\n /* Label text /\n children: React.ReactNode;\n /* Disabled state /\n disabled?: boolean;\n /* Destructive action (red text) /\n destructive?: boolean;\n /* Keyboard shortcut hint */\n shortcut?: string;\n}\n\nconst MenuItem = memo(function MenuItem({\n onClick,\n icon,\n children,\n disabled = false,\n destructive = false,\n shortcut,\n}: MenuItemProps): React.ReactElement {\n const { tokens } = useTheme();\n const { close } = useContext(PopoverContext);\n const [isHovered, setIsHovered] = useState(false);\n\n const handleClick = useCallback(() => {\n if (disabled) return;\n onClick?.();\n close();\n }, [disabled, onClick, close]);\n\n const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n const item = e.currentTarget;\n const siblings = item.parentElement?.querySelectorAll(\n '[role=\"menuitem\"]:not([disabled])',\n );\n if (!siblings) return;\n const items = Array.from(siblings) as HTMLElement[];\n const idx = items.indexOf(item as HTMLElement);\n\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n items[(idx + 1) % items.length]?.focus();\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n items[(idx - 1 + items.length) % items.length]?.focus();\n } else if (e.key === \"Home\") {\n e.preventDefault();\n items[0]?.focus();\n } else if (e.key === \"End\") {\n e.preventDefault();\n items[items.length - 1]?.focus();\n }\n }, []);\n\n const color = destructive\n ? tokens.colors.status.critical\n : disabled\n ? tokens.colors.text.tertiary\n : tokens.colors.text.primary;\n\n return (\n <button\n role=\"menuitem\"\n tabIndex={disabled ? -1 : 0}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacing.sm,\n width: \"100%\",\n padding: `${tokens.spacing.sm} ${tokens.spacing.sm}`,\n minHeight: 44,\n border: \"none\",\n background:\n isHovered && !disabled\n ? `${destructive ? tokens.colors.status.critical : tokens.colors.accent.primary}12`\n : \"transparent\",\n color,\n fontSize: tokens.typography.fontSize.sm,\n fontWeight: tokens.typography.fontWeight.normal,\n fontFamily: tokens.typography.fontFamily.primary,\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n borderRadius: tokens.borderRadius.sm,\n textAlign: \"left\",\n transition: tokens.animation.fast,\n opacity: disabled ? 0.5 : 1,\n outline: \"none\",\n }}\n >\n {icon && <span style={{ flexShrink: 0, display: \"flex\" }}>{icon}</span>}\n <span style={{ flex: 1 }}>{children}</span>\n {shortcut && (\n <span\n style={{\n fontSize: tokens.typography.fontSize.xxs,\n color: tokens.colors.text.tertiary,\n fontFamily: tokens.typography.fontFamily.mono,\n flexShrink: 0,\n }}\n >\n {shortcut}\n </span>\n )}\n </button>\n );\n});\n\n// ─── Menu.Divider ────────────────────────────────────────────────────────────\n\nconst MenuDivider = memo(function MenuDivider(): React.ReactElement {\n const { tokens } = useTheme();\n return (\n <div\n role=\"separator\"\n style={{\n height: \"1px\",\n backgroundColor: tokens.colors.border.muted,\n margin: `${tokens.spacing.xs} 0`,\n }}\n />\n );\n});\n\n// ─── Menu.Label ──────────────────────────────────────────────────────────────\n\nconst MenuLabel = memo(function MenuLabel({\n children,\n}: {\n children: React.ReactNode;\n}): React.ReactElement {\n const { tokens } = useTheme();\n return (\n <div\n style={{\n padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n fontSize: tokens.typography.fontSize.xxs,\n fontWeight: tokens.typography.fontWeight.bold,\n color: tokens.colors.text.tertiary,\n textTransform: \"uppercase\",\n letterSpacing: \"0.06em\",\n }}\n >\n {children}\n </div>\n );\n});\n\n// ─── Compound Export ─────────────────────────────────────────────────────────\n\ntype MenuComponent = typeof MenuRoot & {\n Item: typeof MenuItem;\n Divider: typeof MenuDivider;\n Label: typeof MenuLabel;\n};\n\nexport const Menu: MenuComponent = Object.assign(MenuRoot, {\n Item: MenuItem,\n Divider: MenuDivider,\n Label: MenuLabel,\n});\n\nexport default Popover;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Popover.js","names":[],"sources":["../../../../src/react/core/overlays/Popover.tsx"],"sourcesContent":["/*\r\n @zendir/ui - Popover & Menu Components\r\n \r\n General-purpose popover for dropdown menus, sort controls, action menus,\r\n * and contextual information. Portal-rendered with auto-positioning.\r\n \r\n Astro UX Compliance:\r\n * - Consistent with Dialog/Tooltip styling\r\n * - Focus trap for keyboard navigation\r\n * - Escape to close\r\n * - Click outside to close\r\n * - Reduced motion support\r\n \r\n @example\r\n * ```tsx\r\n * <Popover\r\n * trigger={<Button variant=\"secondary\">Sort</Button>}\r\n * placement=\"bottom-start\"\r\n * >\r\n * <Menu>\r\n * <Menu.Item onClick={...}>Sort by Time</Menu.Item>\r\n * <Menu.Item onClick={...}>Sort by Name</Menu.Item>\r\n * <Menu.Divider />\r\n * <Menu.Item onClick={...} destructive>Clear All</Menu.Item>\r\n * </Menu>\r\n * </Popover>\r\n * ```\r\n /\r\n\r\nimport React, {\r\n memo,\r\n useState,\r\n useRef,\r\n useEffect,\r\n useCallback,\r\n createContext,\r\n useContext,\r\n} from \"react\";\r\nimport { useTheme } from \"../../theme\";\r\n\r\n// ─── Popover ─────────────────────────────────────────────────────────────────\r\n\r\nexport type PopoverPlacement =\r\n \| \"top\"\r\n \| \"top-start\"\r\n \| \"top-end\"\r\n \| \"bottom\"\r\n \| \"bottom-start\"\r\n \| \"bottom-end\"\r\n \| \"left\"\r\n \| \"left-start\"\r\n \| \"left-end\"\r\n \| \"right\"\r\n \| \"right-start\"\r\n \| \"right-end\";\r\n\r\nexport interface PopoverProps {\r\n /* Trigger element /\r\n trigger: React.ReactElement;\r\n /* Popover content /\r\n children: React.ReactNode;\r\n /* Placement relative to trigger /\r\n placement?: PopoverPlacement;\r\n /* Open on hover instead of click /\r\n hover?: boolean;\r\n /* Controlled open state /\r\n open?: boolean;\r\n /* Controlled open change /\r\n onOpenChange?: (open: boolean) => void;\r\n /* Close on content click /\r\n closeOnClick?: boolean;\r\n /* Width: 'trigger' matches trigger width, number for px, 'auto' /\r\n width?: \"trigger\" \| \"auto\" \| number;\r\n /* Custom style for popover panel /\r\n style?: React.CSSProperties;\r\n}\r\n\r\nconst PopoverContext = createContext<{ close: () => void }>({\r\n close: () => {},\r\n});\r\n\r\nexport const Popover = memo(function Popover({\r\n trigger,\r\n children,\r\n placement = \"bottom-start\",\r\n hover = false,\r\n open: controlledOpen,\r\n onOpenChange,\r\n closeOnClick = true,\r\n width = \"auto\",\r\n style,\r\n}: PopoverProps): React.ReactElement {\r\n const { tokens, theme } = useTheme();\r\n const isTransparentTheme =\r\n theme === \"transparent\" \|\|\r\n theme === \"transparent-bold\" \|\|\r\n theme === \"transparent-minimal\";\r\n const [internalOpen, setInternalOpen] = useState(false);\r\n const triggerRef = useRef<HTMLDivElement>(null);\r\n const popoverRef = useRef<HTMLDivElement>(null);\r\n const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();\r\n\r\n const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\r\n\r\n const setOpen = useCallback(\r\n (val: boolean) => {\r\n if (controlledOpen === undefined) setInternalOpen(val);\r\n onOpenChange?.(val);\r\n },\r\n [controlledOpen, onOpenChange],\r\n );\r\n\r\n const close = useCallback(() => setOpen(false), [setOpen]);\r\n\r\n // Click outside\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n const handler = (e: MouseEvent) => {\r\n if (\r\n triggerRef.current &&\r\n !triggerRef.current.contains(e.target as Node) &&\r\n popoverRef.current &&\r\n !popoverRef.current.contains(e.target as Node)\r\n ) {\r\n close();\r\n }\r\n };\r\n document.addEventListener(\"mousedown\", handler);\r\n return () => document.removeEventListener(\"mousedown\", handler);\r\n }, [isOpen, close]);\r\n\r\n // Escape key + cleanup hoverTimeout on unmount\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n const handler = (e: KeyboardEvent) => {\r\n if (e.key === \"Escape\") close();\r\n };\r\n document.addEventListener(\"keydown\", handler);\r\n return () => document.removeEventListener(\"keydown\", handler);\r\n }, [isOpen, close]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n clearTimeout(hoverTimeout.current);\r\n };\r\n }, []);\r\n\r\n // Position calculation — `positioned` gates visibility so the panel is never\r\n // painted in document flow before the first RAF resolves coordinates.\r\n // Initializing with position: 'fixed' ensures that the hidden first-frame\r\n // measurement doesn't get constrained by the trigger's parent container.\r\n const [position, setPosition] = useState<React.CSSProperties>({\r\n position: \"fixed\",\r\n left: 0,\r\n top: 0,\r\n });\r\n const [positioned, setPositioned] = useState(false);\r\n\r\n // Reset visibility guard whenever the popover closes so the next open starts\r\n // hidden again rather than flashing the stale coordinates for one frame.\r\n useEffect(() => {\r\n if (!isOpen) setPositioned(false);\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n if (!isOpen \|\| !triggerRef.current) return;\r\n const gap = 8;\r\n const viewportPadding = 8;\r\n\r\n const updatePosition = () => {\r\n const rect = triggerRef.current?.getBoundingClientRect();\r\n if (!rect) return;\r\n\r\n const panelWidth =\r\n width === \"trigger\"\r\n ? rect.width\r\n : typeof width === \"number\"\r\n ? width\r\n : (popoverRef.current?.offsetWidth ?? 220);\r\n const panelHeight = popoverRef.current?.offsetHeight ?? 220;\r\n\r\n let left = rect.left;\r\n let top = rect.bottom + gap;\r\n\r\n if (placement.startsWith(\"top\")) {\r\n top = rect.top - panelHeight - gap;\r\n } else if (placement.startsWith(\"bottom\")) {\r\n top = rect.bottom + gap;\r\n } else if (placement.startsWith(\"left\")) {\r\n left = rect.left - panelWidth - gap;\r\n } else if (placement.startsWith(\"right\")) {\r\n left = rect.right + gap;\r\n }\r\n\r\n if (placement.startsWith(\"top\") \|\| placement.startsWith(\"bottom\")) {\r\n if (placement.endsWith(\"-start\")) {\r\n left = rect.left;\r\n } else if (placement.endsWith(\"-end\")) {\r\n left = rect.right - panelWidth;\r\n } else {\r\n left = rect.left + (rect.width - panelWidth) / 2;\r\n }\r\n } else {\r\n if (placement.endsWith(\"-start\")) {\r\n top = rect.top;\r\n } else if (placement.endsWith(\"-end\")) {\r\n top = rect.bottom - panelHeight;\r\n } else {\r\n top = rect.top + (rect.height - panelHeight) / 2;\r\n }\r\n }\r\n\r\n left = Math.max(\r\n viewportPadding,\r\n Math.min(left, window.innerWidth - panelWidth - viewportPadding),\r\n );\r\n top = Math.max(\r\n viewportPadding,\r\n Math.min(top, window.innerHeight - panelHeight - viewportPadding),\r\n );\r\n\r\n const pos: React.CSSProperties = {\r\n position: \"fixed\",\r\n zIndex: 9990,\r\n left,\r\n top,\r\n };\r\n\r\n if (width === \"trigger\") {\r\n pos.width = rect.width;\r\n pos.minWidth = rect.width;\r\n } else if (typeof width === \"number\") {\r\n pos.width = width;\r\n }\r\n\r\n setPosition(pos);\r\n setPositioned(true);\r\n };\r\n\r\n const raf = requestAnimationFrame(updatePosition);\r\n window.addEventListener(\"resize\", updatePosition);\r\n window.addEventListener(\"scroll\", updatePosition, true);\r\n return () => {\r\n cancelAnimationFrame(raf);\r\n window.removeEventListener(\"resize\", updatePosition);\r\n window.removeEventListener(\"scroll\", updatePosition, true);\r\n };\r\n }, [isOpen, placement, width]);\r\n\r\n const triggerProps: Record<string, (() => void) \| undefined> = {};\r\n if (hover) {\r\n triggerProps.onMouseEnter = () => {\r\n clearTimeout(hoverTimeout.current);\r\n setOpen(true);\r\n };\r\n triggerProps.onMouseLeave = () => {\r\n hoverTimeout.current = setTimeout(close, 150);\r\n };\r\n } else {\r\n triggerProps.onClick = () => setOpen(!isOpen);\r\n }\r\n\r\n const popoverHoverProps = hover\r\n ? {\r\n onMouseEnter: () => clearTimeout(hoverTimeout.current),\r\n onMouseLeave: () => {\r\n hoverTimeout.current = setTimeout(close, 150);\r\n },\r\n }\r\n : {};\r\n\r\n return (\r\n <PopoverContext.Provider value={{ close }}>\r\n <div\r\n ref={triggerRef}\r\n style={{ display: \"inline-flex\" }}\r\n aria-expanded={isOpen}\r\n aria-haspopup=\"true\"\r\n {...triggerProps}\r\n >\r\n {trigger}\r\n </div>\r\n\r\n {isOpen && (\r\n <div\r\n ref={popoverRef}\r\n role=\"dialog\"\r\n onClick={closeOnClick ? close : undefined}\r\n {...popoverHoverProps}\r\n style={{\r\n ...position,\r\n visibility: positioned ? \"visible\" : \"hidden\",\r\n backgroundColor: isTransparentTheme\r\n ? \"rgba(15, 12, 30, 0.85)\"\r\n : tokens.colors.background.elevated,\r\n border: `1px solid ${tokens.colors.border.muted}`,\r\n borderRadius: tokens.borderRadius.md,\r\n boxShadow: tokens.shadows.lg,\r\n padding: tokens.spacing.xs,\r\n maxWidth: \"min(320px, calc(100vw - 16px))\",\r\n fontFamily: tokens.typography.fontFamily.primary,\r\n animation: `zendir-popover-enter 150ms ${tokens.animation.easing.default}`,\r\n ...(isTransparentTheme\r\n ? {\r\n backdropFilter: \"blur(16px)\",\r\n WebkitBackdropFilter: \"blur(16px)\",\r\n }\r\n : {}),\r\n ...style,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n )}\r\n\r\n <style>{`\r\n @keyframes zendir-popover-enter {\r\n from { opacity: 0; transform: translateY(-4px) scale(0.98); }\r\n to { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n `}</style>\r\n </PopoverContext.Provider>\r\n );\r\n});\r\n\r\n// ─── Menu ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface MenuProps {\r\n children: React.ReactNode;\r\n style?: React.CSSProperties;\r\n}\r\n\r\nconst MenuRoot = memo(function Menu({\r\n children,\r\n style,\r\n}: MenuProps): React.ReactElement {\r\n return (\r\n <div\r\n role=\"menu\"\r\n style={{ minWidth: \"min(160px, calc(100vw - 32px))\", ...style }}\r\n >\r\n {children}\r\n </div>\r\n );\r\n});\r\n\r\n// ─── Menu.Item ───────────────────────────────────────────────────────────────\r\n\r\nexport interface MenuItemProps {\r\n /* Click handler /\r\n onClick?: () => void;\r\n /* Icon (ReactNode or IconName string) /\r\n icon?: React.ReactNode;\r\n /* Label text /\r\n children: React.ReactNode;\r\n /* Disabled state /\r\n disabled?: boolean;\r\n /* Destructive action (red text) /\r\n destructive?: boolean;\r\n /* Keyboard shortcut hint */\r\n shortcut?: string;\r\n}\r\n\r\nconst MenuItem = memo(function MenuItem({\r\n onClick,\r\n icon,\r\n children,\r\n disabled = false,\r\n destructive = false,\r\n shortcut,\r\n}: MenuItemProps): React.ReactElement {\r\n const { tokens } = useTheme();\r\n const { close } = useContext(PopoverContext);\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n const handleClick = useCallback(() => {\r\n if (disabled) return;\r\n onClick?.();\r\n close();\r\n }, [disabled, onClick, close]);\r\n\r\n const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\r\n const item = e.currentTarget;\r\n const siblings = item.parentElement?.querySelectorAll(\r\n '[role=\"menuitem\"]:not([disabled])',\r\n );\r\n if (!siblings) return;\r\n const items = Array.from(siblings) as HTMLElement[];\r\n const idx = items.indexOf(item as HTMLElement);\r\n\r\n if (e.key === \"ArrowDown\") {\r\n e.preventDefault();\r\n items[(idx + 1) % items.length]?.focus();\r\n } else if (e.key === \"ArrowUp\") {\r\n e.preventDefault();\r\n items[(idx - 1 + items.length) % items.length]?.focus();\r\n } else if (e.key === \"Home\") {\r\n e.preventDefault();\r\n items[0]?.focus();\r\n } else if (e.key === \"End\") {\r\n e.preventDefault();\r\n items[items.length - 1]?.focus();\r\n }\r\n }, []);\r\n\r\n const color = destructive\r\n ? tokens.colors.status.critical\r\n : disabled\r\n ? tokens.colors.text.tertiary\r\n : tokens.colors.text.primary;\r\n\r\n return (\r\n <button\r\n role=\"menuitem\"\r\n tabIndex={disabled ? -1 : 0}\r\n onClick={handleClick}\r\n onKeyDown={handleKeyDown}\r\n disabled={disabled}\r\n onMouseEnter={() => setIsHovered(true)}\r\n onMouseLeave={() => setIsHovered(false)}\r\n style={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacing.sm,\r\n width: \"100%\",\r\n padding: `${tokens.spacing.sm} ${tokens.spacing.sm}`,\r\n minHeight: 44,\r\n border: \"none\",\r\n background:\r\n isHovered && !disabled\r\n ? `${destructive ? tokens.colors.status.critical : tokens.colors.accent.primary}12`\r\n : \"transparent\",\r\n color,\r\n fontSize: tokens.typography.fontSize.sm,\r\n fontWeight: tokens.typography.fontWeight.normal,\r\n fontFamily: tokens.typography.fontFamily.primary,\r\n cursor: disabled ? \"not-allowed\" : \"pointer\",\r\n borderRadius: tokens.borderRadius.sm,\r\n textAlign: \"left\",\r\n transition: tokens.animation.fast,\r\n opacity: disabled ? 0.5 : 1,\r\n outline: \"none\",\r\n }}\r\n >\r\n {icon && <span style={{ flexShrink: 0, display: \"flex\" }}>{icon}</span>}\r\n <span style={{ flex: 1 }}>{children}</span>\r\n {shortcut && (\r\n <span\r\n style={{\r\n fontSize: tokens.typography.fontSize.xxs,\r\n color: tokens.colors.text.tertiary,\r\n fontFamily: tokens.typography.fontFamily.mono,\r\n flexShrink: 0,\r\n }}\r\n >\r\n {shortcut}\r\n </span>\r\n )}\r\n </button>\r\n );\r\n});\r\n\r\n// ─── Menu.Divider ────────────────────────────────────────────────────────────\r\n\r\nconst MenuDivider = memo(function MenuDivider(): React.ReactElement {\r\n const { tokens } = useTheme();\r\n return (\r\n <div\r\n role=\"separator\"\r\n style={{\r\n height: \"1px\",\r\n backgroundColor: tokens.colors.border.muted,\r\n margin: `${tokens.spacing.xs} 0`,\r\n }}\r\n />\r\n );\r\n});\r\n\r\n// ─── Menu.Label ──────────────────────────────────────────────────────────────\r\n\r\nconst MenuLabel = memo(function MenuLabel({\r\n children,\r\n}: {\r\n children: React.ReactNode;\r\n}): React.ReactElement {\r\n const { tokens } = useTheme();\r\n return (\r\n <div\r\n style={{\r\n padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\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.06em\",\r\n }}\r\n >\r\n {children}\r\n </div>\r\n );\r\n});\r\n\r\n// ─── Compound Export ─────────────────────────────────────────────────────────\r\n\r\ntype MenuComponent = typeof MenuRoot & {\r\n Item: typeof MenuItem;\r\n Divider: typeof MenuDivider;\r\n Label: typeof MenuLabel;\r\n};\r\n\r\nexport const Menu: MenuComponent = Object.assign(MenuRoot, {\r\n Item: MenuItem,\r\n Divider: MenuDivider,\r\n Label: MenuLabel,\r\n});\r\n\r\nexport default Popover;\r\n"],"mappings":"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"}