@hua-labs/ui 2.0.0-alpha.10 → 2.0.0-alpha.12

package/README.md

@@ -1,369 +1,107 @@
 # @hua-labs/ui
 
-Modern React UI component library with production-ready components.
-프로덕션 레디 React UI 컴포넌트 라이브러리
+Modern React UI component library — accessible, themeable, production-ready.
+모던 React UI 컴포넌트 라이브러리 — 접근성, 테마, 프로덕션 레디.
 
 [![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/dw/@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)
-[![React](https://img.shields.io/badge/React-19-blue)](https://reactjs.org/)
 [![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/)
 
-> **⚠️ Alpha Release**: This package is currently in alpha. APIs may change before the stable release.
-
----
-
-[English](#english) | [한국어](#korean)
-
-## English
-
-### Overview
-
-Accessible, TypeScript component library for React applications. Provides modular entry points for optimal bundle size and dark mode support.
-
-### Features
-
-- Production-ready components
-- Modular entry points for bundle optimization
-- TypeScript support
-- Dark mode support
-- Accessible (ARIA attributes, keyboard navigation)
-- Responsive design
-- Tree-shaking friendly
-- Tailwind CSS based styling
-
-### Installation
-
-```bash
-npm install @hua-labs/ui
-# or
-yarn add @hua-labs/ui
-# or
-pnpm add @hua-labs/ui
-```
-
-### Peer Dependencies
-
-```bash
-# Required
-npm install react react-dom
-
-# Optional (for Phosphor Icons support)
-npm install @phosphor-icons/react
-```
-
-### Quick Start
-
-```tsx
-import { Button, Input, Card, ThemeProvider } from '@hua-labs/ui';
-
-function App() {
-  return (
-    <ThemeProvider>
-      <div>
-        <Button>Click me</Button>
-        <Input placeholder="Enter text" />
-        <Card>
-          <CardHeader>
-            <CardTitle>Card Title</CardTitle>
-          </CardHeader>
-          <CardContent>
-            Card content
-          </CardContent>
-        </Card>
-      </div>
-    </ThemeProvider>
-  );
-}
-```
-
-### Entry Points
-
-HUA UI is organized into modular entry points for optimal bundle size. Import only the components you need from specific entry points.
-
-| Entry | Path | Description |
-|-------|------|-------------|
-| Core | `@hua-labs/ui` | Atomic components (Button, Card, Badge, Alert, Progress, Skeleton, etc.) |
-| Form | `@hua-labs/ui/form` | Form components (Input, Select, DatePicker, Upload, Autocomplete, etc.) |
-| Navigation | `@hua-labs/ui/navigation` | Navigation & page transition (Breadcrumb, Pagination, PageTransition) |
-| Overlay | `@hua-labs/ui/overlay` | Overlay components (Modal, Popover, Dropdown, Drawer, BottomSheet) |
-| Data | `@hua-labs/ui/data` | Data display (Table, CodeBlock, InlineCode) |
-| Interactive | `@hua-labs/ui/interactive` | Interactive components (Accordion, Tabs, Menu, ContextMenu, Command) |
-| Feedback | `@hua-labs/ui/feedback` | Toast notifications (ToastProvider, useToast) |
-| Advanced | `@hua-labs/ui/advanced` | Specialized components (Emotion*, Dashboard, Scrollbar, etc.) |
-
-```tsx
-// Core atomic components
-import { Button, Card, Badge, Alert, Progress, Skeleton } from '@hua-labs/ui';
-
-// Form components (bundle optimized)
-import { Input, Select, DatePicker, Form } from '@hua-labs/ui/form';
-
-// Overlay components
-import { Modal, Popover, Dropdown, Drawer, BottomSheet } from '@hua-labs/ui/overlay';
-
-// Data display
-import { Table, TableHeader, TableBody, TableRow, TableCell } from '@hua-labs/ui/data';
-import { CodeBlock, InlineCode } from '@hua-labs/ui/data';
-
-// Interactive components
-import { Accordion, Tabs, Menu, Command } from '@hua-labs/ui/interactive';
-
-// Navigation components
-import { Breadcrumb, Pagination, PageTransition } from '@hua-labs/ui/navigation';
-
-// Feedback components (Toast)
-import { ToastProvider, useToast } from '@hua-labs/ui/feedback';
-```
-
-**Note**: See [package structure documentation](./docs/PACKAGE_STRUCTURE.md) for detailed entry point information.
-
-### Bundle Optimization
-
-HUA UI supports modular entry points and tree-shaking. Import only the components you need from specific entry points to optimize bundle size.
-
-**Optimization Tips**:
-- Import only needed components
-- Use specific entry points (Form, Navigation, Feedback)
-- Tree-shaking automatically removes unused code
-
-**Note**: Using specific entry points provides better bundle size optimization. Tree-shaking automatically removes unused code.
-
-### CSS Import (Toast Component Usage)
-
-If you use Toast components, you need to import the CSS file:
-
-```css
-/* Add to globals.css or main CSS file */
-@import '@hua-labs/ui/styles/toast.css';
-```
-
-Or in JavaScript/TypeScript:
-
-```tsx
-// app/layout.tsx or _app.tsx
-import '@hua-labs/ui/styles/toast.css';
-```
-
-### API Overview
-
-#### Core Components
-
-- **Basic UI**: Button, Input, Icon, Avatar, Link
-- **Layout**: Container, Grid, Stack, Card, Panel, Divider, ActionToolbar, ComponentLayout
-- **Navigation**: Navigation, Breadcrumb, Pagination, PageNavigation, PageTransition
-- **Data Display**: Table, Badge, Progress, Skeleton
-- **Feedback**: Alert, Toast, LoadingSpinner, Tooltip
-- **Overlay**: Modal, Drawer, Popover, Dropdown, BottomSheet, ConfirmModal
-- **Form**: Form, FormControl, Input, NumberInput, Select, Checkbox, Radio, Switch, Slider, Textarea, DatePicker, Upload, Autocomplete, ColorPicker, Label
-- **Interactive**: Accordion, Tabs, Menu, ContextMenu, Command
-- **Code Display**: CodeBlock, InlineCode
-- **Specialized**: ScrollArea, ScrollToTop, Toggle
-- **Theme**: ThemeProvider, ThemeToggle
-
-#### Utilities
-
-- **Class Utilities**: `merge`, `mergeIf`, `mergeMap`, `cn` - Smart class merging utilities
-- **Date Utilities**: `formatRelativeTime` - Relative time formatting
-- **Style System**: Color styles, variant styles, size styles, responsive utilities
-- **Motion Hooks**: `useInView`, `useScrollProgress`, `useMouse`, `useReducedMotion`, `useWindowSize`
-- **Icon System**: `Icon`, `IconProvider`, `useIconContext` - Flexible icon system with multiple providers
-
-### Documentation
-
-- [Architecture Documentation](./docs/ARCHITECTURE.md) - Core architecture and design principles
-- [Package Structure](./docs/PACKAGE_STRUCTURE.md) - Package structure and internal organization
-- [Development Guide](./docs/DEVELOPMENT_GUIDE.md) - Component development guide
-- [Icon System](./docs/ICON_SYSTEM.md) - Icon system guide
-
-### Related Packages
-
-- [`@hua-labs/hua-ux`](../hua-ux/README.md) - Integrated framework (UI + Motion + i18n)
-- [`@hua-labs/motion-core`](../hua-motion-core/README.md) - Animation hooks
-- [`@hua-labs/i18n-core`](../hua-i18n-core/README.md) - Internationalization core
-
-### Requirements
-
-- React >= 19.0.0
-- React DOM >= 19.0.0
-- Tailwind CSS (for styling)
-- Optional: @phosphor-icons/react (for Phosphor icon support)
+> **Alpha**: APIs may change before stable release. | **알파**: 안정 릴리스 전 API가 변경될 수 있습니다.
 
-## Korean
+## Overview | 개요
 
-### 개요
+Accessible, TypeScript-first component library for React applications. Provides 50+ production-ready components with modular entry points for optimal bundle size, dark mode support, and Tailwind CSS integration.
 
-접근 가능한 TypeScript React 컴포넌트 라이브러리입니다. 번들 크기 최적화를 위한 모듈식 진입점과 다크 모드 지원을 제공합니다.
+React 애플리케이션을 위한 접근성 우선 TypeScript 컴포넌트 라이브러리입니다. 50개 이상의 프로덕션 레디 컴포넌트를 모듈식 진입점, 다크 모드, Tailwind CSS 통합과 함께 제공합니다.
 
-### 주요 기능
+## Features
 
-- 프로덕션 레디 컴포넌트
-- 번들 최적화를 위한 모듈식 진입점
-- TypeScript 지원
-- 다크 모드 지원
-- 접근성 (ARIA 속성, 키보드 네비게이션)
-- 반응형 디자인
-- Tree-shaking 친화적
-- Tailwind CSS 기반 스타일링
+- **50+ components** — Buttons, forms, tables, modals, overlays, and more
+- **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
+- **Tree-shakeable** — Side-effect free (except CSS)
 
-### 설치
+## Installation | 설치
 
 ```bash
-npm install @hua-labs/ui
-# or
-yarn add @hua-labs/ui
-# or
 pnpm add @hua-labs/ui
 ```
 
-### Peer Dependencies
-
-```bash
-# 필수
-npm install react react-dom
+Peer dependencies: `react >= 19.0.0`, `react-dom >= 19.0.0`
 
-# 선택사항 (Phosphor Icons 지원용)
-npm install @phosphor-icons/react
-```
+Optional peers: `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities` (for drag-and-drop)
 
-### 빠른 시작
+## Quick Start | 빠른 시작
 
 ```tsx
-import { Button, Input, Card, ThemeProvider } from '@hua-labs/ui';
+import { Button, Card, CardHeader, CardTitle, CardContent } from '@hua-labs/ui';
+import { Input, Select } from '@hua-labs/ui/form';
 
 function App() {
   return (
-    <ThemeProvider>
-      <div>
-        <Button>클릭하세요</Button>
-        <Input placeholder="텍스트 입력" />
-        <Card>
-          <CardHeader>
-            <CardTitle>카드 제목</CardTitle>
-          </CardHeader>
-          <CardContent>
-            카드 내용
-          </CardContent>
-        </Card>
-      </div>
-    </ThemeProvider>
+    <Card>
+      <CardHeader>
+        <CardTitle>Sign Up</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Input placeholder="Email" />
+        <Button>Submit</Button>
+      </CardContent>
+    </Card>
   );
 }
 ```
 
-### 진입점
-
-HUA UI는 번들 크기 최적화를 위한 모듈식 진입점으로 구성됩니다. 필요한 컴포넌트만 특정 진입점에서 import하세요.
-
-| 진입점 | 경로 | 설명 |
-|--------|------|------|
-| Core | `@hua-labs/ui` | 원자적 컴포넌트 (Button, Card, Badge, Alert, Progress, Skeleton 등) |
-| Form | `@hua-labs/ui/form` | 폼 컴포넌트 (Input, Select, DatePicker, Upload, Autocomplete 등) |
-| Navigation | `@hua-labs/ui/navigation` | 네비게이션 & 페이지 전환 (Breadcrumb, Pagination, PageTransition) |
-| Overlay | `@hua-labs/ui/overlay` | 오버레이 컴포넌트 (Modal, Popover, Dropdown, Drawer, BottomSheet) |
-| Data | `@hua-labs/ui/data` | 데이터 표시 (Table, CodeBlock, InlineCode) |
-| Interactive | `@hua-labs/ui/interactive` | 인터랙티브 컴포넌트 (Accordion, Tabs, Menu, ContextMenu, Command) |
-| Feedback | `@hua-labs/ui/feedback` | Toast 알림 (ToastProvider, useToast) |
-| Advanced | `@hua-labs/ui/advanced` | 특수 컴포넌트 (Emotion*, Dashboard, Scrollbar 등) |
+## Entry Points | 진입점
 
-```tsx
-// Core 원자적 컴포넌트
-import { Button, Card, Badge, Alert, Progress, Skeleton } from '@hua-labs/ui';
-
-// 폼 컴포넌트 (번들 최적화)
-import { Input, Select, DatePicker, Form } from '@hua-labs/ui/form';
+| Path | Components |
+|------|------------|
+| `@hua-labs/ui` | Button, Card, Badge, Alert, Modal, Drawer, Table, Avatar, etc. |
+| `@hua-labs/ui/form` | Input, Select, DatePicker, Upload, Autocomplete, ColorPicker, etc. |
+| `@hua-labs/ui/navigation` | PageNavigation, PageTransition |
+| `@hua-labs/ui/feedback` | ToastProvider, useToast |
+| `@hua-labs/ui/overlay` | Modal, Drawer, Popover, Dropdown, BottomSheet, ConfirmModal |
+| `@hua-labs/ui/data` | Table, Badge, Progress, Skeleton |
+| `@hua-labs/ui/interactive` | Accordion, Tabs, Menu, ContextMenu, Command |
+| `@hua-labs/ui/sdui` | Server-driven UI components |
+| `@hua-labs/ui/advanced` | Advanced components (dashboard, motion, emotion) |
+| `@hua-labs/ui/styles/*` | CSS files (base, toast, codeblock, theme) |
+| `@hua-labs/ui/icons` | Icon components |
 
-// 오버레이 컴포넌트
-import { Modal, Popover, Dropdown, Drawer, BottomSheet } from '@hua-labs/ui/overlay';
+## API Overview | API 개요
 
-// 데이터 표시
-import { Table, TableHeader, TableBody, TableRow, TableCell } from '@hua-labs/ui/data';
-import { CodeBlock, InlineCode } from '@hua-labs/ui/data';
+| Category | Components |
+|----------|------------|
+| Basic UI | Button, Icon, Avatar, Link, Badge |
+| Layout | Container, Grid, Stack, Card, Panel, Divider |
+| Form | Input, NumberInput, Select, Checkbox, Radio, Switch, Slider, Textarea, DatePicker, Upload, Autocomplete, ColorPicker |
+| Overlay | Modal, Drawer, Popover, Dropdown, BottomSheet, ConfirmModal |
+| Data | Table, Progress, Skeleton |
+| Feedback | Alert, Toast, LoadingSpinner, Tooltip |
+| Interactive | Accordion, Tabs, Menu, ContextMenu, Command |
+| Navigation | Breadcrumb, Pagination, PageNavigation, PageTransition |
+| Theme | ThemeProvider, ThemeToggle |
+| Utilities | `cn`, `merge`, `mergeIf`, `mergeMap` |
 
-// 인터랙티브 컴포넌트
-import { Accordion, Tabs, Menu, Command } from '@hua-labs/ui/interactive';
+## Documentation | 문서
 
-// 네비게이션 컴포넌트
-import { Breadcrumb, Pagination, PageTransition } from '@hua-labs/ui/navigation';
+- [📚 Documentation Site | 문서 사이트](https://docs.hua-labs.com)
 
-// 피드백 컴포넌트 (Toast)
-import { ToastProvider, useToast } from '@hua-labs/ui/feedback';
-```
+## Related Packages | 관련 패키지
 
-**참고**: 자세한 진입점 정보는 [패키지 구조 문서](./docs/PACKAGE_STRUCTURE.md)를 참고하세요.
+- [`@hua-labs/hua-ux`](https://www.npmjs.com/package/@hua-labs/hua-ux) — UX framework (UI + Motion + i18n)
+- [`@hua-labs/ui-dashboard`](https://www.npmjs.com/package/@hua-labs/ui-dashboard) — Dashboard domain components
+- [`@hua-labs/motion-core`](https://www.npmjs.com/package/@hua-labs/motion-core) — Animation hooks
 
-### 번들 최적화
+## Requirements | 요구사항
 
-HUA UI는 모듈식 진입점과 tree-shaking을 지원합니다. 번들 크기를 최적화하려면 필요한 컴포넌트만 특정 진입점에서 import하세요.
-
-**최적화 팁**:
-- 필요한 컴포넌트만 import
-- 특정 진입점 사용 (Form, Navigation, Feedback)
-- Tree-shaking이 자동으로 사용하지 않는 코드를 제거합니다
-
-**참고**: 특정 진입점을 사용하면 번들 크기 최적화에 도움이 됩니다. Tree-shaking이 자동으로 사용하지 않는 코드를 제거합니다.
-
-### CSS Import (Toast 컴포넌트 사용 시)
-
-Toast 컴포넌트를 사용하는 경우 CSS 파일을 import해야 합니다:
-
-```css
-/* globals.css 또는 메인 CSS 파일에 추가 */
-@import '@hua-labs/ui/styles/toast.css';
-```
-
-또는 JavaScript/TypeScript에서:
-
-```tsx
-// app/layout.tsx 또는 _app.tsx
-import '@hua-labs/ui/styles/toast.css';
-```
-
-### API 개요
-
-#### Core 컴포넌트
-
-- **기본 UI**: Button, Input, Icon, Avatar, Link
-- **레이아웃**: Container, Grid, Stack, Card, Panel, Divider, ActionToolbar, ComponentLayout
-- **네비게이션**: Navigation, Breadcrumb, Pagination, PageNavigation, PageTransition
-- **데이터 표시**: Table, Badge, Progress, Skeleton
-- **피드백**: Alert, Toast, LoadingSpinner, Tooltip
-- **오버레이**: Modal, Drawer, Popover, Dropdown, BottomSheet, ConfirmModal
-- **폼**: Form, FormControl, Input, NumberInput, Select, Checkbox, Radio, Switch, Slider, Textarea, DatePicker, Upload, Autocomplete, ColorPicker, Label
-- **인터랙티브**: Accordion, Tabs, Menu, ContextMenu, Command
-- **코드 표시**: CodeBlock, InlineCode
-- **특수 컴포넌트**: ScrollArea, ScrollToTop, Toggle
-- **테마**: ThemeProvider, ThemeToggle
-
-#### 유틸리티
-
-- `merge`, `mergeIf`, `mergeMap`, `cn` - 클래스 병합 유틸리티
-- `formatRelativeTime` - 날짜 포맷팅 유틸리티
-
-### 문서
-
-- [아키텍처 문서](./docs/ARCHITECTURE.md) - 핵심 아키텍처 및 설계 원칙
-- [패키지 구조](./docs/PACKAGE_STRUCTURE.md) - 패키지 구조 및 내부 구조
-- [개발 가이드](./docs/DEVELOPMENT_GUIDE.md) - 컴포넌트 추가 및 개발 가이드
-- [아이콘 시스템](./docs/ICON_SYSTEM.md) - 아이콘 시스템 가이드
-
-### 관련 패키지
-
-- [`@hua-labs/hua-ux`](../hua-ux/README.md) - 통합 프레임워크 (UI + Motion + i18n)
-- [`@hua-labs/motion-core`](../hua-motion-core/README.md) - 애니메이션 훅
-- [`@hua-labs/i18n-core`](../hua-i18n-core/README.md) - 국제화 핵심
-
-### 요구사항
-
-- React >= 19.0.0
-- React DOM >= 19.0.0
-- Tailwind CSS (스타일링용)
-- 선택사항: @phosphor-icons/react (Phosphor 아이콘 지원용)
+React >= 19.0.0 · React DOM >= 19.0.0 · Tailwind CSS · TypeScript >= 5.9
 
 ## License
 
-MIT License
-
-## Repository
-
-<https://github.com/HUA-Labs/HUA-Labs-public>
+MIT — [HUA Labs](https://github.com/HUA-Labs/HUA-Labs-public)

package/dist/{Switch-BB6GZnqn.d.mts → Switch-O4TpMKfQ.d.mts}

@@ -2,19 +2,21 @@ import React from 'react';
 
 /**
  * Input 컴포넌트의 props / Input component props
- * HTML input 요소의 모든 표준 속성을 상속받습니다.
- * Inherits all standard attributes of HTML input element.
- * @typedef {Object} InputProps
- * @extends {React.InputHTMLAttributes<HTMLInputElement>}
  */
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    /** Visual style variant */
     variant?: "default" | "outline" | "filled" | "glass";
-    /** Error state indicator */
     error?: boolean;
-    /** Success state indicator */
     success?: boolean;
 }
+/**
+ * Input 컴포넌트 / Input component
+ *
+ * 표준 HTML input 요소를 래핑한 스타일링된 입력 필드 컴포넌트입니다.
+ *
+ * @example
+ * <Input type="text" placeholder="이름을 입력하세요" />
+ * <Input type="email" error placeholder="이메일" />
+ */
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 /**
@@ -70,12 +72,6 @@ declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & Re
 
 /**
  * Label 컴포넌트의 props / Label component props
- * @typedef {Object} LabelProps
- * @property {boolean} [required=false] - 필수 필드 여부 / Required field indicator
- * @property {boolean} [error=false] - 에러 상태 표시 / Error state
- * @property {boolean} [disabled=false] - 비활성화 상태 / Disabled state
- * @property {"default" | "glass"} [variant="default"] - Label 스타일 변형 / Label style variant
- * @extends {React.LabelHTMLAttributes<HTMLLabelElement>}
  */
 interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     required?: boolean;
@@ -87,32 +83,11 @@ interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
  * Label 컴포넌트 / Label component
  *
  * 폼 필드의 레이블을 표시하는 컴포넌트입니다.
- * 필수 필드 표시와 에러 상태를 지원합니다.
  *
- * Component for displaying form field labels.
- * Supports required field indicator and error state.
- *
- * @component
  * @example
- * // 기본 사용 / Basic usage
  * <Label htmlFor="email">이메일</Label>
- * <Input id="email" />
- *
- * @example
- * // 필수 필드 / Required field
  * <Label required htmlFor="name">이름</Label>
- * <Input id="name" required />
- *
- * @example
- * // 에러 상태 / Error state
  * <Label error htmlFor="password">비밀번호</Label>
- * <Input id="password" aria-invalid />
- *
- * @param {LabelProps} props - Label 컴포넌트의 props / Label component props
- * @param {React.Ref<HTMLLabelElement>} ref - label 요소 ref / label element ref
- * @returns {JSX.Element} Label 컴포넌트 / Label component
- *
- * @todo 접근성 개선: required일 때 aria-required="true" 추가 필요 / Accessibility improvement: add aria-required="true" when required
  */
 declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;