import { BreakpointSupport } from '../../../helpers';
export type SeparatorVariant = 'dotted' | 'dot-only';
export type DotSize = 'large' | 'medium' | 'small' | 'extra-small';
export type DotStyle = 'filled' | 'outlined';
export type DotPosition = 'start' | 'center' | 'end' | number;
/**
 * Margin/padding-like spacing around the separator
 * - number → uniform spacing on main axis
 * - object → fine-grained control (top/bottom/left/right)
 */
export type SeparatorSpacing = number | {
    top?: number;
    bottom?: number;
    left?: number;
    right?: number;
};
export interface SeparatorSharedProps {
    /**
     * Additional class names
     */
    className?: string;
    /**
     * HTML element to render — most common are 'hr', 'div', 'span'
     */
    element?: 'hr' | 'div' | 'span';
    /**
     * When true, the separator stretches to fill available space (100%)
     */
    isStretched?: boolean;
    /**
     * Semantic color token
     * @default primary
     */
    color?: 'primary' | 'secondary' | 'accent';
    /**
     * Visual style — line with dots vs standalone centered dot(s)
     */
    variant?: SeparatorVariant;
    /**
     * Line thickness in pixels (1 or 2) — affects outlined & solid lines
     */
    thickness?: 1 | 2;
    /**
     * Spacing (margin) around the separator
     * @example
     * spacing={16}        // 16px top & bottom (horizontal) or left & right (vertical)
     * spacing={{ top: 24, bottom: 8 }}
     */
    spacing?: SeparatorSpacing;
}
export interface SeparatorVerticalProps extends SeparatorSharedProps {
    /**
     * Must be set to 'vertical'
     */
    axis: 'vertical';
    /**
     * Height of the vertical separator in rem units
     */
    height?: number;
    /**
     * CSS display value — usually 'block' or 'inline-block'
     */
    display?: 'block' | 'inline' | 'inline-block';
}
export interface SeparatorHorizontalProps extends SeparatorSharedProps {
    /**
     * Must be set to 'horizontal' or left undefined (defaults to horizontal)
     */
    axis?: 'horizontal';
    /**
    Vertical height is not used in horizontal mode
    */
    height?: undefined;
    /**
     * Display is forced to 'block' in horizontal mode
     */
    display?: 'block';
}
type DottedSeparatorProps = {
    variant?: 'dotted';
    dotSize?: DotSize;
    dotStyle?: DotStyle;
    /**
     * Position of the single dot
     * @example
     * 'center' | 'start' | 'end' | 2.5  // 2.5rem from start
     */
    dotPosition?: DotPosition;
};
type DotOnlySeparatorProps = {
    variant: 'dot-only';
    dotSize: DotSize;
    dotStyle?: DotStyle;
    dotPosition?: never;
};
export type SeparatorBreakpointProps = {
    spacing?: SeparatorSpacing;
    height?: number;
    axis?: 'horizontal' | 'vertical';
};
export type SeparatorProps = BreakpointSupport<(SeparatorHorizontalProps & (DottedSeparatorProps | DotOnlySeparatorProps)) | (SeparatorVerticalProps & (DottedSeparatorProps | DotOnlySeparatorProps))> & SeparatorBreakpointProps;
export declare const Separator: (props: SeparatorProps) => JSX.Element;
export default Separator;