@wallarm-org/design-system 0.71.5 → 0.72.0

package/README.md

@@ -41,8 +41,6 @@ export const App = () => {
 /* App.css */
 @import 'tailwindcss';
 @import 'tw-animate-css';
-@import 'non.geist';
-@import 'non.geist/mono';
 @import '@wallarm-org/design-system/theme';
 
 body {
@@ -56,7 +54,7 @@ body {
 - **React 19** - Latest React version
 - **TypeScript** - Full type safety
 - **Tailwind CSS v4** - Modern styling system
-- **Geist font** - Modern typography (non.geist)
+- **Geist font** - Modern typography (bundled, self-hosted)
 - **Animations** - Built-in animations (tw-animate-css)
 - **Theming** - Light and dark themes
 - **Accessibility** - ARIA compliance

package/dist/components/Attribute/AttributeValue.js

@@ -18,7 +18,7 @@ const AttributeValue = ({ ref, children, className, ...props })=>{
         ref: ref,
         "data-testid": testId,
         "data-slot": "attribute-value",
-        className: cn('flex items-center', isHorizontal ? 'flex-1 min-w-0 py-4 truncate' : 'pt-4 min-h-[28px]', className),
+        className: cn('flex items-center', '[&_[data-slot=inline-edit-preview]]:-my-4', 'has-[[data-slot=inline-edit]]:overflow-visible', isHorizontal ? 'flex-1 min-w-0 py-4 truncate' : 'pt-4 min-h-[28px]', className),
         children: showPlaceholder ? /*#__PURE__*/ jsx(Text, {
             size: "sm",
             color: "secondary",

package/dist/components/Calendar/Calendar.js

@@ -3,7 +3,8 @@ import { useCallback } from "react";
 import { DatePicker } from "@ark-ui/react";
 import { CalendarDate, endOfMonth, getLocalTimeZone, startOfMonth, today } from "@internationalized/date";
 import { CalendarProvider } from "./CalendarContext.js";
-const toDateValue = (date)=>date;
+import { toDateValue } from "./dateValue.js";
+import { useCalendarTime } from "./useCalendarTime.js";
 const getThisMonthRange = ()=>{
     const now = today(getLocalTimeZone());
     return [
@@ -115,6 +116,13 @@ const DEFAULT_RANGE_PRESETS = [
 const Calendar = ({ type = 'single', showTime = false, showKeyboardHints = true, value, defaultValue, onChange, minDate, maxDate, isDateUnavailable, disallowDisabledDatesInRange = false, open, defaultOpen, onOpenChange, closeOnSelect = true, readonly = false, focusedValue, children })=>{
     const isRange = 'range' === type;
     const numOfMonths = isRange ? 2 : 1;
+    const { timeRef, commitValue } = useCalendarTime({
+        showTime,
+        isRange,
+        value,
+        defaultValue,
+        onChange
+    });
     const hasUnavailableDateInRange = useCallback((start, end)=>{
         if (!isDateUnavailable) return false;
         let current = new CalendarDate(start.year, start.month, start.day);
@@ -143,9 +151,9 @@ const Calendar = ({ type = 'single', showTime = false, showKeyboardHints = true,
             const [start, end] = newValue;
             if (start && end && hasUnavailableDateInRange(start, end)) return;
         }
-        onChange?.(newValue);
+        commitValue(newValue);
     }, [
-        onChange,
+        commitValue,
         disallowDisabledDatesInRange,
         isRange,
         hasUnavailableDateInRange
@@ -161,7 +169,9 @@ const Calendar = ({ type = 'single', showTime = false, showKeyboardHints = true,
         isRange,
         showKeyboardHints,
         showTime,
-        readonly
+        readonly,
+        timeRef,
+        commitValue
     };
     return /*#__PURE__*/ jsx(DatePicker.Root, {
         selectionMode: isRange ? 'range' : 'single',

package/dist/components/Calendar/CalendarContext.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
-import type { CalendarType } from './types';
+import { type ReactNode, type RefObject } from 'react';
+import type { CalendarType, DateValue } from './types';
 export interface CalendarContextValue {
     /** Calendar type: 'single' for one month, 'range' for two months (date range selection) */
     type: CalendarType;
@@ -11,6 +11,23 @@ export interface CalendarContextValue {
     showTime: boolean;
     /** Whether calendar is readonly (display only, no selection) */
     readonly: boolean;
+    /**
+     * Last-known time-of-day, owned by `Calendar`. In `showTime` mode the grid
+     * only produces date-only values; this ref carries the hour/minute so they
+     * survive a day change and so `Calendar`'s `onChange` can emit a full
+     * `CalendarDateTime`. Undefined outside a `Calendar`.
+     */
+    timeRef?: RefObject<{
+        hour: number;
+        minute: number;
+    }>;
+    /**
+     * Push a value straight to the consumer `onChange`, bypassing Ark's machine.
+     * Ark's DatePicker dedupes its value by date (year/month/day) and silently
+     * drops a same-date, time-only change, so the `showTime` header uses this to
+     * commit a time edit. Undefined outside a `Calendar`.
+     */
+    commitValue?: (value: DateValue[]) => void;
 }
 export interface CalendarProviderProps {
     children: ReactNode;

package/dist/components/Calendar/CalendarHeader.js

@@ -12,6 +12,7 @@ import { Tooltip } from "../Tooltip/index.js";
 import { TooltipContent } from "../Tooltip/TooltipContent.js";
 import { TooltipTrigger } from "../Tooltip/TooltipTrigger.js";
 import { useCalendarContext } from "./CalendarContext.js";
+import { toDateValue } from "./dateValue.js";
 const CalendarHeader = ({ showArrows = true, showJumpToToday = false, visibleRangeText: visibleRangeTextProp })=>{
     const { isRange, readonly } = useCalendarContext();
     const effectiveShowArrows = showArrows && !readonly;
@@ -60,7 +61,7 @@ const CalendarHeader = ({ showArrows = true, showJumpToToday = false, visibleRan
                                                         size: "small",
                                                         "aria-label": "Jump to today",
                                                         onClick: ()=>{
-                                                            api.setFocusedValue(todayDate);
+                                                            api.setFocusedValue(toDateValue(todayDate));
                                                         },
                                                         children: /*#__PURE__*/ jsx(JumpToTodayIcon, {
                                                             size: "md"

package/dist/components/Calendar/CalendarInputHeader.js

@@ -1,28 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import { useCallback, useReducer } from "react";
 import { DatePicker } from "@ark-ui/react";
-import { CalendarDateTime } from "@internationalized/date";
 import { cn } from "../../utils/cn.js";
 import { DateInput } from "../DateInput/index.js";
 import { useCalendarContext } from "./CalendarContext.js";
-const toReactAriaDateValue = (date)=>{
-    if (!date) return null;
-    return date;
-};
-const toArkDateValue = (date)=>{
-    if (!date) return;
-    return date;
-};
-const withTime = (value, time)=>{
-    if (!value) return null;
-    if ('hour' in value) return value;
-    return new CalendarDateTime(value.year, value.month, value.day, time.hour, time.minute);
-};
-const SingleDateInputInner = ({ api, readonly, showTime })=>{
-    const [time, setTime] = useState({
-        hour: 0,
-        minute: 0
-    });
+import { sameDate, toArkDateValue, toReactAriaDateValue, withTime } from "./dateValue.js";
+const SingleDateInputInner = ({ api, readonly, showTime, timeRef, commitValue })=>{
+    const [, bumpTime] = useReducer((n)=>n + 1, 0);
     const handleChange = useCallback((newValue)=>{
         const arkValue = toArkDateValue(newValue);
         if (arkValue) api.setValue([
@@ -33,20 +17,34 @@ const SingleDateInputInner = ({ api, readonly, showTime })=>{
         api
     ]);
     const handleDateTimeChange = useCallback((newValue)=>{
-        if (newValue && 'hour' in newValue) setTime({
+        if (newValue && 'hour' in newValue && timeRef) timeRef.current = {
             hour: newValue.hour,
             minute: newValue.minute
-        });
-        handleChange(newValue);
+        };
+        if (newValue && sameDate(api.value[0], newValue)) {
+            const arkValue = toArkDateValue(newValue);
+            if (arkValue) commitValue?.([
+                arkValue
+            ]);
+            bumpTime();
+        } else handleChange(newValue);
     }, [
-        handleChange
+        api,
+        handleChange,
+        timeRef,
+        commitValue
     ]);
     const inputValue = toReactAriaDateValue(api.value[0]);
+    const time = timeRef?.current ?? {
+        hour: 0,
+        minute: 0
+    };
+    const dateTimeValue = inputValue ? toReactAriaDateValue(withTime(inputValue, time)) : null;
     return /*#__PURE__*/ jsx("div", {
         className: "flex flex-1",
         onKeyDown: (e)=>e.stopPropagation(),
         children: showTime ? /*#__PURE__*/ jsx(DateInput, {
-            value: withTime(inputValue, time),
+            value: dateTimeValue,
             onChange: handleDateTimeChange,
             readOnly: readonly,
             granularity: "minute",
@@ -121,7 +119,7 @@ const RangeDateInputInner = ({ api, readonly })=>{
     });
 };
 const CalendarInputHeader = ({ className })=>{
-    const { isRange, readonly, showTime } = useCalendarContext();
+    const { isRange, readonly, showTime, timeRef, commitValue } = useCalendarContext();
     return /*#__PURE__*/ jsx("div", {
         className: cn('flex flex-1 items-center', 'pt-20 pb-4 px-20', className),
         children: /*#__PURE__*/ jsx(DatePicker.Context, {
@@ -131,7 +129,9 @@ const CalendarInputHeader = ({ className })=>{
                 }) : /*#__PURE__*/ jsx(SingleDateInputInner, {
                     api: api,
                     readonly: readonly,
-                    showTime: showTime
+                    showTime: showTime,
+                    timeRef: timeRef,
+                    commitValue: commitValue
                 })
         })
     });

package/dist/components/Calendar/dateValue.d.ts

@@ -0,0 +1,18 @@
+import type { DateValue as ReactAriaDateValue } from '@react-aria/datepicker';
+import type { DateValue } from './types';
+type DateParts = {
+    year: number;
+    month: number;
+    day: number;
+};
+export declare const toDateValue: <T>(date: T) => DateValue;
+export declare const toReactAriaDateValue: (date: DateValue | undefined) => ReactAriaDateValue | null;
+export declare const toArkDateValue: (date: ReactAriaDateValue | null | undefined) => DateValue | undefined;
+/** Build a `CalendarDateTime` from `date`'s day and `time`; any time on `date` is ignored. */
+export declare const withTime: (date: DateParts, time: {
+    hour: number;
+    minute: number;
+}) => DateValue;
+/** True when both values fall on the same calendar day. */
+export declare const sameDate: (a: DateParts | null | undefined, b: DateParts | null | undefined) => boolean;
+export {};

package/dist/components/Calendar/dateValue.js

@@ -0,0 +1,7 @@
+import { CalendarDateTime } from "@internationalized/date";
+const toDateValue = (date)=>date;
+const toReactAriaDateValue = (date)=>date ? date : null;
+const toArkDateValue = (date)=>date ? date : void 0;
+const withTime = (date, time)=>toDateValue(new CalendarDateTime(date.year, date.month, date.day, time.hour, time.minute));
+const sameDate = (a, b)=>!!a && !!b && a.year === b.year && a.month === b.month && a.day === b.day;
+export { sameDate, toArkDateValue, toDateValue, toReactAriaDateValue, withTime };

package/dist/components/Calendar/useCalendarTime.d.ts

@@ -0,0 +1,25 @@
+import { type RefObject } from 'react';
+import type { DateValue } from './types';
+interface UseCalendarTimeParams {
+    showTime: boolean;
+    isRange: boolean;
+    value?: DateValue[];
+    defaultValue?: DateValue[];
+    onChange?: (value: DateValue[]) => void;
+}
+interface UseCalendarTime {
+    /** Last-known time-of-day; read synchronously when promoting grid picks. */
+    timeRef: RefObject<{
+        hour: number;
+        minute: number;
+    }>;
+    /** Emit to the consumer, promoting date-only values to `CalendarDateTime`. */
+    commitValue: (value: DateValue[]) => void;
+}
+/**
+ * Time handling for single `showTime` mode. The grid emits date-only values and
+ * Ark keys its value by date, so time must be tracked here and merged in before
+ * reaching `onChange`.
+ */
+export declare const useCalendarTime: ({ showTime, isRange, value, defaultValue, onChange, }: UseCalendarTimeParams) => UseCalendarTime;
+export {};

package/dist/components/Calendar/useCalendarTime.js

@@ -0,0 +1,38 @@
+import { useCallback, useRef } from "react";
+import { withTime } from "./dateValue.js";
+const useCalendarTime = ({ showTime, isRange, value, defaultValue, onChange })=>{
+    const timeRef = useRef({
+        hour: 0,
+        minute: 0
+    });
+    if (showTime && !isRange) {
+        const current = (value ?? defaultValue)?.[0];
+        if (current && 'hour' in current) timeRef.current = {
+            hour: current.hour,
+            minute: current.minute
+        };
+    }
+    const withTrackedTime = useCallback((date)=>{
+        if ('hour' in date) {
+            timeRef.current = {
+                hour: date.hour,
+                minute: date.minute
+            };
+            return date;
+        }
+        return withTime(date, timeRef.current);
+    }, []);
+    const commitValue = useCallback((next)=>{
+        onChange?.(showTime && !isRange ? next.map(withTrackedTime) : next);
+    }, [
+        showTime,
+        isRange,
+        withTrackedTime,
+        onChange
+    ]);
+    return {
+        timeRef,
+        commitValue
+    };
+};
+export { useCalendarTime };

package/dist/components/DropdownMenu/DropdownMenuInput.d.ts

@@ -1,5 +1,5 @@
 import type { FC, InputHTMLAttributes, Ref } from 'react';
-interface DropdownMenuInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+interface DropdownMenuInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
     ref?: Ref<HTMLInputElement>;
 }
 export declare const DropdownMenuInput: FC<DropdownMenuInputProps>;

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

@@ -0,0 +1,52 @@
+import { type ReactElement, type ReactNode, type Ref } from 'react';
+import type { TestableProps } from '../../utils/testId';
+import { type InlineEditActivationMode, type InlineEditStatus, type InlineEditSubmitMode } from './InlineEditContext';
+export interface InlineEditProps<T = unknown> extends TestableProps {
+    value?: T;
+    defaultValue?: T;
+    onValueChange?: (value: T) => void;
+    onValueCommit?: (value: T) => void | Promise<unknown>;
+    onValueRevert?: (value: T) => void;
+    /**
+     * Commit guard. Called on every submit (Enter, blur, popover close,
+     * confirm button) before `onValueCommit`, with the draft to be committed
+     * and the current committed value. Only an explicit `false` (or a promise
+     * resolving to `false`) blocks the commit: the field silently stays in
+     * edit mode with the draft. Any other result — `true`, `undefined`, no
+     * return — lets the commit proceed. A rejection or a synchronous throw is
+     * treated like a commit failure: status `error`, message from the error,
+     * field stays in edit mode.
+     *
+     * While the guard's promise is pending the edit session is held: duplicate
+     * submits are suppressed, blur neither submits nor cancels, and the field
+     * shows no status (`idle` — the consumer's confirmation UI is the
+     * feedback). Escape still cancels; a late resolution after cancel is
+     * dropped. The value committed on `true` is exactly the `value` argument
+     * the guard received; if the draft changed while the guard was pending,
+     * the resolution is dropped and the field stays in edit mode.
+     *
+     * Guards must settle via non-blocking UI (a promise resolved by dialog
+     * buttons). Synchronous blocking dialogs (`window.confirm`) are
+     * unsupported with submitMode 'blur'/'both' (the queued blur re-prompts).
+     * The guard's owner never gets its consumer UI closed by the DS — treat
+     * the dialog's own buttons as the source of truth for closing it.
+     */
+    onBeforeValueCommit?: (value: T, committedValue: T) => boolean | void | Promise<boolean | void>;
+    edit?: boolean;
+    defaultEdit?: boolean;
+    onEditChange?: (editing: boolean) => void;
+    activationMode?: InlineEditActivationMode;
+    submitMode?: InlineEditSubmitMode;
+    selectOnFocus?: boolean;
+    status?: InlineEditStatus;
+    savedDuration?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function InlineEdit<T = unknown>({ value, defaultValue, onValueChange, onValueCommit, onValueRevert, onBeforeValueCommit, edit, defaultEdit, onEditChange, activationMode, submitMode, selectOnFocus, status, savedDuration, disabled, readOnly, className, children, ref, 'data-testid': testIdProp, }: InlineEditProps<T>): ReactElement;
+export declare namespace InlineEdit {
+    var displayName: string;
+}

package/dist/components/InlineEdit/InlineEdit.js

@@ -0,0 +1,223 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useControlled } from "../../hooks/useControlled.js";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { InlineEditProvider } from "./InlineEditContext.js";
+function InlineEdit({ value, defaultValue, onValueChange, onValueCommit, onValueRevert, onBeforeValueCommit, edit, defaultEdit = false, onEditChange, activationMode = 'click', submitMode = 'both', selectOnFocus = true, status, savedDuration = 2000, disabled = false, readOnly = false, className, children, ref, 'data-testid': testIdProp }) {
+    const testId = useTestId(void 0, testIdProp);
+    const [committedValue, setCommitted] = useControlled({
+        controlled: value,
+        default: defaultValue
+    });
+    const [editing, setEditing] = useControlled({
+        controlled: edit,
+        default: defaultEdit
+    });
+    const [draft, setDraft] = useState(committedValue);
+    const draftRef = useRef(committedValue);
+    const [autoStatus, setAutoStatus] = useState('idle');
+    const [autoError, setAutoError] = useState(void 0);
+    const [submitModeOverride, setSubmitModeOverride] = useState(null);
+    const overrideRef = useRef(null);
+    overrideRef.current = submitModeOverride;
+    const registerSubmitModeOverride = useCallback((mode)=>{
+        const prev = overrideRef.current;
+        if ('production' !== process.env.NODE_ENV && prev && prev.mode !== mode) console.warn(`InlineEdit: an editor registered submitMode='${mode}' while another editor's '${prev.mode}' override is active. Last registration wins.`);
+        const entry = {
+            token: Symbol('inline-edit-submit-mode'),
+            mode
+        };
+        setSubmitModeOverride(entry);
+        return ()=>{
+            setSubmitModeOverride((current)=>current?.token === entry.token ? null : current);
+        };
+    }, []);
+    const pendingCommitRef = useRef(null);
+    const isCommitPending = useCallback(()=>null !== pendingCommitRef.current, []);
+    const onValueCommitRef = useRef(onValueCommit);
+    onValueCommitRef.current = onValueCommit;
+    const onBeforeValueCommitRef = useRef(onBeforeValueCommit);
+    onBeforeValueCommitRef.current = onBeforeValueCommit;
+    const savedDurationRef = useRef(savedDuration);
+    savedDurationRef.current = savedDuration;
+    const savedTimer = useRef(null);
+    const mounted = useRef(true);
+    useEffect(()=>{
+        mounted.current = true;
+        return ()=>{
+            mounted.current = false;
+            if (savedTimer.current) clearTimeout(savedTimer.current);
+        };
+    }, []);
+    const resolvedStatus = status ?? autoStatus;
+    const resolvedError = autoError;
+    const invalid = 'error' === resolvedStatus || Boolean(resolvedError);
+    const setEditingState = useCallback((next)=>{
+        setEditing(next);
+        onEditChange?.(next);
+    }, [
+        setEditing,
+        onEditChange
+    ]);
+    const handleSetValue = useCallback((next)=>{
+        draftRef.current = next;
+        setDraft(next);
+        onValueChange?.(next);
+    }, [
+        onValueChange
+    ]);
+    const edit_ = useCallback(()=>{
+        if (disabled || readOnly) return;
+        pendingCommitRef.current = null;
+        draftRef.current = committedValue;
+        setDraft(committedValue);
+        setAutoStatus('idle');
+        setAutoError(void 0);
+        setEditingState(true);
+    }, [
+        disabled,
+        readOnly,
+        committedValue,
+        setEditingState
+    ]);
+    const cancel = useCallback(()=>{
+        pendingCommitRef.current = null;
+        draftRef.current = committedValue;
+        setDraft(committedValue);
+        setAutoStatus('idle');
+        setAutoError(void 0);
+        setEditingState(false);
+        onValueRevert?.(committedValue);
+    }, [
+        committedValue,
+        setEditingState,
+        onValueRevert
+    ]);
+    const submit = useCallback(()=>{
+        if (pendingCommitRef.current) return;
+        if ((status ?? autoStatus) === 'loading') return;
+        const current = draftRef.current;
+        const token = Symbol('inline-edit-commit');
+        const failCommit = (reason)=>{
+            pendingCommitRef.current = null;
+            setAutoStatus('error');
+            setAutoError(reason instanceof Error ? reason.message : 'Failed to save');
+        };
+        const runCommit = ()=>{
+            const result = onValueCommitRef.current?.(current);
+            if (result && 'function' == typeof result.then) {
+                setAutoStatus('loading');
+                setAutoError(void 0);
+                Promise.resolve(result).then(()=>{
+                    if (!mounted.current || pendingCommitRef.current !== token) return;
+                    pendingCommitRef.current = null;
+                    setCommitted(current);
+                    setEditingState(false);
+                    setAutoStatus('saved');
+                    if (savedTimer.current) clearTimeout(savedTimer.current);
+                    savedTimer.current = setTimeout(()=>{
+                        if (mounted.current) setAutoStatus('idle');
+                    }, savedDurationRef.current);
+                }, (reason)=>{
+                    if (!mounted.current || pendingCommitRef.current !== token) return;
+                    failCommit(reason);
+                });
+                return;
+            }
+            pendingCommitRef.current = null;
+            setCommitted(current);
+            setEditingState(false);
+        };
+        pendingCommitRef.current = token;
+        const guard = onBeforeValueCommitRef.current;
+        if (!guard) return void runCommit();
+        let verdict;
+        try {
+            verdict = guard(current, committedValue);
+        } catch (reason) {
+            failCommit(reason);
+            return;
+        }
+        if (verdict && 'function' == typeof verdict.then) return void verdict.then((resolved)=>{
+            if (!mounted.current || pendingCommitRef.current !== token) return;
+            if (false === resolved) {
+                pendingCommitRef.current = null;
+                return;
+            }
+            if (draftRef.current !== current) {
+                pendingCommitRef.current = null;
+                return;
+            }
+            runCommit();
+        }, (reason)=>{
+            if (!mounted.current || pendingCommitRef.current !== token) return;
+            failCommit(reason);
+        });
+        if (false === verdict) {
+            pendingCommitRef.current = null;
+            return;
+        }
+        runCommit();
+    }, [
+        setCommitted,
+        setEditingState,
+        status,
+        autoStatus,
+        committedValue
+    ]);
+    const contextValue = useMemo(()=>({
+            editing: Boolean(editing),
+            value: draft,
+            committedValue: committedValue,
+            status: resolvedStatus,
+            invalid,
+            error: resolvedError,
+            disabled,
+            readOnly,
+            activationMode,
+            submitMode: submitModeOverride?.mode ?? submitMode,
+            selectOnFocus,
+            isCommitPending,
+            setValue: handleSetValue,
+            edit: edit_,
+            submit,
+            cancel,
+            registerSubmitModeOverride
+        }), [
+        editing,
+        draft,
+        committedValue,
+        resolvedStatus,
+        invalid,
+        resolvedError,
+        disabled,
+        readOnly,
+        activationMode,
+        submitMode,
+        submitModeOverride,
+        selectOnFocus,
+        isCommitPending,
+        handleSetValue,
+        edit_,
+        submit,
+        cancel,
+        registerSubmitModeOverride
+    ]);
+    return /*#__PURE__*/ jsx(InlineEditProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: /*#__PURE__*/ jsx("div", {
+                ref: ref,
+                "data-testid": testId,
+                "data-slot": "inline-edit",
+                "data-editing": editing ? '' : void 0,
+                className: cn('flex w-full min-w-0 flex-col', className),
+                children: children
+            })
+        })
+    });
+}
+InlineEdit.displayName = 'InlineEdit';
+export { InlineEdit };

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

@@ -0,0 +1,43 @@
+export type InlineEditStatus = 'idle' | 'loading' | 'saved' | 'error';
+export type InlineEditActivationMode = 'click' | 'focus' | 'none';
+export type InlineEditSubmitMode = 'enter' | 'blur' | 'both' | 'none';
+export interface InlineEditContextValue<T = unknown> {
+    editing: boolean;
+    value: T;
+    committedValue: T;
+    status: InlineEditStatus;
+    invalid: boolean;
+    error?: string;
+    disabled: boolean;
+    readOnly: boolean;
+    activationMode: InlineEditActivationMode;
+    submitMode: InlineEditSubmitMode;
+    selectOnFocus: boolean;
+    /**
+     * True while a submit is held by a pending `onBeforeValueCommit` guard or
+     * an in-flight `onValueCommit` promise. Ref-backed function so event
+     * handlers get a synchronous answer — blur can fire in the same tick the
+     * guard opens a dialog, before any re-render.
+     */
+    isCommitPending: () => boolean;
+    setValue: (value: T) => void;
+    edit: () => void;
+    submit: () => void;
+    cancel: () => void;
+    /**
+     * Registers a submit-mode override while an editor is mounted (last
+     * registration wins; returns an unregister cleanup). Prefer the
+     * `useInlineEditSubmitMode` hook. Popover editors use this so consumers
+     * never have to pair `submitMode='none'` on the root by hand.
+     */
+    registerSubmitModeOverride: (mode: InlineEditSubmitMode) => () => void;
+}
+export declare const InlineEditProvider: import("react").Provider<InlineEditContextValue<unknown> | null>;
+export declare function useInlineEdit<T = unknown>(): InlineEditContextValue<T>;
+/**
+ * Declares the submit mode an editor needs while it is mounted (e.g. a
+ * popover editor commits on close, so blur/enter handling must be 'none').
+ * Registered via layout effect so the override is committed before paint and
+ * before any browser event can observe the consumer-provided mode.
+ */
+export declare function useInlineEditSubmitMode(mode: InlineEditSubmitMode): void;

package/dist/components/InlineEdit/InlineEditContext.js

@@ -0,0 +1,16 @@
+import { createContext, useContext, useLayoutEffect } from "react";
+const InlineEditContext = createContext(null);
+const InlineEditProvider = InlineEditContext.Provider;
+function useInlineEdit() {
+    const ctx = useContext(InlineEditContext);
+    if (!ctx) throw new Error('useInlineEdit must be used within <InlineEdit>');
+    return ctx;
+}
+function useInlineEditSubmitMode(mode) {
+    const { registerSubmitModeOverride } = useInlineEdit();
+    useLayoutEffect(()=>registerSubmitModeOverride(mode), [
+        mode,
+        registerSubmitModeOverride
+    ]);
+}
+export { InlineEditProvider, useInlineEdit, useInlineEditSubmitMode };