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

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

import React from "react";
/**
 * Orientation options for the separator
 */
export type ALSSeparatorOrientation = "horizontal" | "vertical";
/**
 * Visual variant options for the separator
 */
export type ALSSeparatorVariant = "solid" | "dashed" | "dotted";
/**
 * Size options for the separator thickness
 */
export type ALSSeparatorSize = "sm" | "md" | "lg";
/**
 * Color options for the separator
 */
export type ALSSeparatorColor = "default" | "subtle" | "strong" | "primary";
/**
 * Props for the ALSSeparator component
 */
export interface ALSSeparatorProps {
    /**
     * The orientation of the separator
     * @default 'horizontal'
     */
    orientation?: ALSSeparatorOrientation;
    /**
     * The visual style variant of the separator
     * @default 'solid'
     */
    variant?: ALSSeparatorVariant;
    /**
     * The thickness of the separator
     * @default 'sm'
     */
    size?: ALSSeparatorSize;
    /**
     * The color intensity of the separator
     * @default 'default'
     */
    color?: ALSSeparatorColor;
    /**
     * Whether to add spacing around the separator
     * @default false
     */
    withSpacing?: boolean;
    /**
     * Optional label text to display in the middle of the separator
     */
    label?: string;
    /**
     * Additional CSS class names
     */
    className?: string;
    /**
     * Additional inline styles
     */
    style?: React.CSSProperties;
    /**
     * Decorative separators are hidden from screen readers
     * @default true
     */
    decorative?: boolean;
}
/**
 * ALSSeparator - A visual divider component for separating content sections.
 *
 * This component wraps Base UI's Separator with ALS design system styling,
 * providing consistent visual separation between content areas.
 *
 * @example
 * ```tsx
 * // Basic horizontal separator
 * <ALSSeparator />
 *
 * // Vertical separator
 * <ALSSeparator orientation="vertical" />
 *
 * // Separator with label
 * <ALSSeparator label="Or continue with" />
 *
 * // Dashed separator with spacing
 * <ALSSeparator variant="dashed" withSpacing />
 * ```
 */
export declare const ALSSeparator: React.ForwardRefExoticComponent<ALSSeparatorProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=ALSSeparator.d.ts.map