@designbasekorea/ui 0.6.0 → 0.7.0

package/dist/index.d.ts

@@ -1930,7 +1930,7 @@ declare const HeroFeature: React$1.FC<HeroFeatureProps>;
 type ImageRatio = '1:1' | '16:9' | '4:3' | '3:2' | '3:4' | '2:1' | 'auto';
 type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 type ImageLoading = 'lazy' | 'eager';
-type ImagePlaceholder = 'skeleton' | 'blur' | 'none';
+type ImagePlaceholderMode = 'skeleton' | 'blur' | 'none';
 type ImageRounded = boolean | 's' | 'm' | 'l' | 'full';
 interface ImageProps {
     /** 이미지 소스 URL */
@@ -1946,7 +1946,7 @@ interface ImageProps {
     /** 대체 이미지 URL */
     fallbackSrc?: string;
     /** 플레이스홀더 타입 */
-    placeholder?: ImagePlaceholder;
+    placeholder?: ImagePlaceholderMode;
     /** 둥근 모서리 */
     rounded?: ImageRounded;
     /** 너비 */
@@ -1978,6 +1978,39 @@ interface ImageProps {
 }
 declare const Image: React$1.FC<ImageProps>;
 
+interface ImagePlaceholderProps {
+    /** 추가 CSS 클래스 */
+    className?: string;
+    /** 스타일 객체 */
+    style?: React$1.CSSProperties;
+    /** 표시할 텍스트 라벨 */
+    label?: string;
+    /** 라벨 표시 여부 */
+    showLabel?: boolean;
+    /** 격자 패턴 크기 (숫자) */
+    patternSize?: number;
+    /** 격자 패턴 색상 */
+    patternColor?: string;
+    /** 배경 색상 */
+    backgroundColor?: string;
+    /** 가로 너비 */
+    width?: string | number;
+    /** 세로 높이 */
+    height?: string | number;
+    /** 가로세로 비율 (예: '16/9', '1/1') */
+    aspectRatio?: string;
+    /** 호버 시 효과 활성화 여부 */
+    hoverEffect?: boolean;
+    /** 클릭 핸들러 */
+    onClick?: () => void;
+}
+/**
+ * ImagePlaceholder 컴포넌트
+ *
+ * 이미지가 없거나 업로드 전 대기 상태일 때 격자 패턴과 라벨을 보여주는 자리표시자입니다.
+ */
+declare const ImagePlaceholder: React$1.FC<ImagePlaceholderProps>;
+
 type ImageListLayout = 'grid' | 'list' | 'gallery' | 'carousel';
 type ImageListColumns = 1 | 2 | 3 | 4 | 5 | 6;
 type ImageListSpacing = 'xs' | 's' | 'm' | 'l' | 'xl';
@@ -2695,6 +2728,29 @@ interface OnboardingModalProps {
 }
 declare const OnboardingModal: React$1.FC<OnboardingModalProps>;
 
+interface PageHeaderProps {
+    /** 페이지 메인 타이틀 */
+    title: string;
+    /** 상세 설명 */
+    description?: string | React$1.ReactNode;
+    /** 서브 타이틀 (선택 사항) */
+    subtitle?: string;
+    /** 브레드크럼 아이템들 (선택 사항) */
+    breadcrumbs?: BreadcrumbItem[];
+    /** 하단 액션 영역 (버튼, 검색바, 탭 등) */
+    actions?: React$1.ReactNode;
+    /** 정렬 (center, left) - 기본값 center */
+    align?: 'center' | 'left';
+    /** 추가 CSS 클래스 */
+    className?: string;
+}
+/**
+ * PageHeader 컴포넌트
+ *
+ * 브레드크럼, 타이틀, 서브타이틀, 설명 및 액션(버튼, 탭 등)을 포함하는 페이지 헤더 섹션입니다.
+ */
+declare const PageHeader: React$1.FC<PageHeaderProps>;
+
 interface IndicatorProps {
     current: number;
     total: number;
@@ -3368,10 +3424,26 @@ interface SearchBarProps {
     enableRecentSearches?: boolean;
     /** 최근 검색어 저장 키 (로컬스토리지) */
     recentSearchesKey?: string;
+    /** 최근 검색어 레이아웃 (가로/세로) */
+    recentSearchesLayout?: 'vertical' | 'horizontal';
     /** 추천 검색어 목록 */
     suggestedSearches?: string[];
     /** 추천 검색어 롤링 간격 (ms) */
     suggestionRollingInterval?: number;
+    /** 카테고리 필터 칩 목록 */
+    categories?: string[];
+    /** 선택된 카테고리 칩 */
+    selectedCategory?: string;
+    /** 카테고리 변경 핸들러 */
+    onCategoryChange?: (category: string) => void;
+    /** 검색 결과 목록 */
+    searchResults?: any[];
+    /** 검색 결과 커스텀 렌더러 */
+    renderSearchResult?: (result: any, index: number) => React$1.ReactNode;
+    /** 검색 결과 클릭 핸들러 */
+    onSearchResultClick?: (result: any) => void;
+    /** 데이터 없을 때 보여줄 빈 상태 메시지 */
+    emptyStateMessage?: React$1.ReactNode;
     /** 검색어 변경 핸들러 */
     onChange?: (value: string) => void;
     /** 검색 실행 핸들러 */
@@ -4372,6 +4444,34 @@ interface ToolbarProps {
 }
 declare const Toolbar: React$1.FC<ToolbarProps>;
 
+type TopBannerVariant = 'primary' | 'white' | 'dark';
+interface TopBannerProps {
+    /** 배지에 들어갈 텍스트 (예: NEW) */
+    badgeText?: string;
+    /** 메인 안내 문구 */
+    content: string;
+    /** 이미지 URL (배경 또는 썸네일용) */
+    image?: string;
+    /** 링크 텍스트 (예: 확인) */
+    linkText?: string;
+    /** 링크 클릭 핸들러 */
+    onLinkPress?: () => void;
+    /** 닫기 버튼 클릭 핸들러 */
+    onClose?: () => void;
+    /** 색상 테마 */
+    variant?: TopBannerVariant;
+    /** 고정 여부 */
+    fixed?: boolean;
+    /** 추가 CSS 클래스 */
+    className?: string;
+}
+/**
+ * TopBanner 컴포넌트
+ *
+ * 페이지 최상단에 위치하여 공지사항이나 프로모션을 안내하는 슬림한 배너입니다.
+ */
+declare const TopBanner: React$1.FC<TopBannerProps>;
+
 type VideoPlayerSize = 's' | 'm' | 'l' | 'xl';
 type VideoPlayerVariant = 'default' | 'minimal' | 'theater' | 'picture-in-picture';
 type VideoPlayerTheme = 'light' | 'dark' | 'auto';
@@ -4566,5 +4666,5 @@ interface ComponentBaseProps {
     children?: React.ReactNode;
 }
 
-export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, 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, Marquee, 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, Testimonial, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, useToast };
-export type { AccordionItem, AccordionItemType, AccordionProps, AdBannerProps, AdBannerType, AdBannerVariant, AlertAction, AlertProps, AlertSize, AlertVariant, AnimationBackgroundProps, AnimationTextProps, AnimationType, AudioPlayerProps, AudioPlayerSize, AudioPlayerTheme, AudioPlayerVariant, AuroraIntensity, AvatarGroupProps, AvatarProps, AvatarSize, AvatarStatus, AvatarVariant, BackdropProps, BadgeProps, BadgeSize, BadgeStyle, BadgeVariant, BannerAction, BannerProps, BannerSize, BannerVariant, BottomNavigationItem, BottomNavigationProps, 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, DirectionType, 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, MarqueeAlign, MarqueeDirection, MarqueeProps, MarqueeSize, MarqueeVariant, 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, TestimonialAlignment, TestimonialProps, TestimonialSize, TextareaProps, TimeFormat, TimePickerProps, TimePickerSize, TimePickerType, TimeRemaining, TimelineColor, TimelineItem, TimelineProps, TimelineSize, TimelineType, TimelineVariant, ToastContainerProps, ToastItem, ToastProps, ToastStatus, ToggleProps, ToolbarItem, ToolbarPosition, ToolbarProps, ToolbarSize, ToolbarVariant, TooltipPosition, TooltipProps, TooltipSize, TooltipVariant, TutorialProps, TutorialStep, UploadFile, VideoPlayerProps, VideoPlayerSize, VideoPlayerTheme, VideoPlayerVariant, YouTubePlayerProps, YouTubePlayerSize, YouTubePlayerTheme, YouTubePlayerVariant };
+export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, 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, ImagePlaceholder, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, PageHeader, 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, Testimonial, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, TopBanner, Tutorial, VideoPlayer, YouTubePlayer, useToast };
+export type { AccordionItem, AccordionItemType, AccordionProps, AdBannerProps, AdBannerType, AdBannerVariant, AlertAction, AlertProps, AlertSize, AlertVariant, AnimationBackgroundProps, AnimationTextProps, AnimationType, AudioPlayerProps, AudioPlayerSize, AudioPlayerTheme, AudioPlayerVariant, AuroraIntensity, AvatarGroupProps, AvatarProps, AvatarSize, AvatarStatus, AvatarVariant, BackdropProps, BadgeProps, BadgeSize, BadgeStyle, BadgeVariant, BannerAction, BannerProps, BannerSize, BannerVariant, BottomNavigationItem, BottomNavigationProps, 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, DirectionType, 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, ImagePlaceholderMode, ImagePlaceholderProps, 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, MarqueeAlign, MarqueeDirection, MarqueeProps, MarqueeSize, MarqueeVariant, MasonryAnimation, MasonryColumns, MasonryItem, MasonryProps, MasonrySpacing, MenuItemChild, MenuItemProps, MenuItemSize, MenuItemStyle, MenuItemType, MenuItemVariant, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, NavbarItem, NavbarPosition, NavbarProps, NavbarSize, NavbarVariant, OnboardingModalProps, OnboardingStep, PageHeaderProps, 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, TestimonialAlignment, TestimonialProps, TestimonialSize, TextareaProps, TimeFormat, TimePickerProps, TimePickerSize, TimePickerType, TimeRemaining, TimelineColor, TimelineItem, TimelineProps, TimelineSize, TimelineType, TimelineVariant, ToastContainerProps, ToastItem, ToastProps, ToastStatus, ToggleProps, ToolbarItem, ToolbarPosition, ToolbarProps, ToolbarSize, ToolbarVariant, TooltipPosition, TooltipProps, TooltipSize, TooltipVariant, TopBannerProps, TopBannerVariant, TutorialProps, TutorialStep, UploadFile, VideoPlayerProps, VideoPlayerSize, VideoPlayerTheme, VideoPlayerVariant, YouTubePlayerProps, YouTubePlayerSize, YouTubePlayerTheme, YouTubePlayerVariant };