@wallarm-org/design-system 0.71.5 → 0.72.0

package/dist/components/InlineEdit/InlineEditControl.d.ts

@@ -0,0 +1,14 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type InlineEditContextValue, type InlineEditSubmitMode } from './InlineEditContext';
+export interface InlineEditControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Explicit render-time submit mode for this editor session. Highest
+     * precedence (beats editor registrations and the root prop) — the escape
+     * hatch for custom editors that cannot call useInlineEditSubmitMode.
+     */
+    submitMode?: InlineEditSubmitMode;
+    /** Function children receive the inline-edit context (render-prop). */
+    children?: ReactNode | ((ctx: InlineEditContextValue) => ReactNode);
+}
+export declare const InlineEditControl: FC<InlineEditControlProps>;

package/dist/components/InlineEdit/InlineEditControl.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { useInlineEdit } from "./InlineEditContext.js";
+const FOCUSABLE_SELECTOR = 'input, textarea, select, button, [tabindex]:not([tabindex="-1"])';
+const InlineEditControl = ({ ref, children, className, onKeyDown, onBlur, submitMode: submitModeProp, ...props })=>{
+    const testId = useTestId('control');
+    const ctx = useInlineEdit();
+    const { editing, selectOnFocus, submit, cancel, isCommitPending } = ctx;
+    const submitMode = submitModeProp ?? ctx.submitMode;
+    const divRef = useRef(null);
+    const selectOnFocusRef = useRef(selectOnFocus);
+    selectOnFocusRef.current = selectOnFocus;
+    useEffect(()=>{
+        if (!editing) return;
+        const node = divRef.current;
+        if (!node) return;
+        const focusable = node.querySelector(FOCUSABLE_SELECTOR);
+        if (!focusable) return;
+        focusable.focus();
+        if (selectOnFocusRef.current && (focusable instanceof HTMLInputElement || focusable instanceof HTMLTextAreaElement)) focusable.select();
+    }, [
+        editing
+    ]);
+    const combinedRef = useCallback((node)=>{
+        divRef.current = node;
+        if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    }, [
+        ref
+    ]);
+    if (!editing) return null;
+    const submitsOnEnter = 'enter' === submitMode || 'both' === submitMode;
+    const submitsOnBlur = 'blur' === submitMode || 'both' === submitMode;
+    const handleKeyDown = (event)=>{
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        if ('Escape' === event.key) {
+            event.preventDefault();
+            cancel();
+            return;
+        }
+        if ('Enter' === event.key && submitsOnEnter) {
+            const target = event.target;
+            const isTextarea = 'TEXTAREA' === target.tagName;
+            if (isTextarea && !event.metaKey && !event.ctrlKey) return;
+            event.preventDefault();
+            submit();
+        }
+    };
+    const handleBlur = (event)=>{
+        onBlur?.(event);
+        if (event.defaultPrevented) return;
+        if (event.currentTarget.contains(event.relatedTarget)) return;
+        if (isCommitPending()) return;
+        if (submitsOnBlur) submit();
+        else if ('none' !== submitMode) cancel();
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: combinedRef,
+        "data-testid": testId,
+        "data-slot": "inline-edit-control",
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        className: cn('w-full min-w-0', '-ml-7', '[&_[data-slot=input]]:px-6', '[&_textarea]:px-6', '[&_[data-scope=number-input][data-part=input]]:px-6', '[&_[data-scope=select][data-part=trigger]]:px-6', '[&_div[data-scope=select][data-part=trigger]:has([data-slot=overflow-list])]:pl-0', '[&_[data-slot=input-group-addon]]:px-6', '[&_[data-slot=input-group]>div:not([data-slot])]:pl-0', className),
+        children: 'function' == typeof children ? children(ctx) : children
+    });
+};
+InlineEditControl.displayName = 'InlineEditControl';
+export { InlineEditControl };

package/dist/components/InlineEdit/InlineEditDate.d.ts

@@ -0,0 +1,19 @@
+import type { FC, ReactNode } from 'react';
+export interface InlineEditDateProps {
+    /**
+     * `InlineEditDate` IS the prewired `Calendar` root (day-only:
+     * `closeOnSelect`) — the `DateValue[]` adapter and commit-on-close live
+     * here. `children` are ordinary `Calendar` compound parts
+     * (`CalendarTrigger > DateInput`, `CalendarContent > CalendarBody >
+     * CalendarGrids`) — exactly as you'd compose a standalone `Calendar`. Use
+     * `InlineEditDateTime` for date+time. Wire your own `DateInput`'s
+     * `value`/`onChange` via `useInlineEdit()` plus the `toReactAriaDateValue`/
+     * `toCalendarDateValue` casts from `./dateValueCast` (the two
+     * `@internationalized/date` package copies aren't `instanceof`-compatible).
+     * `Calendar` does not re-provide its own testid cascade, so a `DateInput`
+     * you place inside already resolves `useTestId(...)` from the ambient
+     * `InlineEdit` root — no extra wiring needed.
+     */
+    children: ReactNode;
+}
+export declare const InlineEditDate: FC<InlineEditDateProps>;

package/dist/components/InlineEdit/InlineEditDate.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Calendar } from "../Calendar/index.js";
+import { useInlineEdit, useInlineEditSubmitMode } from "./InlineEditContext.js";
+const InlineEditDate = ({ children })=>{
+    const { value, setValue, submit } = useInlineEdit();
+    useInlineEditSubmitMode('none');
+    return /*#__PURE__*/ jsx(Calendar, {
+        type: "single",
+        defaultOpen: true,
+        closeOnSelect: true,
+        value: value ? [
+            value
+        ] : [],
+        onChange: (next)=>setValue(next[0] ?? null),
+        onOpenChange: (open)=>{
+            if (!open) submit();
+        },
+        children: children
+    });
+};
+InlineEditDate.displayName = 'InlineEditDate';
+export { InlineEditDate };

package/dist/components/InlineEdit/InlineEditDateTime.d.ts

@@ -0,0 +1,21 @@
+import type { FC, ReactNode } from 'react';
+export interface InlineEditDateTimeProps {
+    /**
+     * `InlineEditDateTime` IS the prewired `Calendar` root (date+time:
+     * `showTime`, `closeOnSelect={false}`) — the `DateValue[]` adapter and
+     * commit-on-close live here. `children` are ordinary `Calendar` compound
+     * parts (`CalendarTrigger > DateInput`, `CalendarContent > CalendarBody >
+     * CalendarInputHeader > CalendarGrids`) — exactly as you'd compose a
+     * standalone `Calendar`. Use `InlineEditDate` for day-only. Wire your own
+     * `DateInput`'s `value`/`onChange` via `useInlineEdit()` plus the
+     * `toReactAriaDateValue`/`toCalendarDateValue`/`withMinuteGranularity`
+     * helpers from `./dateValueCast` (minute-granularity `DateInput` needs a
+     * promoted day-only value, and the two `@internationalized/date` package
+     * copies aren't `instanceof`-compatible). `Calendar` does not re-provide
+     * its own testid cascade, so a `DateInput` you place inside already
+     * resolves `useTestId(...)` from the ambient `InlineEdit` root — no extra
+     * wiring needed.
+     */
+    children: ReactNode;
+}
+export declare const InlineEditDateTime: FC<InlineEditDateTimeProps>;

package/dist/components/InlineEdit/InlineEditDateTime.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { Calendar } from "../Calendar/index.js";
+import { useInlineEdit, useInlineEditSubmitMode } from "./InlineEditContext.js";
+const InlineEditDateTime = ({ children })=>{
+    const { value, setValue, submit } = useInlineEdit();
+    useInlineEditSubmitMode('none');
+    return /*#__PURE__*/ jsx(Calendar, {
+        type: "single",
+        defaultOpen: true,
+        showTime: true,
+        closeOnSelect: false,
+        value: value ? [
+            value
+        ] : [],
+        onChange: (next)=>setValue(next[0] ?? null),
+        onOpenChange: (open)=>{
+            if (!open) submit();
+        },
+        children: children
+    });
+};
+InlineEditDateTime.displayName = 'InlineEditDateTime';
+export { InlineEditDateTime };

package/dist/components/InlineEdit/InlineEditError.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface InlineEditErrorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const InlineEditError: FC<InlineEditErrorProps>;

package/dist/components/InlineEdit/InlineEditError.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OctagonAlert } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+import { useInlineEdit } from "./InlineEditContext.js";
+const InlineEditError = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('error');
+    const { invalid, error } = useInlineEdit();
+    const message = children ?? error;
+    if (!invalid || !message) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "inline-edit-error",
+        className: cn('flex items-center gap-4 pt-4', className),
+        children: [
+            /*#__PURE__*/ jsx(OctagonAlert, {
+                size: "md",
+                className: "shrink-0 text-icon-danger"
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                color: "danger",
+                children: message
+            })
+        ]
+    });
+};
+InlineEditError.displayName = 'InlineEditError';
+export { InlineEditError };

package/dist/components/InlineEdit/InlineEditInput.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { type InputProps } from '../Input';
+export type InlineEditInputProps = Omit<InputProps, 'value' | 'onChange' | 'error'>;
+export declare const InlineEditInput: FC<InlineEditInputProps>;

package/dist/components/InlineEdit/InlineEditInput.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { Input } from "../Input/index.js";
+import { useInlineEdit } from "./InlineEditContext.js";
+const InlineEditInput = ({ size = 'small', 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('input', testIdProp);
+    const { value, setValue, invalid } = useInlineEdit();
+    return /*#__PURE__*/ jsx(Input, {
+        ...props,
+        "data-testid": testId,
+        value: value ?? '',
+        onChange: (event)=>setValue(event.target.value),
+        error: invalid,
+        size: size
+    });
+};
+InlineEditInput.displayName = 'InlineEditInput';
+export { InlineEditInput };

package/dist/components/InlineEdit/InlineEditNumber.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { type NumberInputProps } from '../NumberInput';
+export type InlineEditNumberProps = Omit<NumberInputProps, 'value' | 'onValueChange' | 'error'>;
+/**
+ * Analytics closed-target gap: `NumberInput` spreads consumer props onto its
+ * Ark `Root` wrapper rather than the inner `<input>`, so `data-analytics-*`
+ * land on the wrapper (click analytics still resolve via `closest()`, but the
+ * attribute is not on the real focusable node). The durable fix is to forward
+ * those attributes to the input inside `NumberInput`. See ./ANALYTICS_GAPS.md.
+ */
+export declare const InlineEditNumber: FC<InlineEditNumberProps>;

package/dist/components/InlineEdit/InlineEditNumber.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { NumberInput } from "../NumberInput/index.js";
+import { useInlineEdit } from "./InlineEditContext.js";
+const InlineEditNumber = ({ size = 'small', 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('input', testIdProp);
+    const { value, setValue, invalid } = useInlineEdit();
+    return /*#__PURE__*/ jsx(NumberInput, {
+        ...props,
+        "data-testid": testId,
+        value: value ?? '',
+        onValueChange: (details)=>setValue(details.value),
+        error: invalid,
+        size: size
+    });
+};
+InlineEditNumber.displayName = 'InlineEditNumber';
+export { InlineEditNumber };

package/dist/components/InlineEdit/InlineEditPreview.d.ts

@@ -0,0 +1,23 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface InlineEditPreviewProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Tooltip shown on hover/focus while the value is editable. Defaults to
+     * `'Edit'`. Pass `null` to disable the tooltip.
+     */
+    tooltip?: ReactNode;
+    /**
+     * Clamp the read-mode value to this many lines (with an ellipsis) instead of
+     * the default single-line truncation. Use for multi-line values (textarea).
+     * Applies to the default (no-parts) composition; when composing
+     * `InlineEditPreviewValue` explicitly, set `lineClamp` on it directly.
+     */
+    lineClamp?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Plain content auto-wraps into `InlineEditPreviewValue` + a default
+     * `InlineEditPreviewIcon` (pencil). Compose `InlineEditPreviewValue`/
+     * `InlineEditPreviewIcon` explicitly for a custom trailing icon.
+     */
+    children?: ReactNode;
+}
+export declare const InlineEditPreview: FC<InlineEditPreviewProps>;

package/dist/components/InlineEdit/InlineEditPreview.js

@@ -0,0 +1,105 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { inlineEditPreviewVariants } from "./classes.js";
+import { useInlineEdit } from "./InlineEditContext.js";
+import { InlineEditPreviewIcon } from "./InlineEditPreviewIcon.js";
+import { InlineEditPreviewValue } from "./InlineEditPreviewValue.js";
+const isInlineEditPreviewValue = (child)=>/*#__PURE__*/ isValidElement(child) && child.type?.displayName === InlineEditPreviewValue.displayName;
+const isInlineEditPreviewIcon = (child)=>/*#__PURE__*/ isValidElement(child) && child.type?.displayName === InlineEditPreviewIcon.displayName;
+const InlineEditPreview = ({ ref, tooltip = 'Edit', lineClamp, children, className, onClick, onFocus, onKeyDown, onPointerMove, ...props })=>{
+    const testId = useTestId('preview');
+    const { editing, status, invalid, disabled, readOnly, activationMode, edit } = useInlineEdit();
+    const pointerRef = useRef({
+        x: 0,
+        y: 0
+    });
+    if (editing) return null;
+    const isLoading = 'loading' === status;
+    const activatable = !disabled && !readOnly && !isLoading && 'none' !== activationMode;
+    const childArray = Children.toArray(children);
+    const valueChild = childArray.find(isInlineEditPreviewValue);
+    const hasExplicitParts = childArray.some((child)=>isInlineEditPreviewValue(child) || isInlineEditPreviewIcon(child));
+    const effectiveLineClamp = hasExplicitParts ? valueChild?.props.lineClamp : lineClamp;
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        if (activatable && 'click' === activationMode) edit();
+    };
+    const handleFocus = (event)=>{
+        onFocus?.(event);
+        if (event.defaultPrevented) return;
+        if (activatable && 'focus' === activationMode) edit();
+    };
+    const handleKeyDown = (event)=>{
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        if (activatable && ('Enter' === event.key || ' ' === event.key)) {
+            event.preventDefault();
+            edit();
+        }
+    };
+    const handlePointerMove = (event)=>{
+        onPointerMove?.(event);
+        pointerRef.current = {
+            x: event.clientX,
+            y: event.clientY
+        };
+    };
+    const tooltipPositioning = {
+        placement: 'bottom-start',
+        offset: {
+            mainAxis: 24,
+            crossAxis: 0
+        },
+        getAnchorRect: ()=>({
+                x: pointerRef.current.x,
+                y: pointerRef.current.y,
+                width: 0,
+                height: 0
+            })
+    };
+    const target = /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "inline-edit-preview",
+        role: activatable ? 'button' : void 0,
+        tabIndex: activatable ? 0 : void 0,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onPointerMove: handlePointerMove,
+        className: cn(inlineEditPreviewVariants({
+            multiline: Boolean(effectiveLineClamp),
+            activatable,
+            invalid: activatable && invalid
+        }), className),
+        children: hasExplicitParts ? children : /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(InlineEditPreviewValue, {
+                    lineClamp: lineClamp,
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(InlineEditPreviewIcon, {})
+            ]
+        })
+    });
+    if (activatable && null != tooltip) return /*#__PURE__*/ jsxs(Tooltip, {
+        positioning: tooltipPositioning,
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: target
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                children: tooltip
+            })
+        ]
+    });
+    return target;
+};
+InlineEditPreview.displayName = 'InlineEditPreview';
+export { InlineEditPreview };

package/dist/components/InlineEdit/InlineEditPreviewIcon.d.ts

@@ -0,0 +1,12 @@
+import type { FC, ReactNode, Ref } from 'react';
+export interface InlineEditPreviewIconProps {
+    ref?: Ref<HTMLSpanElement>;
+    /** Idle-state icon shown on hover/focus while the value is editable. Defaults to a pencil. */
+    children?: ReactNode;
+}
+/**
+ * Trailing icon area of `InlineEditPreview`: while a commit is in flight it
+ * shows a spinner, right after a successful commit a success check, and
+ * otherwise the idle icon (only while the field is actually editable).
+ */
+export declare const InlineEditPreviewIcon: FC<InlineEditPreviewIconProps>;

package/dist/components/InlineEdit/InlineEditPreviewIcon.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { Check, Pencil } from "../../icons/index.js";
+import { useTestId } from "../../utils/testId.js";
+import { Loader } from "../Loader/index.js";
+import { useInlineEdit } from "./InlineEditContext.js";
+const InlineEditPreviewIcon = ({ ref, children = /*#__PURE__*/ jsx(Pencil, {
+    size: "md"
+}) })=>{
+    const testId = useTestId('preview-icon');
+    const { status, disabled, readOnly, activationMode } = useInlineEdit();
+    const isLoading = 'loading' === status;
+    const activatable = !disabled && !readOnly && !isLoading && 'none' !== activationMode;
+    if (isLoading) return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "inline-edit-preview-icon",
+        className: "inline-flex items-center",
+        children: /*#__PURE__*/ jsx(Loader, {
+            type: "circle",
+            size: "md"
+        })
+    });
+    if ('saved' === status) return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "inline-edit-preview-icon",
+        className: "inline-flex items-center",
+        children: /*#__PURE__*/ jsx(Check, {
+            size: "md",
+            className: "text-icon-success"
+        })
+    });
+    if (!activatable) return null;
+    return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "inline-edit-preview-icon",
+        className: "inline-flex items-center text-icon-secondary opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100",
+        children: children
+    });
+};
+InlineEditPreviewIcon.displayName = 'InlineEditPreviewIcon';
+export { InlineEditPreviewIcon };

package/dist/components/InlineEdit/InlineEditPreviewValue.d.ts

@@ -0,0 +1,11 @@
+import type { FC, ReactNode, Ref } from 'react';
+export interface InlineEditPreviewValueProps {
+    ref?: Ref<HTMLSpanElement>;
+    /**
+     * Clamp the read-mode value to this many lines (with an ellipsis) instead of
+     * the default single-line truncation. Use for multi-line values (textarea).
+     */
+    lineClamp?: 1 | 2 | 3 | 4 | 5 | 6;
+    children?: ReactNode;
+}
+export declare const InlineEditPreviewValue: FC<InlineEditPreviewValueProps>;

package/dist/components/InlineEdit/InlineEditPreviewValue.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { useInlineEdit } from "./InlineEditContext.js";
+const LINE_CLAMP_CLASS = {
+    1: 'line-clamp-1',
+    2: 'line-clamp-2',
+    3: 'line-clamp-3',
+    4: 'line-clamp-4',
+    5: 'line-clamp-5',
+    6: 'line-clamp-6'
+};
+const InlineEditPreviewValue = ({ ref, lineClamp, children })=>{
+    const testId = useTestId('preview-value');
+    const { status } = useInlineEdit();
+    return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "inline-edit-preview-value",
+        className: cn('min-w-0 flex-1', lineClamp ? LINE_CLAMP_CLASS[lineClamp] : 'truncate', 'loading' === status && 'opacity-50'),
+        children: children
+    });
+};
+InlineEditPreviewValue.displayName = 'InlineEditPreviewValue';
+export { InlineEditPreviewValue };

package/dist/components/InlineEdit/InlineEditSelect.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { ListCollection } from '@ark-ui/react/collection';
+import { type SelectDataItem } from '../Select';
+export interface InlineEditSelectProps {
+    /**
+     * Options; the collection is built internally (PaginationPageSize
+     * precedent). Provide exactly one of `items` / `collection`.
+     */
+    items?: SelectDataItem[];
+    /**
+     * A prebuilt collection (e.g. built once upstream, or with custom
+     * filtering/sorting). Provide exactly one of `items` / `collection` — a
+     * dev-only warning fires otherwise.
+     */
+    collection?: ListCollection<SelectDataItem>;
+    multiple?: boolean;
+    /**
+     * `InlineEditSelect` IS the prewired `Select` root — the draft binding,
+     * `defaultOpen`, and commit-on-close all live here. `children` are
+     * ordinary `Select` compound parts (`SelectButton`/`SelectInput`,
+     * `SelectPositioner > SelectContent > SelectOption…`) — exactly as you'd
+     * compose a standalone `Select`. `SelectButton` already cascades its own
+     * testid slot from this root with zero extra wiring (`{base}--button`).
+     * `SelectOption` cascades too, but nested one level further: `SelectContent`
+     * re-provides the cascade scoped to its own `content` slot (a `ScrollArea`
+     * implementation detail — see its own testid comment), so bare options
+     * resolve under `{base}--content--option` rather than `{base}--option`.
+     * That cascaded id also has no per-item disambiguation (every option in a
+     * collection resolves to the same testid) — pass a per-item `data-testid`
+     * override if a test needs to address one option by id rather than by text.
+     * `SelectInput` (the multiple-select trigger) does not cascade on its own —
+     * pass it `data-testid` explicitly if you need one.
+     */
+    children: ReactNode;
+}
+export declare const InlineEditSelect: {
+    ({ items, collection, multiple, children, }: InlineEditSelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/InlineEdit/InlineEditSelect.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { useTestId } from "../../utils/testId.js";
+import { Select, createListCollection } from "../Select/index.js";
+import { useInlineEdit, useInlineEditSubmitMode } from "./InlineEditContext.js";
+const InlineEditSelect = ({ items, collection, multiple = false, children })=>{
+    const testId = useTestId();
+    const { value, setValue, submit } = useInlineEdit();
+    useInlineEditSubmitMode('none');
+    const collectionFromItems = useMemo(()=>createListCollection({
+            items: items ?? []
+        }), [
+        items
+    ]);
+    useEffect(()=>{
+        if ('production' === process.env.NODE_ENV) return;
+        const hasItems = void 0 !== items;
+        const hasCollection = void 0 !== collection;
+        if (hasItems === hasCollection) console.warn(`InlineEditSelect: provide exactly one of \`items\` or \`collection\` (got ${hasItems && hasCollection ? 'both' : 'neither'}).`);
+    }, [
+        items,
+        collection
+    ]);
+    const resolvedCollection = collection ?? collectionFromItems;
+    const selected = Array.isArray(value) ? value : 'string' == typeof value && '' !== value ? [
+        value
+    ] : [];
+    return /*#__PURE__*/ jsx(Select, {
+        "data-testid": testId,
+        defaultOpen: true,
+        collection: resolvedCollection,
+        multiple: multiple,
+        value: selected,
+        onValueChange: (details)=>setValue(details.value),
+        onOpenChange: (details)=>{
+            if (!details.open) submit();
+        },
+        children: children
+    });
+};
+InlineEditSelect.displayName = 'InlineEditSelect';
+export { InlineEditSelect };

package/dist/components/InlineEdit/InlineEditTextarea.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { type TextareaProps } from '../Textarea';
+export type InlineEditTextareaProps = Omit<TextareaProps, 'value' | 'onChange' | 'error'>;
+export declare const InlineEditTextarea: FC<InlineEditTextareaProps>;

package/dist/components/InlineEdit/InlineEditTextarea.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { Textarea } from "../Textarea/index.js";
+import { useInlineEdit } from "./InlineEditContext.js";
+const InlineEditTextarea = ({ size = 'small', 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('input', testIdProp);
+    const { value, setValue, invalid } = useInlineEdit();
+    return /*#__PURE__*/ jsx(Textarea, {
+        ...props,
+        "data-testid": testId,
+        value: value ?? '',
+        onChange: (event)=>setValue(event.target.value),
+        error: invalid,
+        size: size
+    });
+};
+InlineEditTextarea.displayName = 'InlineEditTextarea';
+export { InlineEditTextarea };

package/dist/components/InlineEdit/InlineEditTime.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import { type TimeInputProps } from '../TimeInput';
+export type InlineEditTimeProps = Omit<TimeInputProps, 'value' | 'onChange'>;
+/**
+ * Commits on blur — time pickers have no discrete "selection complete" event.
+ * Safe because the time dropdown is rendered inline (absolute, non-portaled)
+ * and its rows preventDefault() on mousedown, so focus never leaves the
+ * control subtree; a future portaled TimeDropdown would need re-evaluation.
+ * Clipping ancestors need `overflow-visible` (automatic inside
+ * AttributeValue; standalone hosts own it).
+ */
+export declare const InlineEditTime: FC<InlineEditTimeProps>;

package/dist/components/InlineEdit/InlineEditTime.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { TimeInput } from "../TimeInput/index.js";
+import { useInlineEdit, useInlineEditSubmitMode } from "./InlineEditContext.js";
+const InlineEditTime = ({ 'data-testid': testIdProp, granularity = 'minute', showTimeDropdown = true, showIcon = false, size = 'small', ...props })=>{
+    const testId = useTestId('input', testIdProp);
+    const { value, setValue } = useInlineEdit();
+    useInlineEditSubmitMode('blur');
+    return /*#__PURE__*/ jsx(TimeInput, {
+        ...props,
+        "data-testid": testId,
+        granularity: granularity,
+        showTimeDropdown: showTimeDropdown,
+        showIcon: showIcon,
+        size: size,
+        value: value ?? null,
+        onChange: (v)=>setValue(v)
+    });
+};
+InlineEditTime.displayName = 'InlineEditTime';
+export { InlineEditTime };

package/dist/components/InlineEdit/classes.d.ts

@@ -0,0 +1,5 @@
+export declare const inlineEditPreviewVariants: (props?: ({
+    multiline?: boolean | null | undefined;
+    activatable?: boolean | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;