@bestow-ui/react 0.8.3 → 0.9.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, 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';
@@ -387,6 +443,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 +512,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 +558,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 +675,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;
@@ -738,7 +899,7 @@ interface ToastOptions {
     /** 설명 */
     description?: ReactNode;
     /** 의미 색상 */
-    variant?: 'default' | 'success' | 'danger';
+    variant?: 'default' | 'success' | 'warning' | 'danger';
     /** 자동으로 닫히기까지 시간(ms). Infinity 면 자동으로 닫히지 않는다 */
     duration?: number;
     /** 실행 버튼 */
@@ -797,7 +958,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 +968,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, 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 };

package/dist/index.d.ts

@@ -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, 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';
@@ -387,6 +443,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 +512,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 +558,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 +675,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;
@@ -738,7 +899,7 @@ interface ToastOptions {
     /** 설명 */
     description?: ReactNode;
     /** 의미 색상 */
-    variant?: 'default' | 'success' | 'danger';
+    variant?: 'default' | 'success' | 'warning' | 'danger';
     /** 자동으로 닫히기까지 시간(ms). Infinity 면 자동으로 닫히지 않는다 */
     duration?: number;
     /** 실행 버튼 */
@@ -797,7 +958,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 +968,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, 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 };