pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.63

package/dist/Components/CircularProgress/CircularProgress.js

@@ -5,20 +5,16 @@ const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const arc_1 = require("./arc");
 const Circle = (0, react_1.chakra)("circle");
-const LABEL_FONT = {
-    sm: "0.625rem",
-    md: "0.75rem",
-    lg: "1rem",
-};
 const scaleFor = (colors, tone) => tone === "info" ? colors.primary : (0, tone_1.toneScale)(colors, tone);
 /** Ring-shaped determinate progress with a centred label — for a linear bar use ProgressBar. */
 const CircularProgress = ({ value, max = 100, size = "md", thickness, tone = "info", label, "aria-label": ariaLabel, "data-testid": testId, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const diameter = arc_1.SIZE_PX[size];
-    const stroke = thickness !== null && thickness !== void 0 ? thickness : arc_1.THICKNESS_PX[size];
+    const { diameter, thickness: defaultStroke, label: labelSize } = (0, arc_1.resolveDiameter)(size);
+    const stroke = thickness !== null && thickness !== void 0 ? thickness : defaultStroke;
     const { radius, circumference, fraction, clamped, safeMax, dashOffset } = (0, arc_1.arcGeometry)(diameter, stroke, value, max);
     const ink = (0, tone_1.resolveSoftTone)(colors, scaleFor(colors, tone), colors.background[50]).fg;
     const center = diameter / 2;
@@ -34,6 +30,6 @@ const CircularProgress = ({ value, max = 100, size = "md", thickness, tone = "in
                             transformOrigin: "50% 50%",
                             transition: (0, motion_1.transitionFor)(["stroke-dashoffset"]),
                             ...(0, motion_2.reducedMotionSx)(),
-                        } })] }), label !== undefined && label !== null && ((0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", fontSize: LABEL_FONT[size], fontWeight: 600, lineHeight: 1, color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: label }))] }));
+                        } })] }), label !== undefined && label !== null && ((0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", fontSize: labelSize, fontWeight: 600, lineHeight: 1, color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: label }))] }));
 };
 exports.default = CircularProgress;

package/dist/Components/CircularProgress/CircularProgressProps.d.ts

@@ -2,15 +2,17 @@ import type { ReactNode } from "react";
 import type { Tone } from "../../Theme/tokens/builders/tone";
 /** Diameter preset: sm 32px, md 48px, lg 72px. */
 export type CircularProgressSize = "sm" | "md" | "lg";
+/** A preset, or a diameter in px (clamped to 24..160). */
+export type CircularProgressDiameter = CircularProgressSize | number;
 /** Props for the SVG ring CircularProgress; the arc starts at 12 o'clock and fills clockwise. */
 export interface CircularProgressProps {
     /** Current progress, clamped to 0..max. */
     value: number;
     /** Upper bound of the range; default 100. */
     max?: number;
-    /** Diameter preset (32 / 48 / 72px); default "md". */
-    size?: CircularProgressSize;
-    /** Ring stroke in px; defaults by size (4 / 5 / 7). */
+    /** Diameter preset (32 / 48 / 72px) or a px number clamped to 24..160; default "md". */
+    size?: CircularProgressDiameter;
+    /** Ring stroke in px; defaults by preset (4 / 5 / 7), or a tenth of a numeric size (3..12). */
     thickness?: number;
     /** Fill colour; default "info", which paints the brand primary rather than blue. */
     tone?: Tone;

package/dist/Components/CircularProgress/arc.d.ts

@@ -1,6 +1,14 @@
-import type { CircularProgressSize } from "./CircularProgressProps";
+import type { CircularProgressDiameter, CircularProgressSize } from "./CircularProgressProps";
 export declare const SIZE_PX: Record<CircularProgressSize, number>;
 export declare const THICKNESS_PX: Record<CircularProgressSize, number>;
+export declare const LABEL_REM: Record<CircularProgressSize, string>;
+export declare const MIN_DIAMETER = 24;
+export declare const MAX_DIAMETER = 160;
+export declare const resolveDiameter: (size: CircularProgressDiameter) => {
+    diameter: number;
+    thickness: number;
+    label: string;
+};
 export declare const clampValue: (value: number, max: number) => number;
 export declare const arcGeometry: (diameter: number, thickness: number, value: number, max: number) => {
     radius: number;

package/dist/Components/CircularProgress/arc.js

@@ -1,8 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.arcGeometry = exports.clampValue = exports.THICKNESS_PX = exports.SIZE_PX = void 0;
+exports.arcGeometry = exports.clampValue = exports.resolveDiameter = exports.MAX_DIAMETER = exports.MIN_DIAMETER = exports.LABEL_REM = exports.THICKNESS_PX = exports.SIZE_PX = void 0;
 exports.SIZE_PX = { sm: 32, md: 48, lg: 72 };
 exports.THICKNESS_PX = { sm: 4, md: 5, lg: 7 };
+exports.LABEL_REM = { sm: "0.625rem", md: "0.75rem", lg: "1rem" };
+exports.MIN_DIAMETER = 24;
+exports.MAX_DIAMETER = 160;
+const resolveDiameter = (size) => {
+    if (typeof size === "string")
+        return { diameter: exports.SIZE_PX[size], thickness: exports.THICKNESS_PX[size], label: exports.LABEL_REM[size] };
+    const diameter = Math.min(Math.max(Number.isFinite(size) ? Math.round(size) : exports.SIZE_PX.md, exports.MIN_DIAMETER), exports.MAX_DIAMETER);
+    return {
+        diameter,
+        thickness: Math.min(Math.max(Math.round(diameter / 10), 3), 12),
+        label: `${Math.min(Math.max(Math.round(diameter / 4), 10), 32) / 16}rem`,
+    };
+};
+exports.resolveDiameter = resolveDiameter;
 const clampValue = (value, max) => Number.isFinite(value) ? Math.min(Math.max(value, 0), max) : 0;
 exports.clampValue = clampValue;
 const arcGeometry = (diameter, thickness, value, max) => {

package/dist/Components/Common/FormLabel.js

@@ -37,7 +37,7 @@ const TextLabel = ({ label, id, isRequired = false, isInformation = false, infor
         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 }) }))] }));
+    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: "xs", 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: "xs", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
     // 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 }));
 };

package/dist/Components/Common/FormattedDescription.js

@@ -10,7 +10,7 @@ const InlineText = ({ text }) => {
         if (text.startsWith("**", i)) {
             const end = text.indexOf("**", i + 2);
             if (end !== -1) {
-                nodes.push((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: "bold", children: text.slice(i + 2, end) }, `b-${i}`));
+                nodes.push((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 700, children: text.slice(i + 2, end) }, `b-${i}`));
                 i = end + 2;
                 continue;
             }

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

@@ -1,7 +1,8 @@
-/** `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 }: {
+type HelperTextProps = {
     helperText: string;
     id?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+};
+/** `id` is optional — pass one to own aria-describedby; omitted, a FormControl wires its own. */
+/** Renders `helperText` unconditionally; prefer `FieldMessage`, which swaps it for the error. */
+declare const HelperText: ({ helperText, id }: HelperTextProps) => import("react/jsx-runtime").JSX.Element;
 export default HelperText;

package/dist/Components/Common/HelperText.js

@@ -4,19 +4,22 @@ 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. */
+const UnregisteredHelperText = ({ helperText, id, style }) => {
+    const styles = (0, react_1.useFormControlStyles)();
+    return ((0, jsx_runtime_1.jsx)(react_1.chakra.div, { id: id, ...style, __css: styles.helperText, className: "chakra-form__helper-text", children: helperText }));
+};
+/** `id` is optional — pass one to own aria-describedby; omitted, a FormControl wires its own. */
 /** 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 = (0, fieldMessageStyles_1.fieldMessageStyles)(theme.colors);
-    // FormHelperText throws without a FormControl ancestor; Checkbox, MultiSelect and
-    // SearchSelect render this outside one.
     if (!field) {
-        return ((0, jsx_runtime_1.jsx)(react_1.Text, { ...idProp, ...style, children: helperText }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Text, { id: id, ...style, children: helperText }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.FormHelperText, { ...idProp, ...style, children: helperText }));
+    // NOTE: FormHelperText makes Chakra append a dangling `<fieldId>-helptext` to aria-describedby.
+    if (id)
+        return (0, jsx_runtime_1.jsx)(UnregisteredHelperText, { helperText: helperText, id: id, style: style });
+    return (0, jsx_runtime_1.jsx)(react_1.FormHelperText, { ...style, children: helperText });
 };
 exports.default = HelperText;

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

@@ -2,7 +2,7 @@ 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_RADIUS: "lg";
 export declare const FIELD_BORDER_WIDTH = "1px";
 /** No box-shadow: the focus ring must be present the frame focus lands, not fade in. */
 export declare const FIELD_TRANSITION: string;
@@ -21,7 +21,7 @@ export declare const fieldBoxStyles: (colors: PaletteProps) => {
     borderWidth: string;
     borderStyle: string;
     borderColor: string;
-    borderRadius: string;
+    borderRadius: "lg";
     transition: string;
 };
 /** Value text: 400 weight, no tracking. */
@@ -44,7 +44,7 @@ export declare const getFieldStateStyles: (theme: CustomThemeProps, { error, foc
     bg: string;
     borderWidth: string;
     borderStyle: string;
-    borderRadius: string;
+    borderRadius: "lg";
     transition: string;
 } | {
     bg: string;
@@ -53,7 +53,7 @@ export declare const getFieldStateStyles: (theme: CustomThemeProps, { error, foc
     boxShadow: string;
     borderWidth: string;
     borderStyle: string;
-    borderRadius: string;
+    borderRadius: "lg";
     transition: string;
 };
 /** Glow for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */

package/dist/Components/Common/fieldStyles.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 radii_1 = require("../../Theme/tokens/primitives/radii");
 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_RADIUS = radii_1.RADIUS_ROLE.field;
 exports.FIELD_BORDER_WIDTH = "1px";
 /** No box-shadow: the focus ring must be present the frame focus lands, not fade in. */
 exports.FIELD_TRANSITION = (0, motion_1.transitionFor)(["border-color", "background-color"]);

package/dist/Components/ConfirmDialog/ConfirmDialog.js

@@ -8,6 +8,7 @@ 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 surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 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, }) => {
@@ -18,6 +19,6 @@ const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, icon
     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] })) })] })] }));
+    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: (0, surfaceRaised_1.raisedRule)(colors), 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/ContactForm/ContactForm.js

@@ -116,6 +116,6 @@ const ContactForm = ({ apiKey, onSubmit, customFields, getCustomValues, isDisabl
             setIsLoading(false);
         }
     };
-    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" })] }) })] }));
+    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: 700, 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;

package/dist/Components/CopyButton/CopyButton.js

@@ -12,6 +12,7 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const primitives_1 = require("../../Theme/tokens/primitives");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 /** 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, }) => {
@@ -36,16 +37,22 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     const accent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.backgroundColor.main);
     const success = theme.colors.semanticText.success;
     const rowBackgrounds = (0, rowStates_1.listRowBackgrounds)(theme.colors);
+    const announcement = ((0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", position: "fixed", top: 0, left: 0, children: copied ? copiedLabel : "" }));
     if (variant === "menu-item") {
         const hoverAccent = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, rowBackgrounds.active);
         const hoverSuccess = (0, outlineRung_1.liftToContrast)(theme.colors.semantic.success[500], rowBackgrounds.active, accentText_1.AA_NORMAL_TEXT);
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: rowBackgrounds.active }, onClick: handleCopy, children: [copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: hoverSuccess })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: hoverAccent })), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "14px", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "button", tabIndex: 0, align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: rowBackgrounds.active }, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), onClick: handleCopy, onKeyDown: (e) => {
+                        if (e.key !== "Enter" && e.key !== " ")
+                            return;
+                        e.preventDefault();
+                        handleCopy(e);
+                    }, children: [copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: hoverSuccess })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: hoverAccent })), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "sm", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }), announcement] }));
     }
     if (variant === "button") {
-        return ((0, jsx_runtime_1.jsxs)(react_2.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: (0, primitives_1.transitionFor)(["border-color", "color"]), _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: copied ? copiedLabel : label })] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.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: "sm", fontWeight: 500, transition: (0, primitives_1.transitionFor)(["border-color", "color"]), _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: copied ? copiedLabel : label })] }), announcement] }));
     }
-    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: copied ? copiedLabel : tooltip, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.textMuted, _hover: { color: accent, bg: rowBackgrounds.active }, icon: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }) }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: copied ? copiedLabel : tooltip, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.textMuted, _hover: { color: accent, bg: rowBackgrounds.active }, icon: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }) }) }), announcement] }));
 };
 exports.default = CopyButton;

package/dist/Components/CouponField/CouponField.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const tone_1 = require("../../Theme/tokens/builders/tone");
@@ -62,11 +63,11 @@ const CouponField = ({ status = "idle", appliedCode, savedAmount, error, onApply
     };
     const success = (0, tone_1.resolveSoftTone)(colors, (0, tone_1.toneScale)(colors, "success"), colors.background[100]);
     if (status === "applied" && appliedCode) {
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, p: 3, pl: 4, borderRadius: "1rem", bg: colors.background[100], "data-testid": testId, "data-status": "applied", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", align: "center", justify: "center", boxSize: 8, flexShrink: 0, borderRadius: "full", bg: success.bg, color: success.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.BadgeCheck, { size: 16, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, role: "status", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], noOfLines: 1, children: copy.applied(appliedCode) }), savedAmount !== undefined && savedAmount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.semanticText.success, sx: { fontVariantNumeric: "tabular-nums" }, children: copy.saved((0, price_1.formatPrice)(savedAmount, { currency, locale })) }))] }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} coupon ${appliedCode}`, children: copy.remove })] }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, p: 3, pl: 4, borderRadius: "2xl", bg: colors.background[100], "data-testid": testId, "data-status": "applied", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", align: "center", justify: "center", boxSize: 8, flexShrink: 0, borderRadius: "full", bg: success.bg, color: success.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.BadgeCheck, { size: 16, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, role: "status", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], noOfLines: 1, children: copy.applied(appliedCode) }), savedAmount !== undefined && savedAmount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.semanticText.success, sx: typography_1.NUMERIC_TEXT, children: copy.saved((0, price_1.formatPrice)(savedAmount, { currency, locale })) }))] }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} coupon ${appliedCode}`, children: copy.remove })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": open, "aria-controls": panelId, disabled: applying || status === "error", onClick: () => setOpen(!open), display: "flex", alignItems: "center", gap: 3, w: "100%", minH: "3rem", px: 4, borderRadius: "1rem", bg: colors.background[100], color: colors.header[900], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Ticket, { size: 18, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)({ transform: open ? "rotate(180deg)" : "none" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: "flex-start", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { size: "lg", variant: "filled", "aria-label": copy.inputLabel, placeholder: copy.placeholder, value: text, onChange: (event) => setText(normalise(event.target.value)), error: status === "error", errorMessage: status === "error" ? error : undefined, isDisabled: applying, autoComplete: "off", autoCapitalize: "characters", spellCheck: false }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", disabled: applying, "aria-label": `${copy.applySuggestion(s.code)}: ${s.title}`, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": open, "aria-controls": panelId, disabled: applying || status === "error", onClick: () => setOpen(!open), display: "flex", alignItems: "center", gap: 3, w: "100%", minH: "3rem", px: 4, borderRadius: "2xl", bg: colors.background[100], color: colors.header[900], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Ticket, { size: 18, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)({ transform: open ? "rotate(180deg)" : "none" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: "flex-start", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { size: "lg", variant: "filled", "aria-label": copy.inputLabel, placeholder: copy.placeholder, value: text, onChange: (event) => setText(normalise(event.target.value)), error: status === "error", errorMessage: status === "error" ? error : undefined, isDisabled: applying, autoComplete: "off", autoCapitalize: "characters", spellCheck: false }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", disabled: applying, "aria-label": `${copy.applySuggestion(s.code)}: ${s.title}`, onClick: () => {
                                             setText(s.code);
                                             submit(s.code);
-                                        }, display: "flex", alignItems: "center", gap: 3, w: "100%", p: 3, borderRadius: "0.75rem", bg: colors.background[100], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, _disabled: { cursor: "not-allowed", opacity: 0.6 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flexShrink: 0, px: 2, py: 1, borderRadius: "0.5rem", bg: colors.background[200], fontSize: "xs", fontWeight: 700, letterSpacing: "0.04em", color: colors.header[900], children: s.code }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", children: applying ? `${copy.apply}…` : "" })] }));
+                                        }, display: "flex", alignItems: "center", gap: 3, w: "100%", p: 3, borderRadius: "xl", bg: colors.background[100], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, _disabled: { cursor: "not-allowed", opacity: 0.6 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flexShrink: 0, px: 2, py: 1, borderRadius: "lg", bg: colors.background[200], fontSize: "xs", fontWeight: 700, letterSpacing: "0.04em", color: colors.header[900], children: s.code }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", children: applying ? `${copy.apply}…` : "" })] }));
 };
 exports.default = CouponField;

package/dist/Components/CustomModulesTable/CustomModulesTable.js

@@ -8,6 +8,7 @@ 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 planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const EditModuleModal_1 = __importDefault(require("./EditModuleModal"));
@@ -34,20 +35,21 @@ const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, is
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [editTarget, setEditTarget] = (0, react_1.useState)(null);
     const [deleteTarget, setDeleteTarget] = (0, react_1.useState)(null);
-    const border = colors.boxborder[200];
+    const edge = colors.boxborder[200];
     const surface = colors.background[50];
+    const rule = (0, planeStep_1.cardRule)(colors);
     const muted = colors.textMuted;
     const heading = colors.text[800];
-    const headBg = colors.backgroundColor.tableHeader;
+    const headBg = (0, planeStep_1.bandOn)(colors.backgroundColor.tableHeader, surface);
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
         color: muted,
-        borderColor: border,
+        borderColor: rule,
         py: 3,
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: "sm", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleOwner }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: modules.map((item) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, children: item.moduleName }) }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), (0, jsx_runtime_1.jsx)(EditModuleModal_1.default, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
                     if (editTarget) {
                         await (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
                             moduleId: editTarget.module_id,

package/dist/Components/CustomModulesTable/CustomModulesTableProps.d.ts

@@ -2,7 +2,9 @@
 export type ModuleItem = {
     /** snake_case, unlike moduleName/ownerLabel here and unlike UpdateModulePayload.moduleId — casing isn't symmetric. */
     module_id: number;
+    /** One line with the full name in a tooltip; seeds the edit field. */
     moduleName: string;
+    /** Shown as is, or "—" when empty. */
     ownerLabel?: string;
 };
 /** Shape passed to onUpdateModule — `moduleId` identifies the item being edited, `moduleName` is the new value from the modal. */
@@ -15,31 +17,47 @@ export type UpdateModulePayload = {
  * key has a sensible English default so the component works standalone.
  */
 export type CustomModulesTableLabels = {
+    /** Card heading; defaults to "Custom Modules". */
     title?: string;
     moduleName?: string;
     moduleOwner?: string;
+    /** Header of the right-aligned Edit/Delete column. */
     action?: string;
     edit?: string;
+    /** Row button label, reused for the delete dialog's confirm button. */
     delete?: string;
+    /** Empty-state title shown when `modules` is empty. */
     noModules?: string;
+    /** @deprecated Never rendered; the loading state shows skeleton bars without text. */
     loading?: string;
+    /** Edit dialog heading. */
     editModuleTitle?: string;
+    /** Edit field placeholder; the field has no visible or ARIA label besides it. */
     moduleNamePlaceholder?: string;
+    /** Cancel button of both the edit and the delete dialog. */
     cancel?: string;
+    /** Edit dialog submit; disabled while the trimmed name is empty. */
     update?: string;
+    /** Delete dialog heading. */
     confirmDeletion?: string;
+    /** Delete prompt, rendered as `<prefix> <moduleName>?`. */
     deleteConfirmPrefix?: string;
 };
 /** Fixed 2-column module list (name, owner) built on raw Chakra table parts, not the library Table — closed props, no ref/...rest reach the root Box. */
 export interface CustomModulesTableProps {
+    /** Rows keyed by module_id; an empty array shows the empty state. */
     modules: ModuleItem[];
+    /** Replaces the table with four skeleton bars; the heading stays. */
     isLoading?: boolean;
+    /** Spinner on the edit dialog's Update button only. */
     isUpdating?: boolean;
+    /** Spinner on the delete dialog's confirm button only. */
     isDeleting?: boolean;
     /** Edit modal closes once this promise resolves; a rejection is unhandled (never caught) and isUpdating only toggles the button spinner, not the close. */
     onUpdateModule?: (payload: UpdateModulePayload) => void | Promise<void>;
     /** Delete modal closes once this promise resolves; a rejection is unhandled (never caught) and isDeleting only toggles the button spinner, not the close. */
     onDeleteModule?: (moduleId: number) => void | Promise<void>;
+    /** Partial overrides merged over the English defaults, per key. */
     labels?: CustomModulesTableLabels;
 }
 /** Internal edit-name dialog rendered by CustomModulesTable; `labels` must already be fully resolved, not per-key optional. */

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, labels, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -15,7 +16,7 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": 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 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };

package/dist/Components/DatePicker/CalendarPanel.js

@@ -124,11 +124,11 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                 const dayLabel = dayStates
                     ? (0, dayStates_1.dayAccessibleName)((0, date_fns_1.format)(thisDay, "d MMMM yyyy"), states)
                     : (0, date_fns_1.format)(thisDay, "d MMMM yyyy");
-                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? (0, dayStates_1.dayStateClassName)(states) : undefined, "aria-label": dayLabel, "aria-selected": isSelected || isStart || isEnd || undefined, "aria-current": isToday ? "date" : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? (0, dayStates_1.dayStateClassName)(states) : undefined, "aria-label": dayLabel, "aria-selected": isSelected || isStart || isEnd || undefined, "aria-current": isToday ? "date" : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs-plus", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
                             ? {}
                             : circleSolid
                                 ? { bg: solidHoverFill, color: circleHoverColor }
-                                : { bg: rangeBg }, children: [(0, date_fns_1.format)(thisDay, "d"), hasDayOverlay && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__content`, position: "absolute", left: 0, right: 0, bottom: "0.0625rem", display: "flex", alignItems: "flex-end", justifyContent: "center", lineHeight: "1", fontSize: "0.5rem", 
+                                : { bg: rangeBg }, children: [(0, date_fns_1.format)(thisDay, "d"), hasDayOverlay && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__content`, position: "absolute", left: 0, right: 0, bottom: "px", display: "flex", alignItems: "flex-end", justifyContent: "center", lineHeight: "1", fontSize: "0.5rem", 
                                 // The overlay is decoration: clicks belong to the day button under it.
                                 pointerEvents: "none", children: customContent !== null && customContent !== void 0 ? customContent : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__marker`, w: "0.25rem", h: "0.25rem", borderRadius: "full", bg: markerColor })) }))] }) }, thisDay.toString()));
                 day = (0, date_fns_1.addDays)(day, 1);

package/dist/Components/DatePicker/DatePicker.js

@@ -62,6 +62,12 @@ function CustomDatePicker(props) {
         }
         onOpen();
     };
+    const handleTriggerKeyDown = (event) => {
+        if (isOpen || (event.key !== "Enter" && event.key !== "ArrowDown"))
+            return;
+        event.preventDefault();
+        handleOpen();
+    };
     (0, react_1.useEffect)(() => {
         if (!isRange) {
             if (selectedDate instanceof Date) {
@@ -174,7 +180,7 @@ function CustomDatePicker(props) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen, onClose, tempDate, props, emitSingle]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { onClick: handleOpen, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { appendToParentPortal: false, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [showDate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.subMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, {}) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)("select", { value: currentMonth.getMonth(), onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { onClick: handleOpen, onKeyDown: handleTriggerKeyDown, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { appendToParentPortal: false, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [showDate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.subMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, {}) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)("select", { value: currentMonth.getMonth(), onChange: (e) => {
                                                                     const newMonth = parseInt(e.target.value, 10);
                                                                     setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
                                                                 }, children: Array.from({ length: 12 }).map((_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM") }, i))) }), (0, jsx_runtime_1.jsx)("select", { value: currentMonth.getFullYear(), onChange: (e) => {
@@ -188,7 +194,7 @@ function CustomDatePicker(props) {
                                                                     if (!disableToday && !isRange) {
                                                                         handleDaySelect(new Date(today));
                                                                     }
-                                                                }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.addMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, {}) })] })] }), (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_2.Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: (updatedDate) => {
+                                                                }, "aria-label": "Today", sx: { fontSize: "xs", px: 2 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.addMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, {}) })] })] }), (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: 700, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_2.Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             emitSingle(updatedDate);
                                         } })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", onClick: () => {

package/dist/Components/DatePicker/RangeDatePicker.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
-import { RangeDatePickerProps } from "./DatePickerProps";
-/** Two-endpoint range field; `onChange` fires on Apply, outside click or Escape in the calendar — never on a bare day click. */
-export declare const RangeDatePicker: React.FC<RangeDatePickerProps>;
+/** Two-endpoint range field; `onChange` fires on Apply, outside click or calendar Escape, never a bare day click; `ref` is the `<input>`. */
+export declare const RangeDatePicker: React.ForwardRefExoticComponent<import("./DatePickerProps").BaseDatePickerProps & {
+    isRange: true;
+    selectedDate?: import("./DatePickerProps").RangeDate | null;
+    value?: import("./DatePickerProps").RangeDate | null;
+    onChange: (range: import("./DatePickerProps").RangeDate | null) => void;
+    dayStates?: import("./dayStates").DayStates;
+    renderDayContent?: import("./dayStates").RenderDayContent;
+} & React.RefAttributes<HTMLInputElement>>;
 export default RangeDatePicker;