@uipath/apollo-wind 2.52.3 → 2.53.1

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

@@ -36,8 +36,15 @@ const external_input_cjs_namespaceObject = require("./input.cjs");
 const external_label_cjs_namespaceObject = require("./label.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid }, ref) {
+const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false, id, error, errorId, 'aria-labelledby': ariaLabelledBy, '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 ?? `datetime-picker-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
     const [selectedDate, setSelectedDate] = external_react_namespaceObject.useState(value);
     const [timeValue, setTimeValue] = external_react_namespaceObject.useState(value ? (0, external_date_fns_namespaceObject.format)(value, use12Hour ? 'hh:mm a' : 'HH:mm') : '');
     const handleDateSelect = (date)=>{
@@ -67,87 +74,98 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
         const timePart = (0, external_date_fns_namespaceObject.format)(selectedDate, use12Hour ? 'hh:mm a' : 'HH:mm');
         return `${datePart} at ${timePart}`;
     };
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
-        "data-slot": "datetime-picker",
-        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,
-                    "aria-labelledby": ariaLabelledBy,
-                    "aria-invalid": ariaInvalid,
-                    variant: "outline",
-                    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, {
-                            className: "mr-2 h-4 w-4"
-                        }),
-                        selectedDate ? formatDisplayValue() : /*#__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.jsxs)("div", {
-                    className: "p-3 space-y-3",
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
-                            mode: "single",
-                            selected: selectedDate,
-                            onSelect: handleDateSelect,
-                            initialFocus: true
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                            className: "border-t pt-3 space-y-2",
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+                "data-slot": "datetime-picker",
+                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,
+                            "aria-labelledby": ariaLabelledBy,
+                            "aria-describedby": describedBy || void 0,
+                            "aria-errormessage": error ? validationId : ariaErrorMessage,
+                            "aria-invalid": error ? true : ariaInvalid,
+                            variant: "outline",
+                            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.jsxs)(external_label_cjs_namespaceObject.Label, {
-                                    className: "text-sm font-medium flex items-center gap-2",
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Clock, {
-                                            className: "h-4 w-4"
-                                        }),
-                                        "Time"
-                                    ]
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {
+                                    className: "mr-2 h-4 w-4"
                                 }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
-                                    type: "time",
-                                    value: timeValue,
-                                    onChange: handleTimeChange,
-                                    className: "w-full"
+                                selectedDate ? formatDisplayValue() : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    className: "text-foreground-muted",
+                                    children: placeholder
                                 })
                             ]
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                            className: "flex gap-2",
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                        className: "w-auto p-0",
+                        align: "start",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: "p-3 space-y-3",
                             children: [
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
-                                    variant: "outline",
-                                    className: "w-full",
-                                    onClick: ()=>{
-                                        setSelectedDate(void 0);
-                                        setTimeValue('');
-                                        onValueChange?.(void 0);
-                                        setOpen(false);
-                                    },
-                                    children: "Clear"
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
+                                    mode: "single",
+                                    selected: selectedDate,
+                                    onSelect: handleDateSelect,
+                                    initialFocus: true
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "border-t pt-3 space-y-2",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_label_cjs_namespaceObject.Label, {
+                                            className: "text-sm font-medium flex items-center gap-2",
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Clock, {
+                                                    className: "h-4 w-4"
+                                                }),
+                                                "Time"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
+                                            type: "time",
+                                            value: timeValue,
+                                            onChange: handleTimeChange,
+                                            className: "w-full"
+                                        })
+                                    ]
                                 }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
-                                    className: "w-full",
-                                    onClick: ()=>setOpen(false),
-                                    disabled: !selectedDate,
-                                    children: "Done"
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    className: "flex gap-2",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                                            variant: "outline",
+                                            className: "w-full",
+                                            onClick: ()=>{
+                                                setSelectedDate(void 0);
+                                                setTimeValue('');
+                                                onValueChange?.(void 0);
+                                                setOpen(false);
+                                            },
+                                            children: "Clear"
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                                            className: "w-full",
+                                            onClick: ()=>setOpen(false),
+                                            disabled: !selectedDate,
+                                            children: "Done"
+                                        })
+                                    ]
                                 })
                             ]
                         })
-                    ]
-                })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+                id: validationId,
+                children: error
             })
         ]
     });

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

@@ -1,14 +1,24 @@
 import * as React from 'react';
 export interface DateTimePickerProps {
+    /** 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;
     use12Hour?: boolean;
+    /**
+     * 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;
-    /** Marks the trigger invalid, so the error is exposed on the control itself. */
-    'aria-invalid'?: boolean;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
 }
 export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,15 +1,22 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { format } from "date-fns";
 import { CalendarIcon, Clock } from "lucide-react";
-import { forwardRef, useState } from "react";
+import { forwardRef, useId, useState } from "react";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
-const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid }, ref) {
+import { FormFieldError } from "./form-field.js";
+const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false, id, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const [open, setOpen] = useState(false);
+    const generatedId = useId();
+    const validationId = errorId ?? `${id ?? `datetime-picker-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
     const [selectedDate, setSelectedDate] = useState(value);
     const [timeValue, setTimeValue] = useState(value ? format(value, use12Hour ? 'hh:mm a' : 'HH:mm') : '');
     const handleDateSelect = (date)=>{
@@ -39,87 +46,98 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
         const timePart = format(selectedDate, use12Hour ? 'hh:mm a' : 'HH:mm');
         return `${datePart} at ${timePart}`;
     };
-    return /*#__PURE__*/ jsxs(Popover, {
-        "data-slot": "datetime-picker",
-        open: open,
-        onOpenChange: setOpen,
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(PopoverTrigger, {
-                asChild: true,
-                children: /*#__PURE__*/ jsxs(Button, {
-                    ref: ref,
-                    "aria-labelledby": ariaLabelledBy,
-                    "aria-invalid": ariaInvalid,
-                    variant: "outline",
-                    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, {
-                            className: "mr-2 h-4 w-4"
-                        }),
-                        selectedDate ? formatDisplayValue() : /*#__PURE__*/ jsx("span", {
-                            className: "text-foreground-muted",
-                            children: placeholder
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsx(PopoverContent, {
-                className: "w-auto p-0",
-                align: "start",
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: "p-3 space-y-3",
-                    children: [
-                        /*#__PURE__*/ jsx(Calendar, {
-                            mode: "single",
-                            selected: selectedDate,
-                            onSelect: handleDateSelect,
-                            initialFocus: true
-                        }),
-                        /*#__PURE__*/ jsxs("div", {
-                            className: "border-t pt-3 space-y-2",
+            /*#__PURE__*/ jsxs(Popover, {
+                "data-slot": "datetime-picker",
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsxs(Button, {
+                            ref: ref,
+                            id: id,
+                            "aria-labelledby": ariaLabelledBy,
+                            "aria-describedby": describedBy || void 0,
+                            "aria-errormessage": error ? validationId : ariaErrorMessage,
+                            "aria-invalid": error ? true : ariaInvalid,
+                            variant: "outline",
+                            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__*/ jsxs(Label, {
-                                    className: "text-sm font-medium flex items-center gap-2",
-                                    children: [
-                                        /*#__PURE__*/ jsx(Clock, {
-                                            className: "h-4 w-4"
-                                        }),
-                                        "Time"
-                                    ]
+                                /*#__PURE__*/ jsx(CalendarIcon, {
+                                    className: "mr-2 h-4 w-4"
                                 }),
-                                /*#__PURE__*/ jsx(Input, {
-                                    type: "time",
-                                    value: timeValue,
-                                    onChange: handleTimeChange,
-                                    className: "w-full"
+                                selectedDate ? formatDisplayValue() : /*#__PURE__*/ jsx("span", {
+                                    className: "text-foreground-muted",
+                                    children: placeholder
                                 })
                             ]
-                        }),
-                        /*#__PURE__*/ jsxs("div", {
-                            className: "flex gap-2",
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(PopoverContent, {
+                        className: "w-auto p-0",
+                        align: "start",
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "p-3 space-y-3",
                             children: [
-                                /*#__PURE__*/ jsx(Button, {
-                                    variant: "outline",
-                                    className: "w-full",
-                                    onClick: ()=>{
-                                        setSelectedDate(void 0);
-                                        setTimeValue('');
-                                        onValueChange?.(void 0);
-                                        setOpen(false);
-                                    },
-                                    children: "Clear"
+                                /*#__PURE__*/ jsx(Calendar, {
+                                    mode: "single",
+                                    selected: selectedDate,
+                                    onSelect: handleDateSelect,
+                                    initialFocus: true
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "border-t pt-3 space-y-2",
+                                    children: [
+                                        /*#__PURE__*/ jsxs(Label, {
+                                            className: "text-sm font-medium flex items-center gap-2",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Clock, {
+                                                    className: "h-4 w-4"
+                                                }),
+                                                "Time"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx(Input, {
+                                            type: "time",
+                                            value: timeValue,
+                                            onChange: handleTimeChange,
+                                            className: "w-full"
+                                        })
+                                    ]
                                 }),
-                                /*#__PURE__*/ jsx(Button, {
-                                    className: "w-full",
-                                    onClick: ()=>setOpen(false),
-                                    disabled: !selectedDate,
-                                    children: "Done"
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex gap-2",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Button, {
+                                            variant: "outline",
+                                            className: "w-full",
+                                            onClick: ()=>{
+                                                setSelectedDate(void 0);
+                                                setTimeValue('');
+                                                onValueChange?.(void 0);
+                                                setOpen(false);
+                                            },
+                                            children: "Clear"
+                                        }),
+                                        /*#__PURE__*/ jsx(Button, {
+                                            className: "w-full",
+                                            onClick: ()=>setOpen(false),
+                                            disabled: !selectedDate,
+                                            children: "Done"
+                                        })
+                                    ]
                                 })
                             ]
                         })
-                    ]
-                })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(FormFieldError, {
+                id: validationId,
+                children: error
             })
         ]
     });

package/dist/components/ui/file-upload.cjs

@@ -32,7 +32,16 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const file_upload_FileUpload = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, ariaLabel, onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors, onBlur, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const file_upload_FileUpload = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, ariaLabel, onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors, onBlur, error, errorId, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+    const generatedId = external_react_namespaceObject.useId();
+    const validationId = errorId ?? `${id ?? `file-upload-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
+    const resolvedAriaInvalid = error ? true : ariaInvalid;
+    const resolvedAriaErrorMessage = error ? validationId : ariaErrorMessage;
     const [files, setFiles] = external_react_namespaceObject.useState([]);
     const [isDragging, setIsDragging] = external_react_namespaceObject.useState(false);
     const [fileErrors, setFileErrors] = external_react_namespaceObject.useState(new Map());
@@ -178,19 +187,19 @@ const file_upload_FileUpload = /*#__PURE__*/ external_react_namespaceObject.forw
                 disabled: disabled,
                 onChange: handleInputChange,
                 "aria-label": id ? void 0 : ariaLabel ?? 'File upload',
-                "aria-invalid": ariaInvalid,
-                "aria-describedby": ariaDescribedBy,
-                "aria-errormessage": ariaErrorMessage
+                "aria-invalid": resolvedAriaInvalid,
+                "aria-describedby": describedBy || void 0,
+                "aria-errormessage": resolvedAriaErrorMessage
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 role: "button",
                 "aria-label": ariaLabel ?? 'File upload area',
                 "aria-disabled": disabled,
-                "aria-invalid": ariaInvalid,
-                "aria-describedby": ariaDescribedBy,
-                "aria-errormessage": ariaErrorMessage,
+                "aria-invalid": resolvedAriaInvalid,
+                "aria-describedby": describedBy || void 0,
+                "aria-errormessage": resolvedAriaErrorMessage,
                 tabIndex: disabled ? -1 : 0,
-                className: (0, index_cjs_namespaceObject.cn)('relative flex w-full flex-col items-center justify-center h-32 border-2 border-dashed rounded-lg px-4 py-6 cursor-pointer transition-colors', 'text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'future:rounded-xl future:border-border-subtle future:bg-surface-overlay future:hover:bg-surface-hover future:focus-visible:ring-offset-background', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-overlay'),
+                className: (0, index_cjs_namespaceObject.cn)('relative flex w-full flex-col items-center justify-center h-32 border-2 border-dashed rounded-lg px-4 py-6 cursor-pointer transition-colors', 'text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', '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', 'future:rounded-xl future:border-border-subtle future:bg-surface-overlay future:hover:bg-surface-hover future:focus-visible:ring-offset-background', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-overlay'),
                 onDragEnter: handleDragEnter,
                 onDragOver: handleDragOver,
                 onDragLeave: handleDragLeave,
@@ -229,6 +238,10 @@ const file_upload_FileUpload = /*#__PURE__*/ external_react_namespaceObject.forw
                     })
                 ]
             }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+                id: validationId,
+                children: error
+            }),
             files.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "mt-4 space-y-2",
                 children: files.map((file, index)=>{

package/dist/components/ui/file-upload.d.ts

@@ -26,6 +26,13 @@ export interface FileUploadProps {
     /** External errors keyed by filename. Use this to set errors from outside (e.g., upload failures). */
     errors?: Record<string, string>;
     onBlur?: React.FocusEventHandler<HTMLFieldSetElement>;
+    /**
+     * Field-level feedback rendered immediately below the dropzone, for example
+     * "Attach at least one file". Per-file problems belong in `errors` instead.
+     */
+    error?: React.ReactNode;
+    /** Optional id for the inline validation message. */
+    errorId?: string;
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-describedby'?: string;
     'aria-errormessage'?: string;

package/dist/components/ui/file-upload.js

@@ -1,10 +1,19 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Upload, X } from "lucide-react";
-import { forwardRef, useRef, useState } from "react";
+import { forwardRef, useId, useRef, useState } from "react";
 import { Button } from "./button.js";
 import { cn } from "../../lib/index.js";
-const file_upload_FileUpload = /*#__PURE__*/ forwardRef(function({ id, ariaLabel, onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors, onBlur, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+import { FormFieldError } from "./form-field.js";
+const file_upload_FileUpload = /*#__PURE__*/ forwardRef(function({ id, ariaLabel, onFilesChange, accept, multiple = false, disabled = false, maxSize, className, showPreview = false, errors, onBlur, error, errorId, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+    const generatedId = useId();
+    const validationId = errorId ?? `${id ?? `file-upload-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
+    const resolvedAriaInvalid = error ? true : ariaInvalid;
+    const resolvedAriaErrorMessage = error ? validationId : ariaErrorMessage;
     const [files, setFiles] = useState([]);
     const [isDragging, setIsDragging] = useState(false);
     const [fileErrors, setFileErrors] = useState(new Map());
@@ -150,19 +159,19 @@ const file_upload_FileUpload = /*#__PURE__*/ forwardRef(function({ id, ariaLabel
                 disabled: disabled,
                 onChange: handleInputChange,
                 "aria-label": id ? void 0 : ariaLabel ?? 'File upload',
-                "aria-invalid": ariaInvalid,
-                "aria-describedby": ariaDescribedBy,
-                "aria-errormessage": ariaErrorMessage
+                "aria-invalid": resolvedAriaInvalid,
+                "aria-describedby": describedBy || void 0,
+                "aria-errormessage": resolvedAriaErrorMessage
             }),
             /*#__PURE__*/ jsxs("div", {
                 role: "button",
                 "aria-label": ariaLabel ?? 'File upload area',
                 "aria-disabled": disabled,
-                "aria-invalid": ariaInvalid,
-                "aria-describedby": ariaDescribedBy,
-                "aria-errormessage": ariaErrorMessage,
+                "aria-invalid": resolvedAriaInvalid,
+                "aria-describedby": describedBy || void 0,
+                "aria-errormessage": resolvedAriaErrorMessage,
                 tabIndex: disabled ? -1 : 0,
-                className: cn('relative flex w-full flex-col items-center justify-center h-32 border-2 border-dashed rounded-lg px-4 py-6 cursor-pointer transition-colors', 'text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'future:rounded-xl future:border-border-subtle future:bg-surface-overlay future:hover:bg-surface-hover future:focus-visible:ring-offset-background', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-overlay'),
+                className: cn('relative flex w-full flex-col items-center justify-center h-32 border-2 border-dashed rounded-lg px-4 py-6 cursor-pointer transition-colors', 'text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', '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', 'future:rounded-xl future:border-border-subtle future:bg-surface-overlay future:hover:bg-surface-hover future:focus-visible:ring-offset-background', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-overlay'),
                 onDragEnter: handleDragEnter,
                 onDragOver: handleDragOver,
                 onDragLeave: handleDragLeave,
@@ -201,6 +210,10 @@ const file_upload_FileUpload = /*#__PURE__*/ forwardRef(function({ id, ariaLabel
                     })
                 ]
             }),
+            /*#__PURE__*/ jsx(FormFieldError, {
+                id: validationId,
+                children: error
+            }),
             files.length > 0 && /*#__PURE__*/ jsx("div", {
                 className: "mt-4 space-y-2",
                 children: files.map((file, index)=>{

package/dist/components/ui/form-field.cjs

@@ -37,7 +37,7 @@ const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const FormField = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
         "data-slot": "form-field",
-        className: (0, index_cjs_namespaceObject.cn)('grid grid-cols-[minmax(0,1fr)] gap-1.5', className),
+        className: (0, index_cjs_namespaceObject.cn)('grid grid-cols-[minmax(0,1fr)] gap-1.5 [&>[data-slot=form-field-error]]:mt-0', className),
         ...props,
         children: children
     }));
@@ -81,11 +81,11 @@ const FormFieldError = /*#__PURE__*/ external_react_namespaceObject.forwardRef((
     if (!children) return null;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
         ref: ref,
-        "data-slot": "form-field-error",
         "aria-live": "polite",
         "aria-atomic": "true",
-        className: (0, index_cjs_namespaceObject.cn)('text-xs leading-4 text-error', className),
+        className: (0, index_cjs_namespaceObject.cn)('text-xs leading-4 text-error mt-1.5', className),
         ...props,
+        "data-slot": "form-field-error",
         children: children
     });
 });

package/dist/components/ui/form-field.d.ts

@@ -14,6 +14,17 @@ export type FormFieldProps = React.ComponentPropsWithoutRef<'div'>;
  * truncating. A `1fr` track still resolves to max-content when the host width
  * is indefinite, so shrink-to-fit hosts are unaffected. `className` is merged
  * last, so a consumer can still override with `grid-cols-2` or similar.
+ *
+ * A direct-child validation message's own top margin is cancelled here
+ * (`[&>[data-slot=form-field-error]]:mt-0`), since this stack's own `gap-1.5` already
+ * spaces it -- otherwise the two would add up. Scoped to this component rather than a
+ * bare `.gap-1.5` selector in global CSS: keeping it here means it compiles into
+ * Tailwind's layered output (so a consumer's own margin utility can still win, at
+ * (0,2,0) vs this rule's (0,1,0) within the same layer) and survives the field rhythm
+ * changing out from under an unrelated stylesheet. A hand-built `grid gap-1.5` stack
+ * that isn't `<FormField>` doesn't get this for free -- see `FieldExample` in
+ * apps/storybook's guidance-primitives.tsx for the pattern to reach for instead of
+ * reintroducing the cancellation ad hoc.
  */
 declare const FormField: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface FormFieldLabelProps extends React.ComponentPropsWithoutRef<typeof Label> {

package/dist/components/ui/form-field.js

@@ -6,7 +6,7 @@ import { cn } from "../../lib/index.js";
 const FormField = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
         ref: ref,
         "data-slot": "form-field",
-        className: cn('grid grid-cols-[minmax(0,1fr)] gap-1.5', className),
+        className: cn('grid grid-cols-[minmax(0,1fr)] gap-1.5 [&>[data-slot=form-field-error]]:mt-0', className),
         ...props,
         children: children
     }));
@@ -50,11 +50,11 @@ const FormFieldError = /*#__PURE__*/ forwardRef(({ children, className, ...props
     if (!children) return null;
     return /*#__PURE__*/ jsx("p", {
         ref: ref,
-        "data-slot": "form-field-error",
         "aria-live": "polite",
         "aria-atomic": "true",
-        className: cn('text-xs leading-4 text-error', className),
+        className: cn('text-xs leading-4 text-error mt-1.5', className),
         ...props,
+        "data-slot": "form-field-error",
         children: children
     });
 });