@skdx/react 0.26.0 → 0.28.0

package/dist/dropdown-menu/types.d.ts

@@ -1,114 +1,288 @@
 import type * as React from 'react';
 import type { MenuSubContentProps, MenuSubProps, MenuSubTriggerProps } from '../utils/menuSub.js';
-import type { PopperContentProps } from '../utils/popper.js';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { Align, PopperContentProps, Side } from '../utils/popper.js';
 import type { PortalProps } from '../utils/portal.js';
-import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
-/** @internal Shared state distributed from {@link DropdownMenu} to its parts via context. Not part of the public API. */
+import type { AutoFocusEvent } from '../utils/useFocusTrap.js';
+/**
+ * Menu entry: plain action item, separator, checkbox, radio group, or submenu.
+ */
+export type MenuItem = {
+    label: string;
+    /**
+     * Called when item is activated; fires before recipe's `onSelect`.
+     * @default undefined — no-op if omitted.
+     */
+    onSelect?: () => void;
+    /**
+     * Keyboard hint rendered as `DropdownMenuShortcut`; aria-hidden.
+     * @default undefined — no shortcut is rendered.
+     */
+    shortcut?: string;
+    /**
+     * Marks item aria-disabled; blocks selection, stays focusable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text for typeahead matching; reflected to `data-text-value`.
+     * @default undefined — the item's rendered text is used.
+     */
+    textValue?: string;
+} | {
+    /** Renders a horizontal rule separating item groups. */
+    type: 'separator';
+} | {
+    type: 'checkbox';
+    label: string;
+    /**
+     * Checked state, always externally controlled via `onCheckedChange`.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Fires with new checked state when item is selected.
+     * @default undefined — no-op if omitted.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Keyboard hint rendered as `DropdownMenuShortcut`; aria-hidden.
+     * @default undefined — no shortcut is rendered.
+     */
+    shortcut?: string;
+    /**
+     * Marks item aria-disabled; blocks selection, stays focusable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text for typeahead matching; reflected to `data-text-value`.
+     * @default undefined — the item's rendered text is used.
+     */
+    textValue?: string;
+} | {
+    type: 'radio-group';
+    /**
+     * Selected option's `value`, externally controlled.
+     * @default undefined — no option is selected.
+     */
+    value?: string;
+    /**
+     * Fires with newly selected option's `value`.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+    items: {
+        label: string;
+        /** Compared against group's `value` for checked state and `onValueChange`. */
+        value: string;
+        /**
+         * Marks option aria-disabled; blocks selection, stays focusable.
+         * @default false
+         */
+        disabled?: boolean;
+        /**
+         * Text for typeahead matching; reflected to `data-text-value`.
+         * @default undefined — the option's rendered text is used.
+         */
+        textValue?: string;
+    }[];
+} | {
+    type: 'submenu';
+    label: string;
+    items: MenuItem[];
+    /**
+     * Marks SubTrigger aria-disabled; blocks submenu open, stays focusable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text for typeahead matching on SubTrigger.
+     * @default undefined — the trigger's rendered text is used.
+     */
+    textValue?: string;
+} | {
+    type: 'group';
+    /**
+     * Heading rendered as `DropdownMenuLabel`; the only accessible name for the group.
+     * @default undefined — the group is rendered unnamed.
+     */
+    label?: string;
+    items: MenuItem[];
+};
+/** Which end of item list the opening key asks focus to land: `first` (Enter/Space/ArrowDown) or `last` (ArrowUp). */
+export type DropdownMenuOpenIntent = 'first' | 'last';
+/** @internal Shared state distributed from {@link DropdownMenu} to its parts via context. */
 export interface DropdownMenuContextValue {
     triggerRef: React.RefObject<HTMLButtonElement | null>;
     contentRef: React.RefObject<HTMLDivElement | null>;
     contentId: string;
+    /** Trigger's id; Content's `aria-labelledby` points at it for proper menu naming. */
+    triggerId: string;
     open: boolean;
+    modal: boolean;
+    closeOnSelect: boolean;
     onOpenChange: (open: boolean) => void;
+    /** Returns focus to Trigger, lifting `modal` inertness so trigger can receive it. */
+    focusTrigger: () => void;
+    /** Content's `onCloseAutoFocus` handler; ref so root can own focus movement. */
+    closeAutoFocusRef: React.RefObject<((event: AutoFocusEvent) => void) | undefined>;
+    /** Which end of menu the last open request asked for; ref read by Content's open effect. */
+    openIntentRef: React.RefObject<DropdownMenuOpenIntent>;
+    /** Resolved writing direction for portalled content via DirectionProvider or DOM attribute. */
+    dir: string;
 }
-/** Props for the {@link DropdownMenu} root. */
-export interface DropdownMenuProps {
+/**
+ * Props for the {@link DropdownMenu} recipe.
+ * No `children`: the menu is `trigger` plus `items`. Use primitives for manual composition.
+ */
+export interface DropdownMenuProps extends PassThroughProps {
+    /**
+     * Element that opens the menu; decorated via `asChild` and merged directly.
+     * @default undefined — no trigger renders.
+     */
+    trigger?: React.ReactElement;
+    /**
+     * Menu's entries rendered into the `DropdownMenuContent` panel.
+     * @default undefined — an empty menu.
+     */
+    items?: MenuItem[];
+    /**
+     * Fires with the activated entry after its own callback.
+     * @default undefined — no-op if omitted.
+     */
+    onSelect?: (item: MenuItem) => void;
+    /**
+     * Which side of trigger the panel opens on.
+     * @default 'bottom'
+     */
+    side?: Side;
+    /**
+     * Alignment of the automatically rendered menu panel relative to the `side` it opens on.
+     * @default 'start'
+     */
+    align?: Align;
     /**
-     * The trigger and portal — the menu's own DOM (content, items) is
-     * rendered by {@link DropdownMenuPortal} elsewhere.
-     * @default undefined — renders nothing if omitted.
+     * Render item contents in place of label; not called for separators or groups.
+     * @default undefined — the entry's `label` is rendered.
      */
-    children?: React.ReactNode;
+    renderItem?: (item: MenuItem) => React.ReactNode;
     /**
-     * Whether the menu is open, for controlled usage. Pair with `onOpenChange`.
-     * @default undefined — uncontrolled, tracks its own open state internally.
+     * Whether menu is open; for controlled usage pair with `onOpenChange`.
+     * @default undefined — uncontrolled.
      */
     open?: boolean;
     /**
-     * Whether the menu is initially open, for uncontrolled usage.
+     * Whether menu is initially open for uncontrolled usage.
      * @default false
      */
     defaultOpen?: boolean;
     /**
-     * Fires with the new open state whenever the menu opens or closes, controlled or not.
+     * Whether open menu marks outside content inert and locks body scroll.
+     * Tab closes menu per the WAI-ARIA pattern; focus is not trapped.
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Whether selecting an item closes the menu; override per item.
+     * Checkbox items stay open by default; either item's setting or `preventDefault()` can veto.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Fires with new open state whenever menu opens or closes.
      * @default undefined — no-op if omitted.
      */
     onOpenChange?: (open: boolean) => void;
     /**
-     * Fires with the new open state once the change has finished on screen —
-     * after `DropdownMenuContent`'s enter or exit animation ends, or as soon as it has
-     * settled when the panel declares no animation. Use it for work that must not race
-     * the transition; use `onOpenChange` for work that must not wait for it.
+     * Fires once open state change finishes on screen, after animation ends.
+     * Use this for work that must not race the transition; `onOpenChange` fires immediately.
      * @default undefined — no-op if omitted.
      */
     onOpenChangeComplete?: (open: boolean) => void;
 }
-/** Props for {@link DropdownMenuTrigger}, the button that opens the menu and anchors its position. */
+/** Props for {@link DropdownMenuTrigger}. */
 export interface DropdownMenuTriggerProps extends PrimitivePropsWithRef<'button'> {
 }
-/** Props for {@link DropdownMenuPortal}, which teleports its children to `document.body`. */
+/** Props for {@link DropdownMenuPortal}; teleports children to `document.body`. */
 export interface DropdownMenuPortalProps extends PortalProps {
     /**
-     * Render the portal even while the menu is closed, instead of unmounting
-     * it. Useful for animation libraries that need the outgoing content
-     * present in the DOM during an exit transition.
+     * Render portal while menu is closed instead of unmounting; for animation libraries.
      * @default false
      */
     forceMount?: boolean;
 }
-/**
- * Props for {@link DropdownMenuContent}, the floating menu panel. Extends
- * the shared popper positioning props (`side`, `align`, `sideOffset`,
- * `alignOffset`, `avoidCollisions`, `collisionPadding`).
- */
+/** Props for {@link DropdownMenuContent}; extends popper positioning props. */
 export interface DropdownMenuContentProps extends PopperContentProps {
     /**
-     * Keep this panel mounted even while the menu is closed. Useful for
-     * animation libraries that need the outgoing panel present in the DOM
-     * during an exit transition.
+     * Keep panel mounted while closed for animation libraries needing outgoing content.
      * @default false
      */
     forceMount?: boolean;
     /**
-     * Whether Up/Down arrow-key navigation wraps from the last item back to
-     * the first (and vice versa).
+     * Whether Up/Down arrow-key navigation wraps from last item to first.
      * @default true
      */
     loop?: boolean;
     /**
-     * Fires when Escape is pressed while the menu is open. Call `event.preventDefault()` to stop it from closing.
+     * Fires when Escape is pressed while menu is open; call `preventDefault()` to stop close.
      * @default undefined — no-op if omitted.
      */
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
     /**
-     * Fires on pointer-down outside the content. Call `event.preventDefault()` to stop the menu from closing.
+     * Fires on pointer-down outside content; call `preventDefault()` to stop close.
      * @default undefined — no-op if omitted.
      */
     onPointerDownOutside?: (event: PointerEvent) => void;
     /**
-     * Fires when focus moves to an element outside the content. Call `event.preventDefault()` to stop the menu from closing. Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
+     * Fires when focus moves outside content; call `preventDefault()` to stop close.
+     * Event carries original `focusin` event as `detail`.
      * @default undefined — no-op if omitted.
      */
     onFocusOutside?: (event: FocusOutsideEvent) => void;
     /**
-     * Fires for either kind of outside interaction — pointer-down or focus — immediately before the specific handler above and with the same event, so one `event.preventDefault()` here vetoes the dismissal whichever way it was triggered.
+     * Fires for either outside interaction (pointer-down or focus); before specific handlers above.
+     * One `preventDefault()` here vetoes dismissal whichever way triggered.
      * @default undefined — no-op if omitted.
      */
     onInteractOutside?: (event: InteractOutsideEvent) => void;
+    /**
+     * Fires just before focus returns to trigger as menu closes; call `preventDefault()` to suppress.
+     * @default undefined — no-op if omitted.
+     */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
 }
 /** Props for a single {@link DropdownMenuItem}. */
 export interface DropdownMenuItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'onSelect'> {
     /**
-     * Excludes the item from roving-focus navigation and blocks selection.
+     * Tag name from library's allowlist instead of default `<div>`. Use `asChild` for elements needing own attributes.
+     * @default 'div'
+     */
+    as?: PolymorphicTag;
+    /**
+     * Marks item aria-disabled; blocks selection, stays focusable.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Called when the item is activated. `event.preventDefault()` keeps the menu open.
+     * Text for typeahead matching; reflected to `data-text-value`.
+     * Required for items rendering more than label or icon-only items.
+     * @default undefined — the item's rendered text is used.
+     */
+    textValue?: string;
+    /**
+     * Called when item is activated; call `preventDefault()` to keep menu open.
      * @default undefined — no-op if omitted.
      */
     onSelect?: (event: Event) => void;
+    /**
+     * Whether selecting this item closes menu, overriding root's `closeOnSelect`.
+     * Item setting or `preventDefault()` can each veto closing independently.
+     * @default undefined — inherits root's `closeOnSelect`.
+     */
+    closeOnSelect?: boolean;
 }
 /** Props for {@link DropdownMenuCheckboxItem}, a toggleable menu item. */
 export interface DropdownMenuCheckboxItemProps extends DropdownMenuItemProps {
@@ -122,6 +296,12 @@ export interface DropdownMenuCheckboxItemProps extends DropdownMenuItemProps {
      * @default undefined — no-op if omitted.
      */
     onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether selecting this item closes the menu.
+     * Unlike other item types, checkbox items stay open by default — they exist to toggle multiple times.
+     * @default false
+     */
+    closeOnSelect?: boolean;
 }
 /** @internal Shared selected-value state distributed from {@link DropdownMenuRadioGroup} to its `DropdownMenuRadioItem`s via context. Not part of the public API. */
 export interface MenuRadioGroupContextValue {
@@ -131,7 +311,7 @@ export interface MenuRadioGroupContextValue {
 /** Props for {@link DropdownMenuRadioGroup}, a container coordinating a set of mutually-exclusive `DropdownMenuRadioItem`s. */
 export interface DropdownMenuRadioGroupProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Currently selected item's value, compared against each `DropdownMenuRadioItem`'s own `value`.
+     * Selected item's value; compared against each radio item's own `value`.
      * @default undefined — no item is selected.
      */
     value?: string;
@@ -149,9 +329,7 @@ export interface DropdownMenuRadioItemProps extends DropdownMenuItemProps {
 /** Props for {@link DropdownMenuItemIndicator}, the checked-state glyph inside a checkbox/radio item. */
 export interface DropdownMenuItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
     /**
-     * Render even while unchecked, instead of unmounting. Useful for
-     * animation libraries that need the outgoing indicator present in the DOM
-     * during an exit transition.
+     * Keep indicator mounted while unchecked for animation libraries needing outgoing content.
      * @default false
      */
     forceMount?: boolean;
@@ -165,6 +343,9 @@ export interface DropdownMenuLabelProps extends PrimitivePropsWithRef<'div'> {
 /** Props for {@link DropdownMenuSeparator}, a visual divider between items or groups. */
 export interface DropdownMenuSeparatorProps extends PrimitivePropsWithRef<'div'> {
 }
+/** Props for {@link DropdownMenuShortcut}, the keyboard hint at an item's trailing edge. */
+export interface DropdownMenuShortcutProps extends PrimitivePropsWithRef<'span'> {
+}
 /** Props for {@link DropdownMenuSub}, the root of a nested submenu. */
 export interface DropdownMenuSubProps extends MenuSubProps {
 }

package/dist/editable/Editable.cjs

@@ -1 +1 @@
-"use strict";var xe=Object.create;var v=Object.defineProperty;var Pe=Object.getOwnPropertyDescriptor;var Te=Object.getOwnPropertyNames;var Ce=Object.getPrototypeOf,we=Object.prototype.hasOwnProperty;var Me=(t,i)=>{for(var e in i)v(t,e,{get:i[e],enumerable:!0})},q=(t,i,e,a)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of Te(i))!we.call(t,r)&&r!==e&&v(t,r,{get:()=>i[r],enumerable:!(a=Pe(i,r))||a.enumerable});return t};var s=(t,i,e)=>(e=t!=null?xe(Ce(t)):{},q(i||!t||!t.__esModule?v(e,"default",{value:t,enumerable:!0}):e,t)),ke=t=>q(v({},"__esModule",{value:!0}),t);var he={};Me(he,{Editable:()=>J,EditableCancelTrigger:()=>k,EditableEditTrigger:()=>h,EditableInput:()=>D,EditablePreview:()=>H,EditableProvider:()=>G,EditableSubmitTrigger:()=>L,EditableTextarea:()=>N,useEditableContext:()=>o});module.exports=ke(he);var n=s(require("react"),1),A=require("../utils/createContext.cjs"),F=require("../utils/part.cjs"),z=require("../utils/primitive.cjs"),w=require("../utils/useControllableState.cjs"),M=require("react/jsx-runtime"),[G,o]=(0,A.createSafeContext)("Editable"),J=n.forwardRef(({value:t,defaultValue:i,onValueChange:e,onValueCommit:a,editing:r,defaultEditing:b=!1,onEditChange:fe,placeholder:ce,disabled:R=!1,readOnly:x=!1,required:S=!1,maxLength:be,activationMode:pe="click",submitMode:Ee="both",selectOnFocus:I=!0,...K},ge)=>{let[m="",P]=(0,w.useControllableState)({prop:t,defaultProp:i??"",onChange:e}),[l=!1,g]=(0,w.useControllableState)({prop:r,defaultProp:b,onChange:fe}),O=n.useRef(null),B=n.useRef(null),T=n.useRef(!1),C=n.useRef(m),ve=()=>{R||x||l||(C.current=m,g(!0))},ye=()=>{l&&(P(C.current),g(!1))},Re=()=>{if(l){if(S&&m.trim()===""){P(C.current),g(!1);return}g(!1),a?.(m)}},V=n.useRef(l);return n.useEffect(()=>{if(l){let d=O.current;d&&(d.focus(),I?d.select():d.setSelectionRange(d.value.length,d.value.length))}else if(V.current){let d=document.activeElement;(!d||d===document.body)&&(T.current=!0,B.current?.focus(),T.current=!1)}V.current=l},[l,I]),(0,M.jsx)(G,{value:m,editing:l,placeholder:ce,disabled:R,readOnly:x,required:S,maxLength:be,activationMode:pe,submitMode:Ee,inputRef:O,previewRef:B,returningFocusRef:T,setValue:P,activate:ve,submit:Re,cancel:ye,children:(0,M.jsx)(z.Primitive.div,{"data-state":l?"editing":"preview","data-empty":m===""?"":void 0,"data-disabled":R?"":void 0,"data-readonly":x?"":void 0,...K,...(0,F.skdxPart)("editable","root",K.className),ref:ge})})});J.displayName="Editable";var Q=s(require("react"),1),U=require("../utils/part.cjs"),p=require("../utils/primitive.cjs");var W=require("react/jsx-runtime"),k=Q.forwardRef((t,i)=>{let e=o("EditableCancelTrigger");return e.editing?(0,W.jsx)(p.Primitive.button,{type:"button","data-state":"editing",disabled:e.disabled,...t,...(0,U.skdxPart)("editable","cancel-trigger",t.className),ref:i,onMouseDown:(0,p.composeEventHandlers)(t.onMouseDown,a=>{a.preventDefault()}),onClick:(0,p.composeEventHandlers)(t.onClick,()=>e.cancel())}):null});k.displayName="EditableCancelTrigger";var X=s(require("react"),1),Y=require("../utils/part.cjs"),y=require("../utils/primitive.cjs");var Z=require("react/jsx-runtime"),h=X.forwardRef((t,i)=>{let e=o("EditableEditTrigger");return e.editing?null:(0,Z.jsx)(y.Primitive.button,{type:"button","data-state":"preview",disabled:e.disabled||e.readOnly,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,...(0,Y.skdxPart)("editable","edit-trigger",t.className),ref:i,onClick:(0,y.composeEventHandlers)(t.onClick,()=>e.activate())})});h.displayName="EditableEditTrigger";var _=s(require("react"),1),$=require("../utils/composeRefs.cjs"),j=require("../utils/part.cjs"),f=require("../utils/primitive.cjs");var ee=require("react/jsx-runtime"),D=_.forwardRef((t,i)=>{let e=o("EditableInput"),a=(0,$.useComposedRefs)(i,e.inputRef);return e.editing?(0,ee.jsx)(f.Primitive.input,{type:"text",value:e.value,placeholder:e.placeholder,disabled:e.disabled,readOnly:e.readOnly,required:e.required,maxLength:e.maxLength,"data-state":"editing","data-empty":e.value===""?"":void 0,...t,...(0,j.skdxPart)("editable","input",t.className),ref:a,onChange:(0,f.composeEventHandlers)(t.onChange,r=>{e.setValue(r.target.value)}),onKeyDown:(0,f.composeEventHandlers)(t.onKeyDown,r=>{if(r.key==="Escape"){r.preventDefault(),e.cancel();return}r.key==="Enter"&&(e.submitMode==="enter"||e.submitMode==="both")&&(r.preventDefault(),e.submit())}),onBlur:(0,f.composeEventHandlers)(t.onBlur,()=>{(e.submitMode==="blur"||e.submitMode==="both")&&e.submit()})}):null});D.displayName="EditableInput";var te=s(require("react"),1),ae=require("../utils/composeRefs.cjs"),ie=require("../utils/part.cjs"),u=require("../utils/primitive.cjs");var re=require("react/jsx-runtime"),H=te.forwardRef(({children:t,...i},e)=>{let a=o("EditablePreview"),r=(0,ae.useComposedRefs)(e,a.previewRef);return a.editing?null:(0,re.jsx)(u.Primitive.span,{role:"button",tabIndex:a.disabled?-1:0,"aria-disabled":a.disabled||void 0,"aria-readonly":a.readOnly||void 0,"data-state":"preview","data-empty":a.value===""?"":void 0,"data-disabled":a.disabled?"":void 0,"data-readonly":a.readOnly?"":void 0,...i,...(0,ie.skdxPart)("editable","preview",i.className),ref:r,onClick:(0,u.composeEventHandlers)(i.onClick,()=>{a.activationMode==="click"&&a.activate()}),onDoubleClick:(0,u.composeEventHandlers)(i.onDoubleClick,()=>{a.activationMode==="dblclick"&&a.activate()}),onFocus:(0,u.composeEventHandlers)(i.onFocus,()=>{a.activationMode==="focus"&&!a.returningFocusRef.current&&a.activate()}),onKeyDown:(0,u.composeEventHandlers)(i.onKeyDown,b=>{b.key!=="Enter"&&b.key!==" "||(b.preventDefault(),a.activate())}),children:t??(a.value||a.placeholder)})});H.displayName="EditablePreview";var oe=s(require("react"),1),ne=require("../utils/part.cjs"),E=require("../utils/primitive.cjs");var le=require("react/jsx-runtime"),L=oe.forwardRef((t,i)=>{let e=o("EditableSubmitTrigger");return e.editing?(0,le.jsx)(E.Primitive.button,{type:"button","data-state":"editing",disabled:e.disabled,...t,...(0,ne.skdxPart)("editable","submit-trigger",t.className),ref:i,onMouseDown:(0,E.composeEventHandlers)(t.onMouseDown,a=>{a.preventDefault()}),onClick:(0,E.composeEventHandlers)(t.onClick,()=>e.submit())}):null});L.displayName="EditableSubmitTrigger";var de=s(require("react"),1),se=require("../utils/composeRefs.cjs"),ue=require("../utils/part.cjs"),c=require("../utils/primitive.cjs");var me=require("react/jsx-runtime"),N=de.forwardRef((t,i)=>{let e=o("EditableTextarea"),a=(0,se.useComposedRefs)(i,e.inputRef);return e.editing?(0,me.jsx)(c.Primitive.textarea,{value:e.value,placeholder:e.placeholder,disabled:e.disabled,readOnly:e.readOnly,required:e.required,maxLength:e.maxLength,"data-state":"editing","data-empty":e.value===""?"":void 0,...t,...(0,ue.skdxPart)("editable","textarea",t.className),ref:a,onChange:(0,c.composeEventHandlers)(t.onChange,r=>{e.setValue(r.target.value)}),onKeyDown:(0,c.composeEventHandlers)(t.onKeyDown,r=>{if(r.key==="Escape"){r.preventDefault(),e.cancel();return}r.key==="Enter"&&(!r.metaKey&&!r.ctrlKey||e.submitMode!=="enter"&&e.submitMode!=="both"||(r.preventDefault(),e.submit()))}),onBlur:(0,c.composeEventHandlers)(t.onBlur,()=>{(e.submitMode==="blur"||e.submitMode==="both")&&e.submit()})}):null});N.displayName="EditableTextarea";0&&(module.exports={Editable,EditableCancelTrigger,EditableEditTrigger,EditableInput,EditablePreview,EditableProvider,EditableSubmitTrigger,EditableTextarea,useEditableContext});
+"use strict";var Ye=Object.create;var S=Object.defineProperty;var Ze=Object.getOwnPropertyDescriptor;var _e=Object.getOwnPropertyNames;var je=Object.getPrototypeOf,et=Object.prototype.hasOwnProperty;var tt=(t,a)=>{for(var e in a)S(t,e,{get:a[e],enumerable:!0})},oe=(t,a,e,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of _e(a))!et.call(t,n)&&n!==e&&S(t,n,{get:()=>a[n],enumerable:!(i=Ze(a,n))||i.enumerable});return t};var p=(t,a,e)=>(e=t!=null?Ye(je(t)):{},oe(a||!t||!t.__esModule?S(e,"default",{value:t,enumerable:!0}):e,t)),it=t=>oe(S({},"__esModule",{value:!0}),t);var rt={};tt(rt,{Editable:()=>J,EditableCancelTrigger:()=>N,EditableEditTrigger:()=>qe,EditableInput:()=>B,EditableLabel:()=>De,EditablePreview:()=>q,EditableProvider:()=>ke,EditableSubmitTrigger:()=>V,EditableTextarea:()=>A,useEditableContext:()=>d});module.exports=it(rt);var o=p(require("react"),1),Te=require("../utils/createContext.cjs"),Ce=require("../utils/hiddenInput.cjs"),Me=require("../utils/part.cjs"),Le=require("../utils/primitive.cjs"),G=require("../utils/useControllableState.cjs");var le=p(require("react"),1),de=require("../utils/part.cjs"),L=require("../utils/primitive.cjs");var se=require("react/jsx-runtime"),N=le.forwardRef((t,a)=>{let e=d("EditableCancelTrigger");return e.editing?(0,se.jsx)(L.Primitive.button,{type:"button","data-state":"editing",disabled:e.disabled,...t,...(0,de.skdxPart)("editable","cancel-trigger",t.className),ref:a,onMouseDown:(0,L.composeEventHandlers)(t.onMouseDown,i=>{i.preventDefault()}),onClick:(0,L.composeEventHandlers)(t.onClick,()=>e.cancel())}):null});N.displayName="EditableCancelTrigger";var ue=p(require("react"),1),fe=require("../utils/composeRefs.cjs"),me=require("../utils/part.cjs"),R=require("../utils/primitive.cjs");var ce=require("react/jsx-runtime"),B=ue.forwardRef((t,a)=>{let e=d("EditableInput"),i=(0,fe.useComposedRefs)(a,e.inputRef);return e.editing?(0,ce.jsx)(R.Primitive.input,{type:"text",id:e.editorId,value:e.value,placeholder:e.editPlaceholder,disabled:e.disabled,readOnly:e.readOnly,required:e.required,"aria-required":e.required||void 0,"aria-invalid":e.invalid||void 0,maxLength:e.maxLength,"data-state":"editing","data-empty":e.value===""?"":void 0,"data-invalid":e.invalid?"":void 0,...t,...(0,me.skdxPart)("editable","input",t.className),ref:i,onChange:(0,R.composeEventHandlers)(t.onChange,n=>{e.setValue(n.target.value)}),onKeyDown:(0,R.composeEventHandlers)(t.onKeyDown,n=>{if(n.key==="Escape"){n.preventDefault(),e.cancel();return}n.key==="Enter"&&(e.submitMode==="enter"||e.submitMode==="both")&&(n.preventDefault(),e.submit())}),onBlur:(0,R.composeEventHandlers)(t.onBlur,()=>{(e.submitMode==="blur"||e.submitMode==="both")&&e.submit()})}):null});B.displayName="EditableInput";var be=p(require("react"),1),pe=require("../utils/composeRefs.cjs"),ve=require("../utils/part.cjs"),y=require("../utils/primitive.cjs");var ge=require("react/jsx-runtime"),q=be.forwardRef(({children:t,...a},e)=>{let i=d("EditablePreview"),n=(0,pe.useComposedRefs)(e,i.previewRef);return i.editing?null:(0,ge.jsx)(y.Primitive.span,{role:"button",tabIndex:i.disabled?-1:0,"aria-labelledby":i.labelPresent?i.labelId:void 0,"aria-disabled":i.disabled||i.readOnly||void 0,"data-state":"preview","data-empty":i.value===""?"":void 0,"data-disabled":i.disabled?"":void 0,"data-readonly":i.readOnly?"":void 0,"data-invalid":i.invalid?"":void 0,...a,...(0,ve.skdxPart)("editable","preview",a.className),ref:n,onClick:(0,y.composeEventHandlers)(a.onClick,()=>{i.activationMode==="click"&&i.activate()}),onDoubleClick:(0,y.composeEventHandlers)(a.onDoubleClick,()=>{i.activationMode==="dblclick"&&i.activate()}),onFocus:(0,y.composeEventHandlers)(a.onFocus,()=>{i.activationMode==="focus"&&!i.returningFocusRef.current&&i.activate()}),onKeyDown:(0,y.composeEventHandlers)(a.onKeyDown,g=>{g.key!=="Enter"&&g.key!==" "||(g.preventDefault(),i.activate())}),children:t??(i.value||i.previewPlaceholder)})});q.displayName="EditablePreview";var Ee=p(require("react"),1),he=require("../utils/part.cjs"),k=require("../utils/primitive.cjs");var ye=require("react/jsx-runtime"),V=Ee.forwardRef((t,a)=>{let e=d("EditableSubmitTrigger");return e.editing?(0,ye.jsx)(k.Primitive.button,{type:"button","data-state":"editing",disabled:e.disabled,...t,...(0,he.skdxPart)("editable","submit-trigger",t.className),ref:a,onMouseDown:(0,k.composeEventHandlers)(t.onMouseDown,i=>{i.preventDefault()}),onClick:(0,k.composeEventHandlers)(t.onClick,()=>e.submit())}):null});V.displayName="EditableSubmitTrigger";var v=p(require("react"),1),xe=require("../utils/composeRefs.cjs"),Re=require("../utils/part.cjs"),w=require("../utils/primitive.cjs");var we=require("react/jsx-runtime"),A=v.forwardRef(({autoResize:t=!1,maxRows:a,minRows:e=2,style:i,...n},g)=>{let r=d("EditableTextarea"),H=v.useRef(null),F=(0,xe.useComposedRefs)(g,H,r.inputRef),E=v.useCallback(()=>{let l=H.current;if(!l||!t)return;let m=getComputedStyle(l),b=x=>parseFloat(x)||0,T=b(m.borderTopWidth)+b(m.borderBottomWidth),I=b(m.paddingTop)+b(m.paddingBottom),C=m.boxSizing==="border-box",M=b(m.lineHeight),D=x=>x*M+(C?I+T:0);l.style.height="auto";let h=l.scrollHeight+(C?T:-I);e!=null&&M>0&&(h=Math.max(h,D(e))),a!=null&&M>0&&(h=Math.min(h,D(a))),l.style.height=`${h}px`},[t,a,e]);return v.useLayoutEffect(()=>{E()},[E,r.value,r.editing]),r.editing?(0,we.jsx)(w.Primitive.textarea,{rows:t?void 0:e,id:r.editorId,value:r.value,placeholder:r.editPlaceholder,disabled:r.disabled,readOnly:r.readOnly,required:r.required,"aria-required":r.required||void 0,"aria-invalid":r.invalid||void 0,maxLength:r.maxLength,"data-state":"editing","data-empty":r.value===""?"":void 0,"data-invalid":r.invalid?"":void 0,...n,...(0,Re.skdxPart)("editable","textarea",n.className),ref:F,style:t?{overflow:"hidden",resize:"none",...i}:i,onChange:(0,w.composeEventHandlers)(n.onChange,l=>{r.setValue(l.target.value),E()}),onKeyDown:(0,w.composeEventHandlers)(n.onKeyDown,l=>{if(l.key==="Escape"){l.preventDefault(),r.cancel();return}l.key==="Enter"&&(!l.metaKey&&!l.ctrlKey||r.submitMode!=="enter"&&r.submitMode!=="both"||(l.preventDefault(),r.submit()))}),onBlur:(0,w.composeEventHandlers)(n.onBlur,()=>{(r.submitMode==="blur"||r.submitMode==="both")&&r.submit()})}):null});A.displayName="EditableTextarea";var s=require("react/jsx-runtime"),Pe=({multiline:t,ariaLabel:a,ariaLabelledBy:e,showControls:i})=>(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(q,{}),t?(0,s.jsx)(A,{"aria-label":a,"aria-labelledby":e}):(0,s.jsx)(B,{"aria-label":a,"aria-labelledby":e}),i?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(V,{children:"Save"}),(0,s.jsx)(N,{children:"Cancel"})]}):null]});var P=require("react/jsx-runtime"),[ke,d]=(0,Te.createSafeContext)("Editable");function at(t){return t===void 0?{edit:void 0,preview:void 0}:typeof t=="string"?{edit:t,preview:t}:{edit:t.edit,preview:t.preview}}var J=o.forwardRef(({value:t,defaultValue:a,onValueChange:e,onValueCommit:i,onValueRevert:n,editing:g,defaultEditing:r=!1,onEditChange:H,placeholder:F,finalFocusEl:E,disabled:l=!1,readOnly:m=!1,required:b=!1,invalid:T=!1,maxLength:I,name:C,form:M,activationMode:D="click",submitMode:h="both",selectOnFocus:x=!0,multiline:Ae=!1,showControls:Oe=!1,children:z,"aria-label":Q,"aria-labelledby":X,...Y},Ke)=>{let[u="",Z]=(0,G.useControllableState)({prop:t,defaultProp:a??"",onChange:e}),[Fe,ze]=o.useState(u),[c=!1,W]=(0,G.useControllableState)({prop:g,defaultProp:r,onChange:H}),We=o.useId(),Ue=o.useId(),[$e,Ge]=o.useState(!1),_=at(F),j=o.useRef(null),ee=o.useRef(null),U=o.useRef(!1),te=o.useRef(u),ie=o.useRef(u);o.useEffect(()=>{ie.current=u},[u]);let ae=o.useRef(E);o.useEffect(()=>{ae.current=E},[E]);let Je=()=>{l||m||c||W(!0)},re=()=>{let f=u,ne=te.current;Z(ne),W(!1),n?.({value:ne,previousValue:f})},Qe=()=>{c&&re()},Xe=()=>{if(c){if(b&&u.trim()===""){re();return}W(!1),ze(u),i?.(u)}},$=o.useRef(c);return o.useEffect(()=>{if(c){$.current||(te.current=ie.current);let f=j.current;f&&(f.focus(),x?f.select():f.setSelectionRange(f.value.length,f.value.length))}else if($.current){let f=document.activeElement;(!f||f===document.body)&&(U.current=!0,(ae.current?.()??ee.current)?.focus(),U.current=!1)}$.current=c},[c,x]),(0,P.jsxs)(ke,{value:u,editing:c,editPlaceholder:_.edit,previewPlaceholder:_.preview,editorId:We,labelId:Ue,labelPresent:$e,setLabelPresent:Ge,disabled:l,readOnly:m,required:b,invalid:T,maxLength:I,activationMode:D,submitMode:h,inputRef:j,previewRef:ee,returningFocusRef:U,setValue:Z,activate:Je,submit:Xe,cancel:Qe,children:[(0,P.jsx)(Le.Primitive.div,{"data-state":c?"editing":"preview","data-empty":u===""?"":void 0,"data-disabled":l?"":void 0,"data-readonly":m?"":void 0,"data-invalid":T?"":void 0,"aria-label":z?Q:void 0,"aria-labelledby":z?X:void 0,...Y,...(0,Me.skdxPart)("editable","root",Y.className),ref:Ke,children:z??(0,P.jsx)(Pe,{multiline:Ae,ariaLabel:Q,ariaLabelledBy:X,showControls:Oe})}),C&&(0,P.jsx)(Ce.HiddenInput,{type:"text",name:C,value:Fe,form:M})]})});J.displayName="Editable";var O=p(require("react"),1),He=require("../utils/part.cjs"),Ie=require("../utils/primitive.cjs");var Se=require("react/jsx-runtime"),De=O.forwardRef((t,a)=>{let e=d("EditableLabel"),{setLabelPresent:i}=e;return O.useEffect(()=>(i(!0),()=>i(!1)),[i]),(0,Se.jsx)(Ie.Primitive.label,{id:e.labelId,htmlFor:e.editorId,...t,...(0,He.skdxPart)("editable","label",t.className),ref:a})});De.displayName="EditableLabel";var Ne=p(require("react"),1),Be=require("../utils/part.cjs"),K=require("../utils/primitive.cjs");var Ve=require("react/jsx-runtime"),qe=Ne.forwardRef((t,a)=>{let e=d("EditableEditTrigger");return e.editing?null:(0,Ve.jsx)(K.Primitive.button,{type:"button","data-state":"preview",disabled:e.disabled||e.readOnly,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,...(0,Be.skdxPart)("editable","edit-trigger",t.className),ref:a,onClick:(0,K.composeEventHandlers)(t.onClick,()=>e.activate())})});qe.displayName="EditableEditTrigger";0&&(module.exports={Editable,EditableCancelTrigger,EditableEditTrigger,EditableInput,EditableLabel,EditablePreview,EditableProvider,EditableSubmitTrigger,EditableTextarea,useEditableContext});

package/dist/editable/Editable.d.cts

@@ -31,8 +31,21 @@ export declare const EditableProvider: {
  *   after an inline edit strands keyboard users mid-page, so the root drives
  *   this rather than leaving it to the unmounting input.
  *
+ * Given no children, it derives its own preview and a single- or multi-line
+ * editor from `multiline`, forwarding this root's own `aria-label`/
+ * `aria-labelledby` onto the editor. Given children, `multiline` is ignored
+ * and the children are rendered verbatim, for full manual composition; reach
+ * for `Editable` from `@skdx/react/primitives/editable` for that case.
+ *
  * @example
  * ```tsx
+ * <Editable defaultValue="Untitled" placeholder="Name this board" onValueCommit={save} aria-label="Board name" />
+ * ```
+ *
+ * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/editable`.
+ * ```tsx
+ * import { Editable, EditableInput, EditablePreview } from '@skdx/react/primitives/editable';
+ *
  * <Editable defaultValue="Untitled" placeholder="Name this board" onValueCommit={save}>
  *   <EditablePreview />
  *   <EditableInput aria-label="Board name" />

package/dist/editable/Editable.d.ts

@@ -31,8 +31,21 @@ export declare const EditableProvider: {
  *   after an inline edit strands keyboard users mid-page, so the root drives
  *   this rather than leaving it to the unmounting input.
  *
+ * Given no children, it derives its own preview and a single- or multi-line
+ * editor from `multiline`, forwarding this root's own `aria-label`/
+ * `aria-labelledby` onto the editor. Given children, `multiline` is ignored
+ * and the children are rendered verbatim, for full manual composition; reach
+ * for `Editable` from `@skdx/react/primitives/editable` for that case.
+ *
  * @example
  * ```tsx
+ * <Editable defaultValue="Untitled" placeholder="Name this board" onValueCommit={save} aria-label="Board name" />
+ * ```
+ *
+ * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/editable`.
+ * ```tsx
+ * import { Editable, EditableInput, EditablePreview } from '@skdx/react/primitives/editable';
+ *
  * <Editable defaultValue="Untitled" placeholder="Name this board" onValueCommit={save}>
  *   <EditablePreview />
  *   <EditableInput aria-label="Board name" />

package/dist/editable/Editable.js

@@ -1 +1 @@
-import*as n from"react";import{createSafeContext as _}from"../utils/createContext.js";import{skdxPart as $}from"../utils/part.js";import{Primitive as j}from"../utils/primitive.js";import{useControllableState as M}from"../utils/useControllableState.js";import{jsx as k}from"react/jsx-runtime";var[ee,o]=_("Editable"),te=n.forwardRef(({value:t,defaultValue:r,onValueChange:e,onValueCommit:a,editing:i,defaultEditing:u=!1,onEditChange:z,placeholder:G,disabled:c=!1,readOnly:b=!1,required:R=!1,maxLength:J,activationMode:Q="click",submitMode:U="both",selectOnFocus:x=!0,...P},W)=>{let[s="",p]=M({prop:t,defaultProp:r??"",onChange:e}),[l=!1,m]=M({prop:i,defaultProp:u,onChange:z}),T=n.useRef(null),C=n.useRef(null),E=n.useRef(!1),g=n.useRef(s),X=()=>{c||b||l||(g.current=s,m(!0))},Y=()=>{l&&(p(g.current),m(!1))},Z=()=>{if(l){if(R&&s.trim()===""){p(g.current),m(!1);return}m(!1),a?.(s)}},w=n.useRef(l);return n.useEffect(()=>{if(l){let d=T.current;d&&(d.focus(),x?d.select():d.setSelectionRange(d.value.length,d.value.length))}else if(w.current){let d=document.activeElement;(!d||d===document.body)&&(E.current=!0,C.current?.focus(),E.current=!1)}w.current=l},[l,x]),k(ee,{value:s,editing:l,placeholder:G,disabled:c,readOnly:b,required:R,maxLength:J,activationMode:Q,submitMode:U,inputRef:T,previewRef:C,returningFocusRef:E,setValue:p,activate:X,submit:Z,cancel:Y,children:k(j.div,{"data-state":l?"editing":"preview","data-empty":s===""?"":void 0,"data-disabled":c?"":void 0,"data-readonly":b?"":void 0,...P,...$("editable","root",P.className),ref:W})})});te.displayName="Editable";import*as D from"react";import{skdxPart as ae}from"../utils/part.js";import{composeEventHandlers as h,Primitive as ie}from"../utils/primitive.js";import{jsx as re}from"react/jsx-runtime";var H=D.forwardRef((t,r)=>{let e=o("EditableCancelTrigger");return e.editing?re(ie.button,{type:"button","data-state":"editing",disabled:e.disabled,...t,...ae("editable","cancel-trigger",t.className),ref:r,onMouseDown:h(t.onMouseDown,a=>{a.preventDefault()}),onClick:h(t.onClick,()=>e.cancel())}):null});H.displayName="EditableCancelTrigger";import*as L from"react";import{skdxPart as oe}from"../utils/part.js";import{composeEventHandlers as ne,Primitive as le}from"../utils/primitive.js";import{jsx as de}from"react/jsx-runtime";var N=L.forwardRef((t,r)=>{let e=o("EditableEditTrigger");return e.editing?null:de(le.button,{type:"button","data-state":"preview",disabled:e.disabled||e.readOnly,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,...oe("editable","edit-trigger",t.className),ref:r,onClick:ne(t.onClick,()=>e.activate())})});N.displayName="EditableEditTrigger";import*as S from"react";import{useComposedRefs as se}from"../utils/composeRefs.js";import{skdxPart as ue}from"../utils/part.js";import{composeEventHandlers as v,Primitive as me}from"../utils/primitive.js";import{jsx as fe}from"react/jsx-runtime";var I=S.forwardRef((t,r)=>{let e=o("EditableInput"),a=se(r,e.inputRef);return e.editing?fe(me.input,{type:"text",value:e.value,placeholder:e.placeholder,disabled:e.disabled,readOnly:e.readOnly,required:e.required,maxLength:e.maxLength,"data-state":"editing","data-empty":e.value===""?"":void 0,...t,...ue("editable","input",t.className),ref:a,onChange:v(t.onChange,i=>{e.setValue(i.target.value)}),onKeyDown:v(t.onKeyDown,i=>{if(i.key==="Escape"){i.preventDefault(),e.cancel();return}i.key==="Enter"&&(e.submitMode==="enter"||e.submitMode==="both")&&(i.preventDefault(),e.submit())}),onBlur:v(t.onBlur,()=>{(e.submitMode==="blur"||e.submitMode==="both")&&e.submit()})}):null});I.displayName="EditableInput";import*as K from"react";import{useComposedRefs as ce}from"../utils/composeRefs.js";import{skdxPart as be}from"../utils/part.js";import{composeEventHandlers as f,Primitive as pe}from"../utils/primitive.js";import{jsx as Ee}from"react/jsx-runtime";var O=K.forwardRef(({children:t,...r},e)=>{let a=o("EditablePreview"),i=ce(e,a.previewRef);return a.editing?null:Ee(pe.span,{role:"button",tabIndex:a.disabled?-1:0,"aria-disabled":a.disabled||void 0,"aria-readonly":a.readOnly||void 0,"data-state":"preview","data-empty":a.value===""?"":void 0,"data-disabled":a.disabled?"":void 0,"data-readonly":a.readOnly?"":void 0,...r,...be("editable","preview",r.className),ref:i,onClick:f(r.onClick,()=>{a.activationMode==="click"&&a.activate()}),onDoubleClick:f(r.onDoubleClick,()=>{a.activationMode==="dblclick"&&a.activate()}),onFocus:f(r.onFocus,()=>{a.activationMode==="focus"&&!a.returningFocusRef.current&&a.activate()}),onKeyDown:f(r.onKeyDown,u=>{u.key!=="Enter"&&u.key!==" "||(u.preventDefault(),a.activate())}),children:t??(a.value||a.placeholder)})});O.displayName="EditablePreview";import*as V from"react";import{skdxPart as ge}from"../utils/part.js";import{composeEventHandlers as B,Primitive as ve}from"../utils/primitive.js";import{jsx as ye}from"react/jsx-runtime";var q=V.forwardRef((t,r)=>{let e=o("EditableSubmitTrigger");return e.editing?ye(ve.button,{type:"button","data-state":"editing",disabled:e.disabled,...t,...ge("editable","submit-trigger",t.className),ref:r,onMouseDown:B(t.onMouseDown,a=>{a.preventDefault()}),onClick:B(t.onClick,()=>e.submit())}):null});q.displayName="EditableSubmitTrigger";import*as A from"react";import{useComposedRefs as Re}from"../utils/composeRefs.js";import{skdxPart as xe}from"../utils/part.js";import{composeEventHandlers as y,Primitive as Pe}from"../utils/primitive.js";import{jsx as Te}from"react/jsx-runtime";var F=A.forwardRef((t,r)=>{let e=o("EditableTextarea"),a=Re(r,e.inputRef);return e.editing?Te(Pe.textarea,{value:e.value,placeholder:e.placeholder,disabled:e.disabled,readOnly:e.readOnly,required:e.required,maxLength:e.maxLength,"data-state":"editing","data-empty":e.value===""?"":void 0,...t,...xe("editable","textarea",t.className),ref:a,onChange:y(t.onChange,i=>{e.setValue(i.target.value)}),onKeyDown:y(t.onKeyDown,i=>{if(i.key==="Escape"){i.preventDefault(),e.cancel();return}i.key==="Enter"&&(!i.metaKey&&!i.ctrlKey||e.submitMode!=="enter"&&e.submitMode!=="both"||(i.preventDefault(),e.submit()))}),onBlur:y(t.onBlur,()=>{(e.submitMode==="blur"||e.submitMode==="both")&&e.submit()})}):null});F.displayName="EditableTextarea";export{te as Editable,H as EditableCancelTrigger,N as EditableEditTrigger,I as EditableInput,O as EditablePreview,ee as EditableProvider,q as EditableSubmitTrigger,F as EditableTextarea,o as useEditableContext};
+import*as n from"react";import{createSafeContext as Fe}from"../utils/createContext.js";import{HiddenInput as ze}from"../utils/hiddenInput.js";import{skdxPart as We}from"../utils/part.js";import{Primitive as Ue}from"../utils/primitive.js";import{useControllableState as de}from"../utils/useControllableState.js";import*as ee from"react";import{skdxPart as we}from"../utils/part.js";import{composeEventHandlers as j,Primitive as Pe}from"../utils/primitive.js";import{jsx as Te}from"react/jsx-runtime";var S=ee.forwardRef((t,a)=>{let e=d("EditableCancelTrigger");return e.editing?Te(Pe.button,{type:"button","data-state":"editing",disabled:e.disabled,...t,...we("editable","cancel-trigger",t.className),ref:a,onMouseDown:j(t.onMouseDown,i=>{i.preventDefault()}),onClick:j(t.onClick,()=>e.cancel())}):null});S.displayName="EditableCancelTrigger";import*as te from"react";import{useComposedRefs as Ce}from"../utils/composeRefs.js";import{skdxPart as Me}from"../utils/part.js";import{composeEventHandlers as N,Primitive as Le}from"../utils/primitive.js";import{jsx as ke}from"react/jsx-runtime";var B=te.forwardRef((t,a)=>{let e=d("EditableInput"),i=Ce(a,e.inputRef);return e.editing?ke(Le.input,{type:"text",id:e.editorId,value:e.value,placeholder:e.editPlaceholder,disabled:e.disabled,readOnly:e.readOnly,required:e.required,"aria-required":e.required||void 0,"aria-invalid":e.invalid||void 0,maxLength:e.maxLength,"data-state":"editing","data-empty":e.value===""?"":void 0,"data-invalid":e.invalid?"":void 0,...t,...Me("editable","input",t.className),ref:i,onChange:N(t.onChange,l=>{e.setValue(l.target.value)}),onKeyDown:N(t.onKeyDown,l=>{if(l.key==="Escape"){l.preventDefault(),e.cancel();return}l.key==="Enter"&&(e.submitMode==="enter"||e.submitMode==="both")&&(l.preventDefault(),e.submit())}),onBlur:N(t.onBlur,()=>{(e.submitMode==="blur"||e.submitMode==="both")&&e.submit()})}):null});B.displayName="EditableInput";import*as ie from"react";import{useComposedRefs as He}from"../utils/composeRefs.js";import{skdxPart as Ie}from"../utils/part.js";import{composeEventHandlers as C,Primitive as De}from"../utils/primitive.js";import{jsx as Se}from"react/jsx-runtime";var q=ie.forwardRef(({children:t,...a},e)=>{let i=d("EditablePreview"),l=He(e,i.previewRef);return i.editing?null:Se(De.span,{role:"button",tabIndex:i.disabled?-1:0,"aria-labelledby":i.labelPresent?i.labelId:void 0,"aria-disabled":i.disabled||i.readOnly||void 0,"data-state":"preview","data-empty":i.value===""?"":void 0,"data-disabled":i.disabled?"":void 0,"data-readonly":i.readOnly?"":void 0,"data-invalid":i.invalid?"":void 0,...a,...Ie("editable","preview",a.className),ref:l,onClick:C(a.onClick,()=>{i.activationMode==="click"&&i.activate()}),onDoubleClick:C(a.onDoubleClick,()=>{i.activationMode==="dblclick"&&i.activate()}),onFocus:C(a.onFocus,()=>{i.activationMode==="focus"&&!i.returningFocusRef.current&&i.activate()}),onKeyDown:C(a.onKeyDown,p=>{p.key!=="Enter"&&p.key!==" "||(p.preventDefault(),i.activate())}),children:t??(i.value||i.previewPlaceholder)})});q.displayName="EditablePreview";import*as re from"react";import{skdxPart as Ne}from"../utils/part.js";import{composeEventHandlers as ae,Primitive as Be}from"../utils/primitive.js";import{jsx as qe}from"react/jsx-runtime";var V=re.forwardRef((t,a)=>{let e=d("EditableSubmitTrigger");return e.editing?qe(Be.button,{type:"button","data-state":"editing",disabled:e.disabled,...t,...Ne("editable","submit-trigger",t.className),ref:a,onMouseDown:ae(t.onMouseDown,i=>{i.preventDefault()}),onClick:ae(t.onClick,()=>e.submit())}):null});V.displayName="EditableSubmitTrigger";import*as b from"react";import{useComposedRefs as Ve}from"../utils/composeRefs.js";import{skdxPart as Ae}from"../utils/part.js";import{composeEventHandlers as A,Primitive as Oe}from"../utils/primitive.js";import{jsx as Ke}from"react/jsx-runtime";var O=b.forwardRef(({autoResize:t=!1,maxRows:a,minRows:e=2,style:i,...l},p)=>{let r=d("EditableTextarea"),w=b.useRef(null),L=Ve(p,w,r.inputRef),v=b.useCallback(()=>{let o=w.current;if(!o||!t)return;let f=getComputedStyle(o),c=E=>parseFloat(E)||0,h=c(f.borderTopWidth)+c(f.borderBottomWidth),P=c(f.paddingTop)+c(f.paddingBottom),y=f.boxSizing==="border-box",x=c(f.lineHeight),T=E=>E*x+(y?P+h:0);o.style.height="auto";let g=o.scrollHeight+(y?h:-P);e!=null&&x>0&&(g=Math.max(g,T(e))),a!=null&&x>0&&(g=Math.min(g,T(a))),o.style.height=`${g}px`},[t,a,e]);return b.useLayoutEffect(()=>{v()},[v,r.value,r.editing]),r.editing?Ke(Oe.textarea,{rows:t?void 0:e,id:r.editorId,value:r.value,placeholder:r.editPlaceholder,disabled:r.disabled,readOnly:r.readOnly,required:r.required,"aria-required":r.required||void 0,"aria-invalid":r.invalid||void 0,maxLength:r.maxLength,"data-state":"editing","data-empty":r.value===""?"":void 0,"data-invalid":r.invalid?"":void 0,...l,...Ae("editable","textarea",l.className),ref:L,style:t?{overflow:"hidden",resize:"none",...i}:i,onChange:A(l.onChange,o=>{r.setValue(o.target.value),v()}),onKeyDown:A(l.onKeyDown,o=>{if(o.key==="Escape"){o.preventDefault(),r.cancel();return}o.key==="Enter"&&(!o.metaKey&&!o.ctrlKey||r.submitMode!=="enter"&&r.submitMode!=="both"||(o.preventDefault(),r.submit()))}),onBlur:A(l.onBlur,()=>{(r.submitMode==="blur"||r.submitMode==="both")&&r.submit()})}):null});O.displayName="EditableTextarea";import{Fragment as ne,jsx as R,jsxs as oe}from"react/jsx-runtime";var le=({multiline:t,ariaLabel:a,ariaLabelledBy:e,showControls:i})=>oe(ne,{children:[R(q,{}),t?R(O,{"aria-label":a,"aria-labelledby":e}):R(B,{"aria-label":a,"aria-labelledby":e}),i?oe(ne,{children:[R(V,{children:"Save"}),R(S,{children:"Cancel"})]}):null]});import{jsx as K,jsxs as Je}from"react/jsx-runtime";var[$e,d]=Fe("Editable");function Ge(t){return t===void 0?{edit:void 0,preview:void 0}:typeof t=="string"?{edit:t,preview:t}:{edit:t.edit,preview:t.preview}}var se=n.forwardRef(({value:t,defaultValue:a,onValueChange:e,onValueCommit:i,onValueRevert:l,editing:p,defaultEditing:r=!1,onEditChange:w,placeholder:L,finalFocusEl:v,disabled:o=!1,readOnly:f=!1,required:c=!1,invalid:h=!1,maxLength:P,name:y,form:x,activationMode:T="click",submitMode:g="both",selectOnFocus:E=!0,multiline:fe=!1,showControls:me=!1,children:k,"aria-label":F,"aria-labelledby":z,...W},ce)=>{let[s="",U]=de({prop:t,defaultProp:a??"",onChange:e}),[be,pe]=n.useState(s),[m=!1,H]=de({prop:p,defaultProp:r,onChange:w}),ve=n.useId(),ge=n.useId(),[Ee,he]=n.useState(!1),$=Ge(L),G=n.useRef(null),J=n.useRef(null),I=n.useRef(!1),Q=n.useRef(s),X=n.useRef(s);n.useEffect(()=>{X.current=s},[s]);let Y=n.useRef(v);n.useEffect(()=>{Y.current=v},[v]);let ye=()=>{o||f||m||H(!0)},Z=()=>{let u=s,_=Q.current;U(_),H(!1),l?.({value:_,previousValue:u})},xe=()=>{m&&Z()},Re=()=>{if(m){if(c&&s.trim()===""){Z();return}H(!1),pe(s),i?.(s)}},D=n.useRef(m);return n.useEffect(()=>{if(m){D.current||(Q.current=X.current);let u=G.current;u&&(u.focus(),E?u.select():u.setSelectionRange(u.value.length,u.value.length))}else if(D.current){let u=document.activeElement;(!u||u===document.body)&&(I.current=!0,(Y.current?.()??J.current)?.focus(),I.current=!1)}D.current=m},[m,E]),Je($e,{value:s,editing:m,editPlaceholder:$.edit,previewPlaceholder:$.preview,editorId:ve,labelId:ge,labelPresent:Ee,setLabelPresent:he,disabled:o,readOnly:f,required:c,invalid:h,maxLength:P,activationMode:T,submitMode:g,inputRef:G,previewRef:J,returningFocusRef:I,setValue:U,activate:ye,submit:Re,cancel:xe,children:[K(Ue.div,{"data-state":m?"editing":"preview","data-empty":s===""?"":void 0,"data-disabled":o?"":void 0,"data-readonly":f?"":void 0,"data-invalid":h?"":void 0,"aria-label":k?F:void 0,"aria-labelledby":k?z:void 0,...W,...We("editable","root",W.className),ref:ce,children:k??K(le,{multiline:fe,ariaLabel:F,ariaLabelledBy:z,showControls:me})}),y&&K(ze,{type:"text",name:y,value:be,form:x})]})});se.displayName="Editable";import*as M from"react";import{skdxPart as Qe}from"../utils/part.js";import{Primitive as Xe}from"../utils/primitive.js";import{jsx as Ze}from"react/jsx-runtime";var Ye=M.forwardRef((t,a)=>{let e=d("EditableLabel"),{setLabelPresent:i}=e;return M.useEffect(()=>(i(!0),()=>i(!1)),[i]),Ze(Xe.label,{id:e.labelId,htmlFor:e.editorId,...t,...Qe("editable","label",t.className),ref:a})});Ye.displayName="EditableLabel";import*as ue from"react";import{skdxPart as _e}from"../utils/part.js";import{composeEventHandlers as je,Primitive as et}from"../utils/primitive.js";import{jsx as it}from"react/jsx-runtime";var tt=ue.forwardRef((t,a)=>{let e=d("EditableEditTrigger");return e.editing?null:it(et.button,{type:"button","data-state":"preview",disabled:e.disabled||e.readOnly,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,..._e("editable","edit-trigger",t.className),ref:a,onClick:je(t.onClick,()=>e.activate())})});tt.displayName="EditableEditTrigger";export{se as Editable,S as EditableCancelTrigger,tt as EditableEditTrigger,B as EditableInput,Ye as EditableLabel,q as EditablePreview,$e as EditableProvider,V as EditableSubmitTrigger,O as EditableTextarea,d as useEditableContext};

package/dist/editable/EditableAnatomy.d.cts

@@ -0,0 +1,11 @@
+/**
+ * Default anatomy for {@link Editable}: preview, editor, and optional Submit/Cancel. Forwards root's `aria-label`/`aria-labelledby` to the editor.
+ *
+ * @internal
+ */
+export declare const EditableAnatomy: ({ multiline, ariaLabel, ariaLabelledBy, showControls, }: {
+    multiline?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    showControls?: boolean;
+}) => import("react").JSX.Element;

package/dist/editable/EditableAnatomy.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Default anatomy for {@link Editable}: preview, editor, and optional Submit/Cancel. Forwards root's `aria-label`/`aria-labelledby` to the editor.
+ *
+ * @internal
+ */
+export declare const EditableAnatomy: ({ multiline, ariaLabel, ariaLabelledBy, showControls, }: {
+    multiline?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    showControls?: boolean;
+}) => import("react").JSX.Element;

package/dist/editable/EditableCancelTrigger.d.cts

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import type { EditableCancelTriggerProps } from './types.cjs';
 /**
- * A button that discards the current draft of an {@link Editable} and restores
- * the pre-edit text — the pointer equivalent of Escape. Renders `nothing`
- * outside edit mode.
- *
- * Like `EditableSubmitTrigger` it calls `preventDefault()` on mouse-down so
- * the input keeps focus, and here that is load-bearing rather than merely
- * tidy: without it, under the default `submitMode="both"`, the blur would
- * *submit* the very draft this button exists to throw away.
+ * Discards the current draft and restores pre-edit text — the pointer
+ * equivalent of Escape. Renders nothing outside edit mode. Calls
+ * `preventDefault()` on mouse-down so the input keeps focus; under
+ * `submitMode="both"`, blur would otherwise submit the draft.
  *
  * @example
  * ```tsx

package/dist/editable/EditableCancelTrigger.d.ts

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import type { EditableCancelTriggerProps } from './types.js';
 /**
- * A button that discards the current draft of an {@link Editable} and restores
- * the pre-edit text — the pointer equivalent of Escape. Renders `nothing`
- * outside edit mode.
- *
- * Like `EditableSubmitTrigger` it calls `preventDefault()` on mouse-down so
- * the input keeps focus, and here that is load-bearing rather than merely
- * tidy: without it, under the default `submitMode="both"`, the blur would
- * *submit* the very draft this button exists to throw away.
+ * Discards the current draft and restores pre-edit text — the pointer
+ * equivalent of Escape. Renders nothing outside edit mode. Calls
+ * `preventDefault()` on mouse-down so the input keeps focus; under
+ * `submitMode="both"`, blur would otherwise submit the draft.
  *
  * @example
  * ```tsx

package/dist/editable/EditableEditTrigger.d.cts

@@ -1,16 +1,9 @@
 import * as React from 'react';
 import type { EditableEditTriggerProps } from './types.cjs';
 /**
- * A button that opens an edit from *outside* the preview — a pencil icon in a
- * table row, an "Edit" item in a toolbar. Renders `nothing` while editing.
- * Disabled whenever the root is `disabled` or `readOnly`, since neither can be
- * edited.
+ * Opens edit from outside preview — renders nothing while editing. Disabled when root is disabled/readOnly.
  *
- * It is the discoverable counterpart to `activationMode`: `'dblclick'` avoids
- * accidental edits but is invisible, so pair the two when the surface is
- * read-mostly. Focus still lands on the input when the edit opens, and returns
- * to the *preview* — not to this trigger — when it closes, because the preview
- * is where the text the user was just working on now lives.
+ * Discoverable counterpart to `activationMode`: pair with `'dblclick'` on read-mostly surfaces.
  *
  * @example
  * ```tsx

package/dist/editable/EditableEditTrigger.d.ts

@@ -1,16 +1,9 @@
 import * as React from 'react';
 import type { EditableEditTriggerProps } from './types.js';
 /**
- * A button that opens an edit from *outside* the preview — a pencil icon in a
- * table row, an "Edit" item in a toolbar. Renders `nothing` while editing.
- * Disabled whenever the root is `disabled` or `readOnly`, since neither can be
- * edited.
+ * Opens edit from outside preview — renders nothing while editing. Disabled when root is disabled/readOnly.
  *
- * It is the discoverable counterpart to `activationMode`: `'dblclick'` avoids
- * accidental edits but is invisible, so pair the two when the surface is
- * read-mostly. Focus still lands on the input when the edit opens, and returns
- * to the *preview* — not to this trigger — when it closes, because the preview
- * is where the text the user was just working on now lives.
+ * Discoverable counterpart to `activationMode`: pair with `'dblclick'` on read-mostly surfaces.
  *
  * @example
  * ```tsx