@uipath/apollo-wind 2.56.0 → 2.57.1

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

@@ -5,34 +5,51 @@ import { CalendarIcon } from "lucide-react";
 import { forwardRef, useId } from "react";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
+import { InputGroupPopoverTrigger } from "./input-group.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
 import { FormFieldError } from "./form-field.js";
+import { useControlValidation, useInputGroup } from "./input-group-context.js";
 const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `date-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
+    const group = useInputGroup();
+    const grouped = group.inGroup;
+    const validation = useControlValidation(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        'aria-label': id || ariaLabelledBy ? void 0 : value ? `Selected date: ${format(value, 'PPP')}` : placeholder,
+        'aria-labelledby': ariaLabelledBy,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs(Popover, {
                 "data-slot": "date-picker",
                 children: [
-                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ jsx(InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: value && /*#__PURE__*/ jsx("span", {
+                            className: "truncate",
+                            children: format(value, 'PPP')
+                        })
+                    }) : /*#__PURE__*/ jsx(PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ jsxs(Button, {
+                            ...triggerProps,
                             ref: ref,
-                            id: id,
                             variant: "outline",
-                            "aria-label": id || ariaLabelledBy ? void 0 : value ? `Selected date: ${format(value, 'PPP')}` : placeholder,
-                            "aria-labelledby": ariaLabelledBy,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
                             className: cn('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 /*#__PURE__*/ jsx(CalendarIcon, {}),
                                 value ? format(value, 'PPP') : /*#__PURE__*/ jsx("span", {
@@ -44,6 +61,7 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
                     }),
                     /*#__PURE__*/ jsx(PopoverContent, {
                         className: "w-auto p-0",
+                        align: grouped ? 'start' : void 0,
                         children: /*#__PURE__*/ jsx(Calendar, {
                             mode: "single",
                             selected: value,
@@ -54,7 +72,7 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
                 children: error
             })
@@ -64,29 +82,47 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
 const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `date-range-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
     const computedLabel = value?.from ? value.to ? `Selected range: ${format(value.from, 'LLL dd, y')} to ${format(value.to, 'LLL dd, y')}` : `Selected date: ${format(value.from, 'LLL dd, y')}` : placeholder;
+    const group = useInputGroup();
+    const grouped = group.inGroup;
+    const validation = useControlValidation(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        'aria-label': id || ariaLabelledBy ? void 0 : computedLabel,
+        'aria-labelledby': ariaLabelledBy,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs(Popover, {
                 "data-slot": "date-range-picker",
                 children: [
-                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ jsx(InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: value?.from && /*#__PURE__*/ jsxs("span", {
+                            className: "truncate",
+                            children: [
+                                format(value.from, 'LLL dd, y'),
+                                value.to && ` - ${format(value.to, 'LLL dd, y')}`
+                            ]
+                        })
+                    }) : /*#__PURE__*/ jsx(PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ jsxs(Button, {
+                            ...triggerProps,
                             ref: ref,
-                            id: id,
                             variant: "outline",
-                            "aria-label": id || ariaLabelledBy ? void 0 : computedLabel,
-                            "aria-labelledby": ariaLabelledBy,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
                             className: cn('w-[300px] justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 /*#__PURE__*/ jsx(CalendarIcon, {}),
                                 value?.from ? value.to ? /*#__PURE__*/ jsxs(Fragment, {
@@ -118,7 +154,7 @@ const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ id, valu
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
                 children: error
             })

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

@@ -33,18 +33,16 @@ const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_calendar_cjs_namespaceObject = require("./calendar.cjs");
 const external_input_cjs_namespaceObject = require("./input.cjs");
+const external_input_group_cjs_namespaceObject = require("./input-group.cjs");
 const external_label_cjs_namespaceObject = require("./label.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const external_input_group_context_cjs_namespaceObject = require("./input-group-context.cjs");
 const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false, id, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const [open, setOpen] = external_react_namespaceObject.useState(false);
     const generatedId = external_react_namespaceObject.useId();
     const validationId = errorId ?? `${id ?? `datetime-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
     const [selectedDate, setSelectedDate] = external_react_namespaceObject.useState(value);
     const [timeValue, setTimeValue] = external_react_namespaceObject.useState(value ? (0, external_date_fns_namespaceObject.format)(value, use12Hour ? 'hh:mm a' : 'HH:mm') : '');
     const handleDateSelect = (date)=>{
@@ -74,6 +72,21 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
         const timePart = (0, external_date_fns_namespaceObject.format)(selectedDate, use12Hour ? 'hh:mm a' : 'HH:mm');
         return `${datePart} at ${timePart}`;
     };
+    const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
+    const grouped = group.inGroup;
+    const validation = (0, external_input_group_context_cjs_namespaceObject.useControlValidation)(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        'aria-labelledby': ariaLabelledBy,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
@@ -81,18 +94,22 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
                 open: open,
                 onOpenChange: setOpen,
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: selectedDate && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "truncate",
+                            children: formatDisplayValue()
+                        })
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+                            ...triggerProps,
                             ref: ref,
-                            id: id,
-                            "aria-labelledby": ariaLabelledBy,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
                             variant: "outline",
                             className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {
                                     className: "mr-2 h-4 w-4"
@@ -163,7 +180,7 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
                 id: validationId,
                 children: error
             })

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

@@ -5,18 +5,16 @@ import { forwardRef, useId, useState } from "react";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
 import { Input } from "./input.js";
+import { InputGroupPopoverTrigger } from "./input-group.js";
 import { Label } from "./label.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
 import { FormFieldError } from "./form-field.js";
+import { useControlValidation, useInputGroup } from "./input-group-context.js";
 const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false, id, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const [open, setOpen] = useState(false);
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `datetime-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
     const [selectedDate, setSelectedDate] = useState(value);
     const [timeValue, setTimeValue] = useState(value ? format(value, use12Hour ? 'hh:mm a' : 'HH:mm') : '');
     const handleDateSelect = (date)=>{
@@ -46,6 +44,21 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
         const timePart = format(selectedDate, use12Hour ? 'hh:mm a' : 'HH:mm');
         return `${datePart} at ${timePart}`;
     };
+    const group = useInputGroup();
+    const grouped = group.inGroup;
+    const validation = useControlValidation(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        'aria-labelledby': ariaLabelledBy,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs(Popover, {
@@ -53,18 +66,22 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
                 open: open,
                 onOpenChange: setOpen,
                 children: [
-                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ jsx(InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: selectedDate && /*#__PURE__*/ jsx("span", {
+                            className: "truncate",
+                            children: formatDisplayValue()
+                        })
+                    }) : /*#__PURE__*/ jsx(PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ jsxs(Button, {
+                            ...triggerProps,
                             ref: ref,
-                            id: id,
-                            "aria-labelledby": ariaLabelledBy,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
                             variant: "outline",
                             className: cn('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 /*#__PURE__*/ jsx(CalendarIcon, {
                                     className: "mr-2 h-4 w-4"
@@ -135,7 +152,7 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
                 children: error
             })

package/dist/components/ui/dialog.cjs

@@ -53,6 +53,7 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
+const dialog_surface_cjs_namespaceObject = require("../../lib/dialog-surface.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 function Dialog({ ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dialog_namespaceObject.Root, {
@@ -73,7 +74,7 @@ function DialogPortal({ ...props }) {
         ...props
     });
 }
-const dialogContentVariants = (0, external_class_variance_authority_namespaceObject.cva)('bg-surface-raised text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 border border-border-subtle shadow-xl duration-200', {
+const dialogContentVariants = (0, external_class_variance_authority_namespaceObject.cva)(`${dialog_surface_cjs_namespaceObject.dialogSurfaceClassName} data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 duration-200`, {
     variants: {
         variant: {
             default: 'grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-2xl p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg',

package/dist/components/ui/dialog.js

@@ -6,6 +6,7 @@ import { Maximize2, Minimize2, XIcon } from "lucide-react";
 import { forwardRef, useState } from "react";
 import { Button } from "./button.js";
 import { useResolvedPortalContainer } from "./portal-container.js";
+import { dialogSurfaceClassName } from "../../lib/dialog-surface.js";
 import { cn } from "../../lib/index.js";
 function Dialog({ ...props }) {
     return /*#__PURE__*/ jsx(Root, {
@@ -26,7 +27,7 @@ function DialogPortal({ ...props }) {
         ...props
     });
 }
-const dialogContentVariants = cva('bg-surface-raised text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 border border-border-subtle shadow-xl duration-200', {
+const dialogContentVariants = cva(`${dialogSurfaceClassName} data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 relative z-50 duration-200`, {
     variants: {
         variant: {
             default: 'grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-2xl p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg',

package/dist/components/ui/dropdown-menu.cjs

@@ -47,6 +47,7 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 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 external_input_group_context_cjs_namespaceObject = require("./input-group-context.cjs");
 const DropdownMenu = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Root, {
         "data-slot": "dropdown-menu",
         ...props
@@ -112,14 +113,17 @@ const DropdownMenuSubContent = /*#__PURE__*/ external_react_namespaceObject.forw
 DropdownMenuSubContent.displayName = react_dropdown_menu_namespaceObject.SubContent.displayName;
 const DropdownMenuContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, sideOffset = 4, container, ...props }, ref)=>{
     const resolvedContainer = (0, external_portal_container_cjs_namespaceObject.useResolvedPortalContainer)(container);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Portal, {
-        container: resolvedContainer,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Content, {
-            ref: ref,
-            "data-slot": "dropdown-menu-content",
-            sideOffset: sideOffset,
-            className: (0, index_cjs_namespaceObject.cn)('z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-dropdown-menu-content-transform-origin]', className),
-            ...props
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_context_cjs_namespaceObject.InputGroupContext.Provider, {
+        value: external_input_group_context_cjs_namespaceObject.NO_GROUP,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Portal, {
+            container: resolvedContainer,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Content, {
+                ref: ref,
+                "data-slot": "dropdown-menu-content",
+                sideOffset: sideOffset,
+                className: (0, index_cjs_namespaceObject.cn)('z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-dropdown-menu-content-transform-origin]', className),
+                ...props
+            })
         })
     });
 });

package/dist/components/ui/dropdown-menu.js

@@ -5,6 +5,7 @@ import { Check, ChevronRight, Circle } from "lucide-react";
 import { forwardRef } from "react";
 import { useResolvedPortalContainer } from "./portal-container.js";
 import { cn } from "../../lib/index.js";
+import { InputGroupContext, NO_GROUP } from "./input-group-context.js";
 const DropdownMenu = (props)=>/*#__PURE__*/ jsx(Root, {
         "data-slot": "dropdown-menu",
         ...props
@@ -70,14 +71,17 @@ const DropdownMenuSubContent = /*#__PURE__*/ forwardRef(({ className, ...props }
 DropdownMenuSubContent.displayName = SubContent.displayName;
 const DropdownMenuContent = /*#__PURE__*/ forwardRef(({ className, sideOffset = 4, container, ...props }, ref)=>{
     const resolvedContainer = useResolvedPortalContainer(container);
-    return /*#__PURE__*/ jsx(Portal, {
-        container: resolvedContainer,
-        children: /*#__PURE__*/ jsx(Content, {
-            ref: ref,
-            "data-slot": "dropdown-menu-content",
-            sideOffset: sideOffset,
-            className: cn('z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-dropdown-menu-content-transform-origin]', className),
-            ...props
+    return /*#__PURE__*/ jsx(InputGroupContext.Provider, {
+        value: NO_GROUP,
+        children: /*#__PURE__*/ jsx(Portal, {
+            container: resolvedContainer,
+            children: /*#__PURE__*/ jsx(Content, {
+                ref: ref,
+                "data-slot": "dropdown-menu-content",
+                sideOffset: sideOffset,
+                className: cn('z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-dropdown-menu-content-transform-origin]', className),
+                ...props
+            })
         })
     });
 });

package/dist/components/ui/field-actions/ai-assist-action.cjs

@@ -0,0 +1,121 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    AiAssistAction: ()=>AiAssistAction,
+    DEFAULT_AI_ASSIST_ACTION_STRINGS: ()=>DEFAULT_AI_ASSIST_ACTION_STRINGS
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_button_cjs_namespaceObject = require("../button.cjs");
+const external_label_cjs_namespaceObject = require("../label.cjs");
+const external_popover_cjs_namespaceObject = require("../popover.cjs");
+const external_textarea_cjs_namespaceObject = require("../textarea.cjs");
+const external_tooltip_cjs_namespaceObject = require("../tooltip.cjs");
+const DEFAULT_AI_ASSIST_ACTION_STRINGS = {
+    trigger: 'AI assist',
+    tooltip: 'Generate with AI',
+    prompt: 'Describe what you want',
+    promptPlaceholder: 'Display a value from the previous step',
+    generate: 'Generate'
+};
+function AiAssistAction({ onGenerate, hint, strings }) {
+    const promptId = (0, external_react_namespaceObject.useId)();
+    const [prompt, setPrompt] = (0, external_react_namespaceObject.useState)('');
+    const text = {
+        ...DEFAULT_AI_ASSIST_ACTION_STRINGS,
+        ...strings
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                type: "button",
+                                "aria-label": text.trigger,
+                                className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Sparkles, {
+                                    size: 12
+                                })
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                        children: text.tooltip
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.PopoverContent, {
+                align: "end",
+                className: "space-y-3",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "space-y-1.5",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.Label, {
+                                htmlFor: promptId,
+                                className: "text-xs font-medium text-foreground-muted",
+                                children: text.prompt
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_textarea_cjs_namespaceObject.Textarea, {
+                                id: promptId,
+                                rows: 3,
+                                value: prompt,
+                                onChange: (e)=>setPrompt(e.target.value),
+                                placeholder: text.promptPlaceholder,
+                                className: "resize-none text-sm"
+                            })
+                        ]
+                    }),
+                    hint && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "block text-[11px] text-foreground-subtle",
+                        children: hint
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                        size: "sm",
+                        className: "w-full",
+                        disabled: !onGenerate,
+                        onClick: ()=>onGenerate?.(prompt),
+                        children: text.generate
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.AiAssistAction = __webpack_exports__.AiAssistAction;
+exports.DEFAULT_AI_ASSIST_ACTION_STRINGS = __webpack_exports__.DEFAULT_AI_ASSIST_ACTION_STRINGS;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "AiAssistAction",
+    "DEFAULT_AI_ASSIST_ACTION_STRINGS"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/field-actions/ai-assist-action.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+export interface AiAssistActionStrings {
+    trigger: string;
+    tooltip: string;
+    prompt: string;
+    promptPlaceholder: string;
+    generate: string;
+}
+export declare const DEFAULT_AI_ASSIST_ACTION_STRINGS: AiAssistActionStrings;
+export interface AiAssistActionProps {
+    /** Called with the entered prompt. Omitted, Generate is disabled. */
+    onGenerate?: (prompt: string) => void;
+    /** A line under the prompt describing what will be generated, such as the value's type. */
+    hint?: ReactNode;
+    /** Overrides for any subset of the English strings. */
+    strings?: Partial<AiAssistActionStrings>;
+}
+/**
+ * The AI-assist header action: a prompt in a popover. Requires an ancestor `TooltipProvider`.
+ */
+export declare function AiAssistAction({ onGenerate, hint, strings }: AiAssistActionProps): import("react/jsx-runtime").JSX.Element;