@uipath/apollo-wind 2.31.0 → 2.32.0

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

@@ -0,0 +1,264 @@
+"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__, {
+    LockableValueField: ()=>LockableValueField
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_calendar_cjs_namespaceObject = require("../calendar.cjs");
+const external_dropdown_menu_cjs_namespaceObject = require("../dropdown-menu.cjs");
+const external_file_upload_cjs_namespaceObject = require("../file-upload.cjs");
+const external_input_cjs_namespaceObject = require("../input.cjs");
+const external_input_group_cjs_namespaceObject = require("../input-group.cjs");
+const external_multi_select_cjs_namespaceObject = require("../multi-select.cjs");
+const external_popover_cjs_namespaceObject = require("../popover.cjs");
+const external_select_cjs_namespaceObject = require("../select.cjs");
+const external_switch_cjs_namespaceObject = require("../switch.cjs");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const field_header_cjs_namespaceObject = require("./components/field-header.cjs");
+const lock_toggle_button_cjs_namespaceObject = require("./components/lock-toggle-button.cjs");
+const mode_menu_item_cjs_namespaceObject = require("./components/mode-menu-item.cjs");
+const external_types_cjs_namespaceObject = require("./types.cjs");
+const external_utils_cjs_namespaceObject = require("./utils.cjs");
+function LockableValueField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, mode = 'fixed', onModeChange, renderExpressionEditor, fieldType = 'string', onFieldTypeChange, required, onRequiredChange, label, fileUploadAriaLabel, headerActions, compact, controlsVisibility = 'visible', showFieldActions = true, options = external_utils_cjs_namespaceObject.DEFAULT_SELECT_OPTIONS, onGenerateWithAi, variables = [], id, className }) {
+    const generatedId = (0, external_react_namespaceObject.useId)();
+    const [datePopoverOpen, setDatePopoverOpen] = (0, external_react_namespaceObject.useState)(false);
+    const [selectOpen, setSelectOpen] = (0, external_react_namespaceObject.useState)(false);
+    const fieldId = id ?? generatedId;
+    const typeMeta = external_types_cjs_namespaceObject.FIELD_TYPE_META[fieldType];
+    const effectiveMode = typeMeta.supportsExpression ? mode : 'fixed';
+    const editableOnValueChange = locked ? void 0 : onValueChange;
+    const fieldTypeLabel = typeMeta.label.toLowerCase();
+    const expressionArticle = /^[aeiou]/.test(fieldTypeLabel) ? 'an' : 'a';
+    const fieldLabel = 'expression' === effectiveMode ? `Write ${expressionArticle} ${fieldTypeLabel} expression` : `${typeMeta.label} value`;
+    const lockedDisplayValue = (0, external_utils_cjs_namespaceObject.getLockedDisplayValue)(fieldType, value, options);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('@container group flex flex-col gap-1.5', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(field_header_cjs_namespaceObject.FieldHeader, {
+                label: label,
+                fieldId: fieldId,
+                fieldLabel: fieldLabel,
+                required: required,
+                fieldType: fieldType,
+                onFieldTypeChange: onFieldTypeChange,
+                onRequiredChange: onRequiredChange,
+                controlsVisibility: controlsVisibility,
+                compact: compact,
+                showFieldActions: showFieldActions,
+                value: value,
+                onValueChange: editableOnValueChange,
+                variables: variables,
+                onGenerateWithAi: onGenerateWithAi,
+                headerActions: headerActions
+            }),
+            typeMeta.supportsExpression ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_input_group_cjs_namespaceObject.InputGroup, {
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
+                        align: "inline-start",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(lock_toggle_button_cjs_namespaceObject.LockToggleButton, {
+                            locked: locked,
+                            onLockedChange: onLockedChange
+                        })
+                    }),
+                    'expression' === effectiveMode ? renderExpressionEditor ? renderExpressionEditor({
+                        id: fieldId,
+                        value,
+                        onValueChange: editableOnValueChange,
+                        onBlur: onValueBlur,
+                        readOnly: !editableOnValueChange,
+                        placeholder: fieldLabel,
+                        fieldType
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
+                        id: fieldId,
+                        readOnly: !editableOnValueChange,
+                        value: value,
+                        onChange: (e)=>editableOnValueChange?.(e.target.value),
+                        onBlur: onValueBlur,
+                        placeholder: fieldLabel,
+                        className: "font-mono"
+                    }) : locked ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
+                        id: fieldId,
+                        readOnly: true,
+                        value: lockedDisplayValue,
+                        placeholder: fieldLabel,
+                        onBlur: onValueBlur
+                    }) : 'boolean' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "flex h-full flex-1 items-center px-3",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_switch_cjs_namespaceObject.Switch, {
+                            id: fieldId,
+                            checked: 'true' === value,
+                            onCheckedChange: (checked)=>onValueChange?.(String(checked)),
+                            onBlur: onValueBlur,
+                            disabled: !onValueChange
+                        })
+                    }) : 'date' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+                        open: datePopoverOpen,
+                        onOpenChange: (open)=>{
+                            setDatePopoverOpen(open);
+                            if (!open) onValueBlur?.();
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                    type: "button",
+                                    id: fieldId,
+                                    "data-slot": "input-group-control",
+                                    disabled: !onValueChange,
+                                    className: "flex h-full flex-1 items-center text-left text-sm text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50",
+                                    children: value ? (0, external_utils_cjs_namespaceObject.formatDateValue)(value) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "text-muted-foreground",
+                                        children: "Pick a date"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                                align: "start",
+                                className: "w-auto p-0",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
+                                    mode: "single",
+                                    selected: (0, external_utils_cjs_namespaceObject.parseDateValue)(value),
+                                    onSelect: (date)=>onValueChange?.(date ? (0, external_utils_cjs_namespaceObject.toDateOnlyString)(date) : ''),
+                                    initialFocus: true
+                                })
+                            })
+                        ]
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
+                        id: fieldId,
+                        type: 'integer' === fieldType ? 'number' : 'text',
+                        readOnly: !onValueChange,
+                        value: value,
+                        onChange: (e)=>onValueChange?.(e.target.value),
+                        onBlur: onValueBlur,
+                        placeholder: fieldLabel
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
+                        align: "inline-end",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
+                                    asChild: true,
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupButton, {
+                                        icon: true,
+                                        size: "3xs",
+                                        disabled: !onModeChange,
+                                        "aria-label": "Choose value type",
+                                        children: 'expression' === effectiveMode ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Code2, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Type, {})
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
+                                    align: "end",
+                                    className: "w-56",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(mode_menu_item_cjs_namespaceObject.ModeMenuItem, {
+                                            icon: external_lucide_react_namespaceObject.Type,
+                                            label: typeMeta.fixedLabel,
+                                            description: typeMeta.fixedDescription,
+                                            active: 'fixed' === effectiveMode,
+                                            onClick: ()=>onModeChange?.('fixed')
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(mode_menu_item_cjs_namespaceObject.ModeMenuItem, {
+                                            icon: external_lucide_react_namespaceObject.Code2,
+                                            label: "Expression",
+                                            description: "Use a JS expression",
+                                            active: 'expression' === effectiveMode,
+                                            onClick: ()=>onModeChange?.('expression')
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(lock_toggle_button_cjs_namespaceObject.LockToggleButton, {
+                        locked: locked,
+                        onLockedChange: onLockedChange
+                    }),
+                    locked ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
+                        id: fieldId,
+                        readOnly: true,
+                        value: lockedDisplayValue,
+                        placeholder: fieldLabel,
+                        className: "flex-1",
+                        onBlur: onValueBlur
+                    }) : 'single-select' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_select_cjs_namespaceObject.Select, {
+                        open: selectOpen,
+                        onOpenChange: (open)=>{
+                            setSelectOpen(open);
+                            if (!open && selectOpen) onValueBlur?.();
+                        },
+                        value: value || void 0,
+                        onValueChange: onValueChange,
+                        disabled: !onValueChange,
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectTrigger, {
+                                id: fieldId,
+                                className: "flex-1",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectValue, {
+                                    placeholder: "Select an option"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectContent, {
+                                children: options.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectItem, {
+                                        value: option.value,
+                                        children: option.label
+                                    }, option.value))
+                            })
+                        ]
+                    }) : 'multi-select' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_multi_select_cjs_namespaceObject.MultiSelect, {
+                        id: fieldId,
+                        className: "flex-1",
+                        options: options,
+                        selected: (0, external_utils_cjs_namespaceObject.parseListValue)(value),
+                        onChange: (selected)=>onValueChange?.(JSON.stringify(selected)),
+                        placeholder: "Select options...",
+                        disabled: !onValueChange,
+                        onBlur: onValueBlur
+                    }) : 'file' === fieldType && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_file_upload_cjs_namespaceObject.FileUpload, {
+                        id: fieldId,
+                        ariaLabel: fileUploadAriaLabel ?? ('string' == typeof label ? label : fieldLabel),
+                        className: "flex-1",
+                        onFilesChange: (files)=>onValueChange?.(files.map((f)=>f.name).join(', ')),
+                        disabled: !onValueChange,
+                        onBlur: onValueBlur
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.LockableValueField = __webpack_exports__.LockableValueField;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "LockableValueField"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,14 @@
+import type { LockableValueFieldProps } from './types';
+/**
+ * LockableValueField — a field that can be locked to read-only, typed as one
+ * of several data types, and (for scalar types) switched between a literal
+ * value and a JS expression.
+ *
+ * The expression mode is styled as code (monospace) but does not carry real
+ * syntax highlighting or evaluation. Select/multiselect options default to a
+ * small demo set unless `options` is provided. The built-in AI-assist
+ * "Generate" button is a no-op unless `onGenerateWithAi` is provided; the
+ * Insert-variable menu is empty (and disabled) unless `variables` is
+ * provided; file uploads aren't persisted anywhere.
+ */
+export declare function LockableValueField({ value, onValueChange, onValueBlur, locked, onLockedChange, mode, onModeChange, renderExpressionEditor, fieldType, onFieldTypeChange, required, onRequiredChange, label, fileUploadAriaLabel, headerActions, compact, controlsVisibility, showFieldActions, options, onGenerateWithAi, variables, id, className, }: LockableValueFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,230 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Code2, Type } from "lucide-react";
+import { useId, useState } from "react";
+import { Calendar } from "../calendar.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../dropdown-menu.js";
+import { FileUpload } from "../file-upload.js";
+import { Input } from "../input.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../input-group.js";
+import { MultiSelect } from "../multi-select.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select.js";
+import { Switch } from "../switch.js";
+import { cn } from "../../../lib/index.js";
+import { FieldHeader } from "./components/field-header.js";
+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();
+    const [datePopoverOpen, setDatePopoverOpen] = useState(false);
+    const [selectOpen, setSelectOpen] = useState(false);
+    const fieldId = id ?? generatedId;
+    const typeMeta = FIELD_TYPE_META[fieldType];
+    const effectiveMode = typeMeta.supportsExpression ? mode : 'fixed';
+    const editableOnValueChange = locked ? void 0 : onValueChange;
+    const fieldTypeLabel = typeMeta.label.toLowerCase();
+    const expressionArticle = /^[aeiou]/.test(fieldTypeLabel) ? 'an' : 'a';
+    const fieldLabel = 'expression' === effectiveMode ? `Write ${expressionArticle} ${fieldTypeLabel} expression` : `${typeMeta.label} value`;
+    const lockedDisplayValue = getLockedDisplayValue(fieldType, value, options);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('@container group flex flex-col gap-1.5', className),
+        children: [
+            /*#__PURE__*/ jsx(FieldHeader, {
+                label: label,
+                fieldId: fieldId,
+                fieldLabel: fieldLabel,
+                required: required,
+                fieldType: fieldType,
+                onFieldTypeChange: onFieldTypeChange,
+                onRequiredChange: onRequiredChange,
+                controlsVisibility: controlsVisibility,
+                compact: compact,
+                showFieldActions: showFieldActions,
+                value: value,
+                onValueChange: editableOnValueChange,
+                variables: variables,
+                onGenerateWithAi: onGenerateWithAi,
+                headerActions: headerActions
+            }),
+            typeMeta.supportsExpression ? /*#__PURE__*/ jsxs(InputGroup, {
+                children: [
+                    /*#__PURE__*/ jsx(InputGroupAddon, {
+                        align: "inline-start",
+                        children: /*#__PURE__*/ jsx(LockToggleButton, {
+                            locked: locked,
+                            onLockedChange: onLockedChange
+                        })
+                    }),
+                    'expression' === effectiveMode ? renderExpressionEditor ? renderExpressionEditor({
+                        id: fieldId,
+                        value,
+                        onValueChange: editableOnValueChange,
+                        onBlur: onValueBlur,
+                        readOnly: !editableOnValueChange,
+                        placeholder: fieldLabel,
+                        fieldType
+                    }) : /*#__PURE__*/ jsx(InputGroupInput, {
+                        id: fieldId,
+                        readOnly: !editableOnValueChange,
+                        value: value,
+                        onChange: (e)=>editableOnValueChange?.(e.target.value),
+                        onBlur: onValueBlur,
+                        placeholder: fieldLabel,
+                        className: "font-mono"
+                    }) : locked ? /*#__PURE__*/ jsx(InputGroupInput, {
+                        id: fieldId,
+                        readOnly: true,
+                        value: lockedDisplayValue,
+                        placeholder: fieldLabel,
+                        onBlur: onValueBlur
+                    }) : 'boolean' === fieldType ? /*#__PURE__*/ jsx("div", {
+                        className: "flex h-full flex-1 items-center px-3",
+                        children: /*#__PURE__*/ jsx(Switch, {
+                            id: fieldId,
+                            checked: 'true' === value,
+                            onCheckedChange: (checked)=>onValueChange?.(String(checked)),
+                            onBlur: onValueBlur,
+                            disabled: !onValueChange
+                        })
+                    }) : 'date' === fieldType ? /*#__PURE__*/ jsxs(Popover, {
+                        open: datePopoverOpen,
+                        onOpenChange: (open)=>{
+                            setDatePopoverOpen(open);
+                            if (!open) onValueBlur?.();
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(PopoverTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    id: fieldId,
+                                    "data-slot": "input-group-control",
+                                    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", {
+                                        className: "text-muted-foreground",
+                                        children: "Pick a date"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(PopoverContent, {
+                                align: "start",
+                                className: "w-auto p-0",
+                                children: /*#__PURE__*/ jsx(Calendar, {
+                                    mode: "single",
+                                    selected: parseDateValue(value),
+                                    onSelect: (date)=>onValueChange?.(date ? toDateOnlyString(date) : ''),
+                                    initialFocus: true
+                                })
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx(InputGroupInput, {
+                        id: fieldId,
+                        type: 'integer' === fieldType ? 'number' : 'text',
+                        readOnly: !onValueChange,
+                        value: value,
+                        onChange: (e)=>onValueChange?.(e.target.value),
+                        onBlur: onValueBlur,
+                        placeholder: fieldLabel
+                    }),
+                    /*#__PURE__*/ jsx(InputGroupAddon, {
+                        align: "inline-end",
+                        children: /*#__PURE__*/ jsxs(DropdownMenu, {
+                            children: [
+                                /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                    asChild: true,
+                                    children: /*#__PURE__*/ jsx(InputGroupButton, {
+                                        icon: true,
+                                        size: "3xs",
+                                        disabled: !onModeChange,
+                                        "aria-label": "Choose value type",
+                                        children: 'expression' === effectiveMode ? /*#__PURE__*/ jsx(Code2, {}) : /*#__PURE__*/ jsx(Type, {})
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                                    align: "end",
+                                    className: "w-56",
+                                    children: [
+                                        /*#__PURE__*/ jsx(ModeMenuItem, {
+                                            icon: Type,
+                                            label: typeMeta.fixedLabel,
+                                            description: typeMeta.fixedDescription,
+                                            active: 'fixed' === effectiveMode,
+                                            onClick: ()=>onModeChange?.('fixed')
+                                        }),
+                                        /*#__PURE__*/ jsx(ModeMenuItem, {
+                                            icon: Code2,
+                                            label: "Expression",
+                                            description: "Use a JS expression",
+                                            active: 'expression' === effectiveMode,
+                                            onClick: ()=>onModeChange?.('expression')
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }) : /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ jsx(LockToggleButton, {
+                        locked: locked,
+                        onLockedChange: onLockedChange
+                    }),
+                    locked ? /*#__PURE__*/ jsx(Input, {
+                        id: fieldId,
+                        readOnly: true,
+                        value: lockedDisplayValue,
+                        placeholder: fieldLabel,
+                        className: "flex-1",
+                        onBlur: onValueBlur
+                    }) : 'single-select' === fieldType ? /*#__PURE__*/ jsxs(Select, {
+                        open: selectOpen,
+                        onOpenChange: (open)=>{
+                            setSelectOpen(open);
+                            if (!open && selectOpen) onValueBlur?.();
+                        },
+                        value: value || void 0,
+                        onValueChange: onValueChange,
+                        disabled: !onValueChange,
+                        children: [
+                            /*#__PURE__*/ jsx(SelectTrigger, {
+                                id: fieldId,
+                                className: "flex-1",
+                                children: /*#__PURE__*/ jsx(SelectValue, {
+                                    placeholder: "Select an option"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(SelectContent, {
+                                children: options.map((option)=>/*#__PURE__*/ jsx(SelectItem, {
+                                        value: option.value,
+                                        children: option.label
+                                    }, option.value))
+                            })
+                        ]
+                    }) : 'multi-select' === fieldType ? /*#__PURE__*/ jsx(MultiSelect, {
+                        id: fieldId,
+                        className: "flex-1",
+                        options: options,
+                        selected: parseListValue(value),
+                        onChange: (selected)=>onValueChange?.(JSON.stringify(selected)),
+                        placeholder: "Select options...",
+                        disabled: !onValueChange,
+                        onBlur: onValueBlur
+                    }) : '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
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { LockableValueField };

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

@@ -0,0 +1,99 @@
+"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__, {
+    FIELD_TYPE_ORDER: ()=>FIELD_TYPE_ORDER,
+    FIELD_TYPE_META: ()=>FIELD_TYPE_META
+});
+const external_lucide_react_namespaceObject = require("lucide-react");
+const FIELD_TYPE_META = {
+    string: {
+        label: 'String',
+        icon: external_lucide_react_namespaceObject.ALargeSmall,
+        supportsExpression: true,
+        fixedLabel: 'Fixed value',
+        fixedDescription: 'Use a literal string value'
+    },
+    integer: {
+        label: 'Integer',
+        icon: external_lucide_react_namespaceObject.Hash,
+        supportsExpression: true,
+        fixedLabel: 'Fixed value',
+        fixedDescription: 'Use a literal number value'
+    },
+    date: {
+        label: 'Date',
+        icon: external_lucide_react_namespaceObject.Calendar,
+        supportsExpression: true,
+        fixedLabel: 'Fixed date',
+        fixedDescription: 'Use a literal date value'
+    },
+    boolean: {
+        label: 'Boolean',
+        icon: external_lucide_react_namespaceObject.ToggleLeft,
+        supportsExpression: true,
+        fixedLabel: 'Fixed value',
+        fixedDescription: 'Use a literal true or false value'
+    },
+    'single-select': {
+        label: 'Single select',
+        icon: external_lucide_react_namespaceObject.List,
+        supportsExpression: false,
+        fixedLabel: 'Fixed value',
+        fixedDescription: 'Choose one option'
+    },
+    'multi-select': {
+        label: 'Multi select',
+        icon: external_lucide_react_namespaceObject.ListChecks,
+        supportsExpression: false,
+        fixedLabel: 'Fixed value',
+        fixedDescription: 'Choose one or more options'
+    },
+    file: {
+        label: 'File',
+        icon: external_lucide_react_namespaceObject.File,
+        supportsExpression: false,
+        fixedLabel: 'Fixed value',
+        fixedDescription: 'Upload a file'
+    }
+};
+const FIELD_TYPE_ORDER = [
+    'string',
+    'integer',
+    'date',
+    'boolean',
+    'single-select',
+    'multi-select',
+    'file'
+];
+exports.FIELD_TYPE_META = __webpack_exports__.FIELD_TYPE_META;
+exports.FIELD_TYPE_ORDER = __webpack_exports__.FIELD_TYPE_ORDER;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FIELD_TYPE_META",
+    "FIELD_TYPE_ORDER"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});