@pk-design/react-tailwind 1.6.0 → 1.7.1

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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