pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -13,16 +13,14 @@ const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filterHoverStyle_1 = require("./filterHoverStyle");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const FilterSidebar = ({ sidebarOptions, selected, onChange, maxVisible = 10, width = 280, variant = "minimal", containerPadding, containerHeight, 
 // headerPadding = 2,
 panelPadding = 3, clearAllButton = true, onClearAllHandler,
 // sliderMode = "native",
  }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // `gray[50]` (this file's hover fill throughout) is a pale light-mode tint that collapses to
-    // ~1.08:1 against the dark-mode canvas — see `filterHoverStyle.ts` for the fix + numbers.
-    const isDark = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main);
-    const hoverBg = (0, react_1.useMemo)(() => (0, filterHoverStyle_1.getFilterHoverBg)(theme.colors, isDark), [theme.colors, isDark]);
+    const hoverBg = (0, react_1.useMemo)(() => (0, filterHoverStyle_1.getFilterHoverBg)(theme.colors), [theme.colors]);
     const [openPrice, setOpenPrice] = (0, react_1.useState)({});
     // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
     const isControlled = selected !== undefined;
@@ -104,8 +102,8 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                 // Calculate percentages
                 const minPercent = ((currentMin - range.min) / (range.max - range.min)) * 100;
                 const maxPercent = ((currentMax - range.min) / (range.max - range.min)) * 100;
-                const primaryColor = theme.colors.red[300];
-                const secondaryColor = theme.colors.red[600];
+                const primaryColor = theme.colors.primary[300];
+                const secondaryColor = theme.colors.primary[600];
                 const primaryGlowColor = theme.colors.primary.opacity[32];
                 const thumbShadow = theme.shadows.md;
                 return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", px: 3, children: [(0, jsx_runtime_1.jsx)("style", { children: `
@@ -123,7 +121,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                         border: none;
                         cursor: pointer;
                       }
-                    ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.gray[200], borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, width: `${maxPercent - minPercent}%`, height: "6px", style: { background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})` }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${minPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "md", fontSize: "10px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "md", fontSize: "10px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] }, `tick-${p}`))), (0, jsx_runtime_1.jsx)("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
+                    ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.boxborder[200], borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, width: `${maxPercent - minPercent}%`, height: "6px", style: { background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})` }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${minPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: "lg", fontSize: "11px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: "lg", fontSize: "11px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.boxborder[500] }, `tick-${p}`))), (0, jsx_runtime_1.jsx)("input", { type: "range", "aria-label": `${section.label}: minimum`, min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
                                         const min = Math.min(Number(e.target.value), currentMax - (step || 1));
                                         const nextVal = [min, currentMax];
                                         setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
@@ -136,7 +134,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                         pointerEvents: 'none', // Allow clicks to pass through track
                                         zIndex: 3,
                                         margin: 0,
-                                    } }), (0, jsx_runtime_1.jsx)("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMax, className: "custom-range-slider", onChange: (e) => {
+                                    } }), (0, jsx_runtime_1.jsx)("input", { type: "range", "aria-label": `${section.label}: maximum`, min: range.min, max: range.max, step: step, value: currentMax, className: "custom-range-slider", onChange: (e) => {
                                         const max = Math.max(Number(e.target.value), currentMin + (step || 1));
                                         const nextVal = [currentMin, max];
                                         setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
@@ -149,20 +147,20 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                         pointerEvents: 'none', // Allow clicks to pass through track
                                         zIndex: 3,
                                         margin: 0,
-                                    } })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.gray[300], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
+                                    } })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-min-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.primary[50] : theme.colors.surfaceRaised, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-min-${section.id}-${v}`, onClick: () => {
                                                                 const min = v;
                                                                 const max = currentMax;
                                                                 const nextVal = [Math.min(min, max), Math.max(min, max)];
                                                                 setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
                                                                 setOpenPrice({});
-                                                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.gray[300], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
+                                                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.primary[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-max-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.primary[50] : theme.colors.surfaceRaised, borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-max-${section.id}-${v}`, onClick: () => {
                                                             const max = v;
                                                             const min = currentMin;
                                                             const nextVal = [Math.min(min, max), Math.max(min, max)];
                                                             setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
                                                             setOpenPrice({});
-                                                        }, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMax === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `max-${v}`))) }) }) })] })] })] }));
-            })()) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.id === "rating" ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: [4, 3, 2, 1].map((r) => ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: String(internalSelected[section.id] || "") === String(r) ? theme.colors.red[50] : "transparent", border: String(internalSelected[section.id] || "") === String(r) ? `1px solid ${theme.colors.red[200]}` : "none", _hover: { bg: hoverBg }, onClick: () => {
+                                                        }, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMax === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.primary[100], theme.colors.white, theme.colors.black) }) })) : null] }, `max-${v}`))) }) }) })] })] })] }));
+            })()) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.id === "rating" ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: [4, 3, 2, 1].map((r) => ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: String(internalSelected[section.id] || "") === String(r) ? theme.colors.primary[50] : "transparent", border: String(internalSelected[section.id] || "") === String(r) ? `1px solid ${theme.colors.primary[200]}` : "none", _hover: { bg: hoverBg }, onClick: () => {
                                 setInternalSelected((prev) => {
                                     const next = { ...prev, [section.id]: String(r) };
                                     onChange === null || onChange === void 0 ? void 0 : onChange(next);
@@ -172,13 +170,11 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                             // orange[500] on background[50] ~2.2:1, fails the 3:1 icon bar — walk the scale like
                                             // Notification's clock icon. Canvas mirrors this row's own bg ternary (red[50] when selected).
                                             const isRowSelected = String(internalSelected[section.id] || "") === String(r);
-                                            const starColor = (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, isRowSelected ? theme.colors.red[50] : theme.colors.background[50]);
+                                            const starColor = (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, isRowSelected ? theme.colors.primary[50] : theme.colors.background[50]);
                                             return Array.from({ length: 5 }, (_, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
-                                        })() }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && ((0, jsx_runtime_1.jsx)(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", 
-                        // boxborder[500], not raw gray[200]: WCAG 1.4.11 needs >=3.0 for a control
-                        // boundary against any named surface up to `muted` (lightest); gray[200] fails
-                        // there in dark mode.
-                        borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: (e) => {
+                                        })() }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && ((0, jsx_runtime_1.jsx)(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", "aria-label": `Search ${section.label}`, placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.background[50], border: "1px solid", 
+                        // NOTE: boxborder[500] not gray[200] — WCAG 1.4.11 needs >=3:1 for a control boundary; gray[200] fails in dark.
+                        borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) }, value: searchTerms[section.id] || "", onChange: (e) => {
                             const v = e.target.value;
                             setSearchTerms((prev) => ({ ...prev, [section.id]: v }));
                             if (v)
@@ -187,7 +183,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                         const filteredOptions = (expanded[section.id] ? (section.options || []) : (section.options || []).slice(0, maxVisible))
                             .filter((opt) => !section.searchable || !(searchTerms[section.id]) || opt.label.toLowerCase().includes((searchTerms[section.id] || "").toLowerCase()));
                         if (filteredOptions.length === 0 && searchTerms[section.id]) {
-                            return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, w: "full", textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], children: "No Data Found" }) }));
+                            return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, w: "full", textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No Data Found" }) }));
                         }
                         return ((section.type === "radio") || section.radio) ? ((0, jsx_runtime_1.jsx)(react_2.RadioGroup, { w: "full", value: internalSelected[section.id] || "", onChange: (val) => {
                                 setInternalSelected((prev) => {
@@ -195,28 +191,27 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                     onChange === null || onChange === void 0 ? void 0 : onChange(next);
                                     return next;
                                 });
-                            }, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: filteredOptions.map((opt) => ((0, jsx_runtime_1.jsx)(react_2.Radio, { value: opt.id, size: "sm", colorScheme: "red", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], children: opt.label }) }, opt.id))) }) })) : (filteredOptions.map((opt) => {
+                            }, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: filteredOptions.map((opt) => ((0, jsx_runtime_1.jsx)(react_2.Radio, { value: opt.id, size: "sm", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], children: opt.label }) }, opt.id))) }) })) : (filteredOptions.map((opt) => {
                             const selectedForSection = internalSelected[section.id];
                             const selectedIds = Array.isArray(selectedForSection)
                                 ? selectedForSection
                                 : [];
-                            return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: selectedIds.includes(opt.id), onChange: (e) => {
+                            return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `${section.label}: ${opt.label}`, isChecked: selectedIds.includes(opt.id), onChange: (e) => {
                                                     toggleOption(section.id, opt.id, e.target.checked);
-                                                }, size: "sm", iconSize: "0.5rem", sx: {
-                                                    '.chakra-checkbox__control': {
-                                                        width: '12px',
-                                                        height: '12px',
-                                                    },
-                                                    marginLeft: "2px",
-                                                }, color: "red" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], cursor: "pointer", onClick: () => {
+                                                }, size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], cursor: "pointer", onClick: () => {
                                                     const isChecked = selectedIds.includes(opt.id);
                                                     toggleOption(section.id, opt.id, !isChecked);
                                                 }, children: opt.label })] }), typeof opt.count === "number" && ((0, jsx_runtime_1.jsx)(react_2.Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id));
                         }));
-                    })(), (section.options && section.options.length > maxVisible) && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: theme.colors.blue[600], cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] })), children: expanded[section.id] ? "Show less" : `+ ${(section.options.length - maxVisible)} more` }))] })) })),
+                    })(), (section.options && section.options.length > maxVisible) && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", role: "button", tabIndex: 0, fontSize: "sm", fontWeight: "medium", color: theme.colors.accentText, cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] })), onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] }));
+                            }
+                        }, children: expanded[section.id] ? "Show less" : `+ ${(section.options.length - maxVisible)} more` }))] })) })),
         itemProps: {
             borderTop: "none",
-            borderBottom: `1px solid ${theme.colors.gray[100]}`,
+            borderBottom: `1px solid ${theme.colors.boxborder[200]}`,
             _last: { borderBottom: "none" }
         },
         buttonProps: {
@@ -233,9 +228,9 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                 : {
                     justifyContent: "space-between",
                     padding: 0,
-                    background: theme.colors.gray[50],
+                    background: theme.colors.background[50],
                     borderRadius: theme.radii.lg,
-                    border: `1px solid ${theme.colors.gray[200]}`,
+                    border: `1px solid ${theme.colors.boxborder[200]}`,
                     marginBottom: 6,
                 },
             // Reasserts the same hover fill via the `sx` path (belt-and-suspenders alongside
@@ -254,6 +249,6 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                 },
         },
     }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, bg: variant === "minimal" ? theme.colors.background[50] : theme.colors.gray[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? `1px solid ${theme.colors.gray[200]}` : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100], children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, bg: theme.colors.background[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? `1px solid ${theme.colors.boxborder[200]}` : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
 };
 exports.default = FilterSidebar;

package/dist/Components/FilterSidebar/filterHoverStyle.d.ts

@@ -1,11 +1,3 @@
 import type { PaletteProps } from "../../Theme/tokens/types";
-/**
- * FilterSidebar's hover fill for option rows, popover list items, and the accordion trigger.
- * `gray[50]` (a pale near-white tint in light mode) sits within ~1 lightness point of the
- * dark-mode canvas once the whole scale flips (~1.08:1 contrast) — invisible, the QA-reported
- * "checkbox hover invisible" bug. `gray[300]` clears the resting canvas (~2.3:1, a clear visible
- * cue) while staying dark enough that the existing `gray[700]`/`gray[800]` row text (tuned for a
- * near-black canvas) still reads at/above AA (~4.9:1+) on top of it — no text-color flip needed
- * here, unlike the Table row hover fix.
- */
-export declare const getFilterHoverBg: (colors: PaletteProps, isDark: boolean) => string;
+/** Shared with every selectable list row — never seed from `primary[500]` or `primary.opacity[8]`. */
+export declare const getFilterHoverBg: (colors: PaletteProps) => string;

package/dist/Components/FilterSidebar/filterHoverStyle.js

@@ -1,14 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFilterHoverBg = void 0;
-/**
- * FilterSidebar's hover fill for option rows, popover list items, and the accordion trigger.
- * `gray[50]` (a pale near-white tint in light mode) sits within ~1 lightness point of the
- * dark-mode canvas once the whole scale flips (~1.08:1 contrast) — invisible, the QA-reported
- * "checkbox hover invisible" bug. `gray[300]` clears the resting canvas (~2.3:1, a clear visible
- * cue) while staying dark enough that the existing `gray[700]`/`gray[800]` row text (tuned for a
- * near-black canvas) still reads at/above AA (~4.9:1+) on top of it — no text-color flip needed
- * here, unlike the Table row hover fix.
- */
-const getFilterHoverBg = (colors, isDark) => isDark ? colors.gray[300] : colors.gray[50];
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+/** Shared with every selectable list row — never seed from `primary[500]` or `primary.opacity[8]`. */
+const getFilterHoverBg = (colors) => (0, rowStates_1.listRowBackgrounds)(colors).active;
 exports.getFilterHoverBg = getFilterHoverBg;

package/dist/Components/Form/FormWrapper.d.ts

@@ -1,7 +1,10 @@
 import React, { ElementType } from "react";
+/** Renders an icon+label header above a bordered card — not an HTML form; no submit/validation, just a section wrapper. */
 declare const FormWrapper: ({ icon, text, children, }: {
+    /** Must be a component reference (e.g. FiUser), not a rendered element like <FiUser />. */
     icon?: ElementType;
     text?: string;
+    /** Only icon/text/children are accepted — no `...rest`, so className/style/data- and aria-attributes never reach the DOM. */
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default FormWrapper;

package/dist/Components/Form/FormWrapper.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Renders an icon+label header above a bordered card — not an HTML form; no submit/validation, just a section wrapper. */
 const FormWrapper = ({ icon, text, children, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, size: "1rem", color: colors.header[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "base", bg: colors.background[50], border: `0.075rem solid ${colors.border[500]}`, boxShadow: `0 0.063rem 0.125rem 0 ${colors.boxShadow.primary}`, p: "1.5rem", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: "1rem", color: colors.header[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontWeight: 600, fontSize: "0.75rem", lineHeight: "1", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "xl", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: colors.boxborder[200], p: "1.5rem", children: children })] }));
 };
 exports.default = FormWrapper;

package/dist/Components/Header/Header.d.ts

@@ -1,21 +1,6 @@
 import { FC } from "react";
 import type { ColorScale } from "../../Theme/tokens/types";
 import { HeaderProps } from "./HeaderProps";
-/**
- * Header's sidebar canvas (`bg`) is always dark regardless of app mode — `buildDarkPalette`
- * deliberately leaves `sidebar` unchanged ("already near-black in light mode, so it needs no
- * inversion"). But `themeColor.primary` follows whichever mode is active, so it can be either
- * light-mode-shaped (50 lightest -> 900 darkest) or dark-mode-shaped (50 darkest -> 900 lightest).
- * `accentTextOnCanvas` picks its search direction from the CANVAS's darkness, assuming that always
- * implies a dark-mode-shaped scale — true everywhere else (canvas darkness there tracks app mode),
- * false here, where the canvas never inverts but the scale still does. Walking toward 900 on a
- * light-mode-shaped scale therefore walks toward darker, not lighter, and can land near-black.
- *
- * This detects the scale's own direction from its own data (`primary[50]` vs `primary[900]`
- * luminance) rather than from the canvas or from theme-mode context, so it's correct in both app
- * modes and has no dependency on being mounted inside `PixelizeThemeProvider` (Header must keep
- * working for legacy `withTheme`-only consumers too).
- */
 export declare const pickActiveAccent: (primary: ColorScale, canvas: string) => string;
 declare const Header: FC<HeaderProps>;
 export default Header;

package/dist/Components/Header/Header.js

@@ -48,21 +48,7 @@ const desktopMenu_1 = __importDefault(require("./components/desktopMenu"));
 const mobileMenu_1 = __importDefault(require("./components/mobileMenu"));
 /** Non-text UI accent (WCAG 1.4.11, >=3:1) — the underline/highlight, not running text. */
 const ACTIVE_ACCENT_TARGET = 3;
-/**
- * Header's sidebar canvas (`bg`) is always dark regardless of app mode — `buildDarkPalette`
- * deliberately leaves `sidebar` unchanged ("already near-black in light mode, so it needs no
- * inversion"). But `themeColor.primary` follows whichever mode is active, so it can be either
- * light-mode-shaped (50 lightest -> 900 darkest) or dark-mode-shaped (50 darkest -> 900 lightest).
- * `accentTextOnCanvas` picks its search direction from the CANVAS's darkness, assuming that always
- * implies a dark-mode-shaped scale — true everywhere else (canvas darkness there tracks app mode),
- * false here, where the canvas never inverts but the scale still does. Walking toward 900 on a
- * light-mode-shaped scale therefore walks toward darker, not lighter, and can land near-black.
- *
- * This detects the scale's own direction from its own data (`primary[50]` vs `primary[900]`
- * luminance) rather than from the canvas or from theme-mode context, so it's correct in both app
- * modes and has no dependency on being mounted inside `PixelizeThemeProvider` (Header must keep
- * working for legacy `withTheme`-only consumers too).
- */
+// NOTE: sidebar canvas never inverts but primary can be either mode-shaped — direction is detected from primary's own data, not the canvas.
 const pickActiveAccent = (primary, canvas) => {
     const runsDarkToLight = (0, color_1.relativeLuminance)(primary[50]) < (0, color_1.relativeLuminance)(primary[900]);
     const order = runsDarkToLight
@@ -90,6 +76,6 @@ const Header = ({ logo, menuItems, rightSlot, active, colors, boxShadow, onMobil
     const rightSlotWithApi = react_2.default.isValidElement(rightSlot)
         ? react_2.default.cloneElement(rightSlot, { closeMobileMenu })
         : rightSlot;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: 1000, position: "sticky", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { h: Sidebar_1.HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start", children: [(0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 6, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { cursor: "pointer", children: logo }), (0, jsx_runtime_1.jsx)(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText })] }), (0, jsx_runtime_1.jsx)(react_1.Spacer, {}), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 4, display: { base: "none", md: "flex" }, children: rightSlotWithApi }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 2, display: { base: "flex", md: "none" }, children: rightSlotWithApi }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { variant: "unstyled", icon: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full", children: isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.MenuIcon, { size: 20 }) }), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen })] })] }), (0, jsx_runtime_1.jsx)(mobileMenu_1.default, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, rightSlot: rightSlotWithApi, onClose: closeMobileMenu })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: "sticky", position: "sticky", top: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { h: Sidebar_1.HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start", children: [(0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 6, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { cursor: "pointer", children: logo }), (0, jsx_runtime_1.jsx)(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText, surface: bg })] }), (0, jsx_runtime_1.jsx)(react_1.Spacer, {}), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: { base: 2, md: 4 }, children: rightSlotWithApi }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { variant: "unstyled", icon: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full", children: isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.MenuIcon, { size: 20 }) }), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen })] })] }), (0, jsx_runtime_1.jsx)(mobileMenu_1.default, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, surface: bg, onClose: closeMobileMenu })] }));
 };
 exports.default = Header;

package/dist/Components/Header/HeaderActions.d.ts

@@ -7,6 +7,10 @@ declare const HeaderActions: ({ select, edit, create, surface, }: {
         options?: OptionProp[];
         onSelectChange?: (option?: OptionProp) => void;
         selectPlaceholderText?: string;
+        /** Accessible name for the select; defaults to the placeholder text. */
+        ariaLabel?: string;
+        /** False renders the themed popup, which looks identical on Windows and macOS; a native select's list is OS-drawn. */
+        native?: boolean;
         width?: string;
         value?: string;
     };

package/dist/Components/Header/HeaderActions.js

@@ -13,20 +13,20 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const Select_1 = __importDefault(require("../Select/Select"));
 const Divider_1 = __importDefault(require("../Divider/Divider"));
 const HeaderActions = ({ select, edit, create, surface, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
     const ink = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, accentText_1.AA_NORMAL_TEXT);
     const iconInk = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, outlineRung_1.AA_NON_TEXT);
     const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
-        elements.push((0, jsx_runtime_1.jsx)(react_1.Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: (0, jsx_runtime_1.jsx)(Select_1.default, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
+        elements.push((0, jsx_runtime_1.jsx)(react_1.Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: (0, jsx_runtime_1.jsx)(Select_1.default, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, "aria-label": select.ariaLabel || select.selectPlaceholderText || "Select", native: (_c = select.native) !== null && _c !== void 0 ? _c : false, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
     }
     if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
-        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), el] }, i))) }));
 };

package/dist/Components/Header/HeaderProps.d.ts

@@ -1,27 +1,39 @@
+/** Horizontal top bar with page-link nav + submenus — for a user-avatar dropdown bar instead, use NavigationBar. */
 type SubItem = {
     label: string;
+    /** Only compared with Header's `active` to highlight — never navigates; route in `onClick`. */
     href: string;
+    /** Small badge above the label; colorScheme defaults to "blue". */
     badge?: {
         label: string;
         colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
     };
+    /** Also closes the mobile menu when tapped there. */
     onClick?: () => void;
 };
 type MenuItemProp = {
     label: string;
+    /** Only compared with Header's `active` to highlight — never navigates; route in `onClick`. */
     href?: string;
+    /** Small badge above the label; colorScheme defaults to "blue". */
     badge?: {
         label: string;
         colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
     };
+    /** Also closes the mobile menu; with `children`, fires on desktop only — mobile tap just toggles. */
     onClick?: () => void;
+    /** Opens as a hover-only dropdown on desktop (no click/keyboard trigger) — a click-toggled accordion on mobile instead. */
     children?: SubItem[];
 };
+/** Props for Header, the horizontal top bar; use NavigationBar for a user-avatar dropdown instead. */
 export type HeaderProps = {
     logo: React.ReactNode;
     menuItems: MenuItemProp[];
+    /** Mounted once, in the bar; a valid element also receives a `closeMobileMenu` prop. */
     rightSlot?: React.ReactNode;
+    /** The `href` of the item to highlight; matched by strict equality. */
     active?: string;
+    /** Overrides the sidebar-token defaults; `active` is the underline/highlight colour, not text. */
     colors?: {
         bg: string;
         color: string;
@@ -29,9 +41,12 @@ export type HeaderProps = {
         hover: string;
         hoverTextColor?: string;
     };
+    /** Overrides the default "md" shadow. */
     boxShadow?: string;
+    /** Fires after the mobile menu closes via toggle, item tap, or `closeMobileMenu`. */
     onMobileMenuClose?: () => void;
 };
+/** Internal props for Header's desktop nav row; not meant for consumers. */
 export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
     setHoveredMenu: (menu: string | null) => void;
     isActive: (href?: string) => boolean | "" | undefined;
@@ -40,8 +55,11 @@ export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
     hoverBg: string;
     color: string;
     hoverTextColor?: string;
+    /** The bar's own background — badges resolve their tint against this, never the light canvas default. */
+    surface: string;
 };
-export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg'> & {
+/** Internal props for Header's collapsible mobile menu panel; not meant for consumers. */
+export type MobileMenuProps = Pick<HeaderProps, 'menuItems'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg' | 'surface'> & {
     isOpen: boolean;
     onClose?: () => void;
 };

package/dist/Components/Header/components/desktopMenu.d.ts

@@ -1,3 +1,3 @@
 import { DesktopMenuProps } from "../HeaderProps";
-declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }: DesktopMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor, surface, }: DesktopMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default DesktopMenu;

package/dist/Components/Header/components/desktopMenu.js

@@ -5,24 +5,23 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
-const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }) => {
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
+const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor, surface, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const badgeTone = (scheme) => (0, tone_1.resolveSoftTone)(colors, (0, paletteFromTheme_1.scaleFor)(colors, scheme !== null && scheme !== void 0 ? scheme : "blue"), surface);
     return ((0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0, wrap: "wrap", padding: "0.5rem 1.5rem", children: menuItems.map((item) => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             const hasChildren = !!item.children;
             const isHovered = hoveredMenu === item.label;
             return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", onMouseEnter: () => hasChildren && setHoveredMenu(item.label), onMouseLeave: () => hasChildren && setHoveredMenu(null), children: [(0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }) : undefined, 
                         // `activeBg` is the rail's 3:1 non-text accent; label ink stays on `color`.
-                        borderBottom: `2px solid ${isActive(item.href) ? activeBg : "transparent"}`, borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: color, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }), hasChildren && ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isHovered, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "100%", bg: colors.background[50], color: colors.text[900], rounded: "md", shadow: "md", minW: "10rem", zIndex: 10, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { spacing: 1, p: 2, children: (_d = item.children) === null || _d === void 0 ? void 0 : _d.map((subItem) => {
-                                    var _a, _b, _c;
-                                    return ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", alignItems: "end", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsx)(react_1.Text
-                                                // text[800] is tuned for the background[50] canvas, not the activeBg
-                                                // fill this row switches to — onFilled picks whichever of white/black
-                                                // actually clears AA against that fill instead.
+                        borderBottom: `2px solid ${isActive(item.href) ? activeBg : "transparent"}`, borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: color, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = item.badge) === null || _a === void 0 ? void 0 : _a.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }), hasChildren && ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isHovered, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "100%", bg: colors.surfaceRaised, color: colors.text[900], rounded: "xl", shadow: "md", minW: "10rem", zIndex: 10, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { spacing: 1, p: 2, children: (_b = item.children) === null || _b === void 0 ? void 0 : _b.map((subItem) => {
+                                    var _a;
+                                    return ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(subItem.badge.colorScheme).bg, color: badgeTone(subItem.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", alignItems: "end", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = subItem.badge) === null || _a === void 0 ? void 0 : _a.label })), (0, jsx_runtime_1.jsx)(react_1.Text
+                                                // NOTE: text[800] is tuned for background[50], not activeBg — onFilled picks a clearing ink instead.
                                                 , { 
-                                                    // text[800] is tuned for the background[50] canvas, not the activeBg
-                                                    // fill this row switches to — onFilled picks whichever of white/black
-                                                    // actually clears AA against that fill instead.
+                                                    // NOTE: text[800] is tuned for background[50], not activeBg — onFilled picks a clearing ink instead.
                                                     color: isActive(subItem.href)
                                                         ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
                                                         : colors.text[800], _hover: { color: hoverTextColor }, children: subItem.label })] }) }, subItem.label));

package/dist/Components/Header/components/mobileMenu.d.ts

@@ -1,3 +1,3 @@
 import { MobileMenuProps } from "../HeaderProps";
-declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, surface, onClose, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MobileMenu;

package/dist/Components/Header/components/mobileMenu.js

@@ -7,24 +7,36 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const react_2 = __importDefault(require("react"));
 const lucide_react_1 = require("lucide-react");
-const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }) => {
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
+const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, surface, onClose, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const badgeTone = (scheme) => (0, tone_1.resolveSoftTone)(colors, (0, paletteFromTheme_1.scaleFor)(colors, scheme !== null && scheme !== void 0 ? scheme : "blue"), surface);
     const [openMenuLabel, setOpenMenuLabel] = react_2.default.useState(null);
     react_2.default.useEffect(() => {
         if (!isOpen)
             setOpenMenuLabel(null);
     }, [isOpen]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { pb: 4, display: { md: "none" }, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: 4, children: [menuItems.map((item) => {
-                        var _a, _b, _c, _d, _e;
-                        return item.children ? ((0, jsx_runtime_1.jsxs)(react_1.Box, { px: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setOpenMenuLabel((prev) => (prev === item.label ? null : item.label)), variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: item.children.some((subItem) => isActive(subItem.href))
-                                        ? activeBg
-                                        : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })), px: 2, children: (0, jsx_runtime_1.jsx)(react_1.HStack, { w: "full", justify: "space-between", align: "center", children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "bold", children: item.label })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
-                                            var _a, _b, _c;
-                                            return ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
-                                                    var _a;
-                                                    (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
-                                                    onClose === null || onClose === void 0 ? void 0 : onClose();
-                                                }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
-                                        }) }) })] }, item.label)) : ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }, item.label));
-                    }), rightSlot && (0, jsx_runtime_1.jsx)(react_1.Box, { mt: 4, children: rightSlot })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { pb: 4, display: { md: "none" }, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { spacing: 4, children: menuItems.map((item) => {
+                    var _a;
+                    return item.children ? ((0, jsx_runtime_1.jsxs)(react_1.Box, { px: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => setOpenMenuLabel((prev) => (prev === item.label ? null : item.label)), variant: "ghost", w: "full", justifyContent: "flex-start", color: item.children.some((subItem) => isActive(subItem.href))
+                                    ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                    : color, bg: item.children.some((subItem) => isActive(subItem.href))
+                                    ? activeBg
+                                    : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })), px: 2, children: (0, jsx_runtime_1.jsx)(react_1.HStack, { w: "full", justify: "space-between", align: "center", children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "bold", children: item.label })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
+                                        var _a;
+                                        return ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
+                                                var _a;
+                                                (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
+                                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                                            }, variant: "ghost", w: "full", justifyContent: "flex-start", color: isActive(subItem.href)
+                                                ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                                : color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(subItem.badge.colorScheme).bg, color: badgeTone(subItem.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = subItem.badge) === null || _a === void 0 ? void 0 : _a.label })), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
+                                    }) }) })] }, item.label)) : ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: isActive(item.href)
+                            ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                            : color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = item.badge) === null || _a === void 0 ? void 0 : _a.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }, item.label));
+                }) }) }) }));
 };
 exports.default = MobileMenu;

package/dist/Components/Input/Input/Input.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { InputProps } from "./InputProps";
-declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }: InputProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, isDisabled, disabled, }: InputProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;