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

package/dist/esm/Components/Checkbox/Checkbox.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox as ChakraCheckbox, Box } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
-import HelperText from "../Common/HelperText.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
 import ToolTip from "../ToolTip/ToolTip.js";
-/** 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 = "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. */
+export default 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 = useCustomTheme();
-    const controlSize = size === "sm" ? "1rem"
-        : size === "md" ? "1.25rem"
-            : size === "lg" ? "1.5rem"
+    const ids = 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
         ? {
@@ -22,8 +24,8 @@ export default function CheckBox({ label, labelFontSize, showLabelTooltip, label
             ...labelSx,
         }
         : { ...labelSx };
-    return (_jsxs(_Fragment, { children: [_jsx(ChakraCheckbox, { ...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 (_jsxs(_Fragment, { children: [_jsx(ChakraCheckbox, { 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 ? (_jsx(ToolTip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(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 }) })) : (_jsx(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 && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+                }, children: label && (showLabelTooltip ? (_jsx(ToolTip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(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 }) })) : (_jsx(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 }))) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

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

@@ -1,68 +1,73 @@
-import { AA_NON_TEXT, liftToContrast, resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { fieldHoverBorder } from "../Common/fieldStyles.js";
+// One fill rule for every colour scheme, via resolveFilledSurface — was a flat [600].
 export const 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 = resolveHoverTint(palette[600], palette[600]);
-        const checkedIcon = onFilled(palette[600], theme.colors.white, theme.colors.black);
-        const hoverCheckedIcon = onFilled(hoverChecked, theme.colors.white, theme.colors.black);
-        const focusRing = liftToContrast(palette[300], theme.colors.backgroundColor.main, AA_NON_TEXT);
+        const filled = 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 = resolveHoverTint(filled.fill, filled.fill);
+        const hoverColor = onFilled(hoverFill, theme.colors.white, theme.colors.black);
+        const activeFill = 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: 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: 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/esm/Components/Common/ErrorComponent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HStack, Text } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
-/** 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 } = useCustomTheme();
     const errorText = colors.semanticText.error;

package/dist/esm/Components/Common/ErrorMessage.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, Text, } from "@chakra-ui/react";
-import { Info } from "lucide-react";
+import { Flex, Text } from "@chakra-ui/react";
+import { CircleAlert } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-// `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.
+import { fieldMessageStyles } from "./fieldMessageStyles.js";
+// `id` lets a field point `aria-describedby` here; `role="alert"` announces once.
 const ErrorMessage = ({ errorMessage, id }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Flex, { id: id, align: "center", color: colors.semanticText.error, fontSize: "0.875rem", role: "alert", children: [_jsx(Info, { width: "0.875rem" }), _jsx(Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
+    return (_jsxs(Flex, { id: id, role: "alert", align: "flex-start", gap: "0.25rem", ...fieldMessageStyles(colors), color: colors.semanticText.error, children: [_jsx(Flex, { as: "span", h: "1.125rem", align: "center", flexShrink: 0, "aria-hidden": true, children: _jsx(CircleAlert, { size: 12 }) }), _jsx(Text, { as: "span", children: errorMessage })] }));
 };
 export default ErrorMessage;

package/dist/esm/Components/Common/FieldMessage.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ErrorMessage from "./ErrorMessage.js";
+import HelperText from "./HelperText.js";
+import { fieldMessageVisibility } from "./fieldMessageStyles.js";
+/** The single message row under a field: error when `error`, else helper, else nothing. */
+const FieldMessage = ({ error, errorMessage, helperText, helperId, errorId }) => {
+    const { showError, showHelper } = fieldMessageVisibility({ error, errorMessage, helperText });
+    if (showError && errorMessage)
+        return _jsx(ErrorMessage, { id: errorId, errorMessage: errorMessage });
+    if (showHelper && helperText)
+        return _jsx(HelperText, { id: helperId, helperText: helperText });
+    return null;
+};
+export default FieldMessage;

package/dist/esm/Components/Common/FormLabel.js

@@ -3,6 +3,14 @@ import { Box, Icon } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { InfoIcon } from "lucide-react";
 import ToolTip from "../ToolTip/ToolTip.js";
+/** The one field-label look (13px / 500 / `text[700]`); `Label` and `TextLabel` both read it. */
+export const fieldLabelStyles = (colors) => ({
+    color: colors.text[700],
+    fontWeight: 500,
+    fontSize: "0.8125rem",
+    lineHeight: "1.2",
+    mb: "0.375rem",
+});
 /** 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 const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
     const theme = useCustomTheme();
@@ -14,18 +22,15 @@ export const TextLabel = ({ label, id, isRequired = false, isInformation = false
         textOverflow: "ellipsis",
         whiteSpace: "normal",
     } : {};
+    const base = 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 = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Icon, { as: 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 ? (_jsx(Box, { as: "label", htmlFor: id, ...wrapperStyles, children: content })) : (_jsx(Box, { as: "span", ...wrapperStyles, children: content }));
 };

package/dist/esm/Components/Common/HelperText.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormHelperText, Text, useFormControlContext } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { fieldMessageStyles } from "./fieldMessageStyles.js";
 /** `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 = useCustomTheme();
     const field = 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 = fieldMessageStyles(theme.colors);
     // FormHelperText throws without a FormControl ancestor; Checkbox, MultiSelect and
     // SearchSelect render this outside one.
     if (!field) {

package/dist/esm/Components/Common/Label.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormLabel, Text } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-/** Always renders a real Chakra `<label>` (FormLabel), even without `htmlFor` — unlike `TextLabel` (FormLabel.tsx), which falls back to a plain `<span>`. */
+import { fieldLabelStyles } from "./FormLabel.js";
+/** 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 } = useCustomTheme();
-    return (_jsxs(FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: colors.header[500], children: [label, isRequired && (_jsx(Text, { as: "span", color: colors.semanticText.error, ml: 1, children: "*" }))] }));
+    return (_jsxs(FormLabel, { htmlFor: htmlFor, className: labelClassName, me: 0, ...fieldLabelStyles(colors), children: [label, isRequired && (_jsx(Text, { as: "span", color: colors.semanticText.error, ml: "0.125rem", children: "*" }))] }));
 };
 export default Label;

package/dist/esm/Components/Common/fieldMessageStyles.js

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

package/dist/esm/Components/Common/fieldStyles.js

@@ -1,33 +1,70 @@
-// 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.
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { fieldFocusVisible, focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
 export const FIELD_RADIUS = "lg";
-export const FIELD_BORDER_WIDTH = "0.063rem";
-export const 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.
- */
-export 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;
+export const FIELD_BORDER_WIDTH = "1px";
+export const FIELD_TRANSITION = transitionFor(["border-color", "box-shadow", "background-color"]);
+/** Chakra `h`/`fontSize`/`px` for a control of this size — fields, selects and buttons share it. */
+export const controlSizeStyles = (size) => {
+    const spec = CONTROL_SIZES[size];
+    return { h: spec.height, minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };
+};
+/** Resting border one step firmer, used on hover only. */
+export const fieldHoverBorder = (colors) => liftToContrast(colors.boxborder[500], colors.background[50], AA_NON_TEXT);
+/** Resting box (surface, border, radius) shared by every field, native or composite. */
+export const fieldBoxStyles = (colors) => ({
+    bg: colors.background[50],
+    borderWidth: FIELD_BORDER_WIDTH,
+    borderStyle: "solid",
+    borderColor: colors.boxborder[500],
+    borderRadius: FIELD_RADIUS,
+    transition: FIELD_TRANSITION,
+});
+/** Value text: 400 weight, no tracking. */
+export const fieldTextStyles = (colors) => ({
+    color: colors.text[900],
+    fontWeight: 400,
+    letterSpacing: "normal",
+});
+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). */
+export const fieldControlStyles = (colors) => {
+    const disabled = disabledStyles(colors);
     return {
-        bg: theme.colors.background[50],
-        borderRadius: FIELD_RADIUS,
-        border: `${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: FIELD_TRANSITION,
+        ...fieldBoxStyles(colors),
+        ...fieldTextStyles(colors),
+        _placeholder: { color: placeholderInk(colors), opacity: 1 },
+        _hover: { borderColor: fieldHoverBorder(colors) },
+        _focusVisible: { borderColor: colors.primary[500], ...fieldFocusVisible(colors) },
+        _invalid: {
+            borderColor: colors.semanticText.error,
+            _hover: { borderColor: colors.semanticText.error },
+        },
+        _readOnly: { _hover: { borderColor: colors.boxborder[500] } },
+        _disabled: { ...disabled, _hover: { borderColor: disabled.borderColor } },
     };
 };
-/** Focus ring value (e.g. for `_focus` / `_focusWithin` pseudo styles). */
-export const fieldFocusRing = (theme, error = false) => `0 0 0 0.125rem ${error ? theme.colors.boxShadow.error : theme.colors.boxShadow.primary}`;
+/** Box-only styles for composite fields that track state in JS (SelectV2, SearchSelect, date pickers). */
+export 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 = { ...fieldBoxStyles(colors), borderColor, boxShadow: focused ? focusGlowShadow(colors) : "none" };
+    if (!disabled)
+        return box;
+    const { bg, borderColor: disabledBorder, cursor } = disabledStyles(colors);
+    return { ...box, bg, borderColor: disabledBorder, cursor };
+};
+/** Glow for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */
+export const fieldFocusRing = (theme) => focusGlowShadow(theme.colors);

package/dist/esm/Components/Common/useFieldIds.js

@@ -0,0 +1,23 @@
+import { useId } from "react";
+import { fieldMessageVisibility } from "./fieldMessageStyles.js";
+/** Stable ids for a field and its message row; `describedBy` points at whichever message is shown. */
+export const useFieldIds = (id, state = {}) => {
+    const generated = useId();
+    const inputId = id !== null && id !== void 0 ? id : `field-${generated.replace(/:/g, "")}`;
+    const helperId = `${inputId}-helper`;
+    const errorId = `${inputId}-error`;
+    const { showError, showHelper } = fieldMessageVisibility(state);
+    const describedBy = showError ? errorId : showHelper ? helperId : undefined;
+    return {
+        inputId,
+        labelId: `${inputId}-label`,
+        helperId,
+        errorId,
+        describedBy,
+        controlProps: {
+            id: inputId,
+            "aria-invalid": state.error ? true : undefined,
+            "aria-describedby": describedBy,
+        },
+    };
+};

package/dist/esm/Components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, VStack, Text, } from "@chakra-ui/react";
+import { AlertTriangle } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
+    const { colors } = useCustomTheme();
+    const cancelRef = useRef(null);
+    const [typedText, setTypedText] = useState("");
+    const requiresTypedConfirmation = confirmationText !== undefined;
+    const isConfirmDisabled = isConfirmLoading || (requiresTypedConfirmation && typedText !== confirmationText);
+    const actions = (_jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [_jsx(Button, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && isConfirmLoading }), _jsx(Button, { label: confirmLabel, onClick: onConfirm, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
+    const body = requiresTypedConfirmation ? (_jsxs(_Fragment, { children: [children, _jsx(TextInput, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (children);
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg, color: iconColor, children: icon !== null && icon !== void 0 ? icon : _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: title })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: bodyLayout === "stack" ? (_jsxs(VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : (_jsxs(_Fragment, { children: [body, actions] })) })] })] }));
+};
+export default ConfirmDialog;

package/dist/esm/Components/ConfirmDialog/ConfirmDialogProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/ContactForm/ContactForm.js

@@ -6,8 +6,8 @@ import { CircleCheck, CircleX } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import InputTextArea from "../InputTextArea/InputTextArea.js";
 import Button from "../Button/Button.js";
-/** Fully self-contained enquiry form — validates, POSTs to apiKey, and renders its own success/error alert; there is no onSubmit/onSuccess callback. */
-const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false, organizationId, customerId, buttonColorScheme = "primary", buttonSx, }) => {
+/** Self-contained enquiry form — validates, calls onSubmit or POSTs to apiKey, and renders its own success/error alert. */
+const ContactForm = ({ apiKey, onSubmit, customFields, getCustomValues, isDisabled = false, organizationId, customerId, buttonColorScheme = "primary", buttonSx, }) => {
     const { colors } = useCustomTheme();
     const [formData, setFormData] = useState({
         firstName: "",
@@ -52,7 +52,7 @@ const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false
             return;
         if (!validate())
             return;
-        if (!apiKey) {
+        if (!onSubmit && !apiKey) {
             setResponse({
                 title: "API key missing",
                 isSuccess: false,
@@ -73,17 +73,21 @@ const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false
         };
         try {
             setIsLoading(true);
-            const response = await fetch(apiKey, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify(payload),
-            });
-            const result = await response.json();
-            if (!response.ok)
-                throw new Error(result.message || "Submission failed");
-            // onSubmit(formData);
+            if (onSubmit) {
+                await onSubmit(payload);
+            }
+            else if (apiKey) {
+                const response = await fetch(apiKey, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(payload),
+                });
+                const result = await response.json();
+                if (!response.ok)
+                    throw new Error(result.message || "Submission failed");
+            }
             setFormData({
                 firstName: "",
                 lastName: "",
@@ -107,6 +111,6 @@ const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false
             setIsLoading(false);
         }
     };
-    return (_jsxs(Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "2xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? (_jsxs(Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: "bold", variant: "solid", mb: 1, children: [(response === null || response === void 0 ? void 0 : response.isSuccess) ? _jsx(CircleCheck, {}) : _jsx(CircleX, {}), " \u00A0", " ", response.title] })) : null, _jsx(Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), _jsx(Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), _jsx(Box, { as: "form", onSubmit: handleSubmit, children: _jsxs(VStack, { spacing: 4, children: [_jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: (e) => handleChange("firstName", e.target.value), error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true }) }), _jsx(FormControl, { children: _jsx(TextInput, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), _jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: (e) => handleChange("phone", e.target.value), isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone }) }), _jsx(FormControl, { isInvalid: !!errors.email, children: _jsx(TextInput, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, _jsxs(FormControl, { children: [_jsx(Text, { fontSize: "sm", mb: 1, children: "Enquiry" }), _jsx(Box, { children: _jsx(InputTextArea, { placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }) })] }), _jsx(Button, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
+    return (_jsxs(Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? (_jsxs(Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: "bold", variant: "solid", mb: 1, children: [(response === null || response === void 0 ? void 0 : response.isSuccess) ? _jsx(CircleCheck, {}) : _jsx(CircleX, {}), " \u00A0", " ", response.title] })) : null, _jsx(Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), _jsx(Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), _jsx(Box, { as: "form", onSubmit: handleSubmit, children: _jsxs(VStack, { spacing: 4, children: [_jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: (e) => handleChange("firstName", e.target.value), error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true }) }), _jsx(FormControl, { children: _jsx(TextInput, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), _jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: (e) => handleChange("phone", e.target.value), isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone }) }), _jsx(FormControl, { isInvalid: !!errors.email, children: _jsx(TextInput, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, _jsx(InputTextArea, { label: "Enquiry", placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }), _jsx(Button, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
 };
 export default ContactForm;

package/dist/esm/Components/CopyButton/CopyButton.js

@@ -6,6 +6,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas, AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { transitionFor } from "../../Theme/tokens/primitives/index.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 /** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
 const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
@@ -26,9 +27,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
             /* clipboard unavailable — silently ignore */
         }
     };
-    // primary[500] is tuned for a white label on a filled button, not for reading as ink on the
-    // canvas — it fails AA here in 5 of 7 brands in dark mode. accentTextOnCanvas steps to the
-    // nearest rung that clears AA against the canvas this button actually sits on.
+    // NOTE: primary[500] fails AA as canvas ink in 5/7 brands (dark) — accentTextOnCanvas steps to a clearing rung.
     const accent = accentTextOnCanvas(theme.colors.primary, theme.colors.backgroundColor.main);
     const success = theme.colors.semanticText.success;
     const rowBackgrounds = listRowBackgrounds(theme.colors);
@@ -40,7 +39,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     if (variant === "button") {
         return (_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
             // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
-            borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.text[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
+            borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.text[700], fontSize: "14px", fontWeight: 500, transition: transitionFor(["border-color", "color"]), _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
     }
     return (_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.textMuted, _hover: { color: accent, bg: rowBackgrounds.active }, icon: copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }));
 };

package/dist/esm/Components/CustomModulesTable/DeleteModuleModal.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, Text, } from "@chakra-ui/react";
-import { AlertTriangle, Trash2 } from "lucide-react";
+import { Text } from "@chakra-ui/react";
+import { Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-import Button from "../Button/Button.js";
+import ConfirmDialog from "../ConfirmDialog/ConfirmDialog.js";
 const DeleteModuleModal = ({ isOpen, onClose, moduleName, isLoading, onConfirm, labels, }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: colors.semantic.error[50], color: accentTextOnCanvas(colors.semantic.error, colors.semantic.error[50]), children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", _jsx(Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
+    return (_jsx(ConfirmDialog, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeletion, iconBg: colors.semantic.error[50], iconColor: accentTextOnCanvas(colors.semantic.error, colors.semantic.error[50]), cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: _jsx(Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: _jsxs(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", _jsx(Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }) }));
 };
 export default DeleteModuleModal;

package/dist/esm/Components/CustomModulesTable/EditModuleModal.js

@@ -10,10 +10,8 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
-                                // [200] is the decorative divider rung (~1.2:1, correct for the ModalHeader border
-                                // above) — a real control's resting outline needs 1.4.11's 3:1, which is what every
-                                // other input in this library (TextInput, NumberInput, DatePicker) reads from [800].
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
+                                // NOTE: [200] is the decorative divider rung — a real control's outline needs 1.4.11's 3:1, from [800].
                                 borderColor: colors.boxborder[500], mb: 5 }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };
 export default EditModuleModal;