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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MerchantList.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/MerchantList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAIhD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAE/D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7D;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC/F,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA2BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6HpD,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/MetricCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAIhD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,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,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,UAAU,wFA8ItB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MiniBarChart.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/MiniBarChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,YAAY,0FAiIxB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/NotificationCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAChD,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AA+BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,gBAAgB,8FAuI5B,CAAC"}

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

@@ -0,0 +1,82 @@
+import React from "react";
+/**
+ * 멤버십 등급 인터페이스
+ * @typedef {Object} MembershipTier
+ * @property {"basic" | "pro" | "premium" | "admin"} tier - 등급
+ * @property {string} label - 등급 라벨
+ */
+export 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>}
+ */
+export 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
+ */
+export declare const ProfileCard: React.ForwardRefExoticComponent<ProfileCardProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProfileCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileCard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/ProfileCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AA4BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,WAAW,yFA0KvB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/ProgressCard.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,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAyCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,YAAY,0FA8JxB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickActionCard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/QuickActionCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;IACvG,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,eAAe,oHAgI3B,CAAC"}

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

@@ -0,0 +1,88 @@
+import React from "react";
+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
+ */
+export 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>}
+ */
+export 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
+ */
+export declare const RoutingBreakdownCard: React.FC<RoutingBreakdownCardProps>;
+export {};
+//# sourceMappingURL=RoutingBreakdownCard.d.ts.map