@raxrai/stylelab-ui 0.3.1 → 0.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 +20 -3
- package/dist/index.cjs +517 -514
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +164 -56
- package/dist/index.d.ts +164 -56
- package/dist/index.mjs +393 -388
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -3
package/dist/index.mjs
CHANGED
|
@@ -18,13 +18,13 @@ import {
|
|
|
18
18
|
// lib/theme-resolver.ts
|
|
19
19
|
var themeMap = {
|
|
20
20
|
minimal: {
|
|
21
|
-
button: { primary: "bg-zinc-900 text-white border border-zinc-200 transition-colors duration-200 hover:bg-zinc-800 hover:border-zinc-300 hover:shadow-md", secondary: "bg-transparent border border-zinc-200 text-zinc-900 hover:bg-zinc-100", ghost: "text-
|
|
21
|
+
button: { primary: "bg-zinc-900 text-white border border-zinc-200 transition-colors duration-200 hover:bg-zinc-800 hover:border-zinc-300 hover:shadow-md", secondary: "bg-transparent border border-zinc-200 text-zinc-900 hover:bg-zinc-100", ghost: "text-inherit hover:bg-zinc-100" },
|
|
22
22
|
input: { default: "border border-zinc-200 text-zinc-900 placeholder:text-zinc-400 focus:ring-1 focus:ring-zinc-400 focus:border-zinc-400" },
|
|
23
23
|
toggle: { default: "bg-zinc-200 data-[state=on]:bg-zinc-900" },
|
|
24
24
|
badge: { default: "bg-zinc-100 text-zinc-700 border border-zinc-200" },
|
|
25
25
|
slider: { default: "bg-zinc-200 [&_.slider-thumb]:bg-zinc-900" },
|
|
26
26
|
tabs: { default: "border-b border-zinc-200", triggerActive: "border-zinc-900 font-semibold", triggerInactive: "opacity-70" },
|
|
27
|
-
card: { default: "bg-white
|
|
27
|
+
card: { default: "bg-white border border-zinc-200 shadow-none" },
|
|
28
28
|
bento: { default: "gap-4" },
|
|
29
29
|
navbar: { default: "bg-white text-zinc-900 border-b border-zinc-200" },
|
|
30
30
|
sidebar: { default: "bg-white text-zinc-900 border-r border-zinc-200" },
|
|
@@ -47,13 +47,13 @@ var themeMap = {
|
|
|
47
47
|
timeline: { default: "border-l-2 border-zinc-200 text-zinc-900" }
|
|
48
48
|
},
|
|
49
49
|
night: {
|
|
50
|
-
button: { primary: "bg-white text-zinc-950 border border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition-colors duration-200 hover:bg-zinc-100 hover:shadow-md hover:border-white/20", secondary: "bg-zinc-900 border border-white/10 text-white hover:bg-zinc-800", ghost: "text-
|
|
50
|
+
button: { primary: "bg-white text-zinc-950 border border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition-colors duration-200 hover:bg-zinc-100 hover:shadow-md hover:border-white/20", secondary: "bg-zinc-900 border border-white/10 text-white hover:bg-zinc-800", ghost: "text-inherit hover:bg-white/5" },
|
|
51
51
|
input: { default: "bg-zinc-900 text-zinc-100 border border-white/10 placeholder:text-zinc-500 focus:ring-1 focus:ring-white/20 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
|
|
52
52
|
toggle: { default: "bg-zinc-800 data-[state=on]:bg-white shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
|
|
53
53
|
badge: { default: "bg-zinc-800 text-zinc-300 border border-white/10" },
|
|
54
54
|
slider: { default: "bg-zinc-800 [&_.slider-thumb]:bg-white shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
|
|
55
55
|
tabs: { default: "border-b border-white/10", triggerActive: "border-white font-semibold", triggerInactive: "opacity-70" },
|
|
56
|
-
card: { default: "bg-zinc-950
|
|
56
|
+
card: { default: "bg-zinc-950 border border-white/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
|
|
57
57
|
bento: { default: "gap-4" },
|
|
58
58
|
navbar: { default: "bg-zinc-950 text-zinc-100 border-b border-white/10" },
|
|
59
59
|
sidebar: { default: "bg-zinc-950 text-zinc-100 border-r border-white/10" },
|
|
@@ -76,13 +76,13 @@ var themeMap = {
|
|
|
76
76
|
timeline: { default: "border-l-2 border-white/20 text-zinc-100" }
|
|
77
77
|
},
|
|
78
78
|
glass: {
|
|
79
|
-
button: { primary: "rounded-xl bg-white/70 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/80 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", secondary: "rounded-xl bg-white/50 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/60 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", ghost: "rounded-xl text-
|
|
79
|
+
button: { primary: "rounded-xl bg-white/70 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/80 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", secondary: "rounded-xl bg-white/50 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/60 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", ghost: "rounded-xl text-inherit backdrop-blur-xl transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/40 hover:shadow-glass-soft hover:border hover:border-white/60" },
|
|
80
80
|
input: { default: "rounded-xl bg-white/50 backdrop-blur-2xl border border-slate-200/80 text-slate-800 shadow-glass-soft placeholder:text-slate-500 focus:ring-2 focus:ring-slate-300/50 focus:border-slate-300" },
|
|
81
81
|
toggle: { default: "rounded-full bg-white/50 data-[state=on]:bg-white/80 backdrop-blur-2xl border border-white/60 shadow-glass-soft" },
|
|
82
82
|
badge: { default: "rounded-xl bg-white/60 backdrop-blur-2xl text-slate-700 border border-white/60 shadow-glass-soft" },
|
|
83
83
|
slider: { default: "rounded-full bg-white/50 [&_.slider-thumb]:bg-white [&_.slider-thumb]:border-slate-200 [&_.slider-thumb]:shadow-glass-soft backdrop-blur-2xl border border-white/60 shadow-glass-soft" },
|
|
84
84
|
tabs: { default: "border-b border-slate-200/60", triggerActive: "border-slate-700 font-semibold", triggerInactive: "opacity-70" },
|
|
85
|
-
card: { default: "rounded-2xl bg-white/60 backdrop-blur-2xl border border-white/60
|
|
85
|
+
card: { default: "rounded-2xl bg-white/60 backdrop-blur-2xl border border-white/60 shadow-glass-lift" },
|
|
86
86
|
bento: { default: "gap-4" },
|
|
87
87
|
navbar: { default: "rounded-none bg-white/50 backdrop-blur-2xl border-b border-white/60 text-slate-800 shadow-glass-soft" },
|
|
88
88
|
sidebar: { default: "rounded-none bg-white/50 backdrop-blur-2xl border-r border-white/60 text-slate-800 shadow-glass-soft" },
|
|
@@ -105,13 +105,13 @@ var themeMap = {
|
|
|
105
105
|
timeline: { default: "border-l-2 border-slate-200/60 text-slate-800" }
|
|
106
106
|
},
|
|
107
107
|
neubrutal: {
|
|
108
|
-
button: { primary: "rounded-none bg-[#FFD600] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]", secondary: "rounded-none bg-[#FF5733] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1", ghost: "rounded-none border-4 border-transparent hover:border-black hover:bg-zinc-100
|
|
108
|
+
button: { primary: "rounded-none bg-[#FFD600] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]", secondary: "rounded-none bg-[#FF5733] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1", ghost: "rounded-none text-inherit border-4 border-transparent hover:border-black hover:bg-zinc-100" },
|
|
109
109
|
input: { default: "rounded-none border-4 border-black text-black placeholder:text-zinc-600 focus:ring-4 focus:ring-black/20 bg-white" },
|
|
110
110
|
toggle: { default: "rounded-none border-4 border-black bg-white data-[state=on]:bg-[#FFD600] shadow-neubrutal" },
|
|
111
111
|
badge: { default: "rounded-none bg-[#FFD600] text-black border-4 border-black" },
|
|
112
112
|
slider: { default: "rounded-none border-4 border-black bg-white [&_.slider-thumb]:bg-[#FF5733] [&_.slider-thumb]:border-4 [&_.slider-thumb]:border-black" },
|
|
113
113
|
tabs: { default: "border-b-4 border-black", triggerActive: "bg-[#FFD600] border-b-4 border-black font-bold -mb-[3px] pb-[5px] shadow-neubrutal", triggerInactive: "opacity-80" },
|
|
114
|
-
card: { default: "rounded-none bg-white
|
|
114
|
+
card: { default: "rounded-none bg-white border-4 border-black shadow-neubrutal" },
|
|
115
115
|
bento: { default: "gap-4" },
|
|
116
116
|
navbar: { default: "rounded-none bg-[#FFD600] text-black border-b-4 border-black shadow-neubrutal" },
|
|
117
117
|
sidebar: { default: "rounded-none bg-[#FFD600]/30 border-r-4 border-black shadow-neubrutal text-black" },
|
|
@@ -134,13 +134,13 @@ var themeMap = {
|
|
|
134
134
|
timeline: { default: "border-l-4 border-black text-black" }
|
|
135
135
|
},
|
|
136
136
|
clay: {
|
|
137
|
-
button: { primary: "rounded-[40px] bg-rose-200 text-rose-900 border border-rose-300 shadow-clay-outer hover:shadow-[10px_10px_20px_rgba(0,0,0,0.08),inset_-8px_-8px_15px_rgba(0,0,0,0.2),inset_8px_8px_15px_rgba(255,255,255,0.4)]", secondary: "rounded-[40px] bg-sky-100 text-sky-900 shadow-clay-outer", ghost: "rounded-[40px] hover:bg-zinc-100
|
|
137
|
+
button: { primary: "rounded-[40px] bg-rose-200 text-rose-900 border border-rose-300 shadow-clay-outer hover:shadow-[10px_10px_20px_rgba(0,0,0,0.08),inset_-8px_-8px_15px_rgba(0,0,0,0.2),inset_8px_8px_15px_rgba(255,255,255,0.4)]", secondary: "rounded-[40px] bg-sky-100 text-sky-900 shadow-clay-outer", ghost: "rounded-[40px] text-inherit hover:bg-zinc-100" },
|
|
138
138
|
input: { default: "rounded-[40px] border border-zinc-200 bg-zinc-50 text-zinc-900 placeholder:text-zinc-500 focus:ring-2 focus:ring-sky-300" },
|
|
139
139
|
toggle: { default: "rounded-full bg-sky-100 data-[state=on]:bg-sky-300 data-[state=on]:shadow-clay-outer" },
|
|
140
140
|
badge: { default: "rounded-[40px] bg-amber-100 text-amber-900" },
|
|
141
141
|
slider: { default: "rounded-full bg-sky-100 [&_.slider-thumb]:rounded-full [&_.slider-thumb]:bg-rose-300" },
|
|
142
142
|
tabs: { default: "border-b-2 border-zinc-200/80", triggerActive: "border-rose-600 font-semibold", triggerInactive: "opacity-70" },
|
|
143
|
-
card: { default: "rounded-[40px] bg-rose-50
|
|
143
|
+
card: { default: "rounded-[40px] bg-rose-50 shadow-clay-outer border border-rose-100" },
|
|
144
144
|
bento: { default: "gap-4" },
|
|
145
145
|
navbar: { default: "rounded-b-3xl bg-white/80 text-zinc-900 backdrop-blur-md shadow-clay-outer border-b border-zinc-200" },
|
|
146
146
|
sidebar: { default: "rounded-r-3xl bg-sky-50 text-zinc-900 shadow-clay-outer border-r border-sky-100" },
|
|
@@ -163,13 +163,13 @@ var themeMap = {
|
|
|
163
163
|
timeline: { default: "border-l-2 border-rose-200 text-zinc-900" }
|
|
164
164
|
},
|
|
165
165
|
cyberpunk: {
|
|
166
|
-
button: { primary: "bg-transparent border-2 border-[#22d3ee] text-[#22d3ee] font-mono shadow-neon-glow hover:animate-glitch-anim", secondary: "bg-transparent border-2 border-[#ec4899] text-[#ec4899] font-mono hover:animate-glitch-anim", ghost: "text-
|
|
166
|
+
button: { primary: "bg-transparent border-2 border-[#22d3ee] text-[#22d3ee] font-mono shadow-neon-glow hover:animate-glitch-anim", secondary: "bg-transparent border-2 border-[#ec4899] text-[#ec4899] font-mono hover:animate-glitch-anim", ghost: "text-inherit font-mono hover:bg-[#22d3ee]/10" },
|
|
167
167
|
input: { default: "bg-black border-2 border-[#22d3ee] text-[#22d3ee] placeholder:text-[#22d3ee]/50 font-mono focus:shadow-neon-glow" },
|
|
168
168
|
toggle: { default: "bg-zinc-900 border-2 border-[#22d3ee] data-[state=on]:bg-[#22d3ee] data-[state=on]:shadow-neon-glow" },
|
|
169
169
|
badge: { default: "bg-black border-2 border-[#ec4899] text-[#ec4899] font-mono" },
|
|
170
170
|
slider: { default: "bg-zinc-900 [&_.slider-thumb]:border-2 [&_.slider-thumb]:border-[#22d3ee] [&_.slider-thumb]:bg-[#22d3ee] [&_.slider-thumb]:shadow-neon-glow" },
|
|
171
171
|
tabs: { default: "border-b-2 border-[#22d3ee]", triggerActive: "text-[#22d3ee] border-[#22d3ee] font-bold shadow-neon-glow", triggerInactive: "opacity-50 text-[#22d3ee]/70" },
|
|
172
|
-
card: { default: "bg-black
|
|
172
|
+
card: { default: "bg-black border-2 border-[#22d3ee] shadow-neon-glow font-mono" },
|
|
173
173
|
bento: { default: "gap-4" },
|
|
174
174
|
navbar: { default: "bg-black text-[#22d3ee] border-b-2 border-[#22d3ee] font-mono" },
|
|
175
175
|
sidebar: { default: "bg-black text-[#22d3ee] border-r-2 border-[#22d3ee] font-mono" },
|
|
@@ -192,13 +192,13 @@ var themeMap = {
|
|
|
192
192
|
timeline: { default: "border-l-2 border-[#22d3ee] text-[#22d3ee] font-mono" }
|
|
193
193
|
},
|
|
194
194
|
retro: {
|
|
195
|
-
button: { primary: "rounded-none bg-lime-500 text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-lime-400 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", secondary: "rounded-none bg-white text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-zinc-100 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", ghost: "rounded-none font-mono text-
|
|
195
|
+
button: { primary: "rounded-none bg-lime-500 text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-lime-400 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", secondary: "rounded-none bg-white text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-zinc-100 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", ghost: "rounded-none font-mono text-inherit border-2 border-transparent hover:border-black hover:bg-zinc-100" },
|
|
196
196
|
input: { default: "rounded-none border-2 border-black text-black placeholder:text-zinc-500 font-mono focus:ring-2 focus:ring-black focus:ring-offset-0 bg-white" },
|
|
197
197
|
toggle: { default: "rounded-none border-2 border-black bg-zinc-200 data-[state=on]:bg-lime-500 shadow-[3px_3px_0_0_rgba(0,0,0,1)]" },
|
|
198
198
|
badge: { default: "rounded-none bg-lime-500 text-black border-2 border-black font-mono" },
|
|
199
199
|
slider: { default: "rounded-none border-2 border-black bg-zinc-200 [&_.slider-thumb]:rounded-none [&_.slider-thumb]:border-2 [&_.slider-thumb]:border-black [&_.slider-thumb]:bg-lime-500 [&_.slider-thumb]:shadow-[2px_2px_0_0_rgba(0,0,0,1)]" },
|
|
200
200
|
tabs: { default: "border-b-2 border-black font-mono", triggerActive: "border-b-2 border-black font-bold bg-lime-500/20 text-black -mb-[2px] pb-[6px]", triggerInactive: "opacity-70 text-black" },
|
|
201
|
-
card: { default: "rounded-none bg-white
|
|
201
|
+
card: { default: "rounded-none bg-white border-2 border-black shadow-[6px_6px_0_0_rgba(0,0,0,1)] font-mono" },
|
|
202
202
|
bento: { default: "gap-4" },
|
|
203
203
|
navbar: { default: "rounded-none bg-zinc-100 text-black border-b-2 border-black font-mono shadow-[0_4px_0_0_rgba(0,0,0,1)]" },
|
|
204
204
|
sidebar: { default: "rounded-none bg-zinc-100 text-black border-r-2 border-black font-mono" },
|
|
@@ -221,13 +221,13 @@ var themeMap = {
|
|
|
221
221
|
timeline: { default: "border-l-2 border-black text-black font-mono" }
|
|
222
222
|
},
|
|
223
223
|
motion: {
|
|
224
|
-
button: { primary: "rounded-xl bg-indigo-500 text-white border-0 shadow-lg transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:shadow-xl hover:bg-indigo-600 active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2", secondary: "rounded-xl bg-white text-indigo-600 border-2 border-indigo-200 shadow-md transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:border-indigo-300 hover:shadow-lg active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2", ghost: "rounded-xl text-
|
|
224
|
+
button: { primary: "rounded-xl bg-indigo-500 text-white border-0 shadow-lg transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:shadow-xl hover:bg-indigo-600 active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2", secondary: "rounded-xl bg-white text-indigo-600 border-2 border-indigo-200 shadow-md transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:border-indigo-300 hover:shadow-lg active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2", ghost: "rounded-xl text-inherit transition-all duration-300 ease-out hover:scale-105 hover:bg-indigo-50 hover:-translate-y-0.5 active:scale-100 active:translate-y-0" },
|
|
225
225
|
input: { default: "rounded-xl border-2 border-indigo-200 bg-white text-zinc-900 transition-all duration-300 ease-out placeholder:text-zinc-400 focus:scale-[1.01] focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-offset-0" },
|
|
226
226
|
toggle: { default: "rounded-full bg-zinc-200 transition-all duration-300 ease-out data-[state=on]:bg-indigo-500 [&_.slider-thumb]:transition-transform [&_.slider-thumb]:duration-300 [&_.slider-thumb]:data-[state=on]:scale-110" },
|
|
227
227
|
badge: { default: "rounded-full bg-indigo-100 text-indigo-700 border border-indigo-200 transition-all duration-300 ease-out hover:scale-110 hover:bg-indigo-200" },
|
|
228
228
|
slider: { default: "rounded-full bg-zinc-200 transition-all duration-300 [&_.slider-thumb]:rounded-full [&_.slider-thumb]:bg-indigo-500 [&_.slider-thumb]:transition-transform [&_.slider-thumb]:duration-300 [&_.slider-thumb]:hover:scale-125 [&_.slider-thumb]:active:scale-110" },
|
|
229
229
|
tabs: { default: "border-b-2 border-indigo-200 transition-colors duration-300", triggerActive: "border-indigo-500 font-semibold text-indigo-600 transition-all duration-300", triggerInactive: "opacity-70 transition-opacity duration-300 hover:opacity-100" },
|
|
230
|
-
card: { default: "rounded-2xl bg-white
|
|
230
|
+
card: { default: "rounded-2xl bg-white border-2 border-indigo-100 shadow-lg transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-xl hover:border-indigo-200 hover:-translate-y-1" },
|
|
231
231
|
bento: { default: "gap-4" },
|
|
232
232
|
navbar: { default: "rounded-none bg-white/95 backdrop-blur-md text-zinc-900 border-b-2 border-indigo-100 shadow-sm transition-all duration-300" },
|
|
233
233
|
sidebar: { default: "rounded-none bg-white/95 backdrop-blur-md text-zinc-900 border-r-2 border-indigo-100 transition-all duration-300" },
|
|
@@ -285,12 +285,14 @@ function getStoredTheme(storageKey, defaultTheme) {
|
|
|
285
285
|
function ThemeProvider({
|
|
286
286
|
children,
|
|
287
287
|
defaultTheme = "minimal",
|
|
288
|
-
storageKey = "stylelab-theme"
|
|
288
|
+
storageKey = "stylelab-theme",
|
|
289
|
+
persistTheme = true
|
|
289
290
|
}) {
|
|
290
291
|
const [theme, setThemeState] = useState(defaultTheme);
|
|
291
292
|
useEffect(() => {
|
|
293
|
+
if (!persistTheme) return;
|
|
292
294
|
setThemeState((prev) => getStoredTheme(storageKey, prev));
|
|
293
|
-
}, [storageKey]);
|
|
295
|
+
}, [storageKey, persistTheme]);
|
|
294
296
|
useEffect(() => {
|
|
295
297
|
if (typeof document !== "undefined") {
|
|
296
298
|
try {
|
|
@@ -305,12 +307,12 @@ function ThemeProvider({
|
|
|
305
307
|
if (typeof document !== "undefined") {
|
|
306
308
|
try {
|
|
307
309
|
document.documentElement.dataset.stylelabTheme = next;
|
|
308
|
-
localStorage.setItem(storageKey, next);
|
|
310
|
+
if (persistTheme) localStorage.setItem(storageKey, next);
|
|
309
311
|
} catch (_) {
|
|
310
312
|
}
|
|
311
313
|
}
|
|
312
314
|
},
|
|
313
|
-
[storageKey]
|
|
315
|
+
[storageKey, persistTheme]
|
|
314
316
|
);
|
|
315
317
|
const value = useMemo(
|
|
316
318
|
() => ({ theme, setTheme }),
|
|
@@ -3524,6 +3526,14 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
|
|
|
3524
3526
|
function cn(...inputs) {
|
|
3525
3527
|
return twMerge(clsx(inputs));
|
|
3526
3528
|
}
|
|
3529
|
+
function mergeRefs(...refs) {
|
|
3530
|
+
return (node) => {
|
|
3531
|
+
refs.forEach((ref) => {
|
|
3532
|
+
if (typeof ref === "function") ref(node);
|
|
3533
|
+
else if (ref != null) ref.current = node;
|
|
3534
|
+
});
|
|
3535
|
+
};
|
|
3536
|
+
}
|
|
3527
3537
|
|
|
3528
3538
|
// node_modules/lucide-react/dist/esm/createLucideIcon.js
|
|
3529
3539
|
import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
|
|
@@ -3673,6 +3683,7 @@ var X = createLucideIcon("x", __iconNode9);
|
|
|
3673
3683
|
|
|
3674
3684
|
// components/Accordion.tsx
|
|
3675
3685
|
import {
|
|
3686
|
+
forwardRef as forwardRef3,
|
|
3676
3687
|
useCallback as useCallback2,
|
|
3677
3688
|
useEffect as useEffect2,
|
|
3678
3689
|
useRef,
|
|
@@ -3738,14 +3749,14 @@ function AccordionPanel({
|
|
|
3738
3749
|
)
|
|
3739
3750
|
] });
|
|
3740
3751
|
}
|
|
3741
|
-
|
|
3752
|
+
var Accordion = forwardRef3(function Accordion2({
|
|
3742
3753
|
items,
|
|
3743
3754
|
allowMultiple = false,
|
|
3744
3755
|
defaultOpenIds,
|
|
3745
3756
|
className,
|
|
3746
3757
|
style,
|
|
3747
3758
|
theme: themeProp
|
|
3748
|
-
}) {
|
|
3759
|
+
}, ref) {
|
|
3749
3760
|
const [open, setOpen] = useState2(
|
|
3750
3761
|
() => new Set(defaultOpenIds ?? [])
|
|
3751
3762
|
);
|
|
@@ -3766,7 +3777,7 @@ function Accordion({
|
|
|
3766
3777
|
},
|
|
3767
3778
|
[allowMultiple]
|
|
3768
3779
|
);
|
|
3769
|
-
return /* @__PURE__ */ jsx2("div", { className: cn(themeClass, className), style, children: items.map((item) => /* @__PURE__ */ jsx2(
|
|
3780
|
+
return /* @__PURE__ */ jsx2("div", { ref, className: cn(themeClass, className), style, children: items.map((item) => /* @__PURE__ */ jsx2(
|
|
3770
3781
|
AccordionPanel,
|
|
3771
3782
|
{
|
|
3772
3783
|
item,
|
|
@@ -3776,12 +3787,12 @@ function Accordion({
|
|
|
3776
3787
|
},
|
|
3777
3788
|
item.id
|
|
3778
3789
|
)) });
|
|
3779
|
-
}
|
|
3790
|
+
});
|
|
3780
3791
|
|
|
3781
3792
|
// components/Alert.tsx
|
|
3782
|
-
import { forwardRef as
|
|
3793
|
+
import { forwardRef as forwardRef4 } from "react";
|
|
3783
3794
|
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
3784
|
-
var Alert =
|
|
3795
|
+
var Alert = forwardRef4(function Alert2({
|
|
3785
3796
|
intent = "default",
|
|
3786
3797
|
title,
|
|
3787
3798
|
children,
|
|
@@ -3809,12 +3820,12 @@ var Alert = forwardRef3(function Alert2({
|
|
|
3809
3820
|
});
|
|
3810
3821
|
|
|
3811
3822
|
// components/Avatar.tsx
|
|
3812
|
-
import { forwardRef as
|
|
3823
|
+
import { forwardRef as forwardRef5 } from "react";
|
|
3813
3824
|
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
3814
3825
|
function getInitials(name) {
|
|
3815
3826
|
return name.trim().split(/\s+/).map((s) => s[0]).join("").toUpperCase().slice(0, 2);
|
|
3816
3827
|
}
|
|
3817
|
-
var Avatar =
|
|
3828
|
+
var Avatar = forwardRef5(function Avatar2({
|
|
3818
3829
|
src,
|
|
3819
3830
|
alt = "",
|
|
3820
3831
|
fallback,
|
|
@@ -3958,7 +3969,7 @@ var cva = (base, config) => (props) => {
|
|
|
3958
3969
|
};
|
|
3959
3970
|
|
|
3960
3971
|
// components/Badge.tsx
|
|
3961
|
-
import { forwardRef as
|
|
3972
|
+
import { forwardRef as forwardRef6 } from "react";
|
|
3962
3973
|
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
3963
3974
|
var badgeVariants = cva(
|
|
3964
3975
|
"inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium",
|
|
@@ -3976,7 +3987,7 @@ var badgeVariants = cva(
|
|
|
3976
3987
|
}
|
|
3977
3988
|
}
|
|
3978
3989
|
);
|
|
3979
|
-
var Badge =
|
|
3990
|
+
var Badge = forwardRef6(function Badge2({
|
|
3980
3991
|
children,
|
|
3981
3992
|
variant = "default",
|
|
3982
3993
|
dot = false,
|
|
@@ -4021,17 +4032,15 @@ var Badge = forwardRef5(function Badge2({
|
|
|
4021
4032
|
});
|
|
4022
4033
|
|
|
4023
4034
|
// components/BentoGrid.tsx
|
|
4035
|
+
import { forwardRef as forwardRef7 } from "react";
|
|
4024
4036
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
4025
|
-
|
|
4026
|
-
children,
|
|
4027
|
-
className,
|
|
4028
|
-
style
|
|
4029
|
-
}) {
|
|
4037
|
+
var BentoGrid = forwardRef7(function BentoGrid2({ children, className, style }, ref) {
|
|
4030
4038
|
const { theme } = useTheme();
|
|
4031
4039
|
const themeClass = getThemeClass(theme, "bento", "default");
|
|
4032
4040
|
return /* @__PURE__ */ jsx6(
|
|
4033
4041
|
"div",
|
|
4034
4042
|
{
|
|
4043
|
+
ref,
|
|
4035
4044
|
className: cn(
|
|
4036
4045
|
"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
|
|
4037
4046
|
themeClass,
|
|
@@ -4041,9 +4050,10 @@ function BentoGrid({
|
|
|
4041
4050
|
children
|
|
4042
4051
|
}
|
|
4043
4052
|
);
|
|
4044
|
-
}
|
|
4053
|
+
});
|
|
4045
4054
|
|
|
4046
4055
|
// components/Breadcrumbs.tsx
|
|
4056
|
+
import { forwardRef as forwardRef8 } from "react";
|
|
4047
4057
|
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
4048
4058
|
var defaultSeparators = {
|
|
4049
4059
|
minimal: "/",
|
|
@@ -4055,25 +4065,20 @@ var defaultSeparators = {
|
|
|
4055
4065
|
retro: ">",
|
|
4056
4066
|
motion: "\u203A"
|
|
4057
4067
|
};
|
|
4058
|
-
|
|
4059
|
-
items,
|
|
4060
|
-
separator,
|
|
4061
|
-
className,
|
|
4062
|
-
theme: themeProp
|
|
4063
|
-
}) {
|
|
4068
|
+
var Breadcrumbs = forwardRef8(function Breadcrumbs2({ items, separator, className, style, theme: themeProp }, ref) {
|
|
4064
4069
|
const { theme: contextTheme } = useTheme();
|
|
4065
4070
|
const theme = themeProp ?? contextTheme;
|
|
4066
4071
|
const themeClass = getThemeClass(theme, "breadcrumbs", "default");
|
|
4067
4072
|
const sep = separator ?? defaultSeparators[theme] ?? "/";
|
|
4068
|
-
return /* @__PURE__ */ jsx7("nav", { "aria-label": "Breadcrumb", className: cn("flex flex-wrap items-center gap-1.5 text-sm", themeClass, className), children: items.map((item, i) => /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1.5", children: [
|
|
4073
|
+
return /* @__PURE__ */ jsx7("nav", { ref, "aria-label": "Breadcrumb", className: cn("flex flex-wrap items-center gap-1.5 text-sm", themeClass, className), style, children: items.map((item, i) => /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1.5", children: [
|
|
4069
4074
|
i > 0 && /* @__PURE__ */ jsx7("span", { "data-sep": true, className: "shrink-0 opacity-70", "aria-hidden": true, children: sep }),
|
|
4070
4075
|
item.href != null ? /* @__PURE__ */ jsx7("a", { href: item.href, className: "hover:underline", children: item.label }) : /* @__PURE__ */ jsx7("span", { className: "font-medium", "aria-current": i === items.length - 1 ? "page" : void 0, children: item.label })
|
|
4071
4076
|
] }, i)) });
|
|
4072
|
-
}
|
|
4077
|
+
});
|
|
4073
4078
|
|
|
4074
4079
|
// components/Button.tsx
|
|
4075
4080
|
import {
|
|
4076
|
-
forwardRef as
|
|
4081
|
+
forwardRef as forwardRef9
|
|
4077
4082
|
} from "react";
|
|
4078
4083
|
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
4079
4084
|
var buttonVariants = cva(
|
|
@@ -4155,10 +4160,10 @@ function ButtonInner(props, ref) {
|
|
|
4155
4160
|
}
|
|
4156
4161
|
);
|
|
4157
4162
|
}
|
|
4158
|
-
var Button =
|
|
4163
|
+
var Button = forwardRef9(ButtonInner);
|
|
4159
4164
|
|
|
4160
4165
|
// components/Calendar.tsx
|
|
4161
|
-
import { useMemo as useMemo2, useState as useState3 } from "react";
|
|
4166
|
+
import { forwardRef as forwardRef10, useMemo as useMemo2, useState as useState3 } from "react";
|
|
4162
4167
|
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
4163
4168
|
function getDaysInMonth(year, month) {
|
|
4164
4169
|
return new Date(year, month + 1, 0).getDate();
|
|
@@ -4189,15 +4194,16 @@ var MONTHS = [
|
|
|
4189
4194
|
"November",
|
|
4190
4195
|
"December"
|
|
4191
4196
|
];
|
|
4192
|
-
|
|
4197
|
+
var Calendar = forwardRef10(function Calendar2({
|
|
4193
4198
|
value: controlledValue,
|
|
4194
4199
|
defaultValue,
|
|
4195
4200
|
onSelect,
|
|
4196
4201
|
min,
|
|
4197
4202
|
max,
|
|
4198
4203
|
className,
|
|
4204
|
+
style,
|
|
4199
4205
|
theme: themeProp
|
|
4200
|
-
}) {
|
|
4206
|
+
}, ref) {
|
|
4201
4207
|
const [uncontrolled, setUncontrolled] = useState3(
|
|
4202
4208
|
() => defaultValue ?? null
|
|
4203
4209
|
);
|
|
@@ -4245,7 +4251,9 @@ function Calendar({
|
|
|
4245
4251
|
return /* @__PURE__ */ jsxs7(
|
|
4246
4252
|
"div",
|
|
4247
4253
|
{
|
|
4254
|
+
ref,
|
|
4248
4255
|
className: cn("inline-block max-w-full min-w-0 border p-3 sm:p-4 rounded-xl", themeClass, className),
|
|
4256
|
+
style,
|
|
4249
4257
|
children: [
|
|
4250
4258
|
/* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between mb-3", children: [
|
|
4251
4259
|
/* @__PURE__ */ jsx9(
|
|
@@ -4298,10 +4306,10 @@ function Calendar({
|
|
|
4298
4306
|
]
|
|
4299
4307
|
}
|
|
4300
4308
|
);
|
|
4301
|
-
}
|
|
4309
|
+
});
|
|
4302
4310
|
|
|
4303
4311
|
// components/Card.tsx
|
|
4304
|
-
import { forwardRef as
|
|
4312
|
+
import { forwardRef as forwardRef11 } from "react";
|
|
4305
4313
|
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
4306
4314
|
var cardVariants = cva("rounded-xl", {
|
|
4307
4315
|
variants: {
|
|
@@ -4320,7 +4328,7 @@ var cardVariants = cva("rounded-xl", {
|
|
|
4320
4328
|
isHoverable: false
|
|
4321
4329
|
}
|
|
4322
4330
|
});
|
|
4323
|
-
var Card =
|
|
4331
|
+
var Card = forwardRef11(function Card2({
|
|
4324
4332
|
header,
|
|
4325
4333
|
footer,
|
|
4326
4334
|
padding = "md",
|
|
@@ -4341,8 +4349,8 @@ var Card = forwardRef7(function Card2({
|
|
|
4341
4349
|
className: cn(
|
|
4342
4350
|
cardVariants({ padding, isHoverable }),
|
|
4343
4351
|
themeClass,
|
|
4344
|
-
|
|
4345
|
-
|
|
4352
|
+
classNames.root,
|
|
4353
|
+
className
|
|
4346
4354
|
),
|
|
4347
4355
|
...props,
|
|
4348
4356
|
children: [
|
|
@@ -4378,9 +4386,160 @@ var Card = forwardRef7(function Card2({
|
|
|
4378
4386
|
);
|
|
4379
4387
|
});
|
|
4380
4388
|
|
|
4389
|
+
// components/CommandPalette.tsx
|
|
4390
|
+
import { forwardRef as forwardRef12, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
|
|
4391
|
+
import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
4392
|
+
var CommandPalette = forwardRef12(function CommandPalette2({
|
|
4393
|
+
open,
|
|
4394
|
+
onClose,
|
|
4395
|
+
commands,
|
|
4396
|
+
placeholder = "Type a command...",
|
|
4397
|
+
className,
|
|
4398
|
+
style,
|
|
4399
|
+
theme: themeProp
|
|
4400
|
+
}, ref) {
|
|
4401
|
+
const [query, setQuery] = useState4("");
|
|
4402
|
+
const [selected, setSelected] = useState4(0);
|
|
4403
|
+
const listRef = useRef2(null);
|
|
4404
|
+
const { theme: contextTheme } = useTheme();
|
|
4405
|
+
const theme = themeProp ?? contextTheme;
|
|
4406
|
+
const themeClass = getThemeClass(theme, "commandPalette", "default");
|
|
4407
|
+
const filtered = useMemo3(() => {
|
|
4408
|
+
if (!query.trim()) return commands;
|
|
4409
|
+
const q = query.toLowerCase();
|
|
4410
|
+
return commands.filter((c) => c.label.toLowerCase().includes(q));
|
|
4411
|
+
}, [commands, query]);
|
|
4412
|
+
const safeSelected = Math.min(selected, Math.max(0, filtered.length - 1));
|
|
4413
|
+
useEffect3(() => {
|
|
4414
|
+
if (open) {
|
|
4415
|
+
setQuery("");
|
|
4416
|
+
setSelected(0);
|
|
4417
|
+
}
|
|
4418
|
+
}, [open]);
|
|
4419
|
+
useEffect3(() => {
|
|
4420
|
+
setSelected((s) => Math.min(s, Math.max(0, filtered.length - 1)));
|
|
4421
|
+
}, [filtered.length]);
|
|
4422
|
+
const runSelected = useCallback3(() => {
|
|
4423
|
+
const item = filtered[safeSelected];
|
|
4424
|
+
if (item) {
|
|
4425
|
+
item.onSelect();
|
|
4426
|
+
onClose();
|
|
4427
|
+
}
|
|
4428
|
+
}, [filtered, safeSelected, onClose]);
|
|
4429
|
+
useEffect3(() => {
|
|
4430
|
+
if (!open) return;
|
|
4431
|
+
const handler = (e) => {
|
|
4432
|
+
if (e.key === "Escape") {
|
|
4433
|
+
e.preventDefault();
|
|
4434
|
+
onClose();
|
|
4435
|
+
return;
|
|
4436
|
+
}
|
|
4437
|
+
if (e.key === "ArrowDown") {
|
|
4438
|
+
e.preventDefault();
|
|
4439
|
+
setSelected((s) => (s + 1) % Math.max(1, filtered.length));
|
|
4440
|
+
return;
|
|
4441
|
+
}
|
|
4442
|
+
if (e.key === "ArrowUp") {
|
|
4443
|
+
e.preventDefault();
|
|
4444
|
+
setSelected(
|
|
4445
|
+
(s) => (s - 1 + filtered.length) % Math.max(1, filtered.length)
|
|
4446
|
+
);
|
|
4447
|
+
return;
|
|
4448
|
+
}
|
|
4449
|
+
if (e.key === "Enter") {
|
|
4450
|
+
e.preventDefault();
|
|
4451
|
+
runSelected();
|
|
4452
|
+
}
|
|
4453
|
+
};
|
|
4454
|
+
document.addEventListener("keydown", handler, true);
|
|
4455
|
+
return () => document.removeEventListener("keydown", handler, true);
|
|
4456
|
+
}, [open, onClose, filtered.length, runSelected]);
|
|
4457
|
+
useEffect3(() => {
|
|
4458
|
+
const el = listRef.current;
|
|
4459
|
+
if (!el) return;
|
|
4460
|
+
const item = el.querySelector(`[data-index="${safeSelected}"]`);
|
|
4461
|
+
if (item && typeof item.scrollIntoView === "function") {
|
|
4462
|
+
item.scrollIntoView({ block: "nearest", behavior: "smooth" });
|
|
4463
|
+
}
|
|
4464
|
+
}, [safeSelected]);
|
|
4465
|
+
if (!open) return null;
|
|
4466
|
+
return /* @__PURE__ */ jsxs9(
|
|
4467
|
+
"div",
|
|
4468
|
+
{
|
|
4469
|
+
ref,
|
|
4470
|
+
className: "fixed inset-0 z-50 flex items-start justify-center pt-[20vh] p-4",
|
|
4471
|
+
role: "dialog",
|
|
4472
|
+
"aria-modal": "true",
|
|
4473
|
+
"aria-label": "Command palette",
|
|
4474
|
+
children: [
|
|
4475
|
+
/* @__PURE__ */ jsx11(
|
|
4476
|
+
"div",
|
|
4477
|
+
{
|
|
4478
|
+
className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
|
|
4479
|
+
onClick: onClose,
|
|
4480
|
+
"aria-hidden": true
|
|
4481
|
+
}
|
|
4482
|
+
),
|
|
4483
|
+
/* @__PURE__ */ jsxs9(
|
|
4484
|
+
"div",
|
|
4485
|
+
{
|
|
4486
|
+
className: cn("relative z-10 w-full max-w-[calc(100vw-2rem)] sm:max-w-xl overflow-hidden rounded-xl mx-2 sm:mx-0", themeClass, className),
|
|
4487
|
+
style,
|
|
4488
|
+
children: [
|
|
4489
|
+
/* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 border-b border-inherit px-3 py-2", children: [
|
|
4490
|
+
/* @__PURE__ */ jsx11(Search, { className: "size-4 shrink-0 opacity-60", "aria-hidden": true }),
|
|
4491
|
+
/* @__PURE__ */ jsx11(
|
|
4492
|
+
"input",
|
|
4493
|
+
{
|
|
4494
|
+
type: "text",
|
|
4495
|
+
value: query,
|
|
4496
|
+
onChange: (e) => setQuery(e.target.value),
|
|
4497
|
+
placeholder,
|
|
4498
|
+
className: "flex-1 bg-transparent outline-none placeholder:opacity-60",
|
|
4499
|
+
autoFocus: true,
|
|
4500
|
+
"aria-autocomplete": "list",
|
|
4501
|
+
"aria-controls": "command-palette-list",
|
|
4502
|
+
"aria-expanded": "true"
|
|
4503
|
+
}
|
|
4504
|
+
),
|
|
4505
|
+
/* @__PURE__ */ jsx11("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: "ESC" })
|
|
4506
|
+
] }),
|
|
4507
|
+
/* @__PURE__ */ jsx11(
|
|
4508
|
+
"ul",
|
|
4509
|
+
{
|
|
4510
|
+
ref: listRef,
|
|
4511
|
+
id: "command-palette-list",
|
|
4512
|
+
role: "listbox",
|
|
4513
|
+
className: "max-h-72 overflow-auto py-2",
|
|
4514
|
+
children: filtered.length === 0 ? /* @__PURE__ */ jsx11("li", { className: "px-4 py-3 text-sm opacity-60", children: "No results." }) : filtered.map((cmd, i) => /* @__PURE__ */ jsx11("li", { role: "option", "aria-selected": i === safeSelected, "data-index": i, children: /* @__PURE__ */ jsxs9(
|
|
4515
|
+
"button",
|
|
4516
|
+
{
|
|
4517
|
+
type: "button",
|
|
4518
|
+
onClick: () => {
|
|
4519
|
+
cmd.onSelect();
|
|
4520
|
+
onClose();
|
|
4521
|
+
},
|
|
4522
|
+
onMouseEnter: () => setSelected(i),
|
|
4523
|
+
className: `flex w-full items-center justify-between px-4 py-2 text-left text-sm ${i === safeSelected ? "bg-current/10" : ""}`,
|
|
4524
|
+
children: [
|
|
4525
|
+
cmd.label,
|
|
4526
|
+
cmd.shortcut ? /* @__PURE__ */ jsx11("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: cmd.shortcut }) : null
|
|
4527
|
+
]
|
|
4528
|
+
}
|
|
4529
|
+
) }, cmd.id))
|
|
4530
|
+
}
|
|
4531
|
+
)
|
|
4532
|
+
]
|
|
4533
|
+
}
|
|
4534
|
+
)
|
|
4535
|
+
]
|
|
4536
|
+
}
|
|
4537
|
+
);
|
|
4538
|
+
});
|
|
4539
|
+
|
|
4381
4540
|
// components/DashboardShell.tsx
|
|
4382
|
-
import { useState as
|
|
4383
|
-
import { Fragment, jsx as
|
|
4541
|
+
import { forwardRef as forwardRef13, useState as useState5 } from "react";
|
|
4542
|
+
import { Fragment, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
4384
4543
|
var SHELL_BG_BY_THEME = {
|
|
4385
4544
|
minimal: "bg-gradient-to-br from-slate-50 via-zinc-50 to-slate-100",
|
|
4386
4545
|
night: "bg-zinc-950 text-zinc-100",
|
|
@@ -4412,7 +4571,7 @@ function mobileNavLinkStateClasses(theme, active) {
|
|
|
4412
4571
|
}
|
|
4413
4572
|
return active ? "bg-black/5 text-zinc-900" : "text-zinc-600 hover:bg-black/5 hover:text-zinc-900";
|
|
4414
4573
|
}
|
|
4415
|
-
|
|
4574
|
+
var DashboardShell = forwardRef13(function DashboardShell2({
|
|
4416
4575
|
children,
|
|
4417
4576
|
navItems,
|
|
4418
4577
|
adminNavItems,
|
|
@@ -4421,19 +4580,20 @@ function DashboardShell({
|
|
|
4421
4580
|
userRole,
|
|
4422
4581
|
onLogout,
|
|
4423
4582
|
logo,
|
|
4424
|
-
className
|
|
4425
|
-
|
|
4426
|
-
|
|
4583
|
+
className,
|
|
4584
|
+
style
|
|
4585
|
+
}, ref) {
|
|
4586
|
+
const [mobileOpen, setMobileOpen] = useState5(false);
|
|
4427
4587
|
const isAdmin = userRole === "ADMIN";
|
|
4428
4588
|
const { theme } = useTheme();
|
|
4429
4589
|
const shellBg = SHELL_BG_BY_THEME[theme];
|
|
4430
4590
|
const isDarkHeader = darkHeaderThemes.includes(theme);
|
|
4431
4591
|
const isActive = (href) => currentPath ? currentPath === href || currentPath.startsWith(href) : false;
|
|
4432
|
-
return /* @__PURE__ */
|
|
4433
|
-
/* @__PURE__ */
|
|
4434
|
-
/* @__PURE__ */
|
|
4435
|
-
/* @__PURE__ */
|
|
4436
|
-
/* @__PURE__ */
|
|
4592
|
+
return /* @__PURE__ */ jsxs10("div", { ref, className: cn("min-h-screen", shellBg, className), style, children: [
|
|
4593
|
+
/* @__PURE__ */ jsxs10("header", { className: cn("sticky top-0 z-40", headerClasses(theme)), children: [
|
|
4594
|
+
/* @__PURE__ */ jsxs10("div", { className: "mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8", children: [
|
|
4595
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
|
|
4596
|
+
/* @__PURE__ */ jsx12(
|
|
4437
4597
|
"button",
|
|
4438
4598
|
{
|
|
4439
4599
|
type: "button",
|
|
@@ -4444,10 +4604,10 @@ function DashboardShell({
|
|
|
4444
4604
|
),
|
|
4445
4605
|
"aria-label": "Toggle navigation",
|
|
4446
4606
|
"aria-expanded": mobileOpen,
|
|
4447
|
-
children: mobileOpen ? /* @__PURE__ */
|
|
4607
|
+
children: mobileOpen ? /* @__PURE__ */ jsx12("span", { className: "text-lg leading-none", children: "\xD7" }) : /* @__PURE__ */ jsx12("span", { className: "text-xl leading-none", children: "\u2630" })
|
|
4448
4608
|
}
|
|
4449
4609
|
),
|
|
4450
|
-
/* @__PURE__ */
|
|
4610
|
+
/* @__PURE__ */ jsx12("div", { className: "flex items-center gap-2", children: logo ?? /* @__PURE__ */ jsx12(
|
|
4451
4611
|
"span",
|
|
4452
4612
|
{
|
|
4453
4613
|
className: cn(
|
|
@@ -4457,8 +4617,8 @@ function DashboardShell({
|
|
|
4457
4617
|
children: "Dashboard"
|
|
4458
4618
|
}
|
|
4459
4619
|
) }),
|
|
4460
|
-
/* @__PURE__ */
|
|
4461
|
-
navItems.map((item) => /* @__PURE__ */
|
|
4620
|
+
/* @__PURE__ */ jsxs10("nav", { className: "ml-6 hidden items-center gap-1 text-sm sm:flex", children: [
|
|
4621
|
+
navItems.map((item) => /* @__PURE__ */ jsx12(
|
|
4462
4622
|
"a",
|
|
4463
4623
|
{
|
|
4464
4624
|
href: item.href,
|
|
@@ -4467,8 +4627,8 @@ function DashboardShell({
|
|
|
4467
4627
|
},
|
|
4468
4628
|
item.href
|
|
4469
4629
|
)),
|
|
4470
|
-
isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */
|
|
4471
|
-
/* @__PURE__ */
|
|
4630
|
+
isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ jsxs10(Fragment, { children: [
|
|
4631
|
+
/* @__PURE__ */ jsx12(
|
|
4472
4632
|
"span",
|
|
4473
4633
|
{
|
|
4474
4634
|
className: cn(
|
|
@@ -4477,7 +4637,7 @@ function DashboardShell({
|
|
|
4477
4637
|
)
|
|
4478
4638
|
}
|
|
4479
4639
|
),
|
|
4480
|
-
adminNavItems.map((item) => /* @__PURE__ */
|
|
4640
|
+
adminNavItems.map((item) => /* @__PURE__ */ jsx12(
|
|
4481
4641
|
"a",
|
|
4482
4642
|
{
|
|
4483
4643
|
href: item.href,
|
|
@@ -4492,8 +4652,8 @@ function DashboardShell({
|
|
|
4492
4652
|
] })
|
|
4493
4653
|
] })
|
|
4494
4654
|
] }),
|
|
4495
|
-
/* @__PURE__ */
|
|
4496
|
-
userEmail && /* @__PURE__ */
|
|
4655
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-sm", children: [
|
|
4656
|
+
userEmail && /* @__PURE__ */ jsx12(
|
|
4497
4657
|
"span",
|
|
4498
4658
|
{
|
|
4499
4659
|
className: cn(
|
|
@@ -4503,7 +4663,7 @@ function DashboardShell({
|
|
|
4503
4663
|
children: userEmail
|
|
4504
4664
|
}
|
|
4505
4665
|
),
|
|
4506
|
-
onLogout && /* @__PURE__ */
|
|
4666
|
+
onLogout && /* @__PURE__ */ jsx12(
|
|
4507
4667
|
"button",
|
|
4508
4668
|
{
|
|
4509
4669
|
type: "button",
|
|
@@ -4517,8 +4677,8 @@ function DashboardShell({
|
|
|
4517
4677
|
)
|
|
4518
4678
|
] })
|
|
4519
4679
|
] }),
|
|
4520
|
-
mobileOpen && /* @__PURE__ */
|
|
4521
|
-
/* @__PURE__ */
|
|
4680
|
+
mobileOpen && /* @__PURE__ */ jsxs10("div", { className: mobilePanelClasses(theme), children: [
|
|
4681
|
+
/* @__PURE__ */ jsx12("div", { className: "space-y-1", children: navItems.map((item) => /* @__PURE__ */ jsx12(
|
|
4522
4682
|
"a",
|
|
4523
4683
|
{
|
|
4524
4684
|
href: item.href,
|
|
@@ -4530,8 +4690,8 @@ function DashboardShell({
|
|
|
4530
4690
|
},
|
|
4531
4691
|
item.href
|
|
4532
4692
|
)) }),
|
|
4533
|
-
isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */
|
|
4534
|
-
/* @__PURE__ */
|
|
4693
|
+
isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ jsxs10(Fragment, { children: [
|
|
4694
|
+
/* @__PURE__ */ jsx12(
|
|
4535
4695
|
"div",
|
|
4536
4696
|
{
|
|
4537
4697
|
className: cn(
|
|
@@ -4540,7 +4700,7 @@ function DashboardShell({
|
|
|
4540
4700
|
)
|
|
4541
4701
|
}
|
|
4542
4702
|
),
|
|
4543
|
-
/* @__PURE__ */
|
|
4703
|
+
/* @__PURE__ */ jsx12("div", { className: "space-y-1", children: adminNavItems.map((item) => /* @__PURE__ */ jsx12(
|
|
4544
4704
|
"a",
|
|
4545
4705
|
{
|
|
4546
4706
|
href: item.href,
|
|
@@ -4553,7 +4713,7 @@ function DashboardShell({
|
|
|
4553
4713
|
item.href
|
|
4554
4714
|
)) })
|
|
4555
4715
|
] }),
|
|
4556
|
-
userEmail && /* @__PURE__ */
|
|
4716
|
+
userEmail && /* @__PURE__ */ jsx12(
|
|
4557
4717
|
"div",
|
|
4558
4718
|
{
|
|
4559
4719
|
className: cn(
|
|
@@ -4563,7 +4723,7 @@ function DashboardShell({
|
|
|
4563
4723
|
children: userEmail
|
|
4564
4724
|
}
|
|
4565
4725
|
),
|
|
4566
|
-
onLogout && /* @__PURE__ */
|
|
4726
|
+
onLogout && /* @__PURE__ */ jsx12(
|
|
4567
4727
|
"button",
|
|
4568
4728
|
{
|
|
4569
4729
|
type: "button",
|
|
@@ -4577,157 +4737,51 @@ function DashboardShell({
|
|
|
4577
4737
|
)
|
|
4578
4738
|
] })
|
|
4579
4739
|
] }),
|
|
4580
|
-
/* @__PURE__ */
|
|
4740
|
+
/* @__PURE__ */ jsx12("main", { className: "mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8", children })
|
|
4581
4741
|
] });
|
|
4582
|
-
}
|
|
4742
|
+
});
|
|
4583
4743
|
|
|
4584
|
-
// components/
|
|
4585
|
-
import {
|
|
4586
|
-
import { jsx as
|
|
4587
|
-
function
|
|
4588
|
-
|
|
4589
|
-
|
|
4590
|
-
|
|
4591
|
-
placeholder = "Type a command...",
|
|
4592
|
-
theme: themeProp
|
|
4593
|
-
}) {
|
|
4594
|
-
const [query, setQuery] = useState5("");
|
|
4595
|
-
const [selected, setSelected] = useState5(0);
|
|
4596
|
-
const listRef = useRef2(null);
|
|
4597
|
-
const { theme: contextTheme } = useTheme();
|
|
4598
|
-
const theme = themeProp ?? contextTheme;
|
|
4599
|
-
const themeClass = getThemeClass(theme, "commandPalette", "default");
|
|
4600
|
-
const filtered = useMemo3(() => {
|
|
4601
|
-
if (!query.trim()) return commands;
|
|
4602
|
-
const q = query.toLowerCase();
|
|
4603
|
-
return commands.filter((c) => c.label.toLowerCase().includes(q));
|
|
4604
|
-
}, [commands, query]);
|
|
4605
|
-
const safeSelected = Math.min(selected, Math.max(0, filtered.length - 1));
|
|
4606
|
-
useEffect3(() => {
|
|
4607
|
-
if (open) {
|
|
4608
|
-
setQuery("");
|
|
4609
|
-
setSelected(0);
|
|
4610
|
-
}
|
|
4611
|
-
}, [open]);
|
|
4612
|
-
useEffect3(() => {
|
|
4613
|
-
setSelected((s) => Math.min(s, Math.max(0, filtered.length - 1)));
|
|
4614
|
-
}, [filtered.length]);
|
|
4615
|
-
const runSelected = useCallback3(() => {
|
|
4616
|
-
const item = filtered[safeSelected];
|
|
4617
|
-
if (item) {
|
|
4618
|
-
item.onSelect();
|
|
4619
|
-
onClose();
|
|
4620
|
-
}
|
|
4621
|
-
}, [filtered, safeSelected, onClose]);
|
|
4622
|
-
useEffect3(() => {
|
|
4623
|
-
if (!open) return;
|
|
4624
|
-
const handler = (e) => {
|
|
4625
|
-
if (e.key === "Escape") {
|
|
4626
|
-
e.preventDefault();
|
|
4627
|
-
onClose();
|
|
4628
|
-
return;
|
|
4629
|
-
}
|
|
4630
|
-
if (e.key === "ArrowDown") {
|
|
4631
|
-
e.preventDefault();
|
|
4632
|
-
setSelected((s) => (s + 1) % Math.max(1, filtered.length));
|
|
4633
|
-
return;
|
|
4634
|
-
}
|
|
4635
|
-
if (e.key === "ArrowUp") {
|
|
4636
|
-
e.preventDefault();
|
|
4637
|
-
setSelected(
|
|
4638
|
-
(s) => (s - 1 + filtered.length) % Math.max(1, filtered.length)
|
|
4639
|
-
);
|
|
4640
|
-
return;
|
|
4641
|
-
}
|
|
4642
|
-
if (e.key === "Enter") {
|
|
4643
|
-
e.preventDefault();
|
|
4644
|
-
runSelected();
|
|
4645
|
-
}
|
|
4646
|
-
};
|
|
4647
|
-
document.addEventListener("keydown", handler, true);
|
|
4648
|
-
return () => document.removeEventListener("keydown", handler, true);
|
|
4649
|
-
}, [open, onClose, filtered.length, runSelected]);
|
|
4650
|
-
useEffect3(() => {
|
|
4651
|
-
const el = listRef.current;
|
|
4652
|
-
if (!el) return;
|
|
4653
|
-
const item = el.querySelector(`[data-index="${safeSelected}"]`);
|
|
4654
|
-
item?.scrollIntoView({ block: "nearest", behavior: "smooth" });
|
|
4655
|
-
}, [safeSelected]);
|
|
4656
|
-
if (!open) return null;
|
|
4657
|
-
return /* @__PURE__ */ jsxs10(
|
|
4744
|
+
// components/DataTable.tsx
|
|
4745
|
+
import { forwardRef as forwardRef14 } from "react";
|
|
4746
|
+
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
4747
|
+
function DataTableInner({ columns, data, getRowKey, className, style }, ref) {
|
|
4748
|
+
const { theme } = useTheme();
|
|
4749
|
+
const themeClass = getThemeClass(theme, "dataTable", "default");
|
|
4750
|
+
return /* @__PURE__ */ jsx13(
|
|
4658
4751
|
"div",
|
|
4659
4752
|
{
|
|
4660
|
-
|
|
4661
|
-
|
|
4662
|
-
|
|
4663
|
-
|
|
4664
|
-
|
|
4665
|
-
|
|
4666
|
-
|
|
4753
|
+
ref,
|
|
4754
|
+
className: cn(
|
|
4755
|
+
"overflow-x-auto rounded-lg -mx-1 px-1 sm:mx-0 sm:px-0",
|
|
4756
|
+
themeClass,
|
|
4757
|
+
className
|
|
4758
|
+
),
|
|
4759
|
+
style,
|
|
4760
|
+
children: /* @__PURE__ */ jsxs11("table", { className: "w-full min-w-[480px] text-left text-sm", children: [
|
|
4761
|
+
/* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsx13("tr", { className: "border-b border-inherit", children: columns.map((col) => /* @__PURE__ */ jsx13(
|
|
4762
|
+
"th",
|
|
4667
4763
|
{
|
|
4668
|
-
className: "
|
|
4669
|
-
|
|
4670
|
-
|
|
4671
|
-
|
|
4672
|
-
),
|
|
4673
|
-
/* @__PURE__ */
|
|
4674
|
-
"
|
|
4764
|
+
className: "px-4 py-3 font-medium",
|
|
4765
|
+
children: col.header
|
|
4766
|
+
},
|
|
4767
|
+
String(col.key)
|
|
4768
|
+
)) }) }),
|
|
4769
|
+
/* @__PURE__ */ jsx13("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsx13(
|
|
4770
|
+
"tr",
|
|
4675
4771
|
{
|
|
4676
|
-
className:
|
|
4677
|
-
children: [
|
|
4678
|
-
|
|
4679
|
-
|
|
4680
|
-
|
|
4681
|
-
|
|
4682
|
-
{
|
|
4683
|
-
type: "text",
|
|
4684
|
-
value: query,
|
|
4685
|
-
onChange: (e) => setQuery(e.target.value),
|
|
4686
|
-
placeholder,
|
|
4687
|
-
className: "flex-1 bg-transparent outline-none placeholder:opacity-60",
|
|
4688
|
-
autoFocus: true,
|
|
4689
|
-
"aria-autocomplete": "list",
|
|
4690
|
-
"aria-controls": "command-palette-list",
|
|
4691
|
-
"aria-expanded": "true"
|
|
4692
|
-
}
|
|
4693
|
-
),
|
|
4694
|
-
/* @__PURE__ */ jsx12("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: "ESC" })
|
|
4695
|
-
] }),
|
|
4696
|
-
/* @__PURE__ */ jsx12(
|
|
4697
|
-
"ul",
|
|
4698
|
-
{
|
|
4699
|
-
ref: listRef,
|
|
4700
|
-
id: "command-palette-list",
|
|
4701
|
-
role: "listbox",
|
|
4702
|
-
className: "max-h-72 overflow-auto py-2",
|
|
4703
|
-
children: filtered.length === 0 ? /* @__PURE__ */ jsx12("li", { className: "px-4 py-3 text-sm opacity-60", children: "No results." }) : filtered.map((cmd, i) => /* @__PURE__ */ jsx12("li", { role: "option", "data-index": i, children: /* @__PURE__ */ jsxs10(
|
|
4704
|
-
"button",
|
|
4705
|
-
{
|
|
4706
|
-
type: "button",
|
|
4707
|
-
onClick: () => {
|
|
4708
|
-
cmd.onSelect();
|
|
4709
|
-
onClose();
|
|
4710
|
-
},
|
|
4711
|
-
onMouseEnter: () => setSelected(i),
|
|
4712
|
-
className: `flex w-full items-center justify-between px-4 py-2 text-left text-sm ${i === safeSelected ? "bg-current/10" : ""}`,
|
|
4713
|
-
children: [
|
|
4714
|
-
cmd.label,
|
|
4715
|
-
cmd.shortcut ? /* @__PURE__ */ jsx12("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: cmd.shortcut }) : null
|
|
4716
|
-
]
|
|
4717
|
-
}
|
|
4718
|
-
) }, cmd.id))
|
|
4719
|
-
}
|
|
4720
|
-
)
|
|
4721
|
-
]
|
|
4722
|
-
}
|
|
4723
|
-
)
|
|
4724
|
-
]
|
|
4772
|
+
className: "border-b border-inherit last:border-0",
|
|
4773
|
+
children: columns.map((col) => /* @__PURE__ */ jsx13("td", { className: "px-4 py-3", children: col.render ? col.render(row) : String(row[col.key] ?? "") }, String(col.key)))
|
|
4774
|
+
},
|
|
4775
|
+
getRowKey ? getRowKey(row, i) : i
|
|
4776
|
+
)) })
|
|
4777
|
+
] })
|
|
4725
4778
|
}
|
|
4726
4779
|
);
|
|
4727
4780
|
}
|
|
4781
|
+
var DataTable = forwardRef14(DataTableInner);
|
|
4728
4782
|
|
|
4729
4783
|
// components/DocumentAccordion.tsx
|
|
4730
|
-
import { jsx as
|
|
4784
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
4731
4785
|
function DocumentAccordion({
|
|
4732
4786
|
title,
|
|
4733
4787
|
content,
|
|
@@ -4742,15 +4796,15 @@ function DocumentAccordion({
|
|
|
4742
4796
|
{
|
|
4743
4797
|
id: "document",
|
|
4744
4798
|
title,
|
|
4745
|
-
content: /* @__PURE__ */
|
|
4799
|
+
content: /* @__PURE__ */ jsx14(
|
|
4746
4800
|
"div",
|
|
4747
4801
|
{
|
|
4748
4802
|
className: cn(
|
|
4749
4803
|
"rounded-xl border p-0 shadow-sm backdrop-blur-md",
|
|
4750
4804
|
theme === "night" || theme === "cyberpunk" ? "border-white/10 bg-zinc-950/80" : "border-black/5 bg-white/60"
|
|
4751
4805
|
),
|
|
4752
|
-
children: pdfUrl ? /* @__PURE__ */
|
|
4753
|
-
/* @__PURE__ */
|
|
4806
|
+
children: pdfUrl ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-3", children: [
|
|
4807
|
+
/* @__PURE__ */ jsx14("div", { className: "flex justify-end px-4 pt-4", children: /* @__PURE__ */ jsxs12(
|
|
4754
4808
|
"a",
|
|
4755
4809
|
{
|
|
4756
4810
|
href: pdfUrl,
|
|
@@ -4761,19 +4815,19 @@ function DocumentAccordion({
|
|
|
4761
4815
|
theme === "night" || theme === "cyberpunk" ? "border-white/20 bg-zinc-900/80 text-sky-300 hover:bg-zinc-800/80" : "border-black/5 bg-white/70 text-blue-700 hover:bg-white"
|
|
4762
4816
|
),
|
|
4763
4817
|
children: [
|
|
4764
|
-
/* @__PURE__ */
|
|
4765
|
-
/* @__PURE__ */
|
|
4818
|
+
/* @__PURE__ */ jsx14("span", { children: "Open PDF" }),
|
|
4819
|
+
/* @__PURE__ */ jsx14("span", { "aria-hidden": true, children: "\u2197" })
|
|
4766
4820
|
]
|
|
4767
4821
|
}
|
|
4768
4822
|
) }),
|
|
4769
|
-
/* @__PURE__ */
|
|
4823
|
+
/* @__PURE__ */ jsx14(
|
|
4770
4824
|
"div",
|
|
4771
4825
|
{
|
|
4772
4826
|
className: cn(
|
|
4773
4827
|
"h-[60vh] w-full border-t",
|
|
4774
4828
|
theme === "night" || theme === "cyberpunk" ? "border-white/10" : "border-black/5"
|
|
4775
4829
|
),
|
|
4776
|
-
children: /* @__PURE__ */
|
|
4830
|
+
children: /* @__PURE__ */ jsx14(
|
|
4777
4831
|
"iframe",
|
|
4778
4832
|
{
|
|
4779
4833
|
src: `https://docs.google.com/viewer?url=${encodeURIComponent(
|
|
@@ -4785,7 +4839,7 @@ function DocumentAccordion({
|
|
|
4785
4839
|
)
|
|
4786
4840
|
}
|
|
4787
4841
|
)
|
|
4788
|
-
] }) : content ? /* @__PURE__ */
|
|
4842
|
+
] }) : content ? /* @__PURE__ */ jsx14(
|
|
4789
4843
|
"div",
|
|
4790
4844
|
{
|
|
4791
4845
|
className: cn(
|
|
@@ -4799,7 +4853,7 @@ function DocumentAccordion({
|
|
|
4799
4853
|
)
|
|
4800
4854
|
}
|
|
4801
4855
|
];
|
|
4802
|
-
return /* @__PURE__ */
|
|
4856
|
+
return /* @__PURE__ */ jsx14(
|
|
4803
4857
|
Accordion,
|
|
4804
4858
|
{
|
|
4805
4859
|
items,
|
|
@@ -4811,48 +4865,6 @@ function DocumentAccordion({
|
|
|
4811
4865
|
);
|
|
4812
4866
|
}
|
|
4813
4867
|
|
|
4814
|
-
// components/DataTable.tsx
|
|
4815
|
-
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
4816
|
-
function DataTable({
|
|
4817
|
-
columns,
|
|
4818
|
-
data,
|
|
4819
|
-
getRowKey,
|
|
4820
|
-
className,
|
|
4821
|
-
style
|
|
4822
|
-
}) {
|
|
4823
|
-
const { theme } = useTheme();
|
|
4824
|
-
const themeClass = getThemeClass(theme, "dataTable", "default");
|
|
4825
|
-
return /* @__PURE__ */ jsx14(
|
|
4826
|
-
"div",
|
|
4827
|
-
{
|
|
4828
|
-
className: cn(
|
|
4829
|
-
"overflow-x-auto rounded-lg -mx-1 px-1 sm:mx-0 sm:px-0",
|
|
4830
|
-
themeClass,
|
|
4831
|
-
className
|
|
4832
|
-
),
|
|
4833
|
-
style,
|
|
4834
|
-
children: /* @__PURE__ */ jsxs12("table", { className: "w-full min-w-[480px] text-left text-sm", children: [
|
|
4835
|
-
/* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { className: "border-b border-inherit", children: columns.map((col) => /* @__PURE__ */ jsx14(
|
|
4836
|
-
"th",
|
|
4837
|
-
{
|
|
4838
|
-
className: "px-4 py-3 font-medium",
|
|
4839
|
-
children: col.header
|
|
4840
|
-
},
|
|
4841
|
-
String(col.key)
|
|
4842
|
-
)) }) }),
|
|
4843
|
-
/* @__PURE__ */ jsx14("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsx14(
|
|
4844
|
-
"tr",
|
|
4845
|
-
{
|
|
4846
|
-
className: "border-b border-inherit last:border-0",
|
|
4847
|
-
children: columns.map((col) => /* @__PURE__ */ jsx14("td", { className: "px-4 py-3", children: col.render ? col.render(row) : String(row[col.key] ?? "") }, String(col.key)))
|
|
4848
|
-
},
|
|
4849
|
-
getRowKey ? getRowKey(row, i) : i
|
|
4850
|
-
)) })
|
|
4851
|
-
] })
|
|
4852
|
-
}
|
|
4853
|
-
);
|
|
4854
|
-
}
|
|
4855
|
-
|
|
4856
4868
|
// src/hooks/useKeyboardNavigation.ts
|
|
4857
4869
|
import { useCallback as useCallback4, useEffect as useEffect4 } from "react";
|
|
4858
4870
|
function useKeyboardNavigation(options) {
|
|
@@ -4931,6 +4943,7 @@ function useClickOutside(ref, handler, options) {
|
|
|
4931
4943
|
|
|
4932
4944
|
// components/Dropdown.tsx
|
|
4933
4945
|
import {
|
|
4946
|
+
forwardRef as forwardRef15,
|
|
4934
4947
|
useCallback as useCallback6,
|
|
4935
4948
|
useEffect as useEffect6,
|
|
4936
4949
|
useLayoutEffect,
|
|
@@ -4943,7 +4956,7 @@ function dropdownItemHighlightClass(theme) {
|
|
|
4943
4956
|
const darkThemes = ["night", "cyberpunk"];
|
|
4944
4957
|
return darkThemes.includes(theme) ? "hover:bg-white/10 focus:bg-white/10" : "hover:bg-black/5 focus:bg-black/5";
|
|
4945
4958
|
}
|
|
4946
|
-
|
|
4959
|
+
var Dropdown = forwardRef15(function Dropdown2({
|
|
4947
4960
|
trigger: triggerProp,
|
|
4948
4961
|
placeholder = "Select\u2026",
|
|
4949
4962
|
items,
|
|
@@ -4955,7 +4968,7 @@ function Dropdown({
|
|
|
4955
4968
|
style,
|
|
4956
4969
|
theme: themeProp,
|
|
4957
4970
|
classNames = {}
|
|
4958
|
-
}) {
|
|
4971
|
+
}, ref) {
|
|
4959
4972
|
const [open, setOpen] = useState6(false);
|
|
4960
4973
|
const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue ?? "");
|
|
4961
4974
|
const isControlled = controlledValue !== void 0;
|
|
@@ -4965,6 +4978,7 @@ function Dropdown({
|
|
|
4965
4978
|
const listRef = useRef3(null);
|
|
4966
4979
|
const containerRef = useRef3(null);
|
|
4967
4980
|
const triggerRef = useRef3(null);
|
|
4981
|
+
const mergedContainerRef = mergeRefs(ref, containerRef);
|
|
4968
4982
|
const { theme: contextTheme } = useTheme();
|
|
4969
4983
|
const theme = themeProp ?? contextTheme;
|
|
4970
4984
|
const themeClass = getThemeClass(theme, "card", "default");
|
|
@@ -5124,7 +5138,7 @@ function Dropdown({
|
|
|
5124
5138
|
return /* @__PURE__ */ jsxs13(
|
|
5125
5139
|
"div",
|
|
5126
5140
|
{
|
|
5127
|
-
ref:
|
|
5141
|
+
ref: mergedContainerRef,
|
|
5128
5142
|
className: cn("relative inline-block", className),
|
|
5129
5143
|
style,
|
|
5130
5144
|
onKeyDown: handleKeyDown,
|
|
@@ -5148,7 +5162,7 @@ function Dropdown({
|
|
|
5148
5162
|
]
|
|
5149
5163
|
}
|
|
5150
5164
|
);
|
|
5151
|
-
}
|
|
5165
|
+
});
|
|
5152
5166
|
|
|
5153
5167
|
// components/Flashcard.tsx
|
|
5154
5168
|
import { useState as useState7 } from "react";
|
|
@@ -5532,7 +5546,7 @@ function createDOMMotionComponentProxy(componentFactory) {
|
|
|
5532
5546
|
|
|
5533
5547
|
// node_modules/framer-motion/dist/es/motion/index.mjs
|
|
5534
5548
|
import { jsxs as jsxs14, jsx as jsx16 } from "react/jsx-runtime";
|
|
5535
|
-
import { forwardRef as
|
|
5549
|
+
import { forwardRef as forwardRef16, useContext as useContext5 } from "react";
|
|
5536
5550
|
|
|
5537
5551
|
// node_modules/framer-motion/dist/es/context/MotionContext/index.mjs
|
|
5538
5552
|
import { createContext as createContext6 } from "react";
|
|
@@ -5760,7 +5774,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
|
|
|
5760
5774
|
return jsxs14(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? jsx16(MeasureLayout2, { visualElement: context.visualElement, ...configAndProps }) : null, useRender(Component2, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] });
|
|
5761
5775
|
}
|
|
5762
5776
|
MotionComponent.displayName = `motion.${typeof Component2 === "string" ? Component2 : `create(${(_b = (_a = Component2.displayName) !== null && _a !== void 0 ? _a : Component2.name) !== null && _b !== void 0 ? _b : ""})`}`;
|
|
5763
|
-
const ForwardRefMotionComponent =
|
|
5777
|
+
const ForwardRefMotionComponent = forwardRef16(MotionComponent);
|
|
5764
5778
|
ForwardRefMotionComponent[motionComponentSymbol] = Component2;
|
|
5765
5779
|
return ForwardRefMotionComponent;
|
|
5766
5780
|
}
|
|
@@ -12845,6 +12859,7 @@ var createMotionComponent = /* @__PURE__ */ createMotionComponentFactory({
|
|
|
12845
12859
|
var motion = /* @__PURE__ */ createDOMMotionComponentProxy(createMotionComponent);
|
|
12846
12860
|
|
|
12847
12861
|
// components/Flashcard.tsx
|
|
12862
|
+
import { forwardRef as forwardRef17 } from "react";
|
|
12848
12863
|
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
12849
12864
|
var FRONT_BY_THEME = {
|
|
12850
12865
|
minimal: "border-black/5 bg-gradient-to-br from-white to-zinc-50 text-zinc-900 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.1)]",
|
|
@@ -12866,17 +12881,13 @@ var BACK_BY_THEME = {
|
|
|
12866
12881
|
retro: "from-zinc-800 to-black text-lime-400 font-mono",
|
|
12867
12882
|
motion: "from-indigo-600 via-purple-600 to-indigo-700 text-white transition-all duration-500"
|
|
12868
12883
|
};
|
|
12869
|
-
|
|
12870
|
-
question,
|
|
12871
|
-
answer,
|
|
12872
|
-
className,
|
|
12873
|
-
...props
|
|
12874
|
-
}) {
|
|
12884
|
+
var Flashcard = forwardRef17(function Flashcard2({ question, answer, className, ...props }, ref) {
|
|
12875
12885
|
const [isFlipped, setIsFlipped] = useState7(false);
|
|
12876
12886
|
const { theme } = useTheme();
|
|
12877
12887
|
return /* @__PURE__ */ jsx18(
|
|
12878
12888
|
"div",
|
|
12879
12889
|
{
|
|
12890
|
+
ref,
|
|
12880
12891
|
className: cn(
|
|
12881
12892
|
"group relative h-64 w-full cursor-pointer [perspective:1000px]",
|
|
12882
12893
|
className
|
|
@@ -12932,9 +12943,10 @@ function Flashcard({
|
|
|
12932
12943
|
)
|
|
12933
12944
|
}
|
|
12934
12945
|
);
|
|
12935
|
-
}
|
|
12946
|
+
});
|
|
12936
12947
|
|
|
12937
12948
|
// components/GraphicCard.tsx
|
|
12949
|
+
import { forwardRef as forwardRef18 } from "react";
|
|
12938
12950
|
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
12939
12951
|
var SURFACE_BY_THEME = {
|
|
12940
12952
|
minimal: "bg-gradient-to-br from-white to-zinc-50 border-black/5 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.08)] hover:shadow-[0_10px_40px_-6px_rgba(0,0,0,0.18)]",
|
|
@@ -12946,11 +12958,7 @@ var SURFACE_BY_THEME = {
|
|
|
12946
12958
|
retro: "bg-white border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)]",
|
|
12947
12959
|
motion: "bg-white border-2 border-indigo-200 shadow-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:border-indigo-300 hover:-translate-y-0.5"
|
|
12948
12960
|
};
|
|
12949
|
-
|
|
12950
|
-
children,
|
|
12951
|
-
className,
|
|
12952
|
-
...props
|
|
12953
|
-
}) {
|
|
12961
|
+
var GraphicCard = forwardRef18(function GraphicCard2({ children, className, ...props }, ref) {
|
|
12954
12962
|
const { theme } = useTheme();
|
|
12955
12963
|
const surface = SURFACE_BY_THEME[theme];
|
|
12956
12964
|
const isDark = theme === "night" || theme === "cyberpunk";
|
|
@@ -12959,6 +12967,7 @@ function GraphicCard({
|
|
|
12959
12967
|
return /* @__PURE__ */ jsxs16(
|
|
12960
12968
|
"div",
|
|
12961
12969
|
{
|
|
12970
|
+
ref,
|
|
12962
12971
|
className: cn(
|
|
12963
12972
|
"group relative w-full overflow-hidden rounded-2xl p-6 transition-all duration-300",
|
|
12964
12973
|
surface,
|
|
@@ -12972,10 +12981,10 @@ function GraphicCard({
|
|
|
12972
12981
|
]
|
|
12973
12982
|
}
|
|
12974
12983
|
);
|
|
12975
|
-
}
|
|
12984
|
+
});
|
|
12976
12985
|
|
|
12977
12986
|
// components/Input.tsx
|
|
12978
|
-
import { forwardRef as
|
|
12987
|
+
import { forwardRef as forwardRef19 } from "react";
|
|
12979
12988
|
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
12980
12989
|
var inputVariants = cva(
|
|
12981
12990
|
"w-full rounded-lg px-3 py-2 text-sm outline-none transition-shadow",
|
|
@@ -12992,7 +13001,7 @@ var inputVariants = cva(
|
|
|
12992
13001
|
}
|
|
12993
13002
|
}
|
|
12994
13003
|
);
|
|
12995
|
-
var Input =
|
|
13004
|
+
var Input = forwardRef19(function Input2({
|
|
12996
13005
|
label,
|
|
12997
13006
|
error,
|
|
12998
13007
|
helperText,
|
|
@@ -13000,6 +13009,7 @@ var Input = forwardRef9(function Input2({
|
|
|
13000
13009
|
suffix,
|
|
13001
13010
|
size = "md",
|
|
13002
13011
|
className,
|
|
13012
|
+
style,
|
|
13003
13013
|
id: idProp,
|
|
13004
13014
|
disabled,
|
|
13005
13015
|
theme: themeProp,
|
|
@@ -13028,13 +13038,12 @@ var Input = forwardRef9(function Input2({
|
|
|
13028
13038
|
themeClass,
|
|
13029
13039
|
error && "border-red-500 focus:ring-red-500 focus:border-red-500",
|
|
13030
13040
|
hasAddon && "rounded-none first:rounded-l-lg last:rounded-r-lg",
|
|
13031
|
-
!hasAddon && "rounded-lg"
|
|
13032
|
-
className
|
|
13041
|
+
!hasAddon && "rounded-lg"
|
|
13033
13042
|
),
|
|
13034
13043
|
...props
|
|
13035
13044
|
}
|
|
13036
13045
|
);
|
|
13037
|
-
return /* @__PURE__ */ jsxs17("div", { className: "w-full", children: [
|
|
13046
|
+
return /* @__PURE__ */ jsxs17("div", { className: cn("w-full", className), style, children: [
|
|
13038
13047
|
label && /* @__PURE__ */ jsx20(
|
|
13039
13048
|
"label",
|
|
13040
13049
|
{
|
|
@@ -13123,7 +13132,7 @@ function useFocusTrap(active, options) {
|
|
|
13123
13132
|
}
|
|
13124
13133
|
|
|
13125
13134
|
// components/Modal.tsx
|
|
13126
|
-
import { useCallback as useCallback10, useEffect as useEffect11 } from "react";
|
|
13135
|
+
import { forwardRef as forwardRef20, useCallback as useCallback10, useEffect as useEffect11 } from "react";
|
|
13127
13136
|
import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
13128
13137
|
var modalVariants = cva(
|
|
13129
13138
|
"relative z-10 max-h-[90vh] w-full max-w-[calc(100vw-2rem)] overflow-auto rounded-xl p-4 sm:p-6",
|
|
@@ -13140,7 +13149,7 @@ var modalVariants = cva(
|
|
|
13140
13149
|
}
|
|
13141
13150
|
}
|
|
13142
13151
|
);
|
|
13143
|
-
|
|
13152
|
+
var Modal = forwardRef20(function Modal2({
|
|
13144
13153
|
open,
|
|
13145
13154
|
onClose,
|
|
13146
13155
|
title,
|
|
@@ -13149,11 +13158,12 @@ function Modal({
|
|
|
13149
13158
|
style,
|
|
13150
13159
|
children,
|
|
13151
13160
|
theme: themeProp
|
|
13152
|
-
}) {
|
|
13161
|
+
}, ref) {
|
|
13153
13162
|
const { theme: contextTheme } = useTheme();
|
|
13154
13163
|
const theme = themeProp ?? contextTheme;
|
|
13155
13164
|
const themeClass = getThemeClass(theme, "modal", "default");
|
|
13156
13165
|
const focusTrapRef = useFocusTrap(open, { returnFocus: true });
|
|
13166
|
+
const mergedRef = mergeRefs(ref, focusTrapRef);
|
|
13157
13167
|
const handleEscape = useCallback10(
|
|
13158
13168
|
(e) => {
|
|
13159
13169
|
if (e.key === "Escape") onClose();
|
|
@@ -13190,7 +13200,7 @@ function Modal({
|
|
|
13190
13200
|
/* @__PURE__ */ jsxs18(
|
|
13191
13201
|
"div",
|
|
13192
13202
|
{
|
|
13193
|
-
ref:
|
|
13203
|
+
ref: mergedRef,
|
|
13194
13204
|
className: cn(modalVariants({ size }), themeClass, className),
|
|
13195
13205
|
style,
|
|
13196
13206
|
children: [
|
|
@@ -13223,21 +13233,15 @@ function Modal({
|
|
|
13223
13233
|
]
|
|
13224
13234
|
}
|
|
13225
13235
|
);
|
|
13226
|
-
}
|
|
13236
|
+
});
|
|
13227
13237
|
|
|
13228
13238
|
// components/Navbar.tsx
|
|
13229
|
-
import { useCallback as useCallback11, useRef as useRef7, useState as useState8 } from "react";
|
|
13239
|
+
import { forwardRef as forwardRef21, useCallback as useCallback11, useRef as useRef7, useState as useState8 } from "react";
|
|
13230
13240
|
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
13231
|
-
|
|
13232
|
-
children,
|
|
13233
|
-
logo,
|
|
13234
|
-
items,
|
|
13235
|
-
right,
|
|
13236
|
-
className,
|
|
13237
|
-
style
|
|
13238
|
-
}) {
|
|
13241
|
+
var Navbar = forwardRef21(function Navbar2({ children, logo, items, right, className, style }, ref) {
|
|
13239
13242
|
const [mobileOpen, setMobileOpen] = useState8(false);
|
|
13240
13243
|
const navRef = useRef7(null);
|
|
13244
|
+
const mergedNavRef = mergeRefs(ref, navRef);
|
|
13241
13245
|
const { theme } = useTheme();
|
|
13242
13246
|
const themeClass = getThemeClass(theme, "navbar", "default");
|
|
13243
13247
|
const mobilePanelBgOverride = theme === "glass" ? "bg-white/95 backdrop-blur-xl" : theme === "clay" ? "bg-white/95" : null;
|
|
@@ -13251,7 +13255,7 @@ function Navbar({
|
|
|
13251
13255
|
return /* @__PURE__ */ jsxs19(
|
|
13252
13256
|
"nav",
|
|
13253
13257
|
{
|
|
13254
|
-
ref:
|
|
13258
|
+
ref: mergedNavRef,
|
|
13255
13259
|
className: cn(
|
|
13256
13260
|
"relative sticky top-0 z-50 flex h-14 w-full flex-col px-3 sm:px-4",
|
|
13257
13261
|
themeClass,
|
|
@@ -13317,6 +13321,7 @@ function Navbar({
|
|
|
13317
13321
|
return /* @__PURE__ */ jsx22(
|
|
13318
13322
|
"nav",
|
|
13319
13323
|
{
|
|
13324
|
+
ref: mergedNavRef,
|
|
13320
13325
|
className: cn(
|
|
13321
13326
|
"sticky top-0 z-50 flex h-14 w-full flex-wrap items-center gap-2 px-3 sm:px-4",
|
|
13322
13327
|
themeClass,
|
|
@@ -13326,21 +13331,18 @@ function Navbar({
|
|
|
13326
13331
|
children
|
|
13327
13332
|
}
|
|
13328
13333
|
);
|
|
13329
|
-
}
|
|
13334
|
+
});
|
|
13330
13335
|
|
|
13331
13336
|
// components/PricingCard.tsx
|
|
13337
|
+
import { forwardRef as forwardRef22 } from "react";
|
|
13332
13338
|
import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
13333
|
-
|
|
13334
|
-
tier,
|
|
13335
|
-
onSelect,
|
|
13336
|
-
className,
|
|
13337
|
-
style
|
|
13338
|
-
}) {
|
|
13339
|
+
var PricingCard = forwardRef22(function PricingCard2({ tier, onSelect, className, style }, ref) {
|
|
13339
13340
|
const { theme } = useTheme();
|
|
13340
13341
|
const themeClass = getThemeClass(theme, "pricingCard", "default");
|
|
13341
13342
|
return /* @__PURE__ */ jsxs20(
|
|
13342
13343
|
"div",
|
|
13343
13344
|
{
|
|
13345
|
+
ref,
|
|
13344
13346
|
className: cn(
|
|
13345
13347
|
"flex flex-col rounded-xl p-4 sm:p-6",
|
|
13346
13348
|
themeClass,
|
|
@@ -13368,36 +13370,47 @@ function PricingCard({
|
|
|
13368
13370
|
]
|
|
13369
13371
|
}
|
|
13370
13372
|
);
|
|
13371
|
-
}
|
|
13373
|
+
});
|
|
13372
13374
|
|
|
13373
13375
|
// components/ProgressBar.tsx
|
|
13376
|
+
import { forwardRef as forwardRef23 } from "react";
|
|
13374
13377
|
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
13375
|
-
|
|
13378
|
+
var ProgressBar = forwardRef23(function ProgressBar2({
|
|
13376
13379
|
value,
|
|
13377
13380
|
max = 100,
|
|
13378
13381
|
segmented = false,
|
|
13379
13382
|
className,
|
|
13380
13383
|
style,
|
|
13384
|
+
"aria-label": ariaLabel,
|
|
13381
13385
|
trackColor,
|
|
13382
13386
|
activeColor
|
|
13383
|
-
}) {
|
|
13387
|
+
}, ref) {
|
|
13384
13388
|
const { theme } = useTheme();
|
|
13385
13389
|
const themeClass = getThemeClass(theme, "progress", "default");
|
|
13386
13390
|
const pct = Math.min(100, Math.max(0, value / max * 100));
|
|
13387
13391
|
const trackStyle = trackColor ? { backgroundColor: trackColor } : void 0;
|
|
13388
13392
|
const fillStyle = activeColor ? { width: `${pct}%`, backgroundColor: activeColor } : { width: `${pct}%` };
|
|
13393
|
+
const progressRole = {
|
|
13394
|
+
role: "progressbar",
|
|
13395
|
+
"aria-valuenow": value,
|
|
13396
|
+
"aria-valuemin": 0,
|
|
13397
|
+
"aria-valuemax": max,
|
|
13398
|
+
...ariaLabel && { "aria-label": ariaLabel }
|
|
13399
|
+
};
|
|
13389
13400
|
if (segmented) {
|
|
13390
13401
|
const segments = 10;
|
|
13391
13402
|
const filled = Math.round(pct / 100 * segments);
|
|
13392
13403
|
return /* @__PURE__ */ jsx24(
|
|
13393
13404
|
"div",
|
|
13394
13405
|
{
|
|
13406
|
+
ref,
|
|
13395
13407
|
className: cn(
|
|
13396
13408
|
"flex h-3 w-full gap-0.5 overflow-hidden rounded-full",
|
|
13397
13409
|
themeClass,
|
|
13398
13410
|
className
|
|
13399
13411
|
),
|
|
13400
13412
|
style: { ...style, ...trackStyle },
|
|
13413
|
+
...progressRole,
|
|
13401
13414
|
children: Array.from({ length: segments }).map((_, i) => /* @__PURE__ */ jsx24(
|
|
13402
13415
|
"div",
|
|
13403
13416
|
{
|
|
@@ -13415,12 +13428,14 @@ function ProgressBar({
|
|
|
13415
13428
|
return /* @__PURE__ */ jsx24(
|
|
13416
13429
|
"div",
|
|
13417
13430
|
{
|
|
13431
|
+
ref,
|
|
13418
13432
|
className: cn(
|
|
13419
13433
|
"relative h-3 w-full overflow-hidden rounded-full",
|
|
13420
13434
|
themeClass,
|
|
13421
13435
|
className
|
|
13422
13436
|
),
|
|
13423
13437
|
style: { ...style, ...trackStyle },
|
|
13438
|
+
...progressRole,
|
|
13424
13439
|
children: /* @__PURE__ */ jsx24(
|
|
13425
13440
|
"span",
|
|
13426
13441
|
{
|
|
@@ -13430,33 +13445,25 @@ function ProgressBar({
|
|
|
13430
13445
|
)
|
|
13431
13446
|
}
|
|
13432
13447
|
);
|
|
13433
|
-
}
|
|
13448
|
+
});
|
|
13434
13449
|
|
|
13435
13450
|
// components/SectionHeader.tsx
|
|
13451
|
+
import { forwardRef as forwardRef24 } from "react";
|
|
13436
13452
|
import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
13437
|
-
|
|
13438
|
-
title,
|
|
13439
|
-
subtitle,
|
|
13440
|
-
className,
|
|
13441
|
-
style
|
|
13442
|
-
}) {
|
|
13453
|
+
var SectionHeader = forwardRef24(function SectionHeader2({ title, subtitle, className, style }, ref) {
|
|
13443
13454
|
const { theme } = useTheme();
|
|
13444
13455
|
const themeClass = getThemeClass(theme, "sectionHeader", "default");
|
|
13445
|
-
return /* @__PURE__ */ jsxs21("header", { className: cn("pb-4", themeClass, className), style, children: [
|
|
13456
|
+
return /* @__PURE__ */ jsxs21("header", { ref, className: cn("pb-4", themeClass, className), style, children: [
|
|
13446
13457
|
/* @__PURE__ */ jsx25("h2", { className: "text-lg font-semibold sm:text-xl", children: title }),
|
|
13447
13458
|
subtitle ? /* @__PURE__ */ jsx25("p", { className: "mt-1 text-sm opacity-80", children: subtitle }) : null,
|
|
13448
13459
|
/* @__PURE__ */ jsx25("div", { className: "mt-3 border-b border-inherit" })
|
|
13449
13460
|
] });
|
|
13450
|
-
}
|
|
13461
|
+
});
|
|
13451
13462
|
|
|
13452
13463
|
// components/Sidebar.tsx
|
|
13453
|
-
import { useCallback as useCallback12, useState as useState9 } from "react";
|
|
13464
|
+
import { forwardRef as forwardRef25, useCallback as useCallback12, useState as useState9 } from "react";
|
|
13454
13465
|
import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
13455
|
-
|
|
13456
|
-
children,
|
|
13457
|
-
className,
|
|
13458
|
-
style
|
|
13459
|
-
}) {
|
|
13466
|
+
var Sidebar = forwardRef25(function Sidebar2({ children, className, style }, ref) {
|
|
13460
13467
|
const [collapsed, setCollapsed] = useState9(false);
|
|
13461
13468
|
const { theme } = useTheme();
|
|
13462
13469
|
const themeClass = getThemeClass(theme, "sidebar", "default");
|
|
@@ -13464,6 +13471,7 @@ function Sidebar({
|
|
|
13464
13471
|
return /* @__PURE__ */ jsxs22(
|
|
13465
13472
|
"aside",
|
|
13466
13473
|
{
|
|
13474
|
+
ref,
|
|
13467
13475
|
className: cn(
|
|
13468
13476
|
"flex h-full flex-col transition-[width] duration-200",
|
|
13469
13477
|
collapsed ? "w-12 sm:w-14" : "w-48 max-w-[85vw] sm:w-56 sm:max-w-none",
|
|
@@ -13486,10 +13494,10 @@ function Sidebar({
|
|
|
13486
13494
|
]
|
|
13487
13495
|
}
|
|
13488
13496
|
);
|
|
13489
|
-
}
|
|
13497
|
+
});
|
|
13490
13498
|
|
|
13491
13499
|
// components/Skeleton.tsx
|
|
13492
|
-
import { forwardRef as
|
|
13500
|
+
import { forwardRef as forwardRef26 } from "react";
|
|
13493
13501
|
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
13494
13502
|
var skeletonVariants = cva("", {
|
|
13495
13503
|
variants: {
|
|
@@ -13503,7 +13511,7 @@ var skeletonVariants = cva("", {
|
|
|
13503
13511
|
variant: "rectangle"
|
|
13504
13512
|
}
|
|
13505
13513
|
});
|
|
13506
|
-
var Skeleton =
|
|
13514
|
+
var Skeleton = forwardRef26(
|
|
13507
13515
|
function Skeleton2({ variant = "rectangle", className, theme: themeProp, style, ...props }, ref) {
|
|
13508
13516
|
const { theme: contextTheme } = useTheme();
|
|
13509
13517
|
const theme = themeProp ?? contextTheme;
|
|
@@ -13530,7 +13538,7 @@ var Skeleton = forwardRef10(
|
|
|
13530
13538
|
|
|
13531
13539
|
// components/Slider.tsx
|
|
13532
13540
|
import {
|
|
13533
|
-
forwardRef as
|
|
13541
|
+
forwardRef as forwardRef27,
|
|
13534
13542
|
useCallback as useCallback13,
|
|
13535
13543
|
useState as useState10
|
|
13536
13544
|
} from "react";
|
|
@@ -13554,7 +13562,7 @@ var trackVariants = cva(
|
|
|
13554
13562
|
"relative h-3 w-full rounded-full overflow-visible",
|
|
13555
13563
|
{ variants: {}, defaultVariants: {} }
|
|
13556
13564
|
);
|
|
13557
|
-
var Slider =
|
|
13565
|
+
var Slider = forwardRef27(function Slider2({
|
|
13558
13566
|
min = 0,
|
|
13559
13567
|
max = 100,
|
|
13560
13568
|
step = 1,
|
|
@@ -13563,6 +13571,7 @@ var Slider = forwardRef11(function Slider2({
|
|
|
13563
13571
|
onValueChange,
|
|
13564
13572
|
size = "md",
|
|
13565
13573
|
className,
|
|
13574
|
+
style,
|
|
13566
13575
|
theme: themeProp,
|
|
13567
13576
|
...props
|
|
13568
13577
|
}, ref) {
|
|
@@ -13581,7 +13590,7 @@ var Slider = forwardRef11(function Slider2({
|
|
|
13581
13590
|
},
|
|
13582
13591
|
[isControlled, onValueChange]
|
|
13583
13592
|
);
|
|
13584
|
-
return /* @__PURE__ */ jsxs23("div", { className: cn(sliderVariants({ size }), className), children: [
|
|
13593
|
+
return /* @__PURE__ */ jsxs23("div", { className: cn(sliderVariants({ size }), className), style, children: [
|
|
13585
13594
|
/* @__PURE__ */ jsxs23("div", { className: cn(trackVariants(), themeClass), children: [
|
|
13586
13595
|
/* @__PURE__ */ jsx28(
|
|
13587
13596
|
"span",
|
|
@@ -13619,20 +13628,15 @@ var Slider = forwardRef11(function Slider2({
|
|
|
13619
13628
|
});
|
|
13620
13629
|
|
|
13621
13630
|
// components/StatsCard.tsx
|
|
13631
|
+
import { forwardRef as forwardRef28 } from "react";
|
|
13622
13632
|
import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
13623
|
-
|
|
13624
|
-
label,
|
|
13625
|
-
value,
|
|
13626
|
-
trend,
|
|
13627
|
-
className,
|
|
13628
|
-
style
|
|
13629
|
-
}) {
|
|
13633
|
+
var StatsCard = forwardRef28(function StatsCard2({ label, value, trend, className, style }, ref) {
|
|
13630
13634
|
const { theme } = useTheme();
|
|
13631
13635
|
const themeClass = getThemeClass(theme, "statsCard", "default");
|
|
13632
13636
|
const isDark = theme === "night" || theme === "cyberpunk";
|
|
13633
13637
|
const trendUpClass = trend?.direction === "up" ? isDark ? "text-emerald-400" : "text-emerald-600" : null;
|
|
13634
13638
|
const trendDownClass = trend?.direction === "down" ? isDark ? "text-rose-400" : "text-rose-600" : null;
|
|
13635
|
-
return /* @__PURE__ */ jsxs24("div", { className: cn("rounded-xl p-6", themeClass, className), style, children: [
|
|
13639
|
+
return /* @__PURE__ */ jsxs24("div", { ref, className: cn("rounded-xl p-6", themeClass, className), style, children: [
|
|
13636
13640
|
/* @__PURE__ */ jsx29("p", { className: "text-sm font-medium opacity-80", children: label }),
|
|
13637
13641
|
/* @__PURE__ */ jsx29("p", { className: "mt-2 text-2xl font-bold tracking-tight", children: value }),
|
|
13638
13642
|
trend ? /* @__PURE__ */ jsxs24(
|
|
@@ -13649,10 +13653,11 @@ function StatsCard({
|
|
|
13649
13653
|
}
|
|
13650
13654
|
) : null
|
|
13651
13655
|
] });
|
|
13652
|
-
}
|
|
13656
|
+
});
|
|
13653
13657
|
|
|
13654
13658
|
// components/Tabs.tsx
|
|
13655
13659
|
import {
|
|
13660
|
+
forwardRef as forwardRef29,
|
|
13656
13661
|
useCallback as useCallback14,
|
|
13657
13662
|
useEffect as useEffect12,
|
|
13658
13663
|
useRef as useRef8,
|
|
@@ -13680,7 +13685,7 @@ var tabTriggerVariants = cva(
|
|
|
13680
13685
|
}
|
|
13681
13686
|
}
|
|
13682
13687
|
);
|
|
13683
|
-
|
|
13688
|
+
var Tabs = forwardRef29(function Tabs2({
|
|
13684
13689
|
items,
|
|
13685
13690
|
defaultValue,
|
|
13686
13691
|
value: controlledValue,
|
|
@@ -13688,7 +13693,7 @@ function Tabs({
|
|
|
13688
13693
|
className,
|
|
13689
13694
|
style,
|
|
13690
13695
|
theme: themeProp
|
|
13691
|
-
}) {
|
|
13696
|
+
}, ref) {
|
|
13692
13697
|
const [uncontrolled, setUncontrolled] = useState11(
|
|
13693
13698
|
() => defaultValue ?? items[0]?.value ?? ""
|
|
13694
13699
|
);
|
|
@@ -13730,7 +13735,7 @@ function Tabs({
|
|
|
13730
13735
|
);
|
|
13731
13736
|
const activeItem = items[safeIndex];
|
|
13732
13737
|
const content = activeItem?.content ?? null;
|
|
13733
|
-
return /* @__PURE__ */ jsxs25("div", { className: cn("w-full min-w-0", className), style, children: [
|
|
13738
|
+
return /* @__PURE__ */ jsxs25("div", { ref, className: cn("w-full min-w-0", className), style, children: [
|
|
13734
13739
|
/* @__PURE__ */ jsx30(
|
|
13735
13740
|
"div",
|
|
13736
13741
|
{
|
|
@@ -13774,22 +13779,19 @@ function Tabs({
|
|
|
13774
13779
|
}
|
|
13775
13780
|
)
|
|
13776
13781
|
] });
|
|
13777
|
-
}
|
|
13782
|
+
});
|
|
13778
13783
|
|
|
13779
13784
|
// components/Terminal.tsx
|
|
13785
|
+
import { forwardRef as forwardRef30 } from "react";
|
|
13780
13786
|
import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
13781
|
-
|
|
13782
|
-
title = "terminal",
|
|
13783
|
-
children,
|
|
13784
|
-
className,
|
|
13785
|
-
style
|
|
13786
|
-
}) {
|
|
13787
|
+
var Terminal = forwardRef30(function Terminal2({ title = "terminal", children, className, style }, ref) {
|
|
13787
13788
|
const { theme } = useTheme();
|
|
13788
13789
|
const themeClass = getThemeClass(theme, "terminal", "default");
|
|
13789
13790
|
const isCyberpunk = theme === "cyberpunk";
|
|
13790
13791
|
return /* @__PURE__ */ jsxs26(
|
|
13791
13792
|
"div",
|
|
13792
13793
|
{
|
|
13794
|
+
ref,
|
|
13793
13795
|
className: cn("overflow-hidden rounded-xl font-mono text-sm", themeClass, className),
|
|
13794
13796
|
style,
|
|
13795
13797
|
children: [
|
|
@@ -13815,22 +13817,21 @@ function Terminal({
|
|
|
13815
13817
|
]
|
|
13816
13818
|
}
|
|
13817
13819
|
);
|
|
13818
|
-
}
|
|
13820
|
+
});
|
|
13819
13821
|
|
|
13820
13822
|
// components/Timeline.tsx
|
|
13823
|
+
import { forwardRef as forwardRef31 } from "react";
|
|
13821
13824
|
import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
13822
|
-
|
|
13823
|
-
items,
|
|
13824
|
-
className,
|
|
13825
|
-
theme: themeProp
|
|
13826
|
-
}) {
|
|
13825
|
+
var Timeline = forwardRef31(function Timeline2({ items, className, style, theme: themeProp }, ref) {
|
|
13827
13826
|
const { theme: contextTheme } = useTheme();
|
|
13828
13827
|
const theme = themeProp ?? contextTheme;
|
|
13829
13828
|
const themeClass = getThemeClass(theme, "timeline", "default");
|
|
13830
13829
|
return /* @__PURE__ */ jsx32(
|
|
13831
13830
|
"div",
|
|
13832
13831
|
{
|
|
13832
|
+
ref,
|
|
13833
13833
|
className: cn("relative pl-4", themeClass, className),
|
|
13834
|
+
style,
|
|
13834
13835
|
role: "list",
|
|
13835
13836
|
"aria-label": "Timeline",
|
|
13836
13837
|
children: items.map((item, i) => /* @__PURE__ */ jsxs27(
|
|
@@ -13857,21 +13858,25 @@ function Timeline({
|
|
|
13857
13858
|
))
|
|
13858
13859
|
}
|
|
13859
13860
|
);
|
|
13860
|
-
}
|
|
13861
|
+
});
|
|
13861
13862
|
|
|
13862
13863
|
// components/Toast.tsx
|
|
13864
|
+
import { forwardRef as forwardRef32, useEffect as useEffect13 } from "react";
|
|
13863
13865
|
import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
13864
|
-
|
|
13865
|
-
message,
|
|
13866
|
-
onDismiss,
|
|
13867
|
-
className,
|
|
13868
|
-
style
|
|
13869
|
-
}) {
|
|
13866
|
+
var Toast = forwardRef32(function Toast2({ message, onDismiss, className, style }, ref) {
|
|
13870
13867
|
const { theme } = useTheme();
|
|
13871
13868
|
const themeClass = getThemeClass(theme, "toast", "default");
|
|
13869
|
+
useEffect13(() => {
|
|
13870
|
+
const handler = (e) => {
|
|
13871
|
+
if (e.key === "Escape") onDismiss();
|
|
13872
|
+
};
|
|
13873
|
+
document.addEventListener("keydown", handler);
|
|
13874
|
+
return () => document.removeEventListener("keydown", handler);
|
|
13875
|
+
}, [onDismiss]);
|
|
13872
13876
|
return /* @__PURE__ */ jsxs28(
|
|
13873
13877
|
"div",
|
|
13874
13878
|
{
|
|
13879
|
+
ref,
|
|
13875
13880
|
role: "alert",
|
|
13876
13881
|
className: cn(
|
|
13877
13882
|
"flex items-center justify-between gap-4 rounded-lg px-4 py-3 shadow-lg",
|
|
@@ -13894,11 +13899,11 @@ function Toast({
|
|
|
13894
13899
|
]
|
|
13895
13900
|
}
|
|
13896
13901
|
);
|
|
13897
|
-
}
|
|
13902
|
+
});
|
|
13898
13903
|
|
|
13899
13904
|
// components/Toggle.tsx
|
|
13900
13905
|
import {
|
|
13901
|
-
forwardRef as
|
|
13906
|
+
forwardRef as forwardRef33,
|
|
13902
13907
|
useCallback as useCallback15,
|
|
13903
13908
|
useId as useId2,
|
|
13904
13909
|
useState as useState12
|
|
@@ -13911,11 +13916,12 @@ var toggleVariants = cva(
|
|
|
13911
13916
|
defaultVariants: {}
|
|
13912
13917
|
}
|
|
13913
13918
|
);
|
|
13914
|
-
var Toggle =
|
|
13919
|
+
var Toggle = forwardRef33(function Toggle2({
|
|
13915
13920
|
checked: controlledChecked,
|
|
13916
13921
|
defaultChecked = false,
|
|
13917
13922
|
onCheckedChange,
|
|
13918
13923
|
className,
|
|
13924
|
+
style,
|
|
13919
13925
|
"aria-label": ariaLabel = "Toggle",
|
|
13920
13926
|
theme: themeProp,
|
|
13921
13927
|
disabled,
|
|
@@ -13943,6 +13949,7 @@ var Toggle = forwardRef12(function Toggle2({
|
|
|
13943
13949
|
{
|
|
13944
13950
|
htmlFor: id3,
|
|
13945
13951
|
className: cn(toggleVariants(), themeClass, className),
|
|
13952
|
+
style,
|
|
13946
13953
|
"data-state": checked ? "on" : "off",
|
|
13947
13954
|
children: [
|
|
13948
13955
|
/* @__PURE__ */ jsx34(
|
|
@@ -13976,7 +13983,7 @@ var Toggle = forwardRef12(function Toggle2({
|
|
|
13976
13983
|
});
|
|
13977
13984
|
|
|
13978
13985
|
// components/Tooltip.tsx
|
|
13979
|
-
import { useCallback as useCallback16, useState as useState13 } from "react";
|
|
13986
|
+
import { forwardRef as forwardRef34, useCallback as useCallback16, useId as useId3, useState as useState13 } from "react";
|
|
13980
13987
|
import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
13981
13988
|
var placementClasses = {
|
|
13982
13989
|
top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
|
|
@@ -13988,15 +13995,9 @@ var tooltipVariants = cva(
|
|
|
13988
13995
|
"absolute z-50 whitespace-nowrap rounded-lg px-2 py-1 text-xs shadow-lg",
|
|
13989
13996
|
{ variants: {}, defaultVariants: {} }
|
|
13990
13997
|
);
|
|
13991
|
-
|
|
13992
|
-
content,
|
|
13993
|
-
children,
|
|
13994
|
-
placement = "top",
|
|
13995
|
-
className,
|
|
13996
|
-
style,
|
|
13997
|
-
theme: themeProp
|
|
13998
|
-
}) {
|
|
13998
|
+
var Tooltip = forwardRef34(function Tooltip2({ content, children, placement = "top", className, style, theme: themeProp }, ref) {
|
|
13999
13999
|
const [visible, setVisible] = useState13(false);
|
|
14000
|
+
const tooltipId = useId3();
|
|
14000
14001
|
const { theme: contextTheme } = useTheme();
|
|
14001
14002
|
const theme = themeProp ?? contextTheme;
|
|
14002
14003
|
const themeClass = getThemeClass(theme, "tooltip", "default");
|
|
@@ -14005,17 +14006,20 @@ function Tooltip({
|
|
|
14005
14006
|
return /* @__PURE__ */ jsxs30(
|
|
14006
14007
|
"span",
|
|
14007
14008
|
{
|
|
14009
|
+
ref,
|
|
14008
14010
|
className: cn("relative inline-block", className),
|
|
14009
14011
|
style,
|
|
14010
14012
|
onMouseEnter: show,
|
|
14011
14013
|
onMouseLeave: hide,
|
|
14012
14014
|
onFocus: show,
|
|
14013
14015
|
onBlur: hide,
|
|
14016
|
+
"aria-describedby": visible ? tooltipId : void 0,
|
|
14014
14017
|
children: [
|
|
14015
14018
|
children,
|
|
14016
14019
|
visible ? /* @__PURE__ */ jsx35(
|
|
14017
14020
|
"span",
|
|
14018
14021
|
{
|
|
14022
|
+
id: tooltipId,
|
|
14019
14023
|
role: "tooltip",
|
|
14020
14024
|
className: cn(
|
|
14021
14025
|
tooltipVariants(),
|
|
@@ -14028,7 +14032,7 @@ function Tooltip({
|
|
|
14028
14032
|
]
|
|
14029
14033
|
}
|
|
14030
14034
|
);
|
|
14031
|
-
}
|
|
14035
|
+
});
|
|
14032
14036
|
|
|
14033
14037
|
// lib/theme-recommendations.ts
|
|
14034
14038
|
var THEME_BACKGROUNDS = {
|
|
@@ -14159,6 +14163,7 @@ export {
|
|
|
14159
14163
|
cn,
|
|
14160
14164
|
getNextListIndex,
|
|
14161
14165
|
getThemeClass,
|
|
14166
|
+
mergeRefs,
|
|
14162
14167
|
useClickOutside,
|
|
14163
14168
|
useFocusTrap,
|
|
14164
14169
|
useKeyboardNavigation,
|