@skdx/react 0.26.0

package/dist/rating/types.d.ts

@@ -0,0 +1,93 @@
+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. */
+export interface RatingContextValue {
+    value: number;
+    max: number;
+    allowHalf: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    hoverValue: number | null;
+    onValueChange: (value: number) => 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`.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: number;
+    /**
+     * Initial value, for uncontrolled usage, seeding the first render.
+     * @default 0 — no items filled until the user picks a rating.
+     */
+    defaultValue?: number;
+    /**
+     * Fires with the new value whenever the selected item changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * Fires with the previewed value while the pointer moves across the items,
+     * and with `null` when the pointer leaves. Purely a display signal — it
+     * never changes the committed `value` — so a consumer can render "3.5" next
+     * to the stars while hovering without touching state.
+     * @default undefined — no-op if omitted.
+     */
+    onHoverValueChange?: (value: number | null) => void;
+    /**
+     * Number of items to render, e.g. stars.
+     * @default 5
+     */
+    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.
+     * @default false
+     */
+    allowHalf?: boolean;
+    /**
+     * Disables every `RatingItem`, blocking all interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Displays the current value but blocks interaction (still focusable, unlike `disabled`).
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Form field name. With it, a visually-hidden native input submits the
+     * rating as `String(value)`. A rating of `0` — nothing chosen — submits an
+     * empty entry, mirroring `<skdx-rating>`, which publishes `null` there. A
+     * form reset restores `defaultValue`.
+     * @default undefined — submits nothing.
+     */
+    name?: string;
+    /**
+     * Marks the rating required: with `name`, native `valueMissing` until an
+     * item is chosen, reported through `checkValidity()`/`reportValidity()`.
+     * @default false
+     */
+    required?: boolean;
+}
+/**
+ * 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)`.
+ */
+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;
+}

package/dist/resizable/Resizable.cjs

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

package/dist/resizable/Resizable.d.cts

@@ -0,0 +1,29 @@
+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;
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup direction="horizontal">
+ *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
+ *   <ResizableHandle />
+ *   <ResizablePanel>Main content</ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ */
+export declare const ResizablePanelGroup: React.ForwardRefExoticComponent<Omit<ResizablePanelGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/resizable/Resizable.d.ts

@@ -0,0 +1,29 @@
+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;
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup direction="horizontal">
+ *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
+ *   <ResizableHandle />
+ *   <ResizablePanel>Main content</ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ */
+export declare const ResizablePanelGroup: React.ForwardRefExoticComponent<Omit<ResizablePanelGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/resizable/Resizable.js

@@ -0,0 +1 @@
+import*as i from"react";import{clamp as K}from"../utils/clamp.js";import{useComposedRefs as O}from"../utils/composeRefs.js";import{createSafeContext as B}from"../utils/createContext.js";import{skdxPart as V}from"../utils/part.js";import{Primitive as X}from"../utils/primitive.js";import{useCallbackRef as Y}from"../utils/useCallbackRef.js";import{jsx as N}from"react/jsx-runtime";var[$,L]=B("ResizablePanelGroup"),q=i.forwardRef(({direction:o,onLayout:b,style:C,...u},D)=>{let t=i.useRef(null),x=O(D,t),r=i.useRef(new Map),l=i.useRef(0),c=Y(b),[z,p]=i.useState({order:[],sizes:[]}),f=i.useRef(z);f.current=z;let M=i.useCallback((e,a)=>{if(r.current.has(e))return;r.current.set(e,a);let d=f.current.order.includes(e)?f.current.order:[...f.current.order,e],s=d.map(m=>r.current.get(m)),n=s.reduce((m,g)=>m+(g.defaultSize??0),0),P=s.filter(m=>m.defaultSize==null).length,h=Math.max(0,100-n),v=P>0?h/P:0,w=s.map(m=>m.defaultSize??v),y={order:d,sizes:w};f.current=y,p(y)},[]),k=i.useCallback(()=>{let e=l.current;return l.current+=1,e},[]),T=i.useCallback(e=>{let a=f.current.order[e];return a?r.current.get(a):void 0},[]),I=i.useCallback((e,a)=>{p(d=>{let{order:s,sizes:n}=d,P=e,h=e+1;if(P<0||h>=s.length)return d;let v=r.current.get(s[P]),w=r.current.get(s[h]),y=n[P],m=n[h],g=K(a,v.minSize-y,v.maxSize-y);if(g=K(g,m-w.maxSize,m-w.minSize),g===0)return d;let S=[...n];S[P]=y+g,S[h]=m-g;let G={order:s,sizes:S};return f.current=G,c(S),G})},[c]);return N($,{direction:o,groupRef:t,order:z.order,sizes:z.sizes,registerPanel:M,registerHandle:k,resizePanels:I,getPanelConfig:T,children:N(X.div,{"data-orientation":o,...u,...V("resizable","root",u.className),ref:x,style:{display:"flex",flexDirection:o==="horizontal"?"row":"column",...C}})})});q.displayName="ResizablePanelGroup";import*as R from"react";import{skdxPart as F}from"../utils/part.js";import{Primitive as J}from"../utils/primitive.js";import{jsx as Q}from"react/jsx-runtime";var A=R.forwardRef(({defaultSize:o,minSize:b=10,maxSize:C=90,id:u,style:D,...t},x)=>{let r=L("ResizablePanel"),l=R.useId(),c=u??l,z=R.useRef(!1);R.useLayoutEffect(()=>{z.current||(z.current=!0,r.registerPanel(c,{defaultSize:o,minSize:b,maxSize:C}))},[]);let p=r.order.indexOf(c),f=p>=0?r.sizes[p]:o??0;return Q(J.div,{"data-skdx-resizable-panel":"","data-orientation":r.direction,...t,...F("resizable","panel",t.className),ref:x,style:{flexBasis:`${f}%`,flexGrow:0,flexShrink:0,overflow:"hidden",...D}})});A.displayName="ResizablePanel";import*as H from"react";import{directionalKey as W,resolveDirection as Z,useDirection as _}from"../utils/direction.js";import{skdxPart as j}from"../utils/part.js";import{composeEventHandlers as E,Primitive as ee}from"../utils/primitive.js";import{jsx as te}from"react/jsx-runtime";var U=H.forwardRef(({disabled:o=!1,step:b=2,style:C,...u},D)=>{let t=L("ResizableHandle"),x=_(),r=H.useRef(null);r.current===null&&(r.current=t.registerHandle());let l=r.current,c=H.useRef(null),z=t.getPanelConfig(l),p=t.sizes[l]??0,f=t.direction==="horizontal"?"vertical":"horizontal",M=e=>{o||(e.target.setPointerCapture?.(e.pointerId),c.current={lastPos:t.direction==="horizontal"?e.clientX:e.clientY})},k=e=>{if(o||!c.current)return;let a=t.groupRef.current?.getBoundingClientRect();if(!a)return;let d=t.direction==="horizontal"?a.width:a.height;if(!d)return;let s=t.direction==="horizontal"?e.clientX:e.clientY,n=(s-c.current.lastPos)/d*100;t.direction==="horizontal"&&Z(e.currentTarget,x)==="rtl"&&(n=-n),c.current.lastPos=s,n!==0&&t.resizePanels(l,n)},T=e=>{c.current&&e.target.releasePointerCapture?.(e.pointerId),c.current=null},I=e=>{if(o)return;let a=t.direction==="horizontal",d=a?"ArrowRight":"ArrowDown",s=a?"ArrowLeft":"ArrowUp",n=W(e.key,e.currentTarget,x);n===d?(e.preventDefault(),t.resizePanels(l,b)):n===s?(e.preventDefault(),t.resizePanels(l,-b)):n==="Home"?(e.preventDefault(),t.resizePanels(l,-1e3)):n==="End"&&(e.preventDefault(),t.resizePanels(l,1e3))};return te(ee.div,{role:"separator","aria-orientation":f,"aria-valuenow":Math.round(p),"aria-valuemin":z?.minSize,"aria-valuemax":z?.maxSize,"aria-disabled":o||void 0,"data-orientation":t.direction,"data-disabled":o?"":void 0,"data-skdx-resizable-handle":"",tabIndex:o?void 0:0,...u,...j("resizable","handle",u.className),ref:D,onKeyDown:E(u.onKeyDown,I),onPointerDown:E(u.onPointerDown,M),onPointerMove:E(u.onPointerMove,k),onPointerUp:E(u.onPointerUp,T),style:{touchAction:"none",cursor:o?void 0:t.direction==="horizontal"?"col-resize":"row-resize",...C}})});U.displayName="ResizableHandle";export{U as ResizableHandle,A as ResizablePanel,q as ResizablePanelGroup,$ as ResizableProvider,L as useResizableContext};

package/dist/resizable/ResizableHandle.d.cts

@@ -0,0 +1,21 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup direction="horizontal">
+ *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
+ *   <ResizableHandle />
+ *   <ResizablePanel>Main content</ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ */
+export declare const ResizableHandle: React.ForwardRefExoticComponent<Omit<ResizableHandleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/resizable/ResizableHandle.d.ts

@@ -0,0 +1,21 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup direction="horizontal">
+ *   <ResizablePanel defaultSize={30} minSize={20}>Sidebar</ResizablePanel>
+ *   <ResizableHandle />
+ *   <ResizablePanel>Main content</ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ */
+export declare const ResizableHandle: React.ForwardRefExoticComponent<Omit<ResizableHandleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/resizable/ResizablePanel.d.cts

@@ -0,0 +1,19 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup direction="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>>;

package/dist/resizable/ResizablePanel.d.ts

@@ -0,0 +1,19 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup direction="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>>;

package/dist/resizable/index.d.cts

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

package/dist/resizable/index.d.ts

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

package/dist/resizable/types.d.cts

@@ -0,0 +1,72 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal Per-panel size constraints registered with {@link ResizablePanelGroup}. */
+export interface PanelConfig {
+    defaultSize?: number;
+    minSize: number;
+    maxSize: number;
+}
+/** @internal Current panel order and computed sizes (percentages), owned by {@link ResizablePanelGroup}. */
+export interface ResizableLayout {
+    order: string[];
+    sizes: number[];
+}
+/** @internal Shared state distributed from {@link ResizablePanelGroup} to its parts via context. Not part of the public API. */
+export interface ResizableContextValue {
+    direction: 'horizontal' | 'vertical';
+    groupRef: React.RefObject<HTMLDivElement | null>;
+    order: string[];
+    sizes: number[];
+    registerPanel: (id: string, config: PanelConfig) => void;
+    registerHandle: () => number;
+    resizePanels: (handleIndex: number, deltaPercent: number) => void;
+    getPanelConfig: (index: number) => PanelConfig | undefined;
+}
+/** Props for the {@link ResizablePanelGroup} root. */
+export interface ResizablePanelGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'onLayout'> {
+    /** Layout axis; also exposed as `data-orientation` and used to pick col-resize vs. row-resize handles. */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * Fires whenever panel sizes change, with the full sizes array (percentages).
+     * @default undefined — no-op if omitted.
+     */
+    onLayout?: (sizes: number[]) => void;
+}
+/** Props for a single {@link ResizablePanel}. */
+export interface ResizablePanelProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Initial size as a percentage (0-100). Omit to split remaining space evenly with other auto-sized panels.
+     * @default undefined — split remaining space evenly with other auto-sized panels.
+     */
+    defaultSize?: number;
+    /**
+     * Minimum size as a percentage (0-100); the group won't shrink this panel
+     * past it when an adjacent handle is dragged.
+     * @default 10
+     */
+    minSize?: number;
+    /**
+     * Maximum size as a percentage (0-100); the group won't grow this panel
+     * past it when an adjacent handle is dragged.
+     * @default 90
+     */
+    maxSize?: number;
+    /**
+     * Stable identifier used to track this panel's size across renders. Auto-generated if omitted.
+     * @default undefined — an id is auto-generated.
+     */
+    id?: string;
+}
+/** Props for a {@link ResizableHandle} between two panels. */
+export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Disables dragging and keyboard resizing on this handle.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Percentage nudged per Arrow key press.
+     * @default 2
+     */
+    step?: number;
+}

package/dist/resizable/types.d.ts

@@ -0,0 +1,72 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** @internal Per-panel size constraints registered with {@link ResizablePanelGroup}. */
+export interface PanelConfig {
+    defaultSize?: number;
+    minSize: number;
+    maxSize: number;
+}
+/** @internal Current panel order and computed sizes (percentages), owned by {@link ResizablePanelGroup}. */
+export interface ResizableLayout {
+    order: string[];
+    sizes: number[];
+}
+/** @internal Shared state distributed from {@link ResizablePanelGroup} to its parts via context. Not part of the public API. */
+export interface ResizableContextValue {
+    direction: 'horizontal' | 'vertical';
+    groupRef: React.RefObject<HTMLDivElement | null>;
+    order: string[];
+    sizes: number[];
+    registerPanel: (id: string, config: PanelConfig) => void;
+    registerHandle: () => number;
+    resizePanels: (handleIndex: number, deltaPercent: number) => void;
+    getPanelConfig: (index: number) => PanelConfig | undefined;
+}
+/** Props for the {@link ResizablePanelGroup} root. */
+export interface ResizablePanelGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'onLayout'> {
+    /** Layout axis; also exposed as `data-orientation` and used to pick col-resize vs. row-resize handles. */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * Fires whenever panel sizes change, with the full sizes array (percentages).
+     * @default undefined — no-op if omitted.
+     */
+    onLayout?: (sizes: number[]) => void;
+}
+/** Props for a single {@link ResizablePanel}. */
+export interface ResizablePanelProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Initial size as a percentage (0-100). Omit to split remaining space evenly with other auto-sized panels.
+     * @default undefined — split remaining space evenly with other auto-sized panels.
+     */
+    defaultSize?: number;
+    /**
+     * Minimum size as a percentage (0-100); the group won't shrink this panel
+     * past it when an adjacent handle is dragged.
+     * @default 10
+     */
+    minSize?: number;
+    /**
+     * Maximum size as a percentage (0-100); the group won't grow this panel
+     * past it when an adjacent handle is dragged.
+     * @default 90
+     */
+    maxSize?: number;
+    /**
+     * Stable identifier used to track this panel's size across renders. Auto-generated if omitted.
+     * @default undefined — an id is auto-generated.
+     */
+    id?: string;
+}
+/** Props for a {@link ResizableHandle} between two panels. */
+export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Disables dragging and keyboard resizing on this handle.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Percentage nudged per Arrow key press.
+     * @default 2
+     */
+    step?: number;
+}

package/dist/scroll-area/ScrollArea.cjs

@@ -0,0 +1 @@
+"use strict";var se=Object.create;var M=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var ue=(t,o)=>{for(var n in o)M(t,n,{get:o[n],enumerable:!0})},$=(t,o,n,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of me(o))!pe.call(t,r)&&r!==n&&M(t,r,{get:()=>o[r],enumerable:!(l=fe(o,r))||l.enumerable});return t};var g=(t,o,n)=>(n=t!=null?se(de(t)):{},$(o||!t||!t.__esModule?M(n,"default",{value:t,enumerable:!0}):n,t)),ve=t=>$(M({},"__esModule",{value:!0}),t);var Se={};ue(Se,{ScrollArea:()=>J,ScrollAreaCorner:()=>B,ScrollAreaProvider:()=>G,ScrollAreaScrollbar:()=>I,ScrollAreaThumb:()=>U,ScrollAreaViewport:()=>O,useScrollAreaContext:()=>P});module.exports=ve(Se);var S=g(require("react"),1),q=require("../utils/createContext.cjs"),F=require("../utils/part.cjs"),T=require("../utils/primitive.cjs"),N=require("react/jsx-runtime"),[G,P]=(0,q.createSafeContext)("ScrollArea"),J=S.forwardRef(({type:t="hover",scrollHideDelay:o=600,style:n,...l},r)=>{let f=S.useRef(null),b=S.useRef(null),[d,w]=S.useState(!1),[p,a]=S.useState(!1),[i,h]=S.useState(!1),[R,s]=S.useState(!1);return(0,N.jsx)(G,{type:t,viewportRef:f,contentRef:b,scrollbarXEnabled:d,scrollbarYEnabled:p,setScrollbarXEnabled:w,setScrollbarYEnabled:a,hovering:i,scrolling:R,setScrolling:s,scrollHideDelay:o,children:(0,N.jsx)(T.Primitive.div,{"data-skdx-scroll-area":"",...l,...(0,F.skdxPart)("scroll-area","root",l.className),ref:r,style:{position:"relative",...n},onPointerEnter:(0,T.composeEventHandlers)(l.onPointerEnter,()=>h(!0)),onPointerLeave:(0,T.composeEventHandlers)(l.onPointerLeave,()=>h(!1))})})});J.displayName="ScrollArea";var v=g(require("react"),1),X=require("../utils/composeRefs.cjs"),K=require("../utils/part.cjs"),L=require("../utils/primitive.cjs");var Y=require("react/jsx-runtime"),O=v.forwardRef(({children:t,style:o,contentProps:n,...l},r)=>{let{viewportRef:f,contentRef:b,setScrollbarXEnabled:d,setScrollbarYEnabled:w,setScrolling:p,scrollHideDelay:a}=P("ScrollAreaViewport"),i=(0,X.useComposedRefs)(r,f),h=(0,X.useComposedRefs)(n?.ref,b),R=v.useCallback(()=>{let e=f.current;e&&(d(e.scrollWidth>e.clientWidth),w(e.scrollHeight>e.clientHeight))},[f,d,w]),s=v.useRef(0),H=v.useCallback(()=>{R(),p(!0),window.clearTimeout(s.current),s.current=window.setTimeout(()=>p(!1),a)},[R,p,a]);return v.useLayoutEffect(()=>{R();let e=f.current,c=b.current;if(!e||typeof ResizeObserver>"u")return;let u=new ResizeObserver(R);return u.observe(e),c&&u.observe(c),()=>u.disconnect()},[R,f,b]),v.useEffect(()=>()=>window.clearTimeout(s.current),[]),(0,Y.jsx)(L.Primitive.div,{"data-skdx-scroll-area-viewport":"",tabIndex:0,...l,...(0,K.skdxPart)("scroll-area","viewport",l.className),ref:i,style:{overflow:"auto",...o},onScroll:(0,L.composeEventHandlers)(l.onScroll,H),children:(0,Y.jsx)("div",{"data-skdx-scroll-area-content":"",...n,ref:h,style:{minWidth:"100%",display:"table",...n?.style},children:t})})});O.displayName="ScrollAreaViewport";var E=g(require("react"),1),Q=require("../utils/composeRefs.cjs"),Z=require("../utils/part.cjs"),D=require("../utils/primitive.cjs");var W=require("react/jsx-runtime"),V=E.createContext("vertical"),I=E.forwardRef(({orientation:t="vertical",forceMount:o,...n},l)=>{let r=P("ScrollAreaScrollbar"),f=E.useRef(null),b=(0,Q.useComposedRefs)(l,f),d=t==="vertical"?r.scrollbarYEnabled:r.scrollbarXEnabled,w=r.type==="hover"?r.hovering:r.type==="scroll"?r.hovering||r.scrolling:!0,p=a=>{if(a.target!==a.currentTarget)return;let i=r.viewportRef.current,h=f.current;if(!i||!h)return;let s=h.querySelector("[data-skdx-scroll-area-thumb]")?.getBoundingClientRect();s&&(t==="vertical"?a.clientY<s.top?i.scrollTop-=i.clientHeight:a.clientY>s.bottom&&(i.scrollTop+=i.clientHeight):a.clientX<s.left?i.scrollLeft-=i.clientWidth:a.clientX>s.right&&(i.scrollLeft+=i.clientWidth))};return!o&&!d?null:(0,W.jsx)(V.Provider,{value:t,children:(0,W.jsx)(D.Primitive.div,{"data-skdx-scroll-area-scrollbar":"","data-orientation":t,"data-state":w?"visible":"hidden",...n,...(0,Z.skdxPart)("scroll-area","scrollbar",n.className),ref:b,onPointerDown:(0,D.composeEventHandlers)(n.onPointerDown,p)})})});I.displayName="ScrollAreaScrollbar";var m=g(require("react"),1),j=require("../utils/composeRefs.cjs"),ee=require("../utils/part.cjs"),A=require("../utils/primitive.cjs");var re=require("react/jsx-runtime"),Re=.1,U=m.forwardRef(({style:t,...o},n)=>{let l=P("ScrollAreaThumb"),r=m.useContext(V),f=m.useRef(null),b=(0,j.useComposedRefs)(n,f),[d,w]=m.useState({sizeRatio:0,offsetRatio:0}),p=m.useRef(null),a=m.useCallback(()=>{let e=l.viewportRef.current;if(!e)return;let[c,u,x]=r==="vertical"?[e.clientHeight,e.scrollHeight,e.scrollTop]:[e.clientWidth,e.scrollWidth,e.scrollLeft],C=u>0?c/u:1,k=Math.min(Math.max(C,Re),1),z=u-c,y=z>0?x/z:0;w({sizeRatio:k,offsetRatio:y})},[l.viewportRef,r]);m.useLayoutEffect(()=>{a();let e=l.viewportRef.current;if(!e)return;e.addEventListener("scroll",a);let c;return typeof ResizeObserver<"u"&&(c=new ResizeObserver(a),c.observe(e),l.contentRef.current&&c.observe(l.contentRef.current)),()=>{e.removeEventListener("scroll",a),c?.disconnect()}},[a,l.contentRef,l.viewportRef]);let i=e=>{let c=l.viewportRef.current;c&&(e.target.setPointerCapture?.(e.pointerId),p.current={startPointer:r==="vertical"?e.clientY:e.clientX,startScroll:r==="vertical"?c.scrollTop:c.scrollLeft})},h=e=>{let c=l.viewportRef.current,u=f.current?.parentElement,x=p.current;if(!c||!u||!x)return;let C=r==="vertical"?u.clientHeight:u.clientWidth,k=r==="vertical"?c.clientHeight:c.clientWidth,y=(r==="vertical"?c.scrollHeight:c.scrollWidth)-k;if(y<=0)return;let ce=C*d.sizeRatio,ae=Math.max(C-ce,1),ie=((r==="vertical"?e.clientY:e.clientX)-x.startPointer)/ae*y,_=Math.min(Math.max(x.startScroll+ie,0),y);r==="vertical"?c.scrollTop=_:c.scrollLeft=_},R=e=>{e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),p.current=null},s=`${d.sizeRatio*100}%`,H=`${d.offsetRatio*(100-d.sizeRatio*100)}%`;return(0,re.jsx)(A.Primitive.div,{"data-skdx-scroll-area-thumb":"","data-orientation":r,...o,...(0,ee.skdxPart)("scroll-area","thumb",o.className),ref:b,onPointerDown:(0,A.composeEventHandlers)(o.onPointerDown,i),onPointerMove:(0,A.composeEventHandlers)(o.onPointerMove,h),onPointerUp:(0,A.composeEventHandlers)(o.onPointerUp,R),style:{position:"absolute",touchAction:"none",...r==="vertical"?{top:H,height:s,left:0,right:0}:{left:H,width:s,top:0,bottom:0},...t}})});U.displayName="ScrollAreaThumb";var te=g(require("react"),1),oe=require("../utils/part.cjs"),le=require("../utils/primitive.cjs");var ne=require("react/jsx-runtime"),B=te.forwardRef(({forceMount:t,...o},n)=>{let l=P("ScrollAreaCorner");return!t&&(!l.scrollbarXEnabled||!l.scrollbarYEnabled)?null:(0,ne.jsx)(le.Primitive.div,{"data-skdx-scroll-area-corner":"",...o,...(0,oe.skdxPart)("scroll-area","corner",o.className),ref:n})});B.displayName="ScrollAreaCorner";0&&(module.exports={ScrollArea,ScrollAreaCorner,ScrollAreaProvider,ScrollAreaScrollbar,ScrollAreaThumb,ScrollAreaViewport,useScrollAreaContext});

package/dist/scroll-area/ScrollArea.d.cts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { ScrollAreaContextValue, ScrollAreaProps } from './types.cjs';
+export declare const ScrollAreaProvider: {
+    (props: ScrollAreaContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useScrollAreaContext: (consumerName: string) => ScrollAreaContextValue;
+/**
+ * Wraps a natively-scrollable viewport and exposes a custom, headless
+ * scrollbar thumb kept in sync with it. Real scrolling always happens on the
+ * viewport (`overflow: auto`); the scrollbar is a synced visual affordance,
+ * same split as Radix's ScrollArea. Renders a `<div data-skdx-scroll-area>`
+ * with `position: relative`, and tracks pointer enter/leave to drive the
+ * `'hover'`/`'scroll'` visibility of child scrollbars. With `type="scroll"`
+ * the scrollbar lingers for `scrollHideDelay` ms after scrolling stops.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea type="hover" style={{ height: 200 }}>
+ *   <ScrollAreaViewport>
+ *     Long content…
+ *   </ScrollAreaViewport>
+ *   <ScrollAreaScrollbar orientation="vertical">
+ *     <ScrollAreaThumb />
+ *   </ScrollAreaScrollbar>
+ *   <ScrollAreaScrollbar orientation="horizontal">
+ *     <ScrollAreaThumb />
+ *   </ScrollAreaScrollbar>
+ *   <ScrollAreaCorner />
+ * </ScrollArea>
+ * ```
+ */
+export declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { ScrollAreaContextValue, ScrollAreaProps } from './types.js';
+export declare const ScrollAreaProvider: {
+    (props: ScrollAreaContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useScrollAreaContext: (consumerName: string) => ScrollAreaContextValue;
+/**
+ * Wraps a natively-scrollable viewport and exposes a custom, headless
+ * scrollbar thumb kept in sync with it. Real scrolling always happens on the
+ * viewport (`overflow: auto`); the scrollbar is a synced visual affordance,
+ * same split as Radix's ScrollArea. Renders a `<div data-skdx-scroll-area>`
+ * with `position: relative`, and tracks pointer enter/leave to drive the
+ * `'hover'`/`'scroll'` visibility of child scrollbars. With `type="scroll"`
+ * the scrollbar lingers for `scrollHideDelay` ms after scrolling stops.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea type="hover" style={{ height: 200 }}>
+ *   <ScrollAreaViewport>
+ *     Long content…
+ *   </ScrollAreaViewport>
+ *   <ScrollAreaScrollbar orientation="vertical">
+ *     <ScrollAreaThumb />
+ *   </ScrollAreaScrollbar>
+ *   <ScrollAreaScrollbar orientation="horizontal">
+ *     <ScrollAreaThumb />
+ *   </ScrollAreaScrollbar>
+ *   <ScrollAreaCorner />
+ * </ScrollArea>
+ * ```
+ */
+export declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/scroll-area/ScrollArea.js

@@ -0,0 +1 @@
+import*as S from"react";import{createSafeContext as $}from"../utils/createContext.js";import{skdxPart as q}from"../utils/part.js";import{composeEventHandlers as D,Primitive as F}from"../utils/primitive.js";import{jsx as k}from"react/jsx-runtime";var[G,w]=$("ScrollArea"),J=S.forwardRef(({type:m="hover",scrollHideDelay:c=600,style:i,...t},r)=>{let s=S.useRef(null),b=S.useRef(null),[d,P]=S.useState(!1),[p,l]=S.useState(!1),[n,h]=S.useState(!1),[R,a]=S.useState(!1);return k(G,{type:m,viewportRef:s,contentRef:b,scrollbarXEnabled:d,scrollbarYEnabled:p,setScrollbarXEnabled:P,setScrollbarYEnabled:l,hovering:n,scrolling:R,setScrolling:a,scrollHideDelay:c,children:k(F.div,{"data-skdx-scroll-area":"",...t,...q("scroll-area","root",t.className),ref:r,style:{position:"relative",...i},onPointerEnter:D(t.onPointerEnter,()=>h(!0)),onPointerLeave:D(t.onPointerLeave,()=>h(!1))})})});J.displayName="ScrollArea";import*as v from"react";import{useComposedRefs as z}from"../utils/composeRefs.js";import{skdxPart as K}from"../utils/part.js";import{composeEventHandlers as Q,Primitive as Z}from"../utils/primitive.js";import{jsx as N}from"react/jsx-runtime";var X=v.forwardRef(({children:m,style:c,contentProps:i,...t},r)=>{let{viewportRef:s,contentRef:b,setScrollbarXEnabled:d,setScrollbarYEnabled:P,setScrolling:p,scrollHideDelay:l}=w("ScrollAreaViewport"),n=z(r,s),h=z(i?.ref,b),R=v.useCallback(()=>{let e=s.current;e&&(d(e.scrollWidth>e.clientWidth),P(e.scrollHeight>e.clientHeight))},[s,d,P]),a=v.useRef(0),y=v.useCallback(()=>{R(),p(!0),window.clearTimeout(a.current),a.current=window.setTimeout(()=>p(!1),l)},[R,p,l]);return v.useLayoutEffect(()=>{R();let e=s.current,o=b.current;if(!e||typeof ResizeObserver>"u")return;let u=new ResizeObserver(R);return u.observe(e),o&&u.observe(o),()=>u.disconnect()},[R,s,b]),v.useEffect(()=>()=>window.clearTimeout(a.current),[]),N(Z.div,{"data-skdx-scroll-area-viewport":"",tabIndex:0,...t,...K("scroll-area","viewport",t.className),ref:n,style:{overflow:"auto",...c},onScroll:Q(t.onScroll,y),children:N("div",{"data-skdx-scroll-area-content":"",...i,ref:h,style:{minWidth:"100%",display:"table",...i?.style},children:m})})});X.displayName="ScrollAreaViewport";import*as E from"react";import{useComposedRefs as j}from"../utils/composeRefs.js";import{skdxPart as ee}from"../utils/part.js";import{composeEventHandlers as re,Primitive as te}from"../utils/primitive.js";import{jsx as Y}from"react/jsx-runtime";var C=E.createContext("vertical"),O=E.forwardRef(({orientation:m="vertical",forceMount:c,...i},t)=>{let r=w("ScrollAreaScrollbar"),s=E.useRef(null),b=j(t,s),d=m==="vertical"?r.scrollbarYEnabled:r.scrollbarXEnabled,P=r.type==="hover"?r.hovering:r.type==="scroll"?r.hovering||r.scrolling:!0,p=l=>{if(l.target!==l.currentTarget)return;let n=r.viewportRef.current,h=s.current;if(!n||!h)return;let a=h.querySelector("[data-skdx-scroll-area-thumb]")?.getBoundingClientRect();a&&(m==="vertical"?l.clientY<a.top?n.scrollTop-=n.clientHeight:l.clientY>a.bottom&&(n.scrollTop+=n.clientHeight):l.clientX<a.left?n.scrollLeft-=n.clientWidth:l.clientX>a.right&&(n.scrollLeft+=n.clientWidth))};return!c&&!d?null:Y(C.Provider,{value:m,children:Y(te.div,{"data-skdx-scroll-area-scrollbar":"","data-orientation":m,"data-state":P?"visible":"hidden",...i,...ee("scroll-area","scrollbar",i.className),ref:b,onPointerDown:re(i.onPointerDown,p)})})});O.displayName="ScrollAreaScrollbar";import*as f from"react";import{useComposedRefs as oe}from"../utils/composeRefs.js";import{skdxPart as le}from"../utils/part.js";import{composeEventHandlers as M,Primitive as ne}from"../utils/primitive.js";import{jsx as ae}from"react/jsx-runtime";var ce=.1,W=f.forwardRef(({style:m,...c},i)=>{let t=w("ScrollAreaThumb"),r=f.useContext(C),s=f.useRef(null),b=oe(i,s),[d,P]=f.useState({sizeRatio:0,offsetRatio:0}),p=f.useRef(null),l=f.useCallback(()=>{let e=t.viewportRef.current;if(!e)return;let[o,u,A]=r==="vertical"?[e.clientHeight,e.scrollHeight,e.scrollTop]:[e.clientWidth,e.scrollWidth,e.scrollLeft],g=u>0?o/u:1,T=Math.min(Math.max(g,ce),1),H=u-o,x=H>0?A/H:0;P({sizeRatio:T,offsetRatio:x})},[t.viewportRef,r]);f.useLayoutEffect(()=>{l();let e=t.viewportRef.current;if(!e)return;e.addEventListener("scroll",l);let o;return typeof ResizeObserver<"u"&&(o=new ResizeObserver(l),o.observe(e),t.contentRef.current&&o.observe(t.contentRef.current)),()=>{e.removeEventListener("scroll",l),o?.disconnect()}},[l,t.contentRef,t.viewportRef]);let n=e=>{let o=t.viewportRef.current;o&&(e.target.setPointerCapture?.(e.pointerId),p.current={startPointer:r==="vertical"?e.clientY:e.clientX,startScroll:r==="vertical"?o.scrollTop:o.scrollLeft})},h=e=>{let o=t.viewportRef.current,u=s.current?.parentElement,A=p.current;if(!o||!u||!A)return;let g=r==="vertical"?u.clientHeight:u.clientWidth,T=r==="vertical"?o.clientHeight:o.clientWidth,x=(r==="vertical"?o.scrollHeight:o.scrollWidth)-T;if(x<=0)return;let U=g*d.sizeRatio,B=Math.max(g-U,1),_=((r==="vertical"?e.clientY:e.clientX)-A.startPointer)/B*x,L=Math.min(Math.max(A.startScroll+_,0),x);r==="vertical"?o.scrollTop=L:o.scrollLeft=L},R=e=>{e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),p.current=null},a=`${d.sizeRatio*100}%`,y=`${d.offsetRatio*(100-d.sizeRatio*100)}%`;return ae(ne.div,{"data-skdx-scroll-area-thumb":"","data-orientation":r,...c,...le("scroll-area","thumb",c.className),ref:b,onPointerDown:M(c.onPointerDown,n),onPointerMove:M(c.onPointerMove,h),onPointerUp:M(c.onPointerUp,R),style:{position:"absolute",touchAction:"none",...r==="vertical"?{top:y,height:a,left:0,right:0}:{left:y,width:a,top:0,bottom:0},...m}})});W.displayName="ScrollAreaThumb";import*as V from"react";import{skdxPart as ie}from"../utils/part.js";import{Primitive as se}from"../utils/primitive.js";import{jsx as fe}from"react/jsx-runtime";var I=V.forwardRef(({forceMount:m,...c},i)=>{let t=w("ScrollAreaCorner");return!m&&(!t.scrollbarXEnabled||!t.scrollbarYEnabled)?null:fe(se.div,{"data-skdx-scroll-area-corner":"",...c,...ie("scroll-area","corner",c.className),ref:i})});I.displayName="ScrollAreaCorner";export{J as ScrollArea,I as ScrollAreaCorner,G as ScrollAreaProvider,O as ScrollAreaScrollbar,W as ScrollAreaThumb,X as ScrollAreaViewport,w as useScrollAreaContext};

package/dist/scroll-area/ScrollAreaCorner.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { ScrollAreaCornerProps } from './types.cjs';
+/**
+ * The small square filling the gap where a vertical and horizontal
+ * `ScrollAreaScrollbar` meet. Renders `<div data-skdx-scroll-area-corner>`,
+ * or `null` when both scrollbars aren't simultaneously enabled — unless
+ * `forceMount` is set, which is what an always-visible scrollbar pair
+ * (`forceMount` on both `ScrollAreaScrollbar`s) needs to avoid an unfilled
+ * notch where they meet.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea>
+ *   <ScrollAreaViewport>{children}</ScrollAreaViewport>
+ *   <ScrollAreaScrollbar orientation="vertical"><ScrollAreaThumb /></ScrollAreaScrollbar>
+ *   <ScrollAreaScrollbar orientation="horizontal"><ScrollAreaThumb /></ScrollAreaScrollbar>
+ *   <ScrollAreaCorner />
+ * </ScrollArea>
+ * ```
+ */
+export declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<ScrollAreaCornerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/scroll-area/ScrollAreaCorner.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { ScrollAreaCornerProps } from './types.js';
+/**
+ * The small square filling the gap where a vertical and horizontal
+ * `ScrollAreaScrollbar` meet. Renders `<div data-skdx-scroll-area-corner>`,
+ * or `null` when both scrollbars aren't simultaneously enabled — unless
+ * `forceMount` is set, which is what an always-visible scrollbar pair
+ * (`forceMount` on both `ScrollAreaScrollbar`s) needs to avoid an unfilled
+ * notch where they meet.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea>
+ *   <ScrollAreaViewport>{children}</ScrollAreaViewport>
+ *   <ScrollAreaScrollbar orientation="vertical"><ScrollAreaThumb /></ScrollAreaScrollbar>
+ *   <ScrollAreaScrollbar orientation="horizontal"><ScrollAreaThumb /></ScrollAreaScrollbar>
+ *   <ScrollAreaCorner />
+ * </ScrollArea>
+ * ```
+ */
+export declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<ScrollAreaCornerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/scroll-area/ScrollAreaScrollbar.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { ScrollAreaScrollbarProps } from './types.cjs';
+/** @internal Provides the current scrollbar's axis to descendant parts (e.g. `ScrollAreaThumb`). */
+export declare const ScrollbarOrientationContext: React.Context<"horizontal" | "vertical">;
+/**
+ * A scrollbar track for one axis. Renders `<div data-skdx-scroll-area-scrollbar>`
+ * with `data-orientation` (`'vertical'` | `'horizontal'`) and `data-state`
+ * (`'visible'` | `'hidden'`, driven by the parent `ScrollArea`'s `type`).
+ * Returns `null` when that axis doesn't overflow, unless `forceMount` is set.
+ * Clicking the track (not the thumb) pages the viewport by one client size
+ * towards the click.
+ *
+ * @example
+ * ```tsx
+ * <ScrollAreaScrollbar orientation="vertical">
+ *   <ScrollAreaThumb />
+ * </ScrollAreaScrollbar>
+ * ```
+ */
+export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/scroll-area/ScrollAreaScrollbar.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { ScrollAreaScrollbarProps } from './types.js';
+/** @internal Provides the current scrollbar's axis to descendant parts (e.g. `ScrollAreaThumb`). */
+export declare const ScrollbarOrientationContext: React.Context<"horizontal" | "vertical">;
+/**
+ * A scrollbar track for one axis. Renders `<div data-skdx-scroll-area-scrollbar>`
+ * with `data-orientation` (`'vertical'` | `'horizontal'`) and `data-state`
+ * (`'visible'` | `'hidden'`, driven by the parent `ScrollArea`'s `type`).
+ * Returns `null` when that axis doesn't overflow, unless `forceMount` is set.
+ * Clicking the track (not the thumb) pages the viewport by one client size
+ * towards the click.
+ *
+ * @example
+ * ```tsx
+ * <ScrollAreaScrollbar orientation="vertical">
+ *   <ScrollAreaThumb />
+ * </ScrollAreaScrollbar>
+ * ```
+ */
+export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/scroll-area/ScrollAreaThumb.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { ScrollAreaThumbProps } from './types.cjs';
+/**
+ * The draggable handle inside a {@link ScrollAreaScrollbar}, sized and
+ * positioned as a percentage of its track to match the viewport's visible
+ * fraction and scroll offset. Renders `<div data-skdx-scroll-area-thumb>`
+ * with `data-orientation` inherited from the enclosing scrollbar. Dragging it
+ * (pointer capture-based) scrolls the viewport proportionally along that axis.
+ *
+ * @example
+ * ```tsx
+ * <ScrollAreaScrollbar orientation="vertical">
+ *   <ScrollAreaThumb />
+ * </ScrollAreaScrollbar>
+ * ```
+ */
+export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;