@uipath/apollo-wind 2.36.1 → 2.37.0

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

@@ -16,11 +16,12 @@ import { LockToggleButton } from "./components/lock-toggle-button.js";
 import { ModeMenuItem } from "./components/mode-menu-item.js";
 import { FIELD_TYPE_META } from "./types.js";
 import { DEFAULT_SELECT_OPTIONS, formatDateValue, getLockedDisplayValue, parseDateValue, parseListValue, toDateOnlyString } from "./utils.js";
-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 = DEFAULT_SELECT_OPTIONS, onGenerateWithAi, variables = [], id, className }) {
-    const generatedId = 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 = DEFAULT_SELECT_OPTIONS, onGenerateWithAi, variables = [], id, className }) {
+    const generatedId = useId().replace(/:/g, '');
     const [datePopoverOpen, setDatePopoverOpen] = useState(false);
     const [selectOpen, setSelectOpen] = useState(false);
     const fieldId = id ?? generatedId;
+    const validationId = errorId ?? `${fieldId}-error`;
     const typeMeta = FIELD_TYPE_META[fieldType];
     const effectiveMode = typeMeta.supportsExpression ? mode : 'fixed';
     const editableOnValueChange = locked ? void 0 : onValueChange;
@@ -49,6 +50,8 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                 headerActions: headerActions
             }),
             typeMeta.supportsExpression ? /*#__PURE__*/ jsxs(InputGroup, {
+                error: error,
+                errorId: validationId,
                 children: [
                     /*#__PURE__*/ jsx(InputGroupAddon, {
                         align: "inline-start",
@@ -64,7 +67,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__*/ jsx(InputGroupInput, {
                         id: fieldId,
                         readOnly: !editableOnValueChange,
@@ -83,6 +90,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         className: "flex h-full flex-1 items-center px-3",
                         children: /*#__PURE__*/ jsx(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,
@@ -101,6 +111,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 ? formatDateValue(value) : /*#__PURE__*/ jsx("span", {
@@ -176,6 +189,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                     }),
                     locked ? /*#__PURE__*/ jsx(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,
@@ -194,6 +210,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                             /*#__PURE__*/ jsx(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__*/ jsx(SelectValue, {
                                     placeholder: "Select an option"
                                 })
@@ -213,16 +232,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__*/ jsx(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__*/ 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/types.d.ts

@@ -1,5 +1,5 @@
 import { type LucideIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
+import type { AriaAttributes, ReactNode } from 'react';
 export type LockableValueFieldMode = 'fixed' | 'expression';
 export type LockableFieldType = 'string' | 'integer' | 'date' | 'boolean' | 'single-select' | 'multi-select' | 'file';
 interface FieldTypeMeta {
@@ -42,6 +42,10 @@ export interface LockableValueFieldProps {
         readOnly: boolean;
         placeholder: string;
         fieldType: LockableFieldType;
+        'aria-invalid'?: AriaAttributes['aria-invalid'];
+        'aria-describedby'?: string;
+        'aria-errormessage'?: string;
+        'data-slot'?: string;
     }) => ReactNode;
     /** The field's data type. Defaults to 'string'. Determines which control renders the value. */
     fieldType?: LockableFieldType;
@@ -53,6 +57,10 @@ export interface LockableValueFieldProps {
     onRequiredChange?: (required: boolean) => void;
     /** Overrides the default mode-based label (e.g. a field name instead of "String value"). */
     label?: ReactNode;
+    /** Field-specific validation feedback rendered immediately below the active control. */
+    error?: ReactNode;
+    /** Optional id for the inline validation message. */
+    errorId?: string;
     /** Accessible name for the file-upload dropzone. Defaults to a string `label`, then the computed field label. */
     fileUploadAriaLabel?: string;
     /** Extra content rendered after the built-in AI assist / Insert variable buttons (e.g. a delete button). */

package/dist/components/ui/multi-select.cjs

@@ -35,7 +35,7 @@ const external_checkbox_cjs_namespaceObject = require("./checkbox.cjs");
 const external_command_cjs_namespaceObject = require("./command.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur }, ref)=>{
+const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref)=>{
     const [open, setOpen] = external_react_namespaceObject.useState(false);
     const handleUnselect = (value)=>{
         onChange(selected.filter((s)=>s !== value));
@@ -55,6 +55,7 @@ const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ i
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
+        "data-slot": "multi-select",
         className: (0, index_cjs_namespaceObject.cn)('relative', className),
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
             open: open,
@@ -70,6 +71,9 @@ const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ i
                         variant: "outline",
                         role: "combobox",
                         "aria-expanded": open,
+                        "aria-invalid": ariaInvalid,
+                        "aria-describedby": ariaDescribedBy,
+                        "aria-errormessage": ariaErrorMessage,
                         "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
                         className: (0, index_cjs_namespaceObject.cn)('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:font-normal future:text-muted-foreground', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
                         disabled: disabled,

package/dist/components/ui/multi-select.d.ts

@@ -17,6 +17,9 @@ export interface MultiSelectProps {
     clearAllText?: string | ((count: number) => string);
     /** Called when the multi-select popover closes after being opened. */
     onBlur?: () => void;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
 }
 declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
 export { MultiSelect };

package/dist/components/ui/multi-select.js

@@ -7,7 +7,7 @@ import { Checkbox } from "./checkbox.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
-const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur }, ref)=>{
+const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref)=>{
     const [open, setOpen] = useState(false);
     const handleUnselect = (value)=>{
         onChange(selected.filter((s)=>s !== value));
@@ -27,6 +27,7 @@ const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange,
     };
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
+        "data-slot": "multi-select",
         className: cn('relative', className),
         children: /*#__PURE__*/ jsxs(Popover, {
             open: open,
@@ -42,6 +43,9 @@ const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange,
                         variant: "outline",
                         role: "combobox",
                         "aria-expanded": open,
+                        "aria-invalid": ariaInvalid,
+                        "aria-describedby": ariaDescribedBy,
+                        "aria-errormessage": ariaErrorMessage,
                         "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
                         className: cn('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:font-normal future:text-muted-foreground', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
                         disabled: disabled,

package/dist/components/ui/pagination.cjs

@@ -38,6 +38,7 @@ const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const Pagination = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("nav", {
+        "data-slot": "pagination",
         "aria-label": "pagination",
         className: (0, index_cjs_namespaceObject.cn)('mx-auto flex w-full justify-center', className),
         ...props
@@ -45,17 +46,20 @@ const Pagination = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_name
 Pagination.displayName = 'Pagination';
 const PaginationContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ul", {
         ref: ref,
+        "data-slot": "pagination-content",
         className: (0, index_cjs_namespaceObject.cn)('flex flex-row items-center gap-1', className),
         ...props
     }));
 PaginationContent.displayName = 'PaginationContent';
 const PaginationItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", {
         ref: ref,
+        "data-slot": "pagination-item",
         className: (0, index_cjs_namespaceObject.cn)('', className),
         ...props
     }));
 PaginationItem.displayName = 'PaginationItem';
 const PaginationLink = ({ className, isActive, size = 'default', ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
+        "data-slot": "pagination-link",
         "aria-current": isActive ? 'page' : void 0,
         className: (0, index_cjs_namespaceObject.cn)((0, external_button_cjs_namespaceObject.buttonVariants)({
             variant: isActive ? 'outline' : 'ghost',
@@ -65,6 +69,7 @@ const PaginationLink = ({ className, isActive, size = 'default', ...props })=>/*
     });
 PaginationLink.displayName = 'PaginationLink';
 const PaginationPrevious = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(PaginationLink, {
+        "data-slot": "pagination-previous",
         "aria-label": "Go to previous page",
         size: "default",
         className: (0, index_cjs_namespaceObject.cn)('gap-1 pl-2.5', className),
@@ -80,6 +85,7 @@ const PaginationPrevious = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runt
     });
 PaginationPrevious.displayName = 'PaginationPrevious';
 const PaginationNext = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(PaginationLink, {
+        "data-slot": "pagination-next",
         "aria-label": "Go to next page",
         size: "default",
         className: (0, index_cjs_namespaceObject.cn)('gap-1 pr-2.5', className),
@@ -95,6 +101,7 @@ const PaginationNext = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_
     });
 PaginationNext.displayName = 'PaginationNext';
 const PaginationEllipsis = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+        "data-slot": "pagination-ellipsis",
         "aria-hidden": true,
         className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-9 items-center justify-center future:h-10 future:w-10', className),
         ...props,

package/dist/components/ui/pagination.js

@@ -4,6 +4,7 @@ import { forwardRef } from "react";
 import { buttonVariants } from "./button.js";
 import { cn } from "../../lib/index.js";
 const Pagination = ({ className, ...props })=>/*#__PURE__*/ jsx("nav", {
+        "data-slot": "pagination",
         "aria-label": "pagination",
         className: cn('mx-auto flex w-full justify-center', className),
         ...props
@@ -11,17 +12,20 @@ const Pagination = ({ className, ...props })=>/*#__PURE__*/ jsx("nav", {
 Pagination.displayName = 'Pagination';
 const PaginationContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("ul", {
         ref: ref,
+        "data-slot": "pagination-content",
         className: cn('flex flex-row items-center gap-1', className),
         ...props
     }));
 PaginationContent.displayName = 'PaginationContent';
 const PaginationItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("li", {
         ref: ref,
+        "data-slot": "pagination-item",
         className: cn('', className),
         ...props
     }));
 PaginationItem.displayName = 'PaginationItem';
 const PaginationLink = ({ className, isActive, size = 'default', ...props })=>/*#__PURE__*/ jsx("a", {
+        "data-slot": "pagination-link",
         "aria-current": isActive ? 'page' : void 0,
         className: cn(buttonVariants({
             variant: isActive ? 'outline' : 'ghost',
@@ -31,6 +35,7 @@ const PaginationLink = ({ className, isActive, size = 'default', ...props })=>/*
     });
 PaginationLink.displayName = 'PaginationLink';
 const PaginationPrevious = ({ className, ...props })=>/*#__PURE__*/ jsxs(PaginationLink, {
+        "data-slot": "pagination-previous",
         "aria-label": "Go to previous page",
         size: "default",
         className: cn('gap-1 pl-2.5', className),
@@ -46,6 +51,7 @@ const PaginationPrevious = ({ className, ...props })=>/*#__PURE__*/ jsxs(Paginat
     });
 PaginationPrevious.displayName = 'PaginationPrevious';
 const PaginationNext = ({ className, ...props })=>/*#__PURE__*/ jsxs(PaginationLink, {
+        "data-slot": "pagination-next",
         "aria-label": "Go to next page",
         size: "default",
         className: cn('gap-1 pr-2.5', className),
@@ -61,6 +67,7 @@ const PaginationNext = ({ className, ...props })=>/*#__PURE__*/ jsxs(PaginationL
     });
 PaginationNext.displayName = 'PaginationNext';
 const PaginationEllipsis = ({ className, ...props })=>/*#__PURE__*/ jsxs("span", {
+        "data-slot": "pagination-ellipsis",
         "aria-hidden": true,
         className: cn('flex h-9 w-9 items-center justify-center future:h-10 future:w-10', className),
         ...props,

package/dist/components/ui/popover.cjs

@@ -35,15 +35,30 @@ const react_popover_namespaceObject = require("@radix-ui/react-popover");
 const external_react_namespaceObject = require("react");
 const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const Popover = react_popover_namespaceObject.Root;
-const PopoverTrigger = react_popover_namespaceObject.Trigger;
-const PopoverAnchor = react_popover_namespaceObject.Anchor;
+const Popover = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Root, {
+        "data-slot": "popover",
+        ...props
+    });
+Popover.displayName = 'Popover';
+const PopoverTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef((props, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Trigger, {
+        ref: ref,
+        "data-slot": "popover-trigger",
+        ...props
+    }));
+PopoverTrigger.displayName = react_popover_namespaceObject.Trigger.displayName;
+const PopoverAnchor = /*#__PURE__*/ external_react_namespaceObject.forwardRef((props, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Anchor, {
+        ref: ref,
+        "data-slot": "popover-anchor",
+        ...props
+    }));
+PopoverAnchor.displayName = react_popover_namespaceObject.Anchor.displayName;
 const PopoverContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, align = 'center', sideOffset = 4, container, ...props }, ref)=>{
     const resolvedContainer = (0, external_portal_container_cjs_namespaceObject.useResolvedPortalContainer)(container);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Portal, {
         container: resolvedContainer,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_popover_namespaceObject.Content, {
             ref: ref,
+            "data-slot": "popover-content",
             align: align,
             sideOffset: sideOffset,
             className: (0, index_cjs_namespaceObject.cn)('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]', className),

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

@@ -1,9 +1,12 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as React from 'react';
 import { type PortalContainerOverride } from './portal-container';
-declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
-declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const Popover: {
+    (props: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     container?: PortalContainerOverride;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/popover.js

@@ -4,15 +4,30 @@ import { Anchor, Content, Portal, Root, Trigger } from "@radix-ui/react-popover"
 import { forwardRef } from "react";
 import { useResolvedPortalContainer } from "./portal-container.js";
 import { cn } from "../../lib/index.js";
-const Popover = Root;
-const PopoverTrigger = Trigger;
-const PopoverAnchor = Anchor;
+const Popover = (props)=>/*#__PURE__*/ jsx(Root, {
+        "data-slot": "popover",
+        ...props
+    });
+Popover.displayName = 'Popover';
+const PopoverTrigger = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Trigger, {
+        ref: ref,
+        "data-slot": "popover-trigger",
+        ...props
+    }));
+PopoverTrigger.displayName = Trigger.displayName;
+const PopoverAnchor = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Anchor, {
+        ref: ref,
+        "data-slot": "popover-anchor",
+        ...props
+    }));
+PopoverAnchor.displayName = Anchor.displayName;
 const PopoverContent = /*#__PURE__*/ forwardRef(({ className, align = 'center', sideOffset = 4, container, ...props }, ref)=>{
     const resolvedContainer = useResolvedPortalContainer(container);
     return /*#__PURE__*/ jsx(Portal, {
         container: resolvedContainer,
         children: /*#__PURE__*/ jsx(Content, {
             ref: ref,
+            "data-slot": "popover-content",
             align: align,
             sideOffset: sideOffset,
             className: cn('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]', className),

package/dist/components/ui/progress.cjs

@@ -32,6 +32,7 @@ const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const Progress = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, value, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_progress_namespaceObject.Root, {
         ref: ref,
+        "data-slot": "progress",
         className: (0, index_cjs_namespaceObject.cn)('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className),
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_progress_namespaceObject.Indicator, {

package/dist/components/ui/progress.js

@@ -4,6 +4,7 @@ import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
 const Progress = /*#__PURE__*/ forwardRef(({ className, value, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
         ref: ref,
+        "data-slot": "progress",
         className: cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className),
         ...props,
         children: /*#__PURE__*/ jsx(Indicator, {

package/dist/components/ui/prompt-editor/components/EditorToolbar.cjs

@@ -77,11 +77,13 @@ const EditorToolbar = ({ mode, onModeChange, disabled, actionsRef, onFullscreen
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "flex items-center gap-1 shrink-0",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                    className: "flex items-center rounded-md bg-muted p-0.5",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("fieldset", {
+                    "aria-label": "Editor mode",
+                    className: "m-0 flex items-center rounded-md border-0 bg-muted p-0.5",
                     children: [
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                             type: "button",
+                            "aria-pressed": 'edit' === mode,
                             className: (0, index_cjs_namespaceObject.cn)('rounded px-2 py-0.5 text-[11px] font-semibold transition-colors', 'edit' === mode ? 'bg-primary/20 text-primary' : 'text-foreground hover:bg-accent'),
                             disabled: disabled,
                             onClick: ()=>onModeChange('edit'),
@@ -89,6 +91,7 @@ const EditorToolbar = ({ mode, onModeChange, disabled, actionsRef, onFullscreen
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                             type: "button",
+                            "aria-pressed": 'preview' === mode,
                             className: (0, index_cjs_namespaceObject.cn)('rounded px-2 py-0.5 text-[11px] font-semibold transition-colors', 'preview' === mode ? 'bg-primary/20 text-primary' : 'text-foreground hover:bg-accent'),
                             disabled: disabled,
                             onClick: ()=>onModeChange('preview'),

package/dist/components/ui/prompt-editor/components/EditorToolbar.js

@@ -49,11 +49,13 @@ const EditorToolbar = ({ mode, onModeChange, disabled, actionsRef, onFullscreen
             }),
             /*#__PURE__*/ jsx("div", {
                 className: "flex items-center gap-1 shrink-0",
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: "flex items-center rounded-md bg-muted p-0.5",
+                children: /*#__PURE__*/ jsxs("fieldset", {
+                    "aria-label": "Editor mode",
+                    className: "m-0 flex items-center rounded-md border-0 bg-muted p-0.5",
                     children: [
                         /*#__PURE__*/ jsx("button", {
                             type: "button",
+                            "aria-pressed": 'edit' === mode,
                             className: cn('rounded px-2 py-0.5 text-[11px] font-semibold transition-colors', 'edit' === mode ? 'bg-primary/20 text-primary' : 'text-foreground hover:bg-accent'),
                             disabled: disabled,
                             onClick: ()=>onModeChange('edit'),
@@ -61,6 +63,7 @@ const EditorToolbar = ({ mode, onModeChange, disabled, actionsRef, onFullscreen
                         }),
                         /*#__PURE__*/ jsx("button", {
                             type: "button",
+                            "aria-pressed": 'preview' === mode,
                             className: cn('rounded px-2 py-0.5 text-[11px] font-semibold transition-colors', 'preview' === mode ? 'bg-primary/20 text-primary' : 'text-foreground hover:bg-accent'),
                             disabled: disabled,
                             onClick: ()=>onModeChange('preview'),

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

@@ -33,6 +33,7 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const RadioGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Root, {
+        "data-slot": "radio-group",
         className: (0, index_cjs_namespaceObject.cn)('grid gap-2', className),
         ...props,
         ref: ref
@@ -40,6 +41,7 @@ const RadioGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ cl
 RadioGroup.displayName = react_radio_group_namespaceObject.Root.displayName;
 const RadioGroupItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Item, {
         ref: ref,
+        "data-slot": "radio-group-item",
         className: (0, index_cjs_namespaceObject.cn)('aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'future:border-border future:text-foreground future:hover:border-border-hover future:data-[state=checked]:border-foreground-muted', className),
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Indicator, {

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

@@ -4,6 +4,7 @@ import { Circle } from "lucide-react";
 import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
 const RadioGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
+        "data-slot": "radio-group",
         className: cn('grid gap-2', className),
         ...props,
         ref: ref
@@ -11,6 +12,7 @@ const RadioGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#_
 RadioGroup.displayName = Root.displayName;
 const RadioGroupItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Item, {
         ref: ref,
+        "data-slot": "radio-group-item",
         className: cn('aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'future:border-border future:text-foreground future:hover:border-border-hover future:data-[state=checked]:border-foreground-muted', className),
         ...props,
         children: /*#__PURE__*/ jsx(Indicator, {

package/dist/components/ui/resizable.cjs

@@ -33,11 +33,13 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_resizable_panels_namespaceObject = require("react-resizable-panels");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const ResizablePanelGroup = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Group, {
+        "data-slot": "resizable-panel-group",
         className: (0, index_cjs_namespaceObject.cn)('flex h-full w-full', className),
         ...props
     });
 const ResizablePanel = external_react_resizable_panels_namespaceObject.Panel;
 const ResizableHandle = ({ withHandle, className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Separator, {
+        "data-slot": "resizable-handle",
         className: (0, index_cjs_namespaceObject.cn)('group relative flex w-px items-center justify-center bg-border transition-colors data-[separator=hover]:bg-primary data-[separator=active]:bg-primary after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
         ...props,
         children: withHandle && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {

package/dist/components/ui/resizable.js

@@ -3,11 +3,13 @@ import { GripVertical } from "lucide-react";
 import { Group, Panel, Separator } from "react-resizable-panels";
 import { cn } from "../../lib/index.js";
 const ResizablePanelGroup = ({ className, ...props })=>/*#__PURE__*/ jsx(Group, {
+        "data-slot": "resizable-panel-group",
         className: cn('flex h-full w-full', className),
         ...props
     });
 const ResizablePanel = Panel;
 const ResizableHandle = ({ withHandle, className, ...props })=>/*#__PURE__*/ jsx(Separator, {
+        "data-slot": "resizable-handle",
         className: cn('group relative flex w-px items-center justify-center bg-border transition-colors data-[separator=hover]:bg-primary data-[separator=active]:bg-primary after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
         ...props,
         children: withHandle && /*#__PURE__*/ jsx("div", {

package/dist/components/ui/scroll-area.cjs

@@ -34,6 +34,7 @@ const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const ScrollArea = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_scroll_area_namespaceObject.Root, {
         ref: ref,
+        "data-slot": "scroll-area",
         className: (0, index_cjs_namespaceObject.cn)('relative overflow-hidden overscroll-x-contain', className),
         ...props,
         children: [
@@ -53,6 +54,7 @@ const ScrollArea = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ cl
 ScrollArea.displayName = react_scroll_area_namespaceObject.Root.displayName;
 const ScrollBar = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, orientation = 'vertical', ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_scroll_area_namespaceObject.ScrollAreaScrollbar, {
         ref: ref,
+        "data-slot": "scroll-bar",
         orientation: orientation,
         className: (0, index_cjs_namespaceObject.cn)('flex touch-none select-none transition-colors', 'vertical' === orientation && 'h-full w-2.5 border-l border-l-transparent p-px', 'horizontal' === orientation && 'h-2.5 flex-col border-t border-t-transparent p-px', className),
         ...props,

package/dist/components/ui/scroll-area.js

@@ -5,6 +5,7 @@ import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
 const ScrollArea = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(Root, {
         ref: ref,
+        "data-slot": "scroll-area",
         className: cn('relative overflow-hidden overscroll-x-contain', className),
         ...props,
         children: [
@@ -24,6 +25,7 @@ const ScrollArea = /*#__PURE__*/ forwardRef(({ className, children, ...props },
 ScrollArea.displayName = Root.displayName;
 const ScrollBar = /*#__PURE__*/ forwardRef(({ className, orientation = 'vertical', ...props }, ref)=>/*#__PURE__*/ jsx(ScrollAreaScrollbar, {
         ref: ref,
+        "data-slot": "scroll-bar",
         orientation: orientation,
         className: cn('flex touch-none select-none transition-colors', 'vertical' === orientation && 'h-full w-2.5 border-l border-l-transparent p-px', 'horizontal' === orientation && 'h-2.5 flex-col border-t border-t-transparent p-px', className),
         ...props,

package/dist/components/ui/search.cjs

@@ -40,6 +40,7 @@ const Search = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ classN
         onClear?.();
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_input_group_cjs_namespaceObject.InputGroup, {
+        "data-slot": "search",
         variant: variant,
         size: size,
         children: [
@@ -93,6 +94,7 @@ const SearchWithSuggestions = /*#__PURE__*/ external_react_namespaceObject.forwa
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
+        "data-slot": "search-with-suggestions",
         className: (0, index_cjs_namespaceObject.cn)('relative', className),
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
             open: open && filteredSuggestions.length > 0,

package/dist/components/ui/search.js

@@ -11,6 +11,7 @@ const search_Search = /*#__PURE__*/ forwardRef(({ className, value, onChange, on
         onClear?.();
     };
     return /*#__PURE__*/ jsxs(InputGroup, {
+        "data-slot": "search",
         variant: variant,
         size: size,
         children: [
@@ -64,6 +65,7 @@ const SearchWithSuggestions = /*#__PURE__*/ forwardRef(({ value, onChange, place
     };
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
+        "data-slot": "search-with-suggestions",
         className: cn('relative', className),
         children: /*#__PURE__*/ jsxs(Popover, {
             open: open && filteredSuggestions.length > 0,