@skdx/react 0.26.0 → 0.28.0

package/dist/rating/types.d.ts

@@ -1,14 +1,41 @@
+import type * as React from 'react';
 import type { FormValidityHandle } from '../utils/formControl.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/**
+ * Payload `onValueChange` receives: new value, previous value, and `reason`
+ * (keyboard/pointer/programmatic). Spelled out since headless packages don't
+ * depend on `@skdx/shared`.
+ */
+export interface RatingValueChangeDetail {
+    /** The rating value the change settled on. */
+    value: number;
+    /**
+     * The value held before the change, or `null` when it was `0` — 0 and
+     * "unrated" are the same state, so there is no real previous rating to
+     * report.
+     */
+    previousValue: number | null;
+    /**
+     * What drove the change: `'keyboard'` for an arrow key, Home/End, or focus
+     * landing on an item; `'pointer'` for a click; `'programmatic'` when the
+     * application set it (a controlled-prop write, an imperative method, or a
+     * form reset).
+     */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
 /** @internal Shared state distributed from {@link Rating} to its `RatingItem`s via context. Not part of the public API. */
 export interface RatingContextValue {
     value: number;
     max: number;
+    /** Whether re-picking the committed value clears the rating to 0. */
+    allowClear: boolean;
     allowHalf: boolean;
     disabled: boolean;
     readOnly: boolean;
     hoverValue: number | null;
-    onValueChange: (value: number) => void;
+    /** Resolved {@link RatingProps.itemLabel} — each item calls it with its own value and the group's `max`. */
+    itemLabel: (value: number, max: number) => string;
+    onValueChange: (value: number, reason: RatingValueChangeDetail['reason']) => void;
     onHoverValueChange: (value: number | null) => void;
 }
 /** Props for the {@link Rating} root. */
@@ -24,15 +51,14 @@ export interface RatingProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChang
      */
     defaultValue?: number;
     /**
-     * Fires with the new value whenever the selected item changes, controlled or not.
+     * Fires when selected value changes (controlled or not), carrying new value,
+     * previous, and reason. Re-picking swallows unless `allowClear` is set.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: number) => void;
+    onValueChange?: (detail: RatingValueChangeDetail) => void;
     /**
-     * Fires with the previewed value while the pointer moves across the items,
-     * and with `null` when the pointer leaves. Purely a display signal — it
-     * never changes the committed `value` — so a consumer can render "3.5" next
-     * to the stars while hovering without touching state.
+     * Fires with previewed value while hovering; never changes committed value.
+     * Purely a display signal for hover visuals.
      * @default undefined — no-op if omitted.
      */
     onHoverValueChange?: (value: number | null) => void;
@@ -42,16 +68,22 @@ export interface RatingProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChang
      */
     max?: number;
     /**
-     * Allow half-item values (`0.5`, `1`, `1.5`, …). Pointer input picks a half
-     * from the leading half of an item's box (the trailing half under RTL);
-     * keyboard input steps by `0.5` per arrow key, so half values are reachable
-     * without a pointer.
-     *
-     * This changes the widget's ARIA, deliberately: a set of whole-star
-     * `role="radio"` items cannot say "2.5" truthfully, so the root becomes a
-     * `role="slider"` reporting `aria-valuenow`/`aria-valuetext`, takes the
-     * single tab stop, and the items become `aria-hidden` visuals. Give the root
-     * an accessible name (`aria-label`) either way.
+     * Names each item as `aria-label`; items are `role="radio"` and need names
+     * to announce properly. Default: "X of Y stars". Item-level `aria-label`
+     * overrides for named scales.
+     * @default (value, max) => `${value} of ${max} stars`
+     */
+    itemLabel?: (value: number, max: number) => string;
+    /**
+     * Clear committed value to `0` by picking it again; off by default.
+     * With `allowHalf`, exact half-value must match to clear.
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * Allow half-item values; pointer picks leading half, keyboard steps by 0.5.
+     * Switches root to `role="slider"` with single tab stop; items become
+     * non-focusable `role="presentation"`. Give root `aria-label`.
      * @default false
      */
     allowHalf?: boolean;
@@ -66,10 +98,8 @@ export interface RatingProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChang
      */
     readOnly?: boolean;
     /**
-     * Form field name. With it, a visually-hidden native input submits the
-     * rating as `String(value)`. A rating of `0` — nothing chosen — submits an
-     * empty entry, mirroring `<skdx-rating>`, which publishes `null` there. A
-     * form reset restores `defaultValue`.
+     * Form field name; with it, hidden input submits rating as `String(value)`.
+     * Rating of `0` submits empty entry. Form reset restores `defaultValue`.
      * @default undefined — submits nothing.
      */
     name?: string;
@@ -79,15 +109,31 @@ export interface RatingProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChang
      * @default false
      */
     required?: boolean;
+    /**
+     * Form ID for this rating when rendered outside it (e.g., in a Dialog portal).
+     * Set on hidden input; used to resolve form resets.
+     * @default undefined — the rating belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
+    /**
+     * Content inside each derived `RatingItem`, replacing the default star glyph.
+     * Ignored when `children` is given.
+     * @default undefined — the default star glyph.
+     */
+    icon?: React.ReactNode;
 }
 /**
- * What {@link Rating}'s forwarded ref carries: the root `<div>` plus the two
- * constraint-validation methods. Type your ref as this to call them —
- * `React.useRef<RatingHandle>(null)`.
+ * Root `<div>` plus FormValidityHandle constraint-validation methods.
+ * Type your ref as this to call them.
  */
 export type RatingHandle = HTMLDivElement & FormValidityHandle;
 /** Props for a single {@link RatingItem}, e.g. one star. */
 export interface RatingItemProps extends PrimitivePropsWithRef<'button'> {
     /** This item's 1-indexed position within the rating scale. */
     value: number;
+    /**
+     * Disables this item, blocking selection and interaction.
+     * @default false
+     */
+    disabled?: boolean;
 }

package/dist/resizable/Resizable.cjs

@@ -1 +1 @@
-"use strict";var re=Object.create;var k=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var se=(t,n)=>{for(var a in n)k(t,a,{get:n[a],enumerable:!0})},X=(t,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let m of oe(n))!ae.call(t,m)&&m!==a&&k(t,m,{get:()=>n[m],enumerable:!(s=ne(n,m))||s.enumerable});return t};var N=(t,n,a)=>(a=t!=null?re(ie(t)):{},X(n||!t||!t.__esModule?k(a,"default",{value:t,enumerable:!0}):a,t)),le=t=>X(k({},"__esModule",{value:!0}),t);var ce={};se(ce,{ResizableHandle:()=>B,ResizablePanel:()=>O,ResizablePanelGroup:()=>W,ResizableProvider:()=>Q,useResizableContext:()=>w});module.exports=le(ce);var l=N(require("react"),1),A=require("../utils/clamp.cjs"),Y=require("../utils/composeRefs.cjs"),$=require("../utils/createContext.cjs"),q=require("../utils/part.cjs"),F=require("../utils/primitive.cjs"),J=require("../utils/useCallbackRef.cjs"),U=require("react/jsx-runtime"),[Q,w]=(0,$.createSafeContext)("ResizablePanelGroup"),W=l.forwardRef(({direction:t,onLayout:n,style:a,...s},m)=>{let r=l.useRef(null),C=(0,Y.useComposedRefs)(m,r),o=l.useRef(new Map),f=l.useRef(0),d=(0,J.useCallbackRef)(n),[P,b]=l.useState({order:[],sizes:[]}),z=l.useRef(P);z.current=P;let T=l.useCallback((e,c)=>{if(o.current.has(e))return;o.current.set(e,c);let R=z.current.order.includes(e)?z.current.order:[...z.current.order,e],u=R.map(p=>o.current.get(p)),i=u.reduce((p,h)=>p+(h.defaultSize??0),0),x=u.filter(p=>p.defaultSize==null).length,D=Math.max(0,100-i),L=x>0?D/x:0,E=u.map(p=>p.defaultSize??L),H={order:R,sizes:E};z.current=H,b(H)},[]),I=l.useCallback(()=>{let e=f.current;return f.current+=1,e},[]),G=l.useCallback(e=>{let c=z.current.order[e];return c?o.current.get(c):void 0},[]),K=l.useCallback((e,c)=>{b(R=>{let{order:u,sizes:i}=R,x=e,D=e+1;if(x<0||D>=u.length)return R;let L=o.current.get(u[x]),E=o.current.get(u[D]),H=i[x],p=i[D],h=(0,A.clamp)(c,L.minSize-H,L.maxSize-H);if(h=(0,A.clamp)(h,p-E.maxSize,p-E.minSize),h===0)return R;let M=[...i];M[x]=H+h,M[D]=p-h;let V={order:u,sizes:M};return z.current=V,d(M),V})},[d]);return(0,U.jsx)(Q,{direction:t,groupRef:r,order:P.order,sizes:P.sizes,registerPanel:T,registerHandle:I,resizePanels:K,getPanelConfig:G,children:(0,U.jsx)(F.Primitive.div,{"data-orientation":t,...s,...(0,q.skdxPart)("resizable","root",s.className),ref:C,style:{display:"flex",flexDirection:t==="horizontal"?"row":"column",...a}})})});W.displayName="ResizablePanelGroup";var g=N(require("react"),1),Z=require("../utils/part.cjs"),_=require("../utils/primitive.cjs");var j=require("react/jsx-runtime"),O=g.forwardRef(({defaultSize:t,minSize:n=10,maxSize:a=90,id:s,style:m,...r},C)=>{let o=w("ResizablePanel"),f=g.useId(),d=s??f,P=g.useRef(!1);g.useLayoutEffect(()=>{P.current||(P.current=!0,o.registerPanel(d,{defaultSize:t,minSize:n,maxSize:a}))},[]);let b=o.order.indexOf(d),z=b>=0?o.sizes[b]:t??0;return(0,j.jsx)(_.Primitive.div,{"data-skdx-resizable-panel":"","data-orientation":o.direction,...r,...(0,Z.skdxPart)("resizable","panel",r.className),ref:C,style:{flexBasis:`${z}%`,flexGrow:0,flexShrink:0,overflow:"hidden",...m}})});O.displayName="ResizablePanel";var S=N(require("react"),1),v=require("../utils/direction.cjs"),ee=require("../utils/part.cjs"),y=require("../utils/primitive.cjs");var te=require("react/jsx-runtime"),B=S.forwardRef(({disabled:t=!1,step:n=2,style:a,...s},m)=>{let r=w("ResizableHandle"),C=(0,v.useDirection)(),o=S.useRef(null);o.current===null&&(o.current=r.registerHandle());let f=o.current,d=S.useRef(null),P=r.getPanelConfig(f),b=r.sizes[f]??0,z=r.direction==="horizontal"?"vertical":"horizontal",T=e=>{t||(e.target.setPointerCapture?.(e.pointerId),d.current={lastPos:r.direction==="horizontal"?e.clientX:e.clientY})},I=e=>{if(t||!d.current)return;let c=r.groupRef.current?.getBoundingClientRect();if(!c)return;let R=r.direction==="horizontal"?c.width:c.height;if(!R)return;let u=r.direction==="horizontal"?e.clientX:e.clientY,i=(u-d.current.lastPos)/R*100;r.direction==="horizontal"&&(0,v.resolveDirection)(e.currentTarget,C)==="rtl"&&(i=-i),d.current.lastPos=u,i!==0&&r.resizePanels(f,i)},G=e=>{d.current&&e.target.releasePointerCapture?.(e.pointerId),d.current=null},K=e=>{if(t)return;let c=r.direction==="horizontal",R=c?"ArrowRight":"ArrowDown",u=c?"ArrowLeft":"ArrowUp",i=(0,v.directionalKey)(e.key,e.currentTarget,C);i===R?(e.preventDefault(),r.resizePanels(f,n)):i===u?(e.preventDefault(),r.resizePanels(f,-n)):i==="Home"?(e.preventDefault(),r.resizePanels(f,-1e3)):i==="End"&&(e.preventDefault(),r.resizePanels(f,1e3))};return(0,te.jsx)(y.Primitive.div,{role:"separator","aria-orientation":z,"aria-valuenow":Math.round(b),"aria-valuemin":P?.minSize,"aria-valuemax":P?.maxSize,"aria-disabled":t||void 0,"data-orientation":r.direction,"data-disabled":t?"":void 0,"data-skdx-resizable-handle":"",tabIndex:t?void 0:0,...s,...(0,ee.skdxPart)("resizable","handle",s.className),ref:m,onKeyDown:(0,y.composeEventHandlers)(s.onKeyDown,K),onPointerDown:(0,y.composeEventHandlers)(s.onPointerDown,T),onPointerMove:(0,y.composeEventHandlers)(s.onPointerMove,I),onPointerUp:(0,y.composeEventHandlers)(s.onPointerUp,G),style:{touchAction:"none",cursor:t?void 0:r.direction==="horizontal"?"col-resize":"row-resize",...a}})});B.displayName="ResizableHandle";0&&(module.exports={ResizableHandle,ResizablePanel,ResizablePanelGroup,ResizableProvider,useResizableContext});
+"use strict";var Ie=Object.create;var te=Object.defineProperty;var Te=Object.getOwnPropertyDescriptor;var Ae=Object.getOwnPropertyNames;var Ne=Object.getPrototypeOf,_e=Object.prototype.hasOwnProperty;var Ge=(e,n)=>{for(var r in n)te(e,r,{get:n[r],enumerable:!0})},me=(e,n,r,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let d of Ae(n))!_e.call(e,d)&&d!==r&&te(e,d,{get:()=>n[d],enumerable:!(a=Te(n,d))||a.enumerable});return e};var ne=(e,n,r)=>(r=e!=null?Ie(Ne(e)):{},me(n||!e||!e.__esModule?te(r,"default",{value:e,enumerable:!0}):r,e)),Ue=e=>me(te({},"__esModule",{value:!0}),e);var Be={};Ge(Be,{ResizableHandle:()=>ae,ResizablePanel:()=>q,ResizablePanelGroup:()=>de,ResizableProvider:()=>De,useResizableContext:()=>Z});module.exports=Ue(Be);var s=ne(require("react"),1),Se=require("../utils/clamp.cjs"),ve=require("../utils/composeRefs.cjs"),Le=require("../utils/createContext.cjs"),Ee=require("../utils/part.cjs"),we=require("../utils/primitive.cjs"),J=require("../utils/useCallbackRef.cjs");var re=require("../utils/clamp.cjs");function pe(e){return e.collapsible?e.collapsedSize??0:e.minSize}function A(e,n){return!e?.collapsible||n===void 0?!1:n<=(e.collapsedSize??0)}function ue(e,n,r){if(!e.collapsible)return(0,re.clamp)(r,e.minSize,e.maxSize);let a=e.collapsedSize??0;return n<=a?r>a?(0,re.clamp)(r,e.minSize,e.maxSize):a:r<e.minSize?a:(0,re.clamp)(r,e.minSize,e.maxSize)}function Re(e,n,r,a,d){let t=r+a,b=r+d;if(n.collapsible){let y=ue(n,a,t-b);if(A(n,y))return t-y}let P=ue(e,r,b);return A(e,P)?P:t-ue(n,a,t-P)}function oe(e){let n=e.reduce((t,b)=>t+(b?.defaultSize??0),0),r=e.filter(t=>t?.defaultSize==null).length,a=Math.max(0,100-n),d=r>0?a/r:0;return e.map(t=>t?.defaultSize??d)}var he=ne(require("react"),1);var g=ne(require("react"),1),ze=require("../utils/composeRefs.cjs"),X=require("../utils/direction.cjs"),be=require("../utils/part.cjs"),M=require("../utils/primitive.cjs");var Pe=require("react/jsx-runtime"),ae=g.forwardRef(({disabled:e=!1,step:n,style:r,...a},d)=>{let t=Z("ResizableHandle"),b=(0,X.useDirection)(),P=g.useRef(null);P.current===null&&(P.current=t.registerHandle());let y=P.current,h=g.useRef(null),N=(0,ze.useComposedRefs)(d,h),[S,w]=g.useState(y),{order:O,resolveHandleIndex:m}=t;g.useLayoutEffect(()=>{h.current&&w(m(h.current,y))},[m,O,y]);let C=S,D=i=>t.resolveHandleIndex(i.currentTarget,C),v=n??t.step,x=g.useRef(null),[Q,_]=g.useState(!1),$=t.getPanelConfig(C),V=$?.minSize??10,W=$?.maxSize??90,G=t.sizes[C]??0,U=t.order[C],f=t.orientation==="horizontal"?"vertical":"horizontal",j=i=>{e||(i.target.setPointerCapture?.(i.pointerId),x.current={lastPos:t.orientation==="horizontal"?i.clientX:i.clientY},_(!0))},F=i=>{if(e||!x.current)return;let H=t.groupRef.current?.getBoundingClientRect();if(!H)return;let K=t.orientation==="horizontal"?H.width:H.height;if(!K)return;let B=t.orientation==="horizontal"?i.clientX:i.clientY,z=(B-x.current.lastPos)/K*100;t.orientation==="horizontal"&&(0,X.resolveDirection)(i.currentTarget,b)==="rtl"&&(z=-z),x.current.lastPos=B,z!==0&&t.resizePanels(D(i),z)},ee=i=>{x.current&&i.target.releasePointerCapture?.(i.pointerId),x.current=null,_(!1),t.commitLayout()},ie=i=>{if(e)return;let H=t.orientation==="horizontal",K=H?"ArrowRight":"ArrowDown",B=H?"ArrowLeft":"ArrowUp",z=(0,X.directionalKey)(i.key,i.currentTarget,b),L=D(i);if(z===K)i.preventDefault(),t.resizePanels(L,v);else if(z===B)i.preventDefault(),t.resizePanels(L,-v);else if(z==="Home")i.preventDefault(),t.resizePanels(L,-1e3);else if(z==="End")i.preventDefault(),t.resizePanels(L,1e3);else return;t.commitLayout()};return(0,Pe.jsx)(M.Primitive.div,{role:"separator","aria-orientation":f,"aria-valuenow":Math.round(G),"aria-valuemin":V,"aria-valuemax":W,"aria-valuetext":`${Math.round(G)}%`,"aria-controls":U,"aria-disabled":e||void 0,"data-orientation":t.orientation,"data-disabled":e?"":void 0,"data-dragging":Q?"":void 0,"data-skdx-resizable-handle":"",tabIndex:0,...a,...(0,be.skdxPart)("resizable","handle",a.className),ref:N,onKeyDown:(0,M.composeEventHandlers)(a.onKeyDown,ie),onPointerDown:(0,M.composeEventHandlers)(a.onPointerDown,j),onPointerMove:(0,M.composeEventHandlers)(a.onPointerMove,F),onPointerUp:(0,M.composeEventHandlers)(a.onPointerUp,ee),onPointerCancel:(0,M.composeEventHandlers)(a.onPointerCancel,ee),style:{touchAction:"none",cursor:e?void 0:t.orientation==="horizontal"?"col-resize":"row-resize",...r}})});ae.displayName="ResizableHandle";var E=ne(require("react"),1),xe=require("../utils/part.cjs"),ge=require("../utils/primitive.cjs");var ye=require("react/jsx-runtime"),q=E.forwardRef(({defaultSize:e,minSize:n=10,maxSize:r=90,collapsible:a=!1,collapsedSize:d=0,id:t,style:b,...P},y)=>{let h=Z("ResizablePanel"),N=E.useId(),S=t??N,w=E.useRef(!1),O=E.useRef({defaultSize:e,minSize:n,maxSize:r,collapsible:a,collapsedSize:d}),{registerPanel:m,unregisterPanel:C}=h;E.useLayoutEffect(()=>{if(!w.current)return w.current=!0,m(S,O.current),()=>C(S)},[S,m,C]);let D=h.order.indexOf(S),v=D>=0?h.sizes[D]:void 0,x=A({minSize:n,maxSize:r,collapsible:a,collapsedSize:d},v);return(0,ye.jsx)(ge.Primitive.div,{"data-skdx-resizable-panel":"",id:S,"data-orientation":h.orientation,"data-collapsed":x?"":void 0,...P,...(0,xe.skdxPart)("resizable","panel",P.className),ref:y,style:v===void 0?{flexBasis:e===void 0?"0%":`${e}%`,flexGrow:e===void 0?1:0,flexShrink:0,overflow:"hidden",...b}:{flexBasis:`${v}%`,flexGrow:0,flexShrink:0,overflow:"hidden",...b}})});q.displayName="ResizablePanel";var I=require("react/jsx-runtime"),Ce=({panels:e})=>(0,I.jsx)(I.Fragment,{children:e.map(({id:n,content:r,...a},d)=>(0,I.jsxs)(he.Fragment,{children:[d>0?(0,I.jsx)(ae,{}):null,(0,I.jsx)(q,{id:n,...a,children:r})]},n??d))});var se=require("react/jsx-runtime"),[De,Z]=(0,Le.createSafeContext)("ResizablePanelGroup"),de=s.forwardRef(({orientation:e="horizontal",sizes:n,step:r=2,onLayout:a,onLayoutCommit:d,onCollapse:t,onExpand:b,panels:P,children:y,style:h,...N},S)=>{let w=s.useRef(null),O=(0,ve.useComposedRefs)(S,w),m=s.useRef(new Map),C=s.useRef(0),D=(0,J.useCallbackRef)(a),v=(0,J.useCallbackRef)(d),x=(0,J.useCallbackRef)(t),Q=(0,J.useCallbackRef)(b),_=s.useRef(!1),$=s.useRef(null),V=n!==void 0,[W,G]=s.useState({order:[],sizes:[]}),U=V?{order:W.order,sizes:n}:W,f=s.useRef(U);f.current=U;let j=s.useCallback((o,l,u)=>{o.forEach((c,p)=>{let R=m.current.get(c);if(!R?.collapsible)return;let T=A(R,l[p]),k=A(R,u[p]);T!==k&&(k?x({panelId:c}):Q({panelId:c}))})},[x,Q]),F=s.useCallback(o=>{let{order:l,sizes:u}=f.current,c={order:l,sizes:o};V||(f.current=c,G(c)),_.current=!0,$.current=o,D(o),j(l,u,o)},[V,D,j]),ee=s.useCallback((o,l)=>{if(m.current.has(o))return;m.current.set(o,l);let u=f.current.order.includes(o)?f.current.order:[...f.current.order,o],c={order:u,sizes:oe(u.map(p=>m.current.get(p)))};f.current=c,G(c)},[]),ie=s.useCallback(o=>{if(m.current.delete(o),!f.current.order.includes(o))return;let l=f.current.order.filter(c=>c!==o),u={order:l,sizes:oe(l.map(c=>m.current.get(c)))};f.current=u,G(u)},[]),i=s.useCallback(()=>{let o=C.current;return C.current+=1,o},[]),H=s.useCallback((o,l)=>{let u=w.current;if(!u)return l;let p=[...u.querySelectorAll("[data-skdx-resizable-handle]")].indexOf(o);return p>=0?p:l},[]),K=s.useCallback(o=>{let l=f.current.order[o];return l?m.current.get(l):void 0},[]),B=s.useCallback((o,l)=>{let{order:u,sizes:c}=f.current,p=o,R=o+1;if(p<0||R>=u.length)return;let T=m.current.get(u[p]),k=m.current.get(u[R]),Y=c[p],fe=c[R],le=Re(T,k,Y,fe,l);if(le===Y)return;let ce=[...c];ce[p]=le,ce[R]=Y+fe-le,F(ce)},[F]),z=s.useCallback(()=>{_.current&&(_.current=!1,v([...$.current??f.current.sizes]))},[v]),L=s.useCallback(o=>{let{order:l}=f.current,u=l.map((R,T)=>{let k=m.current.get(R),Y=o[T]??0;return(0,Se.clamp)(Y,k?pe(k):0,k?.maxSize??100)}),c=u.reduce((R,T)=>R+T,0),p=c>0?u.map(R=>R/c*100):u;F(p),z()},[F,z]),He=s.useCallback(()=>[...f.current.sizes],[]),ke=s.useCallback(o=>{L(o)},[L]),Me=s.useCallback(()=>{let{order:o}=f.current;L(oe(o.map(l=>m.current.get(l))))},[L]);return(0,se.jsx)(De,{orientation:e,groupRef:w,order:U.order,sizes:U.sizes,registerPanel:ee,unregisterPanel:ie,registerHandle:i,resolveHandleIndex:H,resizePanels:B,commitLayout:z,getPanelConfig:K,step:r,getSizes:He,setSizes:ke,resetSizes:Me,children:(0,se.jsx)(we.Primitive.div,{"data-orientation":e,...N,...(0,Ee.skdxPart)("resizable","root",N.className),ref:O,style:{display:"flex",flexDirection:e==="horizontal"?"row":"column",...h},children:y??(0,se.jsx)(Ce,{panels:P??[]})})})});de.displayName="ResizablePanelGroup";0&&(module.exports={ResizableHandle,ResizablePanel,ResizablePanelGroup,ResizableProvider,useResizableContext});

package/dist/resizable/Resizable.d.cts

@@ -7,20 +7,55 @@ export declare const ResizableProvider: {
     displayName: string;
 }, useResizableContext: (consumerName: string) => ResizableContextValue;
 /**
- * Flexbox-based split-pane group. Dragging a handle only ever redistributes
- * size between the two panels immediately adjacent to it — no cascading
- * resize of non-adjacent panels, matching the simplest-correct behavior.
- * Renders a `<div>` with `data-orientation` and `display: flex` along
- * `direction`.
+ * Flexbox split-pane group: handles redistribute size between adjacent panels only.
+ * Renders a `<div>` with `data-orientation` and `display: flex` along `orientation`.
  *
- * Panels and handles are expected to form a static set, registered once
- * during the initial mount (alternating Panel, Handle, Panel, ... in JSX
- * order) — dynamically adding/removing panels after mount isn't supported.
+ * Panels and handles alternate (Panel, Handle, Panel, ...). Adding/removing after
+ * mount is supported; handles resolve their pair from DOM position at interaction time.
+ *
+ * `orientation` is the layout axis (`'horizontal'` by default) — named for what
+ * the DOM already calls it, `data-orientation` and the Handle's
+ * `aria-orientation`, rather than colliding with the reading direction this
+ * same file reads through `useDirection()`.
+ *
+ * `sizes` makes the group controlled: supply it and the component renders those
+ * percentages and reports intent through `onLayout`/`onLayoutCommit` instead of
+ * owning the state, so a layout held in application state can be driven in
+ * after mount and two groups can be kept in step.
+ *
+ * `step` is a group-level default for Arrow-key nudging, in percentage points;
+ * a Handle's own `step` overrides it.
+ *
+ * `getSizes()`, `setSizes(sizes)` and `resetSizes()` are published on the
+ * `useResizableContext` object — a "reset layout" button, a preset-split
+ * shortcut and restoring a saved layout after mount all need them. React's root forwards a DOM ref
+ * rather than an imperative handle, so the context is React's binding of these,
+ * exactly as it is for Carousel's `scrollToIndex`.
+ *
+ * Given no `children`, derives one `ResizablePanel` per entry in `panels`,
+ * alternating with a derived `ResizableHandle`. Given `children` — the
+ * classic Panel/Handle/Panel/... markup — they are rendered verbatim for full
+ * manual composition; only presence is inspected, never what the children
+ * are. `ResizableHandle` is a primitive; reach for
+ * `@skdx/react/primitives/resizable` for it.
  *
  * @example
  * ```tsx
- * <ResizablePanelGroup direction="horizontal">
- *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
+ * <ResizablePanelGroup
+ *   orientation="horizontal"
+ *   panels={[
+ *     { defaultSize: 30, minSize: 20, collapsible: true, content: 'Sidebar' },
+ *     { content: 'Main content' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Manual composition — ResizableHandle placed by hand
+ * ```tsx
+ * import { ResizableHandle } from '@skdx/react/primitives/resizable';
+ *
+ * <ResizablePanelGroup orientation="horizontal">
+ *   <ResizablePanel defaultSize={30} minSize={20} collapsible>Sidebar</ResizablePanel>
  *   <ResizableHandle />
  *   <ResizablePanel>Main content</ResizablePanel>
  * </ResizablePanelGroup>

package/dist/resizable/Resizable.d.ts

@@ -7,20 +7,55 @@ export declare const ResizableProvider: {
     displayName: string;
 }, useResizableContext: (consumerName: string) => ResizableContextValue;
 /**
- * Flexbox-based split-pane group. Dragging a handle only ever redistributes
- * size between the two panels immediately adjacent to it — no cascading
- * resize of non-adjacent panels, matching the simplest-correct behavior.
- * Renders a `<div>` with `data-orientation` and `display: flex` along
- * `direction`.
+ * Flexbox split-pane group: handles redistribute size between adjacent panels only.
+ * Renders a `<div>` with `data-orientation` and `display: flex` along `orientation`.
  *
- * Panels and handles are expected to form a static set, registered once
- * during the initial mount (alternating Panel, Handle, Panel, ... in JSX
- * order) — dynamically adding/removing panels after mount isn't supported.
+ * Panels and handles alternate (Panel, Handle, Panel, ...). Adding/removing after
+ * mount is supported; handles resolve their pair from DOM position at interaction time.
+ *
+ * `orientation` is the layout axis (`'horizontal'` by default) — named for what
+ * the DOM already calls it, `data-orientation` and the Handle's
+ * `aria-orientation`, rather than colliding with the reading direction this
+ * same file reads through `useDirection()`.
+ *
+ * `sizes` makes the group controlled: supply it and the component renders those
+ * percentages and reports intent through `onLayout`/`onLayoutCommit` instead of
+ * owning the state, so a layout held in application state can be driven in
+ * after mount and two groups can be kept in step.
+ *
+ * `step` is a group-level default for Arrow-key nudging, in percentage points;
+ * a Handle's own `step` overrides it.
+ *
+ * `getSizes()`, `setSizes(sizes)` and `resetSizes()` are published on the
+ * `useResizableContext` object — a "reset layout" button, a preset-split
+ * shortcut and restoring a saved layout after mount all need them. React's root forwards a DOM ref
+ * rather than an imperative handle, so the context is React's binding of these,
+ * exactly as it is for Carousel's `scrollToIndex`.
+ *
+ * Given no `children`, derives one `ResizablePanel` per entry in `panels`,
+ * alternating with a derived `ResizableHandle`. Given `children` — the
+ * classic Panel/Handle/Panel/... markup — they are rendered verbatim for full
+ * manual composition; only presence is inspected, never what the children
+ * are. `ResizableHandle` is a primitive; reach for
+ * `@skdx/react/primitives/resizable` for it.
  *
  * @example
  * ```tsx
- * <ResizablePanelGroup direction="horizontal">
- *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
+ * <ResizablePanelGroup
+ *   orientation="horizontal"
+ *   panels={[
+ *     { defaultSize: 30, minSize: 20, collapsible: true, content: 'Sidebar' },
+ *     { content: 'Main content' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Manual composition — ResizableHandle placed by hand
+ * ```tsx
+ * import { ResizableHandle } from '@skdx/react/primitives/resizable';
+ *
+ * <ResizablePanelGroup orientation="horizontal">
+ *   <ResizablePanel defaultSize={30} minSize={20} collapsible>Sidebar</ResizablePanel>
  *   <ResizableHandle />
  *   <ResizablePanel>Main content</ResizablePanel>
  * </ResizablePanelGroup>

package/dist/resizable/Resizable.js

@@ -1 +1 @@
-import*as i from"react";import{clamp as K}from"../utils/clamp.js";import{useComposedRefs as O}from"../utils/composeRefs.js";import{createSafeContext as B}from"../utils/createContext.js";import{skdxPart as V}from"../utils/part.js";import{Primitive as X}from"../utils/primitive.js";import{useCallbackRef as Y}from"../utils/useCallbackRef.js";import{jsx as N}from"react/jsx-runtime";var[$,L]=B("ResizablePanelGroup"),q=i.forwardRef(({direction:o,onLayout:b,style:C,...u},D)=>{let t=i.useRef(null),x=O(D,t),r=i.useRef(new Map),l=i.useRef(0),c=Y(b),[z,p]=i.useState({order:[],sizes:[]}),f=i.useRef(z);f.current=z;let M=i.useCallback((e,a)=>{if(r.current.has(e))return;r.current.set(e,a);let d=f.current.order.includes(e)?f.current.order:[...f.current.order,e],s=d.map(m=>r.current.get(m)),n=s.reduce((m,g)=>m+(g.defaultSize??0),0),P=s.filter(m=>m.defaultSize==null).length,h=Math.max(0,100-n),v=P>0?h/P:0,w=s.map(m=>m.defaultSize??v),y={order:d,sizes:w};f.current=y,p(y)},[]),k=i.useCallback(()=>{let e=l.current;return l.current+=1,e},[]),T=i.useCallback(e=>{let a=f.current.order[e];return a?r.current.get(a):void 0},[]),I=i.useCallback((e,a)=>{p(d=>{let{order:s,sizes:n}=d,P=e,h=e+1;if(P<0||h>=s.length)return d;let v=r.current.get(s[P]),w=r.current.get(s[h]),y=n[P],m=n[h],g=K(a,v.minSize-y,v.maxSize-y);if(g=K(g,m-w.maxSize,m-w.minSize),g===0)return d;let S=[...n];S[P]=y+g,S[h]=m-g;let G={order:s,sizes:S};return f.current=G,c(S),G})},[c]);return N($,{direction:o,groupRef:t,order:z.order,sizes:z.sizes,registerPanel:M,registerHandle:k,resizePanels:I,getPanelConfig:T,children:N(X.div,{"data-orientation":o,...u,...V("resizable","root",u.className),ref:x,style:{display:"flex",flexDirection:o==="horizontal"?"row":"column",...C}})})});q.displayName="ResizablePanelGroup";import*as R from"react";import{skdxPart as F}from"../utils/part.js";import{Primitive as J}from"../utils/primitive.js";import{jsx as Q}from"react/jsx-runtime";var A=R.forwardRef(({defaultSize:o,minSize:b=10,maxSize:C=90,id:u,style:D,...t},x)=>{let r=L("ResizablePanel"),l=R.useId(),c=u??l,z=R.useRef(!1);R.useLayoutEffect(()=>{z.current||(z.current=!0,r.registerPanel(c,{defaultSize:o,minSize:b,maxSize:C}))},[]);let p=r.order.indexOf(c),f=p>=0?r.sizes[p]:o??0;return Q(J.div,{"data-skdx-resizable-panel":"","data-orientation":r.direction,...t,...F("resizable","panel",t.className),ref:x,style:{flexBasis:`${f}%`,flexGrow:0,flexShrink:0,overflow:"hidden",...D}})});A.displayName="ResizablePanel";import*as H from"react";import{directionalKey as W,resolveDirection as Z,useDirection as _}from"../utils/direction.js";import{skdxPart as j}from"../utils/part.js";import{composeEventHandlers as E,Primitive as ee}from"../utils/primitive.js";import{jsx as te}from"react/jsx-runtime";var U=H.forwardRef(({disabled:o=!1,step:b=2,style:C,...u},D)=>{let t=L("ResizableHandle"),x=_(),r=H.useRef(null);r.current===null&&(r.current=t.registerHandle());let l=r.current,c=H.useRef(null),z=t.getPanelConfig(l),p=t.sizes[l]??0,f=t.direction==="horizontal"?"vertical":"horizontal",M=e=>{o||(e.target.setPointerCapture?.(e.pointerId),c.current={lastPos:t.direction==="horizontal"?e.clientX:e.clientY})},k=e=>{if(o||!c.current)return;let a=t.groupRef.current?.getBoundingClientRect();if(!a)return;let d=t.direction==="horizontal"?a.width:a.height;if(!d)return;let s=t.direction==="horizontal"?e.clientX:e.clientY,n=(s-c.current.lastPos)/d*100;t.direction==="horizontal"&&Z(e.currentTarget,x)==="rtl"&&(n=-n),c.current.lastPos=s,n!==0&&t.resizePanels(l,n)},T=e=>{c.current&&e.target.releasePointerCapture?.(e.pointerId),c.current=null},I=e=>{if(o)return;let a=t.direction==="horizontal",d=a?"ArrowRight":"ArrowDown",s=a?"ArrowLeft":"ArrowUp",n=W(e.key,e.currentTarget,x);n===d?(e.preventDefault(),t.resizePanels(l,b)):n===s?(e.preventDefault(),t.resizePanels(l,-b)):n==="Home"?(e.preventDefault(),t.resizePanels(l,-1e3)):n==="End"&&(e.preventDefault(),t.resizePanels(l,1e3))};return te(ee.div,{role:"separator","aria-orientation":f,"aria-valuenow":Math.round(p),"aria-valuemin":z?.minSize,"aria-valuemax":z?.maxSize,"aria-disabled":o||void 0,"data-orientation":t.direction,"data-disabled":o?"":void 0,"data-skdx-resizable-handle":"",tabIndex:o?void 0:0,...u,...j("resizable","handle",u.className),ref:D,onKeyDown:E(u.onKeyDown,I),onPointerDown:E(u.onPointerDown,M),onPointerMove:E(u.onPointerMove,k),onPointerUp:E(u.onPointerUp,T),style:{touchAction:"none",cursor:o?void 0:t.direction==="horizontal"?"col-resize":"row-resize",...C}})});U.displayName="ResizableHandle";export{U as ResizableHandle,A as ResizablePanel,q as ResizablePanelGroup,$ as ResizableProvider,L as useResizableContext};
+import*as o from"react";import{clamp as ke}from"../utils/clamp.js";import{useComposedRefs as Me}from"../utils/composeRefs.js";import{createSafeContext as Ie}from"../utils/createContext.js";import{skdxPart as Te}from"../utils/part.js";import{Primitive as Ae}from"../utils/primitive.js";import{useCallbackRef as j}from"../utils/useCallbackRef.js";import{clamp as re}from"../utils/clamp.js";function ce(e){return e.collapsible?e.collapsedSize??0:e.minSize}function I(e,s){return!e?.collapsible||s===void 0?!1:s<=(e.collapsedSize??0)}function oe(e,s,i){if(!e.collapsible)return re(i,e.minSize,e.maxSize);let r=e.collapsedSize??0;return s<=r?i>r?re(i,e.minSize,e.maxSize):r:i<e.minSize?r:re(i,e.minSize,e.maxSize)}function ue(e,s,i,r,R){let t=i+r,b=i+R;if(s.collapsible){let y=oe(s,r,t-b);if(I(s,y))return t-y}let P=oe(e,i,b);return I(e,P)?P:t-oe(s,r,t-P)}function Q(e){let s=e.reduce((t,b)=>t+(b?.defaultSize??0),0),i=e.filter(t=>t?.defaultSize==null).length,r=Math.max(0,100-s),R=i>0?r/i:0;return e.map(t=>t?.defaultSize??R)}import*as de from"react";import*as g from"react";import{useComposedRefs as xe}from"../utils/composeRefs.js";import{directionalKey as ge,resolveDirection as ye,useDirection as he}from"../utils/direction.js";import{skdxPart as Ce}from"../utils/part.js";import{composeEventHandlers as O,Primitive as Se}from"../utils/primitive.js";import{jsx as ve}from"react/jsx-runtime";var ae=g.forwardRef(({disabled:e=!1,step:s,style:i,...r},R)=>{let t=$("ResizableHandle"),b=he(),P=g.useRef(null);P.current===null&&(P.current=t.registerHandle());let y=P.current,h=g.useRef(null),T=xe(R,h),[S,w]=g.useState(y),{order:K,resolveHandleIndex:f}=t;g.useLayoutEffect(()=>{h.current&&w(f(h.current,y))},[f,K,y]);let C=S,D=a=>t.resolveHandleIndex(a.currentTarget,C),v=s??t.step,x=g.useRef(null),[V,A]=g.useState(!1),B=t.getPanelConfig(C),X=B?.minSize??10,Y=B?.maxSize??90,N=t.sizes[C]??0,_=t.order[C],d=t.orientation==="horizontal"?"vertical":"horizontal",q=a=>{e||(a.target.setPointerCapture?.(a.pointerId),x.current={lastPos:t.orientation==="horizontal"?a.clientX:a.clientY},A(!0))},G=a=>{if(e||!x.current)return;let H=t.groupRef.current?.getBoundingClientRect();if(!H)return;let U=t.orientation==="horizontal"?H.width:H.height;if(!U)return;let F=t.orientation==="horizontal"?a.clientX:a.clientY,z=(F-x.current.lastPos)/U*100;t.orientation==="horizontal"&&ye(a.currentTarget,b)==="rtl"&&(z=-z),x.current.lastPos=F,z!==0&&t.resizePanels(D(a),z)},J=a=>{x.current&&a.target.releasePointerCapture?.(a.pointerId),x.current=null,A(!1),t.commitLayout()},ee=a=>{if(e)return;let H=t.orientation==="horizontal",U=H?"ArrowRight":"ArrowDown",F=H?"ArrowLeft":"ArrowUp",z=ge(a.key,a.currentTarget,b),L=D(a);if(z===U)a.preventDefault(),t.resizePanels(L,v);else if(z===F)a.preventDefault(),t.resizePanels(L,-v);else if(z==="Home")a.preventDefault(),t.resizePanels(L,-1e3);else if(z==="End")a.preventDefault(),t.resizePanels(L,1e3);else return;t.commitLayout()};return ve(Se.div,{role:"separator","aria-orientation":d,"aria-valuenow":Math.round(N),"aria-valuemin":X,"aria-valuemax":Y,"aria-valuetext":`${Math.round(N)}%`,"aria-controls":_,"aria-disabled":e||void 0,"data-orientation":t.orientation,"data-disabled":e?"":void 0,"data-dragging":V?"":void 0,"data-skdx-resizable-handle":"",tabIndex:0,...r,...Ce("resizable","handle",r.className),ref:T,onKeyDown:O(r.onKeyDown,ee),onPointerDown:O(r.onPointerDown,q),onPointerMove:O(r.onPointerMove,G),onPointerUp:O(r.onPointerUp,J),onPointerCancel:O(r.onPointerCancel,J),style:{touchAction:"none",cursor:e?void 0:t.orientation==="horizontal"?"col-resize":"row-resize",...i}})});ae.displayName="ResizableHandle";import*as E from"react";import{skdxPart as Le}from"../utils/part.js";import{Primitive as Ee}from"../utils/primitive.js";import{jsx as we}from"react/jsx-runtime";var W=E.forwardRef(({defaultSize:e,minSize:s=10,maxSize:i=90,collapsible:r=!1,collapsedSize:R=0,id:t,style:b,...P},y)=>{let h=$("ResizablePanel"),T=E.useId(),S=t??T,w=E.useRef(!1),K=E.useRef({defaultSize:e,minSize:s,maxSize:i,collapsible:r,collapsedSize:R}),{registerPanel:f,unregisterPanel:C}=h;E.useLayoutEffect(()=>{if(!w.current)return w.current=!0,f(S,K.current),()=>C(S)},[S,f,C]);let D=h.order.indexOf(S),v=D>=0?h.sizes[D]:void 0,x=I({minSize:s,maxSize:i,collapsible:r,collapsedSize:R},v);return we(Ee.div,{"data-skdx-resizable-panel":"",id:S,"data-orientation":h.orientation,"data-collapsed":x?"":void 0,...P,...Le("resizable","panel",P.className),ref:y,style:v===void 0?{flexBasis:e===void 0?"0%":`${e}%`,flexGrow:e===void 0?1:0,flexShrink:0,overflow:"hidden",...b}:{flexBasis:`${v}%`,flexGrow:0,flexShrink:0,overflow:"hidden",...b}})});W.displayName="ResizablePanel";import{Fragment as He,jsx as se,jsxs as De}from"react/jsx-runtime";var fe=({panels:e})=>se(He,{children:e.map(({id:s,content:i,...r},R)=>De(de.Fragment,{children:[R>0?se(ae,{}):null,se(W,{id:s,...r,children:i})]},s??R))});import{jsx as ie}from"react/jsx-runtime";var[Ne,$]=Ie("ResizablePanelGroup"),me=o.forwardRef(({orientation:e="horizontal",sizes:s,step:i=2,onLayout:r,onLayoutCommit:R,onCollapse:t,onExpand:b,panels:P,children:y,style:h,...T},S)=>{let w=o.useRef(null),K=Me(S,w),f=o.useRef(new Map),C=o.useRef(0),D=j(r),v=j(R),x=j(t),V=j(b),A=o.useRef(!1),B=o.useRef(null),X=s!==void 0,[Y,N]=o.useState({order:[],sizes:[]}),_=X?{order:Y.order,sizes:s}:Y,d=o.useRef(_);d.current=_;let q=o.useCallback((n,l,u)=>{n.forEach((c,m)=>{let p=f.current.get(c);if(!p?.collapsible)return;let M=I(p,l[m]),k=I(p,u[m]);M!==k&&(k?x({panelId:c}):V({panelId:c}))})},[x,V]),G=o.useCallback(n=>{let{order:l,sizes:u}=d.current,c={order:l,sizes:n};X||(d.current=c,N(c)),A.current=!0,B.current=n,D(n),q(l,u,n)},[X,D,q]),J=o.useCallback((n,l)=>{if(f.current.has(n))return;f.current.set(n,l);let u=d.current.order.includes(n)?d.current.order:[...d.current.order,n],c={order:u,sizes:Q(u.map(m=>f.current.get(m)))};d.current=c,N(c)},[]),ee=o.useCallback(n=>{if(f.current.delete(n),!d.current.order.includes(n))return;let l=d.current.order.filter(c=>c!==n),u={order:l,sizes:Q(l.map(c=>f.current.get(c)))};d.current=u,N(u)},[]),a=o.useCallback(()=>{let n=C.current;return C.current+=1,n},[]),H=o.useCallback((n,l)=>{let u=w.current;if(!u)return l;let m=[...u.querySelectorAll("[data-skdx-resizable-handle]")].indexOf(n);return m>=0?m:l},[]),U=o.useCallback(n=>{let l=d.current.order[n];return l?f.current.get(l):void 0},[]),F=o.useCallback((n,l)=>{let{order:u,sizes:c}=d.current,m=n,p=n+1;if(m<0||p>=u.length)return;let M=f.current.get(u[m]),k=f.current.get(u[p]),Z=c[m],le=c[p],te=ue(M,k,Z,le,l);if(te===Z)return;let ne=[...c];ne[m]=te,ne[p]=Z+le-te,G(ne)},[G]),z=o.useCallback(()=>{A.current&&(A.current=!1,v([...B.current??d.current.sizes]))},[v]),L=o.useCallback(n=>{let{order:l}=d.current,u=l.map((p,M)=>{let k=f.current.get(p),Z=n[M]??0;return ke(Z,k?ce(k):0,k?.maxSize??100)}),c=u.reduce((p,M)=>p+M,0),m=c>0?u.map(p=>p/c*100):u;G(m),z()},[G,z]),pe=o.useCallback(()=>[...d.current.sizes],[]),Re=o.useCallback(n=>{L(n)},[L]),ze=o.useCallback(()=>{let{order:n}=d.current;L(Q(n.map(l=>f.current.get(l))))},[L]);return ie(Ne,{orientation:e,groupRef:w,order:_.order,sizes:_.sizes,registerPanel:J,unregisterPanel:ee,registerHandle:a,resolveHandleIndex:H,resizePanels:F,commitLayout:z,getPanelConfig:U,step:i,getSizes:pe,setSizes:Re,resetSizes:ze,children:ie(Ae.div,{"data-orientation":e,...T,...Te("resizable","root",T.className),ref:K,style:{display:"flex",flexDirection:e==="horizontal"?"row":"column",...h},children:y??ie(fe,{panels:P??[]})})})});me.displayName="ResizablePanelGroup";export{ae as ResizableHandle,W as ResizablePanel,me as ResizablePanelGroup,Ne as ResizableProvider,$ as useResizableContext};

package/dist/resizable/ResizableAnatomy.d.cts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ResizablePanelConfig } from './types.cjs';
+/**
+ * The anatomy a {@link ResizablePanelGroup} draws from `panels`: one derived
+ * `ResizablePanel` per entry, alternating with a derived `ResizableHandle`.
+ *
+ * @internal
+ */
+export declare const ResizableAnatomy: ({ panels }: {
+    panels: readonly ResizablePanelConfig[];
+}) => React.JSX.Element;

package/dist/resizable/ResizableAnatomy.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ResizablePanelConfig } from './types.js';
+/**
+ * The anatomy a {@link ResizablePanelGroup} draws from `panels`: one derived
+ * `ResizablePanel` per entry, alternating with a derived `ResizableHandle`.
+ *
+ * @internal
+ */
+export declare const ResizableAnatomy: ({ panels }: {
+    panels: readonly ResizablePanelConfig[];
+}) => React.JSX.Element;

package/dist/resizable/ResizableHandle.d.cts

@@ -3,18 +3,29 @@ import type { ResizableHandleProps } from './types.cjs';
 /**
  * The draggable divider between two `ResizablePanel`s. Renders
  * `role="separator"` with `aria-orientation` set to the axis *perpendicular*
- * to the group's `direction`, plus `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- * describing the size of the panel to its start side, `data-orientation`, and
- * `data-disabled`. Draggable via pointer, and keyboard-operable when focused:
- * Arrow Left/Right (horizontal groups) or Arrow Up/Down (vertical groups) nudge
- * by `step`, Home/End jump to the panel's min/max size.
+ * to the group's `orientation`, plus `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
+ * describing the size of the panel to its start side, `aria-controls` pointing
+ * at that panel, `data-orientation`, `data-disabled`, and `data-dragging` for
+ * the duration of a pointer gesture. Draggable via pointer, and
+ * keyboard-operable when focused: Arrow Left/Right (horizontal groups) or Arrow
+ * Up/Down (vertical groups) nudge by `step` — the group's, unless this Handle
+ * overrides it — and Home/End jump to the panel's min/max size.
+ *
+ * **Name each handle in a group with more than one.** A
+ * `role="separator"` takes no name from its content, so an unnamed handle
+ * announces as "separator" plus a bare number and a three-pane layout hands a
+ * screen-reader user two tab stops it cannot tell apart. Pass `aria-label` or
+ * `aria-labelledby`; both land on the separator element itself. A single
+ * divider between two panels is unambiguous and needs none.
  *
  * @example
  * ```tsx
- * <ResizablePanelGroup direction="horizontal">
+ * <ResizablePanelGroup orientation="horizontal">
  *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
- *   <ResizableHandle />
+ *   <ResizableHandle aria-label="Sidebar width" />
  *   <ResizablePanel>Main content</ResizablePanel>
+ *   <ResizableHandle aria-label="Inspector width" />
+ *   <ResizablePanel>Inspector</ResizablePanel>
  * </ResizablePanelGroup>
  * ```
  */

package/dist/resizable/ResizableHandle.d.ts

@@ -3,18 +3,29 @@ import type { ResizableHandleProps } from './types.js';
 /**
  * The draggable divider between two `ResizablePanel`s. Renders
  * `role="separator"` with `aria-orientation` set to the axis *perpendicular*
- * to the group's `direction`, plus `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- * describing the size of the panel to its start side, `data-orientation`, and
- * `data-disabled`. Draggable via pointer, and keyboard-operable when focused:
- * Arrow Left/Right (horizontal groups) or Arrow Up/Down (vertical groups) nudge
- * by `step`, Home/End jump to the panel's min/max size.
+ * to the group's `orientation`, plus `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
+ * describing the size of the panel to its start side, `aria-controls` pointing
+ * at that panel, `data-orientation`, `data-disabled`, and `data-dragging` for
+ * the duration of a pointer gesture. Draggable via pointer, and
+ * keyboard-operable when focused: Arrow Left/Right (horizontal groups) or Arrow
+ * Up/Down (vertical groups) nudge by `step` — the group's, unless this Handle
+ * overrides it — and Home/End jump to the panel's min/max size.
+ *
+ * **Name each handle in a group with more than one.** A
+ * `role="separator"` takes no name from its content, so an unnamed handle
+ * announces as "separator" plus a bare number and a three-pane layout hands a
+ * screen-reader user two tab stops it cannot tell apart. Pass `aria-label` or
+ * `aria-labelledby`; both land on the separator element itself. A single
+ * divider between two panels is unambiguous and needs none.
  *
  * @example
  * ```tsx
- * <ResizablePanelGroup direction="horizontal">
+ * <ResizablePanelGroup orientation="horizontal">
  *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
- *   <ResizableHandle />
+ *   <ResizableHandle aria-label="Sidebar width" />
  *   <ResizablePanel>Main content</ResizablePanel>
+ *   <ResizableHandle aria-label="Inspector width" />
+ *   <ResizablePanel>Inspector</ResizablePanel>
  * </ResizablePanelGroup>
  * ```
  */

package/dist/resizable/ResizablePanel.d.cts

@@ -1,15 +1,12 @@
 import * as React from 'react';
 import type { ResizablePanelProps } from './types.cjs';
 /**
- * A single pane within a {@link ResizablePanelGroup}. Renders
- * `<div data-skdx-resizable-panel>` with `data-orientation` inherited from the
- * group and `flex-basis` set to its current size percentage (`flex-grow: 0`,
- * `flex-shrink: 0`, `overflow: hidden`). Registers its `defaultSize` /
- * `minSize` / `maxSize` with the group once, on mount.
+ * Pane within a {@link ResizablePanelGroup}. Defaults to 10/90 min/max size
+ * (not 0/100), preventing zero-width. `collapsible` snaps shut below `minSize`.
  *
  * @example
  * ```tsx
- * <ResizablePanelGroup direction="horizontal">
+ * <ResizablePanelGroup orientation="horizontal">
  *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
  *   <ResizableHandle />
  *   <ResizablePanel>Main content</ResizablePanel>

package/dist/resizable/ResizablePanel.d.ts

@@ -1,15 +1,12 @@
 import * as React from 'react';
 import type { ResizablePanelProps } from './types.js';
 /**
- * A single pane within a {@link ResizablePanelGroup}. Renders
- * `<div data-skdx-resizable-panel>` with `data-orientation` inherited from the
- * group and `flex-basis` set to its current size percentage (`flex-grow: 0`,
- * `flex-shrink: 0`, `overflow: hidden`). Registers its `defaultSize` /
- * `minSize` / `maxSize` with the group once, on mount.
+ * Pane within a {@link ResizablePanelGroup}. Defaults to 10/90 min/max size
+ * (not 0/100), preventing zero-width. `collapsible` snaps shut below `minSize`.
  *
  * @example
  * ```tsx
- * <ResizablePanelGroup direction="horizontal">
+ * <ResizablePanelGroup orientation="horizontal">
  *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
  *   <ResizableHandle />
  *   <ResizablePanel>Main content</ResizablePanel>

package/dist/resizable/index.d.cts

@@ -1,4 +1,3 @@
-export * from './Resizable.cjs';
+export { ResizablePanelGroup, useResizableContext } from './Resizable.cjs';
 export { ResizablePanel } from './ResizablePanel.cjs';
-export { ResizableHandle } from './ResizableHandle.cjs';
-export type { ResizablePanelGroupProps, ResizablePanelProps, ResizableHandleProps } from './types.cjs';
+export type { ResizablePanelGroupProps, ResizablePanelProps, ResizablePanelConfig } from './types.cjs';

package/dist/resizable/index.d.ts

@@ -1,4 +1,3 @@
-export * from './Resizable.js';
+export { ResizablePanelGroup, useResizableContext } from './Resizable.js';
 export { ResizablePanel } from './ResizablePanel.js';
-export { ResizableHandle } from './ResizableHandle.js';
-export type { ResizablePanelGroupProps, ResizablePanelProps, ResizableHandleProps } from './types.js';
+export type { ResizablePanelGroupProps, ResizablePanelProps, ResizablePanelConfig } from './types.js';

package/dist/resizable/layout.d.cts

@@ -0,0 +1,29 @@
+import type { PanelConfig } from './types.cjs';
+/**
+ * Minimum size: `collapsedSize` if collapsible, else `minSize`.
+ * `minSize` defaults to 10 (not 0) to prevent accidental loss.
+ */
+export declare function panelLowerBound(config: PanelConfig): number;
+/**
+ * True if size is at or below `collapsedSize` for collapsible panels.
+ * Drives `data-collapsed` and collapse/expand events; no separate flag.
+ */
+export declare function isPanelCollapsed(config: PanelConfig | undefined, size: number | undefined): boolean;
+/**
+ * Resolves panel size: non-collapsible clamps to `[minSize, maxSize]`;
+ * collapsible snaps to `collapsedSize` or `[minSize, maxSize]`.
+ * Below `minSize` snaps shut; any request reopens at `minSize` (keyboard-operable).
+ */
+export declare function resolvePanelSize(config: PanelConfig, current: number, requested: number): number;
+/**
+ * Resolves start panel size when handle moves by `delta`.
+ * Pair total is invariant; end panel gets collapse chance first.
+ * Collapse is not vetoed by neighbor's `maxSize` — neighbor absorbs space.
+ * `maxSize` bounds dragging, not layout invariant.
+ */
+export declare function resolvePairSize(leftConfig: PanelConfig, rightConfig: PanelConfig, leftSize: number, rightSize: number, delta: number): number;
+/**
+ * Initial layout: panels with `defaultSize` keep it; rest split remainder evenly.
+ * Also used by `resetSizes`.
+ */
+export declare function seedSizes(configs: ReadonlyArray<PanelConfig | undefined>): number[];

package/dist/resizable/layout.d.ts

@@ -0,0 +1,29 @@
+import type { PanelConfig } from './types.js';
+/**
+ * Minimum size: `collapsedSize` if collapsible, else `minSize`.
+ * `minSize` defaults to 10 (not 0) to prevent accidental loss.
+ */
+export declare function panelLowerBound(config: PanelConfig): number;
+/**
+ * True if size is at or below `collapsedSize` for collapsible panels.
+ * Drives `data-collapsed` and collapse/expand events; no separate flag.
+ */
+export declare function isPanelCollapsed(config: PanelConfig | undefined, size: number | undefined): boolean;
+/**
+ * Resolves panel size: non-collapsible clamps to `[minSize, maxSize]`;
+ * collapsible snaps to `collapsedSize` or `[minSize, maxSize]`.
+ * Below `minSize` snaps shut; any request reopens at `minSize` (keyboard-operable).
+ */
+export declare function resolvePanelSize(config: PanelConfig, current: number, requested: number): number;
+/**
+ * Resolves start panel size when handle moves by `delta`.
+ * Pair total is invariant; end panel gets collapse chance first.
+ * Collapse is not vetoed by neighbor's `maxSize` — neighbor absorbs space.
+ * `maxSize` bounds dragging, not layout invariant.
+ */
+export declare function resolvePairSize(leftConfig: PanelConfig, rightConfig: PanelConfig, leftSize: number, rightSize: number, delta: number): number;
+/**
+ * Initial layout: panels with `defaultSize` keep it; rest split remainder evenly.
+ * Also used by `resetSizes`.
+ */
+export declare function seedSizes(configs: ReadonlyArray<PanelConfig | undefined>): number[];