@peppone.choi/ui-kit 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ko.md +202 -0
- package/README.md +205 -0
- package/dist/chunk-J2XE2GGR.cjs +6016 -0
- package/dist/chunk-J2XE2GGR.cjs.map +1 -0
- package/dist/chunk-OP3CUFEX.js +5849 -0
- package/dist/chunk-OP3CUFEX.js.map +1 -0
- package/dist/index-DLX2PSxy.d.cts +1936 -0
- package/dist/index-DLX2PSxy.d.ts +1936 -0
- package/dist/index.cjs +589 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +10 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -0
- package/dist/next/index.cjs +594 -0
- package/dist/next/index.cjs.map +1 -0
- package/dist/next/index.d.cts +19 -0
- package/dist/next/index.d.ts +19 -0
- package/dist/next/index.js +13 -0
- package/dist/next/index.js.map +1 -0
- package/dist/peppone-ui.css +3769 -0
- package/package.json +101 -0
package/README.ko.md
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
# Peppone UI Kit
|
|
2
|
+
|
|
3
|
+
[](#라이선스)
|
|
4
|
+
|
|
5
|
+
**70개 이상의 컴포넌트**를 제공하는 React 컴포넌트 라이브러리입니다.
|
|
6
|
+
[Wanted Design System (Montage)](https://github.com/wanteddev/montage-web)(MIT) 기반이며,
|
|
7
|
+
**프레임워크 비종속 코어**와 **선택적 Next.js 어댑터**를 함께 제공합니다 — 설치하면 바로 동작합니다.
|
|
8
|
+
|
|
9
|
+
> 🇺🇸 English docs: [README.md](./README.md)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## 특징
|
|
14
|
+
|
|
15
|
+
- **70개 이상 컴포넌트** — 액션, 콘텐츠, 피드백, 내비게이션, 표현, 선택 카테고리.
|
|
16
|
+
- **두 개의 진입점** — 프레임워크 비종속 코어(`@peppone.choi/ui-kit`)와 Next.js 연동 어댑터(`@peppone.choi/ui-kit/next`).
|
|
17
|
+
- **접근성 오버레이** — 다이얼로그/팝오버/툴팁이 [Base UI](https://base-ui.com) 프리미티브 기반(포커스 트랩, 스크롤 락, dismiss, 포털, ARIA).
|
|
18
|
+
- **Tailwind CSS v4** 토큰 + CSS 커스텀 프로퍼티 기반 **다크 모드**.
|
|
19
|
+
- **TypeScript 완전 지원** — 모든 컴포넌트에 타입 포함.
|
|
20
|
+
- **ESM + CJS** 빌드, 트리셰이킹 지원(`sideEffects` 인식), RSC용 `"use client"` 보존.
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## 설치
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
pnpm add @peppone.choi/ui-kit
|
|
28
|
+
# 또는: npm install @peppone.choi/ui-kit
|
|
29
|
+
# 또는: yarn add @peppone.choi/ui-kit
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Peer 의존성
|
|
33
|
+
|
|
34
|
+
`react`와 `react-dom`(v19 이상)은 의도적으로 **peer** 의존성입니다. 킷이 앱의
|
|
35
|
+
단일 React 인스턴스를 공유해야 하기 때문입니다. React를 일반 의존성으로 넣으면
|
|
36
|
+
사본이 중복돼 "Invalid hook call" 오류가 날 수 있습니다.
|
|
37
|
+
|
|
38
|
+
직접 설치할 필요는 보통 없습니다 — **npm 7+ 와 pnpm은 peer 의존성을 자동
|
|
39
|
+
설치**합니다. peer를 자동 설치하지 않는 건 Yarn Classic뿐이며, 그 경우에만
|
|
40
|
+
`yarn add react react-dom`을 실행하세요.
|
|
41
|
+
|
|
42
|
+
그 외 킷이 쓰는 것(Base UI, clsx, tailwind-merge, lucide-react 등)은 모두 일반
|
|
43
|
+
의존성이라 자동으로 설치됩니다.
|
|
44
|
+
|
|
45
|
+
`next`는 **선택적** peer 의존성으로, `@peppone.choi/ui-kit/next`를 import할 때만 끌려옵니다.
|
|
46
|
+
|
|
47
|
+
### 스타일시트 import
|
|
48
|
+
|
|
49
|
+
킷은 미리 컴파일된 스타일시트를 함께 배포합니다. 앱 진입점
|
|
50
|
+
(`app/layout.tsx`, `main.tsx`, `_app.tsx` 등)에서 **한 번만** import하세요:
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import "@peppone.choi/ui-kit/styles.css";
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
이 import가 없으면 컴포넌트가 스타일 없이 렌더링됩니다.
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## 빠른 시작
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import { Button, Card, CardHeader, CardTitle, CardContent } from "@peppone.choi/ui-kit";
|
|
64
|
+
import "@peppone.choi/ui-kit/styles.css";
|
|
65
|
+
|
|
66
|
+
export function Example() {
|
|
67
|
+
return (
|
|
68
|
+
<Card>
|
|
69
|
+
<CardHeader>
|
|
70
|
+
<CardTitle>안녕하세요 Peppone</CardTitle>
|
|
71
|
+
</CardHeader>
|
|
72
|
+
<CardContent>
|
|
73
|
+
<Button onClick={() => alert("클릭됨")}>눌러보세요</Button>
|
|
74
|
+
</CardContent>
|
|
75
|
+
</Card>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### 다이얼로그 (기본 접근성 내장)
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import { useState } from "react";
|
|
84
|
+
import { Popup, Button } from "@peppone.choi/ui-kit";
|
|
85
|
+
|
|
86
|
+
export function ConfirmDialog() {
|
|
87
|
+
const [open, setOpen] = useState(false);
|
|
88
|
+
return (
|
|
89
|
+
<>
|
|
90
|
+
<Button onClick={() => setOpen(true)}>열기</Button>
|
|
91
|
+
<Popup
|
|
92
|
+
open={open}
|
|
93
|
+
onClose={() => setOpen(false)}
|
|
94
|
+
title="항목을 삭제할까요?"
|
|
95
|
+
description="이 작업은 되돌릴 수 없습니다."
|
|
96
|
+
primaryAction={{ label: "삭제", variant: "destructive", onClick: () => setOpen(false) }}
|
|
97
|
+
secondaryAction={{ label: "취소", onClick: () => setOpen(false) }}
|
|
98
|
+
/>
|
|
99
|
+
</>
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
다이얼로그가 포커스 트랩, 포커스 복원, 스크롤 락, 바깥 클릭 및 `Escape` 닫기,
|
|
105
|
+
ARIA 연결까지 모두 자동 처리합니다.
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## 두 개의 진입점
|
|
110
|
+
|
|
111
|
+
| import 경로 | 사용 시점 |
|
|
112
|
+
|---|---|
|
|
113
|
+
| `@peppone.choi/ui-kit` | 모든 React 앱(Vite, CRA, Remix, Astro, Next.js 클라이언트 컴포넌트). 프레임워크 비종속. |
|
|
114
|
+
| `@peppone.choi/ui-kit/next` | `next/link` 기반 클라이언트 라우팅을 원하는 Next.js 앱. 코어 전체를 재노출하고 Next 결합 컴포넌트만 덮어씀. |
|
|
115
|
+
|
|
116
|
+
### 코어 (프레임워크 비종속)
|
|
117
|
+
|
|
118
|
+
코어 `ActionArea`는 링크일 때 네이티브 `<a>`를 렌더링하며, `linkComponent`로
|
|
119
|
+
어떤 라우터든 주입할 수 있습니다:
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
import { ActionArea } from "@peppone.choi/ui-kit";
|
|
123
|
+
import { Link } from "react-router-dom";
|
|
124
|
+
|
|
125
|
+
<ActionArea href="/profile" linkComponent={Link}>프로필</ActionArea>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Next.js
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
// 여기 컴포넌트는 next/link로 미리 연결돼 클라이언트 라우팅이 동작합니다.
|
|
132
|
+
import { ActionArea, Button, Card } from "@peppone.choi/ui-kit/next";
|
|
133
|
+
|
|
134
|
+
<ActionArea href="/profile">프로필</ActionArea>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## 스타일링 & 다크 모드
|
|
140
|
+
|
|
141
|
+
킷은 Tailwind CSS v4 토큰을 CSS 커스텀 프로퍼티로 정의합니다. 다크 모드는
|
|
142
|
+
상위 요소(보통 `<html>`)의 `.dark` 클래스로 동작합니다:
|
|
143
|
+
|
|
144
|
+
```html
|
|
145
|
+
<html class="dark">
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
토글 방식은 자유입니다(next-themes, 클래스 토글, `prefers-color-scheme` 등).
|
|
149
|
+
WDS 시맨틱 토큰(`label-normal`, `background-elevated-normal`, `status-positive` 등)은
|
|
150
|
+
`var()`로 해석되어 활성 테마를 자동으로 따릅니다.
|
|
151
|
+
|
|
152
|
+
프로그래밍 방식 테마 접근(WDS `sx` props, 토큰)이 필요하면 트리를 프로바이더로 감싸세요:
|
|
153
|
+
|
|
154
|
+
```tsx
|
|
155
|
+
import { ThemeProvider, useTheme } from "@peppone.choi/ui-kit";
|
|
156
|
+
|
|
157
|
+
<ThemeProvider>
|
|
158
|
+
<App />
|
|
159
|
+
</ThemeProvider>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## 컴포넌트
|
|
165
|
+
|
|
166
|
+
다음 카테고리에 70개 이상의 컴포넌트가 있습니다:
|
|
167
|
+
|
|
168
|
+
| 카테고리 | 컴포넌트 |
|
|
169
|
+
|---|---|
|
|
170
|
+
| **액션** | Button, Chip, IconButton, TextButton, ActionArea, ToggleIcon |
|
|
171
|
+
| **콘텐츠** | Accordion, Avatar, AvatarGroup, AvatarButton, Card, CardList, ContentBadge, List, ListCard, ListCell, PlayBadge, SectionHeader, Table, Thumbnail, Typography |
|
|
172
|
+
| **피드백** | Alert, FallbackView, PushBadge, SectionMessage, Snackbar, Toast, Loading, Skeleton |
|
|
173
|
+
| **내비게이션** | BottomNavigation, Category, PageCounter, Pagination, PaginationDots, ProgressIndicator, ProgressTracker, ProgressStepIndicator, Tab, TopNavigation |
|
|
174
|
+
| **표현** | Autocomplete, BottomSheet, Menu, Popover, Popup, ScrollArea, Tooltip |
|
|
175
|
+
| **선택 & 입력** | Checkbox, Radio, RadioGroup, RoundCheckbox, CheckMark, DatePicker, DateRangePicker, DateCalendar, DateRangeCalendar, TimePicker, TimeView, FilterButton, FramedStyle, Label, SearchField, SegmentedControl, Select, SelectMultiple, Slider, Stepper, Switch, TextArea, Input, Form, PickerActionArea |
|
|
176
|
+
| **레이아웃 & 유틸리티** | Box, FlexBox, Grid, GridItem, Divider |
|
|
177
|
+
|
|
178
|
+
모든 컴포넌트는 패키지 루트에서 export되며 타입이 완비돼 있습니다. **Montage WDS
|
|
179
|
+
아이콘 350개**, 아토믹 테마 토큰, Lottie 로딩 애니메이션도 함께 포함됩니다.
|
|
180
|
+
|
|
181
|
+
---
|
|
182
|
+
|
|
183
|
+
## 개발
|
|
184
|
+
|
|
185
|
+
```bash
|
|
186
|
+
pnpm install # 의존성 설치
|
|
187
|
+
pnpm dev # 쇼케이스 앱 실행 (Next.js)
|
|
188
|
+
pnpm build # 라이브러리 빌드 (JS + .d.ts + CSS) → dist/
|
|
189
|
+
pnpm test # 단위 테스트 실행 (Vitest)
|
|
190
|
+
pnpm lint # ESLint
|
|
191
|
+
pnpm typecheck # tsc --noEmit
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
라이브러리 빌드는 `tsup`(ESM + CJS + 타입 선언)과 Tailwind CLI
|
|
195
|
+
(`dist/peppone-ui.css`)를 실행합니다. `tsup.config.ts`, `src/styles.css` 참고.
|
|
196
|
+
|
|
197
|
+
---
|
|
198
|
+
|
|
199
|
+
## 라이선스
|
|
200
|
+
|
|
201
|
+
MIT. 동일하게 MIT 라이선스인
|
|
202
|
+
[Wanted Design System (Montage)](https://github.com/wanteddev/montage-web) 기반으로 제작됐습니다.
|
package/README.md
ADDED
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
# Peppone UI Kit
|
|
2
|
+
|
|
3
|
+
[](#license)
|
|
4
|
+
|
|
5
|
+
A React component library with **70+ components**, built on the
|
|
6
|
+
[Wanted Design System (Montage)](https://github.com/wanteddev/montage-web) (MIT).
|
|
7
|
+
Ships a **framework-agnostic core** plus an **optional Next.js adapter** — install
|
|
8
|
+
it and it works.
|
|
9
|
+
|
|
10
|
+
> 🇰🇷 한국어 문서는 [README.ko.md](./README.ko.md) 를 참고하세요.
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## Features
|
|
15
|
+
|
|
16
|
+
- **70+ components** across actions, content, feedback, navigation, presentation, and selection.
|
|
17
|
+
- **Two entry points** — a framework-agnostic core (`@peppone.choi/ui-kit`) and a Next.js-wired adapter (`@peppone.choi/ui-kit/next`).
|
|
18
|
+
- **Accessible overlays** — dialogs/popovers/tooltips built on [Base UI](https://base-ui.com) primitives (focus trap, scroll lock, dismiss, portals, ARIA).
|
|
19
|
+
- **Tailwind CSS v4** tokens with **dark mode** via CSS custom properties.
|
|
20
|
+
- **First-class TypeScript** — every component ships types.
|
|
21
|
+
- **ESM + CJS** builds, tree-shakeable (`sideEffects` aware), with `"use client"` preserved for React Server Components.
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
pnpm add @peppone.choi/ui-kit
|
|
29
|
+
# or: npm install @peppone.choi/ui-kit
|
|
30
|
+
# or: yarn add @peppone.choi/ui-kit
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Peer dependencies
|
|
34
|
+
|
|
35
|
+
`react` and `react-dom` (v19+) are **peer** dependencies on purpose: the kit must
|
|
36
|
+
share your app's single React instance. Shipping React as a regular dependency
|
|
37
|
+
would risk a duplicate copy and the dreaded "Invalid hook call" error.
|
|
38
|
+
|
|
39
|
+
You normally don't install them by hand — **npm 7+ and pnpm install peer
|
|
40
|
+
dependencies automatically**. Only Yarn Classic skips peers; there, run
|
|
41
|
+
`yarn add react react-dom`.
|
|
42
|
+
|
|
43
|
+
Everything else the kit needs (Base UI, clsx, tailwind-merge, lucide-react, …)
|
|
44
|
+
ships as a regular dependency and is installed for you.
|
|
45
|
+
|
|
46
|
+
`next` is an **optional** peer dependency, pulled in only if you import from
|
|
47
|
+
`@peppone.choi/ui-kit/next`.
|
|
48
|
+
|
|
49
|
+
### Import the stylesheet
|
|
50
|
+
|
|
51
|
+
The kit ships a precompiled stylesheet. Import it **once** at your app entry
|
|
52
|
+
(e.g. `app/layout.tsx`, `main.tsx`, `_app.tsx`):
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
import "@peppone.choi/ui-kit/styles.css";
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Without this import, components render unstyled.
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
## Quick start
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { Button, Card, CardHeader, CardTitle, CardContent } from "@peppone.choi/ui-kit";
|
|
66
|
+
import "@peppone.choi/ui-kit/styles.css";
|
|
67
|
+
|
|
68
|
+
export function Example() {
|
|
69
|
+
return (
|
|
70
|
+
<Card>
|
|
71
|
+
<CardHeader>
|
|
72
|
+
<CardTitle>Hello Peppone</CardTitle>
|
|
73
|
+
</CardHeader>
|
|
74
|
+
<CardContent>
|
|
75
|
+
<Button onClick={() => alert("clicked")}>Click me</Button>
|
|
76
|
+
</CardContent>
|
|
77
|
+
</Card>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Dialog (accessible by default)
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import { useState } from "react";
|
|
86
|
+
import { Popup, Button } from "@peppone.choi/ui-kit";
|
|
87
|
+
|
|
88
|
+
export function ConfirmDialog() {
|
|
89
|
+
const [open, setOpen] = useState(false);
|
|
90
|
+
return (
|
|
91
|
+
<>
|
|
92
|
+
<Button onClick={() => setOpen(true)}>Open</Button>
|
|
93
|
+
<Popup
|
|
94
|
+
open={open}
|
|
95
|
+
onClose={() => setOpen(false)}
|
|
96
|
+
title="Delete item?"
|
|
97
|
+
description="This action cannot be undone."
|
|
98
|
+
primaryAction={{ label: "Delete", variant: "destructive", onClick: () => setOpen(false) }}
|
|
99
|
+
secondaryAction={{ label: "Cancel", onClick: () => setOpen(false) }}
|
|
100
|
+
/>
|
|
101
|
+
</>
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
The dialog handles focus trapping, focus restore, scroll locking, outside-press
|
|
107
|
+
and `Escape` dismissal, and ARIA wiring for you.
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
## Two entry points
|
|
112
|
+
|
|
113
|
+
| Import path | Use when |
|
|
114
|
+
|---|---|
|
|
115
|
+
| `@peppone.choi/ui-kit` | Any React app (Vite, CRA, Remix, Astro, Next.js client components). Framework-agnostic. |
|
|
116
|
+
| `@peppone.choi/ui-kit/next` | Next.js apps that want components pre-wired to `next/link` (client-side navigation). Re-exports the entire core, overriding only the Next-coupled components. |
|
|
117
|
+
|
|
118
|
+
### Core (framework-agnostic)
|
|
119
|
+
|
|
120
|
+
The core `ActionArea` renders a native `<a>` for links, or accepts a custom
|
|
121
|
+
`linkComponent` so it works with any router:
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
import { ActionArea } from "@peppone.choi/ui-kit";
|
|
125
|
+
import { Link } from "react-router-dom";
|
|
126
|
+
|
|
127
|
+
<ActionArea href="/profile" linkComponent={Link}>Profile</ActionArea>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Next.js
|
|
131
|
+
|
|
132
|
+
```tsx
|
|
133
|
+
// Components here are pre-wired to next/link for client-side navigation.
|
|
134
|
+
import { ActionArea, Button, Card } from "@peppone.choi/ui-kit/next";
|
|
135
|
+
|
|
136
|
+
<ActionArea href="/profile">Profile</ActionArea>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
## Styling & dark mode
|
|
142
|
+
|
|
143
|
+
The kit uses Tailwind CSS v4 tokens defined as CSS custom properties. Dark mode
|
|
144
|
+
is driven by a `.dark` class on an ancestor (typically `<html>`):
|
|
145
|
+
|
|
146
|
+
```html
|
|
147
|
+
<html class="dark">
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
Toggle it however you like (next-themes, a class toggle, `prefers-color-scheme`).
|
|
151
|
+
WDS semantic tokens (`label-normal`, `background-elevated-normal`,
|
|
152
|
+
`status-positive`, …) resolve through `var()` so they follow the active theme.
|
|
153
|
+
|
|
154
|
+
For programmatic theme access (WDS `sx` props, tokens), wrap your tree in the
|
|
155
|
+
provider:
|
|
156
|
+
|
|
157
|
+
```tsx
|
|
158
|
+
import { ThemeProvider, useTheme } from "@peppone.choi/ui-kit";
|
|
159
|
+
|
|
160
|
+
<ThemeProvider>
|
|
161
|
+
<App />
|
|
162
|
+
</ThemeProvider>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
## Components
|
|
168
|
+
|
|
169
|
+
70+ components across these categories:
|
|
170
|
+
|
|
171
|
+
| Category | Components |
|
|
172
|
+
|---|---|
|
|
173
|
+
| **Actions** | Button, Chip, IconButton, TextButton, ActionArea, ToggleIcon |
|
|
174
|
+
| **Content** | Accordion, Avatar, AvatarGroup, AvatarButton, Card, CardList, ContentBadge, List, ListCard, ListCell, PlayBadge, SectionHeader, Table, Thumbnail, Typography |
|
|
175
|
+
| **Feedback** | Alert, FallbackView, PushBadge, SectionMessage, Snackbar, Toast, Loading, Skeleton |
|
|
176
|
+
| **Navigation** | BottomNavigation, Category, PageCounter, Pagination, PaginationDots, ProgressIndicator, ProgressTracker, ProgressStepIndicator, Tab, TopNavigation |
|
|
177
|
+
| **Presentation** | Autocomplete, BottomSheet, Menu, Popover, Popup, ScrollArea, Tooltip |
|
|
178
|
+
| **Selection & input** | Checkbox, Radio, RadioGroup, RoundCheckbox, CheckMark, DatePicker, DateRangePicker, DateCalendar, DateRangeCalendar, TimePicker, TimeView, FilterButton, FramedStyle, Label, SearchField, SegmentedControl, Select, SelectMultiple, Slider, Stepper, Switch, TextArea, Input, Form, PickerActionArea |
|
|
179
|
+
| **Layout & utilities** | Box, FlexBox, Grid, GridItem, Divider |
|
|
180
|
+
|
|
181
|
+
All components are exported from the package root and fully typed. The kit also
|
|
182
|
+
bundles **350 Montage WDS icons**, atomic theme tokens, and a Lottie loading
|
|
183
|
+
animation.
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
187
|
+
## Development
|
|
188
|
+
|
|
189
|
+
```bash
|
|
190
|
+
pnpm install # install dependencies
|
|
191
|
+
pnpm dev # run the showcase app (Next.js)
|
|
192
|
+
pnpm build # build the library (JS + .d.ts + CSS) into dist/
|
|
193
|
+
pnpm test # run the unit test suite (Vitest)
|
|
194
|
+
pnpm lint # ESLint
|
|
195
|
+
pnpm typecheck # tsc --noEmit
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
The library build runs `tsup` (ESM + CJS + type declarations) and the Tailwind
|
|
199
|
+
CLI (`dist/peppone-ui.css`). See `tsup.config.ts` and `src/styles.css`.
|
|
200
|
+
|
|
201
|
+
---
|
|
202
|
+
|
|
203
|
+
## License
|
|
204
|
+
|
|
205
|
+
MIT. Built on the [Wanted Design System (Montage)](https://github.com/wanteddev/montage-web), also MIT.
|