@pk-design/react-tailwind 1.6.0 → 1.7.1

package/dist/es/components/SelectBox/SelectBox.js

@@ -0,0 +1,303 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useMemo, useRef, useImperativeHandle, useCallback, useEffect } from 'react';
+import { Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption } from '@headlessui/react';
+import { Label } from '../Label/Label.js';
+import { Badge } from '../Badge/Badge.js';
+import { Loader } from '../Loader/index.js';
+import { TextContent } from '../TextContent/TextContent.js';
+import { Button } from '../Button/Button.js';
+import { MobilePicker } from '../MobilePicker/MobilePicker.js';
+import { isArray } from '../../utils/is-array.js';
+import { buildClassName } from '../../utils/build-classname.js';
+import { isEmpty } from '../../utils/is-empty.js';
+import { useDebounce } from '../../hooks/use-debounce.js';
+import SvgCheck from '../Icons/Check.svg.js';
+import SvgChevronDown from '../Icons/ChevronDown.svg.js';
+import SvgX from '../Icons/X.svg.js';
+import SvgCirclePlus from '../Icons/CirclePlus.svg.js';
+import { buildInputClass } from '../Input/Input.js';
+import { BodyText } from '../BodyText/BodyText.js';
+
+const sizeClasses = {
+    sm: {
+        input: 'px-2.5 py-1.5 text-xs leading-5 min-h-[32px]',
+        group: 'w-8 text-xs',
+        icon: 'size-3.5',
+        badgeSize: 'sm',
+    },
+    md: {
+        input: 'px-3.5 py-2 text-sm leading-6 min-h-[38px]',
+        group: 'w-10 text-sm',
+        icon: 'size-4',
+        badgeSize: 'md',
+    },
+    lg: {
+        input: 'px-4 py-2.5 text-base leading-7 min-h-[46px]',
+        group: 'w-12 text-base',
+        icon: 'size-5',
+        badgeSize: 'md',
+    },
+};
+const SelectBox = forwardRef((props, forwardedRef) => {
+    const { labelKey = 'label', valueKey = 'value', name, id = name, options = [], groups, selected, size = 'md', label = null, labelWrapperClass = '', labelClass = '', labelHint = null, disabled = false, containerClass = '', onChange = () => { }, placeholder, dropdownContainerClass = 'z-20', multiple = false, maxSelection, showSelectAll = false, immediate = true, showErrorMessage = true, error = null, helperText, leftGroup, renderOption, async = false, searchable = true, required = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, allowClear = false, allowFreeText = false, modalDropdown = false, noOptionsText = 'No options available', } = props;
+    if (props.asBottomSheet || props.mobileMode === 'sheet') {
+        return jsx(MobilePicker, { ...props });
+    }
+    const hasError = Boolean(error);
+    const [query, setQuery] = useState('');
+    const debouncedQuery = useDebounce(query, 500);
+    const [optionsLoading, setOptionsLoading] = useState(false);
+    // Normalize options from options prop or groups prop
+    const allOptions = useMemo(() => {
+        if (groups === null || groups === void 0 ? void 0 : groups.length) {
+            return groups.flatMap((g) => g.options);
+        }
+        return options;
+    }, [groups, options]);
+    const shouldShowTypeToSearch = async && !query && !optionsLoading && allOptions.length === 0;
+    const currentSize = sizeClasses[size] || sizeClasses.md;
+    const baseInputClass = useMemo(() => buildInputClass('', { disabled, hasError, size }), [disabled, hasError, size]);
+    const chevronIconClass = buildClassName(currentSize.icon, 'stroke-gray-500 group-data-[hover]:stroke-gray-800', 'dark:stroke-gray-300 dark:group-data-[hover]:stroke-gray-100', disabled && 'dark:stroke-gray-600 stroke-gray-400');
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => inputRef.current, [inputRef]);
+    const filteredOptions = useMemo(() => {
+        if (query === '' || async)
+            return allOptions;
+        return allOptions.filter((opt) => {
+            const lbl = typeof opt === 'string' ? opt : opt[labelKey];
+            return lbl === null || lbl === void 0 ? void 0 : lbl.toLowerCase().includes(query.toLowerCase());
+        });
+    }, [allOptions, query, async, labelKey]);
+    const filteredGroups = useMemo(() => {
+        if (!(groups === null || groups === void 0 ? void 0 : groups.length))
+            return null;
+        if (query === '' || async)
+            return groups;
+        return groups
+            .map((g) => ({
+            ...g,
+            options: g.options.filter((opt) => {
+                const lbl = typeof opt === 'string' ? opt : opt[labelKey];
+                return lbl === null || lbl === void 0 ? void 0 : lbl.toLowerCase().includes(query.toLowerCase());
+            }),
+        }))
+            .filter((g) => g.options.length > 0);
+    }, [groups, query, async, labelKey]);
+    const getDisplayValue = useCallback((opt) => {
+        return typeof opt === 'string' ? opt : opt[labelKey];
+    }, [labelKey]);
+    const getValue = useCallback((opt) => {
+        return typeof opt === 'string' ? opt : opt[valueKey];
+    }, [valueKey]);
+    const createFreeTextOption = 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 handleFreeTextCommit = useCallback((queryText) => {
+        const trimmed = queryText.trim();
+        if (!trimmed)
+            return;
+        const existing = allOptions.find((opt) => {
+            const display = getDisplayValue(opt);
+            return (display === null || display === void 0 ? void 0 : display.toLowerCase()) === trimmed.toLowerCase();
+        });
+        const valueToCommit = existing || createFreeTextOption(trimmed);
+        if (multiple) {
+            const current = isArray(selected) ? selected : [];
+            const alreadySelected = current.some((item) => { var _a; return ((_a = getDisplayValue(item)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === trimmed.toLowerCase(); });
+            if (!alreadySelected) {
+                if (maxSelection && current.length >= maxSelection)
+                    return;
+                onChange([...current, valueToCommit]);
+            }
+            setQuery('');
+        }
+        else {
+            onChange(valueToCommit);
+            setQuery('');
+        }
+    }, [
+        allOptions,
+        getDisplayValue,
+        createFreeTextOption,
+        multiple,
+        selected,
+        maxSelection,
+        onChange,
+    ]);
+    const removeSelection = (idx) => {
+        var _a;
+        if (!isArray(selected))
+            return;
+        const next = [...selected];
+        next.splice(idx, 1);
+        onChange(next);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleOnChangeInternal = useCallback((value) => {
+        if (value === null) {
+            onChange(multiple ? [] : null);
+            setQuery('');
+            return;
+        }
+        if (multiple && Array.isArray(value) && maxSelection && value.length > maxSelection) {
+            return;
+        }
+        onChange(value);
+        setQuery('');
+    }, [onChange, multiple, maxSelection]);
+    const comboboxOnChangeWrapper = useCallback((raw) => {
+        if (raw === null || raw === undefined) {
+            handleOnChangeInternal(null);
+            return;
+        }
+        if (Array.isArray(raw)) {
+            const allNulls = raw.length > 0 && raw.every((v) => v === null);
+            if (allNulls) {
+                handleOnChangeInternal([]);
+                return;
+            }
+            handleOnChangeInternal(raw);
+            return;
+        }
+        handleOnChangeInternal(raw);
+    }, [handleOnChangeInternal]);
+    const handleAddAndSelect = useCallback(async (valueToAdd) => {
+        try {
+            const result = await onAdd(valueToAdd);
+            if (result) {
+                handleOnChangeInternal(result);
+            }
+            else {
+                handleOnChangeInternal(valueToAdd);
+            }
+        }
+        catch (err) {
+            console.error('onAdd handler error', err);
+        }
+    }, [onAdd, handleOnChangeInternal]);
+    const onSearchRef = useRef(props.onSearch);
+    useEffect(() => {
+        onSearchRef.current = props.onSearch;
+    }, [props.onSearch]);
+    const handleSearch = 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);
+        }
+    }, []);
+    useEffect(() => {
+        if (async && debouncedQuery)
+            handleSearch(debouncedQuery);
+    }, [debouncedQuery, async, handleSearch]);
+    const normalizedSelected = 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 isAllSelected = useMemo(() => {
+        if (!multiple || !Array.isArray(normalizedSelected) || !allOptions.length)
+            return false;
+        return allOptions.length === normalizedSelected.length;
+    }, [multiple, normalizedSelected, allOptions]);
+    const handleToggleSelectAll = () => {
+        if (isAllSelected) {
+            onChange([]);
+        }
+        else {
+            onChange(allOptions);
+        }
+    };
+    const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
+    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs(Combobox, { multiple: multiple, immediate: immediate, name: name, value: normalizedSelected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, by: (a, b) => (a && b ? getValue(a) === getValue(b) : a === b), children: [multiple ? (jsxs("div", { className: buildClassName(baseInputClass, 'flex flex-wrap gap-2 peer relative', hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), ref: forwardedRef, children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), isArray(normalizedSelected) &&
+                                (normalizedSelected === null || normalizedSelected === void 0 ? void 0 : normalizedSelected.length) > 0 &&
+                                normalizedSelected.map((option, idx) => (jsx(Badge, { theme: "secondary", size: currentSize.badgeSize, removable: !disabled, onRemove: () => removeSelection(idx), children: getDisplayValue(option) }, `${getValue(option)}-${idx}`))), jsx(ComboboxInput, { className: "outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400 bg-transparent", "aria-label": name, value: query, autoComplete: "off", placeholder: (normalizedSelected === null || normalizedSelected === void 0 ? void 0 : normalizedSelected.length) ? '' : placeholder, onChange: (e) => {
+                                    const val = e.target.value;
+                                    if (allowFreeText && multiple && val.includes(',')) {
+                                        const parts = val.split(',');
+                                        parts.forEach((p) => {
+                                            if (p.trim())
+                                                handleFreeTextCommit(p.trim());
+                                        });
+                                        setQuery('');
+                                    }
+                                    else {
+                                        setQuery(val);
+                                    }
+                                }, id: id, ref: inputRef, onKeyDown: (e) => {
+                                    if (allowFreeText && (e.key === 'Enter' || e.key === ',') && query.trim()) {
+                                        e.preventDefault();
+                                        handleFreeTextCommit(query.replace(/,/g, ''));
+                                    }
+                                    else if (multiple && e.key === 'Backspace' && !query) {
+                                        if (Array.isArray(normalizedSelected) && normalizedSelected.length > 0) {
+                                            removeSelection(normalizedSelected.length - 1);
+                                        }
+                                    }
+                                }, onBlur: () => {
+                                    if (allowFreeText && query.trim()) {
+                                        handleFreeTextCommit(query.replace(/,/g, ''));
+                                    }
+                                }, "data-testid": "combobox-input" }), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxs("div", { className: "relative", ref: forwardedRef, children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500 z-10', currentSize.group), children: leftGroup })), jsx(ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: (e) => {
+                                    if (allowFreeText && e.key === 'Enter' && query.trim()) {
+                                        e.preventDefault();
+                                        handleFreeTextCommit(query);
+                                    }
+                                }, onBlur: () => {
+                                    if (allowFreeText && query.trim()) {
+                                        handleFreeTextCommit(query);
+                                    }
+                                }, onFocus: () => {
+                                    setQuery('');
+                                }, className: buildClassName(baseInputClass, hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(normalizedSelected) && (jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4 stroke-gray-500 dark:stroke-gray-300" }) })), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsxs(ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", modal: modalDropdown, className: buildClassName('w-[var(--input-width)] rounded-lg border border-[var(--ui-border)] bg-white dark:bg-gray-800 p-1 shadow-lg max-h-80 overflow-y-auto z-50 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: [multiple && showSelectAll && allOptions.length > 0 && (jsxs("div", { className: "pb-1 mb-1 border-b border-[var(--ui-border-muted)] px-3 pt-1 flex items-center justify-between", children: [jsx("button", { type: "button", onClick: handleToggleSelectAll, className: "text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline cursor-pointer", children: isAllSelected ? 'Deselect All' : 'Select All' }), jsxs("span", { className: "text-[11px] font-medium text-gray-400", children: [Array.isArray(normalizedSelected) ? normalizedSelected.length : 0, " of", ' ', allOptions.length] })] })), optionsLoading ? (jsx(BodyText, { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx(BodyText, { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxs("div", { children: [allowFreeText &&
+                                        query.trim() &&
+                                        !allOptions.some((opt) => { var _a; return ((_a = getDisplayValue(opt)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === query.trim().toLowerCase(); }) && (jsx(ComboboxOption, { value: createFreeTextOption(query.trim()), className: "group flex items-center gap-2 rounded-lg py-1.5 px-3 select-none text-sm data-[focus]:bg-blue-50 dark:data-[focus]:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-medium cursor-pointer w-full", "data-testid": "freetext-option", children: jsxs("span", { children: ["Use \"", query.trim(), "\""] }) }, `freetext-${query.trim()}`)), filteredGroups
+                                        ? filteredGroups.map((grp, gIdx) => (jsxs("div", { children: [jsx("div", { className: "text-[11px] font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 px-3 py-1 select-none", children: grp.group }), grp.options.map((option) => {
+                                                    const optVal = getValue(option);
+                                                    const isOptSelected = multiple
+                                                        ? isArray(normalizedSelected) &&
+                                                            normalizedSelected.some((s) => getValue(s) === optVal)
+                                                        : normalizedSelected && getValue(normalizedSelected) === optVal;
+                                                    return (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-gray-100 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: renderOption ? (renderOption(option, Boolean(isOptSelected))) : (jsxs("div", { className: "flex items-center justify-between gap-2 text-gray-900 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] })) }, optVal));
+                                                })] }, gIdx)))
+                                        : /* Render Standard Flat Options */
+                                            filteredOptions.map((option) => {
+                                                const optVal = getValue(option);
+                                                const isOptSelected = multiple
+                                                    ? isArray(normalizedSelected) &&
+                                                        normalizedSelected.some((s) => getValue(s) === optVal)
+                                                    : normalizedSelected && getValue(normalizedSelected) === optVal;
+                                                return (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-gray-100 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: renderOption ? (renderOption(option, Boolean(isOptSelected))) : (jsxs("div", { className: "flex items-center justify-between gap-2 text-gray-900 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] })) }, optVal));
+                                            }), filteredOptions.length === 0 &&
+                                        !(filteredGroups === null || filteredGroups === void 0 ? void 0 : filteredGroups.length) &&
+                                        !allowFreeText &&
+                                        !(allowAdd && query.trim()) && (jsxs("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none", children: [jsx(TextContent, { muted: true, small: true, children: noOptionsText }), jsx(TextContent, { strong: true, small: true, children: query })] })), !allowFreeText && allowAdd && Boolean(query.trim()) && (jsx(ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 data-[focus]:bg-gray-100 dark:data-[focus]:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(SvgCirclePlus, { className: "size-4.5" }), jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }, `add-${query.trim()}`))] }))] })] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) })), !error && helperText && (jsx("div", { className: "mt-1", children: jsx(TextContent, { muted: true, small: true, children: helperText }) }))] }));
+});
+SelectBox.displayName = 'SelectBox';
+
+export { SelectBox };
+//# sourceMappingURL=SelectBox.js.map

package/dist/es/components/SelectBox/SelectBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBox.js","sources":["../../../../../src/components/SelectBox/SelectBox.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport {\n  Combobox,\n  ComboboxButton,\n  ComboboxInput,\n  ComboboxOption,\n  ComboboxOptions,\n} from '@headlessui/react'\n\nimport { Label } from '../Label'\nimport { Badge } from '../Badge'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport { Button } from '../Button'\nimport { MobilePicker } from '../MobilePicker'\n\nimport { isArray } from '../../utils/is-array'\nimport { buildClassName } from '../../utils/build-classname'\nimport { isEmpty } from '../../utils/is-empty'\nimport { useDebounce } from '../../hooks/use-debounce'\n\nimport CheckIcon from '../Icons/Check.svg'\nimport ChevronDownIcon from '../Icons/ChevronDown.svg'\nimport XIcon from '../Icons/X.svg'\nimport CirclePlusIcon from '../Icons/CirclePlus.svg'\nimport type { BaseOption, SelectBoxProps, SelectBoxSize } from './SelectBox.types'\nimport { buildInputClass } from '../Input'\nimport { BodyText } from '../BodyText'\n\nconst sizeClasses: Record<\n  SelectBoxSize,\n  { input: string; group: string; icon: string; badgeSize: 'sm' | 'md' }\n> = {\n  sm: {\n    input: 'px-2.5 py-1.5 text-xs leading-5 min-h-[32px]',\n    group: 'w-8 text-xs',\n    icon: 'size-3.5',\n    badgeSize: 'sm',\n  },\n  md: {\n    input: 'px-3.5 py-2 text-sm leading-6 min-h-[38px]',\n    group: 'w-10 text-sm',\n    icon: 'size-4',\n    badgeSize: 'md',\n  },\n  lg: {\n    input: 'px-4 py-2.5 text-base leading-7 min-h-[46px]',\n    group: 'w-12 text-base',\n    icon: 'size-5',\n    badgeSize: 'md',\n  },\n}\n\nexport const SelectBox = forwardRef(\n  <T extends BaseOption | string = BaseOption>(\n    props: SelectBoxProps<T>,\n    forwardedRef: React.Ref<HTMLInputElement | HTMLDivElement | null>,\n  ) => {\n    const {\n      labelKey = 'label',\n      valueKey = 'value',\n      name,\n      id = name,\n      options = [],\n      groups,\n      selected,\n      size = 'md',\n      label = null,\n      labelWrapperClass = '',\n      labelClass = '',\n      labelHint = null,\n      disabled = false,\n      containerClass = '',\n      onChange = () => {},\n      placeholder,\n      dropdownContainerClass = 'z-20',\n      multiple = false,\n      maxSelection,\n      showSelectAll = false,\n      immediate = true,\n      showErrorMessage = true,\n      error = null,\n      helperText,\n      leftGroup,\n      renderOption,\n      async = false,\n      searchable = true,\n      required = false,\n      allowAdd = false,\n      addNewText = 'Create',\n      onAdd = () => {},\n      allowClear = false,\n      allowFreeText = false,\n      modalDropdown = false,\n      noOptionsText = 'No options available',\n    } = props\n\n    if (props.asBottomSheet || props.mobileMode === 'sheet') {\n      return <MobilePicker {...(props as any)} />\n    }\n\n    const hasError = Boolean(error)\n    const [query, setQuery] = useState('')\n    const debouncedQuery = useDebounce(query, 500)\n    const [optionsLoading, setOptionsLoading] = useState(false)\n\n    // Normalize options from options prop or groups prop\n    const allOptions = useMemo(() => {\n      if (groups?.length) {\n        return groups.flatMap((g) => g.options)\n      }\n      return options\n    }, [groups, options])\n\n    const shouldShowTypeToSearch = async && !query && !optionsLoading && allOptions.length === 0\n    const currentSize = sizeClasses[size] || sizeClasses.md\n\n    const baseInputClass = useMemo(\n      () => buildInputClass('', { disabled, hasError, size }),\n      [disabled, hasError, size],\n    )\n\n    const chevronIconClass = buildClassName(\n      currentSize.icon,\n      'stroke-gray-500 group-data-[hover]:stroke-gray-800',\n      'dark:stroke-gray-300 dark:group-data-[hover]:stroke-gray-100',\n      disabled && 'dark:stroke-gray-600 stroke-gray-400',\n    )\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    const containerRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(forwardedRef, () => inputRef.current!, [inputRef])\n\n    const filteredOptions = useMemo(() => {\n      if (query === '' || async) return allOptions\n      return allOptions.filter((opt) => {\n        const lbl = typeof opt === 'string' ? opt : (opt as BaseOption)[labelKey]\n        return lbl?.toLowerCase().includes(query.toLowerCase())\n      })\n    }, [allOptions, query, async, labelKey])\n\n    const filteredGroups = useMemo(() => {\n      if (!groups?.length) return null\n      if (query === '' || async) return groups\n\n      return groups\n        .map((g) => ({\n          ...g,\n          options: g.options.filter((opt) => {\n            const lbl = typeof opt === 'string' ? opt : (opt as BaseOption)[labelKey]\n            return lbl?.toLowerCase().includes(query.toLowerCase())\n          }),\n        }))\n        .filter((g) => g.options.length > 0)\n    }, [groups, query, async, labelKey])\n\n    const getDisplayValue = useCallback(\n      (opt: T) => {\n        return typeof opt === 'string' ? opt : opt[labelKey]\n      },\n      [labelKey],\n    )\n\n    const getValue = useCallback(\n      (opt: T) => {\n        return typeof opt === 'string' ? opt : opt[valueKey]\n      },\n      [valueKey],\n    )\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 handleFreeTextCommit = useCallback(\n      (queryText: string) => {\n        const trimmed = queryText.trim()\n        if (!trimmed) return\n\n        const existing = allOptions.find((opt) => {\n          const display = getDisplayValue(opt)\n          return display?.toLowerCase() === trimmed.toLowerCase()\n        })\n\n        const valueToCommit = existing || createFreeTextOption(trimmed)\n\n        if (multiple) {\n          const current = isArray(selected) ? selected : []\n          const alreadySelected = current.some(\n            (item) => getDisplayValue(item)?.toLowerCase() === trimmed.toLowerCase(),\n          )\n          if (!alreadySelected) {\n            if (maxSelection && current.length >= maxSelection) return\n            onChange([...current, valueToCommit] as unknown as T[])\n          }\n          setQuery('')\n        } else {\n          onChange(valueToCommit)\n          setQuery('')\n        }\n      },\n      [\n        allOptions,\n        getDisplayValue,\n        createFreeTextOption,\n        multiple,\n        selected,\n        maxSelection,\n        onChange,\n      ],\n    )\n\n    const removeSelection = (idx: number) => {\n      if (!isArray(selected)) return\n      const next = [...selected]\n      next.splice(idx, 1)\n      onChange(next)\n      inputRef.current?.focus()\n    }\n\n    const handleOnChangeInternal = useCallback(\n      (value: T | T[] | null) => {\n        if (value === null) {\n          onChange(multiple ? ([] as T[]) : null)\n          setQuery('')\n          return\n        }\n\n        if (multiple && Array.isArray(value) && maxSelection && value.length > maxSelection) {\n          return\n        }\n\n        onChange(value as T | T[])\n        setQuery('')\n      },\n      [onChange, multiple, maxSelection],\n    )\n\n    const comboboxOnChangeWrapper = useCallback(\n      (raw: unknown) => {\n        if (raw === null || raw === undefined) {\n          handleOnChangeInternal(null)\n          return\n        }\n\n        if (Array.isArray(raw)) {\n          const allNulls = raw.length > 0 && raw.every((v) => v === null)\n          if (allNulls) {\n            handleOnChangeInternal([] as unknown as T[])\n            return\n          }\n          handleOnChangeInternal(raw as unknown as T[])\n          return\n        }\n\n        handleOnChangeInternal(raw as unknown as T)\n      },\n      [handleOnChangeInternal],\n    )\n\n    const handleAddAndSelect = useCallback(\n      async (valueToAdd: string) => {\n        try {\n          const result = await onAdd(valueToAdd)\n          if (result) {\n            handleOnChangeInternal(result as unknown as T)\n          } else {\n            handleOnChangeInternal(valueToAdd as unknown as T)\n          }\n        } catch (err) {\n          console.error('onAdd handler error', err)\n        }\n      },\n      [onAdd, handleOnChangeInternal],\n    )\n\n    const onSearchRef = useRef(props.onSearch)\n    useEffect(() => {\n      onSearchRef.current = props.onSearch\n    }, [props.onSearch])\n\n    const handleSearch = 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 (async && debouncedQuery) handleSearch(debouncedQuery)\n    }, [debouncedQuery, async, handleSearch])\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 isAllSelected = useMemo(() => {\n      if (!multiple || !Array.isArray(normalizedSelected) || !allOptions.length) return false\n      return allOptions.length === normalizedSelected.length\n    }, [multiple, normalizedSelected, allOptions])\n\n    const handleToggleSelectAll = () => {\n      if (isAllSelected) {\n        onChange([] as unknown as T[])\n      } else {\n        onChange(allOptions as unknown as T[])\n      }\n    }\n\n    const hasLeftGroup = leftGroup != null && leftGroup !== undefined\n\n    return (\n      <div\n        className={buildClassName('group space-y-2', hasError && 'has-error', containerClass)}\n        ref={containerRef}\n      >\n        {label && (\n          <div className={buildClassName('flex items-center justify-between', labelWrapperClass)}>\n            <Label className={labelClass} htmlFor={id} aria-required={required}>\n              {label}\n            </Label>\n            {labelHint && <TextContent xsmall>{labelHint}</TextContent>}\n          </div>\n        )}\n\n        <Combobox\n          multiple={multiple}\n          immediate={immediate}\n          name={name}\n          value={normalizedSelected as any}\n          onChange={comboboxOnChangeWrapper as any}\n          onClose={() => setQuery('')}\n          disabled={disabled}\n          by={(a: any, b: any) => (a && b ? getValue(a) === getValue(b) : a === b)}\n        >\n          {multiple ? (\n            <div\n              className={buildClassName(\n                baseInputClass,\n                'flex flex-wrap gap-2 peer relative',\n                hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '',\n              )}\n              ref={forwardedRef as any}\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              {isArray(normalizedSelected) &&\n                normalizedSelected?.length > 0 &&\n                normalizedSelected.map((option, idx) => (\n                  <Badge\n                    key={`${getValue(option)}-${idx}`}\n                    theme=\"secondary\"\n                    size={currentSize.badgeSize}\n                    removable={!disabled}\n                    onRemove={() => removeSelection(idx)}\n                  >\n                    {getDisplayValue(option)}\n                  </Badge>\n                ))}\n\n              <ComboboxInput\n                className=\"outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400 bg-transparent\"\n                aria-label={name}\n                value={query}\n                autoComplete=\"off\"\n                placeholder={normalizedSelected?.length ? '' : placeholder}\n                onChange={(e) => {\n                  const val = e.target.value\n                  if (allowFreeText && multiple && val.includes(',')) {\n                    const parts = val.split(',')\n                    parts.forEach((p) => {\n                      if (p.trim()) handleFreeTextCommit(p.trim())\n                    })\n                    setQuery('')\n                  } else {\n                    setQuery(val)\n                  }\n                }}\n                id={id}\n                ref={inputRef}\n                onKeyDown={(e) => {\n                  if (allowFreeText && (e.key === 'Enter' || e.key === ',') && query.trim()) {\n                    e.preventDefault()\n                    handleFreeTextCommit(query.replace(/,/g, ''))\n                  } else if (multiple && e.key === 'Backspace' && !query) {\n                    if (Array.isArray(normalizedSelected) && normalizedSelected.length > 0) {\n                      removeSelection(normalizedSelected.length - 1)\n                    }\n                  }\n                }}\n                onBlur={() => {\n                  if (allowFreeText && query.trim()) {\n                    handleFreeTextCommit(query.replace(/,/g, ''))\n                  }\n                }}\n                data-testid=\"combobox-input\"\n              />\n\n              <ComboboxButton\n                className=\"group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center\"\n                data-testid=\"combobox-button\"\n              >\n                <ChevronDownIcon className={chevronIconClass} />\n              </ComboboxButton>\n            </div>\n          ) : (\n            <div className=\"relative\" ref={forwardedRef as any}>\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 z-10',\n                    currentSize.group,\n                  )}\n                >\n                  {leftGroup}\n                </span>\n              )}\n\n              <ComboboxInput\n                aria-label={name}\n                displayValue={(option: any) => (option ? getDisplayValue(option) : null)}\n                autoComplete=\"off\"\n                placeholder={placeholder}\n                onChange={(event) => setQuery(event.target.value)}\n                onKeyDown={(e) => {\n                  if (allowFreeText && e.key === 'Enter' && query.trim()) {\n                    e.preventDefault()\n                    handleFreeTextCommit(query)\n                  }\n                }}\n                onBlur={() => {\n                  if (allowFreeText && query.trim()) {\n                    handleFreeTextCommit(query)\n                  }\n                }}\n                onFocus={() => {\n                  setQuery('')\n                }}\n                className={buildClassName(\n                  baseInputClass,\n                  hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '',\n                )}\n                disabled={disabled}\n                id={id}\n                readOnly={!searchable}\n                ref={inputRef}\n                data-testid=\"combobox-input\"\n              />\n\n              {allowClear && !isEmpty(normalizedSelected) && (\n                <Button\n                  size=\"xs\"\n                  iconOnly\n                  aria-label=\"Clear selection\"\n                  theme=\"secondary\"\n                  variant=\"plain\"\n                  className=\"group absolute inset-y-0 right-8 h-6 top-2\"\n                  onClick={() => handleOnChangeInternal(multiple ? ([] as T[]) : null)}\n                  disabled={disabled}\n                  data-testid=\"combobox-clear-button\"\n                  noOutlineOnFocus\n                >\n                  <XIcon className=\"size-4 stroke-gray-500 dark:stroke-gray-300\" />\n                </Button>\n              )}\n\n              <ComboboxButton\n                className=\"group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center\"\n                data-testid=\"combobox-button\"\n              >\n                <ChevronDownIcon className={chevronIconClass} />\n              </ComboboxButton>\n            </div>\n          )}\n\n          <ComboboxOptions\n            anchor={{ to: 'bottom', gap: 5 }}\n            as=\"div\"\n            modal={modalDropdown}\n            className={buildClassName(\n              'w-[var(--input-width)] rounded-lg border border-[var(--ui-border)] bg-white dark:bg-gray-800 p-1 shadow-lg max-h-80 overflow-y-auto z-50 [--anchor-gap:var(--spacing-1)]',\n              '[--anchor-max-height:20rem]',\n              'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0',\n              dropdownContainerClass,\n            )}\n            transition\n            data-testid=\"combobox-options\"\n          >\n            {/* Multi-Select \"Select All\" Action Bar */}\n            {multiple && showSelectAll && allOptions.length > 0 && (\n              <div className=\"pb-1 mb-1 border-b border-[var(--ui-border-muted)] px-3 pt-1 flex items-center justify-between\">\n                <button\n                  type=\"button\"\n                  onClick={handleToggleSelectAll}\n                  className=\"text-xs 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-[11px] font-medium text-gray-400\">\n                  {Array.isArray(normalizedSelected) ? normalizedSelected.length : 0} of{' '}\n                  {allOptions.length}\n                </span>\n              </div>\n            )}\n\n            {optionsLoading ? (\n              <BodyText\n                data-testid=\"options-loading\"\n                className=\"flex items-center justify-center py-2 px-3 select-none\"\n              >\n                <Loader size=\"sm\" />\n              </BodyText>\n            ) : shouldShowTypeToSearch ? (\n              <BodyText className=\"flex items-center justify-between py-2 px-3 select-none\">\n                Type to search...\n              </BodyText>\n            ) : (\n              <div>\n                {/* Render Free-Text Option if query does not match an option exactly */}\n                {allowFreeText &&\n                  query.trim() &&\n                  !allOptions.some(\n                    (opt) => getDisplayValue(opt)?.toLowerCase() === query.trim().toLowerCase(),\n                  ) && (\n                    <ComboboxOption\n                      key={`freetext-${query.trim()}`}\n                      value={createFreeTextOption(query.trim()) as any}\n                      className=\"group flex items-center gap-2 rounded-lg py-1.5 px-3 select-none text-sm data-[focus]:bg-blue-50 dark:data-[focus]:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-medium cursor-pointer w-full\"\n                      data-testid=\"freetext-option\"\n                    >\n                      <span>Use \"{query.trim()}\"</span>\n                    </ComboboxOption>\n                  )}\n\n                {/* Render Grouped Options */}\n                {filteredGroups\n                  ? filteredGroups.map((grp, gIdx) => (\n                      <div key={gIdx}>\n                        <div className=\"text-[11px] font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 px-3 py-1 select-none\">\n                          {grp.group}\n                        </div>\n                        {grp.options.map((option) => {\n                          const optVal = getValue(option)\n                          const isOptSelected = multiple\n                            ? isArray(normalizedSelected) &&\n                              normalizedSelected.some((s) => getValue(s) === optVal)\n                            : normalizedSelected && getValue(normalizedSelected as T) === optVal\n\n                          return (\n                            <ComboboxOption\n                              key={optVal}\n                              disabled={(option as BaseOption).disabled}\n                              value={option}\n                              className=\"group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-gray-100 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none\"\n                            >\n                              {renderOption ? (\n                                renderOption(option, Boolean(isOptSelected))\n                              ) : (\n                                <div className=\"flex items-center justify-between gap-2 text-gray-900 dark:text-white group-data-[selected]:text-blue-600\">\n                                  <span className=\"text-sm/6\">{getDisplayValue(option)}</span>\n                                  <CheckIcon className=\"invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible\" />\n                                </div>\n                              )}\n                            </ComboboxOption>\n                          )\n                        })}\n                      </div>\n                    ))\n                  : /* Render Standard Flat Options */\n                    filteredOptions.map((option) => {\n                      const optVal = getValue(option)\n                      const isOptSelected = multiple\n                        ? isArray(normalizedSelected) &&\n                          normalizedSelected.some((s) => getValue(s) === optVal)\n                        : normalizedSelected && getValue(normalizedSelected as T) === optVal\n\n                      return (\n                        <ComboboxOption\n                          key={optVal}\n                          disabled={(option as BaseOption).disabled}\n                          value={option}\n                          className=\"group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-gray-100 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none\"\n                        >\n                          {renderOption ? (\n                            renderOption(option, Boolean(isOptSelected))\n                          ) : (\n                            <div className=\"flex items-center justify-between gap-2 text-gray-900 dark:text-white group-data-[selected]:text-blue-600\">\n                              <span className=\"text-sm/6\">{getDisplayValue(option)}</span>\n                              <CheckIcon className=\"invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible\" />\n                            </div>\n                          )}\n                        </ComboboxOption>\n                      )\n                    })}\n\n                {filteredOptions.length === 0 &&\n                  !filteredGroups?.length &&\n                  !allowFreeText &&\n                  !(allowAdd && query.trim()) && (\n                    <div\n                      data-testid=\"no-result-found\"\n                      className=\"flex items-center gap-2 py-1.5 px-3 select-none\"\n                    >\n                      <TextContent muted small>\n                        {noOptionsText}\n                      </TextContent>\n                      <TextContent strong small>\n                        {query}\n                      </TextContent>\n                    </div>\n                  )}\n\n                {/* Creatable option (allowAdd) - suppressed when allowFreeText is true */}\n                {!allowFreeText && allowAdd && Boolean(query.trim()) && (\n                  <ComboboxOption\n                    key={`add-${query.trim()}`}\n                    value={query}\n                    className=\"group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 data-[focus]:bg-gray-100 dark:data-[focus]:bg-gray-700\"\n                    onClick={() => void handleAddAndSelect(query)}\n                  >\n                    <div className=\"flex items-center gap-2\">\n                      <CirclePlusIcon className=\"size-4.5\" />\n                      <TextContent>\n                        {addNewText} \"{query}\"\n                      </TextContent>\n                    </div>\n                  </ComboboxOption>\n                )}\n              </div>\n            )}\n          </ComboboxOptions>\n        </Combobox>\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      </div>\n    )\n  },\n)\n\nSelectBox.displayName = 'SelectBox'\n"],"names":["_jsx","_jsxs","ChevronDownIcon","XIcon","CheckIcon","CirclePlusIcon"],"mappings":"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"}

package/dist/es/components/Skeleton/Skeleton.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const VARIANT_CLASS = {
+    text: 'rounded-md h-4 w-full my-1',
+    circular: 'rounded-full shrink-0',
+    rectangular: 'rounded-none w-full h-24',
+    rounded: 'rounded-xl w-full h-24',
+};
+const ANIMATION_CLASS = {
+    pulse: 'animate-pulse bg-gray-200 dark:bg-gray-700',
+    wave: 'bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-800 bg-[length:200%_100%] animate-[shimmer_1.5s_infinite]',
+    none: 'bg-gray-200 dark:bg-gray-700',
+};
+const Skeleton = forwardRef((props, ref) => {
+    const { as, variant = 'text', animation = 'pulse', width, height, borderRadius, className, style: customStyle, ...restProps } = props;
+    const Component = as || 'div';
+    const inlineStyles = {
+        ...(width !== undefined ? { width: typeof width === 'number' ? `${width}px` : width } : {}),
+        ...(height !== undefined
+            ? { height: typeof height === 'number' ? `${height}px` : height }
+            : {}),
+        ...(borderRadius !== undefined
+            ? { borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius }
+            : {}),
+        ...customStyle,
+    };
+    return (jsx(Component, { ref: ref, "aria-hidden": "true", style: inlineStyles, className: buildClassName('block select-none pointer-events-none', VARIANT_CLASS[variant], ANIMATION_CLASS[animation], className), "data-testid": "skeleton", ...restProps }));
+});
+Skeleton.displayName = 'Skeleton';
+
+export { Skeleton };
+//# sourceMappingURL=Skeleton.js.map

package/dist/es/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef, type ElementType } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { SkeletonComponent, SkeletonProps } from './Skeleton.types'\nimport type { PolymorphicRef } from '../common-type'\n\nconst VARIANT_CLASS: Record<string, string> = {\n  text: 'rounded-md h-4 w-full my-1',\n  circular: 'rounded-full shrink-0',\n  rectangular: 'rounded-none w-full h-24',\n  rounded: 'rounded-xl w-full h-24',\n}\n\nconst ANIMATION_CLASS: Record<string, string> = {\n  pulse: 'animate-pulse bg-gray-200 dark:bg-gray-700',\n  wave: 'bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-800 bg-[length:200%_100%] animate-[shimmer_1.5s_infinite]',\n  none: 'bg-gray-200 dark:bg-gray-700',\n}\n\nexport const Skeleton = forwardRef((props: any, ref: any) => {\n  const {\n    as,\n    variant = 'text',\n    animation = 'pulse',\n    width,\n    height,\n    borderRadius,\n    className,\n    style: customStyle,\n    ...restProps\n  } = props as SkeletonProps\n\n  const Component = as || 'div'\n\n  const inlineStyles: React.CSSProperties = {\n    ...(width !== undefined ? { width: typeof width === 'number' ? `${width}px` : width } : {}),\n    ...(height !== undefined\n      ? { height: typeof height === 'number' ? `${height}px` : height }\n      : {}),\n    ...(borderRadius !== undefined\n      ? { borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius }\n      : {}),\n    ...customStyle,\n  }\n\n  return (\n    <Component\n      ref={ref as PolymorphicRef<ElementType>}\n      aria-hidden=\"true\"\n      style={inlineStyles}\n      className={buildClassName(\n        'block select-none pointer-events-none',\n        VARIANT_CLASS[variant],\n        ANIMATION_CLASS[animation],\n        className,\n      )}\n      data-testid=\"skeleton\"\n      {...restProps}\n    />\n  )\n}) as SkeletonComponent\n\nSkeleton.displayName = 'Skeleton'\n"],"names":["_jsx"],"mappings":";;;;AAKA,MAAM,aAAa,GAA2B;AAC5C,IAAA,IAAI,EAAE,4BAA4B;AAClC,IAAA,QAAQ,EAAE,uBAAuB;AACjC,IAAA,WAAW,EAAE,0BAA0B;AACvC,IAAA,OAAO,EAAE,wBAAwB;CAClC;AAED,MAAM,eAAe,GAA2B;AAC9C,IAAA,KAAK,EAAE,4CAA4C;AACnD,IAAA,IAAI,EAAE,qKAAqK;AAC3K,IAAA,IAAI,EAAE,8BAA8B;CACrC;AAEM,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,KAAU,EAAE,GAAQ,KAAI;AAC1D,IAAA,MAAM,EACJ,EAAE,EACF,OAAO,GAAG,MAAM,EAChB,SAAS,GAAG,OAAO,EACnB,KAAK,EACL,MAAM,EACN,YAAY,EACZ,SAAS,EACT,KAAK,EAAE,WAAW,EAClB,GAAG,SAAS,EACb,GAAG,KAAsB;AAE1B,IAAA,MAAM,SAAS,GAAG,EAAE,IAAI,KAAK;AAE7B,IAAA,MAAM,YAAY,GAAwB;AACxC,QAAA,IAAI,KAAK,KAAK,SAAS,GAAG,EAAE,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,GAAG,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI,GAAG,KAAK,EAAE,GAAG,EAAE,CAAC;QAC3F,IAAI,MAAM,KAAK;AACb,cAAE,EAAE,MAAM,EAAE,OAAO,MAAM,KAAK,QAAQ,GAAG,GAAG,MAAM,CAAA,EAAA,CAAI,GAAG,MAAM;cAC7D,EAAE,CAAC;QACP,IAAI,YAAY,KAAK;AACnB,cAAE,EAAE,YAAY,EAAE,OAAO,YAAY,KAAK,QAAQ,GAAG,GAAG,YAAY,CAAA,EAAA,CAAI,GAAG,YAAY;cACrF,EAAE,CAAC;AACP,QAAA,GAAG,WAAW;KACf;AAED,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAkC,EAAA,aAAA,EAC3B,MAAM,EAClB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,cAAc,CACvB,uCAAuC,EACvC,aAAa,CAAC,OAAO,CAAC,EACtB,eAAe,CAAC,SAAS,CAAC,EAC1B,SAAS,CACV,EAAA,aAAA,EACW,UAAU,KAClB,SAAS,EAAA,CACb;AAEN,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/es/components/StatusPill/StatusPill.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const THEME_PILL_CLASS = {
+    success: {
+        bg: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border-emerald-500/20 dark:border-emerald-500/30',
+        dot: 'bg-emerald-500',
+    },
+    warning: {
+        bg: 'bg-amber-500/10 text-amber-700 dark:text-amber-300 border-amber-500/20 dark:border-amber-500/30',
+        dot: 'bg-amber-500',
+    },
+    danger: {
+        bg: 'bg-rose-500/10 text-rose-700 dark:text-rose-300 border-rose-500/20 dark:border-rose-500/30',
+        dot: 'bg-rose-500',
+    },
+    info: {
+        bg: 'bg-blue-500/10 text-blue-700 dark:text-blue-300 border-blue-500/20 dark:border-blue-500/30',
+        dot: 'bg-blue-500',
+    },
+    secondary: {
+        bg: 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/20 dark:border-gray-500/30',
+        dot: 'bg-gray-400',
+    },
+};
+const SIZE_CLASS = {
+    sm: 'px-2.5 py-0.5 text-xs',
+    md: 'px-3 py-1 text-sm',
+};
+const DOT_SIZE_CLASS = {
+    sm: 'size-1.5',
+    md: 'size-2',
+};
+const StatusPill = forwardRef((props, ref) => {
+    var _a;
+    const { theme = 'secondary', size = 'sm', dot = true, pulse = false, className, children, ...restProps } = props;
+    const style = (_a = THEME_PILL_CLASS[theme]) !== null && _a !== void 0 ? _a : THEME_PILL_CLASS.secondary;
+    return (jsxs("span", { ref: ref, className: buildClassName('inline-flex items-center gap-1.5 rounded-full border font-semibold whitespace-nowrap transition-colors', SIZE_CLASS[size], style.bg, className), "data-testid": `status-pill-${theme}`, ...restProps, children: [dot && (jsx("span", { className: buildClassName('shrink-0 rounded-full', DOT_SIZE_CLASS[size], style.dot, pulse ? 'animate-pulse' : ''), "data-testid": "status-pill-dot", "aria-hidden": "true" })), jsx("span", { children: children })] }));
+});
+StatusPill.displayName = 'StatusPill';
+
+export { StatusPill };
+//# sourceMappingURL=StatusPill.js.map

package/dist/es/components/StatusPill/StatusPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.js","sources":["../../../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { StatusPillProps } from './StatusPill.types'\n\nconst THEME_PILL_CLASS: Record<string, { bg: string; dot: string }> = {\n  success: {\n    bg: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border-emerald-500/20 dark:border-emerald-500/30',\n    dot: 'bg-emerald-500',\n  },\n  warning: {\n    bg: 'bg-amber-500/10 text-amber-700 dark:text-amber-300 border-amber-500/20 dark:border-amber-500/30',\n    dot: 'bg-amber-500',\n  },\n  danger: {\n    bg: 'bg-rose-500/10 text-rose-700 dark:text-rose-300 border-rose-500/20 dark:border-rose-500/30',\n    dot: 'bg-rose-500',\n  },\n  info: {\n    bg: 'bg-blue-500/10 text-blue-700 dark:text-blue-300 border-blue-500/20 dark:border-blue-500/30',\n    dot: 'bg-blue-500',\n  },\n  secondary: {\n    bg: 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/20 dark:border-gray-500/30',\n    dot: 'bg-gray-400',\n  },\n}\n\nconst SIZE_CLASS: Record<string, string> = {\n  sm: 'px-2.5 py-0.5 text-xs',\n  md: 'px-3 py-1 text-sm',\n}\n\nconst DOT_SIZE_CLASS: Record<string, string> = {\n  sm: 'size-1.5',\n  md: 'size-2',\n}\n\nexport const StatusPill = forwardRef<HTMLSpanElement, StatusPillProps>((props, ref) => {\n  const {\n    theme = 'secondary',\n    size = 'sm',\n    dot = true,\n    pulse = false,\n    className,\n    children,\n    ...restProps\n  } = props\n\n  const style = THEME_PILL_CLASS[theme] ?? THEME_PILL_CLASS.secondary\n\n  return (\n    <span\n      ref={ref}\n      className={buildClassName(\n        'inline-flex items-center gap-1.5 rounded-full border font-semibold whitespace-nowrap transition-colors',\n        SIZE_CLASS[size],\n        style.bg,\n        className,\n      )}\n      data-testid={`status-pill-${theme}`}\n      {...restProps}\n    >\n      {dot && (\n        <span\n          className={buildClassName(\n            'shrink-0 rounded-full',\n            DOT_SIZE_CLASS[size],\n            style.dot,\n            pulse ? 'animate-pulse' : '',\n          )}\n          data-testid=\"status-pill-dot\"\n          aria-hidden=\"true\"\n        />\n      )}\n      <span>{children}</span>\n    </span>\n  )\n})\n\nStatusPill.displayName = 'StatusPill'\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA,MAAM,gBAAgB,GAAgD;AACpE,IAAA,OAAO,EAAE;AACP,QAAA,EAAE,EAAE,2GAA2G;AAC/G,QAAA,GAAG,EAAE,gBAAgB;AACtB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,EAAE,EAAE,iGAAiG;AACrG,QAAA,GAAG,EAAE,cAAc;AACpB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,EAAE,EAAE,4FAA4F;AAChG,QAAA,GAAG,EAAE,aAAa;AACnB,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,4FAA4F;AAChG,QAAA,GAAG,EAAE,aAAa;AACnB,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,EAAE,4FAA4F;AAChG,QAAA,GAAG,EAAE,aAAa;AACnB,KAAA;CACF;AAED,MAAM,UAAU,GAA2B;AACzC,IAAA,EAAE,EAAE,uBAAuB;AAC3B,IAAA,EAAE,EAAE,mBAAmB;CACxB;AAED,MAAM,cAAc,GAA2B;AAC7C,IAAA,EAAE,EAAE,UAAU;AACd,IAAA,EAAE,EAAE,QAAQ;CACb;AAEM,MAAM,UAAU,GAAG,UAAU,CAAmC,CAAC,KAAK,EAAE,GAAG,KAAI;;IACpF,MAAM,EACJ,KAAK,GAAG,WAAW,EACnB,IAAI,GAAG,IAAI,EACX,GAAG,GAAG,IAAI,EACV,KAAK,GAAG,KAAK,EACb,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK;IAET,MAAM,KAAK,GAAG,CAAA,EAAA,GAAA,gBAAgB,CAAC,KAAK,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,gBAAgB,CAAC,SAAS;AAEnE,IAAA,QACEA,IAAA,CAAA,MAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,CACvB,wGAAwG,EACxG,UAAU,CAAC,IAAI,CAAC,EAChB,KAAK,CAAC,EAAE,EACR,SAAS,CACV,EAAA,aAAA,EACY,CAAA,YAAA,EAAe,KAAK,CAAA,CAAE,KAC/B,SAAS,EAAA,QAAA,EAAA,CAEZ,GAAG,KACFC,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,uBAAuB,EACvB,cAAc,CAAC,IAAI,CAAC,EACpB,KAAK,CAAC,GAAG,EACT,KAAK,GAAG,eAAe,GAAG,EAAE,CAC7B,EAAA,aAAA,EACW,iBAAiB,EAAA,aAAA,EACjB,MAAM,EAAA,CAClB,CACH,EACDA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,QAAQ,EAAA,CAAQ,CAAA,EAAA,CAClB;AAEX,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/es/components/StickyActionBar/StickyActionBar.js

@@ -0,0 +1,20 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+import { Drawer } from '../Drawer/Drawer.js';
+
+const ChevronUpIcon = ({ className }) => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: jsx("polyline", { points: "18 15 12 9 6 15" }) }));
+const StickyActionBar = forwardRef((props, ref) => {
+    const { summaryContent, actionsContent, drawerContent, drawerTitle = 'Summary Details', position = 'fixed', containerMaxWidth = 'max-w-5xl', className, ...restProps } = props;
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+    const positionClass = position === 'fixed'
+        ? 'fixed bottom-0 left-0 right-0 z-30'
+        : position === 'sticky'
+            ? 'sticky bottom-0 z-30'
+            : 'relative z-10';
+    return (jsxs(Fragment, { children: [jsx("div", { ref: ref, className: buildClassName(positionClass, 'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all', className), "data-testid": "sticky-action-bar", ...restProps, children: jsxs("div", { className: buildClassName('mx-auto flex items-center justify-between gap-3', containerMaxWidth), children: [summaryContent && (jsx("div", { className: "flex items-center gap-2", children: drawerContent ? (jsxs("button", { type: "button", onClick: () => setIsDrawerOpen(true), className: "flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1", "aria-label": "Expand summary details", "data-testid": "summary-trigger", children: [jsx("div", { children: summaryContent }), jsx(ChevronUpIcon, { className: "size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0" })] })) : (jsx("div", { children: summaryContent })) })), actionsContent && (jsx("div", { className: "flex items-center gap-2 shrink-0 ml-auto", "data-testid": "actions-stack", children: actionsContent }))] }) }), drawerContent && (jsx(Drawer, { isOpen: isDrawerOpen, onClose: () => setIsDrawerOpen(false), align: "bottom", size: "full", title: drawerTitle, showBackButton: true, contentClass: "px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto", children: drawerContent }))] }));
+});
+StickyActionBar.displayName = 'StickyActionBar';
+
+export { StickyActionBar };
+//# sourceMappingURL=StickyActionBar.js.map

package/dist/es/components/StickyActionBar/StickyActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyActionBar.js","sources":["../../../../../src/components/StickyActionBar/StickyActionBar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Drawer } from '../Drawer'\nimport type { StickyActionBarProps } from './StickyActionBar.types'\n\nconst ChevronUpIcon = ({ className }: { className?: string }) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n    aria-hidden=\"true\"\n  >\n    <polyline points=\"18 15 12 9 6 15\" />\n  </svg>\n)\n\nexport const StickyActionBar = forwardRef<HTMLDivElement, StickyActionBarProps>((props, ref) => {\n  const {\n    summaryContent,\n    actionsContent,\n    drawerContent,\n    drawerTitle = 'Summary Details',\n    position = 'fixed',\n    containerMaxWidth = 'max-w-5xl',\n    className,\n    ...restProps\n  } = props\n\n  const [isDrawerOpen, setIsDrawerOpen] = useState(false)\n\n  const positionClass =\n    position === 'fixed'\n      ? 'fixed bottom-0 left-0 right-0 z-30'\n      : position === 'sticky'\n        ? 'sticky bottom-0 z-30'\n        : 'relative z-10'\n\n  return (\n    <>\n      <div\n        ref={ref}\n        className={buildClassName(\n          positionClass,\n          'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all',\n          className,\n        )}\n        data-testid=\"sticky-action-bar\"\n        {...restProps}\n      >\n        <div\n          className={buildClassName(\n            'mx-auto flex items-center justify-between gap-3',\n            containerMaxWidth,\n          )}\n        >\n          {/* Summary Content Slot */}\n          {summaryContent && (\n            <div className=\"flex items-center gap-2\">\n              {drawerContent ? (\n                <button\n                  type=\"button\"\n                  onClick={() => setIsDrawerOpen(true)}\n                  className=\"flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1\"\n                  aria-label=\"Expand summary details\"\n                  data-testid=\"summary-trigger\"\n                >\n                  <div>{summaryContent}</div>\n                  <ChevronUpIcon className=\"size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0\" />\n                </button>\n              ) : (\n                <div>{summaryContent}</div>\n              )}\n            </div>\n          )}\n\n          {/* Actions Stack Slot */}\n          {actionsContent && (\n            <div className=\"flex items-center gap-2 shrink-0 ml-auto\" data-testid=\"actions-stack\">\n              {actionsContent}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Optional Expandable Details Drawer */}\n      {drawerContent && (\n        <Drawer\n          isOpen={isDrawerOpen}\n          onClose={() => setIsDrawerOpen(false)}\n          align=\"bottom\"\n          size=\"full\"\n          title={drawerTitle}\n          showBackButton\n          contentClass=\"px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto\"\n        >\n          {drawerContent}\n        </Drawer>\n      )}\n    </>\n  )\n})\n\nStickyActionBar.displayName = 'StickyActionBar'\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;AAKA,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAA0B,MAC1DA,GAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,SAAS,EAAE,SAAS,EAAA,aAAA,EACR,MAAM,YAElBA,GAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,iBAAiB,EAAA,CAAG,EAAA,CACjC,CACP;AAEM,MAAM,eAAe,GAAG,UAAU,CAAuC,CAAC,KAAK,EAAE,GAAG,KAAI;IAC7F,MAAM,EACJ,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,GAAG,iBAAiB,EAC/B,QAAQ,GAAG,OAAO,EAClB,iBAAiB,GAAG,WAAW,EAC/B,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK;IAET,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEvD,IAAA,MAAM,aAAa,GACjB,QAAQ,KAAK;AACX,UAAE;UACA,QAAQ,KAAK;AACb,cAAE;cACA,eAAe;AAEvB,IAAA,QACEC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,CACvB,aAAa,EACb,oHAAoH,EACpH,SAAS,CACV,EAAA,aAAA,EACW,mBAAmB,EAAA,GAC3B,SAAS,EAAA,QAAA,EAEbC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,iDAAiD,EACjD,iBAAiB,CAClB,EAAA,QAAA,EAAA,CAGA,cAAc,KACbD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EACrC,aAAa,IACZC,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,eAAe,CAAC,IAAI,CAAC,EACpC,SAAS,EAAC,8LAA8L,EAAA,YAAA,EAC7L,wBAAwB,EAAA,aAAA,EACvB,iBAAiB,aAE7BD,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,cAAc,EAAA,CAAO,EAC3BA,IAAC,aAAa,EAAA,EAAC,SAAS,EAAC,6DAA6D,EAAA,CAAG,CAAA,EAAA,CAClF,KAETA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,cAAc,EAAA,CAAO,CAC5B,EAAA,CACG,CACP,EAGA,cAAc,KACbA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,aAAA,EAAa,eAAe,YAClF,cAAc,EAAA,CACX,CACP,CAAA,EAAA,CACG,GACF,EAGL,aAAa,KACZA,IAAC,MAAM,EAAA,EACL,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,MAAM,eAAe,CAAC,KAAK,CAAC,EACrC,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,cAAc,EAAA,IAAA,EACd,YAAY,EAAC,qDAAqD,YAEjE,aAAa,EAAA,CACP,CACV,CAAA,EAAA,CACA;AAEP,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}