@uipath/apollo-wind 2.52.3 → 2.53.0

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

@@ -1,14 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronsUpDown, X } from "lucide-react";
-import { forwardRef, useState } from "react";
+import { forwardRef, useId, useState } from "react";
 import { Badge } from "./badge.js";
 import { Button } from "./button.js";
 import { Checkbox } from "./checkbox.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
-const MultiSelect = /*#__PURE__*/ 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)=>{
+import { FormFieldError } from "./form-field.js";
+const MultiSelect = /*#__PURE__*/ 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] = useState(false);
+    const generatedId = 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));
     };
@@ -25,129 +32,135 @@ const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange,
     const handleClearAll = ()=>{
         onChange([]);
     };
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsxs("div", {
         ref: ref,
         "data-slot": "multi-select",
         className: cn('relative', className),
-        children: /*#__PURE__*/ jsxs(Popover, {
-            open: open,
-            onOpenChange: (nextOpen)=>{
-                setOpen(nextOpen);
-                if (!nextOpen && open) onBlur?.();
-            },
-            children: [
-                /*#__PURE__*/ jsx(PopoverTrigger, {
-                    asChild: true,
-                    children: /*#__PURE__*/ jsxs(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: 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__*/ jsxs(Popover, {
+                open: open,
+                onOpenChange: (nextOpen)=>{
+                    setOpen(nextOpen);
+                    if (!nextOpen && open) onBlur?.();
+                },
+                children: [
+                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsxs(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: 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__*/ jsx("div", {
+                                    className: "flex flex-wrap gap-1 flex-1",
+                                    children: 0 === selected.length ? /*#__PURE__*/ jsx("span", {
+                                        className: "text-foreground-muted",
+                                        children: placeholder
+                                    }) : selected.map((value)=>{
+                                        const option = options.find((opt)=>opt.value === value);
+                                        return /*#__PURE__*/ jsxs(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__*/ 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__*/ jsx(X, {
+                                                        className: "h-3 w-3 text-muted-foreground hover:text-foreground"
+                                                    })
+                                                })
+                                            ]
+                                        }, value);
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(ChevronsUpDown, {
+                                    className: "h-4 w-4 shrink-0 opacity-50"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(PopoverContent, {
+                        className: "w-[--radix-popover-trigger-width] p-0",
+                        align: "start",
                         children: [
-                            /*#__PURE__*/ jsx("div", {
-                                className: "flex flex-wrap gap-1 flex-1",
-                                children: 0 === selected.length ? /*#__PURE__*/ jsx("span", {
-                                    className: "text-foreground-muted",
-                                    children: placeholder
-                                }) : selected.map((value)=>{
-                                    const option = options.find((opt)=>opt.value === value);
-                                    return /*#__PURE__*/ jsxs(Badge, {
-                                        variant: "secondary",
-                                        className: "mr-1 future:bg-surface-raised future:hover:bg-surface-raised",
-                                        onClick: (e)=>{
-                                            e.stopPropagation();
-                                            handleUnselect(value);
-                                        },
+                            /*#__PURE__*/ jsxs(Command, {
+                                children: [
+                                    /*#__PURE__*/ jsx(CommandInput, {
+                                        placeholder: searchPlaceholder
+                                    }),
+                                    /*#__PURE__*/ jsxs(CommandList, {
                                         children: [
-                                            option?.label,
-                                            /*#__PURE__*/ 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__*/ jsx(X, {
-                                                    className: "h-3 w-3 text-muted-foreground hover:text-foreground"
+                                            /*#__PURE__*/ jsx(CommandEmpty, {
+                                                children: emptyMessage
+                                            }),
+                                            /*#__PURE__*/ jsx(CommandGroup, {
+                                                children: options.map((option)=>{
+                                                    const isSelected = selected.includes(option.value);
+                                                    const isDisabled = void 0 !== maxSelected && selected.length >= maxSelected && !isSelected;
+                                                    return /*#__PURE__*/ jsxs(CommandItem, {
+                                                        onSelect: ()=>{
+                                                            if (!isDisabled) handleSelect(option.value);
+                                                        },
+                                                        disabled: isDisabled,
+                                                        className: cn('group', isDisabled && 'opacity-50 cursor-not-allowed'),
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(Checkbox, {
+                                                                checked: isSelected,
+                                                                className: "mr-2 pointer-events-none group-hover:border-muted-foreground",
+                                                                tabIndex: -1
+                                                            }),
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                children: option.label
+                                                            })
+                                                        ]
+                                                    }, option.value);
                                                 })
                                             })
                                         ]
-                                    }, value);
-                                })
+                                    })
+                                ]
                             }),
-                            /*#__PURE__*/ jsx(ChevronsUpDown, {
-                                className: "h-4 w-4 shrink-0 opacity-50"
+                            selected.length > 0 && /*#__PURE__*/ jsx("div", {
+                                className: "border-t p-2",
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    variant: "ghost",
+                                    size: "sm",
+                                    className: "w-full",
+                                    onClick: handleClearAll,
+                                    children: 'function' == typeof clearAllText ? clearAllText(selected.length) : clearAllText || `Clear all (${selected.length})`
+                                })
                             })
                         ]
                     })
-                }),
-                /*#__PURE__*/ jsxs(PopoverContent, {
-                    className: "w-[--radix-popover-trigger-width] p-0",
-                    align: "start",
-                    children: [
-                        /*#__PURE__*/ jsxs(Command, {
-                            children: [
-                                /*#__PURE__*/ jsx(CommandInput, {
-                                    placeholder: searchPlaceholder
-                                }),
-                                /*#__PURE__*/ jsxs(CommandList, {
-                                    children: [
-                                        /*#__PURE__*/ jsx(CommandEmpty, {
-                                            children: emptyMessage
-                                        }),
-                                        /*#__PURE__*/ jsx(CommandGroup, {
-                                            children: options.map((option)=>{
-                                                const isSelected = selected.includes(option.value);
-                                                const isDisabled = void 0 !== maxSelected && selected.length >= maxSelected && !isSelected;
-                                                return /*#__PURE__*/ jsxs(CommandItem, {
-                                                    onSelect: ()=>{
-                                                        if (!isDisabled) handleSelect(option.value);
-                                                    },
-                                                    disabled: isDisabled,
-                                                    className: cn('group', isDisabled && 'opacity-50 cursor-not-allowed'),
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(Checkbox, {
-                                                            checked: isSelected,
-                                                            className: "mr-2 pointer-events-none group-hover:border-muted-foreground",
-                                                            tabIndex: -1
-                                                        }),
-                                                        /*#__PURE__*/ jsx("span", {
-                                                            children: option.label
-                                                        })
-                                                    ]
-                                                }, option.value);
-                                            })
-                                        })
-                                    ]
-                                })
-                            ]
-                        }),
-                        selected.length > 0 && /*#__PURE__*/ jsx("div", {
-                            className: "border-t p-2",
-                            children: /*#__PURE__*/ jsx(Button, {
-                                variant: "ghost",
-                                size: "sm",
-                                className: "w-full",
-                                onClick: handleClearAll,
-                                children: 'function' == typeof clearAllText ? clearAllText(selected.length) : clearAllText || `Clear all (${selected.length})`
-                            })
-                        })
-                    ]
-                })
-            ]
-        })
+                ]
+            }),
+            /*#__PURE__*/ jsx(FormFieldError, {
+                id: validationId,
+                children: error
+            })
+        ]
     });
 });
 MultiSelect.displayName = 'MultiSelect';

package/dist/components/ui/prompt-editor/prompt-editor.cjs

@@ -529,8 +529,6 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
                         id: errorId,
-                        "data-slot": "prompt-editor-error",
-                        className: "mt-1",
                         children: error
                     })
                 ]

package/dist/components/ui/prompt-editor/prompt-editor.js

@@ -501,8 +501,6 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
                         id: errorId,
-                        "data-slot": "prompt-editor-error",
-                        className: "mt-1",
                         children: error
                     })
                 ]

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

@@ -34,7 +34,7 @@ const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const RadioGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Root, {
         "data-slot": "radio-group",
-        className: (0, index_cjs_namespaceObject.cn)('grid gap-2', className),
+        className: (0, index_cjs_namespaceObject.cn)('group/radio-group grid gap-2', className),
         ...props,
         ref: ref
     }));
@@ -42,7 +42,7 @@ RadioGroup.displayName = react_radio_group_namespaceObject.Root.displayName;
 const RadioGroupItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Item, {
         ref: ref,
         "data-slot": "radio-group-item",
-        className: (0, index_cjs_namespaceObject.cn)('aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'future:border-border future:text-foreground future:hover:border-border-hover future:data-[state=checked]:border-foreground-muted', className),
+        className: (0, index_cjs_namespaceObject.cn)('aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 group-aria-invalid/radio-group:border-error group-aria-invalid/radio-group:focus-visible:ring-error', 'future:border-border future:text-foreground future:hover:border-border-hover future:data-[state=checked]:border-foreground-muted future:group-aria-invalid/radio-group:border-error', 'future:group-aria-invalid/radio-group:hover:border-error future:group-aria-invalid/radio-group:data-[state=checked]:border-error', className),
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Indicator, {
             className: "flex items-center justify-center",

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

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
 const RadioGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
         "data-slot": "radio-group",
-        className: cn('grid gap-2', className),
+        className: cn('group/radio-group grid gap-2', className),
         ...props,
         ref: ref
     }));
@@ -13,7 +13,7 @@ RadioGroup.displayName = Root.displayName;
 const RadioGroupItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Item, {
         ref: ref,
         "data-slot": "radio-group-item",
-        className: cn('aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'future:border-border future:text-foreground future:hover:border-border-hover future:data-[state=checked]:border-foreground-muted', className),
+        className: cn('aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 group-aria-invalid/radio-group:border-error group-aria-invalid/radio-group:focus-visible:ring-error', 'future:border-border future:text-foreground future:hover:border-border-hover future:data-[state=checked]:border-foreground-muted future:group-aria-invalid/radio-group:border-error', 'future:group-aria-invalid/radio-group:hover:border-error future:group-aria-invalid/radio-group:data-[state=checked]:border-error', className),
         ...props,
         children: /*#__PURE__*/ jsx(Indicator, {
             className: "flex items-center justify-center",

package/dist/components/ui/search.cjs

@@ -34,7 +34,7 @@ const external_command_cjs_namespaceObject = require("./command.cjs");
 const external_input_group_cjs_namespaceObject = require("./input-group.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const Search = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, value, onChange, onClear, showClearButton = true, variant, size, ...props }, ref)=>{
+const Search = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, value, onChange, onClear, showClearButton = true, variant, size, error, errorId, ...props }, ref)=>{
     const handleClear = ()=>{
         onChange?.('');
         onClear?.();
@@ -43,6 +43,8 @@ const Search = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ classN
         "data-slot": "search",
         variant: variant,
         size: size,
+        error: error,
+        errorId: errorId,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
                 align: "inline-start",

package/dist/components/ui/search.d.ts

@@ -7,6 +7,10 @@ export interface SearchProps extends Omit<InputGroupInputProps, 'onChange'> {
     showClearButton?: boolean;
     variant?: InputGroupProps['variant'];
     size?: InputGroupProps['size'];
+    /** Field-specific feedback rendered immediately below the search field. */
+    error?: React.ReactNode;
+    /** Optional id for the inline validation message. */
+    errorId?: string;
 }
 declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
 export interface SearchWithSuggestionsProps {

package/dist/components/ui/search.js

@@ -5,7 +5,7 @@ import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from ".
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
-const search_Search = /*#__PURE__*/ forwardRef(({ className, value, onChange, onClear, showClearButton = true, variant, size, ...props }, ref)=>{
+const search_Search = /*#__PURE__*/ forwardRef(({ className, value, onChange, onClear, showClearButton = true, variant, size, error, errorId, ...props }, ref)=>{
     const handleClear = ()=>{
         onChange?.('');
         onClear?.();
@@ -14,6 +14,8 @@ const search_Search = /*#__PURE__*/ forwardRef(({ className, value, onChange, on
         "data-slot": "search",
         variant: variant,
         size: size,
+        error: error,
+        errorId: errorId,
         children: [
             /*#__PURE__*/ jsx(InputGroupAddon, {
                 align: "inline-start",

package/dist/components/ui/select.cjs

@@ -42,6 +42,7 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
 const Select = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Root, {
         "data-slot": "select",
         ...props
@@ -59,21 +60,41 @@ const SelectValue = /*#__PURE__*/ external_react_namespaceObject.forwardRef((pro
         ...props
     }));
 SelectValue.displayName = react_select_namespaceObject.Value.displayName;
-const SelectTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_select_namespaceObject.Trigger, {
-        ref: ref,
-        "data-slot": "select-trigger",
-        className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
-        ...props,
+const SelectTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, children, error, errorId, id, ...props }, ref)=>{
+    const generatedId = external_react_namespaceObject.useId();
+    const validationId = errorId ?? `${id ?? `select-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
-            children,
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Icon, {
-                asChild: true,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
-                    className: "h-4 w-4 opacity-50"
-                })
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_select_namespaceObject.Trigger, {
+                ref: ref,
+                id: id,
+                "data-slot": "select-trigger",
+                "aria-describedby": describedBy || void 0,
+                "aria-errormessage": error ? validationId : ariaErrorMessage,
+                "aria-invalid": error ? true : ariaInvalid,
+                className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
+                ...props,
+                children: [
+                    children,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Icon, {
+                        asChild: true,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                            className: "h-4 w-4 opacity-50"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+                id: validationId,
+                children: error
             })
         ]
-    }));
+    });
+});
 SelectTrigger.displayName = react_select_namespaceObject.Trigger.displayName;
 const SelectScrollUpButton = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.ScrollUpButton, {
         ref: ref,

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

@@ -7,7 +7,16 @@ declare const Select: {
 };
 declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+    /**
+     * 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;
+}
+declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {

package/dist/components/ui/select.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Content, Group, Icon, Item, ItemIndicator, ItemText, Label, Portal, Root, ScrollDownButton, ScrollUpButton, Separator, Trigger, Value, Viewport } from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
 import { useResolvedPortalContainer } from "./portal-container.js";
 import { cn } from "../../lib/index.js";
+import { FormFieldError } from "./form-field.js";
 const Select = (props)=>/*#__PURE__*/ jsx(Root, {
         "data-slot": "select",
         ...props
@@ -22,21 +23,41 @@ const SelectValue = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Val
         ...props
     }));
 SelectValue.displayName = Value.displayName;
-const SelectTrigger = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(Trigger, {
-        ref: ref,
-        "data-slot": "select-trigger",
-        className: cn('flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
-        ...props,
+const SelectTrigger = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, children, error, errorId, id, ...props }, ref)=>{
+    const generatedId = useId();
+    const validationId = errorId ?? `${id ?? `select-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            children,
-            /*#__PURE__*/ jsx(Icon, {
-                asChild: true,
-                children: /*#__PURE__*/ jsx(ChevronDown, {
-                    className: "h-4 w-4 opacity-50"
-                })
+            /*#__PURE__*/ jsxs(Trigger, {
+                ref: ref,
+                id: id,
+                "data-slot": "select-trigger",
+                "aria-describedby": describedBy || void 0,
+                "aria-errormessage": error ? validationId : ariaErrorMessage,
+                "aria-invalid": error ? true : ariaInvalid,
+                className: cn('flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
+                ...props,
+                children: [
+                    children,
+                    /*#__PURE__*/ jsx(Icon, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx(ChevronDown, {
+                            className: "h-4 w-4 opacity-50"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(FormFieldError, {
+                id: validationId,
+                children: error
             })
         ]
-    }));
+    });
+});
 SelectTrigger.displayName = Trigger.displayName;
 const SelectScrollUpButton = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollUpButton, {
         ref: ref,

package/dist/components/ui/slider.cjs

@@ -30,7 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_slider_namespaceObject = require("@radix-ui/react-slider");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const Slider = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, defaultValue, value, ...props }, ref)=>{
+const Slider = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, defaultValue, value, 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-labelledby': ariaLabelledBy, ...props }, ref)=>{
     const thumbCount = value?.length ?? defaultValue?.length ?? 1;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_slider_namespaceObject.Root, {
         ref: ref,
@@ -49,7 +49,12 @@ const Slider = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ classN
             Array.from({
                 length: thumbCount
             }).map((_, i)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_slider_namespaceObject.Thumb, {
-                    className: "block h-5 w-5 cursor-pointer rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                    "aria-label": ariaLabel,
+                    "aria-invalid": ariaInvalid,
+                    "aria-describedby": ariaDescribedBy,
+                    "aria-errormessage": ariaErrorMessage,
+                    "aria-labelledby": ariaLabelledBy,
+                    className: "block h-5 w-5 cursor-pointer rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error"
                 }, i))
         ]
     });

package/dist/components/ui/slider.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Range, Root, Thumb, Track } from "@radix-ui/react-slider";
 import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
-const Slider = /*#__PURE__*/ forwardRef(({ className, defaultValue, value, ...props }, ref)=>{
+const Slider = /*#__PURE__*/ forwardRef(({ className, defaultValue, value, 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-labelledby': ariaLabelledBy, ...props }, ref)=>{
     const thumbCount = value?.length ?? defaultValue?.length ?? 1;
     return /*#__PURE__*/ jsxs(Root, {
         ref: ref,
@@ -21,7 +21,12 @@ const Slider = /*#__PURE__*/ forwardRef(({ className, defaultValue, value, ...pr
             Array.from({
                 length: thumbCount
             }).map((_, i)=>/*#__PURE__*/ jsx(Thumb, {
-                    className: "block h-5 w-5 cursor-pointer rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                    "aria-label": ariaLabel,
+                    "aria-invalid": ariaInvalid,
+                    "aria-describedby": ariaDescribedBy,
+                    "aria-errormessage": ariaErrorMessage,
+                    "aria-labelledby": ariaLabelledBy,
+                    className: "block h-5 w-5 cursor-pointer rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error"
                 }, i))
         ]
     });

package/dist/components/ui/switch.cjs

@@ -32,7 +32,7 @@ const react_switch_namespaceObject = require("@radix-ui/react-switch");
 const external_class_variance_authority_namespaceObject = require("class-variance-authority");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const switchVariants = (0, external_class_variance_authority_namespaceObject.cva)('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border', {
+const switchVariants = (0, external_class_variance_authority_namespaceObject.cva)('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border aria-invalid:border-error aria-invalid:focus-visible:ring-error', {
     variants: {
         size: {
             default: 'h-6 w-11',

package/dist/components/ui/switch.js

@@ -3,7 +3,7 @@ import { Root, Thumb } from "@radix-ui/react-switch";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
-const switchVariants = cva('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border', {
+const switchVariants = cva('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border aria-invalid:border-error aria-invalid:focus-visible:ring-error', {
     variants: {
         size: {
             default: 'h-6 w-11',