@uipath/apollo-wind 2.52.2 → 2.53.0

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

@@ -4,6 +4,8 @@ export interface ComboboxItem {
     label: string;
 }
 export interface ComboboxProps {
+    /** Applied to the trigger button, so a `<label htmlFor>` pointing at it associates correctly. */
+    id?: string;
     items: ComboboxItem[];
     value?: string;
     onValueChange?: (value: string) => void;
@@ -12,5 +14,15 @@ export interface ComboboxProps {
     emptyText?: string;
     disabled?: boolean;
     className?: string;
+    /**
+     * 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;
 }
 export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/combobox.js

@@ -1,71 +1,90 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown } from "lucide-react";
-import { forwardRef, useState } from "react";
+import { forwardRef, useId, useState } from "react";
 import { Button } from "./button.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 combobox_Combobox = /*#__PURE__*/ forwardRef(function({ items, value, onValueChange, placeholder = 'Select an option...', searchPlaceholder = 'Search...', emptyText = 'No results found.', disabled, className }, ref) {
+import { FormFieldError } from "./form-field.js";
+const combobox_Combobox = /*#__PURE__*/ 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] = useState(false);
+    const generatedId = 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__*/ jsxs(Popover, {
-        "data-slot": "combobox",
-        open: open,
-        onOpenChange: setOpen,
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(PopoverTrigger, {
-                asChild: true,
-                children: /*#__PURE__*/ jsxs(Button, {
-                    ref: ref,
-                    variant: "outline",
-                    role: "combobox",
-                    "aria-expanded": open,
-                    "aria-label": selectedItem ? selectedItem.label : placeholder,
-                    className: 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__*/ jsx("span", {
-                            className: "text-foreground-muted",
-                            children: placeholder
-                        }),
-                        /*#__PURE__*/ jsx(ChevronDown, {
-                            className: "opacity-50"
+            /*#__PURE__*/ jsxs(Popover, {
+                "data-slot": "combobox",
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsxs(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: 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__*/ jsx("span", {
+                                    className: "text-foreground-muted",
+                                    children: placeholder
+                                }),
+                                /*#__PURE__*/ jsx(ChevronDown, {
+                                    className: "opacity-50"
+                                })
+                            ]
                         })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsx(PopoverContent, {
-                className: "w-[280px] p-0",
-                children: /*#__PURE__*/ jsxs(Command, {
-                    children: [
-                        /*#__PURE__*/ jsx(CommandInput, {
-                            placeholder: searchPlaceholder
-                        }),
-                        /*#__PURE__*/ jsxs(CommandList, {
+                    }),
+                    /*#__PURE__*/ jsx(PopoverContent, {
+                        className: "w-[280px] p-0",
+                        children: /*#__PURE__*/ jsxs(Command, {
                             children: [
-                                /*#__PURE__*/ jsx(CommandEmpty, {
-                                    children: emptyText
+                                /*#__PURE__*/ jsx(CommandInput, {
+                                    placeholder: searchPlaceholder
                                 }),
-                                /*#__PURE__*/ jsx(CommandGroup, {
-                                    children: items.map((item)=>/*#__PURE__*/ jsxs(CommandItem, {
-                                            value: item.value,
-                                            onSelect: (currentValue)=>{
-                                                onValueChange?.(currentValue === value ? '' : currentValue);
-                                                setOpen(false);
-                                            },
-                                            children: [
-                                                item.label,
-                                                /*#__PURE__*/ jsx(Check, {
-                                                    className: cn('ml-auto', value === item.value ? 'opacity-100' : 'opacity-0')
-                                                })
-                                            ]
-                                        }, item.value))
+                                /*#__PURE__*/ jsxs(CommandList, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(CommandEmpty, {
+                                            children: emptyText
+                                        }),
+                                        /*#__PURE__*/ jsx(CommandGroup, {
+                                            children: items.map((item)=>/*#__PURE__*/ jsxs(CommandItem, {
+                                                    value: item.value,
+                                                    onSelect: (currentValue)=>{
+                                                        onValueChange?.(currentValue === value ? '' : currentValue);
+                                                        setOpen(false);
+                                                    },
+                                                    children: [
+                                                        item.label,
+                                                        /*#__PURE__*/ jsx(Check, {
+                                                            className: cn('ml-auto', value === item.value ? 'opacity-100' : 'opacity-0')
+                                                        })
+                                                    ]
+                                                }, item.value))
+                                        })
+                                    ]
                                 })
                             ]
                         })
-                    ]
-                })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(FormFieldError, {
+                id: validationId,
+                children: error
             })
         ]
     });

package/dist/components/ui/date-picker.cjs

@@ -36,80 +36,120 @@ const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_calendar_cjs_namespaceObject = require("./calendar.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps }, ref) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
-        "data-slot": "date-picker",
+const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+    const generatedId = external_react_namespaceObject.useId();
+    const validationId = errorId ?? `${id ?? `date-picker-${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: [
-            /*#__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",
-                    "aria-label": value ? `Selected date: ${(0, external_date_fns_namespaceObject.format)(value, 'PPP')}` : placeholder,
-                    className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                    disabled: disabled,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
-                        value ? (0, external_date_fns_namespaceObject.format)(value, 'PPP') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                            className: "text-foreground-muted",
-                            children: placeholder
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+                "data-slot": "date-picker",
+                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",
+                            "aria-label": id || ariaLabelledBy ? void 0 : value ? `Selected date: ${(0, external_date_fns_namespaceObject.format)(value, 'PPP')}` : placeholder,
+                            "aria-labelledby": ariaLabelledBy,
+                            "aria-describedby": describedBy || void 0,
+                            "aria-errormessage": error ? validationId : ariaErrorMessage,
+                            "aria-invalid": error ? true : ariaInvalid,
+                            className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
+                            disabled: disabled,
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
+                                value ? (0, external_date_fns_namespaceObject.format)(value, 'PPP') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    className: "text-foreground-muted",
+                                    children: placeholder
+                                })
+                            ]
                         })
-                    ]
-                })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                        className: "w-auto p-0",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
+                            mode: "single",
+                            selected: value,
+                            onSelect: onValueChange,
+                            initialFocus: true,
+                            ...calendarProps
+                        })
+                    })
+                ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
-                className: "w-auto p-0",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
-                    mode: "single",
-                    selected: value,
-                    onSelect: onValueChange,
-                    initialFocus: true,
-                    ...calendarProps
-                })
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+                id: validationId,
+                children: error
             })
         ]
     });
 });
-const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps }, ref) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
-        "data-slot": "date-range-picker",
+const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+    const generatedId = external_react_namespaceObject.useId();
+    const validationId = errorId ?? `${id ?? `date-range-picker-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
+    const computedLabel = value?.from ? value.to ? `Selected range: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')} to ${(0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')}` : `Selected date: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')}` : placeholder;
+    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",
-                    "aria-label": value?.from ? value.to ? `Selected range: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')} to ${(0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')}` : `Selected date: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')}` : placeholder,
-                    className: (0, index_cjs_namespaceObject.cn)('w-[300px] justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                    disabled: disabled,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
-                        value?.from ? value.to ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+                "data-slot": "date-range-picker",
+                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",
+                            "aria-label": id || ariaLabelledBy ? void 0 : computedLabel,
+                            "aria-labelledby": ariaLabelledBy,
+                            "aria-describedby": describedBy || void 0,
+                            "aria-errormessage": error ? validationId : ariaErrorMessage,
+                            "aria-invalid": error ? true : ariaInvalid,
+                            className: (0, index_cjs_namespaceObject.cn)('w-[300px] justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
+                            disabled: disabled,
                             children: [
-                                (0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y'),
-                                " - ",
-                                (0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
+                                value?.from ? value.to ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                    children: [
+                                        (0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y'),
+                                        " - ",
+                                        (0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')
+                                    ]
+                                }) : (0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    className: "text-foreground-muted",
+                                    children: placeholder
+                                })
                             ]
-                        }) : (0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                            className: "text-foreground-muted",
-                            children: placeholder
                         })
-                    ]
-                })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                        className: "w-auto p-0",
+                        align: "start",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
+                            initialFocus: true,
+                            mode: "range",
+                            defaultMonth: value?.from,
+                            selected: value,
+                            onSelect: onValueChange,
+                            numberOfMonths: 2,
+                            required: false,
+                            ...calendarProps
+                        })
+                    })
+                ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
-                className: "w-auto p-0",
-                align: "start",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
-                    initialFocus: true,
-                    mode: "range",
-                    defaultMonth: value?.from,
-                    selected: value,
-                    onSelect: onValueChange,
-                    numberOfMonths: 2,
-                    required: false,
-                    ...calendarProps
-                })
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+                id: validationId,
+                children: error
             })
         ]
     });

package/dist/components/ui/date-picker.d.ts

@@ -2,20 +2,48 @@ import * as React from 'react';
 import type { DateRange } from 'react-day-picker';
 import { Calendar } from './calendar';
 export interface DatePickerProps {
+    /** Applied to the trigger button, so a `<label htmlFor>` pointing at it associates correctly. */
+    id?: string;
     value?: Date;
     onValueChange?: (date: Date | undefined) => void;
     disabled?: boolean;
     placeholder?: string;
     className?: string;
+    /**
+     * 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;
+    /** Id of the element naming this control, forwarded to the trigger button. */
+    'aria-labelledby'?: string;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
     calendarProps?: Omit<React.ComponentProps<typeof Calendar>, 'mode' | 'selected' | 'onSelect' | 'initialFocus'>;
 }
 export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
 export interface DateRangePickerProps {
+    /** Applied to the trigger button, so a `<label htmlFor>` pointing at it associates correctly. */
+    id?: string;
     value?: DateRange;
     onValueChange?: (range: DateRange | undefined) => void;
     disabled?: boolean;
     placeholder?: string;
     className?: string;
+    /**
+     * 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;
+    /** Id of the element naming this control, forwarded to the trigger button. */
+    'aria-labelledby'?: string;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
     calendarProps?: Omit<React.ComponentProps<typeof Calendar>, 'mode' | 'selected' | 'onSelect' | 'initialFocus' | 'defaultMonth' | 'numberOfMonths' | 'required'>;
 }
 export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/date-picker.js

@@ -2,85 +2,125 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
-const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps }, ref) {
-    return /*#__PURE__*/ jsxs(Popover, {
-        "data-slot": "date-picker",
+import { FormFieldError } from "./form-field.js";
+const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+    const generatedId = useId();
+    const validationId = errorId ?? `${id ?? `date-picker-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(PopoverTrigger, {
-                asChild: true,
-                children: /*#__PURE__*/ jsxs(Button, {
-                    ref: ref,
-                    variant: "outline",
-                    "aria-label": value ? `Selected date: ${format(value, 'PPP')}` : placeholder,
-                    className: cn('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                    disabled: disabled,
-                    children: [
-                        /*#__PURE__*/ jsx(CalendarIcon, {}),
-                        value ? format(value, 'PPP') : /*#__PURE__*/ jsx("span", {
-                            className: "text-foreground-muted",
-                            children: placeholder
+            /*#__PURE__*/ jsxs(Popover, {
+                "data-slot": "date-picker",
+                children: [
+                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsxs(Button, {
+                            ref: ref,
+                            id: id,
+                            variant: "outline",
+                            "aria-label": id || ariaLabelledBy ? void 0 : value ? `Selected date: ${format(value, 'PPP')}` : placeholder,
+                            "aria-labelledby": ariaLabelledBy,
+                            "aria-describedby": describedBy || void 0,
+                            "aria-errormessage": error ? validationId : ariaErrorMessage,
+                            "aria-invalid": error ? true : ariaInvalid,
+                            className: cn('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
+                            disabled: disabled,
+                            children: [
+                                /*#__PURE__*/ jsx(CalendarIcon, {}),
+                                value ? format(value, 'PPP') : /*#__PURE__*/ jsx("span", {
+                                    className: "text-foreground-muted",
+                                    children: placeholder
+                                })
+                            ]
                         })
-                    ]
-                })
+                    }),
+                    /*#__PURE__*/ jsx(PopoverContent, {
+                        className: "w-auto p-0",
+                        children: /*#__PURE__*/ jsx(Calendar, {
+                            mode: "single",
+                            selected: value,
+                            onSelect: onValueChange,
+                            initialFocus: true,
+                            ...calendarProps
+                        })
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsx(PopoverContent, {
-                className: "w-auto p-0",
-                children: /*#__PURE__*/ jsx(Calendar, {
-                    mode: "single",
-                    selected: value,
-                    onSelect: onValueChange,
-                    initialFocus: true,
-                    ...calendarProps
-                })
+            /*#__PURE__*/ jsx(FormFieldError, {
+                id: validationId,
+                children: error
             })
         ]
     });
 });
-const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps }, ref) {
-    return /*#__PURE__*/ jsxs(Popover, {
-        "data-slot": "date-range-picker",
+const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+    const generatedId = useId();
+    const validationId = errorId ?? `${id ?? `date-range-picker-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
+    const computedLabel = value?.from ? value.to ? `Selected range: ${format(value.from, 'LLL dd, y')} to ${format(value.to, 'LLL dd, y')}` : `Selected date: ${format(value.from, 'LLL dd, y')}` : placeholder;
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(PopoverTrigger, {
-                asChild: true,
-                children: /*#__PURE__*/ jsxs(Button, {
-                    ref: ref,
-                    variant: "outline",
-                    "aria-label": value?.from ? value.to ? `Selected range: ${format(value.from, 'LLL dd, y')} to ${format(value.to, 'LLL dd, y')}` : `Selected date: ${format(value.from, 'LLL dd, y')}` : placeholder,
-                    className: cn('w-[300px] justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                    disabled: disabled,
-                    children: [
-                        /*#__PURE__*/ jsx(CalendarIcon, {}),
-                        value?.from ? value.to ? /*#__PURE__*/ jsxs(Fragment, {
+            /*#__PURE__*/ jsxs(Popover, {
+                "data-slot": "date-range-picker",
+                children: [
+                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsxs(Button, {
+                            ref: ref,
+                            id: id,
+                            variant: "outline",
+                            "aria-label": id || ariaLabelledBy ? void 0 : computedLabel,
+                            "aria-labelledby": ariaLabelledBy,
+                            "aria-describedby": describedBy || void 0,
+                            "aria-errormessage": error ? validationId : ariaErrorMessage,
+                            "aria-invalid": error ? true : ariaInvalid,
+                            className: cn('w-[300px] justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
+                            disabled: disabled,
                             children: [
-                                format(value.from, 'LLL dd, y'),
-                                " - ",
-                                format(value.to, 'LLL dd, y')
+                                /*#__PURE__*/ jsx(CalendarIcon, {}),
+                                value?.from ? value.to ? /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        format(value.from, 'LLL dd, y'),
+                                        " - ",
+                                        format(value.to, 'LLL dd, y')
+                                    ]
+                                }) : format(value.from, 'LLL dd, y') : /*#__PURE__*/ jsx("span", {
+                                    className: "text-foreground-muted",
+                                    children: placeholder
+                                })
                             ]
-                        }) : format(value.from, 'LLL dd, y') : /*#__PURE__*/ jsx("span", {
-                            className: "text-foreground-muted",
-                            children: placeholder
                         })
-                    ]
-                })
+                    }),
+                    /*#__PURE__*/ jsx(PopoverContent, {
+                        className: "w-auto p-0",
+                        align: "start",
+                        children: /*#__PURE__*/ jsx(Calendar, {
+                            initialFocus: true,
+                            mode: "range",
+                            defaultMonth: value?.from,
+                            selected: value,
+                            onSelect: onValueChange,
+                            numberOfMonths: 2,
+                            required: false,
+                            ...calendarProps
+                        })
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsx(PopoverContent, {
-                className: "w-auto p-0",
-                align: "start",
-                children: /*#__PURE__*/ jsx(Calendar, {
-                    initialFocus: true,
-                    mode: "range",
-                    defaultMonth: value?.from,
-                    selected: value,
-                    onSelect: onValueChange,
-                    numberOfMonths: 2,
-                    required: false,
-                    ...calendarProps
-                })
+            /*#__PURE__*/ jsx(FormFieldError, {
+                id: validationId,
+                children: error
             })
         ]
     });