@skdx/react 0.27.0 → 0.29.0

package/dist/rating/types.d.ts

@@ -1,93 +1,128 @@
+import type * as React from 'react';
 import type { FormValidityHandle } from '../utils/formControl.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal Shared state distributed from {@link Rating} to its `RatingItem`s via context. Not part of the public API. */
+/**
+ * Payload passed to `onValueChange`: new value, previous value, and what drove the change.
+ */
+export interface RatingValueChangeDetail {
+    /** The rating value the change settled on. */
+    value: number;
+    /** The value held before the change, or `null` when it was `0` (unrated). */
+    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. */
 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. */
 export interface RatingProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange'> {
     /**
-     * Current value, for controlled usage. Pair with `onValueChange`.
+     * Current value for controlled usage; pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: number;
+    value?: number | undefined;
     /**
      * Initial value, for uncontrolled usage, seeding the first render.
      * @default 0 — no items filled until the user picks a rating.
      */
-    defaultValue?: number;
+    defaultValue?: number | undefined;
     /**
-     * Fires with the new value whenever the selected item changes, controlled or not.
+     * Fires when the selected value changes, carrying new value, previous value, and reason.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: number) => void;
+    onValueChange?: ((detail: RatingValueChangeDetail) => void) | undefined;
     /**
-     * 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 the previewed value while hovering; a display-only signal that never touches committed value.
      * @default undefined — no-op if omitted.
      */
-    onHoverValueChange?: (value: number | null) => void;
+    onHoverValueChange?: ((value: number | null) => void) | undefined;
     /**
      * Number of items to render, e.g. stars.
      * @default 5
+     * @min 1
      */
-    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.
+    max?: number | undefined;
+    /**
+     * Names each item as `aria-label`, since a bare icon announces nothing; an item's own `aria-label` overrides it.
+     * @default (value, max) => `${value} of ${max} stars`
+     */
+    itemLabel?: ((value: number, max: number) => string) | undefined;
+    /**
+     * Clears the committed value to `0` when picked again; with `allowHalf`, the exact half-value must match.
      * @default false
      */
-    allowHalf?: boolean;
+    allowClear?: boolean | undefined;
+    /**
+     * Allows half-item values, switching the root to `role="slider"` with items as non-focusable `role="presentation"`.
+     * @default false
+     */
+    allowHalf?: boolean | undefined;
     /**
      * Disables every `RatingItem`, blocking all interaction.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Displays the current value but blocks interaction (still focusable, unlike `disabled`).
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
-     * 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, a hidden input submits the rating as `String(value)`, or empty when `0`.
      * @default undefined — submits nothing.
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Marks the rating required: with `name`, native `valueMissing` until an
      * item is chosen, reported through `checkValidity()`/`reportValidity()`.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
+    /**
+     * Form ID for this rating when rendered outside it, e.g. in a Dialog portal.
+     * @default undefined — the rating belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string | undefined;
+    /**
+     * Content inside each derived `RatingItem`, replacing the default star glyph; ignored when `children` is given.
+     * @default undefined — the default star glyph.
+     */
+    icon?: React.ReactNode | undefined;
+    /**
+     * Size rung the skin scales the stars by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
 }
 /**
- * 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>` ref augmented with `FormValidityHandle` constraint-validation methods.
  */
 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 | undefined;
 }

package/dist/resizable/Resizable.cjs

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

package/dist/resizable/Resizable.d.cts

@@ -1,29 +1,23 @@
 import * as React from 'react';
 import type { ResizableContextValue, ResizablePanelGroupProps } from './types.cjs';
-export declare const ResizableProvider: {
-    (props: ResizableContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useResizableContext: (consumerName: string) => ResizableContextValue;
+export declare const ResizableProvider: React.FC<ResizableContextValue & {
+    children: React.ReactNode;
+}>, 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`.
- *
- * 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.
+ * Flexbox split-pane group that redistributes size between adjacent panels via draggable handles.
  *
  * @example
  * ```tsx
- * <ResizablePanelGroup direction="horizontal">
- *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
- *   <ResizableHandle />
- *   <ResizablePanel>Main content</ResizablePanel>
- * </ResizablePanelGroup>
+ * <ResizablePanelGroup
+ *   orientation="horizontal"
+ *   panels={[
+ *     { defaultSize: 30, minSize: 20, collapsible: true, content: 'Sidebar' },
+ *     { content: 'Main content' },
+ *   ]}
+ * />
  * ```
  */
-export declare const ResizablePanelGroup: React.ForwardRefExoticComponent<Omit<ResizablePanelGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ResizablePanelGroup: {
+    ({ orientation, sizes: sizesProp, step, onLayout, onLayoutCommit, onCollapse, onExpand, panels, children, style, ref: forwardedRef, size, ...props }: ResizablePanelGroupProps): React.ReactNode;
+    displayName: string;
+};

package/dist/resizable/Resizable.d.ts

@@ -1,29 +1,23 @@
 import * as React from 'react';
 import type { ResizableContextValue, ResizablePanelGroupProps } from './types.js';
-export declare const ResizableProvider: {
-    (props: ResizableContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useResizableContext: (consumerName: string) => ResizableContextValue;
+export declare const ResizableProvider: React.FC<ResizableContextValue & {
+    children: React.ReactNode;
+}>, 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`.
- *
- * 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.
+ * Flexbox split-pane group that redistributes size between adjacent panels via draggable handles.
  *
  * @example
  * ```tsx
- * <ResizablePanelGroup direction="horizontal">
- *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
- *   <ResizableHandle />
- *   <ResizablePanel>Main content</ResizablePanel>
- * </ResizablePanelGroup>
+ * <ResizablePanelGroup
+ *   orientation="horizontal"
+ *   panels={[
+ *     { defaultSize: 30, minSize: 20, collapsible: true, content: 'Sidebar' },
+ *     { content: 'Main content' },
+ *   ]}
+ * />
  * ```
  */
-export declare const ResizablePanelGroup: React.ForwardRefExoticComponent<Omit<ResizablePanelGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ResizablePanelGroup: {
+    ({ orientation, sizes: sizesProp, step, onLayout, onLayoutCommit, onCollapse, onExpand, panels, children, style, ref: forwardedRef, size, ...props }: ResizablePanelGroupProps): React.ReactNode;
+    displayName: string;
+};

package/dist/resizable/Resizable.js

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

@@ -1,21 +1,20 @@
 import * as React from 'react';
 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.
+ * The draggable divider between two `ResizablePanel`s, resizable by pointer drag or arrow keys.
  *
  * @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>
  * ```
  */
-export declare const ResizableHandle: React.ForwardRefExoticComponent<Omit<ResizableHandleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ResizableHandle: {
+    ({ disabled, step: stepProp, style, ref: forwardedRef, ...props }: ResizableHandleProps): React.ReactNode;
+    displayName: string;
+};

package/dist/resizable/ResizableHandle.d.ts

@@ -1,21 +1,20 @@
 import * as React from 'react';
 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.
+ * The draggable divider between two `ResizablePanel`s, resizable by pointer drag or arrow keys.
  *
  * @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>
  * ```
  */
-export declare const ResizableHandle: React.ForwardRefExoticComponent<Omit<ResizableHandleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ResizableHandle: {
+    ({ disabled, step: stepProp, style, ref: forwardedRef, ...props }: ResizableHandleProps): React.ReactNode;
+    displayName: string;
+};

package/dist/resizable/ResizablePanel.d.cts

@@ -1,19 +1,18 @@
 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}, defaulting to a 10/90 min/max size to prevent zero-width.
  *
  * @example
  * ```tsx
- * <ResizablePanelGroup direction="horizontal">
+ * <ResizablePanelGroup orientation="horizontal">
  *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
  *   <ResizableHandle />
  *   <ResizablePanel>Main content</ResizablePanel>
  * </ResizablePanelGroup>
  * ```
  */
-export declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<ResizablePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ResizablePanel: {
+    ({ defaultSize, minSize, maxSize, collapsible, collapsedSize, id: idProp, style, ref: forwardedRef, ...props }: ResizablePanelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/resizable/ResizablePanel.d.ts

@@ -1,19 +1,18 @@
 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}, defaulting to a 10/90 min/max size to prevent zero-width.
  *
  * @example
  * ```tsx
- * <ResizablePanelGroup direction="horizontal">
+ * <ResizablePanelGroup orientation="horizontal">
  *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
  *   <ResizableHandle />
  *   <ResizablePanel>Main content</ResizablePanel>
  * </ResizablePanelGroup>
  * ```
  */
-export declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<ResizablePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ResizablePanel: {
+    ({ defaultSize, minSize, maxSize, collapsible, collapsedSize, id: idProp, style, ref: forwardedRef, ...props }: ResizablePanelProps): React.ReactNode;
+    displayName: string;
+};

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,21 @@
+import type { PanelConfig } from './types.cjs';
+/**
+ * Minimum size for a panel: `collapsedSize` when collapsible, otherwise `minSize`.
+ */
+export declare function panelLowerBound(config: PanelConfig): number;
+/**
+ * True when a collapsible panel's size is at or below its `collapsedSize`.
+ */
+export declare function isPanelCollapsed(config: PanelConfig | undefined, size: number | undefined): boolean;
+/**
+ * Resolves a panel's size, clamping to `[minSize, maxSize]` or snapping shut below `minSize` when collapsible.
+ */
+export declare function resolvePanelSize(config: PanelConfig, current: number, requested: number): number;
+/**
+ * Resolves the start panel's size when a handle moves by `delta`, keeping the pair's total invariant.
+ */
+export declare function resolvePairSize(leftConfig: PanelConfig, rightConfig: PanelConfig, leftSize: number, rightSize: number, delta: number): number;
+/**
+ * Initial layout: panels with `defaultSize` keep it, the rest split the remainder evenly.
+ */
+export declare function seedSizes(configs: ReadonlyArray<PanelConfig | undefined>): number[];

package/dist/resizable/layout.d.ts

@@ -0,0 +1,21 @@
+import type { PanelConfig } from './types.js';
+/**
+ * Minimum size for a panel: `collapsedSize` when collapsible, otherwise `minSize`.
+ */
+export declare function panelLowerBound(config: PanelConfig): number;
+/**
+ * True when a collapsible panel's size is at or below its `collapsedSize`.
+ */
+export declare function isPanelCollapsed(config: PanelConfig | undefined, size: number | undefined): boolean;
+/**
+ * Resolves a panel's size, clamping to `[minSize, maxSize]` or snapping shut below `minSize` when collapsible.
+ */
+export declare function resolvePanelSize(config: PanelConfig, current: number, requested: number): number;
+/**
+ * Resolves the start panel's size when a handle moves by `delta`, keeping the pair's total invariant.
+ */
+export declare function resolvePairSize(leftConfig: PanelConfig, rightConfig: PanelConfig, leftSize: number, rightSize: number, delta: number): number;
+/**
+ * Initial layout: panels with `defaultSize` keep it, the rest split the remainder evenly.
+ */
+export declare function seedSizes(configs: ReadonlyArray<PanelConfig | undefined>): number[];

package/dist/resizable/panelDefaults.d.cts

@@ -0,0 +1,6 @@
+/**
+ * Default panel size bounds, shared by `ResizablePanel`'s defaults and `ResizableHandle`'s aria-value fallback.
+ */
+export declare const DEFAULT_PANEL_MIN_SIZE = 10;
+/** @see {@link DEFAULT_PANEL_MIN_SIZE} */
+export declare const DEFAULT_PANEL_MAX_SIZE = 90;

package/dist/resizable/panelDefaults.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Default panel size bounds, shared by `ResizablePanel`'s defaults and `ResizableHandle`'s aria-value fallback.
+ */
+export declare const DEFAULT_PANEL_MIN_SIZE = 10;
+/** @see {@link DEFAULT_PANEL_MIN_SIZE} */
+export declare const DEFAULT_PANEL_MAX_SIZE = 90;

package/dist/resizable/primitives.d.cts

@@ -0,0 +1,18 @@
+/**
+ * Primitives for `ResizablePanelGroup`, including `ResizablePanel` and `ResizableHandle`.
+ *
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@skdx/react/primitives/resizable';
+ *
+ * <ResizablePanelGroup orientation="horizontal">
+ *   <ResizablePanel defaultSize={30} minSize={20} collapsible>Sidebar</ResizablePanel>
+ *   <ResizableHandle aria-label="Sidebar width" />
+ *   <ResizablePanel>Main content</ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ */
+export { ResizablePanelGroup } from './Resizable.cjs';
+export { ResizablePanel } from './ResizablePanel.cjs';
+export { ResizableHandle } from './ResizableHandle.cjs';
+export type { ResizablePanelGroupProps, ResizablePanelProps, ResizableHandleProps } from './types.cjs';

package/dist/resizable/primitives.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Primitives for `ResizablePanelGroup`, including `ResizablePanel` and `ResizableHandle`.
+ *
+ * @example
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@skdx/react/primitives/resizable';
+ *
+ * <ResizablePanelGroup orientation="horizontal">
+ *   <ResizablePanel defaultSize={30} minSize={20} collapsible>Sidebar</ResizablePanel>
+ *   <ResizableHandle aria-label="Sidebar width" />
+ *   <ResizablePanel>Main content</ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ */
+export { ResizablePanelGroup } from './Resizable.js';
+export { ResizablePanel } from './ResizablePanel.js';
+export { ResizableHandle } from './ResizableHandle.js';
+export type { ResizablePanelGroupProps, ResizablePanelProps, ResizableHandleProps } from './types.js';