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

package/dist/Components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
 import { CheckboxProps } from "./CheckboxProps";
-/** Renders Chakra's native role="checkbox"; label is optional and falls back to aria-label — pass isInvalid (not just error) for the invalid state to register. */
-export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+/** Renders Chakra's native role="checkbox"; label is optional and falls back to aria-label. `error` marks it invalid and links the message via aria-describedby. */
+export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, id, variant, ...aria }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Checkbox/Checkbox.js

@@ -7,15 +7,17 @@ exports.default = CheckBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-/** Renders Chakra's native role="checkbox"; label is optional and falls back to aria-label — pass isInvalid (not just error) for the invalid state to register. */
-function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }) {
+/** Renders Chakra's native role="checkbox"; label is optional and falls back to aria-label. `error` marks it invalid and links the message via aria-describedby. */
+function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, id, variant, ...aria }) {
+    void variant;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const controlSize = size === "sm" ? "1rem"
-        : size === "md" ? "1.25rem"
-            : size === "lg" ? "1.5rem"
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const controlSize = size === "sm" ? "0.875rem"
+        : size === "md" ? "1rem"
+            : size === "lg" ? "1.25rem"
                 : size; // pass-through if already a CSS value
     const clampStyles = labelClampLines
         ? {
@@ -28,8 +30,8 @@ function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelC
             ...labelSx,
         }
         : { ...labelSx };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], display: "flex", alignItems: "center", sx: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { id: ids.inputId, "aria-describedby": ids.describedBy, ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid || error, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], display: "flex", alignItems: "center", sx: {
                     ...sx,
                     ".chakra-checkbox__control": { w: controlSize, h: controlSize },
-                }, children: label && (showLabelTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+                }, children: label && (showLabelTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

package/dist/Components/Checkbox/Checkbox.styles.js

@@ -1,71 +1,76 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const fieldStyles_1 = require("../Common/fieldStyles");
+// One fill rule for every colour scheme, via resolveFilledSurface — was a flat [600].
 exports.Checkbox = {
     baseStyle: ({ theme, colorScheme = "primary" }) => {
         var _a;
         const palette = (_a = theme.colors[colorScheme]) !== null && _a !== void 0 ? _a : theme.colors.primary;
-        // Both `_checked._hover` and `_hover._checked` paths get the same lifted value.
-        const hoverChecked = (0, outlineRung_1.resolveHoverTint)(palette[600], palette[600]);
-        const checkedIcon = (0, accentText_1.onFilled)(palette[600], theme.colors.white, theme.colors.black);
-        const hoverCheckedIcon = (0, accentText_1.onFilled)(hoverChecked, theme.colors.white, theme.colors.black);
-        const focusRing = (0, outlineRung_1.liftToContrast)(palette[300], theme.colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT);
+        const filled = (0, filledSurface_1.resolveFilledSurface)(palette, theme.colors);
+        // filledSurface's own hoverFill can collapse on a near-monochrome scale (zinc); step from
+        // the resolved fill with resolveHoverTint instead, which guarantees a perceptible move.
+        const hoverFill = (0, outlineRung_1.resolveHoverTint)(filled.fill, filled.fill);
+        const hoverColor = (0, accentText_1.onFilled)(hoverFill, theme.colors.white, theme.colors.black);
+        const activeFill = (0, outlineRung_1.resolveHoverTint)(hoverFill, hoverFill);
         return {
             control: {
-                width: "1.25rem",
-                height: "1.25rem",
-                borderWidth: "1.6px",
+                borderWidth: "1px",
                 borderRadius: "base",
-                // Without a resting colour Chakra falls back to its own gray.500.
-                borderColor: theme.colors.boxborder[500],
+                borderColor: (0, fieldStyles_1.fieldHoverBorder)(theme.colors),
                 transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
-                _disabled: {
-                    bg: theme.colors.background[50],
-                    borderColor: theme.colors.boxborder[500],
-                    cursor: "not-allowed",
+                _invalid: {
+                    borderColor: theme.colors.semanticText.error,
                 },
                 _indeterminate: {
-                    bg: theme.colors.background[50],
-                    borderColor: palette[500],
-                    svg: {
-                        color: palette[500],
-                    },
+                    bg: filled.fill,
+                    borderColor: filled.fill,
+                    svg: { color: filled.color },
                 },
                 _checked: {
-                    bg: palette[600],
-                    borderColor: palette[600],
+                    bg: filled.fill,
+                    borderColor: filled.fill,
                     _hover: {
-                        bg: hoverChecked,
-                        borderColor: hoverChecked,
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                 },
                 _hover: {
                     bg: theme.colors.background[100],
-                    borderColor: palette[400],
+                    borderColor: filled.fill,
                     _checked: {
-                        bg: hoverChecked,
-                        borderColor: hoverChecked,
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                     _indeterminate: {
-                        bg: "none",
-                        borderColor: palette[600],
+                        bg: hoverFill,
+                        borderColor: hoverFill,
                     },
                 },
-                _focus: {
-                    boxShadow: `0 0 0 2px ${focusRing}`,
-                    borderColor: palette[500],
-                },
+                _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors),
                 _active: {
-                    bg: palette[600],
-                    borderColor: palette[600],
+                    bg: activeFill,
+                    borderColor: activeFill,
+                },
+                // Last so it wins over _checked/_indeterminate at equal specificity.
+                _disabled: {
+                    bg: theme.colors.background[100],
+                    borderColor: theme.colors.boxborder[500],
+                    cursor: "not-allowed",
+                    opacity: 1,
                 },
             },
             icon: {
-                color: checkedIcon,
+                color: filled.color,
                 _hover: {
-                    color: hoverCheckedIcon,
+                    color: hoverColor,
+                },
+                _disabled: {
+                    color: theme.colors.textMuted,
                 },
             },
         };

package/dist/Components/Checkbox/CheckboxProps.d.ts

@@ -1,20 +1,29 @@
 import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
 /** Curated Pick of Chakra's native CheckboxProps (not a full re-export) plus this library's label/tooltip/error additions. */
 export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx" | "onClick" | "aria-label" | "aria-labelledby" | "aria-describedby" | "id"> & {
+    /** Optional; without it, pass `aria-label`. */
     label?: string;
+    /** Defaults to "0.875rem" (14px). */
     labelFontSize?: string;
+    /** Wraps the label in a tooltip showing `labelTooltip`. */
     showLabelTooltip?: boolean;
+    /** Tooltip text; defaults to `label`. Ignored unless `showLabelTooltip`. */
     labelTooltip?: string;
+    /** Clamps the label to this many lines with an ellipsis. */
     labelClampLines?: number;
+    /** Passed through to the Chakra checkbox root. */
     width?: string | number;
-    /** Not wired to this library's Checkbox theme (no variants key) — any effect comes from Chakra's own default, not design tokens. */
+    /** @deprecated Ignored — Checkbox.styles.ts defines no `variants` key; a checkbox has no button-like look to switch. */
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
     /** Maps to Chakra's colorScheme (icon/fill tint), not a CSS color — text color is fixed via theme tokens. */
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    /** Control box sm 14px · md 16px · lg 20px; defaults to "md". */
     size?: "sm" | "md" | "lg";
-    /** error/errorMessage/helperText render as visible text only — no aria-describedby link to the input, and helperText hides whenever error is true. */
+    /** Sets `isInvalid` (error border + aria-invalid) and shows `errorMessage` in place of `helperText`, linked via aria-describedby. */
     error?: boolean;
     errorMessage?: string;
+    /** Hidden while `error` is true. */
     helperText?: string;
+    /** Extra styles for the label span, merged after the clamp styles. */
     labelSx?: React.CSSProperties;
 };

package/dist/Components/Common/ErrorComponent.d.ts

@@ -1,4 +1,4 @@
-/** Inline error row for Input/PinInputs; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
+/** Inline error row for Input; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
 declare const ErrorComponent: ({ error, errorClassName, }: {
     /** Required and rendered as-is — callers gate with `error && <ErrorComponent />` themselves; an empty string still draws the icon. */
     error: string;

package/dist/Components/Common/ErrorComponent.js

@@ -4,7 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
-/** Inline error row for Input/PinInputs; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
+/** Inline error row for Input; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
 const ErrorComponent = ({ error, errorClassName, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const errorText = colors.semanticText.error;

package/dist/Components/Common/ErrorMessage.d.ts

@@ -1,5 +1,5 @@
 declare const ErrorMessage: ({ errorMessage, id }: {
-    errorMessage?: string;
+    errorMessage: string;
     id?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ErrorMessage;

package/dist/Components/Common/ErrorMessage.js

@@ -4,10 +4,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-// `id` lets a field point `aria-describedby` here; `role="alert"` announces once, on render.
-// Always pass `errorMessage` when `error` is true — omitted, this renders the literal word "Error", and every caller hides `helperText` while `error` is true.
+const fieldMessageStyles_1 = require("./fieldMessageStyles");
+// `id` lets a field point `aria-describedby` here; `role="alert"` announces once.
 const ErrorMessage = ({ errorMessage, id }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: id, align: "center", color: colors.semanticText.error, fontSize: "0.875rem", role: "alert", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { width: "0.875rem" }), (0, jsx_runtime_1.jsx)(react_1.Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: id, role: "alert", align: "flex-start", gap: "0.25rem", ...(0, fieldMessageStyles_1.fieldMessageStyles)(colors), color: colors.semanticText.error, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", h: "1.125rem", align: "center", flexShrink: 0, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 12 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: errorMessage })] }));
 };
 exports.default = ErrorMessage;

package/dist/Components/Common/FieldMessage.d.ts

@@ -0,0 +1,9 @@
+import { type FieldMessageState } from "./fieldMessageStyles";
+export type FieldMessageProps = FieldMessageState & {
+    /** From `useFieldIds` — must match the control's `aria-describedby`. */
+    helperId?: string;
+    errorId?: string;
+};
+/** The single message row under a field: error when `error`, else helper, else nothing. */
+declare const FieldMessage: ({ error, errorMessage, helperText, helperId, errorId }: FieldMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export default FieldMessage;

package/dist/Components/Common/FieldMessage.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
+const HelperText_1 = __importDefault(require("./HelperText"));
+const fieldMessageStyles_1 = require("./fieldMessageStyles");
+/** The single message row under a field: error when `error`, else helper, else nothing. */
+const FieldMessage = ({ error, errorMessage, helperText, helperId, errorId }) => {
+    const { showError, showHelper } = (0, fieldMessageStyles_1.fieldMessageVisibility)({ error, errorMessage, helperText });
+    if (showError && errorMessage)
+        return (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { id: errorId, errorMessage: errorMessage });
+    if (showHelper && helperText)
+        return (0, jsx_runtime_1.jsx)(HelperText_1.default, { id: helperId, helperText: helperText });
+    return null;
+};
+exports.default = FieldMessage;

package/dist/Components/Common/FormLabel.d.ts

@@ -1,3 +1,12 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+/** The one field-label look (13px / 500 / `text[700]`); `Label` and `TextLabel` both read it. */
+export declare const fieldLabelStyles: (colors: PaletteProps) => {
+    color: string;
+    fontWeight: number;
+    fontSize: string;
+    lineHeight: string;
+    mb: string;
+};
 /** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>` — not a substitute for `Label` (Common/Label.tsx), which always renders a `FormLabel`. */
 export declare const TextLabel: ({ label, id, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, inline, }: {
     label: string;

package/dist/Components/Common/FormLabel.js

@@ -3,12 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextLabel = void 0;
+exports.TextLabel = exports.fieldLabelStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const lucide_react_1 = require("lucide-react");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+/** The one field-label look (13px / 500 / `text[700]`); `Label` and `TextLabel` both read it. */
+const fieldLabelStyles = (colors) => ({
+    color: colors.text[700],
+    fontWeight: 500,
+    fontSize: "0.8125rem",
+    lineHeight: "1.2",
+    mb: "0.375rem",
+});
+exports.fieldLabelStyles = fieldLabelStyles;
 /** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>` — not a substitute for `Label` (Common/Label.tsx), which always renders a `FormLabel`. */
 const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -20,19 +29,16 @@ const TextLabel = ({ label, id, isRequired = false, isInformation = false, infor
         textOverflow: "ellipsis",
         whiteSpace: "normal",
     } : {};
+    const base = (0, exports.fieldLabelStyles)(theme.colors);
     const wrapperStyles = {
+        ...base,
         display: inline ? "inline-flex" : "block",
         alignItems: inline ? "center" : undefined,
-        mb: inline ? 0 : "0.375rem",
-        color: theme.colors.text[700],
-        fontWeight: 500,
-        fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.8125rem",
-        lineHeight: "1.2",
+        mb: inline ? 0 : base.mb,
+        fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : base.fontSize,
     };
     const content = ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label })), isRequired && ((0, jsx_runtime_1.jsx)("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
-    // A real <label> only when there is a control id to point at. Without one it would name
-    // nothing, and TextLabel also renders `inline` inside controls that are themselves a <label>
-    // (Checkbox/Radio) — nesting labels there would be invalid markup.
+    // NOTE: real <label> only with a control id — Checkbox/Radio render this inline inside their own <label>.
     return id ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "label", htmlFor: id, ...wrapperStyles, children: content })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", ...wrapperStyles, children: content }));
 };
 exports.TextLabel = TextLabel;

package/dist/Components/Common/HelperText.d.ts

@@ -1,5 +1,5 @@
 /** `id` is optional — pass one to control aria-describedby yourself; omitted, Chakra auto-generates one only inside a FormControl ancestor. */
-/** Renders `helperText` unconditionally; each field hides this while showing an error (see ErrorMessage) — HelperText itself has no `error` prop. */
+/** Renders `helperText` unconditionally; prefer `FieldMessage`, which swaps it for the error. */
 declare const HelperText: ({ helperText, id }: {
     helperText: string;
     id?: string;

package/dist/Components/Common/HelperText.js

@@ -3,14 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const fieldMessageStyles_1 = require("./fieldMessageStyles");
 /** `id` is optional — pass one to control aria-describedby yourself; omitted, Chakra auto-generates one only inside a FormControl ancestor. */
-/** Renders `helperText` unconditionally; each field hides this while showing an error (see ErrorMessage) — HelperText itself has no `error` prop. */
+/** Renders `helperText` unconditionally; prefer `FieldMessage`, which swaps it for the error. */
 const HelperText = ({ helperText, id }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const field = (0, react_1.useFormControlContext)();
     // An explicit id={undefined} overwrites the id FormHelperText generates for aria-describedby.
     const idProp = id ? { id } : {};
-    const style = { mt: 1, fontSize: 14, color: theme.colors.gray[500] };
+    const style = (0, fieldMessageStyles_1.fieldMessageStyles)(theme.colors);
     // FormHelperText throws without a FormControl ancestor; Checkbox, MultiSelect and
     // SearchSelect render this outside one.
     if (!field) {

package/dist/Components/Common/Label.d.ts

@@ -1,4 +1,4 @@
-/** Always renders a real Chakra `<label>` (FormLabel), even without `htmlFor` — unlike `TextLabel` (FormLabel.tsx), which falls back to a plain `<span>`. */
+/** Always renders a real Chakra `<label>` (FormLabel), even without `htmlFor` — unlike `TextLabel` (FormLabel.tsx), which falls back to a plain `<span>`. Same look as `TextLabel`. */
 declare const Label: ({ label, htmlFor, labelClassName, isRequired, }: {
     label: string;
     /** id of the control being labelled. Omit rather than guess — `label` text is not an id. */

package/dist/Components/Common/Label.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-/** Always renders a real Chakra `<label>` (FormLabel), even without `htmlFor` — unlike `TextLabel` (FormLabel.tsx), which falls back to a plain `<span>`. */
+const FormLabel_1 = require("./FormLabel");
+/** Always renders a real Chakra `<label>` (FormLabel), even without `htmlFor` — unlike `TextLabel` (FormLabel.tsx), which falls back to a plain `<span>`. Same look as `TextLabel`. */
 const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: colors.header[500], children: [label, isRequired && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: colors.semanticText.error, ml: 1, children: "*" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.FormLabel, { htmlFor: htmlFor, className: labelClassName, me: 0, ...(0, FormLabel_1.fieldLabelStyles)(colors), children: [label, isRequired && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: colors.semanticText.error, ml: "0.125rem", children: "*" }))] }));
 };
 exports.default = Label;

package/dist/Components/Common/fieldMessageStyles.d.ts

@@ -0,0 +1,19 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const FIELD_MESSAGE_GAP = "0.25rem";
+/** Shared type for helper and error text, so switching between them never shifts the row. */
+export declare const fieldMessageStyles: (colors: PaletteProps) => {
+    mt: string;
+    fontSize: string;
+    lineHeight: string;
+    color: string;
+};
+export type FieldMessageState = {
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+};
+/** One rule for every field: the error replaces the helper, never both. */
+export declare const fieldMessageVisibility: ({ error, errorMessage, helperText, }: FieldMessageState) => {
+    showError: boolean;
+    showHelper: boolean;
+};

package/dist/Components/Common/fieldMessageStyles.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fieldMessageVisibility = exports.fieldMessageStyles = exports.FIELD_MESSAGE_GAP = void 0;
+exports.FIELD_MESSAGE_GAP = "0.25rem";
+/** Shared type for helper and error text, so switching between them never shifts the row. */
+const fieldMessageStyles = (colors) => ({
+    mt: exports.FIELD_MESSAGE_GAP,
+    fontSize: "0.75rem",
+    lineHeight: "1.125rem",
+    color: colors.textMuted,
+});
+exports.fieldMessageStyles = fieldMessageStyles;
+/** One rule for every field: the error replaces the helper, never both. */
+const fieldMessageVisibility = ({ error = false, errorMessage, helperText, }) => ({
+    showError: error && Boolean(errorMessage),
+    showHelper: !error && Boolean(helperText),
+});
+exports.fieldMessageVisibility = fieldMessageVisibility;

package/dist/Components/Common/fieldStyles.d.ts

@@ -1,23 +1,60 @@
+import type { SystemStyleObject } from "@chakra-ui/react";
 import { CustomThemeProps } from "../../Theme/themeProps";
+import type { PaletteProps } from "../../Theme/tokens/types";
+import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
 export declare const FIELD_RADIUS = "lg";
-export declare const FIELD_BORDER_WIDTH = "0.063rem";
-export declare const FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
+export declare const FIELD_BORDER_WIDTH = "1px";
+export declare const FIELD_TRANSITION: string;
+/** Chakra `h`/`fontSize`/`px` for a control of this size — fields, selects and buttons share it. */
+export declare const controlSizeStyles: (size: ControlSize) => {
+    h: string;
+    minH: string;
+    fontSize: string;
+    px: string;
+};
+/** Resting border one step firmer, used on hover only. */
+export declare const fieldHoverBorder: (colors: PaletteProps) => string;
+/** Resting box (surface, border, radius) shared by every field, native or composite. */
+export declare const fieldBoxStyles: (colors: PaletteProps) => {
+    bg: string;
+    borderWidth: string;
+    borderStyle: string;
+    borderColor: string;
+    borderRadius: string;
+    transition: string;
+};
+/** Value text: 400 weight, no tracking. */
+export declare const fieldTextStyles: (colors: PaletteProps) => {
+    color: string;
+    fontWeight: number;
+    letterSpacing: string;
+};
+/** Full pseudo-state block for a native input/textarea/select (or a Chakra `field` part). */
+export declare const fieldControlStyles: (colors: PaletteProps) => SystemStyleObject;
 type FieldState = {
     error?: boolean;
     focused?: boolean;
+    disabled?: boolean;
 };
-/**
- * State-based field styles for components that track `focused`/`error` in JS
- * (e.g. SearchSelect, SingleDatePicker). Returns Chakra style props.
- */
-export declare const getFieldStateStyles: (theme: CustomThemeProps, { error, focused }?: FieldState) => {
+/** Box-only styles for composite fields that track state in JS (SelectV2, SearchSelect, date pickers). */
+export declare const getFieldStateStyles: (theme: CustomThemeProps, { error, focused, disabled }?: FieldState) => {
+    borderColor: string;
+    boxShadow: string;
     bg: string;
+    borderWidth: string;
+    borderStyle: string;
     borderRadius: string;
-    border: string;
+    transition: string;
+} | {
+    bg: string;
     borderColor: string;
+    cursor: string;
     boxShadow: string;
+    borderWidth: string;
+    borderStyle: string;
+    borderRadius: string;
     transition: string;
 };
-/** Focus ring value (e.g. for `_focus` / `_focusWithin` pseudo styles). */
+/** Glow for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */
 export declare const fieldFocusRing: (theme: CustomThemeProps, error?: boolean) => string;
 export {};

package/dist/Components/Common/fieldStyles.js

@@ -1,38 +1,80 @@
 "use strict";
-// Shared field-box visual standard, so the custom-styled form components
-// (SearchSelect, MultiSelect, SelectSearch, date pickers, …) match the theme
-// `Input` config exactly instead of each re-deriving border/focus/bg values.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fieldFocusRing = exports.getFieldStateStyles = exports.FIELD_TRANSITION = exports.FIELD_BORDER_WIDTH = exports.FIELD_RADIUS = void 0;
+exports.fieldFocusRing = exports.getFieldStateStyles = exports.fieldControlStyles = exports.fieldTextStyles = exports.fieldBoxStyles = exports.fieldHoverBorder = exports.controlSizeStyles = exports.FIELD_TRANSITION = exports.FIELD_BORDER_WIDTH = exports.FIELD_RADIUS = void 0;
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 exports.FIELD_RADIUS = "lg";
-exports.FIELD_BORDER_WIDTH = "0.063rem";
-exports.FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
-/**
- * State-based field styles for components that track `focused`/`error` in JS
- * (e.g. SearchSelect, SingleDatePicker). Returns Chakra style props.
- */
-const getFieldStateStyles = (theme, { error = false, focused = false } = {}) => {
-    // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
-    // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
-    const idleBorder = theme.colors.boxborder[500];
-    const primary = theme.colors.primary[500];
-    const errorColor = theme.colors.semanticText.error;
-    const ringPrimary = theme.colors.boxShadow.primary;
-    const ringError = theme.colors.boxShadow.error;
+exports.FIELD_BORDER_WIDTH = "1px";
+exports.FIELD_TRANSITION = (0, motion_1.transitionFor)(["border-color", "box-shadow", "background-color"]);
+/** Chakra `h`/`fontSize`/`px` for a control of this size — fields, selects and buttons share it. */
+const controlSizeStyles = (size) => {
+    const spec = controlSizes_1.CONTROL_SIZES[size];
+    return { h: spec.height, minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };
+};
+exports.controlSizeStyles = controlSizeStyles;
+/** Resting border one step firmer, used on hover only. */
+const fieldHoverBorder = (colors) => (0, outlineRung_1.liftToContrast)(colors.boxborder[500], colors.background[50], outlineRung_1.AA_NON_TEXT);
+exports.fieldHoverBorder = fieldHoverBorder;
+/** Resting box (surface, border, radius) shared by every field, native or composite. */
+const fieldBoxStyles = (colors) => ({
+    bg: colors.background[50],
+    borderWidth: exports.FIELD_BORDER_WIDTH,
+    borderStyle: "solid",
+    borderColor: colors.boxborder[500],
+    borderRadius: exports.FIELD_RADIUS,
+    transition: exports.FIELD_TRANSITION,
+});
+exports.fieldBoxStyles = fieldBoxStyles;
+/** Value text: 400 weight, no tracking. */
+const fieldTextStyles = (colors) => ({
+    color: colors.text[900],
+    fontWeight: 400,
+    letterSpacing: "normal",
+});
+exports.fieldTextStyles = fieldTextStyles;
+const disabledStyles = (colors) => ({
+    bg: colors.background[100],
+    color: colors.textMuted,
+    borderColor: colors.boxborder[500],
+    opacity: 1,
+    cursor: "not-allowed",
+});
+/** Full pseudo-state block for a native input/textarea/select (or a Chakra `field` part). */
+const fieldControlStyles = (colors) => {
+    const disabled = disabledStyles(colors);
     return {
-        bg: theme.colors.background[50],
-        borderRadius: exports.FIELD_RADIUS,
-        border: `${exports.FIELD_BORDER_WIDTH} solid`,
-        borderColor: error ? errorColor : focused ? primary : idleBorder,
-        boxShadow: error
-            ? `0 0 0 0.125rem ${ringError}`
-            : focused
-                ? `0 0 0 0.125rem ${ringPrimary}`
-                : "none",
-        transition: exports.FIELD_TRANSITION,
+        ...(0, exports.fieldBoxStyles)(colors),
+        ...(0, exports.fieldTextStyles)(colors),
+        _placeholder: { color: (0, placeholderInk_1.placeholderInk)(colors), opacity: 1 },
+        _hover: { borderColor: (0, exports.fieldHoverBorder)(colors) },
+        _focusVisible: { borderColor: colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(colors) },
+        _invalid: {
+            borderColor: colors.semanticText.error,
+            _hover: { borderColor: colors.semanticText.error },
+        },
+        _readOnly: { _hover: { borderColor: colors.boxborder[500] } },
+        _disabled: { ...disabled, _hover: { borderColor: disabled.borderColor } },
     };
 };
+exports.fieldControlStyles = fieldControlStyles;
+/** Box-only styles for composite fields that track state in JS (SelectV2, SearchSelect, date pickers). */
+const getFieldStateStyles = (theme, { error = false, focused = false, disabled = false } = {}) => {
+    const { colors } = theme;
+    const borderColor = error
+        ? colors.semanticText.error
+        : focused
+            ? colors.primary[500]
+            : colors.boxborder[500];
+    const box = { ...(0, exports.fieldBoxStyles)(colors), borderColor, boxShadow: focused ? (0, focusRing_styles_1.focusGlowShadow)(colors) : "none" };
+    if (!disabled)
+        return box;
+    const { bg, borderColor: disabledBorder, cursor } = disabledStyles(colors);
+    return { ...box, bg, borderColor: disabledBorder, cursor };
+};
 exports.getFieldStateStyles = getFieldStateStyles;
-/** Focus ring value (e.g. for `_focus` / `_focusWithin` pseudo styles). */
-const fieldFocusRing = (theme, error = false) => `0 0 0 0.125rem ${error ? theme.colors.boxShadow.error : theme.colors.boxShadow.primary}`;
+/** Glow for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */
+const fieldFocusRing = (theme) => (0, focusRing_styles_1.focusGlowShadow)(theme.colors);
 exports.fieldFocusRing = fieldFocusRing;