@axis-ds/agentic-ui 1.3.0 → 1.4.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.md +29 -0
- package/package.json +7 -5
- package/tailwind.css +10 -0
package/README.md
CHANGED
|
@@ -10,6 +10,35 @@ npm install @axis-ds/agentic-ui
|
|
|
10
10
|
pnpm add @axis-ds/agentic-ui
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
+
## Tailwind 연동
|
|
14
|
+
|
|
15
|
+
### Tailwind CSS 4
|
|
16
|
+
|
|
17
|
+
Tailwind CSS 4(`@import "tailwindcss"`, create-next-app 15.5 기본)에서는 `@import "tailwindcss"` 가 있는 전역 CSS 에 두 줄을 더합니다.
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
/* app/globals.css */
|
|
21
|
+
@import "tailwindcss";
|
|
22
|
+
@import "@axis-ds/tokens/css/tailwind4";
|
|
23
|
+
@import "@axis-ds/agentic-ui/tailwind.css";
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
- `@axis-ds/agentic-ui/tailwind.css` 는 스타일 규칙 없이 `@source "./dist"` 한 줄만 담습니다. Tailwind 4 는 `node_modules` 를 스캔하지 않아서, 이 줄이 없으면 컴포넌트가 쓰는 `bg-[var(--axis-agent-avatar-assistant)]` 같은 클래스가 생성되지 않습니다. 경로는 파일 기준 상대 경로라 npm · pnpm 설치 모두 동작합니다.
|
|
27
|
+
- `@import "tailwindcss"` 가 있는 같은 파일에서 import 합니다. 다른 CSS 파일이나 JS/TSX 에서 import 하면 스캔 경로가 그 컴파일에 들어가지 않습니다.
|
|
28
|
+
- `@axis-ds/tokens/css/tailwind4` 는 `rounded-md` · `font-mono` 등을 AXIS 변수로 매핑하고 토큰 변수를 base 레이어로 함께 불러옵니다. pnpm 처럼 의존성을 끌어올리지 않는 설치에서는 `@axis-ds/tokens` 를 직접 설치해야 이 import 가 풀립니다. 브랜드 CSS · create-next-app 기본 `:root` 와의 충돌은 `@axis-ds/tokens` README 를 참고하세요.
|
|
29
|
+
- 이 패키지는 `@axis-ds/ui-react` 에서 유틸리티 함수만 가져옵니다. 앱에서 `@axis-ds/ui-react` 컴포넌트를 직접 쓸 때만 `@import "@axis-ds/ui-react/tailwind.css";` 를 함께 넣습니다.
|
|
30
|
+
|
|
31
|
+
### Tailwind CSS 3
|
|
32
|
+
|
|
33
|
+
`tailwind.config` 에는 `@axis-ds/tokens/tailwind` preset 과 함께 컴포넌트 파일을 `content` 에 넣습니다.
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
content: [
|
|
37
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
38
|
+
"./node_modules/@axis-ds/agentic-ui/**/*.{js,jsx}",
|
|
39
|
+
],
|
|
40
|
+
```
|
|
41
|
+
|
|
13
42
|
## 사용법
|
|
14
43
|
|
|
15
44
|
```tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@axis-ds/agentic-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "AXIS Design System - Agentic UI Components for AI/LLM Applications",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -70,11 +70,13 @@
|
|
|
70
70
|
"types": "./dist/attachment-card/index.d.ts",
|
|
71
71
|
"import": "./dist/attachment-card/index.mjs",
|
|
72
72
|
"require": "./dist/attachment-card/index.js"
|
|
73
|
-
}
|
|
73
|
+
},
|
|
74
|
+
"./tailwind.css": "./tailwind.css"
|
|
74
75
|
},
|
|
75
76
|
"sideEffects": false,
|
|
76
77
|
"files": [
|
|
77
|
-
"dist"
|
|
78
|
+
"dist",
|
|
79
|
+
"tailwind.css"
|
|
78
80
|
],
|
|
79
81
|
"publishConfig": {
|
|
80
82
|
"access": "public"
|
|
@@ -88,8 +90,8 @@
|
|
|
88
90
|
"clsx": "^2.1.0",
|
|
89
91
|
"framer-motion": "^11.0.0",
|
|
90
92
|
"tailwind-merge": "^2.5.0",
|
|
91
|
-
"@axis-ds/tokens": "1.
|
|
92
|
-
"@axis-ds/ui-react": "1.
|
|
93
|
+
"@axis-ds/tokens": "1.4.0",
|
|
94
|
+
"@axis-ds/ui-react": "1.4.0"
|
|
93
95
|
},
|
|
94
96
|
"devDependencies": {
|
|
95
97
|
"@testing-library/jest-dom": "^6.9.1",
|
package/tailwind.css
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @axis-ds/agentic-ui - Tailwind CSS 4 스캔 진입점
|
|
3
|
+
*
|
|
4
|
+
* Tailwind 4 는 node_modules 를 자동 스캔하지 않아서, 컴포넌트가 쓰는 클래스
|
|
5
|
+
* (예: bg-[var(--axis-button-bg-default)])가 생성되지 않습니다. 전역 CSS 에서
|
|
6
|
+
* @import "@axis-ds/agentic-ui/tailwind.css";
|
|
7
|
+
* 한 줄을 넣으면 아래 @source 가 이 패키지의 빌드 산출물을 스캔 대상에 더합니다.
|
|
8
|
+
* 경로는 이 파일 기준 상대 경로입니다. 스타일 규칙은 담지 않습니다.
|
|
9
|
+
*/
|
|
10
|
+
@source "./dist";
|