@teamsparta/stack-divider/dist/Divider.d.mts

stack divider

import { ElementType, ComponentPropsWithoutRef, ReactElement } from 'react';

type Orientations = "horizontal" | "vertical";
type DividerProps<T extends ElementType = "hr"> = {
    as?: T;
    size?: number;
    color?: string;
    decorative?: boolean;
    orientation?: Orientations;
    isFlexItem?: boolean;
} & ComponentPropsWithoutRef<T>;
type DividerComponent = <T extends ElementType = "hr">(props: DividerProps<T>) => ReactElement | null;
/**
 * `Divider`는 수평 또는 수직으로 구분선을 그립니다.
 *
 * @example <caption>Horizontal</caption>
 * <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
 *   <button>Button</button>
 *   <Divider />
 *   <button>Button</button>
 * </div>
 *
 * @example <caption>Vertical: 부모 요소의 높이가 명시적으로 설정되어 있어야 합니다.</caption>
 * <div style={{ display: 'flex', gap: '16px' }}>
 *   <button>Button</button>
 *   <Divider orientation='vertical' isFlexItem />
 *   <button>Button</button>
 * </div>
 *
 * ----------------------------------------
 *
 * @prop {number} [size=1] - 선의 두께를 지정합니다.
 * @prop {string} [color=primitiveColor.neutral[80]] - 선의 색상을 지정합니다.
 * @prop {boolean} [decorative=false] - 스크린 리더에서 이 요소를 무시할지 여부를 결정합니다. 즉 접근성과 관련 없는 장식용이라면 true로 설정합니다.
 * @prop {'horizontal'|'vertical'} [orientation='horizontal'] - 선의 방향을 지정합니다. 'horizontal' 또는 'vertical' 값을 가질 수 있습니다.
 * @prop {boolean} [isFlexItem=false] - divider가 flex의 item인지 여부를 결정합니다. true로 설정하면 부모 요소의 height를 명시적으로 설정할 필요가 없습니다.
 */
declare const Divider: DividerComponent;

export { Divider, type DividerProps, type Orientations };