@skdx/react 0.28.0 → 0.30.0

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

@@ -1,15 +1,10 @@
 import * as React from 'react';
 import type { ScrollAreaContextValue, ScrollAreaProps, ScrollAreaRootProps } from './types.js';
-export declare const ScrollAreaProvider: {
-    (props: ScrollAreaContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useScrollAreaContext: (consumerName: string) => ScrollAreaContextValue;
+export declare const ScrollAreaProvider: React.FC<ScrollAreaContextValue & {
+    children: React.ReactNode;
+}>, useScrollAreaContext: (consumerName: string) => ScrollAreaContextValue;
 /**
- * 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`.
+ * Scroll area state primitive that owns overflow, hover, and scrolling state for its parts.
  *
  * @example
  * ```tsx
@@ -23,14 +18,19 @@ export declare const ScrollAreaProvider: {
  * </ScrollAreaRoot>
  * ```
  */
-export declare const ScrollAreaRoot: React.ForwardRefExoticComponent<Omit<ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaRoot: {
+    ({ type, scrollHideDelay, onScrollPositionChange, style, ref: forwardedRef, size, ...props }: ScrollAreaRootProps): React.ReactNode;
+    displayName: string;
+};
 /**
- * Wraps natively-scrollable `children` with derived custom scrollbar.
- * `aria-label` / `aria-labelledby` applied to derived Viewport (`role="region"`).
+ * 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 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};
+'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

@@ -9,7 +9,7 @@ import type * as React from 'react';
  */
 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;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    children?: React.ReactNode | undefined;
 }) => React.JSX.Element;

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

@@ -9,7 +9,7 @@ import type * as React from 'react';
  */
 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;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    children?: React.ReactNode | undefined;
 }) => React.JSX.Element;

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

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ScrollAreaCornerProps } from './types.cjs';
 /**
- * Corner square where scrollbars meet. Renders only if both enabled or
- * `forceMount` set. `aria-hidden="true"` — custom skins; scrolling announced
- * through viewport.
+ * Corner square where scrollbars meet, rendered only when both are enabled or `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -15,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;
+};

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

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ScrollAreaCornerProps } from './types.js';
 /**
- * Corner square where scrollbars meet. Renders only if both enabled or
- * `forceMount` set. `aria-hidden="true"` — custom skins; scrolling announced
- * through viewport.
+ * Corner square where scrollbars meet, rendered only when both are enabled or `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -15,4 +13,7 @@ import type { ScrollAreaCornerProps } from './types.js';
  * </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;
+};

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

@@ -3,9 +3,7 @@ import type { ScrollAreaScrollbarProps } from './types.cjs';
 /** @internal Provides the current scrollbar's axis to descendant parts (e.g. `ScrollAreaThumb`). */
 export declare const ScrollbarOrientationContext: React.Context<"horizontal" | "vertical">;
 /**
- * Scrollbar track for one axis. Renders hidden when that axis doesn't overflow,
- * unless `forceMount` or `type="always"`. Track clicks page the viewport.
- * `aria-hidden` because the platform already exposes the scrolling mechanism.
+ * Scrollbar track for one axis, hidden when that axis doesn't overflow unless `forceMount` or `type="always"`.
  *
  * @example
  * ```tsx
@@ -14,4 +12,7 @@ export declare const ScrollbarOrientationContext: React.Context<"horizontal" | "
  * </ScrollAreaScrollbar>
  * ```
  */
-export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaScrollbar: {
+    ({ orientation, forceMount, ref: forwardedRef, ...props }: ScrollAreaScrollbarProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -3,9 +3,7 @@ import type { ScrollAreaScrollbarProps } from './types.js';
 /** @internal Provides the current scrollbar's axis to descendant parts (e.g. `ScrollAreaThumb`). */
 export declare const ScrollbarOrientationContext: React.Context<"horizontal" | "vertical">;
 /**
- * Scrollbar track for one axis. Renders hidden when that axis doesn't overflow,
- * unless `forceMount` or `type="always"`. Track clicks page the viewport.
- * `aria-hidden` because the platform already exposes the scrolling mechanism.
+ * Scrollbar track for one axis, hidden when that axis doesn't overflow unless `forceMount` or `type="always"`.
  *
  * @example
  * ```tsx
@@ -14,4 +12,7 @@ export declare const ScrollbarOrientationContext: React.Context<"horizontal" | "
  * </ScrollAreaScrollbar>
  * ```
  */
-export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaScrollbar: {
+    ({ orientation, forceMount, ref: forwardedRef, ...props }: ScrollAreaScrollbarProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { ScrollAreaThumbProps } from './types.cjs';
 /**
- * Draggable handle within a {@link ScrollAreaScrollbar}, sized and positioned
- * as a percentage of its track. Pointer capture-based drag scrolls the viewport
- * proportionally. Renders `<div data-skdx-scroll-area-thumb>` with `aria-hidden="true"`.
+ * Draggable handle within a {@link ScrollAreaScrollbar} that scrolls the viewport proportionally when dragged.
  *
  * @example
  * ```tsx
@@ -12,4 +10,7 @@ import type { ScrollAreaThumbProps } from './types.cjs';
  * </ScrollAreaScrollbar>
  * ```
  */
-export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaThumb: {
+    ({ style, ref: forwardedRef, ...props }: ScrollAreaThumbProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { ScrollAreaThumbProps } from './types.js';
 /**
- * Draggable handle within a {@link ScrollAreaScrollbar}, sized and positioned
- * as a percentage of its track. Pointer capture-based drag scrolls the viewport
- * proportionally. Renders `<div data-skdx-scroll-area-thumb>` with `aria-hidden="true"`.
+ * Draggable handle within a {@link ScrollAreaScrollbar} that scrolls the viewport proportionally when dragged.
  *
  * @example
  * ```tsx
@@ -12,4 +10,7 @@ import type { ScrollAreaThumbProps } from './types.js';
  * </ScrollAreaScrollbar>
  * ```
  */
-export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaThumb: {
+    ({ style, ref: forwardedRef, ...props }: ScrollAreaThumbProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { ScrollAreaViewportProps } from './types.cjs';
 /**
- * Native scrollable region: `overflow: auto`, wraps content in measurable `<div>`,
- * watches both with `ResizeObserver`. Tab-stop with `tabIndex={0}` for arrow-key scrolling.
- *
- * Pass `aria-label` / `aria-labelledby` to emit `role="region"` with that name;
- * neither → role-less generic (unnamed region is dropped from landmarks).
+ * Native scrollable region with `overflow: auto`, watched by `ResizeObserver` and tabbable for arrow-key scrolling.
  *
  * @example
  * ```tsx
@@ -14,4 +10,7 @@ import type { ScrollAreaViewportProps } from './types.cjs';
  * </ScrollArea>
  * ```
  */
-export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaViewport: {
+    ({ children, style, contentProps, role, ref: forwardedRef, ...props }: ScrollAreaViewportProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { ScrollAreaViewportProps } from './types.js';
 /**
- * Native scrollable region: `overflow: auto`, wraps content in measurable `<div>`,
- * watches both with `ResizeObserver`. Tab-stop with `tabIndex={0}` for arrow-key scrolling.
- *
- * Pass `aria-label` / `aria-labelledby` to emit `role="region"` with that name;
- * neither → role-less generic (unnamed region is dropped from landmarks).
+ * Native scrollable region with `overflow: auto`, watched by `ResizeObserver` and tabbable for arrow-key scrolling.
  *
  * @example
  * ```tsx
@@ -14,4 +10,7 @@ import type { ScrollAreaViewportProps } from './types.js';
  * </ScrollArea>
  * ```
  */
-export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaViewport: {
+    ({ children, style, contentProps, role, ref: forwardedRef, ...props }: ScrollAreaViewportProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -3,8 +3,7 @@ import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /** Controls when the custom {@link ScrollAreaScrollbar} is shown, mirroring the CSS `overflow` keywords. */
 export type ScrollAreaType = 'auto' | 'always' | 'hover' | 'scroll';
 /**
- * Overflow state published as `data-overflow-x` / `data-overflow-y` on root.
- * Logical (RTL-aware): none/start/end/both.
+ * Overflow state published as `data-overflow-x`/`data-overflow-y` on root; logical (RTL-aware) values.
  */
 export type ScrollAreaOverflow = 'none' | 'start' | 'end' | 'both';
 /** The scroll position a ScrollArea reports through `onScrollPositionChange`. */
@@ -14,7 +13,7 @@ export interface ScrollAreaScrollPosition {
     /** The viewport's `scrollTop`. */
     y: number;
 }
-/** @internal Shared state distributed from {@link ScrollArea} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link ScrollArea} to its parts via context. */
 export interface ScrollAreaContextValue {
     type: ScrollAreaType;
     viewportRef: React.RefObject<HTMLDivElement | null>;
@@ -32,22 +31,20 @@ export interface ScrollAreaContextValue {
         x: ScrollAreaOverflow;
         y: ScrollAreaOverflow;
     }) => void;
-    /**
-     * Scroll the Viewport programmatically.
-     */
+    /** Scroll the Viewport programmatically. */
     scrollTo: (options: ScrollAreaScrollToOptions) => void;
 }
 /** Options for the ScrollArea's `scrollTo` method — the subset of `ScrollToOptions` that makes sense here. */
 export interface ScrollAreaScrollToOptions {
     /** Target `scrollTop`. Omit to leave the block axis where it is. */
-    top?: number;
+    top?: number | undefined;
     /** Target `scrollLeft`. Omit to leave the inline axis where it is. */
-    left?: number;
+    left?: number | undefined;
     /**
      * Whether to animate the scroll.
      * @default 'auto'
      */
-    behavior?: 'auto' | 'smooth';
+    behavior?: 'auto' | 'smooth' | undefined;
 }
 /** Props for {@link ScrollAreaRoot}: {@link ScrollAreaProps} minus the derived-anatomy-only `scrollbars`. */
 export interface ScrollAreaRootProps extends PrimitivePropsWithRef<'div'> {
@@ -56,51 +53,40 @@ export interface ScrollAreaRootProps extends PrimitivePropsWithRef<'div'> {
      * `'always'` visible, `'auto'` visible only when overflowing.
      * @default 'hover'
      */
-    type?: ScrollAreaType;
+    type?: ScrollAreaType | undefined;
     /**
-     * How long, in milliseconds, the scrollbar stays visible after scrolling
-     * stops when `type="scroll"`. Only `'scroll'` reads it — `'hover'` is driven
-     * by the pointer, and `'always'`/`'auto'` never hide.
+     * How long, in milliseconds, the scrollbar stays visible after scrolling stops when `type="scroll"`.
      * @default 600
      */
-    scrollHideDelay?: number;
+    scrollHideDelay?: number | undefined;
     /**
-     * Fires with viewport `{ x, y }` offsets on every scroll tick. `x` is raw
-     * `scrollLeft` (negative in RTL containers).
+     * Fires with viewport `{ x, y }` offsets on every scroll tick; `x` is raw `scrollLeft` (negative in RTL).
      * @default undefined — no-op if omitted.
      */
-    onScrollPositionChange?: (position: ScrollAreaScrollPosition) => void;
+    onScrollPositionChange?: ((position: ScrollAreaScrollPosition) => void) | undefined;
+    /**
+     * Size rung the skin scales the scrollbars by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 }
 /**
- * Props for the {@link ScrollArea} recipe. `children` is the scrollable user
- * content, always rendered inside a derived `ScrollAreaViewport` — there is
- * no manual-composition switch here; reach for `primitives/scroll-area`'s
- * headless `ScrollAreaRoot` for that.
- *
- * `aria-label`/`aria-labelledby`, inherited from {@link ScrollAreaRootProps},
- * land on the derived Viewport rather than the root: the Viewport is the
- * scrollable, tabbable element `role="region"` lives on, so it is the one
- * that needs the name.
+ * Props for the {@link ScrollArea} recipe, whose `children` render inside a derived `ScrollAreaViewport`.
  */
 export interface ScrollAreaProps extends ScrollAreaRootProps {
     /**
      * Which derived scrollbar tracks to render.
      * @default 'both'
      */
-    scrollbars?: 'vertical' | 'horizontal' | 'both';
+    scrollbars?: 'vertical' | 'horizontal' | 'both' | undefined;
 }
 /** Props for {@link ScrollAreaViewport}, the natively-scrollable region that renders the content. */
 export interface ScrollAreaViewportProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Props for the internal `data-skdx-scroll-area-content` wrapper the children
-     * are measured through — `className`, `style`, `ref`, anything else. Its
-     * `min-width: 100%; display: table` measurement defaults are merged, not
-     * replaced, so yours win: `contentProps={{ style: { display: 'block' } }}`
-     * opts out of the table layout model (at the cost of horizontal overflow
-     * detection, which is what `display: table` is there for).
+     * Props for the internal content wrapper the children are measured through; merged with, not replacing, its measurement defaults.
      * @default undefined
      */
-    contentProps?: React.ComponentPropsWithRef<'div'>;
+    contentProps?: React.ComponentPropsWithRef<'div'> | undefined;
 }
 /** Props for a {@link ScrollAreaScrollbar}, the custom scrollbar track along one axis. */
 export interface ScrollAreaScrollbarProps extends PrimitivePropsWithRef<'div'> {
@@ -108,12 +94,12 @@ export interface ScrollAreaScrollbarProps extends PrimitivePropsWithRef<'div'> {
      * Which scroll axis this scrollbar controls.
      * @default 'vertical'
      */
-    orientation?: 'vertical' | 'horizontal';
+    orientation?: 'vertical' | 'horizontal' | undefined;
     /**
      * Render even when the content doesn't overflow in this axis.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for the {@link ScrollAreaThumb}, the draggable handle inside a {@link ScrollAreaScrollbar}. */
 export interface ScrollAreaThumbProps extends PrimitivePropsWithRef<'div'> {
@@ -121,12 +107,8 @@ export interface ScrollAreaThumbProps extends PrimitivePropsWithRef<'div'> {
 /** Props for the {@link ScrollAreaCorner}, the filler square where horizontal and vertical scrollbars meet. */
 export interface ScrollAreaCornerProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Render even when the content doesn't overflow in both axes. Pair it with
-     * `forceMount` on both {@link ScrollAreaScrollbar}s: an always-visible
-     * scrollbar pair otherwise leaves an unfilled notch where they meet, because
-     * the corner's own render condition is overflow rather than what the
-     * scrollbars did.
+     * Render even when the content doesn't overflow in both axes; pair with `forceMount` on both {@link ScrollAreaScrollbar}s to avoid an unfilled notch.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }

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

@@ -3,8 +3,7 @@ import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /** Controls when the custom {@link ScrollAreaScrollbar} is shown, mirroring the CSS `overflow` keywords. */
 export type ScrollAreaType = 'auto' | 'always' | 'hover' | 'scroll';
 /**
- * Overflow state published as `data-overflow-x` / `data-overflow-y` on root.
- * Logical (RTL-aware): none/start/end/both.
+ * Overflow state published as `data-overflow-x`/`data-overflow-y` on root; logical (RTL-aware) values.
  */
 export type ScrollAreaOverflow = 'none' | 'start' | 'end' | 'both';
 /** The scroll position a ScrollArea reports through `onScrollPositionChange`. */
@@ -14,7 +13,7 @@ export interface ScrollAreaScrollPosition {
     /** The viewport's `scrollTop`. */
     y: number;
 }
-/** @internal Shared state distributed from {@link ScrollArea} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link ScrollArea} to its parts via context. */
 export interface ScrollAreaContextValue {
     type: ScrollAreaType;
     viewportRef: React.RefObject<HTMLDivElement | null>;
@@ -32,22 +31,20 @@ export interface ScrollAreaContextValue {
         x: ScrollAreaOverflow;
         y: ScrollAreaOverflow;
     }) => void;
-    /**
-     * Scroll the Viewport programmatically.
-     */
+    /** Scroll the Viewport programmatically. */
     scrollTo: (options: ScrollAreaScrollToOptions) => void;
 }
 /** Options for the ScrollArea's `scrollTo` method — the subset of `ScrollToOptions` that makes sense here. */
 export interface ScrollAreaScrollToOptions {
     /** Target `scrollTop`. Omit to leave the block axis where it is. */
-    top?: number;
+    top?: number | undefined;
     /** Target `scrollLeft`. Omit to leave the inline axis where it is. */
-    left?: number;
+    left?: number | undefined;
     /**
      * Whether to animate the scroll.
      * @default 'auto'
      */
-    behavior?: 'auto' | 'smooth';
+    behavior?: 'auto' | 'smooth' | undefined;
 }
 /** Props for {@link ScrollAreaRoot}: {@link ScrollAreaProps} minus the derived-anatomy-only `scrollbars`. */
 export interface ScrollAreaRootProps extends PrimitivePropsWithRef<'div'> {
@@ -56,51 +53,40 @@ export interface ScrollAreaRootProps extends PrimitivePropsWithRef<'div'> {
      * `'always'` visible, `'auto'` visible only when overflowing.
      * @default 'hover'
      */
-    type?: ScrollAreaType;
+    type?: ScrollAreaType | undefined;
     /**
-     * How long, in milliseconds, the scrollbar stays visible after scrolling
-     * stops when `type="scroll"`. Only `'scroll'` reads it — `'hover'` is driven
-     * by the pointer, and `'always'`/`'auto'` never hide.
+     * How long, in milliseconds, the scrollbar stays visible after scrolling stops when `type="scroll"`.
      * @default 600
      */
-    scrollHideDelay?: number;
+    scrollHideDelay?: number | undefined;
     /**
-     * Fires with viewport `{ x, y }` offsets on every scroll tick. `x` is raw
-     * `scrollLeft` (negative in RTL containers).
+     * Fires with viewport `{ x, y }` offsets on every scroll tick; `x` is raw `scrollLeft` (negative in RTL).
      * @default undefined — no-op if omitted.
      */
-    onScrollPositionChange?: (position: ScrollAreaScrollPosition) => void;
+    onScrollPositionChange?: ((position: ScrollAreaScrollPosition) => void) | undefined;
+    /**
+     * Size rung the skin scales the scrollbars by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 }
 /**
- * Props for the {@link ScrollArea} recipe. `children` is the scrollable user
- * content, always rendered inside a derived `ScrollAreaViewport` — there is
- * no manual-composition switch here; reach for `primitives/scroll-area`'s
- * headless `ScrollAreaRoot` for that.
- *
- * `aria-label`/`aria-labelledby`, inherited from {@link ScrollAreaRootProps},
- * land on the derived Viewport rather than the root: the Viewport is the
- * scrollable, tabbable element `role="region"` lives on, so it is the one
- * that needs the name.
+ * Props for the {@link ScrollArea} recipe, whose `children` render inside a derived `ScrollAreaViewport`.
  */
 export interface ScrollAreaProps extends ScrollAreaRootProps {
     /**
      * Which derived scrollbar tracks to render.
      * @default 'both'
      */
-    scrollbars?: 'vertical' | 'horizontal' | 'both';
+    scrollbars?: 'vertical' | 'horizontal' | 'both' | undefined;
 }
 /** Props for {@link ScrollAreaViewport}, the natively-scrollable region that renders the content. */
 export interface ScrollAreaViewportProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Props for the internal `data-skdx-scroll-area-content` wrapper the children
-     * are measured through — `className`, `style`, `ref`, anything else. Its
-     * `min-width: 100%; display: table` measurement defaults are merged, not
-     * replaced, so yours win: `contentProps={{ style: { display: 'block' } }}`
-     * opts out of the table layout model (at the cost of horizontal overflow
-     * detection, which is what `display: table` is there for).
+     * Props for the internal content wrapper the children are measured through; merged with, not replacing, its measurement defaults.
      * @default undefined
      */
-    contentProps?: React.ComponentPropsWithRef<'div'>;
+    contentProps?: React.ComponentPropsWithRef<'div'> | undefined;
 }
 /** Props for a {@link ScrollAreaScrollbar}, the custom scrollbar track along one axis. */
 export interface ScrollAreaScrollbarProps extends PrimitivePropsWithRef<'div'> {
@@ -108,12 +94,12 @@ export interface ScrollAreaScrollbarProps extends PrimitivePropsWithRef<'div'> {
      * Which scroll axis this scrollbar controls.
      * @default 'vertical'
      */
-    orientation?: 'vertical' | 'horizontal';
+    orientation?: 'vertical' | 'horizontal' | undefined;
     /**
      * Render even when the content doesn't overflow in this axis.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for the {@link ScrollAreaThumb}, the draggable handle inside a {@link ScrollAreaScrollbar}. */
 export interface ScrollAreaThumbProps extends PrimitivePropsWithRef<'div'> {
@@ -121,12 +107,8 @@ export interface ScrollAreaThumbProps extends PrimitivePropsWithRef<'div'> {
 /** Props for the {@link ScrollAreaCorner}, the filler square where horizontal and vertical scrollbars meet. */
 export interface ScrollAreaCornerProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Render even when the content doesn't overflow in both axes. Pair it with
-     * `forceMount` on both {@link ScrollAreaScrollbar}s: an always-visible
-     * scrollbar pair otherwise leaves an unfilled notch where they meet, because
-     * the corner's own render condition is overflow rather than what the
-     * scrollbars did.
+     * Render even when the content doesn't overflow in both axes; pair with `forceMount` on both {@link ScrollAreaScrollbar}s to avoid an unfilled notch.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }