@skdx/react 0.28.0 → 0.29.0

package/dist/resizable/ResizablePanel.d.cts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { ResizablePanelProps } from './types.cjs';
 /**
- * Pane within a {@link ResizablePanelGroup}. Defaults to 10/90 min/max size
- * (not 0/100), preventing zero-width. `collapsible` snaps shut below `minSize`.
+ * Pane within a {@link ResizablePanelGroup}, defaulting to a 10/90 min/max size to prevent zero-width.
  *
  * @example
  * ```tsx
@@ -13,4 +12,7 @@ import type { ResizablePanelProps } from './types.cjs';
  * </ResizablePanelGroup>
  * ```
  */
-export declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<ResizablePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ResizablePanel: {
+    ({ defaultSize, minSize, maxSize, collapsible, collapsedSize, id: idProp, style, ref: forwardedRef, ...props }: ResizablePanelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/resizable/ResizablePanel.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { ResizablePanelProps } from './types.js';
 /**
- * Pane within a {@link ResizablePanelGroup}. Defaults to 10/90 min/max size
- * (not 0/100), preventing zero-width. `collapsible` snaps shut below `minSize`.
+ * Pane within a {@link ResizablePanelGroup}, defaulting to a 10/90 min/max size to prevent zero-width.
  *
  * @example
  * ```tsx
@@ -13,4 +12,7 @@ import type { ResizablePanelProps } from './types.js';
  * </ResizablePanelGroup>
  * ```
  */
-export declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<ResizablePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ResizablePanel: {
+    ({ defaultSize, minSize, maxSize, collapsible, collapsedSize, id: idProp, style, ref: forwardedRef, ...props }: ResizablePanelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/resizable/layout.d.cts

@@ -1,29 +1,21 @@
 import type { PanelConfig } from './types.cjs';
 /**
- * Minimum size: `collapsedSize` if collapsible, else `minSize`.
- * `minSize` defaults to 10 (not 0) to prevent accidental loss.
+ * Minimum size for a panel: `collapsedSize` when collapsible, otherwise `minSize`.
  */
 export declare function panelLowerBound(config: PanelConfig): number;
 /**
- * True if size is at or below `collapsedSize` for collapsible panels.
- * Drives `data-collapsed` and collapse/expand events; no separate flag.
+ * True when a collapsible panel's size is at or below its `collapsedSize`.
  */
 export declare function isPanelCollapsed(config: PanelConfig | undefined, size: number | undefined): boolean;
 /**
- * Resolves panel size: non-collapsible clamps to `[minSize, maxSize]`;
- * collapsible snaps to `collapsedSize` or `[minSize, maxSize]`.
- * Below `minSize` snaps shut; any request reopens at `minSize` (keyboard-operable).
+ * Resolves a panel's size, clamping to `[minSize, maxSize]` or snapping shut below `minSize` when collapsible.
  */
 export declare function resolvePanelSize(config: PanelConfig, current: number, requested: number): number;
 /**
- * Resolves start panel size when handle moves by `delta`.
- * Pair total is invariant; end panel gets collapse chance first.
- * Collapse is not vetoed by neighbor's `maxSize` — neighbor absorbs space.
- * `maxSize` bounds dragging, not layout invariant.
+ * Resolves the start panel's size when a handle moves by `delta`, keeping the pair's total invariant.
  */
 export declare function resolvePairSize(leftConfig: PanelConfig, rightConfig: PanelConfig, leftSize: number, rightSize: number, delta: number): number;
 /**
- * Initial layout: panels with `defaultSize` keep it; rest split remainder evenly.
- * Also used by `resetSizes`.
+ * Initial layout: panels with `defaultSize` keep it, the rest split the remainder evenly.
  */
 export declare function seedSizes(configs: ReadonlyArray<PanelConfig | undefined>): number[];

package/dist/resizable/layout.d.ts

@@ -1,29 +1,21 @@
 import type { PanelConfig } from './types.js';
 /**
- * Minimum size: `collapsedSize` if collapsible, else `minSize`.
- * `minSize` defaults to 10 (not 0) to prevent accidental loss.
+ * Minimum size for a panel: `collapsedSize` when collapsible, otherwise `minSize`.
  */
 export declare function panelLowerBound(config: PanelConfig): number;
 /**
- * True if size is at or below `collapsedSize` for collapsible panels.
- * Drives `data-collapsed` and collapse/expand events; no separate flag.
+ * True when a collapsible panel's size is at or below its `collapsedSize`.
  */
 export declare function isPanelCollapsed(config: PanelConfig | undefined, size: number | undefined): boolean;
 /**
- * Resolves panel size: non-collapsible clamps to `[minSize, maxSize]`;
- * collapsible snaps to `collapsedSize` or `[minSize, maxSize]`.
- * Below `minSize` snaps shut; any request reopens at `minSize` (keyboard-operable).
+ * Resolves a panel's size, clamping to `[minSize, maxSize]` or snapping shut below `minSize` when collapsible.
  */
 export declare function resolvePanelSize(config: PanelConfig, current: number, requested: number): number;
 /**
- * Resolves start panel size when handle moves by `delta`.
- * Pair total is invariant; end panel gets collapse chance first.
- * Collapse is not vetoed by neighbor's `maxSize` — neighbor absorbs space.
- * `maxSize` bounds dragging, not layout invariant.
+ * Resolves the start panel's size when a handle moves by `delta`, keeping the pair's total invariant.
  */
 export declare function resolvePairSize(leftConfig: PanelConfig, rightConfig: PanelConfig, leftSize: number, rightSize: number, delta: number): number;
 /**
- * Initial layout: panels with `defaultSize` keep it; rest split remainder evenly.
- * Also used by `resetSizes`.
+ * Initial layout: panels with `defaultSize` keep it, the rest split the remainder evenly.
  */
 export declare function seedSizes(configs: ReadonlyArray<PanelConfig | undefined>): number[];

package/dist/resizable/panelDefaults.d.cts

@@ -1,5 +1,5 @@
 /**
- * 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.
+ * Default panel size bounds, shared by `ResizablePanel`'s defaults and `ResizableHandle`'s aria-value fallback.
  */
 export declare const DEFAULT_PANEL_MIN_SIZE = 10;
 /** @see {@link DEFAULT_PANEL_MIN_SIZE} */

package/dist/resizable/panelDefaults.d.ts

@@ -1,5 +1,5 @@
 /**
- * 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.
+ * Default panel size bounds, shared by `ResizablePanel`'s defaults and `ResizableHandle`'s aria-value fallback.
  */
 export declare const DEFAULT_PANEL_MIN_SIZE = 10;
 /** @see {@link DEFAULT_PANEL_MIN_SIZE} */

package/dist/resizable/primitives.d.cts

@@ -1,5 +1,5 @@
 /**
- * Primitives for `ResizablePanelGroup` — `ResizablePanel` also public (placement is your decision). `ResizableHandle` here only.
+ * Primitives for `ResizablePanelGroup`, including `ResizablePanel` and `ResizableHandle`.
  *
  * @example
  * ```tsx

package/dist/resizable/primitives.d.ts

@@ -1,5 +1,5 @@
 /**
- * Primitives for `ResizablePanelGroup` — `ResizablePanel` also public (placement is your decision). `ResizableHandle` here only.
+ * Primitives for `ResizablePanelGroup`, including `ResizablePanel` and `ResizableHandle`.
  *
  * @example
  * ```tsx

package/dist/resizable/types.d.cts

@@ -2,18 +2,18 @@ import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /** @internal Per-panel size constraints registered with {@link ResizablePanelGroup}. */
 export interface PanelConfig {
-    defaultSize?: number;
+    defaultSize?: number | undefined;
     minSize: number;
     maxSize: number;
-    collapsible?: boolean;
-    collapsedSize?: number;
+    collapsible?: boolean | undefined;
+    collapsedSize?: number | undefined;
 }
 /** @internal Current panel order and computed sizes (percentages), owned by {@link ResizablePanelGroup}. */
 export interface ResizableLayout {
     order: string[];
     sizes: number[];
 }
-/** @internal Shared state distributed from {@link ResizablePanelGroup} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link ResizablePanelGroup} to its parts via context. */
 export interface ResizableContextValue {
     orientation: 'horizontal' | 'vertical';
     groupRef: React.RefObject<HTMLDivElement | null>;
@@ -40,113 +40,114 @@ export interface ResizableContextValue {
 /** Props for the {@link ResizablePanelGroup} root. */
 export interface ResizablePanelGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'onLayout'> {
     /**
-     * Layout axis; selects flex direction, arrow keys, cursor, and `aria-orientation`
-     * on Handle. Named `orientation` for DOM consistency (reading `direction` separately).
+     * Layout axis; selects flex direction, arrow keys, cursor, and Handle's `aria-orientation`.
      * @default 'horizontal'
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical' | undefined;
     /**
-     * Controlled panel sizes (percentages, Panel order). Supply to externalize
-     * layout state; omit to use Panel `defaultSize` / even split.
+     * Controlled panel sizes (percentages, in Panel order); supply to externalize layout state.
      * @default undefined — the group owns its sizes.
      */
-    sizes?: number[];
+    sizes?: number[] | undefined;
     /**
-     * Percentage points per Arrow key press, group-level default (Handle `step`
-     * overrides). Unit is percentage points, not pixels.
+     * Percentage points per Arrow key press, as a group-level default; a Handle's own `step` overrides it.
      * @default 2
      */
-    step?: number;
+    step?: number | undefined;
     /**
-     * Fires whenever panel sizes change, with the full sizes array (percentages).
-     * Continuous: a drag fires it on every `pointermove` that moves the split.
+     * Fires whenever panel sizes change, with the full sizes array; continuous during a drag.
      * @default undefined — no-op if omitted.
      */
-    onLayout?: (sizes: number[]) => void;
+    onLayout?: ((sizes: number[]) => void) | undefined;
     /**
-     * Fires once layout change finishes (pointerup/cancel or keyboard), with full
-     * sizes array. Use this to persist; `onLayout` fires continuously.
+     * Fires once a layout change finishes (pointer release or keyboard), with the full sizes array.
      * @default undefined — no-op if omitted.
      */
-    onLayoutCommit?: (sizes: number[]) => void;
+    onLayoutCommit?: ((sizes: number[]) => void) | undefined;
     /**
-     * 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.
+     * Fires once when a `collapsible` Panel reaches its `collapsedSize`, with the id of the panel that closed.
      * @default undefined — no-op if omitted.
      */
-    onCollapse?: (detail: {
+    onCollapse?: ((detail: {
         panelId: string;
-    }) => void;
+    }) => void) | undefined;
     /**
      * 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: {
+    onExpand?: ((detail: {
         panelId: string;
-    }) => void;
+    }) => void) | undefined;
     /**
-     * Panels to derive with alternating Handles. Ignored when `children` is given
-     * for manual composition.
+     * Panels to derive with alternating Handles; ignored when `children` is given.
      * @default undefined — nothing is derived; compose `ResizablePanel`s (and `ResizableHandle`s) as `children`.
      */
-    panels?: readonly ResizablePanelConfig[];
+    panels?: readonly ResizablePanelConfig[] | undefined;
+    /**
+     * Size rung the skin scales the handles by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 }
 /** One entry of {@link ResizablePanelGroupProps.panels} — a derived {@link ResizablePanel}'s config plus its body. */
 export interface ResizablePanelConfig {
     /** Stable identifier used to track this panel's size across renders. */
-    id?: string;
+    id?: string | undefined;
     /** Initial size as a percentage (0-100). */
-    defaultSize?: number;
+    defaultSize?: number | undefined;
     /** Minimum size as a percentage (0-100). */
-    minSize?: number;
+    minSize?: number | undefined;
     /** Maximum size as a percentage (0-100). */
-    maxSize?: number;
+    maxSize?: number | undefined;
     /** Lets this panel close entirely — see {@link ResizablePanelProps.collapsible}. */
-    collapsible?: boolean;
+    collapsible?: boolean | undefined;
     /** The size, as a percentage, a `collapsible` panel takes while closed. */
-    collapsedSize?: number;
+    collapsedSize?: number | undefined;
     /** The derived panel's body. */
-    content?: React.ReactNode;
+    content?: React.ReactNode | undefined;
 }
 /** Props for a single {@link ResizablePanel}. */
 export interface ResizablePanelProps extends PrimitivePropsWithRef<'div'> {
     /**
      * Initial size as a percentage (0-100). Omit to split remaining space evenly with other auto-sized panels.
      * @default undefined — split remaining space evenly with other auto-sized panels.
+     * @min 0
+     * @max 100
      */
-    defaultSize?: number;
+    defaultSize?: number | undefined;
     /**
      * Minimum size as a percentage (0-100); the group won't shrink this panel
      * past it when an adjacent handle is dragged.
      * @default 10
+     * @min 0
+     * @max 100
      */
-    minSize?: number;
+    minSize?: number | undefined;
     /**
      * Maximum size as a percentage (0-100); the group won't grow this panel
      * past it when an adjacent handle is dragged.
      * @default 90
+     * @min 0
+     * @max 100
      */
-    maxSize?: number;
+    maxSize?: number | undefined;
     /**
-     * Allows panel to close entirely; resize below minSize snaps to collapsedSize.
-     * Off by default—minSize normally prevents collapse.
+     * Allows the panel to close entirely; a resize below `minSize` snaps to `collapsedSize`.
      * @default false
      */
-    collapsible?: boolean;
+    collapsible?: boolean | undefined;
     /**
-     * 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.
+     * The size, as a percentage, a `collapsible` panel takes while closed; carries `data-collapsed` there.
      * @default 0
+     * @min 0
+     * @max 100
      */
-    collapsedSize?: number;
+    collapsedSize?: number | undefined;
     /**
-     * Stable identifier used to track this panel's size across renders. Auto-generated if omitted.
+     * Stable identifier used to track this panel's size across renders; auto-generated if omitted.
      * @default undefined — an id is auto-generated.
      */
-    id?: string;
+    id?: string | undefined;
 }
 /** Props for a {@link ResizableHandle} between two panels. */
 export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
@@ -154,11 +155,11 @@ export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
      * Disables dragging and keyboard resizing on this handle.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Percentage points nudged per Arrow key press, overriding the group's own
      * `step` for this one Handle. The unit is percentage points, not pixels.
      * @default undefined — inherits the group's `step` (2).
      */
-    step?: number;
+    step?: number | undefined;
 }

package/dist/resizable/types.d.ts

@@ -2,18 +2,18 @@ import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /** @internal Per-panel size constraints registered with {@link ResizablePanelGroup}. */
 export interface PanelConfig {
-    defaultSize?: number;
+    defaultSize?: number | undefined;
     minSize: number;
     maxSize: number;
-    collapsible?: boolean;
-    collapsedSize?: number;
+    collapsible?: boolean | undefined;
+    collapsedSize?: number | undefined;
 }
 /** @internal Current panel order and computed sizes (percentages), owned by {@link ResizablePanelGroup}. */
 export interface ResizableLayout {
     order: string[];
     sizes: number[];
 }
-/** @internal Shared state distributed from {@link ResizablePanelGroup} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link ResizablePanelGroup} to its parts via context. */
 export interface ResizableContextValue {
     orientation: 'horizontal' | 'vertical';
     groupRef: React.RefObject<HTMLDivElement | null>;
@@ -40,113 +40,114 @@ export interface ResizableContextValue {
 /** Props for the {@link ResizablePanelGroup} root. */
 export interface ResizablePanelGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'onLayout'> {
     /**
-     * Layout axis; selects flex direction, arrow keys, cursor, and `aria-orientation`
-     * on Handle. Named `orientation` for DOM consistency (reading `direction` separately).
+     * Layout axis; selects flex direction, arrow keys, cursor, and Handle's `aria-orientation`.
      * @default 'horizontal'
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical' | undefined;
     /**
-     * Controlled panel sizes (percentages, Panel order). Supply to externalize
-     * layout state; omit to use Panel `defaultSize` / even split.
+     * Controlled panel sizes (percentages, in Panel order); supply to externalize layout state.
      * @default undefined — the group owns its sizes.
      */
-    sizes?: number[];
+    sizes?: number[] | undefined;
     /**
-     * Percentage points per Arrow key press, group-level default (Handle `step`
-     * overrides). Unit is percentage points, not pixels.
+     * Percentage points per Arrow key press, as a group-level default; a Handle's own `step` overrides it.
      * @default 2
      */
-    step?: number;
+    step?: number | undefined;
     /**
-     * Fires whenever panel sizes change, with the full sizes array (percentages).
-     * Continuous: a drag fires it on every `pointermove` that moves the split.
+     * Fires whenever panel sizes change, with the full sizes array; continuous during a drag.
      * @default undefined — no-op if omitted.
      */
-    onLayout?: (sizes: number[]) => void;
+    onLayout?: ((sizes: number[]) => void) | undefined;
     /**
-     * Fires once layout change finishes (pointerup/cancel or keyboard), with full
-     * sizes array. Use this to persist; `onLayout` fires continuously.
+     * Fires once a layout change finishes (pointer release or keyboard), with the full sizes array.
      * @default undefined — no-op if omitted.
      */
-    onLayoutCommit?: (sizes: number[]) => void;
+    onLayoutCommit?: ((sizes: number[]) => void) | undefined;
     /**
-     * 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.
+     * Fires once when a `collapsible` Panel reaches its `collapsedSize`, with the id of the panel that closed.
      * @default undefined — no-op if omitted.
      */
-    onCollapse?: (detail: {
+    onCollapse?: ((detail: {
         panelId: string;
-    }) => void;
+    }) => void) | undefined;
     /**
      * 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: {
+    onExpand?: ((detail: {
         panelId: string;
-    }) => void;
+    }) => void) | undefined;
     /**
-     * Panels to derive with alternating Handles. Ignored when `children` is given
-     * for manual composition.
+     * Panels to derive with alternating Handles; ignored when `children` is given.
      * @default undefined — nothing is derived; compose `ResizablePanel`s (and `ResizableHandle`s) as `children`.
      */
-    panels?: readonly ResizablePanelConfig[];
+    panels?: readonly ResizablePanelConfig[] | undefined;
+    /**
+     * Size rung the skin scales the handles by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 }
 /** One entry of {@link ResizablePanelGroupProps.panels} — a derived {@link ResizablePanel}'s config plus its body. */
 export interface ResizablePanelConfig {
     /** Stable identifier used to track this panel's size across renders. */
-    id?: string;
+    id?: string | undefined;
     /** Initial size as a percentage (0-100). */
-    defaultSize?: number;
+    defaultSize?: number | undefined;
     /** Minimum size as a percentage (0-100). */
-    minSize?: number;
+    minSize?: number | undefined;
     /** Maximum size as a percentage (0-100). */
-    maxSize?: number;
+    maxSize?: number | undefined;
     /** Lets this panel close entirely — see {@link ResizablePanelProps.collapsible}. */
-    collapsible?: boolean;
+    collapsible?: boolean | undefined;
     /** The size, as a percentage, a `collapsible` panel takes while closed. */
-    collapsedSize?: number;
+    collapsedSize?: number | undefined;
     /** The derived panel's body. */
-    content?: React.ReactNode;
+    content?: React.ReactNode | undefined;
 }
 /** Props for a single {@link ResizablePanel}. */
 export interface ResizablePanelProps extends PrimitivePropsWithRef<'div'> {
     /**
      * Initial size as a percentage (0-100). Omit to split remaining space evenly with other auto-sized panels.
      * @default undefined — split remaining space evenly with other auto-sized panels.
+     * @min 0
+     * @max 100
      */
-    defaultSize?: number;
+    defaultSize?: number | undefined;
     /**
      * Minimum size as a percentage (0-100); the group won't shrink this panel
      * past it when an adjacent handle is dragged.
      * @default 10
+     * @min 0
+     * @max 100
      */
-    minSize?: number;
+    minSize?: number | undefined;
     /**
      * Maximum size as a percentage (0-100); the group won't grow this panel
      * past it when an adjacent handle is dragged.
      * @default 90
+     * @min 0
+     * @max 100
      */
-    maxSize?: number;
+    maxSize?: number | undefined;
     /**
-     * Allows panel to close entirely; resize below minSize snaps to collapsedSize.
-     * Off by default—minSize normally prevents collapse.
+     * Allows the panel to close entirely; a resize below `minSize` snaps to `collapsedSize`.
      * @default false
      */
-    collapsible?: boolean;
+    collapsible?: boolean | undefined;
     /**
-     * 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.
+     * The size, as a percentage, a `collapsible` panel takes while closed; carries `data-collapsed` there.
      * @default 0
+     * @min 0
+     * @max 100
      */
-    collapsedSize?: number;
+    collapsedSize?: number | undefined;
     /**
-     * Stable identifier used to track this panel's size across renders. Auto-generated if omitted.
+     * Stable identifier used to track this panel's size across renders; auto-generated if omitted.
      * @default undefined — an id is auto-generated.
      */
-    id?: string;
+    id?: string | undefined;
 }
 /** Props for a {@link ResizableHandle} between two panels. */
 export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
@@ -154,11 +155,11 @@ export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> {
      * Disables dragging and keyboard resizing on this handle.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Percentage points nudged per Arrow key press, overriding the group's own
      * `step` for this one Handle. The unit is percentage points, not pixels.
      * @default undefined — inherits the group's `step` (2).
      */
-    step?: number;
+    step?: number | undefined;
 }

package/dist/scroll-area/ScrollArea.cjs

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

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

@@ -1,15 +1,10 @@
 import * as React from 'react';
 import type { ScrollAreaContextValue, ScrollAreaProps, ScrollAreaRootProps } from './types.cjs';
-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;
+};