import { ComponentProps } from 'react';
import { Separator } from '../Separator';
interface DashedSeparatorProps extends ComponentProps<typeof Separator> {
    dashColor?: string;
    dashSize?: string;
    dashGap?: string;
}
/**
 * Visual dashed separator component for dividing content sections.
 * Use this when you need a more subtle visual break compared to a solid separator.
 * Configure the dash color, size, and gap.
 *
 * Built on top of [radix-ui Separator](https://www.radix-ui.com/primitives/docs/components/separator).
 *
 * @example
 * ```tsx
 * // Custom dash styling
 * <DashedSeparator
 *   decorative
 *   dashColor="red"
 *   dashSize="8px"
 *   dashGap="4px"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Custom dash styling using class names
 * <DashedSeparator className={`
 *   [--dash-color:theme(colors.red.500)]
 *   [--dash-size:theme(spacing.4)]
 *   [--dash-gap:theme(spacing.2)]
 * `} />
 * ```
 *
 * @example
 * ```tsx
 * // Basic horizontal separator
 * <div className="space-y-4">
 *   <p>Content above</p>
 *   <DashedSeparator decorative />
 *   <p>Content below</p>
 * </div>
 * ```
 * @example
 * ```tsx
 * // Vertical separator
 * <div className="flex items-center gap-4">
 *   <p>Left content</p>
 *   <DashedSeparator decorative orientation="vertical" />
 *   <p>Right content</p>
 * </div>
 * ```
 *
 * @example
 * ```tsx
 * // With text
 * <div className="space-y-4">
 *   <p>Content above</p>
 *   <DashedSeparator>
 *     <SeparatorText>Or</SeparatorText>
 *   </DashedSeparator>
 *   <p>Content below</p>
 * </div>
 * ```
 */
export declare const DashedSeparator: ({ dashColor, dashSize, dashGap, orientation, className, style, ...props }: DashedSeparatorProps) => import("react").JSX.Element;
export {};