@mondrianai/runyourai-design-system 0.0.1
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.md +222 -0
- package/dist/chunk-JLKIFAQZ.mjs +54 -0
- package/dist/chunk-JLKIFAQZ.mjs.map +1 -0
- package/dist/index.d.mts +1036 -0
- package/dist/index.d.ts +1036 -0
- package/dist/index.js +5318 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +5115 -0
- package/dist/index.mjs.map +1 -0
- package/dist/styles/index.css +337 -0
- package/dist/styles/index.css.map +1 -0
- package/dist/styles/index.d.mts +2 -0
- package/dist/styles/index.d.ts +2 -0
- package/dist/styles/tailwind-theme.css +207 -0
- package/dist/utils.d.mts +5 -0
- package/dist/utils.d.ts +5 -0
- package/dist/utils.js +43 -0
- package/dist/utils.js.map +1 -0
- package/dist/utils.mjs +8 -0
- package/dist/utils.mjs.map +1 -0
- package/package.json +80 -0
package/README.md
ADDED
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
# @mondrianai/runyourai-design-system
|
|
2
|
+
|
|
3
|
+
RunYourAI Design System — React component library built on [shadcn/ui](https://ui.shadcn.com/) components, [Radix UI](https://www.radix-ui.com/) primitives, and [Tailwind CSS v4](https://tailwindcss.com/).
|
|
4
|
+
|
|
5
|
+
## Requirements
|
|
6
|
+
|
|
7
|
+
- React 18+
|
|
8
|
+
- Next.js 15+
|
|
9
|
+
- Tailwind CSS v4
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @mondrianai/runyourai-design-system
|
|
15
|
+
# or
|
|
16
|
+
yarn add @mondrianai/runyourai-design-system
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Setup
|
|
20
|
+
|
|
21
|
+
### 1. 패키지 설치
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @mondrianai/runyourai-design-system tailwindcss
|
|
25
|
+
npm install --save-dev @tailwindcss/postcss
|
|
26
|
+
# or
|
|
27
|
+
yarn add @mondrianai/runyourai-design-system tailwindcss
|
|
28
|
+
yarn add --dev @tailwindcss/postcss
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### 2. PostCSS 설정
|
|
32
|
+
|
|
33
|
+
프로젝트 루트에 `postcss.config.mjs`를 생성합니다.
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
// postcss.config.mjs
|
|
37
|
+
const config = {
|
|
38
|
+
plugins: {
|
|
39
|
+
'@tailwindcss/postcss': {},
|
|
40
|
+
},
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export default config;
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### 3. Next.js (Turbopack) 설정
|
|
47
|
+
|
|
48
|
+
Next.js 15+ / 16의 기본 번들러인 Turbopack은 CSS `@import`에서 `package.json`의 `exports` 서브패스를 해석하지 못합니다. `next.config.ts`에 아래 `resolveAlias`를 추가해야 합니다.
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
// next.config.ts
|
|
52
|
+
import type { NextConfig } from 'next';
|
|
53
|
+
|
|
54
|
+
const nextConfig: NextConfig = {
|
|
55
|
+
turbopack: {
|
|
56
|
+
resolveAlias: {
|
|
57
|
+
'@mondrianai/runyourai-design-system/styles':
|
|
58
|
+
'./node_modules/@mondrianai/runyourai-design-system/dist/styles/index.css',
|
|
59
|
+
'@mondrianai/runyourai-design-system/tailwind-theme':
|
|
60
|
+
'./node_modules/@mondrianai/runyourai-design-system/dist/styles/tailwind-theme.css',
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export default nextConfig;
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
> Turbopack을 사용하지 않는 경우(webpack 기반 커스텀 설정 등)에는 이 단계를 건너뜁니다.
|
|
69
|
+
|
|
70
|
+
### 4. Tailwind CSS 설정
|
|
71
|
+
|
|
72
|
+
`globals.css`에 아래 내용을 추가합니다. 디자인 토큰, Tailwind 테마, 애니메이션, 다크모드 설정이 모두 적용됩니다.
|
|
73
|
+
|
|
74
|
+
```css
|
|
75
|
+
/* globals.css */
|
|
76
|
+
@import 'tailwindcss';
|
|
77
|
+
@import '@mondrianai/runyourai-design-system/styles';
|
|
78
|
+
@import '@mondrianai/runyourai-design-system/tailwind-theme';
|
|
79
|
+
|
|
80
|
+
/* globals.css 위치 기준 node_modules 상대 경로 — 프로젝트 구조에 따라 조정하세요
|
|
81
|
+
* globals.css가 app/globals.css 에 있는 경우: ../node_modules/...
|
|
82
|
+
* globals.css가 src/app/globals.css 에 있는 경우: ../../node_modules/...
|
|
83
|
+
*/
|
|
84
|
+
@source "../node_modules/@mondrianai/runyourai-design-system/dist";
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
> **`@import` 순서 주의**
|
|
88
|
+
>
|
|
89
|
+
> - `url(...)` 형태의 외부 폰트 import가 있다면 `@import 'tailwindcss'` **앞에** 위치시킵니다.
|
|
90
|
+
> - `@mondrianai/runyourai-design-system/styles`, `@mondrianai/runyourai-design-system/tailwind-theme`는 `@import 'tailwindcss'` **뒤에** 위치시킵니다.
|
|
91
|
+
|
|
92
|
+
> **기존 CSS 리셋 주의 (Tailwind v4)**
|
|
93
|
+
> 프로젝트에 `* { margin: 0; padding: 0; }` 같은 전역 리셋이 있다면 반드시 `@layer base`로 감싸야 합니다. Tailwind v4에서 레이어 밖의 스타일은 `@layer utilities`보다 우선순위가 높아 `px-*`, `py-*` 등의 유틸리티 클래스가 무효화됩니다.
|
|
94
|
+
>
|
|
95
|
+
> ```css
|
|
96
|
+
> @layer base {
|
|
97
|
+
> *,
|
|
98
|
+
> *::before,
|
|
99
|
+
> *::after {
|
|
100
|
+
> box-sizing: border-box;
|
|
101
|
+
> }
|
|
102
|
+
>
|
|
103
|
+
> * {
|
|
104
|
+
> margin: 0;
|
|
105
|
+
> padding: 0;
|
|
106
|
+
> }
|
|
107
|
+
> }
|
|
108
|
+
> ```
|
|
109
|
+
|
|
110
|
+
### 5. Provider 설정
|
|
111
|
+
|
|
112
|
+
`Tooltip` 등 Radix UI 기반 컴포넌트가 올바르게 동작하려면 앱 최상단에 `Providers`를 감싸야 합니다.
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
// app/layout.tsx
|
|
116
|
+
import { Providers } from '@mondrianai/runyourai-design-system';
|
|
117
|
+
|
|
118
|
+
export default function RootLayout({
|
|
119
|
+
children,
|
|
120
|
+
}: {
|
|
121
|
+
children: React.ReactNode;
|
|
122
|
+
}) {
|
|
123
|
+
return (
|
|
124
|
+
<html lang='ko'>
|
|
125
|
+
<body>
|
|
126
|
+
<Providers>{children}</Providers>
|
|
127
|
+
</body>
|
|
128
|
+
</html>
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Usage
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
import { Button, Badge, Card } from '@mondrianai/runyourai-design-system';
|
|
137
|
+
|
|
138
|
+
export default function Page() {
|
|
139
|
+
return (
|
|
140
|
+
<Card>
|
|
141
|
+
<Badge text='New' />
|
|
142
|
+
<Button onClick={() => console.log('clicked')}>시작하기</Button>
|
|
143
|
+
</Card>
|
|
144
|
+
);
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Utilities
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
import { cn } from '@mondrianai/runyourai-design-system/utils';
|
|
152
|
+
|
|
153
|
+
<div className={cn('base-class', isActive && 'active-class')} />;
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
## Components
|
|
157
|
+
|
|
158
|
+
| Component | Description |
|
|
159
|
+
| ------------------------------------- | ------------------------- |
|
|
160
|
+
| `Accordion` | 펼침/접힘 컨텐츠 영역 |
|
|
161
|
+
| `AlertDialog` | 확인/취소 모달 다이얼로그 |
|
|
162
|
+
| `Alert` | 인라인 알림 메시지 |
|
|
163
|
+
| `Avatar` / `AvatarGroup` | 유저 아바타 및 그룹 |
|
|
164
|
+
| `Badge` | 상태·카테고리 배지 |
|
|
165
|
+
| `Breadcrumb` | 페이지 경로 탐색 |
|
|
166
|
+
| `Button` | 버튼 |
|
|
167
|
+
| `Card` | 카드 컨테이너 |
|
|
168
|
+
| `Checkbox` / `CheckboxCard` | 체크박스 |
|
|
169
|
+
| `ChoiceCardGroup` / `ChoiceCardItem` | 선택형 카드 그룹 |
|
|
170
|
+
| `Collapsible` | 접을 수 있는 컨텐츠 |
|
|
171
|
+
| `Combobox` | 검색 가능한 선택 입력 |
|
|
172
|
+
| `Field` / `FieldSection` / `FieldRow` | 폼 필드 레이아웃 |
|
|
173
|
+
| `GroupedSelect` | 그룹 구분이 있는 셀렉트 |
|
|
174
|
+
| `Header` | 앱 상단 헤더 |
|
|
175
|
+
| `Icon` | Lucide 아이콘 래퍼 |
|
|
176
|
+
| `MarkdownMessage` | 마크다운 렌더링 메시지 |
|
|
177
|
+
| `Menubar` | 메뉴바 |
|
|
178
|
+
| `MessageFooter` | 메시지 하단 액션 영역 |
|
|
179
|
+
| `NumberBadge` | 숫자 배지 |
|
|
180
|
+
| `SegmentedControl` | 세그먼트 탭 컨트롤 |
|
|
181
|
+
| `Select` | 셀렉트 박스 |
|
|
182
|
+
| `Sheet` | 사이드 슬라이드 패널 |
|
|
183
|
+
| `Sidebar` | 앱 사이드바 |
|
|
184
|
+
| `Slider` | 슬라이더 |
|
|
185
|
+
| `Stepper` | 단계 진행 표시 |
|
|
186
|
+
| `Switch` / `SwitchField` | 토글 스위치 |
|
|
187
|
+
| `Tooltip` / `TooltipWithIcon` | 툴팁 |
|
|
188
|
+
| `UserMessageBubble` | 채팅 메시지 말풍선 |
|
|
189
|
+
|
|
190
|
+
## Icons
|
|
191
|
+
|
|
192
|
+
### Custom Icons
|
|
193
|
+
|
|
194
|
+
```tsx
|
|
195
|
+
import {
|
|
196
|
+
SparklesIcon,
|
|
197
|
+
TrashIcon,
|
|
198
|
+
StarIcon,
|
|
199
|
+
} from '@mondrianai/runyourai-design-system';
|
|
200
|
+
|
|
201
|
+
<SparklesIcon className='size-4 text-primary' />;
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### Brand Icons
|
|
205
|
+
|
|
206
|
+
```tsx
|
|
207
|
+
import {
|
|
208
|
+
ClaudeIcon,
|
|
209
|
+
OpenAiIcon,
|
|
210
|
+
GeminiIcon,
|
|
211
|
+
} from '@mondrianai/runyourai-design-system';
|
|
212
|
+
|
|
213
|
+
<ClaudeIcon className='size-6' />;
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
### Logo
|
|
217
|
+
|
|
218
|
+
```tsx
|
|
219
|
+
import { RyaiLogoIcon } from '@mondrianai/runyourai-design-system';
|
|
220
|
+
|
|
221
|
+
<RyaiLogoIcon />;
|
|
222
|
+
```
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __spreadValues = (a, b) => {
|
|
10
|
+
for (var prop in b || (b = {}))
|
|
11
|
+
if (__hasOwnProp.call(b, prop))
|
|
12
|
+
__defNormalProp(a, prop, b[prop]);
|
|
13
|
+
if (__getOwnPropSymbols)
|
|
14
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
+
if (__propIsEnum.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
18
|
+
return a;
|
|
19
|
+
};
|
|
20
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
// src/lib/utils.ts
|
|
35
|
+
import { clsx } from "clsx";
|
|
36
|
+
import { extendTailwindMerge } from "tailwind-merge";
|
|
37
|
+
var twMerge = extendTailwindMerge({
|
|
38
|
+
extend: {
|
|
39
|
+
classGroups: {
|
|
40
|
+
"font-size": [{ text: ["2xs"] }]
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
function cn(...inputs) {
|
|
45
|
+
return twMerge(clsx(inputs));
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export {
|
|
49
|
+
__spreadValues,
|
|
50
|
+
__spreadProps,
|
|
51
|
+
__objRest,
|
|
52
|
+
cn
|
|
53
|
+
};
|
|
54
|
+
//# sourceMappingURL=chunk-JLKIFAQZ.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { extendTailwindMerge } from \"tailwind-merge\"\n\n// Register text-2xs as a font-size class so tailwind-merge doesn't\n// confuse it with text-color utilities (e.g. text-muted-foreground).\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n \"font-size\": [{ text: [\"2xs\"] }],\n },\n },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAIpC,IAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;AAAA,IACjC;AAAA,EACF;AACF,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}
|