@uipath/apollo-wind 2.79.1 → 2.80.0

package/dist/components/forms/metadata-form.cjs

@@ -587,9 +587,10 @@ const metadata_form_FormSection = /*#__PURE__*/ external_react_default().memo(fu
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: isPlain ? dividerClassName : wrapperClassName,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                "data-slot": "form-section-header",
                 className: "flex",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                     className: isPlain ? `flex flex-1 items-center justify-start gap-2 pb-4 text-sm font-semibold ${plainTopClassName}` : 'flex flex-1 items-center justify-between py-4 text-sm font-medium',
                     children: section.title
                 })

package/dist/components/forms/metadata-form.js

@@ -548,9 +548,10 @@ const metadata_form_FormSection = /*#__PURE__*/ react.memo(function({ section, c
     return /*#__PURE__*/ jsxs("div", {
         className: isPlain ? dividerClassName : wrapperClassName,
         children: [
-            /*#__PURE__*/ jsx("div", {
+            /*#__PURE__*/ jsx("h3", {
+                "data-slot": "form-section-header",
                 className: "flex",
-                children: /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsx("span", {
                     className: isPlain ? `flex flex-1 items-center justify-start gap-2 pb-4 text-sm font-semibold ${plainTopClassName}` : 'flex flex-1 items-center justify-between py-4 text-sm font-medium',
                     children: section.title
                 })

package/dist/components/ui/editable-text.cjs

@@ -0,0 +1,251 @@
+"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__, {
+    EditableText: ()=>EditableText
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const external_tooltip_cjs_namespaceObject = require("./tooltip.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const useIsomorphicLayoutEffect = "u" < typeof window ? external_react_namespaceObject.useEffect : external_react_namespaceObject.useLayoutEffect;
+const stripNewlines = (text)=>text.replace(/\n+/g, ' ');
+const READ_CLASS = {
+    label: 'text-xs font-medium leading-4 text-foreground',
+    lg: 'text-base font-semibold leading-5 tracking-[-0.3px] text-foreground',
+    sm: 'text-xs leading-4 text-foreground-muted'
+};
+const EDIT_CLASS = {
+    label: 'text-xs font-medium leading-4',
+    lg: 'text-base font-semibold leading-5 tracking-[-0.3px]',
+    sm: 'text-xs leading-4'
+};
+const LINE_HEIGHT = {
+    label: 16,
+    lg: 20,
+    sm: 16
+};
+const VERTICAL_PADDING = 4;
+const CLAMP_CLASS = 'line-clamp-[var(--editable-text-lines)] whitespace-pre-line wrap-break-word';
+const INTERACTIVE_CLASS = 'rounded px-1.5 py-0.5 -mx-1.5';
+const EDITOR_SPACING_CLASS = 'rounded px-1.5 py-0.5 -ml-1.5';
+const READ_MAX_WIDTH_CLASS = 'max-w-[calc(100%+--spacing(3))]';
+const ERROR_RING_CLASS = 'ring-1 ring-error';
+function TruncationTooltip({ content, multiline, children }) {
+    const triggerRef = external_react_namespaceObject.useRef(null);
+    const setTrigger = external_react_namespaceObject.useCallback((node)=>{
+        triggerRef.current = node;
+    }, []);
+    const [open, setOpen] = external_react_namespaceObject.useState(false);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
+        delayDuration: 700,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
+            open: open,
+            onOpenChange: (next)=>{
+                const node = triggerRef.current;
+                setOpen(next && !!node && (node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight));
+            },
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
+                    asChild: true,
+                    ref: setTrigger,
+                    children: children
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipPortal, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                        className: (0, index_cjs_namespaceObject.cn)('max-w-80 wrap-break-word', multiline && 'whitespace-pre-line'),
+                        children: content
+                    })
+                })
+            ]
+        })
+    });
+}
+function EditableText({ value, placeholder, size = 'lg', multiline, maxLines = 3, onChange, onSubmit, editing: editingProp, onEditingChange, disabled, truncationTooltip = true, error, 'aria-label': ariaLabel, className, 'data-testid': dataTestId }) {
+    const allowNewlines = true === multiline;
+    const editable = !!onChange && !!onSubmit;
+    const [editingState, setEditingState] = external_react_namespaceObject.useState(false);
+    const controlled = void 0 !== editingProp;
+    const requested = controlled ? editingProp : editingState;
+    const isEditing = requested && editable && !disabled;
+    const setEditing = external_react_namespaceObject.useCallback((next)=>{
+        if (!controlled) setEditingState(next);
+        onEditingChange?.(next);
+    }, [
+        controlled,
+        onEditingChange
+    ]);
+    const inputRef = external_react_namespaceObject.useRef(null);
+    const openedWith = external_react_namespaceObject.useRef(value);
+    const latestValue = external_react_namespaceObject.useRef(value);
+    latestValue.current = value;
+    const errorId = `editable-text-${external_react_namespaceObject.useId().replace(/:/g, '')}-error`;
+    const hasError = !!error;
+    const describedBy = hasError ? errorId : void 0;
+    useIsomorphicLayoutEffect(()=>{
+        if (disabled && requested) setEditing(false);
+    }, [
+        disabled,
+        requested,
+        setEditing
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        if (!isEditing) return;
+        openedWith.current = latestValue.current;
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, [
+        isEditing
+    ]);
+    const cancel = external_react_namespaceObject.useCallback(()=>{
+        setEditing(false);
+        if (openedWith.current !== value) onChange?.(openedWith.current);
+    }, [
+        value,
+        onChange,
+        setEditing
+    ]);
+    const commit = external_react_namespaceObject.useCallback(()=>{
+        const next = value.trim();
+        setEditing(false);
+        if (next !== value) onChange?.(next);
+        if (next !== openedWith.current) onSubmit?.(next);
+    }, [
+        value,
+        onChange,
+        onSubmit,
+        setEditing
+    ]);
+    const handleKeyDown = external_react_namespaceObject.useCallback((e)=>{
+        if ('Enter' !== e.key || allowNewlines && e.shiftKey) {
+            if ('Escape' === e.key) {
+                e.preventDefault();
+                cancel();
+            }
+        } else {
+            e.preventDefault();
+            commit();
+        }
+        e.stopPropagation();
+    }, [
+        commit,
+        cancel,
+        allowNewlines
+    ]);
+    const editorMaxHeight = multiline ? {
+        maxHeight: maxLines * LINE_HEIGHT[size] + VERTICAL_PADDING
+    } : void 0;
+    const readClampStyle = multiline ? {
+        '--editable-text-lines': maxLines
+    } : void 0;
+    const readClampClass = multiline ? CLAMP_CLASS : 'block truncate';
+    const withTooltip = (trigger)=>truncationTooltip && (value || placeholder) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TruncationTooltip, {
+            content: value || placeholder,
+            multiline: !!multiline,
+            children: trigger
+        }) : trigger;
+    const message = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+        id: errorId,
+        "data-slot": "editable-text-error",
+        className: "-ml-1 mt-1",
+        children: error
+    });
+    if (!editable) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            withTooltip(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                "data-slot": "editable-text",
+                "data-testid": dataTestId,
+                "aria-describedby": describedBy,
+                style: readClampStyle,
+                className: (0, index_cjs_namespaceObject.cn)(readClampClass, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && (0, index_cjs_namespaceObject.cn)(INTERACTIVE_CLASS, ERROR_RING_CLASS), className),
+                children: value || placeholder
+            })),
+            message
+        ]
+    });
+    if (isEditing) {
+        const sharedProps = {
+            'data-slot': 'editable-text-input',
+            'data-testid': dataTestId ? `${dataTestId}-input` : void 0,
+            value,
+            placeholder,
+            'aria-label': ariaLabel,
+            'aria-describedby': describedBy,
+            'aria-errormessage': hasError ? errorId : void 0,
+            'aria-invalid': hasError || void 0,
+            onKeyDown: handleKeyDown,
+            onBlur: commit,
+            className: (0, index_cjs_namespaceObject.cn)('w-full min-w-0 border-none bg-surface-overlay text-foreground outline-none ring-1', hasError ? 'ring-error' : 'ring-brand', EDITOR_SPACING_CLASS, EDIT_CLASS[size], className)
+        };
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [
+                multiline ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
+                    ...sharedProps,
+                    ref: inputRef,
+                    rows: 1,
+                    style: editorMaxHeight,
+                    className: (0, index_cjs_namespaceObject.cn)(sharedProps.className, 'field-sizing-content max-w-full resize-none overflow-y-auto wrap-break-word'),
+                    onChange: (e)=>onChange?.(allowNewlines ? e.target.value : stripNewlines(e.target.value))
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                    ...sharedProps,
+                    ref: inputRef,
+                    autoComplete: "off",
+                    onChange: (e)=>onChange?.(e.target.value)
+                }),
+                message
+            ]
+        });
+    }
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            withTooltip(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                "data-slot": "editable-text",
+                "data-testid": dataTestId,
+                "aria-label": ariaLabel && `${ariaLabel}: ${value || placeholder || ''}`,
+                "aria-describedby": describedBy,
+                "aria-errormessage": hasError ? errorId : void 0,
+                "aria-invalid": hasError || void 0,
+                "aria-disabled": disabled || void 0,
+                onClick: ()=>{
+                    if (disabled) return;
+                    setEditing(true);
+                },
+                style: readClampStyle,
+                className: (0, index_cjs_namespaceObject.cn)('cursor-text border-none bg-transparent text-left transition hover:bg-surface-overlay', READ_MAX_WIDTH_CLASS, 'aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent', readClampClass, INTERACTIVE_CLASS, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && ERROR_RING_CLASS, className),
+                children: value || placeholder
+            })),
+            message
+        ]
+    });
+}
+exports.EditableText = __webpack_exports__.EditableText;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "EditableText"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/editable-text.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+/** `label` matches a field label; `sm` and `lg` a secondary line and a title. */
+export type EditableTextSize = 'label' | 'sm' | 'lg';
+export interface EditableTextProps {
+    /** The text on screen, in both modes: this is a controlled field, so an edit shows up only once `onChange` has been applied here. */
+    value: string;
+    placeholder?: string;
+    /** Defaults to `lg`. */
+    size?: EditableTextSize;
+    /**
+     * Text layout. `true` accepts newlines (Shift+Enter); `'wrap'` wraps across lines but keeps the
+     * value single-line, so every Enter commits and pasted newlines collapse. Enter always commits.
+     */
+    multiline?: boolean | 'wrap';
+    /** Visible-line ceiling when `multiline`. The editor scrolls past it. Defaults to 3. */
+    maxLines?: number;
+    /** Fires on every keystroke with the text as typed, like any controlled input. Pair with `onSubmit`: both are required to make the text editable, and `value` has to follow this callback or the field won't accept input. Escape reports the text held when the editor opened, so the owner reverts through this same path. */
+    onChange?: (next: string) => void;
+    /** Fires on Enter or blur with the trimmed `value`, and only when it differs from the text the editor opened with, so a click in and straight back out is silent. The owner decides whether to persist it. */
+    onSubmit?: (next: string) => void;
+    /**
+     * Whether the editor is open, for an owner that holds that state: it opens focused with the text
+     * selected, and asks to close through `onEditingChange`. Omit to let the component hold it.
+     */
+    editing?: boolean;
+    /**
+     * Called when the editor asks to open (a click) or close (commit, Escape, or going disabled).
+     * Required alongside `editing` for the editor to open or close at all.
+     */
+    onEditingChange?: (editing: boolean) => void;
+    /** Locks the text as-is: no edit mode, no commit. Ignored for static text. */
+    disabled?: boolean;
+    /** Field-specific feedback rendered immediately below the text. */
+    error?: React.ReactNode;
+    /** Show the full text in a tooltip on hover when it is cut off. On by default. */
+    truncationTooltip?: boolean;
+    /** Names the editor and its click target. Unused for static text. */
+    'aria-label'?: string;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * Click-to-edit text, such as a name or title: enters on click, submits on Enter or blur, reverts
+ * on Escape. Controlled: the owner holds the text and feeds it back through `value`, which lets it
+ * validate what is being typed and render the message through `error`. Renders static text unless
+ * both `onChange` and `onSubmit` are given. Text that is cut off shows in full in a tooltip.
+ */
+export declare function EditableText({ value, placeholder, size, multiline, maxLines, onChange, onSubmit, editing: editingProp, onEditingChange, disabled, truncationTooltip, error, 'aria-label': ariaLabel, className, 'data-testid': dataTestId, }: EditableTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/editable-text.js

@@ -0,0 +1,217 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { FormFieldError } from "./form-field.js";
+import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { cn } from "../../lib/index.js";
+const useIsomorphicLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
+const stripNewlines = (text)=>text.replace(/\n+/g, ' ');
+const READ_CLASS = {
+    label: 'text-xs font-medium leading-4 text-foreground',
+    lg: 'text-base font-semibold leading-5 tracking-[-0.3px] text-foreground',
+    sm: 'text-xs leading-4 text-foreground-muted'
+};
+const EDIT_CLASS = {
+    label: 'text-xs font-medium leading-4',
+    lg: 'text-base font-semibold leading-5 tracking-[-0.3px]',
+    sm: 'text-xs leading-4'
+};
+const LINE_HEIGHT = {
+    label: 16,
+    lg: 20,
+    sm: 16
+};
+const VERTICAL_PADDING = 4;
+const CLAMP_CLASS = 'line-clamp-[var(--editable-text-lines)] whitespace-pre-line wrap-break-word';
+const INTERACTIVE_CLASS = 'rounded px-1.5 py-0.5 -mx-1.5';
+const EDITOR_SPACING_CLASS = 'rounded px-1.5 py-0.5 -ml-1.5';
+const READ_MAX_WIDTH_CLASS = 'max-w-[calc(100%+--spacing(3))]';
+const ERROR_RING_CLASS = 'ring-1 ring-error';
+function TruncationTooltip({ content, multiline, children }) {
+    const triggerRef = useRef(null);
+    const setTrigger = useCallback((node)=>{
+        triggerRef.current = node;
+    }, []);
+    const [open, setOpen] = useState(false);
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        delayDuration: 700,
+        children: /*#__PURE__*/ jsxs(Tooltip, {
+            open: open,
+            onOpenChange: (next)=>{
+                const node = triggerRef.current;
+                setOpen(next && !!node && (node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight));
+            },
+            children: [
+                /*#__PURE__*/ jsx(TooltipTrigger, {
+                    asChild: true,
+                    ref: setTrigger,
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(TooltipPortal, {
+                    children: /*#__PURE__*/ jsx(TooltipContent, {
+                        className: cn('max-w-80 wrap-break-word', multiline && 'whitespace-pre-line'),
+                        children: content
+                    })
+                })
+            ]
+        })
+    });
+}
+function EditableText({ value, placeholder, size = 'lg', multiline, maxLines = 3, onChange, onSubmit, editing: editingProp, onEditingChange, disabled, truncationTooltip = true, error, 'aria-label': ariaLabel, className, 'data-testid': dataTestId }) {
+    const allowNewlines = true === multiline;
+    const editable = !!onChange && !!onSubmit;
+    const [editingState, setEditingState] = useState(false);
+    const controlled = void 0 !== editingProp;
+    const requested = controlled ? editingProp : editingState;
+    const isEditing = requested && editable && !disabled;
+    const setEditing = useCallback((next)=>{
+        if (!controlled) setEditingState(next);
+        onEditingChange?.(next);
+    }, [
+        controlled,
+        onEditingChange
+    ]);
+    const inputRef = useRef(null);
+    const openedWith = useRef(value);
+    const latestValue = useRef(value);
+    latestValue.current = value;
+    const errorId = `editable-text-${useId().replace(/:/g, '')}-error`;
+    const hasError = !!error;
+    const describedBy = hasError ? errorId : void 0;
+    useIsomorphicLayoutEffect(()=>{
+        if (disabled && requested) setEditing(false);
+    }, [
+        disabled,
+        requested,
+        setEditing
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        if (!isEditing) return;
+        openedWith.current = latestValue.current;
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, [
+        isEditing
+    ]);
+    const cancel = useCallback(()=>{
+        setEditing(false);
+        if (openedWith.current !== value) onChange?.(openedWith.current);
+    }, [
+        value,
+        onChange,
+        setEditing
+    ]);
+    const commit = useCallback(()=>{
+        const next = value.trim();
+        setEditing(false);
+        if (next !== value) onChange?.(next);
+        if (next !== openedWith.current) onSubmit?.(next);
+    }, [
+        value,
+        onChange,
+        onSubmit,
+        setEditing
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if ('Enter' !== e.key || allowNewlines && e.shiftKey) {
+            if ('Escape' === e.key) {
+                e.preventDefault();
+                cancel();
+            }
+        } else {
+            e.preventDefault();
+            commit();
+        }
+        e.stopPropagation();
+    }, [
+        commit,
+        cancel,
+        allowNewlines
+    ]);
+    const editorMaxHeight = multiline ? {
+        maxHeight: maxLines * LINE_HEIGHT[size] + VERTICAL_PADDING
+    } : void 0;
+    const readClampStyle = multiline ? {
+        '--editable-text-lines': maxLines
+    } : void 0;
+    const readClampClass = multiline ? CLAMP_CLASS : 'block truncate';
+    const withTooltip = (trigger)=>truncationTooltip && (value || placeholder) ? /*#__PURE__*/ jsx(TruncationTooltip, {
+            content: value || placeholder,
+            multiline: !!multiline,
+            children: trigger
+        }) : trigger;
+    const message = /*#__PURE__*/ jsx(FormFieldError, {
+        id: errorId,
+        "data-slot": "editable-text-error",
+        className: "-ml-1 mt-1",
+        children: error
+    });
+    if (!editable) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            withTooltip(/*#__PURE__*/ jsx("span", {
+                "data-slot": "editable-text",
+                "data-testid": dataTestId,
+                "aria-describedby": describedBy,
+                style: readClampStyle,
+                className: cn(readClampClass, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && cn(INTERACTIVE_CLASS, ERROR_RING_CLASS), className),
+                children: value || placeholder
+            })),
+            message
+        ]
+    });
+    if (isEditing) {
+        const sharedProps = {
+            'data-slot': 'editable-text-input',
+            'data-testid': dataTestId ? `${dataTestId}-input` : void 0,
+            value,
+            placeholder,
+            'aria-label': ariaLabel,
+            'aria-describedby': describedBy,
+            'aria-errormessage': hasError ? errorId : void 0,
+            'aria-invalid': hasError || void 0,
+            onKeyDown: handleKeyDown,
+            onBlur: commit,
+            className: cn('w-full min-w-0 border-none bg-surface-overlay text-foreground outline-none ring-1', hasError ? 'ring-error' : 'ring-brand', EDITOR_SPACING_CLASS, EDIT_CLASS[size], className)
+        };
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                multiline ? /*#__PURE__*/ jsx("textarea", {
+                    ...sharedProps,
+                    ref: inputRef,
+                    rows: 1,
+                    style: editorMaxHeight,
+                    className: cn(sharedProps.className, 'field-sizing-content max-w-full resize-none overflow-y-auto wrap-break-word'),
+                    onChange: (e)=>onChange?.(allowNewlines ? e.target.value : stripNewlines(e.target.value))
+                }) : /*#__PURE__*/ jsx("input", {
+                    ...sharedProps,
+                    ref: inputRef,
+                    autoComplete: "off",
+                    onChange: (e)=>onChange?.(e.target.value)
+                }),
+                message
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            withTooltip(/*#__PURE__*/ jsx("button", {
+                type: "button",
+                "data-slot": "editable-text",
+                "data-testid": dataTestId,
+                "aria-label": ariaLabel && `${ariaLabel}: ${value || placeholder || ''}`,
+                "aria-describedby": describedBy,
+                "aria-errormessage": hasError ? errorId : void 0,
+                "aria-invalid": hasError || void 0,
+                "aria-disabled": disabled || void 0,
+                onClick: ()=>{
+                    if (disabled) return;
+                    setEditing(true);
+                },
+                style: readClampStyle,
+                className: cn('cursor-text border-none bg-transparent text-left transition hover:bg-surface-overlay', READ_MAX_WIDTH_CLASS, 'aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent', readClampClass, INTERACTIVE_CLASS, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && ERROR_RING_CLASS, className),
+                children: value || placeholder
+            })),
+            message
+        ]
+    });
+}
+export { EditableText };

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

@@ -35,6 +35,7 @@ const external_label_cjs_namespaceObject = require("../label.cjs");
 const external_popover_cjs_namespaceObject = require("../popover.cjs");
 const external_textarea_cjs_namespaceObject = require("../textarea.cjs");
 const external_tooltip_cjs_namespaceObject = require("../tooltip.cjs");
+const external_collapse_cjs_namespaceObject = require("./collapse.cjs");
 const DEFAULT_AI_ASSIST_ACTION_STRINGS = {
     trigger: 'AI assist',
     tooltip: 'Generate with AI',
@@ -84,14 +85,15 @@ function AiAssistAction({ onGenerate, hint, renderContent, disabled, strings })
                         asChild: true,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                             asChild: true,
-                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
                                 type: "button",
+                                variant: "ghost",
+                                size: "3xs",
+                                icon: true,
                                 "aria-label": text.trigger,
                                 disabled: disabled,
-                                className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Sparkles, {
-                                    size: 12
-                                })
+                                className: external_collapse_cjs_namespaceObject.FIELD_ACTION_CLASS,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Sparkles, {})
                             })
                         })
                     }),

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

@@ -6,6 +6,7 @@ import { Label } from "../label.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover.js";
 import { Textarea } from "../textarea.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip.js";
+import { FIELD_ACTION_CLASS } from "./collapse.js";
 const DEFAULT_AI_ASSIST_ACTION_STRINGS = {
     trigger: 'AI assist',
     tooltip: 'Generate with AI',
@@ -55,14 +56,15 @@ function AiAssistAction({ onGenerate, hint, renderContent, disabled, strings })
                         asChild: true,
                         children: /*#__PURE__*/ jsx(PopoverTrigger, {
                             asChild: true,
-                            children: /*#__PURE__*/ jsx("button", {
+                            children: /*#__PURE__*/ jsx(Button, {
                                 type: "button",
+                                variant: "ghost",
+                                size: "3xs",
+                                icon: true,
                                 "aria-label": text.trigger,
                                 disabled: disabled,
-                                className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
-                                children: /*#__PURE__*/ jsx(Sparkles, {
-                                    size: 12
-                                })
+                                className: FIELD_ACTION_CLASS,
+                                children: /*#__PURE__*/ jsx(Sparkles, {})
                             })
                         })
                     }),

package/dist/components/ui/field-actions/collapse.cjs

@@ -25,19 +25,19 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     COLLAPSED_HIDDEN: ()=>COLLAPSED_HIDDEN,
-    COLLAPSED_ICON_PADDING: ()=>COLLAPSED_ICON_PADDING,
-    COLLAPSED_ONLY: ()=>COLLAPSED_ONLY
+    COLLAPSED_ONLY: ()=>COLLAPSED_ONLY,
+    FIELD_ACTION_CLASS: ()=>FIELD_ACTION_CLASS
 });
 const COLLAPSED_HIDDEN = '@max-[259px]:hidden';
-const COLLAPSED_ICON_PADDING = '@max-[259px]:px-1.5';
-const COLLAPSED_ONLY = 'hidden @max-[259px]:block';
+const COLLAPSED_ONLY = 'hidden @max-[259px]:flex';
+const FIELD_ACTION_CLASS = 'text-muted-foreground hover:bg-accent hover:text-foreground [&_svg]:size-3';
 exports.COLLAPSED_HIDDEN = __webpack_exports__.COLLAPSED_HIDDEN;
-exports.COLLAPSED_ICON_PADDING = __webpack_exports__.COLLAPSED_ICON_PADDING;
 exports.COLLAPSED_ONLY = __webpack_exports__.COLLAPSED_ONLY;
+exports.FIELD_ACTION_CLASS = __webpack_exports__.FIELD_ACTION_CLASS;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "COLLAPSED_HIDDEN",
-    "COLLAPSED_ICON_PADDING",
-    "COLLAPSED_ONLY"
+    "COLLAPSED_ONLY",
+    "FIELD_ACTION_CLASS"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/components/ui/field-actions/collapse.d.ts

@@ -1,6 +1,9 @@
 /** Hidden once collapsed, such as an action's text. */
 export declare const COLLAPSED_HIDDEN = "@max-[259px]:hidden";
-/** The tighter padding of an action collapsed to its icon. */
-export declare const COLLAPSED_ICON_PADDING = "@max-[259px]:px-1.5";
 /** Shown only once collapsed. */
-export declare const COLLAPSED_ONLY = "hidden @max-[259px]:block";
+export declare const COLLAPSED_ONLY = "hidden @max-[259px]:flex";
+/**
+ * A header action is a ghost `3xs` Button, the height FormFieldHeader's `min-h-6` row expects, in
+ * the muted tone of the field's other icon buttons. Its icons are 12px.
+ */
+export declare const FIELD_ACTION_CLASS = "text-muted-foreground hover:bg-accent hover:text-foreground [&_svg]:size-3";

package/dist/components/ui/field-actions/collapse.js

@@ -1,4 +1,4 @@
 const COLLAPSED_HIDDEN = '@max-[259px]:hidden';
-const COLLAPSED_ICON_PADDING = '@max-[259px]:px-1.5';
-const COLLAPSED_ONLY = 'hidden @max-[259px]:block';
-export { COLLAPSED_HIDDEN, COLLAPSED_ICON_PADDING, COLLAPSED_ONLY };
+const COLLAPSED_ONLY = 'hidden @max-[259px]:flex';
+const FIELD_ACTION_CLASS = 'text-muted-foreground hover:bg-accent hover:text-foreground [&_svg]:size-3';
+export { COLLAPSED_HIDDEN, COLLAPSED_ONLY, FIELD_ACTION_CLASS };