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

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,9 +1,4 @@
 import { ReorderItem, ReorderListProps } from "./ReorderProps";
-/** The real prop surface — showRemoveIcon/onRemove work but are missing from the exported ReorderListProps in ReorderProps.tsx. */
-type ExtendedReorderListProps<T extends ReorderItem> = ReorderListProps<T> & {
-    showRemoveIcon?: boolean;
-    onRemove?: (id: string) => void;
-};
 /** 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, }: ExtendedReorderListProps<T>) => JSX.Element;
+declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, showRemoveIcon, onRemove, }: ReorderListProps<T>) => JSX.Element;
 export default ReorderList;

package/dist/Components/Reorder/Reorder.js

@@ -16,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,13 +1,16 @@
-/** Minimal shape for a draggable tile — previewUrl renders as the thumbnail image; name is only used as its alt-text fallback. */
+/** 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;
 }
-/** Incomplete — the shipped Reorder component also reads showRemoveIcon/onRemove, which aren't declared on this exported type. */
+/** 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.js

@@ -112,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/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;

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+/** Props for the floating unsaved-changes bar; mount it once and drive it with `isOpen`. */
+export interface SaveBarProps {
+    /** Shows the bar and animates it in; unmounts (not just hides) it when false. */
+    isOpen: boolean;
+    /** Status text, announced via role="status"; defaults to "You have unsaved changes". */
+    message?: ReactNode;
+    /** Called when Save is clicked. */
+    onSave: () => void;
+    /** Called when Discard is clicked. */
+    onDiscard: () => void;
+    /** Shows a spinner on Save and disables Discard. */
+    isSaving?: boolean;
+    /** Keeps Save disabled, e.g. while a field is invalid. */
+    isSaveDisabled?: boolean;
+    /** Save button label; defaults to "Save changes". */
+    saveLabel?: string;
+    /** Discard button label; defaults to "Discard". */
+    discardLabel?: string;
+    /** CSS position for the bar; defaults to "sticky". */
+    position?: "sticky" | "fixed";
+}

package/dist/Components/SaveBar/SaveBarProps.js

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

package/dist/Components/ScrollToTop/ScrollToTop.js

@@ -11,6 +11,9 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const primitives_1 = require("../../Theme/tokens/primitives");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
 /** Visibility depends on the wrapped content's direct parent actually scrolling — see `children`. */
 const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300, duration = 600, useWindow = false, bottom = "2rem", right = "2rem", }) => {
     const [visible, setVisible] = (0, react_1.useState)(false);
@@ -64,11 +67,11 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [useWindow, threshold]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: anchorRef, position: "relative", children: [children, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, placement: "left", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], color: (0, filledSurface_1.labelOnFill)(theme.colors.primary[(0, filledSurface_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: anchorRef, position: "relative", children: [children, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, placement: "left", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], color: (0, filledSurface_1.labelOnFill)(theme.colors.primary[(0, filledSurface_1.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: (0, primitives_1.transitionFor)(["opacity", "transform", "box-shadow", "background-color", "color"], "base"), _hover: {
                         bg: theme.colors.primary[600],
                         color: (0, filledSurface_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));
+                    }, _active: { transform: "scale(0.95)" }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(theme.colors), ...(0, motion_1.reducedMotionSx)({ transform: "none" }) }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));
 };
 exports.default = ScrollToTop;

package/dist/Components/Search/Search.d.ts

@@ -1,3 +1,4 @@
 import { SearchProps } from "./SearchProps";
-/** 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, onSearch, onclose, shortcut, query, error, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, }: SearchProps): import("react/jsx-runtime").JSX.Element;
+/** Filter input with a clear button and an optional page-global Ctrl+K hotkey; no options list. */
+declare const Search: import("react").ForwardRefExoticComponent<SearchProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Search;

package/dist/Components/Search/Search.js

@@ -3,34 +3,52 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Search;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const FormLabel_1 = require("../Common/FormLabel");
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const motion_1 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-/** Plain filter/search input, no options list — default shortcut registers a page-global Ctrl+K listener that can't be disabled. */
-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 = (0, react_1.forwardRef)(function Search({ placeholder = "Search...", onSearch, onClear, onclose, shortcut = "Ctrl+K", showShortcutHint = true, query, size = controlSizes_1.DEFAULT_CONTROL_SIZE, name, isDisabled = false, error = false, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, "aria-label": ariaLabelProp, }, ref) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const inputRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_2.useMergeRefs)(inputRef, ref);
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const accessibleName = ariaLabelProp !== null && ariaLabelProp !== void 0 ? ariaLabelProp : (label ? undefined : placeholder);
+    const spec = controlSizes_1.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;
     (0, react_1.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 ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isInvalid: !!error, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, type: "text", value: query, onChange: onSearch, placeholder: placeholder, variant: "outline", isInvalid: error }), (0, jsx_runtime_1.jsxs)(react_2.InputRightElement, { w: "auto", pr: "3", display: "flex", alignItems: "center" // ✅ centers vertically
-                        , gap: "2", children: [query && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.X, color: theme.colors.textMuted, boxSize: 5, cursor: "pointer", onClick: onclose })), shortcut && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, px: "2", py: "0.5", borderRadius: "md", bg: theme.colors.backgroundColor.subtle, children: shortcut }))] })] }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { 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 ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, isDisabled: isDisabled, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", h: spec.height, w: spec.height, children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, color: theme.colors.textMuted, boxSize: `${spec.iconSize}px` }) }), (0, jsx_runtime_1.jsx)(react_2.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: {
+                            ...(0, fieldStyles_1.fieldControlStyles)(theme.colors),
+                            ...(0, fieldStyles_1.controlSizeStyles)(size),
+                            ps: spec.height,
+                            pe: rightPadding,
+                            ...(0, motion_1.reducedMotionSx)(),
+                        } }), (showClear || showHint) && ((0, jsx_runtime_1.jsxs)(react_2.InputRightElement, { h: spec.height, w: "auto", pe: spec.paddingX, gap: 1, children: [showClear && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear search", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: spec.iconSize }), variant: "ghost", size: "xs", h: clearSize, minW: clearSize, color: theme.colors.textMuted, onClick: handleClear, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) })), showHint && ((0, jsx_runtime_1.jsx)(react_2.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 }))] }))] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+exports.default = Search;

package/dist/Components/Search/SearchProps.d.ts

@@ -1,17 +1,39 @@
-/** Fully controlled — query and clearing it are owned by the caller; onclose only fires the callback, it doesn't clear query itself. */
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** Fully controlled search input: the caller owns `query` and clears it in `onClear`. */
 export type SearchProps = {
+    /** Defaults to `"Search..."`. */
     placeholder?: string;
+    /** Fires on every keystroke with the raw change event; no debounce. */
     onSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Only "Ctrl+K" is valid, and the type has no "off" value — every mounted Search grabs this hotkey globally. */
-    shortcut?: "Ctrl+K";
+    /** Page-global hotkey that focuses this input; `false` removes both the listener and the hint. */
+    shortcut?: "Ctrl+K" | false;
+    /** Hides the shortcut hint while keeping the hotkey. Defaults to true. */
+    showShortcutHint?: boolean;
+    /** Controlled value; the clear button only shows while it is non-empty. */
     query?: string;
-    onclose: () => void;
+    /** Enables the clear button; the caller must reset `query` itself. */
+    onClear?: () => void;
+    /** @deprecated Use `onClear` — same behaviour, consistent casing. */
+    onclose?: () => void;
+    /** Height on the shared control scale (xs 24 · sm 32 · md 40 · lg 48px). Defaults to `sm`. */
+    size?: ControlSize;
+    name?: string;
+    /** Disables the input and hides the clear button; the hotkey still focuses it. */
+    isDisabled?: boolean;
+    /** Marks the input invalid (error border + `aria-invalid`) and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Shown while `error` is true. Omitting it renders no message and still hides `helperText`. */
     errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
     helperText?: string;
     label?: string;
     id?: string;
+    /** Accessible name when there's no `label`. Defaults to `placeholder` — a Search must always have one; pass this to override or to name it over an explicit `label`. */
+    "aria-label"?: string;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
+    /** Shows the label asterisk and sets native `required` on the input. */
     isRequired?: boolean;
 };

package/dist/Components/SearchSelect/SearchSelect.d.ts

@@ -1,4 +1,5 @@
 import { SearchSelectProps } from "./SearchSelectProps";
 /** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
-declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon, }: SearchSelectProps) => import("react/jsx-runtime").JSX.Element;
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+declare const SearchSelect: ({ id, label, options, onChange, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, isDisabled, chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon, "aria-label": ariaLabel, }: SearchSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SearchSelect;