@designbasekorea/ui-wc 0.7.3 → 0.8.1

package/dist/react/index.d.ts

@@ -202,6 +202,8 @@ declare global {
 }
 
 declare class DbBanner extends HTMLElement {
+    private clickHandler?;
+    private keydownHandler?;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(): void;
@@ -211,6 +213,9 @@ declare class DbBanner extends HTMLElement {
     private resolveIconName;
     private createActionControl;
     private render;
+    private createCloseButton;
+    private handleClose;
+    private setupInteractivity;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1713,6 +1718,15 @@ interface DbSidebarPromoBanner {
     ctaHref?: string;
     icon?: string;
 }
+interface DbSidebarUpdateBanner {
+    title: string;
+    description?: string;
+    icon?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    /** db-banner variant. 기본 outline(흰 배경+보더). */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'outline';
+}
 declare class DbSidebar extends HTMLElement {
     private expandedItems;
     private userMenuOpen;
@@ -1762,6 +1776,8 @@ declare class DbSidebar extends HTMLElement {
     set bottomSections(value: DbSidebarSection[] | string);
     get promoBanner(): DbSidebarPromoBanner | null;
     set promoBanner(value: DbSidebarPromoBanner | string | null);
+    get updateBanner(): DbSidebarUpdateBanner | null;
+    set updateBanner(value: DbSidebarUpdateBanner | string | null);
     get headerType(): 'default' | 'back';
     set headerType(value: 'default' | 'back');
     get backLabel(): string;
@@ -1781,6 +1797,7 @@ declare class DbSidebar extends HTMLElement {
     private parseBottomItems;
     private parseBottomSections;
     private parsePromoBanner;
+    private parseUpdateBanner;
     private getSelectedProject;
     private bindOutsideClick;
     private closeOverlayMenus;
@@ -1801,6 +1818,7 @@ declare class DbSidebar extends HTMLElement {
     private dispatchProjectChange;
     private dispatchProjectManage;
     private dispatchPromoCtaClick;
+    private dispatchUpdateCtaClick;
     private createProjectAvatar;
     private createProjectEmptyMark;
     private createProjectBadge;
@@ -1811,6 +1829,7 @@ declare class DbSidebar extends HTMLElement {
     private renderNav;
     private renderBottomNav;
     private createUserDropdown;
+    private createUpdateBanner;
     private createPromoBanner;
     private createHeader;
     private createNavWrapper;
@@ -2909,6 +2928,7 @@ declare class DbColorPicker extends HTMLElement {
     private handleDocumentMouseMove;
     private handleDocumentMouseUp;
     private toggleOpen;
+    close(): void;
     private handleModalCancel;
     private handleModalApply;
     private mount;
@@ -2922,6 +2942,40 @@ declare global {
     }
 }
 
+declare class DbColorSwatch extends HTMLElement {
+    private colors;
+    private selected;
+    private customValue;
+    private mounted;
+    private gridEl?;
+    private presetsEl?;
+    private customWrapEl?;
+    private customTipEl?;
+    private customPickerEl?;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleOutsideMouseDown;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get value(): string;
+    set value(next: string);
+    private getOption;
+    private getBool;
+    private parseColors;
+    private isCustomSelected;
+    private emitChange;
+    private selectPreset;
+    private render;
+    private buildSwatch;
+    private ensureCustom;
+    private updateCustom;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-color-swatch': DbColorSwatch;
+    }
+}
+
 type DbReorderItem = {
     id: string;
     content: string;
@@ -6557,8 +6611,27 @@ type BannerProps = WebComponentProps & {
     imageAlt?: string;
     actions?: BannerAction[] | string;
     size?: 's' | 'm' | 'l';
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'image';
+    /** 배너 스타일입니다. primary · secondary · tertiary · outline(흰 배경+보더) · image. */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'image';
     backgroundImage?: string;
+    /** 지정하면 배너 전체가 링크로 동작합니다. */
+    href?: string;
+    /** href 이동 대상입니다. 기본 _self. */
+    target?: '_self' | '_blank';
+    /** true이면 배너 전체가 클릭 요소가 되어 db-click 이벤트를 발생시킵니다. */
+    clickable?: boolean;
+    /** true이면 우측에 닫기 버튼을 표시합니다. */
+    closable?: boolean;
+    /** 닫기 버튼 aria-label입니다. 기본 Close. */
+    closeLabel?: string;
+    onClick?: DbEventHandler<{
+        href: string | null;
+    }>;
+    onDbClick?: DbEventHandler<{
+        href: string | null;
+    }>;
+    onClose?: DbEventHandler<Record<string, never>>;
+    onDbClose?: DbEventHandler<Record<string, never>>;
 };
 type LogoProps = WebComponentProps & {
     type?: 'designbase' | 'designbase-mark' | 'custom';
@@ -7174,6 +7247,15 @@ type SidebarPromoBanner = {
     ctaHref?: string;
     icon?: string;
 };
+type SidebarUpdateBanner = {
+    title: string;
+    description?: string;
+    icon?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    /** db-banner variant. 기본 outline(흰 배경+보더). */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'outline';
+};
 type SidebarProps = WebComponentProps & {
     /**
      * 커스텀 내비게이션 콘텐츠입니다.
@@ -7195,6 +7277,8 @@ type SidebarProps = WebComponentProps & {
     bottomItems?: SidebarItem[] | string;
     bottomSections?: SidebarSection[] | string;
     promoBanner?: SidebarPromoBanner | string;
+    /** 업데이트/공지 배너 영역입니다. Banner 컴포넌트를 활용해 표시합니다. */
+    updateBanner?: SidebarUpdateBanner | string;
     headerType?: 'default' | 'back';
     backLabel?: string;
     backHref?: string;
@@ -7227,6 +7311,18 @@ type SidebarProps = WebComponentProps & {
         panel: string;
         previous?: string;
     }>;
+    onPromoCtaClick?: DbEventHandler<{
+        banner: SidebarPromoBanner;
+    }>;
+    onDbPromoCtaClick?: DbEventHandler<{
+        banner: SidebarPromoBanner;
+    }>;
+    onUpdateCtaClick?: DbEventHandler<{
+        banner: SidebarUpdateBanner;
+    }>;
+    onDbUpdateCtaClick?: DbEventHandler<{
+        banner: SidebarUpdateBanner;
+    }>;
 };
 type SpinnerProps = WebComponentProps & {
     type?: 'circular' | 'dots' | 'bars' | 'pulse' | 'ripple';
@@ -8194,6 +8290,7 @@ type MasonryProps = WebComponentProps & {
 type ColorPickerProps = WebComponentProps & {
     size?: 's' | 'm' | 'l';
     type?: 'dropdown' | 'modal';
+    trigger?: 'input' | 'swatch';
     position?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
     value?: string;
     defaultValue?: string;
@@ -8213,6 +8310,29 @@ type ColorPickerProps = WebComponentProps & {
         value: string;
     }>;
 };
+type ColorSwatchItem = {
+    value: string;
+    name?: string;
+};
+type ColorSwatchProps = WebComponentProps & {
+    colors?: ColorSwatchItem[] | string[] | string;
+    value?: string;
+    defaultValue?: string;
+    shape?: 'rounded' | 'circle';
+    size?: 's' | 'm' | 'l';
+    showName?: boolean;
+    allowCustom?: boolean;
+    customType?: 'dropdown' | 'modal';
+    disabled?: boolean;
+    onChange?: DbEventHandler<{
+        value: string;
+        name: string;
+    }>;
+    onDbChange?: DbEventHandler<{
+        value: string;
+        name: string;
+    }>;
+};
 type ReorderItem = {
     id: string;
     content: string;
@@ -9620,6 +9740,7 @@ declare const Countdown: react.ForwardRefExoticComponent<Omit<CountdownProps, "r
 declare const Masonry: react.ForwardRefExoticComponent<Omit<MasonryProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Carousel: react.ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const ColorPicker: react.ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const ColorSwatch: react.ForwardRefExoticComponent<Omit<ColorSwatchProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Reorder: react.ForwardRefExoticComponent<Omit<ReorderProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Kanban: react.ForwardRefExoticComponent<Omit<KanbanProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Gantt: react.ForwardRefExoticComponent<Omit<GanttProps, "ref"> & react.RefAttributes<HTMLElement>>;
@@ -9693,5 +9814,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, AdBanner, AiChat, AiChatList, 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, 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, Lottie, 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, AdBannerProps, AiChatListProps, AiChatProps, 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, ConfirmProps, ContextMenuItemConfig, ContextMenuProps, CookieBannerProps, CountdownProps, CursorFollowerProps, DatePickerProps, DbChatSuggestion, DbChatTool, DbChatWidgetConversation, DbChatWidgetMessage, DbEventHandler, DividerProps, DownloadProgressProps, DrawerProps, DropdownItemConfig, DropdownProps, DropzoneProps, EmailVerifyProps, EmptyStateProps, 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, LottieProps, 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, SidebarProject, SidebarPromoBanner, SidebarProps, SidebarSection, SidebarUserProfile, SignatureProps, SkeletonProps, SpinnerProps, SplitViewProps, StatChange, StatProps, StepperProps, TabItemConfig, TableColumn, TableProps, TabsProps, TestimonialProps, TextareaProps, TimePickerProps, TimelineItem, TimelineProps, ToastProps, ToggleProps, TooltipProps, TopBannerProps, TutorialProps, TutorialStep, TwoFactorProps, UseContextMenuReturn, VideoPlayerProps, WebComponentProps, YouTubePlayerProps };
+export { Accordion, AdBanner, AiChat, AiChatList, 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, Lottie, 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, AdBannerProps, AiChatListProps, AiChatProps, 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, DbChatWidgetConversation, DbChatWidgetMessage, DbEventHandler, DividerProps, DownloadProgressProps, DrawerProps, DropdownItemConfig, DropdownProps, DropzoneProps, EmailVerifyProps, EmptyStateProps, 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, LottieProps, 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, 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, UseContextMenuReturn, VideoPlayerProps, WebComponentProps, YouTubePlayerProps };