pixelize-design-library 2.4.2 → 3.0.0

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

@@ -1,14 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, Text, } from "@chakra-ui/react";
-import { AlertTriangle, Trash2 } from "lucide-react";
+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 { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
-import Button from "../Button/Button.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 mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = resolveStatusTone(colors.semantic.error, mode);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.deleteRole })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteRoleConfirm }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
+    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

@@ -3,11 +3,14 @@ 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 { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.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",
@@ -51,6 +54,7 @@ const DEFAULT_KEYS = [
     "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]);
@@ -59,8 +63,10 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
     const surface = colors.background[50];
     const muted = colors.textMuted;
     const heading = colors.text[900];
-    const headBg = colors.gray[50];
-    const rowHover = resolveHoverTint(colors.gray[50], surface);
+    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,
@@ -83,33 +89,33 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
         px: 4,
         py: 3,
         borderBottom: "1px solid",
-        borderColor: border,
+        borderColor: innerRule,
     };
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
         color: muted,
-        borderColor: border,
+        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 0.15s ease", children: [_jsx(Td, { borderColor: border, color: muted, fontSize: "sm", children: index + 1 }), _jsx(Td, { borderColor: border, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading, children: role.roleName }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: role.createdBy }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: role.created_at }), _jsx(Td, { borderColor: border, 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));
+                                        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: border, children: _jsx(Text, { color: muted, fontSize: "sm", py: 4, children: labels.noPermissions }) }) })) : (permissions.map((perm) => {
+    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 0.15s ease", children: [_jsx(Td, { borderColor: border, color: heading, fontSize: "sm", fontWeight: 500, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: perm.module }), permissionKeys.map((key) => {
+                                        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: border, children: _jsx(Flex, { justify: "center", children: isViewMode ? (isAutomationModule ? (isRead &&
+                                                    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", isChecked: isAutomationModule
+                                                                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: border }), _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 })] })] }))] })] }));
+                                    })) })] }) }), !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);

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

@@ -5,10 +5,16 @@ 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)
@@ -57,10 +63,11 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
         };
         // 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: theme.colors.primary[500], color: theme.colors.onPrimary, boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
-                        bg: theme.colors.primary[600],
+    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)" }, children: _jsx(ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));
+                    }, _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

@@ -1,9 +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";
-const ScrollbarBox = ({ children, height, maxHeight, overflowX, overflowY = "auto", variant = "default", scrollContainerRef, }) => {
+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();
-    return (_jsx(Box, { ref: scrollContainerRef, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...scrollbarStyles(colors, variant) }, children: children }));
+    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

@@ -1,29 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { Input, InputGroup, InputLeftElement, InputRightElement, Icon, Text, FormControl, } from "@chakra-ui/react";
+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 HelperText from "../Common/HelperText.js";
-import ErrorMessage from "../Common/ErrorMessage.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";
-export default function Search({ placeholder = "Search...", onSearch, onclose, shortcut = "Ctrl+K", query, error, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, }) {
+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(() => {
-        const handleKeyDown = (event) => {
-            var _a;
-            if (shortcut &&
-                event.ctrlKey &&
-                event.key === shortcut.split("+")[1].toLowerCase()) {
-                event.preventDefault();
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => {
-            window.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [shortcut]);
-    return (_jsxs(FormControl, { id: id, isInvalid: !!error, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { w: "100%", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: SearchIconComponent, color: theme.colors.textMuted }) }), _jsx(Input, { ref: inputRef, type: "text", value: query, onChange: onSearch, placeholder: placeholder, variant: "outline", isInvalid: error }), _jsxs(InputRightElement, { w: "auto", pr: "3", display: "flex", alignItems: "center" // ✅ centers vertically
-                        , gap: "2", children: [query && (_jsx(Icon, { as: X, color: theme.colors.textMuted, boxSize: 5, cursor: "pointer", onClick: onclose })), shortcut && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, px: "2", py: "0.5", borderRadius: "md", bg: theme.colors.backgroundColor.subtle, children: shortcut }))] })] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
-}
+        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/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);
+    };
+};