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

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

@@ -0,0 +1,44 @@
+import React from "react";
+/**
+ * DashboardGrid 컴포넌트의 props
+ * @typedef {Object} DashboardGridProps
+ * @property {1 | 2 | 3 | 4 | 5 | 6} [columns=4] - 그리드 컬럼 수
+ * @property {"sm" | "md" | "lg" | "xl"} [gap="md"] - 그리드 간격
+ * @property {boolean} [responsive=true] - 반응형 여부
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+export interface DashboardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: 1 | 2 | 3 | 4 | 5 | 6;
+    gap?: "sm" | "md" | "lg" | "xl";
+    responsive?: boolean;
+}
+/**
+ * DashboardGrid 컴포넌트
+ *
+ * 대시보드 그리드 레이아웃을 제공하는 컴포넌트입니다.
+ * 반응형 그리드를 지원하며, 다양한 컬럼 수와 간격을 설정할 수 있습니다.
+ *
+ * Dashboard grid layout component.
+ * Supports responsive grid with configurable column count and gap sizes.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <DashboardGrid columns={4}>
+ *   <StatCard title="항목 1" value="100" />
+ *   <StatCard title="항목 2" value="200" />
+ * </DashboardGrid>
+ *
+ * @example
+ * // 반응형 그리드 / Responsive grid
+ * <DashboardGrid columns={3} gap="lg" responsive>
+ *   <MetricCard title="메트릭 1" value="1,000" />
+ *   <MetricCard title="메트릭 2" value="2,000" />
+ * </DashboardGrid>
+ *
+ * @param {DashboardGridProps} props - DashboardGrid 컴포넌트의 props / DashboardGrid component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} DashboardGrid 컴포넌트 / DashboardGrid component
+ */
+export declare const DashboardGrid: React.ForwardRefExoticComponent<DashboardGridProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=DashboardGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardGrid.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/DashboardGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;GAOG;AACH,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA4BD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,aAAa,2FA+BzB,CAAC"}

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

@@ -0,0 +1,105 @@
+import React from "react";
+import type { IconName } from "../../lib/icons";
+/**
+ * 사이드바 네비게이션 아이템 인터페이스 / SidebarNavItem interface
+ * @typedef {Object} SidebarNavItem
+ * @property {string} id - 아이템 고유 ID / Item unique ID
+ * @property {string} label - 아이템 라벨 / Item label
+ * @property {string} [href] - 링크 URL / Link URL
+ * @property {IconName | React.ReactNode} [icon] - 아이콘 / Icon
+ * @property {React.ReactNode} [badge] - 배지 / Badge
+ * @property {boolean} [active] - 활성 상태 / Active state
+ * @property {() => void} [onClick] - 클릭 핸들러 / Click handler
+ */
+export interface SidebarNavItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: IconName | React.ReactNode;
+    badge?: React.ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+}
+/**
+ * 사이드바 섹션 인터페이스 / SidebarSection interface
+ * @typedef {Object} SidebarSection
+ * @property {string} id - 섹션 고유 ID / Section unique ID
+ * @property {string} [label] - 섹션 라벨 / Section label
+ * @property {SidebarNavItem[]} items - 섹션 내 아이템 배열 / Items array in section
+ */
+export interface SidebarSection {
+    id: string;
+    label?: string;
+    items: SidebarNavItem[];
+}
+/**
+ * DashboardSidebar 컴포넌트의 props / DashboardSidebar component props
+ * @typedef {Object} DashboardSidebarProps
+ * @property {React.ReactNode} [logo] - 로고 컴포넌트 / Logo component
+ * @property {React.ReactNode} [productSwitcher] - 제품 전환 컴포넌트 / Product switcher component
+ * @property {SidebarSection[]} sections - 사이드바 섹션 배열 / Sidebar sections array
+ * @property {React.ReactNode} [footerActions] - 푸터 액션 컴포넌트 / Footer actions component
+ * @property {boolean} [isCollapsed] - 접힘 상태 (제어) / Collapsed state (controlled)
+ * @property {boolean} [defaultCollapsed=false] - 기본 접힘 상태 / Default collapsed state
+ * @property {(collapsed: boolean) => void} [onToggleCollapsed] - 접힘 상태 변경 핸들러 / Collapsed state change handler
+ * @property {number} [collapsedWidth=72] - 접힘 상태 너비 (px) / Collapsed width (px)
+ * @property {number} [expandedWidth=264] - 펼침 상태 너비 (px) / Expanded width (px)
+ * @property {number} [mobileBreakpoint=1024] - 모바일 브레이크포인트 (px) / Mobile breakpoint (px)
+ * @property {string} [overlayBackground] - 모바일 오버레이 배경색 / Mobile overlay background color
+ * @extends {React.HTMLAttributes<HTMLElement>}
+ */
+export interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement> {
+    logo?: React.ReactNode;
+    productSwitcher?: React.ReactNode;
+    sections: SidebarSection[];
+    footerActions?: React.ReactNode;
+    isCollapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onToggleCollapsed?: (collapsed: boolean) => void;
+    collapsedWidth?: number;
+    expandedWidth?: number;
+    mobileBreakpoint?: number;
+    overlayBackground?: string;
+}
+/**
+ * DashboardSidebar 컴포넌트
+ *
+ * 대시보드용 사이드바 네비게이션 컴포넌트입니다.
+ * 접기/펼치기 기능과 모바일 반응형을 지원하며, 섹션별로 네비게이션 아이템을 구성할 수 있습니다.
+ *
+ * Sidebar navigation component for dashboards.
+ * Supports collapse/expand functionality and mobile responsiveness, with section-based navigation items.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <DashboardSidebar
+ *   logo={<Logo />}
+ *   sections={[
+ *     {
+ *       id: "main",
+ *       label: "메인",
+ *       items: [
+ *         { id: "dashboard", label: "대시보드", href: "/dashboard", icon: "layout" },
+ *         { id: "transactions", label: "거래", href: "/transactions", icon: "creditCard" }
+ *       ]
+ *     }
+ *   ]}
+ * />
+ *
+ * @example
+ * // 접힘 상태 제어 / Collapse state control
+ * <DashboardSidebar
+ *   sections={sections}
+ *   isCollapsed={collapsed}
+ *   onToggleCollapsed={setCollapsed}
+ *   collapsedWidth={80}
+ *   expandedWidth={280}
+ * />
+ *
+ * @param {DashboardSidebarProps} props - DashboardSidebar 컴포넌트의 props / DashboardSidebar component props
+ * @param {React.Ref<HTMLElement>} ref - aside 요소 ref / aside element ref
+ * @returns {JSX.Element} DashboardSidebar 컴포넌트 / DashboardSidebar component
+ */
+export declare const DashboardSidebar: React.ForwardRefExoticComponent<DashboardSidebarProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=DashboardSidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/DashboardSidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGhD;;;;;;;;;;GAUG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,gBAAgB,2FA2L5B,CAAC"}

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

@@ -0,0 +1,120 @@
+import React from "react";
+import type { IconName } from "../../lib/icons";
+type ToolbarVariant = "plain" | "cards";
+/**
+ * 툴바 액션 인터페이스 / ToolbarAction interface
+ * @typedef {Object} ToolbarAction
+ * @property {string} label - 액션 라벨 / Action label
+ * @property {() => void} [onClick] - 클릭 핸들러 / Click handler
+ * @property {string} [href] - 링크 URL / Link URL
+ * @property {IconName | React.ReactNode} [icon] - 아이콘 / Icon
+ * @property {"primary" | "secondary" | "ghost"} [appearance="secondary"] - 액션 스타일 / Action style
+ * @property {boolean} [loading] - 로딩 상태 / Loading state
+ */
+export interface ToolbarAction {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+    icon?: IconName | React.ReactNode;
+    appearance?: "primary" | "secondary" | "ghost";
+    loading?: boolean;
+}
+/**
+ * 날짜 프리셋 인터페이스 / DatePreset interface
+ * @typedef {Object} DatePreset
+ * @property {string} label - 프리셋 라벨 / Preset label
+ * @property {string} value - 프리셋 값 / Preset value
+ */
+export interface DatePreset {
+    label: string;
+    value: string;
+}
+/**
+ * 날짜 범위 설정 인터페이스 / DateRangeConfig interface
+ * @typedef {Object} DateRangeConfig
+ * @property {{ from: Date; to: Date } | null} value - 날짜 범위 값 / Date range value
+ * @property {DatePreset[]} [presets] - 날짜 프리셋 배열 / Date preset array
+ * @property {(preset: DatePreset) => void} [onSelectPreset] - 프리셋 선택 핸들러 / Preset selection handler
+ * @property {() => void} [onCustomRange] - 커스텀 범위 선택 핸들러 / Custom range selection handler
+ * @property {string} [display] - 표시 텍스트 / Display text
+ */
+export interface DateRangeConfig {
+    value: {
+        from: Date;
+        to: Date;
+    } | null;
+    presets?: DatePreset[];
+    onSelectPreset?: (preset: DatePreset) => void;
+    onCustomRange?: () => void;
+    display?: string;
+}
+/**
+ * DashboardToolbar 컴포넌트의 props / DashboardToolbar component props
+ * @typedef {Object} DashboardToolbarProps
+ * @property {React.ReactNode} [title] - 툴바 제목 / Toolbar title
+ * @property {React.ReactNode} [description] - 툴바 설명 / Toolbar description
+ * @property {React.ReactNode} [meta] - 메타 정보 / Meta information
+ * @property {"plain" | "cards"} [variant="cards"] - 툴바 스타일 변형 / Toolbar style variant
+ * @property {DateRangeConfig} [dateRange] - 날짜 범위 설정 / Date range configuration
+ * @property {React.ReactNode} [filters] - 필터 컴포넌트 / Filter component
+ * @property {ToolbarAction[]} [actions] - 액션 버튼 배열 / Action buttons array
+ * @property {() => void} [onRefresh] - 새로고침 핸들러 / Refresh handler
+ * @property {string} [lastUpdated] - 마지막 업데이트 시간 / Last updated time
+ * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, "title">}
+ */
+export interface DashboardToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    meta?: React.ReactNode;
+    variant?: ToolbarVariant;
+    dateRange?: DateRangeConfig;
+    filters?: React.ReactNode;
+    actions?: ToolbarAction[];
+    onRefresh?: () => void;
+    lastUpdated?: string;
+}
+/**
+ * DashboardToolbar 컴포넌트
+ *
+ * 대시보드 상단 툴바 컴포넌트입니다.
+ * 제목, 설명, 필터, 날짜 범위 선택, 액션 버튼 등을 포함할 수 있습니다.
+ *
+ * Top toolbar component for dashboards.
+ * Can include title, description, filters, date range selection, and action buttons.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <DashboardToolbar
+ *   title="거래 대시보드"
+ *   description="전체 거래 현황을 확인하세요"
+ *   actions={[
+ *     { label: "내보내기", icon: "download", onClick: handleExport },
+ *     { label: "필터", icon: "funnel", onClick: handleFilter }
+ *   ]}
+ *   onRefresh={handleRefresh}
+ * />
+ *
+ * @example
+ * // 날짜 범위 포함 / With date range
+ * <DashboardToolbar
+ *   title="매출 분석"
+ *   dateRange={{
+ *     value: { from: new Date("2024-01-01"), to: new Date("2024-12-31") },
+ *     presets: [
+ *       { label: "오늘", value: "today" },
+ *       { label: "이번 주", value: "thisWeek" },
+ *       { label: "이번 달", value: "thisMonth" }
+ *     ],
+ *     onSelectPreset: handlePresetSelect,
+ *     onCustomRange: handleCustomRange
+ *   }}
+ * />
+ *
+ * @param {DashboardToolbarProps} props - DashboardToolbar 컴포넌트의 props / DashboardToolbar component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} DashboardToolbar 컴포넌트 / DashboardToolbar component
+ */
+export declare const DashboardToolbar: React.ForwardRefExoticComponent<DashboardToolbarProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=DashboardToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/DashboardToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,KAAK,cAAc,GAAG,OAAO,GAAG,OAAO,CAAC;AAExC;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAiDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,gBAAgB,8FA4G5B,CAAC"}

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

@@ -0,0 +1,61 @@
+import React from "react";
+import type { IconName } from "../../lib/icons";
+/**
+ * DashboardEmptyState 컴포넌트의 props / DashboardEmptyState component props
+ * @typedef {Object} DashboardEmptyStateProps
+ * @property {IconName | React.ReactNode} [icon="inbox"] - 아이콘 / Icon
+ * @property {string} title - 제목 / Title
+ * @property {string} [description] - 설명 / Description
+ * @property {string} [actionText] - 액션 버튼 텍스트 / Action button text
+ * @property {string} [actionHref] - 액션 버튼 링크 URL / Action button link URL
+ * @property {() => void} [actionOnClick] - 액션 버튼 클릭 핸들러 / Action button click handler
+ * @property {"default" | "warning" | "info" | "error" | "success"} [variant="default"] - 스타일 변형 / Style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - 크기 / Size
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+export interface DashboardEmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: IconName | React.ReactNode;
+    title: string;
+    description?: string;
+    actionText?: string;
+    actionHref?: string;
+    actionOnClick?: () => void;
+    variant?: "default" | "warning" | "info" | "error" | "success";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * DashboardEmptyState 컴포넌트
+ *
+ * 대시보드에서 빈 상태를 표시하는 컴포넌트입니다.
+ * 데이터가 없을 때 사용자에게 안내 메시지와 액션을 제공합니다.
+ *
+ * Empty state component for dashboards.
+ * Displays a message and action when there is no data to show.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <DashboardEmptyState
+ *   icon="inbox"
+ *   title="데이터가 없습니다"
+ *   description="새로운 데이터를 추가해보세요"
+ *   actionText="데이터 추가"
+ *   actionOnClick={handleAdd}
+ * />
+ *
+ * @example
+ * // 경고 스타일 / Warning style
+ * <DashboardEmptyState
+ *   icon="warning"
+ *   title="오류가 발생했습니다"
+ *   description="잠시 후 다시 시도해주세요"
+ *   variant="warning"
+ *   size="lg"
+ * />
+ *
+ * @param {DashboardEmptyStateProps} props - DashboardEmptyState 컴포넌트의 props / DashboardEmptyState component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} DashboardEmptyState 컴포넌트 / DashboardEmptyState component
+ */
+export declare const DashboardEmptyState: React.ForwardRefExoticComponent<DashboardEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=EmptyState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/EmptyState.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpF,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAsDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,mBAAmB,iGAqF/B,CAAC"}

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

@@ -0,0 +1,45 @@
+import React from "react";
+/**
+ * MembershipBadge 컴포넌트의 props / MembershipBadge component props
+ * @typedef {Object} MembershipBadgeProps
+ * @property {"basic" | "pro" | "premium" | "admin"} tier - 멤버십 등급 / Membership tier
+ * @property {string} [label] - 커스텀 라벨 (기본값: 등급별 라벨) / Custom label (default: tier-specific label)
+ * @property {"sm" | "md" | "lg"} [size="md"] - 배지 크기 / Badge size
+ * @property {boolean} [showIcon=true] - 아이콘 표시 여부 / Show icon
+ * @extends {React.HTMLAttributes<HTMLSpanElement>}
+ */
+export interface MembershipBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    tier: "basic" | "pro" | "premium" | "admin";
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    showIcon?: boolean;
+}
+/**
+ * MembershipBadge 컴포넌트
+ *
+ * 멤버십 등급을 표시하는 배지 컴포넌트입니다.
+ * 등급별로 다른 그라디언트 색상과 아이콘을 제공합니다.
+ *
+ * Badge component that displays membership tier.
+ * Provides different gradient colors and icons for each tier.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <MembershipBadge tier="premium" />
+ *
+ * @example
+ * // 커스텀 라벨과 크기 / Custom label and size
+ * <MembershipBadge
+ *   tier="pro"
+ *   label="프로 플랜"
+ *   size="lg"
+ *   showIcon={false}
+ * />
+ *
+ * @param {MembershipBadgeProps} props - MembershipBadge 컴포넌트의 props / MembershipBadge component props
+ * @param {React.Ref<HTMLSpanElement>} ref - span 요소 ref / span element ref
+ * @returns {JSX.Element} MembershipBadge 컴포넌트 / MembershipBadge component
+ */
+export declare const MembershipBadge: React.ForwardRefExoticComponent<MembershipBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=MembershipBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MembershipBadge.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/MembershipBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;GAQG;AACH,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACjF,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,eAAe,8FA0D3B,CAAC"}

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"}