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

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 { focusVisibleRing } 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, ...focusVisibleRing(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;
+};

package/dist/esm/Components/InputTextArea/InputTextArea.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { FormControl, Textarea, } from "@chakra-ui/react";
+import { FormControl, Textarea, useMergeRefs } from "@chakra-ui/react";
 import { TextLabel } from "../Common/FormLabel.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
-import HelperText from "../Common/HelperText.js";
-/** Labelled multi-line text field; `width` defaults to a literal `500` (px, not responsive) and there's no `...rest` escape hatch. */
-const InputTextArea = forwardRef(function InputTextArea({ label, placeholder, value, onChange, onBlur, name, size = "md", resize = "both", width = 500, isDisabled, isReadOnly, isRequired = false, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete = "" }, ref) {
-    return (_jsxs(FormControl, { children: [label && _jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), _jsx(Textarea, { ref: ref, id: id, name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, size: size, resize: resize, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height, autoComplete: autoComplete }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { useAriaRequired } from "../Input/useAriaRequired.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+/** Labelled multi-line text field — full width by default, label always bound (auto id), helper/error row, rest props reach the `<textarea>`. */
+const InputTextArea = forwardRef(function InputTextArea({ label, size = DEFAULT_CONTROL_SIZE, resize = "both", width = "100%", isRequired = false, error, errorMessage, helperText, isInformation, informationMessage, id, autoComplete = "", ...rest }, ref) {
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const mergedRef = useMergeRefs(ref, useAriaRequired(isRequired));
+    return (_jsxs(FormControl, { w: width, children: [label && _jsx(TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), _jsx(Textarea, { ref: mergedRef, size: size, resize: resize, isInvalid: error, width: "100%", autoComplete: autoComplete, ...ids.controlProps, ...rest }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 export default InputTextArea;

package/dist/esm/Components/InputTextArea/InputTextArea.style.js

@@ -1,77 +1,22 @@
-import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { fieldPartStyles } from "../Input/TextInput.styles.js";
+import { CONTROL_SIZES, CONTROL_SIZE_NAMES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+const PADDING_Y = { xs: "0.25rem", sm: "0.375rem", md: "0.5rem", lg: "0.75rem" };
 export const Textarea = {
-    baseStyle: ({ theme }) => ({
-        fontWeight: 500,
-        fontSize: "0.875rem",
-        letterSpacing: "0.044rem",
-        pt: "0.813rem",
-        pb: "0.813rem",
-        borderRadius: "lg",
-        transition: "border-color 0.2s, box-shadow 0.2s",
-        _placeholder: {
-            color: placeholderInk(theme.colors),
-        },
-    }),
-    sizes: {
-        md: {
-            fontSize: "0.875rem",
-            h: "2.75rem",
-        },
+    baseStyle: {
+        h: "auto",
+        minH: "5rem",
+        lineHeight: "short",
+        verticalAlign: "top",
     },
+    sizes: Object.fromEntries(CONTROL_SIZE_NAMES.map((size) => [
+        size,
+        { fontSize: CONTROL_SIZES[size].fontSize, px: CONTROL_SIZES[size].paddingX, py: PADDING_Y[size], h: "auto" },
+    ])),
     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 {
-                border: "0.063rem solid",
-                borderColor,
-                bg: theme.colors.background[50],
-                _placeholder: {
-                    color: placeholderInk(theme.colors),
-                },
-                _hover: {
-                    borderColor: primary,
-                    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,
-                        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 }) => fieldPartStyles(theme.colors),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: DEFAULT_CONTROL_SIZE,
     },
 };

package/dist/esm/Components/KanbanBoard/AccountCard.js

@@ -3,25 +3,28 @@ import React, { useMemo } from "react";
 import { Box, Flex, Text, Tooltip, HStack, VStack, Collapse, Spacer, } from "@chakra-ui/react";
 import { ChevronDown, ChevronUp, ExternalLink, Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import AccountRow from "./AccountRow.js";
 const excludeKeys = ["id", "details"];
+const ACTION_TRANSITION = transitionFor(["background-color", "color"]);
 /** Renders one card; if `account.customNode` is set it fully replaces this (and the built-in delete/open/expand) — not exported from the package. */
 const AccountCard = React.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
     const { colors } = useCustomTheme();
-    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = resolveStatusTone(colors.semantic.error, mode);
+    const errorTone = resolveSoftTone(colors, colors.semantic.error);
     const keys = useMemo(() => Object.keys(account).filter((key) => typeof account[key] === "string" && !excludeKeys.includes(key)), [account]);
     const visibleKeys = isExpanded ? keys : keys.slice(0, 4);
     const handleToggle = () => {
         onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
     };
-    return (_jsx(Box, { role: "group", width: "100%", borderRadius: "lg", background: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, boxShadow: "sm", p: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease", _hover: {
+    return (_jsx(Box, { role: "group", width: "100%", borderRadius: "xl", background: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, p: 3, boxSizing: "border-box", minHeight: isExpanded ? "11.25rem" : "5rem", transition: transitionFor(["border-color", "box-shadow", "transform"]), sx: reducedMotionSx({ transform: "none" }), _hover: {
             borderColor: colors.primary[300],
             boxShadow: "md",
             transform: "translateY(-0.063rem)",
-        }, children: _jsxs(VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: colors.text[500], children: [visibleKeys.map((key) => (_jsx(AccountRow, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), _jsx(Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: _jsx(Text, { pt: 2, fontSize: "0.8125rem", color: colors.text[600], children: account.details }) }), _jsxs(Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? (_jsxs(Text, { color: colors.accentText, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: colors.primary[700] }, children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? _jsx(ChevronUp, { size: 13 }) : _jsx(ChevronDown, { size: 13 })] })) : (_jsx(Spacer, {})), _jsxs(HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && (_jsx(Tooltip, { label: "Delete", hasArrow: true, children: _jsx(Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: colors.textMuted, transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: _jsx(Trash2, { size: 15 }) }) })), _jsx(Tooltip, { label: "Open", hasArrow: true, children: _jsx(Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: colors.textMuted, transition: "background 0.15s ease, color 0.15s ease", _hover: {
+        }, children: _jsxs(VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: colors.text[500], children: [visibleKeys.map((key) => (_jsx(AccountRow, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), _jsx(Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: _jsx(Text, { pt: 2, fontSize: "0.8125rem", color: colors.text[600], children: account.details }) }), _jsxs(Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? (_jsxs(Text, { as: "button", type: "button", "aria-expanded": isExpanded, color: colors.accentText, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, borderRadius: "sm", _hover: { textDecoration: "underline" }, sx: focusVisibleStyles(colors), children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? _jsx(ChevronUp, { size: 13 }) : _jsx(ChevronDown, { size: 13 })] })) : (_jsx(Spacer, {})), _jsxs(HStack, { spacing: 1, opacity: 0, transition: transitionFor(["opacity"]), _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, sx: reducedMotionSx(), children: [isDeletable && (_jsx(Tooltip, { label: "Delete", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: _jsx(Trash2, { size: 15 }) }) })), _jsx(Tooltip, { label: "Open", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: {
                                             bg: colors.primary[50],
                                             color: accentTextOnCanvas(colors.primary, colors.primary[50]),
                                         }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: _jsx(ExternalLink, { size: 15 }) }) })] })] })] }) }));

package/dist/esm/Components/KanbanBoard/AccountRow.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Text, Tooltip, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { toWords } from "../../Utils/functions.js";
-/** Renders one label:value row; `label` is re-run through `toWords`, which only splits snake_case — a camelCase key like `nextFollowUp` displays as `Nextfollowup`. */
+/** Renders one label:value row; `label` is re-run through `toWords`, which splits snake_case, kebab-case and camelCase. */
 const AccountRow = ({ label, value }) => {
     const { colors } = useCustomTheme();
     return (_jsxs(Flex, { w: "full", gap: 1, children: [_jsx(Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: _jsx(Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "0.75rem", children: toWords(label) }) }), _jsx(Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem", children: ":" }), _jsx(Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: _jsx(Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem", children: value }) })] }));