pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

package/dist/esm/Components/RangeSlider/RangeSlider.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { resolveRangeSliderColors } from "./rangeSliderColors.js";
+import { rangeSliderSize } from "./rangeSliderSize.js";
+import { assertRangeBounds, nudgeDelta, positionToValue, resolveMaxThumbValue, resolveMinThumbValue, snapToStep, stepMarks, valueToPosition, } from "./rangeSliderMath.js";
+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;
+    assertRangeBounds(min, max, scale);
+    const isRange = isRangeValue((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : [min, max]);
+    const { colors } = useCustomTheme();
+    const { track, fill, thumbBg, thumbBorder } = resolveRangeSliderColors(colors);
+    const { trackHeight, thumbSize } = rangeSliderSize(size);
+    const focusRing = focusVisibleStyles(colors);
+    const reactId = useId();
+    const trackRef = useRef(null);
+    const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : (isRange ? [min, max] : min));
+    const [dragging, setDragging] = useState(null);
+    const [dragValue, setDragValue] = 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 = 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 = 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 = positionToValue(positionFromClientX(e.clientX), min, max, scale);
+        const next = isRange
+            ? thumb === "min"
+                ? [resolveMinThumbValue(desired, min, max, step, currentMax, minDistance), currentMax]
+                : [currentMin, resolveMaxThumbValue(desired, min, max, step, currentMin, minDistance)]
+            : 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]
+                    : [resolveMinThumbValue(currentMax - minDistance, min, max, step, currentMax, minDistance), currentMax]
+                : e.key === "End"
+                    ? [currentMin, max]
+                    : [currentMin, resolveMaxThumbValue(currentMin + minDistance, min, max, step, currentMin, minDistance)];
+            commit(next, true);
+            return;
+        }
+        const delta = nudgeDelta(e.key, step, step * BIG_STEP_MULTIPLIER, e.shiftKey);
+        if (delta === null)
+            return;
+        e.preventDefault();
+        const next = thumb === "min"
+            ? [resolveMinThumbValue(currentMin + delta, min, max, step, currentMax, minDistance), currentMax]
+            : [currentMin, 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 = nudgeDelta(e.key, step, step * BIG_STEP_MULTIPLIER, e.shiftKey);
+        if (delta === null)
+            return;
+        e.preventDefault();
+        commit(snapToStep(currentSingle + delta, min, max, step), true);
+    };
+    const nudge = (thumb) => (e) => {
+        if (isDisabled)
+            return;
+        if (isRange)
+            nudgeRange(thumb, e);
+        else
+            nudgeSingle(e);
+    };
+    const minPos = valueToPosition(isRange ? currentMin : min, min, max, scale);
+    const maxPos = 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
+            ? stepMarks(min, max, step).map((v) => ({ value: v }))
+            : [];
+    const singleThumbLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Value";
+    return (_jsxs(Box, { "data-testid": testId, opacity: opacity, children: [label ? (_jsx(Text, { fontSize: "xs", fontWeight: "semibold", color: colors.textMuted, mb: 2, children: label })) : null, showValueLabels ? (_jsxs(Flex, { justify: isRange ? "space-between" : "flex-end", mb: 1, children: [isRange ? (_jsx(Text, { fontSize: "xs", fontWeight: "semibold", color: colors.accentText, children: formatValue(currentMin) })) : null, _jsx(Text, { fontSize: "xs", fontWeight: "semibold", color: colors.accentText, children: formatValue(isRange ? currentMax : currentSingle) })] })) : null, _jsx(Box, { position: "relative", pt: 5, pb: resolvedMarks.length ? 6 : 1, px: 1, children: _jsxs(Box, { ref: trackRef, position: "relative", h: trackHeight, borderRadius: "full", bg: track, children: [_jsx(Box, { position: "absolute", top: 0, h: trackHeight, borderRadius: "full", bg: fill, left: `${minPos}%`, width: `${Math.max(maxPos - minPos, 0)}%` }), resolvedMarks.map((mark) => {
+                            const markPos = valueToPosition(mark.value, min, max, scale);
+                            return (_jsx(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 ? (_jsx(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 ? (_jsx(ToolTip, { label: formatValue(currentMin), placement: "top", isOpen: showTooltip && dragging === "min", hasArrow: true, children: _jsx(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, _jsx(ToolTip, { label: formatValue(isRange ? currentMax : currentSingle), placement: "top", isOpen: showTooltip && dragging === (isRange ? "max" : "min"), hasArrow: true, children: _jsx(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"}` }) })] }) })] }));
+}
+export default RangeSlider;

package/dist/esm/Components/RangeSlider/RangeSliderProps.js

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

package/dist/esm/Components/RangeSlider/rangeSliderColors.js

@@ -0,0 +1,7 @@
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+/** Fill and thumb border both lift to 3:1 against the neutral track — same recipe as ProgressBar's fill. */
+export const resolveRangeSliderColors = (colors) => {
+    const track = colors.gray[100];
+    const fill = liftToContrast(colors.primary[500], track);
+    return { track, fill, thumbBg: colors.background[50], thumbBorder: fill };
+};

package/dist/esm/Components/RangeSlider/rangeSliderMath.js

@@ -0,0 +1,69 @@
+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. */
+export 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. */
+export 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. */
+export 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. */
+export 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. */
+export 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. */
+export function resolveMaxThumbValue(desired, min, max, step, otherValue, minDistance) {
+    const floor = clamp(otherValue + minDistance, min, max);
+    return Math.max(snapToStep(desired, min, max, step), floor);
+}
+export 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. */
+export 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/esm/Components/RangeSlider/rangeSliderSize.js

@@ -0,0 +1,8 @@
+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. */
+export const rangeSliderSize = (size) => RANGE_SLIDER_SIZES[size];

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

@@ -14,9 +14,9 @@ const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onR
         reordered.splice(result.destination.index, 0, moved);
         onReorder(reordered);
     };
-    return (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[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) => {
+    return (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "xl", px: 3, py: 2, bg: colors.background[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: "0.06em", 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;
-                                    return (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: colors.boxborder[200], borderRadius: "md", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: colors.textMuted }), "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: 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 (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: colors.boxborder[200], borderRadius: "lg", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index + 1}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: colors.textMuted }), "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: 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] })) }) })] }));
 };
 export default ReorderList;

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

@@ -1,14 +1,12 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react";
+import { Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
-import Button from "../Button/Button.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import ConfirmDialog from "../ConfirmDialog/ConfirmDialog.js";
 const DeleteRoleModal = ({ isOpen, onClose, onConfirm, isLoading, labels, }) => {
     const { colors } = useCustomTheme();
-    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = resolveStatusTone(colors.semantic.error, mode);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, 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: colors.textMuted, 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 }) })] })] })] })] }));
+    const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    return (_jsx(ConfirmDialog, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.deleteRole, iconBg: errorTone.bg, iconColor: errorTone.fg, cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: _jsx(Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: _jsx(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteRoleConfirm }) }));
 };
 export default DeleteRoleModal;

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

@@ -107,7 +107,7 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
                                                     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
+                                                                renderGrantedCheck()) : (perm[key] && renderGrantedCheck())) : isAutomationModule && !isRead ? null : (_jsx(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/esm/Components/SaveBar/SaveBar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+/** 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 } = useCustomTheme();
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        setIsVisible(isOpen);
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    return (_jsx(Box, { position: position, bottom: 0, left: 0, right: 0, zIndex: 1, px: { base: 4, md: 6 }, pb: { base: 4, md: 5 }, pointerEvents: "none", children: _jsxs(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: transitionFor(["opacity", "transform"]), sx: reducedMotionSx(), children: [_jsx(Text, { role: "status", fontSize: "sm", color: colors.textMuted, children: message }), _jsxs(Flex, { gap: 2, children: [_jsx(Button, { variant: "ghost", colorScheme: "gray", label: discardLabel, isDisabled: isSaving, onClick: onDiscard }), _jsx(Button, { variant: "solid", colorScheme: "primary", label: saveLabel, isLoading: isSaving, isDisabled: isSaveDisabled, onClick: onSave })] })] }) }));
+};
+export default SaveBar;

package/dist/esm/Components/SaveBar/SaveBarProps.js

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

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

@@ -6,6 +6,9 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
 import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
+import { transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 /** Visibility depends on the wrapped content's direct parent actually scrolling — see `children`. */
 const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300, duration = 600, useWindow = false, bottom = "2rem", right = "2rem", }) => {
     const [visible, setVisible] = useState(false);
@@ -59,11 +62,11 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
         };
         // 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[solidFillRung(theme.colors.primary, theme.colors.white)], color: labelOnFill(theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
+    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[solidFillRung(theme.colors.primary, theme.colors.white)], color: labelOnFill(theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: transitionFor(["opacity", "transform", "box-shadow", "background-color", "color"], "base"), _hover: {
                         bg: theme.colors.primary[600],
                         color: labelOnFill(theme.colors.primary[600], theme.colors.white, theme.colors.black),
                         transform: "translateY(-2px) scale(1.05)",
                         boxShadow: "lg",
-                    }, _active: { transform: "scale(0.95)" }, children: _jsx(ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));
+                    }, _active: { transform: "scale(0.95)" }, sx: { ...focusVisibleStyles(theme.colors), ...reducedMotionSx({ transform: "none" }) }, children: _jsx(ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));
 };
 export default ScrollToTop;

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

@@ -1,30 +1,49 @@
 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 { forwardRef, useEffect, useRef } from "react";
+import { Input, InputGroup, InputLeftElement, InputRightElement, Icon, IconButton, Kbd, FormControl, useMergeRefs, } from "@chakra-ui/react";
 import { Search as SearchIconComponent, X } from "lucide-react";
 import { TextLabel } from "../Common/FormLabel.js";
-import HelperText from "../Common/HelperText.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { controlSizeStyles, fieldControlStyles } from "../Common/fieldStyles.js";
+import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-/** Plain filter/search input, no options list — default shortcut registers a page-global Ctrl+K listener that can't be disabled. */
-export default function Search({ placeholder = "Search...", onSearch, onclose, shortcut = "Ctrl+K", query, error, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, }) {
+const HINT_WIDTH = "2.75rem";
+/** Filter input with a clear button and an optional page-global Ctrl+K hotkey; no options list. */
+const Search = forwardRef(function Search({ placeholder = "Search...", onSearch, onClear, onclose, shortcut = "Ctrl+K", showShortcutHint = true, query, size = DEFAULT_CONTROL_SIZE, name, isDisabled = false, error = false, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, "aria-label": ariaLabelProp, }, ref) {
     const theme = useCustomTheme();
     const inputRef = useRef(null);
+    const mergedRef = useMergeRefs(inputRef, ref);
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const accessibleName = ariaLabelProp !== null && ariaLabelProp !== void 0 ? ariaLabelProp : (label ? undefined : placeholder);
+    const spec = CONTROL_SIZES[size];
+    const handleClear = onClear !== null && onClear !== void 0 ? onClear : onclose;
+    const showClear = Boolean(query) && Boolean(handleClear) && !isDisabled;
+    const showHint = Boolean(shortcut) && showShortcutHint;
+    const shortcutKey = shortcut ? shortcut.split("+")[1].toLowerCase() : undefined;
     useEffect(() => {
+        if (!shortcutKey)
+            return;
         const handleKeyDown = (event) => {
             var _a;
-            if (shortcut &&
-                event.ctrlKey &&
-                event.key === shortcut.split("+")[1].toLowerCase()) {
+            if (event.ctrlKey && event.key.toLowerCase() === shortcutKey) {
                 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.textMuted }) }), _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.textMuted, boxSize: 5, cursor: "pointer", onClick: onclose })), shortcut && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, px: "2", py: "0.5", borderRadius: "md", bg: theme.colors.backgroundColor.subtle, children: shortcut }))] })] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
-}
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [shortcutKey]);
+    const clearSize = `calc(${spec.height} - 0.5rem)`;
+    const rightPadding = `calc(${spec.paddingX} + ${showClear ? clearSize : "0rem"} + ${showHint ? HINT_WIDTH : "0rem"})`;
+    return (_jsxs(FormControl, { isInvalid: error, isDisabled: isDisabled, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { w: "100%", children: [_jsx(InputLeftElement, { pointerEvents: "none", h: spec.height, w: spec.height, children: _jsx(Icon, { as: SearchIconComponent, color: theme.colors.textMuted, boxSize: `${spec.iconSize}px` }) }), _jsx(Input, { ref: mergedRef, ...ids.controlProps, type: "text", name: name, value: query, onChange: onSearch, placeholder: placeholder, variant: "outline", isInvalid: error, isRequired: isRequired, "aria-label": accessibleName, "aria-keyshortcuts": shortcut ? "Control+K" : undefined, sx: {
+                            ...fieldControlStyles(theme.colors),
+                            ...controlSizeStyles(size),
+                            ps: spec.height,
+                            pe: rightPadding,
+                            ...reducedMotionSx(),
+                        } }), (showClear || showHint) && (_jsxs(InputRightElement, { h: spec.height, w: "auto", pe: spec.paddingX, gap: 1, children: [showClear && (_jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(X, { size: spec.iconSize }), variant: "ghost", size: "xs", h: clearSize, minW: clearSize, color: theme.colors.textMuted, onClick: handleClear, sx: focusVisibleStyles(theme.colors) })), showHint && (_jsx(Kbd, { "aria-hidden": true, fontSize: "0.6875rem", fontWeight: 500, color: theme.colors.textMuted, bg: theme.colors.backgroundColor.subtle, borderColor: theme.colors.boxborder[200], whiteSpace: "nowrap", children: shortcut }))] }))] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+export default Search;