npm - @pk-design/react-tailwind - Versions diffs - 1.5.4 → 1.7.0 - Mend

@pk-design/react-tailwind 1.5.4 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (485) hide show

package/dist/cjs/components/MobilePicker/MobilePicker.js ADDED Viewed

@@ -0,0 +1,368 @@
+'use strict';
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@headlessui/react');
+var buildClassname = require('../../utils/build-classname.js');
+var Input = require('../Input/Input.js');
+var Badge = require('../Badge/Badge.js');
+var Button = require('../Button/Button.js');
+var Label = require('../Label/Label.js');
+var index = require('../Loader/index.js');
+var TextContent = require('../TextContent/TextContent.js');
+var useDebounce = require('../../hooks/use-debounce.js');
+var Check = require('../Icons/Check.svg.js');
+var ChevronDown = require('../Icons/ChevronDown.svg.js');
+var CirclePlus = require('../Icons/CirclePlus.svg.js');
+var Search = require('../Icons/Search.svg.js');
+var X = require('../Icons/X.svg.js');
+const sizeConfigMap = {
+    sm: {
+        input: 'h-8 text-xs px-2.5',
+        icon: 'size-3.5',
+        badgeSize: 'sm',
+        group: 'w-8',
+    },
+    md: {
+        input: 'h-10 text-sm px-3',
+        icon: 'size-4',
+        badgeSize: 'md',
+        group: 'w-10',
+    },
+    lg: {
+        input: 'h-12 text-base px-3.5',
+        icon: 'size-5',
+        badgeSize: 'md',
+        group: 'w-12',
+    },
+};
+function MobilePicker(props) {
+    const { options = [], groups, selected = null, onChange = () => { }, size = 'md', labelKey = 'label', valueKey = 'value', id, name, label, labelWrapperClass, labelClass, labelHint, title, description, placeholder = 'Choose an option...', disabled = false, multiple = false, maxSelection, showSelectAll = false, confirmText = 'Apply Selection', searchable = true, searchPlaceholder = 'Search options...', async = false, onSearch, loading = false, typeToSearchText = 'Type to search options...', filterOption, quickOptions, quickOptionsTitle = 'Quick Picks', allowClear = false, allowFreeText = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, leftGroup, error, showErrorMessage = true, helperText, noOptionsText = 'No options available', renderOption, containerClass, sheetClass, } = props;
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [query, setQuery] = React.useState('');
+    const debouncedQuery = useDebounce.useDebounce(query, 400);
+    const [optionsLoading, setOptionsLoading] = React.useState(false);
+    const [draftSelected, setDraftSelected] = React.useState(selected);
+    const [viewportHeight, setViewportHeight] = React.useState(null);
+    React.useEffect(() => {
+        if (!isOpen) {
+            setViewportHeight(null);
+            return;
+        }
+        const updateHeight = () => {
+            if (typeof window !== 'undefined' && window.visualViewport) {
+                setViewportHeight(window.visualViewport.height);
+            }
+        };
+        updateHeight();
+        const vv = typeof window !== 'undefined' ? window.visualViewport : null;
+        vv === null || vv === void 0 ? void 0 : vv.addEventListener('resize', updateHeight);
+        vv === null || vv === void 0 ? void 0 : vv.addEventListener('scroll', updateHeight);
+        return () => {
+            vv === null || vv === void 0 ? void 0 : vv.removeEventListener('resize', updateHeight);
+            vv === null || vv === void 0 ? void 0 : vv.removeEventListener('scroll', updateHeight);
+        };
+    }, [isOpen]);
+    const currentSize = sizeConfigMap[size] || sizeConfigMap.md;
+    const hasError = Boolean(error);
+    const isAsyncLoading = loading || optionsLoading;
+    const baseInputClass = React.useMemo(() => Input.buildInputClass('', { disabled, hasError, size }), [disabled, hasError, size]);
+    const onSearchRef = React.useRef(onSearch);
+    React.useEffect(() => {
+        onSearchRef.current = onSearch;
+    }, [onSearch]);
+    const handleAsyncSearch = React.useCallback(async (searchString) => {
+        var _a;
+        try {
+            setOptionsLoading(true);
+            await ((_a = onSearchRef.current) === null || _a === void 0 ? void 0 : _a.call(onSearchRef, searchString));
+        }
+        catch (err) {
+            console.error('Error loading options:', err);
+        }
+        finally {
+            setOptionsLoading(false);
+        }
+    }, []);
+    React.useEffect(() => {
+        if (isOpen && async) {
+            handleAsyncSearch(debouncedQuery);
+        }
+    }, [isOpen, async, debouncedQuery, handleAsyncSearch]);
+    const getDisplayValue = React.useCallback((opt) => {
+        var _a, _b;
+        if (typeof opt === 'string')
+            return opt;
+        return (_b = (_a = opt === null || opt === void 0 ? void 0 : opt[labelKey]) !== null && _a !== void 0 ? _a : opt === null || opt === void 0 ? void 0 : opt[valueKey]) !== null && _b !== void 0 ? _b : String(opt);
+    }, [labelKey, valueKey]);
+    const getValue = React.useCallback((opt) => {
+        var _a, _b;
+        if (typeof opt === 'string')
+            return opt;
+        return (_b = (_a = opt === null || opt === void 0 ? void 0 : opt[valueKey]) !== null && _a !== void 0 ? _a : opt === null || opt === void 0 ? void 0 : opt[labelKey]) !== null && _b !== void 0 ? _b : String(opt);
+    }, [valueKey, labelKey]);
+    const normalizedSelected = React.useMemo(() => {
+        if (multiple) {
+            if (Array.isArray(selected))
+                return selected;
+            if (selected !== null && selected !== undefined)
+                return [selected];
+            return [];
+        }
+        else {
+            if (Array.isArray(selected))
+                return selected.length > 0 ? selected[0] : null;
+            return selected !== null && selected !== void 0 ? selected : null;
+        }
+    }, [multiple, selected]);
+    const normalizedDraft = React.useMemo(() => {
+        if (multiple) {
+            if (Array.isArray(draftSelected))
+                return draftSelected;
+            if (draftSelected !== null && draftSelected !== undefined)
+                return [draftSelected];
+            return [];
+        }
+        else {
+            if (Array.isArray(draftSelected))
+                return draftSelected.length > 0 ? draftSelected[0] : null;
+            return draftSelected !== null && draftSelected !== void 0 ? draftSelected : null;
+        }
+    }, [multiple, draftSelected]);
+    const rawAllOptions = React.useMemo(() => {
+        if (groups === null || groups === void 0 ? void 0 : groups.length) {
+            return groups.flatMap((g) => g.options);
+        }
+        return options !== null && options !== void 0 ? options : [];
+    }, [groups, options]);
+    const allOptions = React.useMemo(() => {
+        const list = [...rawAllOptions];
+        const selectedList = Array.isArray(normalizedDraft)
+            ? normalizedDraft
+            : normalizedDraft
+                ? [normalizedDraft]
+                : [];
+        for (const sel of selectedList) {
+            if (sel !== null && sel !== undefined) {
+                const selVal = getValue(sel);
+                const exists = list.some((item) => getValue(item) === selVal);
+                if (!exists) {
+                    list.unshift(sel);
+                }
+            }
+        }
+        return list;
+    }, [rawAllOptions, normalizedDraft, getValue]);
+    React.useEffect(() => {
+        if (isOpen) {
+            setDraftSelected(normalizedSelected);
+            setQuery('');
+        }
+    }, [isOpen, normalizedSelected]);
+    const defaultFilter = React.useCallback((opt, q) => {
+        var _a;
+        if (!q.trim())
+            return true;
+        const searchTarget = ((_a = getDisplayValue(opt)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+        return searchTarget.includes(q.trim().toLowerCase());
+    }, [getDisplayValue]);
+    const activeFilter = filterOption || defaultFilter;
+    const filteredOptions = React.useMemo(() => {
+        if (async)
+            return allOptions;
+        if (!query.trim())
+            return allOptions;
+        return allOptions.filter((opt) => activeFilter(opt, query));
+    }, [allOptions, query, async, activeFilter]);
+    const filteredGroups = React.useMemo(() => {
+        if (!(groups === null || groups === void 0 ? void 0 : groups.length))
+            return null;
+        if (async)
+            return groups;
+        if (!query.trim())
+            return groups;
+        return groups
+            .map((g) => ({
+            ...g,
+            options: g.options.filter((opt) => activeFilter(opt, query)),
+        }))
+            .filter((g) => g.options.length > 0);
+    }, [groups, query, async, activeFilter]);
+    const createFreeTextOption = React.useCallback((text) => {
+        const sample = allOptions[0] || (Array.isArray(selected) ? selected[0] : selected);
+        if (typeof sample === 'string' ||
+            (!sample && typeof labelKey === 'string' && labelKey === 'label')) {
+            return text;
+        }
+        return {
+            [labelKey]: text,
+            [valueKey]: text,
+        };
+    }, [allOptions, selected, labelKey, valueKey]);
+    const handleToggleOption = (option) => {
+        const optVal = getValue(option);
+        if (multiple) {
+            const current = Array.isArray(normalizedDraft) ? [...normalizedDraft] : [];
+            const index = current.findIndex((item) => getValue(item) === optVal);
+            if (index > -1) {
+                current.splice(index, 1);
+                setDraftSelected(current);
+            }
+            else {
+                if (maxSelection && current.length >= maxSelection)
+                    return;
+                current.push(option);
+                setDraftSelected(current);
+            }
+        }
+        else {
+            setDraftSelected(option);
+            onChange(option);
+            setIsOpen(false);
+        }
+    };
+    const handleCommitFreeText = (text) => {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return;
+        const existing = allOptions.find((opt) => getDisplayValue(opt).toLowerCase() === trimmed.toLowerCase());
+        const optionToCommit = existing || createFreeTextOption(trimmed);
+        if (multiple) {
+            const current = Array.isArray(normalizedDraft) ? [...normalizedDraft] : [];
+            const already = current.some((item) => getDisplayValue(item).toLowerCase() === trimmed.toLowerCase());
+            if (!already) {
+                if (maxSelection && current.length >= maxSelection)
+                    return;
+                current.push(optionToCommit);
+                setDraftSelected(current);
+            }
+            setQuery('');
+        }
+        else {
+            setDraftSelected(optionToCommit);
+            onChange(optionToCommit);
+            setIsOpen(false);
+        }
+    };
+    const handleAddAndSelect = async (valueToAdd) => {
+        try {
+            const result = await onAdd(valueToAdd);
+            const optionToCommit = (result || valueToAdd);
+            if (multiple) {
+                const current = Array.isArray(normalizedDraft) ? [...normalizedDraft] : [];
+                current.push(optionToCommit);
+                setDraftSelected(current);
+                setQuery('');
+            }
+            else {
+                setDraftSelected(optionToCommit);
+                onChange(optionToCommit);
+                setIsOpen(false);
+            }
+        }
+        catch (err) {
+            console.error('MobilePicker onAdd error:', err);
+        }
+    };
+    const isAllSelected = React.useMemo(() => {
+        if (!multiple || !Array.isArray(normalizedDraft) || !allOptions.length)
+            return false;
+        return allOptions.length === normalizedDraft.length;
+    }, [multiple, normalizedDraft, allOptions]);
+    const handleToggleSelectAll = () => {
+        if (isAllSelected) {
+            setDraftSelected([]);
+        }
+        else {
+            setDraftSelected(allOptions);
+        }
+    };
+    const handleConfirmMultiSelect = () => {
+        onChange(normalizedDraft);
+        setIsOpen(false);
+    };
+    const handleClearSingleSelect = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDraftSelected(multiple ? [] : null);
+        onChange(multiple ? [] : null);
+    };
+    const handleTriggerClick = (e) => {
+        if (disabled)
+            return;
+        const isClearClick = e.target.closest('[data-testid="mobile-picker-clear-button"]');
+        if (isClearClick)
+            return;
+        setIsOpen(true);
+    };
+    const isOptionSelected = (option) => {
+        const optVal = getValue(option);
+        if (multiple) {
+            return (Array.isArray(normalizedDraft) && normalizedDraft.some((item) => getValue(item) === optVal));
+        }
+        else {
+            return Boolean(normalizedDraft && getValue(normalizedDraft) === optVal);
+        }
+    };
+    const shouldShowTypeToSearch = async && !query && !isAsyncLoading && allOptions.length === 0;
+    const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
+    return (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('group space-y-2 w-full', containerClass), children: [label && (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsxRuntime.jsx(Label.Label, { className: labelClass, htmlFor: id, children: label }), labelHint && jsxRuntime.jsx(TextContent.TextContent, { xsmall: true, children: labelHint })] })), jsxRuntime.jsxs("button", { type: "button", id: id, name: name, disabled: disabled, onClick: handleTriggerClick, className: buildClassname.buildClassName(baseInputClass, 'w-full flex items-center justify-between gap-2 cursor-pointer relative text-left', hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), "data-testid": "mobile-picker-trigger", children: [hasLeftGroup && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), jsxRuntime.jsx("div", { className: "flex-1 flex flex-wrap items-center gap-1.5 min-w-0 overflow-hidden", children: multiple ? (Array.isArray(normalizedSelected) && normalizedSelected.length > 0 ? (normalizedSelected.map((item, idx) => (jsxRuntime.jsx(Badge.Badge, { theme: "secondary", size: currentSize.badgeSize, children: getDisplayValue(item) }, `${getValue(item)}-${idx}`)))) : (jsxRuntime.jsx("span", { className: "text-gray-400 dark:text-gray-500", children: placeholder }))) : normalizedSelected ? (jsxRuntime.jsx("span", { className: "text-gray-900 dark:text-white font-normal truncate", children: getDisplayValue(normalizedSelected) })) : (jsxRuntime.jsx("span", { className: "text-gray-400 dark:text-gray-500", children: placeholder })) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [allowClear && !multiple && normalizedSelected && (jsxRuntime.jsx("span", { role: "button", "aria-label": "Clear selection", tabIndex: 0, onClick: handleClearSingleSelect, className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full cursor-pointer z-10", "data-testid": "mobile-picker-clear-button", children: jsxRuntime.jsx(X.default, { className: "size-3.5 stroke-gray-500 dark:stroke-gray-400" }) })), jsxRuntime.jsx(ChevronDown.default, { className: buildClassname.buildClassName(currentSize.icon, 'stroke-gray-500 shrink-0') })] })] }), showErrorMessage && error && (jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx(TextContent.TextContent, { error: true, small: true, children: error }) })), !error && helperText && (jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx(TextContent.TextContent, { muted: true, small: true, children: helperText }) })), jsxRuntime.jsxs(react.Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: () => setIsOpen(false), transition: true, children: [jsxRuntime.jsx(react.DialogBackdrop, { className: "fixed inset-0 bg-black/50 backdrop-blur-xs transition-opacity duration-200" }), jsxRuntime.jsx("div", { className: "fixed left-0 top-0 w-full flex items-end justify-center pointer-events-none z-50", style: {
+                            height: viewportHeight ? `${viewportHeight}px` : '100dvh',
+                        }, children: jsxRuntime.jsxs(react.DialogPanel, { transition: true, className: buildClassname.buildClassName('w-full max-w-full md:max-w-lg bg-white dark:bg-gray-900 shadow-2xl rounded-t-3xl max-h-[85vh] max-h-[85dvh] flex flex-col pointer-events-auto overscroll-contain touch-pan-y', 'duration-200 ease-out data-[closed]:translate-y-full data-[closed]:opacity-0', sheetClass), style: {
+                                maxHeight: viewportHeight ? `${Math.floor(viewportHeight * 0.9)}px` : undefined,
+                            }, "data-testid": "mobile-picker-sheet", children: [jsxRuntime.jsx("div", { className: "w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700 mx-auto my-2.5 shrink-0" }), jsxRuntime.jsxs("div", { className: "px-4 pb-3 border-b border-[var(--ui-border-muted)] flex items-center justify-between gap-3 shrink-0", children: [jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx(react.DialogTitle, { as: "h3", className: "text-base md:text-lg font-bold text-gray-900 dark:text-white truncate", children: title || label || 'Select Option' }), description && (jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5", children: description }))] }), jsxRuntime.jsx(Button.Button, { iconOnly: true, "aria-label": "Close picker", variant: "plain", theme: "secondary", size: "xs", onClick: () => setIsOpen(false), className: "rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0", children: jsxRuntime.jsx(X.default, { className: "size-4" }) })] }), searchable && (jsxRuntime.jsx("div", { className: "p-3 border-b border-[var(--ui-border-muted)] bg-gray-50 dark:bg-gray-800/50 shrink-0", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Search.default, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-gray-400" }), jsxRuntime.jsx("input", { type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                                                    if (allowFreeText && e.key === 'Enter' && query.trim()) {
+                                                        e.preventDefault();
+                                                        handleCommitFreeText(query);
+                                                    }
+                                                }, placeholder: searchPlaceholder, className: "w-full pl-9 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500", "data-testid": "mobile-picker-search-input" }), jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5", children: isAsyncLoading ? (jsxRuntime.jsx(index.Loader, { size: "xs" })) : (query && (jsxRuntime.jsx("button", { type: "button", onClick: () => setQuery(''), className: "p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200", children: jsxRuntime.jsx(X.default, { className: "size-3.5" }) }))) })] }) })), quickOptions && quickOptions.length > 0 && (jsxRuntime.jsxs("div", { className: "px-3 py-2 bg-gray-50/60 dark:bg-gray-800/40 border-b border-[var(--ui-border-muted)] shrink-0", children: [jsxRuntime.jsx("div", { className: "text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5 px-1", children: quickOptionsTitle }), jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-x-auto no-scrollbar pb-1", children: quickOptions.map((chip, cIdx) => {
+                                                const isSelected = isOptionSelected(chip);
+                                                return (jsxRuntime.jsx("button", { type: "button", onClick: () => handleToggleOption(chip), className: buildClassname.buildClassName('px-3 py-1 rounded-full text-xs font-medium shrink-0 transition-colors cursor-pointer border', isSelected
+                                                        ? 'bg-blue-600 text-white border-blue-600'
+                                                        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700'), children: getDisplayValue(chip) }, cIdx));
+                                            }) })] })), multiple && showSelectAll && allOptions.length > 0 && (jsxRuntime.jsxs("div", { className: "px-4 py-2 bg-gray-50/80 dark:bg-gray-800/80 border-b border-[var(--ui-border-muted)] flex items-center justify-between text-xs shrink-0", children: [jsxRuntime.jsx("button", { type: "button", onClick: handleToggleSelectAll, className: "font-semibold text-blue-600 dark:text-blue-400 hover:underline cursor-pointer", children: isAllSelected ? 'Deselect All' : 'Select All' }), jsxRuntime.jsxs("span", { className: "text-gray-500 dark:text-gray-400 font-medium", children: [Array.isArray(normalizedDraft) ? normalizedDraft.length : 0, " of", ' ', allOptions.length] })] })), jsxRuntime.jsxs("div", { onScroll: (e) => {
+                                        const el = e.currentTarget;
+                                        if (el.scrollTop === 0) {
+                                            el.scrollTop = 1;
+                                        }
+                                        else if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
+                                            el.scrollTop = el.scrollHeight - el.clientHeight - 1;
+                                        }
+                                    }, className: "flex-1 overflow-y-auto overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] p-2 space-y-1 divide-y divide-gray-100 dark:divide-gray-800/60", children: [allowFreeText &&
+                                            query.trim() &&
+                                            !allOptions.some((opt) => getDisplayValue(opt).toLowerCase() === query.trim().toLowerCase()) && (jsxRuntime.jsxs("button", { type: "button", onClick: () => handleCommitFreeText(query), className: "w-full text-left flex items-center justify-between p-3.5 rounded-2xl bg-blue-50/80 dark:bg-blue-950/30 text-blue-600 dark:text-blue-400 font-medium hover:bg-blue-100/80 cursor-pointer", "data-testid": "mobile-picker-freetext-item", children: [jsxRuntime.jsxs("span", { className: "text-sm font-medium", children: ["Use \"", query.trim(), "\""] }), jsxRuntime.jsx(ChevronDown.default, { className: "size-4 rotate-[-90deg]" })] })), isAsyncLoading && allOptions.length === 0 ? (jsxRuntime.jsxs("div", { className: "py-12 flex flex-col items-center justify-center gap-2 text-sm text-gray-500 dark:text-gray-400 select-none", children: [jsxRuntime.jsx(index.Loader, { size: "md" }), jsxRuntime.jsx("span", { children: "Loading options..." })] })) : shouldShowTypeToSearch ? (jsxRuntime.jsx("div", { className: "py-12 text-center text-sm text-gray-500 dark:text-gray-400 select-none", children: typeToSearchText })) : filteredGroups ? (filteredGroups.map((grp, gIdx) => (jsxRuntime.jsxs("div", { className: "pt-2", children: [jsxRuntime.jsx("div", { className: "text-[11px] font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 px-3 py-1.5 select-none", children: grp.group }), jsxRuntime.jsx("div", { className: "space-y-1", children: grp.options.map((option) => {
+                                                        const optVal = getValue(option);
+                                                        const isSelected = isOptionSelected(option);
+                                                        const optDisabled = option.disabled;
+                                                        const optDesc = typeof option === 'object'
+                                                            ? (option === null || option === void 0 ? void 0 : option.description) || (option === null || option === void 0 ? void 0 : option.subtitle)
+                                                            : null;
+                                                        return (jsxRuntime.jsxs("div", { onClick: () => !optDisabled && handleToggleOption(option), className: buildClassname.buildClassName('w-full flex items-center justify-between p-3.5 rounded-2xl transition-colors cursor-pointer select-none', isSelected
+                                                                ? 'bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-semibold'
+                                                                : 'text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800/70', optDisabled && 'opacity-50 pointer-events-none'), children: [jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 pr-3", children: [jsxRuntime.jsx("div", { className: "text-sm/6 truncate", children: renderOption
+                                                                                ? renderOption(option, isSelected)
+                                                                                : getDisplayValue(option) }), optDesc && (jsxRuntime.jsx("div", { className: "text-xs text-gray-400 font-normal truncate mt-0.5", children: optDesc }))] }), isSelected && (jsxRuntime.jsx(Check.default, { className: "size-5 stroke-blue-600 dark:stroke-blue-400 shrink-0" }))] }, optVal));
+                                                    }) })] }, gIdx)))) : filteredOptions.length > 0 ? (filteredOptions.map((option) => {
+                                            const optVal = getValue(option);
+                                            const isSelected = isOptionSelected(option);
+                                            const optDisabled = option.disabled;
+                                            const optDesc = typeof option === 'object' ? (option === null || option === void 0 ? void 0 : option.description) || (option === null || option === void 0 ? void 0 : option.subtitle) : null;
+                                            return (jsxRuntime.jsxs("div", { onClick: () => !optDisabled && handleToggleOption(option), className: buildClassname.buildClassName('w-full flex items-center justify-between p-3.5 rounded-2xl transition-colors cursor-pointer select-none', isSelected
+                                                    ? 'bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-semibold'
+                                                    : 'text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800/70', optDisabled && 'opacity-50 pointer-events-none'), children: [jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 pr-3", children: [jsxRuntime.jsx("div", { className: "text-sm/6 truncate", children: renderOption
+                                                                    ? renderOption(option, isSelected)
+                                                                    : getDisplayValue(option) }), optDesc && (jsxRuntime.jsx("div", { className: "text-xs text-gray-400 font-normal truncate mt-0.5", children: optDesc }))] }), isSelected && (jsxRuntime.jsx(Check.default, { className: "size-5 stroke-blue-600 dark:stroke-blue-400 shrink-0" }))] }, optVal));
+                                        })) : (!allowFreeText &&
+                                            !(allowAdd && query.trim()) && (jsxRuntime.jsx("div", { className: "py-8 text-center text-sm text-gray-500 dark:text-gray-400 select-none", children: query
+                                                ? noOptionsText !== 'No options available'
+                                                    ? noOptionsText
+                                                    : `No results found for "${query}"`
+                                                : noOptionsText }))), !allowFreeText && allowAdd && Boolean(query.trim()) && (jsxRuntime.jsxs("button", { type: "button", onClick: () => handleAddAndSelect(query.trim()), className: "w-full flex items-center gap-2.5 p-3.5 rounded-2xl text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer", children: [jsxRuntime.jsx(CirclePlus.default, { className: "size-5 text-blue-600 dark:text-blue-400" }), jsxRuntime.jsxs("span", { className: "text-sm font-medium", children: [addNewText, " \"", query.trim(), "\""] })] }))] }), multiple && (jsxRuntime.jsx("div", { className: "p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-900 shrink-0", children: jsxRuntime.jsxs(Button.Button, { fullWidth: true, theme: "primary", size: "md", onClick: handleConfirmMultiSelect, "data-testid": "mobile-picker-confirm-button", children: [confirmText, ' ', Array.isArray(normalizedDraft) && normalizedDraft.length > 0
+                                                ? `(${normalizedDraft.length})`
+                                                : ''] }) }))] }) })] })] }));
+}
+MobilePicker.displayName = 'MobilePicker';
+exports.MobilePicker = MobilePicker;
+//# sourceMappingURL=MobilePicker.js.map

package/dist/cjs/components/MobilePicker/MobilePicker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MobilePicker.js","sources":["../../../../../src/components/MobilePicker/MobilePicker.tsx"],"sourcesContent":["import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react'\nimport { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { buildInputClass } from '../Input'\nimport { Badge } from '../Badge'\nimport { Button } from '../Button'\nimport { Label } from '../Label'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport { useDebounce } from '../../hooks/use-debounce'\nimport CheckIcon from '../Icons/Check.svg'\nimport ChevronDownIcon from '../Icons/ChevronDown.svg'\nimport CirclePlusIcon from '../Icons/CirclePlus.svg'\nimport SearchIcon from '../Icons/Search.svg'\nimport XIcon from '../Icons/X.svg'\nimport type { BaseOption, SelectBoxSize } from '../SelectBox/SelectBox.types'\nimport type { MobilePickerProps } from './MobilePicker.types'\n\nconst sizeConfigMap: Record<\n SelectBoxSize,\n {\n input: string\n icon: string\n badgeSize: 'sm' | 'md'\n group: string\n }\n> = {\n sm: {\n input: 'h-8 text-xs px-2.5',\n icon: 'size-3.5',\n badgeSize: 'sm',\n group: 'w-8',\n },\n md: {\n input: 'h-10 text-sm px-3',\n icon: 'size-4',\n badgeSize: 'md',\n group: 'w-10',\n },\n lg: {\n input: 'h-12 text-base px-3.5',\n icon: 'size-5',\n badgeSize: 'md',\n group: 'w-12',\n },\n}\n\nexport function MobilePicker<T extends BaseOption | string = BaseOption>(\n props: MobilePickerProps<T>,\n) {\n const {\n options = [],\n groups,\n selected = null,\n onChange = () => {},\n size = 'md',\n labelKey = 'label',\n valueKey = 'value',\n id,\n name,\n label,\n labelWrapperClass,\n labelClass,\n labelHint,\n title,\n description,\n placeholder = 'Choose an option...',\n disabled = false,\n multiple = false,\n maxSelection,\n showSelectAll = false,\n confirmText = 'Apply Selection',\n searchable = true,\n searchPlaceholder = 'Search options...',\n async = false,\n onSearch,\n loading = false,\n typeToSearchText = 'Type to search options...',\n filterOption,\n quickOptions,\n quickOptionsTitle = 'Quick Picks',\n allowClear = false,\n allowFreeText = false,\n allowAdd = false,\n addNewText = 'Create',\n onAdd = () => {},\n leftGroup,\n error,\n showErrorMessage = true,\n helperText,\n noOptionsText = 'No options available',\n renderOption,\n containerClass,\n sheetClass,\n } = props\n\n const [isOpen, setIsOpen] = useState(false)\n const [query, setQuery] = useState('')\n const debouncedQuery = useDebounce(query, 400)\n const [optionsLoading, setOptionsLoading] = useState(false)\n const [draftSelected, setDraftSelected] = useState<T | T[] | null>(selected)\n const [viewportHeight, setViewportHeight] = useState<number | null>(null)\n\n useEffect(() => {\n if (!isOpen) {\n setViewportHeight(null)\n return\n }\n\n const updateHeight = () => {\n if (typeof window !== 'undefined' && window.visualViewport) {\n setViewportHeight(window.visualViewport.height)\n }\n }\n\n updateHeight()\n const vv = typeof window !== 'undefined' ? window.visualViewport : null\n vv?.addEventListener('resize', updateHeight)\n vv?.addEventListener('scroll', updateHeight)\n\n return () => {\n vv?.removeEventListener('resize', updateHeight)\n vv?.removeEventListener('scroll', updateHeight)\n }\n }, [isOpen])\n\n const currentSize = sizeConfigMap[size] || sizeConfigMap.md\n const hasError = Boolean(error)\n const isAsyncLoading = loading || optionsLoading\n\n const baseInputClass = useMemo(\n () => buildInputClass('', { disabled, hasError, size }),\n [disabled, hasError, size],\n )\n\n const onSearchRef = useRef(onSearch)\n useEffect(() => {\n onSearchRef.current = onSearch\n }, [onSearch])\n\n const handleAsyncSearch = useCallback(async (searchString: string) => {\n try {\n setOptionsLoading(true)\n await onSearchRef.current?.(searchString)\n } catch (err) {\n console.error('Error loading options:', err)\n } finally {\n setOptionsLoading(false)\n }\n }, [])\n\n useEffect(() => {\n if (isOpen && async) {\n handleAsyncSearch(debouncedQuery)\n }\n }, [isOpen, async, debouncedQuery, handleAsyncSearch])\n\n const getDisplayValue = useCallback(\n (opt: T) => {\n if (typeof opt === 'string') return opt\n return opt?.[labelKey] ?? opt?.[valueKey] ?? String(opt)\n },\n [labelKey, valueKey],\n )\n\n const getValue = useCallback(\n (opt: T) => {\n if (typeof opt === 'string') return opt\n return opt?.[valueKey] ?? opt?.[labelKey] ?? String(opt)\n },\n [valueKey, labelKey],\n )\n\n const normalizedSelected = useMemo(() => {\n if (multiple) {\n if (Array.isArray(selected)) return selected\n if (selected !== null && selected !== undefined) return [selected as T]\n return [] as T[]\n } else {\n if (Array.isArray(selected)) return selected.length > 0 ? selected[0] : null\n return selected ?? null\n }\n }, [multiple, selected])\n\n const normalizedDraft = useMemo(() => {\n if (multiple) {\n if (Array.isArray(draftSelected)) return draftSelected\n if (draftSelected !== null && draftSelected !== undefined) return [draftSelected as T]\n return [] as T[]\n } else {\n if (Array.isArray(draftSelected)) return draftSelected.length > 0 ? draftSelected[0] : null\n return draftSelected ?? null\n }\n }, [multiple, draftSelected])\n\n const rawAllOptions = useMemo(() => {\n if (groups?.length) {\n return groups.flatMap((g) => g.options)\n }\n return options ?? []\n }, [groups, options])\n\n const allOptions = useMemo(() => {\n const list = [...rawAllOptions]\n const selectedList = Array.isArray(normalizedDraft)\n ? normalizedDraft\n : normalizedDraft\n ? [normalizedDraft as T]\n : []\n\n for (const sel of selectedList) {\n if (sel !== null && sel !== undefined) {\n const selVal = getValue(sel)\n const exists = list.some((item) => getValue(item) === selVal)\n if (!exists) {\n list.unshift(sel)\n }\n }\n }\n return list\n }, [rawAllOptions, normalizedDraft, getValue])\n\n useEffect(() => {\n if (isOpen) {\n setDraftSelected(normalizedSelected)\n setQuery('')\n }\n }, [isOpen, normalizedSelected])\n\n const defaultFilter = useCallback(\n (opt: T, q: string) => {\n if (!q.trim()) return true\n const searchTarget = getDisplayValue(opt)?.toLowerCase() || ''\n return searchTarget.includes(q.trim().toLowerCase())\n },\n [getDisplayValue],\n )\n\n const activeFilter = filterOption || defaultFilter\n\n const filteredOptions = useMemo(() => {\n if (async) return allOptions\n if (!query.trim()) return allOptions\n return allOptions.filter((opt) => activeFilter(opt, query))\n }, [allOptions, query, async, activeFilter])\n\n const filteredGroups = useMemo(() => {\n if (!groups?.length) return null\n if (async) return groups\n if (!query.trim()) return groups\n\n return groups\n .map((g) => ({\n ...g,\n options: g.options.filter((opt) => activeFilter(opt, query)),\n }))\n .filter((g) => g.options.length > 0)\n }, [groups, query, async, activeFilter])\n\n const createFreeTextOption = useCallback(\n (text: string): T => {\n const sample = allOptions[0] || (Array.isArray(selected) ? selected[0] : selected)\n if (\n typeof sample === 'string' ||\n (!sample && typeof labelKey === 'string' && labelKey === 'label')\n ) {\n return text as unknown as T\n }\n return {\n [labelKey]: text,\n [valueKey]: text,\n } as unknown as T\n },\n [allOptions, selected, labelKey, valueKey],\n )\n\n const handleToggleOption = (option: T) => {\n const optVal = getValue(option)\n if (multiple) {\n const current = Array.isArray(normalizedDraft) ? [...normalizedDraft] : []\n const index = current.findIndex((item) => getValue(item) === optVal)\n if (index > -1) {\n current.splice(index, 1)\n setDraftSelected(current as T[])\n } else {\n if (maxSelection && current.length >= maxSelection) return\n current.push(option)\n setDraftSelected(current as T[])\n }\n } else {\n setDraftSelected(option)\n onChange(option)\n setIsOpen(false)\n }\n }\n\n const handleCommitFreeText = (text: string) => {\n const trimmed = text.trim()\n if (!trimmed) return\n const existing = allOptions.find(\n (opt) => getDisplayValue(opt).toLowerCase() === trimmed.toLowerCase(),\n )\n const optionToCommit = existing || createFreeTextOption(trimmed)\n\n if (multiple) {\n const current = Array.isArray(normalizedDraft) ? [...normalizedDraft] : []\n const already = current.some(\n (item) => getDisplayValue(item).toLowerCase() === trimmed.toLowerCase(),\n )\n if (!already) {\n if (maxSelection && current.length >= maxSelection) return\n current.push(optionToCommit)\n setDraftSelected(current as T[])\n }\n setQuery('')\n } else {\n setDraftSelected(optionToCommit)\n onChange(optionToCommit)\n setIsOpen(false)\n }\n }\n\n const handleAddAndSelect = async (valueToAdd: string) => {\n try {\n const result = await onAdd(valueToAdd)\n const optionToCommit = (result || valueToAdd) as unknown as T\n if (multiple) {\n const current = Array.isArray(normalizedDraft) ? [...normalizedDraft] : []\n current.push(optionToCommit)\n setDraftSelected(current as T[])\n setQuery('')\n } else {\n setDraftSelected(optionToCommit)\n onChange(optionToCommit)\n setIsOpen(false)\n }\n } catch (err) {\n console.error('MobilePicker onAdd error:', err)\n }\n }\n\n const isAllSelected = useMemo(() => {\n if (!multiple || !Array.isArray(normalizedDraft) || !allOptions.length) return false\n return allOptions.length === normalizedDraft.length\n }, [multiple, normalizedDraft, allOptions])\n\n const handleToggleSelectAll = () => {\n if (isAllSelected) {\n setDraftSelected([] as T[])\n } else {\n setDraftSelected(allOptions as T[])\n }\n }\n\n const handleConfirmMultiSelect = () => {\n onChange(normalizedDraft)\n setIsOpen(false)\n }\n\n const handleClearSingleSelect = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setDraftSelected(multiple ? ([] as T[]) : null)\n onChange(multiple ? ([] as T[]) : null)\n }\n\n const handleTriggerClick = (e: React.MouseEvent) => {\n if (disabled) return\n const isClearClick = (e.target as HTMLElement).closest(\n '[data-testid=\"mobile-picker-clear-button\"]',\n )\n if (isClearClick) return\n setIsOpen(true)\n }\n\n const isOptionSelected = (option: T) => {\n const optVal = getValue(option)\n if (multiple) {\n return (\n Array.isArray(normalizedDraft) && normalizedDraft.some((item) => getValue(item) === optVal)\n )\n } else {\n return Boolean(normalizedDraft && getValue(normalizedDraft as T) === optVal)\n }\n }\n\n const shouldShowTypeToSearch = async && !query && !isAsyncLoading && allOptions.length === 0\n const hasLeftGroup = leftGroup != null && leftGroup !== undefined\n\n return (\n <div className={buildClassName('group space-y-2 w-full', containerClass)}>\n {label && (\n <div className={buildClassName('flex items-center justify-between', labelWrapperClass)}>\n <Label className={labelClass} htmlFor={id}>\n {label}\n </Label>\n {labelHint && <TextContent xsmall>{labelHint}</TextContent>}\n </div>\n )}\n\n {/* Trigger Button */}\n <button\n type=\"button\"\n id={id}\n name={name}\n disabled={disabled}\n onClick={handleTriggerClick}\n className={buildClassName(\n baseInputClass,\n 'w-full flex items-center justify-between gap-2 cursor-pointer relative text-left',\n hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '',\n )}\n data-testid=\"mobile-picker-trigger\"\n >\n {hasLeftGroup && (\n <span\n className={buildClassName(\n 'absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500',\n currentSize.group,\n )}\n >\n {leftGroup}\n </span>\n )}\n\n <div className=\"flex-1 flex flex-wrap items-center gap-1.5 min-w-0 overflow-hidden\">\n {multiple ? (\n Array.isArray(normalizedSelected) && normalizedSelected.length > 0 ? (\n normalizedSelected.map((item, idx) => (\n <Badge\n key={`${getValue(item)}-${idx}`}\n theme=\"secondary\"\n size={currentSize.badgeSize}\n >\n {getDisplayValue(item)}\n </Badge>\n ))\n ) : (\n <span className=\"text-gray-400 dark:text-gray-500\">{placeholder}</span>\n )\n ) : normalizedSelected ? (\n <span className=\"text-gray-900 dark:text-white font-normal truncate\">\n {getDisplayValue(normalizedSelected as T)}\n </span>\n ) : (\n <span className=\"text-gray-400 dark:text-gray-500\">{placeholder}</span>\n )}\n </div>\n\n <div className=\"flex items-center gap-1 shrink-0\">\n {allowClear && !multiple && normalizedSelected && (\n <span\n role=\"button\"\n aria-label=\"Clear selection\"\n tabIndex={0}\n onClick={handleClearSingleSelect}\n className=\"p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full cursor-pointer z-10\"\n data-testid=\"mobile-picker-clear-button\"\n >\n <XIcon className=\"size-3.5 stroke-gray-500 dark:stroke-gray-400\" />\n </span>\n )}\n\n <ChevronDownIcon\n className={buildClassName(currentSize.icon, 'stroke-gray-500 shrink-0')}\n />\n </div>\n </button>\n\n {showErrorMessage && error && (\n <div className=\"mt-1\">\n <TextContent error small>\n {error}\n </TextContent>\n </div>\n )}\n\n {!error && helperText && (\n <div className=\"mt-1\">\n <TextContent muted small>\n {helperText}\n </TextContent>\n </div>\n )}\n\n {/* Mobile Bottom Sheet Drawer */}\n <Dialog\n open={isOpen}\n as=\"div\"\n className=\"relative z-50 focus:outline-none\"\n onClose={() => setIsOpen(false)}\n transition\n >\n <DialogBackdrop className=\"fixed inset-0 bg-black/50 backdrop-blur-xs transition-opacity duration-200\" />\n\n <div\n className=\"fixed left-0 top-0 w-full flex items-end justify-center pointer-events-none z-50\"\n style={{\n height: viewportHeight ? `${viewportHeight}px` : '100dvh',\n }}\n >\n <DialogPanel\n transition\n className={buildClassName(\n 'w-full max-w-full md:max-w-lg bg-white dark:bg-gray-900 shadow-2xl rounded-t-3xl max-h-[85vh] max-h-[85dvh] flex flex-col pointer-events-auto overscroll-contain touch-pan-y',\n 'duration-200 ease-out data-[closed]:translate-y-full data-[closed]:opacity-0',\n sheetClass,\n )}\n style={{\n maxHeight: viewportHeight ? `${Math.floor(viewportHeight * 0.9)}px` : undefined,\n }}\n data-testid=\"mobile-picker-sheet\"\n >\n {/* Top drag handle indicator */}\n <div className=\"w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700 mx-auto my-2.5 shrink-0\" />\n\n {/* Sheet Header */}\n <div className=\"px-4 pb-3 border-b border-[var(--ui-border-muted)] flex items-center justify-between gap-3 shrink-0\">\n <div className=\"min-w-0 flex-1\">\n <DialogTitle\n as=\"h3\"\n className=\"text-base md:text-lg font-bold text-gray-900 dark:text-white truncate\"\n >\n {title || label || 'Select Option'}\n </DialogTitle>\n {description && (\n <p className=\"text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5\">\n {description}\n </p>\n )}\n </div>\n\n <Button\n iconOnly\n aria-label=\"Close picker\"\n variant=\"plain\"\n theme=\"secondary\"\n size=\"xs\"\n onClick={() => setIsOpen(false)}\n className=\"rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0\"\n >\n <XIcon className=\"size-4\" />\n </Button>\n </div>\n\n {/* Optional Search Bar */}\n {searchable && (\n <div className=\"p-3 border-b border-[var(--ui-border-muted)] bg-gray-50 dark:bg-gray-800/50 shrink-0\">\n <div className=\"relative\">\n <SearchIcon className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-gray-400\" />\n <input\n type=\"text\"\n value={query}\n onChange={(e) => setQuery(e.target.value)}\n onKeyDown={(e) => {\n if (allowFreeText && e.key === 'Enter' && query.trim()) {\n e.preventDefault()\n handleCommitFreeText(query)\n }\n }}\n placeholder={searchPlaceholder}\n className=\"w-full pl-9 pr-10 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n data-testid=\"mobile-picker-search-input\"\n />\n <div className=\"absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5\">\n {isAsyncLoading ? (\n <Loader size=\"xs\" />\n ) : (\n query && (\n <button\n type=\"button\"\n onClick={() => setQuery('')}\n className=\"p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200\"\n >\n <XIcon className=\"size-3.5\" />\n </button>\n )\n )}\n </div>\n </div>\n </div>\n )}\n\n {/* Quick Choice Chips Row */}\n {quickOptions && quickOptions.length > 0 && (\n <div className=\"px-3 py-2 bg-gray-50/60 dark:bg-gray-800/40 border-b border-[var(--ui-border-muted)] shrink-0\">\n <div className=\"text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5 px-1\">\n {quickOptionsTitle}\n </div>\n <div className=\"flex items-center gap-2 overflow-x-auto no-scrollbar pb-1\">\n {quickOptions.map((chip, cIdx) => {\n const isSelected = isOptionSelected(chip)\n return (\n <button\n key={cIdx}\n type=\"button\"\n onClick={() => handleToggleOption(chip)}\n className={buildClassName(\n 'px-3 py-1 rounded-full text-xs font-medium shrink-0 transition-colors cursor-pointer border',\n isSelected\n ? 'bg-blue-600 text-white border-blue-600'\n : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700',\n )}\n >\n {getDisplayValue(chip)}\n </button>\n )\n })}\n </div>\n </div>\n )}\n\n {/* Multi-Select Select All Toolbar */}\n {multiple && showSelectAll && allOptions.length > 0 && (\n <div className=\"px-4 py-2 bg-gray-50/80 dark:bg-gray-800/80 border-b border-[var(--ui-border-muted)] flex items-center justify-between text-xs shrink-0\">\n <button\n type=\"button\"\n onClick={handleToggleSelectAll}\n className=\"font-semibold text-blue-600 dark:text-blue-400 hover:underline cursor-pointer\"\n >\n {isAllSelected ? 'Deselect All' : 'Select All'}\n </button>\n <span className=\"text-gray-500 dark:text-gray-400 font-medium\">\n {Array.isArray(normalizedDraft) ? normalizedDraft.length : 0} of{' '}\n {allOptions.length}\n </span>\n </div>\n )}\n\n {/* Sheet Scrollable Option List */}\n <div\n onScroll={(e) => {\n const el = e.currentTarget\n if (el.scrollTop === 0) {\n el.scrollTop = 1\n } else if (el.scrollTop + el.clientHeight >= el.scrollHeight) {\n el.scrollTop = el.scrollHeight - el.clientHeight - 1\n }\n }}\n className=\"flex-1 overflow-y-auto overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] p-2 space-y-1 divide-y divide-gray-100 dark:divide-gray-800/60\"\n >\n {/* Free-Text Action Item */}\n {allowFreeText &&\n query.trim() &&\n !allOptions.some(\n (opt) => getDisplayValue(opt).toLowerCase() === query.trim().toLowerCase(),\n ) && (\n <button\n type=\"button\"\n onClick={() => handleCommitFreeText(query)}\n className=\"w-full text-left flex items-center justify-between p-3.5 rounded-2xl bg-blue-50/80 dark:bg-blue-950/30 text-blue-600 dark:text-blue-400 font-medium hover:bg-blue-100/80 cursor-pointer\"\n data-testid=\"mobile-picker-freetext-item\"\n >\n <span className=\"text-sm font-medium\">Use \"{query.trim()}\"</span>\n <ChevronDownIcon className=\"size-4 rotate-[-90deg]\" />\n </button>\n )}\n\n {/* Loading State Body */}\n {isAsyncLoading && allOptions.length === 0 ? (\n <div className=\"py-12 flex flex-col items-center justify-center gap-2 text-sm text-gray-500 dark:text-gray-400 select-none\">\n <Loader size=\"md\" />\n <span>Loading options...</span>\n </div>\n ) : shouldShowTypeToSearch ? (\n <div className=\"py-12 text-center text-sm text-gray-500 dark:text-gray-400 select-none\">\n {typeToSearchText}\n </div>\n ) : filteredGroups ? (\n filteredGroups.map((grp, gIdx) => (\n <div key={gIdx} className=\"pt-2\">\n <div className=\"text-[11px] font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 px-3 py-1.5 select-none\">\n {grp.group}\n </div>\n <div className=\"space-y-1\">\n {grp.options.map((option) => {\n const optVal = getValue(option)\n const isSelected = isOptionSelected(option)\n const optDisabled = (option as BaseOption).disabled\n const optDesc =\n typeof option === 'object'\n ? option?.description || option?.subtitle\n : null\n\n return (\n <div\n key={optVal}\n onClick={() => !optDisabled && handleToggleOption(option)}\n className={buildClassName(\n 'w-full flex items-center justify-between p-3.5 rounded-2xl transition-colors cursor-pointer select-none',\n isSelected\n ? 'bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-semibold'\n : 'text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800/70',\n optDisabled && 'opacity-50 pointer-events-none',\n )}\n >\n <div className=\"flex-1 min-w-0 pr-3\">\n <div className=\"text-sm/6 truncate\">\n {renderOption\n ? renderOption(option, isSelected)\n : getDisplayValue(option)}\n </div>\n {optDesc && (\n <div className=\"text-xs text-gray-400 font-normal truncate mt-0.5\">\n {optDesc}\n </div>\n )}\n </div>\n {isSelected && (\n <CheckIcon className=\"size-5 stroke-blue-600 dark:stroke-blue-400 shrink-0\" />\n )}\n </div>\n )\n })}\n </div>\n </div>\n ))\n ) : filteredOptions.length > 0 ? (\n filteredOptions.map((option) => {\n const optVal = getValue(option)\n const isSelected = isOptionSelected(option)\n const optDisabled = (option as BaseOption).disabled\n const optDesc =\n typeof option === 'object' ? option?.description || option?.subtitle : null\n\n return (\n <div\n key={optVal}\n onClick={() => !optDisabled && handleToggleOption(option)}\n className={buildClassName(\n 'w-full flex items-center justify-between p-3.5 rounded-2xl transition-colors cursor-pointer select-none',\n isSelected\n ? 'bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-semibold'\n : 'text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800/70',\n optDisabled && 'opacity-50 pointer-events-none',\n )}\n >\n <div className=\"flex-1 min-w-0 pr-3\">\n <div className=\"text-sm/6 truncate\">\n {renderOption\n ? renderOption(option, isSelected)\n : getDisplayValue(option)}\n </div>\n {optDesc && (\n <div className=\"text-xs text-gray-400 font-normal truncate mt-0.5\">\n {optDesc}\n </div>\n )}\n </div>\n {isSelected && (\n <CheckIcon className=\"size-5 stroke-blue-600 dark:stroke-blue-400 shrink-0\" />\n )}\n </div>\n )\n })\n ) : (\n !allowFreeText &&\n !(allowAdd && query.trim()) && (\n <div className=\"py-8 text-center text-sm text-gray-500 dark:text-gray-400 select-none\">\n {query\n ? noOptionsText !== 'No options available'\n ? noOptionsText\n : `No results found for \"${query}\"`\n : noOptionsText}\n </div>\n )\n )}\n\n {/* Creatable option card */}\n {!allowFreeText && allowAdd && Boolean(query.trim()) && (\n <button\n type=\"button\"\n onClick={() => handleAddAndSelect(query.trim())}\n className=\"w-full flex items-center gap-2.5 p-3.5 rounded-2xl text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer\"\n >\n <CirclePlusIcon className=\"size-5 text-blue-600 dark:text-blue-400\" />\n <span className=\"text-sm font-medium\">\n {addNewText} \"{query.trim()}\"\n </span>\n </button>\n )}\n </div>\n\n {/* Sticky Footer for Multi-Select Confirmation */}\n {multiple && (\n <div className=\"p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-900 shrink-0\">\n <Button\n fullWidth\n theme=\"primary\"\n size=\"md\"\n onClick={handleConfirmMultiSelect}\n data-testid=\"mobile-picker-confirm-button\"\n >\n {confirmText}{' '}\n {Array.isArray(normalizedDraft) && normalizedDraft.length > 0\n ? `(${normalizedDraft.length})`\n : ''}\n </Button>\n </div>\n )}\n </DialogPanel>\n </div>\n </Dialog>\n </div>\n )\n}\n\nMobilePicker.displayName = 'MobilePicker'\n"],"names":["useState","useDebounce","useEffect","useMemo","buildInputClass","useRef","useCallback","_jsxs","buildClassName","_jsx","Label","TextContent","Badge","XIcon","ChevronDownIcon","Dialog","DialogBackdrop","DialogPanel","DialogTitle","Button","SearchIcon","Loader","CheckIcon","CirclePlusIcon"],"mappings":"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"}

package/dist/cjs/components/MobileStepper/MobileStepper.js ADDED Viewed

@@ -0,0 +1,33 @@
+'use strict';
+var jsxRuntime = require('react/jsx-runtime');
+var buildClassname = require('../../utils/build-classname.js');
+var Button = require('../Button/Button.js');
+function ChevronLeftIcon() {
+    return (jsxRuntime.jsx("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }));
+}
+function ChevronRightIcon() {
+    return (jsxRuntime.jsx("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }));
+}
+function MobileStepper({ steps, activeStep, variant = 'dots', onBack, onNext, backLabel = 'Back', nextLabel = 'Next', stepTitle, nextDisabled = false, backDisabled = false, nextLoading = false, className = '', }) {
+    const isFirstStep = activeStep <= 0;
+    const isLastStep = activeStep >= steps - 1;
+    const progressPercent = Math.min(Math.max(((activeStep + 1) / steps) * 100, 0), 100);
+    return (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('w-full flex flex-col gap-2 p-3 bg-white dark:bg-gray-900 border border-[var(--ui-border)] rounded-2xl shadow-xs select-none', className), "data-testid": "mobile-stepper", children: [stepTitle && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-1", children: [jsxRuntime.jsx("span", { className: "text-xs font-bold text-gray-900 dark:text-white truncate", "data-testid": "mobile-stepper-title", children: stepTitle }), jsxRuntime.jsxs("span", { className: "text-[11px] font-medium text-gray-500 dark:text-gray-400 shrink-0 ml-2", children: [activeStep + 1, " / ", steps] })] })), jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxRuntime.jsx(Button.Button, { size: "xs", variant: "plain", theme: "secondary", disabled: disabledBack(isFirstStep, backDisabled), onClick: onBack, "aria-label": "Previous step", leftIcon: jsxRuntime.jsx(ChevronLeftIcon, {}), "data-testid": "mobile-stepper-back-btn", children: backLabel }), jsxRuntime.jsxs("div", { className: "flex items-center justify-center flex-1", "data-testid": "mobile-stepper-indicator", children: [variant === 'dots' && (jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", "data-testid": "mobile-stepper-dots", children: Array.from({ length: steps }).map((_, index) => {
+                                    const isActive = index === activeStep;
+                                    const isCompleted = index < activeStep;
+                                    return (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('h-2 transition-all duration-300 rounded-full', isActive
+                                            ? 'w-5 bg-blue-600 dark:bg-blue-400'
+                                            : isCompleted
+                                                ? 'w-2 bg-blue-300 dark:bg-blue-800'
+                                                : 'w-2 bg-gray-200 dark:bg-gray-700'), "data-testid": `mobile-stepper-dot-${index}` }, index));
+                                }) })), variant === 'progress' && (jsxRuntime.jsx("div", { className: "w-full max-w-[140px] bg-gray-200 dark:bg-gray-700 h-2 rounded-full overflow-hidden", "data-testid": "mobile-stepper-progress", children: jsxRuntime.jsx("div", { className: "bg-blue-600 dark:bg-blue-400 h-full transition-all duration-300 rounded-full", style: { width: `${progressPercent}%` } }) })), variant === 'text' && (jsxRuntime.jsxs("div", { className: "text-xs font-semibold text-gray-600 dark:text-gray-300", "data-testid": "mobile-stepper-text", children: ["Step ", activeStep + 1, " of ", steps] }))] }), jsxRuntime.jsx(Button.Button, { size: "xs", variant: "default", theme: "primary", disabled: nextDisabled, loading: nextLoading, onClick: onNext, "aria-label": "Next step", rightIcon: !isLastStep ? jsxRuntime.jsx(ChevronRightIcon, {}) : undefined, "data-testid": "mobile-stepper-next-btn", children: nextLabel })] })] }));
+}
+function disabledBack(isFirstStep, backDisabled) {
+    return isFirstStep || backDisabled;
+}
+MobileStepper.displayName = 'MobileStepper';
+exports.MobileStepper = MobileStepper;
+//# sourceMappingURL=MobileStepper.js.map

package/dist/cjs/components/MobileStepper/MobileStepper.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MobileStepper.js","sources":["../../../../../src/components/MobileStepper/MobileStepper.tsx"],"sourcesContent":["import React from 'react'\nimport type { MobileStepperProps } from './MobileStepper.types'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Button } from '../Button'\n\nfunction ChevronLeftIcon() {\n return (\n <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2.5} d=\"M15 19l-7-7 7-7\" />\n </svg>\n )\n}\n\nfunction ChevronRightIcon() {\n return (\n <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2.5} d=\"M9 5l7 7-7 7\" />\n </svg>\n )\n}\n\nexport function MobileStepper({\n steps,\n activeStep,\n variant = 'dots',\n onBack,\n onNext,\n backLabel = 'Back',\n nextLabel = 'Next',\n stepTitle,\n nextDisabled = false,\n backDisabled = false,\n nextLoading = false,\n className = '',\n}: MobileStepperProps) {\n const isFirstStep = activeStep <= 0\n const isLastStep = activeStep >= steps - 1\n\n const progressPercent = Math.min(Math.max(((activeStep + 1) / steps) * 100, 0), 100)\n\n return (\n <div\n className={buildClassName(\n 'w-full flex flex-col gap-2 p-3 bg-white dark:bg-gray-900 border border-[var(--ui-border)] rounded-2xl shadow-xs select-none',\n className,\n )}\n data-testid=\"mobile-stepper\"\n >\n {/* Optional Step Title Header */}\n {stepTitle && (\n <div className=\"flex items-center justify-between px-1\">\n <span\n className=\"text-xs font-bold text-gray-900 dark:text-white truncate\"\n data-testid=\"mobile-stepper-title\"\n >\n {stepTitle}\n </span>\n <span className=\"text-[11px] font-medium text-gray-500 dark:text-gray-400 shrink-0 ml-2\">\n {activeStep + 1} / {steps}\n </span>\n </div>\n )}\n\n {/* Main Navigation Controls & Progress Indicator Row */}\n <div className=\"flex items-center justify-between gap-3\">\n {/* Back Button */}\n <Button\n size=\"xs\"\n variant=\"plain\"\n theme=\"secondary\"\n disabled={disabledBack(isFirstStep, backDisabled)}\n onClick={onBack}\n aria-label=\"Previous step\"\n leftIcon={<ChevronLeftIcon />}\n data-testid=\"mobile-stepper-back-btn\"\n >\n {backLabel}\n </Button>\n\n {/* Center Progress Indicator */}\n <div\n className=\"flex items-center justify-center flex-1\"\n data-testid=\"mobile-stepper-indicator\"\n >\n {variant === 'dots' && (\n <div className=\"flex items-center gap-1.5\" data-testid=\"mobile-stepper-dots\">\n {Array.from({ length: steps }).map((_, index) => {\n const isActive = index === activeStep\n const isCompleted = index < activeStep\n\n return (\n <span\n key={index}\n className={buildClassName(\n 'h-2 transition-all duration-300 rounded-full',\n isActive\n ? 'w-5 bg-blue-600 dark:bg-blue-400'\n : isCompleted\n ? 'w-2 bg-blue-300 dark:bg-blue-800'\n : 'w-2 bg-gray-200 dark:bg-gray-700',\n )}\n data-testid={`mobile-stepper-dot-${index}`}\n />\n )\n })}\n </div>\n )}\n\n {variant === 'progress' && (\n <div\n className=\"w-full max-w-[140px] bg-gray-200 dark:bg-gray-700 h-2 rounded-full overflow-hidden\"\n data-testid=\"mobile-stepper-progress\"\n >\n <div\n className=\"bg-blue-600 dark:bg-blue-400 h-full transition-all duration-300 rounded-full\"\n style={{ width: `${progressPercent}%` }}\n />\n </div>\n )}\n\n {variant === 'text' && (\n <div\n className=\"text-xs font-semibold text-gray-600 dark:text-gray-300\"\n data-testid=\"mobile-stepper-text\"\n >\n Step {activeStep + 1} of {steps}\n </div>\n )}\n </div>\n\n {/* Next / Finish Button */}\n <Button\n size=\"xs\"\n variant=\"default\"\n theme=\"primary\"\n disabled={nextDisabled}\n loading={nextLoading}\n onClick={onNext}\n aria-label=\"Next step\"\n rightIcon={!isLastStep ? <ChevronRightIcon /> : undefined}\n data-testid=\"mobile-stepper-next-btn\"\n >\n {nextLabel}\n </Button>\n </div>\n </div>\n )\n}\n\nfunction disabledBack(isFirstStep: boolean, backDisabled: boolean): boolean {\n return isFirstStep || backDisabled\n}\n\nMobileStepper.displayName = 'MobileStepper'\n"],"names":["_jsx","_jsxs","buildClassName","Button"],"mappings":"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"}

package/dist/cjs/components/Pagination/Pagination.js ADDED Viewed

@@ -0,0 +1,33 @@
+'use strict';
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('../Button/Button.js');
+var usePagination = require('./usePagination.js');
+var buildClassname = require('../../utils/build-classname.js');
+var ChevronLeft = require('../Icons/ChevronLeft.svg.js');
+var ChevronRight = require('../Icons/ChevronRight.svg.js');
+const Pagination = ({ page: currentPage, limit, total, onChange, className, ellipsis = true, // Default to showing ellipsis
+ }) => {
+    const pages = new Array(Math.ceil(total / limit)).fill(null).map((_, i) => i + 1);
+    const isFirstPage = currentPage === 1;
+    const isLastPage = total === 0 || pages.length === currentPage;
+    const range = usePagination.usePagination({ totalPages: pages.length, currentPage });
+    const handlePageChange = (nextVal) => {
+        if (nextVal === currentPage)
+            return;
+        onChange({ page: nextVal });
+    };
+    if (ellipsis) {
+        return (jsxRuntime.jsxs("div", { "data-testid": "pagination-container", className: buildClassname.buildClassName('flex items-center justify-between bg-white dark:bg-gray-800 px-4 py-3 sm:px-6', className), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsxRuntime.jsxs(Button.Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "ellipsis-mobile-prev-btn", children: [jsxRuntime.jsx("span", { children: "Previous" }), jsxRuntime.jsx(ChevronLeft.default, { className: "size-4" })] }), jsxRuntime.jsxs(Button.Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "ellipsis-mobile-next-btn", children: [jsxRuntime.jsx("span", { children: "Next" }), jsxRuntime.jsx(ChevronRight.default, { className: "size-4" })] })] }), jsxRuntime.jsxs("div", { className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [jsxRuntime.jsxs("p", { "data-testid": "pagination-summary", className: "text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1", children: ["Showing", jsxRuntime.jsx("span", { className: "font-medium", children: total === 0 ? 0 : Math.max(currentPage * limit - limit + 1, 1) }), "to", jsxRuntime.jsx("span", { className: "font-medium", children: Math.min(currentPage * limit, total) }), "of", jsxRuntime.jsx("span", { className: "font-medium", children: total }), "results"] }), jsxRuntime.jsxs("ul", { className: "flex items-center space-x-2 text-sm", children: [jsxRuntime.jsx("li", { children: jsxRuntime.jsx(Button.Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "ellipsis-prev-btn", children: "Prev" }) }), range.map((page, idx) => {
+                                    if (page === usePagination.DOTS) {
+                                        return (jsxRuntime.jsx("li", { "data-testid": `page-${page}`, className: "px-2 py-1 text-gray-400", children: "\u2026" }, `${page}-${idx}`));
+                                    }
+                                    return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(Button.Button, { size: "xs", theme: page === currentPage ? 'primary' : 'secondary', variant: page === currentPage ? 'default' : 'plain', "aria-current": page === currentPage ? 'page' : undefined, onClick: () => handlePageChange(page), children: page }) }, `${page}-${idx}`));
+                                }), jsxRuntime.jsx("li", { children: jsxRuntime.jsx(Button.Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "ellipsis-next-btn", children: "Next" }) })] })] })] }));
+    }
+    return (jsxRuntime.jsxs("div", { "data-testid": "pagination-container", className: buildClassname.buildClassName('flex items-center justify-between bg-white dark:bg-gray-800 px-4 py-3 sm:px-6', className), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsxRuntime.jsxs(Button.Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "mobile-prev-btn", children: [jsxRuntime.jsx("span", { children: "Previous" }), jsxRuntime.jsx(ChevronLeft.default, { className: "size-4" })] }), jsxRuntime.jsxs(Button.Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "mobile-next-btn", children: [jsxRuntime.jsx("span", { children: "Next" }), jsxRuntime.jsx(ChevronRight.default, { className: "size-4" })] })] }), jsxRuntime.jsxs("div", { className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [jsxRuntime.jsxs("p", { "data-testid": "pagination-summary", className: "text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1", children: ["Showing", jsxRuntime.jsx("span", { className: "font-medium", children: total === 0 ? 0 : Math.max(currentPage * limit - limit + 1, 1) }), "to", jsxRuntime.jsx("span", { className: "font-medium", children: Math.min(currentPage * limit, total) }), "of", jsxRuntime.jsx("span", { className: "font-medium", children: total }), "results"] }), jsxRuntime.jsxs("nav", { className: "isolate inline-flex items-center rounded-md", "aria-label": "Pagination", children: [jsxRuntime.jsxs(Button.Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "prev-btn", children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Previous" }), jsxRuntime.jsx(ChevronLeft.default, { className: "size-4" })] }), pages.map((page) => (jsxRuntime.jsx(Button.Button, { size: "xs", theme: page === currentPage ? 'primary' : 'secondary', variant: page === currentPage ? 'default' : 'plain', "aria-current": page === currentPage ? 'page' : undefined, onClick: () => handlePageChange(page), children: jsxRuntime.jsx("span", { className: "size-4 block", children: page }) }, page))), jsxRuntime.jsxs(Button.Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "next-btn", children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Next" }), jsxRuntime.jsx(ChevronRight.default, { className: "size-4" })] })] })] })] }));
+};
+exports.Pagination = Pagination;
+//# sourceMappingURL=Pagination.js.map