@mondrianai/runyourai-design-system 0.0.15 → 0.0.16

package/dist/index.d.mts

@@ -314,6 +314,17 @@ type DateRange = {
     start?: Date;
     end?: Date;
 };
+/**
+ * A rule that disables one or more dates in the calendar:
+ * - `'past'`              — all dates strictly before today
+ * - `'future'`            — all dates strictly after today
+ * - `Date`                — a specific single day
+ * - `{ start?, end? }`    — an inclusive date range; omit either bound for an open-ended range
+ */
+type DisabledDateRule = 'past' | 'future' | Date | {
+    start?: Date;
+    end?: Date;
+};
 interface DatePickerProps {
     /** Controlled value (date / offset modes) */
     value?: Date;
@@ -333,7 +344,29 @@ interface DatePickerProps {
     defaultRange?: DateRange;
     /** Called when the selected range changes. Used when mode='range'. */
     onRangeChange?: (range: DateRange) => void;
-    /** When true, dates before today cannot be selected and prev-month nav is blocked at current month */
+    /**
+     * One or more rules that disable specific dates in the calendar.
+     *
+     * ```tsx
+     * // 오늘 이후 선택 불가
+     * disabledDates="future"
+     *
+     * // 특정 날짜 하루 비활성화
+     * disabledDates={new Date(2025, 5, 10)}
+     *
+     * // 복합 규칙
+     * disabledDates={[
+     *   'past',
+     *   new Date(2025, 5, 3),
+     *   { start: new Date(2025, 4, 1), end: new Date(2025, 4, 5) },
+     * ]}
+     * ```
+     */
+    disabledDates?: DisabledDateRule | DisabledDateRule[];
+    /**
+     * @deprecated Use `disabledDates="past"` instead.
+     * When true, dates before today cannot be selected.
+     */
     disablePast?: boolean;
     locale?: DatePickerLocale;
     /** Override the placeholder shown when no date is selected */
@@ -348,7 +381,7 @@ interface DatePickerProps {
     showTodayLabel?: boolean;
     disabled?: boolean;
 }
-declare function DatePicker({ value, defaultValue, onChange, mode, range, defaultRange, onRangeChange, disablePast, locale, placeholder, className, yearRange, showTodayLabel, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, defaultValue, onChange, mode, range, defaultRange, onRangeChange, disabledDates, disablePast, locale, placeholder, className, yearRange, showTodayLabel, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface FieldProps {
     /** 필드 레이블 */
@@ -644,8 +677,10 @@ interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEle
     onChange: (value: string) => void;
     placeholder?: string;
     className?: string;
+    /** onChange를 지연 호출할 ms. 지정하면 내부 draft 상태로 즉시 표시하고, 입력 완료 후 지연 커밋. */
+    debounce?: number;
 }
-declare function SearchInput({ value, onChange, placeholder, className, ...props }: SearchInputProps): react_jsx_runtime.JSX.Element;
+declare function SearchInput({ value, onChange, placeholder, className, debounce: debounceMs, ...props }: SearchInputProps): react_jsx_runtime.JSX.Element;
 
 interface SelectOption {
     value: string;
@@ -1548,4 +1583,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, 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, 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, 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, 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, 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

@@ -314,6 +314,17 @@ type DateRange = {
     start?: Date;
     end?: Date;
 };
+/**
+ * A rule that disables one or more dates in the calendar:
+ * - `'past'`              — all dates strictly before today
+ * - `'future'`            — all dates strictly after today
+ * - `Date`                — a specific single day
+ * - `{ start?, end? }`    — an inclusive date range; omit either bound for an open-ended range
+ */
+type DisabledDateRule = 'past' | 'future' | Date | {
+    start?: Date;
+    end?: Date;
+};
 interface DatePickerProps {
     /** Controlled value (date / offset modes) */
     value?: Date;
@@ -333,7 +344,29 @@ interface DatePickerProps {
     defaultRange?: DateRange;
     /** Called when the selected range changes. Used when mode='range'. */
     onRangeChange?: (range: DateRange) => void;
-    /** When true, dates before today cannot be selected and prev-month nav is blocked at current month */
+    /**
+     * One or more rules that disable specific dates in the calendar.
+     *
+     * ```tsx
+     * // 오늘 이후 선택 불가
+     * disabledDates="future"
+     *
+     * // 특정 날짜 하루 비활성화
+     * disabledDates={new Date(2025, 5, 10)}
+     *
+     * // 복합 규칙
+     * disabledDates={[
+     *   'past',
+     *   new Date(2025, 5, 3),
+     *   { start: new Date(2025, 4, 1), end: new Date(2025, 4, 5) },
+     * ]}
+     * ```
+     */
+    disabledDates?: DisabledDateRule | DisabledDateRule[];
+    /**
+     * @deprecated Use `disabledDates="past"` instead.
+     * When true, dates before today cannot be selected.
+     */
     disablePast?: boolean;
     locale?: DatePickerLocale;
     /** Override the placeholder shown when no date is selected */
@@ -348,7 +381,7 @@ interface DatePickerProps {
     showTodayLabel?: boolean;
     disabled?: boolean;
 }
-declare function DatePicker({ value, defaultValue, onChange, mode, range, defaultRange, onRangeChange, disablePast, locale, placeholder, className, yearRange, showTodayLabel, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, defaultValue, onChange, mode, range, defaultRange, onRangeChange, disabledDates, disablePast, locale, placeholder, className, yearRange, showTodayLabel, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface FieldProps {
     /** 필드 레이블 */
@@ -644,8 +677,10 @@ interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEle
     onChange: (value: string) => void;
     placeholder?: string;
     className?: string;
+    /** onChange를 지연 호출할 ms. 지정하면 내부 draft 상태로 즉시 표시하고, 입력 완료 후 지연 커밋. */
+    debounce?: number;
 }
-declare function SearchInput({ value, onChange, placeholder, className, ...props }: SearchInputProps): react_jsx_runtime.JSX.Element;
+declare function SearchInput({ value, onChange, placeholder, className, debounce: debounceMs, ...props }: SearchInputProps): react_jsx_runtime.JSX.Element;
 
 interface SelectOption {
     value: string;
@@ -1548,4 +1583,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, 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, 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, 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, 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, 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

@@ -2358,12 +2358,27 @@ function diffDays(selected, today) {
     (startOfDay(selected).getTime() - startOfDay(today).getTime()) / 864e5
   );
 }
+function isDateDisabled(date, rules, today) {
+  const t = startOfDay(date).getTime();
+  const todayT = startOfDay(today).getTime();
+  return rules.some((rule) => {
+    if (rule === "past") return t < todayT;
+    if (rule === "future") return t > todayT;
+    if (rule instanceof Date) return t === startOfDay(rule).getTime();
+    const s = rule.start ? startOfDay(rule.start).getTime() : null;
+    const e = rule.end ? startOfDay(rule.end).getTime() : null;
+    if (s !== null && e !== null) return t >= s && t <= e;
+    if (s !== null) return t >= s;
+    if (e !== null) return t <= e;
+    return false;
+  });
+}
 function CalendarGrid({
   year,
   month,
   selected,
   today,
-  disablePast,
+  disabledRules,
   onSelect,
   onYearChange,
   onMonthChange,
@@ -2378,6 +2393,8 @@ function CalendarGrid({
   const config = LOCALE_CONFIG[locale];
   const todayStart = startOfDay(today);
   const selectedStart = selected ? startOfDay(selected) : null;
+  const hasPastRule = disabledRules.includes("past");
+  const hasFutureRule = disabledRules.includes("future");
   const firstDay = new Date(year, month, 1).getDay();
   const daysInMonth = new Date(year, month + 1, 0).getDate();
   const daysInPrevMonth = new Date(year, month, 0).getDate();
@@ -2418,7 +2435,10 @@ function CalendarGrid({
   }
   const prevYear = month === 0 ? year - 1 : year;
   const prevMon = month === 0 ? 11 : month - 1;
-  const isPrevDisabled = disablePast && (prevYear < today.getFullYear() || prevYear === today.getFullYear() && prevMon < today.getMonth());
+  const isPrevDisabled = hasPastRule && (prevYear < today.getFullYear() || prevYear === today.getFullYear() && prevMon < today.getMonth());
+  const nextYear = month === 11 ? year + 1 : year;
+  const nextMon = month === 11 ? 0 : month + 1;
+  const isNextDisabled = hasFutureRule && (nextYear > today.getFullYear() || nextYear === today.getFullYear() && nextMon > today.getMonth());
   const rangeStartTime = rangeStart ? startOfDay(rangeStart).getTime() : null;
   const rangeEndTime = rangeEnd ? startOfDay(rangeEnd).getTime() : null;
   const visualEndTime = rangeEndTime != null ? rangeEndTime : rangeStartTime !== null && hoverDate ? startOfDay(hoverDate).getTime() : null;
@@ -2480,7 +2500,11 @@ function CalendarGrid({
         {
           type: "button",
           onClick: nextMonth,
-          className: "flex size-8 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent active:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer",
+          disabled: isNextDisabled,
+          className: cn(
+            "flex size-8 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            isNextDisabled ? "text-muted-foreground opacity-30 cursor-not-allowed" : "text-foreground hover:bg-accent active:bg-accent cursor-pointer"
+          ),
           children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "chevron-right", className: "size-4" })
         }
       )
@@ -2502,8 +2526,7 @@ function CalendarGrid({
           const dateStart = startOfDay(date);
           const t = dateStart.getTime();
           const isToday = todayStart.getTime() === t;
-          const isPast = dateStart < todayStart;
-          const isDisabled = disablePast && isPast;
+          const isDisabled = disabledRules.length > 0 && isDateDisabled(date, disabledRules, today);
           const isRangeStart = isRangeMode && rangeStartTime !== null && t === rangeStartTime;
           const isRangeEnd = isRangeMode && rangeEndTime !== null && t === rangeEndTime;
           const isInRange = isRangeMode && rangeStartTime !== null && visualEndTime !== null && !isRangeStart && !isRangeEnd && t > Math.min(rangeStartTime, visualEndTime) && t < Math.max(rangeStartTime, visualEndTime);
@@ -2537,6 +2560,7 @@ function DatePicker({
   range,
   defaultRange,
   onRangeChange,
+  disabledDates,
   disablePast = false,
   locale = "en",
   placeholder,
@@ -2548,6 +2572,11 @@ function DatePicker({
   var _a;
   const today = React11.useMemo(() => /* @__PURE__ */ new Date(), []);
   const config = LOCALE_CONFIG[locale];
+  const disabledRules = React11.useMemo(() => {
+    const rules = disabledDates ? Array.isArray(disabledDates) ? disabledDates : [disabledDates] : [];
+    if (disablePast && !rules.includes("past")) return [...rules, "past"];
+    return rules;
+  }, [disabledDates, disablePast]);
   const [open, setOpen] = React11.useState(false);
   const [selected, setSelected] = React11.useState(defaultValue);
   const activeDate = value !== void 0 ? value : selected;
@@ -2699,7 +2728,7 @@ function DatePicker({
                 month: viewMonth,
                 selected: activeDate,
                 today,
-                disablePast,
+                disabledRules,
                 onSelect: handleSelect,
                 onYearChange: setViewYear,
                 onMonthChange: setViewMonth,
@@ -4749,19 +4778,55 @@ function SegmentedControl({
 }
 
 // src/components/ui/search-input.tsx
+var React20 = __toESM(require("react"));
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function SearchInput(_a) {
   var _b = _a, {
     value,
     onChange,
     placeholder,
-    className
+    className,
+    debounce: debounceMs
   } = _b, props = __objRest(_b, [
     "value",
     "onChange",
     "placeholder",
-    "className"
+    "className",
+    "debounce"
   ]);
+  const [draft, setDraft] = React20.useState(value);
+  const pendingRef = React20.useRef(null);
+  const latestDraftRef = React20.useRef(value);
+  const onChangeRef = React20.useRef(onChange);
+  onChangeRef.current = onChange;
+  React20.useEffect(() => {
+    if (debounceMs === void 0) return;
+    const pending = pendingRef.current;
+    if (pending !== null) {
+      if (value === pending) pendingRef.current = null;
+      else return;
+    }
+    latestDraftRef.current = value;
+    setDraft(value);
+  }, [value, debounceMs]);
+  React20.useEffect(() => {
+    if (debounceMs === void 0) return;
+    const timer = window.setTimeout(() => {
+      const next = latestDraftRef.current;
+      if (next === value) return;
+      pendingRef.current = next;
+      onChangeRef.current(next);
+    }, debounceMs);
+    return () => window.clearTimeout(timer);
+  }, [draft, debounceMs, value]);
+  const handleChange = (nextValue) => {
+    if (debounceMs !== void 0) {
+      latestDraftRef.current = nextValue;
+      setDraft(nextValue);
+    } else {
+      onChange(nextValue);
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("relative flex items-center", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Icon,
@@ -4774,8 +4839,13 @@ function SearchInput(_a) {
       "input",
       __spreadValues({
         type: "text",
-        value,
-        onChange: (e) => onChange(e.target.value),
+        value: debounceMs !== void 0 ? draft : value,
+        onChange: (e) => {
+          if (!e.nativeEvent.isComposing) handleChange(e.target.value);
+        },
+        onCompositionEnd: (e) => {
+          handleChange(e.target.value);
+        },
         placeholder,
         className: cn(
           "h-9 w-full rounded-lg border border-border bg-background pl-9 pr-3",
@@ -4788,14 +4858,14 @@ function SearchInput(_a) {
 }
 
 // src/components/ui/select.tsx
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_radix_ui13 = require("radix-ui");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function Select(props) {
   var _a, _b, _c, _d;
   const { placeholder = "\uC120\uD0DD\uD574 \uC8FC\uC138\uC694", className, disabled = false } = props;
-  const [open, setOpen] = React20.useState(false);
-  const [selected, setSelected] = React20.useState(() => {
+  const [open, setOpen] = React21.useState(false);
+  const [selected, setSelected] = React21.useState(() => {
     var _a2;
     if (props.multiple) return new Set((_a2 = props.defaultValue) != null ? _a2 : []);
     const dv = props.defaultValue;
@@ -4805,13 +4875,13 @@ function Select(props) {
   const groupsProp = props.groups;
   const valueProp = props.value;
   const { multiple } = props;
-  const groups = React20.useMemo(() => {
+  const groups = React21.useMemo(() => {
     if (groupsProp) return groupsProp;
     if (optionsProp) return [{ options: optionsProp }];
     return [];
   }, [groupsProp, optionsProp]);
-  const options = React20.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const activeSet = React20.useMemo(() => {
+  const options = React21.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const activeSet = React21.useMemo(() => {
     if (valueProp !== void 0) {
       return multiple ? new Set(valueProp) : /* @__PURE__ */ new Set([valueProp]);
     }
@@ -4945,10 +5015,10 @@ function Select(props) {
 }
 
 // src/components/ui/sheet.tsx
-var React21 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function Sheet({ open, onClose, title, description, children, footer }) {
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       if (e.key === "Escape") onClose();
@@ -4991,7 +5061,7 @@ function Sheet({ open, onClose, title, description, children, footer }) {
 }
 
 // src/components/ui/sidebar.tsx
-var React22 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 var import_lucide_react4 = require("lucide-react");
 
 // src/components/icons/custom/panel-left.tsx
@@ -5021,22 +5091,22 @@ var defaultSidebarLinkRender = ({
   onClick,
   children
 }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("a", { href, className: cn(className), style, onClick, children });
-var SidebarLinkContext = React22.createContext(
+var SidebarLinkContext = React23.createContext(
   defaultSidebarLinkRender
 );
 function SidebarLinkProvider({
   LinkComponent,
   children
 }) {
-  const linkRef = React22.useRef(LinkComponent);
-  React22.useLayoutEffect(() => {
+  const linkRef = React23.useRef(LinkComponent);
+  React23.useLayoutEffect(() => {
     linkRef.current = LinkComponent;
   });
   function sidebarLinkRender(props) {
     if (!linkRef.current) return defaultSidebarLinkRender(props);
-    return React22.createElement(linkRef.current, props);
+    return React23.createElement(linkRef.current, props);
   }
-  const [stableRender] = React22.useState(
+  const [stableRender] = React23.useState(
     () => sidebarLinkRender
   );
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SidebarLinkContext.Provider, { value: stableRender, children });
@@ -5048,7 +5118,7 @@ function SidebarLink({
   onClick,
   children
 }) {
-  const renderLink = React22.useContext(SidebarLinkContext);
+  const renderLink = React23.useContext(SidebarLinkContext);
   return renderLink({ href, className, style, onClick, children });
 }
 function Sidebar({
@@ -5067,9 +5137,9 @@ function Sidebar({
 }) {
   var _a, _b, _c;
   const isControlled = isPanelOpenProp !== void 0;
-  const [internalIsPanelOpen, setInternalIsPanelOpen] = React22.useState(true);
+  const [internalIsPanelOpen, setInternalIsPanelOpen] = React23.useState(true);
   const resolvedIsPanelOpen = isControlled ? isPanelOpenProp : internalIsPanelOpen;
-  const activeMenu = React22.useMemo(
+  const activeMenu = React23.useMemo(
     () => {
       var _a2;
       return (_a2 = menus.filter((m) => m.type !== "divider").find((m) => m.isActive)) != null ? _a2 : null;
@@ -5078,15 +5148,15 @@ function Sidebar({
   );
   const subMenus = (_a = activeMenu == null ? void 0 : activeMenu.subMenus) != null ? _a : [];
   const panelVisible = isControlled ? resolvedIsPanelOpen : resolvedIsPanelOpen && subMenus.length > 0;
-  const handleSetPanelOpen = React22.useCallback(
+  const handleSetPanelOpen = React23.useCallback(
     (open) => {
       if (!isControlled) setInternalIsPanelOpen(open);
       onPanelOpenChange == null ? void 0 : onPanelOpenChange(open);
     },
     [isControlled, onPanelOpenChange]
   );
-  const prevPanelVisibleRef = React22.useRef(null);
-  React22.useEffect(() => {
+  const prevPanelVisibleRef = React23.useRef(null);
+  React23.useEffect(() => {
     if (prevPanelVisibleRef.current !== panelVisible) {
       prevPanelVisibleRef.current = panelVisible;
       onPanelOpenChange == null ? void 0 : onPanelOpenChange(panelVisible);
@@ -5174,7 +5244,7 @@ function Sidebar({
               /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col flex-1 items-center justify-end min-h-0 min-w-0 px-4 py-3 gap-3 w-full", children: utilities == null ? void 0 : utilities.map((util) => {
                 var _a2, _b2;
                 if (util.popover) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(React22.Fragment, { children: util.popover }, util.id);
+                  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(React23.Fragment, { children: util.popover }, util.id);
                 }
                 return util.href ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   Tooltip,
@@ -5333,10 +5403,10 @@ function Skeleton(_a) {
 }
 
 // src/components/ui/slider.tsx
-var React23 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 var import_radix_ui14 = require("radix-ui");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var Slider = React23.forwardRef(
+var Slider = React24.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -5356,15 +5426,15 @@ var Slider = React23.forwardRef(
       "onValueCommit"
     ]);
     var _a2;
-    const [displayValues, setDisplayValues] = React23.useState(
+    const [displayValues, setDisplayValues] = React24.useState(
       (_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : [0]
     );
-    const [visibleSet, setVisibleSet] = React23.useState(/* @__PURE__ */ new Set());
-    const hideTimers = React23.useRef(/* @__PURE__ */ new Map());
-    React23.useEffect(() => {
+    const [visibleSet, setVisibleSet] = React24.useState(/* @__PURE__ */ new Set());
+    const hideTimers = React24.useRef(/* @__PURE__ */ new Map());
+    React24.useEffect(() => {
       if (valueProp !== void 0) setDisplayValues(valueProp);
     }, [valueProp]);
-    React23.useEffect(
+    React24.useEffect(
       () => () => hideTimers.current.forEach((t) => clearTimeout(t)),
       []
     );
@@ -5384,7 +5454,7 @@ var Slider = React23.forwardRef(
       }, delay);
       hideTimers.current.set(i, t);
     };
-    const prevValuesRef = React23.useRef(displayValues);
+    const prevValuesRef = React24.useRef(displayValues);
     const handleValueChange = (newVals) => {
       newVals.forEach((v, i) => {
         if (v !== prevValuesRef.current[i]) showThumb(i);
@@ -5866,17 +5936,17 @@ function SwitchField(_a) {
 }
 
 // src/components/ui/table.tsx
-var React26 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_react_table = require("@tanstack/react-table");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 function EllipsisCell({ rendered, tooltip }) {
-  const [el, setEl] = React26.useState(null);
-  const [overflowing, setOverflowing] = React26.useState(false);
+  const [el, setEl] = React27.useState(null);
+  const [overflowing, setOverflowing] = React27.useState(false);
   const isPrimitiveText = typeof rendered === "string" || typeof rendered === "number";
-  const refCallback = React26.useCallback((node) => {
+  const refCallback = React27.useCallback((node) => {
     setEl(node);
   }, []);
-  React26.useLayoutEffect(() => {
+  React27.useLayoutEffect(() => {
     if (!el) return;
     const check = () => {
       const selfOverflow = el.scrollWidth > el.clientWidth;
@@ -6055,11 +6125,11 @@ function Table({
   className
 }) {
   var _a, _b, _c;
-  const getRowKey = React26.useCallback(
+  const getRowKey = React27.useCallback(
     (row) => typeof rowKey === "function" ? rowKey(row) : String(row[rowKey]),
     [rowKey]
   );
-  const [internalRowSelection, setInternalRowSelection] = React26.useState({});
+  const [internalRowSelection, setInternalRowSelection] = React27.useState({});
   const isControlledSelection = rowSelectionProp !== void 0;
   const effectiveRowSelection = isControlledSelection ? rowSelectionProp : internalRowSelection;
   const handleRowSelectionChange = (updater) => {
@@ -6070,7 +6140,7 @@ function Table({
     }
     onRowSelectionChange == null ? void 0 : onRowSelectionChange(updater);
   };
-  const [sorting, setSorting] = React26.useState(
+  const [sorting, setSorting] = React27.useState(
     () => {
       var _a2;
       return (_a2 = defaultSorting == null ? void 0 : defaultSorting.map(({ key, desc }) => ({
@@ -6079,7 +6149,7 @@ function Table({
       }))) != null ? _a2 : [];
     }
   );
-  const handleSortingChange = React26.useCallback(
+  const handleSortingChange = React27.useCallback(
     (updater) => {
       setSorting((prev) => {
         const next = typeof updater === "function" ? updater(prev) : updater;
@@ -6089,11 +6159,11 @@ function Table({
     },
     [onSortingChange]
   );
-  const [internalPagination, setInternalPagination] = React26.useState({
+  const [internalPagination, setInternalPagination] = React27.useState({
     pageIndex: ((_a = pagination == null ? void 0 : pagination.currentPage) != null ? _a : 1) - 1,
     pageSize: (_b = pagination == null ? void 0 : pagination.pageSize) != null ? _b : 10
   });
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if ((pagination == null ? void 0 : pagination.currentPage) !== void 0) {
       setInternalPagination((prev) => __spreadProps(__spreadValues({}, prev), {
         pageIndex: pagination.currentPage - 1
@@ -6107,7 +6177,7 @@ function Table({
     (_a2 = pagination == null ? void 0 : pagination.onPageChange) == null ? void 0 : _a2.call(pagination, next.pageIndex + 1);
   };
   const isSelectionActive = enableRowSelection === true;
-  const selectionColumn = React26.useMemo(
+  const selectionColumn = React27.useMemo(
     () => ({
       id: "__select__",
       header: "__select_header__",
@@ -6125,7 +6195,7 @@ function Table({
     }),
     []
   );
-  const rowActionsColumn = React26.useMemo(
+  const rowActionsColumn = React27.useMemo(
     () => ({
       id: "__row_actions__",
       header: "",
@@ -6134,7 +6204,7 @@ function Table({
     }),
     [rowActions]
   );
-  const tanstackColumns = React26.useMemo(
+  const tanstackColumns = React27.useMemo(
     () => [
       ...isSelectionActive ? [selectionColumn] : [],
       ...columns.map((col) => {
@@ -6173,7 +6243,7 @@ function Table({
   }), (pagination == null ? void 0 : pagination.rowCount) !== void 0 && {
     rowCount: pagination.rowCount
   }));
-  const colMap = React26.useMemo(
+  const colMap = React27.useMemo(
     () => Object.fromEntries(
       columns.map((c) => {
         var _a2, _b2, _c2, _d;
@@ -6353,12 +6423,12 @@ function Table({
 }
 
 // src/components/ui/user-message-bubble.tsx
-var React27 = __toESM(require("react"));
+var React28 = __toESM(require("react"));
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function UserMessageBubble({ content }) {
-  const textRef = React27.useRef(null);
-  const [multiLine, setMultiLine] = React27.useState(false);
-  React27.useEffect(() => {
+  const textRef = React28.useRef(null);
+  const [multiLine, setMultiLine] = React28.useState(false);
+  React28.useEffect(() => {
     const el = textRef.current;
     if (!el) return;
     const check = () => setMultiLine(el.offsetHeight > 28);