@hua-labs/ui 2.2.0 → 2.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present HUA Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,10 +1,10 @@
 # @hua-labs/ui
 
-Accessible, TypeScript-first component library for React applications. Provides 70+ production-ready components with modular entry points for optimal bundle size, dark mode support, and Tailwind CSS integration.
+Accessible, TypeScript-first component library for React applications. Provides 70+ production-ready components with modular entry points for optimal bundle size, dark mode support, and cross-platform styling via the dot style engine.
 
 [![npm version](https://img.shields.io/npm/v/@hua-labs/ui.svg)](https://www.npmjs.com/package/@hua-labs/ui)
 [![npm downloads](https://img.shields.io/npm/dm/@hua-labs/ui.svg)](https://www.npmjs.com/package/@hua-labs/ui)
-[![license](https://img.shields.io/npm/l/@hua-labs/ui.svg)](https://github.com/HUA-Labs/HUA-Labs-public/blob/main/LICENSE)
+[![license](https://img.shields.io/npm/l/@hua-labs/ui.svg)](https://github.com/HUA-Labs/hua-packages/blob/main/LICENSE)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue)](https://www.typescriptlang.org/)
 [![React](https://img.shields.io/badge/React-19-blue)](https://reactjs.org/)
 
@@ -14,7 +14,7 @@ Accessible, TypeScript-first component library for React applications. Provides
 - **Modular entry points — Import only what you need for optimal bundle size**
 - **Accessible — ARIA attributes, keyboard navigation, WCAG compliant**
 - **Dark mode — Built-in dark mode support**
-- **Tailwind CSS — Utility-first styling with class variance authority**
+- **dot style engine — Cross-platform styling (Web CSSProperties / React Native StyleSheet) via dot prop**
 - **Tree-shakeable — Side-effect free (except CSS)**
 
 ## Installation
@@ -23,13 +23,13 @@ Accessible, TypeScript-first component library for React applications. Provides
 pnpm add @hua-labs/ui
 ```
 
-> Peer dependencies: @dnd-kit/core ^6.3.1, @dnd-kit/sortable ^10.0.0, @dnd-kit/utilities ^3.2.2, @hua-labs/motion-core >=2.2.3, react >=19.0.0, react-dom >=19.0.0
+> Peer dependencies: @dnd-kit/core ^6.3.1, @dnd-kit/sortable ^10.0.0, @dnd-kit/utilities ^3.2.2, @hua-labs/motion-core >=2.4.0, react >=19.0.0, react-dom >=19.0.0, react-native >=0.73.0
 
 ## Quick Start
 
 ```tsx
-import { Button, Card, CardHeader, CardTitle, CardContent } from '@hua-labs/ui';
-import { Input, Select } from '@hua-labs/ui/form';
+import { Button, Card, CardHeader, CardTitle, CardContent } from "@hua-labs/ui";
+import { Input, Select } from "@hua-labs/ui/form";
 
 function App() {
   return (
@@ -44,47 +44,95 @@ function App() {
     </Card>
   );
 }
-
 ```
 
 ## API
 
-| Export | Type | Description |
-|--------|------|-------------|
-| `Button` | component | Primary action button with variants, sizes, and loading state |
-| `Action` | component | Compact icon action button |
-| `Input` | component | Text input with validation, prefix/suffix, and error states |
-| `NumberInput` | component | Numeric input with increment/decrement controls |
-| `Link` | component | Styled anchor with router integration |
-| `Icon` | component | Universal icon component (Lucide, Phosphor, custom) |
-| `Avatar` | component | User avatar with image fallback |
-| `Modal` | component | Dialog overlay with backdrop and focus trap |
-| `Container` | component | Responsive max-width container |
-| `Grid` | component | CSS Grid layout wrapper |
-| `Stack` | component | Flex stack layout (vertical/horizontal) |
-| `Divider` | component | Visual separator (horizontal/vertical) |
-| `Card` | component | Content container with header, body, footer slots |
-| `Panel` | component | Collapsible content panel |
-| `Badge` | component | Status badge with color variants |
-| `Progress` | component | Progress bar with percentage |
-| `Skeleton` | component | Content placeholder during loading |
-| `Alert` | component | Inline alert with success/warning/error/info variants |
-| `ToastProvider` | component | Toast notification provider |
-| `useToast` | hook | Imperative toast API — toast.success(), toast.error() |
-| `LoadingSpinner` | component | Animated loading indicator |
-| `Tooltip` | component | Hover tooltip with positioning |
-| `Label` | component | Form label with required indicator |
-| `Switch` | component | Toggle switch for boolean values |
-| `Toggle` | component | Pressable toggle button |
-| `ScrollArea` | component | Custom scrollbar container |
-| `ScrollToTop` | component | Scroll-to-top floating button |
-| `ThemeProvider` | component | Dark/light theme context provider |
-| `ThemeToggle` | component | Theme switch button |
-| `useTheme` | hook | Theme context hook — { theme, setTheme } |
-| `IconProvider` | component | Icon configuration context provider |
-| `cn` | function | Tailwind-safe class name merging (clsx + tailwind-merge) |
-| `Slot` | component | Polymorphic slot for asChild pattern |
-
+| Export                      | Type      | Description                                                                                |
+| --------------------------- | --------- | ------------------------------------------------------------------------------------------ |
+| `Box`                       | component | Base block primitive (renders as <div> on web, View on native via .native.tsx)             |
+| `Text`                      | component | Base text primitive (renders as <span> on web, Text on native via .native.tsx)             |
+| `Pressable`                 | component | Interactive primitive with hover/focus dot styles (renders as <button> on web)             |
+| `Button`                    | component | Primary action button with variants, sizes, and loading state                              |
+| `Action`                    | component | Compact icon action button                                                                 |
+| `Input`                     | component | Text input with validation, prefix/suffix, and error states                                |
+| `NumberInput`               | component | Numeric input with increment/decrement controls                                            |
+| `Link`                      | component | Styled anchor with router integration                                                      |
+| `Icon`                      | component | Universal icon component (Lucide, Phosphor, custom)                                        |
+| `Avatar`                    | component | User avatar with image fallback                                                            |
+| `Modal`                     | component | Dialog overlay with backdrop and focus trap                                                |
+| `Container`                 | component | Responsive max-width container                                                             |
+| `Section`                   | component | Page section wrapper with optional header config (title, description, action)              |
+| `Grid`                      | component | CSS Grid layout wrapper                                                                    |
+| `Stack`                     | component | Flex stack layout (vertical/horizontal)                                                    |
+| `Divider`                   | component | Visual separator (horizontal/vertical)                                                     |
+| `Card`                      | component | Content container with header, body, footer slots                                          |
+| `Panel`                     | component | Collapsible content panel                                                                  |
+| `ActionToolbar`             | component | Horizontal toolbar that renders a list of icon action buttons                              |
+| `ComponentLayout`           | component | Dev/docs layout that renders a component with labelled preview and code slots              |
+| `Prose`                     | component | Typography wrapper that applies readable prose styles to raw HTML/markdown content         |
+| `Badge`                     | component | Status badge with color variants                                                           |
+| `Progress`                  | component | Progress bar with percentage                                                               |
+| `Skeleton`                  | component | Content placeholder during loading                                                         |
+| `Alert`                     | component | Inline alert with success/warning/error/info variants                                      |
+| `ToastProvider`             | component | Toast notification provider                                                                |
+| `useToast`                  | hook      | Imperative toast API — toast.success(), toast.error()                                      |
+| `LoadingSpinner`            | component | Animated loading indicator                                                                 |
+| `Tooltip`                   | component | Hover tooltip with positioning                                                             |
+| `Label`                     | component | Form label with required indicator                                                         |
+| `Switch`                    | component | Toggle switch for boolean values                                                           |
+| `Toggle`                    | component | Pressable toggle button                                                                    |
+| `ScrollArea`                | component | Custom scrollbar container                                                                 |
+| `ScrollToTop`               | component | Scroll-to-top floating button                                                              |
+| `ThemeProvider`             | component | Dark/light theme context provider                                                          |
+| `ThemeToggle`               | component | Theme switch button                                                                        |
+| `useTheme`                  | hook      | Theme context hook — { theme, setTheme }                                                   |
+| `iconNames`                 | variable  | Complete list of all icon name strings available in the project                            |
+| `iconProviderMapping`       | variable  | Map from icon name to its provider (lucide, phosphor, custom, etc.)                        |
+| `isValidIconName`           | function  | Type-guard that checks whether a string is a valid icon name                               |
+| `getIconNameForProvider`    | function  | Resolve the provider-specific icon identifier for a given icon name                        |
+| `ICON_ALIASES`              | variable  | Map of alias strings to canonical icon names                                               |
+| `resolveIconAlias`          | function  | Resolve an alias to its canonical icon name, returning the input unchanged if not an alias |
+| `getIconAliases`            | function  | Return the list of all registered icon alias strings                                       |
+| `IconProvider`              | component | Icon configuration context provider                                                        |
+| `registerLucideResolver`    | function  | Register the Lucide icon resolver so the Icon component can render Lucide icons            |
+| `merge`                     | function  | Merge multiple class strings, filtering falsy values                                       |
+| `mergeIf`                   | function  | Conditionally append a class string based on a boolean flag                                |
+| `mergeMap`                  | function  | Map over an object of conditional classes and merge the truthy ones                        |
+| `cn`                        | function  | Class name merging utility (clsx + tailwind-merge). Legacy — prefer dot prop for new code  |
+| `formatRelativeTime`        | function  | Format a Date as a human-readable relative time string (e.g. '3 minutes ago')              |
+| `Slot`                      | component | Polymorphic slot for asChild pattern                                                       |
+| `composeRefs`               | function  | Compose multiple React refs into a single callback ref                                     |
+| `mergeProps`                | function  | Merge two sets of React props, combining event handlers and class names                    |
+| `createColorStyles`         | function  | Generate Tailwind color class strings from a ColorStyleConfig                              |
+| `useColorStyles`            | hook      | Hook that returns memoised color class strings from a ColorStyleConfig                     |
+| `createVariantStyles`       | function  | Build a variant→class-string map for a component (e.g. solid, outline, ghost)              |
+| `createSizeStyles`          | function  | Build a size→class-string map (xs, sm, md, lg, xl)                                         |
+| `createRoundedStyles`       | function  | Build a rounded→class-string map (none, sm, md, lg, full)                                  |
+| `createShadowStyles`        | function  | Build a shadow level→class-string map                                                      |
+| `createHoverStyles`         | function  | Build hover effect→class-string map (scale, brightness, opacity, etc.)                     |
+| `HUA_SPRING_EASING`         | variable  | CSS cubic-bezier string for the HUA brand spring easing                                    |
+| `withDarkMode`              | function  | Wrap a class string with a dark: variant equivalent                                        |
+| `createGradient`            | function  | Generate a Tailwind gradient class string from from/via/to color stops                     |
+| `withOpacity`               | function  | Append a Tailwind opacity modifier to a color class (e.g. bg-primary/50)                   |
+| `isTextWhite`               | function  | Return true if a given color variant requires white text for contrast                      |
+| `isGradientVariant`         | function  | Type-guard that checks whether a color value is a gradient variant string                  |
+| `responsive`                | function  | Apply breakpoint prefixes to a class string (sm:, md:, lg:, etc.)                          |
+| `conditionalClass`          | function  | Return a class string only when a condition is true, otherwise empty string                |
+| `useMicroMotion`            | hook      | Hook that returns CSS class strings for micro-interaction motion states                    |
+| `getMicroMotionClasses`     | function  | Pure function that resolves micro-motion class strings from a config without a hook        |
+| `EASING_FUNCTIONS`          | variable  | Map of named CSS cubic-bezier easing strings used by micro motion                          |
+| `DURATIONS`                 | variable  | Map of semantic duration tokens (fast, normal, slow, etc.) in milliseconds                 |
+| `COMPONENT_MOTION_DEFAULTS` | variable  | Default micro-motion configs keyed by component name                                       |
+| `MotionConfigProvider`      | component | Context provider for per-component motion configuration overrides                          |
+| `useMotionConfig`           | hook      | Read the current MotionConfigContext value                                                 |
+| `useComponentMotion`        | hook      | Resolve the merged motion config for a specific component name                             |
+| `useAnimatedEntrance`       | hook      | Trigger a CSS class-based entrance animation when an element enters the viewport           |
+| `useBreakpoint`             | hook      | Track the current responsive breakpoint (sm / md / lg / xl / 2xl)                          |
+| `useDotEnv`                 | hook      | Read dot-engine style tokens from a CSS custom-property environment                        |
+| `useDotMap`                 | hook      | Resolve a DotStyleMap (state→dot-string) to live style objects based on current state      |
+| `mergeStyles`               | function  | Merge two CSSProperties / style objects, with the second taking precedence                 |
+| `resolveDot`                | function  | Resolve a dot-style string to a CSSProperties object at runtime                            |
 
 ## Related Packages
 

package/dist/{ComponentLayout-BhM4VSoq.d.mts → ComponentLayout-Clf6C2jV.d.mts}

@@ -1,6 +1,37 @@
 import { I as IconName } from './icons-DcOBy9Hf.mjs';
 import React$1 from 'react';
 
+/**
+ * Icon Provider System
+ *
+ * 각 프로바이더별 로딩 전략 / Loading strategies per provider:
+ *
+ * 1. Phosphor Icons (https://phosphoricons.com) - default
+ *    - Official package: @phosphor-icons/react (MIT License)
+ *    - icons.ts에서 정적 subpath import (SSR-safe /dist/ssr)
+ *    - PROJECT_ICONS 매핑으로 통합 이름 지원
+ *    - 정적 맵에 없는 아이콘은 "?" fallback UI 표시
+ *
+ * 2. Iconsax Icons (https://iconsax.io) - separate entry
+ *    - '@hua-labs/ui/iconsax'에서 import 시 자동 등록
+ *    - 코어 번들에 포함되지 않음 / Not in core bundle
+ *    - registerIconsaxResolver()로 lazy 연결
+ *
+ * 3. Lucide Icons (https://lucide.dev) - separate entry
+ *    - '@hua-labs/ui/lucide'에서 import 시 자동 등록
+ *    - 코어 번들에 포함되지 않음 / Not in core bundle
+ *    - registerLucideResolver()로 lazy 연결
+ * Note: 동적 barrel import (import('@phosphor-icons/react'))는 Turbopack에서
+ *       전체 라이브러리(4.6MB)를 번들하므로 사용 금지.
+ */
+interface IconResolverRegistry {
+    lucide: ((name: string) => any) | null;
+    iconsax: ((name: string, variant?: string) => any) | null;
+}
+/**
+ * Register lucide resolver (called from app-level setup).
+ */
+declare function registerLucideResolver(resolver: IconResolverRegistry['lucide']): void;
 /**
  * Project-specific icon list
  * These are the icons actually used in SumUp project
@@ -640,9 +671,10 @@ declare function getIconNameForProvider(iconName: string, provider: 'lucide' | '
  * @property {Array<Object>} [breadcrumbItems] - Breadcrumb 항목들 / Breadcrumb items
  * @property {string} breadcrumbItems[].label - Breadcrumb 라벨 / Breadcrumb label
  * @property {string} [breadcrumbItems[].href] - Breadcrumb 링크 / Breadcrumb link
- * @extends {React.HTMLAttributes<HTMLDivElement>}
+ * @property {string} [dot] - dot 유틸리티 스트링 / dot utility string
+ * @property {React.CSSProperties} [style] - 인라인 스타일 / Inline styles
  */
-interface ComponentLayoutProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface ComponentLayoutProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "className"> {
     title: string;
     description: string;
     children: React$1.ReactNode;
@@ -658,6 +690,8 @@ interface ComponentLayoutProps extends React$1.HTMLAttributes<HTMLDivElement> {
         label: string;
         href?: string;
     }>;
+    dot?: string;
+    style?: React$1.CSSProperties;
 }
 /**
  * ComponentLayout 컴포넌트 / ComponentLayout component
@@ -695,4 +729,4 @@ interface ComponentLayoutProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const ComponentLayout: React$1.ForwardRefExoticComponent<ComponentLayoutProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { type AllIconName as A, ComponentLayout as C, type ProjectIconName as P, iconProviderMapping as a, isValidIconName as b, getIconNameForProvider as g, iconNames as i };
+export { type AllIconName as A, ComponentLayout as C, type ProjectIconName as P, iconProviderMapping as a, isValidIconName as b, getIconNameForProvider as g, iconNames as i, registerLucideResolver as r };

package/dist/DashboardSidebar-ZulecqKs.d.mts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { I as IconName } from './icons-DcOBy9Hf.mjs';
+
+interface SidebarNavItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: IconName | React.ReactNode;
+    badge?: React.ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+}
+interface SidebarSection {
+    id: string;
+    label?: string;
+    items: SidebarNavItem[];
+    /** Default collapsed state for this section */
+    defaultCollapsed?: boolean;
+}
+interface DashboardSidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
+    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;
+    variant?: "default" | "transparent";
+    /** @deprecated Edge handle replaces toggle button */
+    hideToggle?: boolean;
+    itemDot?: string;
+    activeDot?: string;
+    /** @deprecated Use itemDot instead */
+    itemClassName?: string;
+    /** @deprecated Use activeDot instead */
+    activeClassName?: string;
+    isMobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+    hideMobileToggle?: boolean;
+    /** Pinned item IDs — shown when sidebar is collapsed */
+    pinnedItems?: string[];
+    /** Default pinned items (used when pinnedItems is not controlled) */
+    defaultPinnedItems?: string[];
+    /** Called when pinned items change */
+    onPinnedChange?: (pinnedIds: string[]) => void;
+    dot?: string;
+}
+declare const DashboardSidebar: React.ForwardRefExoticComponent<DashboardSidebarProps & React.RefAttributes<HTMLElement>>;
+
+export { DashboardSidebar as D, type SidebarNavItem as S, type DashboardSidebarProps as a, type SidebarSection as b };

package/dist/DashboardToolbar-BRZayZNz.d.mts

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

package/dist/EmptyState-SQ3Z6Vf2.d.mts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { I as IconName } from './icons-DcOBy9Hf.mjs';
+
+/**
+ * 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
+ * @property {string} [dot] - dot 유틸리티 스트링 / dot utility string
+ */
+interface DashboardEmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    icon?: IconName | React.ReactNode;
+    title: string;
+    description?: string;
+    actionText?: string;
+    actionHref?: string;
+    actionOnClick?: () => void;
+    variant?: "default" | "warning" | "info" | "error" | "success";
+    size?: "sm" | "md" | "lg";
+    dot?: string;
+}
+/**
+ * DashboardEmptyState 컴포넌트
+ *
+ * 대시보드에서 빈 상태를 표시하는 컴포넌트입니다.
+ * 데이터가 없을 때 사용자에게 안내 메시지와 액션을 제공합니다.
+ *
+ * Empty state component for dashboards.
+ * Displays a message and action when there is no data to show.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <DashboardEmptyState
+ *   icon="inbox"
+ *   title="데이터가 없습니다"
+ *   description="새로운 데이터를 추가해보세요"
+ *   actionText="데이터 추가"
+ *   actionOnClick={handleAdd}
+ * />
+ *
+ * @example
+ * // 경고 스타일 / Warning style
+ * <DashboardEmptyState
+ *   icon="warning"
+ *   title="오류가 발생했습니다"
+ *   description="잠시 후 다시 시도해주세요"
+ *   variant="warning"
+ *   size="lg"
+ * />
+ *
+ * @param {DashboardEmptyStateProps} props - DashboardEmptyState 컴포넌트의 props / DashboardEmptyState component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} DashboardEmptyState 컴포넌트 / DashboardEmptyState component
+ */
+declare const DashboardEmptyState: React.ForwardRefExoticComponent<DashboardEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DashboardEmptyState as D, type DashboardEmptyStateProps as a };

package/dist/{Modal-CrXmb3Ll.d.mts → Modal-DKKtBtbh.d.mts}

@@ -12,9 +12,9 @@ import React from 'react';
  * @property {string} [title] - 모달 제목 / Modal title
  * @property {string} [description] - 모달 설명 / Modal description
  * @property {boolean} [showBackdrop=true] - 배경 오버레이 표시 여부 / Show backdrop overlay
- * @property {string} [backdropClassName] - 배경 오버레이 추가 CSS 클래스 / Additional CSS class for backdrop
+ * @property {string} [backdropDot] - 배경 오버레이 추가 dot 스트링 / Additional dot string for backdrop
  * @property {boolean} [centered=true] - 모달을 화면 중앙에 배치할지 여부 / Center modal on screen
- * @property {string} [className] - 모달 컨테이너 추가 CSS 클래스 / Additional CSS class for modal container
+ * @property {React.CSSProperties} [style] - 모달 컨테이너 인라인 스타일 / Inline style for modal container
  */
 interface ModalProps {
     /** 모달 열림/닫힘 상태 / Modal open/close state */
@@ -35,12 +35,18 @@ interface ModalProps {
     description?: string;
     /** 배경 오버레이 표시 여부 / Show backdrop overlay */
     showBackdrop?: boolean;
-    /** 배경 오버레이 추가 CSS 클래스 / Additional CSS class for backdrop */
-    backdropClassName?: string;
+    /** 배경 오버레이 추가 dot 스트링 / Additional dot string for backdrop */
+    backdropDot?: string;
     /** 모달을 화면 중앙에 배치할지 여부 / Center modal on screen */
     centered?: boolean;
-    /** 모달 컨테이너 추가 CSS 클래스 / Additional CSS class for modal container */
-    className?: string;
+    /** 모달 컨테이너 둥글기 / Modal container border-radius */
+    rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+    /** 모달 그림자 / Modal shadow */
+    shadow?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /** dot 유틸리티 스트링 (인라인 스타일로 변환) / dot utility string (converted to inline style) */
+    dot?: string;
+    /** 인라인 스타일 / Inline style */
+    style?: React.CSSProperties;
 }
 /**
  * Modal 컴포넌트 / Modal component

package/dist/{Section-BWzyshgX.d.mts → Section-DKdIG1sg.d.mts}

@@ -1,15 +1,14 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import React from 'react';
-import { VariantProps } from 'class-variance-authority';
 
 /**
  * Container 컴포넌트의 props
  */
-interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     size?: "sm" | "md" | "lg" | "xl" | "full";
     padding?: "none" | "sm" | "md" | "lg" | "xl";
     centered?: boolean;
     fluid?: boolean;
+    dot?: string;
 }
 /**
  * Container 컴포넌트
@@ -24,10 +23,6 @@ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
 
-declare const sectionVariants: (props?: ({
-    spacing?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
-    background?: "none" | "primary" | "muted" | "accent" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SectionHeaderConfig {
     title: string;
     subtitle?: string;
@@ -35,17 +30,21 @@ interface SectionHeaderConfig {
     /** section-line 데코레이터 표시 @default true */
     decorator?: boolean;
     /** 텍스트 정렬 @default 'center' */
-    align?: 'left' | 'center';
+    align?: "left" | "center";
 }
-interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionVariants> {
+interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
     /** Container 사이즈 @default 'lg' */
-    container?: ContainerProps['size'];
+    container?: ContainerProps["size"];
     /** Container 패딩 @default 'none' */
-    containerPadding?: ContainerProps['padding'];
+    containerPadding?: ContainerProps["padding"];
     /** 섹션 헤더 설정 */
     header?: SectionHeaderConfig;
     /** 풀위드 모드 (Container 없이 직접) */
     fullWidth?: boolean;
+    spacing?: "none" | "sm" | "md" | "lg" | "xl";
+    background?: "none" | "muted" | "accent" | "primary";
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * Section 컴포넌트
@@ -64,4 +63,4 @@ interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<t
  */
 declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
 
-export { Container as C, type SectionProps as S, type ContainerProps as a, Section as b, type SectionHeaderConfig as c, sectionVariants as s };
+export { Container as C, type SectionProps as S, type ContainerProps as a, Section as b, type SectionHeaderConfig as c };