@bestow-ui/react 0.6.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,40 @@ 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;
+    /** 스크린리더가 읽을 이름. 없으면 `name` 을 쓰고, 둘 다 없으면 장식용으로 숨긴다 */
+    alt?: string;
+    /** 사용자 이름. fallback 이니셜과 기본 접근 가능한 이름에 쓴다 */
+    name?: string;
+    /** fallback 을 직접 지정한다 (기본: 이니셜 → 사용자 아이콘) */
+    fallback?: ReactNode;
+    /** 크기 (sm 28px, md 36px, lg 48px) */
+    size?: 'sm' | 'md' | 'lg';
+    /** 모양 */
+    shape?: 'circle' | 'square';
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+
 interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** 시각적 스타일 */
     variant?: 'solid' | 'soft' | 'outline';
@@ -336,6 +374,49 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'siz
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
+interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** 방향. vertical 은 flex 행 안에서 부모 높이를 채운다 */
+    orientation?: 'horizontal' | 'vertical';
+    /** 시각적 구분만 하고 의미가 없으면 true — 스크린리더에서 숨긴다 */
+    decorative?: boolean;
+    /**
+     * 가운데에 표시할 텍스트 (예: "또는"). horizontal 에서만 쓴다.
+     * separator 역할의 자식은 스크린리더가 읽지 않으므로, 텍스트가 있으면 선만 숨기고 텍스트는 읽히게 둔다.
+     */
+    children?: ReactNode;
+}
+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';
@@ -395,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;
@@ -471,6 +610,22 @@ interface SelectProps {
 }
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+    /** 모양. text 는 글자 높이(1em), circle 은 width 를 지름으로 쓴다 */
+    variant?: 'text' | 'rect' | 'circle';
+    /** 너비. 숫자는 px (기본: text·rect 100%, circle 40px) */
+    width?: number | string;
+    /** 높이. 숫자는 px (기본: text 1em, rect 100px, circle 은 width 와 같음) */
+    height?: number | string;
+    /** text 에서 여러 줄을 그린다. 마지막 줄은 60% 너비 */
+    lines?: number;
+}
+/**
+ * 콘텐츠를 불러오는 동안 자리를 표시한다. 장식용이라 스크린리더에서 숨긴다 —
+ * 로딩 중인 영역(감싸는 요소)에 `aria-busy="true"` 를 붙여 상태를 알린다.
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLSpanElement>>;
+
 interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** 크기 (sm 16px, md 20px, lg 28px) */
     size?: 'sm' | 'md' | 'lg';
@@ -525,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;
@@ -620,4 +807,4 @@ interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
 }
 declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
 
-export { Badge, type BadgeProps, type BestowTheme, Button, type ButtonProps, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, Checkbox, type CheckboxProps, type DeepPartial, Input, type InputProps, type IntentName, Modal, ModalClose, type ModalProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, 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,40 @@ 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;
+    /** 스크린리더가 읽을 이름. 없으면 `name` 을 쓰고, 둘 다 없으면 장식용으로 숨긴다 */
+    alt?: string;
+    /** 사용자 이름. fallback 이니셜과 기본 접근 가능한 이름에 쓴다 */
+    name?: string;
+    /** fallback 을 직접 지정한다 (기본: 이니셜 → 사용자 아이콘) */
+    fallback?: ReactNode;
+    /** 크기 (sm 28px, md 36px, lg 48px) */
+    size?: 'sm' | 'md' | 'lg';
+    /** 모양 */
+    shape?: 'circle' | 'square';
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+
 interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** 시각적 스타일 */
     variant?: 'solid' | 'soft' | 'outline';
@@ -336,6 +374,49 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'siz
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
+interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** 방향. vertical 은 flex 행 안에서 부모 높이를 채운다 */
+    orientation?: 'horizontal' | 'vertical';
+    /** 시각적 구분만 하고 의미가 없으면 true — 스크린리더에서 숨긴다 */
+    decorative?: boolean;
+    /**
+     * 가운데에 표시할 텍스트 (예: "또는"). horizontal 에서만 쓴다.
+     * separator 역할의 자식은 스크린리더가 읽지 않으므로, 텍스트가 있으면 선만 숨기고 텍스트는 읽히게 둔다.
+     */
+    children?: ReactNode;
+}
+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';
@@ -395,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;
@@ -471,6 +610,22 @@ interface SelectProps {
 }
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+    /** 모양. text 는 글자 높이(1em), circle 은 width 를 지름으로 쓴다 */
+    variant?: 'text' | 'rect' | 'circle';
+    /** 너비. 숫자는 px (기본: text·rect 100%, circle 40px) */
+    width?: number | string;
+    /** 높이. 숫자는 px (기본: text 1em, rect 100px, circle 은 width 와 같음) */
+    height?: number | string;
+    /** text 에서 여러 줄을 그린다. 마지막 줄은 60% 너비 */
+    lines?: number;
+}
+/**
+ * 콘텐츠를 불러오는 동안 자리를 표시한다. 장식용이라 스크린리더에서 숨긴다 —
+ * 로딩 중인 영역(감싸는 요소)에 `aria-busy="true"` 를 붙여 상태를 알린다.
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLSpanElement>>;
+
 interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** 크기 (sm 16px, md 20px, lg 28px) */
     size?: 'sm' | 'md' | 'lg';
@@ -525,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;
@@ -620,4 +807,4 @@ interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
 }
 declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
 
-export { Badge, type BadgeProps, type BestowTheme, Button, type ButtonProps, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, Checkbox, type CheckboxProps, type DeepPartial, Input, type InputProps, type IntentName, Modal, ModalClose, type ModalProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, 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 };