@designbasekorea/ui-wc 0.7.1 → 0.8.0

package/dist/react/index.d.ts

@@ -300,6 +300,8 @@ declare class DbTabs extends HTMLElement {
     private inactivePanels;
     private isRendering;
     private childObserver?;
+    private resizeObserver?;
+    private resizeRaf?;
     get labels(): string[] | string;
     set labels(value: string[] | string);
     get tabItems(): TabItemConfig$1[];
@@ -318,6 +320,7 @@ declare class DbTabs extends HTMLElement {
     set fullWidth(value: boolean);
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private handleResize;
     attributeChangedCallback(): void;
     private handleListScroll;
     private collectPanelContent;
@@ -2906,6 +2909,7 @@ declare class DbColorPicker extends HTMLElement {
     private handleDocumentMouseMove;
     private handleDocumentMouseUp;
     private toggleOpen;
+    close(): void;
     private handleModalCancel;
     private handleModalApply;
     private mount;
@@ -2919,6 +2923,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;
@@ -6449,7 +6487,7 @@ type SegmentControlProps = SelectionProps & {
     value?: string;
     size?: 's' | 'm' | 'l';
     variant?: 'default' | 'icon-only';
-    appearance?: 'pill' | 'rounded';
+    appearance?: 'default' | 'pill' | 'rounded';
     fullWidth?: boolean;
 };
 type StepperProps = SelectionProps & {
@@ -7198,7 +7236,10 @@ type SidebarProps = WebComponentProps & {
     settingsSections?: SidebarSection[] | string;
     activePanel?: string;
     size?: 's' | 'm' | 'l';
-    variant?: 'default' | 'dark' | 'light';
+    /** 레이아웃 외형입니다. default(우측 보더만) · wrapper(패딩+radius+보더 카드형). */
+    variant?: 'default' | 'wrapper';
+    /** 색상 테마입니다. default · dark · light. */
+    theme?: 'default' | 'dark' | 'light';
     position?: 'left' | 'right';
     collapsed?: boolean;
     collapsible?: boolean;
@@ -7820,6 +7861,7 @@ type SearchBarProps = WebComponentProps & {
     defaultValue?: string;
     placeholder?: string;
     size?: 's' | 'm' | 'l';
+    appearance?: 'default' | 'pill';
     disabled?: boolean;
     readOnly?: boolean;
     fullWidth?: boolean;
@@ -8187,6 +8229,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;
@@ -8206,6 +8249,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;
@@ -9613,6 +9679,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>>;
@@ -9686,5 +9753,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, 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 };