@hua-labs/ui 1.1.0-alpha.6 → 2.0.0-alpha.7
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hua-labs/ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-alpha.7",
|
|
4
4
|
"description": "HUA Labs - Modern React UI Component Library - Beautiful, accessible, and customizable components for React applications",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -60,7 +60,8 @@
|
|
|
60
60
|
"import": "./dist/components/advanced/*.mjs",
|
|
61
61
|
"require": "./dist/components/advanced/*.js"
|
|
62
62
|
},
|
|
63
|
-
"./styles/toast.css": "./src/styles/toast.css"
|
|
63
|
+
"./styles/toast.css": "./src/styles/toast.css",
|
|
64
|
+
"./styles/recommended-theme.css": "./src/styles/recommended-theme.css"
|
|
64
65
|
},
|
|
65
66
|
"files": [
|
|
66
67
|
"dist",
|
|
@@ -69,6 +70,7 @@
|
|
|
69
70
|
"dependencies": {
|
|
70
71
|
"clsx": "^2.0.0",
|
|
71
72
|
"lucide-react": "^0.562.0",
|
|
73
|
+
"sugar-high": "^0.9.5",
|
|
72
74
|
"tailwind-merge": "^2.0.0"
|
|
73
75
|
},
|
|
74
76
|
"devDependencies": {
|
|
@@ -94,7 +96,7 @@
|
|
|
94
96
|
"vitest": "^4.0.14"
|
|
95
97
|
},
|
|
96
98
|
"peerDependencies": {
|
|
97
|
-
"@hua-labs/motion-core": "^2.
|
|
99
|
+
"@hua-labs/motion-core": "^2.0.0",
|
|
98
100
|
"@phosphor-icons/react": "*",
|
|
99
101
|
"react": ">=16.8.0",
|
|
100
102
|
"react-dom": ">=16.8.0"
|
|
@@ -1,18 +1,43 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* HUA-UI 추천 테마 CSS 변수
|
|
3
3
|
*
|
|
4
|
-
* 이 파일을 앱의 globals.css에 import
|
|
5
|
-
*
|
|
4
|
+
* 이 파일을 앱의 globals.css에 import하세요.
|
|
5
|
+
* HUA UI 컴포넌트는 기본적으로 Tailwind 색상을 직접 사용하므로
|
|
6
|
+
* 이 파일 없이도 동작합니다.
|
|
7
|
+
*
|
|
8
|
+
* Tailwind v4에서 bg-primary, text-foreground 등을 사용하려면
|
|
9
|
+
* 이 파일을 import하세요.
|
|
6
10
|
*
|
|
7
11
|
* @example
|
|
8
12
|
* // globals.css
|
|
9
|
-
* @import "@hua-labs/ui/styles/recommended-theme.css";
|
|
10
|
-
*
|
|
11
|
-
* 또는 tailwind v4:
|
|
12
13
|
* @import "tailwindcss";
|
|
13
|
-
* @import "@hua-labs/ui/styles/recommended-theme.css";
|
|
14
|
+
* @import "@hua-labs/hua-ui/styles/recommended-theme.css";
|
|
14
15
|
*/
|
|
15
16
|
|
|
17
|
+
/* Tailwind v4: @theme으로 색상 유틸리티 활성화 */
|
|
18
|
+
@theme {
|
|
19
|
+
/* HUA 브랜드 컬러 - Teal */
|
|
20
|
+
--color-primary: hsl(166 78% 30%);
|
|
21
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
22
|
+
--color-secondary: hsl(210 15% 94%);
|
|
23
|
+
--color-secondary-foreground: hsl(210 10% 20%);
|
|
24
|
+
--color-destructive: hsl(0 84% 60%);
|
|
25
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
26
|
+
--color-muted: hsl(210 15% 94%);
|
|
27
|
+
--color-muted-foreground: hsl(210 10% 40%);
|
|
28
|
+
--color-accent: hsl(166 60% 92%);
|
|
29
|
+
--color-accent-foreground: hsl(166 78% 25%);
|
|
30
|
+
--color-card: hsl(0 0% 100%);
|
|
31
|
+
--color-card-foreground: hsl(210 10% 10%);
|
|
32
|
+
--color-popover: hsl(0 0% 100%);
|
|
33
|
+
--color-popover-foreground: hsl(210 10% 10%);
|
|
34
|
+
--color-background: hsl(210 20% 98%);
|
|
35
|
+
--color-foreground: hsl(210 10% 10%);
|
|
36
|
+
--color-border: hsl(210 15% 88%);
|
|
37
|
+
--color-input: hsl(210 15% 88%);
|
|
38
|
+
--color-ring: hsl(166 78% 30%);
|
|
39
|
+
}
|
|
40
|
+
|
|
16
41
|
@layer base {
|
|
17
42
|
:root {
|
|
18
43
|
/* ========================================
|
|
@@ -135,3 +160,26 @@
|
|
|
135
160
|
--hua-accent: 187 80% 55%;
|
|
136
161
|
}
|
|
137
162
|
}
|
|
163
|
+
|
|
164
|
+
/* Modal 애니메이션 */
|
|
165
|
+
@keyframes modalSlideIn {
|
|
166
|
+
from {
|
|
167
|
+
opacity: 0;
|
|
168
|
+
transform: translateY(-20px) scale(0.95);
|
|
169
|
+
}
|
|
170
|
+
to {
|
|
171
|
+
opacity: 1;
|
|
172
|
+
transform: translateY(0) scale(1);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
@keyframes modalSlideOut {
|
|
177
|
+
from {
|
|
178
|
+
opacity: 1;
|
|
179
|
+
transform: translateY(0) scale(1);
|
|
180
|
+
}
|
|
181
|
+
to {
|
|
182
|
+
opacity: 0;
|
|
183
|
+
transform: translateY(-20px) scale(0.95);
|
|
184
|
+
}
|
|
185
|
+
}
|