pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Components/Common/FormLabel.js

@@ -3,12 +3,22 @@ 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)();
     const clampStyles = clampLines ? {
@@ -19,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/FormattedDescription.d.ts

@@ -1,5 +1,7 @@
 type Props = {
+    /** Tiny pseudo-markdown only — "#"/"##"/"###" headings and "**bold**"; single "*italic*" markers are stripped but render with no italic style. */
     content?: string;
 };
+/** Not a full Markdown renderer — lists, links and code blocks render as literal text; returns null (no wrapper) when `content` is falsy. */
 declare const FormattedDescription: ({ content }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default FormattedDescription;

package/dist/Components/Common/FormattedDescription.js

@@ -41,6 +41,7 @@ const InlineText = ({ text }) => {
     }
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nodes });
 };
+/** Not a full Markdown renderer — lists, links and code blocks render as literal text; returns null (no wrapper) when `content` is falsy. */
 const FormattedDescription = ({ content }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (!content)

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

@@ -1,3 +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; prefer `FieldMessage`, which swaps it for the error. */
 declare const HelperText: ({ helperText, id }: {
     helperText: string;
     id?: string;

package/dist/Components/Common/HelperText.js

@@ -3,12 +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; 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,3 +1,4 @@
+/** 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,8 +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");
+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/chipTriggerSize.d.ts

@@ -0,0 +1,10 @@
+import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+export type ChipSize = "xs" | "sm";
+/** Sizes a select trigger so a chip row lands on the same height as a plain one. */
+export declare const chipTriggerSizeStyles: (size: ControlSize, hasChips: boolean, chipSize?: ChipSize) => {
+    minH: string;
+    fontSize: string;
+    px: string;
+    h?: string;
+    py?: string;
+};

package/dist/Components/Common/chipTriggerSize.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipTriggerSizeStyles = void 0;
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const CHIP_TAG_HEIGHT_PX = { xs: 20, sm: 24 };
+const CONTROL_BORDER_PX = 2;
+const controlHeightPx = (size) => parseFloat(controlSizes_1.CONTROL_SIZES[size].height) * 16;
+const chipRowPaddingY = (size, chipSize) => `${(controlHeightPx(size) - CHIP_TAG_HEIGHT_PX[chipSize] - CONTROL_BORDER_PX) / 2 / 16}rem`;
+/** Sizes a select trigger so a chip row lands on the same height as a plain one. */
+const chipTriggerSizeStyles = (size, hasChips, chipSize = "sm") => {
+    const spec = controlSizes_1.CONTROL_SIZES[size];
+    const base = { minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };
+    return hasChips ? { ...base, py: chipRowPaddingY(size, chipSize) } : { ...base, h: spec.height };
+};
+exports.chipTriggerSizeStyles = chipTriggerSizeStyles;

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.gray[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;

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

@@ -0,0 +1,3 @@
+import type { SystemStyleObject } from "@chakra-ui/styled-system";
+/** Centres a caller-supplied icon in a fixed box and pins its svg to that size, whatever size the caller gave it. */
+export declare const iconBoxSx: (px: number) => SystemStyleObject;

package/dist/Components/Common/iconBox.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconBoxSx = void 0;
+/** Centres a caller-supplied icon in a fixed box and pins its svg to that size, whatever size the caller gave it. */
+const iconBoxSx = (px) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 0,
+    flexShrink: 0,
+    "& > svg, & > * svg, & svg": {
+        width: `${px}px !important`,
+        height: `${px}px !important`,
+    },
+});
+exports.iconBoxSx = iconBoxSx;

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

@@ -0,0 +1,16 @@
+import { type FieldMessageState } from "./fieldMessageStyles";
+export type FieldIds = {
+    inputId: string;
+    labelId: string;
+    helperId: string;
+    errorId: string;
+    describedBy: string | undefined;
+    /** Spread onto the focusable control: `id`, `aria-invalid`, `aria-describedby`. */
+    controlProps: {
+        id: string;
+        "aria-invalid": true | undefined;
+        "aria-describedby": string | undefined;
+    };
+};
+/** Stable ids for a field and its message row; `describedBy` points at whichever message is shown. */
+export declare const useFieldIds: (id?: string, state?: FieldMessageState) => FieldIds;

package/dist/Components/Common/useFieldIds.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldIds = void 0;
+const react_1 = require("react");
+const fieldMessageStyles_1 = require("./fieldMessageStyles");
+/** Stable ids for a field and its message row; `describedBy` points at whichever message is shown. */
+const useFieldIds = (id, state = {}) => {
+    const generated = (0, react_1.useId)();
+    const inputId = id !== null && id !== void 0 ? id : `field-${generated.replace(/:/g, "")}`;
+    const helperId = `${inputId}-helper`;
+    const errorId = `${inputId}-error`;
+    const { showError, showHelper } = (0, fieldMessageStyles_1.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,
+        },
+    };
+};
+exports.useFieldIds = useFieldIds;

package/dist/Components/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ConfirmDialogProps } from "./ConfirmDialogProps";
+declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+export default ConfirmDialog;

package/dist/Components/ConfirmDialog/ConfirmDialog.js

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

package/dist/Components/ConfirmDialog/ConfirmDialogProps.d.ts

@@ -0,0 +1,45 @@
+import type { ReactElement, ReactNode } from "react";
+/** Reusable Cancel/Confirm modal for delete/deactivate-style prompts — the shared shape behind the library's confirm modals. */
+export interface ConfirmDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Fires on Confirm click; does not close the dialog — call onClose yourself. */
+    onConfirm: () => void;
+    title: string;
+    /** Body content rendered above the action row (a Text, a description + quote block, ...). */
+    children: ReactNode;
+    /** Rendered inside the header swatch. Defaults to a warning triangle. */
+    icon?: ReactNode;
+    /** Header swatch background; callers resolve their own tone (soft tint vs solid scale). */
+    iconBg: string;
+    /** Header swatch icon/text color, paired with `iconBg`. */
+    iconColor: string;
+    /** "destructive" fills Confirm red; "neutral" leaves it primary. Defaults to "destructive". */
+    tone?: "destructive" | "neutral";
+    /** Defaults to "Cancel". */
+    cancelLabel?: string;
+    /** Defaults to "Confirm". */
+    confirmLabel?: string;
+    /** Left icon on the Confirm button. */
+    confirmIcon?: ReactElement;
+    /** Shows a spinner on Confirm and disables it. */
+    isConfirmLoading?: boolean;
+    /** Also disables Cancel while `isConfirmLoading`. Defaults to true. */
+    disableCancelWhilePending?: boolean;
+    /** Requires typing this exact string before Confirm enables. Omit to skip the field entirely. */
+    confirmationText?: string;
+    /** Label for the typed-confirmation field; only used when `confirmationText` is set. */
+    confirmationLabel?: string;
+    /** "flush": children + action row as direct siblings (default). "stack": both in a spaced VStack. */
+    bodyLayout?: "flush" | "stack";
+    /** VStack spacing in "stack" layout. Defaults to 4. */
+    bodySpacing?: number;
+    /** Extra top padding on the action row. Defaults to 0. */
+    actionsPt?: number;
+    /** Pins initial focus to Cancel via Chakra's `initialFocusRef`. Defaults to true. */
+    focusCancelOnOpen?: boolean;
+    /** Defaults to true. */
+    isCentered?: boolean;
+    closeOnEsc?: boolean;
+    closeOnOverlayClick?: boolean;
+}

package/dist/Components/ConfirmDialog/ConfirmDialogProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ContactForm/ContactForm.d.ts

@@ -1,3 +1,4 @@
 import { ContactFormProps } from "./ContactFormProps";
-declare const ContactForm: ({ apiKey, customFields, getCustomValues, isDisabled, organizationId, customerId, buttonColorScheme, buttonSx, }: ContactFormProps) => import("react/jsx-runtime").JSX.Element;
+/** Self-contained enquiry form — validates, calls onSubmit or POSTs to apiKey, and renders its own success/error alert. */
+declare const ContactForm: ({ apiKey, onSubmit, customFields, getCustomValues, isDisabled, organizationId, customerId, buttonColorScheme, buttonSx, }: ContactFormProps) => import("react/jsx-runtime").JSX.Element;
 export default ContactForm;

package/dist/Components/ContactForm/ContactForm.js

@@ -11,7 +11,8 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const InputTextArea_1 = __importDefault(require("../InputTextArea/InputTextArea"));
 const Button_1 = __importDefault(require("../Button/Button"));
-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 } = (0, useCustomTheme_1.useCustomTheme)();
     const [formData, setFormData] = (0, react_1.useState)({
         firstName: "",
@@ -56,7 +57,7 @@ const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false
             return;
         if (!validate())
             return;
-        if (!apiKey) {
+        if (!onSubmit && !apiKey) {
             setResponse({
                 title: "API key missing",
                 isSuccess: false,
@@ -77,17 +78,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: "",
@@ -111,6 +116,6 @@ const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false
             setIsLoading(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "2xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? ((0, jsx_runtime_1.jsxs)(react_2.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) ? (0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheck, {}) : (0, jsx_runtime_1.jsx)(lucide_react_1.CircleX, {}), " \u00A0", " ", response.title] })) : null, (0, jsx_runtime_1.jsx)(react_2.Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), (0, jsx_runtime_1.jsx)(react_2.Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "form", onSubmit: handleSubmit, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.email, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, (0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", mb: 1, children: "Enquiry" }), (0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(InputTextArea_1.default, { placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }) })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? ((0, jsx_runtime_1.jsxs)(react_2.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) ? (0, jsx_runtime_1.jsx)(lucide_react_1.CircleCheck, {}) : (0, jsx_runtime_1.jsx)(lucide_react_1.CircleX, {}), " \u00A0", " ", response.title] })) : null, (0, jsx_runtime_1.jsx)(react_2.Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), (0, jsx_runtime_1.jsx)(react_2.Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "form", onSubmit: handleSubmit, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.FormControl, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.email, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, (0, jsx_runtime_1.jsx)(InputTextArea_1.default, { label: "Enquiry", placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
 };
 exports.default = ContactForm;