@skdx/react 0.27.0 → 0.29.0

package/dist/editable/Editable.cjs

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

package/dist/editable/Editable.d.cts

@@ -1,42 +1,17 @@
 import * as React from 'react';
 import type { EditableContextValue, EditableProps } from './types.cjs';
-export declare const EditableProvider: {
-    (props: EditableContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useEditableContext: (consumerName: string) => EditableContextValue;
+export declare const EditableProvider: React.FC<EditableContextValue & {
+    children: React.ReactNode;
+}>, useEditableContext: (consumerName: string) => EditableContextValue;
 /**
- * Root of a click-to-edit inline text field: owns the text **and** the
- * preview/edit mode, and hands both down to its parts via context. Renders a
- * plain `<div>` carrying `data-state="editing" | "preview"` and `data-empty`
- * — how preview and input sit in the layout is entirely your CSS.
- *
- * Both pieces of state are independently controllable: `value`/`defaultValue`/
- * `onValueChange` for the text, `editing`/`defaultEditing`/`onEditChange` for
- * the mode. `value` tracks the live draft, so it changes per keystroke;
- * `onValueCommit` is the one that fires once, on a successful submit.
- *
- * The state machine, in full:
- * - **Enter edit** — the gesture named by `activationMode` on the preview, or
- *   Enter/Space while the preview has focus, or `EditableEditTrigger`. The
- *   pre-edit text is snapshotted, then the input is focused with everything
- *   selected (`selectOnFocus`, default) or the caret at the end.
- * - **Submit** — the gestures named by `submitMode`, or `EditableSubmitTrigger`.
- *   Commits, unless `required` and the draft is blank, in which case the
- *   snapshot is restored instead and nothing is committed.
- * - **Cancel** — Escape, always, whatever `submitMode` says, or
- *   `EditableCancelTrigger`. Restores the snapshot.
- * - **Either exit returns focus to the preview.** Losing focus to `<body>`
- *   after an inline edit strands keyboard users mid-page, so the root drives
- *   this rather than leaving it to the unmounting input.
+ * Root of a click-to-edit inline text field, owning the text and the preview/edit mode, rendering a `<div>` with `data-state="editing"|"preview"` and `data-empty` for your CSS to lay out.
  *
  * @example
  * ```tsx
- * <Editable defaultValue="Untitled" placeholder="Name this board" onValueCommit={save}>
- *   <EditablePreview />
- *   <EditableInput aria-label="Board name" />
- * </Editable>
+ * <Editable defaultValue="Untitled" placeholder="Name this board" onValueCommit={save} aria-label="Board name" />
  * ```
  */
-export declare const Editable: React.ForwardRefExoticComponent<Omit<EditableProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Editable: {
+    ({ value: valueProp, defaultValue, onValueChange, onValueCommit, onValueRevert, editing: editingProp, defaultEditing, onEditChange, placeholder, finalFocusEl, disabled, readOnly, required, invalid, maxLength, name, form, activationMode, submitMode, selectOnFocus, multiline, showControls, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref: forwardedRef, ...props }: EditableProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/Editable.d.ts

@@ -1,42 +1,17 @@
 import * as React from 'react';
 import type { EditableContextValue, EditableProps } from './types.js';
-export declare const EditableProvider: {
-    (props: EditableContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useEditableContext: (consumerName: string) => EditableContextValue;
+export declare const EditableProvider: React.FC<EditableContextValue & {
+    children: React.ReactNode;
+}>, useEditableContext: (consumerName: string) => EditableContextValue;
 /**
- * Root of a click-to-edit inline text field: owns the text **and** the
- * preview/edit mode, and hands both down to its parts via context. Renders a
- * plain `<div>` carrying `data-state="editing" | "preview"` and `data-empty`
- * — how preview and input sit in the layout is entirely your CSS.
- *
- * Both pieces of state are independently controllable: `value`/`defaultValue`/
- * `onValueChange` for the text, `editing`/`defaultEditing`/`onEditChange` for
- * the mode. `value` tracks the live draft, so it changes per keystroke;
- * `onValueCommit` is the one that fires once, on a successful submit.
- *
- * The state machine, in full:
- * - **Enter edit** — the gesture named by `activationMode` on the preview, or
- *   Enter/Space while the preview has focus, or `EditableEditTrigger`. The
- *   pre-edit text is snapshotted, then the input is focused with everything
- *   selected (`selectOnFocus`, default) or the caret at the end.
- * - **Submit** — the gestures named by `submitMode`, or `EditableSubmitTrigger`.
- *   Commits, unless `required` and the draft is blank, in which case the
- *   snapshot is restored instead and nothing is committed.
- * - **Cancel** — Escape, always, whatever `submitMode` says, or
- *   `EditableCancelTrigger`. Restores the snapshot.
- * - **Either exit returns focus to the preview.** Losing focus to `<body>`
- *   after an inline edit strands keyboard users mid-page, so the root drives
- *   this rather than leaving it to the unmounting input.
+ * Root of a click-to-edit inline text field, owning the text and the preview/edit mode, rendering a `<div>` with `data-state="editing"|"preview"` and `data-empty` for your CSS to lay out.
  *
  * @example
  * ```tsx
- * <Editable defaultValue="Untitled" placeholder="Name this board" onValueCommit={save}>
- *   <EditablePreview />
- *   <EditableInput aria-label="Board name" />
- * </Editable>
+ * <Editable defaultValue="Untitled" placeholder="Name this board" onValueCommit={save} aria-label="Board name" />
  * ```
  */
-export declare const Editable: React.ForwardRefExoticComponent<Omit<EditableProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Editable: {
+    ({ value: valueProp, defaultValue, onValueChange, onValueCommit, onValueRevert, editing: editingProp, defaultEditing, onEditChange, placeholder, finalFocusEl, disabled, readOnly, required, invalid, maxLength, name, form, activationMode, submitMode, selectOnFocus, multiline, showControls, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref: forwardedRef, ...props }: EditableProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/Editable.js

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

package/dist/editable/EditableAnatomy.d.cts

@@ -0,0 +1,12 @@
+import type { JSX } from 'react';
+/**
+ * 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 | undefined;
+    ariaLabel?: string | undefined;
+    ariaLabelledBy?: string | undefined;
+    showControls?: boolean | undefined;
+}) => JSX.Element;

package/dist/editable/EditableAnatomy.d.ts

@@ -0,0 +1,12 @@
+import type { JSX } from 'react';
+/**
+ * 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 | undefined;
+    ariaLabel?: string | undefined;
+    ariaLabelledBy?: string | undefined;
+    showControls?: boolean | undefined;
+}) => JSX.Element;

package/dist/editable/EditableCancelTrigger.d.cts

@@ -1,14 +1,7 @@
-import * as React from 'react';
+import type * 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 the pre-edit text — the pointer equivalent of Escape — rendering nothing outside edit mode.
  *
  * @example
  * ```tsx
@@ -19,4 +12,7 @@ import type { EditableCancelTriggerProps } from './types.cjs';
  * </Editable>
  * ```
  */
-export declare const EditableCancelTrigger: React.ForwardRefExoticComponent<Omit<EditableCancelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const EditableCancelTrigger: {
+    ({ ref: forwardedRef, ...props }: EditableCancelTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditableCancelTrigger.d.ts

@@ -1,14 +1,7 @@
-import * as React from 'react';
+import type * 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 the pre-edit text — the pointer equivalent of Escape — rendering nothing outside edit mode.
  *
  * @example
  * ```tsx
@@ -19,4 +12,7 @@ import type { EditableCancelTriggerProps } from './types.js';
  * </Editable>
  * ```
  */
-export declare const EditableCancelTrigger: React.ForwardRefExoticComponent<Omit<EditableCancelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const EditableCancelTrigger: {
+    ({ ref: forwardedRef, ...props }: EditableCancelTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditableEditTrigger.d.cts

@@ -1,16 +1,7 @@
-import * as React from 'react';
+import type * 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.
- *
- * 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.
+ * Opens edit from outside the preview, rendering nothing while editing and disabled when the root is disabled/readOnly.
  *
  * @example
  * ```tsx
@@ -21,4 +12,7 @@ import type { EditableEditTriggerProps } from './types.cjs';
  * </Editable>
  * ```
  */
-export declare const EditableEditTrigger: React.ForwardRefExoticComponent<Omit<EditableEditTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const EditableEditTrigger: {
+    ({ ref: forwardedRef, ...props }: EditableEditTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditableEditTrigger.d.ts

@@ -1,16 +1,7 @@
-import * as React from 'react';
+import type * 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.
- *
- * 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.
+ * Opens edit from outside the preview, rendering nothing while editing and disabled when the root is disabled/readOnly.
  *
  * @example
  * ```tsx
@@ -21,4 +12,7 @@ import type { EditableEditTriggerProps } from './types.js';
  * </Editable>
  * ```
  */
-export declare const EditableEditTrigger: React.ForwardRefExoticComponent<Omit<EditableEditTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const EditableEditTrigger: {
+    ({ ref: forwardedRef, ...props }: EditableEditTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditableInput.d.cts

@@ -1,18 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { EditableInputProps } from './types.cjs';
 /**
- * The single-line editor for an {@link Editable}. Renders `nothing` outside
- * edit mode, and a controlled `<input type="text">` inside it, taking its
- * value, `placeholder`, `disabled`, `readOnly`, `required` and `maxLength`
- * from the root — so the only prop you normally pass is an accessible name.
- *
- * Key handling: Escape always cancels and restores the pre-edit text; Enter
- * submits when `submitMode` is `'enter'` or `'both'`; blur submits when it is
- * `'blur'` or `'both'`. For multi-line text where Enter has to mean *newline*,
- * use `EditableTextarea` instead.
- *
- * The root focuses this element and selects (or places the caret at the end
- * of) its content when edit mode opens; you do not have to focus it yourself.
+ * The single-line editor for an {@link Editable} — a controlled `<input type="text">` rendered only in edit mode, taking its value and constraints from the root and submitting on Enter/blur per `submitMode`.
  *
  * @example
  * ```tsx
@@ -22,4 +11,7 @@ import type { EditableInputProps } from './types.cjs';
  * </Editable>
  * ```
  */
-export declare const EditableInput: React.ForwardRefExoticComponent<Omit<EditableInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const EditableInput: {
+    ({ ref: forwardedRef, ...props }: EditableInputProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditableInput.d.ts

@@ -1,18 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { EditableInputProps } from './types.js';
 /**
- * The single-line editor for an {@link Editable}. Renders `nothing` outside
- * edit mode, and a controlled `<input type="text">` inside it, taking its
- * value, `placeholder`, `disabled`, `readOnly`, `required` and `maxLength`
- * from the root — so the only prop you normally pass is an accessible name.
- *
- * Key handling: Escape always cancels and restores the pre-edit text; Enter
- * submits when `submitMode` is `'enter'` or `'both'`; blur submits when it is
- * `'blur'` or `'both'`. For multi-line text where Enter has to mean *newline*,
- * use `EditableTextarea` instead.
- *
- * The root focuses this element and selects (or places the caret at the end
- * of) its content when edit mode opens; you do not have to focus it yourself.
+ * The single-line editor for an {@link Editable} — a controlled `<input type="text">` rendered only in edit mode, taking its value and constraints from the root and submitting on Enter/blur per `submitMode`.
  *
  * @example
  * ```tsx
@@ -22,4 +11,7 @@ import type { EditableInputProps } from './types.js';
  * </Editable>
  * ```
  */
-export declare const EditableInput: React.ForwardRefExoticComponent<Omit<EditableInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const EditableInput: {
+    ({ ref: forwardedRef, ...props }: EditableInputProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditableLabel.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { EditableLabelProps } from './types.cjs';
+/**
+ * Name for both halves — a real `<label htmlFor>` targeting the editor and the target for `EditablePreview`'s `aria-labelledby` — rendered in both modes so the name stays stable.
+ *
+ * @example
+ * ```tsx
+ * <Editable defaultValue="Untitled">
+ *   <EditableLabel>Board name</EditableLabel>
+ *   <EditablePreview />
+ *   <EditableInput />
+ * </Editable>
+ * ```
+ */
+export declare const EditableLabel: {
+    ({ ref: forwardedRef, ...props }: EditableLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditableLabel.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { EditableLabelProps } from './types.js';
+/**
+ * Name for both halves — a real `<label htmlFor>` targeting the editor and the target for `EditablePreview`'s `aria-labelledby` — rendered in both modes so the name stays stable.
+ *
+ * @example
+ * ```tsx
+ * <Editable defaultValue="Untitled">
+ *   <EditableLabel>Board name</EditableLabel>
+ *   <EditablePreview />
+ *   <EditableInput />
+ * </Editable>
+ * ```
+ */
+export declare const EditableLabel: {
+    ({ ref: forwardedRef, ...props }: EditableLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditablePreview.d.cts

@@ -1,20 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { EditablePreviewProps } from './types.cjs';
 /**
- * The read-mode half of an {@link Editable}: the text as it currently stands,
- * and the thing you interact with to start editing it. Renders `nothing` while
- * editing — the input has taken its place — and a `role="button"` `<span>`
- * otherwise, with `data-state="preview"`, `data-empty`, `data-disabled` and
- * `data-readonly`.
- *
- * With no children it renders the value, falling back to the root's
- * `placeholder` when empty. Pass children to render the value yourself (a
- * heading, a truncated cell); they replace the text entirely.
- *
- * It is a tab stop unless `disabled`, and Enter or Space opens the editor
- * whatever `activationMode` is set to — a click-to-edit affordance that only
- * responds to a mouse is not an affordance for half your users. This is also
- * the element focus comes back to when the edit ends.
+ * The read-mode half of an {@link Editable} — the current text, or your custom `children` — rendered as a `role="button"` `<span>` that opens the editor on click/Enter/Space per `activationMode`.
  *
  * @example
  * ```tsx
@@ -24,4 +11,7 @@ import type { EditablePreviewProps } from './types.cjs';
  * </Editable>
  * ```
  */
-export declare const EditablePreview: React.ForwardRefExoticComponent<Omit<EditablePreviewProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const EditablePreview: {
+    ({ children, ref: forwardedRef, ...props }: EditablePreviewProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditablePreview.d.ts

@@ -1,20 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { EditablePreviewProps } from './types.js';
 /**
- * The read-mode half of an {@link Editable}: the text as it currently stands,
- * and the thing you interact with to start editing it. Renders `nothing` while
- * editing — the input has taken its place — and a `role="button"` `<span>`
- * otherwise, with `data-state="preview"`, `data-empty`, `data-disabled` and
- * `data-readonly`.
- *
- * With no children it renders the value, falling back to the root's
- * `placeholder` when empty. Pass children to render the value yourself (a
- * heading, a truncated cell); they replace the text entirely.
- *
- * It is a tab stop unless `disabled`, and Enter or Space opens the editor
- * whatever `activationMode` is set to — a click-to-edit affordance that only
- * responds to a mouse is not an affordance for half your users. This is also
- * the element focus comes back to when the edit ends.
+ * The read-mode half of an {@link Editable} — the current text, or your custom `children` — rendered as a `role="button"` `<span>` that opens the editor on click/Enter/Space per `activationMode`.
  *
  * @example
  * ```tsx
@@ -24,4 +11,7 @@ import type { EditablePreviewProps } from './types.js';
  * </Editable>
  * ```
  */
-export declare const EditablePreview: React.ForwardRefExoticComponent<Omit<EditablePreviewProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const EditablePreview: {
+    ({ children, ref: forwardedRef, ...props }: EditablePreviewProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditableSubmitTrigger.d.cts

@@ -1,14 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { EditableSubmitTriggerProps } from './types.cjs';
 /**
- * A button that commits the current draft of an {@link Editable}. Renders
- * `nothing` outside edit mode. Required when `submitMode="none"`, optional
- * otherwise — a visible "Save" next to Enter-to-submit is the discoverable
- * version of the same action.
- *
- * It calls `preventDefault()` on mouse-down so that pressing it does not blur
- * the input first: under `submitMode="both"` that blur would submit and
- * unmount this button, so the click would land on nothing.
+ * A button that commits the current draft of an {@link Editable}, rendering nothing outside edit mode; required for `submitMode="none"`.
  *
  * @example
  * ```tsx
@@ -20,4 +13,7 @@ import type { EditableSubmitTriggerProps } from './types.cjs';
  * </Editable>
  * ```
  */
-export declare const EditableSubmitTrigger: React.ForwardRefExoticComponent<Omit<EditableSubmitTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const EditableSubmitTrigger: {
+    ({ ref: forwardedRef, ...props }: EditableSubmitTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditableSubmitTrigger.d.ts

@@ -1,14 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { EditableSubmitTriggerProps } from './types.js';
 /**
- * A button that commits the current draft of an {@link Editable}. Renders
- * `nothing` outside edit mode. Required when `submitMode="none"`, optional
- * otherwise — a visible "Save" next to Enter-to-submit is the discoverable
- * version of the same action.
- *
- * It calls `preventDefault()` on mouse-down so that pressing it does not blur
- * the input first: under `submitMode="both"` that blur would submit and
- * unmount this button, so the click would land on nothing.
+ * A button that commits the current draft of an {@link Editable}, rendering nothing outside edit mode; required for `submitMode="none"`.
  *
  * @example
  * ```tsx
@@ -20,4 +13,7 @@ import type { EditableSubmitTriggerProps } from './types.js';
  * </Editable>
  * ```
  */
-export declare const EditableSubmitTrigger: React.ForwardRefExoticComponent<Omit<EditableSubmitTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const EditableSubmitTrigger: {
+    ({ ref: forwardedRef, ...props }: EditableSubmitTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditableTextarea.d.cts

@@ -1,23 +1,17 @@
 import * as React from 'react';
 import type { EditableTextareaProps } from './types.cjs';
 /**
- * The multi-line editor for an {@link Editable} — a drop-in alternative to
- * `EditableInput`, never rendered alongside it. Renders `nothing` outside edit
- * mode, and a controlled `<textarea>` inside it, taking value, `placeholder`,
- * `disabled`, `readOnly`, `required` and `maxLength` from the root.
- *
- * The one behavioural difference is Enter, and it matters: in a multi-line
- * field Enter has to insert a newline, so **Cmd/Ctrl+Enter** submits instead
- * (still gated on `submitMode` including `'enter'`). A plain Enter is left
- * entirely alone. Escape still cancels, and blur still submits under
- * `submitMode` `'blur'`/`'both'`.
+ * Multi-line editor — a controlled `<textarea>` alternative to `EditableInput`, hidden outside edit mode, growing to fit with `autoResize`, and submitting on Cmd/Ctrl+Enter.
  *
  * @example
  * ```tsx
- * <Editable defaultValue="" placeholder="Add a note" submitMode="enter">
+ * <Editable defaultValue="" submitMode="enter">
  *   <EditablePreview />
  *   <EditableTextarea aria-label="Note" rows={4} />
  * </Editable>
  * ```
  */
-export declare const EditableTextarea: React.ForwardRefExoticComponent<Omit<EditableTextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const EditableTextarea: {
+    ({ autoResize, maxRows, minRows, style, ref: forwardedRef, ...props }: EditableTextareaProps): React.ReactNode;
+    displayName: string;
+};

package/dist/editable/EditableTextarea.d.ts

@@ -1,23 +1,17 @@
 import * as React from 'react';
 import type { EditableTextareaProps } from './types.js';
 /**
- * The multi-line editor for an {@link Editable} — a drop-in alternative to
- * `EditableInput`, never rendered alongside it. Renders `nothing` outside edit
- * mode, and a controlled `<textarea>` inside it, taking value, `placeholder`,
- * `disabled`, `readOnly`, `required` and `maxLength` from the root.
- *
- * The one behavioural difference is Enter, and it matters: in a multi-line
- * field Enter has to insert a newline, so **Cmd/Ctrl+Enter** submits instead
- * (still gated on `submitMode` including `'enter'`). A plain Enter is left
- * entirely alone. Escape still cancels, and blur still submits under
- * `submitMode` `'blur'`/`'both'`.
+ * Multi-line editor — a controlled `<textarea>` alternative to `EditableInput`, hidden outside edit mode, growing to fit with `autoResize`, and submitting on Cmd/Ctrl+Enter.
  *
  * @example
  * ```tsx
- * <Editable defaultValue="" placeholder="Add a note" submitMode="enter">
+ * <Editable defaultValue="" submitMode="enter">
  *   <EditablePreview />
  *   <EditableTextarea aria-label="Note" rows={4} />
  * </Editable>
  * ```
  */
-export declare const EditableTextarea: React.ForwardRefExoticComponent<Omit<EditableTextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const EditableTextarea: {
+    ({ autoResize, maxRows, minRows, style, ref: forwardedRef, ...props }: EditableTextareaProps): React.ReactNode;
+    displayName: string;
+};