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

package/dist/Components/Input/PhoneNumberInput.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
 const FormLabel_1 = require("../Common/FormLabel");
+const useFieldIds_1 = require("../Common/useFieldIds");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const getFlagEmoji = (countryCode) => {
     if (!countryCode)
@@ -19,9 +20,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 = (0, react_1.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 = (0, useCustomTheme_1.useCustomTheme)();
+    const ids = (0, useFieldIds_1.useFieldIds)(inputId !== null && inputId !== void 0 ? inputId : id, { error, errorMessage, helperText });
     const getCountryTelCode = (0, react_1.useCallback)((countryCode) => {
         var _a;
         if (!countryCode)
@@ -63,6 +65,7 @@ const PhoneNumberInput = ({ size = "md", value, codeValueReturn = true, country,
             return;
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { w: width, minW: minW, maxW: maxW, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: size, ...rest, children: [(0, jsx_runtime_1.jsxs)(react_2.InputLeftElement, { width: showCountrySelect ? "3rem" : "2rem", height: "100%", children: [showCountrySelect && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select Country" }), countries.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.code, children: option.country }, option.code)))] }) }), (0, jsx_runtime_1.jsx)(react_2.Flex, { pl: 2, width: "100%", alignItems: "center", justifyContent: "space-between", children: selectedCountry ? ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "1.2rem", children: getFlagEmoji(selectedCountry) })) : ((0, jsx_runtime_1.jsx)(react_2.Icon, { viewBox: "0 0 24 24", boxSize: "1rem", children: (0, jsx_runtime_1.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" }) })) })] }), (0, jsx_runtime_1.jsx)(react_2.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 && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
-};
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { w: width, minW: minW, maxW: maxW, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: size, ...rest, children: [(0, jsx_runtime_1.jsxs)(react_2.InputLeftElement, { width: showCountrySelect ? "3rem" : "2rem", height: "100%", children: [showCountrySelect && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select Country" }), countries.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.code, children: option.country }, option.code)))] }) }), (0, jsx_runtime_1.jsx)(react_2.Flex, { pl: 2, width: "100%", alignItems: "center", justifyContent: "space-between", children: selectedCountry ? ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "1.2rem", children: getFlagEmoji(selectedCountry) })) : ((0, jsx_runtime_1.jsx)(react_2.Icon, { viewBox: "0 0 24 24", boxSize: "1rem", children: (0, jsx_runtime_1.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" }) })) })] }), (0, jsx_runtime_1.jsx)(react_2.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 && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage, id: ids.errorId }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText, id: ids.helperId })] }));
+});
+PhoneNumberInput.displayName = "PhoneNumberInput";
 exports.default = PhoneNumberInput;

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

@@ -8,6 +8,7 @@ export type CountryOption = {
 /** The number field stays isDisabled until a country is chosen (via the select or the country prop) — with neither, typing silently does nothing. */
 export type PhoneNumberInputProps = {
     label?: string;
+    /** Falls back to an auto-generated id (shared with `inputId` when that's omitted too), so the label is always bound. */
     id?: string;
     size?: string;
     value?: string;
@@ -16,6 +17,7 @@ export type PhoneNumberInputProps = {
     placeholder?: string;
     onChange: (value: string) => void;
     countries: CountryOption[];
+    /** The number `<input>`'s id; the label binds to this when given, else to `id`, else to an auto-generated id. */
     inputId?: string;
     selectId?: string;
     name?: string;
@@ -28,12 +30,12 @@ export type PhoneNumberInputProps = {
     onBlur?: () => void;
     onFocus?: () => void;
     isReadOnly?: boolean;
-    /** Typed here but PhoneNumberInput is a plain function component, not forwardRef — passing ref never attaches; ref.current stays null. */
-    ref?: React.Ref<HTMLInputElement>;
     autoComplete?: string;
     height?: string;
     width?: string;
     minW?: string;
     maxW?: string;
     showCountrySelect?: boolean;
+    /** Accessible name for the country-code select; defaults to "Country code". */
+    countrySelectAriaLabel?: string;
 };

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

@@ -1,6 +1,7 @@
-import { SwitchProps } from "@chakra-ui/react";
-/** Extends SwitchProps, so a caller-supplied sx spreads in last and silently replaces the built-in checked/unchecked track color. */
-export interface ThemedSwitchProps extends SwitchProps {
+import { type SwitchProps } from "@chakra-ui/react";
+import type { ToggleSwitchColorScheme } from "../../ToggleSwitch/ToggleSwitchProps";
+/** @deprecated Use `ToggleSwitch` — InputSwitch now renders it; Chakra-only style props are ignored. */
+export interface ThemedSwitchProps extends Omit<SwitchProps, "colorScheme" | "variant" | "spacing" | "isFocusable"> {
     switchText?: string;
     switchTextPosition?: "left" | "right";
     isInformation?: boolean;
@@ -8,6 +9,16 @@ export interface ThemedSwitchProps extends SwitchProps {
     isRequired?: boolean;
     label?: string;
     size?: "sm" | "md" | "lg";
+    helperText?: string;
+    errorMessage?: string;
+    /** Fill colour when on; now actually applied (previously silently ignored). */
+    colorScheme?: ToggleSwitchColorScheme;
+    /** @deprecated Never did anything — neither this theme nor the hand-rolled ToggleSwitch has variants. */
+    variant?: SwitchProps["variant"];
+    /** @deprecated Never did anything — ToggleSwitch's label gap is a fixed design token. */
+    spacing?: SwitchProps["spacing"];
+    /** @deprecated Never did anything — use `isReadOnly` for a focusable, non-interactive switch. */
+    isFocusable?: boolean;
 }
-/** Themed Chakra `Switch` wrapper; a caller-supplied `sx` replaces (not merges with) the built-in checked/unchecked track color. */
-export declare const InputSwitch: ({ switchText, switchTextPosition, id, isChecked, label, isInformation, informationMessage, isRequired, size, ...props }: ThemedSwitchProps) => import("react/jsx-runtime").JSX.Element;
+/** @deprecated Use `ToggleSwitch` with `label`/`fieldLabel`/`helperText`/`error` — this is a thin wrapper around it. */
+export declare const InputSwitch: ({ switchText, switchTextPosition, id, isChecked, defaultChecked, label, isInformation, informationMessage, isRequired, size, isDisabled, isReadOnly, isInvalid, helperText, errorMessage, name, value, onChange, onFocus, onBlur, colorScheme, variant, spacing, isFocusable, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...layout }: ThemedSwitchProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +1,24 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputSwitch = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-const FormLabel_1 = require("../../Common/FormLabel");
-const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-/** Themed Chakra `Switch` wrapper; a caller-supplied `sx` replaces (not merges with) the built-in checked/unchecked track color. */
-const InputSwitch = ({ switchText, switchTextPosition = "right", id, isChecked, label, isInformation, informationMessage, isRequired, size = "md", ...props }) => {
-    const theme = (0, useCustomTheme_1.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 ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexGrow: 1, children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: sizeStyles[size].spacing, children: [switchText && switchTextPosition === "left" && ((0, jsx_runtime_1.jsx)(react_1.FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer", children: switchText })), (0, jsx_runtime_1.jsx)(react_1.Switch, { id: id, size: size, isChecked: isChecked, colorScheme: "blue", sx: {
-                                "span.chakra-switch__track": {
-                                    bg: isChecked ? activeColor : inactiveColor,
-                                },
-                            }, ...props }), switchText && switchTextPosition === "right" && ((0, jsx_runtime_1.jsx)(react_1.FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer", children: switchText }))] }) })] }));
+const ToggleSwitch_1 = __importDefault(require("../../ToggleSwitch/ToggleSwitch"));
+/** @deprecated Use `ToggleSwitch` with `label`/`fieldLabel`/`helperText`/`error` — this is a thin wrapper around it. */
+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 ((0, jsx_runtime_1.jsx)(react_1.Box, { ...layout, children: (0, jsx_runtime_1.jsx)(ToggleSwitch_1.default, { ...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 }) }));
 };
 exports.InputSwitch = InputSwitch;

package/dist/Components/Input/TextInput.js

@@ -39,17 +39,90 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
 const textInputIconSize_1 = require("./textInputIconSize");
+const useAriaRequired_1 = require("./useAriaRequired");
+const TextInput_styles_1 = require("./TextInput.styles");
 const FormLabel_1 = require("../Common/FormLabel");
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const fieldMessageStyles_1 = require("../Common/fieldMessageStyles");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-/** Standard labelled text field — error/helper text, left/right icons; `isRequired` only draws the label asterisk, it isn't native HTML validation. */
-const TextInput = (0, react_1.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) => {
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const IconSlot = ({ icon, onClick, ariaLabel, sx, color, isDisabled }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (!onClick) {
+        return (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: sx, color: color, "aria-hidden": "true", children: icon });
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled, sx: { ...sx, ...(0, focusRing_styles_1.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 = (0, react_1.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 = controlSizes_1.DEFAULT_CONTROL_SIZE, isInformation = false, informationMessage, leftElementStyle, rightElementStyle, autoComplete, minW, maxW, maxLength, ...props }, ref) => {
+    var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const sizeKey = typeof size === "string" ? size : "md";
-    const iconScaleSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { w: width, minW: minW, maxW: maxW, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { style: inputGroupStyle, size: size, height: height, children: [inputLeftIcon && ((0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none", ...leftElementStyle, height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconScaleSx, color: theme.colors.gray[500], children: inputLeftIcon }) })), (0, jsx_runtime_1.jsx)(react_2.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 && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none", ...rightElementStyle, height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconScaleSx, children: inputRightIcon }) }))] }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+    const inputRef = (0, react_1.useRef)(null);
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    // Inside a consumer FormControl: skip our own, inherit its id/invalid/required/disabled.
+    const parentField = (0, react_2.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 = (0, useFieldIds_1.useFieldIds)(fieldId, { error: isFieldInvalid, errorMessage, helperText });
+    const mergedRef = (0, react_2.useMergeRefs)(ref, (0, useAriaRequired_1.useAriaRequired)(isFieldRequired), inputRef);
+    const iconScaleSx = (0, textInputIconSize_1.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 ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 16 }),
+            onClick: () => setShowPassword((prev) => !prev),
+            ariaLabel: actionName(showPassword ? "Hide password" : "Show password"),
+        });
+    }
+    if (showClear) {
+        rightSlots.push({
+            key: "clear",
+            icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 } = (0, fieldMessageStyles_1.fieldMessageVisibility)({ error: isFieldInvalid, errorMessage, helperText });
+    const showMessageRow = showCounter || showError || showHelper;
+    const describedBy = [ids.describedBy, counterId].filter(Boolean).join(" ") || undefined;
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isFieldRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { style: inputGroupStyle, size: size, height: height, children: [inputLeftAddon && ((0, jsx_runtime_1.jsx)(react_2.InputLeftAddon, { sx: (0, TextInput_styles_1.fieldAddonSx)(theme.colors), children: inputLeftAddon })), inputLeftIcon && ((0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: onLeftIconClick ? "auto" : "none", ...leftElementStyle, height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(IconSlot, { icon: inputLeftIcon, onClick: onLeftIconClick, ariaLabel: leftIconAriaLabel !== null && leftIconAriaLabel !== void 0 ? leftIconAriaLabel : actionName("left icon action"), sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }) })), (0, jsx_runtime_1.jsx)(react_2.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) && ((0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", color: iconColor })) : (rightSlots.map((slot) => ((0, jsx_runtime_1.jsx)(IconSlot, { icon: slot.icon, onClick: slot.onClick, ariaLabel: slot.ariaLabel, sx: iconScaleSx, color: iconColor, isDisabled: isFieldDisabled }, slot.key)))) })), inputRightAddon && ((0, jsx_runtime_1.jsx)(react_2.InputRightAddon, { sx: (0, TextInput_styles_1.fieldAddonSx)(theme.colors), children: inputRightAddon }))] }), showMessageRow && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "flex-start", gap: 2, children: [(0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: isFieldInvalid, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId }), showCounter && stringValue !== undefined && ((0, jsx_runtime_1.jsxs)(react_2.Text, { id: counterId, flexShrink: 0, ...(0, fieldMessageStyles_1.fieldMessageStyles)(theme.colors), color: isFieldInvalid ? theme.colors.semanticText.error : theme.colors.textMuted, children: [stringValue.length, "/", maxLength] }))] }))] }));
+    return hasParentFormControl ? ((0, jsx_runtime_1.jsx)(react_2.Box, { w: width, minW: minW, maxW: maxW, children: content })) : ((0, jsx_runtime_1.jsx)(react_2.FormControl, { w: width, minW: minW, maxW: maxW, children: content }));
 });
 TextInput.displayName = "TextInput";
 exports.default = react_1.default.memo(TextInput);

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

@@ -1,2 +1,19 @@
-import { ComponentStyleConfig } from "@chakra-ui/react";
+import type { ComponentStyleConfig, SystemStyleObject } from "@chakra-ui/react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+/** Field look shared by Input, Textarea and NumberInput; `_invalid` also clears Chakra's stock invalid shadow. */
+export declare const fieldPartStyles: (colors: PaletteProps) => SystemStyleObject;
+export declare const fieldFilledStyles: (colors: PaletteProps) => SystemStyleObject;
+export declare const fieldFlushedStyles: (colors: PaletteProps) => SystemStyleObject;
+/** Look for `InputLeftAddon`/`InputRightAddon` — Chakra ships no token-aware default for these parts. */
+export declare const fieldAddonSx: (colors: PaletteProps) => SystemStyleObject;
+export declare const fieldSizes: <Part extends string>(part: Part) => {
+    [k: string]: {
+        [x: string]: {
+            h: string;
+            minH: string;
+            fontSize: string;
+            px: string;
+        };
+    };
+};
 export declare const Input: ComponentStyleConfig;

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

@@ -1,103 +1,62 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+exports.Input = exports.fieldSizes = exports.fieldAddonSx = exports.fieldFlushedStyles = exports.fieldFilledStyles = exports.fieldPartStyles = void 0;
+const fieldStyles_1 = require("../Common/fieldStyles");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+/** Field look shared by Input, Textarea and NumberInput; `_invalid` also clears Chakra's stock invalid shadow. */
+const fieldPartStyles = (colors) => {
+    const error = colors.semanticText.error;
+    return {
+        ...(0, fieldStyles_1.fieldControlStyles)(colors),
+        _invalid: {
+            borderColor: error,
+            boxShadow: "none",
+            _hover: { borderColor: error },
+            _focusVisible: { borderColor: error, ...(0, focusRing_styles_1.focusVisibleRing)(colors) },
+        },
+    };
+};
+exports.fieldPartStyles = fieldPartStyles;
+const fieldFilledStyles = (colors) => ({
+    ...(0, exports.fieldPartStyles)(colors),
+    bg: colors.background[100],
+    borderColor: "transparent",
+    _hover: { bg: colors.background[100], borderColor: "transparent" },
+});
+exports.fieldFilledStyles = fieldFilledStyles;
+const fieldFlushedStyles = (colors) => ({
+    ...(0, exports.fieldPartStyles)(colors),
+    bg: "transparent",
+    borderWidth: 0,
+    borderBottomWidth: fieldStyles_1.FIELD_BORDER_WIDTH,
+    borderRadius: 0,
+});
+exports.fieldFlushedStyles = fieldFlushedStyles;
+/** Look for `InputLeftAddon`/`InputRightAddon` — Chakra ships no token-aware default for these parts. */
+const fieldAddonSx = (colors) => ({
+    bg: colors.background[100],
+    borderColor: colors.boxborder[500],
+    color: colors.textMuted,
+});
+exports.fieldAddonSx = fieldAddonSx;
+const fieldSizes = (part) => Object.fromEntries(controlSizes_1.CONTROL_SIZE_NAMES.map((size) => [size, { [part]: (0, fieldStyles_1.controlSizeStyles)(size) }]));
+exports.fieldSizes = fieldSizes;
 exports.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: (0, placeholderInk_1.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(controlSizes_1.CONTROL_SIZE_NAMES.map((size) => [size, { field: (0, fieldStyles_1.controlSizeStyles)(size), addon: (0, fieldStyles_1.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: (0, placeholderInk_1.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: (0, exports.fieldPartStyles)(theme.colors) }),
+        filled: ({ theme }) => ({ field: (0, exports.fieldFilledStyles)(theme.colors) }),
+        flushed: ({ theme }) => ({ field: (0, exports.fieldFlushedStyles)(theme.colors) }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: controlSizes_1.DEFAULT_CONTROL_SIZE,
     },
 };

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

@@ -1,26 +1,61 @@
-import { InputProps } from "@chakra-ui/react";
-import type { ReactNode } from "react";
-/** The library's primary single-line text field; type="password" has no built-in show/hide toggle — compose one via inputRightIcon + onRightIconclick. */
-export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "height" | "errorBorderColor" | "size" | "onKeyDown" | "onKeyUp" | "onMouseEnter" | "onMouseLeave"> & {
+import { InputProps, SystemProps } from "@chakra-ui/react";
+import type { CSSProperties, ReactNode } from "react";
+/** The library's primary single-line text field (default size `sm`, 32px; no default placeholder). `type="password"` auto-renders a show/hide toggle unless `inputRightIcon` is set or `isPasswordToggleDisabled` is true. Inside a consumer's own `FormControl`, it detects the ancestor and skips rendering its own, inheriting id/invalid/required/disabled from it. */
+export type TextInputProps = Omit<InputProps, "id" | "name" | "minW" | "maxW" | "autoComplete" | "ref" | "isInvalid"> & {
     label?: string;
-    /** Omit id and the label renders as a plain span, unlabelled — same as InputTextArea. isRequired only draws an asterisk, never sets required/aria-required. */
+    /** Optional — an id is generated when omitted, so the label is always bound. `isRequired` sets `aria-required`, not native `required`. */
     id?: string;
     name?: string;
+    /** Marks the input invalid (error border + `aria-invalid`) and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Shown while `error` is true. Omitting it renders no message and still hides `helperText`. */
     errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
     helperText?: string;
+    /** Chakra field look: `"outline"` (default), `"filled"` (tinted, borderless until focus) or `"flushed"` (bottom border only). */
+    variant?: "outline" | "filled" | "flushed";
+    /** When set, the right icon renders as a real, focusable `<button>`. */
     onRightIconclick?: () => void;
+    /** Decorative (`aria-hidden`) unless `onRightIconclick` is set. Takes priority over the automatic password toggle. */
     inputRightIcon?: ReactNode;
+    /** Accessible name for the clickable right icon, e.g. "Show password". */
+    rightIconAriaLabel?: string;
+    /** When set, the left icon renders as a real, focusable `<button>`. */
     onLeftIconClick?: () => void;
+    /** Decorative (`aria-hidden`) unless `onLeftIconClick` is set. */
     inputLeftIcon?: ReactNode;
-    inputStyle?: object;
-    inputGroupStyle?: object;
+    /** Accessible name for the clickable left icon. */
+    leftIconAriaLabel?: string;
+    /** Non-interactive segment attached outside the field's left edge, e.g. a protocol like "https://". */
+    inputLeftAddon?: ReactNode;
+    /** Non-interactive segment attached outside the field's right edge, e.g. a unit like "kg". */
+    inputRightAddon?: ReactNode;
+    /** Shows a clear (x) button once there is a value; requires a controlled string `value` and fires `onChange` with `""`. */
+    isClearable?: boolean;
+    /** Accessible name for the clear button; defaults to "Clear" (or "<label>: Clear"). */
+    clearIconAriaLabel?: string;
+    /** Shows "length/maxLength" under the field; needs both `maxLength` and a controlled string `value`. */
+    showCharacterCount?: boolean;
+    /** Shows a spinner in place of the right icon(s) and sets `aria-busy`; does not itself disable the field. */
+    isLoading?: boolean;
+    /** Opts out of the automatic show/hide button that `type="password"` renders when no `inputRightIcon` is set. */
+    isPasswordToggleDisabled?: boolean;
+    /** Chakra style props spread onto the `<input>`; rest props spread after and win. */
+    inputStyle?: SystemProps;
+    /** Plain CSS `style` object for the InputGroup wrapper, not Chakra style props. */
+    inputGroupStyle?: CSSProperties;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. Independent of `error`/`helperText` — it lives beside the label, not in the message row below the field. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
-    leftElementStyle?: object;
-    rightElementStyle?: object;
+    /** Chakra style props for the left icon slot; its height, display and alignItems are always overridden. */
+    leftElementStyle?: SystemProps;
+    /** Chakra style props for the right icon slot; its height, display and alignItems are always overridden. */
+    rightElementStyle?: SystemProps;
     ref?: React.Ref<HTMLInputElement>;
     autoComplete?: string;
+    /** Applied to the whole field wrapper, not just the `<input>`. */
     minW?: string;
+    /** Applied to the whole field wrapper, not just the `<input>`. */
     maxW?: string;
 };

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

@@ -1,10 +1,5 @@
 import type { SystemStyleObject } from "@chakra-ui/styled-system";
-/**
- * Returns icon target width/height in px for a Chakra `Input` / `InputGroup` `size`.
- */
+/** Icon px for a field size, from the shared control scale; unknown sizes fall back to the default size. */
 export declare function getTextInputIconSizePx(size: string | undefined): number;
-/**
- * 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 declare function getTextInputIconWrapperSx(size: string | undefined): SystemStyleObject;

package/dist/Components/Input/textInputIconSize.js

@@ -2,27 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTextInputIconSizePx = getTextInputIconSizePx;
 exports.getTextInputIconWrapperSx = getTextInputIconWrapperSx;
-/** 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`.
- */
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+/** Icon px for a field size, from the shared control scale; unknown sizes fall back to the default size. */
 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 controlSizes_1.CONTROL_SIZES[(0, controlSizes_1.isControlSize)(size) ? size : controlSizes_1.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. */
 function getTextInputIconWrapperSx(size) {
     const px = getTextInputIconSizePx(size);
     return {
@@ -31,7 +16,6 @@ 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/Components/Input/useAriaRequired.d.ts

@@ -0,0 +1,2 @@
+/** Sets `aria-required` on a Chakra field without native `required`; Chakra's useFormControl overwrites the prop. */
+export declare const useAriaRequired: <T extends HTMLElement>(isRequired: boolean) => import("react").RefObject<T>;

package/dist/Components/Input/useAriaRequired.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAriaRequired = void 0;
+const react_1 = require("react");
+/** Sets `aria-required` on a Chakra field without native `required`; Chakra's useFormControl overwrites the prop. */
+const useAriaRequired = (isRequired) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        if (isRequired)
+            node.setAttribute("aria-required", "true");
+        else
+            node.removeAttribute("aria-required");
+    }, [isRequired]);
+    return ref;
+};
+exports.useAriaRequired = useAriaRequired;

package/dist/Components/InputTextArea/InputTextArea.d.ts

@@ -1,5 +1,5 @@
-/** Labelled multi-line text field; `width` defaults to a literal `500` (px, not responsive) and there's no `...rest` escape hatch. */
-declare const InputTextArea: import("react").ForwardRefExoticComponent<Pick<import("@chakra-ui/react").TextareaProps, "placeholder" | "resize" | "id" | "onBlur" | "onChange" | "variant" | "size" | "isDisabled" | "name" | "value" | "isReadOnly" | "isRequired" | "autoComplete"> & {
+/** Labelled multi-line text field — full width by default, label always bound (auto id), helper/error row, rest props reach the `<textarea>`. */
+declare const InputTextArea: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").TextareaProps, "width" | "isInvalid"> & {
     label?: string;
     error?: boolean;
     errorMessage?: string;