@jbpark/ui-kit 2.1.0 → 2.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/dist/Menu.d.mts +1 -1
- package/dist/Menu.mjs +3 -3
- package/dist/Reveals.d.mts +1 -1
- package/dist/Reveals.mjs +1 -1
- package/dist/{Typography-DJSakhLz.mjs → Typography-GMk9208W.mjs} +6 -7
- package/dist/Typography.d.mts +2 -2
- package/dist/Typography.mjs +1 -1
- package/dist/enums.mjs +10 -1
- package/dist/{index-CbElazGe.d.mts → index-BpmFT8LS.d.mts} +1 -1
- package/dist/{index-DX9rV4ki.d.mts → index-CKq4NOxI.d.mts} +18 -26
- package/dist/{index-DS-PGSIg.d.mts → index-CXT7Z-4F.d.mts} +5 -5
- package/dist/index.d.mts +155 -76
- package/dist/index.mjs +4 -4
- package/dist/output.css +733 -185
- package/dist/{src-Da3Y-f7V.mjs → src-BUNbQOql.mjs} +787 -317
- package/dist/{src-DbBw9pxl.css → src-Bb7sskwT.css} +66 -64
- package/package.json +4 -2
- package/dist/enums-HFC1lmIX.mjs +0 -12
- /package/dist/{Reveals-BMHeo2nr.mjs → Reveals-mkV9B8lj.mjs} +0 -0
|
@@ -3,7 +3,51 @@
|
|
|
3
3
|
|
|
4
4
|
@custom-variant dark (&:is(.dark *));
|
|
5
5
|
|
|
6
|
+
@theme inline {
|
|
7
|
+
--color-background: var(--background);
|
|
8
|
+
--color-foreground: var(--foreground);
|
|
9
|
+
--font-sans: var(--font-geist-sans);
|
|
10
|
+
--font-mono: var(--font-geist-mono);
|
|
11
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
12
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
13
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
14
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
15
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
16
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
17
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
18
|
+
--color-sidebar: var(--sidebar);
|
|
19
|
+
--color-chart-5: var(--chart-5);
|
|
20
|
+
--color-chart-4: var(--chart-4);
|
|
21
|
+
--color-chart-3: var(--chart-3);
|
|
22
|
+
--color-chart-2: var(--chart-2);
|
|
23
|
+
--color-chart-1: var(--chart-1);
|
|
24
|
+
--color-ring: var(--ring);
|
|
25
|
+
--color-input: var(--input);
|
|
26
|
+
--color-border: var(--border);
|
|
27
|
+
--color-destructive: var(--destructive);
|
|
28
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
29
|
+
--color-accent: var(--accent);
|
|
30
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
31
|
+
--color-muted: var(--muted);
|
|
32
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
33
|
+
--color-secondary: var(--secondary);
|
|
34
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
35
|
+
--color-primary: var(--primary);
|
|
36
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
37
|
+
--color-popover: var(--popover);
|
|
38
|
+
--color-card-foreground: var(--card-foreground);
|
|
39
|
+
--color-card: var(--card);
|
|
40
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
41
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
42
|
+
--radius-lg: var(--radius);
|
|
43
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
44
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
45
|
+
--radius-3xl: calc(var(--radius) + 12px);
|
|
46
|
+
--radius-4xl: calc(var(--radius) + 16px);
|
|
47
|
+
}
|
|
48
|
+
|
|
6
49
|
:root {
|
|
50
|
+
--radius: 0.625rem;
|
|
7
51
|
--background: oklch(1 0 0);
|
|
8
52
|
--foreground: oklch(0.145 0 0);
|
|
9
53
|
--card: oklch(1 0 0);
|
|
@@ -19,7 +63,6 @@
|
|
|
19
63
|
--accent: oklch(0.97 0 0);
|
|
20
64
|
--accent-foreground: oklch(0.205 0 0);
|
|
21
65
|
--destructive: oklch(0.577 0.245 27.325);
|
|
22
|
-
--destructive-foreground: oklch(0.577 0.245 27.325);
|
|
23
66
|
--border: oklch(0.922 0 0);
|
|
24
67
|
--input: oklch(0.922 0 0);
|
|
25
68
|
--ring: oklch(0.708 0 0);
|
|
@@ -28,7 +71,6 @@
|
|
|
28
71
|
--chart-3: oklch(0.398 0.07 227.392);
|
|
29
72
|
--chart-4: oklch(0.828 0.189 84.429);
|
|
30
73
|
--chart-5: oklch(0.769 0.188 70.08);
|
|
31
|
-
--radius: 0.625rem;
|
|
32
74
|
--sidebar: oklch(0.985 0 0);
|
|
33
75
|
--sidebar-foreground: oklch(0.145 0 0);
|
|
34
76
|
--sidebar-primary: oklch(0.205 0 0);
|
|
@@ -42,11 +84,11 @@
|
|
|
42
84
|
.dark {
|
|
43
85
|
--background: oklch(0.145 0 0);
|
|
44
86
|
--foreground: oklch(0.985 0 0);
|
|
45
|
-
--card: oklch(0.
|
|
87
|
+
--card: oklch(0.205 0 0);
|
|
46
88
|
--card-foreground: oklch(0.985 0 0);
|
|
47
|
-
--popover: oklch(0.
|
|
89
|
+
--popover: oklch(0.205 0 0);
|
|
48
90
|
--popover-foreground: oklch(0.985 0 0);
|
|
49
|
-
--primary: oklch(0.
|
|
91
|
+
--primary: oklch(0.922 0 0);
|
|
50
92
|
--primary-foreground: oklch(0.205 0 0);
|
|
51
93
|
--secondary: oklch(0.269 0 0);
|
|
52
94
|
--secondary-foreground: oklch(0.985 0 0);
|
|
@@ -54,11 +96,10 @@
|
|
|
54
96
|
--muted-foreground: oklch(0.708 0 0);
|
|
55
97
|
--accent: oklch(0.269 0 0);
|
|
56
98
|
--accent-foreground: oklch(0.985 0 0);
|
|
57
|
-
--destructive: oklch(0.
|
|
58
|
-
--
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--ring: oklch(0.439 0 0);
|
|
99
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
100
|
+
--border: oklch(1 0 0 / 10%);
|
|
101
|
+
--input: oklch(1 0 0 / 15%);
|
|
102
|
+
--ring: oklch(0.556 0 0);
|
|
62
103
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
63
104
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
64
105
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
@@ -70,47 +111,8 @@
|
|
|
70
111
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
71
112
|
--sidebar-accent: oklch(0.269 0 0);
|
|
72
113
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
73
|
-
--sidebar-border: oklch(0
|
|
74
|
-
--sidebar-ring: oklch(0.
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@theme inline {
|
|
78
|
-
--color-background: var(--background);
|
|
79
|
-
--color-foreground: var(--foreground);
|
|
80
|
-
--color-card: var(--card);
|
|
81
|
-
--color-card-foreground: var(--card-foreground);
|
|
82
|
-
--color-popover: var(--popover);
|
|
83
|
-
--color-popover-foreground: var(--popover-foreground);
|
|
84
|
-
--color-primary: var(--primary);
|
|
85
|
-
--color-primary-foreground: var(--primary-foreground);
|
|
86
|
-
--color-secondary: var(--secondary);
|
|
87
|
-
--color-secondary-foreground: var(--secondary-foreground);
|
|
88
|
-
--color-muted: var(--muted);
|
|
89
|
-
--color-muted-foreground: var(--muted-foreground);
|
|
90
|
-
--color-accent: var(--accent);
|
|
91
|
-
--color-accent-foreground: var(--accent-foreground);
|
|
92
|
-
--color-destructive: var(--destructive);
|
|
93
|
-
--color-destructive-foreground: var(--destructive-foreground);
|
|
94
|
-
--color-border: var(--border);
|
|
95
|
-
--color-input: var(--input);
|
|
96
|
-
--color-ring: var(--ring);
|
|
97
|
-
--color-chart-1: var(--chart-1);
|
|
98
|
-
--color-chart-2: var(--chart-2);
|
|
99
|
-
--color-chart-3: var(--chart-3);
|
|
100
|
-
--color-chart-4: var(--chart-4);
|
|
101
|
-
--color-chart-5: var(--chart-5);
|
|
102
|
-
--radius-sm: calc(var(--radius) - 4px);
|
|
103
|
-
--radius-md: calc(var(--radius) - 2px);
|
|
104
|
-
--radius-lg: var(--radius);
|
|
105
|
-
--radius-xl: calc(var(--radius) + 4px);
|
|
106
|
-
--color-sidebar: var(--sidebar);
|
|
107
|
-
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
108
|
-
--color-sidebar-primary: var(--sidebar-primary);
|
|
109
|
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
110
|
-
--color-sidebar-accent: var(--sidebar-accent);
|
|
111
|
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
112
|
-
--color-sidebar-border: var(--sidebar-border);
|
|
113
|
-
--color-sidebar-ring: var(--sidebar-ring);
|
|
114
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
115
|
+
--sidebar-ring: oklch(0.556 0 0);
|
|
114
116
|
}
|
|
115
117
|
|
|
116
118
|
@layer base {
|
|
@@ -156,54 +158,54 @@
|
|
|
156
158
|
[data-slot='button'][data-color='blue'] {
|
|
157
159
|
--btn-bg: #3b82f6;
|
|
158
160
|
--btn-border: 59 130 246;
|
|
159
|
-
}
|
|
161
|
+
}
|
|
160
162
|
[data-slot='button'][data-color='purple'] {
|
|
161
163
|
--btn-bg: #a855f7;
|
|
162
164
|
--btn-border: 168 85 247;
|
|
163
|
-
}
|
|
165
|
+
}
|
|
164
166
|
[data-slot='button'][data-color='cyan'] {
|
|
165
167
|
--btn-bg: #06b6d4;
|
|
166
168
|
--btn-border: 6 182 212;
|
|
167
|
-
}
|
|
169
|
+
}
|
|
168
170
|
[data-slot='button'][data-color='green'] {
|
|
169
171
|
--btn-bg: #22c55e;
|
|
170
172
|
--btn-border: 34 197 94;
|
|
171
|
-
}
|
|
173
|
+
}
|
|
172
174
|
[data-slot='button'][data-color='magenta'] {
|
|
173
175
|
--btn-bg: #d946ef;
|
|
174
176
|
--btn-border: 217 70 239;
|
|
175
|
-
}
|
|
177
|
+
}
|
|
176
178
|
[data-slot='button'][data-color='pink'] {
|
|
177
179
|
--btn-bg: #ec4899;
|
|
178
180
|
--btn-border: 236 72 153;
|
|
179
|
-
}
|
|
181
|
+
}
|
|
180
182
|
[data-slot='button'][data-color='red'] {
|
|
181
183
|
--btn-bg: #ef4444;
|
|
182
184
|
--btn-border: 239 68 68;
|
|
183
|
-
}
|
|
185
|
+
}
|
|
184
186
|
[data-slot='button'][data-color='orange'] {
|
|
185
187
|
--btn-bg: #f97316;
|
|
186
188
|
--btn-border: 249 115 22;
|
|
187
|
-
}
|
|
189
|
+
}
|
|
188
190
|
[data-slot='button'][data-color='yellow'] {
|
|
189
191
|
--btn-bg: #eab308;
|
|
190
192
|
--btn-border: 234 179 8;
|
|
191
|
-
}
|
|
193
|
+
}
|
|
192
194
|
[data-slot='button'][data-color='volcano'] {
|
|
193
195
|
--btn-bg: #ea580c;
|
|
194
196
|
--btn-border: 234 88 12;
|
|
195
|
-
}
|
|
197
|
+
}
|
|
196
198
|
[data-slot='button'][data-color='geekblue'] {
|
|
197
199
|
--btn-bg: #6366f1;
|
|
198
200
|
--btn-border: 99 102 241;
|
|
199
|
-
}
|
|
201
|
+
}
|
|
200
202
|
[data-slot='button'][data-color='lime'] {
|
|
201
203
|
--btn-bg: #84cc16;
|
|
202
204
|
--btn-border: 132 204 22;
|
|
203
|
-
}
|
|
205
|
+
}
|
|
204
206
|
[data-slot='button'][data-color='gold'] {
|
|
205
207
|
--btn-bg: #f59e0b;
|
|
206
208
|
--btn-border: 245 158 11;
|
|
207
|
-
}
|
|
209
|
+
}
|
|
208
210
|
}
|
|
209
211
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbpark/ui-kit",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -99,6 +99,8 @@
|
|
|
99
99
|
"lucide-react": "^0.542.0",
|
|
100
100
|
"motion": "^12.23.12",
|
|
101
101
|
"postcss": "^8.4.31",
|
|
102
|
+
"radix-ui": "^1.4.3",
|
|
103
|
+
"react-colorful": "^5.6.1",
|
|
102
104
|
"react-use": "^17.6.0",
|
|
103
105
|
"swiper": "^11.2.10",
|
|
104
106
|
"tailwind-merge": "^3.3.1",
|
|
@@ -114,7 +116,7 @@
|
|
|
114
116
|
"scripts": {
|
|
115
117
|
"prebuild": "npx @tailwindcss/cli -i ./src/globals.css -o ./src/output.css",
|
|
116
118
|
"build": "tsdown",
|
|
117
|
-
"lint": "eslint .
|
|
119
|
+
"lint": "eslint .",
|
|
118
120
|
"generate:component": "turbo gen react-component",
|
|
119
121
|
"check-types": "tsc --noEmit"
|
|
120
122
|
}
|
package/dist/enums-HFC1lmIX.mjs
DELETED
|
File without changes
|