@mondrianai/runyourai-design-system 0.0.6 → 0.0.8

package/dist/index.d.mts

@@ -5,7 +5,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as _radix_ui_react_context from '@radix-ui/react-context';
-import { PaginationState, OnChangeFn, RowSelectionState } from '@tanstack/react-table';
+import { RowSelectionState, OnChangeFn, SortingState } from '@tanstack/react-table';
 export { OnChangeFn, PaginationState, RowSelectionState, SortingState } from '@tanstack/react-table';
 
 declare const Accordion: React$1.ForwardRefExoticComponent<(Accordion$1.AccordionSingleProps | Accordion$1.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
@@ -168,8 +168,9 @@ interface DataSectionProps {
     left?: React$1.ReactNode;
     right?: React$1.ReactNode;
     className?: string;
+    childrenClassName?: string;
 }
-declare function DataSection({ title, left, right, className, children, }: DataSectionProps): react_jsx_runtime.JSX.Element;
+declare function DataSection({ title, left, right, className, childrenClassName, children, }: DataSectionProps): react_jsx_runtime.JSX.Element;
 
 interface DrawerProps {
     open: boolean;
@@ -453,8 +454,9 @@ interface KbCardProps {
     /** 카드 클릭 핸들러. selectable(편집 모드)일 때는 동작하지 않음. */
     onClick?: () => void;
     className?: string;
+    variant?: 'grid' | 'list';
 }
-declare function KbCard({ name, metadata, icon, topRight, selectable, checked, onCheckedChange, onClick, className, }: KbCardProps): react_jsx_runtime.JSX.Element;
+declare function KbCard({ name, metadata, icon, topRight, selectable, checked, onCheckedChange, onClick, className, variant, }: KbCardProps): react_jsx_runtime.JSX.Element;
 
 declare function MarkdownMessage({ content, isStreaming, footerMeta, className, }: {
     content: string;
@@ -642,6 +644,7 @@ type SidebarSubMenuItem = {
     isActive?: boolean;
     titleBadge?: string | number;
     onClick?: () => void;
+    isExternal?: boolean;
 };
 type SidebarMainMenuItem = {
     id: string;
@@ -686,22 +689,27 @@ declare function Sidebar({ logo, menus, avatar, utilities, panelTopContent, pane
     LinkComponent: SidebarLinkComponent;
 }): react_jsx_runtime.JSX.Element;
 
-declare const skeletonVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * bar    — 가로 막대, width=100%, 양쪽 rounded-full (default)
+     * circle — 원형, size prop으로 지름 조절
+     * card   — 대형 사각형 블록, rounded-xl
+     */
+    shape?: 'bar' | 'circle' | 'card';
+    /**
+     * lg — bar: 24px / circle: 40px / card: 128px
+     * md — bar: 12px / circle: 32px / card:  96px
+     * sm — bar:  6px / circle: 24px / card:  64px
+     */
+    size?: 'lg' | 'md' | 'sm';
 }
-declare function Skeleton({ className, size, style, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+declare function Skeleton({ className, shape, size, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<Slider$1.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
-interface StepperStep {
-    /** key prop으로 사용되는 고유 식별자 */
-    id: string;
-    label: string;
-}
 interface StepperProps {
-    steps: StepperStep[];
+    /** Step 라벨 문자열 배열 */
+    steps: string[];
     /**
      * 현재 진행 중인 step의 0-based 인덱스.
      * 이 인덱스 이전 step은 complete, 이 인덱스는 current, 이후는 next.
@@ -711,6 +719,65 @@ interface StepperProps {
 }
 declare function Stepper({ steps, currentStep, className }: StepperProps): react_jsx_runtime.JSX.Element;
 
+interface TabItem<T extends string = string> {
+    value: T;
+    label: string;
+}
+interface TabsProps<T extends string = string> {
+    allTabs: TabItem<T>[];
+    current: T;
+    onTabChange: (value: T) => void;
+    /**
+     * "pill"      — 회색 배경 컨테이너 + 흰 배경 active (segment control 스타일)
+     * "underline" — 하단 밑줄 active (default)
+     */
+    variant?: 'pill' | 'underline';
+    className?: string;
+}
+declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, variant, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    pressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const toggleSizeClasses: {
+    readonly sm: "h-7 min-w-7 px-1.5 text-sm";
+    readonly md: "h-9 min-w-9 px-2 text-sm";
+    readonly lg: "h-10 min-w-10 px-2.5 text-base";
+};
+declare const toggleBaseClasses = "inline-flex items-center justify-center gap-1.5 font-medium tracking-tight transition-colors select-none";
+declare function Toggle({ pressed, onPressedChange, size, disabled, className, children, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleGroupItemData<T extends string = string> {
+    value: T;
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+interface ToggleGroupBaseProps<T extends string = string> {
+    items: ToggleGroupItemData<T>[];
+    /**
+     * outlined — 컨테이너 border + 아이템 사이 divider (default)
+     * noBorder — border 없음, 아이템마다 rounded-md 독립 적용
+     */
+    variant?: 'bordered' | 'noBorder';
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+interface ToggleGroupSingleProps<T extends string = string> extends ToggleGroupBaseProps<T> {
+    type?: 'single';
+    value?: T;
+    onValueChange?: (value: T) => void;
+}
+interface ToggleGroupMultipleProps<T extends string = string> extends ToggleGroupBaseProps<T> {
+    type: 'multiple';
+    value?: T[];
+    onValueChange?: (value: T[]) => void;
+}
+type ToggleGroupProps<T extends string = string> = ToggleGroupSingleProps<T> | ToggleGroupMultipleProps<T>;
+declare function ToggleGroup<T extends string = string>({ items, variant, disabled, size, className, ...rest }: ToggleGroupProps<T>): react_jsx_runtime.JSX.Element;
+
 interface CircleIndicatorProps {
     /** 사용량 (바이트 또는 임의 단위) */
     used: number;
@@ -762,13 +829,12 @@ interface TableColumn<T> {
     ellipsisTooltip?: (row: T) => React$1.ReactNode;
     cell: (row: T) => React$1.ReactNode;
 }
-/**
- * TanStack Table의 pagination 옵션을 그대로 노출.
- * 상세 동작은 TanStack Table 공식 문서 참고:
- * https://tanstack.com/table/latest/docs/api/features/pagination
- */
-interface TablePaginationConfig extends Partial<Pick<PaginationState, 'pageSize' | 'pageIndex'>> {
-    onPaginationChange?: OnChangeFn<PaginationState>;
+interface TablePaginationConfig {
+    pageSize?: number;
+    /** 현재 페이지 번호 (1-based). 외부에서 제어할 때 전달. */
+    currentPage?: number;
+    /** 페이지 변경 콜백 (1-based page). */
+    onPageChange?: (page: number) => void;
     /** 서버사이드 페이지네이션 시 true로 설정 */
     manualPagination?: boolean;
     /** manualPagination=true 일 때 전체 페이지 수 */
@@ -792,7 +858,7 @@ interface TableProps<T> {
     rowKey: keyof T | ((row: T) => string);
     /**
      * 페이지네이션 설정. 미전달 시 페이지네이션 비활성화.
-     * TanStack Table pagination 옵션을 그대로 수용.
+     * 외부 API는 1-based page를 사용하고, TanStack의 0-based pageIndex는 내부에서 변환한다.
      */
     pagination?: TablePaginationConfig;
     /**
@@ -816,6 +882,11 @@ interface TableProps<T> {
     rowActions?: (row: T) => React$1.ReactNode;
     /** 행 클릭 핸들러. enableRowSelection=true(편집 모드)일 때는 동작하지 않음. */
     onRowClick?: (row: T) => void;
+    /**
+     * 정렬 상태 변경 콜백. 서버사이드 정렬 연동에 사용.
+     * 빈 배열(정렬 해제)은 전달되지 않으므로 항상 최소 1개 항목 보장.
+     */
+    onSortingChange?: (sorting: SortingState) => void;
     className?: string;
 }
 declare function SortIcon({ direction }: {
@@ -828,7 +899,7 @@ interface PaginationProps {
     className?: string;
 }
 declare function Pagination({ currentPage, totalPages, onPageChange, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
-declare function Table<T>({ columns, data, rowKey, pagination, defaultSorting, loading, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, onRowClick, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T>({ columns, data, rowKey, pagination, defaultSorting, loading, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, onRowClick, onSortingChange, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 declare const TooltipProvider: React$1.FC<Tooltip$1.TooltipProviderProps>;
 interface TooltipProps extends Pick<React$1.ComponentPropsWithoutRef<typeof Tooltip$1.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'>, Omit<React$1.ComponentPropsWithoutRef<typeof Tooltip$1.Content>, 'children' | 'content'> {
@@ -1357,9 +1428,9 @@ interface TrashIconProps {
     className?: string;
 }
 /**
- * Trash icon — SVG downloaded directly from Figma design system.
+ * Trash-2 icon — SVG downloaded directly from Figma design system.
  * Uses stroke="currentColor" for CSS color control.
- * Source: figma.com/design/bNKDIZZAm8ByouCPBnlEye node 128:2740 (lucide/trash)
+ * Source: figma.com/design/bNKDIZZAm8ByouCPBnlEye node 128:2738 (lucide/trash-2)
  */
 declare function TrashIcon({ className }: TrashIconProps): react_jsx_runtime.JSX.Element;
 
@@ -1375,4 +1446,4 @@ declare function WordFileIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentBlogIcon, AgentCsIcon, AgentDataIcon, AgentHrIcon, AgentMailIcon, AgentTrendIcon, AiAgentIcon, AiBuilderIcon, AiCloudIcon, AiDatacenterIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlignJustifyIcon, AlignLeftIcon, ArrowDownIcon, type AvailabilityStatus, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, type AvatarSize, BADGE_VARIANT_STYLES, Badge, type BadgeProps, type BadgeVariant, BlockquoteIcon, BoldIcon, BookOpenIcon, BookUpIcon, Breadcrumb, Button, type ButtonProps, Card, type CardProps, type CardSpec, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, ChevronsUpDownIcon, ChoiceCardGroup, type ChoiceCardGroupProps, ChoiceCardItem, type ChoiceCardItemProps, CircleCheckFillIcon, CircleHelpIcon, CircleIndicator, type CircleIndicatorProps, CircleOutlineIcon, ClaudeIcon, CodeIcon, CodeSquareIcon, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleRoot, CollapsibleTrigger, type CollapsibleWorkspace, Combobox, type ComboboxOption, type ComboboxProps, CreditIcon, DataSection, type DataSectionProps, DeepSeekIcon, DownloadIcon, Drawer, type DrawerProps, DriveIcon, Empty, EmptyTrayIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FileTypeCornerIcon, FolderAmberIcon, FolderBlueIcon, FolderClosedIcon, FolderGreenIcon, FolderVioletIcon, GeminiIcon, GoogleIcon, GroupedSelect, HangulFileIcon, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, HtmlFileIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, ItalicIcon, KbCard, type KbCardMetadataItem, type KbCardProps, KeyRoundIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, type MachineType, MarkdownFileIcon, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, Modal, type ModalProps, type ModelGroup, type ModelItem, MyPageIcon, type NavDropdownItem, type NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, Pagination, PanelLeftIcon, PdfFileIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Providers, RefreshCwIcon, RyaiLogoIcon, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, SheetFileIcon, ShoppingBagIcon, Sidebar, SidebarLink, type SidebarMainMenuItem, type SidebarSubMenuItem, type SidebarUtilityItem, Skeleton, type SkeletonProps, SlideFileIcon, Slider, SmileIcon, type SortDirection, SortIcon, SparklesIcon, SquareCheckIcon, SquareCheckOutlineIcon, StarIcon, Stepper, type StepperProps, type StepperStep, StrikethroughIcon, Switch, SwitchField, type SwitchFieldProps, Table, type TableColumn, type TablePaginationConfig, TablePropertiesIcon, type TableProps, type TableSortingItem, Tooltip, type TooltipProps, TooltipProvider, TooltipWithIcon, type TooltipWithIconProps, TrashIcon, UpstageIcon, type UserMenuSection, type UserMenuSectionItem, UserMessageBubble, WandSparklesIcon, WordFileIcon, buttonVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentBlogIcon, AgentCsIcon, AgentDataIcon, AgentHrIcon, AgentMailIcon, AgentTrendIcon, AiAgentIcon, AiBuilderIcon, AiCloudIcon, AiDatacenterIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlignJustifyIcon, AlignLeftIcon, ArrowDownIcon, type AvailabilityStatus, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, type AvatarSize, BADGE_VARIANT_STYLES, Badge, type BadgeProps, type BadgeVariant, BlockquoteIcon, BoldIcon, BookOpenIcon, BookUpIcon, Breadcrumb, Button, type ButtonProps, Card, type CardProps, type CardSpec, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, ChevronsUpDownIcon, ChoiceCardGroup, type ChoiceCardGroupProps, ChoiceCardItem, type ChoiceCardItemProps, CircleCheckFillIcon, CircleHelpIcon, CircleIndicator, type CircleIndicatorProps, CircleOutlineIcon, ClaudeIcon, CodeIcon, CodeSquareIcon, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleRoot, CollapsibleTrigger, type CollapsibleWorkspace, Combobox, type ComboboxOption, type ComboboxProps, CreditIcon, DataSection, type DataSectionProps, DeepSeekIcon, DownloadIcon, Drawer, type DrawerProps, DriveIcon, Empty, EmptyTrayIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FileTypeCornerIcon, FolderAmberIcon, FolderBlueIcon, FolderClosedIcon, FolderGreenIcon, FolderVioletIcon, GeminiIcon, GoogleIcon, GroupedSelect, HangulFileIcon, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, HtmlFileIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, ItalicIcon, KbCard, type KbCardMetadataItem, type KbCardProps, KeyRoundIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, type MachineType, MarkdownFileIcon, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, Modal, type ModalProps, type ModelGroup, type ModelItem, MyPageIcon, type NavDropdownItem, type NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, Pagination, PanelLeftIcon, PdfFileIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Providers, RefreshCwIcon, RyaiLogoIcon, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, SheetFileIcon, ShoppingBagIcon, Sidebar, SidebarLink, type SidebarMainMenuItem, type SidebarSubMenuItem, type SidebarUtilityItem, Skeleton, type SkeletonProps, SlideFileIcon, Slider, SmileIcon, type SortDirection, SortIcon, SparklesIcon, SquareCheckIcon, SquareCheckOutlineIcon, StarIcon, Stepper, type StepperProps, StrikethroughIcon, Switch, SwitchField, type SwitchFieldProps, type TabItem, Table, type TableColumn, type TablePaginationConfig, TablePropertiesIcon, type TableProps, type TableSortingItem, Tabs, type TabsProps, Toggle, ToggleGroup, type ToggleGroupItemData, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, TooltipProvider, TooltipWithIcon, type TooltipWithIconProps, TrashIcon, UpstageIcon, type UserMenuSection, type UserMenuSectionItem, UserMessageBubble, WandSparklesIcon, WordFileIcon, buttonVariants, toggleBaseClasses, toggleSizeClasses };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as _radix_ui_react_context from '@radix-ui/react-context';
-import { PaginationState, OnChangeFn, RowSelectionState } from '@tanstack/react-table';
+import { RowSelectionState, OnChangeFn, SortingState } from '@tanstack/react-table';
 export { OnChangeFn, PaginationState, RowSelectionState, SortingState } from '@tanstack/react-table';
 
 declare const Accordion: React$1.ForwardRefExoticComponent<(Accordion$1.AccordionSingleProps | Accordion$1.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
@@ -168,8 +168,9 @@ interface DataSectionProps {
     left?: React$1.ReactNode;
     right?: React$1.ReactNode;
     className?: string;
+    childrenClassName?: string;
 }
-declare function DataSection({ title, left, right, className, children, }: DataSectionProps): react_jsx_runtime.JSX.Element;
+declare function DataSection({ title, left, right, className, childrenClassName, children, }: DataSectionProps): react_jsx_runtime.JSX.Element;
 
 interface DrawerProps {
     open: boolean;
@@ -453,8 +454,9 @@ interface KbCardProps {
     /** 카드 클릭 핸들러. selectable(편집 모드)일 때는 동작하지 않음. */
     onClick?: () => void;
     className?: string;
+    variant?: 'grid' | 'list';
 }
-declare function KbCard({ name, metadata, icon, topRight, selectable, checked, onCheckedChange, onClick, className, }: KbCardProps): react_jsx_runtime.JSX.Element;
+declare function KbCard({ name, metadata, icon, topRight, selectable, checked, onCheckedChange, onClick, className, variant, }: KbCardProps): react_jsx_runtime.JSX.Element;
 
 declare function MarkdownMessage({ content, isStreaming, footerMeta, className, }: {
     content: string;
@@ -642,6 +644,7 @@ type SidebarSubMenuItem = {
     isActive?: boolean;
     titleBadge?: string | number;
     onClick?: () => void;
+    isExternal?: boolean;
 };
 type SidebarMainMenuItem = {
     id: string;
@@ -686,22 +689,27 @@ declare function Sidebar({ logo, menus, avatar, utilities, panelTopContent, pane
     LinkComponent: SidebarLinkComponent;
 }): react_jsx_runtime.JSX.Element;
 
-declare const skeletonVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * bar    — 가로 막대, width=100%, 양쪽 rounded-full (default)
+     * circle — 원형, size prop으로 지름 조절
+     * card   — 대형 사각형 블록, rounded-xl
+     */
+    shape?: 'bar' | 'circle' | 'card';
+    /**
+     * lg — bar: 24px / circle: 40px / card: 128px
+     * md — bar: 12px / circle: 32px / card:  96px
+     * sm — bar:  6px / circle: 24px / card:  64px
+     */
+    size?: 'lg' | 'md' | 'sm';
 }
-declare function Skeleton({ className, size, style, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+declare function Skeleton({ className, shape, size, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<Slider$1.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
-interface StepperStep {
-    /** key prop으로 사용되는 고유 식별자 */
-    id: string;
-    label: string;
-}
 interface StepperProps {
-    steps: StepperStep[];
+    /** Step 라벨 문자열 배열 */
+    steps: string[];
     /**
      * 현재 진행 중인 step의 0-based 인덱스.
      * 이 인덱스 이전 step은 complete, 이 인덱스는 current, 이후는 next.
@@ -711,6 +719,65 @@ interface StepperProps {
 }
 declare function Stepper({ steps, currentStep, className }: StepperProps): react_jsx_runtime.JSX.Element;
 
+interface TabItem<T extends string = string> {
+    value: T;
+    label: string;
+}
+interface TabsProps<T extends string = string> {
+    allTabs: TabItem<T>[];
+    current: T;
+    onTabChange: (value: T) => void;
+    /**
+     * "pill"      — 회색 배경 컨테이너 + 흰 배경 active (segment control 스타일)
+     * "underline" — 하단 밑줄 active (default)
+     */
+    variant?: 'pill' | 'underline';
+    className?: string;
+}
+declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, variant, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    pressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const toggleSizeClasses: {
+    readonly sm: "h-7 min-w-7 px-1.5 text-sm";
+    readonly md: "h-9 min-w-9 px-2 text-sm";
+    readonly lg: "h-10 min-w-10 px-2.5 text-base";
+};
+declare const toggleBaseClasses = "inline-flex items-center justify-center gap-1.5 font-medium tracking-tight transition-colors select-none";
+declare function Toggle({ pressed, onPressedChange, size, disabled, className, children, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleGroupItemData<T extends string = string> {
+    value: T;
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+interface ToggleGroupBaseProps<T extends string = string> {
+    items: ToggleGroupItemData<T>[];
+    /**
+     * outlined — 컨테이너 border + 아이템 사이 divider (default)
+     * noBorder — border 없음, 아이템마다 rounded-md 독립 적용
+     */
+    variant?: 'bordered' | 'noBorder';
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+interface ToggleGroupSingleProps<T extends string = string> extends ToggleGroupBaseProps<T> {
+    type?: 'single';
+    value?: T;
+    onValueChange?: (value: T) => void;
+}
+interface ToggleGroupMultipleProps<T extends string = string> extends ToggleGroupBaseProps<T> {
+    type: 'multiple';
+    value?: T[];
+    onValueChange?: (value: T[]) => void;
+}
+type ToggleGroupProps<T extends string = string> = ToggleGroupSingleProps<T> | ToggleGroupMultipleProps<T>;
+declare function ToggleGroup<T extends string = string>({ items, variant, disabled, size, className, ...rest }: ToggleGroupProps<T>): react_jsx_runtime.JSX.Element;
+
 interface CircleIndicatorProps {
     /** 사용량 (바이트 또는 임의 단위) */
     used: number;
@@ -762,13 +829,12 @@ interface TableColumn<T> {
     ellipsisTooltip?: (row: T) => React$1.ReactNode;
     cell: (row: T) => React$1.ReactNode;
 }
-/**
- * TanStack Table의 pagination 옵션을 그대로 노출.
- * 상세 동작은 TanStack Table 공식 문서 참고:
- * https://tanstack.com/table/latest/docs/api/features/pagination
- */
-interface TablePaginationConfig extends Partial<Pick<PaginationState, 'pageSize' | 'pageIndex'>> {
-    onPaginationChange?: OnChangeFn<PaginationState>;
+interface TablePaginationConfig {
+    pageSize?: number;
+    /** 현재 페이지 번호 (1-based). 외부에서 제어할 때 전달. */
+    currentPage?: number;
+    /** 페이지 변경 콜백 (1-based page). */
+    onPageChange?: (page: number) => void;
     /** 서버사이드 페이지네이션 시 true로 설정 */
     manualPagination?: boolean;
     /** manualPagination=true 일 때 전체 페이지 수 */
@@ -792,7 +858,7 @@ interface TableProps<T> {
     rowKey: keyof T | ((row: T) => string);
     /**
      * 페이지네이션 설정. 미전달 시 페이지네이션 비활성화.
-     * TanStack Table pagination 옵션을 그대로 수용.
+     * 외부 API는 1-based page를 사용하고, TanStack의 0-based pageIndex는 내부에서 변환한다.
      */
     pagination?: TablePaginationConfig;
     /**
@@ -816,6 +882,11 @@ interface TableProps<T> {
     rowActions?: (row: T) => React$1.ReactNode;
     /** 행 클릭 핸들러. enableRowSelection=true(편집 모드)일 때는 동작하지 않음. */
     onRowClick?: (row: T) => void;
+    /**
+     * 정렬 상태 변경 콜백. 서버사이드 정렬 연동에 사용.
+     * 빈 배열(정렬 해제)은 전달되지 않으므로 항상 최소 1개 항목 보장.
+     */
+    onSortingChange?: (sorting: SortingState) => void;
     className?: string;
 }
 declare function SortIcon({ direction }: {
@@ -828,7 +899,7 @@ interface PaginationProps {
     className?: string;
 }
 declare function Pagination({ currentPage, totalPages, onPageChange, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
-declare function Table<T>({ columns, data, rowKey, pagination, defaultSorting, loading, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, onRowClick, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T>({ columns, data, rowKey, pagination, defaultSorting, loading, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, onRowClick, onSortingChange, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 declare const TooltipProvider: React$1.FC<Tooltip$1.TooltipProviderProps>;
 interface TooltipProps extends Pick<React$1.ComponentPropsWithoutRef<typeof Tooltip$1.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'>, Omit<React$1.ComponentPropsWithoutRef<typeof Tooltip$1.Content>, 'children' | 'content'> {
@@ -1357,9 +1428,9 @@ interface TrashIconProps {
     className?: string;
 }
 /**
- * Trash icon — SVG downloaded directly from Figma design system.
+ * Trash-2 icon — SVG downloaded directly from Figma design system.
  * Uses stroke="currentColor" for CSS color control.
- * Source: figma.com/design/bNKDIZZAm8ByouCPBnlEye node 128:2740 (lucide/trash)
+ * Source: figma.com/design/bNKDIZZAm8ByouCPBnlEye node 128:2738 (lucide/trash-2)
  */
 declare function TrashIcon({ className }: TrashIconProps): react_jsx_runtime.JSX.Element;
 
@@ -1375,4 +1446,4 @@ declare function WordFileIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentBlogIcon, AgentCsIcon, AgentDataIcon, AgentHrIcon, AgentMailIcon, AgentTrendIcon, AiAgentIcon, AiBuilderIcon, AiCloudIcon, AiDatacenterIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlignJustifyIcon, AlignLeftIcon, ArrowDownIcon, type AvailabilityStatus, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, type AvatarSize, BADGE_VARIANT_STYLES, Badge, type BadgeProps, type BadgeVariant, BlockquoteIcon, BoldIcon, BookOpenIcon, BookUpIcon, Breadcrumb, Button, type ButtonProps, Card, type CardProps, type CardSpec, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, ChevronsUpDownIcon, ChoiceCardGroup, type ChoiceCardGroupProps, ChoiceCardItem, type ChoiceCardItemProps, CircleCheckFillIcon, CircleHelpIcon, CircleIndicator, type CircleIndicatorProps, CircleOutlineIcon, ClaudeIcon, CodeIcon, CodeSquareIcon, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleRoot, CollapsibleTrigger, type CollapsibleWorkspace, Combobox, type ComboboxOption, type ComboboxProps, CreditIcon, DataSection, type DataSectionProps, DeepSeekIcon, DownloadIcon, Drawer, type DrawerProps, DriveIcon, Empty, EmptyTrayIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FileTypeCornerIcon, FolderAmberIcon, FolderBlueIcon, FolderClosedIcon, FolderGreenIcon, FolderVioletIcon, GeminiIcon, GoogleIcon, GroupedSelect, HangulFileIcon, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, HtmlFileIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, ItalicIcon, KbCard, type KbCardMetadataItem, type KbCardProps, KeyRoundIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, type MachineType, MarkdownFileIcon, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, Modal, type ModalProps, type ModelGroup, type ModelItem, MyPageIcon, type NavDropdownItem, type NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, Pagination, PanelLeftIcon, PdfFileIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Providers, RefreshCwIcon, RyaiLogoIcon, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, SheetFileIcon, ShoppingBagIcon, Sidebar, SidebarLink, type SidebarMainMenuItem, type SidebarSubMenuItem, type SidebarUtilityItem, Skeleton, type SkeletonProps, SlideFileIcon, Slider, SmileIcon, type SortDirection, SortIcon, SparklesIcon, SquareCheckIcon, SquareCheckOutlineIcon, StarIcon, Stepper, type StepperProps, type StepperStep, StrikethroughIcon, Switch, SwitchField, type SwitchFieldProps, Table, type TableColumn, type TablePaginationConfig, TablePropertiesIcon, type TableProps, type TableSortingItem, Tooltip, type TooltipProps, TooltipProvider, TooltipWithIcon, type TooltipWithIconProps, TrashIcon, UpstageIcon, type UserMenuSection, type UserMenuSectionItem, UserMessageBubble, WandSparklesIcon, WordFileIcon, buttonVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentBlogIcon, AgentCsIcon, AgentDataIcon, AgentHrIcon, AgentMailIcon, AgentTrendIcon, AiAgentIcon, AiBuilderIcon, AiCloudIcon, AiDatacenterIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlignJustifyIcon, AlignLeftIcon, ArrowDownIcon, type AvailabilityStatus, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, type AvatarSize, BADGE_VARIANT_STYLES, Badge, type BadgeProps, type BadgeVariant, BlockquoteIcon, BoldIcon, BookOpenIcon, BookUpIcon, Breadcrumb, Button, type ButtonProps, Card, type CardProps, type CardSpec, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, ChevronsUpDownIcon, ChoiceCardGroup, type ChoiceCardGroupProps, ChoiceCardItem, type ChoiceCardItemProps, CircleCheckFillIcon, CircleHelpIcon, CircleIndicator, type CircleIndicatorProps, CircleOutlineIcon, ClaudeIcon, CodeIcon, CodeSquareIcon, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleRoot, CollapsibleTrigger, type CollapsibleWorkspace, Combobox, type ComboboxOption, type ComboboxProps, CreditIcon, DataSection, type DataSectionProps, DeepSeekIcon, DownloadIcon, Drawer, type DrawerProps, DriveIcon, Empty, EmptyTrayIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FileTypeCornerIcon, FolderAmberIcon, FolderBlueIcon, FolderClosedIcon, FolderGreenIcon, FolderVioletIcon, GeminiIcon, GoogleIcon, GroupedSelect, HangulFileIcon, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, HtmlFileIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, ItalicIcon, KbCard, type KbCardMetadataItem, type KbCardProps, KeyRoundIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, type MachineType, MarkdownFileIcon, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, Modal, type ModalProps, type ModelGroup, type ModelItem, MyPageIcon, type NavDropdownItem, type NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, Pagination, PanelLeftIcon, PdfFileIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Providers, RefreshCwIcon, RyaiLogoIcon, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, SheetFileIcon, ShoppingBagIcon, Sidebar, SidebarLink, type SidebarMainMenuItem, type SidebarSubMenuItem, type SidebarUtilityItem, Skeleton, type SkeletonProps, SlideFileIcon, Slider, SmileIcon, type SortDirection, SortIcon, SparklesIcon, SquareCheckIcon, SquareCheckOutlineIcon, StarIcon, Stepper, type StepperProps, StrikethroughIcon, Switch, SwitchField, type SwitchFieldProps, type TabItem, Table, type TableColumn, type TablePaginationConfig, TablePropertiesIcon, type TableProps, type TableSortingItem, Tabs, type TabsProps, Toggle, ToggleGroup, type ToggleGroupItemData, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, TooltipProvider, TooltipWithIcon, type TooltipWithIconProps, TrashIcon, UpstageIcon, type UserMenuSection, type UserMenuSectionItem, UserMessageBubble, WandSparklesIcon, WordFileIcon, buttonVariants, toggleBaseClasses, toggleSizeClasses };