lumir-design-system-shared/dist/types/src/primitives/Divider/Divider.d.ts

Lumir Design System - Shared Components & Tokens

import React from 'react';
import { ResponsiveOrSingle } from '../../types/responsive';
type DividerOrientation = 'horizontal' | 'vertical';
type DividerThickness = 'thin' | 'medium' | 'thick';
type DividerColor = 'primary-stroke-1' | 'secondary-stroke-1' | 'secondary-stroke-2' | 'secondary-stroke-3' | 'secondary-stroke-inverse' | 'cta-stroke-1' | 'cta-stroke-2' | 'status-error' | 'status-warning' | 'status-success' | 'status-info' | 'status-focused';
type DividerVariant = 'solid' | 'dashed' | 'dotted';
type SpacingValue = 'none' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
export interface DividerProps extends Omit<React.HTMLAttributes<HTMLHRElement>, 'color'> {
    /**
     * Divider의 방향을 지정합니다.
     */
    orientation?: DividerOrientation;
    /**
     * Divider의 두께를 지정합니다.
     * thin=1px, medium=2px, thick=3px
     */
    thickness?: DividerThickness;
    /**
     * Divider의 색상을 지정합니다.
     */
    color?: DividerColor;
    /**
     * Divider의 스타일을 지정합니다.
     */
    variant?: DividerVariant;
    /**
     * Divider의 길이를 지정합니다. 반응형 객체 또는 단일 값을 받습니다.
     */
    length?: ResponsiveOrSingle<string | number>;
    /**
     * Divider 주위의 마진을 지정합니다. 반응형 객체 또는 단일 값을 받습니다.
     */
    spacing?: ResponsiveOrSingle<SpacingValue>;
    /**
     * 수직 마진을 지정합니다 (horizontal orientation용). 반응형 객체 또는 단일 값을 받습니다.
     */
    spacingY?: ResponsiveOrSingle<SpacingValue>;
    /**
     * 수평 마진을 지정합니다 (vertical orientation용). 반응형 객체 또는 단일 값을 받습니다.
     */
    spacingX?: ResponsiveOrSingle<SpacingValue>;
}
/**
 * Divider 컴포넌트는 콘텐츠를 구분하는 선을 그리는 순수한 프리미티브 요소입니다.
 * 수평/수직 방향, 다양한 스타일과 색상을 지원하며 시멘틱 토큰만을 사용합니다.
 */
export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLHRElement>>;
export {};