@hua-labs/ui 2.2.0 → 2.3.0

package/dist/SectionHeader-DHwQ_xh8.d.mts

@@ -0,0 +1,1653 @@
+import React from 'react';
+import { I as IconName } from './icons-DcOBy9Hf.mjs';
+import { C as Color } from './common-Bej8Okcg.mjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * 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="elevated"] - 카드 스타일 변형 / Card style variant
+ * @property {"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray" | "cyan"} [color="blue"] - 카드 색상 / Card color
+ * @property {boolean} [loading] - 로딩 상태 / Loading state
+ * @property {React.ReactNode} [emptyState] - 빈 상태 컴포넌트 / Empty state component
+ * @property {string} [dot] - dot 스타일 유틸리티 문자열 / Dot style utility string
+ * @property {React.CSSProperties} [style] - 인라인 스타일 / Inline style
+ */
+interface StatCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    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;
+    dot?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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 component props
+ */
+interface QuickActionCardProps extends Omit<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "className"> {
+    /** Card title */
+    title: string;
+    /** Card description */
+    description?: string;
+    /** Icon name or ReactNode */
+    icon?: IconName | React.ReactNode;
+    /** Link URL — renders as <a> when provided */
+    href?: string;
+    /** Click handler — renders as <button> when provided */
+    onClick?: () => void;
+    /** Card style variant */
+    variant?: "gradient" | "outline" | "solid";
+    /** Card color */
+    color?: Color;
+    /** Loading state */
+    loading?: boolean;
+    /** Top-right badge label (e.g. "Coming Soon") */
+    badge?: string;
+    /** Extra dot utility string */
+    dot?: string;
+    /** Extra inline style (applied last, overrides everything) */
+    style?: React.CSSProperties;
+}
+/**
+ * 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="New Order"
+ *   description="Create an order quickly"
+ *   icon="plus"
+ *   href="/orders/new"
+ *   color="blue"
+ * />
+ *
+ * @example
+ * // Button card
+ * <QuickActionCard
+ *   title="Download Report"
+ *   description="Download the latest report"
+ *   icon="download"
+ *   onClick={handleDownload}
+ *   variant="outline"
+ *   color="green"
+ * />
+ */
+declare const QuickActionCard: React.ForwardRefExoticComponent<QuickActionCardProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
+/**
+ * DashboardGrid 컴포넌트의 props
+ * @property {1 | 2 | 3 | 4 | 5 | 6} [columns=4] - 그리드 컬럼 수
+ * @property {"sm" | "md" | "lg" | "xl"} [gap="md"] - 그리드 간격
+ * @property {boolean} [responsive=true] - 반응형 여부
+ * @property {string} [dot] - dot utility string
+ * @property {React.CSSProperties} [style] - inline styles
+ */
+interface DashboardGridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    columns?: 1 | 2 | 3 | 4 | 5 | 6;
+    gap?: "sm" | "md" | "lg" | "xl";
+    responsive?: boolean;
+    dot?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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
+ * @property {string} [dot] - dot 스타일 유틸리티 문자열 / Dot style utility string
+ * @property {React.CSSProperties} [style] - 인라인 스타일 / Inline style
+ */
+interface ActivityFeedProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    title?: string;
+    items: ActivityItem[];
+    emptyMessage?: string;
+    showHeader?: boolean;
+    maxItems?: number;
+    onViewAll?: () => void;
+    viewAllLabel?: string;
+    emptyState?: React.ReactNode;
+    dot?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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
+ * @property {string} [dot] - dot 스타일 유틸리티 문자열 / Dot style utility string
+ * @property {React.CSSProperties} [style] - 인라인 스타일 / Inline style
+ */
+interface ProfileCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    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;
+    dot?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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
+ * @property {string} [dot] - dot 유틸리티 스트링 / dot utility string
+ */
+interface MembershipBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "className"> {
+    tier: "basic" | "pro" | "premium" | "admin";
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    showIcon?: boolean;
+    dot?: string;
+}
+/**
+ * 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] - 오늘 인덱스 (기본값: 마지막 항목)
+ * @property {string} [dot] - dot 유틸리티 스트링 / dot utility string
+ */
+interface MiniBarChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    data: number[];
+    labels?: string[];
+    maxValue?: number;
+    height?: number;
+    showTooltip?: boolean;
+    showStats?: boolean;
+    color?: Color;
+    highlightToday?: boolean;
+    todayIndex?: number;
+    dot?: string;
+}
+/**
+ * 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" | "cyan"} [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] - 액션 버튼 라벨
+ * @property {string} [dot] - dot 스타일 유틸리티 문자열
+ * @property {React.CSSProperties} [style] - 인라인 스타일
+ */
+interface SummaryCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    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;
+    dot?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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
+ * @property {string} [dot] - dot 유틸리티 스트링 / dot utility string
+ * @property {React.CSSProperties} [style] - 인라인 스타일 / Inline style
+ */
+interface NotificationCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    title?: string;
+    items: NotificationItem[];
+    emptyMessage?: string;
+    maxItems?: number;
+    onViewAll?: () => void;
+    viewAllLabel?: string;
+    showHeader?: boolean;
+    showCount?: boolean;
+    emptyState?: React.ReactNode;
+    dot?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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
+ * @property {string} [dot] - dot 유틸리티 스트링 / dot utility string
+ */
+interface MetricCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    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;
+    dot?: string;
+}
+/**
+ * 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" | "cyan"} [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
+ * @property {string} [dot] - dot 스타일 유틸리티 문자열 / dot utility string
+ * @property {React.CSSProperties} [style] - 인라인 스타일 / Inline style
+ */
+interface ProgressCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    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;
+    dot?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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>>;
+
+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} [dot] - dot 유틸리티 스트링
+ * @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;
+    style?: React.CSSProperties;
+    dot?: 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 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
+ * @property {string} [dot] - dot 유틸리티 스트링 / dot utility string
+ */
+interface TrendChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    series: TrendSeries[];
+    categories: string[];
+    palette?: TrendSeriesPalette;
+    height?: number;
+    showLegend?: boolean;
+    showDots?: boolean;
+    showTooltip?: boolean;
+    dot?: string;
+}
+/**
+ * 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>;
+
+/**
+ * BarChartData 인터페이스 / BarChartData interface
+ * @typedef {Object} BarChartData
+ * @property {string} label - 막대 라벨 / Bar label
+ * @property {number} value - 막대 값 / Bar value
+ * @property {string} [color] - 커스텀 색상 / Custom color
+ * @property {boolean} [highlight] - 강조 표시 여부 / Highlight display
+ */
+interface BarChartData {
+    label: string;
+    value: number;
+    color?: string;
+    highlight?: boolean;
+}
+/**
+ * BarChart 컴포넌트의 props / BarChart component props
+ * @typedef {Object} BarChartProps
+ * @property {BarChartData[]} data - 차트 데이터 배열 / Chart data array
+ * @property {string} [title] - 차트 제목 / Chart title
+ * @property {number} [height=200] - 차트 높이 (px) / Chart height (px)
+ * @property {boolean} [showValues=true] - 값 표시 여부 / Show values
+ * @property {boolean} [showLabels=true] - 라벨 표시 여부 / Show labels
+ * @property {number} [maxValue] - 최대값 (자동 계산 시 생략) / Maximum value (omit for auto-calculation)
+ * @property {"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray"} [colorScheme="blue"] - 색상 스킴 / Color scheme
+ * @property {"default" | "gradient"} [variant="gradient"] - 차트 스타일 변형 / Chart style variant
+ * @property {boolean} [showGrid=true] - 그리드 표시 여부 / Show grid
+ * @property {boolean} [showTooltip] - 툴팁 표시 여부 / Show tooltip
+ * @property {string} [dot] - dot 유틸리티 스트링 / dot utility string
+ */
+interface BarChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    data: BarChartData[];
+    title?: string;
+    height?: number;
+    showValues?: boolean;
+    showLabels?: boolean;
+    maxValue?: number;
+    colorScheme?: "blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray";
+    variant?: "default" | "gradient";
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    dot?: string;
+}
+/**
+ * BarChart 컴포넌트
+ *
+ * 막대 차트를 표시하는 컴포넌트입니다.
+ * 다양한 색상 스킴과 그라디언트 스타일을 지원합니다.
+ *
+ * Bar chart component that displays data in bar format.
+ * Supports various color schemes and gradient styles.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <BarChart
+ *   data={[
+ *     { label: "월", value: 100 },
+ *     { label: "화", value: 200 },
+ *     { label: "수", value: 150 }
+ *   ]}
+ *   title="주간 매출"
+ * />
+ *
+ * @example
+ * // 커스텀 색상 및 강조 / Custom color and highlight
+ * <BarChart
+ *   data={[
+ *     { label: "1월", value: 1000, highlight: true },
+ *     { label: "2월", value: 1200 },
+ *     { label: "3월", value: 1500 }
+ *   ]}
+ *   colorScheme="green"
+ *   variant="gradient"
+ *   showTooltip
+ * />
+ *
+ * @param {BarChartProps} props - BarChart 컴포넌트의 props / BarChart component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} BarChart 컴포넌트 / BarChart component
+ */
+declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * 거래 상세 정보 인터페이스 / 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} [dot] - dot 유틸리티 스트링 / dot utility string
+ */
+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;
+    dot?: 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
+ * @property {string} [dot] - dot 유틸리티 스트링 / dot utility string
+ */
+interface SettlementTimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    items: SettlementTimelineItem[];
+    highlightedId?: string;
+    locale?: string;
+    defaultCurrency?: string;
+    emptyState?: React.ReactNode;
+    dot?: string;
+}
+/**
+ * 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
+ * @property {string} [dot] - dot 유틸리티 스트링 / dot utility string
+ */
+interface RoutingBreakdownCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    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;
+    dot?: string;
+}
+/**
+ * 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
+ * @property {string} [dot] - dot 유틸리티 스트링 / dot utility string
+ */
+interface MerchantListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "className"> {
+    items: MerchantListItem[];
+    isLoading?: boolean;
+    filters?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    onMerchantSelect?: (merchant: MerchantListItem) => void;
+    locale?: string;
+    defaultCurrency?: string;
+    dot?: 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>;
+
+interface YearlyHeatmapLabels {
+    /** 제목 */
+    title?: string;
+    /** 총 일수 텍스트 (예: "9일 작성") */
+    totalDays?: string;
+    /** 범례 왼쪽 (예: "적음") */
+    less?: string;
+    /** 범례 오른쪽 (예: "많음") */
+    more?: string;
+    /** 툴팁 포맷 함수 (날짜, 카운트) => string */
+    tooltip?: (dateStr: string, count: number) => string;
+}
+interface YearlyHeatmapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    /** 날짜별 데이터 (키: "YYYY-MM-DD", 값: count) */
+    data: Record<string, number>;
+    /** 색상 테마 */
+    color?: Color;
+    /** locale (요일/월 표시용, 예: "ko-KR") */
+    locale?: string;
+    /** 텍스트 라벨 */
+    labels?: YearlyHeatmapLabels;
+    /** dot 유틸리티 스트링 */
+    dot?: string;
+}
+/**
+ * GitHub 잔디 스타일 1년 히트맵
+ * 가로: 주(52~53주), 세로: 요일(일~토)
+ */
+declare function YearlyHeatmap({ data, color, locale, labels, dot, style, ...props }: YearlyHeatmapProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * 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 {Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>}
+ */
+interface StatsPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    title?: string;
+    items: StatsPanelItem[];
+    columns?: 1 | 2 | 3 | 4;
+    loading?: boolean;
+    dot?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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 {Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>}
+ */
+interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+    dot?: string;
+}
+/**
+ * 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 TransactionMetadataItem as $, ActivityFeed as A, BarChart as B, type SettlementInfo as C, DashboardGrid as D, SettlementTimeline as E, type FeeBreakdown as F, type SettlementTimelineItem as G, type SettlementTimelineProps as H, type SettlementTimelineStatus as I, StatCard as J, type StatCardProps as K, StatsPanel as L, MerchantList as M, NotificationCard as N, type StatsPanelItem as O, ProfileCard as P, QuickActionCard as Q, RoutingBreakdownCard as R, SectionHeader as S, TransactionsTable as T, type StatsPanelProps as U, SummaryCard as V, type SummaryCardProps as W, type TransactionColumnConfig as X, type TransactionColumnKey as Y, type TransactionDetail as Z, type TransactionEvent as _, type ActivityFeedProps as a, type TransactionRow as a0, type TransactionStatus as a1, TrendChart as a2, type TrendChartProps as a3, type TrendSeries as a4, YearlyHeatmap as a5, type YearlyHeatmapLabels as a6, type YearlyHeatmapProps as a7, type ActivityItem as b, type BarChartProps as c, type RoutingBreakdownCardProps as d, type DashboardGridProps as e, type TransactionsTableProps as f, TransactionDetailDrawer as g, type TransactionDetailDrawerProps as h, type MerchantListProps as i, MembershipBadge as j, type MembershipBadgeProps as k, type MembershipTier as l, type MerchantHealth as m, type MerchantListItem as n, MetricCard as o, type MetricCardProps as p, MiniBarChart as q, type MiniBarChartProps as r, type NotificationCardProps as s, type NotificationItem as t, type ProfileCardProps as u, ProgressCard as v, type ProgressCardProps as w, type QuickActionCardProps as x, type RoutingBreakdownSegment as y, type SectionHeaderProps as z };