@uipath/apollo-wind 2.59.0 → 2.60.0

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

@@ -24,12 +24,12 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    LockableValueField: ()=>external_lockable_value_field_cjs_namespaceObject.LockableValueField,
-    FIELD_TYPE_ORDER: ()=>external_types_cjs_namespaceObject.FIELD_TYPE_ORDER,
-    FIELD_TYPE_META: ()=>external_types_cjs_namespaceObject.FIELD_TYPE_META
+    LockableValueField: ()=>LockableValueField,
+    FIELD_TYPE_ORDER: ()=>index_cjs_namespaceObject.FIELD_TYPE_ORDER,
+    FIELD_TYPE_META: ()=>index_cjs_namespaceObject.FIELD_TYPE_META
 });
-const external_lockable_value_field_cjs_namespaceObject = require("./lockable-value-field.cjs");
-const external_types_cjs_namespaceObject = require("./types.cjs");
+const index_cjs_namespaceObject = require("../quick-form-field/index.cjs");
+const LockableValueField = index_cjs_namespaceObject.QuickFormField;
 exports.FIELD_TYPE_META = __webpack_exports__.FIELD_TYPE_META;
 exports.FIELD_TYPE_ORDER = __webpack_exports__.FIELD_TYPE_ORDER;
 exports.LockableValueField = __webpack_exports__.LockableValueField;

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

@@ -1,3 +1,18 @@
-export { LockableValueField } from './lockable-value-field';
-export type { LockableFieldType, LockableValueFieldMode, LockableValueFieldMoreActions, LockableValueFieldOption, LockableValueFieldProps, } from './types';
-export { FIELD_TYPE_META, FIELD_TYPE_ORDER } from './types';
+import type { QuickFieldType, QuickFormFieldMode, QuickFormFieldMoreActions, QuickFormFieldOption, QuickFormFieldProps, QuickFormFieldStrings } from '../quick-form-field';
+import { QuickFormField } from '../quick-form-field';
+/** @deprecated Renamed to `QuickFormField`. Removed in the next major release. */
+export declare const LockableValueField: typeof QuickFormField;
+/** @deprecated Renamed to `QuickFieldType`. Removed in the next major release. */
+export type LockableFieldType = QuickFieldType;
+/** @deprecated Renamed to `QuickFormFieldMode`. Removed in the next major release. */
+export type LockableValueFieldMode = QuickFormFieldMode;
+/** @deprecated Renamed to `QuickFormFieldMoreActions`. Removed in the next major release. */
+export type LockableValueFieldMoreActions = QuickFormFieldMoreActions;
+/** @deprecated Renamed to `QuickFormFieldOption`. Removed in the next major release. */
+export type LockableValueFieldOption = QuickFormFieldOption;
+/** @deprecated Renamed to `QuickFormFieldProps`. Removed in the next major release. */
+export type LockableValueFieldProps = QuickFormFieldProps;
+/** @deprecated Renamed to `QuickFormFieldStrings`. Removed in the next major release. */
+export type LockableValueFieldStrings = QuickFormFieldStrings;
+export type { VariableInsertContext } from '../quick-form-field';
+export { FIELD_TYPE_META, FIELD_TYPE_ORDER } from '../quick-form-field';

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

@@ -1,3 +1,3 @@
-import { LockableValueField } from "./lockable-value-field.js";
-import { FIELD_TYPE_META, FIELD_TYPE_ORDER } from "./types.js";
+import { FIELD_TYPE_META, FIELD_TYPE_ORDER, QuickFormField } from "../quick-form-field/index.js";
+const LockableValueField = QuickFormField;
 export { FIELD_TYPE_META, FIELD_TYPE_ORDER, LockableValueField };

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

@@ -0,0 +1,265 @@
+"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__, {
+    FieldHeader: ()=>FieldHeader
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_dropdown_menu_cjs_namespaceObject = require("../../dropdown-menu.cjs");
+const external_form_field_cjs_namespaceObject = require("../../form-field.cjs");
+const external_popover_cjs_namespaceObject = require("../../popover.cjs");
+const external_switch_cjs_namespaceObject = require("../../switch.cjs");
+const external_tooltip_cjs_namespaceObject = require("../../tooltip.cjs");
+const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
+const ai_assist_action_cjs_namespaceObject = require("../../field-actions/ai-assist-action.cjs");
+const collapse_cjs_namespaceObject = require("../../field-actions/collapse.cjs");
+const insert_variable_action_cjs_namespaceObject = require("../../field-actions/insert-variable-action.cjs");
+const external_types_cjs_namespaceObject = require("../types.cjs");
+function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes = external_types_cjs_namespaceObject.FIELD_TYPE_ORDER, onFieldTypeChange, onRequiredChange, compact, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
+    const [pickerItems, optionsBySelectionId] = (0, external_react_namespaceObject.useMemo)(()=>{
+        const byId = new Map();
+        const toItem = (v, id)=>{
+            byId.set(id, v);
+            return {
+                id,
+                label: v.label,
+                ...v.value ? {
+                    value: v.value
+                } : {},
+                ...v.type ? {
+                    type: v.type
+                } : {},
+                ...v.children ? {
+                    children: v.children.map((c, i)=>toItem(c, `${id}/${i}`))
+                } : {}
+            };
+        };
+        return [
+            variables.map((v, i)=>toItem(v, String(i))),
+            byId
+        ];
+    }, [
+        variables
+    ]);
+    const typeMeta = external_types_cjs_namespaceObject.FIELD_TYPE_META[fieldType];
+    const typeLabel = strings.typeLabels[fieldType] ?? typeMeta.label;
+    const collapsedTextClass = (0, index_cjs_namespaceObject.cn)(collapse_cjs_namespaceObject.COLLAPSED_HIDDEN, compact && '!hidden');
+    const collapsedPaddingClass = (0, index_cjs_namespaceObject.cn)(collapse_cjs_namespaceObject.COLLAPSED_ICON_PADDING, compact && '!px-1.5');
+    const compactOnlyClass = (0, index_cjs_namespaceObject.cn)(collapse_cjs_namespaceObject.COLLAPSED_ONLY, compact && '!block');
+    const hasActions = !!onFieldTypeChange || !!onRequiredChange || showFieldActions || null != headerActions;
+    if (null != label && !hasActions) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+        children: label
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
+        delayDuration: 300,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldHeader, {
+            label: null == label ? fieldLabel : void 0,
+            htmlFor: fieldId,
+            required: required,
+            leading: label,
+            actions: hasActions ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-center gap-0.5",
+                        children: [
+                            onFieldTypeChange && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
+                                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_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                                                        type: "button",
+                                                        "aria-label": strings.fieldTypeAriaLabel,
+                                                        className: (0, index_cjs_namespaceObject.cn)('flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground', collapsedPaddingClass),
+                                                        children: [
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(typeMeta.icon, {
+                                                                size: 12
+                                                            }),
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                className: collapsedTextClass,
+                                                                children: typeLabel
+                                                            }),
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                                                                size: 9,
+                                                                className: collapsedTextClass
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            }),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                                                children: strings.fieldTypeTooltip
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
+                                        align: "end",
+                                        className: "w-44",
+                                        children: fieldTypes.map((type)=>{
+                                            const meta = external_types_cjs_namespaceObject.FIELD_TYPE_META[type];
+                                            const isActive = type === fieldType;
+                                            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                                                onClick: ()=>onFieldTypeChange(type),
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(meta.icon, {
+                                                        className: isActive ? 'text-brand' : 'text-foreground-muted'
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                        className: (0, index_cjs_namespaceObject.cn)(isActive && 'font-medium text-brand'),
+                                                        children: strings.typeLabels[type] ?? meta.label
+                                                    })
+                                                ]
+                                            }, type);
+                                        })
+                                    })
+                                ]
+                            }),
+                            onRequiredChange && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: collapsedTextClass,
+                                        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)("span", {
+                                                        className: "inline-flex",
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_switch_cjs_namespaceObject.Switch, {
+                                                            size: "sm",
+                                                            checked: !!required,
+                                                            onCheckedChange: onRequiredChange,
+                                                            className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
+                                                            "aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                                                    children: strings.requiredTooltip
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: compactOnlyClass,
+                                        children: /*#__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": required ? strings.requiredAriaLabel : strings.optionalAriaLabel,
+                                                                    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.Asterisk, {
+                                                                        size: 12
+                                                                    })
+                                                                })
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                                                            children: strings.requiredTooltip
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                                                    align: "end",
+                                                    className: "w-48",
+                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                        className: "flex items-center justify-between gap-3",
+                                                        children: [
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                className: "text-xs font-medium text-foreground",
+                                                                children: strings.requiredTooltip
+                                                            }),
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_switch_cjs_namespaceObject.Switch, {
+                                                                size: "sm",
+                                                                checked: !!required,
+                                                                onCheckedChange: onRequiredChange,
+                                                                className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
+                                                                "aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            showFieldActions && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                children: [
+                                    onGenerateWithAi && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ai_assist_action_cjs_namespaceObject.AiAssistAction, {
+                                        onGenerate: onGenerateWithAi,
+                                        hint: strings.aiOutputHint(strings.aiOutputLabel(typeLabel, typeMeta.supportsExpression)),
+                                        strings: {
+                                            trigger: strings.aiAssistAriaLabel,
+                                            tooltip: strings.aiAssistTooltip,
+                                            prompt: strings.aiPromptLabel,
+                                            promptPlaceholder: strings.aiPromptPlaceholder,
+                                            generate: strings.aiGenerate,
+                                            generating: strings.aiGenerating,
+                                            error: strings.aiError
+                                        }
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(insert_variable_action_cjs_namespaceObject.InsertVariableAction, {
+                                        variables: pickerItems,
+                                        compact: compact,
+                                        disabled: !onValueChange,
+                                        strings: {
+                                            label: strings.insertLabel,
+                                            ariaLabel: strings.insertAriaLabel,
+                                            searchPlaceholder: strings.insertSearchPlaceholder,
+                                            empty: strings.insertEmpty
+                                        },
+                                        onInsert: onInsertVariable && ((value, item)=>onInsertVariable(optionsBySelectionId.get(item.id) ?? {
+                                                label: item.label,
+                                                value
+                                            }))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    headerActions
+                ]
+            }) : void 0
+        })
+    });
+}
+exports.FieldHeader = __webpack_exports__.FieldHeader;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FieldHeader"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { QuickFieldType, QuickFormFieldOption, QuickFormFieldStrings } from '../types';
+export declare function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes, onFieldTypeChange, onRequiredChange, compact, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions, }: {
+    label?: ReactNode;
+    fieldId: string;
+    fieldLabel: string;
+    required?: boolean;
+    fieldType: QuickFieldType;
+    /** See QuickFormFieldProps.fieldTypes. */
+    fieldTypes?: readonly QuickFieldType[];
+    onFieldTypeChange?: (fieldType: QuickFieldType) => void;
+    onRequiredChange?: (required: boolean) => void;
+    compact?: boolean;
+    showFieldActions: boolean;
+    onValueChange?: (value: string) => void;
+    variables: QuickFormFieldOption[];
+    onGenerateWithAi?: (prompt: string) => void;
+    /** See QuickFormFieldProps.onInsertVariable. */
+    onInsertVariable?: (variable: QuickFormFieldOption) => void;
+    /** See QuickFormFieldStrings. */
+    strings: QuickFormFieldStrings;
+    headerActions?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,231 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Asterisk, ChevronDown } from "lucide-react";
+import { useMemo } from "react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown-menu.js";
+import { FormFieldHeader } from "../../form-field.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../popover.js";
+import { Switch } from "../../switch.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../tooltip.js";
+import { cn } from "../../../../lib/index.js";
+import { AiAssistAction } from "../../field-actions/ai-assist-action.js";
+import { COLLAPSED_HIDDEN, COLLAPSED_ICON_PADDING, COLLAPSED_ONLY } from "../../field-actions/collapse.js";
+import { InsertVariableAction } from "../../field-actions/insert-variable-action.js";
+import { FIELD_TYPE_META, FIELD_TYPE_ORDER } from "../types.js";
+function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes = FIELD_TYPE_ORDER, onFieldTypeChange, onRequiredChange, compact, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
+    const [pickerItems, optionsBySelectionId] = useMemo(()=>{
+        const byId = new Map();
+        const toItem = (v, id)=>{
+            byId.set(id, v);
+            return {
+                id,
+                label: v.label,
+                ...v.value ? {
+                    value: v.value
+                } : {},
+                ...v.type ? {
+                    type: v.type
+                } : {},
+                ...v.children ? {
+                    children: v.children.map((c, i)=>toItem(c, `${id}/${i}`))
+                } : {}
+            };
+        };
+        return [
+            variables.map((v, i)=>toItem(v, String(i))),
+            byId
+        ];
+    }, [
+        variables
+    ]);
+    const typeMeta = FIELD_TYPE_META[fieldType];
+    const typeLabel = strings.typeLabels[fieldType] ?? typeMeta.label;
+    const collapsedTextClass = cn(COLLAPSED_HIDDEN, compact && '!hidden');
+    const collapsedPaddingClass = cn(COLLAPSED_ICON_PADDING, compact && '!px-1.5');
+    const compactOnlyClass = cn(COLLAPSED_ONLY, compact && '!block');
+    const hasActions = !!onFieldTypeChange || !!onRequiredChange || showFieldActions || null != headerActions;
+    if (null != label && !hasActions) return /*#__PURE__*/ jsx(Fragment, {
+        children: label
+    });
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        delayDuration: 300,
+        children: /*#__PURE__*/ jsx(FormFieldHeader, {
+            label: null == label ? fieldLabel : void 0,
+            htmlFor: fieldId,
+            required: required,
+            leading: label,
+            actions: hasActions ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-0.5",
+                        children: [
+                            onFieldTypeChange && /*#__PURE__*/ jsxs(DropdownMenu, {
+                                children: [
+                                    /*#__PURE__*/ jsxs(Tooltip, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(TooltipTrigger, {
+                                                asChild: true,
+                                                children: /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ jsxs("button", {
+                                                        type: "button",
+                                                        "aria-label": strings.fieldTypeAriaLabel,
+                                                        className: cn('flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground', collapsedPaddingClass),
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(typeMeta.icon, {
+                                                                size: 12
+                                                            }),
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                className: collapsedTextClass,
+                                                                children: typeLabel
+                                                            }),
+                                                            /*#__PURE__*/ jsx(ChevronDown, {
+                                                                size: 9,
+                                                                className: collapsedTextClass
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(TooltipContent, {
+                                                children: strings.fieldTypeTooltip
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(DropdownMenuContent, {
+                                        align: "end",
+                                        className: "w-44",
+                                        children: fieldTypes.map((type)=>{
+                                            const meta = FIELD_TYPE_META[type];
+                                            const isActive = type === fieldType;
+                                            return /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                                onClick: ()=>onFieldTypeChange(type),
+                                                children: [
+                                                    /*#__PURE__*/ jsx(meta.icon, {
+                                                        className: isActive ? 'text-brand' : 'text-foreground-muted'
+                                                    }),
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: cn(isActive && 'font-medium text-brand'),
+                                                        children: strings.typeLabels[type] ?? meta.label
+                                                    })
+                                                ]
+                                            }, type);
+                                        })
+                                    })
+                                ]
+                            }),
+                            onRequiredChange && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: collapsedTextClass,
+                                        children: /*#__PURE__*/ jsxs(Tooltip, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(TooltipTrigger, {
+                                                    asChild: true,
+                                                    children: /*#__PURE__*/ jsx("span", {
+                                                        className: "inline-flex",
+                                                        children: /*#__PURE__*/ jsx(Switch, {
+                                                            size: "sm",
+                                                            checked: !!required,
+                                                            onCheckedChange: onRequiredChange,
+                                                            className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
+                                                            "aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx(TooltipContent, {
+                                                    children: strings.requiredTooltip
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: compactOnlyClass,
+                                        children: /*#__PURE__*/ jsxs(Popover, {
+                                            children: [
+                                                /*#__PURE__*/ jsxs(Tooltip, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(TooltipTrigger, {
+                                                            asChild: true,
+                                                            children: /*#__PURE__*/ jsx(PopoverTrigger, {
+                                                                asChild: true,
+                                                                children: /*#__PURE__*/ jsx("button", {
+                                                                    type: "button",
+                                                                    "aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel,
+                                                                    className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
+                                                                    children: /*#__PURE__*/ jsx(Asterisk, {
+                                                                        size: 12
+                                                                    })
+                                                                })
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsx(TooltipContent, {
+                                                            children: strings.requiredTooltip
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx(PopoverContent, {
+                                                    align: "end",
+                                                    className: "w-48",
+                                                    children: /*#__PURE__*/ jsxs("div", {
+                                                        className: "flex items-center justify-between gap-3",
+                                                        children: [
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                className: "text-xs font-medium text-foreground",
+                                                                children: strings.requiredTooltip
+                                                            }),
+                                                            /*#__PURE__*/ jsx(Switch, {
+                                                                size: "sm",
+                                                                checked: !!required,
+                                                                onCheckedChange: onRequiredChange,
+                                                                className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
+                                                                "aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            showFieldActions && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    onGenerateWithAi && /*#__PURE__*/ jsx(AiAssistAction, {
+                                        onGenerate: onGenerateWithAi,
+                                        hint: strings.aiOutputHint(strings.aiOutputLabel(typeLabel, typeMeta.supportsExpression)),
+                                        strings: {
+                                            trigger: strings.aiAssistAriaLabel,
+                                            tooltip: strings.aiAssistTooltip,
+                                            prompt: strings.aiPromptLabel,
+                                            promptPlaceholder: strings.aiPromptPlaceholder,
+                                            generate: strings.aiGenerate,
+                                            generating: strings.aiGenerating,
+                                            error: strings.aiError
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsx(InsertVariableAction, {
+                                        variables: pickerItems,
+                                        compact: compact,
+                                        disabled: !onValueChange,
+                                        strings: {
+                                            label: strings.insertLabel,
+                                            ariaLabel: strings.insertAriaLabel,
+                                            searchPlaceholder: strings.insertSearchPlaceholder,
+                                            empty: strings.insertEmpty
+                                        },
+                                        onInsert: onInsertVariable && ((value, item)=>onInsertVariable(optionsBySelectionId.get(item.id) ?? {
+                                                label: item.label,
+                                                value
+                                            }))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    headerActions
+                ]
+            }) : void 0
+        })
+    });
+}
+export { FieldHeader };

package/dist/components/ui/{lockable-value-field → quick-form-field}/components/lock-toggle-button.cjs

@@ -30,7 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_input_group_cjs_namespaceObject = require("../../input-group.cjs");
 const external_tooltip_cjs_namespaceObject = require("../../tooltip.cjs");
-function LockToggleButton({ locked, onLockedChange }) {
+function LockToggleButton({ locked, onLockedChange, strings }) {
     const interactive = !!onLockedChange;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
         delayDuration: 300,
@@ -43,7 +43,7 @@ function LockToggleButton({ locked, onLockedChange }) {
                         size: "3xs",
                         disabled: !interactive,
                         onClick: ()=>onLockedChange?.(!locked),
-                        "aria-label": interactive ? locked ? 'Read-only. Click to make editable.' : 'Editable. Click to make read-only.' : locked ? 'Read-only' : 'Editable',
+                        "aria-label": interactive ? locked ? strings.lockedHint : strings.unlockedHint : locked ? strings.lockedLabel : strings.unlockedLabel,
                         children: locked ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.LockKeyhole, {
                             size: 16
                         }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.LockKeyholeOpen, {
@@ -52,7 +52,7 @@ function LockToggleButton({ locked, onLockedChange }) {
                     })
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
-                    children: locked ? 'Read-only' : 'Editable'
+                    children: locked ? strings.lockedLabel : strings.unlockedLabel
                 })
             ]
         })

package/dist/components/ui/{lockable-value-field → quick-form-field}/components/lock-toggle-button.d.ts

@@ -1,9 +1,12 @@
+import type { QuickFormFieldStrings } from '../types';
 /**
  * The lock/unlock toggle shared by both the InputGroup and plain-Input
  * layouts. Disabled (and its label adjusted) when onLockedChange isn't
  * provided, since clicking it wouldn't do anything otherwise.
  */
-export declare function LockToggleButton({ locked, onLockedChange, }: {
+export declare function LockToggleButton({ locked, onLockedChange, strings, }: {
     locked: boolean;
     onLockedChange?: (locked: boolean) => void;
+    /** See QuickFormFieldStrings. */
+    strings: QuickFormFieldStrings;
 }): import("react/jsx-runtime").JSX.Element;