@bestow-ui/react 0.9.0 → 0.11.0

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as _bestow_ui_tokens from '@bestow-ui/tokens';
 import { space } from '@bestow-ui/tokens';
 import * as react from 'react';
-import { HTMLAttributes, CSSProperties, ComponentPropsWithoutRef, ReactNode, ElementType, ButtonHTMLAttributes, InputHTMLAttributes, AnchorHTMLAttributes, ReactElement, TextareaHTMLAttributes } from 'react';
+import { HTMLAttributes, CSSProperties, ComponentPropsWithoutRef, ReactNode, InputHTMLAttributes, ElementType, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactElement, TdHTMLAttributes, ThHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import * as Dialog from '@radix-ui/react-dialog';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
@@ -303,6 +303,122 @@ interface AccordionItemProps extends Omit<ComponentPropsWithoutRef<typeof RadixA
 }
 declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
 
+/** 주소 검색 결과 */
+interface AddressSearchResult {
+    /** 우편번호 (5자리 국가기초구역번호) */
+    zonecode: string;
+    /** 기본 주소 (도로명 또는 지번) */
+    address: string;
+    /** 참고 항목 (도로명 주소일 때 법정동·건물명, 예: " (역삼동, 래미안아파트)") */
+    extraAddress?: string;
+}
+/**
+ * 주소 검색 공급자. container 안에 검색 화면을 그리고, 사용자가 고르면 onSelect 를 부른다.
+ * 정리 함수를 돌려주면 검색 창이 닫힐 때 부른다. 다른 주소 서비스(행정안전부 도로명주소 API 등)로 바꿔 끼울 수 있다.
+ */
+type AddressProvider = (container: HTMLElement, onSelect: (result: AddressSearchResult) => void) => void | (() => void) | Promise<void | (() => void)>;
+interface KakaoPostcodeData {
+    zonecode: string;
+    userSelectedType: 'R' | 'J';
+    roadAddress: string;
+    jibunAddress: string;
+    autoJibunAddress?: string;
+    bname: string;
+    buildingName: string;
+    apartment: 'Y' | 'N';
+}
+/** 카카오 가이드의 방식으로 도로명 주소의 참고 항목(법정동, 공동주택 건물명)을 만든다 */
+declare function composeExtraAddress(data: Pick<KakaoPostcodeData, 'userSelectedType' | 'bname' | 'buildingName' | 'apartment'>): string;
+/**
+ * 기본 공급자: 카카오(다음) 우편번호 서비스. 처음 쓸 때 스크립트를 불러오므로 코어 번들 크기에 영향이 없다.
+ * 사용 조건은 서비스 가이드를 따른다.
+ */
+declare const kakaoPostcodeProvider: AddressProvider;
+
+interface AddressValue {
+    /** 우편번호 */
+    zonecode: string;
+    /** 기본 주소 */
+    address: string;
+    /** 참고 항목 (예: " (역삼동, 래미안아파트)") */
+    extraAddress?: string;
+    /** 상세 주소 (사용자가 입력) */
+    detail: string;
+}
+interface AddressInputProps {
+    /** 주소 값 (제어 모드) */
+    value?: AddressValue;
+    /** 처음 값 (비제어 모드) */
+    defaultValue?: AddressValue;
+    /** 주소를 고르거나 상세 주소를 입력할 때 호출된다 */
+    onValueChange?: (value: AddressValue) => void;
+    /** 그룹 제목 */
+    label?: ReactNode;
+    required?: boolean;
+    /** 아래 도움말. error 일 때는 에러 메시지로 표시된다 */
+    helperText?: ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    /** 주소 검색 공급자. 기본은 카카오(다음) 우편번호 서비스 — 처음 검색할 때 스크립트를 불러온다 */
+    provider?: AddressProvider;
+    /** 검색 버튼·검색 창 제목 */
+    searchLabel?: string;
+    detailPlaceholder?: string;
+    /** 검색 화면을 불러오지 못했을 때 문구 */
+    loadErrorText?: string;
+    /** form 제출 시 이름. `${name}[zonecode]`, `${name}[address]`, `${name}[detail]` 로 제출된다 */
+    name?: string;
+    className?: string;
+}
+/**
+ * 주소 입력 (우편번호 · 기본 주소 · 상세 주소). "주소 검색" 을 누르면 검색 창(Modal)에서 주소를 고르고,
+ * 고르면 상세 주소 입력창으로 포커스를 옮긴다.
+ */
+declare const AddressInput: react.ForwardRefExoticComponent<AddressInputProps & react.RefAttributes<HTMLFieldSetElement>>;
+
+interface AgreementItem {
+    value: string;
+    /** 약관 이름 (예: "서비스 이용약관 동의") */
+    label: ReactNode;
+    /** 필수 동의 여부. 이름 앞에 "필수"/"선택" 이 붙는다 */
+    required?: boolean;
+    /** 펼쳐서 보여 줄 약관 내용. 있으면 "보기" 버튼이 생긴다 */
+    content?: ReactNode;
+}
+interface AgreementGroupProps {
+    items: AgreementItem[];
+    /** 동의한 항목의 value 목록 (제어 모드) */
+    value?: string[];
+    /** 처음 동의한 항목 (비제어 모드) */
+    defaultValue?: string[];
+    /** 동의 항목이 바뀔 때 호출된다 */
+    onValueChange?: (value: string[]) => void;
+    /** 그룹 제목 (fieldset 의 legend) */
+    label?: ReactNode;
+    /** "전체 동의" 문구 */
+    allLabel?: ReactNode;
+    /** 아래 도움말. error 일 때는 에러 메시지로 표시된다 (예: "필수 약관에 동의해 주세요") */
+    helperText?: ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    /** 필수·선택 표시 문구 (다국어) */
+    requiredText?: string;
+    optionalText?: string;
+    /** 약관 내용 펼치기 버튼 문구 */
+    showText?: string;
+    hideText?: string;
+    /** form 제출 시 사용할 이름. 동의한 value 마다 hidden input 이 생긴다 */
+    name?: string;
+    className?: string;
+}
+/** 필수 항목에 모두 동의했는지 */
+declare function hasAllRequiredAgreements(items: AgreementItem[], value: string[]): boolean;
+/**
+ * 약관 동의 묶음. "전체 동의" 와 개별 항목이 서로 맞춰지고(일부만 동의하면 전체 동의는 부분 선택 상태),
+ * 항목마다 필수·선택 표시와 약관 내용 펼쳐 보기를 지원한다.
+ */
+declare const AgreementGroup: react.ForwardRefExoticComponent<AgreementGroupProps & react.RefAttributes<HTMLFieldSetElement>>;
+
 type AlertColor = 'primary' | 'neutral' | 'danger' | 'success' | 'warning';
 interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'title'> {
     /** 시각적 스타일 */
@@ -327,6 +443,55 @@ interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'tit
  */
 declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
 
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** 크기 */
+    size?: 'sm' | 'md' | 'lg';
+    /** 에러 상태 표시 (aria-invalid 도 함께 설정된다) */
+    invalid?: boolean;
+    /** 부모 너비를 꽉 채운다 */
+    fullWidth?: boolean;
+    /** 입력창 앞에 표시할 요소 (아이콘, 단위 등) */
+    startAdornment?: ReactNode;
+    /** 입력창 뒤에 표시할 요소 */
+    endAdornment?: ReactNode;
+    /** 바깥 래퍼에 적용할 className. className 은 input 요소에 적용된다 */
+    rootClassName?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TextFieldProps extends Omit<InputProps, 'invalid'> {
+    /** 입력창 위에 표시할 레이블 */
+    label?: ReactNode;
+    /** 입력창 아래에 표시할 도움말. error 일 때는 에러 메시지로 표시된다 */
+    helperText?: ReactNode;
+    /** 에러 상태 */
+    error?: boolean;
+}
+declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
+
+interface AmountInputProps extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'type' | 'inputMode' | 'endAdornment'> {
+    /** 금액 (제어 모드). 비어 있으면 null */
+    value?: number | null;
+    /** 처음 금액 (비제어 모드) */
+    defaultValue?: number | null;
+    /** 금액이 바뀔 때 호출된다. 비우면 null */
+    onValueChange?: (amount: number | null) => void;
+    /** 최댓값. 넘게 입력하면 최댓값으로 맞춘다 */
+    max?: number;
+    /** 단위 (입력창 뒤에 표시, 한글 읽기에도 붙는다) */
+    unit?: string;
+    /**
+     * 아래에 "12만 5,000원" 처럼 읽기 쉬운 금액을 보여 준다 (기본 true).
+     * helperText 를 주면 그 아래 줄로 함께 보여 준다.
+     */
+    showKoreanAmount?: boolean;
+}
+/**
+ * 금액 입력. 천 단위 쉼표를 넣고 뒤에 단위("원")를 붙이며, 아래에 "12만 5,000원" 처럼 읽기 쉬운 금액을 보여 준다.
+ * 값은 숫자(number)로 넘긴다.
+ */
+declare const AmountInput: react.ForwardRefExoticComponent<AmountInputProps & react.RefAttributes<HTMLInputElement>>;
+
 interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     /** 이미지 주소. 없거나 불러오지 못하면 fallback 을 보여 준다 */
     src?: string;
@@ -379,6 +544,27 @@ interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
  */
 declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
 
+interface BusinessNumberInputProps extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'type' | 'inputMode'> {
+    /** 숫자만 있는 사업자등록번호 (제어 모드). 예: "1248100998" */
+    value?: string;
+    /** 처음 값 (비제어 모드) */
+    defaultValue?: string;
+    /** 숫자만 있는 값과, 10자리를 다 채웠을 때 검증 공식 통과 여부로 호출된다 (다 채우기 전에는 valid 가 null) */
+    onValueChange?: (digits: string, valid: boolean | null) => void;
+    /**
+     * 10자리를 다 채웠는데 검증 공식에 맞지 않으면 자동으로 오류를 보여 준다 (기본 true).
+     * 직접 error·helperText 를 주면 그 값이 우선한다.
+     */
+    validate?: boolean;
+    /** 자동 검증 오류 문구 */
+    invalidText?: string;
+}
+/**
+ * 사업자등록번호 입력. 123-45-67890 형식으로 하이픈을 넣고, 10자리를 채우면 검증 공식으로 확인한다.
+ * (검증 공식은 오타를 거르는 용도 — 실제 등록·휴폐업 여부는 국세청 조회가 필요하다)
+ */
+declare const BusinessNumberInput: react.ForwardRefExoticComponent<BusinessNumberInputProps & react.RefAttributes<HTMLInputElement>>;
+
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
     /** 시각적 스타일 */
     variant?: 'solid' | 'soft' | 'outline' | 'ghost';
@@ -430,6 +616,51 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'siz
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
+interface ComboboxOption {
+    value: string;
+    /** 표시·검색에 쓰는 이름 */
+    label: string;
+    disabled?: boolean;
+}
+interface ComboboxProps {
+    /** 선택지 목록 */
+    options: ComboboxOption[];
+    /** 선택된 값 (제어 모드). undefined 면 선택 없음 */
+    value?: string;
+    /** 처음 선택된 값 (비제어 모드) */
+    defaultValue?: string;
+    /** 값이 바뀔 때 호출된다 */
+    onValueChange?: (value: string) => void;
+    /** 입력한 글자로 선택지를 거르는 함수 (기본: 대소문자 구분 없이 label 에 포함) */
+    filter?: (option: ComboboxOption, query: string) => boolean;
+    /** 검색 결과가 없을 때 문구 */
+    emptyMessage?: ReactNode;
+    placeholder?: string;
+    /** 위에 표시할 레이블 */
+    label?: ReactNode;
+    /** 아래에 표시할 도움말. error 일 때는 에러 메시지로 표시된다 */
+    helperText?: ReactNode;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    /** form 제출 시 사용할 이름 (선택된 value 가 제출된다) */
+    name?: string;
+    id?: string;
+    /** label 이 없을 때 스크린리더용 이름 */
+    'aria-label'?: string;
+    /** 목록 열기 버튼의 이름 */
+    toggleLabel?: string;
+    /** 입력창 래퍼 className */
+    className?: string;
+}
+/**
+ * 입력해서 거르며 고르는 선택 상자 (WAI-ARIA combobox + listbox 패턴).
+ * ↓/↑ 로 목록을 열고 이동, Enter 로 선택, Esc 로 닫는다. 목록에 없는 값은 입력할 수 없다(선택만).
+ */
+declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<HTMLInputElement>>;
+
 interface DividerProps extends HTMLAttributes<HTMLDivElement> {
     /** 방향. vertical 은 flex 행 안에서 부모 높이를 채운다 */
     orientation?: 'horizontal' | 'vertical';
@@ -532,32 +763,6 @@ interface IconButtonProps extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'f
  */
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    /** 크기 */
-    size?: 'sm' | 'md' | 'lg';
-    /** 에러 상태 표시 (aria-invalid 도 함께 설정된다) */
-    invalid?: boolean;
-    /** 부모 너비를 꽉 채운다 */
-    fullWidth?: boolean;
-    /** 입력창 앞에 표시할 요소 (아이콘, 단위 등) */
-    startAdornment?: ReactNode;
-    /** 입력창 뒤에 표시할 요소 */
-    endAdornment?: ReactNode;
-    /** 바깥 래퍼에 적용할 className. className 은 input 요소에 적용된다 */
-    rootClassName?: string;
-}
-declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
-
-interface TextFieldProps extends Omit<InputProps, 'invalid'> {
-    /** 입력창 위에 표시할 레이블 */
-    label?: ReactNode;
-    /** 입력창 아래에 표시할 도움말. error 일 때는 에러 메시지로 표시된다 */
-    helperText?: ReactNode;
-    /** 에러 상태 */
-    error?: boolean;
-}
-declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
-
 interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
     /**
      * 렌더링할 요소. Next.js 등의 라우터 링크를 넘기면 그 컴포넌트로 렌더링한다 (예: `as={NextLink}`).
@@ -609,8 +814,13 @@ interface ModalProps {
     closeOnOverlayClick?: boolean;
     /** 내용 영역 className */
     className?: string;
+    /**
+     * 닫힐 때 포커스를 어디로 보낼지 정한다. 기본은 모달을 연 요소로 돌아간다.
+     * `event.preventDefault()` 후 원하는 요소에 focus() 하면 그쪽으로 보낸다 (예: 주소 선택 뒤 상세 주소 입력창).
+     */
+    onCloseAutoFocus?: (event: Event) => void;
 }
-declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, description, children, footer, size, hideCloseButton, closeOnOverlayClick, className, }: ModalProps): react.JSX.Element;
+declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, description, children, footer, size, hideCloseButton, closeOnOverlayClick, className, onCloseAutoFocus, }: ModalProps): react.JSX.Element;
 /**
  * 감싼 요소를 클릭하면 모달이 닫힌다.
  * @example <ModalClose asChild><Button>취소</Button></ModalClose>
@@ -638,6 +848,20 @@ interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'>
 }
 declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
 
+interface PhoneNumberInputProps extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'type' | 'inputMode'> {
+    /** 숫자만 있는 전화번호 (제어 모드). 예: "01012345678" */
+    value?: string;
+    /** 처음 값 (비제어 모드) */
+    defaultValue?: string;
+    /** 숫자만 있는 값으로 호출된다 (하이픈 없음) */
+    onValueChange?: (digits: string) => void;
+}
+/**
+ * 전화번호 입력. 입력하는 대로 하이픈을 넣고(010-1234-5678, 02-123-4567, 1588-1234), 값은 숫자만 넘긴다.
+ * 휴대폰에서 전화 키패드를 띄우고 브라우저의 전화번호 자동 완성을 받는다.
+ */
+declare const PhoneNumberInput: react.ForwardRefExoticComponent<PhoneNumberInputProps & react.RefAttributes<HTMLInputElement>>;
+
 interface PopoverProps {
     /** 팝오버 내용 */
     content: ReactNode;
@@ -787,6 +1011,48 @@ interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
  */
 declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLSpanElement>>;
 
+interface SliderProps {
+    /** 값 (제어 모드). 손잡이 하나면 `[50]`, 범위면 `[20, 80]` */
+    value?: number[];
+    /** 처음 값 (비제어 모드) */
+    defaultValue?: number[];
+    /** 값이 바뀌는 동안 계속 호출된다 */
+    onValueChange?: (value: number[]) => void;
+    /** 드래그·키 입력이 끝났을 때 한 번 호출된다 (서버 저장 등) */
+    onValueCommit?: (value: number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** 범위 슬라이더에서 두 손잡이 사이 최소 간격(step 개수) */
+    minStepsBetweenThumbs?: number;
+    /** 위에 표시하는 레이블. 손잡이(slider)의 이름이 된다 */
+    label?: ReactNode;
+    /** label 이 없을 때 스크린리더용 이름 */
+    'aria-label'?: string;
+    /** 아래에 표시하는 보조 설명 (aria-describedby 로 연결) */
+    helperText?: ReactNode;
+    /** 오른쪽 위에 현재 값을 보여 준다 */
+    showValue?: boolean;
+    /** 값 텍스트 형식. 화면 표시와 스크린리더(aria-valuetext)에 함께 쓴다 (예: v => `${v.toLocaleString()}원`) */
+    formatValue?: (value: number) => string;
+    /**
+     * 범위 슬라이더에서 손잡이마다 덧붙일 이름 (기본 ["최소", "최대"]).
+     * 스크린리더는 "가격 최소", "가격 최대" 처럼 레이블과 함께 읽는다
+     */
+    thumbLabels?: string[];
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    /** form 제출 시 사용할 이름 */
+    name?: string;
+    id?: string;
+    className?: string;
+}
+/**
+ * 범위 안에서 값을 고르는 슬라이더. 손잡이를 끌거나 키보드(←→↑↓, PageUp/Down, Home/End)로 조절한다.
+ * Radix Slider 기반이라 손잡이마다 role="slider" 와 aria-valuemin/max/now 가 붙는다.
+ */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLSpanElement>>;
+
 interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** 크기 (sm 16px, md 20px, lg 28px) */
     size?: 'sm' | 'md' | 'lg';
@@ -841,6 +1107,55 @@ interface SwitchProps {
 }
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
+type TableSize = 'sm' | 'md';
+interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /** 셀 여백 */
+    size?: TableSize;
+    /** 짝수 행 배경을 칠한다 */
+    striped?: boolean;
+    /** 세로로 스크롤할 때 머리 행을 위에 고정한다 (containerStyle 등으로 높이를 제한해 쓴다) */
+    stickyHeader?: boolean;
+    /** 표 위에 보이는 제목. 표의 이름이 되고, 스크롤 영역의 이름으로도 쓰인다 */
+    caption?: ReactNode;
+    /** caption 이 없을 때 표의 이름 (스크린리더용) */
+    'aria-label'?: string;
+    /** 바깥 스크롤 영역의 className (높이 제한 등) */
+    containerClassName?: string;
+    /** 바깥 스크롤 영역의 style */
+    containerStyle?: CSSProperties;
+}
+/**
+ * 데이터 표. 네이티브 `<table>` 에 스타일을 입힌다.
+ * 표가 넘치면 바깥 영역이 스크롤되고, 키보드로도 스크롤할 수 있도록 그 영역이 포커스를 받는다.
+ */
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** 선택된 행으로 강조한다 (`aria-selected` 는 grid 등 상호작용 표에서 직접 지정한다) */
+    selected?: boolean;
+}
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+type Align = 'left' | 'center' | 'right';
+interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** 정렬 */
+    align?: Align;
+    /**
+     * 이 열의 정렬 상태. onSort 와 함께 주면 머리 셀이 정렬 버튼이 되고 `aria-sort` 를 붙인다.
+     * 정렬되지 않은 열은 'none'.
+     */
+    sortDirection?: 'ascending' | 'descending' | 'none';
+    /** 정렬 버튼을 눌렀을 때 호출된다. 다음 정렬 상태는 사용하는 쪽이 정한다 */
+    onSort?: () => void;
+}
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** 정렬 (숫자는 right 권장) */
+    align?: Align;
+}
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
+
 interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof RadixTabs.Root>, 'orientation'> {
     /** 시각적 스타일. line 은 밑줄, soft 는 배경이 있는 세그먼트 */
     variant?: 'line' | 'soft';
@@ -968,4 +1283,68 @@ interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
 }
 declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BestowTheme, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Button, type ButtonProps, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, Checkbox, type CheckboxProps, type DeepPartial, Divider, type DividerProps, Drawer, DrawerClose, type DrawerProps, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, IconButton, type IconButtonProps, Input, type InputProps, type IntentName, Link, type LinkProps, Modal, ModalClose, type ModalProps, Pagination, type PaginationProps, Popover, PopoverClose, type PopoverProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, type ThemeInput, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ThemeTokens, type ToastOptions, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, contrastRatio, createIntentColors, createTheme, themeClass, usePortalClassName, usePortalProps, useTheme, useToast, vars };
+interface VerificationCodeInputProps {
+    /** 자릿수 */
+    length?: number;
+    /** 입력값 (제어 모드) */
+    value?: string;
+    /** 처음 입력값 (비제어 모드) */
+    defaultValue?: string;
+    /** 입력값이 바뀔 때 호출된다 */
+    onValueChange?: (value: string) => void;
+    /** 모든 자리를 채웠을 때 호출된다 (자동 제출 등) */
+    onComplete?: (value: string) => void;
+    /** 받을 문자. numeric 이면 숫자 키패드를 띄우고 숫자만 받는다 */
+    type?: 'numeric' | 'alphanumeric';
+    /** 레이블 (입력창의 이름) */
+    label?: ReactNode;
+    /** 아래 도움말. 생략하면 "6자리 숫자를 입력하세요" 처럼 자릿수를 안내한다. error 일 때는 에러 메시지로 표시된다 */
+    helperText?: ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    /** 유효 시간(초). 주면 남은 시간을 보여 주고, 0 이 되면 onExpire 를 호출하고 만료 안내를 읽어 준다 */
+    expiresIn?: number;
+    onExpire?: () => void;
+    /** 주면 재전송 버튼이 생긴다. 누르면 호출되고 입력값과 남은 시간을 처음으로 되돌린다 */
+    onResend?: () => void;
+    resendText?: string;
+    /** 만료 안내 문구 */
+    expiredText?: string;
+    /** form 제출 시 사용할 이름 */
+    name?: string;
+    id?: string;
+    className?: string;
+}
+/**
+ * 문자로 받은 인증번호 입력. 실제 입력창은 하나라서 문자 자동 채우기(`autocomplete="one-time-code"`)·붙여넣기가 그대로 되고,
+ * 스크린리더는 칸마다가 아니라 "인증번호" 하나로 읽는다. 칸 모양은 화면 표시용이다.
+ */
+declare const VerificationCodeInput: react.ForwardRefExoticComponent<VerificationCodeInputProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * 숫자만 있는 전화번호에 하이픈을 넣는다. 입력 중인 값도 자연스럽게 나눈다.
+ * @example formatPhoneNumber('01012345678') // '010-1234-5678'
+ * @example formatPhoneNumber('021234567')   // '02-123-4567'
+ * @example formatPhoneNumber('15881234')    // '1588-1234'
+ */
+declare function formatPhoneNumber(input: string): string;
+/**
+ * 사업자등록번호(10자리)에 하이픈을 넣는다.
+ * @example formatBusinessNumber('1234567890') // '123-45-67890'
+ */
+declare function formatBusinessNumber(input: string): string;
+/**
+ * 사업자등록번호 검증 공식(가중치 1,3,7,1,3,7,1,3,5)으로 확인한다. 실제로 등록된 번호인지는 국세청 조회가 필요하다.
+ * @example isValidBusinessNumber('124-81-00998') // true
+ */
+declare function isValidBusinessNumber(input: string): boolean;
+/**
+ * 금액을 만·억·조 단위로 읽기 쉽게 쓴다.
+ * @example formatKoreanAmount(125000)     // '12만 5,000원'
+ * @example formatKoreanAmount(150000000)  // '1억 5,000만원'
+ * @example formatKoreanAmount(0)          // '0원'
+ */
+declare function formatKoreanAmount(amount: number, unit?: string): string;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AddressInput, type AddressInputProps, type AddressProvider, type AddressSearchResult, type AddressValue, AgreementGroup, type AgreementGroupProps, type AgreementItem, Alert, type AlertProps, AmountInput, type AmountInputProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BestowTheme, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, BusinessNumberInput, type BusinessNumberInputProps, Button, type ButtonProps, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, type DeepPartial, Divider, type DividerProps, Drawer, DrawerClose, type DrawerProps, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, IconButton, type IconButtonProps, Input, type InputProps, type IntentName, Link, type LinkProps, Modal, ModalClose, type ModalProps, Pagination, type PaginationProps, PhoneNumberInput, type PhoneNumberInputProps, Popover, PopoverClose, type PopoverProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Table, TableBody, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, type ThemeInput, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ThemeTokens, type ToastOptions, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, VerificationCodeInput, type VerificationCodeInputProps, composeExtraAddress, contrastRatio, createIntentColors, createTheme, formatBusinessNumber, formatKoreanAmount, formatPhoneNumber, hasAllRequiredAgreements, isValidBusinessNumber, kakaoPostcodeProvider, themeClass, usePortalClassName, usePortalProps, useTheme, useToast, vars };