@uipath/apollo-wind 2.36.2 → 2.37.1

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

@@ -544,9 +544,8 @@ function FormLabel({ children, required, htmlFor, className = '' }) {
         className: className,
         children: [
             children,
-            required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                className: "text-destructive ml-1",
-                children: "*"
+            required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.RequiredIndicator, {
+                className: "ml-1"
             })
         ]
     });

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

@@ -12,7 +12,7 @@ import { Checkbox } from "../ui/checkbox.js";
 import { Switch } from "../ui/switch.js";
 import { RadioGroup, RadioGroupItem } from "../ui/radio-group.js";
 import { Slider } from "../ui/slider.js";
-import { Label } from "../ui/label.js";
+import { Label, RequiredIndicator } from "../ui/label.js";
 import { DatePicker } from "../ui/date-picker.js";
 import { DateTimePicker } from "../ui/datetime-picker.js";
 import { FileUpload } from "../ui/file-upload.js";
@@ -516,9 +516,8 @@ function FormLabel({ children, required, htmlFor, className = '' }) {
         className: className,
         children: [
             children,
-            required && /*#__PURE__*/ jsx("span", {
-                className: "text-destructive ml-1",
-                children: "*"
+            required && /*#__PURE__*/ jsx(RequiredIndicator, {
+                className: "ml-1"
             })
         ]
     });

package/dist/components/forms/form-designer.cjs

@@ -1172,9 +1172,8 @@ function FormDesigner() {
                                                                                     className: "text-xs font-medium truncate",
                                                                                     children: field.label
                                                                                 }),
-                                                                                field.rules?.some((r)=>r.effects.required) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                                                    className: "text-[10px] text-destructive",
-                                                                                    children: "*"
+                                                                                field.rules?.some((r)=>r.effects.required) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.RequiredIndicator, {
+                                                                                    className: "ml-0 text-[10px]"
                                                                                 })
                                                                             ]
                                                                         }),

package/dist/components/forms/form-designer.js

@@ -4,7 +4,7 @@ import { schemaToJson } from "./schema-serializer.js";
 import { MetadataForm } from "./metadata-form.js";
 import { Button } from "../ui/button.js";
 import { Input } from "../ui/input.js";
-import { Label } from "../ui/label.js";
+import { Label, RequiredIndicator } from "../ui/label.js";
 import { Textarea } from "../ui/textarea.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card.js";
@@ -1144,9 +1144,8 @@ function FormDesigner() {
                                                                                     className: "text-xs font-medium truncate",
                                                                                     children: field.label
                                                                                 }),
-                                                                                field.rules?.some((r)=>r.effects.required) && /*#__PURE__*/ jsx("span", {
-                                                                                    className: "text-[10px] text-destructive",
-                                                                                    children: "*"
+                                                                                field.rules?.some((r)=>r.effects.required) && /*#__PURE__*/ jsx(RequiredIndicator, {
+                                                                                    className: "ml-0 text-[10px]"
                                                                                 })
                                                                             ]
                                                                         }),

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

@@ -32,7 +32,7 @@ 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 }, ref) {
+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 [files, setFiles] = external_react_namespaceObject.useState([]);
     const [isDragging, setIsDragging] = external_react_namespaceObject.useState(false);
     const [fileErrors, setFileErrors] = external_react_namespaceObject.useState(new Map());
@@ -177,12 +177,18 @@ const file_upload_FileUpload = /*#__PURE__*/ external_react_namespaceObject.forw
                 multiple: multiple,
                 disabled: disabled,
                 onChange: handleInputChange,
-                "aria-label": id ? void 0 : ariaLabel ?? 'File upload'
+                "aria-label": id ? void 0 : ariaLabel ?? 'File upload',
+                "aria-invalid": ariaInvalid,
+                "aria-describedby": ariaDescribedBy,
+                "aria-errormessage": ariaErrorMessage
             }),
             /*#__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,
                 tabIndex: disabled ? -1 : 0,
                 className: (0, index_cjs_namespaceObject.cn)('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', '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', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50 future:border-border future:bg-surface-raised future:hover:bg-surface-overlay', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-raised'),
                 onDragEnter: handleDragEnter,

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

@@ -26,5 +26,8 @@ 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>;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
 }
 export declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLFieldSetElement>>;

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

@@ -4,7 +4,7 @@ import { Upload, X } from "lucide-react";
 import { forwardRef, 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 }, ref) {
+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) {
     const [files, setFiles] = useState([]);
     const [isDragging, setIsDragging] = useState(false);
     const [fileErrors, setFileErrors] = useState(new Map());
@@ -149,12 +149,18 @@ const file_upload_FileUpload = /*#__PURE__*/ forwardRef(function({ id, ariaLabel
                 multiple: multiple,
                 disabled: disabled,
                 onChange: handleInputChange,
-                "aria-label": id ? void 0 : ariaLabel ?? 'File upload'
+                "aria-label": id ? void 0 : ariaLabel ?? 'File upload',
+                "aria-invalid": ariaInvalid,
+                "aria-describedby": ariaDescribedBy,
+                "aria-errormessage": ariaErrorMessage
             }),
             /*#__PURE__*/ jsxs("div", {
                 role: "button",
                 "aria-label": ariaLabel ?? 'File upload area',
                 "aria-disabled": disabled,
+                "aria-invalid": ariaInvalid,
+                "aria-describedby": ariaDescribedBy,
+                "aria-errormessage": ariaErrorMessage,
                 tabIndex: disabled ? -1 : 0,
                 className: cn('relative flex flex-col items-center justify-center w-full h-32 px-4 py-6 border-2 border-dashed rounded-lg cursor-pointer transition-colors', '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', isDragging ? 'border-primary bg-primary/5' : 'border-input bg-background hover:bg-accent/50 future:border-border future:bg-surface-raised future:hover:bg-surface-overlay', disabled && 'opacity-50 cursor-not-allowed hover:bg-background future:hover:bg-surface-raised'),
                 onDragEnter: handleDragEnter,

package/dist/components/ui/index.cjs

@@ -60,7 +60,7 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "./drawer" (module) {
@@ -69,7 +69,7 @@ var __webpack_modules__ = {
     "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "@/components/ui/editable-cell" (module) {
+    "./editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -87,7 +87,7 @@ var __webpack_modules__ = {
     "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
-    "@/components/ui/label" (module) {
+    "./label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -156,19 +156,19 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "@/components/ui/table" (module) {
+    "./table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "./textarea" (module) {
+    "@/components/ui/textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "./toggle" (module) {
+    "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -367,7 +367,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_20 = __webpack_require__("./dialog");
+    var _dialog__rspack_import_20 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_20)if ([
         "TreeView",
@@ -388,7 +388,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_22[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_23 = __webpack_require__("@/components/ui/editable-cell");
+    var _editable_cell__rspack_import_23 = __webpack_require__("./editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_23)if ([
         "TreeView",
@@ -430,7 +430,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input_group__rspack_import_28[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_29 = __webpack_require__("@/components/ui/label");
+    var _label__rspack_import_29 = __webpack_require__("./label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_29)if ([
         "TreeView",
@@ -591,7 +591,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_51[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_52 = __webpack_require__("@/components/ui/table");
+    var _table__rspack_import_52 = __webpack_require__("./table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_52)if ([
         "TreeView",
@@ -605,14 +605,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_53[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_54 = __webpack_require__("./textarea");
+    var _textarea__rspack_import_54 = __webpack_require__("@/components/ui/textarea");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _textarea__rspack_import_54)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_54[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_55 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_55 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_55)if ([
         "TreeView",

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

@@ -38,12 +38,33 @@ const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_input_cjs_namespaceObject = require("./input.cjs");
 const external_textarea_cjs_namespaceObject = require("./textarea.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const InputGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, variant = 'default', size = 'default', ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        ref: ref,
-        role: "group",
-        className: (0, index_cjs_namespaceObject.cn)('group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start', 'default' === size && 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2', 'xs' === size && 'h-6 gap-1 rounded px-2', 'default' === variant && 'border border-input bg-transparent future:border-0 future:bg-surface-overlay', 'ghost' === variant && 'border-0 bg-surface-overlay', 'has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background', 'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20', 'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50', className),
-        ...props
-    }));
+const InputGroupValidationContext = /*#__PURE__*/ external_react_namespaceObject.createContext({});
+const InputGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, error, errorId, variant = 'default', size = 'default', ...props }, ref)=>{
+    const generatedId = external_react_namespaceObject.useId();
+    const validationId = errorId ?? `input-group-${generatedId.replace(/:/g, '')}-error`;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(InputGroupValidationContext.Provider, {
+        value: {
+            error,
+            errorId: validationId
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                ref: ref,
+                role: "group",
+                className: (0, index_cjs_namespaceObject.cn)('group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start', 'default' === size && 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2', 'xs' === size && 'h-6 gap-1 rounded px-2', 'default' === variant && 'border border-input bg-transparent future:border-0 future:bg-surface-overlay', 'ghost' === variant && 'border-0 bg-surface-overlay', 'has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background', 'has-[[data-slot][aria-invalid=true]]:border-error has-[[data-slot][aria-invalid=true]]:ring-error/20 future:has-[[data-slot][aria-invalid=true]]:ring-1 future:has-[[data-slot][aria-invalid=true]]:ring-error/40', error && 'border-error ring-error/20 future:ring-1 future:ring-error/40', 'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50', className),
+                ...props
+            }),
+            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                id: validationId,
+                "data-slot": "input-group-error",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "mt-1 text-xs leading-4 text-error",
+                children: error
+            })
+        ]
+    });
+});
 InputGroup.displayName = 'InputGroup';
 const inputGroupAddonVariants = (0, external_class_variance_authority_namespaceObject.cva)('flex h-auto cursor-text items-center justify-center gap-1 text-sm text-muted-foreground select-none group-has-[[data-slot=input-group-control]:disabled]/input-group:opacity-50 [&>svg:not([class*="size-"])]:size-4', {
     variants: {
@@ -86,19 +107,42 @@ const InputGroupText = /*#__PURE__*/ external_react_namespaceObject.forwardRef((
         ...props
     }));
 InputGroupText.displayName = 'InputGroupText';
-const InputGroupInput = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
-        ref: ref,
-        "data-slot": "input-group-control",
-        className: (0, index_cjs_namespaceObject.cn)('h-full flex-1 rounded-none border-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0', className),
-        ...props
-    }));
+const InputGroupInput = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, ...props }, ref)=>{
+    const validation = external_react_namespaceObject.useContext(InputGroupValidationContext);
+    const describedBy = [
+        ariaDescribedBy,
+        validation.error ? validation.errorId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "min-w-0 flex-1",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
+            ref: ref,
+            "data-slot": "input-group-control",
+            "aria-describedby": describedBy || void 0,
+            "aria-errormessage": validation.error ? validation.errorId : ariaErrorMessage,
+            "aria-invalid": validation.error ? true : ariaInvalid,
+            className: (0, index_cjs_namespaceObject.cn)('h-full w-full rounded-none !border-0 !ring-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0', className),
+            ...props
+        })
+    });
+});
 InputGroupInput.displayName = 'InputGroupInput';
-const InputGroupTextarea = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_textarea_cjs_namespaceObject.Textarea, {
+const InputGroupTextarea = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, ...props }, ref)=>{
+    const validation = external_react_namespaceObject.useContext(InputGroupValidationContext);
+    const describedBy = [
+        ariaDescribedBy,
+        validation.error ? validation.errorId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_textarea_cjs_namespaceObject.Textarea, {
         ref: ref,
         "data-slot": "input-group-control",
-        className: (0, index_cjs_namespaceObject.cn)('min-h-0 flex-1 resize-none rounded-none border-0 bg-transparent p-0 py-2 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:rounded-none future:border-0 future:bg-transparent future:focus-visible:ring-offset-0', className),
+        "aria-describedby": describedBy || void 0,
+        "aria-errormessage": validation.error ? validation.errorId : ariaErrorMessage,
+        "aria-invalid": validation.error ? true : ariaInvalid,
+        className: (0, index_cjs_namespaceObject.cn)('min-h-0 flex-1 resize-none rounded-none !border-0 !ring-0 bg-transparent p-0 py-2 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:rounded-none future:border-0 future:bg-transparent future:focus-visible:ring-offset-0', className),
         ...props
-    }));
+    });
+});
 InputGroupTextarea.displayName = 'InputGroupTextarea';
 exports.InputGroup = __webpack_exports__.InputGroup;
 exports.InputGroupAddon = __webpack_exports__.InputGroupAddon;

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

@@ -6,6 +6,10 @@ import { type TextareaProps } from './textarea';
 export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: 'default' | 'ghost';
     size?: 'default' | 'xs';
+    /** Field-specific validation feedback rendered below the grouped control. */
+    error?: React.ReactNode;
+    /** Optional id for the inline validation message. */
+    errorId?: string;
 }
 declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const inputGroupAddonVariants: (props?: ({
@@ -20,7 +24,7 @@ declare const InputGroupButton: React.ForwardRefExoticComponent<InputGroupButton
 export interface InputGroupTextProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare const InputGroupText: React.ForwardRefExoticComponent<InputGroupTextProps & React.RefAttributes<HTMLSpanElement>>;
-export interface InputGroupInputProps extends Omit<InputProps, 'variant' | 'size'> {
+export interface InputGroupInputProps extends Omit<InputProps, 'variant' | 'size' | 'error' | 'errorId'> {
 }
 declare const InputGroupInput: React.ForwardRefExoticComponent<InputGroupInputProps & React.RefAttributes<HTMLInputElement>>;
 export interface InputGroupTextareaProps extends Omit<TextareaProps, 'variant'> {

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

@@ -1,16 +1,37 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { createContext, forwardRef, useContext, useId } from "react";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
 import { cn } from "../../lib/index.js";
-const InputGroup = /*#__PURE__*/ forwardRef(({ className, variant = 'default', size = 'default', ...props }, ref)=>/*#__PURE__*/ jsx("div", {
-        ref: ref,
-        role: "group",
-        className: cn('group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start', 'default' === size && 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2', 'xs' === size && 'h-6 gap-1 rounded px-2', 'default' === variant && 'border border-input bg-transparent future:border-0 future:bg-surface-overlay', 'ghost' === variant && 'border-0 bg-surface-overlay', 'has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background', 'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20', 'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50', className),
-        ...props
-    }));
+const InputGroupValidationContext = /*#__PURE__*/ createContext({});
+const InputGroup = /*#__PURE__*/ forwardRef(({ className, error, errorId, variant = 'default', size = 'default', ...props }, ref)=>{
+    const generatedId = useId();
+    const validationId = errorId ?? `input-group-${generatedId.replace(/:/g, '')}-error`;
+    return /*#__PURE__*/ jsxs(InputGroupValidationContext.Provider, {
+        value: {
+            error,
+            errorId: validationId
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                ref: ref,
+                role: "group",
+                className: cn('group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start', 'default' === size && 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2', 'xs' === size && 'h-6 gap-1 rounded px-2', 'default' === variant && 'border border-input bg-transparent future:border-0 future:bg-surface-overlay', 'ghost' === variant && 'border-0 bg-surface-overlay', 'has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background', 'has-[[data-slot][aria-invalid=true]]:border-error has-[[data-slot][aria-invalid=true]]:ring-error/20 future:has-[[data-slot][aria-invalid=true]]:ring-1 future:has-[[data-slot][aria-invalid=true]]:ring-error/40', error && 'border-error ring-error/20 future:ring-1 future:ring-error/40', 'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50', className),
+                ...props
+            }),
+            error && /*#__PURE__*/ jsx("p", {
+                id: validationId,
+                "data-slot": "input-group-error",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "mt-1 text-xs leading-4 text-error",
+                children: error
+            })
+        ]
+    });
+});
 InputGroup.displayName = 'InputGroup';
 const inputGroupAddonVariants = cva('flex h-auto cursor-text items-center justify-center gap-1 text-sm text-muted-foreground select-none group-has-[[data-slot=input-group-control]:disabled]/input-group:opacity-50 [&>svg:not([class*="size-"])]:size-4', {
     variants: {
@@ -53,18 +74,41 @@ const InputGroupText = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>
         ...props
     }));
 InputGroupText.displayName = 'InputGroupText';
-const InputGroupInput = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Input, {
-        ref: ref,
-        "data-slot": "input-group-control",
-        className: cn('h-full flex-1 rounded-none border-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0', className),
-        ...props
-    }));
+const InputGroupInput = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, ...props }, ref)=>{
+    const validation = useContext(InputGroupValidationContext);
+    const describedBy = [
+        ariaDescribedBy,
+        validation.error ? validation.errorId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsx("div", {
+        className: "min-w-0 flex-1",
+        children: /*#__PURE__*/ jsx(Input, {
+            ref: ref,
+            "data-slot": "input-group-control",
+            "aria-describedby": describedBy || void 0,
+            "aria-errormessage": validation.error ? validation.errorId : ariaErrorMessage,
+            "aria-invalid": validation.error ? true : ariaInvalid,
+            className: cn('h-full w-full rounded-none !border-0 !ring-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0', className),
+            ...props
+        })
+    });
+});
 InputGroupInput.displayName = 'InputGroupInput';
-const InputGroupTextarea = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Textarea, {
+const InputGroupTextarea = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, ...props }, ref)=>{
+    const validation = useContext(InputGroupValidationContext);
+    const describedBy = [
+        ariaDescribedBy,
+        validation.error ? validation.errorId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsx(Textarea, {
         ref: ref,
         "data-slot": "input-group-control",
-        className: cn('min-h-0 flex-1 resize-none rounded-none border-0 bg-transparent p-0 py-2 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:rounded-none future:border-0 future:bg-transparent future:focus-visible:ring-offset-0', className),
+        "aria-describedby": describedBy || void 0,
+        "aria-errormessage": validation.error ? validation.errorId : ariaErrorMessage,
+        "aria-invalid": validation.error ? true : ariaInvalid,
+        className: cn('min-h-0 flex-1 resize-none rounded-none !border-0 !ring-0 bg-transparent p-0 py-2 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:rounded-none future:border-0 future:bg-transparent future:focus-visible:ring-offset-0', className),
         ...props
-    }));
+    });
+});
 InputGroupTextarea.displayName = 'InputGroupTextarea';
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/ui/input.cjs

@@ -29,13 +29,37 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
-const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, type, variant = 'default', size = 'default', ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
-        type: type,
-        "data-slot": "input",
-        className: (0, utils_cjs_namespaceObject.cn)('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-        ref: ref,
-        ...props
-    }));
+const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, error, errorId, id, type, variant = 'default', size = 'default', ...props }, ref)=>{
+    const generatedId = external_react_namespaceObject.useId();
+    const validationId = errorId ?? `${id ?? `input-${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)("input", {
+                type: type,
+                "data-slot": "input",
+                id: id,
+                ...props,
+                "aria-describedby": describedBy || void 0,
+                "aria-errormessage": error ? validationId : ariaErrorMessage,
+                "aria-invalid": error ? true : ariaInvalid,
+                className: (0, utils_cjs_namespaceObject.cn)('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
+                ref: ref
+            }),
+            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                id: validationId,
+                "data-slot": "input-error",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "mt-1 text-xs leading-4 text-error",
+                children: error
+            })
+        ]
+    });
+});
 Input.displayName = 'Input';
 exports.Input = __webpack_exports__.Input;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

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

@@ -2,6 +2,13 @@ import * as React from 'react';
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     variant?: 'default' | 'ghost';
     size?: 'default' | 'xs';
+    /**
+     * Field-specific feedback rendered immediately below the input.
+     * Keep the message focused on what went wrong and how to resolve it.
+     */
+    error?: React.ReactNode;
+    /** Optional id for the inline validation message. */
+    errorId?: string;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Input };

package/dist/components/ui/input.js

@@ -1,12 +1,36 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
 import { cn } from "../../lib/utils.js";
-const Input = /*#__PURE__*/ forwardRef(({ className, type, variant = 'default', size = 'default', ...props }, ref)=>/*#__PURE__*/ jsx("input", {
-        type: type,
-        "data-slot": "input",
-        className: cn('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-        ref: ref,
-        ...props
-    }));
+const Input = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, error, errorId, id, type, variant = 'default', size = 'default', ...props }, ref)=>{
+    const generatedId = useId();
+    const validationId = errorId ?? `${id ?? `input-${generatedId.replace(/:/g, '')}`}-error`;
+    const describedBy = [
+        ariaDescribedBy,
+        error ? validationId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                type: type,
+                "data-slot": "input",
+                id: id,
+                ...props,
+                "aria-describedby": describedBy || void 0,
+                "aria-errormessage": error ? validationId : ariaErrorMessage,
+                "aria-invalid": error ? true : ariaInvalid,
+                className: cn('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
+                ref: ref
+            }),
+            error && /*#__PURE__*/ jsx("p", {
+                id: validationId,
+                "data-slot": "input-error",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "mt-1 text-xs leading-4 text-error",
+                children: error
+            })
+        ]
+    });
+});
 Input.displayName = 'Input';
 export { Input };

package/dist/components/ui/label.cjs

@@ -24,6 +24,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    RequiredIndicator: ()=>RequiredIndicator,
     Label: ()=>Label
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
@@ -39,9 +40,27 @@ const Label = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ classNa
         ...props
     }));
 Label.displayName = react_label_namespaceObject.Root.displayName;
+const RequiredIndicator = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+        ref: ref,
+        ...props,
+        className: (0, index_cjs_namespaceObject.cn)('ml-0.5 text-current', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                "aria-hidden": "true",
+                children: "*"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "sr-only",
+                children: " (required)"
+            })
+        ]
+    }));
+RequiredIndicator.displayName = 'RequiredIndicator';
 exports.Label = __webpack_exports__.Label;
+exports.RequiredIndicator = __webpack_exports__.RequiredIndicator;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "Label"
+    "Label",
+    "RequiredIndicator"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true