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

package/dist/components/dashboard/RoutingBreakdownCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoutingBreakdownCard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/RoutingBreakdownCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvD;;;;;;;;;;GAUG;AACH,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,uBAAuB,EAAE,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACvF;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA8HpE,CAAC"}

package/dist/components/dashboard/SettlementTimeline.d.ts

@@ -0,0 +1,90 @@
+import React from "react";
+import type { IconName } from "../../lib/icons";
+export 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
+ */
+export 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>}
+ */
+export 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
+ */
+export declare const SettlementTimeline: React.FC<SettlementTimelineProps>;
+//# sourceMappingURL=SettlementTimeline.d.ts.map

package/dist/components/dashboard/SettlementTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettlementTimeline.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/SettlementTimeline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGhD,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEzF;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,wBAAwB,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACnF,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAqDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8GhE,CAAC"}

package/dist/components/dashboard/StatCard.d.ts

@@ -0,0 +1,70 @@
+import React from "react";
+import type { IconName } from "../../lib/icons";
+import type { Color } from "../../lib/types/common";
+/**
+ * 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>}
+ */
+export 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
+ */
+export declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=StatCard.d.ts.map

package/dist/components/dashboard/StatCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/StatCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,QAAQ,sFA4IpB,CAAC"}

package/dist/components/dashboard/SummaryCard.d.ts

@@ -0,0 +1,73 @@
+import React from "react";
+import type { IconName } from "../../lib/icons";
+import type { Color } from "../../lib/types/common";
+/**
+ * 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>}
+ */
+export 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
+ */
+export declare const SummaryCard: React.ForwardRefExoticComponent<SummaryCardProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SummaryCard.d.ts.map

package/dist/components/dashboard/SummaryCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryCard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/SummaryCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,WAAW,yFAyLvB,CAAC"}

package/dist/components/dashboard/TransactionDetailDrawer.d.ts

@@ -0,0 +1,183 @@
+import React from "react";
+import type { IconName } from "../../lib/icons";
+import type { TransactionStatus } from "./TransactionsTable";
+/**
+ * 거래 상세 정보 인터페이스 / 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
+ */
+export 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
+ */
+export interface TransactionMetadataItem {
+    label: string;
+    value: React.ReactNode;
+    icon?: IconName;
+}
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export declare const TransactionDetailDrawer: React.FC<TransactionDetailDrawerProps>;
+//# sourceMappingURL=TransactionDetailDrawer.d.ts.map

package/dist/components/dashboard/TransactionDetailDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionDetailDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/TransactionDetailDrawer.tsx"],"names":[],"mappings":"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"}

package/dist/components/dashboard/TransactionsTable.d.ts

@@ -0,0 +1,137 @@
+import React from "react";
+export type TransactionStatus = "approved" | "pending" | "failed" | "refunded" | "cancelled" | "review";
+export 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] - 참조 번호
+ */
+export 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] - 커스텀 렌더러
+ */
+export 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] - 행 액션 힌트 텍스트
+ */
+export 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
+ */
+export declare const TransactionsTable: React.FC<TransactionsTableProps>;
+//# sourceMappingURL=TransactionsTable.d.ts.map

package/dist/components/dashboard/TransactionsTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionsTable.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/TransactionsTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,MAAM,MAAM,iBAAiB,GACzB,UAAU,GACV,SAAS,GACT,QAAQ,GACR,UAAU,GACV,WAAW,GACX,QAAQ,CAAC;AAEb,MAAM,MAAM,oBAAoB,GAC5B,IAAI,GACJ,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,KAAK,GACL,UAAU,CAAC;AAEf;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,oBAAoB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,KAAK,CAAC,SAAS,CAAC;CACnD;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,OAAO,CAAC;IAChD,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,GAAG,EAAE,cAAc,KAAK,KAAK,CAAC,SAAS,CAAC;IACrF,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,MAAM,CAAC;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAsCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6O9D,CAAC"}

package/dist/components/dashboard/TrendChart.d.ts

@@ -0,0 +1,75 @@
+import React from "react";
+export type TrendSeriesPalette = "approval" | "settlement" | "custom";
+/**
+ * 트렌드 시리즈 인터페이스
+ * @typedef {Object} TrendSeries
+ * @property {string} label - 시리즈 라벨
+ * @property {number[]} data - 데이터 배열
+ * @property {string} [color] - 커스텀 색상
+ * @property {boolean} [area] - 영역 채우기 여부
+ */
+export 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>}
+ */
+export 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
+ */
+export declare const TrendChart: React.FC<TrendChartProps>;
+//# sourceMappingURL=TrendChart.d.ts.map

package/dist/components/dashboard/TrendChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendChart.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/TrendChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEtE;;;;;;;GAOG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6IhD,CAAC"}