@skdx/react 0.26.0 → 0.28.0

package/dist/resizable/panelDefaults.d.cts

@@ -0,0 +1,6 @@
+/**
+ * The Panel size bounds, shared by `ResizablePanel`'s defaults and `ResizableHandle`'s `aria-valuemin`/`aria-valuemax` fallback. Set to 10 and 90 to prevent dragging a panel to nothing.
+ */
+export declare const DEFAULT_PANEL_MIN_SIZE = 10;
+/** @see {@link DEFAULT_PANEL_MIN_SIZE} */
+export declare const DEFAULT_PANEL_MAX_SIZE = 90;

package/dist/resizable/panelDefaults.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The Panel size bounds, shared by `ResizablePanel`'s defaults and `ResizableHandle`'s `aria-valuemin`/`aria-valuemax` fallback. Set to 10 and 90 to prevent dragging a panel to nothing.
+ */
+export declare const DEFAULT_PANEL_MIN_SIZE = 10;
+/** @see {@link DEFAULT_PANEL_MIN_SIZE} */
+export declare const DEFAULT_PANEL_MAX_SIZE = 90;

package/dist/resizable/primitives.d.cts

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

package/dist/resizable/primitives.d.ts

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

package/dist/resizable/types.d.cts

@@ -5,6 +5,8 @@ export interface PanelConfig {
     defaultSize?: number;
     minSize: number;
     maxSize: number;
+    collapsible?: boolean;
+    collapsedSize?: number;
 }
 /** @internal Current panel order and computed sizes (percentages), owned by {@link ResizablePanelGroup}. */
 export interface ResizableLayout {
@@ -13,24 +15,100 @@ export interface ResizableLayout {
 }
 /** @internal Shared state distributed from {@link ResizablePanelGroup} to its parts via context. Not part of the public API. */
 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';
+    /**
+     * Layout axis; selects flex direction, arrow keys, cursor, and `aria-orientation`
+     * on Handle. Named `orientation` for DOM consistency (reading `direction` separately).
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Controlled panel sizes (percentages, Panel order). Supply to externalize
+     * layout state; omit to use Panel `defaultSize` / even split.
+     * @default undefined — the group owns its sizes.
+     */
+    sizes?: number[];
+    /**
+     * Percentage points per Arrow key press, group-level default (Handle `step`
+     * overrides). Unit is percentage points, not pixels.
+     * @default 2
+     */
+    step?: number;
     /**
      * Fires whenever panel sizes change, with the full sizes array (percentages).
+     * Continuous: a drag fires it on every `pointermove` that moves the split.
      * @default undefined — no-op if omitted.
      */
     onLayout?: (sizes: number[]) => void;
+    /**
+     * Fires once layout change finishes (pointerup/cancel or keyboard), with full
+     * sizes array. Use this to persist; `onLayout` fires continuously.
+     * @default undefined — no-op if omitted.
+     */
+    onLayoutCommit?: (sizes: number[]) => void;
+    /**
+     * Fires when a `collapsible` Panel reaches its `collapsedSize`, with the id
+     * of the panel that closed. The edge, not the state — a drag that keeps a
+     * panel shut fires nothing further.
+     * @default undefined — no-op if omitted.
+     */
+    onCollapse?: (detail: {
+        panelId: string;
+    }) => void;
+    /**
+     * Fires when a collapsed Panel reopens, with the id of the panel that opened.
+     * Paired with `onCollapse`, and reached by pointer and keyboard alike.
+     * @default undefined — no-op if omitted.
+     */
+    onExpand?: (detail: {
+        panelId: string;
+    }) => void;
+    /**
+     * Panels to derive with alternating Handles. Ignored when `children` is given
+     * for manual composition.
+     * @default undefined — nothing is derived; compose `ResizablePanel`s (and `ResizableHandle`s) as `children`.
+     */
+    panels?: readonly ResizablePanelConfig[];
+}
+/** 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;
+    /** Initial size as a percentage (0-100). */
+    defaultSize?: number;
+    /** Minimum size as a percentage (0-100). */
+    minSize?: number;
+    /** Maximum size as a percentage (0-100). */
+    maxSize?: number;
+    /** Lets this panel close entirely — see {@link ResizablePanelProps.collapsible}. */
+    collapsible?: boolean;
+    /** The size, as a percentage, a `collapsible` panel takes while closed. */
+    collapsedSize?: number;
+    /** The derived panel's body. */
+    content?: React.ReactNode;
 }
 /** Props for a single {@link ResizablePanel}. */
 export interface ResizablePanelProps extends PrimitivePropsWithRef<'div'> {
@@ -51,6 +129,19 @@ export interface ResizablePanelProps extends PrimitivePropsWithRef<'div'> {
      * @default 90
      */
     maxSize?: number;
+    /**
+     * Allows panel to close entirely; resize below minSize snaps to collapsedSize.
+     * Off by default—minSize normally prevents collapse.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * The size, as a percentage, a `collapsible` panel takes while closed. The
+     * panel carries `data-collapsed` at that size and the group fires `collapse`
+     * / `expand` as it crosses it.
+     * @default 0
+     */
+    collapsedSize?: number;
     /**
      * Stable identifier used to track this panel's size across renders. Auto-generated if omitted.
      * @default undefined — an id is auto-generated.
@@ -65,8 +156,9 @@ export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
      */
     disabled?: boolean;
     /**
-     * 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;
 }

package/dist/resizable/types.d.ts

@@ -5,6 +5,8 @@ export interface PanelConfig {
     defaultSize?: number;
     minSize: number;
     maxSize: number;
+    collapsible?: boolean;
+    collapsedSize?: number;
 }
 /** @internal Current panel order and computed sizes (percentages), owned by {@link ResizablePanelGroup}. */
 export interface ResizableLayout {
@@ -13,24 +15,100 @@ export interface ResizableLayout {
 }
 /** @internal Shared state distributed from {@link ResizablePanelGroup} to its parts via context. Not part of the public API. */
 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';
+    /**
+     * Layout axis; selects flex direction, arrow keys, cursor, and `aria-orientation`
+     * on Handle. Named `orientation` for DOM consistency (reading `direction` separately).
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Controlled panel sizes (percentages, Panel order). Supply to externalize
+     * layout state; omit to use Panel `defaultSize` / even split.
+     * @default undefined — the group owns its sizes.
+     */
+    sizes?: number[];
+    /**
+     * Percentage points per Arrow key press, group-level default (Handle `step`
+     * overrides). Unit is percentage points, not pixels.
+     * @default 2
+     */
+    step?: number;
     /**
      * Fires whenever panel sizes change, with the full sizes array (percentages).
+     * Continuous: a drag fires it on every `pointermove` that moves the split.
      * @default undefined — no-op if omitted.
      */
     onLayout?: (sizes: number[]) => void;
+    /**
+     * Fires once layout change finishes (pointerup/cancel or keyboard), with full
+     * sizes array. Use this to persist; `onLayout` fires continuously.
+     * @default undefined — no-op if omitted.
+     */
+    onLayoutCommit?: (sizes: number[]) => void;
+    /**
+     * Fires when a `collapsible` Panel reaches its `collapsedSize`, with the id
+     * of the panel that closed. The edge, not the state — a drag that keeps a
+     * panel shut fires nothing further.
+     * @default undefined — no-op if omitted.
+     */
+    onCollapse?: (detail: {
+        panelId: string;
+    }) => void;
+    /**
+     * Fires when a collapsed Panel reopens, with the id of the panel that opened.
+     * Paired with `onCollapse`, and reached by pointer and keyboard alike.
+     * @default undefined — no-op if omitted.
+     */
+    onExpand?: (detail: {
+        panelId: string;
+    }) => void;
+    /**
+     * Panels to derive with alternating Handles. Ignored when `children` is given
+     * for manual composition.
+     * @default undefined — nothing is derived; compose `ResizablePanel`s (and `ResizableHandle`s) as `children`.
+     */
+    panels?: readonly ResizablePanelConfig[];
+}
+/** 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;
+    /** Initial size as a percentage (0-100). */
+    defaultSize?: number;
+    /** Minimum size as a percentage (0-100). */
+    minSize?: number;
+    /** Maximum size as a percentage (0-100). */
+    maxSize?: number;
+    /** Lets this panel close entirely — see {@link ResizablePanelProps.collapsible}. */
+    collapsible?: boolean;
+    /** The size, as a percentage, a `collapsible` panel takes while closed. */
+    collapsedSize?: number;
+    /** The derived panel's body. */
+    content?: React.ReactNode;
 }
 /** Props for a single {@link ResizablePanel}. */
 export interface ResizablePanelProps extends PrimitivePropsWithRef<'div'> {
@@ -51,6 +129,19 @@ export interface ResizablePanelProps extends PrimitivePropsWithRef<'div'> {
      * @default 90
      */
     maxSize?: number;
+    /**
+     * Allows panel to close entirely; resize below minSize snaps to collapsedSize.
+     * Off by default—minSize normally prevents collapse.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * The size, as a percentage, a `collapsible` panel takes while closed. The
+     * panel carries `data-collapsed` at that size and the group fires `collapse`
+     * / `expand` as it crosses it.
+     * @default 0
+     */
+    collapsedSize?: number;
     /**
      * Stable identifier used to track this panel's size across renders. Auto-generated if omitted.
      * @default undefined — an id is auto-generated.
@@ -65,8 +156,9 @@ export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
      */
     disabled?: boolean;
     /**
-     * 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;
 }

package/dist/scroll-area/ScrollArea.cjs

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ScrollAreaContextValue, ScrollAreaProps } from './types.cjs';
+import type { ScrollAreaContextValue, ScrollAreaProps, ScrollAreaRootProps } from './types.cjs';
 export declare const ScrollAreaProvider: {
     (props: ScrollAreaContextValue & {
         children: React.ReactNode;
@@ -7,28 +7,30 @@ export declare const ScrollAreaProvider: {
     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.
+ * Scroll area state primitive: owns overflow / hover / scrolling state,
+ * hands to viewport / scrollbar / thumb / corner via context. Real scrolling on viewport;
+ * scrollbar is synced visual affordance. Publishes `data-overflow-x` / `data-overflow-y`.
  *
  * @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: React.ForwardRefExoticComponent<Omit<ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Wraps natively-scrollable `children` with derived custom scrollbar.
+ * `aria-label` / `aria-labelledby` applied to derived Viewport (`role="region"`).
+ *
+ * @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>>;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ScrollAreaContextValue, ScrollAreaProps } from './types.js';
+import type { ScrollAreaContextValue, ScrollAreaProps, ScrollAreaRootProps } from './types.js';
 export declare const ScrollAreaProvider: {
     (props: ScrollAreaContextValue & {
         children: React.ReactNode;
@@ -7,28 +7,30 @@ export declare const ScrollAreaProvider: {
     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.
+ * Scroll area state primitive: owns overflow / hover / scrolling state,
+ * hands to viewport / scrollbar / thumb / corner via context. Real scrolling on viewport;
+ * scrollbar is synced visual affordance. Publishes `data-overflow-x` / `data-overflow-y`.
  *
  * @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: React.ForwardRefExoticComponent<Omit<ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Wraps natively-scrollable `children` with derived custom scrollbar.
+ * `aria-label` / `aria-labelledby` applied to derived Viewport (`role="region"`).
+ *
+ * @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>>;

package/dist/scroll-area/ScrollArea.js

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

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

@@ -1,12 +1,9 @@
 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.
+ * Corner square where scrollbars meet. Renders only if both enabled or
+ * `forceMount` set. `aria-hidden="true"` — custom skins; scrolling announced
+ * through viewport.
  *
  * @example
  * ```tsx