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

package/dist/esm/Components/Reorder/Reorder.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Box, Divider, HStack, IconButton, Image, Text, } from "@chakra-ui/react";
+import { DragDropContext, Droppable, Draggable, } from "@hello-pangea/dnd";
+import { BetweenHorizonalStart, GripVertical, X } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+/** Horizontal drag-reorderable row of image tiles (wraps @hello-pangea/dnd) — not a substitute for KanbanBoard's column drag/drop. */
+const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onRemove, }) => {
+    const { colors } = useCustomTheme();
+    const handleDragEnd = (result) => {
+        if (!result.destination)
+            return;
+        const reordered = Array.from(items);
+        const [moved] = reordered.splice(result.source.index, 1);
+        reordered.splice(result.destination.index, 0, moved);
+        onReorder(reordered);
+    };
+    return (_jsxs(Box, { borderWidth: BORDER_WIDTHS.hairline, borderRadius: "xl", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BetweenHorizonalStart, {}), _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "sm", lineHeight: "100%", letterSpacing: "0.06em", textTransform: "uppercase", py: 4, children: label })] }), _jsx(Divider, {}), _jsx("br", {}), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => (_jsxs(HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => (_jsx(Draggable, { draggableId: item.id, index: index, children: (provided) => {
+                                    var _a;
+                                    return (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: `${BORDER_WIDTHS.hairline} solid`, borderColor: colors.boxborder[200], borderRadius: "lg", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index + 1}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), _jsx(Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && (_jsx(IconButton, { icon: _jsx(X, { size: 16, color: colors.semanticText.error }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
+                                } }, item.id))), provided.placeholder] })) }) })] }));
+};
+export default ReorderList;

package/dist/esm/Components/Reorder/ReorderProps.js

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

package/dist/esm/Components/ReviewList/ReviewList.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { BadgeCheck, ThumbsUp } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { DEFAULT_LOCALE } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+import Rating from "../Rating/Rating.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+const DEFAULT_LABELS = {
+    verified: "Verified purchase",
+    helpful: (count) => `Helpful (${count})`,
+    readMore: "Read more",
+    readLess: "Read less",
+    loadMore: "Load more reviews",
+    loadingMore: "Loading more reviews…",
+    emptyTitle: "No reviews yet",
+    emptyBody: "Reviews from verified buyers will show up here.",
+    purchasedSize: (size) => `Size ${size}`,
+    loadingReviews: "Loading reviews",
+    moreLoaded: (count) => `${count} more ${count === 1 ? "review" : "reviews"} loaded`,
+    photoAlt: (author) => `Photo from ${author}'s review`,
+};
+const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+const SKELETON_ROWS = [0, 1, 2];
+const makeFormatter = (locale) => {
+    const options = { day: "numeric", month: "short", year: "numeric" };
+    try {
+        return new Intl.DateTimeFormat(locale, options);
+    }
+    catch {
+        return new Intl.DateTimeFormat(DEFAULT_LOCALE, options);
+    }
+};
+const formatDate = (raw, fmt) => {
+    const dateOnly = DATE_ONLY.exec(raw);
+    const parsed = dateOnly ? new Date(Number(dateOnly[1]), Number(dateOnly[2]) - 1, Number(dateOnly[3])) : new Date(raw);
+    if (Number.isNaN(parsed.getTime()))
+        return { text: raw, valid: false };
+    return { text: fmt.format(parsed), valid: true };
+};
+const Dot = () => (_jsx(Text, { as: "span", "aria-hidden": true, children: "\u00B7" }));
+const ReviewRow = ({ review, index, clampChars, fmt, labels, pressed, expanded, onToggleHelpful, onToggleExpanded }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    const bodyId = useId();
+    const isLong = review.body.length > clampChars;
+    const date = formatDate(review.date, fmt);
+    const count = ((_a = review.helpful) !== null && _a !== void 0 ? _a : 0) + (pressed ? 1 : 0);
+    const showHelpful = review.helpful !== undefined || pressed;
+    return (_jsxs(Box, { as: "li", listStyleType: "none", "data-testid": `review-${review.id}`, children: [index > 0 && _jsx(Box, { "aria-hidden": true, h: "1px", bg: colors.background[100] }), _jsxs(Flex, { direction: "column", gap: 2.5, py: 6, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Rating, { value: review.rating, size: "sm", showValue: false }), review.title && (_jsx(Text, { as: "h3", fontSize: "md", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: review.title }))] }), _jsxs(Box, { children: [_jsx(Text, { id: bodyId, fontSize: "sm", lineHeight: 1.6, color: colors.text[700], noOfLines: isLong && !expanded ? 4 : undefined, children: review.body }), isLong && (_jsx(Box, { as: "button", type: "button", mt: 1, fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-expanded": expanded, "aria-controls": bodyId, onClick: () => onToggleExpanded(review.id), borderRadius: "sm", transition: transitionFor(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: expanded ? labels.readLess : labels.readMore }))] }), review.media && review.media.length > 0 && (_jsx(Flex, { gap: 2, wrap: "wrap", children: review.media.map((m) => {
+                            var _a;
+                            return (_jsx(Box, { boxSize: "72px", borderRadius: "xl", overflow: "hidden", bg: colors.background[100], flexShrink: 0, children: _jsx("img", { src: m.src, alt: (_a = m.alt) !== null && _a !== void 0 ? _a : labels.photoAlt(review.author), loading: "lazy", style: { width: "100%", height: "100%", objectFit: "cover" } }) }, m.id));
+                        }) })), _jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", fontSize: "xs", color: colors.textMuted, sx: NUMERIC_TEXT, children: [_jsx(Text, { as: "span", fontWeight: 600, color: colors.header[900], children: review.author }), review.city && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx(Text, { as: "span", children: review.city })] })), _jsx(Dot, {}), date.valid ? (_jsx("time", { dateTime: review.date, children: date.text })) : (_jsx(Text, { as: "span", children: date.text })), review.purchasedSize && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx(Text, { as: "span", children: labels.purchasedSize(review.purchasedSize) })] })), review.verified && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs(Flex, { as: "span", align: "center", gap: 1, fontWeight: 600, color: colors.semanticText.success, children: [_jsx(BadgeCheck, { size: 14, "aria-hidden": true, focusable: "false" }), labels.verified] })] }))] }), showHelpful && (_jsx(Box, { children: _jsx(Button, { variant: "ghost", size: "sm", "aria-pressed": pressed, onClick: () => onToggleHelpful(review), leftIcon: _jsx(ThumbsUp, { size: 14, "aria-hidden": true, fill: pressed ? "currentColor" : "none" }), sx: { color: pressed ? colors.header[900] : colors.textMuted, ...NUMERIC_TEXT }, children: labels.helpful(count) }) }))] })] }));
+};
+const SkeletonRow = () => (_jsx(Box, { as: "li", listStyleType: "none", "aria-hidden": true, py: 6, children: _jsxs(Flex, { direction: "column", gap: 3, children: [_jsx(Skeletons, { type: "skeleton", width: "80px", height: "14px", borderRadius: "sm" }), _jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(Skeletons, { type: "skeleton", width: "100%", height: "12px", borderRadius: "sm" }), _jsx(Skeletons, { type: "skeleton", width: "94%", height: "12px", borderRadius: "sm" }), _jsx(Skeletons, { type: "skeleton", width: "60%", height: "12px", borderRadius: "sm" })] }), _jsx(Skeletons, { type: "skeleton", width: "180px", height: "12px", borderRadius: "sm" })] }) }));
+/** Customer reviews: stars, clamped body, verified marker, helpful vote and load-more paging, with a slot for sorting. */
+const ReviewList = ({ reviews, onHelpful, clampChars = 220, sortSlot, hasMore = false, onLoadMore, isLoading = false, isLoadingMore = false, emptyState, locale = DEFAULT_LOCALE, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const fmt = useMemo(() => makeFormatter(locale), [locale]);
+    const [pressed, setPressed] = useState({});
+    const [expanded, setExpanded] = useState({});
+    const [announcement, setAnnouncement] = useState("");
+    const previousCount = useRef(reviews.length);
+    const moreLoaded = copy.moreLoaded;
+    useEffect(() => {
+        const added = reviews.length - previousCount.current;
+        const hadReviews = previousCount.current > 0;
+        previousCount.current = reviews.length;
+        setAnnouncement(!isLoading && hadReviews && added > 0 ? moreLoaded(added) : "");
+    }, [reviews.length, isLoading, moreLoaded]);
+    const toggleHelpful = (review) => {
+        const next = !pressed[review.id];
+        setPressed((prev) => ({ ...prev, [review.id]: next }));
+        if (next)
+            onHelpful === null || onHelpful === void 0 ? void 0 : onHelpful(review.id);
+    };
+    const toggleExpanded = (id) => setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
+    const isEmpty = !isLoading && reviews.length === 0;
+    return (_jsxs(Box, { as: "section", "data-testid": testId, children: [sortSlot && (_jsx(Flex, { justify: "flex-end", mb: 4, children: sortSlot })), isEmpty ? ((emptyState !== null && emptyState !== void 0 ? emptyState : (_jsxs(Flex, { direction: "column", align: "center", gap: 1, py: 12, textAlign: "center", children: [_jsx(Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: copy.emptyTitle }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, children: copy.emptyBody })] })))) : (_jsx(Box, { as: "ul", m: 0, p: 0, "aria-busy": isLoading || undefined, children: isLoading
+                    ? SKELETON_ROWS.map((n) => _jsx(SkeletonRow, {}, n))
+                    : reviews.map((review, index) => (_jsx(ReviewRow, { review: review, index: index, clampChars: clampChars, fmt: fmt, labels: copy, pressed: !!pressed[review.id], expanded: !!expanded[review.id], onToggleHelpful: toggleHelpful, onToggleExpanded: toggleExpanded }, review.id))) })), hasMore && !isLoading && !isEmpty && (_jsx(Flex, { justify: "center", mt: 4, children: _jsx(Button, { variant: "outline", size: "md", onClick: onLoadMore, isDisabled: isLoadingMore, "aria-busy": isLoadingMore || undefined, children: isLoadingMore ? copy.loadingMore : copy.loadMore }) })), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: isLoading ? copy.loadingReviews : announcement })] }));
+};
+export default ReviewList;

package/dist/esm/Components/ReviewList/ReviewListProps.js

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

package/dist/esm/Components/ReviewSummary/ReviewSummary.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Star } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { DEFAULT_LOCALE } from "../../Utils/price.js";
+import Rating from "../Rating/Rating.js";
+import Button from "../Button/Button.js";
+const STARS = [5, 4, 3, 2, 1];
+const DEFAULT_MIN_RATINGS_FOR_BARS = 10;
+const defaultLabels = (locale) => ({
+    heading: "Ratings & reviews",
+    writeReview: "Write a review",
+    ratings: (count) => `${new Intl.NumberFormat(locale).format(count)} ${count === 1 ? "rating" : "ratings"}`,
+    emptyTitle: "No reviews yet",
+    emptyBody: "Bought this? Be the first to say how it fits.",
+    bar: (stars, percent) => `${stars} ${stars === 1 ? "star" : "stars"}, ${percent}%`,
+});
+const percentages = (breakdown) => {
+    const total = STARS.reduce((sum, stars) => sum + breakdown[stars], 0);
+    return (stars) => (total > 0 ? Math.round((breakdown[stars] / total) * 100) : 0);
+};
+/** Average rating, count and a five-row distribution; scales down to a thin summary or an invitation when there is little or no evidence. */
+const ReviewSummary = ({ rating, count, breakdown, minRatingsForBars = DEFAULT_MIN_RATINGS_FOR_BARS, onWriteReview, id, locale = DEFAULT_LOCALE, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...defaultLabels(locale), ...labels };
+    const empty = count <= 0 || rating <= 0;
+    const showBars = !empty && !!breakdown && count >= minRatingsForBars;
+    const average = Math.min(5, Math.max(0, rating));
+    const averageText = new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 }).format(average);
+    const nf = new Intl.NumberFormat(locale);
+    const writeButton = onWriteReview ? (_jsx(Button, { variant: "outline", onClick: onWriteReview, children: copy.writeReview })) : null;
+    const distribution = (counts) => {
+        const percentOf = percentages(counts);
+        return (_jsx(Flex, { direction: "column", gap: 2, flex: "1", minW: 0, maxW: "26rem", w: "100%", children: STARS.map((stars) => {
+                const percent = percentOf(stars);
+                return (_jsxs(Box, { display: "grid", gridTemplateColumns: "2.25rem minmax(0, 1fr) 3.5rem", alignItems: "center", columnGap: 3, children: [_jsxs(Flex, { "aria-hidden": true, align: "center", gap: 1, fontSize: "sm", color: colors.text[800], sx: NUMERIC_TEXT, children: [_jsx("span", { children: stars }), _jsx(Star, { size: 12, fill: "currentColor", strokeWidth: 1.5 })] }), _jsx(Box, { role: "meter", "aria-label": copy.bar(stars, percent), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, h: "0.5rem", borderRadius: "full", bg: colors.background[200], overflow: "hidden", children: _jsx(Box, { h: "100%", w: `${percent}%`, borderRadius: "full", bg: colors.star }) }), _jsx(Text, { "aria-hidden": true, fontSize: "sm", textAlign: "right", color: colors.textMuted, sx: NUMERIC_TEXT, children: nf.format(counts[stars]) })] }, stars));
+            }) }));
+    };
+    return (_jsxs(Box, { as: "section", "aria-labelledby": id, "data-testid": testId, children: [_jsx(Text, { as: "h2", id: id, fontSize: "lg", fontWeight: 700, lineHeight: 1.3, color: colors.header[900], children: copy.heading }), empty ? (_jsxs(Flex, { direction: "column", align: "flex-start", gap: 1, mt: 4, children: [_jsx(Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: copy.emptyTitle }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, children: copy.emptyBody }), writeButton ? _jsx(Box, { mt: 3, children: writeButton }) : null] })) : (_jsxs(_Fragment, { children: [_jsxs(Flex, { direction: { base: "column", sm: "row" }, align: { base: "flex-start", sm: "center" }, gap: { base: 5, sm: 10 }, mt: 4, children: [_jsxs(Flex, { direction: "column", align: "flex-start", gap: 1.5, flexShrink: 0, children: [_jsx(Text, { fontSize: "5xl", lineHeight: 1, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: NUMERIC_TEXT, children: averageText }), _jsx(Rating, { value: average, size: "md", showValue: false }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, sx: NUMERIC_TEXT, children: copy.ratings(count) })] }), showBars && breakdown ? distribution(breakdown) : null] }), writeButton ? _jsx(Box, { mt: 5, children: writeButton }) : null] }))] }));
+};
+export default ReviewSummary;

package/dist/esm/Components/ReviewSummary/ReviewSummaryProps.js

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

package/dist/esm/Components/RolesPermission/DeleteRoleModal.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 DeleteRoleModal = ({ isOpen, onClose, onConfirm, isLoading, labels, }) => {
+    const { colors } = useCustomTheme();
+    const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    return (_jsx(ConfirmDialog, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.deleteRole, 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.deleteRoleConfirm }) }));
+};
+export default DeleteRoleModal;

package/dist/esm/Components/RolesPermission/RolesPermission.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Badge, Box, Checkbox, Divider, Flex, Heading, HStack, IconButton, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tooltip, Tr, VStack, } from "@chakra-ui/react";
+import { ArrowLeft, Check, Pencil, Plus, ShieldCheck, SquareArrowOutUpRight, Trash2, } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { bandOn, cardRule } from "../../Theme/tokens/builders/planeStep.js";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+import EmptyState from "../EmptyState/EmptyState.js";
+import DeleteRoleModal from "./DeleteRoleModal.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
+const DEFAULT_LABELS = {
+    title: "Roles & Permissions",
+    totalRoles: "Total Roles",
+    newRole: "New Role",
+    sNo: "S.No",
+    roleNameColumn: "Role name",
+    createdBy: "Created By",
+    createdTime: "Created Time",
+    actions: "Actions",
+    noRoles: "No roles found",
+    view: "View",
+    edit: "Edit",
+    delete: "Delete",
+    roleInformation: "Role & Permission Information",
+    roleName: "Role Name",
+    roleNamePlaceholder: "Enter role name",
+    enableAllPermissions: "Enable All Permissions",
+    trackLocation: "Track Location",
+    showAllUserRecords: "Show All User Records",
+    permissionSettings: "Permission Settings",
+    moduleName: "Module Name",
+    read: "Read",
+    create: "Create",
+    editPermission: "Edit",
+    deletePermission: "Delete",
+    importPermission: "Import",
+    exportPermission: "Export",
+    noPermissions: "No permissions found",
+    cancel: "Cancel",
+    saveChanges: "Save Changes",
+    updateChanges: "Update Changes",
+    readOnly: "Read Only",
+    deleteRole: "Delete Role",
+    deleteRoleConfirm: "Are you sure you want to delete this role?",
+};
+const DEFAULT_KEYS = [
+    "read",
+    "create",
+    "edit",
+    "delete",
+    "import",
+    "export",
+];
+/** Role list + role/permission-matrix form in one component (switch via `view`). */
+const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false, permissions, permissionKeys = DEFAULT_KEYS, roleName, roleNameError, isSuperAdmin, isTrackLocation, isShowRecords, isEditing = false, isSaving = false, onNewRole, onViewRole, onEditRole, onDeleteRole, onBack, onRoleNameChange, onToggleSuperAdmin, onToggleTrackLocation, onToggleShowRecords, onPermissionChange, onSave, onCancelForm, footerSlot, checkIcon, labels: labelOverrides, padding = "16px", }) => {
+    const { colors } = useCustomTheme();
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const [deleteId, setDeleteId] = useState(null);
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const heading = colors.text[900];
+    const rowBackgrounds = listRowBackgrounds(colors);
+    const headBg = bandOn(colors.background[100], surface);
+    const innerRule = cardRule(colors);
+    const rowHover = rowBackgrounds.active;
+    const isViewMode = mode === "view";
+    const columnLabels = {
+        read: labels.read,
+        create: labels.create,
+        edit: labels.editPermission,
+        delete: labels.deletePermission,
+        import: labels.importPermission,
+        export: labels.exportPermission,
+        automation: "Automation",
+    };
+    const cardSx = {
+        backgroundColor: surface,
+        borderRadius: "xl",
+        border: "1px solid",
+        borderColor: border,
+        boxShadow: "sm",
+        overflow: "hidden",
+    };
+    const cardHeaderSx = {
+        px: 4,
+        py: 3,
+        borderBottom: "1px solid",
+        borderColor: innerRule,
+    };
+    const thStyle = {
+        fontSize: "0.7rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        color: muted,
+        borderColor: innerRule,
+        py: 3,
+    };
+    const renderGrantedCheck = () => checkIcon !== null && checkIcon !== void 0 ? checkIcon : (_jsx(Box, { color: colors.semanticText.success, display: "inline-flex", children: _jsx(Check, { size: 18, strokeWidth: 3 }) }));
+    const renderListView = () => (_jsxs(VStack, { align: "stretch", spacing: 4, children: [_jsxs(Box, { ...cardSx, children: [_jsxs(Flex, { ...cardHeaderSx, alignItems: "center", justifyContent: "space-between", children: [_jsxs(HStack, { spacing: 2, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }), !isRolesLoading && (_jsxs(Badge, { colorScheme: "blue", variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", textTransform: "none", children: [labels.totalRoles, ": ", roles.length] }))] }), _jsx(Button, { label: labels.newRole, onClick: onNewRole, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", leftIcon: _jsx(Plus, { size: 15 }) })] }), _jsx(Box, { overflowX: "auto", children: isRolesLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 6 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : roles.length === 0 ? (_jsx(EmptyState, { icon: ShieldCheck, title: labels.noRoles, size: "sm", minH: "200px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, width: "56px", children: labels.sNo }), _jsx(Th, { ...thStyle, children: labels.roleNameColumn }), _jsx(Th, { ...thStyle, children: labels.createdBy }), _jsx(Th, { ...thStyle, children: labels.createdTime }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.actions })] }) }), _jsx(Tbody, { children: roles.map((role, index) => {
+                                        var _a;
+                                        return (_jsxs(Tr, { _hover: { bg: rowHover }, transition: BACKGROUND_TRANSITION, children: [_jsx(Td, { borderColor: innerRule, color: muted, fontSize: "sm", children: index + 1 }), _jsx(Td, { borderColor: innerRule, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading, children: role.roleName }), _jsx(Td, { borderColor: innerRule, fontSize: "sm", color: muted, children: role.createdBy }), _jsx(Td, { borderColor: innerRule, fontSize: "sm", color: muted, children: role.created_at }), _jsx(Td, { borderColor: innerRule, children: _jsxs(HStack, { spacing: 1, justifyContent: "flex-end", children: [_jsx(Tooltip, { label: labels.view, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquareArrowOutUpRight, { size: 15 }), "aria-label": labels.view, variant: "ghost", size: "xs", color: muted, onClick: () => onViewRole === null || onViewRole === void 0 ? void 0 : onViewRole(role) }) }), _jsx(Tooltip, { label: labels.edit, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Pencil, { size: 15 }), "aria-label": labels.edit, variant: "ghost", size: "xs", color: muted, onClick: () => onEditRole === null || onEditRole === void 0 ? void 0 : onEditRole(role) }) }), _jsx(Tooltip, { label: labels.delete, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Trash2, { size: 15 }), "aria-label": labels.delete, variant: "ghost", size: "xs", colorScheme: "red", color: colors.semanticText.error, onClick: () => setDeleteId(Number(role.roles_id)) }) })] }) })] }, (_a = role.roles_id) !== null && _a !== void 0 ? _a : role.roleName));
+                                    }) })] })) })] }), footerSlot] }));
+    const renderFormView = () => (_jsxs(VStack, { align: "stretch", spacing: 4, children: [_jsxs(Box, { ...cardSx, children: [_jsxs(Flex, { ...cardHeaderSx, alignItems: "center", gap: 2, children: [onCancelForm && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onCancelForm })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.roleInformation })] }), _jsxs(Box, { p: 4, children: [_jsx(Box, { maxW: "320px", children: _jsx(Tooltip, { label: isViewMode ? labels.readOnly : "", isDisabled: !isViewMode, children: _jsx(Box, { children: _jsx(TextInput, { label: labels.roleName, value: roleName, placeholder: labels.roleNamePlaceholder, error: !!roleNameError, errorMessage: roleNameError, onChange: (e) => onRoleNameChange === null || onRoleNameChange === void 0 ? void 0 : onRoleNameChange(e.target.value), isRequired: true, width: "100%", isDisabled: isViewMode }) }) }) }), _jsxs(VStack, { align: "stretch", spacing: 3, mt: 4, children: [_jsx(Checkbox, { isChecked: isSuperAdmin, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleSuperAdmin === null || onToggleSuperAdmin === void 0 ? void 0 : onToggleSuperAdmin(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.enableAllPermissions }) }), _jsx(Checkbox, { isChecked: isTrackLocation, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleTrackLocation === null || onToggleTrackLocation === void 0 ? void 0 : onToggleTrackLocation(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.trackLocation }) }), _jsx(Checkbox, { isChecked: isShowRecords, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleShowRecords === null || onToggleShowRecords === void 0 ? void 0 : onToggleShowRecords(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.showAllUserRecords }) })] })] })] }), _jsxs(Box, { ...cardSx, children: [_jsx(Flex, { ...cardHeaderSx, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.permissionSettings }) }), _jsx(Box, { overflowX: "auto", children: _jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), permissionKeys.map((key) => (_jsx(Th, { ...thStyle, textAlign: "center", children: columnLabels[key] }, key)))] }) }), _jsx(Tbody, { children: permissions.length === 0 ? (_jsx(Tr, { children: _jsx(Td, { colSpan: permissionKeys.length + 1, textAlign: "center", borderColor: innerRule, children: _jsx(Text, { color: muted, fontSize: "sm", py: 4, children: labels.noPermissions }) }) })) : (permissions.map((perm) => {
+                                        var _a;
+                                        const isAutomationModule = ((_a = perm.module) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "automation";
+                                        return (_jsxs(Tr, { _hover: { bg: rowHover }, transition: BACKGROUND_TRANSITION, children: [_jsx(Td, { borderColor: innerRule, color: heading, fontSize: "sm", fontWeight: 500, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: perm.module }), permissionKeys.map((key) => {
+                                                    const isRead = key === "read";
+                                                    return (_jsx(Td, { textAlign: "center", borderColor: innerRule, children: _jsx(Flex, { justify: "center", children: isViewMode ? (isAutomationModule ? (isRead &&
+                                                                perm.automation &&
+                                                                renderGrantedCheck()) : (perm[key] && renderGrantedCheck())) : isAutomationModule && !isRead ? null : (_jsx(Checkbox, { size: "sm", "aria-label": `${perm.module}: ${columnLabels[key]}`, isChecked: isAutomationModule
+                                                                    ? perm.automation
+                                                                    : perm[key], isDisabled: isAutomationModule && !isRead, onChange: () => onPermissionChange === null || onPermissionChange === void 0 ? void 0 : onPermissionChange(perm.module, isAutomationModule ? "automation" : key) })) }) }, key));
+                                                })] }, perm.module));
+                                    })) })] }) }), !isViewMode && (_jsxs(_Fragment, { children: [_jsx(Divider, { borderColor: innerRule }), _jsxs(Flex, { justifyContent: "flex-end", gap: 3, p: 4, children: [_jsx(Button, { onClick: onCancelForm, size: "sm", sx: { fontSize: "xs" }, label: labels.cancel, colorScheme: "red", variant: "outline" }), _jsx(Button, { onClick: onSave, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", isLoading: isSaving, label: isEditing ? labels.updateChanges : labels.saveChanges })] })] }))] })] }));
+    return (_jsxs(Box, { p: padding, backgroundColor: colors.backgroundColor.main, minHeight: "100%", children: [view === "list" ? renderListView() : renderFormView(), _jsx(DeleteRoleModal, { isOpen: deleteId !== null, onClose: () => setDeleteId(null), onConfirm: () => {
+                    if (deleteId !== null)
+                        onDeleteRole === null || onDeleteRole === void 0 ? void 0 : onDeleteRole(deleteId);
+                    setDeleteId(null);
+                }, labels: labels })] }));
+};
+export default RolesPermission;

package/dist/esm/Components/RolesPermission/RolesPermissionProps.js

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

package/dist/esm/Components/SaveBar/SaveBar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+/** Floating dirty-state bar: surfaceRaised card, slides/fades in on mount, unmounts when closed. */
+const SaveBar = ({ isOpen, message = "You have unsaved changes", onSave, onDiscard, isSaving = false, isSaveDisabled = false, saveLabel = "Save changes", discardLabel = "Discard", position = "sticky", ...rest }) => {
+    const { colors } = useCustomTheme();
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        setIsVisible(isOpen);
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    return (_jsx(Box, { ...rest, position: position, bottom: 0, left: 0, right: 0, zIndex: 1, px: { base: 4, md: 6 }, pb: { base: 4, md: 5 }, pointerEvents: "none", children: _jsxs(Flex, { align: "center", justify: "space-between", gap: 3, wrap: "wrap", mx: "auto", maxW: "64rem", px: 5, py: 3, bg: colors.surfaceRaised, borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "xl", boxShadow: "lg", pointerEvents: "auto", opacity: isVisible ? 1 : 0, transform: isVisible ? "translateY(0)" : "translateY(0.5rem)", transition: transitionFor(["opacity", "transform"]), sx: reducedMotionSx(), children: [_jsx(Text, { role: "status", fontSize: "sm", color: colors.textMuted, children: message }), _jsxs(Flex, { gap: 2, children: [_jsx(Button, { variant: "ghost", colorScheme: "gray", label: discardLabel, isDisabled: isSaving, onClick: onDiscard }), _jsx(Button, { variant: "solid", colorScheme: "primary", label: saveLabel, isLoading: isSaving, isDisabled: isSaveDisabled, onClick: onSave })] })] }) }));
+};
+export default SaveBar;

package/dist/esm/Components/SaveBar/SaveBarProps.js

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

package/dist/esm/Components/ScrollToTop/ScrollToTop.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { ChevronUp } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { rafThrottle } from "../../Utils/rafThrottle.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+/** Visibility depends on the wrapped content's direct parent actually scrolling — see `children`. */
+const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300, duration = 600, useWindow = false, bottom = "2rem", right = "2rem", }) => {
+    const [visible, setVisible] = useState(false);
+    const anchorRef = useRef(null);
+    const theme = useCustomTheme();
+    const fill = resolveFilledSurface(theme.colors.primary, theme.colors);
+    const getScroller = () => {
+        var _a, _b;
+        if (useWindow)
+            return window;
+        return (_b = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null;
+    };
+    const handleScroll = () => {
+        var _a;
+        const scroller = getScroller();
+        const top = scroller === window
+            ? window.scrollY
+            : (_a = scroller === null || scroller === void 0 ? void 0 : scroller.scrollTop) !== null && _a !== void 0 ? _a : 0;
+        setVisible(top >= threshold);
+    };
+    const scrollToTop = () => {
+        const scroller = getScroller();
+        if (!scroller)
+            return;
+        const start = scroller === window ? window.scrollY : scroller.scrollTop;
+        const startTime = performance.now();
+        const step = (now) => {
+            const progress = Math.min((now - startTime) / duration, 1);
+            const eased = progress < 0.5
+                ? 2 * progress * progress
+                : -1 + (4 - 2 * progress) * progress;
+            const next = start * (1 - eased);
+            if (scroller === window)
+                window.scrollTo(0, next);
+            else
+                scroller.scrollTop = next;
+            if (progress < 1)
+                requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+    };
+    useEffect(() => {
+        const scroller = getScroller();
+        if (!scroller)
+            return;
+        const onScroll = rafThrottle(handleScroll);
+        scroller.addEventListener("scroll", onScroll, { passive: true });
+        handleScroll();
+        return () => {
+            onScroll.cancel();
+            scroller.removeEventListener("scroll", onScroll);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [useWindow, threshold]);
+    return (_jsxs(Box, { ref: anchorRef, position: "relative", children: [children, _jsx(ToolTip, { label: tooltipLabel, placement: "left", children: _jsx(Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: fill.fill, color: fill.color, boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: transitionFor(["opacity", "transform", "box-shadow", "background-color", "color"], "base"), _hover: {
+                        bg: fill.hoverFill,
+                        color: fill.hoverColor,
+                        transform: "translateY(-2px) scale(1.05)",
+                        boxShadow: "lg",
+                    }, _active: { transform: "scale(0.95)" }, sx: { ...focusVisibleStyles(theme.colors), ...reducedMotionSx({ transform: "none" }) }, children: _jsx(ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));
+};
+export default ScrollToTop;

package/dist/esm/Components/ScrollbarBox/ScrollbarBox.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { scrollbarStyles, } from "../../Theme/tokens/builders/scrollbar.js";
+import { useScrollableRegion } from "../../Hooks/useScrollableRegion.js";
+import { mergeRefs } from "../../Utils/mergeRefs.js";
+/** Scrollable Box with themed scrollbar chrome; a keyboard stop, ringed on :focus-visible, while it scrolls with nothing focusable inside. */
+const ScrollbarBox = ({ children, height, maxHeight, overflowX, overflowY = "auto", variant = "default", scrollContainerRef, "aria-label": ariaLabel, }) => {
+    const { colors } = useCustomTheme();
+    const { ref, props: regionProps } = useScrollableRegion({ label: ariaLabel });
+    const mergedRef = useMemo(() => mergeRefs(scrollContainerRef, ref), [scrollContainerRef, ref]);
+    return (_jsx(Box, { ref: mergedRef, ...regionProps, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...scrollbarStyles(colors, variant), ...focusVisibleStyles(colors) }, children: children }));
+};
+export default ScrollbarBox;

package/dist/esm/Components/Search/Search.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import { Input, InputGroup, InputLeftElement, InputRightElement, Icon, IconButton, FormControl, useMergeRefs, } from "@chakra-ui/react";
+import { Search as SearchIconComponent, X } from "lucide-react";
+import Kbd from "../Kbd/Kbd.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { controlSizeStyles, fieldControlStyles } from "../Common/fieldStyles.js";
+import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { registerCtrlShortcut } from "./ctrlShortcut.js";
+const HINT_WIDTH = "2.75rem";
+/** Filter input with a clear button and an optional page-global Ctrl+K hotkey; no options list. */
+const Search = forwardRef(function Search({ placeholder = "Search...", onSearch, onClear, onclose, shortcut = "Ctrl+K", showShortcutHint = true, query, size = DEFAULT_CONTROL_SIZE, name, isDisabled = false, error = false, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, "aria-label": ariaLabelProp, }, ref) {
+    const theme = useCustomTheme();
+    const inputRef = useRef(null);
+    const mergedRef = useMergeRefs(inputRef, ref);
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const accessibleName = ariaLabelProp !== null && ariaLabelProp !== void 0 ? ariaLabelProp : (label ? undefined : placeholder);
+    const spec = CONTROL_SIZES[size];
+    const handleClear = onClear !== null && onClear !== void 0 ? onClear : onclose;
+    const showClear = Boolean(query) && Boolean(handleClear) && !isDisabled;
+    const showHint = Boolean(shortcut) && showShortcutHint;
+    const shortcutKey = shortcut ? shortcut.split("+")[1].toLowerCase() : undefined;
+    useEffect(() => {
+        if (!shortcutKey)
+            return;
+        return registerCtrlShortcut(shortcutKey, () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+    }, [shortcutKey]);
+    const clearSize = `calc(${spec.height} - 0.5rem)`;
+    const rightPadding = `calc(${spec.paddingX} + ${showClear ? clearSize : "0rem"} + ${showHint ? HINT_WIDTH : "0rem"})`;
+    return (_jsxs(FormControl, { isInvalid: error, isDisabled: isDisabled, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { w: "100%", children: [_jsx(InputLeftElement, { pointerEvents: "none", h: spec.height, w: spec.height, children: _jsx(Icon, { as: SearchIconComponent, color: theme.colors.textMuted, boxSize: `${spec.iconSize}px` }) }), _jsx(Input, { ref: mergedRef, ...ids.controlProps, type: "text", name: name, value: query, onChange: onSearch, placeholder: placeholder, variant: "outline", isInvalid: error, isRequired: isRequired, "aria-label": accessibleName, "aria-keyshortcuts": shortcut ? "Control+K" : undefined, sx: {
+                            ...fieldControlStyles(theme.colors),
+                            ...controlSizeStyles(size),
+                            ps: spec.height,
+                            pe: rightPadding,
+                            ...reducedMotionSx(),
+                        } }), (showClear || showHint) && (_jsxs(InputRightElement, { h: spec.height, w: "auto", pe: spec.paddingX, gap: 1, children: [showClear && (_jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(X, { size: spec.iconSize }), variant: "ghost", size: "xs", h: clearSize, minW: clearSize, color: theme.colors.textMuted, onClick: handleClear, sx: focusVisibleStyles(theme.colors) })), showHint && (_jsx("span", { "aria-hidden": true, children: _jsx(Kbd, { size: "xs", children: shortcut }) }))] }))] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+export default Search;

package/dist/esm/Components/Search/SearchProps.js

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

package/dist/esm/Components/Search/ctrlShortcut.js

@@ -0,0 +1,25 @@
+const focusers = new Map();
+const onKeyDown = (event) => {
+    if (!event.ctrlKey)
+        return;
+    const set = focusers.get(event.key.toLowerCase());
+    if (!set)
+        return;
+    event.preventDefault();
+    set.forEach((focus) => focus());
+};
+export const registerCtrlShortcut = (key, focus) => {
+    var _a;
+    if (focusers.size === 0)
+        window.addEventListener("keydown", onKeyDown);
+    const set = (_a = focusers.get(key)) !== null && _a !== void 0 ? _a : new Set();
+    set.add(focus);
+    focusers.set(key, set);
+    return () => {
+        set.delete(focus);
+        if (set.size === 0)
+            focusers.delete(key);
+        if (focusers.size === 0)
+            window.removeEventListener("keydown", onKeyDown);
+    };
+};