art-bd-ui 1.0.1 → 1.0.3

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,47 @@
+"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.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-9 w-full flex-wrap items-center gap-1 rounded-md border bg-background px-3 py-1", !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-base md:text-sm 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,45 @@
+"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.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-9 w-full flex-wrap items-center gap-1 rounded-md border bg-background px-3 py-1", !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-base md:text-sm 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';

package/dist/styles.css

@@ -760,6 +760,9 @@
   .min-h-4 {
     min-height: calc(var(--spacing) * 4);
   }
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
   .min-h-12 {
     min-height: calc(var(--spacing) * 12);
   }
@@ -778,6 +781,9 @@
   .min-h-svh {
     min-height: 100svh;
   }
+  .w-\(--radix-popover-trigger-width\) {
+    width: var(--radix-popover-trigger-width);
+  }
   .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
@@ -835,6 +841,9 @@
   .w-\[240px\] {
     width: 240px;
   }
+  .w-\[300px\] {
+    width: 300px;
+  }
   .w-auto {
     width: auto;
   }
@@ -1004,6 +1013,9 @@
   .cursor-not-allowed {
     cursor: not-allowed;
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .resize {
     resize: both;
   }
@@ -1248,6 +1260,9 @@
   .gap-y-12 {
     row-gap: calc(var(--spacing) * 12);
   }
+  .self-start {
+    align-self: flex-start;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1402,6 +1417,9 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .p-0\.25 {
+    padding: calc(var(--spacing) * 0.25);
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }

package/dist/types/index.d.ts

@@ -9,7 +9,7 @@ import { Root as Root$1, Item } from '@radix-ui/react-toggle-group';
 import { Root as Root$2 } from '@radix-ui/react-checkbox';
 import { Root as Root$3 } from '@radix-ui/react-label';
 import { Root as Root$4, Item as Item$1 } from '@radix-ui/react-radio-group';
-import { Root as Root$5, Content, Group, Item as Item$2, Label as Label$1, ScrollDownButton, ScrollUpButton, Separator as Separator$1, Trigger, Value } from '@radix-ui/react-select';
+import { Root as Root$5, Content, Group as Group$1, Item as Item$2, Label as Label$1, ScrollDownButton, ScrollUpButton, Separator as Separator$1, Trigger, Value } from '@radix-ui/react-select';
 import { Root as Root$6 } from '@radix-ui/react-switch';
 import { Root as Root$7, Image, Fallback } from '@radix-ui/react-avatar';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -22,7 +22,7 @@ import { Root as Root$a } from '@radix-ui/react-toast';
 import { Root as Root$b, Provider, Trigger as Trigger$3, Content as Content$3 } from '@radix-ui/react-tooltip';
 import { DayPicker } from 'react-day-picker';
 import { Command as Command$1 } from 'cmdk';
-import { Root as Root$c, Portal, Trigger as Trigger$4, Content as Content$4, Group as Group$1, Label as Label$2, Item as Item$3, CheckboxItem, RadioGroup as RadioGroup$1, RadioItem, Separator as Separator$2, Sub, SubTrigger, SubContent } from '@radix-ui/react-dropdown-menu';
+import { Root as Root$c, Portal, Trigger as Trigger$4, Content as Content$4, Group as Group$2, Label as Label$2, Item as Item$3, CheckboxItem, RadioGroup as RadioGroup$1, RadioItem, Separator as Separator$2, Sub, SubTrigger, SubContent } from '@radix-ui/react-dropdown-menu';
 import * as _radix_ui_react_slot from '@radix-ui/react-slot';
 import { Slot } from '@radix-ui/react-slot';
 import { Root as Root$d } from '@radix-ui/react-progress';
@@ -208,7 +208,7 @@ declare const RadioGroupItem: FC<RadioGroupItemProps>;
 
 type SelectProps = ComponentProps<typeof Root$5>;
 declare const Select: FC<SelectProps>;
-type SelectGroupProps = ComponentProps<typeof Group>;
+type SelectGroupProps = ComponentProps<typeof Group$1>;
 declare const SelectGroup: FC<SelectGroupProps>;
 type SelectValueProps = ComponentProps<typeof Value>;
 declare const SelectValue: FC<SelectValueProps>;
@@ -245,6 +245,31 @@ declare const textareaVariants: (props?: ({
 type TextareaProps = ComponentProps<"textarea"> & VariantProps<typeof textareaVariants>;
 declare const Textarea: react.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
 
+type Option = {
+    value: string;
+    label: string;
+    group?: string;
+};
+type Group = {
+    value: string;
+    label: string;
+};
+interface MultiSelectProps extends Omit<ComponentProps<"div">, "onChange"> {
+    value?: Option[];
+    options: Option[];
+    groups?: Group[];
+    onChange?: (value: Option[]) => void;
+    onCreate?: (query: string) => void;
+    onSearch?: (query: string) => Option[] | Promise<Option[]>;
+    debounceDelay?: number;
+    createable?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    emptyStateText?: string;
+}
+declare const MultiSelect: FC<MultiSelectProps>;
+
 type AvatarProps = ComponentProps<typeof Root$7>;
 declare const Avatar: FC<AvatarProps>;
 type AvatarImageProps = ComponentProps<typeof Image>;
@@ -288,6 +313,7 @@ declare const DrawerDescription: FC<DrawerDescriptionProps>;
 
 declare const popoverContentVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
+    matchTriggerWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type PopoverProps = ComponentProps<typeof Root$9>;
 declare const Popover: FC<PopoverProps>;
@@ -296,6 +322,7 @@ declare const PopoverTrigger: FC<PopoverTriggerProps>;
 type PopoverContentProps = ComponentProps<typeof Content$2> & VariantProps<typeof popoverContentVariants> & {
     arrow?: boolean;
     withClose?: boolean;
+    matchTriggerWidth?: boolean;
 };
 declare const PopoverContent: FC<PopoverContentProps>;
 type PopoverAnchorProps = ComponentProps<typeof Anchor>;
@@ -348,8 +375,8 @@ declare const Heading: react.ForwardRefExoticComponent<{
     level?: HeadingLevel;
     asChild?: boolean;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & VariantProps<(props?: ({
-    level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
-    weight?: "medium" | "bold" | "light" | "regular" | null | undefined;
+    level?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    weight?: "bold" | "medium" | "light" | "regular" | null | undefined;
     align?: "center" | "right" | "left" | null | undefined;
     color?: "default" | "destructive" | "secondary" | "muted" | "primary" | "accent" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLHeadingElement>>;
@@ -358,7 +385,7 @@ declare const Text: react.ForwardRefExoticComponent<{
     asChild?: boolean;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<(props?: ({
     type?: "body" | "small" | "tiny" | null | undefined;
-    weight?: "medium" | "bold" | "light" | "regular" | null | undefined;
+    weight?: "bold" | "medium" | "light" | "regular" | null | undefined;
     align?: "center" | "right" | "left" | null | undefined;
     color?: "default" | "destructive" | "secondary" | "muted" | "primary" | "accent" | null | undefined;
     truncate?: boolean | null | undefined;
@@ -398,6 +425,8 @@ type CommandListProps = ComponentProps<typeof Command$1.List>;
 declare const CommandList: FC<CommandListProps>;
 type CommandEmptyProps = ComponentProps<typeof Command$1.Empty>;
 declare const CommandEmpty: FC<CommandEmptyProps>;
+type CommandLoadingProps = ComponentProps<typeof Command$1.Loading>;
+declare const CommandLoading: FC<CommandLoadingProps>;
 type CommandGroupProps = ComponentProps<typeof Command$1.Group>;
 declare const CommandGroup: FC<CommandGroupProps>;
 type CommandSeparatorProps = ComponentProps<typeof Command$1.Separator>;
@@ -525,7 +554,7 @@ type DropdownMenuContentProps = ComponentProps<typeof Content$4> & {
     sideOffset?: number;
 };
 declare const DropdownMenuContent: FC<DropdownMenuContentProps>;
-type DropdownMenuGroupProps = ComponentProps<typeof Group$1>;
+type DropdownMenuGroupProps = ComponentProps<typeof Group$2>;
 declare const DropdownMenuGroup: FC<DropdownMenuGroupProps>;
 type DropdownMenuItemProps = ComponentProps<typeof Item$3> & {
     inset?: boolean;
@@ -1304,11 +1333,11 @@ declare const EmptyState: react.ForwardRefExoticComponent<Omit<{
         inline?: boolean;
     } & react.RefAttributes<HTMLDivElement>, "ref">>;
     Title: FC<Omit<{
-        level?: 1 | 2 | 3 | 4 | 5 | 6;
+        level?: 2 | 1 | 3 | 4 | 5 | 6;
         asChild?: boolean;
     } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & class_variance_authority.VariantProps<(props?: ({
-        level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
-        weight?: "medium" | "bold" | "light" | "regular" | null | undefined;
+        level?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+        weight?: "bold" | "medium" | "light" | "regular" | null | undefined;
         align?: "center" | "right" | "left" | null | undefined;
         color?: "default" | "destructive" | "secondary" | "muted" | "primary" | "accent" | null | undefined;
     } & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLHeadingElement>, "ref">>;
@@ -1316,7 +1345,7 @@ declare const EmptyState: react.ForwardRefExoticComponent<Omit<{
         asChild?: boolean;
     } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & class_variance_authority.VariantProps<(props?: ({
         type?: "body" | "small" | "tiny" | null | undefined;
-        weight?: "medium" | "bold" | "light" | "regular" | null | undefined;
+        weight?: "bold" | "medium" | "light" | "regular" | null | undefined;
         align?: "center" | "right" | "left" | null | undefined;
         color?: "default" | "destructive" | "secondary" | "muted" | "primary" | "accent" | null | undefined;
         truncate?: boolean | null | undefined;
@@ -1359,6 +1388,8 @@ declare const useScrollState: (containerRef: RefObject<HTMLElement | null>) => {
     isScrolledToBottomCorner: boolean;
 };
 
+declare function useDebounce<T>(value: T, delay: number): T;
+
 /**
  * Creates function that execute callback functions together so that they are invoked in sequence
  * with the same set of arguments.
@@ -1414,5 +1445,5 @@ interface Rect {
 declare const DEFAULT_RECT: Rect;
 declare const getBoundingRect: (node: HTMLElement) => Rect;
 
-export { Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Box, Button, Calendar, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DEFAULT_RECT, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Flex, Grid, Heading, Icon, IconButton, Input, Label, Link, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, StatusController, Switch, Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, addIf, assignRef, badgeVariants, buttonVariants, chain, getBoundingRect, mergeProps, mergeRefs, toggle, toggleVariants, useControlled, useFirstMountState, useForkRef, useLatest, usePrevious, useScrollState, useSidebar, useStateRef, useUpdateEffect };
-export type { BoxProps, ButtonProps, CalendarProps, CheckboxProps, Column, ColumnRenderer, DataTableProps, DialogProps, EmptyStateProps, FlexProps, GridProps, IconButtonProps, IconProps, InputProps, LabelProps, LinkProps, PopoverAnchorProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, Rect, RowData, RowId, RowRenderer, StatusControllerProps, SwitchProps, TextareaProps, ToastActionElement, ToastProps, TooltipContentProps, TooltipProps, TooltipTriggerProps };
+export { Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Box, Button, Calendar, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, DEFAULT_RECT, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Flex, Grid, Heading, Icon, IconButton, Input, Label, Link, MultiSelect, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, StatusController, Switch, Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, addIf, assignRef, badgeVariants, buttonVariants, chain, getBoundingRect, mergeProps, mergeRefs, toggle, toggleVariants, useControlled, useDebounce, useFirstMountState, useForkRef, useLatest, usePrevious, useScrollState, useSidebar, useStateRef, useUpdateEffect };
+export type { BoxProps, ButtonProps, CalendarProps, CheckboxProps, Column, ColumnRenderer, DataTableProps, DialogProps, EmptyStateProps, FlexProps, GridProps, Group, IconButtonProps, IconProps, InputProps, LabelProps, LinkProps, Option, PopoverAnchorProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, Rect, RowData, RowId, RowRenderer, StatusControllerProps, SwitchProps, TextareaProps, ToastActionElement, ToastProps, TooltipContentProps, TooltipProps, TooltipTriggerProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "art-bd-ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Set of handy components for React like projects",
   "type": "module",
   "main": "./dist/cjs/index.js",