@hua-labs/ui 1.0.0 → 1.1.0-alpha.0.2

package/dist/advanced.d.mts

@@ -0,0 +1,734 @@
+import { C as Color } from './dashboard-QMssHf5j.mjs';
+export { A as ActivityFeed, i as ActivityFeedProps, j as ActivityItem, x as DashboardEmptyState, y as DashboardEmptyStateProps, D as DashboardGrid, h as DashboardGridProps, z as DashboardSidebar, B as DashboardSidebarProps, L as DashboardToolbar, O as DashboardToolbarProps, V as DatePreset, U as DateRangeConfig, a2 as FeeBreakdown, l as MembershipBadge, m as MembershipBadgeProps, M as MembershipTier, ae as MerchantHealth, ab as MerchantList, ad as MerchantListItem, ac as MerchantListProps, t as MetricCard, u as MetricCardProps, n as MiniBarChart, o as MiniBarChartProps, N as NotificationCard, r as NotificationCardProps, s as NotificationItem, P as ProfileCard, k as ProfileCardProps, v as ProgressCard, w as ProgressCardProps, Q as QuickActionCard, g as QuickActionCardProps, a8 as RoutingBreakdownCard, a9 as RoutingBreakdownCardProps, aa as RoutingBreakdownSegment, c as SectionHeader, d as SectionHeaderProps, a1 as SettlementInfo, a4 as SettlementTimeline, a6 as SettlementTimelineItem, a5 as SettlementTimelineProps, a7 as SettlementTimelineStatus, E as SidebarNavItem, F as SidebarSection, e as StatCard, f as StatCardProps, S as StatsPanel, b as StatsPanelItem, a as StatsPanelProps, p as SummaryCard, q as SummaryCardProps, R as ToolbarAction, I as TransactionColumnConfig, J as TransactionColumnKey, $ as TransactionDetail, Z as TransactionDetailDrawer, _ as TransactionDetailDrawerProps, a3 as TransactionEvent, a0 as TransactionMetadataItem, H as TransactionRow, K as TransactionStatus, T as TransactionsTable, G as TransactionsTableProps, W as TrendChart, X as TrendChartProps, Y as TrendSeries } from './dashboard-QMssHf5j.mjs';
+export { AdvancedPageTransition, AdvancedPageTransitionProps, CubePageTransition, FadePageTransition, FlipPageTransition, MorphPageTransition, ScalePageTransition, SlidePageTransition, TransitionEasing, TransitionType, ZoomPageTransition, usePageTransition, usePageTransitionManager } from './advanced-motion.mjs';
+import React from 'react';
+export { C as ComponentLayout } from './ComponentLayout-BxCenSAm.mjs';
+import { I as IconName } from './icons-DoSGIez_.mjs';
+import 'lucide-react';
+
+/**
+ * Bookmark 컴포넌트의 props / Bookmark component props
+ * @typedef {Object} BookmarkProps
+ * @property {string} id - 북마크 고유 ID / Bookmark unique ID
+ * @property {string} [storageKey='bookmarks'] - localStorage 키 / localStorage key
+ * @property {boolean} [defaultBookmarked=false] - 기본 북마크 상태 / Default bookmarked state
+ * @property {(bookmarked: boolean) => void} [onBookmarkChange] - 북마크 상태 변경 콜백 / Bookmark state change callback
+ * @property {'sm' | 'md' | 'lg'} [size='md'] - Bookmark 크기 / Bookmark size
+ * @property {'default' | 'filled' | 'outline'} [variant='default'] - Bookmark 스타일 변형 / Bookmark style variant
+ * @extends {React.HTMLAttributes<HTMLButtonElement>}
+ */
+interface BookmarkProps extends React.HTMLAttributes<HTMLButtonElement> {
+    id: string;
+    storageKey?: string;
+    defaultBookmarked?: boolean;
+    onBookmarkChange?: (bookmarked: boolean) => void;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'filled' | 'outline';
+}
+/**
+ * Bookmark 컴포넌트 / Bookmark component
+ *
+ * 북마크 기능을 제공하는 버튼 컴포넌트입니다.
+ * localStorage에 북마크 상태를 저장하며, 여러 항목의 북마크를 관리할 수 있습니다.
+ *
+ * Button component that provides bookmark functionality.
+ * Saves bookmark state to localStorage and can manage bookmarks for multiple items.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Bookmark id="article-1" />
+ *
+ * @example
+ * // 상태 변경 감지 / State change detection
+ * <Bookmark
+ *   id="article-1"
+ *   onBookmarkChange={(bookmarked) => console.log(bookmarked)}
+ *   variant="filled"
+ * />
+ *
+ * @param {BookmarkProps} props - Bookmark 컴포넌트의 props / Bookmark component props
+ * @param {React.Ref<HTMLButtonElement>} ref - button 요소 ref / button element ref
+ * @returns {JSX.Element} Bookmark 컴포넌트 / Bookmark component
+ */
+declare const Bookmark: React.ForwardRefExoticComponent<BookmarkProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * ChatMessage 컴포넌트의 props / ChatMessage component props
+ * @typedef {Object} ChatMessageProps
+ * @property {Object} message - 메시지 데이터 / Message data
+ * @property {string} message.id - 메시지 ID / Message ID
+ * @property {string} message.content - 메시지 내용 / Message content
+ * @property {"user" | "assistant" | "system"} message.role - 메시지 역할 / Message role
+ * @property {Date} message.timestamp - 메시지 타임스탬프 / Message timestamp
+ * @property {string} [message.emotion] - 감정 정보 / Emotion information
+ * @property {number} [message.intensity] - 감정 강도 / Emotion intensity
+ * @property {boolean} [message.isTyping] - 타이핑 중 여부 / Typing state
+ * @property {Object} [user] - 사용자 정보 / User information
+ * @property {string} [user.name="사용자"] - 사용자 이름 / User name
+ * @property {string} [user.avatar] - 사용자 아바타 URL / User avatar URL
+ * @property {string} [user.color="#3b82f6"] - 사용자 색상 / User color
+ * @property {Object} [assistant] - AI 어시스턴트 정보 / AI assistant information
+ * @property {string} [assistant.name="AI"] - AI 이름 / AI name
+ * @property {string} [assistant.avatar] - AI 아바타 URL / AI avatar URL
+ * @property {string} [assistant.color="#10b981"] - AI 색상 / AI color
+ * @property {boolean} [showAvatar=true] - 아바타 표시 여부 / Show avatar
+ * @property {boolean} [showTimestamp=true] - 타임스탬프 표시 여부 / Show timestamp
+ * @property {boolean} [showEmotion=true] - 감정 표시 여부 / Show emotion
+ * @property {"default" | "compact" | "bubble"} [variant="default"] - ChatMessage 스타일 변형 / ChatMessage style variant
+ * @property {Object} [theme] - 커스텀 테마 / Custom theme
+ * @property {string} [theme.userBubbleBg] - 사용자 버블 배경색 / User bubble background color
+ * @property {string} [theme.userBubbleText] - 사용자 버블 텍스트 색상 / User bubble text color
+ * @property {string} [theme.aiBubbleBg] - AI 버블 배경색 / AI bubble background color
+ * @property {string} [theme.aiBubbleText] - AI 버블 텍스트 색상 / AI bubble text color
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    message: {
+        id: string;
+        content: string;
+        role: "user" | "assistant" | "system";
+        timestamp: Date;
+        emotion?: string;
+        intensity?: number;
+        isTyping?: boolean;
+    };
+    user?: {
+        name?: string;
+        avatar?: string;
+        color?: string;
+    };
+    assistant?: {
+        name?: string;
+        avatar?: string;
+        color?: string;
+    };
+    showAvatar?: boolean;
+    showTimestamp?: boolean;
+    showEmotion?: boolean;
+    variant?: "default" | "compact" | "bubble";
+    theme?: {
+        userBubbleBg?: string;
+        userBubbleText?: string;
+        aiBubbleBg?: string;
+        aiBubbleText?: string;
+    };
+}
+/**
+ * ChatMessage 컴포넌트
+ *
+ * 채팅 메시지를 표시하는 컴포넌트입니다.
+ * 사용자, AI 어시스턴트, 시스템 메시지를 지원하며, 감정 정보를 표시할 수 있습니다.
+ *
+ * @component
+ * @example
+ * // 기본 사용
+ * <ChatMessage
+ *   message={{
+ *     id: "1",
+ *     content: "안녕하세요!",
+ *     role: "user",
+ *     timestamp: new Date()
+ *   }}
+ * />
+ *
+ * @example
+ * // AI 메시지, 감정 정보 포함
+ * <ChatMessage
+ *   message={{
+ *     id: "2",
+ *     content: "안녕하세요! 도와드릴까요?",
+ *     role: "assistant",
+ *     timestamp: new Date(),
+ *     emotion: "joy",
+ *     intensity: 0.8
+ *   }}
+ *   variant="bubble"
+ * />
+ *
+ * @param {ChatMessageProps} props - ChatMessage 컴포넌트의 props / ChatMessage component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ChatMessage 컴포넌트 / ChatMessage component
+ */
+declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * EmotionAnalysis 컴포넌트의 props / EmotionAnalysis component props
+ * @typedef {Object} EmotionAnalysisProps
+ * @property {Object} [primaryEmotion] - 주요 감정 정보 / Primary emotion information
+ * @property {string} primaryEmotion.name - 감정 이름 / Emotion name
+ * @property {number} primaryEmotion.intensity - 감정 강도 (0-100) / Emotion intensity (0-100)
+ * @property {string} [primaryEmotion.color] - 감정 색상 / Emotion color
+ * @property {Array<Object>} [emotionDistribution] - 감정 분포 배열 / Emotion distribution array
+ * @property {string} emotionDistribution[].emotion - 감정 이름 / Emotion name
+ * @property {number} emotionDistribution[].percentage - 감정 비율 (0-100) / Emotion percentage (0-100)
+ * @property {string} emotionDistribution[].color - 감정 색상 / Emotion color
+ * @property {string[]} [keywords] - 키워드 배열 / Keywords array
+ * @property {number} [intensity=50] - 전체 강도 (0-100) / Overall intensity (0-100)
+ * @property {number} [positivity=70] - 긍정성 (0-100) / Positivity (0-100)
+ * @property {number} [energy=60] - 에너지 (0-100) / Energy (0-100)
+ * @property {boolean} [showMeter=true] - 강도 미터 표시 여부 / Show intensity meter
+ * @property {boolean} [showDistribution=true] - 분포 표시 여부 / Show distribution
+ * @property {boolean} [showKeywords=true] - 키워드 표시 여부 / Show keywords
+ * @property {boolean} [showMetrics=true] - 메트릭 표시 여부 / Show metrics
+ * @property {"compact" | "detailed" | "card"} [layout="detailed"] - 레이아웃 타입 / Layout type
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface EmotionAnalysisProps extends React.HTMLAttributes<HTMLDivElement> {
+    primaryEmotion?: {
+        name: string;
+        intensity: number;
+        color?: string;
+    };
+    emotionDistribution?: Array<{
+        emotion: string;
+        percentage: number;
+        color: string;
+    }>;
+    keywords?: string[];
+    intensity?: number;
+    positivity?: number;
+    energy?: number;
+    showMeter?: boolean;
+    showDistribution?: boolean;
+    showKeywords?: boolean;
+    showMetrics?: boolean;
+    layout?: "compact" | "detailed" | "card";
+}
+/**
+ * EmotionAnalysis 컴포넌트 / EmotionAnalysis component
+ *
+ * 감정 분석 결과를 표시하는 컴포넌트입니다.
+ * 주요 감정, 감정 분포, 키워드, 메트릭(강도, 긍정성, 에너지)을 표시할 수 있습니다.
+ *
+ * Component that displays emotion analysis results.
+ * Can display primary emotion, emotion distribution, keywords, and metrics (intensity, positivity, energy).
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <EmotionAnalysis
+ *   primaryEmotion={{ name: "기쁨", intensity: 80 }}
+ *   keywords={["행복", "만족"]}
+ * />
+ *
+ * @example
+ * // 상세 레이아웃 / Detailed layout
+ * <EmotionAnalysis
+ *   primaryEmotion={{ name: "평온", intensity: 65, color: "green" }}
+ *   emotionDistribution={[
+ *     { emotion: "기쁨", percentage: 40, color: "yellow" },
+ *     { emotion: "평온", percentage: 60, color: "green" }
+ *   ]}
+ *   keywords={["안정", "편안"]}
+ *   intensity={65}
+ *   positivity={75}
+ *   energy={50}
+ *   layout="detailed"
+ * />
+ *
+ * @param {EmotionAnalysisProps} props - EmotionAnalysis 컴포넌트의 props / EmotionAnalysis component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} EmotionAnalysis 컴포넌트 / EmotionAnalysis component
+ */
+declare const EmotionAnalysis: React.ForwardRefExoticComponent<EmotionAnalysisProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * EmotionButton 컴포넌트의 props / EmotionButton component props
+ * @typedef {Object} EmotionButtonProps
+ * @property {string} emotion - 감정 이모지 또는 텍스트 / Emotion emoji or text
+ * @property {boolean} [isSelected=false] - 선택 상태 / Selected state
+ * @property {"sm" | "md" | "lg"} [size="md"] - 버튼 크기 / Button size
+ * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}
+ */
+interface EmotionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    emotion: string;
+    isSelected?: boolean;
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * EmotionButton 컴포넌트 / EmotionButton component
+ *
+ * 감정을 선택하는 버튼 컴포넌트입니다.
+ * 이모지나 텍스트로 감정을 표시하며, 선택 상태를 지원합니다.
+ *
+ * Button component for selecting emotions.
+ * Displays emotion as emoji or text and supports selected state.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <EmotionButton emotion="😊" />
+ *
+ * @example
+ * // 선택 상태 / Selected state
+ * <EmotionButton
+ *   emotion="😊"
+ *   isSelected
+ *   size="lg"
+ * />
+ *
+ * @param {EmotionButtonProps} props - EmotionButton 컴포넌트의 props / EmotionButton component props
+ * @param {React.Ref<HTMLButtonElement>} ref - button 요소 ref / button element ref
+ * @returns {JSX.Element} EmotionButton 컴포넌트 / EmotionButton component
+ */
+declare const EmotionButton: React.ForwardRefExoticComponent<EmotionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * EmotionMeter 컴포넌트의 props / EmotionMeter component props
+ * @typedef {Object} EmotionMeterProps
+ * @property {number} value - 감정 강도 값 (0-max) / Emotion intensity value (0-max)
+ * @property {number} [max=100] - 최대값 / Maximum value
+ * @property {"sm" | "md" | "lg"} [size="md"] - 미터 크기 / Meter size
+ * @property {"blue" | "green" | "yellow" | "red"} [color="blue"] - 미터 색상 / Meter color
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface EmotionMeterProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: number;
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    color?: "blue" | "green" | "yellow" | "red" | Color;
+}
+/**
+ * EmotionMeter 컴포넌트 / EmotionMeter component
+ *
+ * 감정 강도를 표시하는 미터 컴포넌트입니다.
+ * Progress 컴포넌트와 유사하지만 감정 분석에 특화되어 있습니다.
+ *
+ * Meter component that displays emotion intensity.
+ * Similar to Progress component but specialized for emotion analysis.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <EmotionMeter value={75} />
+ *
+ * @example
+ * // 다양한 색상 / Various colors
+ * <EmotionMeter
+ *   value={80}
+ *   color="green"
+ *   size="lg"
+ * />
+ *
+ * @param {EmotionMeterProps} props - EmotionMeter 컴포넌트의 props / EmotionMeter component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} EmotionMeter 컴포넌트 / EmotionMeter component
+ */
+declare const EmotionMeter: React.ForwardRefExoticComponent<EmotionMeterProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * EmotionSelector 컴포넌트의 props / EmotionSelector component props
+ * @typedef {Object} EmotionSelectorProps
+ * @property {string} [selectedEmotion] - 선택된 감정 키 / Selected emotion key
+ * @property {(emotion: string) => void} [onEmotionSelect] - 감정 선택 콜백 / Emotion selection callback
+ * @property {"grid" | "list" | "compact"} [layout="grid"] - 레이아웃 타입 / Layout type
+ * @property {boolean} [showIntensity=false] - 강도 조절 표시 여부 / Show intensity control
+ * @property {number} [intensity=50] - 감정 강도 (0-100) / Emotion intensity (0-100)
+ * @property {(intensity: number) => void} [onIntensityChange] - 강도 변경 콜백 / Intensity change callback
+ * @property {Array<Object>} [emotions] - 감정 목록 / Emotions list
+ * @property {string} emotions[].key - 감정 키 / Emotion key
+ * @property {string} emotions[].label - 감정 라벨 / Emotion label
+ * @property {string} [emotions[].icon] - 감정 아이콘 / Emotion icon
+ * @property {string} [emotions[].color] - 감정 색상 / Emotion color
+ * @property {"sm" | "md" | "lg"} [size="md"] - 감정 버튼 크기 / Emotion button size
+ * @property {"button" | "card" | "chip"} [variant="button"] - 감정 표시 스타일 / Emotion display style
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface EmotionSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
+    selectedEmotion?: string;
+    onEmotionSelect?: (emotion: string) => void;
+    layout?: "grid" | "list" | "compact";
+    showIntensity?: boolean;
+    intensity?: number;
+    onIntensityChange?: (intensity: number) => void;
+    emotions?: Array<{
+        key: string;
+        label: string;
+        icon?: string;
+        color?: string;
+    }>;
+    size?: "sm" | "md" | "lg";
+    variant?: "button" | "card" | "chip";
+}
+/**
+ * EmotionSelector 컴포넌트 / EmotionSelector component
+ *
+ * 감정을 선택하는 컴포넌트입니다.
+ * 여러 감정 옵션을 제공하며, 강도 조절 기능을 포함할 수 있습니다.
+ *
+ * Component for selecting emotions.
+ * Provides multiple emotion options and can include intensity control.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <EmotionSelector
+ *   selectedEmotion="joy"
+ *   onEmotionSelect={(emotion) => console.log(emotion)}
+ * />
+ *
+ * @example
+ * // 강도 조절 포함 / With intensity control
+ * <EmotionSelector
+ *   selectedEmotion="calm"
+ *   onEmotionSelect={handleEmotionSelect}
+ *   showIntensity
+ *   intensity={intensity}
+ *   onIntensityChange={setIntensity}
+ *   variant="card"
+ * />
+ *
+ * @param {EmotionSelectorProps} props - EmotionSelector 컴포넌트의 props / EmotionSelector component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} EmotionSelector 컴포넌트 / EmotionSelector component
+ */
+declare const EmotionSelector: React.ForwardRefExoticComponent<EmotionSelectorProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * LanguageToggle 컴포넌트의 props / LanguageToggle component props
+ * @typedef {Object} LanguageToggleProps
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {"sm" | "md" | "lg"} [size="md"] - Toggle 크기 / Toggle size
+ * @property {"button" | "icon" | "dropdown"} [variant="button"] - Toggle 스타일 변형 / Toggle style variant
+ * @property {boolean} [showLabel=false] - 라벨 표시 여부 / Show label
+ * @property {Array<Object>} [languages] - 언어 목록 / Language list
+ * @property {string} languages[].code - 언어 코드 / Language code
+ * @property {string} languages[].name - 언어 이름 / Language name
+ * @property {string} [languages[].flag] - 언어 플래그 이모지 / Language flag emoji
+ * @property {string} [currentLanguage="ko"] - 현재 선택된 언어 코드 / Currently selected language code
+ * @property {(language: string) => void} [onLanguageChange] - 언어 변경 콜백 / Language change callback
+ */
+interface LanguageToggleProps {
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    variant?: "button" | "icon" | "dropdown";
+    showLabel?: boolean;
+    languages?: Array<{
+        code: string;
+        name: string;
+        flag?: string;
+    }>;
+    currentLanguage?: string;
+    onLanguageChange?: (language: string) => void;
+}
+/**
+ * LanguageToggle 컴포넌트 / LanguageToggle component
+ *
+ * 언어를 전환하는 토글 컴포넌트입니다.
+ * 여러 언어를 지원하며, 버튼, 아이콘, 드롭다운 형태로 표시할 수 있습니다.
+ *
+ * Toggle component for switching languages.
+ * Supports multiple languages and can be displayed as button, icon, or dropdown.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <LanguageToggle />
+ *
+ * @example
+ * // 드롭다운 형태 / Dropdown variant
+ * <LanguageToggle
+ *   variant="dropdown"
+ *   currentLanguage="en"
+ *   onLanguageChange={(lang) => console.log(lang)}
+ * />
+ *
+ * @param {LanguageToggleProps} props - LanguageToggle 컴포넌트의 props / LanguageToggle component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} LanguageToggle 컴포넌트 / LanguageToggle component
+ */
+declare const LanguageToggle: React.ForwardRefExoticComponent<LanguageToggleProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ScrollIndicator 컴포넌트의 props / ScrollIndicator component props
+ * @typedef {Object} ScrollIndicatorProps
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {string} [targetId] - 스크롤 대상 요소 ID / Target element ID to scroll to
+ * @property {string} [text='Scroll down'] - 표시 텍스트 / Display text
+ * @property {IconName} [iconName='arrowDown'] - 아이콘 이름 / Icon name
+ * @property {number} [iconSize=20] - 아이콘 크기 / Icon size
+ * @property {'bottom-center' | 'bottom-left' | 'bottom-right'} [position='bottom-center'] - 표시 위치 / Display position
+ * @property {'default' | 'primary' | 'secondary' | 'outline'} [variant='default'] - ScrollIndicator 스타일 변형 / ScrollIndicator style variant
+ * @property {'sm' | 'md' | 'lg'} [size='md'] - ScrollIndicator 크기 / ScrollIndicator size
+ * @property {boolean} [animated=true] - 애니메이션 활성화 여부 / Enable animation
+ * @property {boolean} [autoHide=true] - 자동 숨김 여부 / Auto hide
+ * @property {number} [hideThreshold=100] - 숨김 임계값 (px) / Hide threshold (px)
+ */
+interface ScrollIndicatorProps {
+    className?: string;
+    targetId?: string;
+    text?: string;
+    iconName?: IconName;
+    iconSize?: number;
+    position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
+    variant?: 'default' | 'primary' | 'secondary' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    animated?: boolean;
+    autoHide?: boolean;
+    hideThreshold?: number;
+}
+/**
+ * ScrollIndicator 컴포넌트 / ScrollIndicator component
+ *
+ * 스크롤 가능함을 나타내는 인디케이터 컴포넌트입니다.
+ * 클릭 시 지정된 요소로 스크롤하거나 다음 섹션으로 스크롤합니다.
+ *
+ * Indicator component that shows scrollability.
+ * Scrolls to specified element or next section on click.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ScrollIndicator />
+ *
+ * @example
+ * // 특정 요소로 스크롤 / Scroll to specific element
+ * <ScrollIndicator
+ *   targetId="section-2"
+ *   text="다음 섹션으로"
+ *   position="bottom-right"
+ * />
+ *
+ * @param {ScrollIndicatorProps} props - ScrollIndicator 컴포넌트의 props / ScrollIndicator component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ScrollIndicator 컴포넌트 / ScrollIndicator component
+ */
+declare const ScrollIndicator: React.ForwardRefExoticComponent<ScrollIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ScrollProgress 컴포넌트의 props / ScrollProgress component props
+ * @typedef {Object} ScrollProgressProps
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {number} [height=2] - 진행률 바 높이 (px) / Progress bar height (px)
+ * @property {'default' | 'primary' | 'secondary' | 'gradient'} [color='gradient'] - 진행률 바 색상 / Progress bar color
+ * @property {'top' | 'bottom'} [position='top'] - 표시 위치 / Display position
+ * @property {boolean} [animated=true] - 애니메이션 활성화 여부 / Enable animation
+ * @property {boolean} [showPercentage=false] - 퍼센트 표시 여부 / Show percentage
+ */
+interface ScrollProgressProps {
+    className?: string;
+    height?: number;
+    color?: 'default' | 'primary' | 'secondary' | 'gradient';
+    position?: 'top' | 'bottom';
+    animated?: boolean;
+    showPercentage?: boolean;
+}
+/**
+ * ScrollProgress 컴포넌트 / ScrollProgress component
+ *
+ * 페이지 스크롤 진행률을 표시하는 컴포넌트입니다.
+ * 페이지 상단 또는 하단에 고정되어 표시됩니다.
+ *
+ * Component that displays page scroll progress.
+ * Fixed at top or bottom of the page.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ScrollProgress />
+ *
+ * @example
+ * // 하단에 표시, 퍼센트 포함 / Display at bottom with percentage
+ * <ScrollProgress
+ *   position="bottom"
+ *   color="primary"
+ *   showPercentage
+ *   height={4}
+ * />
+ *
+ * @param {ScrollProgressProps} props - ScrollProgress 컴포넌트의 props / ScrollProgress component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ScrollProgress 컴포넌트 / ScrollProgress component
+ */
+declare const ScrollProgress: React.ForwardRefExoticComponent<ScrollProgressProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ScrollbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    variant?: "default" | "glass" | "colorful" | "minimal" | "neon";
+    size?: "sm" | "md" | "lg" | "xl";
+    orientation?: "vertical" | "horizontal" | "both";
+    autoHide?: boolean;
+    smooth?: boolean;
+}
+declare const Scrollbar: React.ForwardRefExoticComponent<ScrollbarProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * FeatureCard 컴포넌트의 props / FeatureCard component props
+ * @typedef {Object} FeatureCardProps
+ * @property {IconName | string} [icon] - 아이콘 (IconName 또는 이미지 URL) / Icon (IconName or image URL)
+ * @property {string} title - 카드 제목 / Card title
+ * @property {string} description - 카드 설명 / Card description
+ * @property {"default" | "gradient" | "glass" | "neon"} [variant="default"] - FeatureCard 스타일 변형 / FeatureCard style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - FeatureCard 크기 / FeatureCard size
+ * @property {"scale" | "glow" | "slide" | "none"} [hover="scale"] - 호버 효과 / Hover effect
+ * @property {"blue" | "purple" | "green" | "orange" | "pink" | "custom"} [gradient="blue"] - 그라디언트 색상 / Gradient color
+ * @property {string} [customGradient] - 커스텀 그라디언트 클래스 / Custom gradient class
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: IconName | string;
+    title: string;
+    description: string;
+    variant?: "default" | "gradient" | "glass" | "neon";
+    size?: "sm" | "md" | "lg";
+    hover?: "scale" | "glow" | "slide" | "none";
+    gradient?: "blue" | "purple" | "green" | "orange" | "pink" | "custom";
+    customGradient?: string;
+}
+/**
+ * FeatureCard 컴포넌트 / FeatureCard component
+ *
+ * 기능을 소개하는 카드 컴포넌트입니다.
+ * 아이콘, 제목, 설명을 포함하며, 다양한 스타일과 호버 효과를 지원합니다.
+ *
+ * Card component that introduces features.
+ * Includes icon, title, and description, supports various styles and hover effects.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <FeatureCard
+ *   icon="star"
+ *   title="고급 기능"
+ *   description="강력한 기능을 제공합니다"
+ * />
+ *
+ * @example
+ * // Gradient 스타일 / Gradient style
+ * <FeatureCard
+ *   icon="zap"
+ *   title="빠른 성능"
+ *   description="최적화된 성능"
+ *   variant="gradient"
+ *   gradient="purple"
+ *   hover="glow"
+ * />
+ *
+ * @param {FeatureCardProps} props - FeatureCard 컴포넌트의 props / FeatureCard component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} FeatureCard 컴포넌트 / FeatureCard component
+ */
+declare const FeatureCard: React.ForwardRefExoticComponent<FeatureCardProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * HeroSection 컴포넌트의 props / HeroSection component props
+ * @typedef {Object} HeroSectionProps
+ * @property {string} title - 히어로 섹션 제목 / Hero section title
+ * @property {string} [subtitle] - 히어로 섹션 부제목 / Hero section subtitle
+ * @property {string} description - 히어로 섹션 설명 / Hero section description
+ * @property {Object} [primaryAction] - 주요 액션 버튼 / Primary action button
+ * @property {string} primaryAction.label - 버튼 라벨 / Button label
+ * @property {string} primaryAction.href - 버튼 링크 / Button link
+ * @property {string} [primaryAction.icon] - 버튼 아이콘 / Button icon
+ * @property {Object} [secondaryAction] - 보조 액션 버튼 / Secondary action button
+ * @property {string} secondaryAction.label - 버튼 라벨 / Button label
+ * @property {string} secondaryAction.href - 버튼 링크 / Button link
+ * @property {string} [secondaryAction.icon] - 버튼 아이콘 / Button icon
+ * @property {"default" | "gradient" | "glass" | "neon"} [variant="default"] - HeroSection 스타일 변형 / HeroSection style variant
+ * @property {"none" | "gradient" | "particles" | "video"} [background="gradient"] - 배경 타입 / Background type
+ * @property {string} [customBackground] - 커스텀 배경 / Custom background
+ * @property {"sm" | "md" | "lg" | "xl"} [size="lg"] - HeroSection 크기 / HeroSection size
+ * @extends {React.HTMLAttributes<HTMLElement>}
+ */
+interface HeroSectionProps extends React.HTMLAttributes<HTMLElement> {
+    title: string;
+    subtitle?: string;
+    description: string;
+    primaryAction?: {
+        label: string;
+        href: string;
+        icon?: string;
+    };
+    secondaryAction?: {
+        label: string;
+        href: string;
+        icon?: string;
+    };
+    variant?: "default" | "gradient" | "glass" | "neon";
+    background?: "none" | "gradient" | "particles" | "video";
+    customBackground?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+}
+/**
+ * HeroSection 컴포넌트 / HeroSection component
+ *
+ * 랜딩 페이지의 히어로 섹션을 제공하는 컴포넌트입니다.
+ * 제목, 설명, 액션 버튼을 포함하며, 다양한 배경 효과를 지원합니다.
+ *
+ * Component that provides hero section for landing pages.
+ * Includes title, description, and action buttons, supports various background effects.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <HeroSection
+ *   title="환영합니다"
+ *   description="우리 서비스를 소개합니다"
+ *   primaryAction={{ label: "시작하기", href: "/start" }}
+ * />
+ *
+ * @example
+ * // Gradient 배경, 두 개의 액션 버튼 / Gradient background, two action buttons
+ * <HeroSection
+ *   title="혁신적인 솔루션"
+ *   subtitle="차세대 플랫폼"
+ *   description="최신 기술로 만든 플랫폼"
+ *   variant="gradient"
+ *   background="gradient"
+ *   primaryAction={{ label: "시작하기", href: "/start", icon: "arrowRight" }}
+ *   secondaryAction={{ label: "더 알아보기", href: "/about" }}
+ * />
+ *
+ * @param {HeroSectionProps} props - HeroSection 컴포넌트의 props / HeroSection component props
+ * @param {React.Ref<HTMLElement>} ref - section 요소 ref / section element ref
+ * @returns {JSX.Element} HeroSection 컴포넌트 / HeroSection component
+ */
+declare const HeroSection: React.ForwardRefExoticComponent<HeroSectionProps & React.RefAttributes<HTMLElement>>;
+
+/**
+ * InfoCard 컴포넌트의 props / InfoCard component props
+ * @typedef {Object} InfoCardProps
+ * @property {string} title - 카드 제목 / Card title
+ * @property {IconName} icon - 카드 아이콘 / Card icon
+ * @property {"blue" | "purple" | "green" | "orange"} [tone="blue"] - InfoCard 톤 색상 / InfoCard tone color
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface InfoCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    icon: IconName;
+    tone?: "blue" | "purple" | "green" | "orange";
+}
+/**
+ * InfoCard 컴포넌트 / InfoCard component
+ *
+ * 정보를 표시하는 카드 컴포넌트입니다.
+ * 아이콘, 제목, 내용을 포함하며, 다양한 톤 색상을 지원합니다.
+ *
+ * Card component that displays information.
+ * Includes icon, title, and content, supports various tone colors.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <InfoCard
+ *   icon="info"
+ *   title="정보"
+ *   tone="blue"
+ * >
+ *   이것은 정보 카드입니다.
+ * </InfoCard>
+ *
+ * @example
+ * // 다양한 톤 / Various tones
+ * <InfoCard icon="check" title="성공" tone="green">
+ *   작업이 완료되었습니다.
+ * </InfoCard>
+ *
+ * @param {InfoCardProps} props - InfoCard 컴포넌트의 props / InfoCard component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} InfoCard 컴포넌트 / InfoCard component
+ */
+declare const InfoCard: React.ForwardRefExoticComponent<InfoCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Bookmark, ChatMessage, EmotionAnalysis, EmotionButton, EmotionMeter, EmotionSelector, FeatureCard, HeroSection, InfoCard, LanguageToggle, ScrollIndicator, ScrollProgress, Scrollbar };