art-bd-ui 1.0.2 → 1.0.4

package/dist/cjs/components/forms/form/form-control.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var reactHookForm = require('react-hook-form');
+var form = require('./form.js');
+
+function FormControl(_a) {
+    var { name, label, description, showMessage = true, children } = _a, props = tslib.__rest(_a, ["name", "label", "description", "showMessage", "children"]);
+    const form$1 = reactHookForm.useFormContext();
+    if (!form$1) {
+        throw new Error("FormControl must be used within a Form component");
+    }
+    return (jsxRuntime.jsx(form.FormField, { control: form$1.control, name: name, render: ({ field }) => (jsxRuntime.jsxs(form.FormItem, Object.assign({}, props, { children: [label && jsxRuntime.jsx(form.FormLabel, { children: label }), jsxRuntime.jsx(form.FormFieldControl, Object.assign({}, field, { children: children })), description && jsxRuntime.jsx(form.FormDescription, { children: description }), showMessage && jsxRuntime.jsx(form.FormMessage, {})] }))) }));
+}
+
+exports.FormControl = FormControl;

package/dist/cjs/components/forms/form/form.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var reactHookForm = require('react-hook-form');
+var react = require('react');
+var utils = require('../../../lib/utils.js');
+var label = require('../label/label.js');
+
+const Form = reactHookForm.FormProvider;
+const FormFieldContext = react.createContext({});
+const FormField = (_a) => {
+    var props = tslib.__rest(_a, []);
+    return (jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: jsxRuntime.jsx(reactHookForm.Controller, Object.assign({}, props)) }));
+};
+const FormItemContext = react.createContext({});
+const useFormField = () => {
+    const fieldContext = react.useContext(FormFieldContext);
+    const itemContext = react.useContext(FormItemContext);
+    const { getFieldState } = reactHookForm.useFormContext();
+    const formState = reactHookForm.useFormState({ name: fieldContext.name });
+    const fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+    const { id } = itemContext;
+    return Object.assign({ id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message` }, fieldState);
+};
+function FormItem(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    const id = react.useId();
+    return (jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: jsxRuntime.jsx("div", Object.assign({ "data-slot": "form-item", className: utils.cn("grid gap-2", className) }, props)) }));
+}
+function FormLabel(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    const { error, formItemId } = useFormField();
+    return (jsxRuntime.jsx(label.Label, Object.assign({ "data-slot": "form-label", "data-error": !!error, className: utils.cn("data-[error=true]:text-destructive", className), htmlFor: formItemId }, props)));
+}
+function FormFieldControl(_a) {
+    var props = tslib.__rest(_a, []);
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (jsxRuntime.jsx(reactSlot.Slot, Object.assign({ "data-slot": "form-control", id: formItemId, "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error }, props)));
+}
+function FormDescription(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    const { formDescriptionId } = useFormField();
+    return (jsxRuntime.jsx("p", Object.assign({ "data-slot": "form-description", id: formDescriptionId, className: utils.cn("text-muted-foreground text-sm", className) }, props)));
+}
+function FormMessage(_a) {
+    var _b;
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    const { error, formMessageId } = useFormField();
+    const body = error ? String((_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : "") : props.children;
+    if (!body) {
+        return null;
+    }
+    return (jsxRuntime.jsx("p", Object.assign({ "data-slot": "form-message", id: formMessageId, className: utils.cn("text-destructive text-sm", className) }, props, { children: body })));
+}
+
+exports.Form = Form;
+exports.FormDescription = FormDescription;
+exports.FormField = FormField;
+exports.FormFieldControl = FormFieldControl;
+exports.FormItem = FormItem;
+exports.FormLabel = FormLabel;
+exports.FormMessage = FormMessage;
+exports.useFormField = useFormField;

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

@@ -13,11 +13,7 @@ const BadgeList = react.memo(({ options, disabled, onRemove }) => {
         if (disabled) {
             return;
         }
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onRemove(opt);
-        }
-        else if (e.key === "Backspace" || e.key === "Delete") {
+        if (e.key === "Enter" || e.key === " " || e.key === "Backspace" || e.key === "Delete") {
             e.preventDefault();
             onRemove(opt);
             const nextBadge = e.currentTarget.nextElementSibling || e.currentTarget.previousElementSibling;

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

@@ -4,69 +4,39 @@
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var options = require('./components/options.js');
+var utils = require('../shared/utils.js');
+var optionsList = require('../shared/options-list.js');
+var inputContainer = require('../shared/input-container.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"]);
+    var { value = defaultValue, onChange = () => { }, options = defaultOptions, groups = defaultGroups, createable = false, onCreate = () => { }, onSearch, debounceDelay = 500, placeholder = "Select options...", disabled = false, clearable = false } = _a, props = tslib.__rest(_a, ["value", "onChange", "options", "groups", "createable", "onCreate", "onSearch", "debounceDelay", "placeholder", "disabled", "clearable"]);
     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);
+    const [searchResults, setSearchResults] = react.useState(options);
     useUpdateEffect.useUpdateEffect(() => {
-        if (!onSearch || !debouncedSearch) {
+        if (!onSearch) {
             return;
         }
         const search = () => tslib.__awaiter(void 0, void 0, void 0, function* () {
             try {
+                if (!debouncedSearch) {
+                    setSearchResults(options);
+                }
                 const results = onSearch(debouncedSearch);
-                if (isPromise(results)) {
+                if (utils.isPromise(results)) {
                     setLoading(true);
                     const options = yield results;
                     setSearchResults(options);
@@ -90,7 +60,7 @@ const MultiSelect = (_a) => {
     }, [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 optionsList$1 = react.useMemo(() => utils.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 === " ") {
@@ -98,18 +68,12 @@ const MultiSelect = (_a) => {
             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: () => {
+    return (jsxRuntime.jsxs(popover.Popover, { open: open, onOpenChange: setPopoverVisibility, children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(inputContainer.InputContainer, Object.assign({}, props, { disabled: disabled, placeholder: placeholder, clearable: clearable, onClear: handleClear, onKeyDown: handleTriggerKeyDown, children: value.length > 0 ? jsxRuntime.jsx(badgeList.BadgeList, { options: value, disabled: disabled, onRemove: handleRemove }) : null })) }), 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$1.length > 0 ? (jsxRuntime.jsx(optionsList.OptionsList, { options: optionsList$1, selectedValues: selectedValues, onSelect: handleSelect, showCheckbox: true })) : (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, "\""] }))] })] }) })] }));

package/dist/cjs/components/selectors/shared/input-container.js

@@ -0,0 +1,17 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('../../../lib/utils.js');
+var icon = require('../../media/icon/icon.js');
+var iconButton = require('../../buttons/icon-button/icon-button.js');
+var flex = require('../../layout/flex/flex.js');
+
+const InputContainer = (_a) => {
+    var { disabled = false, placeholder = "Select...", clearable = false, onClear, children, className } = _a, props = tslib.__rest(_a, ["disabled", "placeholder", "clearable", "onClear", "children", "className"]);
+    return (jsxRuntime.jsxs("div", Object.assign({}, props, { tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": false, "aria-haspopup": "listbox", "aria-label": placeholder, "aria-disabled": disabled, className: utils.cn("flex min-h-9 w-full 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: children !== null && children !== void 0 ? children : jsxRuntime.jsx("span", { className: "text-base md:text-sm text-muted-foreground", children: placeholder }) }), clearable && !disabled && onClear && (jsxRuntime.jsx(iconButton.IconButton, { icon: "circle-x", radius: "full", variant: "ghost", className: "size-6 p-1 shrink-0 self-start", onClick: onClear, disabled: disabled, tooltip: "Clear", "aria-label": "Clear selection" })), jsxRuntime.jsx(icon.Icon, { name: "chevron-down", className: "size-6 p-1 shrink-0 opacity-50 self-start" })] })));
+};
+InputContainer.displayName = "InputContainer";
+
+exports.InputContainer = InputContainer;

package/dist/cjs/components/selectors/shared/options-list.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, showCheckbox = false }) => (jsxRuntime.jsxs(command.CommandItem, { value: option.value, keywords: [option.label], onSelect: () => onSelect(option), className: "flex items-center gap-2", children: [showCheckbox && jsxRuntime.jsx(checkbox.Checkbox, { tabIndex: -1, checked: selected, size: "sm" }), option.label] })));
+OptionItem.displayName = "OptionItem";
+const OptionsList = react.memo(({ options, selectedValues, onSelect, showCheckbox = false }) => (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, showCheckbox: showCheckbox }) }, value)) : data ? (jsxRuntime.jsx(OptionItem, { option: data, selected: selectedValues.has(value), onSelect: onSelect, showCheckbox: showCheckbox }, value)) : null) })));
+OptionsList.displayName = "OptionsList";
+
+exports.OptionsList = OptionsList;

package/dist/cjs/components/selectors/shared/utils.js

@@ -0,0 +1,37 @@
+'use strict';
+
+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);
+}
+
+exports.getGroupedListOptions = getGroupedListOptions;
+exports.isPromise = isPromise;

package/dist/cjs/components/selectors/single-select/single-select.js

@@ -0,0 +1,81 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var utils = require('../shared/utils.js');
+var optionsList = require('../shared/options-list.js');
+var inputContainer = require('../shared/input-container.js');
+var command = require('../../ui/command/command.js');
+var popover = require('../../popovers/popover/popover.js');
+var useDebounce = require('../../../hooks/use-debounce.js');
+var useUpdateEffect = require('../../../hooks/useUpdateEffect.js');
+require('clsx');
+require('lodash/throttle');
+
+const defaultOption = undefined;
+const defaultOptions = [];
+const defaultGroups = [];
+const SingleSelect = (_a) => {
+    var { value = defaultOption, onChange = () => { }, options = defaultOptions, groups = defaultGroups, createable = false, onCreate = () => { }, onSearch, debounceDelay = 500, placeholder = "Select an option...", disabled = false, clearable = false } = _a, props = tslib.__rest(_a, ["value", "onChange", "options", "groups", "createable", "onCreate", "onSearch", "debounceDelay", "placeholder", "disabled", "clearable"]);
+    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);
+    useUpdateEffect.useUpdateEffect(() => {
+        if (!onSearch) {
+            return;
+        }
+        const search = () => tslib.__awaiter(void 0, void 0, void 0, function* () {
+            try {
+                if (!debouncedSearch) {
+                    setSearchResults(options);
+                }
+                const results = onSearch(debouncedSearch);
+                if (utils.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(opt);
+        setOpen(false);
+    }, [onChange]);
+    const handleClear = react.useCallback(() => onChange(undefined), [onChange]);
+    const optionsList$1 = react.useMemo(() => utils.getGroupedListOptions(searchResults, groups), [searchResults, groups]);
+    const selectedValues = react.useMemo(() => new Set(value ? [value.value] : []), [value]);
+    const handleTriggerKeyDown = react.useCallback((e) => {
+        if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen(true);
+        }
+    }, []);
+    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.jsx(inputContainer.InputContainer, Object.assign({}, props, { disabled: disabled, placeholder: placeholder, clearable: clearable, onClear: handleClear, onKeyDown: handleTriggerKeyDown, children: value && jsxRuntime.jsx("span", { className: "text-base md:text-sm", children: value.label }) })) }), jsxRuntime.jsx(popover.PopoverContent, { className: "p-0", align: "start", matchTriggerWidth: true, children: jsxRuntime.jsxs(command.Command, { id: "singleselect-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$1.length > 0 ? (jsxRuntime.jsx(optionsList.OptionsList, { options: optionsList$1, 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, "\""] }))] })] }) })] }));
+};
+SingleSelect.displayName = "SingleSelect";
+
+exports.SingleSelect = SingleSelect;

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

@@ -0,0 +1,54 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var utils = require('../../../lib/utils.js');
+
+const cardVariants = classVarianceAuthority.cva("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", {
+    variants: {
+        variant: {
+            default: "",
+            ghost: "border-none shadow-none",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Card(_a) {
+    var { className, variant } = _a, props = tslib.__rest(_a, ["className", "variant"]);
+    return jsxRuntime.jsx("div", Object.assign({ "data-slot": "card", className: utils.cn(cardVariants({ variant }), className) }, props));
+}
+function CardHeader(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ "data-slot": "card-header", className: utils.cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className) }, props)));
+}
+function CardTitle(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return jsxRuntime.jsx("div", Object.assign({ "data-slot": "card-title", className: utils.cn("leading-none font-semibold", className) }, props));
+}
+function CardDescription(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return jsxRuntime.jsx("div", Object.assign({ "data-slot": "card-description", className: utils.cn("text-muted-foreground text-sm", className) }, props));
+}
+function CardAction(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ "data-slot": "card-action", className: utils.cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className) }, props)));
+}
+function CardContent(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return jsxRuntime.jsx("div", Object.assign({ "data-slot": "card-content", className: utils.cn("px-6", className) }, props));
+}
+function CardFooter(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ "data-slot": "card-footer", className: utils.cn("flex items-center px-6 [.border-t]:pt-6", className) }, props)));
+}
+
+exports.Card = Card;
+exports.CardAction = CardAction;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;

package/dist/cjs/index.js

@@ -14,7 +14,10 @@ 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 form = require('./components/forms/form/form.js');
+var formControl = require('./components/forms/form/form-control.js');
 var multiselect = require('./components/selectors/multiselect/multiselect.js');
+var singleSelect = require('./components/selectors/single-select/single-select.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');
@@ -39,6 +42,7 @@ var progress = require('./components/ui/progress/progress.js');
 var sidebar = require('./components/ui/sidebar/sidebar.js');
 var table = require('./components/ui/table/table.js');
 var tabs = require('./components/ui/tabs/tabs.js');
+var card = require('./components/ui/card/card.js');
 var emptyState = require('./components/utility/empty-state/empty-state.js');
 var separator = require('./components/utility/separator/separator.js');
 var skeleton = require('./components/utility/skeleton/skeleton.js');
@@ -95,7 +99,17 @@ exports.SelectTrigger = select.SelectTrigger;
 exports.SelectValue = select.SelectValue;
 exports.Switch = _switch.Switch;
 exports.Textarea = textarea.Textarea;
+exports.Form = form.Form;
+exports.FormDescription = form.FormDescription;
+exports.FormField = form.FormField;
+exports.FormFieldControl = form.FormFieldControl;
+exports.FormItem = form.FormItem;
+exports.FormLabel = form.FormLabel;
+exports.FormMessage = form.FormMessage;
+exports.useFormField = form.useFormField;
+exports.FormControl = formControl.FormControl;
 exports.MultiSelect = multiselect.MultiSelect;
+exports.SingleSelect = singleSelect.SingleSelect;
 exports.Icon = icon.Icon;
 exports.Avatar = avatar.Avatar;
 exports.AvatarFallback = avatar.AvatarFallback;
@@ -212,6 +226,13 @@ exports.Tabs = tabs.Tabs;
 exports.TabsContent = tabs.TabsContent;
 exports.TabsList = tabs.TabsList;
 exports.TabsTrigger = tabs.TabsTrigger;
+exports.Card = card.Card;
+exports.CardAction = card.CardAction;
+exports.CardContent = card.CardContent;
+exports.CardDescription = card.CardDescription;
+exports.CardFooter = card.CardFooter;
+exports.CardHeader = card.CardHeader;
+exports.CardTitle = card.CardTitle;
 exports.EmptyState = emptyState.EmptyState;
 exports.Separator = separator.Separator;
 exports.Skeleton = skeleton.Skeleton;

package/dist/esm/components/forms/form/form-control.js

@@ -0,0 +1,15 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useFormContext } from 'react-hook-form';
+import { FormField, FormItem, FormLabel, FormFieldControl, FormDescription, FormMessage } from './form.js';
+
+function FormControl(_a) {
+    var { name, label, description, showMessage = true, children } = _a, props = __rest(_a, ["name", "label", "description", "showMessage", "children"]);
+    const form = useFormContext();
+    if (!form) {
+        throw new Error("FormControl must be used within a Form component");
+    }
+    return (jsx(FormField, { control: form.control, name: name, render: ({ field }) => (jsxs(FormItem, Object.assign({}, props, { children: [label && jsx(FormLabel, { children: label }), jsx(FormFieldControl, Object.assign({}, field, { children: children })), description && jsx(FormDescription, { children: description }), showMessage && jsx(FormMessage, {})] }))) }));
+}
+
+export { FormControl };

package/dist/esm/components/forms/form/form.js

@@ -0,0 +1,59 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { FormProvider, useFormContext, useFormState, Controller } from 'react-hook-form';
+import { createContext, useContext, useId } from 'react';
+import { cn } from '../../../lib/utils.js';
+import { Label } from '../label/label.js';
+
+const Form = FormProvider;
+const FormFieldContext = createContext({});
+const FormField = (_a) => {
+    var props = __rest(_a, []);
+    return (jsx(FormFieldContext.Provider, { value: { name: props.name }, children: jsx(Controller, Object.assign({}, props)) }));
+};
+const FormItemContext = createContext({});
+const useFormField = () => {
+    const fieldContext = useContext(FormFieldContext);
+    const itemContext = useContext(FormItemContext);
+    const { getFieldState } = useFormContext();
+    const formState = useFormState({ name: fieldContext.name });
+    const fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+    const { id } = itemContext;
+    return Object.assign({ id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message` }, fieldState);
+};
+function FormItem(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const id = useId();
+    return (jsx(FormItemContext.Provider, { value: { id }, children: jsx("div", Object.assign({ "data-slot": "form-item", className: cn("grid gap-2", className) }, props)) }));
+}
+function FormLabel(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { error, formItemId } = useFormField();
+    return (jsx(Label, Object.assign({ "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive", className), htmlFor: formItemId }, props)));
+}
+function FormFieldControl(_a) {
+    var props = __rest(_a, []);
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (jsx(Slot, Object.assign({ "data-slot": "form-control", id: formItemId, "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error }, props)));
+}
+function FormDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { formDescriptionId } = useFormField();
+    return (jsx("p", Object.assign({ "data-slot": "form-description", id: formDescriptionId, className: cn("text-muted-foreground text-sm", className) }, props)));
+}
+function FormMessage(_a) {
+    var _b;
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { error, formMessageId } = useFormField();
+    const body = error ? String((_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : "") : props.children;
+    if (!body) {
+        return null;
+    }
+    return (jsx("p", Object.assign({ "data-slot": "form-message", id: formMessageId, className: cn("text-destructive text-sm", className) }, props, { children: body })));
+}
+
+export { Form, FormDescription, FormField, FormFieldControl, FormItem, FormLabel, FormMessage, useFormField };

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

@@ -11,11 +11,7 @@ const BadgeList = memo(({ options, disabled, onRemove }) => {
         if (disabled) {
             return;
         }
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onRemove(opt);
-        }
-        else if (e.key === "Backspace" || e.key === "Delete") {
+        if (e.key === "Enter" || e.key === " " || e.key === "Backspace" || e.key === "Delete") {
             e.preventDefault();
             onRemove(opt);
             const nextBadge = e.currentTarget.nextElementSibling || e.currentTarget.previousElementSibling;