pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/RolesPermission/RolesPermission.js

@@ -8,11 +8,14 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const DeleteRoleModal_1 = __importDefault(require("./DeleteRoleModal"));
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 const DEFAULT_LABELS = {
     title: "Roles & Permissions",
     totalRoles: "Total Roles",
@@ -56,6 +59,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 } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
@@ -64,8 +68,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 = (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface);
+    const rowBackgrounds = (0, rowStates_1.listRowBackgrounds)(colors);
+    const headBg = (0, planeStep_1.bandOn)(colors.background[100], surface);
+    const innerRule = (0, planeStep_1.cardRule)(colors);
+    const rowHover = rowBackgrounds.active;
     const isViewMode = mode === "view";
     const columnLabels = {
         read: labels.read,
@@ -88,33 +94,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 : ((0, jsx_runtime_1.jsx)(react_2.Box, { color: colors.semanticText.success, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, strokeWidth: 3 }) }));
     const renderListView = () => ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...cardHeaderSx, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }), !isRolesLoading && ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "blue", variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", textTransform: "none", children: [labels.totalRoles, ": ", roles.length] }))] }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.newRole, onClick: onNewRole, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isRolesLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : roles.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.ShieldCheck, title: labels.noRoles, size: "sm", minH: "200px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, width: "56px", children: labels.sNo }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.roleNameColumn }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.createdBy }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.createdTime }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.actions })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: roles.map((role, index) => {
                                         var _a;
-                                        return ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: rowHover }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, color: muted, fontSize: "sm", children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading, children: role.roleName }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: role.createdBy }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: role.created_at }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.view, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareArrowOutUpRight, { size: 15 }), "aria-label": labels.view, variant: "ghost", size: "xs", color: muted, onClick: () => onViewRole === null || onViewRole === void 0 ? void 0 : onViewRole(role) }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.edit, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15 }), "aria-label": labels.edit, variant: "ghost", size: "xs", color: muted, onClick: () => onEditRole === null || onEditRole === void 0 ? void 0 : onEditRole(role) }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.delete, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: rowHover }, transition: BACKGROUND_TRANSITION, children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: innerRule, color: muted, fontSize: "sm", children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: innerRule, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading, children: role.roleName }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: innerRule, fontSize: "sm", color: muted, children: role.createdBy }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: innerRule, fontSize: "sm", color: muted, children: role.created_at }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: innerRule, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.view, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareArrowOutUpRight, { size: 15 }), "aria-label": labels.view, variant: "ghost", size: "xs", color: muted, onClick: () => onViewRole === null || onViewRole === void 0 ? void 0 : onViewRole(role) }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.edit, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15 }), "aria-label": labels.edit, variant: "ghost", size: "xs", color: muted, onClick: () => onEditRole === null || onEditRole === void 0 ? void 0 : onEditRole(role) }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.delete, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 = () => ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...cardHeaderSx, alignItems: "center", gap: 2, children: [onCancelForm && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onCancelForm })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.roleInformation })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { maxW: "320px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isViewMode ? labels.readOnly : "", isDisabled: !isViewMode, children: (0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }) }) }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 3, mt: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSuperAdmin, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleSuperAdmin === null || onToggleSuperAdmin === void 0 ? void 0 : onToggleSuperAdmin(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.enableAllPermissions }) }), (0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isTrackLocation, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleTrackLocation === null || onToggleTrackLocation === void 0 ? void 0 : onToggleTrackLocation(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.trackLocation }) }), (0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isShowRecords, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleShowRecords === null || onToggleShowRecords === void 0 ? void 0 : onToggleShowRecords(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.showAllUserRecords }) })] })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { ...cardHeaderSx, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.permissionSettings }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), permissionKeys.map((key) => ((0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "center", children: columnLabels[key] }, key)))] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: permissions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Tr, { children: (0, jsx_runtime_1.jsx)(react_2.Td, { colSpan: permissionKeys.length + 1, textAlign: "center", borderColor: border, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: muted, fontSize: "sm", py: 4, children: labels.noPermissions }) }) })) : (permissions.map((perm) => {
+    const renderFormView = () => ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...cardHeaderSx, alignItems: "center", gap: 2, children: [onCancelForm && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onCancelForm })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.roleInformation })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { maxW: "320px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isViewMode ? labels.readOnly : "", isDisabled: !isViewMode, children: (0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }) }) }) }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 3, mt: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSuperAdmin, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleSuperAdmin === null || onToggleSuperAdmin === void 0 ? void 0 : onToggleSuperAdmin(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.enableAllPermissions }) }), (0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isTrackLocation, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleTrackLocation === null || onToggleTrackLocation === void 0 ? void 0 : onToggleTrackLocation(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.trackLocation }) }), (0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isShowRecords, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleShowRecords === null || onToggleShowRecords === void 0 ? void 0 : onToggleShowRecords(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.showAllUserRecords }) })] })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { ...cardHeaderSx, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.permissionSettings }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), permissionKeys.map((key) => ((0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "center", children: columnLabels[key] }, key)))] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: permissions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Tr, { children: (0, jsx_runtime_1.jsx)(react_2.Td, { colSpan: permissionKeys.length + 1, textAlign: "center", borderColor: innerRule, children: (0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: rowHover }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, color: heading, fontSize: "sm", fontWeight: 500, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: perm.module }), permissionKeys.map((key) => {
+                                        return ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: rowHover }, transition: BACKGROUND_TRANSITION, children: [(0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsx)(react_2.Td, { textAlign: "center", borderColor: border, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", children: isViewMode ? (isAutomationModule ? (isRead &&
+                                                    return ((0, jsx_runtime_1.jsx)(react_2.Td, { textAlign: "center", borderColor: innerRule, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", children: isViewMode ? (isAutomationModule ? (isRead &&
                                                                 perm.automation &&
-                                                                renderGrantedCheck()) : (perm[key] && renderGrantedCheck())) : isAutomationModule && !isRead ? null : ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { size: "sm", isChecked: isAutomationModule
+                                                                renderGrantedCheck()) : (perm[key] && renderGrantedCheck())) : isAutomationModule && !isRead ? null : ((0, jsx_runtime_1.jsx)(react_2.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "flex-end", gap: 3, p: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onCancelForm, size: "sm", sx: { fontSize: "xs" }, label: labels.cancel, colorScheme: "red", variant: "outline" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSave, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", isLoading: isSaving, label: isEditing ? labels.updateChanges : labels.saveChanges })] })] }))] })] }));
+                                    })) })] }) }), !isViewMode && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: innerRule }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "flex-end", gap: 3, p: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onCancelForm, size: "sm", sx: { fontSize: "xs" }, label: labels.cancel, colorScheme: "red", variant: "outline" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSave, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", isLoading: isSaving, label: isEditing ? labels.updateChanges : labels.saveChanges })] })] }))] })] }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { p: padding, backgroundColor: colors.backgroundColor.main, minHeight: "100%", children: [view === "list" ? renderListView() : renderFormView(), (0, jsx_runtime_1.jsx)(DeleteRoleModal_1.default, { isOpen: deleteId !== null, onClose: () => setDeleteId(null), onConfirm: () => {
                     if (deleteId !== null)
                         onDeleteRole === null || onDeleteRole === void 0 ? void 0 : onDeleteRole(deleteId);

package/dist/Components/RolesPermission/RolesPermissionProps.d.ts

@@ -1,68 +1,125 @@
 import { ReactNode } from "react";
+/** One column in the permission matrix — also the key passed to onPermissionChange. */
 export type PermissionKey = "read" | "create" | "edit" | "delete" | "import" | "export" | "automation";
+/** One row of the permission matrix, keyed by module — booleans mirror PermissionKey (automation is handled specially, see below). */
 export type Permission = {
+    /** "Automation" (case-insensitive) is special-cased: every column collapses to the single automation flag below, only the Read cell renders. */
     module: string;
+    /** Read cell; for the Automation module it is the only cell shown and reflects `automation`. */
     read: boolean;
+    /** Whether the Create cell is checked. */
     create: boolean;
+    /** Whether the Edit cell is checked. */
     edit: boolean;
+    /** Whether the Delete cell is checked. */
     delete: boolean;
+    /** Whether the Import cell is checked; only rendered when `permissionKeys` includes it. */
     import?: boolean;
+    /** Whether the Export cell is checked; only rendered when `permissionKeys` includes it. */
     export?: boolean;
+    /** Flag the Automation module row reads and toggles instead of the per-column booleans. */
     automation?: boolean;
 };
+/** One row in the roles list — the same shape is passed back into onEditRole/onViewRole as the selected role. */
 export type RoleData = {
+    /** Shown in the list, truncated with an ellipsis when long. */
     roleName: string;
+    /** Shown as given in the Created By column. */
     createdBy: string;
+    /** Shown as given, unformatted, in the Created Time column. */
     created_at: string;
+    /** The role's matrix rows; not rendered in the list, handed back via `onEditRole`/`onViewRole` to prefill `permissions`. */
     permission: Permission[];
+    /** Coerced via Number() before reaching onDeleteRole — a non-numeric id silently becomes NaN with no error. */
     roles_id: string;
+    /** designation/makeSuperAdmin/automation/trackLocation/show_records: never read by this component — pass-through only, for the consumer to prefill its own form state on edit/view. */
     designation: string;
+    /** Pass-through for the consumer to prefill its form. */
     makeSuperAdmin?: boolean;
+    /** Pass-through for the consumer to prefill its form. */
     automation?: boolean;
+    /** Pass-through for the consumer to prefill its form. */
     trackLocation?: boolean;
+    /** Pass-through for the consumer to prefill its form. */
     show_records?: boolean;
 };
+/** Top-level switch: "list" renders the roles table, "form" renders the create/edit/view role form. */
 export type RolesPermissionView = "list" | "form";
+/** Only relevant when view is "form" — mode "view" renders the permission form read-only. */
 export type RolesPermissionMode = "create" | "edit" | "view";
 /**
  * All user-facing strings. Provide translated values from the host app; every
  * key has a sensible English default so the component works standalone.
  */
 export type RolesPermissionLabels = {
+    /** Heading of the roles list. */
     title?: string;
+    /** Prefix of the role-count badge ("Total Roles: 4"). */
     totalRoles?: string;
+    /** Text of the new-role button. */
     newRole?: string;
+    /** Serial-number column header. */
     sNo?: string;
+    /** Role name column header. */
     roleNameColumn?: string;
+    /** Created-by column header. */
     createdBy?: string;
+    /** Created-time column header. */
     createdTime?: string;
+    /** Actions column header. */
     actions?: string;
+    /** Empty-state title when there are no roles. */
     noRoles?: string;
+    /** Name and tooltip of the row View icon. */
     view?: string;
+    /** Name and tooltip of the row Edit icon. */
     edit?: string;
+    /** Name and tooltip of the row Delete icon, and the confirm button of the delete dialog. */
     delete?: string;
+    /** Heading of the role details card in the form. */
     roleInformation?: string;
+    /** Label of the role name input. */
     roleName?: string;
+    /** Placeholder of the role name input. */
     roleNamePlaceholder?: string;
+    /** Label of the super-admin checkbox. */
     enableAllPermissions?: string;
+    /** Label of the track-location checkbox. */
     trackLocation?: string;
+    /** Label of the show-all-records checkbox. */
     showAllUserRecords?: string;
+    /** Heading of the permission matrix card. */
     permissionSettings?: string;
+    /** Module column header of the matrix. */
     moduleName?: string;
+    /** Read column header. */
     read?: string;
+    /** Create column header. */
     create?: string;
+    /** Edit column header. */
     editPermission?: string;
+    /** Delete column header. */
     deletePermission?: string;
+    /** Import column header. */
     importPermission?: string;
+    /** Export column header. */
     exportPermission?: string;
+    /** Shown in the matrix when `permissions` is empty. */
     noPermissions?: string;
+    /** Text of the form Cancel button and the delete dialog cancel button. */
     cancel?: string;
+    /** Save button text when not `isEditing`. */
     saveChanges?: string;
+    /** Save button text when `isEditing`. */
     updateChanges?: string;
+    /** Tooltip on the disabled role name input in view mode. */
     readOnly?: string;
+    /** Title of the delete confirmation dialog. */
     deleteRole?: string;
+    /** Body text of the delete confirmation dialog. */
     deleteRoleConfirm?: string;
 };
+/** Role list + role/permission-matrix form in one component (switch via `view`) — manages role definitions only, not user-to-role assignment (that's UserDetails' Change Role). */
 export interface RolesPermissionProps {
     /** Which view to render. */
     view: RolesPermissionView;
@@ -70,16 +127,21 @@ export interface RolesPermissionProps {
     mode?: RolesPermissionMode;
     /** Roles list data. */
     roles: RoleData[];
+    /** Shows skeleton rows instead of the table and hides the role-count badge. */
     isRolesLoading?: boolean;
     /** Permission matrix rows for the form view. */
     permissions: Permission[];
     /** Columns rendered in the matrix. Defaults to all non-automation keys. */
     permissionKeys?: PermissionKey[];
-    /** Form field values (controlled). */
+    /** Form field values — fully controlled, no internal state; edits are invisible without the matching handler below. */
     roleName: string;
+    /** Error text under the role name input; any non-empty value also marks it invalid. */
     roleNameError?: string;
+    /** Toggling this does not itself grant matrix permissions — it's cosmetic until the consumer applies that logic. */
     isSuperAdmin: boolean;
+    /** Checked state of the track-location checkbox. */
     isTrackLocation: boolean;
+    /** Checked state of the show-all-records checkbox. */
     isShowRecords: boolean;
     /** Whether the role is being edited (changes the Save button label). */
     isEditing?: boolean;
@@ -87,17 +149,27 @@ export interface RolesPermissionProps {
     isSaving?: boolean;
     /** List actions. */
     onNewRole?: () => void;
+    /** Fires with the role when its View icon is pressed. */
     onViewRole?: (role: RoleData) => void;
+    /** Fires with the role when its Edit icon is pressed. */
     onEditRole?: (role: RoleData) => void;
+    /** Called synchronously right before the modal closes — no await, no loading state; errors must be surfaced outside this flow. */
     onDeleteRole?: (roleId: number) => void;
+    /** Back icon renders only when this is provided, not merely disabled when omitted. */
     onBack?: () => void;
     /** Form actions. */
     onRoleNameChange?: (value: string) => void;
+    /** Fires with the new checked state of the enable-all-permissions checkbox. */
     onToggleSuperAdmin?: (checked: boolean) => void;
+    /** Fires with the new checked state of the track-location checkbox. */
     onToggleTrackLocation?: (checked: boolean) => void;
+    /** Fires with the new checked state of the show-all-records checkbox. */
     onToggleShowRecords?: (checked: boolean) => void;
+    /** Fires with key "automation" (not "read") for a module named "automation" — see Permission.module. */
     onPermissionChange?: (module: string, key: PermissionKey) => void;
+    /** Fires when the Save or Update button is pressed; the footer is hidden in view mode. */
     onSave?: () => void;
+    /** Header back icon renders only when set; the footer Cancel button renders outside view mode and no-ops without it. */
     onCancelForm?: () => void;
     /** App-specific sections rendered under the roles list (e.g. ModuleDelete, SignInActivity). */
     footerSlot?: ReactNode;
@@ -108,6 +180,7 @@ export interface RolesPermissionProps {
     /** Outer padding override. Defaults to a compact value. */
     padding?: string;
 }
+/** Plain confirm dialog for one role at a time — no built-in awaiting of onConfirm, so pair it with your own loading/error handling. */
 export interface DeleteRoleModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/Components/SaveBar/SaveBar.d.ts

@@ -0,0 +1,4 @@
+import type { SaveBarProps } from "./SaveBarProps";
+/** Floating dirty-state bar: surfaceRaised card, slides/fades in on mount, unmounts when closed. */
+declare const SaveBar: ({ isOpen, message, onSave, onDiscard, isSaving, isSaveDisabled, saveLabel, discardLabel, position, ...rest }: SaveBarProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SaveBar;

package/dist/Components/SaveBar/SaveBar.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsVisible(isOpen);
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.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: (0, motion_1.transitionFor)(["opacity", "transform"]), sx: (0, motion_2.reducedMotionSx)(), children: [(0, jsx_runtime_1.jsx)(react_2.Text, { role: "status", fontSize: "sm", color: colors.textMuted, children: message }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", label: discardLabel, isDisabled: isSaving, onClick: onDiscard }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: saveLabel, isLoading: isSaving, isDisabled: isSaveDisabled, onClick: onSave })] })] }) }));
+};
+exports.default = SaveBar;

package/dist/Components/SaveBar/SaveBarProps.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** Floating unsaved-changes bar driven by `isOpen`; other `<div>` attributes land on the positioned root. */
+export interface SaveBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "children" | "dangerouslySetInnerHTML"> {
+    /** Shows the bar and animates it in; unmounts (not just hides) it when false. */
+    isOpen: boolean;
+    /** Status text, announced via role="status"; defaults to "You have unsaved changes". */
+    message?: ReactNode;
+    /** Called when Save is clicked. */
+    onSave: () => void;
+    /** Called when Discard is clicked. */
+    onDiscard: () => void;
+    /** Shows a spinner on Save and disables Discard. */
+    isSaving?: boolean;
+    /** Keeps Save disabled, e.g. while a field is invalid. */
+    isSaveDisabled?: boolean;
+    /** Save button label; defaults to "Save changes". */
+    saveLabel?: string;
+    /** Discard button label; defaults to "Discard". */
+    discardLabel?: string;
+    /** CSS position for the bar; defaults to "sticky". */
+    position?: "sticky" | "fixed";
+}

package/dist/Components/SaveBar/SaveBarProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ScrollToTop/ScrollToTop.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+/** Wraps content and shows a back-to-top button once the parent scrolls. */
 export interface ScrollToTopProps {
-    /** Content to wrap. The button watches the nearest scrollable ancestor. */
+    /** Content to wrap. Watches this element's direct parentElement only — not a scroll-search up the tree. */
     children: React.ReactNode;
     /** Tooltip label on the button. */
     tooltipLabel?: string;
@@ -8,12 +9,13 @@ export interface ScrollToTopProps {
     threshold?: number;
     /** Smooth-scroll duration in ms. */
     duration?: number;
-    /** Pin to a window-level scroll instead of the wrapped parent. */
+    /** Pin to window-level scroll — also the fix when the real scroll container isn't the direct parent. */
     useWindow?: boolean;
     /** Distance from the bottom edge. */
     bottom?: string;
     /** Distance from the right edge. */
     right?: string;
 }
+/** Visibility depends on the wrapped content's direct parent actually scrolling — see `children`. */
 declare const ScrollToTop: React.FC<ScrollToTopProps>;
 export default ScrollToTop;

package/dist/Components/ScrollToTop/ScrollToTop.js

@@ -10,10 +10,16 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const rafThrottle_1 = require("../../Utils/rafThrottle");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const primitives_1 = require("../../Theme/tokens/primitives");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+/** 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] = (0, react_1.useState)(false);
     const anchorRef = (0, react_1.useRef)(null);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const fill = (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
     const getScroller = () => {
         var _a, _b;
         if (useWindow)
@@ -62,10 +68,11 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [useWindow, threshold]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: anchorRef, position: "relative", children: [children, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, placement: "left", children: (0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: anchorRef, position: "relative", children: [children, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, placement: "left", children: (0, jsx_runtime_1.jsx)(react_2.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: (0, primitives_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));
+                    }, _active: { transform: "scale(0.95)" }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(theme.colors), ...(0, motion_1.reducedMotionSx)({ transform: "none" }) }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));
 };
 exports.default = ScrollToTop;

package/dist/Components/ScrollbarBox/ScrollbarBox.d.ts

@@ -1,13 +1,23 @@
 import React, { ReactNode } from "react";
 import { ScrollbarVariant } from "../../Theme/tokens/builders/scrollbar";
+/** Scrollable box with themed scrollbars and a keyboard focus stop when it overflows. */
 export interface ScrollbarBoxProps {
     children: ReactNode;
+    /** Fixed box height; omit to let content size the box instead of scrolling it. */
     height?: string;
+    /** Caps growth and enables scrolling; without it the box grows unbounded. */
     maxHeight?: string;
+    /** No default (unlike overflowY) — falls through to the browser's normal overflow. */
     overflowX?: string;
+    /** Defaults to "auto" — scrolls only once content exceeds height/maxHeight. */
     overflowY?: string;
+    /** Picks the scrollbar chrome from scrollbarStyles; see scrollbar.ts for what each looks like. */
     variant?: ScrollbarVariant;
+    /** Forwarded to the underlying Box so a consumer can read/scroll the container from outside. */
     scrollContainerRef?: React.Ref<HTMLDivElement> | null;
+    /** Names the box as a region while it scrolls and takes keyboard focus; without it that focus stop has no name. */
+    "aria-label"?: string;
 }
+/** Scrollable Box with themed scrollbar chrome; a keyboard stop, ringed on :focus-visible, while it scrolls with nothing focusable inside. */
 declare const ScrollbarBox: React.FC<ScrollbarBoxProps>;
 export default ScrollbarBox;

package/dist/Components/ScrollbarBox/ScrollbarBox.js

@@ -1,11 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
-const ScrollbarBox = ({ children, height, maxHeight, overflowX, overflowY = "auto", variant = "default", scrollContainerRef, }) => {
+const useScrollableRegion_1 = require("../../Hooks/useScrollableRegion");
+const mergeRefs_1 = require("../../Utils/mergeRefs");
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { ref: scrollContainerRef, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...(0, scrollbar_1.scrollbarStyles)(colors, variant) }, children: children }));
+    const { ref, props: regionProps } = (0, useScrollableRegion_1.useScrollableRegion)({ label: ariaLabel });
+    const mergedRef = (0, react_1.useMemo)(() => (0, mergeRefs_1.mergeRefs)(scrollContainerRef, ref), [scrollContainerRef, ref]);
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: mergedRef, ...regionProps, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...(0, scrollbar_1.scrollbarStyles)(colors, variant), ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: children }));
 };
 exports.default = ScrollbarBox;

package/dist/Components/Search/Search.d.ts

@@ -1,2 +1,4 @@
 import { SearchProps } from "./SearchProps";
-export default function Search({ placeholder, onSearch, onclose, shortcut, query, error, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, }: SearchProps): import("react/jsx-runtime").JSX.Element;
+/** Filter input with a clear button and an optional page-global Ctrl+K hotkey; no options list. */
+declare const Search: import("react").ForwardRefExoticComponent<SearchProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Search;

package/dist/Components/Search/Search.js

@@ -3,33 +3,46 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Search;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
+const Kbd_1 = __importDefault(require("../Kbd/Kbd"));
 const FormLabel_1 = require("../Common/FormLabel");
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const motion_1 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-function Search({ placeholder = "Search...", onSearch, onclose, shortcut = "Ctrl+K", query, error, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, }) {
+const ctrlShortcut_1 = require("./ctrlShortcut");
+const HINT_WIDTH = "2.75rem";
+/** Filter input with a clear button and an optional page-global Ctrl+K hotkey; no options list. */
+const Search = (0, react_1.forwardRef)(function Search({ placeholder = "Search...", onSearch, onClear, onclose, shortcut = "Ctrl+K", showShortcutHint = true, query, size = controlSizes_1.DEFAULT_CONTROL_SIZE, name, isDisabled = false, error = false, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, "aria-label": ariaLabelProp, }, ref) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const inputRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_2.useMergeRefs)(inputRef, ref);
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const accessibleName = ariaLabelProp !== null && ariaLabelProp !== void 0 ? ariaLabelProp : (label ? undefined : placeholder);
+    const spec = controlSizes_1.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;
     (0, react_1.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 ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isInvalid: !!error, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, type: "text", value: query, onChange: onSearch, placeholder: placeholder, variant: "outline", isInvalid: error }), (0, jsx_runtime_1.jsxs)(react_2.InputRightElement, { w: "auto", pr: "3", display: "flex", alignItems: "center" // ✅ centers vertically
-                        , gap: "2", children: [query && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.X, color: theme.colors.textMuted, boxSize: 5, cursor: "pointer", onClick: onclose })), shortcut && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, px: "2", py: "0.5", borderRadius: "md", bg: theme.colors.backgroundColor.subtle, children: shortcut }))] })] }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
-}
+        if (!shortcutKey)
+            return;
+        return (0, ctrlShortcut_1.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 ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, isDisabled: isDisabled, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", h: spec.height, w: spec.height, children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, color: theme.colors.textMuted, boxSize: `${spec.iconSize}px` }) }), (0, jsx_runtime_1.jsx)(react_2.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: {
+                            ...(0, fieldStyles_1.fieldControlStyles)(theme.colors),
+                            ...(0, fieldStyles_1.controlSizeStyles)(size),
+                            ps: spec.height,
+                            pe: rightPadding,
+                            ...(0, motion_1.reducedMotionSx)(),
+                        } }), (showClear || showHint) && ((0, jsx_runtime_1.jsxs)(react_2.InputRightElement, { h: spec.height, w: "auto", pe: spec.paddingX, gap: 1, children: [showClear && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear search", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: spec.iconSize }), variant: "ghost", size: "xs", h: clearSize, minW: clearSize, color: theme.colors.textMuted, onClick: handleClear, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) })), showHint && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: shortcut }) }))] }))] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+exports.default = Search;

package/dist/Components/Search/SearchProps.d.ts

@@ -1,15 +1,39 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** Fully controlled search input: the caller owns `query` and clears it in `onClear`. */
 export type SearchProps = {
+    /** Defaults to `"Search..."`. */
     placeholder?: string;
+    /** Fires on every keystroke with the raw change event; no debounce. */
     onSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    shortcut?: "Ctrl+K";
+    /** Page-global hotkey that focuses this input; `false` removes both the listener and the hint. */
+    shortcut?: "Ctrl+K" | false;
+    /** Hides the shortcut hint while keeping the hotkey. Defaults to true. */
+    showShortcutHint?: boolean;
+    /** Controlled value; the clear button only shows while it is non-empty. */
     query?: string;
-    onclose: () => void;
+    /** Enables the clear button; the caller must reset `query` itself. */
+    onClear?: () => void;
+    /** @deprecated Use `onClear` — same behaviour, consistent casing. */
+    onclose?: () => void;
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
+    size?: ControlSize;
+    name?: string;
+    /** Disables the input and hides the clear button; the hotkey still focuses it. */
+    isDisabled?: boolean;
+    /** Marks the input invalid (error border + `aria-invalid`) and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Shown while `error` is true. Omitting it renders no message and still hides `helperText`. */
     errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
     helperText?: string;
     label?: string;
     id?: string;
+    /** Accessible name when there's no `label`. Defaults to `placeholder` — a Search must always have one; pass this to override or to name it over an explicit `label`. */
+    "aria-label"?: string;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
+    /** Shows the label asterisk and sets native `required` on the input. */
     isRequired?: boolean;
 };

package/dist/Components/Search/ctrlShortcut.d.ts

@@ -0,0 +1 @@
+export declare const registerCtrlShortcut: (key: string, focus: () => void) => () => void;