@uipath/apollo-wind 2.52.3 → 2.53.0

package/dist/components/forms/field-renderer.cjs

@@ -240,12 +240,15 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         placeholder: field.placeholder,
                         disabled: disabled,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         "aria-label": field.ariaLabel
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
                         children: field.description
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -273,12 +276,15 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         placeholder: field.placeholder,
                         disabled: disabled,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         onChange: (e)=>formField.onChange(parseFloat(e.target.value))
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
                         children: field.description
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -304,6 +310,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         disabled: disabled,
                         maxLength: field.maxLength,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         ...null != field.minRows ? {
                             minRows: field.minRows
                         } : {
@@ -314,6 +322,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         children: field.description
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -337,6 +346,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 id: field.name,
                                 "aria-label": field.label,
                                 "aria-invalid": error ? true : void 0,
+                                "aria-describedby": error ? `${field.name}-error` : void 0,
+                                "aria-errormessage": error ? `${field.name}-error` : void 0,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectValue, {
                                     placeholder: field.placeholder || 'Select...'
                                 })
@@ -354,6 +365,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         children: field.description
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -381,12 +393,15 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         emptyMessage: field.emptyMessage ?? 'No items found.',
                         searchPlaceholder: field.searchPlaceholder ?? 'Search...',
                         maxSelected: field.maxSelected,
-                        "aria-invalid": error ? true : void 0
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
                         children: field.description
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -402,6 +417,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 onCheckedChange: (checked)=>formField.onChange(true === checked),
                                 disabled: disabled,
                                 "aria-invalid": error ? true : void 0,
+                                "aria-describedby": error ? `${field.name}-error` : void 0,
+                                "aria-errormessage": error ? `${field.name}-error` : void 0,
                                 id: field.name
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -422,6 +439,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -452,11 +470,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 checked: true === formField.value,
                                 onCheckedChange: (checked)=>formField.onChange(true === checked),
                                 disabled: disabled,
-                                "aria-invalid": error ? true : void 0
+                                "aria-invalid": error ? true : void 0,
+                                "aria-describedby": error ? `${field.name}-error` : void 0,
+                                "aria-errormessage": error ? `${field.name}-error` : void 0
                             })
                         ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -477,6 +498,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         onValueChange: formField.onChange,
                         disabled: disabled,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         children: options.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                 className: "flex items-center space-x-2",
                                 children: [
@@ -497,6 +520,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         children: field.description
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -513,21 +537,27 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
                         tooltip: field.tooltip,
                         tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(date_picker_cjs_namespaceObject.DatePicker, {
+                        id: field.name,
                         value: formField.value,
                         onValueChange: formField.onChange,
                         disabled: disabled,
-                        placeholder: field.placeholder
+                        placeholder: field.placeholder,
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
                         children: field.description
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -545,6 +575,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(datetime_picker_cjs_namespaceObject.DateTimePicker, {
                         "aria-labelledby": `${field.name}-label`,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         value: formField.value,
                         onValueChange: formField.onChange,
                         disabled: disabled,
@@ -555,6 +587,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         children: field.description
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -573,6 +606,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         id: field.name,
                         ariaLabel: field.ariaLabel ?? field.label,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         accept: field.accept,
                         multiple: field.multiple,
                         disabled: disabled,
@@ -586,6 +621,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         children: field.description
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -646,6 +682,8 @@ function SliderField({ field, formField, error, disabled, required }) {
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(slider_cjs_namespaceObject.Slider, {
                 "aria-labelledby": `${field.name}-label`,
                 "aria-invalid": error ? true : void 0,
+                "aria-describedby": error ? `${field.name}-error` : void 0,
+                "aria-errormessage": error ? `${field.name}-error` : void 0,
                 value: [
                     displayValue ?? field.min ?? 0
                 ],
@@ -659,6 +697,7 @@ function SliderField({ field, formField, error, disabled, required }) {
                 children: field.description
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                id: `${field.name}-error`,
                 children: error
             })
         ]

package/dist/components/forms/field-renderer.js

@@ -212,12 +212,15 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         placeholder: field.placeholder,
                         disabled: disabled,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         "aria-label": field.ariaLabel
                     }),
                     /*#__PURE__*/ jsx(FormFieldDescription, {
                         children: field.description
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -245,12 +248,15 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         placeholder: field.placeholder,
                         disabled: disabled,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         onChange: (e)=>formField.onChange(parseFloat(e.target.value))
                     }),
                     /*#__PURE__*/ jsx(FormFieldDescription, {
                         children: field.description
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -276,6 +282,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         disabled: disabled,
                         maxLength: field.maxLength,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         ...null != field.minRows ? {
                             minRows: field.minRows
                         } : {
@@ -286,6 +294,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         children: field.description
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -309,6 +318,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 id: field.name,
                                 "aria-label": field.label,
                                 "aria-invalid": error ? true : void 0,
+                                "aria-describedby": error ? `${field.name}-error` : void 0,
+                                "aria-errormessage": error ? `${field.name}-error` : void 0,
                                 children: /*#__PURE__*/ jsx(SelectValue, {
                                     placeholder: field.placeholder || 'Select...'
                                 })
@@ -326,6 +337,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         children: field.description
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -353,12 +365,15 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         emptyMessage: field.emptyMessage ?? 'No items found.',
                         searchPlaceholder: field.searchPlaceholder ?? 'Search...',
                         maxSelected: field.maxSelected,
-                        "aria-invalid": error ? true : void 0
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0
                     }),
                     /*#__PURE__*/ jsx(FormFieldDescription, {
                         children: field.description
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -374,6 +389,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 onCheckedChange: (checked)=>formField.onChange(true === checked),
                                 disabled: disabled,
                                 "aria-invalid": error ? true : void 0,
+                                "aria-describedby": error ? `${field.name}-error` : void 0,
+                                "aria-errormessage": error ? `${field.name}-error` : void 0,
                                 id: field.name
                             }),
                             /*#__PURE__*/ jsxs("div", {
@@ -394,6 +411,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         ]
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -424,11 +442,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 checked: true === formField.value,
                                 onCheckedChange: (checked)=>formField.onChange(true === checked),
                                 disabled: disabled,
-                                "aria-invalid": error ? true : void 0
+                                "aria-invalid": error ? true : void 0,
+                                "aria-describedby": error ? `${field.name}-error` : void 0,
+                                "aria-errormessage": error ? `${field.name}-error` : void 0
                             })
                         ]
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -449,6 +470,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         onValueChange: formField.onChange,
                         disabled: disabled,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         children: options.map((option)=>/*#__PURE__*/ jsxs("div", {
                                 className: "flex items-center space-x-2",
                                 children: [
@@ -469,6 +492,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         children: field.description
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -485,21 +509,27 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
                         tooltip: field.tooltip,
                         tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ jsx(DatePicker, {
+                        id: field.name,
                         value: formField.value,
                         onValueChange: formField.onChange,
                         disabled: disabled,
-                        placeholder: field.placeholder
+                        placeholder: field.placeholder,
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0
                     }),
                     /*#__PURE__*/ jsx(FormFieldDescription, {
                         children: field.description
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -517,6 +547,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                     /*#__PURE__*/ jsx(DateTimePicker, {
                         "aria-labelledby": `${field.name}-label`,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         value: formField.value,
                         onValueChange: formField.onChange,
                         disabled: disabled,
@@ -527,6 +559,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         children: field.description
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -545,6 +578,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         id: field.name,
                         ariaLabel: field.ariaLabel ?? field.label,
                         "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? `${field.name}-error` : void 0,
+                        "aria-errormessage": error ? `${field.name}-error` : void 0,
                         accept: field.accept,
                         multiple: field.multiple,
                         disabled: disabled,
@@ -558,6 +593,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         children: field.description
                     }),
                     /*#__PURE__*/ jsx(FormFieldError, {
+                        id: `${field.name}-error`,
                         children: error
                     })
                 ]
@@ -618,6 +654,8 @@ function SliderField({ field, formField, error, disabled, required }) {
             /*#__PURE__*/ jsx(Slider, {
                 "aria-labelledby": `${field.name}-label`,
                 "aria-invalid": error ? true : void 0,
+                "aria-describedby": error ? `${field.name}-error` : void 0,
+                "aria-errormessage": error ? `${field.name}-error` : void 0,
                 value: [
                     displayValue ?? field.min ?? 0
                 ],
@@ -631,6 +669,7 @@ function SliderField({ field, formField, error, disabled, required }) {
                 children: field.description
             }),
             /*#__PURE__*/ jsx(FormFieldError, {
+                id: `${field.name}-error`,
                 children: error
             })
         ]

package/dist/components/forms/string-list-field.cjs

@@ -103,6 +103,8 @@ function StringListField({ field, value, onChange, onBlur, error, disabled = fal
                                 disabled: disabled,
                                 "aria-label": `${field.label} ${index + 1}`,
                                 "aria-invalid": error ? true : void 0,
+                                "aria-describedby": error ? `${field.name}-error` : void 0,
+                                "aria-errormessage": error ? `${field.name}-error` : void 0,
                                 className: "flex-1"
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.Button, {
@@ -138,6 +140,7 @@ function StringListField({ field, value, onChange, onBlur, error, disabled = fal
                 children: field.description
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldError, {
+                id: `${field.name}-error`,
                 children: error
             })
         ]

package/dist/components/forms/string-list-field.js

@@ -74,6 +74,8 @@ function StringListField({ field, value, onChange, onBlur, error, disabled = fal
                                 disabled: disabled,
                                 "aria-label": `${field.label} ${index + 1}`,
                                 "aria-invalid": error ? true : void 0,
+                                "aria-describedby": error ? `${field.name}-error` : void 0,
+                                "aria-errormessage": error ? `${field.name}-error` : void 0,
                                 className: "flex-1"
                             }),
                             /*#__PURE__*/ jsx(Button, {
@@ -109,6 +111,7 @@ function StringListField({ field, value, onChange, onBlur, error, disabled = fal
                 children: field.description
             }),
             /*#__PURE__*/ jsx(FormFieldError, {
+                id: `${field.name}-error`,
                 children: error
             })
         ]

package/dist/components/ui/button.cjs

@@ -37,7 +37,7 @@ const buttonVariants = (0, external_class_variance_authority_namespaceObject.cva
         variant: {
             default: 'bg-primary text-primary-foreground hover:bg-primary/90',
             destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground future:border-border-subtle future:text-muted-foreground future:hover:text-foreground',
+            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground future:border-border-subtle future:text-muted-foreground future:hover:text-foreground aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:border-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40',
             secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 future:text-muted-foreground future:hover:text-foreground',
             ghost: 'hover:bg-accent hover:text-accent-foreground future:text-muted-foreground future:hover:text-foreground',
             link: 'text-primary underline-offset-4 hover:underline future:text-muted-foreground future:hover:text-foreground',

package/dist/components/ui/button.js

@@ -8,7 +8,7 @@ const buttonVariants = cva('inline-flex items-center justify-center gap-2 whites
         variant: {
             default: 'bg-primary text-primary-foreground hover:bg-primary/90',
             destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground future:border-border-subtle future:text-muted-foreground future:hover:text-foreground',
+            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground future:border-border-subtle future:text-muted-foreground future:hover:text-foreground aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:border-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40',
             secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 future:text-muted-foreground future:hover:text-foreground',
             ghost: 'hover:bg-accent hover:text-accent-foreground future:text-muted-foreground future:hover:text-foreground',
             link: 'text-primary underline-offset-4 hover:underline future:text-muted-foreground future:hover:text-foreground',

package/dist/components/ui/checkbox.cjs

@@ -34,7 +34,7 @@ const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
 const Checkbox = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_checkbox_namespaceObject.Root, {
         ref: ref,
         "data-slot": "checkbox",
-        className: (0, utils_cjs_namespaceObject.cn)('peer h-4 w-4 shrink-0 cursor-pointer rounded-sm border border-border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', 'future:hover:border-border-hover future:data-[state=checked]:border-foreground-accent future:data-[state=checked]:bg-foreground-accent future:data-[state=checked]:text-current', className),
+        className: (0, utils_cjs_namespaceObject.cn)('peer h-4 w-4 shrink-0 cursor-pointer rounded-sm border border-border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'future:hover:border-border-hover future:data-[state=checked]:border-foreground-accent future:data-[state=checked]:bg-foreground-accent future:data-[state=checked]:text-current', 'future:aria-invalid:border-error future:aria-invalid:hover:border-error future:aria-invalid:data-[state=checked]:border-error', className),
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_checkbox_namespaceObject.Indicator, {
             className: (0, utils_cjs_namespaceObject.cn)('flex items-center justify-center text-current future:text-foreground-inverse'),

package/dist/components/ui/checkbox.js

@@ -6,7 +6,7 @@ import { cn } from "../../lib/utils.js";
 const Checkbox = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
         ref: ref,
         "data-slot": "checkbox",
-        className: cn('peer h-4 w-4 shrink-0 cursor-pointer rounded-sm border border-border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', 'future:hover:border-border-hover future:data-[state=checked]:border-foreground-accent future:data-[state=checked]:bg-foreground-accent future:data-[state=checked]:text-current', className),
+        className: cn('peer h-4 w-4 shrink-0 cursor-pointer rounded-sm border border-border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'future:hover:border-border-hover future:data-[state=checked]:border-foreground-accent future:data-[state=checked]:bg-foreground-accent future:data-[state=checked]:text-current', 'future:aria-invalid:border-error future:aria-invalid:hover:border-error future:aria-invalid:data-[state=checked]:border-error', className),
         ...props,
         children: /*#__PURE__*/ jsx(Indicator, {
             className: cn('flex items-center justify-center text-current future:text-foreground-inverse'),

package/dist/components/ui/combobox.cjs

@@ -34,66 +34,85 @@ const external_button_cjs_namespaceObject = require("./button.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 combobox_Combobox = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ items, value, onValueChange, placeholder = 'Select an option...', searchPlaceholder = 'Search...', emptyText = 'No results found.', disabled, className }, ref) {
+const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const combobox_Combobox = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, items, value, onValueChange, placeholder = 'Select an option...', searchPlaceholder = 'Search...', emptyText = 'No results found.', disabled, className, 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 ?? `combobox-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
     const selectedItem = items.find((item)=>item.value === value);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
-        "data-slot": "combobox",
-        open: open,
-        onOpenChange: setOpen,
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         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, {
-                    ref: ref,
-                    variant: "outline",
-                    role: "combobox",
-                    "aria-expanded": open,
-                    "aria-label": selectedItem ? selectedItem.label : placeholder,
-                    className: (0, index_cjs_namespaceObject.cn)('w-[280px] justify-between future:h-10 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', className),
-                    disabled: disabled,
-                    children: [
-                        selectedItem ? selectedItem.label : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                            className: "text-foreground-muted",
-                            children: placeholder
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
-                            className: "opacity-50"
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+                "data-slot": "combobox",
+                open: open,
+                onOpenChange: setOpen,
+                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, {
+                            ref: ref,
+                            id: id,
+                            variant: "outline",
+                            role: "combobox",
+                            "aria-expanded": open,
+                            "aria-label": id ? void 0 : selectedItem ? selectedItem.label : placeholder,
+                            "aria-describedby": describedBy || void 0,
+                            "aria-errormessage": error ? validationId : ariaErrorMessage,
+                            "aria-invalid": error ? true : ariaInvalid,
+                            className: (0, index_cjs_namespaceObject.cn)('w-[280px] justify-between future:h-10 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', className),
+                            disabled: disabled,
+                            children: [
+                                selectedItem ? selectedItem.label : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    className: "text-foreground-muted",
+                                    children: placeholder
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                                    className: "opacity-50"
+                                })
+                            ]
                         })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
-                className: "w-[280px] p-0",
-                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, {
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                        className: "w-[280px] p-0",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.Command, {
                             children: [
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandEmpty, {
-                                    children: emptyText
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandInput, {
+                                    placeholder: searchPlaceholder
                                 }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandGroup, {
-                                    children: items.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandItem, {
-                                            value: item.value,
-                                            onSelect: (currentValue)=>{
-                                                onValueChange?.(currentValue === value ? '' : currentValue);
-                                                setOpen(false);
-                                            },
-                                            children: [
-                                                item.label,
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {
-                                                    className: (0, index_cjs_namespaceObject.cn)('ml-auto', value === item.value ? 'opacity-100' : 'opacity-0')
-                                                })
-                                            ]
-                                        }, item.value))
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandList, {
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandEmpty, {
+                                            children: emptyText
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandGroup, {
+                                            children: items.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandItem, {
+                                                    value: item.value,
+                                                    onSelect: (currentValue)=>{
+                                                        onValueChange?.(currentValue === value ? '' : currentValue);
+                                                        setOpen(false);
+                                                    },
+                                                    children: [
+                                                        item.label,
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {
+                                                            className: (0, index_cjs_namespaceObject.cn)('ml-auto', value === item.value ? 'opacity-100' : 'opacity-0')
+                                                        })
+                                                    ]
+                                                }, item.value))
+                                        })
+                                    ]
                                 })
                             ]
                         })
-                    ]
-                })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+                id: validationId,
+                children: error
             })
         ]
     });