@bestow-ui/react 0.8.3 → 0.10.0

package/dist/index.d.cts

@@ -1,15 +1,20 @@
 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, ButtonHTMLAttributes, ElementType, InputHTMLAttributes, ReactElement, TextareaHTMLAttributes } from 'react';
+import { HTMLAttributes, CSSProperties, ComponentPropsWithoutRef, ReactNode, ElementType, ButtonHTMLAttributes, InputHTMLAttributes, AnchorHTMLAttributes, ReactElement, TdHTMLAttributes, ThHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import * as RadixAccordion from '@radix-ui/react-accordion';
-import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import * as Dialog from '@radix-ui/react-dialog';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixTabs from '@radix-ui/react-tabs';
 
 declare const lightTokens: {
     color: _bestow_ui_tokens.SemanticColors;
+    shadow: {
+        readonly sm: "0 1px 2px rgba(0, 0, 0, 0.06)";
+        readonly md: "0 4px 12px rgba(0, 0, 0, 0.08)";
+        readonly lg: "0 12px 32px rgba(0, 0, 0, 0.12)";
+    };
     space: {
         readonly 0: "0";
         readonly 1: "4px";
@@ -58,11 +63,6 @@ declare const lightTokens: {
             readonly relaxed: "1.75";
         };
     };
-    shadow: {
-        readonly sm: "0 1px 2px rgba(0, 0, 0, 0.06)";
-        readonly md: "0 4px 12px rgba(0, 0, 0, 0.08)";
-        readonly lg: "0 12px 32px rgba(0, 0, 0, 0.12)";
-    };
     duration: {
         readonly fast: "120ms";
         readonly normal: "200ms";
@@ -137,6 +137,19 @@ declare const vars: {
             subtleHover: `var(--${string})`;
             text: `var(--${string})`;
         };
+        warning: {
+            solid: `var(--${string})`;
+            solidHover: `var(--${string})`;
+            contrast: `var(--${string})`;
+            subtle: `var(--${string})`;
+            subtleHover: `var(--${string})`;
+            text: `var(--${string})`;
+        };
+    };
+    shadow: {
+        readonly sm: `var(--${string})`;
+        readonly md: `var(--${string})`;
+        readonly lg: `var(--${string})`;
     };
     space: {
         readonly 0: `var(--${string})`;
@@ -186,11 +199,6 @@ declare const vars: {
             readonly relaxed: `var(--${string})`;
         };
     };
-    shadow: {
-        readonly sm: `var(--${string})`;
-        readonly md: `var(--${string})`;
-        readonly lg: `var(--${string})`;
-    };
     duration: {
         readonly fast: `var(--${string})`;
         readonly normal: `var(--${string})`;
@@ -239,7 +247,7 @@ declare function createTheme(...inputs: ThemeInput[]): BestowTheme;
 
 /** WCAG 대비율 (1 ~ 21) */
 declare function contrastRatio(a: string, b: string): number;
-type IntentName = 'primary' | 'neutral' | 'danger' | 'success';
+type IntentName = 'primary' | 'neutral' | 'danger' | 'success' | 'warning';
 /**
  * 대표색 하나로 intent(primary 등)의 라이트·다크 색 세트를 만든다. 결과는 createTheme 에 넘긴다.
  * - solid 는 넘긴 색을 그대로 쓴다 (다크모드에서 너무 어두우면 조금 밝힌다).
@@ -295,6 +303,30 @@ interface AccordionItemProps extends Omit<ComponentPropsWithoutRef<typeof RadixA
 }
 declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
 
+type AlertColor = 'primary' | 'neutral' | 'danger' | 'success' | 'warning';
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'title'> {
+    /** 시각적 스타일 */
+    variant?: 'soft' | 'outline' | 'solid';
+    /** 의미 색상. primary 는 일반 안내(info) 로 쓴다 */
+    color?: AlertColor;
+    /** 굵게 표시되는 제목 */
+    title?: ReactNode;
+    /** 앞에 표시할 아이콘. 생략하면 color 에 맞는 기본 아이콘, false 면 표시하지 않는다 (장식용 — 의미는 텍스트로 전달) */
+    icon?: ReactNode | false;
+    /** 오른쪽에 둘 버튼 등 */
+    action?: ReactNode;
+    /** 넘기면 닫기(X) 버튼을 표시하고, 누르면 호출한다. 실제로 숨기는 것은 사용하는 쪽이 한다 */
+    onClose?: () => void;
+    /** 닫기 버튼의 접근 가능한 이름 */
+    closeLabel?: string;
+}
+/**
+ * 페이지 안에 고정으로 보여 주는 안내 문구. 기본으로 role 이 없다.
+ * 사용자 동작 뒤에 새로 나타나는 메시지라면 스크린리더가 바로 읽도록 `role="alert"`(중요·긴급) 또는
+ * `role="status"`(일반 알림)를 넘긴다. 잠깐 떴다 사라지는 알림은 Toast 를 쓴다.
+ */
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+
 interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     /** 이미지 주소. 없거나 불러오지 못하면 fallback 을 보여 준다 */
     src?: string;
@@ -315,7 +347,7 @@ interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** 시각적 스타일 */
     variant?: 'solid' | 'soft' | 'outline';
     /** 의미 색상 */
-    color?: 'primary' | 'neutral' | 'danger' | 'success';
+    color?: 'primary' | 'neutral' | 'danger' | 'success' | 'warning';
     /** 크기 */
     size?: 'sm' | 'md' | 'lg';
     /** 텍스트 앞에 표시할 아이콘 (장식용 — 의미는 텍스트로 전달한다) */
@@ -323,6 +355,30 @@ interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
+interface BreadcrumbItemData {
+    /** 표시할 이름 */
+    label: ReactNode;
+    /** 이동할 주소. 마지막 항목(현재 페이지)은 링크로 만들지 않는다 */
+    href?: string;
+}
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    /** 상위 → 현재 순서의 경로. 마지막 항목이 현재 페이지(aria-current="page")다 */
+    items: BreadcrumbItemData[];
+    /**
+     * 링크로 렌더링할 컴포넌트 (예: Next.js 의 Link). 기본 `<a>`.
+     * 컴포넌트(함수)를 넘기므로 클라이언트 컴포넌트에서만 쓸 수 있다 (서버 컴포넌트에서는 생략하면 일반 `<a>` 로 동작)
+     */
+    linkAs?: ElementType;
+    /** 항목 사이 구분 기호 (장식용 — 스크린리더는 읽지 않는다) */
+    separator?: ReactNode;
+    /** 탐색 영역의 이름 */
+    'aria-label'?: string;
+}
+/**
+ * 현재 페이지까지의 경로를 보여 주는 탐색. `<nav>` > `<ol>` 구조이고 마지막 항목에 `aria-current="page"` 를 붙인다.
+ */
+declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
+
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
     /** 시각적 스타일 */
     variant?: 'solid' | 'soft' | 'outline' | 'ghost';
@@ -345,7 +401,7 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'col
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface CardProps extends HTMLAttributes<HTMLElement> {
-    /** 시각적 스타일. elevated 는 테두리 + 그림자 */
+    /** 시각적 스타일. outline 은 테두리, elevated 는 그림자(다크 모드는 가장자리 ring 포함), soft 는 옅은 배경 */
     variant?: 'outline' | 'elevated' | 'soft';
     /** 안쪽 여백 (sm 16px, md 24px, lg 32px). 이미지를 가장자리까지 붙이려면 none */
     padding?: 'none' | 'sm' | 'md' | 'lg';
@@ -374,6 +430,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';
@@ -387,6 +488,45 @@ interface DividerProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
 
+interface DrawerProps {
+    /** 열림 상태 (제어 모드) */
+    open?: boolean;
+    /** 처음 열림 상태 (비제어 모드) */
+    defaultOpen?: boolean;
+    /** 열림 상태가 바뀔 때 호출된다 */
+    onOpenChange?: (open: boolean) => void;
+    /** 클릭하면 패널을 여는 요소. 버튼 등 포커스 가능한 요소 하나여야 한다 */
+    trigger?: ReactNode;
+    /** 제목 (스크린리더가 패널 이름으로 읽는다) */
+    title: ReactNode;
+    /** 제목 아래 설명 */
+    description?: ReactNode;
+    /** 본문. 길면 본문 영역만 스크롤된다 */
+    children?: ReactNode;
+    /** 하단 고정 버튼 영역. 닫기 버튼은 DrawerClose 로 감싼다 */
+    footer?: ReactNode;
+    /** 나타나는 방향 (기본 right) */
+    side?: 'right' | 'left' | 'top' | 'bottom';
+    /** 크기. 좌우는 너비 320/420/640px, 위아래는 높이 30/50/80vh */
+    size?: 'sm' | 'md' | 'lg';
+    /** 오른쪽 위 닫기(X) 버튼 숨기기 */
+    hideCloseButton?: boolean;
+    /** 바깥 영역 클릭으로 닫기 (기본 true) */
+    closeOnOverlayClick?: boolean;
+    /** 패널 className */
+    className?: string;
+}
+/**
+ * 화면 가장자리에서 밀려 나오는 패널(시트). 필터·상세 보기·모바일 메뉴 등에 쓴다.
+ * Modal 과 같은 Radix Dialog 기반이라 포커스 가두기, Esc 로 닫기, 닫힌 뒤 trigger 로 포커스 복귀를 지원한다.
+ */
+declare function Drawer({ open, defaultOpen, onOpenChange, trigger, title, description, children, footer, side, size, hideCloseButton, closeOnOverlayClick, className, }: DrawerProps): react.JSX.Element;
+/**
+ * 감싼 요소를 클릭하면 패널이 닫힌다.
+ * @example <DrawerClose asChild><Button>취소</Button></DrawerClose>
+ */
+declare const DrawerClose: react.ForwardRefExoticComponent<Dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
 /** 메뉴 루트. `open`/`defaultOpen`/`onOpenChange`/`modal` 을 받는다 */
 declare const DropdownMenu: react.FC<RadixMenu.DropdownMenuProps>;
 type DropdownMenuProps = ComponentPropsWithoutRef<typeof RadixMenu.Root>;
@@ -417,6 +557,26 @@ declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<RadixMenu.
 type DropdownMenuSeparatorProps = ComponentPropsWithoutRef<typeof RadixMenu.Separator>;
 declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
+interface IconButtonProps extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'fullWidth' | 'children' | 'variant' | 'color' | 'size' | 'loading'> {
+    /** 시각적 스타일 (기본 ghost) */
+    variant?: 'solid' | 'soft' | 'outline' | 'ghost';
+    /** 의미 색상 (기본 neutral) */
+    color?: 'primary' | 'neutral' | 'danger';
+    /** 크기. 버튼 32·40·48px, 아이콘 16·20·24px */
+    size?: 'sm' | 'md' | 'lg';
+    /** 진행 중 상태. 아이콘 자리에 스피너를 보여 주고 `aria-busy` 를 붙이며 클릭을 막는다 (포커스는 유지) */
+    loading?: boolean;
+    /** 버튼이 하는 일을 설명하는 이름 (예: "삭제"). 아이콘만으로는 스크린리더가 알 수 없어 필수다 */
+    'aria-label': string;
+    /** 아이콘. 크기는 버튼 size 에 맞춰 자동으로 조절된다 (sm 16px · md 20px · lg 24px) */
+    children: ReactNode;
+}
+/**
+ * 아이콘만 있는 정사각형 버튼. Button 과 같은 variant·color·size·loading 을 받고, 기본은 ghost·neutral 이다.
+ * 마우스 사용자에게도 이름을 보여 주려면 Tooltip 으로 감싼다.
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** 크기 */
     size?: 'sm' | 'md' | 'lg';
@@ -443,6 +603,32 @@ interface TextFieldProps extends Omit<InputProps, 'invalid'> {
 }
 declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
 
+interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+    /**
+     * 렌더링할 요소. Next.js 등의 라우터 링크를 넘기면 그 컴포넌트로 렌더링한다 (예: `as={NextLink}`).
+     * 컴포넌트(함수)를 넘기므로 서버 컴포넌트에서는 쓸 수 없다 → 그때는 asChild 를 쓴다
+     */
+    as?: ElementType;
+    /**
+     * 자식 요소(라우터 링크 등)에 스타일과 속성을 입혀 그대로 렌더링한다. 서버 컴포넌트에서도 쓸 수 있다.
+     * external 아이콘·안내는 붙지 않는다.
+     * @example <Link asChild><NextLink href="/">홈</NextLink></Link>
+     */
+    asChild?: boolean;
+    /** 글자색. inherit 은 부모 글자색을 그대로 쓴다 */
+    color?: 'primary' | 'neutral' | 'inherit';
+    /** 밑줄. 문장 안의 링크는 색만으로 구분되지 않도록 always(기본)를 쓴다. 메뉴·목록처럼 링크임이 분명할 때 hover */
+    underline?: 'always' | 'hover';
+    /**
+     * 새 창으로 여는 외부 링크. `target="_blank"`·`rel="noopener noreferrer"` 를 붙이고,
+     * 아이콘과 스크린리더용 "(새 창)" 안내를 덧붙인다
+     */
+    external?: boolean;
+    /** external 일 때 스크린리더에 덧붙이는 안내 */
+    externalLabel?: string;
+}
+declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
 interface ModalProps {
     /** 열림 상태 (제어 모드) */
     open?: boolean;
@@ -534,6 +720,26 @@ declare function Popover({ content, children, title, 'aria-label': ariaLabel, sh
  */
 declare const PopoverClose: react.ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** 현재 값 (0 ~ max). 생략하거나 null 이면 진행률을 모르는 상태(indeterminate)로 움직이는 막대를 보여 준다 */
+    value?: number | null;
+    /** 최댓값 */
+    max?: number;
+    /** 막대 위에 보이는 레이블. progressbar 의 이름이 된다 */
+    label?: ReactNode;
+    /** 레이블이 없을 때 스크린리더용 이름 */
+    'aria-label'?: string;
+    /** 오른쪽에 값 텍스트(기본 "42%")를 보여 준다 */
+    showValue?: boolean;
+    /** 값 텍스트 형식. 화면 표시와 스크린리더(aria-valuetext)에 함께 쓴다 (예: (v, max) => `${v}/${max}개`) */
+    formatValue?: (value: number, max: number) => string;
+    /** 막대 두께 (sm 4px · md 8px · lg 12px) */
+    size?: 'sm' | 'md' | 'lg';
+    /** 의미 색상 */
+    color?: 'primary' | 'neutral' | 'success' | 'warning' | 'danger';
+}
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
+
 interface RadioOption {
     value: string;
     label: ReactNode;
@@ -626,6 +832,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';
@@ -680,6 +928,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';
@@ -738,7 +1035,7 @@ interface ToastOptions {
     /** 설명 */
     description?: ReactNode;
     /** 의미 색상 */
-    variant?: 'default' | 'success' | 'danger';
+    variant?: 'default' | 'success' | 'warning' | 'danger';
     /** 자동으로 닫히기까지 시간(ms). Infinity 면 자동으로 닫히지 않는다 */
     duration?: number;
     /** 실행 버튼 */
@@ -797,7 +1094,7 @@ interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
     /** 렌더링할 요소. 기본값은 variant 에 따라 결정된다 (h1, p, span 등) */
     as?: ElementType;
     /** 글자 색상 */
-    color?: 'default' | 'muted' | 'subtle' | 'primary' | 'danger' | 'success' | 'inherit';
+    color?: 'default' | 'muted' | 'subtle' | 'primary' | 'danger' | 'success' | 'warning' | 'inherit';
     /** variant 의 기본 굵기를 덮어쓴다 */
     weight?: 'regular' | 'medium' | 'semibold' | 'bold';
     /** 정렬 */
@@ -807,4 +1104,4 @@ interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
 }
 declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BestowTheme, Button, type ButtonProps, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, Checkbox, type CheckboxProps, type DeepPartial, Divider, type DividerProps, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, Input, type InputProps, type IntentName, Modal, ModalClose, type ModalProps, Pagination, type PaginationProps, Popover, PopoverClose, type PopoverProps, 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 };
+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, 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, 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, contrastRatio, createIntentColors, createTheme, themeClass, usePortalClassName, usePortalProps, useTheme, useToast, vars };