@mondrianai/runyourai-design-system 0.0.14 → 0.0.15

package/dist/index.d.mts

@@ -309,28 +309,35 @@ interface ComboboxProps {
 declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, showSearch, footer, className, disabled, }: ComboboxProps): react_jsx_runtime.JSX.Element;
 
 type DatePickerLocale = 'ko' | 'en' | 'jp';
-type DatePickerMode = 'date' | 'offset';
+type DatePickerMode = 'date' | 'offset' | 'range';
+type DateRange = {
+    start?: Date;
+    end?: Date;
+};
 interface DatePickerProps {
-    /** Controlled value */
+    /** Controlled value (date / offset modes) */
     value?: Date;
-    /** Uncontrolled default value */
+    /** Uncontrolled default value (date / offset modes) */
     defaultValue?: Date;
-    /** Called when user selects a date */
+    /** Called when user selects a date (date / offset modes) */
     onChange?: (date: Date | undefined) => void;
     /**
-     * 'date' — trigger shows formatted date (e.g. "June 01, 2025")
+     * 'date'   — trigger shows formatted date (e.g. "June 01, 2025")
      * 'offset' — trigger shows days-from-today (e.g. "In 2 days")
+     * 'range'  — user interactively picks start + end; use range / onRangeChange
      */
     mode?: DatePickerMode;
+    /** Controlled range value. Used when mode='range'. */
+    range?: DateRange;
+    /** Uncontrolled default range. Used when mode='range'. */
+    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 */
     disablePast?: boolean;
     locale?: DatePickerLocale;
     /** Override the placeholder shown when no date is selected */
     placeholder?: string;
-    /**
-     * Receives the selected date and returns a helper string rendered below the trigger.
-     * Only shown when mode='offset' and a date is selected.
-     */
     className?: string;
     /**
      * [minYear, maxYear] for the year dropdown.
@@ -341,7 +348,7 @@ interface DatePickerProps {
     showTodayLabel?: boolean;
     disabled?: boolean;
 }
-declare function DatePicker({ value, defaultValue, onChange, mode, disablePast, locale, placeholder, className, yearRange, showTodayLabel, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, defaultValue, onChange, mode, range, defaultRange, onRangeChange, disablePast, locale, placeholder, className, yearRange, showTodayLabel, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface FieldProps {
     /** 필드 레이블 */
@@ -707,6 +714,8 @@ type SidebarSubMenuItem = {
     titleBadge?: string | number;
     onClick?: () => void;
     isExternal?: boolean;
+    /** 아이템 행 우측에 렌더링되는 커스텀 콘텐츠. 링크 외부에 위치하므로 버튼 등 인터랙티브 요소를 포함할 수 있습니다. */
+    rightContent?: React$1.ReactNode;
 };
 type SidebarMainMenuItem = {
     type?: 'item';
@@ -744,7 +753,7 @@ declare function SidebarLink({ href, className, style, onClick, children, }: {
     onClick?: () => void;
     children: React$1.ReactNode;
 }): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
-declare function Sidebar({ logo, menus, avatar, utilities, panelTopContent, panelCenterContent, panelBottomContent, className, LinkComponent, }: {
+declare function Sidebar({ logo, menus, avatar, utilities, panelTopContent, panelCenterContent, panelBottomContent, className, LinkComponent, isPanelOpen: isPanelOpenProp, onPanelOpenChange, mainMenuIconSize, }: {
     logo: React$1.ReactNode;
     menus: SidebarMainMenuItem[];
     avatar: React$1.ReactNode;
@@ -754,6 +763,20 @@ declare function Sidebar({ logo, menus, avatar, utilities, panelTopContent, pane
     panelBottomContent?: React$1.ReactNode;
     className?: string;
     LinkComponent: SidebarLinkComponent;
+    /**
+     * 서브메뉴 패널의 열림 상태를 외부에서 제어합니다.
+     * - `true` / `false`: controlled 모드 — subMenus 배열 길이와 관계없이 이 값을 따릅니다.
+     * - `undefined` (기본값): uncontrolled 모드 — activeMenu의 subMenus가 있을 때 자동으로 열립니다.
+     */
+    isPanelOpen?: boolean;
+    /** 패널 열림 상태가 변경될 때 호출됩니다. controlled / uncontrolled 모두 동작합니다. */
+    onPanelOpenChange?: (isOpen: boolean) => void;
+    /**
+     * 좌측 메인 메뉴(내비게이터) 아이콘 컨테이너 크기.
+     * - `'md'` (기본값): 32px
+     * - `'lg'`: 40px
+     */
+    mainMenuIconSize?: 'md' | 'lg';
 }): react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
@@ -1525,4 +1548,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, 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, 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

@@ -309,28 +309,35 @@ interface ComboboxProps {
 declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, showSearch, footer, className, disabled, }: ComboboxProps): react_jsx_runtime.JSX.Element;
 
 type DatePickerLocale = 'ko' | 'en' | 'jp';
-type DatePickerMode = 'date' | 'offset';
+type DatePickerMode = 'date' | 'offset' | 'range';
+type DateRange = {
+    start?: Date;
+    end?: Date;
+};
 interface DatePickerProps {
-    /** Controlled value */
+    /** Controlled value (date / offset modes) */
     value?: Date;
-    /** Uncontrolled default value */
+    /** Uncontrolled default value (date / offset modes) */
     defaultValue?: Date;
-    /** Called when user selects a date */
+    /** Called when user selects a date (date / offset modes) */
     onChange?: (date: Date | undefined) => void;
     /**
-     * 'date' — trigger shows formatted date (e.g. "June 01, 2025")
+     * 'date'   — trigger shows formatted date (e.g. "June 01, 2025")
      * 'offset' — trigger shows days-from-today (e.g. "In 2 days")
+     * 'range'  — user interactively picks start + end; use range / onRangeChange
      */
     mode?: DatePickerMode;
+    /** Controlled range value. Used when mode='range'. */
+    range?: DateRange;
+    /** Uncontrolled default range. Used when mode='range'. */
+    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 */
     disablePast?: boolean;
     locale?: DatePickerLocale;
     /** Override the placeholder shown when no date is selected */
     placeholder?: string;
-    /**
-     * Receives the selected date and returns a helper string rendered below the trigger.
-     * Only shown when mode='offset' and a date is selected.
-     */
     className?: string;
     /**
      * [minYear, maxYear] for the year dropdown.
@@ -341,7 +348,7 @@ interface DatePickerProps {
     showTodayLabel?: boolean;
     disabled?: boolean;
 }
-declare function DatePicker({ value, defaultValue, onChange, mode, disablePast, locale, placeholder, className, yearRange, showTodayLabel, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, defaultValue, onChange, mode, range, defaultRange, onRangeChange, disablePast, locale, placeholder, className, yearRange, showTodayLabel, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 interface FieldProps {
     /** 필드 레이블 */
@@ -707,6 +714,8 @@ type SidebarSubMenuItem = {
     titleBadge?: string | number;
     onClick?: () => void;
     isExternal?: boolean;
+    /** 아이템 행 우측에 렌더링되는 커스텀 콘텐츠. 링크 외부에 위치하므로 버튼 등 인터랙티브 요소를 포함할 수 있습니다. */
+    rightContent?: React$1.ReactNode;
 };
 type SidebarMainMenuItem = {
     type?: 'item';
@@ -744,7 +753,7 @@ declare function SidebarLink({ href, className, style, onClick, children, }: {
     onClick?: () => void;
     children: React$1.ReactNode;
 }): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
-declare function Sidebar({ logo, menus, avatar, utilities, panelTopContent, panelCenterContent, panelBottomContent, className, LinkComponent, }: {
+declare function Sidebar({ logo, menus, avatar, utilities, panelTopContent, panelCenterContent, panelBottomContent, className, LinkComponent, isPanelOpen: isPanelOpenProp, onPanelOpenChange, mainMenuIconSize, }: {
     logo: React$1.ReactNode;
     menus: SidebarMainMenuItem[];
     avatar: React$1.ReactNode;
@@ -754,6 +763,20 @@ declare function Sidebar({ logo, menus, avatar, utilities, panelTopContent, pane
     panelBottomContent?: React$1.ReactNode;
     className?: string;
     LinkComponent: SidebarLinkComponent;
+    /**
+     * 서브메뉴 패널의 열림 상태를 외부에서 제어합니다.
+     * - `true` / `false`: controlled 모드 — subMenus 배열 길이와 관계없이 이 값을 따릅니다.
+     * - `undefined` (기본값): uncontrolled 모드 — activeMenu의 subMenus가 있을 때 자동으로 열립니다.
+     */
+    isPanelOpen?: boolean;
+    /** 패널 열림 상태가 변경될 때 호출됩니다. controlled / uncontrolled 모두 동작합니다. */
+    onPanelOpenChange?: (isOpen: boolean) => void;
+    /**
+     * 좌측 메인 메뉴(내비게이터) 아이콘 컨테이너 크기.
+     * - `'md'` (기본값): 32px
+     * - `'lg'`: 40px
+     */
+    mainMenuIconSize?: 'md' | 'lg';
 }): react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
@@ -1525,4 +1548,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, 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, 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

@@ -2322,7 +2322,8 @@ var LOCALE_CONFIG = {
       if (days === 1) return "In 1 day";
       return `In ${days} days`;
     },
-    defaultPlaceholder: "Select a date"
+    defaultPlaceholder: "Select a date",
+    defaultRangePlaceholder: "Select date range"
   },
   ko: {
     dayHeaders: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
@@ -2333,7 +2334,8 @@ var LOCALE_CONFIG = {
       if (days === 0) return "\uC624\uB298";
       return `${days}\uC77C \uD6C4`;
     },
-    defaultPlaceholder: "\uB0A0\uC9DC \uC120\uD0DD"
+    defaultPlaceholder: "\uB0A0\uC9DC \uC120\uD0DD",
+    defaultRangePlaceholder: "\uB0A0\uC9DC \uBC94\uC704 \uC120\uD0DD"
   },
   jp: {
     dayHeaders: ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"],
@@ -2344,7 +2346,8 @@ var LOCALE_CONFIG = {
       if (days === 0) return "\u4ECA\u65E5";
       return `${days}\u65E5\u5F8C`;
     },
-    defaultPlaceholder: "\u65E5\u4ED8\u3092\u9078\u629E"
+    defaultPlaceholder: "\u65E5\u4ED8\u3092\u9078\u629E",
+    defaultRangePlaceholder: "\u671F\u9593\u3092\u9078\u629E"
   }
 };
 function startOfDay(d) {
@@ -2365,7 +2368,12 @@ function CalendarGrid({
   onYearChange,
   onMonthChange,
   locale,
-  yearRange
+  yearRange,
+  isRangeMode = false,
+  rangeStart,
+  rangeEnd,
+  hoverDate,
+  onHover
 }) {
   const config = LOCALE_CONFIG[locale];
   const todayStart = startOfDay(today);
@@ -2411,6 +2419,9 @@ 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 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;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "px-5 pt-3 pb-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2482,28 +2493,40 @@ function CalendarGrid({
       },
       d
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-7 gap-1", children: cells.map(({ day, currentMonth, date }) => {
-      const dateStart = startOfDay(date);
-      const isSelected = (selectedStart == null ? void 0 : selectedStart.getTime()) === dateStart.getTime();
-      const isToday = todayStart.getTime() === dateStart.getTime();
-      const isPast = dateStart < todayStart;
-      const isDisabled = disablePast && isPast;
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        "button",
-        {
-          type: "button",
-          disabled: isDisabled,
-          onClick: () => onSelect(date),
-          className: cn(
-            "flex aspect-square w-full items-center justify-center rounded-lg text-sm leading-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            isSelected ? "bg-foreground font-normal text-background hover:bg-foreground active:bg-foreground" : isDisabled ? "cursor-not-allowed text-foreground opacity-50" : !currentMonth ? "cursor-pointer text-foreground opacity-50 hover:bg-accent active:bg-accent" : "cursor-pointer text-foreground hover:bg-accent active:bg-accent",
-            isToday && !isSelected && "border border-border"
-          ),
-          children: day
-        },
-        date.toISOString()
-      );
-    }) })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      {
+        className: "grid grid-cols-7 gap-1",
+        onMouseLeave: () => onHover == null ? void 0 : onHover(void 0),
+        children: cells.map(({ day, currentMonth, date }) => {
+          const dateStart = startOfDay(date);
+          const t = dateStart.getTime();
+          const isToday = todayStart.getTime() === t;
+          const isPast = dateStart < todayStart;
+          const isDisabled = disablePast && isPast;
+          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);
+          const isSelected = isRangeMode ? isRangeStart || isRangeEnd : (selectedStart == null ? void 0 : selectedStart.getTime()) === t;
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "button",
+            {
+              type: "button",
+              disabled: isDisabled,
+              onClick: () => onSelect(date),
+              onMouseEnter: () => onHover == null ? void 0 : onHover(date),
+              className: cn(
+                "flex aspect-square w-full items-center justify-center rounded-lg text-sm leading-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                isSelected ? "bg-foreground font-normal text-background hover:bg-foreground active:bg-foreground cursor-pointer" : isDisabled ? "cursor-not-allowed text-foreground opacity-50" : isInRange ? "bg-accent cursor-pointer text-foreground" : !currentMonth ? "cursor-pointer text-foreground opacity-50 hover:bg-accent active:bg-accent" : "cursor-pointer text-foreground hover:bg-accent active:bg-accent",
+                isToday && !isSelected && !isInRange && "border border-border"
+              ),
+              children: day
+            },
+            date.toISOString()
+          );
+        })
+      }
+    )
   ] });
 }
 function DatePicker({
@@ -2511,6 +2534,9 @@ function DatePicker({
   defaultValue,
   onChange,
   mode = "date",
+  range,
+  defaultRange,
+  onRangeChange,
   disablePast = false,
   locale = "en",
   placeholder,
@@ -2519,43 +2545,90 @@ function DatePicker({
   showTodayLabel = false,
   disabled = false
 }) {
+  var _a;
   const today = React11.useMemo(() => /* @__PURE__ */ new Date(), []);
   const config = LOCALE_CONFIG[locale];
   const [open, setOpen] = React11.useState(false);
-  const [selected, setSelected] = React11.useState(
-    defaultValue
-  );
+  const [selected, setSelected] = React11.useState(defaultValue);
   const activeDate = value !== void 0 ? value : selected;
-  const [viewYear, setViewYear] = React11.useState(
-    () => (activeDate != null ? activeDate : today).getFullYear()
-  );
-  const [viewMonth, setViewMonth] = React11.useState(
-    () => (activeDate != null ? activeDate : today).getMonth()
-  );
+  const [internalRange, setInternalRange] = React11.useState(
+    defaultRange != null ? defaultRange : {}
+  );
+  const activeRange = range !== void 0 ? range : internalRange;
+  const [pickingStage, setPickingStage] = React11.useState("start");
+  const [hoverDate, setHoverDate] = React11.useState();
+  const initialViewDate = mode === "range" ? (_a = activeRange.start) != null ? _a : today : activeDate != null ? activeDate : today;
+  const [viewYear, setViewYear] = React11.useState(() => initialViewDate.getFullYear());
+  const [viewMonth, setViewMonth] = React11.useState(() => initialViewDate.getMonth());
   const activeDateRef = React11.useRef(activeDate);
   activeDateRef.current = activeDate;
+  const activeRangeRef = React11.useRef(activeRange);
+  activeRangeRef.current = activeRange;
   const todayRef = React11.useRef(today);
   todayRef.current = today;
+  const modeRef = React11.useRef(mode);
+  modeRef.current = mode;
   React11.useEffect(() => {
-    var _a;
-    if (open) {
-      const d = (_a = activeDateRef.current) != null ? _a : todayRef.current;
-      setViewYear(d.getFullYear());
-      setViewMonth(d.getMonth());
+    var _a2, _b;
+    if (!open) {
+      setHoverDate(void 0);
+      setPickingStage("start");
+      return;
     }
+    const currentMode = modeRef.current;
+    const d = currentMode === "range" ? (_a2 = activeRangeRef.current.start) != null ? _a2 : todayRef.current : (_b = activeDateRef.current) != null ? _b : todayRef.current;
+    setViewYear(d.getFullYear());
+    setViewMonth(d.getMonth());
   }, [open]);
   const effectiveYearRange = React11.useMemo(
     () => yearRange != null ? yearRange : [today.getFullYear() - 10, today.getFullYear() + 10],
     [yearRange, today]
   );
   function handleSelect(date) {
-    if (value === void 0) setSelected(date);
-    onChange == null ? void 0 : onChange(date);
-    setOpen(false);
+    if (mode === "range") {
+      if (pickingStage === "start") {
+        const newRange = { start: date, end: void 0 };
+        if (range === void 0) setInternalRange(newRange);
+        onRangeChange == null ? void 0 : onRangeChange(newRange);
+        setPickingStage("end");
+      } else {
+        const existingStart = activeRange.start;
+        let start;
+        let end;
+        if (existingStart && startOfDay(date) < startOfDay(existingStart)) {
+          start = date;
+          end = existingStart;
+        } else {
+          start = existingStart;
+          end = date;
+        }
+        const newRange = { start, end };
+        if (range === void 0) setInternalRange(newRange);
+        onRangeChange == null ? void 0 : onRangeChange(newRange);
+        setPickingStage("start");
+        setOpen(false);
+      }
+    } else {
+      if (value === void 0) setSelected(date);
+      onChange == null ? void 0 : onChange(date);
+      setOpen(false);
+    }
   }
   let triggerText;
   let showCalendarIcon;
-  if (!activeDate) {
+  if (mode === "range") {
+    const { start, end } = activeRange;
+    if (!start) {
+      triggerText = placeholder != null ? placeholder : config.defaultRangePlaceholder;
+      showCalendarIcon = false;
+    } else if (!end) {
+      triggerText = `${config.formatTriggerDate(start)} \u2192`;
+      showCalendarIcon = true;
+    } else {
+      triggerText = `${config.formatTriggerDate(start)} \u2192 ${config.formatTriggerDate(end)}`;
+      showCalendarIcon = true;
+    }
+  } else if (!activeDate) {
     triggerText = placeholder != null ? placeholder : config.defaultPlaceholder;
     showCalendarIcon = false;
   } else if (mode === "offset") {
@@ -2583,7 +2656,7 @@ function DatePicker({
               "flex h-9 w-full items-center justify-between rounded-xl border border-border bg-background px-4",
               "text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               disabled ? "bg-muted opacity-60 cursor-not-allowed" : "hover:bg-accent cursor-pointer",
-              !activeDate && "text-muted-foreground"
+              mode === "range" ? !activeRange.start && "text-muted-foreground" : !activeDate && "text-muted-foreground"
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-left", children: triggerText }),
@@ -2611,7 +2684,6 @@ function DatePicker({
           {
             align: "start",
             sideOffset: 4,
-            style: { minWidth: "var(--radix-popover-trigger-width)" },
             className: cn(
               "z-50 w-64 rounded-2xl border border-border bg-background",
               "shadow-dropdown",
@@ -2632,7 +2704,12 @@ function DatePicker({
                 onYearChange: setViewYear,
                 onMonthChange: setViewMonth,
                 locale,
-                yearRange: effectiveYearRange
+                yearRange: effectiveYearRange,
+                isRangeMode: mode === "range",
+                rangeStart: activeRange.start,
+                rangeEnd: activeRange.end,
+                hoverDate: mode === "range" && pickingStage === "end" ? hoverDate : void 0,
+                onHover: mode === "range" ? setHoverDate : void 0
               }
             )
           }
@@ -4983,10 +5060,15 @@ function Sidebar({
   panelCenterContent,
   panelBottomContent,
   className,
-  LinkComponent
+  LinkComponent,
+  isPanelOpen: isPanelOpenProp,
+  onPanelOpenChange,
+  mainMenuIconSize = "md"
 }) {
   var _a, _b, _c;
-  const [isPanelOpen, setIsPanelOpen] = React22.useState(true);
+  const isControlled = isPanelOpenProp !== void 0;
+  const [internalIsPanelOpen, setInternalIsPanelOpen] = React22.useState(true);
+  const resolvedIsPanelOpen = isControlled ? isPanelOpenProp : internalIsPanelOpen;
   const activeMenu = React22.useMemo(
     () => {
       var _a2;
@@ -4995,12 +5077,28 @@ function Sidebar({
     [menus]
   );
   const subMenus = (_a = activeMenu == null ? void 0 : activeMenu.subMenus) != null ? _a : [];
+  const panelVisible = isControlled ? resolvedIsPanelOpen : resolvedIsPanelOpen && subMenus.length > 0;
+  const handleSetPanelOpen = React22.useCallback(
+    (open) => {
+      if (!isControlled) setInternalIsPanelOpen(open);
+      onPanelOpenChange == null ? void 0 : onPanelOpenChange(open);
+    },
+    [isControlled, onPanelOpenChange]
+  );
+  const prevPanelVisibleRef = React22.useRef(null);
+  React22.useEffect(() => {
+    if (prevPanelVisibleRef.current !== panelVisible) {
+      prevPanelVisibleRef.current = panelVisible;
+      onPanelOpenChange == null ? void 0 : onPanelOpenChange(panelVisible);
+    }
+  }, [panelVisible, onPanelOpenChange]);
+  const iconContainerClass = mainMenuIconSize === "lg" ? "size-10" : "size-8";
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SidebarLinkProvider, { LinkComponent, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "aside",
     {
       className: cn(
         "flex h-full bg-background shrink-0 transition-[width]",
-        isPanelOpen && subMenus.length > 0 ? "w-70" : "w-17",
+        panelVisible ? "w-70" : "w-17",
         className
       ),
       children: [
@@ -5040,8 +5138,13 @@ function Sidebar({
                             href: item.href,
                             onClick: () => {
                               var _a2;
-                              const hasSubMenus = item.subMenus && item.subMenus.length > 0;
-                              if (hasSubMenus && !isPanelOpen) setIsPanelOpen(true);
+                              if (!isControlled) {
+                                const hasSubMenus = item.subMenus && item.subMenus.length > 0;
+                                if (hasSubMenus && !internalIsPanelOpen) {
+                                  setInternalIsPanelOpen(true);
+                                  onPanelOpenChange == null ? void 0 : onPanelOpenChange(true);
+                                }
+                              }
                               (_a2 = item.onClick) == null ? void 0 : _a2.call(item);
                             },
                             className: "flex flex-col items-center cursor-pointer",
@@ -5051,7 +5154,8 @@ function Sidebar({
                                 "div",
                                 {
                                   className: cn(
-                                    "relative flex items-center justify-center rounded-md size-8 transition-colors",
+                                    "relative flex items-center justify-center rounded-md transition-colors",
+                                    iconContainerClass,
                                     item.isActive ? "bg-accent" : "hover:bg-sidebar-accent"
                                   ),
                                   children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex items-center justify-center size-5 shrink-0 [&_svg]:size-full", children: item.icon })
@@ -5125,7 +5229,7 @@ function Sidebar({
           {
             className: cn(
               "flex flex-col flex-1 h-full min-h-0 min-w-0",
-              (!isPanelOpen || !subMenus.length) && "hidden"
+              !panelVisible && "hidden"
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col items-start justify-center p-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
@@ -5140,7 +5244,7 @@ function Sidebar({
                       {
                         type: "button",
                         "aria-label": "\uD328\uB110 \uB2EB\uAE30",
-                        onClick: () => setIsPanelOpen(false),
+                        onClick: () => handleSetPanelOpen(false),
                         className: "flex items-center justify-center p-2 rounded-lg text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer",
                         children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelLeftIcon, { className: "size-4" })
                       }
@@ -5149,23 +5253,29 @@ function Sidebar({
                 }
               ) }) }),
               /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col p-2 shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col gap-0.5", children: subMenus.map((item) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                subMenus.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col p-2 shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col gap-0.5", children: subMenus.map((item) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                   "div",
                   {
-                    className: cn("rounded-md", item.isActive && "bg-accent"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-                      SidebarLink,
-                      {
-                        href: item.href,
-                        onClick: item.onClick,
-                        className: "flex gap-2 h-8 items-center p-2 rounded-md hover:bg-sidebar-accent transition-colors",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex items-center justify-center size-4 shrink-0 [&_svg]:size-full", children: item.icon }),
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex-1 min-w-0 text-sm font-normal leading-5 tracking-tight overflow-hidden text-ellipsis whitespace-nowrap text-foreground", children: item.title }),
-                          item.isExternal && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex items-center justify-center shrink-0 text-[#8C8C8C]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react4.ArrowUpRight, { size: 12, strokeWidth: 1.5 }) })
-                        ]
-                      }
-                    )
+                    className: cn(
+                      "group flex items-center rounded-md transition-colors",
+                      item.isActive ? "bg-accent" : "hover:bg-sidebar-accent"
+                    ),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                        SidebarLink,
+                        {
+                          href: item.href,
+                          onClick: item.onClick,
+                          className: "flex gap-2 flex-1 h-8 items-center px-2 min-w-0",
+                          children: [
+                            item.icon && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex items-center justify-center size-4 shrink-0 [&_svg]:size-full", children: item.icon }),
+                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex-1 min-w-0 text-sm font-normal leading-5 tracking-tight overflow-hidden text-ellipsis whitespace-nowrap text-foreground", children: item.title }),
+                            item.isExternal && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "flex items-center justify-center shrink-0 text-[#8C8C8C]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react4.ArrowUpRight, { size: 12, strokeWidth: 1.5 }) })
+                          ]
+                        }
+                      ),
+                      item.rightContent && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "shrink-0 pr-1", children: item.rightContent })
+                    ]
                   },
                   item.id
                 )) }) }),