pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Components/RangeSlider/RangeSlider.js

@@ -0,0 +1,136 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const rangeSliderColors_1 = require("./rangeSliderColors");
+const rangeSliderSize_1 = require("./rangeSliderSize");
+const rangeSliderMath_1 = require("./rangeSliderMath");
+const BIG_STEP_MULTIPLIER = 10;
+const isRangeValue = (value) => Array.isArray(value);
+function RangeSlider(rawProps) {
+    var _a;
+    const { min, max, value, defaultValue, onChange, onChangeEnd, onChangeStart, step = 1, minDistance = 0, isDisabled = false, scale = "linear", formatValue = String, size = "sm", label = "Range", minThumbLabel = "Minimum", maxThumbLabel = "Maximum", "aria-label": ariaLabel, showValueLabels = true, showTooltip = true, marks, testId, } = rawProps;
+    (0, rangeSliderMath_1.assertRangeBounds)(min, max, scale);
+    const isRange = isRangeValue((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : [min, max]);
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { track, fill, thumbBg, thumbBorder } = (0, rangeSliderColors_1.resolveRangeSliderColors)(colors);
+    const { trackHeight, thumbSize } = (0, rangeSliderSize_1.rangeSliderSize)(size);
+    const focusRing = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    const reactId = (0, react_1.useId)();
+    const trackRef = (0, react_1.useRef)(null);
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : (isRange ? [min, max] : min));
+    const [dragging, setDragging] = (0, react_1.useState)(null);
+    const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const isControlled = value !== undefined;
+    const committedValue = isControlled ? value : internalValue;
+    const liveValue = dragValue !== null && dragValue !== void 0 ? dragValue : committedValue;
+    const [currentMin, currentMax] = isRangeValue(liveValue) ? liveValue : [min, liveValue];
+    const currentSingle = isRangeValue(liveValue) ? liveValue[0] : liveValue;
+    const commit = (0, react_1.useCallback)((next, isFinal) => {
+        if (!isControlled)
+            setInternalValue(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+        if (isFinal)
+            onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(next);
+    }, [isControlled, onChange, onChangeEnd]);
+    const positionFromClientX = (0, react_1.useCallback)((clientX) => {
+        const trackEl = trackRef.current;
+        if (!trackEl)
+            return 0;
+        const { left, width } = trackEl.getBoundingClientRect();
+        const ratio = width === 0 ? 0 : (clientX - left) / width;
+        return Math.min(100, Math.max(0, ratio * 100));
+    }, []);
+    const startDrag = (thumb) => (e) => {
+        if (isDisabled)
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        setDragging(thumb);
+        setDragValue(isRange ? [currentMin, currentMax] : currentSingle);
+        onChangeStart === null || onChangeStart === void 0 ? void 0 : onChangeStart();
+    };
+    const handleMove = (thumb) => (e) => {
+        if (isDisabled || dragging !== thumb)
+            return;
+        const desired = (0, rangeSliderMath_1.positionToValue)(positionFromClientX(e.clientX), min, max, scale);
+        const next = isRange
+            ? thumb === "min"
+                ? [(0, rangeSliderMath_1.resolveMinThumbValue)(desired, min, max, step, currentMax, minDistance), currentMax]
+                : [currentMin, (0, rangeSliderMath_1.resolveMaxThumbValue)(desired, min, max, step, currentMin, minDistance)]
+            : (0, rangeSliderMath_1.snapToStep)(desired, min, max, step);
+        setDragValue(next);
+        commit(next, false);
+    };
+    const endDrag = () => {
+        if (!dragging)
+            return;
+        setDragging(null);
+        const final = dragValue !== null && dragValue !== void 0 ? dragValue : committedValue;
+        setDragValue(null);
+        commit(final, true);
+    };
+    const nudgeRange = (thumb, e) => {
+        if (e.key === "Home" || e.key === "End") {
+            e.preventDefault();
+            const next = thumb === "min"
+                ? e.key === "Home"
+                    ? [min, currentMax]
+                    : [(0, rangeSliderMath_1.resolveMinThumbValue)(currentMax - minDistance, min, max, step, currentMax, minDistance), currentMax]
+                : e.key === "End"
+                    ? [currentMin, max]
+                    : [currentMin, (0, rangeSliderMath_1.resolveMaxThumbValue)(currentMin + minDistance, min, max, step, currentMin, minDistance)];
+            commit(next, true);
+            return;
+        }
+        const delta = (0, rangeSliderMath_1.nudgeDelta)(e.key, step, step * BIG_STEP_MULTIPLIER, e.shiftKey);
+        if (delta === null)
+            return;
+        e.preventDefault();
+        const next = thumb === "min"
+            ? [(0, rangeSliderMath_1.resolveMinThumbValue)(currentMin + delta, min, max, step, currentMax, minDistance), currentMax]
+            : [currentMin, (0, rangeSliderMath_1.resolveMaxThumbValue)(currentMax + delta, min, max, step, currentMin, minDistance)];
+        commit(next, true);
+    };
+    const nudgeSingle = (e) => {
+        if (e.key === "Home" || e.key === "End") {
+            e.preventDefault();
+            commit(e.key === "Home" ? min : max, true);
+            return;
+        }
+        const delta = (0, rangeSliderMath_1.nudgeDelta)(e.key, step, step * BIG_STEP_MULTIPLIER, e.shiftKey);
+        if (delta === null)
+            return;
+        e.preventDefault();
+        commit((0, rangeSliderMath_1.snapToStep)(currentSingle + delta, min, max, step), true);
+    };
+    const nudge = (thumb) => (e) => {
+        if (isDisabled)
+            return;
+        if (isRange)
+            nudgeRange(thumb, e);
+        else
+            nudgeSingle(e);
+    };
+    const minPos = (0, rangeSliderMath_1.valueToPosition)(isRange ? currentMin : min, min, max, scale);
+    const maxPos = (0, rangeSliderMath_1.valueToPosition)(isRange ? currentMax : currentSingle, min, max, scale);
+    const cursor = isDisabled ? "not-allowed" : "grab";
+    const opacity = isDisabled ? 0.5 : 1;
+    const resolvedMarks = Array.isArray(marks)
+        ? marks
+        : marks === true
+            ? (0, rangeSliderMath_1.stepMarks)(min, max, step).map((v) => ({ value: v }))
+            : [];
+    const singleThumbLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Value";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": testId, opacity: opacity, children: [label ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: "semibold", color: colors.textMuted, mb: 2, children: label })) : null, showValueLabels ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: isRange ? "space-between" : "flex-end", mb: 1, children: [isRange ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: "semibold", color: colors.accentText, children: formatValue(currentMin) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: "semibold", color: colors.accentText, children: formatValue(isRange ? currentMax : currentSingle) })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", pt: 5, pb: resolvedMarks.length ? 6 : 1, px: 1, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: trackRef, position: "relative", h: trackHeight, borderRadius: "full", bg: track, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, h: trackHeight, borderRadius: "full", bg: fill, left: `${minPos}%`, width: `${Math.max(maxPos - minPos, 0)}%` }), resolvedMarks.map((mark) => {
+                            const markPos = (0, rangeSliderMath_1.valueToPosition)(mark.value, min, max, scale);
+                            return ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-mark-value": mark.value, position: "absolute", top: "50%", left: `${markPos}%`, transform: "translate(-50%, -50%)", boxSize: "4px", borderRadius: "full", bg: colors.gray[400], children: mark.label ? ((0, jsx_runtime_1.jsx)(react_2.Text, { position: "absolute", top: "12px", left: "50%", transform: "translateX(-50%)", fontSize: "0.6875rem", color: colors.textMuted, whiteSpace: "nowrap", children: mark.label })) : null }, mark.value));
+                        }), isRange ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: formatValue(currentMin), placement: "top", isOpen: showTooltip && dragging === "min", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": minThumbLabel, "aria-valuemin": min, "aria-valuemax": currentMax, "aria-valuenow": currentMin, "aria-valuetext": formatValue(currentMin), position: "absolute", top: "50%", left: `${minPos}%`, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag("min"), onPointerMove: handleMove("min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge("min"), "data-testid": testId ? `${testId}-thumb-min` : undefined, id: `${reactId}-min` }) })) : null, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: formatValue(isRange ? currentMax : currentSingle), placement: "top", isOpen: showTooltip && dragging === (isRange ? "max" : "min"), hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": isRange ? maxThumbLabel : singleThumbLabel, "aria-valuemin": isRange ? currentMin : min, "aria-valuemax": max, "aria-valuenow": isRange ? currentMax : currentSingle, "aria-valuetext": formatValue(isRange ? currentMax : currentSingle), position: "absolute", top: "50%", left: `${maxPos}%`, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag(isRange ? "max" : "min"), onPointerMove: handleMove(isRange ? "max" : "min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge(isRange ? "max" : "min"), "data-testid": testId ? (isRange ? `${testId}-thumb-max` : `${testId}-thumb`) : undefined, id: `${reactId}-${isRange ? "max" : "single"}` }) })] }) })] }));
+}
+exports.default = RangeSlider;

package/dist/Components/RangeSlider/RangeSliderProps.d.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react";
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+import type { SliderScale } from "./rangeSliderMath";
+export type { SliderScale };
+/** A single tick drawn along the track. */
+export type RangeSliderMark = {
+    /** Value this tick sits at; positions along min–max the same way a thumb value does. */
+    value: number;
+    /** Content shown under the tick. Omit for an unlabelled tick mark. */
+    label?: ReactNode;
+};
+/** Props shared by both the single-thumb and dual-thumb shapes. */
+interface RangeSliderSharedProps {
+    /** Lower bound of the range. Required — there is no implicit floor. */
+    min: number;
+    /** Upper bound of the range. Required and must be greater than min. */
+    max: number;
+    /** Value increment for drag, keyboard and snapping. Defaults to 1. */
+    step?: number;
+    /** Disables pointer and keyboard interaction. */
+    isDisabled?: boolean;
+    /** "linear" spaces values evenly; "log" spaces by ratio for a range spanning orders of magnitude. Requires min > 0. Defaults to "linear". */
+    scale?: SliderScale;
+    /** Formats a raw value for display — value labels, tooltip and aria-valuetext. Defaults to String. */
+    formatValue?: (value: number) => string;
+    /** Track thickness and thumb size, from the shared control scale. Defaults to "sm". */
+    size?: ControlSize;
+    /** Heading shown above the track. Pass "" to render none. Defaults to "Range". */
+    label?: string;
+    /** Shows the formatted current value(s) above the track. Defaults to true. */
+    showValueLabels?: boolean;
+    /** Shows a floating tooltip with the live value while a thumb is being dragged. Defaults to true. */
+    showTooltip?: boolean;
+    /** Tick marks along the track: an explicit list, or true to draw one at every step. */
+    marks?: RangeSliderMark[] | boolean;
+    /** Prefix for data-testid on the track and thumb(s). */
+    testId?: string;
+    /** Fires once when a drag begins (not on a keyboard change) — pairs with onChangeEnd to tell drag and keyboard commits apart. */
+    onChangeStart?: () => void;
+}
+/** Single-thumb shape: a plain number value, the drop-in replacement for a Chakra Slider. */
+export interface RangeSliderSingleProps extends RangeSliderSharedProps {
+    /** Controlled value. Omit and use defaultValue for uncontrolled use. */
+    value?: number;
+    /** Initial value when uncontrolled. Defaults to min. */
+    defaultValue?: number;
+    /** Fires on every change — during a drag and on each keypress. */
+    onChange?: (value: number) => void;
+    /** Fires once when an interaction commits (pointer release, or immediately on a keypress). */
+    onChangeEnd?: (value: number) => void;
+    /** Accessible name for the thumb. Defaults to label, or "Value". */
+    "aria-label"?: string;
+    /** Minimum allowed gap between thumbs — meaningless with one thumb, so it isn't accepted here. */
+    minDistance?: never;
+}
+/** Dual-thumb shape: a [min, max] tuple value — the generic range slider this component started as. */
+export interface RangeSliderRangeProps extends RangeSliderSharedProps {
+    /** Controlled [min, max] value. Omit and use defaultValue for uncontrolled use. */
+    value?: [number, number];
+    /** Initial [min, max] value when uncontrolled. Defaults to [min, max]. */
+    defaultValue?: [number, number];
+    /** Fires on every change — during a drag and on each keypress. */
+    onChange?: (value: [number, number]) => void;
+    /** Fires once when an interaction commits (pointer release, or immediately on a keypress). */
+    onChangeEnd?: (value: [number, number]) => void;
+    /** Minimum allowed gap between the two thumbs, in value units. Defaults to 0. */
+    minDistance?: number;
+    /** Accessible name for the lower thumb. Defaults to "Minimum". */
+    minThumbLabel?: string;
+    /** Accessible name for the upper thumb. Defaults to "Maximum". */
+    maxThumbLabel?: string;
+}
+/** Discriminated by the shape of value/defaultValue — pass a number for one thumb, a [number, number] tuple for two. */
+export type RangeSliderProps = RangeSliderSingleProps | RangeSliderRangeProps;

package/dist/Components/RangeSlider/RangeSliderProps.js

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

package/dist/Components/RangeSlider/rangeSliderColors.d.ts

@@ -0,0 +1,9 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export type RangeSliderColors = {
+    track: string;
+    fill: string;
+    thumbBg: string;
+    thumbBorder: string;
+};
+/** Fill and thumb border both lift to 3:1 against the neutral track — same recipe as ProgressBar's fill. */
+export declare const resolveRangeSliderColors: (colors: PaletteProps) => RangeSliderColors;

package/dist/Components/RangeSlider/rangeSliderColors.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveRangeSliderColors = void 0;
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+/** Fill and thumb border both lift to 3:1 against the neutral track — same recipe as ProgressBar's fill. */
+const resolveRangeSliderColors = (colors) => {
+    const track = colors.gray[100];
+    const fill = (0, outlineRung_1.liftToContrast)(colors.primary[500], track);
+    return { track, fill, thumbBg: colors.background[50], thumbBorder: fill };
+};
+exports.resolveRangeSliderColors = resolveRangeSliderColors;

package/dist/Components/RangeSlider/rangeSliderMath.d.ts

@@ -0,0 +1,16 @@
+export type SliderScale = "linear" | "log";
+/** Value → track position (0–100); "log" spaces by ratio, so equal drag = equal % change, not equal unit change. */
+export declare function valueToPosition(value: number, min: number, max: number, scale: SliderScale): number;
+/** Track position (0–100) → value. Inverse of valueToPosition for the same min/max/scale. */
+export declare function positionToValue(position: number, min: number, max: number, scale: SliderScale): number;
+/** Snaps onto the step grid anchored at min, then clamps into [min, max]. step <= 0 only clamps. */
+export declare function snapToStep(value: number, min: number, max: number, step: number): number;
+/** Fails loudly on a configuration that can't map to a position — never a silent NaN downstream. */
+export declare function assertRangeBounds(min: number, max: number, scale: SliderScale): void;
+/** Resolves the lower thumb's next value: snapped, then capped below the upper thumb by minDistance. */
+export declare function resolveMinThumbValue(desired: number, min: number, max: number, step: number, otherValue: number, minDistance: number): number;
+/** Resolves the upper thumb's next value: snapped, then floored above the lower thumb by minDistance. */
+export declare function resolveMaxThumbValue(desired: number, min: number, max: number, step: number, otherValue: number, minDistance: number): number;
+export declare function stepMarks(min: number, max: number, step: number): number[];
+/** Arrow/Page key → signed step delta; null for a key this slider doesn't handle. */
+export declare function nudgeDelta(key: string, step: number, bigStep: number, shiftKey: boolean): number | null;

package/dist/Components/RangeSlider/rangeSliderMath.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.valueToPosition = valueToPosition;
+exports.positionToValue = positionToValue;
+exports.snapToStep = snapToStep;
+exports.assertRangeBounds = assertRangeBounds;
+exports.resolveMinThumbValue = resolveMinThumbValue;
+exports.resolveMaxThumbValue = resolveMaxThumbValue;
+exports.stepMarks = stepMarks;
+exports.nudgeDelta = nudgeDelta;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/** Value → track position (0–100); "log" spaces by ratio, so equal drag = equal % change, not equal unit change. */
+function valueToPosition(value, min, max, scale) {
+    const clamped = clamp(value, min, max);
+    if (scale === "log") {
+        return (100 * Math.log(clamped / min)) / Math.log(max / min);
+    }
+    return ((clamped - min) / (max - min)) * 100;
+}
+/** Track position (0–100) → value. Inverse of valueToPosition for the same min/max/scale. */
+function positionToValue(position, min, max, scale) {
+    const clampedPosition = clamp(position, 0, 100);
+    if (scale === "log") {
+        return min * Math.pow(max / min, clampedPosition / 100);
+    }
+    return min + ((max - min) * clampedPosition) / 100;
+}
+/** Snaps onto the step grid anchored at min, then clamps into [min, max]. step <= 0 only clamps. */
+function snapToStep(value, min, max, step) {
+    if (step <= 0)
+        return clamp(value, min, max);
+    const steps = Math.round((value - min) / step);
+    return clamp(min + steps * step, min, max);
+}
+/** Fails loudly on a configuration that can't map to a position — never a silent NaN downstream. */
+function assertRangeBounds(min, max, scale) {
+    if (max <= min) {
+        throw new Error(`RangeSlider: max (${max}) must be greater than min (${min}).`);
+    }
+    if (scale === "log" && min <= 0) {
+        throw new Error(`RangeSlider: min (${min}) must be greater than 0 when scale is "log".`);
+    }
+}
+/** Resolves the lower thumb's next value: snapped, then capped below the upper thumb by minDistance. */
+function resolveMinThumbValue(desired, min, max, step, otherValue, minDistance) {
+    const ceiling = clamp(otherValue - minDistance, min, max);
+    return Math.min(snapToStep(desired, min, max, step), ceiling);
+}
+/** Resolves the upper thumb's next value: snapped, then floored above the lower thumb by minDistance. */
+function resolveMaxThumbValue(desired, min, max, step, otherValue, minDistance) {
+    const floor = clamp(otherValue + minDistance, min, max);
+    return Math.max(snapToStep(desired, min, max, step), floor);
+}
+function stepMarks(min, max, step) {
+    if (step <= 0)
+        return [min, max];
+    const marks = [];
+    for (let v = min; v < max; v += step)
+        marks.push(v);
+    marks.push(max);
+    return marks;
+}
+/** Arrow/Page key → signed step delta; null for a key this slider doesn't handle. */
+function nudgeDelta(key, step, bigStep, shiftKey) {
+    switch (key) {
+        case "ArrowRight":
+        case "ArrowUp":
+            return shiftKey ? bigStep : step;
+        case "ArrowLeft":
+        case "ArrowDown":
+            return shiftKey ? -bigStep : -step;
+        case "PageUp":
+            return bigStep;
+        case "PageDown":
+            return -bigStep;
+        default:
+            return null;
+    }
+}

package/dist/Components/RangeSlider/rangeSliderSize.d.ts

@@ -0,0 +1,7 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+export type RangeSliderSizeSpec = {
+    trackHeight: string;
+    thumbSize: string;
+};
+/** Track thickness and thumb diameter for a size, aligned to the shared CONTROL_SIZES scale. */
+export declare const rangeSliderSize: (size: ControlSize) => RangeSliderSizeSpec;

package/dist/Components/RangeSlider/rangeSliderSize.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rangeSliderSize = void 0;
+const RANGE_SLIDER_SIZES = {
+    xs: { trackHeight: "2px", thumbSize: "0.875rem" },
+    sm: { trackHeight: "3px", thumbSize: "1rem" },
+    md: { trackHeight: "4px", thumbSize: "1.25rem" },
+    lg: { trackHeight: "5px", thumbSize: "1.5rem" },
+};
+/** Track thickness and thumb diameter for a size, aligned to the shared CONTROL_SIZES scale. */
+const rangeSliderSize = (size) => RANGE_SLIDER_SIZES[size];
+exports.rangeSliderSize = rangeSliderSize;

package/dist/Components/Reorder/Reorder.d.ts

@@ -1,7 +1,4 @@
 import { ReorderItem, ReorderListProps } from "./ReorderProps";
-type ExtendedReorderListProps<T extends ReorderItem> = ReorderListProps<T> & {
-    showRemoveIcon?: boolean;
-    onRemove?: (id: string) => void;
-};
-declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, showRemoveIcon, onRemove, }: ExtendedReorderListProps<T>) => JSX.Element;
+/** Horizontal drag-reorderable row of image tiles (wraps @hello-pangea/dnd) — not a substitute for KanbanBoard's column drag/drop. */
+declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, showRemoveIcon, onRemove, }: ReorderListProps<T>) => JSX.Element;
 export default ReorderList;

package/dist/Components/Reorder/Reorder.js

@@ -5,6 +5,7 @@ const react_1 = require("@chakra-ui/react");
 const dnd_1 = require("@hello-pangea/dnd");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Horizontal drag-reorderable row of image tiles (wraps @hello-pangea/dnd) — not a substitute for KanbanBoard's column drag/drop. */
 const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onRemove, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const handleDragEnd = (result) => {
@@ -15,9 +16,9 @@ const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onR
         reordered.splice(result.destination.index, 0, moved);
         onReorder(reordered);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BetweenHorizonalStart, {}), (0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: label })] }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => ((0, jsx_runtime_1.jsxs)(react_1.HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: item.id, index: index, children: (provided) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { borderWidth: "0.063rem", borderRadius: "xl", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BetweenHorizonalStart, {}), (0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "0.06em", textTransform: "uppercase", py: 4, children: label })] }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => ((0, jsx_runtime_1.jsxs)(react_1.HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: item.id, index: index, children: (provided) => {
                                     var _a;
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: colors.boxborder[200], borderRadius: "md", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index}`, boxSize: "7.5rem", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), (0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, color: colors.semanticText.error }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
+                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: colors.boxborder[200], borderRadius: "lg", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index + 1}`, boxSize: "7.5rem", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), (0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, color: colors.semanticText.error }), "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] })) }) })] }));
 };
 exports.default = ReorderList;

package/dist/Components/Reorder/ReorderProps.d.ts

@@ -1,10 +1,16 @@
+/** Minimal shape for a draggable tile — previewUrl renders as the thumbnail image; name is only used as its alt-text fallback (else "item-<1-based position>", matching the ordinal badge). */
 export interface ReorderItem {
     id: string;
     previewUrl: string;
     name?: string;
 }
+/** Props for the horizontal drag-reorderable row of image tiles (ReorderList). */
 export interface ReorderListProps<T extends ReorderItem> {
     label?: string;
     items: T[];
+    /** Fires on every completed drag, even a drop back at the start index — diff the array to detect a real change. */
     onReorder: (items: T[]) => void;
+    /** Renders a per-tile "Remove" button; requires onRemove to do anything. */
+    showRemoveIcon?: boolean;
+    onRemove?: (id: string) => void;
 }

package/dist/Components/RolesPermission/DeleteRoleModal.js

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

@@ -1,4 +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

@@ -8,7 +8,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
@@ -56,6 +56,7 @@ const DEFAULT_KEYS = [
     "import",
     "export",
 ];
+/** Role list + role/permission-matrix form in one component (switch via `view`). */
 const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false, permissions, permissionKeys = DEFAULT_KEYS, roleName, roleNameError, isSuperAdmin, isTrackLocation, isShowRecords, isEditing = false, isSaving = false, onNewRole, onViewRole, onEditRole, onDeleteRole, onBack, onRoleNameChange, onToggleSuperAdmin, onToggleTrackLocation, onToggleShowRecords, onPermissionChange, onSave, onCancelForm, footerSlot, checkIcon, labels: labelOverrides, padding = "16px", }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
@@ -64,8 +65,9 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
     const surface = colors.background[50];
     const muted = colors.textMuted;
     const heading = colors.text[900];
-    const headBg = colors.gray[50];
-    const rowHover = (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface);
+    const rowBackgrounds = (0, rowStates_1.listRowBackgrounds)(colors);
+    const headBg = colors.background[100];
+    const rowHover = rowBackgrounds.active;
     const isViewMode = mode === "view";
     const columnLabels = {
         read: labels.read,
@@ -110,7 +112,7 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
                                                     const isRead = key === "read";
                                                     return ((0, jsx_runtime_1.jsx)(react_2.Td, { textAlign: "center", borderColor: border, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", children: isViewMode ? (isAutomationModule ? (isRead &&
                                                                 perm.automation &&
-                                                                renderGrantedCheck()) : (perm[key] && renderGrantedCheck())) : isAutomationModule && !isRead ? null : ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { size: "sm", isChecked: isAutomationModule
+                                                                renderGrantedCheck()) : (perm[key] && renderGrantedCheck())) : isAutomationModule && !isRead ? null : ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { size: "sm", "aria-label": `${perm.module}: ${columnLabels[key]}`, isChecked: isAutomationModule
                                                                     ? perm.automation
                                                                     : perm[key], isDisabled: isAutomationModule && !isRead, onChange: () => onPermissionChange === null || onPermissionChange === void 0 ? void 0 : onPermissionChange(perm.module, isAutomationModule ? "automation" : key) })) }) }, key));
                                                 })] }, perm.module));

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

@@ -1,6 +1,9 @@
 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: boolean;
     create: boolean;
@@ -10,19 +13,24 @@ export type Permission = {
     export?: boolean;
     automation?: boolean;
 };
+/** One row in the roles list — the same shape is passed back into onEditRole/onViewRole as the selected role. */
 export type RoleData = {
     roleName: string;
     createdBy: string;
     created_at: string;
     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;
     makeSuperAdmin?: boolean;
     automation?: boolean;
     trackLocation?: boolean;
     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
@@ -63,6 +71,7 @@ export type RolesPermissionLabels = {
     deleteRole?: string;
     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;
@@ -75,9 +84,10 @@ export interface RolesPermissionProps {
     permissions: Permission[];
     /** Columns rendered in the matrix. Defaults to all non-automation keys. */
     permissionKeys?: PermissionKey[];
-    /** Form field values (controlled). */
+    /** Form field values — fully controlled, no internal state; edits are invisible without the matching handler below. */
     roleName: string;
     roleNameError?: string;
+    /** Toggling this does not itself grant matrix permissions — it's cosmetic until the consumer applies that logic. */
     isSuperAdmin: boolean;
     isTrackLocation: boolean;
     isShowRecords: boolean;
@@ -89,15 +99,19 @@ export interface RolesPermissionProps {
     onNewRole?: () => void;
     onViewRole?: (role: RoleData) => void;
     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;
     onToggleSuperAdmin?: (checked: boolean) => void;
     onToggleTrackLocation?: (checked: boolean) => void;
     onToggleShowRecords?: (checked: boolean) => void;
+    /** Fires with key "automation" (not "read") for a module named "automation" — see Permission.module. */
     onPermissionChange?: (module: string, key: PermissionKey) => void;
     onSave?: () => void;
+    /** Header back icon renders only when set; the footer Cancel button always renders and no-ops without it. */
     onCancelForm?: () => void;
     /** App-specific sections rendered under the roles list (e.g. ModuleDelete, SignInActivity). */
     footerSlot?: ReactNode;
@@ -108,6 +122,7 @@ export interface RolesPermissionProps {
     /** Outer padding override. Defaults to a compact value. */
     padding?: string;
 }
+/** Plain confirm dialog for one role at a time — no built-in awaiting of onConfirm, so pair it with your own loading/error handling. */
 export interface DeleteRoleModalProps {
     isOpen: boolean;
     onClose: () => void;

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

@@ -0,0 +1,4 @@
+import type { SaveBarProps } from "./SaveBarProps";
+/** Floating dirty-state bar: surfaceRaised card, slides/fades in on mount, unmounts when closed. */
+declare const SaveBar: ({ isOpen, message, onSave, onDiscard, isSaving, isSaveDisabled, saveLabel, discardLabel, position, }: 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", }) => {
+    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, { 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;