@payfit/unity-components/dist/esm/core/components/scroll-area/ScrollArea.d.ts

import { ComponentPropsWithoutRef, ReactNode, UIEventHandler } from 'react';
import { VariantProps } from '@payfit/unity-themes';
import { ScrollAreaAxis } from '../../utils/scroll-edges.js';
import { scrollArea } from './ScrollArea.variants.js';
/**
 * Chooses the logical edges that may show a fade when content remains beyond
 * the viewport.
 *
 * - `none` renders no fades.
 * - `start` renders a fade at the logical start edge.
 * - `end` renders a fade at the logical end edge.
 * - `both` renders fades at both logical edges.
 */
export type ScrollAreaFade = 'none' | 'start' | 'end' | 'both';
/** Configures a native scroll viewport and its optional edge fades. */
export interface ScrollAreaProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'onScroll' | 'style'> {
    /** Renders the semantic content inside the native scroll viewport. */
    children: ReactNode;
    /** Chooses the permitted logical scroll axes. @default 'block' */
    axis?: ScrollAreaAxis;
    /** Selects which logical edge fades may appear. @default 'none' */
    fade?: ScrollAreaFade;
    /**
     * Sets the Unity surface token used as the fade source.
     * @default 'surface.neutral'
     */
    fadeColor?: VariantProps<typeof scrollArea>['fadeColor'];
    /** Applies layout styling to the positioned ScrollArea root. */
    className?: string;
    /** Receives native scroll events from the viewport. */
    onScroll?: UIEventHandler<HTMLDivElement>;
}
/**
 * Keeps clipped content understandable by signalling where people can keep
 * scrolling.
 * The component renders a native viewport and can show token-backed fades at
 * its logical inline or block edges. Set `axis` to the scroll direction, use
 * `fade` to choose the visible edge cues, and match `fadeColor` to the
 * surrounding Unity surface.
 * @param props - Viewport content, scroll-axis, and edge-fade options.
 * @see {@link ScrollAreaProps} for all available props.
 * @example
 * ```tsx
 * import { ScrollArea } from '@payfit/unity-components'
 *
 * export function AttachmentPreview() {
 *   return (
 *     <ScrollArea
 *       axis="inline"
 *       fade="both"
 *       className="uy:h-500 uy:w-[320px] uy:bg-surface-neutral"
 *     >
 *       <div className="uy:flex uy:w-max uy:gap-100 uy:p-50">
 *         <span>Attachment 1</span>
 *         <span>Attachment 2</span>
 *       </div>
 *     </ScrollArea>
 *   )
 * }
 * ```
 * @remarks
 * - The component does not add a role or focusability, so children own their
 *   semantics and keyboard behavior.
 * - Fades are decorative and never receive pointer events.
 * - The forwarded ref and `onScroll` target the native viewport rather than
 *   the positioned root.
 */
export declare const ScrollArea: import('react').ForwardRefExoticComponent<ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>>;