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

package/dist/esm/Components/OrganizationDetails/CreateOrgModal.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, HStack, VStack, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+const EMPTY = {
+    company_name: "",
+    company_address: "",
+    phone: "",
+};
+const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
+    const { colors } = useCustomTheme();
+    const [values, setValues] = useState(EMPTY);
+    const [errors, setErrors] = useState({});
+    useEffect(() => {
+        if (isOpen) {
+            setValues(EMPTY);
+            setErrors({});
+        }
+    }, [isOpen]);
+    const setField = (key, value) => {
+        setValues((prev) => ({ ...prev, [key]: value }));
+        if (errors[key])
+            setErrors((prev) => ({ ...prev, [key]: undefined }));
+    };
+    const validate = () => {
+        var _a, _b;
+        const next = {};
+        if (!values.company_name.trim())
+            next.company_name = labels.requiredField;
+        if (!values.company_address.trim())
+            next.company_address = labels.requiredField;
+        const digits = (_a = values === null || values === void 0 ? void 0 : values.phone) === null || _a === void 0 ? void 0 : _a.replace(/\D/g, "");
+        if (!((_b = values === null || values === void 0 ? void 0 : values.phone) === null || _b === void 0 ? void 0 : _b.trim())) {
+            next.phone = labels.requiredField;
+        }
+        else if (digits && (digits === null || digits === void 0 ? void 0 : digits.length) < 8) {
+            next.phone = labels.invalidPhone;
+        }
+        setErrors(next);
+        return Object.keys(next).length === 0;
+    };
+    const handleSubmit = () => {
+        var _a;
+        if (!validate())
+            return;
+        onSubmit({
+            company_name: values.company_name.trim(),
+            company_address: values.company_address.trim(),
+            phone: (_a = values === null || values === void 0 ? void 0 : values.phone) === null || _a === void 0 ? void 0 : _a.trim(),
+        });
+    };
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), _jsx(TextInput, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), _jsx(TextInput, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), _jsxs(HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), _jsx(Button, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
+};
+export default CreateOrgModal;

package/dist/esm/Components/OrganizationDetails/DeleteOrgModal.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react";
+import { Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import ConfirmDialog from "../ConfirmDialog/ConfirmDialog.js";
+const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
+    const { colors } = useCustomTheme();
+    const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    return (_jsx(ConfirmDialog, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeletion, iconBg: errorTone.bg, iconColor: errorTone.fg, cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: _jsx(Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: _jsx(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteConfirmText }) }));
+};
+export default DeleteOrgModal;

package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Badge, Box, Flex, Heading, HStack, IconButton, Input, Skeleton, SkeletonText, Spinner, Text, Tooltip, VStack, } from "@chakra-ui/react";
+import { ArrowLeft, Building2, Check, CheckCircle2, Crown, Globe, Mail, Pencil, Plus, Trash2, Users, X, } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import Avatar from "../Avatar/Avatar.js";
+import Button from "../Button/Button.js";
+import EmptyState from "../EmptyState/EmptyState.js";
+import Tag from "../Tag/Tag.js";
+import CreateOrgModal from "./CreateOrgModal.js";
+import DeleteOrgModal from "./DeleteOrgModal.js";
+import { onActivationKey } from "../Common/activationKey.js";
+const DEFAULT_LABELS = {
+    greeting: "Hello, User!",
+    manageSubtitle: "Manage your organizations",
+    organizationDetails: "Organization Details",
+    createNewOrganization: "Create New Organization",
+    createOrganization: "Create Organization",
+    activeOrganizations: "Active Organizations",
+    invitedOrganizations: "Invited Organizations",
+    setAsDefault: "Set as Default",
+    settingDefault: "Setting...",
+    default: "Default",
+    owner: "Owner",
+    pending: "Pending",
+    accept: "Accept",
+    accepting: "Accepting...",
+    decline: "Decline",
+    deleteOrganization: "Delete Organization",
+    protectedOrganization: "Protected organization",
+    delete: "Delete",
+    editOrganization: "Edit organization name",
+    save: "Save",
+    saving: "Saving...",
+    emptyNameError: "Organization name cannot be empty",
+    noOrganizationsTitle: "No organizations found",
+    noOrganizationsDescription: "Get started by creating your first organization or wait for an invitation",
+    companyName: "Company Name",
+    companyAddress: "Company Address",
+    phone: "Phone",
+    cancel: "Cancel",
+    submit: "Submit",
+    requiredField: "This field is required",
+    invalidPhone: "Phone number must be at least 8 digits",
+    confirmDeletion: "Confirm Deletion",
+    deleteConfirmText: "Are you sure you want to delete this Organization?",
+    copyright: "Pixelize Corp. All rights reserved.",
+    termsOfService: "Terms of Service",
+};
+/** Admin panel for the org list — rename/delete/create/invites/default; not a session switcher. */
+const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], editingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onDeleteRequest, onCreateOrganization, onEditOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
+    const { colors } = useCustomTheme();
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const [isCreateOpen, setCreateOpen] = useState(false);
+    const [deleteOrgId, setDeleteOrgId] = useState(null);
+    // --- Inline "edit organization name" state ---
+    const [editingOrgId, setEditingOrgId] = useState(null);
+    const [editValue, setEditValue] = useState("");
+    const [editError, setEditError] = useState("");
+    const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    const warningTone = resolveSoftTone(colors, colors.semantic.warning);
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const subtle = colors.text[600];
+    const heading = colors.text[900];
+    const pageBg = colors.backgroundColor.main;
+    const primary50 = colors.primary[50];
+    const primary100 = colors.primary[100];
+    const primarySolid = resolveFilledSurface(colors.primary, colors);
+    const primaryTile = bandOn(primary50, surface);
+    const onPrimaryTile = accentTextOnCanvas(colors.primary, primaryTile);
+    const cardSx = {
+        backgroundColor: surface,
+        borderRadius: "xl",
+        border: "1px solid",
+        borderColor: border,
+        boxShadow: "sm",
+    };
+    const sectionBadge = (count, scheme) => (_jsx(Badge, { colorScheme: scheme, variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", children: count }));
+    const startEditing = (item) => {
+        setEditingOrgId(item.orgId);
+        setEditValue(item.company_name);
+        setEditError("");
+    };
+    const cancelEditing = () => {
+        setEditingOrgId(null);
+        setEditValue("");
+        setEditError("");
+    };
+    const submitEditing = async (item) => {
+        const trimmed = editValue.trim();
+        if (!trimmed) {
+            setEditError(labels.emptyNameError);
+            return;
+        }
+        if (trimmed === item.company_name) {
+            cancelEditing();
+            return;
+        }
+        await (onEditOrganization === null || onEditOrganization === void 0 ? void 0 : onEditOrganization(item.orgId, trimmed));
+        setEditingOrgId(null);
+        setEditValue("");
+        setEditError("");
+    };
+    const renderActiveCard = (item) => {
+        var _a, _b, _c, _d;
+        const isSwitching = switchingOrgIds.includes(item.orgId);
+        // Role name is a display value, not a permission — apps pass the real rule.
+        const canEdit = (_a = item.canRename) !== null && _a !== void 0 ? _a : item.roleName === "Super Admin";
+        const canProtect = !((_b = item.canDelete) !== null && _b !== void 0 ? _b : item.roleName === "Super Admin");
+        const isProtected = item.defaultOrg === 1 || canProtect;
+        const isEditingThis = canEdit && editingOrgId === item.orgId;
+        const isSavingThis = editingOrgIds.includes(item.orgId);
+        const roleLabel = (_c = item.roleName) === null || _c === void 0 ? void 0 : _c.trim();
+        const deleteButton = (_jsx(IconButton, { "aria-label": labels.deleteOrganization, icon: _jsx(Trash2, { size: 12 }), size: "xs", variant: "ghost", borderRadius: "full", color: muted, isDisabled: isProtected, _hover: {
+                bg: errorTone.bg,
+                color: errorTone.fg,
+            }, onClick: () => onDeleteRequest
+                ? onDeleteRequest(item.orgId)
+                : setDeleteOrgId(item.orgId) }));
+        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: transitionFor(["border-color", "box-shadow", "transform"]), sx: reducedMotionSx(), _hover: {
+                borderColor: colors.primary[300],
+                boxShadow: "lg",
+                transform: "translateY(-3px)",
+            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primaryTile, color: onPrimaryTile, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: transitionFor(["color", "gap"]), sx: reducedMotionSx(), role: "button", tabIndex: 0, _focusVisible: focusVisibleRing(colors), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), onKeyDown: onActivationKey(() => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId)), children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimaryTile, bg: primaryTile }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
+                                        ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
+                                        : labels.deleteOrganization, hasArrow: true, children: isProtected ? (_jsx(Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? (_jsxs(Box, { children: [_jsxs(HStack, { spacing: 1, children: [_jsx(Input, { value: editValue, onChange: (e) => {
+                                        setEditValue(e.target.value);
+                                        if (editError)
+                                            setEditError("");
+                                    }, size: "sm", fontSize: "sm", fontWeight: 700, autoFocus: true, isDisabled: isSavingThis, onKeyDown: (e) => {
+                                        if (e.key === "Enter")
+                                            submitEditing(item);
+                                        if (e.key === "Escape")
+                                            cancelEditing();
+                                    } }), _jsx(IconButton, { "aria-label": labels.save, icon: isSavingThis ? _jsx(Spinner, { size: "xs" }) : _jsx(Check, { size: 14 }), size: "xs", colorScheme: "green", isDisabled: isSavingThis, onClick: () => submitEditing(item), variant: "ghost" }), _jsx(IconButton, { "aria-label": labels.cancel, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", isDisabled: isSavingThis, onClick: cancelEditing })] }), editError && (_jsx(Text, { fontSize: "0.7rem", color: colors.semanticText.error, mt: 1, children: editError }))] })) : (_jsxs(Box, { children: [_jsx(Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, children: item.company_name }), (item.isOwner || roleLabel) && (_jsxs(HStack, { spacing: 1, mt: 1, children: [item.isOwner && (_jsx(Tag, { label: labels.owner, icon: Crown, colorScheme: "primary", variant: "subtle", size: "xs" })), roleLabel && (_jsx(Tag, { label: roleLabel, colorScheme: "gray", variant: "subtle", size: "xs" }))] }))] }))] }, item.orgId));
+    };
+    const renderInvitedCard = (item) => {
+        const isResponding = respondingOrgIds.includes(item.orgId);
+        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: transitionFor(["box-shadow", "transform"]), sx: reducedMotionSx(), _hover: {
+                boxShadow: "lg",
+                transform: "translateY(-3px)",
+            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: warningTone.bg, color: warningTone.fg, children: _jsx(Building2, { size: 18 }) }), _jsx(Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), _jsx(Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && (_jsxs(Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [_jsx(Globe, { size: 13 }), _jsx(Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), _jsxs(HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [_jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: () => onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId) }) }), _jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));
+    };
+    const gridSx = {
+        display: "grid",
+        gridTemplateColumns: {
+            base: "1fr",
+            md: "repeat(2, 1fr)",
+            lg: "repeat(3, 1fr)",
+        },
+        gap: 3,
+        width: "100%",
+    };
+    const hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
+    return (_jsxs(Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [_jsxs(Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [_jsxs(Flex, { alignItems: "center", gap: 3, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), _jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primarySolid.fill, color: primarySolid.color, children: _jsx(Building2, { size: 18 }) }), _jsxs(Box, { children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
+                                                    ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim()
+                                                    : labels.greeting }), userName ? _jsx(Avatar, { size: "xs", name: userName, src: userAvatarUrl }) : null] }), _jsx(Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), _jsx(Button, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? (_jsx(Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Box, { ...cardSx, p: 3, children: [_jsx(Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), _jsx(SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? (_jsx(EmptyState, { icon: Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: _jsx(Button, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : (_jsxs(VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Users, { size: 16, color: colors.accentText }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), _jsx(Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Mail, { size: 16, color: colors.semanticText.warning }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), _jsx(Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, _jsx(CreateOrgModal, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
+                    await (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values));
+                    setCreateOpen(false);
+                }, labels: labels }), _jsx(DeleteOrgModal, { isOpen: deleteOrgId !== null, onClose: () => setDeleteOrgId(null), onConfirm: async () => {
+                    if (deleteOrgId !== null) {
+                        await (onDeleteOrganization === null || onDeleteOrganization === void 0 ? void 0 : onDeleteOrganization(deleteOrgId));
+                    }
+                    setDeleteOrgId(null);
+                }, labels: labels })] }));
+};
+export default OrganizationDetails;

package/dist/esm/Components/OrganizationDetails/OrganizationDetailsProps.js

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

package/dist/esm/Components/PageHeader/PageHeader.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Heading, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const TITLE_STYLES = {
+    md: { fontSize: "lg", fontWeight: 600, letterSpacing: "-0.01em" },
+    lg: { fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.2 },
+    xl: { fontSize: { base: "2xl", md: "3xl" }, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.2 },
+};
+/** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
+const PageHeader = ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, titleSize = "md", actionsLayout = "auto", "data-testid": testId, ...rest }) => {
+    const { colors } = useCustomTheme();
+    const wraps = actionsLayout === "auto";
+    const stacked = actionsLayout === "stacked";
+    return (_jsxs(Flex, { ...rest, direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && (_jsx(Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), _jsxs(Flex, { justify: "space-between", align: stacked ? "flex-start" : { base: "flex-start", md: "center" }, direction: stacked ? "column" : { base: "column", md: "row" }, wrap: wraps ? "wrap" : "nowrap", gap: 3, children: [_jsxs(Flex, { gap: 3, align: "center", minW: 0, flex: wraps ? { base: "0 1 auto", md: "1 1 16rem" } : undefined, children: [leading && _jsx(Box, { flexShrink: 0, children: leading }), _jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Heading, { as: "h1", ...TITLE_STYLES[titleSize], color: colors.header[900], children: title }), titleAddon] }), subtitle && (_jsx(Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && (_jsx(Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && (_jsx(Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: wraps ? undefined : 0, children: actions }))] }), tabs && _jsx(Box, { children: tabs })] }));
+};
+export default PageHeader;

package/dist/esm/Components/PageHeader/PageHeaderProps.js

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

package/dist/esm/Components/Pagination/Pagination.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useLayoutEffect, useMemo, useRef } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Button from "../Button/Button.js";
+import Select from "../Select/Select.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { clampPage, pageCountFor, pageWindow } from "./pageWindow.js";
+import { defaultPaginationLabels } from "./PaginationProps.js";
+export const PICKER_SIZE = { xs: "xs", sm: "xs", md: "md", lg: "lg" };
+const PICKER_WIDTH = { xs: "3.75rem", sm: "3.75rem", md: "4.5rem", lg: "5.25rem" };
+const Pagination = (props) => {
+    const { page, onPageChange, pageSize, pageSizeOptions, onPageSizeChange, siblingCount = 1, size = "sm", isDisabled = false, labels, "aria-label": ariaLabel = "Pagination", "data-testid": testId, } = props;
+    const { colors } = useCustomTheme();
+    const gapInk = useMemo(() => accentTextOnCanvas(colors.gray, colors.backgroundColor.main), [colors]);
+    const copy = { ...defaultPaginationLabels, ...labels };
+    const pageCount = props.totalItems === undefined ? Math.max(1, props.pageCount) : pageCountFor(props.totalItems, props.pageSize);
+    const current = clampPage(page, pageCount);
+    const items = useMemo(() => pageWindow(current, pageCount, siblingCount), [current, pageCount, siblingCount]);
+    const { height, fontSize, iconSize } = BUTTON_SIZES[size];
+    const previousRef = useRef(null);
+    const nextRef = useRef(null);
+    const currentRef = useRef(null);
+    useLayoutEffect(() => {
+        var _a;
+        const stranded = [previousRef.current, nextRef.current].some((step) => step !== null && step.disabled && step === document.activeElement);
+        if (stranded)
+            (_a = currentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [current]);
+    const sizeOptions = useMemo(() => pageSizeOptions && pageSize !== undefined
+        ? [...new Set([...pageSizeOptions, pageSize])].sort((a, b) => a - b).map((n) => ({ id: n, label: n }))
+        : [], [pageSizeOptions, pageSize]);
+    const go = (target) => {
+        if (target !== current)
+            onPageChange(target);
+    };
+    return (_jsxs(Flex, { as: "nav", "aria-label": ariaLabel, "data-testid": testId, align: "center", gap: 3, wrap: "wrap", children: [_jsxs(Flex, { as: "ul", listStyleType: "none", m: 0, p: 0, align: "center", gap: 1, children: [_jsx(Box, { as: "li", children: _jsx(Button, { ref: previousRef, size: size, variant: "ghost", colorScheme: "gray", "aria-label": copy.previous, leftIcon: _jsx(ChevronLeft, { size: iconSize }), isDisabled: isDisabled || current <= 1, onClick: () => go(current - 1) }) }), items.map((item) => typeof item === "number" ? (_jsx(Box, { as: "li", children: _jsx(Button, { ref: item === current ? currentRef : undefined, size: size, variant: item === current ? "solid" : "ghost", colorScheme: item === current ? "primary" : "gray", "aria-label": copy.page(item), "aria-current": item === current ? "page" : undefined, isDisabled: isDisabled, onClick: () => go(item), sx: NUMERIC_TEXT, children: item }) }, item)) : (_jsx(Box, { as: "li", "aria-hidden": true, children: _jsx(Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: height, h: height, fontSize: fontSize, color: gapInk, children: "\u2026" }) }, item))), _jsx(Box, { as: "li", children: _jsx(Button, { ref: nextRef, size: size, variant: "ghost", colorScheme: "gray", "aria-label": copy.next, leftIcon: _jsx(ChevronRight, { size: iconSize }), isDisabled: isDisabled || current >= pageCount, onClick: () => go(current + 1) }) })] }), onPageSizeChange && sizeOptions.length > 0 && (_jsx(Select, { native: false, isSearchable: false, "aria-label": copy.pageSize, size: PICKER_SIZE[size], width: PICKER_WIDTH[size], isDisabled: isDisabled, value: pageSize, options: sizeOptions, onChange: (option) => option && onPageSizeChange(Number(option.id)) }))] }));
+};
+export default memo(Pagination);

package/dist/esm/Components/Pagination/PaginationProps.js

@@ -0,0 +1,6 @@
+export const defaultPaginationLabels = {
+    previous: "Previous page",
+    next: "Next page",
+    page: (page) => `Page ${page}`,
+    pageSize: "Rows per page",
+};

package/dist/esm/Components/Pagination/pageWindow.js

@@ -0,0 +1,16 @@
+const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
+export const pageCountFor = (totalItems, pageSize) => pageSize > 0 ? Math.max(1, Math.ceil(totalItems / pageSize)) : 1;
+export const clampPage = (page, pageCount) => Math.min(Math.max(1, page), Math.max(1, pageCount));
+export const pageWindow = (page, pageCount, siblingCount = 1) => {
+    const count = Math.max(1, pageCount);
+    const siblings = Math.max(0, siblingCount);
+    const current = clampPage(page, count);
+    const edgeRun = 2 * siblings + 3;
+    if (count <= edgeRun + 2)
+        return range(1, count);
+    if (current - siblings <= 3)
+        return [...range(1, edgeRun), "end-ellipsis", count];
+    if (current + siblings >= count - 2)
+        return [1, "start-ellipsis", ...range(count - edgeRun + 1, count)];
+    return [1, "start-ellipsis", ...range(current - siblings, current + siblings), "end-ellipsis", count];
+};

package/dist/esm/Components/PaymentOption/PaymentOption.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { RadioIndicator, selectableSurface, useSelectable } from "../CheckoutKit/selectable.js";
+import Tag from "../Tag/Tag.js";
+/** Tonal payment-method row: icon well, title, subtitle, offer tag, and an area that opens when it is chosen. */
+const PaymentOption = ({ value, title, subtitle, icon, offer, selected, onSelect, disabled = false, children, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const uid = useId();
+    const titleId = `${uid}-title`;
+    const subtitleId = `${uid}-subtitle`;
+    const regionId = `${uid}-region`;
+    const { isSelected, interactive, inGroup, ringed, props } = useSelectable({ value, selected, disabled, onSelect });
+    const selectable = inGroup || !!onSelect;
+    const expanded = isSelected && !!children;
+    return (_jsxs(Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...selectableSurface(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [_jsxs(Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? titleId : undefined, "aria-describedby": props.role && subtitle ? subtitleId : undefined, "aria-controls": expanded && props.role === "radio" ? regionId : undefined, align: "center", gap: 3, p: 4, borderRadius: "2xl", cursor: interactive ? "pointer" : "default", outline: "none", children: [selectable && _jsx(RadioIndicator, { selected: isSelected }), icon && (_jsx(Flex, { as: "span", "aria-hidden": true, align: "center", justify: "center", boxSize: 10, flexShrink: 0, borderRadius: "xl", bg: colors.background[50], color: colors.header[900], children: icon })), _jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Text, { as: "span", id: titleId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: title }), subtitle && (_jsx(Text, { as: "span", id: subtitleId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: subtitle }))] }), offer && _jsx(Tag, { label: offer, size: "xs", tone: "success" })] }), expanded && (_jsx(Box, { id: regionId, role: "group", "aria-labelledby": titleId, px: 4, pb: 4, pl: selectable ? "3.25rem" : 4, children: children }))] }));
+};
+export default PaymentOption;

package/dist/esm/Components/PaymentOption/PaymentOptionGroup.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectableGroup } from "../CheckoutKit/selectable.js";
+/** Radiogroup wrapper for `PaymentOption`s. */
+const PaymentOptionGroup = (props) => _jsx(SelectableGroup, { ...props });
+export default PaymentOptionGroup;

package/dist/esm/Components/PaymentOption/PaymentOptionProps.js

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

package/dist/esm/Components/PdfViewer/PdfViewer.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Download, ExternalLink, FileText } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import Button from "../Button/Button.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+const DEFAULT_LABELS = {
+    open: "Open in new tab",
+    download: "Download",
+    unsupported: "This browser can't display PDFs inline. Open or download the file instead.",
+    failed: "The document could not be loaded.",
+};
+const canEmbedPdf = () => typeof navigator === "undefined" || navigator.pdfViewerEnabled !== false;
+const asPdf = (blob) => (blob.type ? blob : new Blob([blob], { type: "application/pdf" }));
+/** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
+const PdfViewer = ({ pdfUrl, getBlob, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", fallback, onLoad, onError, labels, "data-testid": testId, }) => {
+    const theme = useCustomTheme();
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const toolbarSurface = theme.colors.background[50];
+    const iconHoverInk = accentTextOnCanvas(theme.colors.primary, toolbarSurface);
+    const iconHoverBg = listRowBackgrounds(theme.colors).active;
+    const supported = canEmbedPdf();
+    const isBlobMode = Boolean(getBlob);
+    const getBlobRef = useRef(getBlob);
+    const onLoadRef = useRef(onLoad);
+    const onErrorRef = useRef(onError);
+    getBlobRef.current = getBlob;
+    onLoadRef.current = onLoad;
+    onErrorRef.current = onError;
+    const [status, setStatus] = useState(isBlobMode && supported ? "loading" : "idle");
+    const [objectUrl, setObjectUrl] = useState(null);
+    const tempUrls = useRef([]);
+    useEffect(() => {
+        var _a;
+        if (!isBlobMode || !supported)
+            return undefined;
+        let cancelled = false;
+        let created = null;
+        setStatus("loading");
+        setObjectUrl(null);
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            var _a;
+            if (cancelled)
+                return;
+            created = URL.createObjectURL(asPdf(blob));
+            setObjectUrl(created);
+            setStatus("ready");
+            (_a = onLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadRef);
+        }, (error) => {
+            var _a;
+            if (cancelled)
+                return;
+            setStatus("error");
+            (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error);
+        });
+        return () => {
+            cancelled = true;
+            if (created)
+                URL.revokeObjectURL(created);
+        };
+    }, [isBlobMode, supported]);
+    useEffect(() => () => {
+        tempUrls.current.forEach((url) => URL.revokeObjectURL(url));
+        tempUrls.current = [];
+    }, []);
+    const makeTempUrl = useCallback((blob) => {
+        const url = URL.createObjectURL(asPdf(blob));
+        tempUrls.current.push(url);
+        return url;
+    }, []);
+    const openBlob = () => {
+        var _a;
+        if (objectUrl) {
+            window.open(objectUrl, "_blank", "noopener");
+            return;
+        }
+        const tab = window.open("", "_blank");
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            const url = makeTempUrl(blob);
+            if (tab)
+                tab.location.href = url;
+            else
+                window.location.assign(url);
+        }, (error) => {
+            var _a;
+            tab === null || tab === void 0 ? void 0 : tab.close();
+            (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error);
+        });
+    };
+    const downloadBlob = () => {
+        var _a;
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            const link = document.createElement("a");
+            link.href = makeTempUrl(blob);
+            link.download = fileName;
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+        }, (error) => { var _a; return (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error); });
+    };
+    const toolbarLabel = (kind) => {
+        if (labels === null || labels === void 0 ? void 0 : labels[kind])
+            return `${labels[kind]} ${fileName}`;
+        return kind === "open" ? `Open ${fileName} in a new tab` : `Download ${fileName}`;
+    };
+    const actionStyle = {
+        p: 2,
+        borderRadius: "lg",
+        color: theme.colors.gray[600],
+        _hover: { bg: iconHoverBg, color: iconHoverInk },
+    };
+    const openAction = isBlobMode ? (_jsx(Box, { as: "button", type: "button", onClick: openBlob, "aria-label": toolbarLabel("open"), ...actionStyle, children: _jsx(ExternalLink, { size: 16, "aria-hidden": "true" }) })) : (_jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": toolbarLabel("open"), ...actionStyle, children: _jsx(ExternalLink, { size: 16, "aria-hidden": "true" }) }));
+    const downloadAction = isBlobMode && !objectUrl ? (_jsx(Box, { as: "button", type: "button", onClick: downloadBlob, "aria-label": toolbarLabel("download"), ...actionStyle, children: _jsx(Download, { size: 16, "aria-hidden": "true" }) })) : (_jsx(Box, { as: "a", href: objectUrl !== null && objectUrl !== void 0 ? objectUrl : pdfUrl, download: fileName, "aria-label": toolbarLabel("download"), ...actionStyle, children: _jsx(Download, { size: 16, "aria-hidden": "true" }) }));
+    const showFallback = !supported || status === "error";
+    const isLoading = isBlobMode && supported && status === "loading";
+    const renderFallback = () => {
+        if (fallback !== undefined)
+            return fallback;
+        return (_jsxs(Flex, { direction: "column", align: "flex-start", gap: 3, p: 4, "data-testid": "pdf-fallback", children: [_jsx(Text, { role: "status", fontSize: "sm", color: theme.colors.textMuted, children: supported ? text.failed : text.unsupported }), !showToolbar && (_jsxs(Flex, { gap: 2, wrap: "wrap", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", leftIcon: _jsx(ExternalLink, { size: 16, "aria-hidden": "true" }), label: text.open, onClick: isBlobMode ? openBlob : () => window.open(pdfUrl, "_blank", "noopener"), "data-testid": "pdf-open" }), _jsx(Button, { variant: "outline", colorScheme: "gray", leftIcon: _jsx(Download, { size: 16, "aria-hidden": "true" }), label: text.download, onClick: isBlobMode ? downloadBlob : directDownload(pdfUrl, fileName), "data-testid": "pdf-download" })] }))] }));
+    };
+    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], "data-testid": testId, children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText, "aria-hidden": "true" }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: text.open, placement: "top", children: openAction }), _jsx(ToolTip, { label: text.download, placement: "top", children: downloadAction })] })] })), showFallback ? (renderFallback()) : isLoading ? (_jsx(Box, { "aria-busy": "true", "data-testid": "pdf-loading", children: _jsx(Skeletons, { type: "skeleton", height: height, width: "100%", borderRadius: "0" }) })) : (_jsx(Box, { as: "embed", src: objectUrl !== null && objectUrl !== void 0 ? objectUrl : pdfUrl, type: "application/pdf", title: fileName, onLoad: isBlobMode ? undefined : () => { var _a; return (_a = onLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadRef); }, width: "100%", height: height, display: "block" }))] }));
+};
+const directDownload = (url, fileName) => () => {
+    if (!url)
+        return;
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+};
+export default PdfViewer;

package/dist/esm/Components/PersonChip/PersonChip.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Icon, Text } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import Avatar from "../Avatar/Avatar.js";
+const NAME_SIZE = {
+    sm: "xs-plus", md: "sm", lg: "md", xl: "lg",
+};
+const SECONDARY_SIZE = {
+    sm: "xs", md: "xs", lg: "xs-plus", xl: "sm",
+};
+const REMOVE_ICON_SIZE = {
+    sm: 12, md: 14, lg: 14, xl: 16,
+};
+// The remove button is a sibling of the clickable region, never nested in it — a <button> can't contain another.
+const PersonChip = ({ name, imageUrl, secondary, size = "md", orientation = "horizontal", status, onClick, onRemove, removeLabel, isTruncated = true, maxW, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const isInteractive = Boolean(onClick);
+    const isVertical = orientation === "vertical";
+    const removeButton = onRemove ? (_jsx(Box, { as: "button", type: "button", "aria-label": removeLabel !== null && removeLabel !== void 0 ? removeLabel : `Remove ${name}`, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, borderRadius: "full", p: 1, color: colors.textMuted, transition: transitionFor(["opacity", "color"]), _hover: { opacity: 0.8, color: colors.header[900] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, onClick: (e) => {
+            e.stopPropagation();
+            onRemove();
+        }, children: _jsx(Icon, { as: X, boxSize: `${REMOVE_ICON_SIZE[size]}px` }) })) : null;
+    const content = (_jsxs(_Fragment, { children: [_jsx(Avatar, { name: name, src: imageUrl, size: size, status: status }), _jsxs(Box, { minW: 0, maxW: maxW, children: [_jsx(Text, { fontSize: NAME_SIZE[size], fontWeight: 600, color: colors.header[900], isTruncated: isTruncated, children: name }), secondary ? (_jsx(Text, { fontSize: SECONDARY_SIZE[size], color: colors.textMuted, isTruncated: isTruncated, children: secondary })) : null] })] }));
+    const identityStyle = {
+        direction: isVertical ? "column" : "row",
+        align: "center",
+        gap: isVertical ? 1.5 : 2.5,
+        minW: 0,
+        flex: isVertical ? undefined : "1",
+        textAlign: isVertical ? "center" : "left",
+        borderRadius: "lg",
+    };
+    const identity = isInteractive ? (_jsx(Flex, { as: "button", type: "button", onClick: onClick, ...identityStyle, cursor: "pointer", transition: transitionFor(["background-color"]), _hover: { bg: colors.backgroundColor.secondary }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, "data-testid": onRemove ? undefined : testId, children: content })) : (_jsx(Flex, { ...identityStyle, "data-testid": onRemove ? undefined : testId, children: content }));
+    if (!removeButton)
+        return identity;
+    return (_jsxs(Flex, { direction: isVertical ? "column" : "row", align: "center", gap: isVertical ? 1 : 0, minW: 0, "data-testid": testId, children: [identity, removeButton] }));
+};
+export default PersonChip;

package/dist/esm/Components/PersonChip/PersonChipProps.js

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

package/dist/esm/Components/PinInput/PinInput.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack, PinInput, PinInputField } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { pinInputCellSize } from "./pinInputCellSize.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. */
+export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, size = DEFAULT_CONTROL_SIZE, error, errorMessage, helperText, isDisabled, }) {
+    var _a;
+    const theme = useCustomTheme();
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const invalidCell = error
+        ? {
+            _invalid: {
+                borderColor: theme.colors.semanticText.error,
+                boxShadow: "none",
+                _focus: { borderColor: theme.colors.semanticText.error, ...fieldFocusVisible(theme.colors) },
+            },
+        }
+        : {};
+    const fieldName = (_a = label !== null && label !== void 0 ? label : id) !== null && _a !== void 0 ? _a : "One-time code";
+    // Square cells at the same heights every other field uses — Chakra's own PinInput size
+    // scale doesn't line up with the library's, so cells are sized directly.
+    const cell = pinInputCellSize(size);
+    return (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(HStack, { role: "group", "aria-label": fieldName, children: _jsx(PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, isInvalid: error, isDisabled: isDisabled, children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { "aria-label": `${fieldName}, digit ${index + 1} of ${pins}`, "aria-describedby": ids.describedBy, boxSize: cell.boxSize, fontSize: cell.fontSize, borderRadius: "lg", backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) }, ...invalidCell }, index))) }) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+}

package/dist/esm/Components/PinInput/PinInputProps.js

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

package/dist/esm/Components/PinInput/pinInputCellSize.js

@@ -0,0 +1,6 @@
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+/** Square OTP cell dimensions for a size, aligned to the shared CONTROL_SIZES heights. */
+export const pinInputCellSize = (size) => {
+    const spec = CONTROL_SIZES[size];
+    return { boxSize: spec.height, fontSize: spec.fontSize };
+};