@uipath/apollo-wind 2.52.3 → 2.53.0

package/dist/components/ui/index.cjs

@@ -24,10 +24,10 @@ var __webpack_modules__ = {
     "./button-group" (module) {
         module.exports = require("./button-group.cjs");
     },
-    "@/components/ui/button" (module) {
+    "./button" (module) {
         module.exports = require("./button.cjs");
     },
-    "@/components/ui/calendar" (module) {
+    "./calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
     "@/components/ui/card" (module) {
@@ -36,10 +36,10 @@ var __webpack_modules__ = {
     "./chart" (module) {
         module.exports = require("./chart.cjs");
     },
-    "@/components/ui/checkbox" (module) {
+    "./checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "@/components/ui/collapsible" (module) {
+    "./collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (module) {
@@ -48,7 +48,7 @@ var __webpack_modules__ = {
     "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "@/components/ui/context-menu" (module) {
+    "./context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -60,7 +60,7 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "@/components/ui/dialog" (module) {
+    "./dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "./drawer" (module) {
@@ -69,7 +69,7 @@ var __webpack_modules__ = {
     "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "./editable-cell" (module) {
+    "@/components/ui/editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -81,16 +81,16 @@ var __webpack_modules__ = {
     "./form-field" (module) {
         module.exports = require("./form-field.cjs");
     },
-    "@/components/ui/hover-card" (module) {
+    "./hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
     "@/components/ui/info-tooltip" (module) {
         module.exports = require("./info-tooltip.cjs");
     },
-    "@/components/ui/input-group" (module) {
+    "./input-group" (module) {
         module.exports = require("./input-group.cjs");
     },
-    "@/components/ui/input" (module) {
+    "./input" (module) {
         module.exports = require("./input.cjs");
     },
     "@/components/ui/label" (module) {
@@ -162,13 +162,13 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "./table" (module) {
+    "@/components/ui/table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "@/components/ui/textarea" (module) {
+    "./textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./toggle-group" (module) {
@@ -177,7 +177,7 @@ var __webpack_modules__ = {
     "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
-    "./tooltip" (module) {
+    "@/components/ui/tooltip" (module) {
         module.exports = require("./tooltip.cjs");
     },
     "./tree-view" (module) {
@@ -282,7 +282,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_breadcrumb__rspack_import_6[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _button__rspack_import_7 = __webpack_require__("@/components/ui/button");
+    var _button__rspack_import_7 = __webpack_require__("./button");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _button__rspack_import_7)if ([
         "TreeView",
@@ -296,7 +296,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_button_group__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _calendar__rspack_import_9 = __webpack_require__("@/components/ui/calendar");
+    var _calendar__rspack_import_9 = __webpack_require__("./calendar");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _calendar__rspack_import_9)if ([
         "TreeView",
@@ -317,14 +317,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_chart__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_12 = __webpack_require__("@/components/ui/checkbox");
+    var _checkbox__rspack_import_12 = __webpack_require__("./checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_12)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_12[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapsible__rspack_import_13 = __webpack_require__("@/components/ui/collapsible");
+    var _collapsible__rspack_import_13 = __webpack_require__("./collapsible");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _collapsible__rspack_import_13)if ([
         "TreeView",
@@ -345,7 +345,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_15[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_16 = __webpack_require__("@/components/ui/context-menu");
+    var _context_menu__rspack_import_16 = __webpack_require__("./context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_16)if ([
         "TreeView",
@@ -373,7 +373,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_20 = __webpack_require__("@/components/ui/dialog");
+    var _dialog__rspack_import_20 = __webpack_require__("./dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_20)if ([
         "TreeView",
@@ -394,7 +394,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_22[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_23 = __webpack_require__("./editable-cell");
+    var _editable_cell__rspack_import_23 = __webpack_require__("@/components/ui/editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_23)if ([
         "TreeView",
@@ -422,7 +422,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_form_field__rspack_import_26[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_27 = __webpack_require__("@/components/ui/hover-card");
+    var _hover_card__rspack_import_27 = __webpack_require__("./hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_27)if ([
         "TreeView",
@@ -436,14 +436,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_info_tooltip__rspack_import_28[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_29 = __webpack_require__("@/components/ui/input");
+    var _input__rspack_import_29 = __webpack_require__("./input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_29)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_29[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input_group__rspack_import_30 = __webpack_require__("@/components/ui/input-group");
+    var _input_group__rspack_import_30 = __webpack_require__("./input-group");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input_group__rspack_import_30)if ([
         "TreeView",
@@ -611,7 +611,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_53[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_54 = __webpack_require__("./table");
+    var _table__rspack_import_54 = __webpack_require__("@/components/ui/table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_54)if ([
         "TreeView",
@@ -625,7 +625,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_55[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_56 = __webpack_require__("@/components/ui/textarea");
+    var _textarea__rspack_import_56 = __webpack_require__("./textarea");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _textarea__rspack_import_56)if ([
         "TreeView",
@@ -646,7 +646,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_toggle_group__rspack_import_58[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _tooltip__rspack_import_59 = __webpack_require__("./tooltip");
+    var _tooltip__rspack_import_59 = __webpack_require__("@/components/ui/tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _tooltip__rspack_import_59)if ([
         "TreeView",

package/dist/components/ui/input-group.cjs

@@ -57,8 +57,6 @@ const InputGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ cl
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
                 id: validationId,
-                "data-slot": "input-group-error",
-                className: "mt-1",
                 children: error
             })
         ]

package/dist/components/ui/input-group.d.ts

@@ -27,7 +27,7 @@ declare const InputGroupText: React.ForwardRefExoticComponent<InputGroupTextProp
 export interface InputGroupInputProps extends Omit<InputProps, 'variant' | 'size' | 'error' | 'errorId'> {
 }
 declare const InputGroupInput: React.ForwardRefExoticComponent<InputGroupInputProps & React.RefAttributes<HTMLInputElement>>;
-export interface InputGroupTextareaProps extends Omit<TextareaProps, 'variant'> {
+export interface InputGroupTextareaProps extends Omit<TextareaProps, 'variant' | 'error' | 'errorId'> {
 }
 declare const InputGroupTextarea: React.ForwardRefExoticComponent<Omit<InputGroupTextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/dist/components/ui/input-group.js

@@ -24,8 +24,6 @@ const InputGroup = /*#__PURE__*/ forwardRef(({ className, error, errorId, varian
             }),
             /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
-                "data-slot": "input-group-error",
-                className: "mt-1",
                 children: error
             })
         ]

package/dist/components/ui/input.cjs

@@ -52,8 +52,6 @@ const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-d
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
                 id: validationId,
-                "data-slot": "input-error",
-                className: "mt-1",
                 children: error
             })
         ]

package/dist/components/ui/input.js

@@ -24,8 +24,6 @@ const Input = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, '
             }),
             /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
-                "data-slot": "input-error",
-                className: "mt-1",
                 children: error
             })
         ]

package/dist/components/ui/lockable-value-field/lockable-value-field.cjs

@@ -97,7 +97,7 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
     const hasMoreActions = Boolean(more?.onRefresh || !locked && more?.onClear);
     const lockedDisplayValue = (0, external_utils_cjs_namespaceObject.getLockedDisplayValue)(fieldType, value, options);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('@container group flex flex-col gap-1.5', className),
+        className: (0, index_cjs_namespaceObject.cn)('@container group flex flex-col gap-1.5 [&>[data-slot=form-field-error]]:mt-0', className),
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(field_header_cjs_namespaceObject.FieldHeader, {
                 label: label,

package/dist/components/ui/lockable-value-field/lockable-value-field.js

@@ -69,7 +69,7 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
     const hasMoreActions = Boolean(more?.onRefresh || !locked && more?.onClear);
     const lockedDisplayValue = getLockedDisplayValue(fieldType, value, options);
     return /*#__PURE__*/ jsxs("div", {
-        className: cn('@container group flex flex-col gap-1.5', className),
+        className: cn('@container group flex flex-col gap-1.5 [&>[data-slot=form-field-error]]:mt-0', className),
         children: [
             /*#__PURE__*/ jsx(FieldHeader, {
                 label: label,

package/dist/components/ui/multi-select.cjs

@@ -35,8 +35,15 @@ const external_checkbox_cjs_namespaceObject = require("./checkbox.cjs");
 const external_command_cjs_namespaceObject = require("./command.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref)=>{
+const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur, error, errorId, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref)=>{
     const [open, setOpen] = external_react_namespaceObject.useState(false);
+    const generatedId = external_react_namespaceObject.useId();
+    const validationId = errorId ?? `${id ?? `multi-select-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
     const handleUnselect = (value)=>{
         onChange(selected.filter((s)=>s !== value));
     };
@@ -53,129 +60,135 @@ const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ i
     const handleClearAll = ()=>{
         onChange([]);
     };
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         ref: ref,
         "data-slot": "multi-select",
         className: (0, index_cjs_namespaceObject.cn)('relative', className),
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
-            open: open,
-            onOpenChange: (nextOpen)=>{
-                setOpen(nextOpen);
-                if (!nextOpen && open) onBlur?.();
-            },
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
-                    asChild: true,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
-                        id: id,
-                        variant: "outline",
-                        role: "combobox",
-                        "aria-expanded": open,
-                        "aria-invalid": ariaInvalid,
-                        "aria-describedby": ariaDescribedBy,
-                        "aria-errormessage": ariaErrorMessage,
-                        "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
-                        className: (0, index_cjs_namespaceObject.cn)('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
-                        disabled: disabled,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+                open: open,
+                onOpenChange: (nextOpen)=>{
+                    setOpen(nextOpen);
+                    if (!nextOpen && open) onBlur?.();
+                },
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+                            id: id,
+                            variant: "outline",
+                            role: "combobox",
+                            "aria-expanded": open,
+                            "aria-invalid": error ? true : ariaInvalid,
+                            "aria-describedby": describedBy || void 0,
+                            "aria-errormessage": error ? validationId : ariaErrorMessage,
+                            "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
+                            className: (0, index_cjs_namespaceObject.cn)('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
+                            disabled: disabled,
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: "flex flex-wrap gap-1 flex-1",
+                                    children: 0 === selected.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "text-foreground-muted",
+                                        children: placeholder
+                                    }) : selected.map((value)=>{
+                                        const option = options.find((opt)=>opt.value === value);
+                                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_badge_cjs_namespaceObject.Badge, {
+                                            variant: "secondary",
+                                            className: "mr-1 future:bg-surface-raised future:hover:bg-surface-raised",
+                                            onClick: (e)=>{
+                                                e.stopPropagation();
+                                                handleUnselect(value);
+                                            },
+                                            children: [
+                                                option?.label,
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                                    type: "button",
+                                                    "aria-label": `Remove ${option?.label}`,
+                                                    className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer bg-transparent border-0 p-0 inline-flex items-center",
+                                                    onMouseDown: (e)=>{
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                    },
+                                                    onClick: (e)=>{
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                        handleUnselect(value);
+                                                    },
+                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
+                                                        className: "h-3 w-3 text-muted-foreground hover:text-foreground"
+                                                    })
+                                                })
+                                            ]
+                                        }, value);
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronsUpDown, {
+                                    className: "h-4 w-4 shrink-0 opacity-50"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.PopoverContent, {
+                        className: "w-[--radix-popover-trigger-width] p-0",
+                        align: "start",
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                className: "flex flex-wrap gap-1 flex-1",
-                                children: 0 === selected.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                    className: "text-foreground-muted",
-                                    children: placeholder
-                                }) : selected.map((value)=>{
-                                    const option = options.find((opt)=>opt.value === value);
-                                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_badge_cjs_namespaceObject.Badge, {
-                                        variant: "secondary",
-                                        className: "mr-1 future:bg-surface-raised future:hover:bg-surface-raised",
-                                        onClick: (e)=>{
-                                            e.stopPropagation();
-                                            handleUnselect(value);
-                                        },
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.Command, {
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandInput, {
+                                        placeholder: searchPlaceholder
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandList, {
                                         children: [
-                                            option?.label,
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                                                type: "button",
-                                                "aria-label": `Remove ${option?.label}`,
-                                                className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer bg-transparent border-0 p-0 inline-flex items-center",
-                                                onMouseDown: (e)=>{
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-                                                },
-                                                onClick: (e)=>{
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-                                                    handleUnselect(value);
-                                                },
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
-                                                    className: "h-3 w-3 text-muted-foreground hover:text-foreground"
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandEmpty, {
+                                                children: emptyMessage
+                                            }),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandGroup, {
+                                                children: options.map((option)=>{
+                                                    const isSelected = selected.includes(option.value);
+                                                    const isDisabled = void 0 !== maxSelected && selected.length >= maxSelected && !isSelected;
+                                                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandItem, {
+                                                        onSelect: ()=>{
+                                                            if (!isDisabled) handleSelect(option.value);
+                                                        },
+                                                        disabled: isDisabled,
+                                                        className: (0, index_cjs_namespaceObject.cn)('group', isDisabled && 'opacity-50 cursor-not-allowed'),
+                                                        children: [
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_checkbox_cjs_namespaceObject.Checkbox, {
+                                                                checked: isSelected,
+                                                                className: "mr-2 pointer-events-none group-hover:border-muted-foreground",
+                                                                tabIndex: -1
+                                                            }),
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                children: option.label
+                                                            })
+                                                        ]
+                                                    }, option.value);
                                                 })
                                             })
                                         ]
-                                    }, value);
-                                })
+                                    })
+                                ]
                             }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronsUpDown, {
-                                className: "h-4 w-4 shrink-0 opacity-50"
+                            selected.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "border-t p-2",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                                    variant: "ghost",
+                                    size: "sm",
+                                    className: "w-full",
+                                    onClick: handleClearAll,
+                                    children: 'function' == typeof clearAllText ? clearAllText(selected.length) : clearAllText || `Clear all (${selected.length})`
+                                })
                             })
                         ]
                     })
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.PopoverContent, {
-                    className: "w-[--radix-popover-trigger-width] p-0",
-                    align: "start",
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.Command, {
-                            children: [
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandInput, {
-                                    placeholder: searchPlaceholder
-                                }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandList, {
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandEmpty, {
-                                            children: emptyMessage
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandGroup, {
-                                            children: options.map((option)=>{
-                                                const isSelected = selected.includes(option.value);
-                                                const isDisabled = void 0 !== maxSelected && selected.length >= maxSelected && !isSelected;
-                                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandItem, {
-                                                    onSelect: ()=>{
-                                                        if (!isDisabled) handleSelect(option.value);
-                                                    },
-                                                    disabled: isDisabled,
-                                                    className: (0, index_cjs_namespaceObject.cn)('group', isDisabled && 'opacity-50 cursor-not-allowed'),
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_checkbox_cjs_namespaceObject.Checkbox, {
-                                                            checked: isSelected,
-                                                            className: "mr-2 pointer-events-none group-hover:border-muted-foreground",
-                                                            tabIndex: -1
-                                                        }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                            children: option.label
-                                                        })
-                                                    ]
-                                                }, option.value);
-                                            })
-                                        })
-                                    ]
-                                })
-                            ]
-                        }),
-                        selected.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                            className: "border-t p-2",
-                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
-                                variant: "ghost",
-                                size: "sm",
-                                className: "w-full",
-                                onClick: handleClearAll,
-                                children: 'function' == typeof clearAllText ? clearAllText(selected.length) : clearAllText || `Clear all (${selected.length})`
-                            })
-                        })
-                    ]
-                })
-            ]
-        })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+                id: validationId,
+                children: error
+            })
+        ]
     });
 });
 MultiSelect.displayName = 'MultiSelect';

package/dist/components/ui/multi-select.d.ts

@@ -17,6 +17,13 @@ export interface MultiSelectProps {
     clearAllText?: string | ((count: number) => string);
     /** Called when the multi-select popover closes after being opened. */
     onBlur?: () => void;
+    /**
+     * Field-specific feedback rendered immediately below the trigger.
+     * Keep the message focused on what went wrong and how to resolve it.
+     */
+    error?: React.ReactNode;
+    /** Optional id for the inline validation message. */
+    errorId?: string;
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-describedby'?: string;
     'aria-errormessage'?: string;