pixelize-design-library 2.4.2 → 3.0.0

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

@@ -0,0 +1,78 @@
+import type { ReactElement, ReactNode } from "react";
+/** The reversible route offered beside Cancel and the destructive Confirm. */
+export interface ConfirmDialogAlternative {
+    /** Button text, e.g. "Deactivate instead". */
+    label: string;
+    /** What choosing it keeps, shown in a hint box above the buttons. */
+    description?: ReactNode;
+    /** Fires when the alternative button is clicked; does not close the dialog. */
+    onSelect: () => void;
+    /** Spinner on the alternative; Cancel and Confirm are disabled meanwhile. */
+    isLoading?: boolean;
+}
+interface ConfirmDialogBaseProps {
+    /** Controlled visibility; the dialog never opens or closes itself. */
+    isOpen: boolean;
+    /** Fires on Cancel, the close button, Esc and overlay click; the caller must then set `isOpen` to false. */
+    onClose: () => void;
+    /** Fires on Confirm click; does not close the dialog — call onClose yourself. */
+    onConfirm: () => void;
+    /** Body content rendered above the action row (a Text, a description + quote block, ...). Optional when `entityName` builds the body. */
+    children?: ReactNode;
+    /** Rendered inside the header swatch. Defaults to a warning triangle. */
+    icon?: ReactNode;
+    /** Header swatch background; derived from `tone` (a soft tint) when omitted. */
+    iconBg?: string;
+    /** Header swatch icon/text color; derived from `tone` when omitted, so pass it together with `iconBg`. */
+    iconColor?: string;
+    /** The exact record being destroyed, e.g. "Sabbatical". Switches on the consequence-first body and builds the default title. */
+    entityName?: string;
+    /** What kind of record, e.g. "leave type"; the default title reads Delete leave type "Sabbatical"? */
+    entityKind?: string;
+    /** Dependents already counted by the caller ("4 people hold a balance"), joined with " · " on one line. */
+    dependents?: string[];
+    /** What survives and what stays broken. With `entityName` it defaults to "This cannot be undone."; otherwise it renders only when passed. */
+    consequence?: ReactNode;
+    /** A calmer reversible choice, drawn as the solid button while Confirm turns outline. Focus still opens on Cancel. */
+    alternative?: ConfirmDialogAlternative;
+    /** Holds Confirm disabled until a precondition in `children` (an acknowledgement checkbox) is met. */
+    isConfirmDisabled?: boolean;
+    /** "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 (never the destructive button) via Chakra's `initialFocusRef`. Defaults to true. */
+    focusCancelOnOpen?: boolean;
+    /** Defaults to true. */
+    isCentered?: boolean;
+    /** Whether Esc closes the dialog; unset keeps Chakra's default (true). */
+    closeOnEsc?: boolean;
+    /** Whether clicking the overlay closes the dialog; unset keeps Chakra's default (true). */
+    closeOnOverlayClick?: boolean;
+}
+/** Reusable Cancel/Confirm modal for delete/deactivate-style prompts; pass `title`, or `entityName` to get a title and a consequence body. */
+export type ConfirmDialogProps = ConfirmDialogBaseProps & ({
+    title: string;
+} | {
+    title?: string;
+    entityName: string;
+});
+export {};

package/dist/Components/ConfirmDialog/ConfirmDialogProps.js

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

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

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

package/dist/Components/ContactForm/ContactForm.js

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

@@ -1,12 +1,43 @@
 import { SystemStyleObject } from "@chakra-ui/react";
 import { ReactNode } from "react";
+/** The built-in fields plus any customValues, sent to onSubmit and/or POSTed to apiKey. */
+export type ContactFormPayload = {
+    /** Built by the form as `firstName` and `lastName` joined by a space. */
+    name: string;
+    /** Required field. */
+    firstName: string;
+    /** Optional; an empty string when left blank. */
+    lastName: string;
+    /** Optional; checked for address format when filled, otherwise an empty string. */
+    email: string;
+    /** Required, digits only, 7-15 long; validated before submit. */
+    phone: string;
+    /** Text of the Enquiry field; may be empty. */
+    message: string;
+    /** Copied from the `customerId` prop; `getCustomValues` cannot override it. */
+    customerId: string | number;
+    /** Copied from the `organizationId` prop; `getCustomValues` cannot override it. */
+    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 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>;
+    /** Sent unchanged in every payload to identify the customer; not shown in the form. */
     customerId: string | number;
+    /** Sent unchanged in every payload to identify the organization; not shown in the form. */
     organizationId: string | number;
+    /** Disables the submit button and blocks submission; fields stay editable. Defaults to false. */
     isDisabled?: boolean;
+    /** Rendered markup only — its values are never read automatically; pair with getCustomValues or they're dropped from the submitted payload. */
     customFields?: ReactNode;
+    /** Return value spreads into the payload after the built-in fields — a key like "email" silently overwrites the typed value; customerId/organizationId can't be overridden this way. */
     getCustomValues?: () => Record<string, unknown>;
+    /** Colour scheme of the Send Message button. Defaults to "primary". */
     buttonColorScheme?: "primary" | "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "secondary" | "tertiary" | undefined;
+    /** Chakra style object applied to the Send Message button. */
     buttonSx?: SystemStyleObject;
 }

package/dist/Components/CopyButton/CopyButton.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+/** Copies `value` to the clipboard and briefly confirms with `copiedLabel`. */
 export interface CopyButtonProps {
     /** Text to write to the clipboard. */
     value: string;
@@ -14,9 +15,13 @@ export interface CopyButtonProps {
     feedbackDuration?: number;
     /** Icon px size. */
     iconSize?: number;
+    /** Only affects the default "icon" variant's IconButton — "button" and "menu-item" ignore it. */
     size?: "xs" | "sm" | "md";
-    /** Called after a successful copy. */
+    /** Fires only if the clipboard write resolves. */
     onCopy?: (value: string) => void;
+    /** Fires when the clipboard is missing or denied, instead of failing silently. */
+    onCopyError?: (value: string) => void;
 }
+/** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
 declare const CopyButton: React.FC<CopyButtonProps>;
 export default CopyButton;

package/dist/Components/CopyButton/CopyButton.js

@@ -9,8 +9,15 @@ const react_2 = 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 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"));
-const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
+const activationKey_1 = require("../Common/activationKey");
+const BACKGROUND_TRANSITION = (0, primitives_1.transitionFor)(["background"]);
+/** 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, onCopyError, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [copied, setCopied] = (0, react_1.useState)(false);
     const timer = (0, react_1.useRef)();
@@ -25,22 +32,24 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
             timer.current = setTimeout(() => setCopied(false), feedbackDuration);
         }
         catch {
-            /* clipboard unavailable — silently ignore */
+            onCopyError === null || onCopyError === void 0 ? void 0 : onCopyError(value);
         }
     };
-    // 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);
+    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") {
-        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: theme.colors.gray[100] }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize, color: success }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize, color: accent }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "14px", fontWeight: 500, color: copied ? success : accent, children: copied ? copiedLabel : label })] }));
+        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)(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_TRANSITION, _hover: { bg: rowBackgrounds.active }, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), onClick: handleCopy, onKeyDown: (0, activationKey_1.onActivationKey)(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: "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.gray[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 })] }));
+        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.gray[500], _hover: { color: accent, bg: theme.colors.primary[50] }, 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.d.ts

@@ -0,0 +1,4 @@
+import type { CouponFieldProps } from "./CouponFieldProps";
+/** Coupon entry that stays out of the way: a quiet prompt row, a field with tap-to-apply offers, then an applied state with the saving. */
+declare const CouponField: ({ status, appliedCode, savedAmount, error, onApply, onRemove, suggestions, value, defaultValue, onValueChange, expanded, defaultExpanded, onExpandedChange, currency, locale, labels, "data-testid": testId, }: CouponFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default CouponField;

package/dist/Components/CouponField/CouponField.js

@@ -0,0 +1,76 @@
+"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 states_1 = require("../../Theme/tokens/primitives/states");
+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");
+const price_1 = require("../../Utils/price");
+const Button_1 = __importDefault(require("../Button/Button"));
+const TextInput_1 = __importDefault(require("../Input/TextInput"));
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
+const DEFAULT_LABELS = {
+    prompt: "Have a coupon?",
+    inputLabel: "Coupon code",
+    placeholder: "Enter code",
+    apply: "Apply",
+    remove: "Remove",
+    suggestionsTitle: "Available offers",
+    applied: (code) => `${code} applied`,
+    saved: (amount) => `You saved ${amount}`,
+    applySuggestion: (code) => `Apply ${code}`,
+};
+const normalise = (raw) => raw.replace(/\s+/g, "").toUpperCase();
+/** Coupon entry that stays out of the way: a quiet prompt row, a field with tap-to-apply offers, then an applied state with the saving. */
+const CouponField = ({ status = "idle", appliedCode, savedAmount, error, onApply, onRemove, suggestions, value, defaultValue = "", onValueChange, expanded, defaultExpanded = false, onExpandedChange, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const hoverFill = (0, tonalHover_1.tonalHover)(colors);
+    const uid = (0, react_1.useId)();
+    const panelId = `${uid}-panel`;
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const [innerText, setInnerText] = (0, react_1.useState)(defaultValue);
+    const [innerOpen, setInnerOpen] = (0, react_1.useState)(defaultExpanded);
+    const text = value !== null && value !== void 0 ? value : innerText;
+    const applying = status === "applying";
+    const open = (expanded !== null && expanded !== void 0 ? expanded : innerOpen) || applying || status === "error";
+    const setText = (next) => {
+        if (value === undefined)
+            setInnerText(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+    };
+    const setOpen = (next) => {
+        if (expanded === undefined)
+            setInnerOpen(next);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
+    };
+    const submit = (code) => {
+        const clean = normalise(code);
+        if (!clean || applying)
+            return;
+        onApply === null || onApply === void 0 ? void 0 : onApply(clean);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "Enter" && event.target.tagName === "INPUT") {
+            event.preventDefault();
+            submit(text);
+        }
+    };
+    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: "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: "2xl", bg: colors.background[100], color: colors.header[900], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: hoverFill }, 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: "xl", bg: colors.background[100], textAlign: "left", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: hoverFill }, _disabled: { cursor: "not-allowed", opacity: states_1.DISABLED_OPACITY }, 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/CouponField/CouponFieldProps.d.ts

@@ -0,0 +1,65 @@
+import type { PriceFormat } from "../Commerce/commerceTypes";
+/** Where the coupon is in its lifecycle; the parent owns it because validation is a server call. */
+export type CouponStatus = "idle" | "applying" | "applied" | "error";
+/** A coupon the shopper can apply with one tap. */
+export interface CouponSuggestion {
+    /** Coupon code, shown in a badge and passed to `onApply` when the suggestion is tapped. */
+    code: string;
+    /** Offer headline shown beside the code, e.g. "10% off". */
+    title: string;
+    /** Terms line, e.g. "Min. order ₹999". */
+    detail?: string;
+}
+/** Visible copy; override every string for another language. */
+export interface CouponFieldLabels {
+    /** Text of the collapsed toggle row; default "Have a coupon?". */
+    prompt: string;
+    /** Accessible name of the code input; default "Coupon code". */
+    inputLabel: string;
+    /** Input placeholder; default "Enter code". */
+    placeholder: string;
+    /** Apply button text, also the hint on each suggestion; default "Apply". */
+    apply: string;
+    /** Remove button text in the applied state; default "Remove". */
+    remove: string;
+    /** Heading above the suggestion list; default "Available offers". */
+    suggestionsTitle: string;
+    /** Status text once applied, given the code. */
+    applied: (code: string) => string;
+    /** Saving text once applied, given the formatted amount. */
+    saved: (amount: string) => string;
+    /** Accessible name of a suggestion, given its code. */
+    applySuggestion: (code: string) => string;
+}
+/** Controlled coupon entry: a collapsed "Have a coupon?" row that opens into a field, then settles into an applied chip. */
+export interface CouponFieldProps extends PriceFormat {
+    /** Lifecycle state; default "idle". "applying" disables the input and shows a spinner, "error" shows `error`, "applied" collapses to the chip. */
+    status?: CouponStatus;
+    /** The code shown in the applied state. */
+    appliedCode?: string;
+    /** Saving from the applied code; shown as "You saved ₹150". */
+    savedAmount?: number;
+    /** Message shown under the field while `status` is "error"; announced as an alert. */
+    error?: string;
+    /** Called with the upper-cased code from the button, Enter, or a suggestion; set `status` to "applying" while it resolves. */
+    onApply?: (code: string) => void;
+    /** Called from the Remove button shown in the applied state; the parent should then reset `status`. */
+    onRemove?: () => void;
+    /** Offers listed under the field, each applied in one tap; the list is hidden when empty. */
+    suggestions?: CouponSuggestion[];
+    /** Input text when controlled. */
+    value?: string;
+    /** Initial input text when uncontrolled; default empty. */
+    defaultValue?: string;
+    /** Called with the code as typed or picked; whitespace is stripped and letters upper-cased first. */
+    onValueChange?: (value: string) => void;
+    /** Open state of the collapsed row when controlled; the field is always open while applying or in error. */
+    expanded?: boolean;
+    /** Whether the field starts open when `expanded` is not controlled; default false. */
+    defaultExpanded?: boolean;
+    /** Called with the new open state when the prompt row is toggled. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Per-string copy overrides; unset keys keep the English defaults. */
+    labels?: Partial<CouponFieldLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/CouponField/CouponFieldProps.js

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

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { CustomModulesTableProps } from "./CustomModulesTableProps";
+/** Card with a two-column module list (name, owner) and per-row Edit and Delete dialogs; loading shows skeleton bars, empty shows an empty state. */
 declare const CustomModulesTable: React.FC<CustomModulesTableProps>;
 export default CustomModulesTable;

package/dist/Components/CustomModulesTable/CustomModulesTable.js

@@ -8,10 +8,13 @@ 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"));
 const DeleteModuleModal_1 = __importDefault(require("./DeleteModuleModal"));
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 const DEFAULT_LABELS = {
     title: "Custom Modules",
     moduleName: "Module Name",
@@ -28,26 +31,28 @@ const DEFAULT_LABELS = {
     confirmDeletion: "Confirm Deletion",
     deleteConfirmPrefix: "Are you sure you want to delete",
 };
+/** Card with a two-column module list (name, owner) and per-row Edit and Delete dialogs; loading shows skeleton bars, empty shows an empty state. */
 const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, isDeleting = false, onUpdateModule, onDeleteModule, labels: labelOverrides, }) => {
     var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     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_TRANSITION, 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

@@ -1,10 +1,17 @@
+/** One row in the modules table; `ownerLabel` is display-only and has no counterpart in UpdateModulePayload. */
 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. */
 export type UpdateModulePayload = {
+    /** `module_id` of the row being edited. */
     moduleId: number;
+    /** New name, trimmed; never empty because Update is disabled for a blank name. */
     moduleName: string;
 };
 /**
@@ -12,43 +19,79 @@ 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;
+    /** Header of the module name column. */
     moduleName?: string;
+    /** Header of the owner column. */
     moduleOwner?: string;
+    /** Header of the right-aligned Edit/Delete column. */
     action?: string;
+    /** Text of each row's Edit button. */
     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. */
 export interface EditModuleModalProps {
+    /** Shows the dialog. */
     isOpen: boolean;
+    /** Called on Cancel, the close button, Escape or an overlay click. */
     onClose: () => void;
+    /** Seeds the name field each time the dialog opens. */
     initialName: string;
+    /** Spinner on the Update button. */
     isLoading?: boolean;
+    /** Called with the trimmed name when Update is pressed. */
     onSubmit: (name: string) => void | Promise<void>;
+    /** Fully resolved strings; no per-key fallback happens here. */
     labels: Required<Pick<CustomModulesTableLabels, "editModuleTitle" | "moduleNamePlaceholder" | "cancel" | "update">>;
 }
+/** Internal delete-confirmation dialog rendered by CustomModulesTable; `moduleName` is optional since the target can be cleared mid-close. */
 export interface DeleteModuleModalProps {
+    /** Shows the dialog. */
     isOpen: boolean;
+    /** Called on Cancel, the close button, Escape or an overlay click. */
     onClose: () => void;
+    /** Named in the confirmation prompt after `deleteConfirmPrefix`. */
     moduleName?: string;
+    /** Spinner on the confirm button. */
     isLoading?: boolean;
+    /** Called when the confirm button is pressed. */
     onConfirm: () => void;
+    /** Fully resolved strings; no per-key fallback happens here. */
     labels: Required<Pick<CustomModulesTableLabels, "confirmDeletion" | "deleteConfirmPrefix" | "cancel" | "delete">>;
 }

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { DeleteModuleModalProps } from "./CustomModulesTableProps";
+/** Confirmation dialog for deleting a module; used by CustomModulesTable. */
 declare const DeleteModuleModal: React.FC<DeleteModuleModalProps>;
 export default DeleteModuleModal;