pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/Input/PhoneNumberInput.js

@@ -1,104 +1,61 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var HelperText_1 = __importDefault(require("../Common/HelperText"));
-var FormLabel_1 = require("../Common/FormLabel");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var getFlagEmoji = function (countryCode) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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)
         return "";
     return countryCode
         .toUpperCase()
-        .replace(/./g, function (char) {
-        return String.fromCodePoint(127397 + char.charCodeAt(0));
-    });
+        .replace(/./g, (char) => String.fromCodePoint(127397 + char.charCodeAt(0)));
 };
-var sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
-var sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
-var PhoneNumberInput = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? "md" : _b, value = _a.value, _c = _a.codeValueReturn, codeValueReturn = _c === void 0 ? true : _c, country = _a.country, countries = _a.countries, _d = _a.placeholder, placeholder = _d === void 0 ? "Enter phone number" : _d, onChange = _a.onChange, inputId = _a.inputId, selectId = _a.selectId, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, label = _a.label, id = _a.id, _e = _a.width, width = _e === void 0 ? "100%" : _e, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired, onBlur = _a.onBlur, onFocus = _a.onFocus, isReadOnly = _a.isReadOnly, height = _a.height, autoComplete = _a.autoComplete, _f = _a.showCountrySelect, showCountrySelect = _f === void 0 ? true : _f, ref = _a.ref, name = _a.name, minW = _a.minW, maxW = _a.maxW, rest = __rest(_a, ["size", "value", "codeValueReturn", "country", "countries", "placeholder", "onChange", "inputId", "selectId", "error", "errorMessage", "helperText", "label", "id", "width", "isInformation", "informationMessage", "isRequired", "onBlur", "onFocus", "isReadOnly", "height", "autoComplete", "showCountrySelect", "ref", "name", "minW", "maxW"]);
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var getCountryTelCode = (0, react_1.useCallback)(function (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; `ref` forwards to the number `<input>`. */
+const PhoneNumberInput = (0, react_1.forwardRef)(function PhoneNumberInput({ size = "sm", 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)
             return undefined;
-        return (_a = countries === null || countries === void 0 ? void 0 : countries.find(function (_a) {
-            var code = _a.code;
-            return countryCode === code;
-        })) === null || _a === void 0 ? void 0 : _a.dial_code;
+        return (_a = countries === null || countries === void 0 ? void 0 : countries.find(({ code }) => countryCode === code)) === null || _a === void 0 ? void 0 : _a.dial_code;
     }, [countries]);
-    var _g = (0, react_1.useState)(value), number = _g[0], setNumber = _g[1];
-    var _h = (0, react_1.useState)(country), selectedCountry = _h[0], setSelectedCountry = _h[1];
-    var _j = (0, react_1.useState)(country), countryCode = _j[0], setCountryCode = _j[1];
-    (0, react_1.useEffect)(function () {
+    const [number, setNumber] = (0, react_1.useState)(value);
+    const [selectedCountry, setSelectedCountry] = (0, react_1.useState)(country);
+    const [countryCode, setCountryCode] = (0, react_1.useState)(country);
+    const countryCodeRef = (0, react_1.useRef)(countryCode);
+    countryCodeRef.current = countryCode;
+    const firstValue = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (firstValue.current) {
+            firstValue.current = false;
+            return;
+        }
+        if (value === undefined)
+            return;
+        const dial = countryCodeRef.current;
+        const digits = dial && value.startsWith(`${dial} `) ? value.slice(dial.length + 1) : value;
+        setNumber(digits);
+    }, [value]);
+    (0, react_1.useEffect)(() => {
         if (country) {
-            var code = getCountryTelCode(country);
+            const code = getCountryTelCode(country);
             setSelectedCountry(country);
             setCountryCode(code);
         }
     }, [country, getCountryTelCode]);
-    var handleCountryChange = function (e) {
-        var selected = e.target.value;
+    const handleCountryChange = (e) => {
+        const selected = e.target.value;
         if (!selected) {
             setSelectedCountry("");
             setCountryCode("");
@@ -106,34 +63,23 @@ var PhoneNumberInput = function (_a) {
             onChange("");
             return;
         }
-        var code = getCountryTelCode(selected) || "";
+        const code = getCountryTelCode(selected) || "";
         setSelectedCountry(selected);
         setCountryCode(code);
-        onChange(codeValueReturn ? "".concat(code, " ").concat(number).trim() : "".concat(number));
+        onChange(codeValueReturn ? `${code} ${number}`.trim() : `${number}`);
     };
-    var handleNumberChange = function (e) {
+    const handleNumberChange = (e) => {
         if (countryCode) {
-            var numValue = e.target.value;
+            let numValue = e.target.value;
             numValue = numValue.replace(/[^+\d\s]/g, "");
             setNumber(numValue);
-            onChange(codeValueReturn ? "".concat(countryCode, " ").concat(numValue).trim() : "".concat(numValue));
+            onChange(codeValueReturn ? `${countryCode} ${numValue}`.trim() : `${numValue}`);
         }
         else {
             return;
         }
     };
-    return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
-        react_1.default.createElement(react_2.InputGroup, __assign({ size: size }, rest),
-            react_1.default.createElement(react_2.InputLeftElement, { width: showCountrySelect ? "3rem" : "2rem", height: "100%" },
-                showCountrySelect && react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(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] },
-                        react_1.default.createElement("option", { value: "" }, "Select Country"),
-                        countries.map(function (option) { return (react_1.default.createElement("option", { key: option.code, value: option.code }, option.country)); }))),
-                react_1.default.createElement(react_2.Flex, { pl: 2, width: "100%", alignItems: "center", justifyContent: "space-between" }, selectedCountry ? (react_1.default.createElement(react_2.Box, { fontSize: "1.2rem" }, getFlagEmoji(selectedCountry))) : (react_1.default.createElement(react_2.Icon, { viewBox: "0 0 24 24", boxSize: "1rem" },
-                    react_1.default.createElement("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" }))))),
-            react_1.default.createElement(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 && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
-        helperText && !error && react_1.default.createElement(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

@@ -1,19 +1,25 @@
+/** One entry in the `countries` select; `dial_code` prefixes the number on change. */
 export type CountryOption = {
     country_id: string | number;
     code: string;
     country: string;
     dial_code: string;
 };
+/** 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;
+    /** Control-scale height: xs 32 · sm 38 · md 40 · lg 48px. Defaults to "sm", like TextInput, so it lines up in a form. */
     size?: string;
+    /** The number shown in the field; a later change to it updates the field. A leading dial code (the `onChange` shape) is stripped, so echoing `onChange` back is safe. */
     value?: string;
     codeValueReturn?: boolean;
     country?: string;
     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;
@@ -26,11 +32,12 @@ export type PhoneNumberInputProps = {
     onBlur?: () => void;
     onFocus?: () => void;
     isReadOnly?: boolean;
-    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 React from "react";
-import { SwitchProps } from "@chakra-ui/react";
-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,5 +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;
 }
-export declare const InputSwitch: ({ switchText, switchTextPosition, id, isChecked, label, isInformation, informationMessage, isRequired, size, ...props }: ThemedSwitchProps) => React.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,55 +1,24 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputSwitch = void 0;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var FormLabel_1 = require("../../Common/FormLabel");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var InputSwitch = function (_a) {
-    var switchText = _a.switchText, _b = _a.switchTextPosition, switchTextPosition = _b === void 0 ? "right" : _b, id = _a.id, isChecked = _a.isChecked, label = _a.label, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired, _c = _a.size, size = _c === void 0 ? "md" : _c, props = __rest(_a, ["switchText", "switchTextPosition", "id", "isChecked", "label", "isInformation", "informationMessage", "isRequired", "size"]);
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var activeColor = (0, react_2.useColorModeValue)(theme.colors.primary[500], theme.colors.primary[300]);
-    var inactiveColor = (0, react_2.useColorModeValue)(theme.colors.gray[300], theme.colors.gray[600]);
-    var sizeStyles = {
-        sm: { fontSize: "sm", spacing: 1 },
-        md: { fontSize: "md", spacing: 2 },
-        lg: { fontSize: "lg", spacing: 3 },
-    };
-    return (react_1.default.createElement(react_2.FormControl, null,
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
-        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", flexGrow: 1 },
-            react_1.default.createElement(react_2.HStack, { spacing: sizeStyles[size].spacing },
-                switchText && switchTextPosition === "left" && (react_1.default.createElement(react_2.FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer" }, switchText)),
-                react_1.default.createElement(react_2.Switch, __assign({ id: id, size: size, isChecked: isChecked, colorScheme: "blue", sx: {
-                        "span.chakra-switch__track": {
-                            bg: isChecked ? activeColor : inactiveColor,
-                        },
-                    } }, props)),
-                switchText && switchTextPosition === "right" && (react_1.default.createElement(react_2.FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer" }, switchText))))));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -43,43 +32,97 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var textInputIconSize_1 = require("./textInputIconSize");
-var FormLabel_1 = require("../Common/FormLabel");
-var HelperText_1 = __importDefault(require("../Common/HelperText"));
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var TextInput = (0, react_1.forwardRef)(function (_a, ref) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "100%" : _g, height = _a.height, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _h = _a.size, size = _h === void 0 ? "md" : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, autoComplete = _a.autoComplete, minW = _a.minW, maxW = _a.maxW, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "autoComplete", "minW", "maxW"]);
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var sizeKey = typeof size === "string" ? size : "md";
-    var iconScaleSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
-    return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
-        react_1.default.createElement(react_2.InputGroup, { style: inputGroupStyle, size: size, height: height },
-            inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle, { height: "100%", display: "flex", alignItems: "center" }),
-                react_1.default.createElement(react_2.Box, { as: "span", sx: iconScaleSx, color: theme.colors.gray[500] }, inputLeftIcon))),
-            react_1.default.createElement(react_2.Input, __assign({ 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: height }), { isInvalid: error, ref: ref, autoComplete: autoComplete }, inputStyle, props)),
-            inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none" }, rightElementStyle, { height: "100%", display: "flex", alignItems: "center" }),
-                react_1.default.createElement(react_2.Box, { as: "span", sx: iconScaleSx }, inputRightIcon)))),
-        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
-        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
+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 FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const fieldMessageStyles_1 = require("../Common/fieldMessageStyles");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+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, 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 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 !== null && onRightIconClick !== void 0 ? onRightIconClick : 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, minH: 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: !isLoading && rightSlots.length > 1 ? "flex-end" : "center", 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;