@als-tp/als-react-ts-ui/dist/components/ALSScrollArea/ALSScrollArea.d.ts

A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation

import React from "react";
/**
 * Orientation options for scrollbars
 */
export type ALSScrollAreaOrientation = "horizontal" | "vertical";
/**
 * Size variants for the scroll area
 */
export type ALSScrollAreaSize = "sm" | "md" | "lg" | "full";
/**
 * Variant options for visual styling
 */
export type ALSScrollAreaVariant = "default" | "subtle" | "bordered";
/**
 * Props for the root scroll area component
 */
export interface ALSScrollAreaRootProps {
    /** Content to render inside the scroll area */
    children: React.ReactNode;
    /** Additional CSS class names */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Size variant affecting dimensions */
    size?: ALSScrollAreaSize;
    /** Visual style variant */
    variant?: ALSScrollAreaVariant;
    /** Whether to show gradient fade at scroll edges */
    showFade?: boolean;
    /** Custom color for the fade gradient (CSS color value) */
    fadeColor?: string;
    /** Threshold in pixels before overflow edge attributes are applied */
    overflowEdgeThreshold?: number;
}
/**
 * Props for the viewport component
 */
export interface ALSScrollAreaViewportProps {
    /** Content to render inside the viewport */
    children: React.ReactNode;
    /** Additional CSS class names */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
}
/**
 * Props for the content wrapper component
 */
export interface ALSScrollAreaContentProps {
    /** Content to render */
    children: React.ReactNode;
    /** Additional CSS class names */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
}
/**
 * Props for the scrollbar component
 */
export interface ALSScrollAreaScrollbarProps {
    /** Content (typically the Thumb component) */
    children?: React.ReactNode;
    /** Additional CSS class names */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Scrollbar orientation */
    orientation?: ALSScrollAreaOrientation;
    /** Whether to keep the scrollbar mounted when not scrollable */
    keepMounted?: boolean;
}
/**
 * Props for the scrollbar thumb component
 */
export interface ALSScrollAreaThumbProps {
    /** Additional CSS class names */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
}
/**
 * Props for the corner component
 */
export interface ALSScrollAreaCornerProps {
    /** Additional CSS class names */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
}
/**
 * Root component that wraps the entire scroll area.
 * Provides context for child components.
 *
 * @example
 * ```tsx
 * <ALSScrollArea.Root size="md" variant="bordered">
 *   <ALSScrollArea.Viewport>
 *     <ALSScrollArea.Content>
 *       {content}
 *     </ALSScrollArea.Content>
 *   </ALSScrollArea.Viewport>
 *   <ALSScrollArea.Scrollbar>
 *     <ALSScrollArea.Thumb />
 *   </ALSScrollArea.Scrollbar>
 * </ALSScrollArea.Root>
 * ```
 */
export declare const ALSScrollAreaRoot: React.ForwardRefExoticComponent<ALSScrollAreaRootProps & React.RefAttributes<HTMLDivElement>>;
/**
 * The actual scrollable container of the scroll area.
 * Must contain the Content component.
 */
export declare const ALSScrollAreaViewport: React.ForwardRefExoticComponent<ALSScrollAreaViewportProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Container for the content of the scroll area.
 * Should be placed inside the Viewport component.
 */
export declare const ALSScrollAreaContent: React.ForwardRefExoticComponent<ALSScrollAreaContentProps & React.RefAttributes<HTMLDivElement>>;
/**
 * A vertical or horizontal scrollbar for the scroll area.
 * Contains the Thumb component.
 */
export declare const ALSScrollAreaScrollbar: React.ForwardRefExoticComponent<ALSScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>>;
/**
 * The draggable part of the scrollbar that indicates the current scroll position.
 */
export declare const ALSScrollAreaThumb: React.ForwardRefExoticComponent<ALSScrollAreaThumbProps & React.RefAttributes<HTMLDivElement>>;
/**
 * A small rectangular area that appears at the intersection
 * of horizontal and vertical scrollbars.
 */
export declare const ALSScrollAreaCorner: React.ForwardRefExoticComponent<ALSScrollAreaCornerProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=ALSScrollArea.d.ts.map