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

package/dist/dashboard-QMssHf5j.d.mts

@@ -0,0 +1,1801 @@
+import React from 'react';
+import { I as IconName } from './icons-DoSGIez_.mjs';
+
+/**
+ * HUA UI 공통 타입 정의
+ * 모든 컴포넌트에서 사용하는 표준 타입들을 정의합니다.
+ */
+
+/**
+ * 공통 색상 타입
+ * 모든 컴포넌트에서 사용하는 표준 색상 팔레트
+ */
+type Color = "blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray";
+
+/**
+ * StatCard 컴포넌트의 props / StatCard component props
+ * @typedef {Object} StatCardProps
+ * @property {string} title - 카드 제목 / Card title
+ * @property {string | number | null | undefined} value - 통계 값 / Statistic value
+ * @property {string} [description] - 카드 설명 / Card description
+ * @property {IconName | React.ReactNode} [icon] - 아이콘 / Icon
+ * @property {Object} [trend] - 추세 정보 / Trend information
+ * @property {number} trend.value - 추세 값 / Trend value
+ * @property {string} trend.label - 추세 라벨 / Trend label
+ * @property {boolean} [trend.positive] - 긍정적 추세 여부 / Positive trend
+ * @property {"default" | "gradient" | "outline" | "elevated"} [variant="default"] - 카드 스타일 변형 / Card style variant
+ * @property {"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray"} [color] - 카드 색상 / Card color
+ * @property {boolean} [loading] - 로딩 상태 / Loading state
+ * @property {React.ReactNode} [emptyState] - 빈 상태 컴포넌트 / Empty state component
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    value: string | number | null | undefined;
+    description?: string;
+    icon?: IconName | React.ReactNode;
+    trend?: {
+        value: number;
+        label: string;
+        positive?: boolean;
+    };
+    variant?: "default" | "gradient" | "outline" | "elevated";
+    color?: Color;
+    loading?: boolean;
+    emptyState?: React.ReactNode;
+}
+/**
+ * StatCard 컴포넌트 / StatCard component
+ *
+ * 통계 정보를 표시하는 카드 컴포넌트입니다.
+ * 제목, 값, 설명, 아이콘, 추세 정보를 포함할 수 있습니다.
+ *
+ * Card component that displays statistic information.
+ * Can include title, value, description, icon, and trend information.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <StatCard
+ *   title="총 사용자"
+ *   value="1,234"
+ *   description="지난 달 대비"
+ *   icon="users"
+ * />
+ *
+ * @example
+ * // 추세 정보 포함 / With trend information
+ * <StatCard
+ *   title="매출"
+ *   value="₩1,000,000"
+ *   trend={{ value: 12.5, label: "전월 대비", positive: true }}
+ *   color="green"
+ *   variant="gradient"
+ * />
+ *
+ * @param {StatCardProps} props - StatCard 컴포넌트의 props / StatCard component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} StatCard 컴포넌트 / StatCard component
+ */
+declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * QuickActionCard 컴포넌트의 props / QuickActionCard component props
+ * @typedef {Object} QuickActionCardProps
+ * @property {string} title - 카드 제목 / Card title
+ * @property {string} [description] - 카드 설명 / Card description
+ * @property {IconName | React.ReactNode} [icon] - 아이콘 / Icon
+ * @property {string} [href] - 링크 URL / Link URL
+ * @property {() => void} [onClick] - 클릭 핸들러 / Click handler
+ * @property {"gradient" | "outline" | "solid"} [variant="gradient"] - 카드 스타일 변형 / Card style variant
+ * @property {"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray"} [color="blue"] - 카드 색상 / Card color
+ * @property {boolean} [loading] - 로딩 상태 / Loading state
+ * @extends {React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>}
+ */
+interface QuickActionCardProps extends React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {
+    title: string;
+    description?: string;
+    icon?: IconName | React.ReactNode;
+    href?: string;
+    onClick?: () => void;
+    variant?: "gradient" | "outline" | "solid";
+    color?: Color;
+    loading?: boolean;
+}
+/**
+ * QuickActionCard 컴포넌트 / QuickActionCard component
+ *
+ * 빠른 액션을 수행하는 카드 컴포넌트입니다.
+ * 링크나 버튼으로 동작하며, 클릭 가능한 액션 카드로 사용됩니다.
+ *
+ * Card component for quick actions.
+ * Works as a link or button, used as a clickable action card.
+ *
+ * @component
+ * @example
+ * // 링크 카드 / Link card
+ * <QuickActionCard
+ *   title="새 주문 생성"
+ *   description="주문을 빠르게 생성하세요"
+ *   icon="plus"
+ *   href="/orders/new"
+ *   color="blue"
+ * />
+ *
+ * @example
+ * // 버튼 카드 / Button card
+ * <QuickActionCard
+ *   title="리포트 다운로드"
+ *   description="최신 리포트를 다운로드하세요"
+ *   icon="download"
+ *   onClick={handleDownload}
+ *   variant="outline"
+ *   color="green"
+ * />
+ *
+ * @param {QuickActionCardProps} props - QuickActionCard 컴포넌트의 props / QuickActionCard component props
+ * @param {React.Ref<HTMLAnchorElement | HTMLButtonElement>} ref - anchor 또는 button 요소 ref / anchor or button element ref
+ * @returns {JSX.Element} QuickActionCard 컴포넌트 / QuickActionCard component
+ */
+declare const QuickActionCard: React.ForwardRefExoticComponent<QuickActionCardProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
+/**
+ * DashboardGrid 컴포넌트의 props
+ * @typedef {Object} DashboardGridProps
+ * @property {1 | 2 | 3 | 4 | 5 | 6} [columns=4] - 그리드 컬럼 수
+ * @property {"sm" | "md" | "lg" | "xl"} [gap="md"] - 그리드 간격
+ * @property {boolean} [responsive=true] - 반응형 여부
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface DashboardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: 1 | 2 | 3 | 4 | 5 | 6;
+    gap?: "sm" | "md" | "lg" | "xl";
+    responsive?: boolean;
+}
+/**
+ * DashboardGrid 컴포넌트
+ *
+ * 대시보드 그리드 레이아웃을 제공하는 컴포넌트입니다.
+ * 반응형 그리드를 지원하며, 다양한 컬럼 수와 간격을 설정할 수 있습니다.
+ *
+ * Dashboard grid layout component.
+ * Supports responsive grid with configurable column count and gap sizes.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <DashboardGrid columns={4}>
+ *   <StatCard title="항목 1" value="100" />
+ *   <StatCard title="항목 2" value="200" />
+ * </DashboardGrid>
+ *
+ * @example
+ * // 반응형 그리드 / Responsive grid
+ * <DashboardGrid columns={3} gap="lg" responsive>
+ *   <MetricCard title="메트릭 1" value="1,000" />
+ *   <MetricCard title="메트릭 2" value="2,000" />
+ * </DashboardGrid>
+ *
+ * @param {DashboardGridProps} props - DashboardGrid 컴포넌트의 props / DashboardGrid component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} DashboardGrid 컴포넌트 / DashboardGrid component
+ */
+declare const DashboardGrid: React.ForwardRefExoticComponent<DashboardGridProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ActivityItem 인터페이스 / ActivityItem interface
+ * @typedef {Object} ActivityItem
+ * @property {string} id - 활동 항목 고유 ID / Activity item unique ID
+ * @property {string} title - 활동 제목 / Activity title
+ * @property {string} [description] - 활동 설명 / Activity description
+ * @property {Date | string} timestamp - 활동 타임스탬프 / Activity timestamp
+ * @property {IconName | React.ReactNode} [icon] - 아이콘 / Icon
+ * @property {string | React.ReactNode} [badge] - 배지 / Badge
+ * @property {() => void} [onClick] - 클릭 핸들러 / Click handler
+ * @property {Record<string, unknown>} [metadata] - 추가 메타데이터 / Additional metadata
+ */
+interface ActivityItem {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp: Date | string;
+    icon?: IconName | React.ReactNode;
+    badge?: string | React.ReactNode;
+    onClick?: () => void;
+    metadata?: Record<string, unknown>;
+}
+/**
+ * ActivityFeed 컴포넌트의 props / ActivityFeed component props
+ * @typedef {Object} ActivityFeedProps
+ * @property {string} [title] - 피드 제목 / Feed title
+ * @property {ActivityItem[]} items - 활동 항목 배열 / Activity items array
+ * @property {string} [emptyMessage="활동 내역이 없습니다."] - 빈 상태 메시지 / Empty state message
+ * @property {boolean} [showHeader=true] - 헤더 표시 여부 / Show header
+ * @property {number} [maxItems] - 최대 표시 항목 수 / Maximum items to display
+ * @property {() => void} [onViewAll] - 전체 보기 핸들러 / View all handler
+ * @property {string} [viewAllLabel="전체 보기"] - 전체 보기 라벨 / View all label
+ * @property {React.ReactNode} [emptyState] - 빈 상태 컴포넌트 / Empty state component
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface ActivityFeedProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    items: ActivityItem[];
+    emptyMessage?: string;
+    showHeader?: boolean;
+    maxItems?: number;
+    onViewAll?: () => void;
+    viewAllLabel?: string;
+    emptyState?: React.ReactNode;
+}
+/**
+ * ActivityFeed 컴포넌트 / ActivityFeed component
+ *
+ * 활동 내역을 표시하는 피드 컴포넌트입니다.
+ * 타임스탬프를 상대 시간으로 표시하며, 최대 항목 수 제한을 지원합니다.
+ *
+ * Feed component that displays activity history.
+ * Shows timestamps as relative time and supports maximum items limit.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ActivityFeed
+ *   title="최근 활동"
+ *   items={[
+ *     {
+ *       id: "1",
+ *       title: "새 주문 생성",
+ *       description: "주문 #1234",
+ *       timestamp: new Date(),
+ *       icon: "shoppingCart"
+ *     }
+ *   ]}
+ * />
+ *
+ * @example
+ * // 최대 항목 수 제한 / Maximum items limit
+ * <ActivityFeed
+ *   title="활동 내역"
+ *   items={activities}
+ *   maxItems={10}
+ *   onViewAll={() => navigate("/activities")}
+ * />
+ *
+ * @param {ActivityFeedProps} props - ActivityFeed 컴포넌트의 props / ActivityFeed component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ActivityFeed 컴포넌트 / ActivityFeed component
+ */
+declare const ActivityFeed: React.ForwardRefExoticComponent<ActivityFeedProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * 멤버십 등급 인터페이스
+ * @typedef {Object} MembershipTier
+ * @property {"basic" | "pro" | "premium" | "admin"} tier - 등급
+ * @property {string} label - 등급 라벨
+ */
+interface MembershipTier {
+    tier: "basic" | "pro" | "premium" | "admin";
+    label: string;
+}
+/**
+ * ProfileCard 컴포넌트의 props / ProfileCard component props
+ * @typedef {Object} ProfileCardProps
+ * @property {string} name - 사용자 이름 / User name
+ * @property {string} [email] - 이메일 / Email
+ * @property {string} [avatar] - 아바타 이미지 URL / Avatar image URL
+ * @property {string} [avatarAlt] - 아바타 대체 텍스트 / Avatar alt text
+ * @property {string} [greeting] - 인사말 / Greeting
+ * @property {Date | string} [memberSince] - 가입일 / Member since date
+ * @property {MembershipTier["tier"]} [membershipTier] - 멤버십 등급 / Membership tier
+ * @property {string} [membershipLabel] - 멤버십 라벨 / Membership label
+ * @property {() => void} [onSettingsClick] - 설정 클릭 핸들러 / Settings click handler
+ * @property {string} [settingsHref] - 설정 링크 URL / Settings link URL
+ * @property {"default" | "gradient" | "minimal"} [variant="default"] - 스타일 변형 / Style variant
+ * @property {boolean} [showAvatar=true] - 아바타 표시 여부 / Show avatar
+ * @property {boolean} [showMembership=true] - 멤버십 표시 여부 / Show membership
+ * @property {boolean} [showSettings=true] - 설정 버튼 표시 여부 / Show settings button
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: string;
+    email?: string;
+    avatar?: string;
+    avatarAlt?: string;
+    greeting?: string;
+    memberSince?: Date | string;
+    membershipTier?: MembershipTier["tier"];
+    membershipLabel?: string;
+    onSettingsClick?: () => void;
+    settingsHref?: string;
+    variant?: "default" | "gradient" | "minimal";
+    showAvatar?: boolean;
+    showMembership?: boolean;
+    showSettings?: boolean;
+}
+/**
+ * ProfileCard 컴포넌트
+ *
+ * 사용자 프로필 정보를 표시하는 카드 컴포넌트입니다.
+ * 아바타, 이름, 이메일, 멤버십 등급 등을 표시할 수 있습니다.
+ *
+ * Card component that displays user profile information.
+ * Can show avatar, name, email, membership tier, and more.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ProfileCard
+ *   name="홍길동"
+ *   email="hong@example.com"
+ *   avatar="/avatar.jpg"
+ *   membershipTier="premium"
+ *   memberSince={new Date("2024-01-01")}
+ * />
+ *
+ * @example
+ * // 그라디언트 스타일 / Gradient style
+ * <ProfileCard
+ *   name="김철수"
+ *   greeting="안녕하세요"
+ *   variant="gradient"
+ *   membershipTier="pro"
+ *   onSettingsClick={() => navigate("/settings")}
+ * />
+ *
+ * @param {ProfileCardProps} props - ProfileCard 컴포넌트의 props / ProfileCard component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ProfileCard 컴포넌트 / ProfileCard component
+ */
+declare const ProfileCard: React.ForwardRefExoticComponent<ProfileCardProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * MembershipBadge 컴포넌트의 props / MembershipBadge component props
+ * @typedef {Object} MembershipBadgeProps
+ * @property {"basic" | "pro" | "premium" | "admin"} tier - 멤버십 등급 / Membership tier
+ * @property {string} [label] - 커스텀 라벨 (기본값: 등급별 라벨) / Custom label (default: tier-specific label)
+ * @property {"sm" | "md" | "lg"} [size="md"] - 배지 크기 / Badge size
+ * @property {boolean} [showIcon=true] - 아이콘 표시 여부 / Show icon
+ * @extends {React.HTMLAttributes<HTMLSpanElement>}
+ */
+interface MembershipBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    tier: "basic" | "pro" | "premium" | "admin";
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    showIcon?: boolean;
+}
+/**
+ * MembershipBadge 컴포넌트
+ *
+ * 멤버십 등급을 표시하는 배지 컴포넌트입니다.
+ * 등급별로 다른 그라디언트 색상과 아이콘을 제공합니다.
+ *
+ * Badge component that displays membership tier.
+ * Provides different gradient colors and icons for each tier.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <MembershipBadge tier="premium" />
+ *
+ * @example
+ * // 커스텀 라벨과 크기 / Custom label and size
+ * <MembershipBadge
+ *   tier="pro"
+ *   label="프로 플랜"
+ *   size="lg"
+ *   showIcon={false}
+ * />
+ *
+ * @param {MembershipBadgeProps} props - MembershipBadge 컴포넌트의 props / MembershipBadge component props
+ * @param {React.Ref<HTMLSpanElement>} ref - span 요소 ref / span element ref
+ * @returns {JSX.Element} MembershipBadge 컴포넌트 / MembershipBadge component
+ */
+declare const MembershipBadge: React.ForwardRefExoticComponent<MembershipBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * MiniBarChart 컴포넌트의 props
+ * @typedef {Object} MiniBarChartProps
+ * @property {number[]} data - 차트 데이터 배열
+ * @property {string[]} [labels] - 라벨 배열
+ * @property {number} [maxValue] - 최대값 (자동 계산 시 생략)
+ * @property {number} [height=160] - 차트 높이 (px)
+ * @property {boolean} [showTooltip=true] - 툴팁 표시 여부
+ * @property {boolean} [showStats=true] - 통계 정보 표시 여부
+ * @property {"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray"} [color="blue"] - 색상
+ * @property {boolean} [highlightToday=true] - 오늘 항목 강조 여부
+ * @property {number} [todayIndex] - 오늘 인덱스 (기본값: 마지막 항목)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface MiniBarChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    data: number[];
+    labels?: string[];
+    maxValue?: number;
+    height?: number;
+    showTooltip?: boolean;
+    showStats?: boolean;
+    color?: Color;
+    highlightToday?: boolean;
+    todayIndex?: number;
+}
+/**
+ * MiniBarChart 컴포넌트
+ *
+ * 작은 막대 그래프 차트 컴포넌트입니다.
+ * 간단한 데이터 시각화에 적합하며, 오늘 항목 강조 기능을 제공합니다.
+ *
+ * Small bar chart component for simple data visualization.
+ * Suitable for compact displays with today's item highlight feature.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <MiniBarChart
+ *   data={[10, 20, 15, 30, 25, 40, 35]}
+ *   labels={["월", "화", "수", "목", "금", "토", "일"]}
+ * />
+ *
+ * @example
+ * // 커스텀 색상과 통계 / Custom color and stats
+ * <MiniBarChart
+ *   data={dailyData}
+ *   color="purple"
+ *   showStats={true}
+ *   highlightToday={true}
+ *   todayIndex={6}
+ * />
+ *
+ * @param {MiniBarChartProps} props - MiniBarChart 컴포넌트의 props / MiniBarChart component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} MiniBarChart 컴포넌트 / MiniBarChart component
+ */
+declare const MiniBarChart: React.ForwardRefExoticComponent<MiniBarChartProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * SummaryCard 컴포넌트의 props
+ * @typedef {Object} SummaryCardProps
+ * @property {string} title - 카드 제목
+ * @property {string | number} value - 요약 값
+ * @property {string} [subtitle] - 부제목
+ * @property {IconName | React.ReactNode} [icon] - 아이콘
+ * @property {"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray"} [color] - 카드 색상
+ * @property {"default" | "gradient" | "outline"} [variant="default"] - 카드 스타일 변형
+ * @property {string} [href] - 링크 URL
+ * @property {() => void} [onClick] - 클릭 핸들러
+ * @property {boolean} [loading] - 로딩 상태
+ * @property {string | React.ReactNode} [badge] - 배지
+ * @property {React.ReactNode} [footer] - 푸터 콘텐츠
+ * @property {boolean} [showAction] - 액션 버튼 표시 여부
+ * @property {string} [actionLabel] - 액션 버튼 라벨
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    value: string | number;
+    subtitle?: string;
+    icon?: IconName | React.ReactNode;
+    color?: Color;
+    variant?: "default" | "gradient" | "outline";
+    href?: string;
+    onClick?: () => void;
+    loading?: boolean;
+    badge?: string | React.ReactNode;
+    footer?: React.ReactNode;
+    showAction?: boolean;
+    actionLabel?: string;
+}
+/**
+ * SummaryCard 컴포넌트 / SummaryCard component
+ *
+ * 요약 정보를 표시하는 카드 컴포넌트입니다.
+ * 제목, 값, 부제목, 아이콘을 포함하며, 클릭 가능한 링크나 액션 버튼을 지원합니다.
+ *
+ * Card component that displays summary information.
+ * Includes title, value, subtitle, icon, and supports clickable links or action buttons.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <SummaryCard
+ *   title="총 매출"
+ *   value="₩10,000,000"
+ *   subtitle="이번 달"
+ *   icon="dollarSign"
+ * />
+ *
+ * @example
+ * // 클릭 가능한 카드 / Clickable card
+ * <SummaryCard
+ *   title="주문"
+ *   value="1,234"
+ *   href="/orders"
+ *   showAction
+ *   actionLabel="자세히 보기"
+ *   color="blue"
+ *   variant="gradient"
+ * />
+ *
+ * @param {SummaryCardProps} props - SummaryCard 컴포넌트의 props / SummaryCard component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} SummaryCard 컴포넌트 / SummaryCard component
+ */
+declare const SummaryCard: React.ForwardRefExoticComponent<SummaryCardProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * NotificationItem 인터페이스
+ * @typedef {Object} NotificationItem
+ * @property {string} id - 알림 고유 ID
+ * @property {string} title - 알림 제목
+ * @property {string} message - 알림 메시지
+ * @property {Date | string} timestamp - 알림 타임스탬프
+ * @property {"info" | "warning" | "error" | "success"} [type] - 알림 타입
+ * @property {IconName | React.ReactNode} [icon] - 아이콘
+ * @property {() => void} [onClick] - 클릭 핸들러
+ * @property {string} [href] - 링크 URL
+ */
+interface NotificationItem {
+    id: string;
+    title: string;
+    message: string;
+    timestamp: Date | string;
+    type?: "info" | "warning" | "error" | "success";
+    icon?: IconName | React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+}
+/**
+ * NotificationCard 컴포넌트의 props / NotificationCard component props
+ * @typedef {Object} NotificationCardProps
+ * @property {string} [title="알림 및 공지"] - 카드 제목 / Card title
+ * @property {NotificationItem[]} items - 알림 항목 배열 / Notification items array
+ * @property {string} [emptyMessage="알림이 없습니다."] - 빈 상태 메시지 / Empty state message
+ * @property {number} [maxItems] - 최대 표시 항목 수 / Maximum items to display
+ * @property {() => void} [onViewAll] - 전체 보기 핸들러 / View all handler
+ * @property {string} [viewAllLabel="모든 알림 보기"] - 전체 보기 라벨 / View all label
+ * @property {boolean} [showHeader=true] - 헤더 표시 여부 / Show header
+ * @property {boolean} [showCount=true] - 개수 표시 여부 / Show count
+ * @property {React.ReactNode} [emptyState] - 빈 상태 컴포넌트 / Empty state component
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface NotificationCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    items: NotificationItem[];
+    emptyMessage?: string;
+    maxItems?: number;
+    onViewAll?: () => void;
+    viewAllLabel?: string;
+    showHeader?: boolean;
+    showCount?: boolean;
+    emptyState?: React.ReactNode;
+}
+/**
+ * NotificationCard 컴포넌트 / NotificationCard component
+ *
+ * 알림 목록을 표시하는 카드 컴포넌트입니다.
+ * 여러 알림 항목을 표시하며, 타입별로 다른 스타일을 적용할 수 있습니다.
+ *
+ * Card component that displays a list of notifications.
+ * Shows multiple notification items and can apply different styles by type.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <NotificationCard
+ *   items={[
+ *     {
+ *       id: "1",
+ *       title: "새 주문",
+ *       message: "주문 #1234가 생성되었습니다",
+ *       timestamp: new Date(),
+ *       type: "success"
+ *     }
+ *   ]}
+ * />
+ *
+ * @example
+ * // 최대 항목 수 제한 / Maximum items limit
+ * <NotificationCard
+ *   title="최근 알림"
+ *   items={notifications}
+ *   maxItems={5}
+ *   onViewAll={() => navigate("/notifications")}
+ *   showCount
+ * />
+ *
+ * @param {NotificationCardProps} props - NotificationCard 컴포넌트의 props / NotificationCard component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} NotificationCard 컴포넌트 / NotificationCard component
+ */
+declare const NotificationCard: React.ForwardRefExoticComponent<NotificationCardProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * MetricCard 컴포넌트의 props / MetricCard component props
+ * @typedef {Object} MetricCardProps
+ * @property {string} title - 카드 제목 / Card title
+ * @property {string | number} value - 메트릭 값 / Metric value
+ * @property {string} [description] - 카드 설명 / Card description
+ * @property {IconName | React.ReactNode} [icon] - 아이콘 / Icon
+ * @property {Object} [trend] - 추세 정보 / Trend information
+ * @property {number} trend.value - 추세 값 / Trend value
+ * @property {string} trend.label - 추세 라벨 / Trend label
+ * @property {boolean} [trend.positive] - 긍정적 추세 여부 / Positive trend
+ * @property {number[]} [chartData] - 차트 데이터 / Chart data
+ * @property {string[]} [chartLabels] - 차트 라벨 / Chart labels
+ * @property {"default" | "gradient" | "outline" | "elevated"} [variant="default"] - 카드 스타일 변형 / Card style variant
+ * @property {"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray"} [color] - 카드 색상 / Card color
+ * @property {boolean} [loading] - 로딩 상태 / Loading state
+ * @property {boolean} [showChart] - 차트 표시 여부 / Show chart
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface MetricCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    value: string | number;
+    description?: string;
+    icon?: IconName | React.ReactNode;
+    trend?: {
+        value: number;
+        label: string;
+        positive?: boolean;
+    };
+    chartData?: number[];
+    chartLabels?: string[];
+    variant?: "default" | "gradient" | "outline" | "elevated";
+    color?: Color;
+    loading?: boolean;
+    showChart?: boolean;
+}
+/**
+ * MetricCard 컴포넌트 / MetricCard component
+ *
+ * 메트릭 정보를 표시하는 카드 컴포넌트입니다.
+ * StatCard와 유사하지만 차트 데이터를 포함할 수 있습니다.
+ *
+ * Card component that displays metric information.
+ * Similar to StatCard but can include chart data.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <MetricCard
+ *   title="페이지뷰"
+ *   value="10,234"
+ *   description="오늘"
+ *   icon="eye"
+ * />
+ *
+ * @example
+ * // 차트 포함 / With chart
+ * <MetricCard
+ *   title="방문자"
+ *   value="5,678"
+ *   chartData={[100, 200, 150, 300, 250]}
+ *   chartLabels={["월", "화", "수", "목", "금"]}
+ *   showChart
+ *   color="blue"
+ * />
+ *
+ * @param {MetricCardProps} props - MetricCard 컴포넌트의 props / MetricCard component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} MetricCard 컴포넌트 / MetricCard component
+ */
+declare const MetricCard: React.ForwardRefExoticComponent<MetricCardProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ProgressCard 컴포넌트의 props / ProgressCard component props
+ * @typedef {Object} ProgressCardProps
+ * @property {string} title - 카드 제목 / Card title
+ * @property {number} current - 현재 값 / Current value
+ * @property {number} total - 전체 값 / Total value
+ * @property {string} [unit] - 단위 / Unit
+ * @property {string} [description] - 카드 설명 / Card description
+ * @property {IconName | React.ReactNode} [icon] - 아이콘 / Icon
+ * @property {"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray"} [color] - 카드 색상 / Card color
+ * @property {"default" | "gradient" | "outline" | "elevated"} [variant="default"] - 카드 스타일 변형 / Card style variant
+ * @property {boolean} [showPercentage] - 퍼센트 표시 여부 / Show percentage
+ * @property {boolean} [showLabel] - 라벨 표시 여부 / Show label
+ * @property {"sm" | "md" | "lg"} [size="md"] - 카드 크기 / Card size
+ * @property {boolean} [loading] - 로딩 상태 / Loading state
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface ProgressCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    current: number;
+    total: number;
+    unit?: string;
+    description?: string;
+    icon?: IconName | React.ReactNode;
+    color?: Color;
+    variant?: "default" | "gradient" | "outline" | "elevated";
+    showPercentage?: boolean;
+    showLabel?: boolean;
+    size?: "sm" | "md" | "lg";
+    loading?: boolean;
+}
+/**
+ * ProgressCard 컴포넌트 / ProgressCard component
+ *
+ * 진행률을 표시하는 카드 컴포넌트입니다.
+ * 현재 값과 전체 값을 비교하여 진행률을 시각적으로 표시합니다.
+ *
+ * Card component that displays progress.
+ * Compares current value with total value to visually display progress.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ProgressCard
+ *   title="목표 달성률"
+ *   current={75}
+ *   total={100}
+ *   unit="%"
+ *   description="이번 달 목표"
+ * />
+ *
+ * @example
+ * // 퍼센트 표시 / Show percentage
+ * <ProgressCard
+ *   title="판매 진행률"
+ *   current={150}
+ *   total={200}
+ *   showPercentage
+ *   color="green"
+ *   variant="gradient"
+ * />
+ *
+ * @param {ProgressCardProps} props - ProgressCard 컴포넌트의 props / ProgressCard component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ProgressCard 컴포넌트 / ProgressCard component
+ */
+declare const ProgressCard: React.ForwardRefExoticComponent<ProgressCardProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * DashboardEmptyState 컴포넌트의 props / DashboardEmptyState component props
+ * @typedef {Object} DashboardEmptyStateProps
+ * @property {IconName | React.ReactNode} [icon="inbox"] - 아이콘 / Icon
+ * @property {string} title - 제목 / Title
+ * @property {string} [description] - 설명 / Description
+ * @property {string} [actionText] - 액션 버튼 텍스트 / Action button text
+ * @property {string} [actionHref] - 액션 버튼 링크 URL / Action button link URL
+ * @property {() => void} [actionOnClick] - 액션 버튼 클릭 핸들러 / Action button click handler
+ * @property {"default" | "warning" | "info" | "error" | "success"} [variant="default"] - 스타일 변형 / Style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - 크기 / Size
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface DashboardEmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: IconName | React.ReactNode;
+    title: string;
+    description?: string;
+    actionText?: string;
+    actionHref?: string;
+    actionOnClick?: () => void;
+    variant?: "default" | "warning" | "info" | "error" | "success";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * DashboardEmptyState 컴포넌트
+ *
+ * 대시보드에서 빈 상태를 표시하는 컴포넌트입니다.
+ * 데이터가 없을 때 사용자에게 안내 메시지와 액션을 제공합니다.
+ *
+ * Empty state component for dashboards.
+ * Displays a message and action when there is no data to show.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <DashboardEmptyState
+ *   icon="inbox"
+ *   title="데이터가 없습니다"
+ *   description="새로운 데이터를 추가해보세요"
+ *   actionText="데이터 추가"
+ *   actionOnClick={handleAdd}
+ * />
+ *
+ * @example
+ * // 경고 스타일 / Warning style
+ * <DashboardEmptyState
+ *   icon="warning"
+ *   title="오류가 발생했습니다"
+ *   description="잠시 후 다시 시도해주세요"
+ *   variant="warning"
+ *   size="lg"
+ * />
+ *
+ * @param {DashboardEmptyStateProps} props - DashboardEmptyState 컴포넌트의 props / DashboardEmptyState component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} DashboardEmptyState 컴포넌트 / DashboardEmptyState component
+ */
+declare const DashboardEmptyState: React.ForwardRefExoticComponent<DashboardEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * 사이드바 네비게이션 아이템 인터페이스 / SidebarNavItem interface
+ * @typedef {Object} SidebarNavItem
+ * @property {string} id - 아이템 고유 ID / Item unique ID
+ * @property {string} label - 아이템 라벨 / Item label
+ * @property {string} [href] - 링크 URL / Link URL
+ * @property {IconName | React.ReactNode} [icon] - 아이콘 / Icon
+ * @property {React.ReactNode} [badge] - 배지 / Badge
+ * @property {boolean} [active] - 활성 상태 / Active state
+ * @property {() => void} [onClick] - 클릭 핸들러 / Click handler
+ */
+interface SidebarNavItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: IconName | React.ReactNode;
+    badge?: React.ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+}
+/**
+ * 사이드바 섹션 인터페이스 / SidebarSection interface
+ * @typedef {Object} SidebarSection
+ * @property {string} id - 섹션 고유 ID / Section unique ID
+ * @property {string} [label] - 섹션 라벨 / Section label
+ * @property {SidebarNavItem[]} items - 섹션 내 아이템 배열 / Items array in section
+ */
+interface SidebarSection {
+    id: string;
+    label?: string;
+    items: SidebarNavItem[];
+}
+/**
+ * DashboardSidebar 컴포넌트의 props / DashboardSidebar component props
+ * @typedef {Object} DashboardSidebarProps
+ * @property {React.ReactNode} [logo] - 로고 컴포넌트 / Logo component
+ * @property {React.ReactNode} [productSwitcher] - 제품 전환 컴포넌트 / Product switcher component
+ * @property {SidebarSection[]} sections - 사이드바 섹션 배열 / Sidebar sections array
+ * @property {React.ReactNode} [footerActions] - 푸터 액션 컴포넌트 / Footer actions component
+ * @property {boolean} [isCollapsed] - 접힘 상태 (제어) / Collapsed state (controlled)
+ * @property {boolean} [defaultCollapsed=false] - 기본 접힘 상태 / Default collapsed state
+ * @property {(collapsed: boolean) => void} [onToggleCollapsed] - 접힘 상태 변경 핸들러 / Collapsed state change handler
+ * @property {number} [collapsedWidth=72] - 접힘 상태 너비 (px) / Collapsed width (px)
+ * @property {number} [expandedWidth=264] - 펼침 상태 너비 (px) / Expanded width (px)
+ * @property {number} [mobileBreakpoint=1024] - 모바일 브레이크포인트 (px) / Mobile breakpoint (px)
+ * @property {string} [overlayBackground] - 모바일 오버레이 배경색 / Mobile overlay background color
+ * @extends {React.HTMLAttributes<HTMLElement>}
+ */
+interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement> {
+    logo?: React.ReactNode;
+    productSwitcher?: React.ReactNode;
+    sections: SidebarSection[];
+    footerActions?: React.ReactNode;
+    isCollapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onToggleCollapsed?: (collapsed: boolean) => void;
+    collapsedWidth?: number;
+    expandedWidth?: number;
+    mobileBreakpoint?: number;
+    overlayBackground?: string;
+}
+/**
+ * DashboardSidebar 컴포넌트
+ *
+ * 대시보드용 사이드바 네비게이션 컴포넌트입니다.
+ * 접기/펼치기 기능과 모바일 반응형을 지원하며, 섹션별로 네비게이션 아이템을 구성할 수 있습니다.
+ *
+ * Sidebar navigation component for dashboards.
+ * Supports collapse/expand functionality and mobile responsiveness, with section-based navigation items.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <DashboardSidebar
+ *   logo={<Logo />}
+ *   sections={[
+ *     {
+ *       id: "main",
+ *       label: "메인",
+ *       items: [
+ *         { id: "dashboard", label: "대시보드", href: "/dashboard", icon: "layout" },
+ *         { id: "transactions", label: "거래", href: "/transactions", icon: "creditCard" }
+ *       ]
+ *     }
+ *   ]}
+ * />
+ *
+ * @example
+ * // 접힘 상태 제어 / Collapse state control
+ * <DashboardSidebar
+ *   sections={sections}
+ *   isCollapsed={collapsed}
+ *   onToggleCollapsed={setCollapsed}
+ *   collapsedWidth={80}
+ *   expandedWidth={280}
+ * />
+ *
+ * @param {DashboardSidebarProps} props - DashboardSidebar 컴포넌트의 props / DashboardSidebar component props
+ * @param {React.Ref<HTMLElement>} ref - aside 요소 ref / aside element ref
+ * @returns {JSX.Element} DashboardSidebar 컴포넌트 / DashboardSidebar component
+ */
+declare const DashboardSidebar: React.ForwardRefExoticComponent<DashboardSidebarProps & React.RefAttributes<HTMLElement>>;
+
+type TransactionStatus = "approved" | "pending" | "failed" | "refunded" | "cancelled" | "review";
+type TransactionColumnKey = "id" | "merchant" | "amount" | "status" | "method" | "date" | "fee" | "customer";
+/**
+ * 거래 테이블 행 인터페이스
+ * @typedef {Object} TransactionRow
+ * @property {string} id - 거래 ID
+ * @property {string} merchant - 가맹점
+ * @property {number} amount - 거래 금액
+ * @property {string} [currency] - 통화
+ * @property {TransactionStatus} status - 거래 상태
+ * @property {string} [method] - 결제수단
+ * @property {string | Date} date - 거래 일시
+ * @property {string} [customer] - 고객 정보
+ * @property {number} [fee] - 수수료
+ * @property {string} [reference] - 참조 번호
+ */
+interface TransactionRow {
+    id: string;
+    merchant: string;
+    amount: number;
+    currency?: string;
+    status: TransactionStatus;
+    method?: string;
+    date: string | Date;
+    customer?: string;
+    fee?: number;
+    reference?: string;
+    [key: string]: unknown;
+}
+/**
+ * 거래 테이블 컬럼 설정 인터페이스
+ * @typedef {Object} TransactionColumnConfig
+ * @property {TransactionColumnKey} key - 컬럼 키
+ * @property {string} [label] - 컬럼 라벨
+ * @property {"left" | "center" | "right"} [align] - 정렬
+ * @property {string} [width] - 컬럼 너비
+ * @property {(row: TransactionRow) => React.ReactNode} [render] - 커스텀 렌더러
+ */
+interface TransactionColumnConfig {
+    key: TransactionColumnKey;
+    label?: string;
+    align?: "left" | "center" | "right";
+    width?: string;
+    render?: (row: TransactionRow) => React.ReactNode;
+}
+/**
+ * TransactionsTable 컴포넌트의 props
+ * @typedef {Object} TransactionsTableProps
+ * @property {TransactionRow[]} rows - 거래 행 배열
+ * @property {TransactionColumnConfig[]} [columns] - 컬럼 설정 배열
+ * @property {boolean} [isLoading=false] - 로딩 상태
+ * @property {number} [loadingRows] - 로딩 행 수
+ * @property {React.ReactNode} [caption] - 테이블 캡션
+ * @property {React.ReactNode} [filters] - 필터 컴포넌트
+ * @property {React.ReactNode} [emptyState] - 빈 상태 컴포넌트
+ * @property {(row: TransactionRow) => void} [onRowClick] - 행 클릭 핸들러
+ * @property {(row: TransactionRow) => boolean} [highlightRow] - 행 강조 조건
+ * @property {Partial<Record<TransactionStatus, string>>} [statusLabels] - 상태 라벨 커스터마이징
+ * @property {(status: TransactionStatus, row: TransactionRow) => React.ReactNode} [statusRenderer] - 상태 커스텀 렌더러
+ * @property {(row: TransactionRow) => React.ReactNode} [amountFormatter] - 금액 커스텀 포맷터
+ * @property {(row: TransactionRow) => React.ReactNode} [methodFormatter] - 결제수단 커스텀 포맷터
+ * @property {(row: TransactionRow) => React.ReactNode} [dateFormatter] - 날짜 커스텀 포맷터
+ * @property {string} [locale="ko-KR"] - 로케일
+ * @property {string} [defaultCurrency="KRW"] - 기본 통화
+ * @property {string} [className] - 추가 클래스명
+ * @property {React.ReactNode} [footer] - 푸터 컴포넌트
+ * @property {(row: TransactionRow) => string} [rowActionLabel] - 행 액션 라벨 생성 함수
+ * @property {string} [rowActionHint] - 행 액션 힌트 텍스트
+ */
+interface TransactionsTableProps {
+    rows: TransactionRow[];
+    columns?: TransactionColumnConfig[];
+    isLoading?: boolean;
+    loadingRows?: number;
+    caption?: React.ReactNode;
+    filters?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    onRowClick?: (row: TransactionRow) => void;
+    highlightRow?: (row: TransactionRow) => boolean;
+    statusLabels?: Partial<Record<TransactionStatus, string>>;
+    statusRenderer?: (status: TransactionStatus, row: TransactionRow) => React.ReactNode;
+    amountFormatter?: (row: TransactionRow) => React.ReactNode;
+    methodFormatter?: (row: TransactionRow) => React.ReactNode;
+    dateFormatter?: (row: TransactionRow) => React.ReactNode;
+    locale?: string;
+    defaultCurrency?: string;
+    className?: string;
+    footer?: React.ReactNode;
+    rowActionLabel?: (row: TransactionRow) => string;
+    rowActionHint?: string;
+}
+/**
+ * TransactionsTable 컴포넌트
+ *
+ * 거래 목록을 테이블 형태로 표시하는 컴포넌트입니다.
+ * 정렬, 필터링, 커스텀 렌더링 등을 지원합니다.
+ *
+ * Table component that displays transaction list.
+ * Supports sorting, filtering, and custom rendering.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <TransactionsTable
+ *   rows={[
+ *     {
+ *       id: "tx_123",
+ *       merchant: "가맹점 A",
+ *       amount: 100000,
+ *       status: "approved",
+ *       method: "카드",
+ *       date: new Date()
+ *     }
+ *   ]}
+ *   onRowClick={(row) => console.log(row)}
+ * />
+ *
+ * @example
+ * // 커스텀 컬럼과 포맷터 / Custom columns and formatters
+ * <TransactionsTable
+ *   rows={transactions}
+ *   columns={[
+ *     { key: "id", label: "ID" },
+ *     { key: "amount", label: "금액", align: "right" },
+ *     { key: "status", label: "상태" }
+ *   ]}
+ *   amountFormatter={(row) => `₩${row.amount.toLocaleString()}`}
+ *   statusRenderer={(status) => <CustomBadge status={status} />}
+ *   isLoading={loading}
+ * />
+ *
+ * @param {TransactionsTableProps} props - TransactionsTable 컴포넌트의 props / TransactionsTable component props
+ * @returns {JSX.Element} TransactionsTable 컴포넌트 / TransactionsTable component
+ */
+declare const TransactionsTable: React.FC<TransactionsTableProps>;
+
+type ToolbarVariant = "plain" | "cards";
+/**
+ * 툴바 액션 인터페이스 / ToolbarAction interface
+ * @typedef {Object} ToolbarAction
+ * @property {string} label - 액션 라벨 / Action label
+ * @property {() => void} [onClick] - 클릭 핸들러 / Click handler
+ * @property {string} [href] - 링크 URL / Link URL
+ * @property {IconName | React.ReactNode} [icon] - 아이콘 / Icon
+ * @property {"primary" | "secondary" | "ghost"} [appearance="secondary"] - 액션 스타일 / Action style
+ * @property {boolean} [loading] - 로딩 상태 / Loading state
+ */
+interface ToolbarAction {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+    icon?: IconName | React.ReactNode;
+    appearance?: "primary" | "secondary" | "ghost";
+    loading?: boolean;
+}
+/**
+ * 날짜 프리셋 인터페이스 / DatePreset interface
+ * @typedef {Object} DatePreset
+ * @property {string} label - 프리셋 라벨 / Preset label
+ * @property {string} value - 프리셋 값 / Preset value
+ */
+interface DatePreset {
+    label: string;
+    value: string;
+}
+/**
+ * 날짜 범위 설정 인터페이스 / DateRangeConfig interface
+ * @typedef {Object} DateRangeConfig
+ * @property {{ from: Date; to: Date } | null} value - 날짜 범위 값 / Date range value
+ * @property {DatePreset[]} [presets] - 날짜 프리셋 배열 / Date preset array
+ * @property {(preset: DatePreset) => void} [onSelectPreset] - 프리셋 선택 핸들러 / Preset selection handler
+ * @property {() => void} [onCustomRange] - 커스텀 범위 선택 핸들러 / Custom range selection handler
+ * @property {string} [display] - 표시 텍스트 / Display text
+ */
+interface DateRangeConfig {
+    value: {
+        from: Date;
+        to: Date;
+    } | null;
+    presets?: DatePreset[];
+    onSelectPreset?: (preset: DatePreset) => void;
+    onCustomRange?: () => void;
+    display?: string;
+}
+/**
+ * DashboardToolbar 컴포넌트의 props / DashboardToolbar component props
+ * @typedef {Object} DashboardToolbarProps
+ * @property {React.ReactNode} [title] - 툴바 제목 / Toolbar title
+ * @property {React.ReactNode} [description] - 툴바 설명 / Toolbar description
+ * @property {React.ReactNode} [meta] - 메타 정보 / Meta information
+ * @property {"plain" | "cards"} [variant="cards"] - 툴바 스타일 변형 / Toolbar style variant
+ * @property {DateRangeConfig} [dateRange] - 날짜 범위 설정 / Date range configuration
+ * @property {React.ReactNode} [filters] - 필터 컴포넌트 / Filter component
+ * @property {ToolbarAction[]} [actions] - 액션 버튼 배열 / Action buttons array
+ * @property {() => void} [onRefresh] - 새로고침 핸들러 / Refresh handler
+ * @property {string} [lastUpdated] - 마지막 업데이트 시간 / Last updated time
+ * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, "title">}
+ */
+interface DashboardToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    meta?: React.ReactNode;
+    variant?: ToolbarVariant;
+    dateRange?: DateRangeConfig;
+    filters?: React.ReactNode;
+    actions?: ToolbarAction[];
+    onRefresh?: () => void;
+    lastUpdated?: string;
+}
+/**
+ * DashboardToolbar 컴포넌트
+ *
+ * 대시보드 상단 툴바 컴포넌트입니다.
+ * 제목, 설명, 필터, 날짜 범위 선택, 액션 버튼 등을 포함할 수 있습니다.
+ *
+ * Top toolbar component for dashboards.
+ * Can include title, description, filters, date range selection, and action buttons.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <DashboardToolbar
+ *   title="거래 대시보드"
+ *   description="전체 거래 현황을 확인하세요"
+ *   actions={[
+ *     { label: "내보내기", icon: "download", onClick: handleExport },
+ *     { label: "필터", icon: "funnel", onClick: handleFilter }
+ *   ]}
+ *   onRefresh={handleRefresh}
+ * />
+ *
+ * @example
+ * // 날짜 범위 포함 / With date range
+ * <DashboardToolbar
+ *   title="매출 분석"
+ *   dateRange={{
+ *     value: { from: new Date("2024-01-01"), to: new Date("2024-12-31") },
+ *     presets: [
+ *       { label: "오늘", value: "today" },
+ *       { label: "이번 주", value: "thisWeek" },
+ *       { label: "이번 달", value: "thisMonth" }
+ *     ],
+ *     onSelectPreset: handlePresetSelect,
+ *     onCustomRange: handleCustomRange
+ *   }}
+ * />
+ *
+ * @param {DashboardToolbarProps} props - DashboardToolbar 컴포넌트의 props / DashboardToolbar component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} DashboardToolbar 컴포넌트 / DashboardToolbar component
+ */
+declare const DashboardToolbar: React.ForwardRefExoticComponent<DashboardToolbarProps & React.RefAttributes<HTMLDivElement>>;
+
+type TrendSeriesPalette = "approval" | "settlement" | "custom";
+/**
+ * 트렌드 시리즈 인터페이스
+ * @typedef {Object} TrendSeries
+ * @property {string} label - 시리즈 라벨
+ * @property {number[]} data - 데이터 배열
+ * @property {string} [color] - 커스텀 색상
+ * @property {boolean} [area] - 영역 채우기 여부
+ */
+interface TrendSeries {
+    label: string;
+    data: number[];
+    color?: string;
+    area?: boolean;
+}
+/**
+ * TrendChart 컴포넌트의 props / TrendChart component props
+ * @typedef {Object} TrendChartProps
+ * @property {TrendSeries[]} series - 시리즈 배열 / Series array
+ * @property {string[]} categories - 카테고리 배열 / Categories array
+ * @property {TrendSeriesPalette} [palette="approval"] - 색상 팔레트 / Color palette
+ * @property {number} [height=200] - 차트 높이 (px) / Chart height (px)
+ * @property {boolean} [showLegend=true] - 범례 표시 여부 / Show legend
+ * @property {boolean} [showDots=true] - 점 표시 여부 / Show dots
+ * @property {boolean} [showTooltip=false] - 툴팁 표시 여부 / Show tooltip
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface TrendChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    series: TrendSeries[];
+    categories: string[];
+    palette?: TrendSeriesPalette;
+    height?: number;
+    showLegend?: boolean;
+    showDots?: boolean;
+    showTooltip?: boolean;
+}
+/**
+ * TrendChart 컴포넌트
+ *
+ * 트렌드 데이터를 선 그래프로 표시하는 컴포넌트입니다.
+ * 여러 시리즈를 동시에 표시할 수 있으며, 영역 채우기 옵션을 제공합니다.
+ *
+ * Line chart component that displays trend data.
+ * Can display multiple series simultaneously with area fill option.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <TrendChart
+ *   series={[
+ *     { label: "승인", data: [10, 20, 15, 30, 25] },
+ *     { label: "거부", data: [5, 10, 8, 15, 12] }
+ *   ]}
+ *   categories={["월", "화", "수", "목", "금"]}
+ *   palette="approval"
+ * />
+ *
+ * @example
+ * // 영역 채우기와 커스텀 색상 / Area fill and custom color
+ * <TrendChart
+ *   series={[
+ *     { label: "정산", data: [100, 200, 150], area: true, color: "#6366f1" }
+ *   ]}
+ *   categories={["1월", "2월", "3월"]}
+ *   palette="settlement"
+ *   showDots={true}
+ *   showTooltip={true}
+ * />
+ *
+ * @param {TrendChartProps} props - TrendChart 컴포넌트의 props / TrendChart component props
+ * @returns {JSX.Element} TrendChart 컴포넌트 / TrendChart component
+ */
+declare const TrendChart: React.FC<TrendChartProps>;
+
+/**
+ * 거래 상세 정보 인터페이스 / TransactionDetail interface
+ * @typedef {Object} TransactionDetail
+ * @property {string} id - 거래 ID / Transaction ID
+ * @property {TransactionStatus} status - 거래 상태 / Transaction status
+ * @property {number} amount - 거래 금액 / Transaction amount
+ * @property {string} [currency] - 통화 / Currency
+ * @property {string} [merchant] - 가맹점 / Merchant
+ * @property {string} [method] - 결제수단 / Payment method
+ * @property {string | Date} [createdAt] - 생성일시 / Created date
+ * @property {string | Date} [approvedAt] - 승인일시 / Approved date
+ * @property {string} [customer] - 고객 정보 / Customer information
+ * @property {string} [reference] - 참조 번호 / Reference number
+ */
+interface TransactionDetail {
+    id: string;
+    status: TransactionStatus;
+    amount: number;
+    currency?: string;
+    merchant?: string;
+    method?: string;
+    createdAt?: string | Date;
+    approvedAt?: string | Date;
+    customer?: string;
+    reference?: string;
+}
+/**
+ * 거래 메타데이터 아이템 인터페이스 / TransactionMetadataItem interface
+ * @typedef {Object} TransactionMetadataItem
+ * @property {string} label - 라벨 / Label
+ * @property {React.ReactNode} value - 값 / Value
+ * @property {IconName} [icon] - 아이콘 / Icon
+ */
+interface TransactionMetadataItem {
+    label: string;
+    value: React.ReactNode;
+    icon?: IconName;
+}
+type SettlementStatus = "pending" | "processing" | "completed" | "failed";
+/**
+ * 정산 정보 인터페이스 / SettlementInfo interface
+ * @typedef {Object} SettlementInfo
+ * @property {SettlementStatus} [status] - 정산 상태 / Settlement status
+ * @property {number} [amount] - 정산 금액 / Settlement amount
+ * @property {string} [currency] - 통화 / Currency
+ * @property {string | Date} [scheduledDate] - 예정일 / Scheduled date
+ * @property {string} [expectedPayout] - 예상 지급액 / Expected payout
+ * @property {string} [bankAccount] - 계좌 정보 / Bank account information
+ * @property {string} [reference] - 참조 번호 / Reference number
+ * @property {string} [note] - 메모 / Note
+ */
+interface SettlementInfo {
+    status?: SettlementStatus;
+    amount?: number;
+    currency?: string;
+    scheduledDate?: string | Date;
+    expectedPayout?: string;
+    bankAccount?: string;
+    reference?: string;
+    note?: string;
+}
+/**
+ * 수수료 내역 인터페이스 / FeeBreakdown interface
+ * @typedef {Object} FeeBreakdown
+ * @property {string} label - 수수료 라벨 / Fee label
+ * @property {number} amount - 수수료 금액 / Fee amount
+ * @property {string} [currency] - 통화 / Currency
+ * @property {string} [description] - 설명 / Description
+ */
+interface FeeBreakdown {
+    label: string;
+    amount: number;
+    currency?: string;
+    description?: string;
+}
+/**
+ * 거래 이벤트 인터페이스 / TransactionEvent interface
+ * @typedef {Object} TransactionEvent
+ * @property {string} id - 이벤트 ID / Event ID
+ * @property {string} title - 이벤트 제목 / Event title
+ * @property {string} [description] - 설명 / Description
+ * @property {string | Date} timestamp - 타임스탬프 / Timestamp
+ * @property {"success" | "warning" | "error" | "info"} [status] - 이벤트 상태 / Event status
+ * @property {IconName} [icon] - 아이콘 / Icon
+ * @property {string} [actor] - 실행자 / Actor
+ */
+interface TransactionEvent {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp: string | Date;
+    status?: "success" | "warning" | "error" | "info";
+    icon?: IconName;
+    actor?: string;
+}
+/**
+ * TransactionDetailDrawer 컴포넌트의 props / TransactionDetailDrawer component props
+ * @typedef {Object} TransactionDetailDrawerProps
+ * @property {boolean} open - 드로어 열림 상태 / Drawer open state
+ * @property {() => void} onClose - 닫기 핸들러 / Close handler
+ * @property {TransactionDetail} [transaction] - 거래 상세 정보 / Transaction detail information
+ * @property {TransactionMetadataItem[]} [metadata=[]] - 메타데이터 배열 / Metadata array
+ * @property {SettlementInfo} [settlement] - 정산 정보 / Settlement information
+ * @property {FeeBreakdown[]} [fees=[]] - 수수료 내역 배열 / Fee breakdown array
+ * @property {TransactionEvent[]} [events=[]] - 이벤트 로그 배열 / Event log array
+ * @property {React.ReactNode} [actions] - 액션 컴포넌트 / Actions component
+ * @property {React.ReactNode} [summary] - 요약 컴포넌트 / Summary component
+ * @property {boolean} [loading=false] - 로딩 상태 / Loading state
+ * @property {string} [locale="ko-KR"] - 로케일 / Locale
+ * @property {string} [defaultCurrency="KRW"] - 기본 통화 / Default currency
+ * @property {React.ReactNode} [emptyState] - 빈 상태 컴포넌트 / Empty state component
+ * @property {string} [className] - 추가 클래스명 / Additional class name
+ */
+interface TransactionDetailDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    transaction?: TransactionDetail;
+    metadata?: TransactionMetadataItem[];
+    settlement?: SettlementInfo;
+    fees?: FeeBreakdown[];
+    events?: TransactionEvent[];
+    actions?: React.ReactNode;
+    summary?: React.ReactNode;
+    loading?: boolean;
+    locale?: string;
+    defaultCurrency?: string;
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+/**
+ * TransactionDetailDrawer 컴포넌트
+ *
+ * 거래 상세 정보를 표시하는 드로어 컴포넌트입니다.
+ * 거래 정보, 정산 정보, 수수료 내역, 이벤트 로그 등을 포함합니다.
+ *
+ * Drawer component that displays detailed transaction information.
+ * Includes transaction details, settlement info, fee breakdown, and event logs.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <TransactionDetailDrawer
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   transaction={{
+ *     id: "tx_123",
+ *     status: "approved",
+ *     amount: 100000,
+ *     currency: "KRW",
+ *     merchant: "가맹점 A"
+ *   }}
+ *   metadata={[
+ *     { label: "거래 ID", value: "tx_123", icon: "creditCard" },
+ *     { label: "고객", value: "홍길동", icon: "user" }
+ *   ]}
+ * />
+ *
+ * @example
+ * // 정산 정보 포함 / With settlement info
+ * <TransactionDetailDrawer
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   transaction={transaction}
+ *   settlement={{
+ *     status: "processing",
+ *     amount: 95000,
+ *     currency: "KRW",
+ *     scheduledDate: new Date("2024-01-15")
+ *   }}
+ *   fees={[
+ *     { label: "수수료", amount: 5000, currency: "KRW" }
+ *   ]}
+ *   events={eventLogs}
+ * />
+ *
+ * @param {TransactionDetailDrawerProps} props - TransactionDetailDrawer 컴포넌트의 props / TransactionDetailDrawer component props
+ * @returns {JSX.Element} TransactionDetailDrawer 컴포넌트 / TransactionDetailDrawer component
+ */
+declare const TransactionDetailDrawer: React.FC<TransactionDetailDrawerProps>;
+
+type SettlementTimelineStatus = "pending" | "processing" | "completed" | "failed";
+/**
+ * 정산 타임라인 아이템 인터페이스 / SettlementTimelineItem interface
+ * @typedef {Object} SettlementTimelineItem
+ * @property {string} id - 아이템 고유 ID / Item unique ID
+ * @property {string} title - 제목 / Title
+ * @property {string} [description] - 설명 / Description
+ * @property {SettlementTimelineStatus} status - 상태 / Status
+ * @property {number} [amount] - 금액 / Amount
+ * @property {string} [currency] - 통화 / Currency
+ * @property {string | Date} [date] - 날짜 / Date
+ * @property {string} [meta] - 메타 정보 / Meta information
+ * @property {IconName} [icon] - 아이콘 / Icon
+ */
+interface SettlementTimelineItem {
+    id: string;
+    title: string;
+    description?: string;
+    status: SettlementTimelineStatus;
+    amount?: number;
+    currency?: string;
+    date?: string | Date;
+    meta?: string;
+    icon?: IconName;
+}
+/**
+ * SettlementTimeline 컴포넌트의 props / SettlementTimeline component props
+ * @typedef {Object} SettlementTimelineProps
+ * @property {SettlementTimelineItem[]} items - 타임라인 아이템 배열 / Timeline items array
+ * @property {string} [highlightedId] - 강조할 아이템 ID / Highlighted item ID
+ * @property {string} [locale="ko-KR"] - 로케일 / Locale
+ * @property {string} [defaultCurrency="KRW"] - 기본 통화 / Default currency
+ * @property {React.ReactNode} [emptyState] - 빈 상태 컴포넌트 / Empty state component
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface SettlementTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: SettlementTimelineItem[];
+    highlightedId?: string;
+    locale?: string;
+    defaultCurrency?: string;
+    emptyState?: React.ReactNode;
+}
+/**
+ * SettlementTimeline 컴포넌트
+ *
+ * 정산 처리 단계를 타임라인 형태로 표시하는 컴포넌트입니다.
+ * 각 단계의 상태, 금액, 날짜를 시각적으로 표시합니다.
+ *
+ * Timeline component that displays settlement processing stages.
+ * Visually shows status, amount, and date for each stage.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <SettlementTimeline
+ *   items={[
+ *     {
+ *       id: "1",
+ *       title: "정산 요청",
+ *       status: "completed",
+ *       amount: 1000000,
+ *       currency: "KRW",
+ *       date: new Date("2024-01-01")
+ *     },
+ *     {
+ *       id: "2",
+ *       title: "처리 중",
+ *       status: "processing",
+ *       amount: 1000000,
+ *       currency: "KRW"
+ *     }
+ *   ]}
+ * />
+ *
+ * @example
+ * // 강조 기능 / Highlight feature
+ * <SettlementTimeline
+ *   items={timelineItems}
+ *   highlightedId="2"
+ *   locale="en-US"
+ *   defaultCurrency="USD"
+ * />
+ *
+ * @param {SettlementTimelineProps} props - SettlementTimeline 컴포넌트의 props / SettlementTimeline component props
+ * @returns {JSX.Element} SettlementTimeline 컴포넌트 / SettlementTimeline component
+ */
+declare const SettlementTimeline: React.FC<SettlementTimelineProps>;
+
+type RoutingStatus = "normal" | "warning" | "critical";
+/**
+ * 라우팅 분할 세그먼트 인터페이스 / RoutingBreakdownSegment interface
+ * @typedef {Object} RoutingBreakdownSegment
+ * @property {string} id - 세그먼트 고유 ID / Segment unique ID
+ * @property {string} label - 세그먼트 라벨 / Segment label
+ * @property {number} value - 세그먼트 값 / Segment value
+ * @property {string} [color] - 커스텀 색상 / Custom color
+ * @property {RoutingStatus} [status] - 상태 / Status
+ * @property {string} [icon] - 아이콘 이름 / Icon name
+ * @property {string} [detail] - 상세 정보 / Detail information
+ */
+interface RoutingBreakdownSegment {
+    id: string;
+    label: string;
+    value: number;
+    color?: string;
+    status?: RoutingStatus;
+    icon?: string;
+    detail?: string;
+}
+/**
+ * RoutingBreakdownCard 컴포넌트의 props / RoutingBreakdownCard component props
+ * @typedef {Object} RoutingBreakdownCardProps
+ * @property {string} [title="PG / 결제수단 비중"] - 카드 제목 / Card title
+ * @property {string} [description="라우팅별 처리 비율과 상태"] - 카드 설명 / Card description
+ * @property {RoutingBreakdownSegment[]} segments - 세그먼트 배열 / Segments array
+ * @property {string} [totalLabel="총 거래"] - 총계 라벨 / Total label
+ * @property {React.ReactNode} [totalValue] - 총계 값 / Total value
+ * @property {string} [highlightId] - 강조할 세그먼트 ID / Highlighted segment ID
+ * @property {React.ReactNode} [actions] - 액션 컴포넌트 / Actions component
+ * @property {React.ReactNode} [emptyState] - 빈 상태 컴포넌트 / Empty state component
+ * @property {(segment: RoutingBreakdownSegment, percentage: number) => React.ReactNode} [formatter] - 커스텀 포맷터 / Custom formatter
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface RoutingBreakdownCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    description?: string;
+    segments: RoutingBreakdownSegment[];
+    totalLabel?: string;
+    totalValue?: React.ReactNode;
+    highlightId?: string;
+    actions?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    formatter?: (segment: RoutingBreakdownSegment, percentage: number) => React.ReactNode;
+}
+/**
+ * RoutingBreakdownCard 컴포넌트
+ *
+ * PG 라우팅 또는 결제수단별 비중을 표시하는 카드 컴포넌트입니다.
+ * 진행 바와 세그먼트별 상세 정보를 제공합니다.
+ *
+ * Card component that displays PG routing or payment method breakdown.
+ * Provides progress bar and detailed information for each segment.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <RoutingBreakdownCard
+ *   title="PG 라우팅 비중"
+ *   segments={[
+ *     { id: "pg1", label: "PG A", value: 5000, status: "normal" },
+ *     { id: "pg2", label: "PG B", value: 3000, status: "warning" },
+ *     { id: "pg3", label: "PG C", value: 2000, status: "normal" }
+ *   ]}
+ *   totalValue="10,000"
+ * />
+ *
+ * @example
+ * // 강조 기능 / Highlight feature
+ * <RoutingBreakdownCard
+ *   segments={segments}
+ *   highlightId="pg1"
+ *   formatter={(segment, percentage) => (
+ *     <div>
+ *       <span>{segment.value.toLocaleString()}</span>
+ *       <span>{percentage}%</span>
+ *     </div>
+ *   )}
+ * />
+ *
+ * @param {RoutingBreakdownCardProps} props - RoutingBreakdownCard 컴포넌트의 props / RoutingBreakdownCard component props
+ * @returns {JSX.Element} RoutingBreakdownCard 컴포넌트 / RoutingBreakdownCard component
+ */
+declare const RoutingBreakdownCard: React.FC<RoutingBreakdownCardProps>;
+
+type MerchantHealth = "normal" | "warning" | "critical";
+/**
+ * 가맹점 리스트 아이템 인터페이스 / MerchantListItem interface
+ * @typedef {Object} MerchantListItem
+ * @property {string} id - 가맹점 고유 ID / Merchant unique ID
+ * @property {string} name - 가맹점 이름 / Merchant name
+ * @property {string} [status] - 상태 / Status
+ * @property {MerchantHealth} [health] - 건강 상태 / Health status
+ * @property {number} [approvalRate] - 승인률 (0-1) / Approval rate (0-1)
+ * @property {number} [volume] - 거래량 / Transaction volume
+ * @property {string} [currency] - 통화 / Currency
+ * @property {string} [category] - 카테고리 / Category
+ * @property {string} [region] - 지역 / Region
+ * @property {string | Date} [updatedAt] - 업데이트 시간 / Updated time
+ * @property {string} [tag] - 태그 / Tag
+ * @property {IconName | React.ReactNode} [icon] - 아이콘 / Icon
+ * @property {Array<{ label: string; value: React.ReactNode }>} [metadata] - 메타데이터 / Metadata
+ */
+interface MerchantListItem {
+    id: string;
+    name: string;
+    status?: string;
+    health?: MerchantHealth;
+    approvalRate?: number;
+    volume?: number;
+    currency?: string;
+    category?: string;
+    region?: string;
+    updatedAt?: string | Date;
+    tag?: string;
+    icon?: IconName | React.ReactNode;
+    metadata?: Array<{
+        label: string;
+        value: React.ReactNode;
+    }>;
+}
+/**
+ * MerchantList 컴포넌트의 props / MerchantList component props
+ * @typedef {Object} MerchantListProps
+ * @property {MerchantListItem[]} items - 가맹점 아이템 배열 / Merchant items array
+ * @property {boolean} [isLoading=false] - 로딩 상태 / Loading state
+ * @property {React.ReactNode} [filters] - 필터 컴포넌트 / Filter component
+ * @property {React.ReactNode} [emptyState] - 빈 상태 컴포넌트 / Empty state component
+ * @property {(merchant: MerchantListItem) => void} [onMerchantSelect] - 가맹점 선택 핸들러 / Merchant selection handler
+ * @property {string} [locale="ko-KR"] - 로케일 / Locale
+ * @property {string} [defaultCurrency="KRW"] - 기본 통화 / Default currency
+ * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">}
+ */
+interface MerchantListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    items: MerchantListItem[];
+    isLoading?: boolean;
+    filters?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    onMerchantSelect?: (merchant: MerchantListItem) => void;
+    locale?: string;
+    defaultCurrency?: string;
+}
+/**
+ * MerchantList 컴포넌트
+ *
+ * 가맹점 목록을 표시하는 컴포넌트입니다.
+ * 가맹점 정보, 건강 상태, 승인률, 거래량 등을 카드 형태로 표시합니다.
+ *
+ * Component that displays a list of merchants.
+ * Shows merchant information, health status, approval rate, and transaction volume in card format.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <MerchantList
+ *   items={[
+ *     {
+ *       id: "1",
+ *       name: "가맹점 A",
+ *       health: "normal",
+ *       approvalRate: 0.985,
+ *       volume: 1000000,
+ *       currency: "KRW"
+ *     }
+ *   ]}
+ *   onMerchantSelect={(merchant) => console.log(merchant)}
+ * />
+ *
+ * @example
+ * // 로딩 상태 / Loading state
+ * <MerchantList
+ *   items={merchants}
+ *   isLoading={true}
+ *   filters={<FilterComponent />}
+ * />
+ *
+ * @param {MerchantListProps} props - MerchantList 컴포넌트의 props / MerchantList component props
+ * @returns {JSX.Element} MerchantList 컴포넌트 / MerchantList component
+ */
+declare const MerchantList: React.FC<MerchantListProps>;
+
+/**
+ * StatsPanelItem 인터페이스 / StatsPanelItem interface
+ * @typedef {Object} StatsPanelItem
+ * @property {string} label - 통계 항목 라벨 / Stat item label
+ * @property {string | React.ReactNode} value - 통계 값 / Stat value
+ * @property {string | React.ReactNode} [description] - 통계 설명 / Stat description
+ * @property {"up" | "down" | "neutral"} [trend] - 추세 방향 / Trend direction
+ * @property {string} [trendValue] - 추세 값 / Trend value
+ * @property {"primary" | "secondary" | "neutral" | "warning"} [accent] - 강조 색상 / Accent color
+ * @property {React.ReactNode} [icon] - 아이콘 / Icon
+ */
+interface StatsPanelItem {
+    label: string;
+    value: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    trend?: "up" | "down" | "neutral";
+    trendValue?: string;
+    accent?: "primary" | "secondary" | "neutral" | "warning";
+    icon?: React.ReactNode;
+}
+/**
+ * StatsPanel 컴포넌트의 props / StatsPanel component props
+ * @typedef {Object} StatsPanelProps
+ * @property {string} [title] - 패널 제목 / Panel title
+ * @property {StatsPanelItem[]} items - 통계 항목 배열 / Stat items array
+ * @property {1 | 2 | 3 | 4} [columns=4] - 그리드 컬럼 수 / Grid column count
+ * @property {boolean} [loading=false] - 로딩 상태 / Loading state
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface StatsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    items: StatsPanelItem[];
+    columns?: 1 | 2 | 3 | 4;
+    loading?: boolean;
+}
+/**
+ * StatsPanel 컴포넌트 / StatsPanel component
+ *
+ * 통계 정보를 표시하는 패널 컴포넌트입니다.
+ * 여러 통계 항목을 그리드 형태로 표시하며, 추세 정보를 포함할 수 있습니다.
+ *
+ * Panel component that displays statistics.
+ * Shows multiple stat items in grid format and can include trend information.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <StatsPanel
+ *   items={[
+ *     { label: "총 사용자", value: "1,234", trend: "up", trendValue: "+12%" },
+ *     { label: "활성 사용자", value: "567", trend: "down", trendValue: "-5%" }
+ *   ]}
+ * />
+ *
+ * @example
+ * // 2열 그리드, 제목 포함 / 2-column grid with title
+ * <StatsPanel
+ *   title="통계"
+ *   columns={2}
+ *   items={[
+ *     { label: "항목 1", value: "100", accent: "primary" },
+ *     { label: "항목 2", value: "200", accent: "secondary" }
+ *   ]}
+ * />
+ *
+ * @param {StatsPanelProps} props - StatsPanel 컴포넌트의 props / StatsPanel component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} StatsPanel 컴포넌트 / StatsPanel component
+ */
+declare const StatsPanel: React.ForwardRefExoticComponent<StatsPanelProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * SectionHeader 컴포넌트의 props / SectionHeader component props
+ * @typedef {Object} SectionHeaderProps
+ * @property {string} title - 섹션 제목 / Section title
+ * @property {string} [description] - 섹션 설명 / Section description
+ * @property {React.ReactNode} [action] - 액션 버튼 또는 요소 / Action button or element
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+/**
+ * SectionHeader 컴포넌트 / SectionHeader component
+ *
+ * 섹션의 헤더를 표시하는 컴포넌트입니다.
+ * 제목, 설명, 액션 버튼을 포함할 수 있습니다.
+ *
+ * Component that displays section header.
+ * Can include title, description, and action button.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <SectionHeader title="섹션 제목" />
+ *
+ * @example
+ * // 설명과 액션 포함 / With description and action
+ * <SectionHeader
+ *   title="알림"
+ *   description="최근 알림 목록"
+ *   action={<Button>모두 읽음</Button>}
+ * />
+ *
+ * @param {SectionHeaderProps} props - SectionHeader 컴포넌트의 props / SectionHeader component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} SectionHeader 컴포넌트 / SectionHeader component
+ */
+declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type TransactionDetail as $, ActivityFeed as A, type DashboardSidebarProps as B, type Color as C, DashboardGrid as D, type SidebarNavItem as E, type SidebarSection as F, type TransactionsTableProps as G, type TransactionRow as H, type TransactionColumnConfig as I, type TransactionColumnKey as J, type TransactionStatus as K, DashboardToolbar as L, type MembershipTier as M, NotificationCard as N, type DashboardToolbarProps as O, ProfileCard as P, QuickActionCard as Q, type ToolbarAction as R, StatsPanel as S, TransactionsTable as T, type DateRangeConfig as U, type DatePreset as V, TrendChart as W, type TrendChartProps as X, type TrendSeries as Y, TransactionDetailDrawer as Z, type TransactionDetailDrawerProps as _, type StatsPanelProps as a, type TransactionMetadataItem as a0, type SettlementInfo as a1, type FeeBreakdown as a2, type TransactionEvent as a3, SettlementTimeline as a4, type SettlementTimelineProps as a5, type SettlementTimelineItem as a6, type SettlementTimelineStatus as a7, RoutingBreakdownCard as a8, type RoutingBreakdownCardProps as a9, type RoutingBreakdownSegment as aa, MerchantList as ab, type MerchantListProps as ac, type MerchantListItem as ad, type MerchantHealth as ae, type StatsPanelItem as b, SectionHeader as c, type SectionHeaderProps as d, StatCard as e, type StatCardProps as f, type QuickActionCardProps as g, type DashboardGridProps as h, type ActivityFeedProps as i, type ActivityItem as j, type ProfileCardProps as k, MembershipBadge as l, type MembershipBadgeProps as m, MiniBarChart as n, type MiniBarChartProps as o, SummaryCard as p, type SummaryCardProps as q, type NotificationCardProps as r, type NotificationItem as s, MetricCard as t, type MetricCardProps as u, ProgressCard as v, type ProgressCardProps as w, DashboardEmptyState as x, type DashboardEmptyStateProps as y, DashboardSidebar as z };