@mondrianai/runyourai-design-system 0.0.18 → 0.0.19

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default from 'react';
+import React__default, { ReactNode } from 'react';
 import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, DropdownMenu as DropdownMenu$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, Menubar as Menubar$1, Slider as Slider$1, Switch as Switch$1, Tooltip as Tooltip$1 } from 'radix-ui';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -33,7 +33,7 @@ declare const AlertDialogAction: React$1.ForwardRefExoticComponent<Omit<AlertDia
 declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDialog$1.AlertDialogCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | null | undefined;
+    variant?: "destructive" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
@@ -112,7 +112,7 @@ declare function BreadcrumbSeparator({ iconName, className, ...props }: React__d
 }): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
     size?: "rounded" | "default" | "icon" | "pill" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -869,6 +869,8 @@ declare function Stepper({ steps, currentStep, className }: StepperProps): react
 interface TabItem<T extends string = string> {
     value: T;
     label: string;
+    /** 이 탭이 활성화됐을 때 탭 행 우측에 렌더링할 콘텐츠 (검색, 액션 버튼 등) */
+    rightContents?: ReactNode;
 }
 interface TabsProps<T extends string = string> {
     allTabs: TabItem<T>[];
@@ -878,7 +880,7 @@ interface TabsProps<T extends string = string> {
      * "pill"      — 회색 배경 컨테이너 + 흰 배경 active (segment control 스타일)
      * "underline" — 하단 밑줄 active (default)
      */
-    variant?: "pill" | "underline";
+    variant?: 'pill' | 'underline';
     /** 컨테이너를 w-full로 펼치고 각 탭 버튼을 균등 분할(flex-1)합니다 */
     block?: boolean;
     /** Tailwind height 클래스 (e.g. "h-[36px]"). 지정 시 내부 버튼 패딩도 자동 조정됩니다. */
@@ -981,9 +983,15 @@ interface PaginationProps {
     previousLabel?: string;
     /** 다음 버튼 라벨. simple=true 이면 무시됨. 기본값 "다음" */
     nextLabel?: string;
+    /** 현재 페이지 크기. onPageSizeChange와 함께 사용하면 좌측에 Select가 표시됨. */
+    pageSize?: number;
+    /** 페이지 크기 변경 콜백. 제공 시 좌측에 페이지 크기 Select가 표시됨. */
+    onPageSizeChange?: (size: number) => void;
+    /** 페이지 크기 옵션. value는 숫자 문자열, label은 단위 포함 표시 텍스트. 예: [{ value: '10', label: '10개' }] */
+    pageSizeOptions?: SelectOption[];
     className?: string;
 }
-declare function Pagination({ currentPage, totalPages, onPageChange, simple, previousLabel, nextLabel, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare function Pagination({ currentPage, totalPages, onPageChange, simple, previousLabel, nextLabel, pageSize, onPageSizeChange, pageSizeOptions, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
 
 type SortDirection = 'ASC' | 'DESC' | null;
 interface TableColumn<T> {
@@ -1109,7 +1117,7 @@ declare function UserMessageBubble({ content }: {
  *    · delayDuration  — hover → open 지연 시간 (ms)
  *    · skipDelayDuration — 빠르게 연속 이동 시 딜레이 스킵 임계치 (ms)
  */
-declare function Providers({ children }: {
+declare function RyaiDsProvider({ children }: {
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
@@ -1620,4 +1628,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, 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, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, 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, DatePicker, type DatePickerLocale, type DatePickerMode, type DatePickerProps, type DateRange, DeepSeekIcon, type DisabledDateRule, DownloadIcon, Drawer, type DrawerProps, DriveIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyTrayIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FileTypeCornerIcon, FolderAmberIcon, FolderBlueIcon, FolderClosedIcon, FolderGreenIcon, FolderVioletIcon, GeminiIcon, GoogleIcon, HangulFileIcon, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, HtmlFileIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, ItalicIcon, KbCard, type KbCardMetadataItem, type KbCardProps, KeyRoundIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, MarkdownFileIcon, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, Modal, type ModalProps, MyPageIcon, type NavDropdownItem, type NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, Pagination, type PaginationProps, PanelLeftIcon, PdfFileIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Progress, type ProgressProps, type ProgressThreshold, Providers, RefreshCwIcon, RyaiLogoIcon, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, SheetFileIcon, type SheetProps, 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 };
+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, 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, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, 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, DatePicker, type DatePickerLocale, type DatePickerMode, type DatePickerProps, type DateRange, DeepSeekIcon, type DisabledDateRule, DownloadIcon, Drawer, type DrawerProps, DriveIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyTrayIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FileTypeCornerIcon, FolderAmberIcon, FolderBlueIcon, FolderClosedIcon, FolderGreenIcon, FolderVioletIcon, GeminiIcon, GoogleIcon, HangulFileIcon, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, HtmlFileIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, ItalicIcon, KbCard, type KbCardMetadataItem, type KbCardProps, KeyRoundIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, MarkdownFileIcon, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, Modal, type ModalProps, MyPageIcon, type NavDropdownItem, type NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, Pagination, type PaginationProps, PanelLeftIcon, PdfFileIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Progress, type ProgressProps, type ProgressThreshold, RefreshCwIcon, RyaiDsProvider, RyaiLogoIcon, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, SheetFileIcon, type SheetProps, 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

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default from 'react';
+import React__default, { ReactNode } from 'react';
 import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, DropdownMenu as DropdownMenu$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, Menubar as Menubar$1, Slider as Slider$1, Switch as Switch$1, Tooltip as Tooltip$1 } from 'radix-ui';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -33,7 +33,7 @@ declare const AlertDialogAction: React$1.ForwardRefExoticComponent<Omit<AlertDia
 declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDialog$1.AlertDialogCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | null | undefined;
+    variant?: "destructive" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
@@ -112,7 +112,7 @@ declare function BreadcrumbSeparator({ iconName, className, ...props }: React__d
 }): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
     size?: "rounded" | "default" | "icon" | "pill" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -869,6 +869,8 @@ declare function Stepper({ steps, currentStep, className }: StepperProps): react
 interface TabItem<T extends string = string> {
     value: T;
     label: string;
+    /** 이 탭이 활성화됐을 때 탭 행 우측에 렌더링할 콘텐츠 (검색, 액션 버튼 등) */
+    rightContents?: ReactNode;
 }
 interface TabsProps<T extends string = string> {
     allTabs: TabItem<T>[];
@@ -878,7 +880,7 @@ interface TabsProps<T extends string = string> {
      * "pill"      — 회색 배경 컨테이너 + 흰 배경 active (segment control 스타일)
      * "underline" — 하단 밑줄 active (default)
      */
-    variant?: "pill" | "underline";
+    variant?: 'pill' | 'underline';
     /** 컨테이너를 w-full로 펼치고 각 탭 버튼을 균등 분할(flex-1)합니다 */
     block?: boolean;
     /** Tailwind height 클래스 (e.g. "h-[36px]"). 지정 시 내부 버튼 패딩도 자동 조정됩니다. */
@@ -981,9 +983,15 @@ interface PaginationProps {
     previousLabel?: string;
     /** 다음 버튼 라벨. simple=true 이면 무시됨. 기본값 "다음" */
     nextLabel?: string;
+    /** 현재 페이지 크기. onPageSizeChange와 함께 사용하면 좌측에 Select가 표시됨. */
+    pageSize?: number;
+    /** 페이지 크기 변경 콜백. 제공 시 좌측에 페이지 크기 Select가 표시됨. */
+    onPageSizeChange?: (size: number) => void;
+    /** 페이지 크기 옵션. value는 숫자 문자열, label은 단위 포함 표시 텍스트. 예: [{ value: '10', label: '10개' }] */
+    pageSizeOptions?: SelectOption[];
     className?: string;
 }
-declare function Pagination({ currentPage, totalPages, onPageChange, simple, previousLabel, nextLabel, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare function Pagination({ currentPage, totalPages, onPageChange, simple, previousLabel, nextLabel, pageSize, onPageSizeChange, pageSizeOptions, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
 
 type SortDirection = 'ASC' | 'DESC' | null;
 interface TableColumn<T> {
@@ -1109,7 +1117,7 @@ declare function UserMessageBubble({ content }: {
  *    · delayDuration  — hover → open 지연 시간 (ms)
  *    · skipDelayDuration — 빠르게 연속 이동 시 딜레이 스킵 임계치 (ms)
  */
-declare function Providers({ children }: {
+declare function RyaiDsProvider({ children }: {
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
@@ -1620,4 +1628,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, 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, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, 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, DatePicker, type DatePickerLocale, type DatePickerMode, type DatePickerProps, type DateRange, DeepSeekIcon, type DisabledDateRule, DownloadIcon, Drawer, type DrawerProps, DriveIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyTrayIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FileTypeCornerIcon, FolderAmberIcon, FolderBlueIcon, FolderClosedIcon, FolderGreenIcon, FolderVioletIcon, GeminiIcon, GoogleIcon, HangulFileIcon, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, HtmlFileIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, ItalicIcon, KbCard, type KbCardMetadataItem, type KbCardProps, KeyRoundIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, MarkdownFileIcon, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, Modal, type ModalProps, MyPageIcon, type NavDropdownItem, type NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, Pagination, type PaginationProps, PanelLeftIcon, PdfFileIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Progress, type ProgressProps, type ProgressThreshold, Providers, RefreshCwIcon, RyaiLogoIcon, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, SheetFileIcon, type SheetProps, 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 };
+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, 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, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, 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, DatePicker, type DatePickerLocale, type DatePickerMode, type DatePickerProps, type DateRange, DeepSeekIcon, type DisabledDateRule, DownloadIcon, Drawer, type DrawerProps, DriveIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyTrayIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FileTypeCornerIcon, FolderAmberIcon, FolderBlueIcon, FolderClosedIcon, FolderGreenIcon, FolderVioletIcon, GeminiIcon, GoogleIcon, HangulFileIcon, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, HtmlFileIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, ItalicIcon, KbCard, type KbCardMetadataItem, type KbCardProps, KeyRoundIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, MarkdownFileIcon, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, Modal, type ModalProps, MyPageIcon, type NavDropdownItem, type NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, Pagination, type PaginationProps, PanelLeftIcon, PdfFileIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Progress, type ProgressProps, type ProgressThreshold, RefreshCwIcon, RyaiDsProvider, RyaiLogoIcon, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, SheetFileIcon, type SheetProps, 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.js

@@ -220,8 +220,8 @@ __export(components_exports, {
   PencilLineIcon: () => PencilLineIcon,
   PresentationIcon: () => PresentationIcon,
   Progress: () => Progress,
-  Providers: () => Providers,
   RefreshCwIcon: () => RefreshCwIcon,
+  RyaiDsProvider: () => RyaiDsProvider,
   RyaiLogoIcon: () => RyaiLogoIcon,
   SearchInput: () => SearchInput,
   SegmentedControl: () => SegmentedControl,
@@ -701,7 +701,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
     variants: {
       /**
        * variant — 버튼 색상/스타일
-       * default      검정 배경, 흰 글자(primary-foreground), 그림자 / hover: opacity-90
+       * primary      검정 배경, 흰 글자(primary-foreground), 그림자 / hover: opacity-90
        * secondary    연회색 배경, 검정 글자 / hover: accent 배경 (텍스트·opacity 변화 없음)
        * outline      흰 배경 + 테두리, 검정 글자 / hover: accent 배경 (텍스트 색 변화 없음)
        * ghost        배경 없음, 검정 글자 / hover: accent 배경 (텍스트 색 변화 없음)
@@ -709,7 +709,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
        * link         배경/테두리 없음, primary 색 글자 / hover: underline
        */
       variant: {
-        default: "bg-primary text-primary-foreground shadow-button hover:opacity-90",
+        primary: "bg-primary text-primary-foreground shadow-button hover:opacity-90",
         secondary: "bg-secondary text-secondary-foreground hover:bg-accent",
         outline: "border border-border bg-background text-foreground hover:bg-accent",
         ghost: "text-foreground hover:bg-accent",
@@ -731,7 +731,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
       }
     },
     defaultVariants: {
-      variant: "default",
+      variant: "primary",
       size: "default"
     }
   }
@@ -739,7 +739,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
 function Button(_a) {
   var _b = _a, {
     className,
-    variant = "default",
+    variant = "primary",
     size = "default",
     asChild = false,
     loading = false,
@@ -891,7 +891,7 @@ var AlertDialogAction = React3.forwardRef((_a, ref) => {
     import_radix_ui3.AlertDialog.Action,
     __spreadValues({
       ref,
-      className: cn(buttonVariants({ variant: "default" }), className)
+      className: cn(buttonVariants({ variant: "primary" }), className)
     }, props)
   );
 });
@@ -3825,40 +3825,28 @@ var React14 = __toESM(require("react"));
 var import_radix_ui11 = require("radix-ui");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var TooltipProvider = import_radix_ui11.Tooltip.Provider;
-var TooltipContent = React14.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      side = "top",
-      sideOffset = 4,
-      children
-    } = _b, props = __objRest(_b, [
-      "className",
-      "side",
-      "sideOffset",
-      "children"
-    ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_radix_ui11.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      import_radix_ui11.Tooltip.Content,
-      __spreadProps(__spreadValues({
-        ref,
-        side,
-        sideOffset,
-        className: cn(
-          "z-50 w-max max-w-[200px]",
-          "bg-primary rounded-md px-2.5 py-1.5",
-          "animate-in fade-in-0 zoom-in-95",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )
-      }, props), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "block text-xs font-normal leading-snug tracking-tight text-primary-foreground whitespace-normal break-words", children })
-      })
-    ) });
-  }
-);
+var TooltipContent = React14.forwardRef((_a, ref) => {
+  var _b = _a, { className, side = "top", sideOffset = 4, children } = _b, props = __objRest(_b, ["className", "side", "sideOffset", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_radix_ui11.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_radix_ui11.Tooltip.Content,
+    __spreadProps(__spreadValues({
+      ref,
+      side,
+      sideOffset,
+      className: cn(
+        "z-50 w-max max-w-[200px]",
+        "bg-primary rounded-md px-2.5 py-1.5",
+        "animate-in fade-in-0 zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "block text-xs font-normal leading-snug tracking-tight text-primary-foreground whitespace-normal break-words", children })
+    })
+  ) });
+});
 TooltipContent.displayName = "TooltipContent";
 function Tooltip(_a) {
   var _b = _a, {
@@ -3901,7 +3889,7 @@ function TooltipWithIcon({
     Icon,
     {
       name: iconName,
-      className: cn("size-4 text-muted-foreground cursor-pointer", className)
+      className: cn("size-4 text-muted-foreground cursor-help", className)
     }
   ) });
 }
@@ -4516,7 +4504,7 @@ function Modal({
                 /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   Button,
                   {
-                    variant: variant === "danger" ? "destructive" : "default",
+                    variant: variant === "danger" ? "destructive" : "primary",
                     onClick: handleConfirm,
                     disabled: confirmDisabled,
                     loading: isLoadingCombined,
@@ -4877,6 +4865,19 @@ function SearchInput(_a) {
 var React20 = __toESM(require("react"));
 var import_radix_ui13 = require("radix-ui");
 var import_jsx_runtime38 = require("react/jsx-runtime");
+function TruncatedText({ text, className }) {
+  const ref = React20.useRef(null);
+  const [open, setOpen] = React20.useState(false);
+  const handleOpenChange = (nextOpen) => {
+    if (!nextOpen) {
+      setOpen(false);
+      return;
+    }
+    const el = ref.current;
+    if (el && el.scrollWidth > el.clientWidth) setOpen(true);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Tooltip, { content: text, open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { ref, className, children: text }) });
+}
 function Select(props) {
   var _a, _b, _c, _d;
   const { placeholder = "\uC120\uD0DD\uD574 \uC8FC\uC138\uC694", className, disabled = false } = props;
@@ -4950,13 +4951,13 @@ function Select(props) {
             triggerGroupIcon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "shrink-0 flex items-center", children: triggerGroupIcon }),
             /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5", children: [
               /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                "span",
+                TruncatedText,
                 {
+                  text: triggerLabel || placeholder,
                   className: cn(
                     "min-w-0 truncate text-left text-sm leading-5 tracking-tight",
                     triggerLabel ? "text-foreground" : "text-muted-foreground"
-                  ),
-                  children: triggerLabel || placeholder
+                  )
                 }
               ),
               triggerOptionIcon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "shrink-0 flex items-center", children: triggerOptionIcon })
@@ -4980,8 +4981,8 @@ function Select(props) {
       {
         align: "start",
         sideOffset: 4,
-        style: { width: "var(--radix-popover-trigger-width)" },
         className: cn(
+          "min-w-[var(--radix-popover-trigger-width)] max-w-80",
           "z-50 rounded-lg border border-border bg-popover overflow-hidden",
           "shadow-dropdown",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -5013,7 +5014,7 @@ function Select(props) {
                     ),
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex flex-1 min-w-0 items-center gap-1.5", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 truncate text-left", children: opt.label }),
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TruncatedText, { text: opt.label, className: "min-w-0 truncate text-left" }),
                         opt.icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "shrink-0 flex items-center", children: opt.icon })
                       ] }),
                       isSelected && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "check", className: "size-4 shrink-0 ml-2" })
@@ -5692,16 +5693,21 @@ function Tabs({
   height = "h-[36px]",
   className
 }) {
+  var _a;
+  const activeRightContents = (_a = allTabs.find(
+    (t) => t.value === current
+  )) == null ? void 0 : _a.rightContents;
+  const hasAnyRightContents = allTabs.some((t) => t.rightContents != null);
   if (variant === "pill") {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    const pillEl = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "div",
       {
         className: cn(
           "items-center gap-1 rounded-lg bg-muted p-1",
-          block ? "flex w-full" : "inline-flex",
+          block && !hasAnyRightContents ? "flex w-full" : "inline-flex",
           height,
           height && "[&_button]:py-1",
-          className
+          !hasAnyRightContents && className
         ),
         children: allTabs.map((tab) => {
           const isActive = tab.value === current;
@@ -5711,7 +5717,7 @@ function Tabs({
               type: "button",
               onClick: () => onTabChange(tab.value),
               className: cn(
-                "rounded-md px-3 py-1.5 text-sm font-medium tracking-tight transition-all",
+                "cursor-pointer rounded-md px-3 py-1.5 text-sm font-medium tracking-tight transition-all",
                 block && "flex-1",
                 isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
               ),
@@ -5722,24 +5728,66 @@ function Tabs({
         })
       }
     );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("flex items-center", block && "w-full", className), children: allTabs.map((tab) => {
-    const isActive = tab.value === current;
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      "button",
+    if (!hasAnyRightContents) return pillEl;
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      "div",
       {
-        type: "button",
-        onClick: () => onTabChange(tab.value),
-        className: cn(
-          "px-3 py-2 text-sm tracking-tight transition-colors",
-          block && "flex-1",
-          isActive ? "border-b-2 border-foreground font-semibold text-foreground" : "border-b border-border font-medium text-muted-foreground hover:text-foreground"
-        ),
-        children: tab.label
-      },
-      tab.value
+        className: cn("flex items-center gap-4", block && "w-full", className),
+        children: [
+          pillEl,
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "ml-auto flex items-center gap-2", children: activeRightContents })
+        ]
+      }
     );
-  }) });
+  }
+  if (!hasAnyRightContents) {
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("flex items-center", block && "w-full", className), children: allTabs.map((tab) => {
+      const isActive = tab.value === current;
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onTabChange(tab.value),
+          className: cn(
+            "cursor-pointer px-3 py-2 text-sm tracking-tight transition-colors",
+            block && "flex-1",
+            isActive ? "border-b-2 border-foreground font-semibold text-foreground" : "border-b border-border font-medium text-muted-foreground hover:text-foreground"
+          ),
+          children: tab.label
+        },
+        tab.value
+      );
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center border-b border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("flex items-center", block && "flex-1"), children: allTabs.map((tab) => {
+          const isActive = tab.value === current;
+          return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => onTabChange(tab.value),
+              className: cn(
+                "cursor-pointer -mb-px px-3 pt-2 pb-3 text-sm tracking-tight transition-colors",
+                block && "flex-1",
+                isActive ? "border-b-2 border-foreground font-semibold text-foreground" : "font-medium text-muted-foreground hover:text-foreground"
+              ),
+              children: tab.label
+            },
+            tab.value
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "ml-auto flex items-center pb-1", children: activeRightContents })
+      ]
+    }
+  );
 }
 
 // src/components/ui/toggle.tsx
@@ -6025,17 +6073,13 @@ function getVisiblePageItems(currentPage, totalPages) {
   ];
 }
 function PaginationRoot(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "nav",
     __spreadValues({
       role: "navigation",
       "aria-label": "pagination",
-      className: cn("mx-auto flex w-full justify-center", className)
+      className: cn("flex", className)
     }, props)
   );
 }
@@ -6056,20 +6100,35 @@ var PaginationItem = React25.forwardRef((_a, ref) => {
 });
 PaginationItem.displayName = "PaginationItem";
 function PaginationLink(_a) {
-  var _b = _a, { className, isActive } = _b, props = __objRest(_b, ["className", "isActive"]);
+  var _b = _a, {
+    className,
+    isActive
+  } = _b, props = __objRest(_b, [
+    "className",
+    "isActive"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "button",
     __spreadValues({
       "aria-current": isActive ? "page" : void 0,
       className: cn(
-        buttonVariants({ variant: isActive ? "outline" : "ghost", size: "icon" }),
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size: "icon"
+        }),
         className
       )
     }, props)
   );
 }
 function PaginationPrevious(_a) {
-  var _b = _a, { className, label } = _b, props = __objRest(_b, ["className", "label"]);
+  var _b = _a, {
+    className,
+    label
+  } = _b, props = __objRest(_b, [
+    "className",
+    "label"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "button",
     __spreadProps(__spreadValues({
@@ -6135,10 +6194,18 @@ function Pagination({
   simple = false,
   previousLabel = "\uC774\uC804",
   nextLabel = "\uB2E4\uC74C",
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions = [
+    { value: "10", label: "10\uAC1C" },
+    { value: "20", label: "20\uAC1C" },
+    { value: "50", label: "50\uAC1C" },
+    { value: "100", label: "100\uAC1C" }
+  ],
   className
 }) {
   const items = getVisiblePageItems(currentPage, totalPages);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationRoot, { className: cn("pt-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PaginationContent, { children: [
+  const pageNav = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PaginationContent, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       PaginationPrevious,
       {
@@ -6169,7 +6236,22 @@ function Pagination({
         disabled: currentPage >= totalPages
       }
     ) })
-  ] }) });
+  ] });
+  if (onPageSizeChange) {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        Select,
+        {
+          options: pageSizeOptions,
+          value: pageSize !== void 0 ? String(pageSize) : void 0,
+          onValueChange: (value) => onPageSizeChange(Number(value)),
+          className: "w-24"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("nav", { role: "navigation", "aria-label": "pagination", className: "flex", children: pageNav })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationRoot, { className, children: pageNav });
 }
 
 // src/components/ui/table.tsx
@@ -6547,14 +6629,14 @@ function Table({
         ] })
       }
     ),
-    !loading && hasPagination && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    !loading && hasPagination && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "pt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       Pagination,
       {
         currentPage,
         totalPages,
         onPageChange: (page) => table.setPageIndex(page - 1)
       }
-    )
+    ) })
   ] });
 }
 
@@ -6592,9 +6674,9 @@ function UserMessageBubble({ content }) {
   ) });
 }
 
-// src/components/providers.tsx
+// src/components/provider.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
-function Providers({ children }) {
+function RyaiDsProvider({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TooltipProvider, { delayDuration: 200, skipDelayDuration: 300, children });
 }
 
@@ -9971,8 +10053,8 @@ function WordFileIcon({ className }) {
   PencilLineIcon,
   PresentationIcon,
   Progress,
-  Providers,
   RefreshCwIcon,
+  RyaiDsProvider,
   RyaiLogoIcon,
   SearchInput,
   SegmentedControl,