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

package/dist/Components/ReviewSummary/ReviewSummaryProps.d.ts

@@ -0,0 +1,38 @@
+/** Ratings per star count, 1 to 5. */
+export type RatingBreakdown = Record<1 | 2 | 3 | 4 | 5, number>;
+/** Every string the summary renders; override all of them for another language. */
+export interface ReviewSummaryLabels {
+    /** Section heading text. */
+    heading: string;
+    /** Text of the write-a-review button. */
+    writeReview: string;
+    /** Count line, given the total number of ratings. */
+    ratings: (count: number) => string;
+    /** Heading of the no-ratings state. */
+    emptyTitle: string;
+    /** Invitation text of the no-ratings state. */
+    emptyBody: string;
+    /** Accessible name of one bar, given the star level and the share as a whole percentage. */
+    bar: (stars: number, percent: number) => string;
+}
+/** Average rating, count and a five-row distribution; scales down to an invitation when there are no ratings. */
+export interface ReviewSummaryProps {
+    /** Average rating from 0 to 5. */
+    rating: number;
+    /** Total number of ratings. */
+    count: number;
+    /** Counts per star; the bars show each row's share of their sum. */
+    breakdown?: RatingBreakdown;
+    /** The distribution only appears at or above this many ratings, because bars on a handful of ratings mislead; defaults to 10. */
+    minRatingsForBars?: number;
+    /** Shows a "Write a review" button when provided. */
+    onWriteReview?: () => void;
+    /** Heading element id, so a "4.6 (412)" link elsewhere can scroll here and a region can be labelled by it. */
+    id?: string;
+    /** Locale for number formatting; defaults to en-IN. */
+    locale?: string;
+    /** Partial overrides of the default English strings. */
+    labels?: Partial<ReviewSummaryLabels>;
+    /** Test id on the root section. */
+    "data-testid"?: string;
+}

package/dist/Components/ReviewSummary/ReviewSummaryProps.js

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { DeleteRoleModalProps } from "./RolesPermissionProps";
+declare const DeleteRoleModal: React.FC<DeleteRoleModalProps>;
+export default DeleteRoleModal;

package/dist/Components/RolesPermission/DeleteRoleModal.js

@@ -0,0 +1,17 @@
+"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("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const ConfirmDialog_1 = __importDefault(require("../ConfirmDialog/ConfirmDialog"));
+const DeleteRoleModal = ({ isOpen, onClose, onConfirm, isLoading, labels, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const errorTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.error);
+    return ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.deleteRole, iconBg: errorTone.bg, iconColor: errorTone.fg, cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteRoleConfirm }) }));
+};
+exports.default = DeleteRoleModal;

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { RolesPermissionProps } from "./RolesPermissionProps";
+/** Role list + role/permission-matrix form in one component (switch via `view`). */
+declare const RolesPermission: React.FC<RolesPermissionProps>;
+export default RolesPermission;

package/dist/Components/RolesPermission/RolesPermission.js

@@ -0,0 +1,130 @@
+"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 lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+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",
+    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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const [deleteId, setDeleteId] = (0, react_1.useState)(null);
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const heading = colors.text[900];
+    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,
+        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 : ((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_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: 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_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: 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", "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: 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);
+                    setDeleteId(null);
+                }, labels: labels })] }));
+};
+exports.default = RolesPermission;

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

@@ -0,0 +1,190 @@
+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;
+    /** Form mode (controls read-only vs editable form). */
+    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 — 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;
+    /** Save in-flight flag. */
+    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;
+    /** Icon shown in the matrix for granted permissions in view mode. */
+    checkIcon?: ReactNode;
+    /** Translated/override strings. */
+    labels?: RolesPermissionLabels;
+    /** 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;
+    onConfirm: () => void;
+    isLoading?: boolean;
+    labels: Required<Pick<RolesPermissionLabels, "deleteRole" | "deleteRoleConfirm" | "cancel" | "delete">>;
+}

package/dist/Components/RolesPermission/RolesPermissionProps.js

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

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

@@ -0,0 +1,21 @@
+import React from "react";
+/** Wraps content and shows a back-to-top button once the parent scrolls. */
+export interface ScrollToTopProps {
+    /** 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;
+    /** Scroll distance (px) after which the button appears. */
+    threshold?: number;
+    /** Smooth-scroll duration in ms. */
+    duration?: number;
+    /** 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

@@ -0,0 +1,78 @@
+"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 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)
+            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);
+    };
+    (0, react_1.useEffect)(() => {
+        const scroller = getScroller();
+        if (!scroller)
+            return;
+        const onScroll = (0, rafThrottle_1.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 ((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)" }, 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

@@ -0,0 +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

@@ -0,0 +1,18 @@
+"use strict";
+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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+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)();
+    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,3 +1,4 @@
-import React from "react";
 import { SearchProps } from "./SearchProps";
-export default function Search({ placeholder, onSearch, onclose, shortcut, query, error, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, }: SearchProps): React.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;