@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
69 lines (68 loc) • 1.75 kB
TypeScript
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 {};