@bestow-ui/react 0.7.0 → 0.8.0

package/dist/index.d.cts

@@ -1,8 +1,12 @@
 import * as _bestow_ui_tokens from '@bestow-ui/tokens';
 import { space } from '@bestow-ui/tokens';
 import * as react from 'react';
-import { HTMLAttributes, CSSProperties, ReactNode, ButtonHTMLAttributes, ElementType, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement } from 'react';
+import { HTMLAttributes, CSSProperties, ComponentPropsWithoutRef, ReactNode, ButtonHTMLAttributes, ElementType, InputHTMLAttributes, 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 RadixPopover from '@radix-ui/react-popover';
+import * as RadixTabs from '@radix-ui/react-tabs';
 
 declare const lightTokens: {
     color: _bestow_ui_tokens.SemanticColors;
@@ -273,6 +277,24 @@ declare function usePortalProps(): {
  */
 declare function usePortalClassName(): string;
 
+/**
+ * `type="single"`: 한 번에 하나만 열린다 (`value: string`). `collapsible` 이면 열린 항목을 다시 눌러 닫을 수 있다.
+ * `type="multiple"`: 여러 개를 함께 열 수 있다 (`value: string[]`).
+ */
+type AccordionProps = ComponentPropsWithoutRef<typeof RadixAccordion.Root>;
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends Omit<ComponentPropsWithoutRef<typeof RadixAccordion.Item>, 'title'> {
+    /** 항목 값. Accordion 의 value 와 비교한다 */
+    value: string;
+    /** 항목 제목 (펼침 버튼의 이름) */
+    title: ReactNode;
+    /** 제목을 감싸는 heading 수준. 페이지의 heading 구조에 맞춘다 (기본 3) */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** 펼쳤을 때 보이는 내용 */
+    children?: ReactNode;
+}
+declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
+
 interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     /** 이미지 주소. 없거나 불러오지 못하면 fallback 을 보여 준다 */
     src?: string;
@@ -365,6 +387,36 @@ interface DividerProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
 
+/** 메뉴 루트. `open`/`defaultOpen`/`onOpenChange`/`modal` 을 받는다 */
+declare const DropdownMenu: react.FC<RadixMenu.DropdownMenuProps>;
+type DropdownMenuProps = ComponentPropsWithoutRef<typeof RadixMenu.Root>;
+/** 메뉴를 여는 요소. 보통 `asChild` 로 Button 을 감싼다 */
+declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+type DropdownMenuTriggerProps = ComponentPropsWithoutRef<typeof RadixMenu.Trigger>;
+/** 항목 묶음 (role="group") */
+declare const DropdownMenuGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuContentProps extends ComponentPropsWithoutRef<typeof RadixMenu.Content> {
+    /** 트리거 기준 표시 방향 */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** 정렬 */
+    align?: 'start' | 'center' | 'end';
+}
+declare const DropdownMenuContent: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuItemProps extends Omit<ComponentPropsWithoutRef<typeof RadixMenu.Item>, 'color'> {
+    /** 텍스트 앞 아이콘 (장식용) */
+    icon?: ReactNode;
+    /** 오른쪽에 표시할 단축키 (예: "⌘K"). 표시용이라 항목 이름에는 포함되지 않는다 */
+    shortcut?: string;
+    /** danger 는 삭제처럼 되돌리기 어려운 동작 */
+    color?: 'default' | 'danger';
+}
+declare const DropdownMenuItem: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+type DropdownMenuLabelProps = ComponentPropsWithoutRef<typeof RadixMenu.Label>;
+/** 항목 묶음의 제목 (선택할 수 없음) */
+declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type DropdownMenuSeparatorProps = ComponentPropsWithoutRef<typeof RadixMenu.Separator>;
+declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** 크기 */
     size?: 'sm' | 'md' | 'lg';
@@ -424,6 +476,64 @@ declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, descri
  */
 declare const ModalClose: react.ForwardRefExoticComponent<Dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 
+type ItemType = 'previous' | 'next' | 'page';
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** 전체 페이지 수. 1 미만이면 아무것도 렌더링하지 않는다 */
+    totalPages: number;
+    /** 현재 페이지, 1부터 (제어 모드) */
+    page?: number;
+    /** 처음 페이지 (비제어 모드, 기본 1) */
+    defaultPage?: number;
+    /** 페이지를 바꿀 때 호출된다 */
+    onPageChange?: (page: number) => void;
+    /** 현재 페이지 양옆에 항상 보일 페이지 수 (기본 1) */
+    siblingCount?: number;
+    /** 처음과 끝에 항상 보일 페이지 수 (기본 1) */
+    boundaryCount?: number;
+    /** 크기 */
+    size?: 'sm' | 'md';
+    /** 버튼의 스크린리더용 이름 (다국어 대응). 기본: "이전 페이지", "다음 페이지", "3 페이지" */
+    getItemLabel?: (type: ItemType, page: number) => string;
+}
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+interface PopoverProps {
+    /** 팝오버 내용 */
+    content: ReactNode;
+    /** 팝오버를 여는 요소. ref 를 받을 수 있는 요소 하나여야 한다 (보통 Button) */
+    children: ReactElement;
+    /** 제목. 팝오버(role="dialog")의 접근 가능한 이름이 된다 */
+    title?: ReactNode;
+    /** title 이 없을 때 스크린리더용 이름 */
+    'aria-label'?: string;
+    /** 오른쪽 위에 닫기(X) 버튼을 표시한다 */
+    showClose?: boolean;
+    /** 트리거를 가리키는 화살표를 표시한다 */
+    showArrow?: boolean;
+    /** 표시 방향 */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** 정렬 */
+    align?: 'start' | 'center' | 'end';
+    /** 열림 상태 (제어 모드) */
+    open?: boolean;
+    /** 처음 열림 상태 (비제어 모드) */
+    defaultOpen?: boolean;
+    /** 열림 상태가 바뀔 때 호출된다 */
+    onOpenChange?: (open: boolean) => void;
+    /** true 이면 열려 있는 동안 바깥 요소와 상호작용할 수 없고 포커스가 팝오버 안에 갇힌다 */
+    modal?: boolean;
+    /** 팝오버 className */
+    className?: string;
+    /** 팝오버 style (너비 지정 등) */
+    style?: CSSProperties;
+}
+declare function Popover({ content, children, title, 'aria-label': ariaLabel, showClose, showArrow, side, align, open, defaultOpen, onOpenChange, modal, className, style, }: PopoverProps): react.JSX.Element;
+/**
+ * 팝오버 내용 안에서 누르면 팝오버를 닫는 요소.
+ * @example <PopoverClose asChild><Button>확인</Button></PopoverClose>
+ */
+declare const PopoverClose: react.ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
 interface RadioOption {
     value: string;
     label: ReactNode;
@@ -570,6 +680,38 @@ interface SwitchProps {
 }
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof RadixTabs.Root>, 'orientation'> {
+    /** 시각적 스타일. line 은 밑줄, soft 는 배경이 있는 세그먼트 */
+    variant?: 'line' | 'soft';
+    /** 크기 */
+    size?: 'sm' | 'md';
+    /** 선택된 탭 (제어 모드) */
+    value?: string;
+    /** 처음 선택된 탭 (비제어 모드) */
+    defaultValue?: string;
+    /** 선택된 탭이 바뀔 때 호출된다 */
+    onValueChange?: (value: string) => void;
+    /**
+     * automatic(기본): 방향키로 포커스를 옮기면 바로 선택된다.
+     * manual: 방향키로 포커스만 옮기고 Enter/Space 로 선택한다 (탭 전환 비용이 클 때).
+     */
+    activationMode?: 'automatic' | 'manual';
+}
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+type TabsListProps = ComponentPropsWithoutRef<typeof RadixTabs.List>;
+/** 탭 버튼 목록 (role="tablist"). 접근 가능한 이름이 필요하면 aria-label 을 준다 */
+declare const TabsList: react.ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends ComponentPropsWithoutRef<typeof RadixTabs.Trigger> {
+    /** 이 탭의 값. 같은 값을 가진 TabsContent 와 연결된다 */
+    value: string;
+}
+declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+interface TabsContentProps extends ComponentPropsWithoutRef<typeof RadixTabs.Content> {
+    /** 연결할 TabsTrigger 의 값 */
+    value: string;
+}
+declare const TabsContent: react.ForwardRefExoticComponent<TabsContentProps & react.RefAttributes<HTMLDivElement>>;
+
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
     /** 입력창 위에 표시할 레이블 */
     label?: ReactNode;
@@ -665,4 +807,4 @@ interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
 }
 declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
 
-export { 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, Input, type InputProps, type IntentName, Modal, ModalClose, type ModalProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, 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, 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 };

package/dist/index.d.ts

@@ -1,8 +1,12 @@
 import * as _bestow_ui_tokens from '@bestow-ui/tokens';
 import { space } from '@bestow-ui/tokens';
 import * as react from 'react';
-import { HTMLAttributes, CSSProperties, ReactNode, ButtonHTMLAttributes, ElementType, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement } from 'react';
+import { HTMLAttributes, CSSProperties, ComponentPropsWithoutRef, ReactNode, ButtonHTMLAttributes, ElementType, InputHTMLAttributes, 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 RadixPopover from '@radix-ui/react-popover';
+import * as RadixTabs from '@radix-ui/react-tabs';
 
 declare const lightTokens: {
     color: _bestow_ui_tokens.SemanticColors;
@@ -273,6 +277,24 @@ declare function usePortalProps(): {
  */
 declare function usePortalClassName(): string;
 
+/**
+ * `type="single"`: 한 번에 하나만 열린다 (`value: string`). `collapsible` 이면 열린 항목을 다시 눌러 닫을 수 있다.
+ * `type="multiple"`: 여러 개를 함께 열 수 있다 (`value: string[]`).
+ */
+type AccordionProps = ComponentPropsWithoutRef<typeof RadixAccordion.Root>;
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends Omit<ComponentPropsWithoutRef<typeof RadixAccordion.Item>, 'title'> {
+    /** 항목 값. Accordion 의 value 와 비교한다 */
+    value: string;
+    /** 항목 제목 (펼침 버튼의 이름) */
+    title: ReactNode;
+    /** 제목을 감싸는 heading 수준. 페이지의 heading 구조에 맞춘다 (기본 3) */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** 펼쳤을 때 보이는 내용 */
+    children?: ReactNode;
+}
+declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
+
 interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     /** 이미지 주소. 없거나 불러오지 못하면 fallback 을 보여 준다 */
     src?: string;
@@ -365,6 +387,36 @@ interface DividerProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
 
+/** 메뉴 루트. `open`/`defaultOpen`/`onOpenChange`/`modal` 을 받는다 */
+declare const DropdownMenu: react.FC<RadixMenu.DropdownMenuProps>;
+type DropdownMenuProps = ComponentPropsWithoutRef<typeof RadixMenu.Root>;
+/** 메뉴를 여는 요소. 보통 `asChild` 로 Button 을 감싼다 */
+declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+type DropdownMenuTriggerProps = ComponentPropsWithoutRef<typeof RadixMenu.Trigger>;
+/** 항목 묶음 (role="group") */
+declare const DropdownMenuGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuContentProps extends ComponentPropsWithoutRef<typeof RadixMenu.Content> {
+    /** 트리거 기준 표시 방향 */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** 정렬 */
+    align?: 'start' | 'center' | 'end';
+}
+declare const DropdownMenuContent: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuItemProps extends Omit<ComponentPropsWithoutRef<typeof RadixMenu.Item>, 'color'> {
+    /** 텍스트 앞 아이콘 (장식용) */
+    icon?: ReactNode;
+    /** 오른쪽에 표시할 단축키 (예: "⌘K"). 표시용이라 항목 이름에는 포함되지 않는다 */
+    shortcut?: string;
+    /** danger 는 삭제처럼 되돌리기 어려운 동작 */
+    color?: 'default' | 'danger';
+}
+declare const DropdownMenuItem: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+type DropdownMenuLabelProps = ComponentPropsWithoutRef<typeof RadixMenu.Label>;
+/** 항목 묶음의 제목 (선택할 수 없음) */
+declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type DropdownMenuSeparatorProps = ComponentPropsWithoutRef<typeof RadixMenu.Separator>;
+declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** 크기 */
     size?: 'sm' | 'md' | 'lg';
@@ -424,6 +476,64 @@ declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, descri
  */
 declare const ModalClose: react.ForwardRefExoticComponent<Dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 
+type ItemType = 'previous' | 'next' | 'page';
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** 전체 페이지 수. 1 미만이면 아무것도 렌더링하지 않는다 */
+    totalPages: number;
+    /** 현재 페이지, 1부터 (제어 모드) */
+    page?: number;
+    /** 처음 페이지 (비제어 모드, 기본 1) */
+    defaultPage?: number;
+    /** 페이지를 바꿀 때 호출된다 */
+    onPageChange?: (page: number) => void;
+    /** 현재 페이지 양옆에 항상 보일 페이지 수 (기본 1) */
+    siblingCount?: number;
+    /** 처음과 끝에 항상 보일 페이지 수 (기본 1) */
+    boundaryCount?: number;
+    /** 크기 */
+    size?: 'sm' | 'md';
+    /** 버튼의 스크린리더용 이름 (다국어 대응). 기본: "이전 페이지", "다음 페이지", "3 페이지" */
+    getItemLabel?: (type: ItemType, page: number) => string;
+}
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+interface PopoverProps {
+    /** 팝오버 내용 */
+    content: ReactNode;
+    /** 팝오버를 여는 요소. ref 를 받을 수 있는 요소 하나여야 한다 (보통 Button) */
+    children: ReactElement;
+    /** 제목. 팝오버(role="dialog")의 접근 가능한 이름이 된다 */
+    title?: ReactNode;
+    /** title 이 없을 때 스크린리더용 이름 */
+    'aria-label'?: string;
+    /** 오른쪽 위에 닫기(X) 버튼을 표시한다 */
+    showClose?: boolean;
+    /** 트리거를 가리키는 화살표를 표시한다 */
+    showArrow?: boolean;
+    /** 표시 방향 */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** 정렬 */
+    align?: 'start' | 'center' | 'end';
+    /** 열림 상태 (제어 모드) */
+    open?: boolean;
+    /** 처음 열림 상태 (비제어 모드) */
+    defaultOpen?: boolean;
+    /** 열림 상태가 바뀔 때 호출된다 */
+    onOpenChange?: (open: boolean) => void;
+    /** true 이면 열려 있는 동안 바깥 요소와 상호작용할 수 없고 포커스가 팝오버 안에 갇힌다 */
+    modal?: boolean;
+    /** 팝오버 className */
+    className?: string;
+    /** 팝오버 style (너비 지정 등) */
+    style?: CSSProperties;
+}
+declare function Popover({ content, children, title, 'aria-label': ariaLabel, showClose, showArrow, side, align, open, defaultOpen, onOpenChange, modal, className, style, }: PopoverProps): react.JSX.Element;
+/**
+ * 팝오버 내용 안에서 누르면 팝오버를 닫는 요소.
+ * @example <PopoverClose asChild><Button>확인</Button></PopoverClose>
+ */
+declare const PopoverClose: react.ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
 interface RadioOption {
     value: string;
     label: ReactNode;
@@ -570,6 +680,38 @@ interface SwitchProps {
 }
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof RadixTabs.Root>, 'orientation'> {
+    /** 시각적 스타일. line 은 밑줄, soft 는 배경이 있는 세그먼트 */
+    variant?: 'line' | 'soft';
+    /** 크기 */
+    size?: 'sm' | 'md';
+    /** 선택된 탭 (제어 모드) */
+    value?: string;
+    /** 처음 선택된 탭 (비제어 모드) */
+    defaultValue?: string;
+    /** 선택된 탭이 바뀔 때 호출된다 */
+    onValueChange?: (value: string) => void;
+    /**
+     * automatic(기본): 방향키로 포커스를 옮기면 바로 선택된다.
+     * manual: 방향키로 포커스만 옮기고 Enter/Space 로 선택한다 (탭 전환 비용이 클 때).
+     */
+    activationMode?: 'automatic' | 'manual';
+}
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+type TabsListProps = ComponentPropsWithoutRef<typeof RadixTabs.List>;
+/** 탭 버튼 목록 (role="tablist"). 접근 가능한 이름이 필요하면 aria-label 을 준다 */
+declare const TabsList: react.ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends ComponentPropsWithoutRef<typeof RadixTabs.Trigger> {
+    /** 이 탭의 값. 같은 값을 가진 TabsContent 와 연결된다 */
+    value: string;
+}
+declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+interface TabsContentProps extends ComponentPropsWithoutRef<typeof RadixTabs.Content> {
+    /** 연결할 TabsTrigger 의 값 */
+    value: string;
+}
+declare const TabsContent: react.ForwardRefExoticComponent<TabsContentProps & react.RefAttributes<HTMLDivElement>>;
+
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
     /** 입력창 위에 표시할 레이블 */
     label?: ReactNode;
@@ -665,4 +807,4 @@ interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
 }
 declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
 
-export { 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, Input, type InputProps, type IntentName, Modal, ModalClose, type ModalProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, 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, 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 };