pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Components/ContactForm/ContactForm.js

@@ -1,124 +1,38 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var TextInput_1 = __importDefault(require("../Input/TextInput"));
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var InputTextArea_1 = __importDefault(require("../InputTextArea/InputTextArea"));
-var Button_1 = __importDefault(require("../Button/Button"));
-var ContactForm = function (_a) {
-    var _b;
-    var apiKey = _a.apiKey, customFields = _a.customFields, getCustomValues = _a.getCustomValues, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, organizationId = _a.organizationId, customerId = _a.customerId, _d = _a.buttonColorScheme, buttonColorScheme = _d === void 0 ? "primary" : _d, buttonSx = _a.buttonSx;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _e = (0, react_1.useState)({
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const TextInput_1 = __importDefault(require("../Input/TextInput"));
+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"));
+/** 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: "",
         lastName: "",
         email: "",
         phone: "",
         enquiry: "",
-    }), formData = _e[0], setFormData = _e[1];
-    var _f = (0, react_1.useState)({
+    });
+    const [response, setResponse] = (0, react_1.useState)({
         title: "",
         isSuccess: false,
-    }), response = _f[0], setResponse = _f[1];
-    var _g = (0, react_1.useState)({}), errors = _g[0], setErrors = _g[1];
-    var _h = (0, react_1.useState)(false), isLoading = _h[0], setIsLoading = _h[1];
-    var handleChange = function (field, value) {
-        setFormData(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[field] = value, _a)));
-        });
-        setErrors(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[field] = "", _a)));
-        });
+    });
+    const [errors, setErrors] = (0, react_1.useState)({});
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const handleChange = (field, value) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+        setErrors((prev) => ({ ...prev, [field]: "" }));
     };
-    var validate = function () {
-        var newErrors = {};
+    const validate = () => {
+        const newErrors = {};
         if (!formData.firstName.trim())
             newErrors.firstName = "First name is required";
         if (!formData.email.trim()) {
@@ -136,96 +50,72 @@ var ContactForm = function (_a) {
         setErrors(newErrors);
         return Object.keys(newErrors).length === 0;
     };
-    var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var customValues, payload, response_1, result, error_1;
+    const handleSubmit = async (e) => {
         var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    e.preventDefault();
-                    if (isDisabled)
-                        return [2 /*return*/];
-                    if (!validate())
-                        return [2 /*return*/];
-                    if (!apiKey) {
-                        setResponse({
-                            title: "API key missing",
-                            isSuccess: false,
-                        });
-                        return [2 /*return*/];
-                    }
-                    customValues = (_a = getCustomValues === null || getCustomValues === void 0 ? void 0 : getCustomValues()) !== null && _a !== void 0 ? _a : {};
-                    payload = __assign(__assign({ name: (formData === null || formData === void 0 ? void 0 : formData.firstName) + " " + (formData === null || formData === void 0 ? void 0 : formData.lastName), firstName: formData === null || formData === void 0 ? void 0 : formData.firstName, lastName: formData === null || formData === void 0 ? void 0 : formData.lastName, email: formData.email, phone: formData.phone, message: formData.enquiry }, customValues), { customerId: customerId, organizationId: organizationId });
-                    _b.label = 1;
-                case 1:
-                    _b.trys.push([1, 4, 5, 6]);
-                    setIsLoading(true);
-                    return [4 /*yield*/, fetch(apiKey, {
-                            method: "POST",
-                            headers: {
-                                "Content-Type": "application/json",
-                            },
-                            body: JSON.stringify(payload),
-                        })];
-                case 2:
-                    response_1 = _b.sent();
-                    return [4 /*yield*/, response_1.json()];
-                case 3:
-                    result = _b.sent();
-                    if (!response_1.ok)
-                        throw new Error(result.message || "Submission failed");
-                    // onSubmit(formData);
-                    setFormData({
-                        firstName: "",
-                        lastName: "",
-                        email: "",
-                        phone: "",
-                        enquiry: "",
-                    });
-                    setResponse({
-                        title: "Message Sent Successfully",
-                        isSuccess: true,
-                    });
-                    return [3 /*break*/, 6];
-                case 4:
-                    error_1 = _b.sent();
-                    setResponse({
-                        title: "Failed to send message",
-                        isSuccess: false,
-                    });
-                    return [3 /*break*/, 6];
-                case 5:
-                    setIsLoading(false);
-                    return [7 /*endfinally*/];
-                case 6: return [2 /*return*/];
+        e.preventDefault();
+        if (isDisabled)
+            return;
+        if (!validate())
+            return;
+        if (!onSubmit && !apiKey) {
+            setResponse({
+                title: "API key missing",
+                isSuccess: false,
+            });
+            return;
+        }
+        const customValues = (_a = getCustomValues === null || getCustomValues === void 0 ? void 0 : getCustomValues()) !== null && _a !== void 0 ? _a : {};
+        const payload = {
+            name: (formData === null || formData === void 0 ? void 0 : formData.firstName) + " " + (formData === null || formData === void 0 ? void 0 : formData.lastName),
+            firstName: formData === null || formData === void 0 ? void 0 : formData.firstName,
+            lastName: formData === null || formData === void 0 ? void 0 : formData.lastName,
+            email: formData.email,
+            phone: formData.phone,
+            message: formData.enquiry,
+            ...customValues,
+            customerId,
+            organizationId,
+        };
+        try {
+            setIsLoading(true);
+            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");
             }
-        });
-    }); };
-    return (react_1.default.createElement(react_2.Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "2xl", boxShadow: "lg", bg: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[300] },
-        response.title ? (react_1.default.createElement(react_2.Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: "bold", variant: "solid", mb: 1 },
-            (response === null || response === void 0 ? void 0 : response.isSuccess) ? react_1.default.createElement(lucide_react_1.CircleCheck, null) : react_1.default.createElement(lucide_react_1.CircleX, null),
-            " \u00A0",
-            " ",
-            response.title)) : null,
-        react_1.default.createElement(react_2.Heading, { textAlign: "center", size: "lg", mb: 2 }, "Contact Us"),
-        react_1.default.createElement(react_2.Text, { textAlign: "center", mb: 6, color: "gray.500" }, "Fill in the form below to reach out to us."),
-        react_1.default.createElement(react_2.Box, { as: "form", onSubmit: handleSubmit },
-            react_1.default.createElement(react_2.VStack, { spacing: 4 },
-                react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%" },
-                    react_1.default.createElement(react_2.FormControl, null,
-                        react_1.default.createElement(TextInput_1.default, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: function (e) { return handleChange("firstName", e.target.value); }, error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true })),
-                    react_1.default.createElement(react_2.FormControl, null,
-                        react_1.default.createElement(TextInput_1.default, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: function (e) { return handleChange("lastName", e.target.value); } }))),
-                react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%" },
-                    react_1.default.createElement(react_2.FormControl, null,
-                        react_1.default.createElement(TextInput_1.default, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: function (e) { return handleChange("phone", e.target.value); }, isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone })),
-                    react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.email },
-                        react_1.default.createElement(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: function (e) { return handleChange("email", e.target.value); }, error: Boolean(errors.email), errorMessage: errors.email }))),
-                customFields,
-                react_1.default.createElement(react_2.FormControl, null,
-                    react_1.default.createElement(react_2.Text, { fontSize: "sm", mb: 1 }, "Enquiry"),
-                    react_1.default.createElement(react_2.Box, null,
-                        react_1.default.createElement(InputTextArea_1.default, { placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: function (e) { return handleChange("enquiry", e.target.value); } }))),
-                react_1.default.createElement(Button_1.default, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending..." }, "Send Message")))));
+            setFormData({
+                firstName: "",
+                lastName: "",
+                email: "",
+                phone: "",
+                enquiry: "",
+            });
+            setResponse({
+                title: "Message Sent Successfully",
+                isSuccess: true,
+            });
+        }
+        catch (error) {
+            console.error("Error sending message:", error);
+            setResponse({
+                title: "Failed to send message",
+                isSuccess: false,
+            });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? ((0, jsx_runtime_1.jsxs)(react_2.Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: 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;
-    getCustomValues?: () => Record<string, any>;
+    /** 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

@@ -0,0 +1,27 @@
+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;
+    /** "icon" floating icon button, "button" icon + text, "menu-item" full-width row. */
+    variant?: "icon" | "button" | "menu-item";
+    /** Visible label for "button" / "menu-item" variants. */
+    label?: string;
+    /** Label shown briefly after a successful copy. */
+    copiedLabel?: string;
+    /** Tooltip text (icon variant). */
+    tooltip?: string;
+    /** ms to keep the "copied" state. */
+    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";
+    /** 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

@@ -0,0 +1,55 @@
+"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 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 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)();
+    (0, react_1.useEffect)(() => () => clearTimeout(timer.current), []);
+    const handleCopy = async (e) => {
+        e.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            onCopy === null || onCopy === void 0 ? void 0 : onCopy(value);
+            clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), feedbackDuration);
+        }
+        catch {
+            onCopyError === null || onCopyError === void 0 ? void 0 : onCopyError(value);
+        }
+    };
+    // 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") {
+        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)(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.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

@@ -0,0 +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;