@skdx/react 0.28.0 → 0.30.0

package/dist/rating/types.d.cts

@@ -2,18 +2,12 @@ import type * as React from 'react';
 import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /**
- * Payload `onValueChange` receives: new value, previous value, and `reason`
- * (keyboard/pointer/programmatic). Spelled out since headless packages don't
- * depend on `@skdx/shared`.
+ * 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` — 0 and
-     * "unrated" are the same state, so there is no real previous rating to
-     * report.
-     */
+    /** 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
@@ -23,7 +17,7 @@ export interface RatingValueChangeDetail {
      */
     reason: 'keyboard' | 'pointer' | 'programmatic';
 }
-/** @internal Shared state distributed from {@link Rating} to its `RatingItem`s via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Rating} to its `RatingItem`s via context. */
 export interface RatingContextValue {
     value: number;
     max: number;
@@ -41,90 +35,85 @@ export interface RatingContextValue {
 /** 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 when selected value changes (controlled or not), carrying new value,
-     * previous, and reason. Re-picking swallows unless `allowClear` is set.
+     * Fires when the selected value changes, carrying new value, previous value, and reason.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (detail: RatingValueChangeDetail) => void;
+    onValueChange?: ((detail: RatingValueChangeDetail) => void) | undefined;
     /**
-     * Fires with previewed value while hovering; never changes committed value.
-     * Purely a display signal for hover visuals.
+     * 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;
+    max?: number | undefined;
     /**
-     * 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.
+     * 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;
+    itemLabel?: ((value: number, max: number) => string) | undefined;
     /**
-     * Clear committed value to `0` by picking it again; off by default.
-     * With `allowHalf`, exact half-value must match to clear.
+     * Clears the committed value to `0` when picked again; with `allowHalf`, the exact half-value must match.
      * @default false
      */
-    allowClear?: boolean;
+    allowClear?: boolean | undefined;
     /**
-     * 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`.
+     * Allows half-item values, switching the root to `role="slider"` with items as non-focusable `role="presentation"`.
      * @default false
      */
-    allowHalf?: boolean;
+    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, hidden input submits rating as `String(value)`.
-     * Rating of `0` submits empty entry. 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).
-     * Set on hidden input; used to resolve form resets.
+     * 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;
+    form?: string | undefined;
     /**
-     * Content inside each derived `RatingItem`, replacing the default star glyph.
-     * Ignored when `children` is given.
+     * Content inside each derived `RatingItem`, replacing the default star glyph; ignored when `children` is given.
      * @default undefined — the default star glyph.
      */
-    icon?: React.ReactNode;
+    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;
 }
 /**
- * Root `<div>` plus FormValidityHandle constraint-validation methods.
- * Type your ref as this to call them.
+ * Root `<div>` ref augmented with `FormValidityHandle` constraint-validation methods.
  */
 export type RatingHandle = HTMLDivElement & FormValidityHandle;
 /** Props for a single {@link RatingItem}, e.g. one star. */
@@ -135,5 +124,5 @@ export interface RatingItemProps extends PrimitivePropsWithRef<'button'> {
      * Disables this item, blocking selection and interaction.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }

package/dist/rating/types.d.ts

@@ -2,18 +2,12 @@ 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`.
+ * 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` — 0 and
-     * "unrated" are the same state, so there is no real previous rating to
-     * report.
-     */
+    /** 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
@@ -23,7 +17,7 @@ export interface RatingValueChangeDetail {
      */
     reason: 'keyboard' | 'pointer' | 'programmatic';
 }
-/** @internal Shared state distributed from {@link Rating} to its `RatingItem`s via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Rating} to its `RatingItem`s via context. */
 export interface RatingContextValue {
     value: number;
     max: number;
@@ -41,90 +35,85 @@ export interface RatingContextValue {
 /** 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 when selected value changes (controlled or not), carrying new value,
-     * previous, and reason. Re-picking swallows unless `allowClear` is set.
+     * Fires when the selected value changes, carrying new value, previous value, and reason.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (detail: RatingValueChangeDetail) => void;
+    onValueChange?: ((detail: RatingValueChangeDetail) => void) | undefined;
     /**
-     * Fires with previewed value while hovering; never changes committed value.
-     * Purely a display signal for hover visuals.
+     * 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;
+    max?: number | undefined;
     /**
-     * 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.
+     * 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;
+    itemLabel?: ((value: number, max: number) => string) | undefined;
     /**
-     * Clear committed value to `0` by picking it again; off by default.
-     * With `allowHalf`, exact half-value must match to clear.
+     * Clears the committed value to `0` when picked again; with `allowHalf`, the exact half-value must match.
      * @default false
      */
-    allowClear?: boolean;
+    allowClear?: boolean | undefined;
     /**
-     * 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`.
+     * Allows half-item values, switching the root to `role="slider"` with items as non-focusable `role="presentation"`.
      * @default false
      */
-    allowHalf?: boolean;
+    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, hidden input submits rating as `String(value)`.
-     * Rating of `0` submits empty entry. 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).
-     * Set on hidden input; used to resolve form resets.
+     * 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;
+    form?: string | undefined;
     /**
-     * Content inside each derived `RatingItem`, replacing the default star glyph.
-     * Ignored when `children` is given.
+     * Content inside each derived `RatingItem`, replacing the default star glyph; ignored when `children` is given.
      * @default undefined — the default star glyph.
      */
-    icon?: React.ReactNode;
+    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;
 }
 /**
- * Root `<div>` plus FormValidityHandle constraint-validation methods.
- * Type your ref as this to call them.
+ * Root `<div>` ref augmented with `FormValidityHandle` constraint-validation methods.
  */
 export type RatingHandle = HTMLDivElement & FormValidityHandle;
 /** Props for a single {@link RatingItem}, e.g. one star. */
@@ -135,5 +124,5 @@ export interface RatingItemProps extends PrimitivePropsWithRef<'button'> {
      * Disables this item, blocking selection and interaction.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }

package/dist/resizable/Resizable.cjs

@@ -1 +1,2 @@
-"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});
+'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,43 +1,10 @@
 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 split-pane group: handles redistribute size between adjacent panels only.
- * Renders a `<div>` with `data-orientation` and `display: flex` along `orientation`.
- *
- * 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.
+ * Flexbox split-pane group that redistributes size between adjacent panels via draggable handles.
  *
  * @example
  * ```tsx
@@ -49,16 +16,8 @@ export declare const ResizableProvider: {
  *   ]}
  * />
  * ```
- *
- * @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>
- * ```
  */
-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,43 +1,10 @@
 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 split-pane group: handles redistribute size between adjacent panels only.
- * Renders a `<div>` with `data-orientation` and `display: flex` along `orientation`.
- *
- * 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.
+ * Flexbox split-pane group that redistributes size between adjacent panels via draggable handles.
  *
  * @example
  * ```tsx
@@ -49,16 +16,8 @@ export declare const ResizableProvider: {
  *   ]}
  * />
  * ```
- *
- * @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>
- * ```
  */
-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 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};
+'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

@@ -6,6 +6,6 @@ import type { ResizablePanelConfig } from './types.cjs';
  *
  * @internal
  */
-export declare const ResizableAnatomy: ({ panels }: {
+export declare const ResizableAnatomy: ({ panels, }: {
     panels: readonly ResizablePanelConfig[];
 }) => React.JSX.Element;

package/dist/resizable/ResizableAnatomy.d.ts

@@ -6,6 +6,6 @@ import type { ResizablePanelConfig } from './types.js';
  *
  * @internal
  */
-export declare const ResizableAnatomy: ({ panels }: {
+export declare const ResizableAnatomy: ({ panels, }: {
     panels: readonly ResizablePanelConfig[];
 }) => React.JSX.Element;

package/dist/resizable/ResizableHandle.d.cts

@@ -1,22 +1,7 @@
 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 `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.
+ * The draggable divider between two `ResizablePanel`s, resizable by pointer drag or arrow keys.
  *
  * @example
  * ```tsx
@@ -29,4 +14,7 @@ import type { ResizableHandleProps } from './types.cjs';
  * </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,22 +1,7 @@
 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 `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.
+ * The draggable divider between two `ResizablePanel`s, resizable by pointer drag or arrow keys.
  *
  * @example
  * ```tsx
@@ -29,4 +14,7 @@ import type { ResizableHandleProps } from './types.js';
  * </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;
+};