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

package/dist/esm/Components/ContactForm/ContactForm.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Heading, Text, VStack, SimpleGrid, FormControl, Alert, } from "@chakra-ui/react";
+import TextInput from "../Input/TextInput.js";
+import { CircleCheck, CircleX } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import InputTextArea from "../InputTextArea/InputTextArea.js";
+import Button from "../Button/Button.js";
+/** 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 } = useCustomTheme();
+    const [formData, setFormData] = useState({
+        firstName: "",
+        lastName: "",
+        email: "",
+        phone: "",
+        enquiry: "",
+    });
+    const [response, setResponse] = useState({
+        title: "",
+        isSuccess: false,
+    });
+    const [errors, setErrors] = useState({});
+    const [isLoading, setIsLoading] = useState(false);
+    const handleChange = (field, value) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+        setErrors((prev) => ({ ...prev, [field]: "" }));
+    };
+    const validate = () => {
+        const newErrors = {};
+        if (!formData.firstName.trim())
+            newErrors.firstName = "First name is required";
+        if (!formData.email.trim()) {
+            // newErrors.email = "Email is required";
+        }
+        else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+            newErrors.email = "Invalid email format";
+        }
+        if (!formData.phone.trim()) {
+            newErrors.phone = "Phone is required";
+        }
+        else if (!/^\d{7,15}$/.test(formData.phone)) {
+            newErrors.phone = "Phone must be 7–15 digits";
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+    const handleSubmit = async (e) => {
+        var _a;
+        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");
+            }
+            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 (_jsxs(Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "xl", boxShadow: "lg", bg: colors.background[300], children: [response.title ? (_jsxs(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) ? _jsx(CircleCheck, {}) : _jsx(CircleX, {}), " \u00A0", " ", response.title] })) : null, _jsx(Heading, { textAlign: "center", size: "lg", mb: 2, children: "Contact Us" }), _jsx(Text, { textAlign: "center", mb: 6, color: colors.textMuted, children: "Fill in the form below to reach out to us." }), _jsx(Box, { as: "form", onSubmit: handleSubmit, children: _jsxs(VStack, { spacing: 4, children: [_jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { 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 }) }), _jsx(FormControl, { children: _jsx(TextInput, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: (e) => handleChange("lastName", e.target.value) }) })] }), _jsxs(SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%", children: [_jsx(FormControl, { children: _jsx(TextInput, { 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 }) }), _jsx(FormControl, { isInvalid: !!errors.email, children: _jsx(TextInput, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: (e) => handleChange("email", e.target.value), error: Boolean(errors.email), errorMessage: errors.email }) })] }), customFields, _jsx(InputTextArea, { label: "Enquiry", placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: (e) => handleChange("enquiry", e.target.value) }), _jsx(Button, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx, isLoading: isLoading, loadingText: "Sending...", children: "Send Message" })] }) })] }));
+};
+export default ContactForm;

package/dist/esm/Components/ContactForm/ContactFormProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/CopyButton/CopyButton.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, IconButton, Text, VisuallyHidden } from "@chakra-ui/react";
+import { Check, Copy } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas, AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { onActivationKey } from "../Common/activationKey.js";
+const BACKGROUND_TRANSITION = 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 = useCustomTheme();
+    const [copied, setCopied] = useState(false);
+    const timer = useRef();
+    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 = accentTextOnCanvas(theme.colors.primary, theme.colors.backgroundColor.main);
+    const success = theme.colors.semanticText.success;
+    const rowBackgrounds = listRowBackgrounds(theme.colors);
+    const announcement = (_jsx(VisuallyHidden, { role: "status", "aria-live": "polite", position: "fixed", top: 0, left: 0, children: copied ? copiedLabel : "" }));
+    if (variant === "menu-item") {
+        const hoverAccent = accentTextOnCanvas(theme.colors.primary, rowBackgrounds.active);
+        const hoverSuccess = liftToContrast(theme.colors.semantic.success[500], rowBackgrounds.active, AA_NORMAL_TEXT);
+        return (_jsxs(_Fragment, { children: [_jsxs(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: focusVisibleRing(theme.colors), onClick: handleCopy, onKeyDown: onActivationKey(handleCopy), children: [copied ? (_jsx(Check, { size: iconSize, color: hoverSuccess })) : (_jsx(Copy, { size: iconSize, color: hoverAccent })), _jsx(Box, { fontSize: "sm", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }), announcement] }));
+    }
+    if (variant === "button") {
+        return (_jsxs(_Fragment, { children: [_jsxs(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: transitionFor(["border-color", "color"]), _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }), announcement] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.textMuted, _hover: { color: accent, bg: rowBackgrounds.active }, icon: copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }), announcement] }));
+};
+export default CopyButton;

package/dist/esm/Components/CouponField/CouponField.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { BadgeCheck, ChevronDown, Ticket } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { formatPrice } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
+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 } = useCustomTheme();
+    const hoverFill = tonalHover(colors);
+    const uid = useId();
+    const panelId = `${uid}-panel`;
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const [innerText, setInnerText] = useState(defaultValue);
+    const [innerOpen, setInnerOpen] = 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 = resolveSoftTone(colors, toneScale(colors, "success"), colors.background[100]);
+    if (status === "applied" && appliedCode) {
+        return (_jsxs(Flex, { align: "center", gap: 3, p: 3, pl: 4, borderRadius: "2xl", bg: colors.background[100], "data-testid": testId, "data-status": "applied", children: [_jsx(Flex, { as: "span", align: "center", justify: "center", boxSize: 8, flexShrink: 0, borderRadius: "full", bg: success.bg, color: success.fg, children: _jsx(BadgeCheck, { size: 16, "aria-hidden": true }) }), _jsxs(Box, { flex: 1, minW: 0, role: "status", children: [_jsx(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 && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.semanticText.success, sx: NUMERIC_TEXT, children: copy.saved(formatPrice(savedAmount, { currency, locale })) }))] }), _jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} coupon ${appliedCode}`, children: copy.remove })] }));
+    }
+    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [_jsxs(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: transitionFor(["background-color"]), _hover: { bg: hoverFill }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Ticket, { size: 18, "aria-hidden": true }), _jsx(Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), _jsx(Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: transitionFor(["transform"]), sx: reducedMotionSx({ transform: open ? "rotate(180deg)" : "none" }), children: _jsx(ChevronDown, { size: 16 }) })] }), _jsxs(Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [_jsxs(Flex, { gap: 2, align: "flex-start", children: [_jsx(Box, { flex: 1, minW: 0, children: _jsx(TextInput, { 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 }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && (_jsxs(Box, { mt: 4, children: [_jsx(Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), _jsx(Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => (_jsx(Box, { as: "li", children: _jsxs(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: transitionFor(["background-color"]), _hover: { bg: hoverFill }, _disabled: { cursor: "not-allowed", opacity: DISABLED_OPACITY }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(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 }), _jsxs(Box, { as: "span", flex: 1, minW: 0, children: [_jsx(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), _jsx(Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), _jsx(VisuallyHidden, { role: "status", children: applying ? `${copy.apply}…` : "" })] }));
+};
+export default CouponField;

package/dist/esm/Components/CouponField/CouponFieldProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/CustomModulesTable/CustomModulesTable.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, Flex, Heading, HStack, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tooltip, Tr, VStack, } from "@chakra-ui/react";
+import { Boxes, Pencil, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { bandOn, cardRule } from "../../Theme/tokens/builders/planeStep.js";
+import Button from "../Button/Button.js";
+import EmptyState from "../EmptyState/EmptyState.js";
+import EditModuleModal from "./EditModuleModal.js";
+import DeleteModuleModal from "./DeleteModuleModal.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
+const DEFAULT_LABELS = {
+    title: "Custom Modules",
+    moduleName: "Module Name",
+    moduleOwner: "Module Owner",
+    action: "Action",
+    edit: "Edit",
+    delete: "Delete",
+    noModules: "No custom modules found",
+    loading: "Loading...",
+    editModuleTitle: "Edit Module Name",
+    moduleNamePlaceholder: "Enter module name",
+    cancel: "Cancel",
+    update: "Update",
+    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 } = useCustomTheme();
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const [editTarget, setEditTarget] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const edge = colors.boxborder[200];
+    const surface = colors.background[50];
+    const rule = cardRule(colors);
+    const muted = colors.textMuted;
+    const heading = colors.text[800];
+    const headBg = bandOn(colors.backgroundColor.tableHeader, surface);
+    const thStyle = {
+        fontSize: "0.7rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        color: muted,
+        borderColor: rule,
+        py: 3,
+    };
+    return (_jsxs(Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? (_jsx(EmptyState, { icon: Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), _jsx(Th, { ...thStyle, children: labels.moduleOwner }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), _jsx(Tbody, { children: modules.map((item) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: BACKGROUND_TRANSITION, children: [_jsx(Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: _jsx(Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: _jsx(Text, { noOfLines: 1, children: item.moduleName }) }) }), _jsx(Td, { borderColor: rule, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), _jsx(Td, { borderColor: rule, children: _jsxs(HStack, { spacing: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: _jsx(Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: _jsx(Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), _jsx(EditModuleModal, { 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,
+                            moduleName: name,
+                        }));
+                    }
+                    setEditTarget(null);
+                }, labels: labels }), _jsx(DeleteModuleModal, { isOpen: deleteTarget !== null, onClose: () => setDeleteTarget(null), moduleName: deleteTarget === null || deleteTarget === void 0 ? void 0 : deleteTarget.moduleName, isLoading: isDeleting, onConfirm: async () => {
+                    if (deleteTarget) {
+                        await (onDeleteModule === null || onDeleteModule === void 0 ? void 0 : onDeleteModule(deleteTarget.module_id));
+                    }
+                    setDeleteTarget(null);
+                }, labels: labels })] }));
+};
+export default CustomModulesTable;

package/dist/esm/Components/CustomModulesTable/CustomModulesTableProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/CustomModulesTable/DeleteModuleModal.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react";
+import { Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import ConfirmDialog from "../ConfirmDialog/ConfirmDialog.js";
+/** Confirmation dialog for deleting a module; used by CustomModulesTable. */
+const DeleteModuleModal = ({ isOpen, onClose, moduleName, isLoading, onConfirm, labels, }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(ConfirmDialog, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeletion, iconBg: colors.semantic.error[50], iconColor: accentTextOnCanvas(colors.semantic.error, colors.semantic.error[50]), cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: _jsx(Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: _jsxs(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", _jsx(Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }) }));
+};
+export default DeleteModuleModal;

package/dist/esm/Components/CustomModulesTable/EditModuleModal.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, HStack, Input, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import Button from "../Button/Button.js";
+/** Dialog with one text field to rename a module; used by CustomModulesTable. */
+const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, labels, }) => {
+    const { colors } = useCustomTheme();
+    const [name, setName] = useState(initialName);
+    useEffect(() => {
+        if (isOpen)
+            setName(initialName);
+    }, [isOpen, initialName]);
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": labels.moduleNamePlaceholder, 
+                                // NOTE: [200] is the decorative divider rung — a real control's outline needs 1.4.11's 3:1, from [800].
+                                borderColor: colors.boxborder[500], mb: 5 }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
+};
+export default EditModuleModal;

package/dist/esm/Components/DatePicker/CalendarPanel.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays } from "date-fns";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
+import { DAY_CLASS, dayAccessibleName, dayStateClassName, resolveDayStateVisual, } from "./dayStates.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_COLOR_TRANSITION = transitionFor(["background", "color"]);
+/** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
+export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, dayStates, renderDayContent, }) => {
+    const theme = useCustomTheme();
+    const rangeBg = theme.colors.primary.opacity[16];
+    const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+        currentMonth.getMonth() === today.getMonth();
+    // Effective range end: the committed end, or a tentative end from hover.
+    const tentativeEnd = isRange && tempRangeStart && !tempRangeEnd && hoveredDate && isAfter(hoveredDate, tempRangeStart)
+        ? hoveredDate
+        : null;
+    const rangeStart = tempRangeStart;
+    const rangeEnd = tempRangeEnd !== null && tempRangeEnd !== void 0 ? tempRangeEnd : tentativeEnd;
+    const isTentative = !tempRangeEnd && !!tentativeEnd;
+    const hasRange = !!(rangeStart && rangeEnd && !isSameDay(rangeStart, rangeEnd));
+    const selectStyles = {
+        border: "1px solid",
+        // boxborder[500] is the control-outline rung the sibling pickers already use; boxborder[200]
+        // is decorative and measured 1.85:1 on the dark canvas — the select read as borderless.
+        borderColor: theme.colors.boxborder[500],
+        borderRadius: "md",
+        px: 2,
+        py: 1,
+        fontSize: "xs",
+        fontWeight: 600,
+        color: theme.colors.text[700],
+        cursor: "pointer",
+        bg: theme.colors.background[50],
+        outline: "none",
+        _hover: { borderColor: theme.colors.primary[300] },
+        _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) },
+        style: {
+            WebkitAppearance: "menulist",
+            MozAppearance: "menulist",
+            appearance: "menulist",
+        },
+    };
+    const renderDays = () => {
+        var _a;
+        const monthStart = startOfMonth(currentMonth);
+        const monthEnd = endOfMonth(currentMonth);
+        const startDate = startOfWeek(monthStart);
+        const endDate = endOfWeek(monthEnd);
+        const rows = [];
+        let day = startDate;
+        while (day <= endDate) {
+            const days = [];
+            for (let i = 0; i < 7; i++) {
+                const thisDay = day;
+                const isInCurrentMonth = thisDay.getMonth() === currentMonth.getMonth();
+                const isToday = isSameDay(thisDay, today);
+                const isStart = !!(isRange && rangeStart && isSameDay(thisDay, rangeStart));
+                const isEnd = !!(isRange && rangeEnd && isSameDay(thisDay, rangeEnd));
+                const isInRange = !!(isRange && rangeStart && rangeEnd && isAfter(thisDay, rangeStart) && isBefore(thisDay, rangeEnd));
+                const isSelected = !!(!isRange && tempDate && isSameDay(thisDay, tempDate));
+                const isTentativeEnd = isEnd && isTentative;
+                const circleSolid = !!(isSelected || (isRange && isStart) || (isEnd && !isTentative));
+                // Marking is not disabling: only the `disabled` state key blocks selection, and only
+                // because the caller asked for it by name.
+                const states = (_a = dayStates === null || dayStates === void 0 ? void 0 : dayStates(thisDay)) !== null && _a !== void 0 ? _a : [];
+                const stateVisual = states.length ? resolveDayStateVisual(states, theme.colors) : null;
+                const disabled = !isInCurrentMonth ||
+                    !!(minDate && isBefore(thisDay, minDate)) ||
+                    !!(maxDate && isAfter(thisDay, maxDate)) ||
+                    !!(disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
+                    !!(disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
+                    !!(disableToday && isToday) ||
+                    !!(stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.blocksSelection);
+                // Connected range band painted on the cell background; start/end use a
+                // half gradient so the band meets the solid day circle cleanly.
+                let cellBg;
+                if (isRange && hasRange) {
+                    if (isInRange)
+                        cellBg = rangeBg;
+                    else if (isStart && isEnd)
+                        cellBg = undefined;
+                    else if (isStart)
+                        cellBg = `linear-gradient(to right, transparent 50%, ${rangeBg} 50%)`;
+                    else if (isEnd)
+                        cellBg = `linear-gradient(to right, ${rangeBg} 50%, transparent 50%)`;
+                }
+                // Selection feedback outranks a state tint — the band is what tells the user what they picked.
+                if (!cellBg && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.cellBg))
+                    cellBg = stateVisual.cellBg;
+                // NOTE: primary[500] doesn't reliably clear AA for white text on every brand — same gap Button accounts for.
+                const primarySolid = resolveFilledSurface(theme.colors.primary, theme.colors);
+                const solidFill = primarySolid.fill;
+                const solidHoverFill = primarySolid.hoverFill;
+                const circleColor = circleSolid
+                    ? primarySolid.color
+                    : isInCurrentMonth
+                        ? theme.colors.text[700]
+                        : theme.colors.gray[400];
+                const circleHoverColor = circleSolid ? primarySolid.hoverColor : circleColor;
+                const circleBorder = circleSolid
+                    ? "1px solid transparent"
+                    : isTentativeEnd
+                        ? `1px solid ${theme.colors.primary[400]}`
+                        : isToday
+                            // primary[300] falls under 3:1 against surfaceRaised in several dark palettes; 500 clears it everywhere.
+                            ? `1px solid ${theme.colors.primary[500]}`
+                            : "1px solid transparent";
+                // A filled circle owns its own ink (checked against that fill by `onFilled`), so a state
+                // never repaints a selected day — it would undo that contrast guarantee.
+                const dayColor = !circleSolid && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.color) ? stateVisual.color : circleColor;
+                const dayBorder = !circleSolid && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.border) ? stateVisual.border : circleBorder;
+                const customContent = renderDayContent ? renderDayContent(thisDay, states) : null;
+                const markerColor = customContent == null && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.markerColor) ? stateVisual.markerColor : null;
+                const hasDayOverlay = customContent != null || markerColor != null;
+                const dayLabel = dayStates
+                    ? dayAccessibleName(format(thisDay, "d MMMM yyyy"), states)
+                    : format(thisDay, "d MMMM yyyy");
+                days.push(_jsx(Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: _jsxs(Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? dayStateClassName(states) : undefined, "aria-label": dayLabel, "aria-selected": isSelected || isStart || isEnd || undefined, "aria-current": isToday ? "date" : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs-plus", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: BACKGROUND_COLOR_TRANSITION, _hover: disabled
+                            ? {}
+                            : circleSolid
+                                ? { bg: solidHoverFill, color: circleHoverColor }
+                                : { bg: rangeBg }, children: [format(thisDay, "d"), hasDayOverlay && (_jsx(Box, { as: "span", className: `${DAY_CLASS}__content`, position: "absolute", left: 0, right: 0, bottom: "px", display: "flex", alignItems: "flex-end", justifyContent: "center", lineHeight: "1", fontSize: "0.5rem", 
+                                // The overlay is decoration: clicks belong to the day button under it.
+                                pointerEvents: "none", children: customContent !== null && customContent !== void 0 ? customContent : (_jsx(Box, { as: "span", className: `${DAY_CLASS}__marker`, w: "0.25rem", h: "0.25rem", borderRadius: "full", bg: markerColor })) }))] }) }, thisDay.toString()));
+                day = addDays(day, 1);
+            }
+            rows.push(_jsx(Box, { role: "row", display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));
+        }
+        return rows;
+    };
+    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1, children: [_jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1)), "aria-label": "Previous month", children: _jsx(ChevronLeftIcon, { size: 16 }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0, children: [_jsx(Box, { as: "select", "aria-label": "Month", value: currentMonth.getMonth(), onChange: (e) => {
+                                    const newMonth = parseInt(e.target.value, 10);
+                                    setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
+                                }, ...selectStyles, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx(Box, { as: "select", "aria-label": "Year", value: currentMonth.getFullYear(), onChange: (e) => {
+                                    const newYear = parseInt(e.target.value, 10);
+                                    setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
+                                }, ...selectStyles, children: Array.from({ length: 100 }).map((_, i) => {
+                                    const year = new Date().getFullYear() - 50 + i;
+                                    return (_jsx("option", { value: year, children: year }, year));
+                                }) })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0, children: [!isRange && !isViewingCurrentMonth && (_jsx(Button, { variant: "ghost", size: "xs", onClick: () => {
+                                    setCurrentMonth(() => new Date(today.getFullYear(), today.getMonth(), 1));
+                                    if (!disableToday) {
+                                        onDaySelect(new Date(today));
+                                    }
+                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: _jsx(ChevronRightIcon, { size: 16 }) })] })] }), _jsxs(Box, { role: "grid", "aria-label": "Calendar", children: [renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (_jsx(Box, { role: "row", display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { role: "columnheader", textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.textMuted, py: 1, children: day }, day))) })), _jsx(Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] })] }));
+};
+export default CalendarPanel;