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

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.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export interface ScrollToTopProps {
-    /** Content to wrap. The button watches the nearest scrollable ancestor. */
+    /** Content to wrap. Watches this element's direct parentElement only — not a scroll-search up the tree. */
     children: React.ReactNode;
     /** Tooltip label on the button. */
     tooltipLabel?: string;
@@ -8,12 +8,13 @@ export interface ScrollToTopProps {
     threshold?: number;
     /** Smooth-scroll duration in ms. */
     duration?: number;
-    /** Pin to a window-level scroll instead of the wrapped parent. */
+    /** Pin to window-level scroll — also the fix when the real scroll container isn't the direct parent. */
     useWindow?: boolean;
     /** Distance from the bottom edge. */
     bottom?: string;
     /** Distance from the right edge. */
     right?: string;
 }
+/** Visibility depends on the wrapped content's direct parent actually scrolling — see `children`. */
 declare const ScrollToTop: React.FC<ScrollToTopProps>;
 export default ScrollToTop;

package/dist/Components/ScrollToTop/ScrollToTop.js

@@ -10,6 +10,11 @@ const lucide_react_1 = require("lucide-react");
 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);
     const anchorRef = (0, react_1.useRef)(null);
@@ -62,10 +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[500], color: theme.colors.onPrimary, 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/ScrollbarBox/ScrollbarBox.d.ts

@@ -2,12 +2,19 @@ import React, { ReactNode } from "react";
 import { ScrollbarVariant } from "../../Theme/tokens/builders/scrollbar";
 export interface ScrollbarBoxProps {
     children: ReactNode;
+    /** Fixed box height; omit to let content size the box instead of scrolling it. */
     height?: string;
+    /** Caps growth and enables scrolling; without it the box grows unbounded. */
     maxHeight?: string;
+    /** No default (unlike overflowY) — falls through to the browser's normal overflow. */
     overflowX?: string;
+    /** Defaults to "auto" — scrolls only once content exceeds height/maxHeight. */
     overflowY?: string;
+    /** Picks the scrollbar chrome from scrollbarStyles; see scrollbar.ts for what each looks like. */
     variant?: ScrollbarVariant;
+    /** Forwarded to the underlying Box so a consumer can read/scroll the container from outside. */
     scrollContainerRef?: React.Ref<HTMLDivElement> | null;
 }
+/** Scrollable Box with themed scrollbar chrome (scrollbarStyles) applied via variant. */
 declare const ScrollbarBox: React.FC<ScrollbarBoxProps>;
 export default ScrollbarBox;

package/dist/Components/ScrollbarBox/ScrollbarBox.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+/** Scrollable Box with themed scrollbar chrome (scrollbarStyles) applied via variant. */
 const ScrollbarBox = ({ children, height, maxHeight, overflowX, overflowY = "auto", variant = "default", scrollContainerRef, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { ref: scrollContainerRef, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...(0, scrollbar_1.scrollbarStyles)(colors, variant) }, children: children }));

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

@@ -1,2 +1,4 @@
 import { SearchProps } from "./SearchProps";
-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,33 +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");
-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.gray[500] }) }), (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.gray[500], boxSize: 5, cursor: "pointer", onClick: onclose })), shortcut && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], px: "2", py: "0.5", borderRadius: "md", bg: theme.colors.gray[100], 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,15 +1,39 @@
+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;
-    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 28 · sm 35 · 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,3 +1,5 @@
 import { SearchSelectProps } from "./SearchSelectProps";
-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;
+/** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
+/** 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;