@designbasekorea/ui-wc 0.8.11 → 0.8.12

package/dist/react/index.d.ts

@@ -1,6 +1,102 @@
 import * as react from 'react';
 import react__default, { ReactNode } from 'react';
-import { BadgeVariant, BadgeType, TIME_PICKER_FORMATS, DOWNLOAD_PROGRESS_STATUSES, DOWNLOAD_PROGRESS_POSITIONS, OTP_INPUT_SIZES, PHONE_VERIFY_SIZES, EMAIL_VERIFY_SIZES, TWO_FACTOR_SIZES, AI_GLOW_STATES, AI_GLOW_VARIANTS, AI_GLOW_SIZES, CHAT_ORB_SIZES, CHAT_ORB_VARIANTS, CHAT_ORB_STATES, CHAT_ORB_THEMES, CHAT_MESSAGE_ROLES, CHAT_WIDGET_VIEWS, CHAT_WIDGET_POSITIONS, ToggleVariant } from '@designbasekorea/ui-contracts';
+import { NavigationRailLabelDisplay, BadgeVariant, BadgeType, TIME_PICKER_FORMATS, DOWNLOAD_PROGRESS_STATUSES, DOWNLOAD_PROGRESS_POSITIONS, OTP_INPUT_SIZES, PHONE_VERIFY_SIZES, EMAIL_VERIFY_SIZES, TWO_FACTOR_SIZES, AI_GLOW_STATES, AI_GLOW_VARIANTS, AI_GLOW_SIZES, CHAT_ORB_SIZES, CHAT_ORB_VARIANTS, CHAT_ORB_STATES, CHAT_ORB_THEMES, CHAT_MESSAGE_ROLES, CHAT_WIDGET_VIEWS, CHAT_WIDGET_POSITIONS, ToggleVariant } from '@designbasekorea/ui-contracts';
+
+declare class DbTooltip extends HTMLElement {
+    static get observedAttributes(): string[];
+    private tooltipId;
+    private trigger?;
+    private tooltip?;
+    private contentEl?;
+    private arrow?;
+    private visible;
+    private showTimer?;
+    private hideTimer?;
+    private repositionRaf?;
+    private enterRaf?;
+    private removalTimer?;
+    get content(): string;
+    set content(value: string);
+    get position(): string;
+    set position(value: string);
+    get size(): string;
+    set size(value: string);
+    get variant(): string;
+    set variant(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get alwaysShow(): boolean;
+    set alwaysShow(value: boolean);
+    get delay(): number;
+    get hideDelay(): number;
+    get maxWidth(): number;
+    get showArrow(): boolean;
+    private childObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private clearTimers;
+    private groupOf;
+    private resolvedPosition;
+    private collectTriggerChildren;
+    private ensureTrigger;
+    private mountTriggerChildren;
+    private render;
+    private ensureTooltip;
+    private syncTooltipClasses;
+    private calculatePosition;
+    private setVisible;
+    private hideTooltip;
+    private removeTooltip;
+    private handleShow;
+    private handleHide;
+    private handleKeyDown;
+    private handleReposition;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-tooltip': DbTooltip;
+    }
+}
+
+interface DbNavigationRailItem {
+    id: string;
+    label: string;
+    icon: string;
+    activeIcon?: string;
+    href?: string;
+    disabled?: boolean;
+    /** true = 알림 점, 문자열/숫자 = 배지 */
+    badge?: boolean | string | number;
+    badgeColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+    dividerBefore?: boolean;
+}
+/** Selection is controlled by active-item-id; clicks emit db-item-click. */
+declare class DbNavigationRail extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+    private parseItems;
+    get items(): DbNavigationRailItem[];
+    set items(value: DbNavigationRailItem[] | string);
+    get bottomItems(): DbNavigationRailItem[];
+    set bottomItems(value: DbNavigationRailItem[] | string);
+    get activeItemId(): string;
+    set activeItemId(value: string);
+    get labelDisplay(): NavigationRailLabelDisplay;
+    set labelDisplay(value: NavigationRailLabelDisplay);
+    get size(): 's' | 'm' | 'l';
+    set size(value: 's' | 'm' | 'l');
+    get fullHeight(): boolean;
+    set fullHeight(value: boolean);
+    private renderItems;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-navigation-rail': DbNavigationRail;
+    }
+}
 
 /**
  * Light DOM custom element for the canonical web Button.
@@ -527,63 +623,6 @@ declare global {
     }
 }
 
-declare class DbTooltip extends HTMLElement {
-    static get observedAttributes(): string[];
-    private tooltipId;
-    private trigger?;
-    private tooltip?;
-    private contentEl?;
-    private arrow?;
-    private visible;
-    private showTimer?;
-    private hideTimer?;
-    private repositionRaf?;
-    private enterRaf?;
-    private removalTimer?;
-    get content(): string;
-    set content(value: string);
-    get position(): string;
-    set position(value: string);
-    get size(): string;
-    set size(value: string);
-    get variant(): string;
-    set variant(value: string);
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    get alwaysShow(): boolean;
-    set alwaysShow(value: boolean);
-    get delay(): number;
-    get hideDelay(): number;
-    get maxWidth(): number;
-    get showArrow(): boolean;
-    private childObserver?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(): void;
-    private clearTimers;
-    private groupOf;
-    private resolvedPosition;
-    private collectTriggerChildren;
-    private ensureTrigger;
-    private mountTriggerChildren;
-    private render;
-    private ensureTooltip;
-    private syncTooltipClasses;
-    private calculatePosition;
-    private setVisible;
-    private hideTooltip;
-    private removeTooltip;
-    private handleShow;
-    private handleHide;
-    private handleKeyDown;
-    private handleReposition;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'db-tooltip': DbTooltip;
-    }
-}
-
 interface AccordionItemConfig$1 {
     id?: string;
     title: string;
@@ -5109,7 +5148,7 @@ declare global {
     }
 }
 
-type DbIconName = 'arrow-bar-left' | 'arrow-bar-right' | 'award' | 'apple' | 'play-store' | 'arrow-right' | 'star' | 'star-filled' | 'star-half' | 'trending-up' | 'cart' | 'bell-active' | 'caret-down-filled' | 'caret-updown-filled' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'calendar' | 'camera' | 'clock' | 'bulb' | 'circle-checked' | 'cloud-close' | 'close' | 'done' | 'documentation' | 'doughnut-chart' | 'download' | 'error-filled' | 'edit' | 'eyedropper' | 'file-new' | 'folder-open' | 'gallery' | 'globe' | 'hide' | 'info-filled' | 'lock' | 'mail' | 'menu' | 'microphone' | 'minus' | 'moon' | 'more-vertical' | 'paperclip' | 'pause' | 'play' | 'plus' | 'copy' | 'code' | 'write' | 'upload' | 'video' | 'volume-up' | 'mute-filled' | 'package' | 'delivery-filled' | 'repeat' | 'settings' | 'refresh' | 'expand' | 'shrink' | 'grip-vertical' | 'grip-horizontal' | 'search' | 'send' | 'share-alt' | 'show' | 'sparkle' | 'stop' | 'sun' | 'thumb-down' | 'thumb-up' | 'trash' | 'user' | 'warning-filled';
+type DbIconName = 'arrow-bar-left' | 'arrow-bar-right' | 'award' | 'apple' | 'play-store' | 'arrow-right' | 'star' | 'star-filled' | 'star-half' | 'trending-up' | 'cart' | 'bell-active' | 'caret-down-filled' | 'caret-updown-filled' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'calendar' | 'camera' | 'clock' | 'bulb' | 'circle-checked' | 'cloud-close' | 'close' | 'done' | 'documentation' | 'doughnut-chart' | 'download' | 'error-filled' | 'edit' | 'eyedropper' | 'file-new' | 'home-outline' | 'home-filled' | 'folder' | 'more-horizontal' | 'folder-open' | 'gallery' | 'globe' | 'hide' | 'info-filled' | 'lock' | 'mail' | 'menu' | 'microphone' | 'minus' | 'moon' | 'more-vertical' | 'paperclip' | 'pause' | 'play' | 'plus' | 'copy' | 'code' | 'write' | 'upload' | 'video' | 'volume-up' | 'mute-filled' | 'package' | 'delivery-filled' | 'repeat' | 'settings' | 'refresh' | 'expand' | 'shrink' | 'grip-vertical' | 'grip-horizontal' | 'search' | 'send' | 'share-alt' | 'show' | 'sparkle' | 'stop' | 'sun' | 'thumb-down' | 'thumb-up' | 'trash' | 'user' | 'warning-filled';
 
 interface DbChatTool {
     /** 고유 id (이벤트 detail 로 전달) */
@@ -7625,6 +7664,21 @@ type BottomNavigationItem = {
     badge?: string | number;
     badgeColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
 };
+
+type NavigationRailProps = WebComponentProps & {
+    items?: DbNavigationRailItem[] | string;
+    bottomItems?: DbNavigationRailItem[] | string;
+    activeItemId?: string;
+    labelDisplay?: 'tooltip' | 'always';
+    size?: 's' | 'm' | 'l';
+    fullHeight?: boolean;
+    onItemClick?: DbEventHandler<{
+        item: DbNavigationRailItem;
+    }>;
+    onDbItemClick?: DbEventHandler<{
+        item: DbNavigationRailItem;
+    }>;
+};
 type BottomNavigationProps = WebComponentProps & {
     items?: BottomNavigationItem[] | string;
     activeItemId?: string;
@@ -10264,6 +10318,7 @@ declare const Image: react.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & r
 declare const ImagePlaceholder: react.ForwardRefExoticComponent<Omit<ImagePlaceholderProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const ImageList: react.ForwardRefExoticComponent<Omit<ImageListProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Lightbox: react.ForwardRefExoticComponent<Omit<LightboxProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const NavigationRail: react.ForwardRefExoticComponent<Omit<NavigationRailProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const BottomNavigation: react.ForwardRefExoticComponent<Omit<BottomNavigationProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Navbar: react.ForwardRefExoticComponent<Omit<NavbarProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Footer: react.ForwardRefExoticComponent<Omit<FooterProps, "ref"> & react.RefAttributes<HTMLElement>>;
@@ -10360,5 +10415,5 @@ declare const DatePicker: react.ForwardRefExoticComponent<Omit<DatePickerProps,
 declare const TimePicker: react.ForwardRefExoticComponent<Omit<TimePickerProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Calendar: react.ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & react.RefAttributes<HTMLElement>>;
 
-export { Accordion, ActivityHeatmap, AdBanner, AiChat, AiChatList, AiGlow, Alert, AnimationBackground, AnimationText, AppBadge, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, ChatComposer, ChatList, ChatMessage, ChatOrb, ChatRoom, ChatSuggestions, ChatTyping, ChatWelcome, ChatWidget, Checkbox, Chip, CodeBlock, ColorPicker, ColorSwatch, Confirm, Container, ContextMenu, CookieBanner, Countdown, CursorFollower, DatePicker, Divider, DownloadProgress, Drawer, Dropdown, Dropzone, EmailVerify, EmptyState, FileUploader, FloatingActionButton, Footer, Form, Gantt, Gradient, Grid, GridBackground, GridItem, Image, ImageList, ImagePlaceholder, Indicator, Input, Kanban, Label, Lightbox, List, Logo, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, OtpInput, PageHeader, Pagination, PhoneVerify, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SectionAppDownload, SectionContact, SectionCta, SectionFaq, SectionFeature, SectionFeatureGrid, SectionHero, SectionLogoCloud, SectionPricing, SectionStats, SectionTestimonials, SegmentControl, Select, Share, Sidebar, Signature, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, TopBanner, Tutorial, TwoFactor, VideoPlayer, YouTubePlayer, useContextMenu };
-export type { AccordionItemConfig, AccordionProps, ActivityHeatmapCellDetail, ActivityHeatmapItem, ActivityHeatmapProps, AdBannerProps, AiChatListProps, AiChatProps, AiGlowProps, AlertAction, AlertProps, AnimationBackgroundProps, AnimationTextProps, AppBadgeProps, AudioPlayerProps, AvatarProps, BackdropProps, BadgeProps, BannerAction, BannerProps, BottomNavigationItem, BottomNavigationProps, BottomSheetProps, BreadcrumbItemConfig, BreadcrumbMenuItemConfig, BreadcrumbsProps, ButtonProps, CalendarEvent, CalendarProps, CardProps, CarouselItem, CarouselProps, ChatComposerProps, ChatListProps, ChatMessageProps, ChatOrbProps, ChatRoomProps, ChatSuggestionsProps, ChatTypingProps, ChatWelcomeProps, ChatWidgetProps, ChipProps, CodeBlockItem, CodeBlockProps, ColorPickerProps, ColorSwatchItem, ColorSwatchProps, ConfirmProps, ContextMenuItemConfig, ContextMenuProps, CookieBannerProps, CountdownProps, CursorFollowerProps, DatePickerProps, DbChatSuggestion, DbChatTool, DbChatWidgetArticle, DbChatWidgetConversation, DbChatWidgetMenuAction, DbChatWidgetMenuItem, DbChatWidgetMessage, DbEventHandler, DividerProps, DownloadProgressProps, DrawerProps, DropdownItemConfig, DropdownProps, DropzoneProps, EmailVerifyProps, EmptyStateProps, FileStatus, FileUploaderProps, FloatingActionButtonProps, FooterCompanyInfo, FooterFamilySite, FooterLink, FooterLinkColumn, FooterProps, FooterSocialLink, FormFieldData, FormProps, GanttAssignee, GanttGroup, GanttItem, GanttProps, GanttRow, GradientColor, GradientProps, GradientScheme, GradientTone, GridBackgroundProps, ImageListItem, ImageListProps, ImagePlaceholderProps, ImageProps, IndicatorProps, InputProps, KanbanAssignee, KanbanCard, KanbanColumn, KanbanProps, KanbanTag, LabelProps, LightboxImage, LightboxProps, ListItemConfig, ListProps, LogoProps, MarkdownEditorProps, MarqueeImageItem, MarqueeProps, MasonryItem, MasonryProps, MenuItemChildConfig, MenuItemProps, ModalProps, ModalSegmentItem, ModalTabItem, NavbarItem, NavbarProps, NavbarUserProfile, OnboardingModalProps, OnboardingStep, OtpInputProps, PageHeaderProps, PageHeaderTabItem, PaginationProps, PhoneVerifyProps, PopoverProps, ProgressProps, ProgressStepItem, ProgressStepProps, RadioProps, RandomGradientProps, RangeSliderProps, RatingProps, ReorderItem, ReorderProps, ResizablePanelsProps, ScrollAreaProps, SearchBarProps, SectionAppDownloadProps, SectionAppDownloadStore, SectionBlockBadge, SectionContactAction, SectionContactProps, SectionCtaButton, SectionCtaProps, SectionFaqItem, SectionFaqProps, SectionFeatureAction, SectionFeatureBadge, SectionFeatureGridItem, SectionFeatureGridProps, SectionFeatureProps, SectionHeroButton, SectionHeroProps, SectionLogoCloudItem, SectionLogoCloudProps, SectionPricingCta, SectionPricingPlan, SectionPricingProps, SectionProps, SectionStatItem, SectionStatsProps, SectionTestimonialItem, SectionTestimonialsProps, SegmentControlProps, SelectProps, SelectionProps, SharePlatform, ShareProps, SidebarItem, SidebarPanel, SidebarPanelMode, SidebarProject, SidebarPromoBanner, SidebarProps, SidebarSection, SidebarUpdateBanner, SidebarUserProfile, SignatureProps, SkeletonProps, SpinnerProps, SplitViewProps, StatChange, StatProps, StepperProps, TabItemConfig, TableColumn, TableProps, TabsProps, TestimonialProps, TextareaProps, TimePickerProps, TimelineItem, TimelineProps, ToastProps, ToggleProps, TooltipProps, TopBannerProps, TutorialProps, TutorialStep, TwoFactorProps, UploadFile, UseContextMenuReturn, VideoPlayerProps, WebComponentProps, YouTubePlayerProps };
+export { Accordion, ActivityHeatmap, AdBanner, AiChat, AiChatList, AiGlow, Alert, AnimationBackground, AnimationText, AppBadge, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, ChatComposer, ChatList, ChatMessage, ChatOrb, ChatRoom, ChatSuggestions, ChatTyping, ChatWelcome, ChatWidget, Checkbox, Chip, CodeBlock, ColorPicker, ColorSwatch, Confirm, Container, ContextMenu, CookieBanner, Countdown, CursorFollower, DatePicker, Divider, DownloadProgress, Drawer, Dropdown, Dropzone, EmailVerify, EmptyState, FileUploader, FloatingActionButton, Footer, Form, Gantt, Gradient, Grid, GridBackground, GridItem, Image, ImageList, ImagePlaceholder, Indicator, Input, Kanban, Label, Lightbox, List, Logo, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, NavigationRail, OnboardingModal, OtpInput, PageHeader, Pagination, PhoneVerify, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SectionAppDownload, SectionContact, SectionCta, SectionFaq, SectionFeature, SectionFeatureGrid, SectionHero, SectionLogoCloud, SectionPricing, SectionStats, SectionTestimonials, SegmentControl, Select, Share, Sidebar, Signature, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, TopBanner, Tutorial, TwoFactor, VideoPlayer, YouTubePlayer, useContextMenu };
+export type { AccordionItemConfig, AccordionProps, ActivityHeatmapCellDetail, ActivityHeatmapItem, ActivityHeatmapProps, AdBannerProps, AiChatListProps, AiChatProps, AiGlowProps, AlertAction, AlertProps, AnimationBackgroundProps, AnimationTextProps, AppBadgeProps, AudioPlayerProps, AvatarProps, BackdropProps, BadgeProps, BannerAction, BannerProps, BottomNavigationItem, BottomNavigationProps, BottomSheetProps, BreadcrumbItemConfig, BreadcrumbMenuItemConfig, BreadcrumbsProps, ButtonProps, CalendarEvent, CalendarProps, CardProps, CarouselItem, CarouselProps, ChatComposerProps, ChatListProps, ChatMessageProps, ChatOrbProps, ChatRoomProps, ChatSuggestionsProps, ChatTypingProps, ChatWelcomeProps, ChatWidgetProps, ChipProps, CodeBlockItem, CodeBlockProps, ColorPickerProps, ColorSwatchItem, ColorSwatchProps, ConfirmProps, ContextMenuItemConfig, ContextMenuProps, CookieBannerProps, CountdownProps, CursorFollowerProps, DatePickerProps, DbChatSuggestion, DbChatTool, DbChatWidgetArticle, DbChatWidgetConversation, DbChatWidgetMenuAction, DbChatWidgetMenuItem, DbChatWidgetMessage, DbEventHandler, DbNavigationRailItem, DividerProps, DownloadProgressProps, DrawerProps, DropdownItemConfig, DropdownProps, DropzoneProps, EmailVerifyProps, EmptyStateProps, FileStatus, FileUploaderProps, FloatingActionButtonProps, FooterCompanyInfo, FooterFamilySite, FooterLink, FooterLinkColumn, FooterProps, FooterSocialLink, FormFieldData, FormProps, GanttAssignee, GanttGroup, GanttItem, GanttProps, GanttRow, GradientColor, GradientProps, GradientScheme, GradientTone, GridBackgroundProps, ImageListItem, ImageListProps, ImagePlaceholderProps, ImageProps, IndicatorProps, InputProps, KanbanAssignee, KanbanCard, KanbanColumn, KanbanProps, KanbanTag, LabelProps, LightboxImage, LightboxProps, ListItemConfig, ListProps, LogoProps, MarkdownEditorProps, MarqueeImageItem, MarqueeProps, MasonryItem, MasonryProps, MenuItemChildConfig, MenuItemProps, ModalProps, ModalSegmentItem, ModalTabItem, NavbarItem, NavbarProps, NavbarUserProfile, NavigationRailProps, OnboardingModalProps, OnboardingStep, OtpInputProps, PageHeaderProps, PageHeaderTabItem, PaginationProps, PhoneVerifyProps, PopoverProps, ProgressProps, ProgressStepItem, ProgressStepProps, RadioProps, RandomGradientProps, RangeSliderProps, RatingProps, ReorderItem, ReorderProps, ResizablePanelsProps, ScrollAreaProps, SearchBarProps, SectionAppDownloadProps, SectionAppDownloadStore, SectionBlockBadge, SectionContactAction, SectionContactProps, SectionCtaButton, SectionCtaProps, SectionFaqItem, SectionFaqProps, SectionFeatureAction, SectionFeatureBadge, SectionFeatureGridItem, SectionFeatureGridProps, SectionFeatureProps, SectionHeroButton, SectionHeroProps, SectionLogoCloudItem, SectionLogoCloudProps, SectionPricingCta, SectionPricingPlan, SectionPricingProps, SectionProps, SectionStatItem, SectionStatsProps, SectionTestimonialItem, SectionTestimonialsProps, SegmentControlProps, SelectProps, SelectionProps, SharePlatform, ShareProps, SidebarItem, SidebarPanel, SidebarPanelMode, SidebarProject, SidebarPromoBanner, SidebarProps, SidebarSection, SidebarUpdateBanner, SidebarUserProfile, SignatureProps, SkeletonProps, SpinnerProps, SplitViewProps, StatChange, StatProps, StepperProps, TabItemConfig, TableColumn, TableProps, TabsProps, TestimonialProps, TextareaProps, TimePickerProps, TimelineItem, TimelineProps, ToastProps, ToggleProps, TooltipProps, TopBannerProps, TutorialProps, TutorialStep, TwoFactorProps, UploadFile, UseContextMenuReturn, VideoPlayerProps, WebComponentProps, YouTubePlayerProps };