pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.45

package/dist/esm/Components/Header/Header.js

@@ -9,21 +9,7 @@ import DesktopMenu from "./components/desktopMenu.js";
 import MobileMenu from "./components/mobileMenu.js";
 /** 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.
 export const pickActiveAccent = (primary, canvas) => {
     const runsDarkToLight = relativeLuminance(primary[50]) < relativeLuminance(primary[900]);
     const order = runsDarkToLight
@@ -50,6 +36,6 @@ const Header = ({ logo, menuItems, rightSlot, active, colors, boxShadow, onMobil
     const rightSlotWithApi = React.isValidElement(rightSlot)
         ? React.cloneElement(rightSlot, { closeMobileMenu })
         : rightSlot;
-    return (_jsxs(Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: 1000, position: "sticky", children: [_jsxs(Flex, { h: HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start", children: [_jsxs(HStack, { spacing: 6, align: "center", children: [_jsx(Box, { cursor: "pointer", children: logo }), _jsx(DesktopMenu, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText })] }), _jsx(Spacer, {}), _jsxs(HStack, { spacing: 3, align: "center", children: [_jsx(HStack, { spacing: 4, display: { base: "none", md: "flex" }, children: rightSlotWithApi }), _jsx(HStack, { spacing: 2, display: { base: "flex", md: "none" }, children: rightSlotWithApi }), _jsx(IconButton, { variant: "unstyled", icon: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full", children: isOpen ? _jsx(X, { size: 20 }) : _jsx(MenuIcon, { size: 20 }) }), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen })] })] }), _jsx(MobileMenu, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, rightSlot: rightSlotWithApi, onClose: closeMobileMenu })] }));
+    return (_jsxs(Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: "sticky", position: "sticky", top: 0, children: [_jsxs(Flex, { h: HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start", children: [_jsxs(HStack, { spacing: 6, align: "center", children: [_jsx(Box, { cursor: "pointer", children: logo }), _jsx(DesktopMenu, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText, surface: bg })] }), _jsx(Spacer, {}), _jsxs(HStack, { spacing: 3, align: "center", children: [_jsx(HStack, { spacing: { base: 2, md: 4 }, children: rightSlotWithApi }), _jsx(IconButton, { variant: "unstyled", icon: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full", children: isOpen ? _jsx(X, { size: 20 }) : _jsx(MenuIcon, { size: 20 }) }), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen })] })] }), _jsx(MobileMenu, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, surface: bg, onClose: closeMobileMenu })] }));
 };
 export default Header;

package/dist/esm/Components/Header/HeaderActions.js

@@ -8,20 +8,20 @@ import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outline
 import Select from "../Select/Select.js";
 import VeritcalDivider from "../Divider/Divider.js";
 const HeaderActions = ({ select, edit, create, surface, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { colors } = useCustomTheme();
     const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
     const ink = liftToContrast(colors.secondary[500], canvas, AA_NORMAL_TEXT);
     const iconInk = liftToContrast(colors.secondary[500], canvas, AA_NON_TEXT);
     const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
-        elements.push(_jsx(Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: _jsx(Select, { 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(_jsx(Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: _jsx(Select, { 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(_jsxs(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: [_jsx(SquarePen, { size: 16, color: iconInk }), _jsx(Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+        elements.push(_jsxs(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: [_jsx(SquarePen, { size: 16, color: iconInk }), _jsx(Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push(_jsxs(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: [_jsx(CirclePlus, { size: 16, color: iconInk }), _jsxs(Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+        elements.push(_jsxs(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: [_jsx(CirclePlus, { size: 16, color: iconInk }), _jsxs(Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
     return (_jsx(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(VeritcalDivider, {}), el] }, i))) }));
 };

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

@@ -3,24 +3,23 @@ import { Box, HStack, Stack, Button, Badge, Text, VStack, Collapse, } from "@cha
 import { ChevronDown } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
-const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }) => {
+import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
+import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
+const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor, surface, }) => {
     const { colors } = useCustomTheme();
+    const badgeTone = (scheme) => resolveSoftTone(colors, scaleFor(colors, scheme !== null && scheme !== void 0 ? scheme : "blue"), surface);
     return (_jsx(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 (_jsxs(Box, { position: "relative", onMouseEnter: () => hasChildren && setHoveredMenu(item.label), onMouseLeave: () => hasChildren && setHoveredMenu(null), children: [_jsx(Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? _jsx(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: _jsxs(VStack, { spacing: 0, children: [item.badge && (_jsx(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 })), _jsx(Text, { children: item.label })] }) }), hasChildren && (_jsx(Collapse, { in: isHovered, animateOpacity: true, children: _jsx(Box, { position: "absolute", top: "100%", bg: colors.background[50], color: colors.text[900], rounded: "md", shadow: "md", minW: "10rem", zIndex: 10, children: _jsx(Stack, { spacing: 1, p: 2, children: (_d = item.children) === null || _d === void 0 ? void 0 : _d.map((subItem) => {
-                                    var _a, _b, _c;
-                                    return (_jsx(Button, { onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [subItem.badge && (_jsx(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 })), _jsx(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: _jsxs(VStack, { spacing: 0, children: [item.badge && (_jsx(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 })), _jsx(Text, { children: item.label })] }) }), hasChildren && (_jsx(Collapse, { in: isHovered, animateOpacity: true, children: _jsx(Box, { position: "absolute", top: "100%", bg: colors.surfaceRaised, color: colors.text[900], rounded: "xl", shadow: "md", minW: "10rem", zIndex: 10, children: _jsx(Stack, { spacing: 1, p: 2, children: (_b = item.children) === null || _b === void 0 ? void 0 : _b.map((subItem) => {
+                                    var _a;
+                                    return (_jsx(Button, { onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [subItem.badge && (_jsx(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 })), _jsx(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)
                                                         ? onFilled(activeBg, colors.white, colors.black)
                                                         : colors.text[800], _hover: { color: hoverTextColor }, children: subItem.label })] }) }, subItem.label));

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

@@ -4,31 +4,34 @@ import React from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
-const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }) => {
+import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
+import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
+const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, surface, onClose, }) => {
     const { colors } = useCustomTheme();
+    const badgeTone = (scheme) => resolveSoftTone(colors, scaleFor(colors, scheme !== null && scheme !== void 0 ? scheme : "blue"), surface);
     const [openMenuLabel, setOpenMenuLabel] = React.useState(null);
     React.useEffect(() => {
         if (!isOpen)
             setOpenMenuLabel(null);
     }, [isOpen]);
-    return (_jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { pb: 4, display: { md: "none" }, children: _jsxs(Stack, { spacing: 4, children: [menuItems.map((item) => {
-                        var _a, _b, _c, _d, _e;
-                        return item.children ? (_jsxs(Box, { px: 2, children: [_jsx(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))
-                                        ? onFilled(activeBg, colors.white, colors.black)
-                                        : color, bg: item.children.some((subItem) => isActive(subItem.href))
-                                        ? activeBg
-                                        : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (_jsx(ChevronDown, { size: 16 })) : (_jsx(ChevronRight, { size: 16 })), px: 2, children: _jsx(HStack, { w: "full", justify: "space-between", align: "center", children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(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 })), _jsx(Text, { fontWeight: "bold", children: item.label })] }) }) }), _jsx(Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: _jsx(Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
-                                            var _a, _b, _c;
-                                            return (_jsx(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)
-                                                    ? onFilled(activeBg, colors.white, colors.black)
-                                                    : color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [subItem.badge && (_jsx(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 })), _jsxs(HStack, { spacing: 2, align: "center", children: [_jsx(Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), _jsx(Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
-                                        }) }) })] }, item.label)) : (_jsx(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)
-                                ? onFilled(activeBg, colors.white, colors.black)
-                                : color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(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 })), _jsx(Text, { children: item.label })] }) }, item.label));
-                    }), rightSlot && _jsx(Box, { mt: 4, children: rightSlot })] }) }) }));
+    return (_jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { pb: 4, display: { md: "none" }, children: _jsx(Stack, { spacing: 4, children: menuItems.map((item) => {
+                    var _a;
+                    return item.children ? (_jsxs(Box, { px: 2, children: [_jsx(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))
+                                    ? onFilled(activeBg, colors.white, colors.black)
+                                    : color, bg: item.children.some((subItem) => isActive(subItem.href))
+                                    ? activeBg
+                                    : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (_jsx(ChevronDown, { size: 16 })) : (_jsx(ChevronRight, { size: 16 })), px: 2, children: _jsx(HStack, { w: "full", justify: "space-between", align: "center", children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(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 })), _jsx(Text, { fontWeight: "bold", children: item.label })] }) }) }), _jsx(Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: _jsx(Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
+                                        var _a;
+                                        return (_jsx(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)
+                                                ? onFilled(activeBg, colors.white, colors.black)
+                                                : color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [subItem.badge && (_jsx(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 })), _jsxs(HStack, { spacing: 2, align: "center", children: [_jsx(Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), _jsx(Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
+                                    }) }) })] }, item.label)) : (_jsx(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)
+                            ? onFilled(activeBg, colors.white, colors.black)
+                            : color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(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 })), _jsx(Text, { children: item.label })] }) }, item.label));
+                }) }) }) }));
 };
 export default MobileMenu;

package/dist/esm/Components/Input/Input/Input.js

@@ -7,7 +7,8 @@ import { FIELD_RADIUS } from "../../Common/fieldStyles.js";
 import ErrorComponent from "../../Common/ErrorComponent.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-const Input = ({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }) => {
+const Input = ({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, isDisabled, disabled, }) => {
+    const isFieldDisabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled;
     const { colors } = useCustomTheme();
     const [showPassword, setShowPassword] = useState(false);
     const isPassword = type === "password";
@@ -19,7 +20,7 @@ const Input = ({ label, type, value, onChange, error, placeholder, className, in
             : colors.boxborder[500];
     const shadowPrimary = colors.boxShadow.primary;
     const shadowError = colors.boxShadow.error;
-    return (_jsxs(Box, { className: inputBoxClassName, mb: 4, children: [_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), _jsxs(Box, { position: "relative", w: "100%", overflow: "hidden", children: [_jsx(ChakraInput, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: accentTextOnCanvas(colors.secondary, colors.backgroundColor.main), pr: isPassword ? 10 : 4, _hover: {
+    return (_jsxs(Box, { className: inputBoxClassName, mb: 4, children: [_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), _jsxs(Box, { position: "relative", w: "100%", overflow: "hidden", children: [_jsx(ChakraInput, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: accentTextOnCanvas(colors.secondary, colors.backgroundColor.main), pr: isPassword ? 10 : 4, isDisabled: isFieldDisabled, _hover: {
                             borderColor: error
                                 ? colors.semantic.error[600]
                                 : value

package/dist/esm/Components/Input/PhoneNumberInput.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, forwardRef } from "react";
 import { Box, Flex, Icon, Input, Select, InputGroup, InputLeftElement, FormControl, } from "@chakra-ui/react";
 import ErrorMessage from "../Common/ErrorMessage.js";
 import HelperText from "../Common/HelperText.js";
 import { TextLabel } from "../Common/FormLabel.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const getFlagEmoji = (countryCode) => {
     if (!countryCode)
@@ -14,9 +15,10 @@ const getFlagEmoji = (countryCode) => {
 };
 const sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
 const sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
-/** Country-code-aware phone field with a flag/dial-code prefix; its `ref` prop never attaches — this is a plain function component, not `forwardRef`. */
-const PhoneNumberInput = ({ size = "md", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, ref, name, minW, maxW, ...rest }) => {
+/** Country-code-aware phone field with a flag/dial-code prefix; `ref` forwards to the number `<input>`. */
+const PhoneNumberInput = forwardRef(function PhoneNumberInput({ size = "md", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, name, minW, maxW, countrySelectAriaLabel = "Country code", ...rest }, ref) {
     const theme = useCustomTheme();
+    const ids = useFieldIds(inputId !== null && inputId !== void 0 ? inputId : id, { error, errorMessage, helperText });
     const getCountryTelCode = useCallback((countryCode) => {
         var _a;
         if (!countryCode)
@@ -58,6 +60,7 @@ const PhoneNumberInput = ({ size = "md", value, codeValueReturn = true, country,
             return;
         }
     };
-    return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { size: size, ...rest, children: [_jsxs(InputLeftElement, { width: showCountrySelect ? "3rem" : "2rem", height: "100%", children: [showCountrySelect && _jsx(_Fragment, { children: _jsxs(Select, { position: "absolute", top: "0", left: "0", height: "100%", id: selectId, width: sizeToWidth[size], opacity: 0, zIndex: 1, value: selectedCountry, onChange: handleCountryChange, size: size, pt: sizeToPt[size], iconColor: theme.colors.gray[500], children: [_jsx("option", { value: "", children: "Select Country" }), countries.map((option) => (_jsx("option", { value: option.code, children: option.country }, option.code)))] }) }), _jsx(Flex, { pl: 2, width: "100%", alignItems: "center", justifyContent: "space-between", children: selectedCountry ? (_jsx(Box, { fontSize: "1.2rem", children: getFlagEmoji(selectedCountry) })) : (_jsx(Icon, { viewBox: "0 0 24 24", boxSize: "1rem", children: _jsx("path", { fill: "currentColor", d: "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.79,14.8 16.33,14.67 16.8,14.82C18.17,15.27 19.65,15.5 21,15.5C21.55,15.5 22,15.95 22,16.5V20C22,20.55 21.55,21 21,21C10.61,21 3,13.39 3,3C3,2.45 3.45,2 4,2H7.5C8.05,2 8.5,2.45 8.5,3C8.5,4.35 8.73,5.83 9.18,7.2C9.33,7.67 9.2,8.21 8.82,8.59L6.62,10.79Z" }) })) })] }), _jsx(Input, { type: "tel", pl: showCountrySelect ? "4rem" : "2rem", value: number, id: inputId, onChange: handleNumberChange, onBlur: onBlur, onFocus: onFocus, isReadOnly: isReadOnly, name: name, size: size, height: height, ref: ref, autoComplete: autoComplete, placeholder: placeholder, disabled: !selectedCountry, isInvalid: error })] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
-};
+    return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { size: size, ...rest, children: [_jsxs(InputLeftElement, { width: showCountrySelect ? "3rem" : "2rem", height: "100%", children: [showCountrySelect && _jsx(_Fragment, { children: _jsxs(Select, { position: "absolute", top: "0", left: "0", height: "100%", id: selectId, "aria-label": countrySelectAriaLabel, width: sizeToWidth[size], opacity: 0, zIndex: 1, value: selectedCountry, onChange: handleCountryChange, size: size, pt: sizeToPt[size], iconColor: theme.colors.gray[500], children: [_jsx("option", { value: "", children: "Select Country" }), countries.map((option) => (_jsx("option", { value: option.code, children: option.country }, option.code)))] }) }), _jsx(Flex, { pl: 2, width: "100%", alignItems: "center", justifyContent: "space-between", children: selectedCountry ? (_jsx(Box, { fontSize: "1.2rem", children: getFlagEmoji(selectedCountry) })) : (_jsx(Icon, { viewBox: "0 0 24 24", boxSize: "1rem", children: _jsx("path", { fill: "currentColor", d: "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.79,14.8 16.33,14.67 16.8,14.82C18.17,15.27 19.65,15.5 21,15.5C21.55,15.5 22,15.95 22,16.5V20C22,20.55 21.55,21 21,21C10.61,21 3,13.39 3,3C3,2.45 3.45,2 4,2H7.5C8.05,2 8.5,2.45 8.5,3C8.5,4.35 8.73,5.83 9.18,7.2C9.33,7.67 9.2,8.21 8.82,8.59L6.62,10.79Z" }) })) })] }), _jsx(Input, { type: "tel", pl: showCountrySelect ? "4rem" : "2rem", value: number, id: ids.inputId, "aria-describedby": ids.describedBy, onChange: handleNumberChange, onBlur: onBlur, onFocus: onFocus, isReadOnly: isReadOnly, name: name, size: size, height: height, ref: ref, autoComplete: autoComplete, placeholder: placeholder, disabled: !selectedCountry, isInvalid: error })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage, id: ids.errorId }), helperText && !error && _jsx(HelperText, { helperText: helperText, id: ids.helperId })] }));
+});
+PhoneNumberInput.displayName = "PhoneNumberInput";
 export default PhoneNumberInput;

package/dist/esm/Components/Input/Switch/InputSwitch.js

@@ -1,22 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Switch, FormControl, FormLabel, HStack, Box, } from "@chakra-ui/react";
-import { TextLabel } from "../../Common/FormLabel.js";
-import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-/** Themed Chakra `Switch` wrapper; a caller-supplied `sx` replaces (not merges with) the built-in checked/unchecked track color. */
-export const InputSwitch = ({ switchText, switchTextPosition = "right", id, isChecked, label, isInformation, informationMessage, isRequired, size = "md", ...props }) => {
-    const theme = useCustomTheme();
-    // Read the palette directly — it is already swapped for the active mode, so pairing the rungs
-    // through useColorModeValue would adapt twice and pick the wrong rung on the dark canvas.
-    const activeColor = theme.colors.primary[500];
-    const inactiveColor = theme.colors.gray[300];
-    const sizeStyles = {
-        sm: { fontSize: "sm", spacing: 1 },
-        md: { fontSize: "md", spacing: 2 },
-        lg: { fontSize: "lg", spacing: 3 },
-    };
-    return (_jsxs(FormControl, { children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsx(Box, { display: "flex", alignItems: "center", flexGrow: 1, children: _jsxs(HStack, { spacing: sizeStyles[size].spacing, children: [switchText && switchTextPosition === "left" && (_jsx(FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer", children: switchText })), _jsx(Switch, { id: id, size: size, isChecked: isChecked, colorScheme: "blue", sx: {
-                                "span.chakra-switch__track": {
-                                    bg: isChecked ? activeColor : inactiveColor,
-                                },
-                            }, ...props }), switchText && switchTextPosition === "right" && (_jsx(FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer", children: switchText }))] }) })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import ToggleSwitch from "../../ToggleSwitch/ToggleSwitch.js";
+/** @deprecated Use `ToggleSwitch` with `label`/`fieldLabel`/`helperText`/`error` — this is a thin wrapper around it. */
+export const InputSwitch = ({ switchText, switchTextPosition = "right", id, isChecked, defaultChecked, label, isInformation, informationMessage, isRequired, size = "md", isDisabled, isReadOnly, isInvalid, helperText, errorMessage, name, value, onChange, onFocus, onBlur, colorScheme, variant, spacing, isFocusable, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...layout }) => {
+    void variant;
+    void spacing;
+    void isFocusable;
+    // NOTE: unreachable when a real caller names it; matches the pre-existing accessibility gap.
+    const naming = typeof switchText === "string"
+        ? { label: switchText, fieldLabel: label }
+        : typeof ariaLabel === "string"
+            ? { "aria-label": ariaLabel, fieldLabel: label }
+            : { fieldLabel: label };
+    const handleChange = (_checked, event) => onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    return (_jsx(Box, { ...layout, children: _jsx(ToggleSwitch, { ...naming, id: id, isChecked: isChecked, defaultChecked: defaultChecked, onChange: handleChange, size: size, labelPosition: switchTextPosition === "left" ? "start" : "end", isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage, colorScheme: colorScheme, error: isInvalid, errorMessage: errorMessage, helperText: helperText, name: name, value: value === undefined ? undefined : String(value), onFocus: onFocus, onBlur: onBlur, "aria-describedby": ariaDescribedBy }) }));
 };

package/dist/esm/Components/Input/TextInput.js

@@ -1,17 +1,90 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef } from "react";
-import { Box, FormControl, Input, InputGroup, InputLeftElement, InputRightElement, } from "@chakra-ui/react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { forwardRef, useRef, useState } from "react";
+import { Box, Flex, FormControl, Input, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Spinner, Text, useFormControlContext, useMergeRefs, } from "@chakra-ui/react";
+import { Eye, EyeOff, X } from "lucide-react";
 import { getTextInputIconWrapperSx } from "./textInputIconSize.js";
+import { useAriaRequired } from "./useAriaRequired.js";
+import { fieldAddonSx } from "./TextInput.styles.js";
 import { TextLabel } from "../Common/FormLabel.js";
-import HelperText from "../Common/HelperText.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { fieldMessageStyles, fieldMessageVisibility } from "../Common/fieldMessageStyles.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-/** Standard labelled text field — error/helper text, left/right icons; `isRequired` only draws the label asterisk, it isn't native HTML validation. */
-const TextInput = forwardRef(({ label, type = "text", id, name, onChange, onBlur, onFocus, isDisabled = false, isReadOnly = false, isRequired = false, value, placeholder = "Placeholder", width = "100%", height, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputLeftIcon, onLeftIconClick, inputGroupStyle, inputStyle, size = "md", isInformation = false, informationMessage, leftElementStyle, rightElementStyle, autoComplete, minW, maxW, ...props }, ref) => {
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+const IconSlot = ({ icon, onClick, ariaLabel, sx, color, isDisabled }) => {
+    const { colors } = useCustomTheme();
+    if (!onClick) {
+        return _jsx(Box, { as: "span", sx: sx, color: color, "aria-hidden": "true", children: icon });
+    }
+    return (_jsx(Box, { as: "button", type: "button", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled, sx: { ...sx, ...focusVisibleStyles(colors) }, color: color, p: 1, borderRadius: "md", cursor: isDisabled ? "not-allowed" : "pointer", children: icon }));
+};
+/** Standard labelled text field — label always bound (auto id), helper/error row, optional left/right icons that become real buttons when clickable. */
+const TextInput = forwardRef(({ label, type = "text", id, name, onChange, onBlur, onFocus, isDisabled = false, isReadOnly = false, isRequired = false, value, placeholder, width = "100%", height, error, errorMessage, helperText, variant = "outline", onRightIconclick, inputRightIcon, rightIconAriaLabel, inputLeftIcon, onLeftIconClick, leftIconAriaLabel, inputLeftAddon, inputRightAddon, isClearable = false, clearIconAriaLabel, showCharacterCount = false, isLoading = false, isPasswordToggleDisabled = false, inputGroupStyle, inputStyle, size = DEFAULT_CONTROL_SIZE, isInformation = false, informationMessage, leftElementStyle, rightElementStyle, autoComplete, minW, maxW, maxLength, ...props }, ref) => {
+    var _a;
     const theme = useCustomTheme();
-    const sizeKey = typeof size === "string" ? size : "md";
-    const iconScaleSx = getTextInputIconWrapperSx(sizeKey);
-    return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { style: inputGroupStyle, size: size, height: height, children: [inputLeftIcon && (_jsx(InputLeftElement, { onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none", ...leftElementStyle, height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconScaleSx, color: theme.colors.gray[500], children: inputLeftIcon }) })), _jsx(Input, { type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, ...(height != null && { height }), isInvalid: error, ref: ref, autoComplete: autoComplete, ...inputStyle, ...props }), inputRightIcon && (_jsx(InputRightElement, { onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none", ...rightElementStyle, height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconScaleSx, children: inputRightIcon }) }))] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+    const inputRef = useRef(null);
+    const [showPassword, setShowPassword] = useState(false);
+    // Inside a consumer FormControl: skip our own, inherit its id/invalid/required/disabled.
+    const parentField = useFormControlContext();
+    const hasParentFormControl = Boolean(parentField);
+    const fieldId = id !== null && id !== void 0 ? id : parentField === null || parentField === void 0 ? void 0 : parentField.id;
+    const isFieldRequired = isRequired || Boolean(parentField === null || parentField === void 0 ? void 0 : parentField.isRequired);
+    const isFieldDisabled = isDisabled || Boolean(parentField === null || parentField === void 0 ? void 0 : parentField.isDisabled);
+    const isFieldReadOnly = isReadOnly || Boolean(parentField === null || parentField === void 0 ? void 0 : parentField.isReadOnly);
+    const isFieldInvalid = (_a = error !== null && error !== void 0 ? error : parentField === null || parentField === void 0 ? void 0 : parentField.isInvalid) !== null && _a !== void 0 ? _a : false;
+    const ids = useFieldIds(fieldId, { error: isFieldInvalid, errorMessage, helperText });
+    const mergedRef = useMergeRefs(ref, useAriaRequired(isFieldRequired), inputRef);
+    const iconScaleSx = getTextInputIconWrapperSx(typeof size === "string" ? size : undefined);
+    const iconColor = theme.colors.textMuted;
+    const actionName = (fallback) => (label ? `${label}: ${fallback}` : fallback);
+    const stringValue = typeof value === "string" ? value : undefined;
+    const isPasswordField = type === "password";
+    const effectiveType = isPasswordField && showPassword ? "text" : type;
+    const clearInput = () => {
+        var _a;
+        const node = inputRef.current;
+        if (!node)
+            return;
+        // Native setter + a real "input" event, so React's controlled onChange fires as if typed.
+        const setter = (_a = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) === null || _a === void 0 ? void 0 : _a.set;
+        setter === null || setter === void 0 ? void 0 : setter.call(node, "");
+        node.dispatchEvent(new Event("input", { bubbles: true }));
+        node.focus();
+    };
+    const showClear = isClearable && !isFieldDisabled && !isFieldReadOnly && Boolean(stringValue);
+    const rightSlots = [];
+    if (inputRightIcon) {
+        rightSlots.push({
+            key: "custom",
+            icon: inputRightIcon,
+            onClick: onRightIconclick,
+            ariaLabel: rightIconAriaLabel !== null && rightIconAriaLabel !== void 0 ? rightIconAriaLabel : actionName("right icon action"),
+        });
+    }
+    if (isPasswordField && !isPasswordToggleDisabled && !inputRightIcon) {
+        rightSlots.push({
+            key: "password-toggle",
+            icon: showPassword ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 }),
+            onClick: () => setShowPassword((prev) => !prev),
+            ariaLabel: actionName(showPassword ? "Hide password" : "Show password"),
+        });
+    }
+    if (showClear) {
+        rightSlots.push({
+            key: "clear",
+            icon: _jsx(X, { size: 16 }),
+            onClick: clearInput,
+            ariaLabel: clearIconAriaLabel !== null && clearIconAriaLabel !== void 0 ? clearIconAriaLabel : actionName("Clear"),
+        });
+    }
+    const showCounter = showCharacterCount && typeof maxLength === "number" && stringValue !== undefined;
+    const counterId = showCounter ? `${ids.inputId}-count` : undefined;
+    const { showError, showHelper } = fieldMessageVisibility({ error: isFieldInvalid, errorMessage, helperText });
+    const showMessageRow = showCounter || showError || showHelper;
+    const describedBy = [ids.describedBy, counterId].filter(Boolean).join(" ") || undefined;
+    const content = (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isFieldRequired })), _jsxs(InputGroup, { style: inputGroupStyle, size: size, height: height, children: [inputLeftAddon && (_jsx(InputLeftAddon, { sx: fieldAddonSx(theme.colors), children: inputLeftAddon })), inputLeftIcon && (_jsx(InputLeftElement, { pointerEvents: onLeftIconClick ? "auto" : "none", ...leftElementStyle, height: "100%", display: "flex", alignItems: "center", children: _jsx(IconSlot, { icon: inputLeftIcon, onClick: onLeftIconClick, ariaLabel: leftIconAriaLabel !== null && leftIconAriaLabel !== void 0 ? leftIconAriaLabel : actionName("left icon action"), sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }) })), _jsx(Input, { type: effectiveType, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isFieldDisabled, isReadOnly: isFieldReadOnly, name: name, size: size, variant: variant, maxLength: maxLength, ...(height != null && { height }), isInvalid: isFieldInvalid, ref: mergedRef, autoComplete: autoComplete, "aria-busy": isLoading || undefined, ...ids.controlProps, "aria-describedby": describedBy, ...inputStyle, ...props }), (isLoading || rightSlots.length > 0) && (_jsx(InputRightElement, { pointerEvents: !isLoading && rightSlots.some((slot) => slot.onClick) ? "auto" : "none", ...rightElementStyle, height: "100%", display: "flex", alignItems: "center", justifyContent: "flex-end", width: !isLoading && rightSlots.length > 1 ? "auto" : undefined, ...(!isLoading && rightSlots.length > 1 ? { pr: 2, gap: 1 } : {}), children: isLoading ? (_jsx(Spinner, { size: "xs", color: iconColor })) : (rightSlots.map((slot) => (_jsx(IconSlot, { icon: slot.icon, onClick: slot.onClick, ariaLabel: slot.ariaLabel, sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }, slot.key)))) })), inputRightAddon && (_jsx(InputRightAddon, { sx: fieldAddonSx(theme.colors), children: inputRightAddon }))] }), showMessageRow && (_jsxs(Flex, { justify: "space-between", align: "flex-start", gap: 2, children: [_jsx(FieldMessage, { error: isFieldInvalid, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId }), showCounter && stringValue !== undefined && (_jsxs(Text, { id: counterId, flexShrink: 0, ...fieldMessageStyles(theme.colors), color: isFieldInvalid ? theme.colors.semanticText.error : theme.colors.textMuted, children: [stringValue.length, "/", maxLength] }))] }))] }));
+    return hasParentFormControl ? (_jsx(Box, { w: width, minW: minW, maxW: maxW, children: content })) : (_jsx(FormControl, { w: width, minW: minW, maxW: maxW, children: content }));
 });
 TextInput.displayName = "TextInput";
 export default React.memo(TextInput);

package/dist/esm/Components/Input/TextInput.styles.js

@@ -1,100 +1,54 @@
-import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { controlSizeStyles, fieldControlStyles, FIELD_BORDER_WIDTH } from "../Common/fieldStyles.js";
+import { CONTROL_SIZE_NAMES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
+/** Field look shared by Input, Textarea and NumberInput; `_invalid` also clears Chakra's stock invalid shadow. */
+export const fieldPartStyles = (colors) => {
+    const error = colors.semanticText.error;
+    return {
+        ...fieldControlStyles(colors),
+        _invalid: {
+            borderColor: error,
+            boxShadow: "none",
+            _hover: { borderColor: error },
+            _focusVisible: { borderColor: error, ...fieldFocusVisible(colors) },
+        },
+    };
+};
+export const fieldFilledStyles = (colors) => ({
+    ...fieldPartStyles(colors),
+    bg: colors.background[100],
+    borderColor: "transparent",
+    _hover: { bg: colors.background[100], borderColor: "transparent" },
+});
+export const fieldFlushedStyles = (colors) => ({
+    ...fieldPartStyles(colors),
+    bg: "transparent",
+    borderWidth: 0,
+    borderBottomWidth: FIELD_BORDER_WIDTH,
+    borderRadius: 0,
+});
+/** Look for `InputLeftAddon`/`InputRightAddon` — Chakra ships no token-aware default for these parts. */
+export const fieldAddonSx = (colors) => ({
+    bg: colors.background[100],
+    borderColor: colors.boxborder[500],
+    color: colors.textMuted,
+});
+export const fieldSizes = (part) => Object.fromEntries(CONTROL_SIZE_NAMES.map((size) => [size, { [part]: controlSizeStyles(size) }]));
 export const Input = {
-    baseStyle: ({ theme }) => ({
+    baseStyle: {
         field: {
-            fontWeight: 500,
-            fontSize: "0.875rem",
-            letterSpacing: "0.044rem",
-            pt: "0.813rem",
-            pb: "0.813rem",
             display: "flex",
             alignItems: "center",
-            borderRadius: "lg",
-            transition: "border-color 0.2s, box-shadow 0.2s",
-            // Every variant inherits the hint ink; only `outline` used to set it.
-            _placeholder: {
-                color: placeholderInk(theme.colors),
-            },
-        },
-    }),
-    sizes: {
-        sm: {
-            field: {
-                h: "2rem",
-                fontSize: "0.8125rem",
-            },
-        },
-        md: {
-            field: {
-                h: "2.75rem",
-                fontSize: "0.875rem",
-            },
-        },
-        lg: {
-            field: {
-                h: "3.25rem",
-                fontSize: "0.9375rem",
-            },
         },
     },
+    sizes: Object.fromEntries(CONTROL_SIZE_NAMES.map((size) => [size, { field: controlSizeStyles(size), addon: controlSizeStyles(size) }])),
     variants: {
-        outline: (props) => {
-            const { theme } = props;
-            const errorColor = theme.colors.semanticText.error;
-            const borderColor = theme.colors.boxborder[500];
-            const shadowPrimary = theme.colors.boxShadow.primary;
-            const shadowError = theme.colors.boxShadow.error;
-            const primary = theme.colors.primary[500];
-            return {
-                field: {
-                    bg: theme.colors.background[50],
-                    border: "0.063rem solid",
-                    borderColor,
-                    _placeholder: {
-                        color: placeholderInk(theme.colors),
-                    },
-                    _hover: {
-                        borderColor: primary,
-                        // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                        outline: "0"
-                    },
-                    _focus: {
-                        borderColor: primary,
-                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                        outline: "0"
-                    },
-                    _invalid: {
-                        borderColor: errorColor,
-                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        _hover: {
-                            borderColor: errorColor,
-                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                            outline: "0"
-                        },
-                        _focus: {
-                            borderColor: errorColor,
-                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                            outline: "0"
-                        },
-                    },
-                    _readOnly: {
-                        boxShadow: 'inherit',
-                    },
-                    _disabled: {
-                        bg: theme.colors.background[100],
-                        opacity: 1,
-                        cursor: "not-allowed",
-                        _hover: {
-                            border: "0.063rem solid",
-                            borderColor,
-                        },
-                    },
-                },
-            };
-        },
+        outline: ({ theme }) => ({ field: fieldPartStyles(theme.colors) }),
+        filled: ({ theme }) => ({ field: fieldFilledStyles(theme.colors) }),
+        flushed: ({ theme }) => ({ field: fieldFlushedStyles(theme.colors) }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: DEFAULT_CONTROL_SIZE,
     },
 };

package/dist/esm/Components/Input/textInputIconSize.js

@@ -1,24 +1,9 @@
-/** Pixels: aligned with `Input` field density (Chakra `sizes.6`–`12` and typical Lucide use). */
-const TEXT_INPUT_ICON_PX = {
-    xs: 14,
-    sm: 16,
-    md: 18,
-    lg: 20,
-    xl: 24,
-};
-/**
- * Returns icon target width/height in px for a Chakra `Input` / `InputGroup` `size`.
- */
+import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE, isControlSize, } from "../../Theme/tokens/primitives/controlSizes.js";
+/** Icon px for a field size, from the shared control scale; unknown sizes fall back to the default size. */
 export function getTextInputIconSizePx(size) {
-    var _a;
-    if (!size)
-        return TEXT_INPUT_ICON_PX.md;
-    return (_a = TEXT_INPUT_ICON_PX[size]) !== null && _a !== void 0 ? _a : TEXT_INPUT_ICON_PX.md;
+    return CONTROL_SIZES[isControlSize(size) ? size : DEFAULT_CONTROL_SIZE].iconSize;
 }
-/**
- * Scales SVG icons in the icon slot (e.g. Lucide) to match field size; plain `fontSize` does not
- * affect them because they set explicit width/height.
- */
+/** Scales SVG icons (e.g. Lucide, which set explicit width/height) in an icon slot to the field size. */
 export function getTextInputIconWrapperSx(size) {
     const px = getTextInputIconSizePx(size);
     return {
@@ -27,7 +12,6 @@ export function getTextInputIconWrapperSx(size) {
         justifyContent: "center",
         lineHeight: 0,
         flexShrink: 0,
-        // Override Lucide/inline width on SVG; cover direct or nested (e.g. one wrapper) icons
         "& > svg, & > * svg, & svg": {
             width: `${px}px !important`,
             height: `${px}px !important`,

package/dist/esm/Components/Input/useAriaRequired.js

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+/** Sets `aria-required` on a Chakra field without native `required`; Chakra's useFormControl overwrites the prop. */
+export const useAriaRequired = (isRequired) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        if (isRequired)
+            node.setAttribute("aria-required", "true");
+        else
+            node.removeAttribute("aria-required");
+    }, [isRequired]);
+    return ref;
+};