@designbasekorea/ui 0.1.45 → 0.1.47

package/dist/index.d.ts

@@ -90,7 +90,7 @@ declare const RandomGradient: React$1.FC<RandomGradientProps>;
  */
 
 type AdBannerType = 'hero' | 'topbar' | 'card' | 'floating';
-type AdBannerVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'gradient';
+type AdBannerVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error';
 interface AdBannerProps {
     /** 배너 타입 */
     type?: AdBannerType;
@@ -120,6 +120,10 @@ interface AdBannerProps {
     gradientTone?: GradientTone;
     /** 랜덤 그라데이션 애니메이션 여부 */
     gradientAnimated?: boolean;
+    /** 카운트다운 종료 시간 */
+    countdownEndDate?: Date | string;
+    /** 카운트다운 표시 여부 */
+    showCountdown?: boolean;
     /** 추가 CSS 클래스 */
     className?: string;
 }
@@ -1463,10 +1467,7 @@ interface EmptyStateProps {
 declare const EmptyState: React$1.FC<EmptyStateProps>;
 
 /**
- * FileUploader 컴포넌트
- *
- * Dropzone을 활용한 파일 업로드 컴포넌트입니다.
- * 파일 목록, 진행률, 상태 등을 표시합니다.
+ * FileUploader 컴포넌트 (완성본)
  */
 
 type FileUploaderSize = 's' | 'm' | 'l';
@@ -1481,31 +1482,18 @@ interface UploadFile {
     uploadedAt?: Date;
 }
 interface FileUploaderProps {
-    /** 파일 업로더 크기 */
     size?: FileUploaderSize;
-    /** 파일 업로더 스타일 변형 */
     variant?: FileUploaderVariant;
-    /** 허용할 파일 타입 */
     accept?: string;
-    /** 최대 파일 크기 (bytes) */
     maxSize?: number;
-    /** 다중 파일 선택 허용 */
     multiple?: boolean;
-    /** 파일 목록 표시 여부 */
     showFileList?: boolean;
-    /** 진행률 표시 여부 */
     showProgress?: boolean;
-    /** 비활성화 상태 */
     disabled?: boolean;
-    /** 읽기 전용 상태 */
     readonly?: boolean;
-    /** 파일 업로드 핸들러 */
     onUpload?: (files: UploadFile[]) => void;
-    /** 파일 제거 핸들러 */
     onRemove?: (fileId: string) => void;
-    /** 파일 재시도 핸들러 */
     onRetry?: (fileId: string) => void;
-    /** 추가 CSS 클래스 */
     className?: string;
 }
 declare const FileUploader: React$1.FC<FileUploaderProps>;
@@ -2516,6 +2504,132 @@ declare const ModalHeader: React$1.FC<ModalHeaderProps>;
 declare const ModalBody: React$1.FC<ModalBodyProps>;
 declare const ModalFooter: React$1.FC<ModalFooterProps>;
 
+/**
+ * OnboardingModal 컴포넌트
+ *
+ * 목적: 온보딩/튜토리얼을 위한 모달 컴포넌트
+ * 기능: 이미지, 텍스트, 네비게이션, 인디케이터 지원
+ * 접근성: ARIA 가이드라인 준수, 키보드 네비게이션 지원
+ */
+
+interface OnboardingStep {
+    /** 단계 ID */
+    id: string;
+    /** 이미지 URL 또는 React 컴포넌트 */
+    image?: string | React$1.ReactNode;
+    /** 제목 */
+    title?: string;
+    /** 설명 텍스트 */
+    description?: string;
+    /** 추가 컨텐츠 */
+    content?: React$1.ReactNode;
+}
+interface OnboardingModalProps {
+    /** 온보딩 단계들 */
+    steps: OnboardingStep[];
+    /** 현재 단계 (0부터 시작) */
+    currentStep?: number;
+    /** 모달 열림 상태 */
+    isOpen: boolean;
+    /** 모달 닫기 핸들러 */
+    onClose: () => void;
+    /** 단계 변경 핸들러 */
+    onStepChange?: (step: number) => void;
+    /** 완료 핸들러 */
+    onComplete?: () => void;
+    /** 닫기 버튼 표시 여부 */
+    showCloseButton?: boolean;
+    /** 인디케이터 표시 여부 */
+    showIndicator?: boolean;
+    /** 커스텀 닫기 아이콘 */
+    closeIcon?: React$1.ComponentType<IconProps>;
+    /** 커스텀 이전 아이콘 */
+    prevIcon?: React$1.ComponentType<IconProps>;
+    /** 커스텀 다음 아이콘 */
+    nextIcon?: React$1.ComponentType<IconProps>;
+    /** 인디케이터 타입 */
+    indicatorType?: 'dots' | 'numbers';
+    /** 인디케이터 크기 */
+    indicatorSize?: 's' | 'm' | 'l';
+    /** 추가 CSS 클래스 */
+    className?: string;
+    /** 추가 props */
+    [key: string]: any;
+}
+declare const OnboardingModal: React$1.FC<OnboardingModalProps>;
+
+interface IndicatorProps {
+    current: number;
+    total: number;
+    type?: 'dots' | 'numbers' | 'line';
+    direction?: 'horizontal' | 'vertical';
+    size?: 's' | 'm' | 'l';
+    clickable?: boolean;
+    onStepClick?: (step: number) => void;
+    timer?: boolean;
+    timerDuration?: number;
+    onTimerComplete?: () => void;
+    className?: string;
+    [key: string]: any;
+}
+declare const Indicator: React$1.FC<IndicatorProps>;
+
+/**
+ * Tutorial 컴포넌트
+ *
+ * 목적: 첫 사용자를 위한 인터랙티브 튜토리얼
+ * 기능: 특정 영역 강조, 팝오버 컨텐츠, 단계별 진행
+ * 접근성: ARIA 가이드라인 준수, 키보드 네비게이션 지원
+ */
+
+interface TutorialStep {
+    /** 단계 ID */
+    id: string;
+    /** 타겟 요소 선택자 */
+    target: string;
+    /** 팝오버 제목 */
+    title?: string;
+    /** 팝오버 내용 */
+    content?: string;
+    /** 팝오버 위치 */
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    /** 추가 컨텐츠 */
+    children?: React$1.ReactNode;
+}
+interface TutorialProps {
+    /** 튜토리얼 단계들 */
+    steps: TutorialStep[];
+    /** 현재 단계 (0부터 시작) */
+    currentStep?: number;
+    /** 튜토리얼 활성화 상태 */
+    isActive: boolean;
+    /** 튜토리얼 시작 핸들러 */
+    onStart?: () => void;
+    /** 튜토리얼 종료 핸들러 */
+    onEnd?: () => void;
+    /** 단계 변경 핸들러 */
+    onStepChange?: (step: number) => void;
+    /** 다음 단계 핸들러 */
+    onNext?: () => void;
+    /** 이전 단계 핸들러 */
+    onPrev?: () => void;
+    /** 인디케이터 타입 */
+    indicatorType?: 'dots' | 'numbers';
+    /** 인디케이터 크기 */
+    indicatorSize?: 's' | 'm' | 'l';
+    /** 커스텀 닫기 아이콘 */
+    closeIcon?: React$1.ComponentType<IconProps>;
+    /** 커스텀 이전 아이콘 */
+    prevIcon?: React$1.ComponentType<IconProps>;
+    /** 커스텀 다음 아이콘 */
+    nextIcon?: React$1.ComponentType<IconProps>;
+    /** 추가 CSS 클래스 */
+    className?: string;
+    /** 추가 props */
+    [key: string]: any;
+}
+declare const Tutorial: React$1.FC<TutorialProps>;
+
 /**
  * Navbar 컴포넌트
  *
@@ -4230,5 +4344,5 @@ declare const setTheme: (theme: string) => void;
 declare const getTheme: () => string;
 declare const toggleTheme: () => void;
 
-export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image, ImageList, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme };
-export type { AccordionItem, AccordionItemType, AccordionProps, AdBannerProps, AdBannerType, AdBannerVariant, AlertAction, AlertProps, AlertSize, AlertVariant, AnimationBackgroundProps, AnimationTextProps, AudioPlayerProps, AudioPlayerSize, AudioPlayerTheme, AudioPlayerVariant, AvatarGroupProps, AvatarProps, AvatarSize, AvatarStatus, AvatarVariant, BackdropProps, BadgeProps, BadgeSize, BadgeStyle, BadgeVariant, BannerAction, BannerProps, BannerSize, BannerVariant, BottomSheetProps, BottomSheetSize, BottomSheetVariant, BreadcrumbItem, BreadcrumbsProps, BreadcrumbsSize, BreadcrumbsStyle, ButtonProps, CalendarEvent, CalendarEventType, CalendarProps, CalendarView, CardAction, CardImage, CardImagePosition, CardLayout, CardProps, CardSize, CardVariant, CarouselIndicatorStyle, CarouselItem, CarouselProps, CarouselSize, CarouselTheme, CarouselTransition, CarouselVariant, CheckboxProps, ChipColor, ChipProps, ChipSize, ChipVariant, ColorPickerProps, ColorPickerSize, ColorPickerType, ComponentBaseProps, ConfirmProps, ConfirmSize, ConfirmVariant, ContainerPadding, ContainerProps, ContainerSize, ContainerVariant, ContextMenuItem, ContextMenuProps, CountdownProps, CountdownSize, CountdownVariant, DatePickerEvent, DatePickerMode, DatePickerProps, DatePickerSize, DatePickerVariant, DividerProps, DrawerPosition, DrawerProps, DrawerSize, DropdownItem, DropdownProps, DropzoneProps, DropzoneSize, DropzoneVariant, EmptyStateProps, EmptyStateSize, EmptyStateVariant, FileStatus, FileUploaderProps, FileUploaderSize, FileUploaderVariant, FloatingActionButtonProps, FloatingActionButtonSize, FloatingActionButtonVariant, FormField, FormProps, FormSize, FormVariant, GradientColor, GradientDirection, GradientProps, GradientScheme, GradientSize, GradientVariant, GridAlignment, GridBreakpoint, GridColProps, GridJustify, GridProps, GridRowProps, GridSize, HeroFeatureAlignment, HeroFeatureButton, HeroFeatureProps, HeroFeatureSize, HeroFeatureTheme, HeroFeatureVariant, ImageFit, ImageItem, ImageListColumns, ImageListLayout, ImageListProps, ImageListSpacing, ImageLoading, ImagePlaceholder, ImageProps, ImageRatio, ImageRounded, InputProps, LabelProps, LightboxImage, LightboxProps, LightboxSize, ListItem, ListItemType, ListLayout, ListProps, ListSize, ListVariant, LogoProps, LogoSize, LogoType, LogoVariant, MarkdownEditorMode, MarkdownEditorProps, MarkdownEditorSize, MarkdownEditorTheme, MarkdownEditorVariant, MarkdownToolbarItem, MasonryAnimation, MasonryColumns, MasonryItem, MasonryProps, MasonrySpacing, MenuItemChild, MenuItemProps, MenuItemSize, MenuItemStyle, MenuItemType, MenuItemVariant, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, NavbarItem, NavbarPosition, NavbarProps, NavbarSize, NavbarVariant, PaginationAlignment, PaginationProps, PaginationSize, PaginationVariant, PopoverPosition, PopoverProps, PopoverSize, PopoverTrigger, PopoverVariant, ProgressProps, ProgressSize, ProgressStepItem, ProgressStepLayout, ProgressStepProps, ProgressStepSize, ProgressType, ProgressVariant, ProgressbarProps, ProgressbarSize, ProgressbarStyle, ProgressbarVariant, RadioProps, RandomGradientProps, RangeSliderProps, RangeSliderSize, RangeSliderVariant, RatingDisplay, RatingProps, RatingSize, RatingType, RatingVariant, ReorderItem, ReorderOrientation, ReorderProps, ReorderSize, ReorderVariant, ResizablePanelsProps, ScrollAreaProps, ScrollAreaSize, ScrollDirection, ScrollbarStyle, SearchBarProps, SearchBarSize, SearchBarVariant, SectionProps, SectionSize, SectionVariant, SegmentControlProps, SegmentOption, SelectOption, SelectProps, SharePlatform, SharePlatformConfig, SharePosition, ShareProps, ShareSize, ShareVariant, SidebarItem, SidebarPosition, SidebarProps, SidebarSize, SidebarVariant, SkeletonProps, SortDirection, SpinnerProps, SpinnerSize, SpinnerType, SplitDirection, SplitMode, SplitSize, SplitViewProps, StackAlignment, StackDirection, StackJustify, StackProps, StackSpacing, StartOfWeek, StatColor, StatLayout, StatProps, StatSize, StatVariant, StepperProps, StepperSize, StepperVariant, TabItem, TableColumn, TableProps, TableSize, TableVariant, TabsProps, TextareaProps, TimeFormat, TimePickerProps, TimePickerSize, TimePickerType, TimeRemaining, TimelineColor, TimelineItem, TimelinePosition, TimelineProps, TimelineSize, TimelineVariant, ToastProps, ToastStatus, ToggleProps, ToolbarItem, ToolbarPosition, ToolbarProps, ToolbarSize, ToolbarVariant, TooltipPosition, TooltipProps, TooltipSize, TooltipVariant, UploadFile, VideoPlayerProps, VideoPlayerSize, VideoPlayerTheme, VideoPlayerVariant, YouTubePlayerProps, YouTubePlayerSize, YouTubePlayerTheme, YouTubePlayerVariant };
+export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image, ImageList, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme };
+export type { AccordionItem, AccordionItemType, AccordionProps, AdBannerProps, AdBannerType, AdBannerVariant, AlertAction, AlertProps, AlertSize, AlertVariant, AnimationBackgroundProps, AnimationTextProps, AudioPlayerProps, AudioPlayerSize, AudioPlayerTheme, AudioPlayerVariant, AvatarGroupProps, AvatarProps, AvatarSize, AvatarStatus, AvatarVariant, BackdropProps, BadgeProps, BadgeSize, BadgeStyle, BadgeVariant, BannerAction, BannerProps, BannerSize, BannerVariant, BottomSheetProps, BottomSheetSize, BottomSheetVariant, BreadcrumbItem, BreadcrumbsProps, BreadcrumbsSize, BreadcrumbsStyle, ButtonProps, CalendarEvent, CalendarEventType, CalendarProps, CalendarView, CardAction, CardImage, CardImagePosition, CardLayout, CardProps, CardSize, CardVariant, CarouselIndicatorStyle, CarouselItem, CarouselProps, CarouselSize, CarouselTheme, CarouselTransition, CarouselVariant, CheckboxProps, ChipColor, ChipProps, ChipSize, ChipVariant, ColorPickerProps, ColorPickerSize, ColorPickerType, ComponentBaseProps, ConfirmProps, ConfirmSize, ConfirmVariant, ContainerPadding, ContainerProps, ContainerSize, ContainerVariant, ContextMenuItem, ContextMenuProps, CountdownProps, CountdownSize, CountdownVariant, DatePickerEvent, DatePickerMode, DatePickerProps, DatePickerSize, DatePickerVariant, DividerProps, DrawerPosition, DrawerProps, DrawerSize, DropdownItem, DropdownProps, DropzoneProps, DropzoneSize, DropzoneVariant, EmptyStateProps, EmptyStateSize, EmptyStateVariant, FileStatus, FileUploaderProps, FileUploaderSize, FileUploaderVariant, FloatingActionButtonProps, FloatingActionButtonSize, FloatingActionButtonVariant, FormField, FormProps, FormSize, FormVariant, GradientColor, GradientDirection, GradientProps, GradientScheme, GradientSize, GradientVariant, GridAlignment, GridBreakpoint, GridColProps, GridJustify, GridProps, GridRowProps, GridSize, HeroFeatureAlignment, HeroFeatureButton, HeroFeatureProps, HeroFeatureSize, HeroFeatureTheme, HeroFeatureVariant, ImageFit, ImageItem, ImageListColumns, ImageListLayout, ImageListProps, ImageListSpacing, ImageLoading, ImagePlaceholder, ImageProps, ImageRatio, ImageRounded, IndicatorProps, InputProps, LabelProps, LightboxImage, LightboxProps, LightboxSize, ListItem, ListItemType, ListLayout, ListProps, ListSize, ListVariant, LogoProps, LogoSize, LogoType, LogoVariant, MarkdownEditorMode, MarkdownEditorProps, MarkdownEditorSize, MarkdownEditorTheme, MarkdownEditorVariant, MarkdownToolbarItem, MasonryAnimation, MasonryColumns, MasonryItem, MasonryProps, MasonrySpacing, MenuItemChild, MenuItemProps, MenuItemSize, MenuItemStyle, MenuItemType, MenuItemVariant, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, NavbarItem, NavbarPosition, NavbarProps, NavbarSize, NavbarVariant, OnboardingModalProps, OnboardingStep, PaginationAlignment, PaginationProps, PaginationSize, PaginationVariant, PopoverPosition, PopoverProps, PopoverSize, PopoverTrigger, PopoverVariant, ProgressProps, ProgressSize, ProgressStepItem, ProgressStepLayout, ProgressStepProps, ProgressStepSize, ProgressType, ProgressVariant, ProgressbarProps, ProgressbarSize, ProgressbarStyle, ProgressbarVariant, RadioProps, RandomGradientProps, RangeSliderProps, RangeSliderSize, RangeSliderVariant, RatingDisplay, RatingProps, RatingSize, RatingType, RatingVariant, ReorderItem, ReorderOrientation, ReorderProps, ReorderSize, ReorderVariant, ResizablePanelsProps, ScrollAreaProps, ScrollAreaSize, ScrollDirection, ScrollbarStyle, SearchBarProps, SearchBarSize, SearchBarVariant, SectionProps, SectionSize, SectionVariant, SegmentControlProps, SegmentOption, SelectOption, SelectProps, SharePlatform, SharePlatformConfig, SharePosition, ShareProps, ShareSize, ShareVariant, SidebarItem, SidebarPosition, SidebarProps, SidebarSize, SidebarVariant, SkeletonProps, SortDirection, SpinnerProps, SpinnerSize, SpinnerType, SplitDirection, SplitMode, SplitSize, SplitViewProps, StackAlignment, StackDirection, StackJustify, StackProps, StackSpacing, StartOfWeek, StatColor, StatLayout, StatProps, StatSize, StatVariant, StepperProps, StepperSize, StepperVariant, TabItem, TableColumn, TableProps, TableSize, TableVariant, TabsProps, TextareaProps, TimeFormat, TimePickerProps, TimePickerSize, TimePickerType, TimeRemaining, TimelineColor, TimelineItem, TimelinePosition, TimelineProps, TimelineSize, TimelineVariant, ToastProps, ToastStatus, ToggleProps, ToolbarItem, ToolbarPosition, ToolbarProps, ToolbarSize, ToolbarVariant, TooltipPosition, TooltipProps, TooltipSize, TooltipVariant, TutorialProps, TutorialStep, UploadFile, VideoPlayerProps, VideoPlayerSize, VideoPlayerTheme, VideoPlayerVariant, YouTubePlayerProps, YouTubePlayerSize, YouTubePlayerTheme, YouTubePlayerVariant };