@skdx/react 0.27.0 → 0.29.0

package/dist/resizable/types.d.cts

@@ -2,60 +2,152 @@ 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;
+    defaultSize?: number | undefined;
     minSize: number;
     maxSize: number;
+    collapsible?: boolean | undefined;
+    collapsedSize?: number | undefined;
 }
 /** @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. */
+/** @internal Shared state distributed from {@link ResizablePanelGroup} to its parts via context. */
 export interface ResizableContextValue {
-    direction: 'horizontal' | 'vertical';
+    orientation: 'horizontal' | 'vertical';
     groupRef: React.RefObject<HTMLDivElement | null>;
     order: string[];
     sizes: number[];
     registerPanel: (id: string, config: PanelConfig) => void;
+    /** Drops an unmounted panel and re-seeds the survivors, so handle indices stay true. */
+    unregisterPanel: (id: string) => void;
     registerHandle: () => number;
+    /** A handle's index resolved from its DOM position, with the registration counter as the server-render fallback. */
+    resolveHandleIndex: (handle: Element, fallback: number) => number;
     resizePanels: (handleIndex: number, deltaPercent: number) => void;
+    commitLayout: () => void;
     getPanelConfig: (index: number) => PanelConfig | undefined;
+    /** Group-level percentage-points-per-Arrow-key default; a Handle's own `step` overrides it. */
+    step: number;
+    /** Current sizes as percentages, in Panel order. The read half of the layout API. */
+    getSizes: () => number[];
+    /** Drives the layout to `sizes` (percentages, Panel order), clamped per panel and renormalised to 100. */
+    setSizes: (sizes: number[]) => void;
+    /** Returns every panel to the size its `defaultSize` — or the even split — implies. */
+    resetSizes: () => void;
 }
 /** 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).
+     * Layout axis; selects flex direction, arrow keys, cursor, and Handle's `aria-orientation`.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Controlled panel sizes (percentages, in Panel order); supply to externalize layout state.
+     * @default undefined — the group owns its sizes.
+     */
+    sizes?: number[] | undefined;
+    /**
+     * Percentage points per Arrow key press, as a group-level default; a Handle's own `step` overrides it.
+     * @default 2
+     */
+    step?: number | undefined;
+    /**
+     * Fires whenever panel sizes change, with the full sizes array; continuous during a drag.
      * @default undefined — no-op if omitted.
      */
-    onLayout?: (sizes: number[]) => void;
+    onLayout?: ((sizes: number[]) => void) | undefined;
+    /**
+     * Fires once a layout change finishes (pointer release or keyboard), with the full sizes array.
+     * @default undefined — no-op if omitted.
+     */
+    onLayoutCommit?: ((sizes: number[]) => void) | undefined;
+    /**
+     * Fires once when a `collapsible` Panel reaches its `collapsedSize`, with the id of the panel that closed.
+     * @default undefined — no-op if omitted.
+     */
+    onCollapse?: ((detail: {
+        panelId: string;
+    }) => void) | undefined;
+    /**
+     * Fires when a collapsed Panel reopens, with the id of the panel that opened.
+     * @default undefined — no-op if omitted.
+     */
+    onExpand?: ((detail: {
+        panelId: string;
+    }) => void) | undefined;
+    /**
+     * Panels to derive with alternating Handles; ignored when `children` is given.
+     * @default undefined — nothing is derived; compose `ResizablePanel`s (and `ResizableHandle`s) as `children`.
+     */
+    panels?: readonly ResizablePanelConfig[] | undefined;
+    /**
+     * Size rung the skin scales the handles by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
+}
+/** One entry of {@link ResizablePanelGroupProps.panels} — a derived {@link ResizablePanel}'s config plus its body. */
+export interface ResizablePanelConfig {
+    /** Stable identifier used to track this panel's size across renders. */
+    id?: string | undefined;
+    /** Initial size as a percentage (0-100). */
+    defaultSize?: number | undefined;
+    /** Minimum size as a percentage (0-100). */
+    minSize?: number | undefined;
+    /** Maximum size as a percentage (0-100). */
+    maxSize?: number | undefined;
+    /** Lets this panel close entirely — see {@link ResizablePanelProps.collapsible}. */
+    collapsible?: boolean | undefined;
+    /** The size, as a percentage, a `collapsible` panel takes while closed. */
+    collapsedSize?: number | undefined;
+    /** The derived panel's body. */
+    content?: React.ReactNode | undefined;
 }
 /** 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.
+     * @min 0
+     * @max 100
      */
-    defaultSize?: number;
+    defaultSize?: number | undefined;
     /**
      * Minimum size as a percentage (0-100); the group won't shrink this panel
      * past it when an adjacent handle is dragged.
      * @default 10
+     * @min 0
+     * @max 100
      */
-    minSize?: number;
+    minSize?: number | undefined;
     /**
      * Maximum size as a percentage (0-100); the group won't grow this panel
      * past it when an adjacent handle is dragged.
      * @default 90
+     * @min 0
+     * @max 100
      */
-    maxSize?: number;
+    maxSize?: number | undefined;
     /**
-     * Stable identifier used to track this panel's size across renders. Auto-generated if omitted.
+     * Allows the panel to close entirely; a resize below `minSize` snaps to `collapsedSize`.
+     * @default false
+     */
+    collapsible?: boolean | undefined;
+    /**
+     * The size, as a percentage, a `collapsible` panel takes while closed; carries `data-collapsed` there.
+     * @default 0
+     * @min 0
+     * @max 100
+     */
+    collapsedSize?: number | undefined;
+    /**
+     * Stable identifier used to track this panel's size across renders; auto-generated if omitted.
      * @default undefined — an id is auto-generated.
      */
-    id?: string;
+    id?: string | undefined;
 }
 /** Props for a {@link ResizableHandle} between two panels. */
 export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
@@ -63,10 +155,11 @@ export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
      * Disables dragging and keyboard resizing on this handle.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Percentage nudged per Arrow key press.
-     * @default 2
+     * Percentage points nudged per Arrow key press, overriding the group's own
+     * `step` for this one Handle. The unit is percentage points, not pixels.
+     * @default undefined — inherits the group's `step` (2).
      */
-    step?: number;
+    step?: number | undefined;
 }

package/dist/resizable/types.d.ts

@@ -2,60 +2,152 @@ 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;
+    defaultSize?: number | undefined;
     minSize: number;
     maxSize: number;
+    collapsible?: boolean | undefined;
+    collapsedSize?: number | undefined;
 }
 /** @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. */
+/** @internal Shared state distributed from {@link ResizablePanelGroup} to its parts via context. */
 export interface ResizableContextValue {
-    direction: 'horizontal' | 'vertical';
+    orientation: 'horizontal' | 'vertical';
     groupRef: React.RefObject<HTMLDivElement | null>;
     order: string[];
     sizes: number[];
     registerPanel: (id: string, config: PanelConfig) => void;
+    /** Drops an unmounted panel and re-seeds the survivors, so handle indices stay true. */
+    unregisterPanel: (id: string) => void;
     registerHandle: () => number;
+    /** A handle's index resolved from its DOM position, with the registration counter as the server-render fallback. */
+    resolveHandleIndex: (handle: Element, fallback: number) => number;
     resizePanels: (handleIndex: number, deltaPercent: number) => void;
+    commitLayout: () => void;
     getPanelConfig: (index: number) => PanelConfig | undefined;
+    /** Group-level percentage-points-per-Arrow-key default; a Handle's own `step` overrides it. */
+    step: number;
+    /** Current sizes as percentages, in Panel order. The read half of the layout API. */
+    getSizes: () => number[];
+    /** Drives the layout to `sizes` (percentages, Panel order), clamped per panel and renormalised to 100. */
+    setSizes: (sizes: number[]) => void;
+    /** Returns every panel to the size its `defaultSize` — or the even split — implies. */
+    resetSizes: () => void;
 }
 /** 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).
+     * Layout axis; selects flex direction, arrow keys, cursor, and Handle's `aria-orientation`.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Controlled panel sizes (percentages, in Panel order); supply to externalize layout state.
+     * @default undefined — the group owns its sizes.
+     */
+    sizes?: number[] | undefined;
+    /**
+     * Percentage points per Arrow key press, as a group-level default; a Handle's own `step` overrides it.
+     * @default 2
+     */
+    step?: number | undefined;
+    /**
+     * Fires whenever panel sizes change, with the full sizes array; continuous during a drag.
      * @default undefined — no-op if omitted.
      */
-    onLayout?: (sizes: number[]) => void;
+    onLayout?: ((sizes: number[]) => void) | undefined;
+    /**
+     * Fires once a layout change finishes (pointer release or keyboard), with the full sizes array.
+     * @default undefined — no-op if omitted.
+     */
+    onLayoutCommit?: ((sizes: number[]) => void) | undefined;
+    /**
+     * Fires once when a `collapsible` Panel reaches its `collapsedSize`, with the id of the panel that closed.
+     * @default undefined — no-op if omitted.
+     */
+    onCollapse?: ((detail: {
+        panelId: string;
+    }) => void) | undefined;
+    /**
+     * Fires when a collapsed Panel reopens, with the id of the panel that opened.
+     * @default undefined — no-op if omitted.
+     */
+    onExpand?: ((detail: {
+        panelId: string;
+    }) => void) | undefined;
+    /**
+     * Panels to derive with alternating Handles; ignored when `children` is given.
+     * @default undefined — nothing is derived; compose `ResizablePanel`s (and `ResizableHandle`s) as `children`.
+     */
+    panels?: readonly ResizablePanelConfig[] | undefined;
+    /**
+     * Size rung the skin scales the handles by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
+}
+/** One entry of {@link ResizablePanelGroupProps.panels} — a derived {@link ResizablePanel}'s config plus its body. */
+export interface ResizablePanelConfig {
+    /** Stable identifier used to track this panel's size across renders. */
+    id?: string | undefined;
+    /** Initial size as a percentage (0-100). */
+    defaultSize?: number | undefined;
+    /** Minimum size as a percentage (0-100). */
+    minSize?: number | undefined;
+    /** Maximum size as a percentage (0-100). */
+    maxSize?: number | undefined;
+    /** Lets this panel close entirely — see {@link ResizablePanelProps.collapsible}. */
+    collapsible?: boolean | undefined;
+    /** The size, as a percentage, a `collapsible` panel takes while closed. */
+    collapsedSize?: number | undefined;
+    /** The derived panel's body. */
+    content?: React.ReactNode | undefined;
 }
 /** 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.
+     * @min 0
+     * @max 100
      */
-    defaultSize?: number;
+    defaultSize?: number | undefined;
     /**
      * Minimum size as a percentage (0-100); the group won't shrink this panel
      * past it when an adjacent handle is dragged.
      * @default 10
+     * @min 0
+     * @max 100
      */
-    minSize?: number;
+    minSize?: number | undefined;
     /**
      * Maximum size as a percentage (0-100); the group won't grow this panel
      * past it when an adjacent handle is dragged.
      * @default 90
+     * @min 0
+     * @max 100
      */
-    maxSize?: number;
+    maxSize?: number | undefined;
     /**
-     * Stable identifier used to track this panel's size across renders. Auto-generated if omitted.
+     * Allows the panel to close entirely; a resize below `minSize` snaps to `collapsedSize`.
+     * @default false
+     */
+    collapsible?: boolean | undefined;
+    /**
+     * The size, as a percentage, a `collapsible` panel takes while closed; carries `data-collapsed` there.
+     * @default 0
+     * @min 0
+     * @max 100
+     */
+    collapsedSize?: number | undefined;
+    /**
+     * Stable identifier used to track this panel's size across renders; auto-generated if omitted.
      * @default undefined — an id is auto-generated.
      */
-    id?: string;
+    id?: string | undefined;
 }
 /** Props for a {@link ResizableHandle} between two panels. */
 export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
@@ -63,10 +155,11 @@ export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
      * Disables dragging and keyboard resizing on this handle.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Percentage nudged per Arrow key press.
-     * @default 2
+     * Percentage points nudged per Arrow key press, overriding the group's own
+     * `step` for this one Handle. The unit is percentage points, not pixels.
+     * @default undefined — inherits the group's `step` (2).
      */
-    step?: number;
+    step?: number | undefined;
 }

package/dist/scroll-area/ScrollArea.cjs

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

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

@@ -1,34 +1,36 @@
 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;
+import type { ScrollAreaContextValue, ScrollAreaProps, ScrollAreaRootProps } from './types.cjs';
+export declare const ScrollAreaProvider: React.FC<ScrollAreaContextValue & {
+    children: React.ReactNode;
+}>, 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.
+ * Scroll area state primitive that owns overflow, hover, and scrolling state for its parts.
  *
  * @example
  * ```tsx
- * <ScrollArea type="hover" style={{ height: 200 }}>
- *   <ScrollAreaViewport>
- *     Long content…
- *   </ScrollAreaViewport>
+ * import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from '@skdx/react/primitives/scroll-area';
+ *
+ * <ScrollAreaRoot type="hover" style={{ height: 200 }}>
+ *   <ScrollAreaViewport>Long content…</ScrollAreaViewport>
  *   <ScrollAreaScrollbar orientation="vertical">
  *     <ScrollAreaThumb />
  *   </ScrollAreaScrollbar>
- *   <ScrollAreaScrollbar orientation="horizontal">
- *     <ScrollAreaThumb />
- *   </ScrollAreaScrollbar>
- *   <ScrollAreaCorner />
- * </ScrollArea>
+ * </ScrollAreaRoot>
+ * ```
+ */
+export declare const ScrollAreaRoot: {
+    ({ type, scrollHideDelay, onScrollPositionChange, style, ref: forwardedRef, size, ...props }: ScrollAreaRootProps): React.ReactNode;
+    displayName: string;
+};
+/**
+ * Wraps natively-scrollable `children` with a derived custom scrollbar.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea aria-label="Release notes" style={{ height: 200 }}>Long content…</ScrollArea>
  * ```
  */
-export declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollArea: {
+    ({ scrollbars, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, ref: forwardedRef, ...rootProps }: ScrollAreaProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,34 +1,36 @@
 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;
+import type { ScrollAreaContextValue, ScrollAreaProps, ScrollAreaRootProps } from './types.js';
+export declare const ScrollAreaProvider: React.FC<ScrollAreaContextValue & {
+    children: React.ReactNode;
+}>, 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.
+ * Scroll area state primitive that owns overflow, hover, and scrolling state for its parts.
  *
  * @example
  * ```tsx
- * <ScrollArea type="hover" style={{ height: 200 }}>
- *   <ScrollAreaViewport>
- *     Long content…
- *   </ScrollAreaViewport>
+ * import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from '@skdx/react/primitives/scroll-area';
+ *
+ * <ScrollAreaRoot type="hover" style={{ height: 200 }}>
+ *   <ScrollAreaViewport>Long content…</ScrollAreaViewport>
  *   <ScrollAreaScrollbar orientation="vertical">
  *     <ScrollAreaThumb />
  *   </ScrollAreaScrollbar>
- *   <ScrollAreaScrollbar orientation="horizontal">
- *     <ScrollAreaThumb />
- *   </ScrollAreaScrollbar>
- *   <ScrollAreaCorner />
- * </ScrollArea>
+ * </ScrollAreaRoot>
+ * ```
+ */
+export declare const ScrollAreaRoot: {
+    ({ type, scrollHideDelay, onScrollPositionChange, style, ref: forwardedRef, size, ...props }: ScrollAreaRootProps): React.ReactNode;
+    displayName: string;
+};
+/**
+ * Wraps natively-scrollable `children` with a derived custom scrollbar.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea aria-label="Release notes" style={{ height: 200 }}>Long content…</ScrollArea>
  * ```
  */
-export declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollArea: {
+    ({ scrollbars, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, ref: forwardedRef, ...rootProps }: ScrollAreaProps): React.ReactNode;
+    displayName: string;
+};

package/dist/scroll-area/ScrollArea.js

@@ -1 +1,2 @@
-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};
+'use client';
+import*as v from"react";import{appearanceAttrs as Re}from"../utils/appearance.js";import{createSafeContext as he}from"../utils/createContext.js";import{skdxPart as Ae}from"../utils/part.js";import{composeEventHandlers as J,Primitive as Pe}from"../utils/primitive.js";import{useCallbackRef as ye}from"../utils/useCallbackRef.js";import{skdxPart as ee}from"../utils/part.js";import{Primitive as re}from"../utils/primitive.js";import{jsx as te}from"react/jsx-runtime";var N=({forceMount:a,ref:s,...n})=>{let c=T("ScrollAreaCorner");return!a&&(!c.scrollbarXEnabled||!c.scrollbarYEnabled)?null:te(re.div,{"data-skdx-scroll-area-corner":"","aria-hidden":"true",...n,...ee("scroll-area","corner",n.className),ref:s})};N.displayName="ScrollAreaCorner";import*as O from"react";import{useComposedRefs as oe}from"../utils/composeRefs.js";import{skdxPart as le}from"../utils/part.js";import{Primitive as ae,useComposedEventHandlers as ne}from"../utils/primitive.js";import{jsx as U}from"react/jsx-runtime";var W=O.createContext("vertical"),M=({orientation:a="vertical",forceMount:s,ref:n,...c})=>{let t=T("ScrollAreaScrollbar"),{viewportRef:r}=t,i=O.useRef(null),w=oe(n,i),p=a==="vertical"?t.scrollbarYEnabled:t.scrollbarXEnabled,R=!0;p?t.type==="hover"?R=t.hovering:t.type==="scroll"&&(R=t.hovering||t.scrolling):R=!1;let x=d=>{if(d.target!==d.currentTarget)return;let f=r.current,E=i.current;if(!f||!E)return;let m=E.querySelector("[data-skdx-scroll-area-thumb]")?.getBoundingClientRect();m&&(a==="vertical"?d.clientY<m.top?f.scrollTop-=f.clientHeight:d.clientY>m.bottom&&(f.scrollTop+=f.clientHeight):d.clientX<m.left?f.scrollLeft-=f.clientWidth:d.clientX>m.right&&(f.scrollLeft+=f.clientWidth))},h=ne(c.onPointerDown,x);return!s&&t.type!=="always"&&!p?null:U(W.Provider,{value:a,children:U(ae.div,{"data-skdx-scroll-area-scrollbar":"","aria-hidden":"true","data-orientation":a,"data-state":R?"visible":"hidden",...c,...le("scroll-area","scrollbar",c.className),ref:w,onPointerDown:h})})};M.displayName="ScrollAreaScrollbar";import*as y from"react";import{useComposedRefs as ce}from"../utils/composeRefs.js";import{resolveDirection as ie}from"../utils/direction.js";import{skdxPart as se}from"../utils/part.js";import{Primitive as fe,useComposedEventHandlers as X}from"../utils/primitive.js";import{jsx as de}from"react/jsx-runtime";var me=.1,k=({style:a,ref:s,...n})=>{let{contentRef:c,viewportRef:t}=T("ScrollAreaThumb"),r=y.useContext(W),i=y.useRef(null),w=ce(s,i),[p,R]=y.useState({sizeRatio:0,offsetRatio:0}),x=y.useRef(null),h=y.useCallback(()=>{let e=t.current;if(!e)return;let[o,S,l]=r==="vertical"?[e.clientHeight,e.scrollHeight,e.scrollTop]:[e.clientWidth,e.scrollWidth,e.scrollLeft],g=S>0?o/S:1,P=Math.min(Math.max(g,me),1),b=S-o,u=b>0?Math.abs(l)/b:0;R({sizeRatio:P,offsetRatio:u})},[t,r]);y.useLayoutEffect(()=>{h();let e=t.current;if(!e)return;e.addEventListener("scroll",h,{passive:!0});let o;return typeof ResizeObserver<"u"&&(o=new ResizeObserver(h),o.observe(e),c.current&&o.observe(c.current)),()=>{e.removeEventListener("scroll",h,{passive:!0}),o?.disconnect()}},[h,c,t]);let d=e=>{let o=t.current;o&&(e.target.setPointerCapture?.(e.pointerId),x.current={startPointer:r==="vertical"?e.clientY:e.clientX,startScroll:r==="vertical"?o.scrollTop:o.scrollLeft})},f=e=>{let o=t.current,S=i.current?.parentElement,l=x.current;if(!o||!S||!l)return;let g=r==="vertical"?S.clientHeight:S.clientWidth,P=r==="vertical"?o.clientHeight:o.clientWidth,u=(r==="vertical"?o.scrollHeight:o.scrollWidth)-P;if(u<=0)return;let L=g*p.sizeRatio,D=Math.max(g-L,1),Q=((r==="vertical"?e.clientY:e.clientX)-l.startPointer)/D*u,I=r==="horizontal"&&ie(o)==="rtl",Z=I?-u:0,j=I?0:u,B=Math.min(Math.max(l.startScroll+Q,Z),j);r==="vertical"?o.scrollTop=B:o.scrollLeft=B},E=e=>{e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),x.current=null},A=`${p.sizeRatio*100}%`,m=`${p.offsetRatio*(100-p.sizeRatio*100)}%`;return de(fe.div,{"data-skdx-scroll-area-thumb":"","aria-hidden":"true","data-orientation":r,...n,...se("scroll-area","thumb",n.className),ref:w,onPointerDown:X(n.onPointerDown,d),onPointerMove:X(n.onPointerMove,f),onPointerUp:X(n.onPointerUp,E),style:{position:"absolute",touchAction:"none",...r==="vertical"?{top:m,height:A,left:0,right:0}:{insetInlineStart:m,width:A,top:0,bottom:0},...a}})};k.displayName="ScrollAreaThumb";import*as C from"react";import{useComposedRefs as F}from"../utils/composeRefs.js";import{skdxPart as ue}from"../utils/part.js";import{Primitive as pe,useComposedEventHandlers as Se}from"../utils/primitive.js";import{jsx as q}from"react/jsx-runtime";var Y=1;function _(a,s,n){let c=s-n;if(c<=Y)return"none";let t=Math.abs(a),r=t>Y,i=t<c-Y;return r&&i?"both":r?"start":"end"}var V=({children:a,style:s,contentProps:n,role:c,ref:t,...r})=>{let{viewportRef:i,contentRef:w,setScrollbarXEnabled:p,setScrollbarYEnabled:R,setScrolling:x,scrollHideDelay:h,reportScrollPosition:d}=T("ScrollAreaViewport"),f=F(t,i),E=F(n?.ref,w),A=C.useCallback(()=>{let l=i.current;l&&(p(l.scrollWidth>l.clientWidth),R(l.scrollHeight>l.clientHeight),d({x:l.scrollLeft,y:l.scrollTop},{x:_(l.scrollLeft,l.scrollWidth,l.clientWidth),y:_(l.scrollTop,l.scrollHeight,l.clientHeight)}))},[i,p,R,d]),m=C.useRef(0),e=()=>{A(),x(!0),window.clearTimeout(m.current),m.current=window.setTimeout(()=>x(!1),h)};C.useLayoutEffect(()=>{A();let l=i.current,g=w.current;if(!l||typeof ResizeObserver>"u")return;let P=new ResizeObserver(A);P.observe(l),g&&P.observe(g);let b=requestAnimationFrame(A);return()=>{P.disconnect(),cancelAnimationFrame(b)}},[A,i,w]),C.useEffect(()=>()=>window.clearTimeout(m.current),[]);let o=r["aria-label"]!=null||r["aria-labelledby"]!=null,S=c??(o?"region":void 0);return q(pe.div,{"data-skdx-scroll-area-viewport":"",tabIndex:0,...r,role:S,...ue("scroll-area","viewport",r.className),ref:f,style:{overflow:"auto",...s},onScroll:Se(r.onScroll,e),children:q("div",{"data-skdx-scroll-area-content":"",...n,ref:E,style:{minWidth:"100%",display:"table",...n?.style},children:a})})};V.displayName="ScrollAreaViewport";import{Fragment as be,jsx as H,jsxs as ve}from"react/jsx-runtime";var $=({scrollbars:a,"aria-label":s,"aria-labelledby":n,children:c})=>ve(be,{children:[H(V,{"aria-label":s,"aria-labelledby":n,children:c}),(a==="vertical"||a==="both")&&H(M,{orientation:"vertical",children:H(k,{})}),(a==="horizontal"||a==="both")&&H(M,{orientation:"horizontal",children:H(k,{})}),a==="both"&&H(N,{})]});import{jsx as z}from"react/jsx-runtime";var[we,T]=he("ScrollArea"),G=({type:a="hover",scrollHideDelay:s=600,onScrollPositionChange:n,style:c,ref:t,size:r,...i})=>{let w=v.useRef(null),p=v.useRef(null),[R,x]=v.useState(!1),[h,d]=v.useState(!1),[f,E]=v.useState(!1),[A,m]=v.useState(!1),[e,o]=v.useState({x:"none",y:"none"}),S=ye(n),l=v.useCallback((P,b)=>{o(u=>u.x===b.x&&u.y===b.y?u:b),S(P)},[S]),g=v.useCallback(P=>{let b=w.current;if(!b)return;let{top:u,left:L,behavior:D="auto"}=P;b.scrollTo({behavior:D,...u!==void 0&&{top:u},...L!==void 0&&{left:L}})},[]);return z(we,{type:a,viewportRef:w,contentRef:p,scrollbarXEnabled:R,scrollbarYEnabled:h,setScrollbarXEnabled:x,setScrollbarYEnabled:d,hovering:f,scrolling:A,setScrolling:m,scrollHideDelay:s,reportScrollPosition:l,scrollTo:g,children:z(Pe.div,{"data-skdx-scroll-area":"","data-overflow-x":e.x,"data-overflow-y":e.y,...i,...Re({size:r},i),...Ae("scroll-area","root",i.className),ref:t,style:{position:"relative",...c},onPointerEnter:J(i.onPointerEnter,()=>E(!0)),onPointerLeave:J(i.onPointerLeave,()=>E(!1))})})};G.displayName="ScrollAreaRoot";var K=({scrollbars:a="both","aria-label":s,"aria-labelledby":n,children:c,ref:t,...r})=>z(G,{...r,ref:t,children:z($,{scrollbars:a,"aria-label":s,"aria-labelledby":n,children:c})});K.displayName="ScrollArea";export{K as ScrollArea,N as ScrollAreaCorner,we as ScrollAreaProvider,G as ScrollAreaRoot,M as ScrollAreaScrollbar,k as ScrollAreaThumb,V as ScrollAreaViewport,W as ScrollbarOrientationContext,T as useScrollAreaContext};

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

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+/**
+ * The anatomy a {@link ScrollArea} always draws: `children` in a
+ * `ScrollAreaViewport` with `aria-label`/`aria-labelledby`, plus
+ * `ScrollAreaScrollbar` + `ScrollAreaThumb` per axis in `scrollbars`,
+ * and `ScrollAreaCorner` when both axes present.
+ *
+ * @internal
+ */
+export declare const ScrollAreaAnatomy: ({ scrollbars, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, }: {
+    scrollbars: "vertical" | "horizontal" | "both";
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    children?: React.ReactNode | undefined;
+}) => React.JSX.Element;

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

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+/**
+ * The anatomy a {@link ScrollArea} always draws: `children` in a
+ * `ScrollAreaViewport` with `aria-label`/`aria-labelledby`, plus
+ * `ScrollAreaScrollbar` + `ScrollAreaThumb` per axis in `scrollbars`,
+ * and `ScrollAreaCorner` when both axes present.
+ *
+ * @internal
+ */
+export declare const ScrollAreaAnatomy: ({ scrollbars, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, }: {
+    scrollbars: "vertical" | "horizontal" | "both";
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    children?: React.ReactNode | undefined;
+}) => React.JSX.Element;

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

@@ -1,12 +1,7 @@
-import * as React from 'react';
+import type * 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.
+ * Corner square where scrollbars meet, rendered only when both are enabled or `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -18,4 +13,7 @@ import type { ScrollAreaCornerProps } from './types.cjs';
  * </ScrollArea>
  * ```
  */
-export declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<ScrollAreaCornerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaCorner: {
+    ({ forceMount, ref: forwardedRef, ...props }: ScrollAreaCornerProps): React.ReactNode;
+    displayName: string;
+};