pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/esm/Components/ProfileCard/ProfileCard.js

@@ -0,0 +1,34 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card as ChakraCard, CardBody, CardFooter, CardHeader, Divider, useTheme, } from "@chakra-ui/react";
+export const ProfileCardHeader = ({ children, }) => {
+    return _jsx(_Fragment, { children: children });
+};
+export const ProfileCardBody = ({ children, }) => {
+    return _jsx(_Fragment, { children: children });
+};
+export const ProfileCardFooter = ({ children, }) => {
+    return _jsx(_Fragment, { children: children });
+};
+export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "0.5px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
+    var _a, _b, _c, _d;
+    const theme = useTheme();
+    const resolvedDividerColor = (_b = dividercolor !== null && dividercolor !== void 0 ? dividercolor : (_a = theme.colors.border) === null || _a === void 0 ? void 0 : _a[400]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
+    const accentBorder = `2px solid ${(_d = theme.colors.primary) === null || _d === void 0 ? void 0 : _d[500]}`;
+    const isReactElement = (child) => {
+        return child !== null && typeof child === "object" && "type" in child;
+    };
+    const header = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ProfileCardHeader);
+    const body = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ProfileCardBody);
+    const footer = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ProfileCardFooter);
+    const StylesWithBorder = borderLeftColor
+        ? { ...CardStyle, borderLeft: accentBorder }
+        : borderTopColor
+            ? { ...CardStyle, borderTop: accentBorder }
+            : { ...CardStyle };
+    return (_jsxs(ChakraCard, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && (_jsxs(_Fragment, { children: [_jsx(CardHeader, { sx: { ...CardHeaderStyle, fontWeight: "bold" }, py: 15, children: header }), _jsx(Divider, { style: {
+                            borderColor: resolvedDividerColor,
+                            borderWidth: dividersize,
+                            borderStyle: dividervariant,
+                        } })] })), _jsx(CardBody, { sx: CardBodyStyle, children: body }), footer && _jsx(CardFooter, { children: footer })] }));
+}

package/dist/esm/Components/ProfileCard/ProfileCard.stories.js

@@ -0,0 +1,5 @@
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react/types-6-0';
+// import ProfileCard from './ProfileCard';
+// import { ProfileCardProps } from './ProfileCardProps';
+export {};

package/dist/esm/Components/ProfileCard/ProfileCardProps.js

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

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Box, Image, IconButton, Input, Text, Tooltip, HStack, } from "@chakra-ui/react";
+import { Eye, FileText, SquarePen, User } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    const [photo, setPhoto] = useState(photoUrl);
+    const fileInputRef = useRef(null);
+    const theme = useCustomTheme();
+    const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
+    const handlePhotoChange = (event) => {
+        var _a;
+        if (!isEditable)
+            return;
+        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const photoUrl = reader.result;
+                setPhoto(photoUrl);
+                onPhotoChange(file);
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    const handleClick = () => {
+        var _a;
+        if (!isEditable)
+            return;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    const isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
+    // [800], not [300]: the edit IconButton's border is a control boundary — WCAG 1.4.11 needs
+    // >=3.0 against any named surface up to `muted` (lightest); [300] fails there, [800] clears
+    // all with margin.
+    const border = (_c = (_b = c.boxborder) === null || _b === void 0 ? void 0 : _b[800]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[200];
+    // Shared modern frame for whichever media we render (photo / pdf / fallback).
+    const mediaFrame = {
+        boxSize: imageWidth,
+        borderRadius: imageBorderRadius,
+        border: `0.063rem solid ${border}`,
+        boxShadow: (_e = theme.shadows) === null || _e === void 0 ? void 0 : _e.sm,
+    };
+    const renderMedia = () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (photo) {
+            return isPdf ? (_jsx(Box, { ...mediaFrame, bg: (_b = (_a = c.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "gray.100", color: (_c = c.gray) === null || _c === void 0 ? void 0 : _c[500], display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", children: _jsx(FileText, { size: "45%" }) })) : (_jsx(Image, { src: photo, alt: imageAlt, objectFit: imageObjectFit, ...mediaFrame }));
+        }
+        // Fallback: branded tinted avatar (initials or user glyph).
+        return (_jsx(Box, { ...mediaFrame, display: "flex", alignItems: "center", justifyContent: "center", bg: (_f = (_e = (_d = c.primary) === null || _d === void 0 ? void 0 : _d.opacity) === null || _e === void 0 ? void 0 : _e[16]) !== null && _f !== void 0 ? _f : (_g = c.gray) === null || _g === void 0 ? void 0 : _g[100], color: (_j = (_h = c.primary) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[500], children: fallbackText ? (_jsx(Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1", children: fallbackText })) : (_jsx(User, { size: "48%" })) }));
+    };
+    const hasActions = isEditable || isView;
+    return (_jsxs(Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", sx: {
+            "&:hover .ppv-overlay": { opacity: 1 },
+            "&:hover .ppv-actions": { opacity: 1 },
+            "&:hover .ppv-media": {
+                boxShadow: `0 0 0 0.1875rem ${(_h = (_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[24]) !== null && _h !== void 0 ? _h : "transparent"}`,
+            },
+        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: (_j = c.primary) === null || _j === void 0 ? void 0 : _j[500], color: (_k = c.white) !== null && _k !== void 0 ? _k : "#fff", border: `0.125rem solid ${(_l = c.white) !== null && _l !== void 0 ? _l : "#fff"}`, boxShadow: (_m = theme.shadows) === null || _m === void 0 ? void 0 : _m.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+                                        bg: (_o = c.primary) === null || _o === void 0 ? void 0 : _o[600],
+                                        transform: "scale(1.1)",
+                                        boxShadow: (_p = theme.shadows) === null || _p === void 0 ? void 0 : _p.lg,
+                                    }, _active: { bg: (_q = c.primary) === null || _q === void 0 ? void 0 : _q[700] } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: (_s = (_r = c.background) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : "#fff", color: (_t = c.gray) === null || _t === void 0 ? void 0 : _t[700], border: `0.063rem solid ${border}`, boxShadow: (_u = theme.shadows) === null || _u === void 0 ? void 0 : _u.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+                                        bg: (_v = c.gray) === null || _v === void 0 ? void 0 : _v[50],
+                                        color: (_w = c.primary) === null || _w === void 0 ? void 0 : _w[600],
+                                        transform: "scale(1.1)",
+                                        boxShadow: (_x = theme.shadows) === null || _x === void 0 ? void 0 : _x.lg,
+                                    }, _active: { bg: (_y = c.gray) === null || _y === void 0 ? void 0 : _y[100] } }) }))] }), isEditable && (_jsx(Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))] }))] }));
+}

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.stories.js

@@ -0,0 +1,5 @@
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ProfilePhotoViewer from './ProfilePhotoViewer';
+// import { ProfilePhotoViewerProps } from './ProfilePhotoViewerProps';
+export {};

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.js

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

package/dist/esm/Components/ProgressBar/ProgressBar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Progress } from "@chakra-ui/react";
+export default function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, ...aria }) {
+    //  const theme = useCustomTheme();
+    return (_jsx(Progress, { ...aria, size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));
+}

package/dist/esm/Components/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,6 @@
+// import React from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import { ChakraProvider } from '@chakra-ui/react';
+// import ProgressBar from './ProgressBar'; // Adjust the import path and component type if needed
+// import { ProgressBarProps } from "./ProgressBarProps";
+export {};

package/dist/esm/Components/ProgressBar/ProgressBarProps.js

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

package/dist/esm/Components/RadioButton/RadioButton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio as ChakraRadio, RadioGroup as ChakraRadioGroup, Stack, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { TextLabel } from "../Common/FormLabel";
+const RadioButton = ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.75rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, }) => {
+    const theme = useCustomTheme();
+    return (_jsx(ChakraRadio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], borderWidth: "1.6px", _hover: {
+            borderColor: theme.colors.primary[500],
+            backgroundColor: theme.colors.background[100],
+        }, sx: {
+            "&[data-checked]": {
+                backgroundColor: theme.colors.primary[500],
+                borderColor: theme.colors.primary[500]
+            },
+            "&[data-checked]:hover": {
+                backgroundColor: theme.colors.primary[500],
+                borderColor: theme.colors.primary[500],
+                boxShadow: `0 0 0 2px ${theme.colors.primary[200]}`,
+            },
+        }, children: _jsx(TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }) }));
+};
+const RadioButtonGroup = ({ options, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction = "row", align = "", labelFontSize, labelClampLines, showLabelTooltip, }) => {
+    return (_jsx(ChakraRadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue, children: _jsx(Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem", children: options.map((option) => (_jsx(RadioButton, { label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip }, option.id))) }) }));
+};
+export { RadioButton, RadioButtonGroup };

package/dist/esm/Components/RadioButton/RadioButton.stories.js

@@ -0,0 +1,6 @@
+// import React, { useState } from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import { ChakraProvider } from '@chakra-ui/react';
+// import { RadioButton, RadioButtonGroup } from './RadioButton';
+// import { ChakraRadioProps, ChakraRadioGroupProps } from './RadioButtonProps';
+export {};

package/dist/esm/Components/RadioButton/RadioButtonProps.js

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Box, Divider, HStack, IconButton, Image, Text, } from "@chakra-ui/react";
+import { DragDropContext, Droppable, Draggable, } from "@hello-pangea/dnd";
+import { BetweenHorizonalStart, GripVertical, X } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onRemove, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    const handleDragEnd = (result) => {
+        if (!result.destination)
+            return;
+        const reordered = Array.from(items);
+        const [moved] = reordered.splice(result.source.index, 1);
+        reordered.splice(result.destination.index, 0, moved);
+        onReorder(reordered);
+    };
+    return (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BetweenHorizonalStart, {}), _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: label })] }), _jsx(Divider, {}), _jsx("br", {}), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => (_jsxs(HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => (_jsx(Draggable, { draggableId: item.id, index: index, children: (provided) => {
+                                    var _a, _b, _c, _d;
+                                    return (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[300], borderRadius: "md", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_b = item.name) !== null && _b !== void 0 ? _b : `item-${index}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[500] }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), _jsx(Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && (_jsx(IconButton, { icon: _jsx(X, { size: 16, color: (_d = colors === null || colors === void 0 ? void 0 : colors.red) === null || _d === void 0 ? void 0 : _d[500] }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
+                                } }, item.id))), provided.placeholder] })) }) })] }));
+};
+export default ReorderList;

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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, Text, } from "@chakra-ui/react";
+import { AlertTriangle, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import Button from "../Button/Button";
+const DeleteRoleModal = ({ isOpen, onClose, onConfirm, isLoading, labels, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const { colors } = useCustomTheme();
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", 
+                                // Pale badge bg: `red` reverses in dark; `semantic.error` is lifted and would stay near-white.
+                                bg: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FEF2F2", color: (_l = (_j = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _g === void 0 ? void 0 : _g.error) === null || _h === void 0 ? void 0 : _h[500]) !== null && _j !== void 0 ? _j : (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "#EF4444", children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.deleteRole })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Text, { color: (_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[600], fontSize: "sm", mb: 5, children: labels.deleteRoleConfirm }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
+};
+export default DeleteRoleModal;

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

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Badge, Box, Checkbox, Divider, Flex, Heading, HStack, IconButton, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tooltip, Tr, VStack, } from "@chakra-ui/react";
+import { ArrowLeft, Check, Pencil, Plus, ShieldCheck, SquareArrowOutUpRight, Trash2, } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import Button from "../Button/Button";
+import TextInput from "../Input/TextInput";
+import EmptyState from "../EmptyState/EmptyState";
+import DeleteRoleModal from "./DeleteRoleModal";
+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",
+];
+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", }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    const { colors } = useCustomTheme();
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const [deleteId, setDeleteId] = useState(null);
+    const border = (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : "#E2E8F0";
+    const surface = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    const muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
+    const heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
+    const headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
+    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: "0 1px 2px rgba(16,24,40,0.05)",
+        overflow: "hidden",
+    };
+    const cardHeaderSx = {
+        px: 4,
+        py: 3,
+        borderBottom: "1px solid",
+        borderColor: border,
+    };
+    const thStyle = {
+        fontSize: "0.7rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        color: muted,
+        borderColor: border,
+        py: 3,
+    };
+    const renderGrantedCheck = () => {
+        var _a, _b;
+        return checkIcon !== null && checkIcon !== void 0 ? checkIcon : (_jsx(Box, { color: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.green) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : "#22C55E", display: "inline-flex", children: _jsx(Check, { size: 18, strokeWidth: 3 }) }));
+    };
+    const renderListView = () => (_jsxs(VStack, { align: "stretch", spacing: 4, children: [_jsxs(Box, { ...cardSx, children: [_jsxs(Flex, { ...cardHeaderSx, alignItems: "center", justifyContent: "space-between", children: [_jsxs(HStack, { spacing: 2, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }), !isRolesLoading && (_jsxs(Badge, { colorScheme: "blue", variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", textTransform: "none", children: [labels.totalRoles, ": ", roles.length] }))] }), _jsx(Button, { label: labels.newRole, onClick: onNewRole, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", leftIcon: _jsx(Plus, { size: 15 }) })] }), _jsx(Box, { overflowX: "auto", children: isRolesLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 6 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : roles.length === 0 ? (_jsx(EmptyState, { icon: ShieldCheck, title: labels.noRoles, size: "sm", minH: "200px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, width: "56px", children: labels.sNo }), _jsx(Th, { ...thStyle, children: labels.roleNameColumn }), _jsx(Th, { ...thStyle, children: labels.createdBy }), _jsx(Th, { ...thStyle, children: labels.createdTime }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.actions })] }) }), _jsx(Tbody, { children: roles.map((role, index) => {
+                                        var _a, _b, _c;
+                                        return (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, color: muted, fontSize: "sm", children: index + 1 }), _jsx(Td, { borderColor: border, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading, children: role.roleName }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: role.createdBy }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: role.created_at }), _jsx(Td, { borderColor: border, children: _jsxs(HStack, { spacing: 1, justifyContent: "flex-end", children: [_jsx(Tooltip, { label: labels.view, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquareArrowOutUpRight, { size: 15 }), "aria-label": labels.view, variant: "ghost", size: "xs", color: muted, onClick: () => onViewRole === null || onViewRole === void 0 ? void 0 : onViewRole(role) }) }), _jsx(Tooltip, { label: labels.edit, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Pencil, { size: 15 }), "aria-label": labels.edit, variant: "ghost", size: "xs", color: muted, onClick: () => onEditRole === null || onEditRole === void 0 ? void 0 : onEditRole(role) }) }), _jsx(Tooltip, { label: labels.delete, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Trash2, { size: 15 }), "aria-label": labels.delete, variant: "ghost", size: "xs", colorScheme: "red", color: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.red) === null || _a === void 0 ? void 0 : _a[400]) !== null && _b !== void 0 ? _b : "#F87171", onClick: () => setDeleteId(Number(role.roles_id)) }) })] }) })] }, (_c = role.roles_id) !== null && _c !== void 0 ? _c : role.roleName));
+                                    }) })] })) })] }), footerSlot] }));
+    const renderFormView = () => (_jsxs(VStack, { align: "stretch", spacing: 4, children: [_jsxs(Box, { ...cardSx, children: [_jsxs(Flex, { ...cardHeaderSx, alignItems: "center", gap: 2, children: [onCancelForm && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onCancelForm })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.roleInformation })] }), _jsxs(Box, { p: 4, children: [_jsx(Box, { maxW: "320px", children: _jsx(Tooltip, { label: isViewMode ? labels.readOnly : "", isDisabled: !isViewMode, children: _jsx(Box, { children: _jsx(TextInput, { label: labels.roleName, value: roleName, placeholder: labels.roleNamePlaceholder, error: !!roleNameError, errorMessage: roleNameError, onChange: (e) => onRoleNameChange === null || onRoleNameChange === void 0 ? void 0 : onRoleNameChange(e.target.value), isRequired: true, width: "100%", isDisabled: isViewMode }) }) }) }), _jsxs(VStack, { align: "stretch", spacing: 3, mt: 4, children: [_jsx(Checkbox, { isChecked: isSuperAdmin, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleSuperAdmin === null || onToggleSuperAdmin === void 0 ? void 0 : onToggleSuperAdmin(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.enableAllPermissions }) }), _jsx(Checkbox, { isChecked: isTrackLocation, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleTrackLocation === null || onToggleTrackLocation === void 0 ? void 0 : onToggleTrackLocation(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.trackLocation }) }), _jsx(Checkbox, { isChecked: isShowRecords, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleShowRecords === null || onToggleShowRecords === void 0 ? void 0 : onToggleShowRecords(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.showAllUserRecords }) })] })] })] }), _jsxs(Box, { ...cardSx, children: [_jsx(Flex, { ...cardHeaderSx, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.permissionSettings }) }), _jsx(Box, { overflowX: "auto", children: _jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), permissionKeys.map((key) => (_jsx(Th, { ...thStyle, textAlign: "center", children: columnLabels[key] }, key)))] }) }), _jsx(Tbody, { children: permissions.length === 0 ? (_jsx(Tr, { children: _jsx(Td, { colSpan: permissionKeys.length + 1, textAlign: "center", borderColor: border, children: _jsx(Text, { color: muted, fontSize: "sm", py: 4, children: labels.noPermissions }) }) })) : (permissions.map((perm) => {
+                                        var _a;
+                                        const isAutomationModule = ((_a = perm.module) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "automation";
+                                        return (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, color: heading, fontSize: "sm", fontWeight: 500, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: perm.module }), permissionKeys.map((key) => {
+                                                    const isRead = key === "read";
+                                                    return (_jsx(Td, { textAlign: "center", borderColor: border, children: _jsx(Flex, { justify: "center", children: isViewMode ? (isAutomationModule ? (isRead &&
+                                                                perm.automation &&
+                                                                renderGrantedCheck()) : (perm[key] && renderGrantedCheck())) : isAutomationModule && !isRead ? null : (_jsx(Checkbox, { size: "sm", isChecked: isAutomationModule
+                                                                    ? perm.automation
+                                                                    : perm[key], isDisabled: isAutomationModule && !isRead, onChange: () => onPermissionChange === null || onPermissionChange === void 0 ? void 0 : onPermissionChange(perm.module, isAutomationModule ? "automation" : key) })) }) }, key));
+                                                })] }, perm.module));
+                                    })) })] }) }), !isViewMode && (_jsxs(_Fragment, { children: [_jsx(Divider, { borderColor: border }), _jsxs(Flex, { justifyContent: "flex-end", gap: 3, p: 4, children: [_jsx(Button, { onClick: onCancelForm, size: "sm", sx: { fontSize: "xs" }, label: labels.cancel, colorScheme: "red", variant: "outline" }), _jsx(Button, { onClick: onSave, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", isLoading: isSaving, label: isEditing ? labels.updateChanges : labels.saveChanges })] })] }))] })] }));
+    return (_jsxs(Box, { p: padding, backgroundColor: (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : "#F8FAFC", minHeight: "100%", children: [view === "list" ? renderListView() : renderFormView(), _jsx(DeleteRoleModal, { isOpen: deleteId !== null, onClose: () => setDeleteId(null), onConfirm: () => {
+                    if (deleteId !== null)
+                        onDeleteRole === null || onDeleteRole === void 0 ? void 0 : onDeleteRole(deleteId);
+                    setDeleteId(null);
+                }, labels: labels })] }));
+};
+export default RolesPermission;

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

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

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { ChevronUp } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import ToolTip from "../ToolTip/ToolTip";
+import { rafThrottle } from "../../Utils/rafThrottle";
+const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300, duration = 600, useWindow = false, bottom = "2rem", right = "2rem", }) => {
+    var _a;
+    const [visible, setVisible] = useState(false);
+    const anchorRef = useRef(null);
+    const theme = useCustomTheme();
+    const getScroller = () => {
+        var _a, _b;
+        if (useWindow)
+            return window;
+        return (_b = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null;
+    };
+    const handleScroll = () => {
+        var _a;
+        const scroller = getScroller();
+        const top = scroller === window
+            ? window.scrollY
+            : (_a = scroller === null || scroller === void 0 ? void 0 : scroller.scrollTop) !== null && _a !== void 0 ? _a : 0;
+        setVisible(top >= threshold);
+    };
+    const scrollToTop = () => {
+        const scroller = getScroller();
+        if (!scroller)
+            return;
+        const start = scroller === window ? window.scrollY : scroller.scrollTop;
+        const startTime = performance.now();
+        const step = (now) => {
+            const progress = Math.min((now - startTime) / duration, 1);
+            const eased = progress < 0.5
+                ? 2 * progress * progress
+                : -1 + (4 - 2 * progress) * progress;
+            const next = start * (1 - eased);
+            if (scroller === window)
+                window.scrollTo(0, next);
+            else
+                scroller.scrollTop = next;
+            if (progress < 1)
+                requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+    };
+    useEffect(() => {
+        const scroller = getScroller();
+        if (!scroller)
+            return;
+        const onScroll = rafThrottle(handleScroll);
+        scroller.addEventListener("scroll", onScroll, { passive: true });
+        handleScroll();
+        return () => {
+            onScroll.cancel();
+            scroller.removeEventListener("scroll", onScroll);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [useWindow, threshold]);
+    return (_jsxs(Box, { ref: anchorRef, position: "relative", children: [children, _jsx(ToolTip, { label: tooltipLabel, placement: "left", children: _jsx(Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[500], color: theme.colors.white, boxShadow: "0 4px 14px rgba(0,0,0,0.25)", 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: (_a = theme.colors.primary[600]) !== null && _a !== void 0 ? _a : theme.colors.primary[500],
+                        transform: "translateY(-2px) scale(1.05)",
+                        boxShadow: "0 6px 20px rgba(0,0,0,0.3)",
+                    }, _active: { transform: "scale(0.95)" }, children: _jsx(ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));
+};
+export default ScrollToTop;

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

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

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

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