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

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,4 +1,4 @@
 import { ContactFormProps } from "./ContactFormProps";
-/** Fully self-contained enquiry form — validates, POSTs to apiKey, and renders its own success/error alert; there is no onSubmit/onSuccess callback. */
-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,8 +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"));
-/** Fully self-contained enquiry form — validates, POSTs to apiKey, and renders its own success/error alert; there is no onSubmit/onSuccess callback. */
-const ContactForm = ({ apiKey, customFields, getCustomValues, isDisabled = false, organizationId, customerId, buttonColorScheme = "primary", buttonSx, }) => {
+/** Self-contained enquiry form — validates, calls onSubmit or POSTs to apiKey, and renders its own success/error alert. */
+const ContactForm = ({ apiKey, onSubmit, customFields, getCustomValues, isDisabled = false, organizationId, customerId, buttonColorScheme = "primary", buttonSx, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [formData, setFormData] = (0, react_1.useState)({
         firstName: "",
@@ -57,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,
@@ -78,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: "",
@@ -112,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;

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

@@ -1,9 +1,23 @@
 import { SystemStyleObject } from "@chakra-ui/react";
 import { ReactNode } from "react";
-/** apiKey is optional — omitting it fails submission silently with an inline "API key missing" alert, not a thrown error. */
+/** The built-in fields plus any customValues, sent to onSubmit and/or POSTed to apiKey. */
+export type ContactFormPayload = {
+    name: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    message: string;
+    customerId: string | number;
+    organizationId: string | number;
+    [key: string]: unknown;
+};
+/** apiKey is optional — omitting it (with no onSubmit either) fails with an inline "API key missing" alert, not a thrown error. */
 export interface ContactFormProps {
-    /** The POST endpoint URL the form fetches to — not an auth token; a real API key/secret string fails silently as an invalid URL. */
+    /** The POST endpoint URL the form fetches to when no onSubmit is given — not an auth token. */
     apiKey?: string;
+    /** Called with the submitted payload before/instead of the apiKey fetch; awaited if it returns a promise. */
+    onSubmit?: (payload: ContactFormPayload) => void | Promise<void>;
     customerId: string | number;
     organizationId: string | number;
     isDisabled?: boolean;

package/dist/Components/CopyButton/CopyButton.js

@@ -11,6 +11,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 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 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, }) => {
@@ -31,9 +32,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
             /* clipboard unavailable — silently ignore */
         }
     };
-    // primary[500] is tuned for a white label on a filled button, not for reading as ink on the
-    // canvas — it fails AA here in 5 of 7 brands in dark mode. accentTextOnCanvas steps to the
-    // nearest rung that clears AA against the canvas this button actually sits on.
+    // NOTE: primary[500] fails AA as canvas ink in 5/7 brands (dark) — accentTextOnCanvas steps to a clearing rung.
     const accent = (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);
@@ -45,7 +44,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     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: "all 0.15s ease", _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 })] }));
+            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.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 }) }) }));
 };

package/dist/Components/CustomModulesTable/DeleteModuleModal.js

@@ -8,9 +8,9 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const Button_1 = __importDefault(require("../Button/Button"));
+const ConfirmDialog_1 = __importDefault(require("../ConfirmDialog/ConfirmDialog"));
 const DeleteModuleModal = ({ isOpen, onClose, moduleName, isLoading, onConfirm, labels, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: colors.semantic.error[50], color: (0, accentText_1.accentTextOnCanvas)(colors.semantic.error, colors.semantic.error[50]), children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }), (0, jsx_runtime_1.jsxs)(react_1.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.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeletion, iconBg: colors.semantic.error[50], iconColor: (0, accentText_1.accentTextOnCanvas)(colors.semantic.error, colors.semantic.error[50]), cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }) }));
 };
 exports.default = DeleteModuleModal;

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -15,10 +15,8 @@ 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: "2xl", overflow: "hidden", bg: colors.background[50], 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, 
-                                // [200] is the decorative divider rung (~1.2:1, correct for the ModalHeader border
-                                // above) — a real control's resting outline needs 1.4.11's 3:1, which is what every
-                                // other input in this library (TextInput, NumberInput, DatePicker) reads from [800].
+    return ((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, 
+                                // 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() })] })] })] })] }));
 };
 exports.default = EditModuleModal;

package/dist/Components/DatePicker/CalendarPanel.js

@@ -99,9 +99,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                 // Selection feedback outranks a state tint — the band is what tells the user what they picked.
                 if (!cellBg && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.cellBg))
                     cellBg = stateVisual.cellBg;
-                // Solid fill (selected/range-endpoint) needs the ink checked against that
-                // specific fill — `primary[500]` doesn't reliably clear AA for white text on
-                // every brand/mode (same gap the solid Button variant already accounts for).
+                // NOTE: primary[500] doesn't reliably clear AA for white text on every brand — same gap Button accounts for.
                 const primarySolid = (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
                 const solidFill = primarySolid.fill;
                 const solidHoverFill = primarySolid.hoverFill;
@@ -116,7 +114,8 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                     : isTentativeEnd
                         ? `1px solid ${theme.colors.primary[400]}`
                         : isToday
-                            ? `1px solid ${theme.colors.primary[300]}`
+                            // primary[300] falls under 3:1 against surfaceRaised in several dark palettes; 500 clears it everywhere.
+                            ? `1px solid ${theme.colors.primary[500]}`
                             : "1px solid transparent";
                 // A filled circle owns its own ink (checked against that fill by `onFilled`), so a state
                 // never repaints a selected day — it would undo that contrast guarantee.

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

@@ -1,3 +1,5 @@
-import { DatePickerProps } from "./DatePickerProps";
-/** Legacy pre-split implementation, still used internally by Table's filter pane — new code should use ThemeDatePicker (exported as DatePicker). */
-export default function CustomDatePicker(props: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+import { RangeDatePickerProps, SingleDatePickerDateProps } from "./DatePickerProps";
+/** Legacy pre-split implementation, still used internally by Table's filter pane — new code should use ThemeDatePicker (exported as DatePicker). Never supported `valueFormat="iso"`. */
+declare function CustomDatePicker(props: SingleDatePickerDateProps): JSX.Element;
+declare function CustomDatePicker(props: RangeDatePickerProps): JSX.Element;
+export default CustomDatePicker;

package/dist/Components/DatePicker/DatePicker.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = CustomDatePicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
@@ -12,22 +11,16 @@ const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const FormLabel_1 = require("../Common/FormLabel");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
-const inferPickerTypeFromFormat = (formatStr) => {
-    const lower = formatStr.toLowerCase();
-    const hasTime = lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
-    const hasDate = lower.includes("d") && lower.includes("m") && lower.includes("y");
-    if (hasTime && hasDate)
-        return "datetime";
-    if (hasTime)
-        return "time";
-    return "date";
-};
-/** Legacy pre-split implementation, still used internally by Table's filter pane — new code should use ThemeDatePicker (exported as DatePicker). */
+const pickerField_1 = require("./pickerField");
 function CustomDatePicker(props) {
-    var _a, _b;
-    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText = "Select a date", dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
+    var _a, _b, _c;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", width = "100%", disableToday = false, size = controlSizes_1.DEFAULT_CONTROL_SIZE, } = props;
+    const aliases = (0, pickerField_1.resolvePickerAliases)(props);
+    const disabled = aliases.isDisabled;
+    const placeholderText = (_a = aliases.placeholder) !== null && _a !== void 0 ? _a : "Select a date";
     const singleProps = !isRange ? props : null;
     const rangeProps = isRange ? props : null;
     const emitSingle = (0, react_1.useCallback)((date) => {
@@ -38,18 +31,15 @@ function CustomDatePicker(props) {
     };
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
-    const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
+    const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : (0, pickerField_1.inferPickerTypeFromFormat)(dateFormat);
     const inputRef = (0, react_1.useRef)(null);
     const today = new Date();
     const tomorrow = (0, date_fns_1.addDays)(today, 1);
     const showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
     const showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
     const selectedDate = singleProps !== null
-        ? (_b = ((_a = singleProps.value) !== null && _a !== void 0 ? _a : singleProps.selectedDate)) !== null && _b !== void 0 ? _b : null
+        ? (_c = ((_b = singleProps.value) !== null && _b !== void 0 ? _b : singleProps.selectedDate)) !== null && _c !== void 0 ? _c : null
         : null;
-    // const [currentMonth, setCurrentMonth] = useState<Date>(
-    //   isRange ? new Date() : selectedDate ?? new Date()
-    // );
     const [currentMonth, setCurrentMonth] = (0, react_1.useState)(isRange ? new Date() :
         selectedDate
             ? (disableToday && (0, date_fns_1.isSameDay)(selectedDate, today) ? tomorrow : selectedDate)
@@ -58,11 +48,6 @@ function CustomDatePicker(props) {
     const [rangeEnd, setRangeEnd] = (0, react_1.useState)(null);
     const [selectingStart, setSelectingStart] = (0, react_1.useState)(true);
     const [tempDate, setTempDate] = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
-    //   const [tempDate, setTempDate] = useState<Date | null>(
-    //   selectedDate
-    //     ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
-    //     : (disableToday ? tomorrow : null)
-    // );
     const [tempRangeStart, setTempRangeStart] = (0, react_1.useState)(rangeStart);
     const [tempRangeEnd, setTempRangeEnd] = (0, react_1.useState)(rangeEnd);
     const popoverRef = (0, react_1.useRef)(null);
@@ -70,13 +55,9 @@ function CustomDatePicker(props) {
         currentMonth.getMonth() === today.getMonth();
     const handleOpen = () => {
         if (!isRange && !selectedDate) {
-            // setTempDate(new Date());
             setTempDate(disableToday ? tomorrow : new Date());
         }
         if (showTime) {
-            // setTempDate(new Date()); // add new
-            //  setTempDate(disableToday ? tomorrow : new Date());
-            // console.log(selectedDate,"selectedDateselectedDate")
             setTempDate(disableToday ? tomorrow : selectedDate ? selectedDate : new Date());
         }
         onOpen();
@@ -85,21 +66,14 @@ function CustomDatePicker(props) {
         if (!isRange) {
             if (selectedDate instanceof Date) {
                 setTempDate(new Date(selectedDate));
-                // const corrected = disableToday && isSameDay(selectedDate, today)
-                //   ? tomorrow
-                //   : selectedDate;
-                // setTempDate(new Date(corrected));
             }
             else {
                 setTempDate(null);
-                // setTempDate(disableToday ? tomorrow : null);
             }
         }
     }, [selectedDate, isRange, disableToday]);
     const handleDaySelect = (day) => {
-        // const updated = new Date(day);
         let updated = new Date(day);
-        // 👇 Redirect selection from today → tomorrow
         if (disableToday && (0, date_fns_1.isSameDay)(updated, today)) {
             updated = tomorrow;
         }
@@ -200,7 +174,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.background[50], 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, 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) => {
@@ -214,20 +188,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 ?? new Date()}
-                                    , { 
-                                        // date={tempDate ?? new Date()}
-                                        date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, 
-                                        // onChange={(updatedDate) => {
-                                        // 👇 Redirect time change if today
-                                        //   const corrected = disableToday && isSameDay(updatedDate, today)
-                                        //     ? tomorrow
-                                        //     : updatedDate;
-                                        //   setTempDate(corrected);
-                                        //   emitSingle(corrected);
-                                        // }}
-                                        onChange: (updatedDate) => {
+                                                                }, "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) => {
                                             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: () => {
@@ -257,3 +218,4 @@ function CustomDatePicker(props) {
                                                     onClose();
                                                 }, children: "OK" })] })] }) }) })] })] }));
 }
+exports.default = CustomDatePicker;

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

@@ -6,35 +6,74 @@ export type BaseDatePickerProps = {
     id?: string;
     name?: string;
     label?: string;
+    /** Shows the label asterisk and sets native `required` via FormControl. */
     isRequired?: boolean;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
+    /** Marks the field invalid (error border + `aria-invalid`) and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Shown while `error` is true. Omitting it renders no message and still hides `helperText`. */
     errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
     helperText?: string;
+    /** Field hint text; defaults to one derived from `dateFormat`. */
+    placeholder?: string;
+    /** @deprecated Use `placeholder` — renamed to match every other field; `placeholder` wins when both are set. */
     placeholderText?: string;
+    /** date-fns format; defaults to `dd/MM/yyyy` (`HH:mm` for the time-only picker). Time tokens add time inputs. */
     dateFormat?: string;
-    /** Ignored by RangeDatePicker — only `dateFormat`'s time tokens decide whether time inputs render, never this. */
+    /** Pass explicitly: inference reads `MM` as minutes, so bare `dd/MM/yyyy` also shows time selects. Ignored when `isRange`. */
     pickerType?: PickerType;
+    /** Earlier days are disabled in the calendar and rejected when typed. */
     minDate?: Date;
+    /** Later days are disabled in the calendar and rejected when typed. */
     maxDate?: Date;
+    /** Blocks every day after today; today stays selectable. */
     disableFutureDates?: boolean;
+    /** Blocks every day before today; today stays selectable. */
     disablePastDates?: boolean;
+    /** Defaults to `"off"` so browser suggestions don't cover the calendar; not read by the time-only picker. */
     autoComplete?: string;
+    /** Disables the field and its calendar/clock trigger. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field; `isDisabled` wins when both are set. */
     disabled?: boolean;
+    /** Width of the whole field; defaults to `"100%"`. */
     width?: string | number;
+    /** Blocks today in the calendar and in typed input; the single picker preselects tomorrow instead. */
     disableToday?: boolean;
-    /** Chakra `Input` / `InputGroup` size for the field and chevron (calendar/clock) scale. */
+    /** Control-scale height: xs 24 · sm 32 · md 40 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
     size?: "xs" | "sm" | "md" | "lg";
 };
-/** Single-date variant — `isRange` must be false or omitted; this is the discriminant the DatePickerProps union switches on. */
-export type SingleDatePickerProps = BaseDatePickerProps & {
+/** Single-date variant, Date API (default) — `isRange` must be false or omitted; this is the discriminant the DatePickerProps union switches on. */
+export type SingleDatePickerDateProps = BaseDatePickerProps & {
     isRange?: false;
+    /** Omit, or set `"date"`, for the default Date-object API; `"iso"` switches value/onChange to ISO strings. */
+    valueFormat?: "date";
+    /** Controlled value; `value` wins when both are set. */
     selectedDate?: Date | null;
     /** Alias for `selectedDate` (legacy / form libraries). */
     value?: Date | null;
+    /** Fires on day click in date-only mode; with time inputs, only on Apply, Clear or closing the popover. */
     onChange: (date: Date | null) => void;
 };
+/** Single-date variant, string API — `yyyy-MM-dd` / `HH:mm` / full local ISO datetime by pickerType; an unparsable incoming string reads as `null`. */
+export type SingleDatePickerStringProps = BaseDatePickerProps & {
+    isRange?: false;
+    /** `"iso"` opts into the string API for this instance. */
+    valueFormat: "iso";
+    /** Controlled ISO value; `value` wins when both are set. */
+    selectedDate?: string | null;
+    /** Alias for `selectedDate` (legacy / form libraries). */
+    value?: string | null;
+    /** Fires with an ISO string (or `null`) on the same triggers as the Date API. */
+    onChange: (value: string | null) => void;
+};
+/** Discriminated on `valueFormat` — `"iso"` narrows to the string-value overload, everything else to the Date overload. */
+export type SingleDatePickerProps = SingleDatePickerDateProps | SingleDatePickerStringProps;
+export declare const isStringValueProps: (props: SingleDatePickerProps) => props is SingleDatePickerStringProps;
 /** A date range's two endpoints, each independently nullable — used for both the controlled value and onChange's payload. */
 export type RangeDate = {
     from: Date | null;
@@ -43,6 +82,7 @@ export type RangeDate = {
 /** Range variant — `isRange` must be true; adds dayStates/renderDayContent day-marking on top of the shared base fields. */
 export type RangeDatePickerProps = BaseDatePickerProps & {
     isRange: true;
+    /** Controlled range; `value` wins when both are set. */
     selectedDate?: RangeDate | null;
     /** Alias for `selectedDate` (legacy / form libraries). */
     value?: RangeDate | null;
@@ -75,6 +115,10 @@ export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
 export type TimePickerProps = {
     date: Date;
     onChange: (date: Date) => void;
+    /** Only picks 12h vs 24h: an `h` followed later by `a` (e.g. `hh:mm a`) means 12h with AM/PM. */
     dateFormat: string;
+    /** Disables the hour/minute/AM-PM selects. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field; `isDisabled` wins when both are set. */
     disabled?: boolean;
 };

package/dist/Components/DatePicker/DatePickerProps.js

@@ -1,2 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStringValueProps = void 0;
+const isStringValueProps = (props) => props.valueFormat === "iso";
+exports.isStringValueProps = isStringValueProps;