@hua-labs/ui 2.1.0 → 2.1.1

package/README.md

@@ -1,42 +1,31 @@
 # @hua-labs/ui
 
-Modern React UI component library — accessible, themeable, production-ready.
-모던 React 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.
 
 [![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)
+[![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)
 [![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**: APIs may change before stable release. | **알파**: 안정 릴리스 전 API가 변경될 수 있습니다.
-
-## 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.
-
-React 애플리케이션을 위한 접근성 우선 TypeScript 컴포넌트 라이브러리입니다. 50개 이상의 프로덕션 레디 컴포넌트를 모듈식 진입점, 다크 모드, Tailwind CSS 통합과 함께 제공합니다.
-
 ## Features
 
-- **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)
+- **70+ 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 | 설치
+## Installation
 
 ```bash
 pnpm add @hua-labs/ui
 ```
 
-Peer dependencies: `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.0.0, react >=19.0.0, react-dom >=19.0.0
 
-Optional peers: `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities` (for drag-and-drop)
-
-## Quick Start | 빠른 시작
+## Quick Start
 
 ```tsx
 import { Button, Card, CardHeader, CardTitle, CardContent } from '@hua-labs/ui';
@@ -55,53 +44,52 @@ function App() {
     </Card>
   );
 }
-```
-
-## Entry Points | 진입점
-
-| 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 |
 
-## API Overview | API 개요
-
-| 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` |
-
-## Documentation | 문서
-
-- [📚 Documentation Site | 문서 사이트](https://docs.hua-labs.com)
-
-## Related Packages | 관련 패키지
-
-- [`@hua-labs/hua`](https://www.npmjs.com/package/@hua-labs/hua) — 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 | 요구사항
+```
 
-React >= 19.0.0 · React DOM >= 19.0.0 · Tailwind CSS · TypeScript >= 5.9
+## 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 |
+
+
+## Related Packages
+
+- [`@hua-labs/hua`](https://www.npmjs.com/package/@hua-labs/hua)
 
 ## License
 
-MIT — [HUA Labs](https://github.com/HUA-Labs/HUA-Labs-public)
+MIT — [HUA Labs](https://hua-labs.com)

package/dist/{ComponentLayout-btJq4TjA.d.mts → ComponentLayout-DrZpz0yv.d.mts}

@@ -1,4 +1,4 @@
-import { I as IconName } from './icons-Bj_nr8Ba.mjs';
+import { I as IconName } from './icons-DmhQEH_E.mjs';
 import React$1 from 'react';
 
 /**

package/dist/Section-BWzyshgX.d.mts

@@ -0,0 +1,67 @@
+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> {
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    padding?: "none" | "sm" | "md" | "lg" | "xl";
+    centered?: boolean;
+    fluid?: boolean;
+}
+/**
+ * Container 컴포넌트
+ *
+ * 콘텐츠를 감싸는 컨테이너 컴포넌트입니다.
+ * 반응형 최대 너비와 패딩을 제공하여 일관된 레이아웃을 구성합니다.
+ *
+ * @example
+ * <Container><h1>제목</h1></Container>
+ * <Container size="sm" padding="none"><div>콘텐츠</div></Container>
+ * <Container fluid padding="xl"><div>전체 너비</div></Container>
+ */
+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;
+    action?: React.ReactNode;
+    /** section-line 데코레이터 표시 @default true */
+    decorator?: boolean;
+    /** 텍스트 정렬 @default 'center' */
+    align?: 'left' | 'center';
+}
+interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionVariants> {
+    /** Container 사이즈 @default 'lg' */
+    container?: ContainerProps['size'];
+    /** Container 패딩 @default 'none' */
+    containerPadding?: ContainerProps['padding'];
+    /** 섹션 헤더 설정 */
+    header?: SectionHeaderConfig;
+    /** 풀위드 모드 (Container 없이 직접) */
+    fullWidth?: boolean;
+}
+/**
+ * Section 컴포넌트
+ *
+ * 랜딩 페이지 섹션의 보일러플레이트를 줄이는 시맨틱 래퍼.
+ * 내부적으로 Container를 사용하며, header prop으로 제목/부제/데코레이터를 자동 생성합니다.
+ *
+ * @example
+ * <Section header={{ title: "제목", subtitle: "부제" }}>
+ *   {children}
+ * </Section>
+ *
+ * <Section spacing="xl" background="muted" fullWidth>
+ *   {fullWidthContent}
+ * </Section>
+ */
+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 };

package/dist/advanced/dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/advanced/dashboard.ts"],"names":[],"mappings":"AAIA,cAAc,yBAAyB,CAAC;AACxC,mBAAmB,yBAAyB,CAAC;AAG7C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,YAAY,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/advanced/dashboard.ts"],"names":[],"mappings":"AAEA,cAAc,yBAAyB,CAAC;AACxC,mBAAmB,yBAAyB,CAAC;AAG7C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,YAAY,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/advanced-dashboard.d.mts

@@ -1,5 +1,5 @@
 import React$1 from 'react';
-import { I as IconName } from './icons-Bj_nr8Ba.mjs';
+import { I as IconName } from './icons-DmhQEH_E.mjs';
 import { C as Color, E as ExtendedVariant } from './common-YLvZxA_K.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import '@phosphor-icons/react';