///
import { type IdObj, type ToWritableStores, type WithGet } from '../../internal/helpers/index.js';
import { type Readable, type Writable } from 'svelte/store';
import type { CreateScrollAreaProps } from './types.js';
import type { MeltActionReturn, Orientation, TextDirection } from '../../internal/types.js';
import { type Sizes } from './helpers.js';
type ScrollAreaParts = 'root' | 'viewport' | 'content' | 'scrollbar' | 'thumb' | 'corner';
export declare const name: (part?: ScrollAreaParts | undefined) => string;
export declare const scrollAreaIdParts: readonly ["root", "viewport", "content", "scrollbarX", "scrollbarY", "thumbX", "thumbY"];
export type ScrollAreaIdParts = typeof scrollAreaIdParts;
export type ScrollAreaRootState = {
cornerWidth: WithGet>;
cornerHeight: WithGet>;
scrollbarXEnabled: WithGet>;
scrollbarYEnabled: WithGet>;
scrollbarXEl: WithGet>;
scrollbarYEl: WithGet>;
scrollAreaEl: WithGet>;
viewportEl: WithGet>;
contentEl: WithGet>;
options: ToWritableStores>>;
ids: ToWritableStores>;
};
export type ScrollAreaScrollbarState = {
isHorizontal: WithGet>;
domRect: WithGet>;
prevWebkitUserSelect: WithGet>;
pointerOffset: WithGet>;
thumbEl: WithGet>;
thumbOffset: WithGet>;
scrollbarEl: WithGet>;
sizes: WithGet>;
orientation: WithGet>;
hasThumb: WithGet>;
isVisible: WithGet>;
handleWheelScroll: (e: WheelEvent, payload: number) => void;
handleThumbDown: (payload: {
x: number;
y: number;
}) => void;
handleThumbUp: (e: MouseEvent) => void;
onThumbPositionChange: () => void;
onDragScroll: (payload: number) => void;
handleSizeChange: () => void;
};
export type ScrollAreaState = {
rootState: ScrollAreaRootState;
scrollbarState: ScrollAreaScrollbarState;
};
export declare function createScrollArea(props?: CreateScrollAreaProps): {
options: ToWritableStores | undefined;
}, "ids">>;
elements: {
root: import("../../internal/helpers/index.js").MeltElement<[WithGet>, WithGet>, WithGet>], (node: HTMLElement) => {
destroy(): void;
}, ([$cornerWidth, $cornderHeight, $rootId]: [number, number, string]) => {
style: string;
id: string;
}, string>;
viewport: import("../../internal/helpers/index.js").MeltElement<[WithGet>, WithGet>, WithGet>], (node: HTMLElement) => {
destroy(): void;
}, ([$scrollbarXEnabled, $scrollbarYEnabled, $viewportId]: [boolean, boolean, string]) => {
style: string;
id: string;
}, string>;
content: import("../../internal/helpers/index.js").MeltElement<[WithGet>], (node: HTMLElement) => {
destroy(): void;
}, ([$contentId]: [string]) => {
style: string;
id: string;
}, string>;
corner: import("../../internal/helpers/index.js").MeltElement<[Writable, Writable, WithGet>, Readable], import("svelte/action").Action>, ([$width, $height, $dir, $shouldDisplay]: [number, number, TextDirection, boolean]) => {
style: string;
}, string>;
scrollbarX: import("../../internal/helpers/index.js").MeltElement<[WithGet>, WithGet>, WithGet>], (node: HTMLElement) => MeltActionReturn<"pointerdown" | "pointermove" | "pointerup">, ([$sizes, $dir, $isVisible]: [Sizes, TextDirection, boolean]) => {
style: string;
'data-state': string;
}, string>;
scrollbarY: import("../../internal/helpers/index.js").MeltElement<[WithGet>, WithGet>, WithGet>], (node: HTMLElement) => MeltActionReturn<"pointerdown" | "pointermove" | "pointerup">, ([$sizes, $dir, $isVisible]: [Sizes, TextDirection, boolean]) => {
style: string;
'data-state': string;
}, string>;
thumbX: import("../../internal/helpers/index.js").MeltElement<[WithGet>, WithGet>, WithGet>], (node: HTMLElement) => MeltActionReturn<"pointerdown" | "pointerup">, ([$hasThumb, $isHorizontal, $offset]: [boolean, boolean, number]) => {
style: string;
'data-state': string;
}, string>;
thumbY: import("../../internal/helpers/index.js").MeltElement<[WithGet>, WithGet>, WithGet>], (node: HTMLElement) => MeltActionReturn<"pointerdown" | "pointerup">, ([$hasThumb, $isHorizontal, $offset]: [boolean, boolean, number]) => {
style: string;
'data-state': string;
}, string>;
};
};
export {};