art-bd-ui 1.0.0 → 1.0.2

package/dist/cjs/components/popovers/popover/popover.js

@@ -17,7 +17,18 @@ const popoverContentVariants = classVarianceAuthority.cva([
             sm: "w-56",
             lg: "w-96",
         },
+        matchTriggerWidth: {
+            true: null,
+            false: null,
+        },
     },
+    compoundVariants: [
+        {
+            size: ["default", "sm", "lg"],
+            matchTriggerWidth: true,
+            class: "w-(--radix-popover-trigger-width)",
+        },
+    ],
     defaultVariants: {
         size: "default",
     },
@@ -37,8 +48,8 @@ const PopoverTrigger = (_a) => {
     return jsxRuntime.jsx(reactPopover.Trigger, Object.assign({ "data-slot": "popover-trigger" }, props));
 };
 const PopoverContent = (_a) => {
-    var { className, align = "center", arrow = false, withClose = false, sideOffset = 4, size, children } = _a, props = tslib.__rest(_a, ["className", "align", "arrow", "withClose", "sideOffset", "size", "children"]);
-    return (jsxRuntime.jsx(reactPopover.Portal, { children: jsxRuntime.jsxs(reactPopover.Content, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: utils.cn(popoverContentVariants({ size }), [
+    var { className, align = "center", arrow = false, withClose = false, sideOffset = 4, size, matchTriggerWidth = false, children } = _a, props = tslib.__rest(_a, ["className", "align", "arrow", "withClose", "sideOffset", "size", "matchTriggerWidth", "children"]);
+    return (jsxRuntime.jsx(reactPopover.Portal, { children: jsxRuntime.jsxs(reactPopover.Content, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: utils.cn(popoverContentVariants({ size, matchTriggerWidth }), [
                 "data-[state=open]:animate-in",
                 "data-[state=open]:fade-in-0",
                 "data-[state=open]:zoom-in-95",

package/dist/cjs/components/selectors/multiselect/components/badge-list.js

@@ -0,0 +1,51 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var badge = require('../../../ui/badge/badge.js');
+var icon = require('../../../media/icon/icon.js');
+var utils = require('../../../../lib/utils.js');
+
+const BadgeList = react.memo(({ options, disabled, onRemove }) => {
+    const handleBadgeKeyDown = (e, opt) => {
+        e.stopPropagation();
+        if (disabled) {
+            return;
+        }
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onRemove(opt);
+        }
+        else if (e.key === "Backspace" || e.key === "Delete") {
+            e.preventDefault();
+            onRemove(opt);
+            const nextBadge = e.currentTarget.nextElementSibling || e.currentTarget.previousElementSibling;
+            if (nextBadge instanceof HTMLElement) {
+                nextBadge.focus();
+            }
+        }
+        else if (e.key === "ArrowRight") {
+            e.preventDefault();
+            const nextBadge = e.currentTarget.nextElementSibling;
+            if (nextBadge instanceof HTMLElement) {
+                nextBadge.focus();
+            }
+        }
+        else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            const prevBadge = e.currentTarget.previousElementSibling;
+            if (prevBadge instanceof HTMLElement) {
+                prevBadge.focus();
+            }
+        }
+    };
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((opt) => (jsxRuntime.jsxs(badge.Badge, { tabIndex: disabled ? -1 : 0, role: "button", "aria-label": `Remove ${opt.label}`, variant: "secondary", className: utils.cn("gap-1 select-none", !disabled && "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", !disabled && "cursor-pointer hover:bg-secondary/80"), onClick: () => {
+                if (!disabled) {
+                    onRemove(opt);
+                }
+            }, onKeyDown: (e) => handleBadgeKeyDown(e, opt), children: [opt.label, !disabled && jsxRuntime.jsx(icon.Icon, { name: "x", className: "size-3" })] }, opt.value))) }));
+});
+BadgeList.displayName = "BadgeList";
+
+exports.BadgeList = BadgeList;

package/dist/cjs/components/selectors/multiselect/components/options.js

@@ -0,0 +1,14 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var command = require('../../../ui/command/command.js');
+var checkbox = require('../../../forms/checkbox/checkbox.js');
+
+const OptionItem = react.memo(({ option, selected, onSelect }) => (jsxRuntime.jsxs(command.CommandItem, { value: option.value, keywords: [option.label], onSelect: () => onSelect(option), className: "flex items-center gap-2", children: [jsxRuntime.jsx(checkbox.Checkbox, { tabIndex: -1, checked: selected, size: "sm" }), option.label] })));
+OptionItem.displayName = "OptionItem";
+const OptionsList = react.memo(({ options, selectedValues, onSelect }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map(({ value, label, children, data }) => children.length > 0 ? (jsxRuntime.jsx(command.CommandGroup, { heading: label, children: jsxRuntime.jsx(OptionsList, { options: children, selectedValues: selectedValues, onSelect: onSelect }) }, value)) : data ? (jsxRuntime.jsx(OptionItem, { option: data, selected: selectedValues.has(value), onSelect: onSelect }, value)) : null) })));
+OptionsList.displayName = "OptionsList";
+
+exports.OptionsList = OptionsList;

package/dist/cjs/components/selectors/multiselect/multiselect.js

@@ -0,0 +1,119 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var options = require('./components/options.js');
+var badgeList = require('./components/badge-list.js');
+var command = require('../../ui/command/command.js');
+var popover = require('../../popovers/popover/popover.js');
+var utils = require('../../../lib/utils.js');
+var useDebounce = require('../../../hooks/use-debounce.js');
+require('clsx');
+var toggle = require('../../../utils/toggle.js');
+var useUpdateEffect = require('../../../hooks/useUpdateEffect.js');
+require('lodash/throttle');
+var iconButton = require('../../buttons/icon-button/icon-button.js');
+var flex = require('../../layout/flex/flex.js');
+
+function isPromise(value) {
+    return value instanceof Promise;
+}
+function getGroupedListOptions(options, groups = []) {
+    const lookup = groups.reduce((acc, { value, label }) => {
+        acc[value] = { value, label, children: [] };
+        return acc;
+    }, {});
+    const ungrouped = [];
+    for (const opt of options) {
+        const node = {
+            value: opt.value,
+            label: opt.label,
+            children: [],
+            data: opt,
+        };
+        if (opt.group && lookup[opt.group]) {
+            lookup[opt.group].children.push(node);
+        }
+        else {
+            ungrouped.push(node);
+        }
+    }
+    const result = [];
+    for (const grp of groups) {
+        const bucket = lookup[grp.value];
+        if (bucket.children.length > 0) {
+            result.push(bucket);
+        }
+    }
+    return result.concat(ungrouped);
+}
+const defaultValue = [];
+const defaultOptions = [];
+const defaultGroups = [];
+const MultiSelect = (_a) => {
+    var { value = defaultValue, onChange = () => { }, options: options$1 = defaultOptions, groups = defaultGroups, createable = false, onCreate = () => { }, onSearch, debounceDelay = 500, placeholder = "Select options...", disabled = false, clearable = false, className } = _a, props = tslib.__rest(_a, ["value", "onChange", "options", "groups", "createable", "onCreate", "onSearch", "debounceDelay", "placeholder", "disabled", "clearable", "className"]);
+    const [open, setOpen] = react.useState(false);
+    const [loading, setLoading] = react.useState(false);
+    const [searchQuery, setSearchQuery] = react.useState("");
+    const debouncedSearch = useDebounce.useDebounce(searchQuery, debounceDelay);
+    const [searchResults, setSearchResults] = react.useState(options$1);
+    useUpdateEffect.useUpdateEffect(() => {
+        if (!onSearch || !debouncedSearch) {
+            return;
+        }
+        const search = () => tslib.__awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const results = onSearch(debouncedSearch);
+                if (isPromise(results)) {
+                    setLoading(true);
+                    const options = yield results;
+                    setSearchResults(options);
+                }
+                else if (Array.isArray(results)) {
+                    setSearchResults(results);
+                }
+            }
+            catch (error) {
+                console.error("Search failed:", error);
+                setSearchResults([]);
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        void search();
+    }, [debouncedSearch, onSearch]);
+    const handleSelect = react.useCallback((opt) => {
+        onChange(toggle.toggle(value, opt, (o) => o.value));
+    }, [onChange, value]);
+    const handleRemove = react.useCallback((opt) => onChange(value.filter((v) => v.value !== opt.value)), [onChange, value]);
+    const handleClear = react.useCallback(() => onChange([]), [onChange]);
+    const optionsList = react.useMemo(() => getGroupedListOptions(searchResults, groups), [searchResults, groups]);
+    const selectedValues = react.useMemo(() => new Set(value.map((v) => v.value)), [value]);
+    const handleTriggerKeyDown = react.useCallback((e) => {
+        if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen(true);
+        }
+    }, []);
+    const handleClearKeyDown = react.useCallback((e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClear();
+        }
+    }, [handleClear]);
+    const setPopoverVisibility = react.useCallback((open) => {
+        if (!disabled) {
+            setOpen(open);
+        }
+    }, [disabled]);
+    return (jsxRuntime.jsxs(popover.Popover, { open: open, onOpenChange: setPopoverVisibility, children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs("div", Object.assign({}, props, { tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": "multiselect-options", "aria-label": placeholder, "aria-disabled": disabled, onKeyDown: handleTriggerKeyDown, className: utils.cn("flex min-h-10 w-full flex-wrap items-center gap-1 rounded-md border bg-background px-3 py-2", !disabled && "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", disabled && "disabled:cursor-not-allowed disabled:opacity-50", className), children: [jsxRuntime.jsx(flex.Flex, { wrap: "wrap", gap: 1, align: "start", className: "flex-1", children: value.length > 0 ? (jsxRuntime.jsx(badgeList.BadgeList, { options: value, disabled: disabled, onRemove: handleRemove })) : (jsxRuntime.jsx("span", { className: "text-muted-foreground", children: placeholder })) }), clearable && !disabled && value.length > 0 && (jsxRuntime.jsx(iconButton.IconButton, { icon: "circle-x", radius: "full", variant: "ghost", className: "size-5 p-0.25 self-start shrink-0", onClick: handleClear, onKeyDown: handleClearKeyDown, disabled: disabled, tooltip: "Clear All", "aria-label": "Clear all selections" }))] })) }), jsxRuntime.jsx(popover.PopoverContent, { className: "p-0", align: "start", matchTriggerWidth: true, children: jsxRuntime.jsxs(command.Command, { id: "multiselect-options", role: "listbox", shouldFilter: !onSearch, children: [jsxRuntime.jsx(command.CommandInput, { placeholder: "Search...", value: searchQuery, onValueChange: setSearchQuery, disabled: disabled }), jsxRuntime.jsxs(command.CommandList, { children: [loading ? (jsxRuntime.jsx(command.CommandLoading, { children: "Searching\u2026" })) : optionsList.length > 0 ? (jsxRuntime.jsx(options.OptionsList, { options: optionsList, selectedValues: selectedValues, onSelect: handleSelect })) : (jsxRuntime.jsx(command.CommandEmpty, { children: "No results found." })), createable && !loading && searchQuery && debouncedSearch && (jsxRuntime.jsxs(command.CommandItem, { value: searchQuery, keywords: [searchQuery], onSelect: () => {
+                                        onCreate(searchQuery);
+                                        setSearchQuery("");
+                                    }, children: ["Create \"", searchQuery, "\""] }))] })] }) })] }));
+};
+MultiSelect.displayName = "MultiSelect";
+
+exports.MultiSelect = MultiSelect;

package/dist/cjs/components/ui/command/command.js

@@ -43,6 +43,11 @@ const CommandEmpty = (_a) => {
     return jsxRuntime.jsx(cmdk.Command.Empty, Object.assign({ "data-slot": "command-empty", className: "py-6 text-center text-sm" }, props));
 };
 CommandEmpty.displayName = "CommandEmpty";
+const CommandLoading = (_a) => {
+    var props = tslib.__rest(_a, []);
+    return jsxRuntime.jsx(cmdk.Command.Loading, Object.assign({ "data-slot": "command-loading", className: "py-6 text-center text-sm" }, props));
+};
+CommandEmpty.displayName = "CommandEmpty";
 const CommandGroup = (_a) => {
     var { className } = _a, props = tslib.__rest(_a, ["className"]);
     return (jsxRuntime.jsx(cmdk.Command.Group, Object.assign({ "data-slot": "command-group", className: utils.cn("overflow-hidden p-1", "text-foreground", 
@@ -79,5 +84,6 @@ exports.CommandGroup = CommandGroup;
 exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
 exports.CommandList = CommandList;
+exports.CommandLoading = CommandLoading;
 exports.CommandSeparator = CommandSeparator;
 exports.CommandShortcut = CommandShortcut;

package/dist/cjs/hooks/use-debounce.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var react = require('react');
+
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = react.useState(value);
+    react.useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}
+
+exports.useDebounce = useDebounce;

package/dist/cjs/index.js

@@ -14,6 +14,7 @@ var radio = require('./components/forms/radio/radio.js');
 var select = require('./components/forms/select/select.js');
 var _switch = require('./components/forms/switch/switch.js');
 var textarea = require('./components/forms/textarea/textarea.js');
+var multiselect = require('./components/selectors/multiselect/multiselect.js');
 var icon = require('./components/media/icon/icon.js');
 var avatar = require('./components/media/avatar/avatar.js');
 var aspectRatio = require('./components/media/aspect-ratio/aspect-ratio.js');
@@ -50,6 +51,7 @@ var useControlled = require('./hooks/useControlled.js');
 var usePrevious = require('./hooks/usePrevious.js');
 var useLatest = require('./hooks/useLatest.js');
 var useScrollState = require('./hooks/useScrollState.js');
+var useDebounce = require('./hooks/use-debounce.js');
 var chain = require('./utils/chain.js');
 var mergeProps = require('./utils/mergeProps.js');
 var mergeRefs = require('./utils/mergeRefs.js');
@@ -93,6 +95,7 @@ exports.SelectTrigger = select.SelectTrigger;
 exports.SelectValue = select.SelectValue;
 exports.Switch = _switch.Switch;
 exports.Textarea = textarea.Textarea;
+exports.MultiSelect = multiselect.MultiSelect;
 exports.Icon = icon.Icon;
 exports.Avatar = avatar.Avatar;
 exports.AvatarFallback = avatar.AvatarFallback;
@@ -150,6 +153,7 @@ exports.CommandGroup = command.CommandGroup;
 exports.CommandInput = command.CommandInput;
 exports.CommandItem = command.CommandItem;
 exports.CommandList = command.CommandList;
+exports.CommandLoading = command.CommandLoading;
 exports.CommandSeparator = command.CommandSeparator;
 exports.CommandShortcut = command.CommandShortcut;
 exports.DataTable = dataTable.DataTable;
@@ -220,6 +224,7 @@ exports.useControlled = useControlled.useControlled;
 exports.usePrevious = usePrevious.usePrevious;
 exports.useLatest = useLatest.useLatest;
 exports.useScrollState = useScrollState.useScrollState;
+exports.useDebounce = useDebounce.useDebounce;
 exports.chain = chain.chain;
 exports.mergeProps = mergeProps.mergeProps;
 exports.assignRef = mergeRefs.assignRef;

package/dist/esm/components/popovers/popover/popover.js

@@ -15,7 +15,18 @@ const popoverContentVariants = cva([
             sm: "w-56",
             lg: "w-96",
         },
+        matchTriggerWidth: {
+            true: null,
+            false: null,
+        },
     },
+    compoundVariants: [
+        {
+            size: ["default", "sm", "lg"],
+            matchTriggerWidth: true,
+            class: "w-(--radix-popover-trigger-width)",
+        },
+    ],
     defaultVariants: {
         size: "default",
     },
@@ -35,8 +46,8 @@ const PopoverTrigger = (_a) => {
     return jsx(Trigger, Object.assign({ "data-slot": "popover-trigger" }, props));
 };
 const PopoverContent = (_a) => {
-    var { className, align = "center", arrow = false, withClose = false, sideOffset = 4, size, children } = _a, props = __rest(_a, ["className", "align", "arrow", "withClose", "sideOffset", "size", "children"]);
-    return (jsx(Portal, { children: jsxs(Content, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn(popoverContentVariants({ size }), [
+    var { className, align = "center", arrow = false, withClose = false, sideOffset = 4, size, matchTriggerWidth = false, children } = _a, props = __rest(_a, ["className", "align", "arrow", "withClose", "sideOffset", "size", "matchTriggerWidth", "children"]);
+    return (jsx(Portal, { children: jsxs(Content, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn(popoverContentVariants({ size, matchTriggerWidth }), [
                 "data-[state=open]:animate-in",
                 "data-[state=open]:fade-in-0",
                 "data-[state=open]:zoom-in-95",

package/dist/esm/components/selectors/multiselect/components/badge-list.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { Badge } from '../../../ui/badge/badge.js';
+import { Icon } from '../../../media/icon/icon.js';
+import { cn } from '../../../../lib/utils.js';
+
+const BadgeList = memo(({ options, disabled, onRemove }) => {
+    const handleBadgeKeyDown = (e, opt) => {
+        e.stopPropagation();
+        if (disabled) {
+            return;
+        }
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onRemove(opt);
+        }
+        else if (e.key === "Backspace" || e.key === "Delete") {
+            e.preventDefault();
+            onRemove(opt);
+            const nextBadge = e.currentTarget.nextElementSibling || e.currentTarget.previousElementSibling;
+            if (nextBadge instanceof HTMLElement) {
+                nextBadge.focus();
+            }
+        }
+        else if (e.key === "ArrowRight") {
+            e.preventDefault();
+            const nextBadge = e.currentTarget.nextElementSibling;
+            if (nextBadge instanceof HTMLElement) {
+                nextBadge.focus();
+            }
+        }
+        else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            const prevBadge = e.currentTarget.previousElementSibling;
+            if (prevBadge instanceof HTMLElement) {
+                prevBadge.focus();
+            }
+        }
+    };
+    return (jsx(Fragment, { children: options.map((opt) => (jsxs(Badge, { tabIndex: disabled ? -1 : 0, role: "button", "aria-label": `Remove ${opt.label}`, variant: "secondary", className: cn("gap-1 select-none", !disabled && "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", !disabled && "cursor-pointer hover:bg-secondary/80"), onClick: () => {
+                if (!disabled) {
+                    onRemove(opt);
+                }
+            }, onKeyDown: (e) => handleBadgeKeyDown(e, opt), children: [opt.label, !disabled && jsx(Icon, { name: "x", className: "size-3" })] }, opt.value))) }));
+});
+BadgeList.displayName = "BadgeList";
+
+export { BadgeList };

package/dist/esm/components/selectors/multiselect/components/options.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { CommandItem, CommandGroup } from '../../../ui/command/command.js';
+import { Checkbox } from '../../../forms/checkbox/checkbox.js';
+
+const OptionItem = memo(({ option, selected, onSelect }) => (jsxs(CommandItem, { value: option.value, keywords: [option.label], onSelect: () => onSelect(option), className: "flex items-center gap-2", children: [jsx(Checkbox, { tabIndex: -1, checked: selected, size: "sm" }), option.label] })));
+OptionItem.displayName = "OptionItem";
+const OptionsList = memo(({ options, selectedValues, onSelect }) => (jsx(Fragment, { children: options.map(({ value, label, children, data }) => children.length > 0 ? (jsx(CommandGroup, { heading: label, children: jsx(OptionsList, { options: children, selectedValues: selectedValues, onSelect: onSelect }) }, value)) : data ? (jsx(OptionItem, { option: data, selected: selectedValues.has(value), onSelect: onSelect }, value)) : null) })));
+OptionsList.displayName = "OptionsList";
+
+export { OptionsList };

package/dist/esm/components/selectors/multiselect/multiselect.js

@@ -0,0 +1,117 @@
+"use client";
+import { __rest, __awaiter } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo } from 'react';
+import { OptionsList } from './components/options.js';
+import { BadgeList } from './components/badge-list.js';
+import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandItem } from '../../ui/command/command.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../popovers/popover/popover.js';
+import { cn } from '../../../lib/utils.js';
+import { useDebounce } from '../../../hooks/use-debounce.js';
+import 'clsx';
+import { toggle } from '../../../utils/toggle.js';
+import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
+import 'lodash/throttle';
+import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { Flex } from '../../layout/flex/flex.js';
+
+function isPromise(value) {
+    return value instanceof Promise;
+}
+function getGroupedListOptions(options, groups = []) {
+    const lookup = groups.reduce((acc, { value, label }) => {
+        acc[value] = { value, label, children: [] };
+        return acc;
+    }, {});
+    const ungrouped = [];
+    for (const opt of options) {
+        const node = {
+            value: opt.value,
+            label: opt.label,
+            children: [],
+            data: opt,
+        };
+        if (opt.group && lookup[opt.group]) {
+            lookup[opt.group].children.push(node);
+        }
+        else {
+            ungrouped.push(node);
+        }
+    }
+    const result = [];
+    for (const grp of groups) {
+        const bucket = lookup[grp.value];
+        if (bucket.children.length > 0) {
+            result.push(bucket);
+        }
+    }
+    return result.concat(ungrouped);
+}
+const defaultValue = [];
+const defaultOptions = [];
+const defaultGroups = [];
+const MultiSelect = (_a) => {
+    var { value = defaultValue, onChange = () => { }, options = defaultOptions, groups = defaultGroups, createable = false, onCreate = () => { }, onSearch, debounceDelay = 500, placeholder = "Select options...", disabled = false, clearable = false, className } = _a, props = __rest(_a, ["value", "onChange", "options", "groups", "createable", "onCreate", "onSearch", "debounceDelay", "placeholder", "disabled", "clearable", "className"]);
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const debouncedSearch = useDebounce(searchQuery, debounceDelay);
+    const [searchResults, setSearchResults] = useState(options);
+    useUpdateEffect(() => {
+        if (!onSearch || !debouncedSearch) {
+            return;
+        }
+        const search = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const results = onSearch(debouncedSearch);
+                if (isPromise(results)) {
+                    setLoading(true);
+                    const options = yield results;
+                    setSearchResults(options);
+                }
+                else if (Array.isArray(results)) {
+                    setSearchResults(results);
+                }
+            }
+            catch (error) {
+                console.error("Search failed:", error);
+                setSearchResults([]);
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        void search();
+    }, [debouncedSearch, onSearch]);
+    const handleSelect = useCallback((opt) => {
+        onChange(toggle(value, opt, (o) => o.value));
+    }, [onChange, value]);
+    const handleRemove = useCallback((opt) => onChange(value.filter((v) => v.value !== opt.value)), [onChange, value]);
+    const handleClear = useCallback(() => onChange([]), [onChange]);
+    const optionsList = useMemo(() => getGroupedListOptions(searchResults, groups), [searchResults, groups]);
+    const selectedValues = useMemo(() => new Set(value.map((v) => v.value)), [value]);
+    const handleTriggerKeyDown = useCallback((e) => {
+        if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen(true);
+        }
+    }, []);
+    const handleClearKeyDown = useCallback((e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClear();
+        }
+    }, [handleClear]);
+    const setPopoverVisibility = useCallback((open) => {
+        if (!disabled) {
+            setOpen(open);
+        }
+    }, [disabled]);
+    return (jsxs(Popover, { open: open, onOpenChange: setPopoverVisibility, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs("div", Object.assign({}, props, { tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": "multiselect-options", "aria-label": placeholder, "aria-disabled": disabled, onKeyDown: handleTriggerKeyDown, className: cn("flex min-h-10 w-full flex-wrap items-center gap-1 rounded-md border bg-background px-3 py-2", !disabled && "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", disabled && "disabled:cursor-not-allowed disabled:opacity-50", className), children: [jsx(Flex, { wrap: "wrap", gap: 1, align: "start", className: "flex-1", children: value.length > 0 ? (jsx(BadgeList, { options: value, disabled: disabled, onRemove: handleRemove })) : (jsx("span", { className: "text-muted-foreground", children: placeholder })) }), clearable && !disabled && value.length > 0 && (jsx(IconButton, { icon: "circle-x", radius: "full", variant: "ghost", className: "size-5 p-0.25 self-start shrink-0", onClick: handleClear, onKeyDown: handleClearKeyDown, disabled: disabled, tooltip: "Clear All", "aria-label": "Clear all selections" }))] })) }), jsx(PopoverContent, { className: "p-0", align: "start", matchTriggerWidth: true, children: jsxs(Command, { id: "multiselect-options", role: "listbox", shouldFilter: !onSearch, children: [jsx(CommandInput, { placeholder: "Search...", value: searchQuery, onValueChange: setSearchQuery, disabled: disabled }), jsxs(CommandList, { children: [loading ? (jsx(CommandLoading, { children: "Searching\u2026" })) : optionsList.length > 0 ? (jsx(OptionsList, { options: optionsList, selectedValues: selectedValues, onSelect: handleSelect })) : (jsx(CommandEmpty, { children: "No results found." })), createable && !loading && searchQuery && debouncedSearch && (jsxs(CommandItem, { value: searchQuery, keywords: [searchQuery], onSelect: () => {
+                                        onCreate(searchQuery);
+                                        setSearchQuery("");
+                                    }, children: ["Create \"", searchQuery, "\""] }))] })] }) })] }));
+};
+MultiSelect.displayName = "MultiSelect";
+
+export { MultiSelect };

package/dist/esm/components/ui/command/command.js

@@ -41,6 +41,11 @@ const CommandEmpty = (_a) => {
     return jsx(Command$1.Empty, Object.assign({ "data-slot": "command-empty", className: "py-6 text-center text-sm" }, props));
 };
 CommandEmpty.displayName = "CommandEmpty";
+const CommandLoading = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Command$1.Loading, Object.assign({ "data-slot": "command-loading", className: "py-6 text-center text-sm" }, props));
+};
+CommandEmpty.displayName = "CommandEmpty";
 const CommandGroup = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsx(Command$1.Group, Object.assign({ "data-slot": "command-group", className: cn("overflow-hidden p-1", "text-foreground", 
@@ -70,4 +75,4 @@ const CommandShortcut = (_a) => {
 };
 CommandShortcut.displayName = "CommandShortcut";
 
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut };

package/dist/esm/hooks/use-debounce.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}
+
+export { useDebounce };

package/dist/esm/index.js

@@ -12,6 +12,7 @@ export { RadioGroup, RadioGroupItem } from './components/forms/radio/radio.js';
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/forms/select/select.js';
 export { Switch } from './components/forms/switch/switch.js';
 export { Textarea } from './components/forms/textarea/textarea.js';
+export { MultiSelect } from './components/selectors/multiselect/multiselect.js';
 export { Icon } from './components/media/icon/icon.js';
 export { Avatar, AvatarFallback, AvatarImage } from './components/media/avatar/avatar.js';
 export { AspectRatio } from './components/media/aspect-ratio/aspect-ratio.js';
@@ -26,7 +27,7 @@ export { Text } from './components/typography/text/text.js';
 export { Alert, AlertDescription, AlertTitle } from './components/ui/alert/alert.js';
 export { Badge, badgeVariants } from './components/ui/badge/badge.js';
 export { Calendar } from './components/ui/calendar/calendar.js';
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from './components/ui/command/command.js';
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut } from './components/ui/command/command.js';
 export { DataTable } from './components/ui/data-table/data-table.js';
 export { DatePicker } from './components/ui/date-picker/date-picker.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/ui/dropdown-menu/dropdown-menu.js';
@@ -48,6 +49,7 @@ export { useControlled } from './hooks/useControlled.js';
 export { usePrevious } from './hooks/usePrevious.js';
 export { useLatest } from './hooks/useLatest.js';
 export { useScrollState } from './hooks/useScrollState.js';
+export { useDebounce } from './hooks/use-debounce.js';
 export { chain } from './utils/chain.js';
 export { mergeProps } from './utils/mergeProps.js';
 export { assignRef, mergeRefs } from './utils/mergeRefs.js';