@uipath/apollo-wind 2.36.1 → 2.37.0

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

@@ -9,6 +9,7 @@ export * from './button';
 export * from './button-group';
 export * from './calendar';
 export * from './card';
+export * from './chart';
 export * from './checkbox';
 export * from './collapsible';
 export * from './combobox';
@@ -18,6 +19,7 @@ export * from './data-table';
 export * from './date-picker';
 export * from './datetime-picker';
 export * from './dialog';
+export * from './drawer';
 export * from './dropdown-menu';
 export * from './editable-cell';
 export * from './empty-state';
@@ -27,9 +29,11 @@ export * from './input';
 export * from './input-group';
 export * from './label';
 export * from './layout';
+export * from './lockable-value-field';
 export * from './multi-select';
 export * from './pagination';
 export * from './popover';
+export * from './portal-container';
 export * from './progress';
 export * from './prompt-editor';
 export * from './radio-group';
@@ -52,5 +56,6 @@ export * from './textarea';
 export * from './toggle';
 export * from './toggle-group';
 export * from './tooltip';
+export * from './variable-picker';
 export type { TreeViewIconMap, TreeViewItem, TreeViewItemAction, TreeViewMenuItem, TreeViewProps, TreeViewSelectionMode, } from './tree-view';
 export { default as TreeView } from './tree-view';

package/dist/components/ui/index.js

@@ -10,6 +10,7 @@ export * from "./button.js";
 export * from "./button-group.js";
 export * from "./calendar.js";
 export * from "./card.js";
+export * from "./chart.js";
 export * from "./checkbox.js";
 export * from "./collapsible.js";
 export * from "./combobox.js";
@@ -19,6 +20,7 @@ export * from "./data-table.js";
 export * from "./date-picker.js";
 export * from "./datetime-picker.js";
 export * from "./dialog.js";
+export * from "./drawer.js";
 export * from "./dropdown-menu.js";
 export * from "./editable-cell.js";
 export * from "./empty-state.js";
@@ -28,9 +30,11 @@ export * from "./input.js";
 export * from "./input-group.js";
 export * from "./label.js";
 export * from "./layout/index.js";
+export * from "./lockable-value-field/index.js";
 export * from "./multi-select.js";
 export * from "./pagination.js";
 export * from "./popover.js";
+export * from "./portal-container.js";
 export * from "./progress.js";
 export * from "./prompt-editor/index.js";
 export * from "./radio-group.js";
@@ -53,4 +57,5 @@ export * from "./textarea.js";
 export * from "./toggle.js";
 export * from "./toggle-group.js";
 export * from "./tooltip.js";
+export * from "./variable-picker/index.js";
 export { tree_view as 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,12 +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,
-        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,11 +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,
-        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

@@ -34,6 +34,7 @@ const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const labelVariants = (0, external_class_variance_authority_namespaceObject.cva)('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 const Label = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_label_namespaceObject.Root, {
         ref: ref,
+        "data-slot": "label",
         className: (0, index_cjs_namespaceObject.cn)(labelVariants(), className),
         ...props
     }));

package/dist/components/ui/label.js

@@ -6,6 +6,7 @@ import { cn } from "../../lib/index.js";
 const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 const Label = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
         ref: ref,
+        "data-slot": "label",
         className: cn(labelVariants(), className),
         ...props
     }));

package/dist/components/ui/layout/column.cjs

@@ -65,6 +65,7 @@ const Column = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ childr
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
+        "data-slot": "column",
         className: (0, index_cjs_namespaceObject.cn)(className),
         style: {
             ...layoutStyles,

package/dist/components/ui/layout/column.js

@@ -37,6 +37,7 @@ const Column = /*#__PURE__*/ forwardRef(({ children, className, style, direction
     });
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
+        "data-slot": "column",
         className: cn(className),
         style: {
             ...layoutStyles,

package/dist/components/ui/layout/grid.cjs

@@ -85,6 +85,7 @@ const Grid = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ children
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
+        "data-slot": "grid",
         className: (0, index_cjs_namespaceObject.cn)(...gridClasses, className),
         style: inlineStyles,
         ...htmlProps,

package/dist/components/ui/layout/grid.js

@@ -57,6 +57,7 @@ const Grid = /*#__PURE__*/ forwardRef(({ children, className, style, cols, rows,
     };
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
+        "data-slot": "grid",
         className: cn(...gridClasses, className),
         style: inlineStyles,
         ...htmlProps,

package/dist/components/ui/layout/row.cjs

@@ -65,6 +65,7 @@ const Row = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ children,
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
+        "data-slot": "row",
         className: (0, index_cjs_namespaceObject.cn)(className),
         style: {
             ...layoutStyles,

package/dist/components/ui/layout/row.js

@@ -37,6 +37,7 @@ const Row = /*#__PURE__*/ forwardRef(({ children, className, style, direction =
     });
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
+        "data-slot": "row",
         className: cn(className),
         style: {
             ...layoutStyles,

package/dist/components/ui/lockable-value-field/lockable-value-field.cjs

@@ -44,11 +44,12 @@ const lock_toggle_button_cjs_namespaceObject = require("./components/lock-toggle
 const mode_menu_item_cjs_namespaceObject = require("./components/mode-menu-item.cjs");
 const external_types_cjs_namespaceObject = require("./types.cjs");
 const external_utils_cjs_namespaceObject = require("./utils.cjs");
-function LockableValueField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, mode = 'fixed', onModeChange, renderExpressionEditor, fieldType = 'string', onFieldTypeChange, required, onRequiredChange, label, fileUploadAriaLabel, headerActions, compact, controlsVisibility = 'visible', showFieldActions = true, options = external_utils_cjs_namespaceObject.DEFAULT_SELECT_OPTIONS, onGenerateWithAi, variables = [], id, className }) {
-    const generatedId = (0, external_react_namespaceObject.useId)();
+function LockableValueField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, mode = 'fixed', onModeChange, renderExpressionEditor, fieldType = 'string', onFieldTypeChange, required, onRequiredChange, label, error, errorId, fileUploadAriaLabel, headerActions, compact, controlsVisibility = 'visible', showFieldActions = true, options = external_utils_cjs_namespaceObject.DEFAULT_SELECT_OPTIONS, onGenerateWithAi, variables = [], id, className }) {
+    const generatedId = (0, external_react_namespaceObject.useId)().replace(/:/g, '');
     const [datePopoverOpen, setDatePopoverOpen] = (0, external_react_namespaceObject.useState)(false);
     const [selectOpen, setSelectOpen] = (0, external_react_namespaceObject.useState)(false);
     const fieldId = id ?? generatedId;
+    const validationId = errorId ?? `${fieldId}-error`;
     const typeMeta = external_types_cjs_namespaceObject.FIELD_TYPE_META[fieldType];
     const effectiveMode = typeMeta.supportsExpression ? mode : 'fixed';
     const editableOnValueChange = locked ? void 0 : onValueChange;
@@ -77,6 +78,8 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                 headerActions: headerActions
             }),
             typeMeta.supportsExpression ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_input_group_cjs_namespaceObject.InputGroup, {
+                error: error,
+                errorId: validationId,
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
                         align: "inline-start",
@@ -92,7 +95,11 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         onBlur: onValueBlur,
                         readOnly: !editableOnValueChange,
                         placeholder: fieldLabel,
-                        fieldType
+                        fieldType,
+                        'aria-invalid': error ? true : void 0,
+                        'aria-describedby': error ? validationId : void 0,
+                        'aria-errormessage': error ? validationId : void 0,
+                        'data-slot': 'input-group-control'
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
                         id: fieldId,
                         readOnly: !editableOnValueChange,
@@ -111,6 +118,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         className: "flex h-full flex-1 items-center px-3",
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_switch_cjs_namespaceObject.Switch, {
                             id: fieldId,
+                            "aria-invalid": error ? true : void 0,
+                            "aria-describedby": error ? validationId : void 0,
+                            "aria-errormessage": error ? validationId : void 0,
                             checked: 'true' === value,
                             onCheckedChange: (checked)=>onValueChange?.(String(checked)),
                             onBlur: onValueBlur,
@@ -129,6 +139,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                                     type: "button",
                                     id: fieldId,
                                     "data-slot": "input-group-control",
+                                    "aria-invalid": error ? true : void 0,
+                                    "aria-describedby": error ? validationId : void 0,
+                                    "aria-errormessage": error ? validationId : void 0,
                                     disabled: !onValueChange,
                                     className: "flex h-full flex-1 items-center text-left text-sm text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50",
                                     children: value ? (0, external_utils_cjs_namespaceObject.formatDateValue)(value) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
@@ -204,6 +217,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                     }),
                     locked ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
                         id: fieldId,
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? validationId : void 0,
+                        "aria-errormessage": error ? validationId : void 0,
                         readOnly: true,
                         value: lockedDisplayValue,
                         placeholder: fieldLabel,
@@ -222,6 +238,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectTrigger, {
                                 id: fieldId,
                                 className: "flex-1",
+                                "aria-invalid": error ? true : void 0,
+                                "aria-describedby": error ? validationId : void 0,
+                                "aria-errormessage": error ? validationId : void 0,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectValue, {
                                     placeholder: "Select an option"
                                 })
@@ -241,16 +260,30 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         onChange: (selected)=>onValueChange?.(JSON.stringify(selected)),
                         placeholder: "Select options...",
                         disabled: !onValueChange,
-                        onBlur: onValueBlur
+                        onBlur: onValueBlur,
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? validationId : void 0,
+                        "aria-errormessage": error ? validationId : void 0
                     }) : 'file' === fieldType && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_file_upload_cjs_namespaceObject.FileUpload, {
                         id: fieldId,
                         ariaLabel: fileUploadAriaLabel ?? ('string' == typeof label ? label : fieldLabel),
                         className: "flex-1",
                         onFilesChange: (files)=>onValueChange?.(files.map((f)=>f.name).join(', ')),
                         disabled: !onValueChange,
-                        onBlur: onValueBlur
+                        onBlur: onValueBlur,
+                        "aria-invalid": error ? true : void 0,
+                        "aria-describedby": error ? validationId : void 0,
+                        "aria-errormessage": error ? validationId : void 0
                     })
                 ]
+            }),
+            error && !typeMeta.supportsExpression && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                id: validationId,
+                "data-slot": "lockable-value-field-error",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "mt-1 text-xs leading-4 text-error",
+                children: error
             })
         ]
     });

package/dist/components/ui/lockable-value-field/lockable-value-field.d.ts

@@ -11,4 +11,4 @@ import type { LockableValueFieldProps } from './types';
  * Insert-variable menu is empty (and disabled) unless `variables` is
  * provided; file uploads aren't persisted anywhere.
  */
-export declare function LockableValueField({ value, onValueChange, onValueBlur, locked, onLockedChange, mode, onModeChange, renderExpressionEditor, fieldType, onFieldTypeChange, required, onRequiredChange, label, fileUploadAriaLabel, headerActions, compact, controlsVisibility, showFieldActions, options, onGenerateWithAi, variables, id, className, }: LockableValueFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function LockableValueField({ value, onValueChange, onValueBlur, locked, onLockedChange, mode, onModeChange, renderExpressionEditor, fieldType, onFieldTypeChange, required, onRequiredChange, label, error, errorId, fileUploadAriaLabel, headerActions, compact, controlsVisibility, showFieldActions, options, onGenerateWithAi, variables, id, className, }: LockableValueFieldProps): import("react/jsx-runtime").JSX.Element;