pixelize-design-library 2.3.1-beta.13 → 2.3.1-beta.15

package/dist/Components/RolesPermission/RolesPermission.test.js

@@ -0,0 +1,150 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var RolesPermission_1 = __importDefault(require("./RolesPermission"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#ffffff",
+            gray: {
+                50: "#f8fafc",
+                100: "#f0f0f0",
+                200: "#e2e8f0",
+                300: "#cbd5e1",
+                400: "#94a3b8",
+                500: "#64748b",
+                600: "#475569",
+                700: "#334155",
+                800: "#1e293b",
+            },
+            primary: {
+                50: "#eef2ff",
+                100: "#e0e7ff",
+                300: "#a5b4fc",
+                500: "#6366f1",
+                600: "#4f46e5",
+                700: "#4338ca",
+            },
+            boxborder: { 200: "#e2e8f0" },
+            text: { 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155" },
+            secondary: { 500: "#805ad5" },
+            backgroundColor: { light: "#ffffff" },
+            blue: { 200: "#bfdbfe", 400: "#60a5fa", 500: "#3b82f6" },
+            green: { 400: "#4ade80", 500: "#22c55e" },
+            red: { 400: "#f87171", 500: "#ef4444", 50: "#fef2f2" },
+            semantic: { error: { 50: "#fef2f2", 500: "#ef4444" } },
+        },
+    }); },
+}); });
+beforeAll(function () {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(function (query) { return ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        }); }),
+    });
+});
+var roles = [
+    {
+        roleName: "Admin",
+        createdBy: "Aisha Khan",
+        created_at: "Jun 6, 2026 10:00 AM",
+        permission: [],
+        roles_id: "1",
+        designation: "Army",
+        makeSuperAdmin: true,
+    },
+    {
+        roleName: "Sales",
+        createdBy: "Marcus Reed",
+        created_at: "Jun 5, 2026 09:00 AM",
+        permission: [],
+        roles_id: "2",
+        designation: "Army",
+    },
+];
+var permissions = [
+    {
+        module: "Leads",
+        read: true,
+        create: true,
+        edit: false,
+        delete: false,
+        import: false,
+        export: false,
+    },
+    {
+        module: "Automation",
+        read: false,
+        create: false,
+        edit: false,
+        delete: false,
+        automation: true,
+    },
+];
+var baseProps = {
+    roles: roles,
+    permissions: permissions,
+    roleName: "",
+    isSuperAdmin: false,
+    isTrackLocation: false,
+    isShowRecords: false,
+};
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("RolesPermission", function () {
+    it("renders the roles list", function () {
+        renderWithChakra(react_1.default.createElement(RolesPermission_1.default, __assign({ view: "list" }, baseProps)));
+        expect(react_2.screen.getByText("Roles & Permissions")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Admin")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Sales")).toBeInTheDocument();
+    });
+    it("calls onNewRole when New Role is clicked", function () {
+        var onNewRole = jest.fn();
+        renderWithChakra(react_1.default.createElement(RolesPermission_1.default, __assign({ view: "list" }, baseProps, { onNewRole: onNewRole })));
+        react_2.fireEvent.click(react_2.screen.getByText("New Role"));
+        expect(onNewRole).toHaveBeenCalled();
+    });
+    it("shows an empty state when there are no roles", function () {
+        renderWithChakra(react_1.default.createElement(RolesPermission_1.default, __assign({ view: "list" }, baseProps, { roles: [] })));
+        expect(react_2.screen.getByText("No roles found")).toBeInTheDocument();
+    });
+    it("renders the permission matrix in the form view", function () {
+        renderWithChakra(react_1.default.createElement(RolesPermission_1.default, __assign({ view: "form", mode: "create" }, baseProps)));
+        expect(react_2.screen.getByText("Permission Settings")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Leads")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Automation")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Enable All Permissions")).toBeInTheDocument();
+    });
+    it("opens the delete confirmation modal", function () {
+        renderWithChakra(react_1.default.createElement(RolesPermission_1.default, __assign({ view: "list" }, baseProps)));
+        react_2.fireEvent.click(react_2.screen.getAllByLabelText("Delete")[0]);
+        expect(react_2.screen.getByText("Are you sure you want to delete this role?")).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,117 @@
+import { ReactNode } from "react";
+export type PermissionKey = "read" | "create" | "edit" | "delete" | "import" | "export" | "automation";
+export type Permission = {
+    module: string;
+    read: boolean;
+    create: boolean;
+    edit: boolean;
+    delete: boolean;
+    import?: boolean;
+    export?: boolean;
+    automation?: boolean;
+};
+export type RoleData = {
+    roleName: string;
+    createdBy: string;
+    created_at: string;
+    permission: Permission[];
+    roles_id: string;
+    designation: string;
+    makeSuperAdmin?: boolean;
+    automation?: boolean;
+    trackLocation?: boolean;
+    show_records?: boolean;
+};
+export type RolesPermissionView = "list" | "form";
+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 = {
+    title?: string;
+    totalRoles?: string;
+    newRole?: string;
+    sNo?: string;
+    roleNameColumn?: string;
+    createdBy?: string;
+    createdTime?: string;
+    actions?: string;
+    noRoles?: string;
+    view?: string;
+    edit?: string;
+    delete?: string;
+    roleInformation?: string;
+    roleName?: string;
+    roleNamePlaceholder?: string;
+    enableAllPermissions?: string;
+    trackLocation?: string;
+    showAllUserRecords?: string;
+    permissionSettings?: string;
+    moduleName?: string;
+    read?: string;
+    create?: string;
+    editPermission?: string;
+    deletePermission?: string;
+    importPermission?: string;
+    exportPermission?: string;
+    noPermissions?: string;
+    cancel?: string;
+    saveChanges?: string;
+    updateChanges?: string;
+    readOnly?: string;
+    deleteRole?: string;
+    deleteRoleConfirm?: string;
+};
+export interface RolesPermissionProps {
+    /** Which view to render. */
+    view: RolesPermissionView;
+    /** Form mode (controls read-only vs editable form). */
+    mode?: RolesPermissionMode;
+    /** Roles list data. */
+    roles: RoleData[];
+    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). */
+    roleName: string;
+    roleNameError?: string;
+    isSuperAdmin: boolean;
+    isTrackLocation: boolean;
+    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;
+    onViewRole?: (role: RoleData) => void;
+    onEditRole?: (role: RoleData) => void;
+    onDeleteRole?: (roleId: number) => void;
+    onBack?: () => void;
+    /** Form actions. */
+    onRoleNameChange?: (value: string) => void;
+    onToggleSuperAdmin?: (checked: boolean) => void;
+    onToggleTrackLocation?: (checked: boolean) => void;
+    onToggleShowRecords?: (checked: boolean) => void;
+    onPermissionChange?: (module: string, key: PermissionKey) => void;
+    onSave?: () => void;
+    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;
+}
+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/StageProgress/StageItem.d.ts

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

package/dist/Components/StageProgress/StageItem.js

@@ -0,0 +1,137 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var StageProgressProps_1 = require("./StageProgressProps");
+var sizeMap = {
+    sm: { arrow: 12, minW: "120px", h: "28px", px: 3, font: "0.75rem", icon: 12 },
+    md: { arrow: 16, minW: "160px", h: "36px", px: 4, font: "0.875rem", icon: 14 },
+    lg: { arrow: 20, minW: "200px", h: "44px", px: 5, font: "1rem", icon: 16 },
+};
+var clipFor = function (index, total, a) {
+    var isFirst = index === 0;
+    var isLast = index === total - 1;
+    if (total === 1)
+        return "none";
+    if (isFirst)
+        return "polygon(0 0, calc(100% - ".concat(a, "px) 0, 100% 50%, calc(100% - ").concat(a, "px) 100%, 0 100%)");
+    if (isLast)
+        return "polygon(0 0, 100% 0, 100% 100%, 0 100%, ".concat(a, "px 50%)");
+    return "polygon(0 0, calc(100% - ".concat(a, "px) 0, 100% 50%, calc(100% - ").concat(a, "px) 100%, 0 100%, ").concat(a, "px 50%)");
+};
+var StageItem = function (_a) {
+    var _b;
+    var label = _a.label, index = _a.index, total = _a.total, state = _a.state, _c = _a.variant, variant = _c === void 0 ? "chevron" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, _e = _a.colorScheme, colorScheme = _e === void 0 ? "primary" : _e, onClick = _a.onClick, _f = _a.isReadOnly, isReadOnly = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.showCheck, showCheck = _h === void 0 ? false : _h, minWidth = _a.minWidth, _j = _a.scrollIntoViewWhenActive, scrollIntoViewWhenActive = _j === void 0 ? true : _j, _k = _a.tooltipThreshold, tooltipThreshold = _k === void 0 ? 20 : _k;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
+    var ref = (0, react_1.useRef)(null);
+    var s = sizeMap[size];
+    (0, react_1.useEffect)(function () {
+        if (state === "active" && scrollIntoViewWhenActive && ref.current) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                inline: "center",
+                block: "nearest",
+            });
+        }
+    }, [state, scrollIntoViewWhenActive]);
+    var bg = state === "active"
+        ? palette.strong
+        : state === "completed"
+            ? palette.soft
+            : palette.muted;
+    var color = state === "active"
+        ? palette.onStrong
+        : state === "completed"
+            ? palette.softText
+            : palette.mutedText;
+    var interactive = !isReadOnly && !disabled;
+    var isFirst = index === 0;
+    var isLast = index === total - 1;
+    var isChevron = variant === "chevron";
+    // Chevron pads extra on the left to clear the inbound notch and on the right
+    // to keep text clear of the outgoing arrow point; others are centered.
+    var leftPad = isChevron && !isFirst ? s.arrow + s.px * 4 : s.px * 2;
+    var rightPad = isChevron ? s.arrow + s.px * 4 : s.px * 2;
+    // Chevron overlaps into the previous point, leaving a thin 2px divider.
+    var overlap = isChevron && !isFirst ? -(s.arrow - 2) : 0;
+    var clipPath = isChevron ? clipFor(index, total, s.arrow) : "none";
+    var borderRadius = variant === "pills"
+        ? "full"
+        : variant === "bar"
+            ? isFirst && isLast
+                ? "8px"
+                : isFirst
+                    ? "8px 2px 2px 8px"
+                    : isLast
+                        ? "2px 8px 8px 2px"
+                        : "2px"
+            : "0";
+    // Upcoming pills read as outlined; other states stay filled.
+    var isOutlinePill = variant === "pills" && state === "upcoming";
+    var hoverStyles = interactive
+        ? state === "active"
+            ? { bg: palette.hover }
+            : { bg: palette.strong, color: palette.onStrong, borderColor: palette.strong }
+        : undefined;
+    var showTooltip = ((_b = label === null || label === void 0 ? void 0 : label.length) !== null && _b !== void 0 ? _b : 0) > tooltipThreshold;
+    var content = (react_1.default.createElement(react_2.Box, { ref: ref, role: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, onClick: interactive ? onClick : undefined, flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: "".concat(overlap, "px"), pl: "".concat(leftPad, "px"), pr: "".concat(rightPad, "px"), bg: isOutlinePill ? "transparent" : bg, color: isOutlinePill ? palette.mutedText : color, border: isOutlinePill ? "1px solid" : undefined, borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "background 0.18s ease, color 0.18s ease, filter 0.18s ease, border-color 0.18s ease", sx: { clipPath: clipPath }, _hover: interactive ? __assign(__assign({}, hoverStyles), { filter: "brightness(0.97)" }) : undefined },
+        react_1.default.createElement(react_2.Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0 },
+            showCheck && state === "completed" && (react_1.default.createElement(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })),
+            react_1.default.createElement(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1" }, label))));
+    if (showTooltip) {
+        return (react_1.default.createElement(ToolTip_1.default, { label: label, placement: "top", openDelay: 300 }, content));
+    }
+    return content;
+};
+exports.default = StageItem;

package/dist/Components/StageProgress/StageProgress.d.ts

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

package/dist/Components/StageProgress/StageProgress.js

@@ -0,0 +1,59 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var StageItem_1 = __importDefault(require("./StageItem"));
+var StepperStage_1 = __importDefault(require("./StepperStage"));
+var scrollSx = {
+    "&::-webkit-scrollbar": { height: "4px" },
+    "&::-webkit-scrollbar-thumb": {
+        borderRadius: "10px",
+        backgroundColor: "rgba(0,0,0,0.25)",
+    },
+    "&::-webkit-scrollbar-track": { background: "transparent" },
+};
+// Gap between items per variant (chevron interlocks via negative margin).
+var gapFor = {
+    chevron: "0",
+    bar: "4px",
+    pills: "8px",
+    stepper: "0",
+};
+var StageProgress = function (_a) {
+    var stages = _a.stages, _b = _a.variant, variant = _b === void 0 ? "chevron" : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.colorScheme, colorScheme = _d === void 0 ? "primary" : _d, _e = _a.markCompleted, markCompleted = _e === void 0 ? true : _e, _f = _a.showCheck, showCheck = _f === void 0 ? false : _f, _g = _a.isReadOnly, isReadOnly = _g === void 0 ? false : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, minStageWidth = _a.minStageWidth, _j = _a.scrollActiveIntoView, scrollActiveIntoView = _j === void 0 ? true : _j, _k = _a.tooltipThreshold, tooltipThreshold = _k === void 0 ? 20 : _k;
+    if (isLoading) {
+        var skeletonH_1 = size === "sm" ? "28px" : size === "lg" ? "44px" : "36px";
+        return (react_1.default.createElement(react_2.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem" }, Array.from({ length: 6 }).map(function (_, i) { return (react_1.default.createElement(react_2.Skeleton, { key: i, height: skeletonH_1, minWidth: minStageWidth || "160px", borderRadius: "6px", flexShrink: 0 })); })));
+    }
+    var activeIndex = stages.findIndex(function (st) { return st.id === value; });
+    var stateFor = function (index) {
+        if (index === activeIndex)
+            return "active";
+        if (markCompleted && activeIndex > -1 && index < activeIndex)
+            return "completed";
+        return "upcoming";
+    };
+    var total = stages.length;
+    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "hidden", p: "0.1rem", sx: __assign({ "&:hover": { overflowX: "auto" } }, scrollSx) }, stages.map(function (stage, index) {
+        var state = stateFor(index);
+        if (variant === "stepper") {
+            return (react_1.default.createElement(StepperStage_1.default, { key: stage.id, label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, onClick: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index); } }));
+        }
+        return (react_1.default.createElement(StageItem_1.default, { key: stage.id, label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index); } }));
+    })));
+};
+exports.default = StageProgress;

package/dist/Components/StageProgress/StageProgressProps.d.ts

@@ -0,0 +1,85 @@
+import { CustomThemeProps } from "../../Theme/themeProps";
+export type StageSize = "sm" | "md" | "lg";
+export type StageColorScheme = "primary" | "secondary" | "tertiary" | "success" | "error" | "warning" | "info";
+export type StageState = "completed" | "active" | "upcoming";
+/** Visual style of the tracker. */
+export type StageVariant = "chevron" | "bar" | "pills" | "stepper";
+export interface Stage {
+    id: string | number;
+    label: string;
+    /** Disable selecting this stage individually. */
+    disabled?: boolean;
+}
+export interface StageProgressProps {
+    /** Ordered list of pipeline stages. */
+    stages: Stage[];
+    /** Visual style. Default "chevron". */
+    variant?: StageVariant;
+    /** id of the currently active stage. */
+    value?: string | number;
+    /** Fired when a stage is clicked (ignored when isReadOnly). */
+    onChange?: (id: string | number, stage: Stage, index: number) => void;
+    size?: StageSize;
+    colorScheme?: StageColorScheme;
+    /** Render stages before the active one in a distinct "done" style. Default true. */
+    markCompleted?: boolean;
+    /** Show a check icon on completed stages. Default false. */
+    showCheck?: boolean;
+    /** Render as a non-interactive indicator. */
+    isReadOnly?: boolean;
+    /** Show the loading skeleton row instead of stages. */
+    isLoading?: boolean;
+    /** Min width of each chevron. */
+    minStageWidth?: string;
+    /** Auto-scroll the active stage into view. Default true. */
+    scrollActiveIntoView?: boolean;
+    /** Label length beyond which a tooltip is shown. Default 20. */
+    tooltipThreshold?: number;
+}
+export interface StageItemProps {
+    label: string;
+    index: number;
+    total: number;
+    state: StageState;
+    /** "chevron" | "bar" | "pills" (stepper has its own renderer). */
+    variant?: Exclude<StageVariant, "stepper">;
+    size?: StageSize;
+    colorScheme?: StageColorScheme;
+    onClick?: () => void;
+    isReadOnly?: boolean;
+    disabled?: boolean;
+    showCheck?: boolean;
+    minWidth?: string;
+    scrollIntoViewWhenActive?: boolean;
+    tooltipThreshold?: number;
+}
+export interface StepperStageProps {
+    label: string;
+    /** 1-based step number shown inside the circle. */
+    number: number;
+    state: StageState;
+    size?: StageSize;
+    colorScheme?: StageColorScheme;
+    onClick?: () => void;
+    isReadOnly?: boolean;
+    disabled?: boolean;
+    showCheck?: boolean;
+    isFirst: boolean;
+    isLast: boolean;
+    /** Connector entering this node is part of a completed segment. */
+    leftDone: boolean;
+    /** Connector leaving this node is part of a completed segment. */
+    rightDone: boolean;
+    scrollIntoViewWhenActive?: boolean;
+}
+export interface StagePalette {
+    soft: string;
+    softText: string;
+    strong: string;
+    onStrong: string;
+    hover: string;
+    muted: string;
+    mutedText: string;
+}
+/** Resolve a chevron palette for a given color scheme from the theme. */
+export declare const resolveStagePalette: (theme: CustomThemeProps, colorScheme?: StageColorScheme) => StagePalette;

package/dist/Components/StageProgress/StageProgressProps.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveStagePalette = void 0;
+var SEMANTIC = ["success", "error", "warning", "info"];
+/** Resolve a chevron palette for a given color scheme from the theme. */
+var resolveStagePalette = function (theme, colorScheme) {
+    var _a;
+    if (colorScheme === void 0) { colorScheme = "primary"; }
+    var colors = theme.colors;
+    var scale = SEMANTIC.includes(colorScheme)
+        ? theme.colors.semantic[colorScheme]
+        : colors[colorScheme];
+    var gray = (_a = colors.gray) !== null && _a !== void 0 ? _a : {};
+    var get = function (s, k, fb) {
+        return (s && s[k]) || fb;
+    };
+    return {
+        soft: get(scale, 100, "#E6F0FF"),
+        softText: get(scale, 700, "#1D4ED8"),
+        strong: get(scale, 500, "#3B82F6"),
+        onStrong: theme.colors.white || "#FFFFFF",
+        hover: get(scale, 600, "#2563EB"),
+        muted: get(gray, 100, "#F1F5F9"),
+        mutedText: get(gray, 500, "#64748B"),
+    };
+};
+exports.resolveStagePalette = resolveStagePalette;

package/dist/Components/StageProgress/StepperStage.d.ts

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