@uipath/apollo-wind 2.56.0 → 2.57.0

package/dist/components/ui/field-addons/value-mode-indicator.cjs

@@ -0,0 +1,57 @@
+"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__, {
+    ValueModeIndicator: ()=>ValueModeIndicator
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const external_value_mode_strings_cjs_namespaceObject = require("./value-mode-strings.cjs");
+const ValueModeIndicator = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ mode, disabled, className, ...props }, ref)=>{
+    const strings = (0, external_value_mode_strings_cjs_namespaceObject.useValueModeStrings)();
+    if ('expression' !== mode) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        "data-slot": "value-mode-indicator",
+        role: "img",
+        "aria-label": strings.expressionIndicator,
+        title: strings.expressionIndicator,
+        className: (0, index_cjs_namespaceObject.cn)('flex items-center justify-center px-2 font-mono text-sm font-medium text-muted-foreground', disabled && 'opacity-50', className),
+        ...props,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+            "aria-hidden": "true",
+            children: "="
+        })
+    });
+});
+ValueModeIndicator.displayName = 'ValueModeIndicator';
+exports.ValueModeIndicator = __webpack_exports__.ValueModeIndicator;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ValueModeIndicator"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/field-addons/value-mode-indicator.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type ValueMode } from './value-mode-strings';
+export interface ValueModeIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    mode: ValueMode;
+    disabled?: boolean;
+}
+/**
+ * The `=` ahead of an expression value. Renders nothing in literal mode: its absence is the signal
+ * that the value is plain text. `className` takes alignment overrides, such as nudging the glyph
+ * onto the first line of a growable editor.
+ */
+declare const ValueModeIndicator: React.ForwardRefExoticComponent<ValueModeIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export { ValueModeIndicator };

package/dist/components/ui/field-addons/value-mode-indicator.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../../lib/index.js";
+import { useValueModeStrings } from "./value-mode-strings.js";
+const ValueModeIndicator = /*#__PURE__*/ forwardRef(({ mode, disabled, className, ...props }, ref)=>{
+    const strings = useValueModeStrings();
+    if ('expression' !== mode) return null;
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "value-mode-indicator",
+        role: "img",
+        "aria-label": strings.expressionIndicator,
+        title: strings.expressionIndicator,
+        className: cn('flex items-center justify-center px-2 font-mono text-sm font-medium text-muted-foreground', disabled && 'opacity-50', className),
+        ...props,
+        children: /*#__PURE__*/ jsx("span", {
+            "aria-hidden": "true",
+            children: "="
+        })
+    });
+});
+ValueModeIndicator.displayName = 'ValueModeIndicator';
+export { ValueModeIndicator };

package/dist/components/ui/field-addons/value-mode-menu.cjs

@@ -0,0 +1,149 @@
+"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__, {
+    ValueModeMenu: ()=>ValueModeMenu,
+    ValueModeMenuItem: ()=>ValueModeMenuItem
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_button_cjs_namespaceObject = require("../button.cjs");
+const external_dropdown_menu_cjs_namespaceObject = require("../dropdown-menu.cjs");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const external_value_mode_strings_cjs_namespaceObject = require("./value-mode-strings.cjs");
+function literalDescriptionFor(expectedType, strings) {
+    if ('number' === expectedType) return strings.literalNumberDescription;
+    if ('boolean' === expectedType) return strings.literalBooleanDescription;
+    return strings.literalDescription;
+}
+function ValueModeMenuItem({ icon: Icon, label, description, active, disabled, onClick }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+        role: "menuitemradio",
+        "aria-checked": active,
+        className: "flex-col items-start gap-0.5 py-2",
+        "data-active": active || void 0,
+        disabled: disabled,
+        onClick: onClick,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+                        size: 13,
+                        className: active ? 'text-brand' : 'text-foreground-muted'
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: (0, index_cjs_namespaceObject.cn)('text-xs font-medium', active ? 'text-brand' : 'text-foreground'),
+                        children: label
+                    })
+                ]
+            }),
+            description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "pl-6 text-[11px] leading-4 text-foreground-subtle",
+                children: description
+            })
+        ]
+    });
+}
+function ValueModeMenu({ mode, onSelect, modes, extraModes, actions, checked, modesDisabled, disabled, expectedType, literalDescription }) {
+    const strings = (0, external_value_mode_strings_cjs_namespaceObject.useValueModeStrings)();
+    const checkedMode = checked ?? mode;
+    const baseModes = modes ?? [
+        {
+            id: 'literal',
+            title: strings.literalTitle,
+            description: literalDescription ?? literalDescriptionFor(expectedType, strings),
+            icon: external_lucide_react_namespaceObject.Type
+        },
+        {
+            id: 'expression',
+            title: strings.expressionTitle,
+            description: strings.expressionDescription,
+            icon: external_lucide_react_namespaceObject.SquareFunction
+        }
+    ];
+    const resolvedModes = extraModes ? [
+        ...extraModes,
+        ...baseModes
+    ] : baseModes;
+    const activeMode = resolvedModes.find((item)=>item.id === mode);
+    const TriggerIcon = modesDisabled ? external_lucide_react_namespaceObject.MoreHorizontal : activeMode?.icon ?? external_lucide_react_namespaceObject.Type;
+    const triggerLabel = modesDisabled ? strings.fieldActions : activeMode?.title ?? strings.literalTitle;
+    return /*#__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_button_cjs_namespaceObject.Button, {
+                    type: "button",
+                    variant: "ghost",
+                    size: "3xs",
+                    disabled: disabled,
+                    "aria-label": triggerLabel,
+                    className: "size-6 shrink-0 rounded-md p-0 text-muted-foreground hover:bg-accent hover:text-foreground [&_svg]:size-3.5",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TriggerIcon, {})
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
+                align: "end",
+                className: "w-56",
+                children: [
+                    !modesDisabled && resolvedModes.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ValueModeMenuItem, {
+                            icon: item.icon,
+                            label: item.title,
+                            description: item.description,
+                            active: checkedMode === item.id,
+                            disabled: item.disabled,
+                            onClick: ()=>onSelect(item.id)
+                        }, item.id)),
+                    !modesDisabled && !!actions?.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuSeparator, {}),
+                    actions?.map((action)=>{
+                        const ActionIcon = action.icon;
+                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                            disabled: action.disabled,
+                            onClick: action.onSelect,
+                            children: [
+                                ActionIcon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ActionIcon, {}) : action.iconDataUri && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                                    src: action.iconDataUri,
+                                    alt: "",
+                                    className: "size-4 shrink-0"
+                                }),
+                                action.label
+                            ]
+                        }, action.id);
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.ValueModeMenu = __webpack_exports__.ValueModeMenu;
+exports.ValueModeMenuItem = __webpack_exports__.ValueModeMenuItem;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ValueModeMenu",
+    "ValueModeMenuItem"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/field-addons/value-mode-menu.d.ts

@@ -0,0 +1,69 @@
+import { type LucideIcon } from 'lucide-react';
+import { type ValueMode } from './value-mode-strings';
+/** One selectable mode. `id` is the consumer's own vocabulary. */
+export interface ValueModeOption<Id extends string = string> {
+    id: Id;
+    title: string;
+    description?: string;
+    icon: LucideIcon;
+    disabled?: boolean;
+}
+/** A field-supplied action listed under the modes, such as Clear value. */
+export interface ValueModeMenuAction {
+    id: string;
+    label: string;
+    icon?: LucideIcon;
+    /** Icon as a data URI, used when `icon` is absent. */
+    iconDataUri?: string;
+    disabled?: boolean;
+    onSelect: () => void;
+}
+interface ValueModeMenuBaseProps<Id extends string> {
+    mode: Id;
+    onSelect: (mode: Id) => void;
+    /** Listed before `modes` (or the built-in pair). */
+    extraModes?: ValueModeOption<Id>[];
+    /** Listed below the modes, behind a separator. */
+    actions?: ValueModeMenuAction[];
+    /** The item to mark active when it differs from `mode`; `'none'` marks neither. */
+    checked?: Id | 'none';
+    /** Hides the modes and shows only `actions`, under an overflow trigger rather than a mode glyph. */
+    modesDisabled?: boolean;
+    disabled?: boolean;
+    /** Picks the built-in Fixed value description (`number`, `boolean`, anything else). */
+    expectedType?: string;
+    /** Overrides the built-in Fixed value description. */
+    literalDescription?: string;
+}
+/**
+ * `modes` may be omitted when `Id` is the built-in modes, or one of them as `mode="literal"` infers,
+ * or includes both. The menu then falls back to them and calls `onSelect` with either. Other ids,
+ * such as `'fixed' | 'expr'`, must bring their own `modes`.
+ */
+export type ValueModeMenuProps<Id extends string = ValueMode> = ValueModeMenuBaseProps<Id> & ([Id] extends [ValueMode] ? BuiltInModes<Id> : [ValueMode] extends [Id] ? BuiltInModes<Id> : OwnModes<Id>);
+type BuiltInModes<Id extends string> = {
+    /** The mode list. Omitted, it is the built-in Fixed value / Expression pair. */
+    modes?: ValueModeOption<Id>[];
+};
+type OwnModes<Id extends string> = {
+    /** The mode list. */
+    modes: ValueModeOption<Id>[];
+};
+/**
+ * One selectable mode in a value-mode dropdown: icon and label, with an optional description.
+ * Shared with LockableValueField's mode dropdown, and not exported from the package.
+ */
+export declare function ValueModeMenuItem({ icon: Icon, label, description, active, disabled, onClick, }: {
+    icon: LucideIcon;
+    label: string;
+    description?: string;
+    active: boolean;
+    disabled?: boolean;
+    onClick: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Switches a field between value modes. The trigger shows the current mode's icon and is named by
+ * its title; the menu lists each mode with its description, then any field actions.
+ */
+export declare function ValueModeMenu<Id extends string = ValueMode>({ mode, onSelect, modes, extraModes, actions, checked, modesDisabled, disabled, expectedType, literalDescription, }: ValueModeMenuProps<Id>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/field-addons/value-mode-menu.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MoreHorizontal, SquareFunction, Type } from "lucide-react";
+import { Button } from "../button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdown-menu.js";
+import { cn } from "../../../lib/index.js";
+import { useValueModeStrings } from "./value-mode-strings.js";
+function literalDescriptionFor(expectedType, strings) {
+    if ('number' === expectedType) return strings.literalNumberDescription;
+    if ('boolean' === expectedType) return strings.literalBooleanDescription;
+    return strings.literalDescription;
+}
+function ValueModeMenuItem({ icon: Icon, label, description, active, disabled, onClick }) {
+    return /*#__PURE__*/ jsxs(DropdownMenuItem, {
+        role: "menuitemradio",
+        "aria-checked": active,
+        className: "flex-col items-start gap-0.5 py-2",
+        "data-active": active || void 0,
+        disabled: disabled,
+        onClick: onClick,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ jsx(Icon, {
+                        size: 13,
+                        className: active ? 'text-brand' : 'text-foreground-muted'
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: cn('text-xs font-medium', active ? 'text-brand' : 'text-foreground'),
+                        children: label
+                    })
+                ]
+            }),
+            description && /*#__PURE__*/ jsx("span", {
+                className: "pl-6 text-[11px] leading-4 text-foreground-subtle",
+                children: description
+            })
+        ]
+    });
+}
+function ValueModeMenu({ mode, onSelect, modes, extraModes, actions, checked, modesDisabled, disabled, expectedType, literalDescription }) {
+    const strings = useValueModeStrings();
+    const checkedMode = checked ?? mode;
+    const baseModes = modes ?? [
+        {
+            id: 'literal',
+            title: strings.literalTitle,
+            description: literalDescription ?? literalDescriptionFor(expectedType, strings),
+            icon: Type
+        },
+        {
+            id: 'expression',
+            title: strings.expressionTitle,
+            description: strings.expressionDescription,
+            icon: SquareFunction
+        }
+    ];
+    const resolvedModes = extraModes ? [
+        ...extraModes,
+        ...baseModes
+    ] : baseModes;
+    const activeMode = resolvedModes.find((item)=>item.id === mode);
+    const TriggerIcon = modesDisabled ? MoreHorizontal : activeMode?.icon ?? Type;
+    const triggerLabel = modesDisabled ? strings.fieldActions : activeMode?.title ?? strings.literalTitle;
+    return /*#__PURE__*/ jsxs(DropdownMenu, {
+        children: [
+            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Button, {
+                    type: "button",
+                    variant: "ghost",
+                    size: "3xs",
+                    disabled: disabled,
+                    "aria-label": triggerLabel,
+                    className: "size-6 shrink-0 rounded-md p-0 text-muted-foreground hover:bg-accent hover:text-foreground [&_svg]:size-3.5",
+                    children: /*#__PURE__*/ jsx(TriggerIcon, {})
+                })
+            }),
+            /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                align: "end",
+                className: "w-56",
+                children: [
+                    !modesDisabled && resolvedModes.map((item)=>/*#__PURE__*/ jsx(ValueModeMenuItem, {
+                            icon: item.icon,
+                            label: item.title,
+                            description: item.description,
+                            active: checkedMode === item.id,
+                            disabled: item.disabled,
+                            onClick: ()=>onSelect(item.id)
+                        }, item.id)),
+                    !modesDisabled && !!actions?.length && /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                    actions?.map((action)=>{
+                        const ActionIcon = action.icon;
+                        return /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                            disabled: action.disabled,
+                            onClick: action.onSelect,
+                            children: [
+                                ActionIcon ? /*#__PURE__*/ jsx(ActionIcon, {}) : action.iconDataUri && /*#__PURE__*/ jsx("img", {
+                                    src: action.iconDataUri,
+                                    alt: "",
+                                    className: "size-4 shrink-0"
+                                }),
+                                action.label
+                            ]
+                        }, action.id);
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { ValueModeMenu, ValueModeMenuItem };

package/dist/components/ui/field-addons/value-mode-strings.cjs

@@ -0,0 +1,69 @@
+"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__, {
+    DEFAULT_VALUE_MODE_STRINGS: ()=>DEFAULT_VALUE_MODE_STRINGS,
+    ValueModeStringsProvider: ()=>ValueModeStringsProvider,
+    useValueModeStrings: ()=>useValueModeStrings
+});
+const external_react_namespaceObject = require("react");
+const DEFAULT_VALUE_MODE_STRINGS = {
+    literalTitle: 'Fixed value',
+    literalDescription: 'Enter a value directly',
+    literalNumberDescription: 'Enter a numeric value',
+    literalBooleanDescription: 'Select true or false',
+    expressionTitle: 'Expression',
+    expressionDescription: 'JavaScript expression with IntelliSense',
+    fieldActions: 'Field actions',
+    expressionIndicator: 'JavaScript expression'
+};
+const ValueModeStringsContext = (0, external_react_namespaceObject.createContext)(DEFAULT_VALUE_MODE_STRINGS);
+function ValueModeStringsProvider({ strings, children }) {
+    const parent = (0, external_react_namespaceObject.useContext)(ValueModeStringsContext);
+    const value = (0, external_react_namespaceObject.useMemo)(()=>({
+            ...parent,
+            ...strings
+        }), [
+        parent,
+        strings
+    ]);
+    return (0, external_react_namespaceObject.createElement)(ValueModeStringsContext.Provider, {
+        value
+    }, children);
+}
+function useValueModeStrings() {
+    return (0, external_react_namespaceObject.useContext)(ValueModeStringsContext);
+}
+exports.DEFAULT_VALUE_MODE_STRINGS = __webpack_exports__.DEFAULT_VALUE_MODE_STRINGS;
+exports.ValueModeStringsProvider = __webpack_exports__.ValueModeStringsProvider;
+exports.useValueModeStrings = __webpack_exports__.useValueModeStrings;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "DEFAULT_VALUE_MODE_STRINGS",
+    "ValueModeStringsProvider",
+    "useValueModeStrings"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/field-addons/value-mode-strings.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+/** The built-in value modes: a value typed as-is, or an expression evaluated at run time. */
+export type ValueMode = 'literal' | 'expression';
+/** Every string the value-mode primitives render. apollo-wind has no i18n runtime, so a localized
+ *  host passes its own translations through {@link ValueModeStringsProvider}. */
+export interface ValueModeStrings {
+    /** The literal mode's name, the same for every value type. */
+    literalTitle: string;
+    /** The literal mode's description when the value type is not number or boolean. */
+    literalDescription: string;
+    literalNumberDescription: string;
+    literalBooleanDescription: string;
+    expressionTitle: string;
+    expressionDescription: string;
+    /** Names the menu trigger when it offers only actions and no modes. */
+    fieldActions: string;
+    /** Hover text on the `=` indicator. */
+    expressionIndicator: string;
+}
+export declare const DEFAULT_VALUE_MODE_STRINGS: ValueModeStrings;
+export interface ValueModeStringsProviderProps {
+    /**
+     * Overrides for any subset of the English defaults. Keep the object stable, such as a module
+     * constant or a memoized value: a new object each render re-renders every value-mode primitive.
+     */
+    strings: Partial<ValueModeStrings>;
+    children?: ReactNode;
+}
+/** Supplies translated strings to every value-mode primitive below it. */
+export declare function ValueModeStringsProvider({ strings, children }: ValueModeStringsProviderProps): import("react").FunctionComponentElement<import("react").ProviderProps<ValueModeStrings>>;
+/** The strings in effect: the nearest provider's, merged over the English defaults. */
+export declare function useValueModeStrings(): ValueModeStrings;

package/dist/components/ui/field-addons/value-mode-strings.js

@@ -0,0 +1,29 @@
+import { createContext, createElement, useContext, useMemo } from "react";
+const DEFAULT_VALUE_MODE_STRINGS = {
+    literalTitle: 'Fixed value',
+    literalDescription: 'Enter a value directly',
+    literalNumberDescription: 'Enter a numeric value',
+    literalBooleanDescription: 'Select true or false',
+    expressionTitle: 'Expression',
+    expressionDescription: 'JavaScript expression with IntelliSense',
+    fieldActions: 'Field actions',
+    expressionIndicator: 'JavaScript expression'
+};
+const ValueModeStringsContext = createContext(DEFAULT_VALUE_MODE_STRINGS);
+function ValueModeStringsProvider({ strings, children }) {
+    const parent = useContext(ValueModeStringsContext);
+    const value = useMemo(()=>({
+            ...parent,
+            ...strings
+        }), [
+        parent,
+        strings
+    ]);
+    return createElement(ValueModeStringsContext.Provider, {
+        value
+    }, children);
+}
+function useValueModeStrings() {
+    return useContext(ValueModeStringsContext);
+}
+export { DEFAULT_VALUE_MODE_STRINGS, ValueModeStringsProvider, useValueModeStrings };

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

@@ -24,6 +24,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    FormFieldHeader: ()=>FormFieldHeader,
     FormFieldLabel: ()=>FormFieldLabel,
     FormFieldError: ()=>FormFieldError,
     FormFieldDescription: ()=>FormFieldDescription,
@@ -33,11 +34,12 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const external_info_tooltip_cjs_namespaceObject = require("./info-tooltip.cjs");
 const external_label_cjs_namespaceObject = require("./label.cjs");
-const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const index_cjs_namespaceObject = require("./layout/index.cjs");
+const external_lib_index_cjs_namespaceObject = require("../../lib/index.cjs");
 const FormField = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
         "data-slot": "form-field",
-        className: (0, index_cjs_namespaceObject.cn)('grid grid-cols-[minmax(0,1fr)] gap-1.5 [&>[data-slot=form-field-error]]:mt-0', className),
+        className: (0, external_lib_index_cjs_namespaceObject.cn)('grid grid-cols-[minmax(0,1fr)] gap-1.5 [&>[data-slot=form-field-error]]:mt-0', className),
         ...props,
         children: children
     }));
@@ -53,7 +55,8 @@ const FormFieldLabel = /*#__PURE__*/ external_react_namespaceObject.forwardRef((
             required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.RequiredIndicator, {})
         ]
     });
-    if (null == tooltip || false === tooltip) return label;
+    const blank = 'string' == typeof tooltip && !tooltip.trim();
+    if (null == tooltip || false === tooltip || blank) return label;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
         className: "inline-flex items-center",
         children: [
@@ -71,7 +74,7 @@ const FormFieldDescription = /*#__PURE__*/ external_react_namespaceObject.forwar
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
         ref: ref,
         "data-slot": "form-field-description",
-        className: (0, index_cjs_namespaceObject.cn)('text-xs leading-4 text-foreground-muted', className),
+        className: (0, external_lib_index_cjs_namespaceObject.cn)('text-xs leading-4 text-foreground-muted', className),
         ...props,
         children: children
     });
@@ -83,21 +86,55 @@ const FormFieldError = /*#__PURE__*/ external_react_namespaceObject.forwardRef((
         ref: ref,
         "aria-live": "polite",
         "aria-atomic": "true",
-        className: (0, index_cjs_namespaceObject.cn)('text-xs leading-4 text-error mt-1.5', className),
+        className: (0, external_lib_index_cjs_namespaceObject.cn)('text-xs leading-4 text-error mt-1.5', className),
         ...props,
         "data-slot": "form-field-error",
         children: children
     });
 });
 FormFieldError.displayName = 'FormFieldError';
+const FormFieldHeader = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ label, htmlFor, required, tooltip, tooltipAriaLabel, leading, badge, actions, variant = 'default', className, ...props }, ref)=>{
+    if (!label && !actions) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        ref: ref,
+        "data-slot": "form-field-header",
+        className: (0, external_lib_index_cjs_namespaceObject.cn)('@container flex min-h-6 items-center justify-between gap-2', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex min-w-0 items-center gap-2",
+                children: [
+                    leading,
+                    label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormFieldLabel, {
+                        htmlFor: htmlFor,
+                        required: required,
+                        tooltip: tooltip,
+                        tooltipAriaLabel: tooltipAriaLabel,
+                        variant: variant,
+                        children: label
+                    }),
+                    badge
+                ]
+            }),
+            actions && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Row, {
+                align: "center",
+                gap: 1,
+                children: actions
+            })
+        ]
+    });
+});
+FormFieldHeader.displayName = 'FormFieldHeader';
 exports.FormField = __webpack_exports__.FormField;
 exports.FormFieldDescription = __webpack_exports__.FormFieldDescription;
 exports.FormFieldError = __webpack_exports__.FormFieldError;
+exports.FormFieldHeader = __webpack_exports__.FormFieldHeader;
 exports.FormFieldLabel = __webpack_exports__.FormFieldLabel;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "FormField",
     "FormFieldDescription",
     "FormFieldError",
+    "FormFieldHeader",
     "FormFieldLabel"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {