@hyddenlabs/hydn-ui 0.3.0-alpha.152 → 0.3.0-alpha.153
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/index.cjs +426 -231
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +454 -22
- package/dist/index.d.ts +454 -22
- package/dist/index.js +405 -232
- package/dist/index.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -111,14 +111,302 @@ function ColorModeToggle({ className = "" }) {
|
|
|
111
111
|
}
|
|
112
112
|
ColorModeToggle.displayName = "ColorModeToggle";
|
|
113
113
|
var color_mode_toggle_default = ColorModeToggle;
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
114
|
+
|
|
115
|
+
// src/theme/size-tokens.ts
|
|
116
|
+
var visualSizes = {
|
|
117
|
+
xs: {
|
|
118
|
+
classes: "w-3.5 h-3.5 sm:w-3 sm:h-3",
|
|
119
|
+
// 14px mobile, 12px desktop
|
|
120
|
+
pixels: { mobile: 14, desktop: 12 }
|
|
121
|
+
},
|
|
122
|
+
sm: {
|
|
123
|
+
classes: "w-5 h-5 sm:w-4 sm:h-4",
|
|
124
|
+
// 20px mobile, 16px desktop
|
|
125
|
+
pixels: { mobile: 20, desktop: 16 }
|
|
126
|
+
},
|
|
127
|
+
md: {
|
|
128
|
+
classes: "w-6 h-6 sm:w-5 sm:h-5",
|
|
129
|
+
// 24px mobile, 20px desktop
|
|
130
|
+
pixels: { mobile: 24, desktop: 20 }
|
|
131
|
+
},
|
|
132
|
+
lg: {
|
|
133
|
+
classes: "w-7 h-7 sm:w-6 sm:h-6",
|
|
134
|
+
// 28px mobile, 24px desktop
|
|
135
|
+
pixels: { mobile: 28, desktop: 24 }
|
|
136
|
+
},
|
|
137
|
+
xl: {
|
|
138
|
+
classes: "w-8 h-8 sm:w-7 sm:h-7",
|
|
139
|
+
// 32px mobile, 28px desktop
|
|
140
|
+
pixels: { mobile: 32, desktop: 28 }
|
|
141
|
+
},
|
|
142
|
+
"2xl": {
|
|
143
|
+
classes: "w-9 h-9 sm:w-8 sm:h-8",
|
|
144
|
+
// 36px mobile, 32px desktop
|
|
145
|
+
pixels: { mobile: 36, desktop: 32 }
|
|
146
|
+
},
|
|
147
|
+
"3xl": {
|
|
148
|
+
classes: "w-12 h-12 sm:w-10 sm:h-10",
|
|
149
|
+
// 48px mobile, 40px desktop
|
|
150
|
+
pixels: { mobile: 48, desktop: 40 }
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
var spinnerSizes = {
|
|
154
|
+
xs: { ...visualSizes.xs, border: "border" },
|
|
155
|
+
sm: { ...visualSizes.sm, border: "border-2" },
|
|
156
|
+
md: { ...visualSizes.md, border: "border-2" },
|
|
157
|
+
lg: { ...visualSizes.lg, border: "border-2" },
|
|
158
|
+
xl: { ...visualSizes.xl, border: "border-[3px]" },
|
|
159
|
+
"2xl": { ...visualSizes["2xl"], border: "border-[3px]" },
|
|
160
|
+
"3xl": { ...visualSizes["3xl"], border: "border-4" }
|
|
161
|
+
};
|
|
162
|
+
var avatarSizes = {
|
|
163
|
+
xs: {
|
|
164
|
+
classes: "w-8 h-8 sm:w-6 sm:h-6",
|
|
165
|
+
text: "text-sm sm:text-xs"
|
|
166
|
+
},
|
|
167
|
+
sm: {
|
|
168
|
+
classes: "w-10 h-10 sm:w-8 sm:h-8",
|
|
169
|
+
text: "text-base sm:text-sm"
|
|
170
|
+
},
|
|
171
|
+
md: {
|
|
172
|
+
classes: "w-12 h-12 sm:w-10 sm:h-10",
|
|
173
|
+
text: "text-lg sm:text-base"
|
|
174
|
+
},
|
|
175
|
+
lg: {
|
|
176
|
+
classes: "w-14 h-14 sm:w-12 sm:h-12",
|
|
177
|
+
text: "text-xl sm:text-lg"
|
|
178
|
+
},
|
|
179
|
+
xl: {
|
|
180
|
+
classes: "w-20 h-20 sm:w-16 sm:h-16",
|
|
181
|
+
text: "text-2xl sm:text-xl"
|
|
182
|
+
},
|
|
183
|
+
"2xl": {
|
|
184
|
+
classes: "w-24 h-24 sm:w-20 sm:h-20",
|
|
185
|
+
text: "text-3xl sm:text-2xl"
|
|
186
|
+
},
|
|
187
|
+
"3xl": {
|
|
188
|
+
classes: "w-28 h-28 sm:w-24 sm:h-24",
|
|
189
|
+
text: "text-4xl sm:text-3xl"
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
var logoSizes = {
|
|
193
|
+
xs: { classes: "h-5 w-5 sm:h-4 sm:w-4" },
|
|
194
|
+
sm: { classes: "h-7 w-7 sm:h-6 sm:w-6" },
|
|
195
|
+
md: { classes: "h-9 w-9 sm:h-8 sm:w-8" },
|
|
196
|
+
lg: { classes: "h-12 w-12 sm:h-10 sm:w-10" },
|
|
197
|
+
xl: { classes: "h-14 w-14 sm:h-12 sm:w-12" },
|
|
198
|
+
"2xl": { classes: "h-20 w-20 sm:h-16 sm:w-16" },
|
|
199
|
+
"3xl": { classes: "h-24 w-24 sm:h-20 sm:w-20" }
|
|
200
|
+
};
|
|
201
|
+
var interactiveSizes = {
|
|
202
|
+
xs: {
|
|
203
|
+
height: "h-8 sm:h-6 min-h-8 sm:min-h-6",
|
|
204
|
+
padding: "px-3 sm:px-2",
|
|
205
|
+
text: "text-sm sm:text-xs",
|
|
206
|
+
icon: visualSizes.xs
|
|
207
|
+
},
|
|
208
|
+
sm: {
|
|
209
|
+
height: "h-10 sm:h-8 min-h-10 sm:min-h-8",
|
|
210
|
+
padding: "px-4 sm:px-3",
|
|
211
|
+
text: "text-base sm:text-sm",
|
|
212
|
+
icon: visualSizes.sm
|
|
213
|
+
},
|
|
214
|
+
md: {
|
|
215
|
+
height: "h-12 sm:h-10 min-h-12 sm:min-h-10",
|
|
216
|
+
padding: "px-5 sm:px-4",
|
|
217
|
+
text: "text-base sm:text-sm",
|
|
218
|
+
icon: visualSizes.md
|
|
219
|
+
},
|
|
220
|
+
lg: {
|
|
221
|
+
height: "h-14 sm:h-12 min-h-14 sm:min-h-12",
|
|
222
|
+
padding: "px-7 sm:px-6",
|
|
223
|
+
text: "text-lg sm:text-base",
|
|
224
|
+
icon: visualSizes.lg
|
|
225
|
+
},
|
|
226
|
+
xl: {
|
|
227
|
+
height: "h-16 sm:h-14 min-h-16 sm:min-h-14",
|
|
228
|
+
padding: "px-9 sm:px-8",
|
|
229
|
+
text: "text-xl sm:text-lg",
|
|
230
|
+
icon: visualSizes.xl
|
|
231
|
+
}
|
|
232
|
+
};
|
|
233
|
+
var badgeSizes = {
|
|
234
|
+
sm: {
|
|
235
|
+
classes: "px-2.5 sm:px-2 py-1 sm:py-0.5 text-sm sm:text-xs",
|
|
236
|
+
icon: visualSizes.xs
|
|
237
|
+
},
|
|
238
|
+
md: {
|
|
239
|
+
classes: "px-3 sm:px-2.5 py-1 sm:py-0.5 text-sm sm:text-xs font-semibold",
|
|
240
|
+
icon: visualSizes.sm
|
|
241
|
+
},
|
|
242
|
+
lg: {
|
|
243
|
+
classes: "px-4 sm:px-3 py-1.5 sm:py-1 text-base sm:text-sm font-semibold",
|
|
244
|
+
icon: visualSizes.md
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
var chipSizes = {
|
|
248
|
+
sm: {
|
|
249
|
+
classes: "px-2.5 sm:px-2 py-1.5 sm:py-1 text-sm sm:text-xs gap-1.5 sm:gap-1",
|
|
250
|
+
icon: visualSizes.xs
|
|
251
|
+
},
|
|
252
|
+
md: {
|
|
253
|
+
classes: "px-3.5 sm:px-3 py-2 sm:py-1.5 text-base sm:text-sm gap-2 sm:gap-1.5",
|
|
254
|
+
icon: visualSizes.sm
|
|
255
|
+
},
|
|
256
|
+
lg: {
|
|
257
|
+
classes: "px-5 sm:px-4 py-2.5 sm:py-2 text-lg sm:text-base gap-2.5 sm:gap-2",
|
|
258
|
+
icon: visualSizes.md
|
|
259
|
+
}
|
|
260
|
+
};
|
|
261
|
+
var codeSizes = {
|
|
262
|
+
sm: "text-xs px-1 py-0.5",
|
|
263
|
+
md: "text-sm px-1.5 py-0.5",
|
|
264
|
+
lg: "text-base px-2 py-1"
|
|
265
|
+
};
|
|
266
|
+
var statusLabelSizes = {
|
|
267
|
+
sm: {
|
|
268
|
+
container: "px-2 py-0.5 text-xs gap-1.5",
|
|
269
|
+
dot: "w-1.5 h-1.5"
|
|
270
|
+
},
|
|
271
|
+
md: {
|
|
272
|
+
container: "px-2.5 py-0.5 text-sm gap-2",
|
|
273
|
+
dot: "w-2 h-2"
|
|
274
|
+
},
|
|
275
|
+
lg: {
|
|
276
|
+
container: "px-3 py-1 text-base gap-2",
|
|
277
|
+
dot: "w-2.5 h-2.5"
|
|
278
|
+
}
|
|
279
|
+
};
|
|
280
|
+
var textSizes = {
|
|
281
|
+
xs: "text-sm sm:text-xs",
|
|
282
|
+
sm: "text-base sm:text-sm",
|
|
283
|
+
base: "text-base",
|
|
284
|
+
lg: "text-lg",
|
|
285
|
+
xl: "text-xl sm:text-lg",
|
|
286
|
+
"2xl": "text-2xl sm:text-xl",
|
|
287
|
+
"3xl": "text-3xl sm:text-2xl",
|
|
288
|
+
"4xl": "text-4xl sm:text-3xl",
|
|
289
|
+
"5xl": "text-5xl sm:text-4xl"
|
|
290
|
+
};
|
|
291
|
+
var headingSizes = {
|
|
292
|
+
sm: "text-base font-semibold",
|
|
293
|
+
md: "text-lg font-bold",
|
|
294
|
+
lg: "text-xl font-bold",
|
|
295
|
+
xl: "text-2xl font-bold",
|
|
296
|
+
"2xl": "text-3xl font-bold sm:text-2xl",
|
|
297
|
+
"3xl": "text-4xl font-bold sm:text-3xl",
|
|
298
|
+
"4xl": "text-5xl font-bold sm:text-4xl"
|
|
299
|
+
};
|
|
300
|
+
var cardSizes = {
|
|
301
|
+
xs: "w-full sm:max-w-36",
|
|
302
|
+
sm: "w-full sm:max-w-64",
|
|
303
|
+
md: "w-full sm:max-w-96",
|
|
304
|
+
lg: "w-full sm:max-w-[28rem]",
|
|
305
|
+
xl: "w-full sm:max-w-[32rem]",
|
|
306
|
+
"2xl": "w-full sm:max-w-[36rem]",
|
|
307
|
+
full: "w-full"
|
|
308
|
+
};
|
|
309
|
+
var gapSizes = {
|
|
310
|
+
none: "gap-0",
|
|
311
|
+
xs: "gap-2 sm:gap-1",
|
|
312
|
+
sm: "gap-3 sm:gap-2",
|
|
313
|
+
md: "gap-5 sm:gap-4",
|
|
314
|
+
lg: "gap-7 sm:gap-6",
|
|
315
|
+
xl: "gap-10 sm:gap-8",
|
|
316
|
+
"2xl": "gap-14 sm:gap-12",
|
|
317
|
+
"3xl": "gap-20 sm:gap-16"
|
|
318
|
+
};
|
|
319
|
+
var containerSizes = {
|
|
320
|
+
sm: "max-w-screen-sm",
|
|
321
|
+
md: "max-w-screen-md",
|
|
322
|
+
lg: "max-w-screen-lg",
|
|
323
|
+
xl: "max-w-screen-xl",
|
|
324
|
+
"2xl": "max-w-screen-2xl",
|
|
325
|
+
"3xl": "max-w-[1920px]",
|
|
326
|
+
full: "max-w-full",
|
|
327
|
+
screen: "max-w-[100vw]"
|
|
328
|
+
};
|
|
329
|
+
var containerMinWidths = {
|
|
330
|
+
xs: "min-w-[20rem]",
|
|
331
|
+
// 320px
|
|
332
|
+
sm: "min-w-[24rem]",
|
|
333
|
+
// 384px
|
|
334
|
+
md: "min-w-[28rem]",
|
|
335
|
+
// 448px
|
|
336
|
+
lg: "min-w-[32rem]",
|
|
337
|
+
// 512px
|
|
338
|
+
xl: "min-w-[36rem]",
|
|
339
|
+
// 576px
|
|
340
|
+
"2xl": "min-w-[42rem]",
|
|
341
|
+
// 672px
|
|
342
|
+
"3xl": "min-w-[48rem]",
|
|
343
|
+
// 768px
|
|
344
|
+
full: "min-w-full",
|
|
345
|
+
screen: "min-w-screen"
|
|
346
|
+
};
|
|
347
|
+
var containerMinHeights = {
|
|
348
|
+
xs: "min-h-[10rem]",
|
|
349
|
+
// 160px
|
|
350
|
+
sm: "min-h-[15rem]",
|
|
351
|
+
// 240px
|
|
352
|
+
md: "min-h-[20rem]",
|
|
353
|
+
// 320px
|
|
354
|
+
lg: "min-h-[25rem]",
|
|
355
|
+
// 400px
|
|
356
|
+
xl: "min-h-[30rem]",
|
|
357
|
+
// 480px
|
|
358
|
+
"2xl": "min-h-[35rem]",
|
|
359
|
+
// 560px
|
|
360
|
+
"3xl": "min-h-[40rem]",
|
|
361
|
+
// 640px
|
|
362
|
+
full: "min-h-full",
|
|
363
|
+
screen: "min-h-screen"
|
|
364
|
+
};
|
|
365
|
+
var sectionPadding = {
|
|
366
|
+
none: "py-0",
|
|
367
|
+
xs: "py-6 sm:py-4",
|
|
368
|
+
sm: "py-10 sm:py-8",
|
|
369
|
+
md: "py-16 sm:py-12",
|
|
370
|
+
lg: "py-20 sm:py-16",
|
|
371
|
+
xl: "py-28 sm:py-24",
|
|
372
|
+
"2xl": "py-36 sm:py-32"
|
|
121
373
|
};
|
|
374
|
+
var cardPadding = {
|
|
375
|
+
none: "p-0",
|
|
376
|
+
xs: "p-3 sm:p-2",
|
|
377
|
+
sm: "p-5 sm:p-4",
|
|
378
|
+
md: "p-7 sm:p-6",
|
|
379
|
+
lg: "p-9 sm:p-8",
|
|
380
|
+
xl: "p-12 sm:p-10",
|
|
381
|
+
"2xl": "p-14 sm:p-12"
|
|
382
|
+
};
|
|
383
|
+
var overlaySizes = {
|
|
384
|
+
xs: "w-full sm:w-64",
|
|
385
|
+
sm: "w-full sm:w-80",
|
|
386
|
+
md: "w-full sm:w-96",
|
|
387
|
+
lg: "w-full sm:w-[28rem]",
|
|
388
|
+
xl: "w-full sm:w-[32rem]",
|
|
389
|
+
"2xl": "w-full sm:w-[40rem]",
|
|
390
|
+
"3xl": "w-full sm:w-[48rem]",
|
|
391
|
+
full: "w-full max-w-2xl"
|
|
392
|
+
};
|
|
393
|
+
var borderRadius = {
|
|
394
|
+
none: "rounded-none",
|
|
395
|
+
sm: "rounded-sm",
|
|
396
|
+
md: "rounded-md",
|
|
397
|
+
lg: "rounded-lg",
|
|
398
|
+
xl: "rounded-xl",
|
|
399
|
+
"2xl": "rounded-2xl",
|
|
400
|
+
"3xl": "rounded-3xl",
|
|
401
|
+
full: "rounded-full"
|
|
402
|
+
};
|
|
403
|
+
function getIconPixels(size, variant = "desktop") {
|
|
404
|
+
if (typeof size === "number") return size;
|
|
405
|
+
return visualSizes[size].pixels[variant];
|
|
406
|
+
}
|
|
407
|
+
function getVisualClasses(size) {
|
|
408
|
+
return visualSizes[size].classes;
|
|
409
|
+
}
|
|
122
410
|
var Icon = ({
|
|
123
411
|
name,
|
|
124
412
|
size = "md",
|
|
@@ -131,7 +419,7 @@ var Icon = ({
|
|
|
131
419
|
const componentName = pascalName.startsWith("Icon") ? pascalName : "Icon" + pascalName;
|
|
132
420
|
const IconComponent = TablerIcons[componentName];
|
|
133
421
|
if (!IconComponent) return null;
|
|
134
|
-
const pixelSize =
|
|
422
|
+
const pixelSize = getIconPixels(size, "desktop");
|
|
135
423
|
return /* @__PURE__ */ jsx(
|
|
136
424
|
IconComponent,
|
|
137
425
|
{
|
|
@@ -332,16 +620,9 @@ function openLoginPopup(authUrl, onSuccess) {
|
|
|
332
620
|
}
|
|
333
621
|
return popup;
|
|
334
622
|
}
|
|
335
|
-
var sizeClasses = {
|
|
336
|
-
xs: "h-4 w-4",
|
|
337
|
-
sm: "h-6 w-6",
|
|
338
|
-
md: "h-8 w-8",
|
|
339
|
-
lg: "h-10 w-10",
|
|
340
|
-
xl: "h-12 w-12"
|
|
341
|
-
};
|
|
342
623
|
function Logo({ size = "md", className = "" }) {
|
|
343
|
-
const
|
|
344
|
-
return /* @__PURE__ */ jsx("img", { src: "/icons/logo.svg", alt: "Hydden Logo", className: `${
|
|
624
|
+
const sizeConfig = logoSizes[size];
|
|
625
|
+
return /* @__PURE__ */ jsx("img", { src: "/icons/logo.svg", alt: "Hydden Logo", className: `${sizeConfig.classes} ${className}`, loading: "lazy" });
|
|
345
626
|
}
|
|
346
627
|
function Container({
|
|
347
628
|
children,
|
|
@@ -352,69 +633,26 @@ function Container({
|
|
|
352
633
|
minWidth,
|
|
353
634
|
minHeight
|
|
354
635
|
}) {
|
|
355
|
-
const sizeClasses2 = {
|
|
356
|
-
sm: "max-w-screen-sm",
|
|
357
|
-
md: "max-w-screen-md",
|
|
358
|
-
lg: "max-w-screen-lg",
|
|
359
|
-
xl: "max-w-screen-xl",
|
|
360
|
-
full: "max-w-full"
|
|
361
|
-
};
|
|
362
|
-
const paddingClasses = {
|
|
363
|
-
none: "",
|
|
364
|
-
sm: "py-6",
|
|
365
|
-
md: "py-8",
|
|
366
|
-
lg: "py-12",
|
|
367
|
-
xl: "py-16"
|
|
368
|
-
};
|
|
369
636
|
const alignClasses = {
|
|
370
637
|
start: "mr-auto",
|
|
371
638
|
center: "mx-auto",
|
|
372
639
|
end: "ml-auto"
|
|
373
640
|
};
|
|
374
|
-
const
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
"2xl": "min-w-[42rem]",
|
|
386
|
-
// 672px
|
|
387
|
-
"3xl": "min-w-[48rem]",
|
|
388
|
-
// 768px
|
|
389
|
-
full: "min-w-full"
|
|
390
|
-
};
|
|
391
|
-
const minHeightClasses = {
|
|
392
|
-
xs: "min-h-[10rem]",
|
|
393
|
-
// 160px
|
|
394
|
-
sm: "min-h-[15rem]",
|
|
395
|
-
// 240px
|
|
396
|
-
md: "min-h-[20rem]",
|
|
397
|
-
// 320px
|
|
398
|
-
lg: "min-h-[25rem]",
|
|
399
|
-
// 400px
|
|
400
|
-
xl: "min-h-[30rem]",
|
|
401
|
-
// 480px
|
|
402
|
-
"2xl": "min-h-[35rem]",
|
|
403
|
-
// 560px
|
|
404
|
-
"3xl": "min-h-[40rem]",
|
|
405
|
-
// 640px
|
|
406
|
-
screen: "min-h-screen"
|
|
407
|
-
};
|
|
408
|
-
const minWidthClass = minWidth && minWidthClasses[minWidth] ? minWidthClasses[minWidth] : "";
|
|
409
|
-
const minHeightClass = minHeight && minHeightClasses[minHeight] ? minHeightClasses[minHeight] : "";
|
|
410
|
-
const inlineStyles = {
|
|
411
|
-
...minWidth && !minWidthClasses[minWidth] && { minWidth },
|
|
412
|
-
...minHeight && !minHeightClasses[minHeight] && { minHeight }
|
|
413
|
-
};
|
|
641
|
+
const sizeClass = containerSizes[size] || containerSizes.lg;
|
|
642
|
+
const paddingClass = padding === "none" ? "" : Object.prototype.hasOwnProperty.call(sectionPadding, padding) ? sectionPadding[padding] : sectionPadding.lg;
|
|
643
|
+
const minWidthClass = minWidth && containerMinWidths[minWidth] ? containerMinWidths[minWidth] : "";
|
|
644
|
+
const minHeightClass = minHeight && containerMinHeights[minHeight] ? containerMinHeights[minHeight] : "";
|
|
645
|
+
const inlineStyles = {};
|
|
646
|
+
if (minWidth && !containerMinWidths[minWidth]) {
|
|
647
|
+
inlineStyles.minWidth = minWidth;
|
|
648
|
+
}
|
|
649
|
+
if (minHeight && !containerMinHeights[minHeight]) {
|
|
650
|
+
inlineStyles.minHeight = minHeight;
|
|
651
|
+
}
|
|
414
652
|
return /* @__PURE__ */ jsx(
|
|
415
653
|
"div",
|
|
416
654
|
{
|
|
417
|
-
className: `px-4 ${
|
|
655
|
+
className: `px-4 ${sizeClass} ${paddingClass} ${alignClasses[align]} ${minWidthClass} ${minHeightClass} ${className}`,
|
|
418
656
|
style: Object.keys(inlineStyles).length > 0 ? inlineStyles : void 0,
|
|
419
657
|
children
|
|
420
658
|
}
|
|
@@ -440,15 +678,7 @@ function Grid({
|
|
|
440
678
|
xl: "350px",
|
|
441
679
|
"2xl": "400px"
|
|
442
680
|
};
|
|
443
|
-
const
|
|
444
|
-
none: "gap-0",
|
|
445
|
-
xs: "gap-1",
|
|
446
|
-
sm: "gap-2",
|
|
447
|
-
md: "gap-4",
|
|
448
|
-
lg: "gap-6",
|
|
449
|
-
xl: "gap-8",
|
|
450
|
-
"2xl": "gap-12"
|
|
451
|
-
};
|
|
681
|
+
const gapClass = gapSizes[gap];
|
|
452
682
|
const alignItemsClasses = {
|
|
453
683
|
start: "items-start",
|
|
454
684
|
center: "items-center",
|
|
@@ -475,7 +705,7 @@ function Grid({
|
|
|
475
705
|
className: `
|
|
476
706
|
grid
|
|
477
707
|
${!responsive ? "" : responsiveClasses}
|
|
478
|
-
${
|
|
708
|
+
${gapClass}
|
|
479
709
|
${alignItemsClasses[alignItems]}
|
|
480
710
|
${justifyItemsClasses[justifyItems]}
|
|
481
711
|
${className}
|
|
@@ -554,14 +784,7 @@ function Text({
|
|
|
554
784
|
error: "text-destructive",
|
|
555
785
|
inherit: "text-inherit"
|
|
556
786
|
};
|
|
557
|
-
const
|
|
558
|
-
xs: "text-sm sm:text-xs",
|
|
559
|
-
sm: "text-base sm:text-sm",
|
|
560
|
-
base: "text-base",
|
|
561
|
-
lg: "text-lg",
|
|
562
|
-
xl: "text-xl",
|
|
563
|
-
"2xl": "text-2xl"
|
|
564
|
-
};
|
|
787
|
+
const sizeClasses = textSizes;
|
|
565
788
|
const weightClasses = {
|
|
566
789
|
light: "font-light",
|
|
567
790
|
normal: "font-normal",
|
|
@@ -645,7 +868,7 @@ function Text({
|
|
|
645
868
|
const margin = hasMargin ? "mb-3 sm:mb-4" : "";
|
|
646
869
|
const classes = [
|
|
647
870
|
variantClasses[variant],
|
|
648
|
-
|
|
871
|
+
sizeClasses[finalSize],
|
|
649
872
|
weightClasses[weight],
|
|
650
873
|
margin,
|
|
651
874
|
align && alignClasses[align],
|
|
@@ -685,20 +908,14 @@ function PageHeader({ title, description, badge, className = "" }) {
|
|
|
685
908
|
PageHeader.displayName = "PageHeader";
|
|
686
909
|
var page_header_default = PageHeader;
|
|
687
910
|
function Section({ children, variant = "default", padding = "none", className, id }) {
|
|
688
|
-
const paddingClasses =
|
|
689
|
-
none: "py-0",
|
|
690
|
-
sm: "py-8",
|
|
691
|
-
md: "py-12",
|
|
692
|
-
lg: "py-16",
|
|
693
|
-
xl: "py-24"
|
|
694
|
-
};
|
|
911
|
+
const paddingClasses = sectionPadding[padding];
|
|
695
912
|
const variantClasses = {
|
|
696
913
|
default: "bg-background",
|
|
697
914
|
muted: "bg-muted/20",
|
|
698
915
|
primary: "bg-primary text-primary-foreground",
|
|
699
916
|
dark: "bg-background-dark text-foreground-dark"
|
|
700
917
|
};
|
|
701
|
-
const classes = ["w-full", paddingClasses
|
|
918
|
+
const classes = ["w-full", paddingClasses, variantClasses[variant], className].filter(Boolean).join(" ");
|
|
702
919
|
return /* @__PURE__ */ jsx("section", { id, className: classes, children });
|
|
703
920
|
}
|
|
704
921
|
Section.displayName = "Section";
|
|
@@ -723,13 +940,7 @@ function Stack({
|
|
|
723
940
|
align = "stretch",
|
|
724
941
|
justify
|
|
725
942
|
}) {
|
|
726
|
-
const spacingClasses =
|
|
727
|
-
none: "gap-0",
|
|
728
|
-
sm: "gap-3 sm:gap-2",
|
|
729
|
-
md: "gap-5 sm:gap-4",
|
|
730
|
-
lg: "gap-7 sm:gap-6",
|
|
731
|
-
xl: "gap-10 sm:gap-8"
|
|
732
|
-
};
|
|
943
|
+
const spacingClasses = gapSizes[spacing];
|
|
733
944
|
const alignClasses = {
|
|
734
945
|
start: "items-start",
|
|
735
946
|
center: "items-center",
|
|
@@ -749,7 +960,7 @@ function Stack({
|
|
|
749
960
|
"div",
|
|
750
961
|
{
|
|
751
962
|
"data-component": "Stack",
|
|
752
|
-
className: `flex flex-wrap ${directionClass} ${spacingClasses
|
|
963
|
+
className: `flex flex-wrap ${directionClass} ${spacingClasses} ${alignClasses[align]} ${justifyClass} ${className}`,
|
|
753
964
|
children
|
|
754
965
|
}
|
|
755
966
|
);
|
|
@@ -945,13 +1156,7 @@ function Drawer({
|
|
|
945
1156
|
animationFrames: noAnimation ? 0 : 0
|
|
946
1157
|
});
|
|
947
1158
|
if (!shouldRender) return null;
|
|
948
|
-
const
|
|
949
|
-
sm: "w-full sm:w-72",
|
|
950
|
-
md: "w-full sm:w-96",
|
|
951
|
-
lg: "w-full sm:w-[32rem]",
|
|
952
|
-
xl: "w-full sm:w-[40rem]",
|
|
953
|
-
full: "w-full max-w-2xl"
|
|
954
|
-
};
|
|
1159
|
+
const sizeClasses = overlaySizes[size];
|
|
955
1160
|
const edgeClasses = {
|
|
956
1161
|
left: "left-0 top-0 bottom-0",
|
|
957
1162
|
right: "right-0 top-0 bottom-0",
|
|
@@ -1003,7 +1208,7 @@ function Drawer({
|
|
|
1003
1208
|
tabIndex: -1,
|
|
1004
1209
|
"data-phase": phase,
|
|
1005
1210
|
"data-position": position,
|
|
1006
|
-
className: `fixed ${edgeClasses[position]} ${position === "left" || position === "right" ?
|
|
1211
|
+
className: `fixed ${edgeClasses[position]} ${position === "left" || position === "right" ? sizeClasses : ""} bg-card text-card-foreground shadow-2xl z-[1000] flex flex-col outline-none ${panelTransform} ${noAnimation ? "" : "transition-transform duration-[250ms] ease-out will-change-transform"} ${className}`,
|
|
1007
1212
|
onKeyDown: handleKeyDown,
|
|
1008
1213
|
children: [
|
|
1009
1214
|
title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-border/60 bg-card/95 backdrop-blur-sm", children: [
|
|
@@ -1063,15 +1268,8 @@ function Card({
|
|
|
1063
1268
|
ghost: "bg-transparent",
|
|
1064
1269
|
filled: "bg-muted text-foreground"
|
|
1065
1270
|
};
|
|
1066
|
-
const sizeClasses2 = {
|
|
1067
|
-
xs: "w-full sm:max-w-36",
|
|
1068
|
-
sm: "w-full sm:max-w-64",
|
|
1069
|
-
md: "w-full sm:max-w-96",
|
|
1070
|
-
lg: "w-full sm:max-w-[28rem]",
|
|
1071
|
-
xl: "w-full sm:max-w-[32rem]"
|
|
1072
|
-
};
|
|
1073
1271
|
const widthClasses = {
|
|
1074
|
-
auto: size ?
|
|
1272
|
+
auto: size ? cardSizes[size] : "max-w-full",
|
|
1075
1273
|
full: "w-full",
|
|
1076
1274
|
fit: "w-fit"
|
|
1077
1275
|
};
|
|
@@ -1129,20 +1327,14 @@ function CardHeader({ children, className = "", bordered = true, padding = "md"
|
|
|
1129
1327
|
CardHeader.displayName = "CardHeader";
|
|
1130
1328
|
var card_header_default = CardHeader;
|
|
1131
1329
|
function CardBody({ children, padding = "md", className = "" }) {
|
|
1132
|
-
const paddingClasses =
|
|
1133
|
-
none: "p-0",
|
|
1134
|
-
sm: "p-4",
|
|
1135
|
-
md: "p-6",
|
|
1136
|
-
lg: "p-8",
|
|
1137
|
-
xl: "p-10"
|
|
1138
|
-
};
|
|
1330
|
+
const paddingClasses = cardPadding[padding];
|
|
1139
1331
|
return /* @__PURE__ */ jsx(
|
|
1140
1332
|
"div",
|
|
1141
1333
|
{
|
|
1142
1334
|
className: `
|
|
1143
1335
|
card-body
|
|
1144
1336
|
flex flex-col gap-2
|
|
1145
|
-
${paddingClasses
|
|
1337
|
+
${paddingClasses}
|
|
1146
1338
|
${className}
|
|
1147
1339
|
`.trim().replace(/\s+/g, " "),
|
|
1148
1340
|
children
|
|
@@ -1236,18 +1428,13 @@ function CardFigure({ children, className = "", aspectRatio = "auto" }) {
|
|
|
1236
1428
|
CardFigure.displayName = "CardFigure";
|
|
1237
1429
|
var card_figure_default = CardFigure;
|
|
1238
1430
|
function CardTitle({ children, className = "", as: Component = "h2", size = "md" }) {
|
|
1239
|
-
const
|
|
1240
|
-
sm: "text-base font-semibold",
|
|
1241
|
-
md: "text-lg font-bold",
|
|
1242
|
-
lg: "text-xl font-bold",
|
|
1243
|
-
xl: "text-2xl font-bold"
|
|
1244
|
-
};
|
|
1431
|
+
const sizeClasses = headingSizes[size];
|
|
1245
1432
|
return /* @__PURE__ */ jsx(
|
|
1246
1433
|
Component,
|
|
1247
1434
|
{
|
|
1248
1435
|
className: `
|
|
1249
1436
|
card-title
|
|
1250
|
-
${
|
|
1437
|
+
${sizeClasses}
|
|
1251
1438
|
${className}
|
|
1252
1439
|
`.trim().replace(/\s+/g, " "),
|
|
1253
1440
|
children
|
|
@@ -1747,13 +1934,8 @@ var Button = React4.forwardRef(
|
|
|
1747
1934
|
return `${solidVariantClasses[variantKey]} shadow-sm hover:shadow-md`;
|
|
1748
1935
|
}
|
|
1749
1936
|
};
|
|
1750
|
-
const
|
|
1751
|
-
|
|
1752
|
-
sm: "h-10 sm:h-8 px-4 sm:px-3 text-base sm:text-sm min-h-10 sm:min-h-8",
|
|
1753
|
-
md: "h-12 sm:h-10 px-5 sm:px-4 text-base min-h-12 sm:min-h-10",
|
|
1754
|
-
lg: "h-14 sm:h-12 px-7 sm:px-6 text-lg min-h-14 sm:min-h-12",
|
|
1755
|
-
xl: "h-16 sm:h-14 px-9 sm:px-8 text-xl min-h-16 sm:min-h-14"
|
|
1756
|
-
};
|
|
1937
|
+
const sizeConfig = interactiveSizes[size];
|
|
1938
|
+
const sizeClasses = `${sizeConfig.height} ${sizeConfig.padding} ${sizeConfig.text}`;
|
|
1757
1939
|
const roundedClasses = {
|
|
1758
1940
|
default: "rounded-md",
|
|
1759
1941
|
pill: "rounded-full",
|
|
@@ -1782,7 +1964,7 @@ var Button = React4.forwardRef(
|
|
|
1782
1964
|
onClick,
|
|
1783
1965
|
"aria-label": ariaLabel,
|
|
1784
1966
|
disabled: disabled || loading,
|
|
1785
|
-
className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${
|
|
1967
|
+
className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
|
|
1786
1968
|
children: [
|
|
1787
1969
|
displayIcon && iconPosition === "left" && /* @__PURE__ */ jsx("span", { className: `inline-flex ${children ? "mr-2" : ""}`, children: displayIcon }),
|
|
1788
1970
|
children,
|
|
@@ -1806,10 +1988,11 @@ function Hero({
|
|
|
1806
1988
|
centered = true,
|
|
1807
1989
|
size = "lg"
|
|
1808
1990
|
}) {
|
|
1809
|
-
const
|
|
1810
|
-
sm:
|
|
1811
|
-
md:
|
|
1991
|
+
const sizeClasses = {
|
|
1992
|
+
sm: sectionPadding.md,
|
|
1993
|
+
md: sectionPadding.lg,
|
|
1812
1994
|
lg: "pt-32 pb-20 md:pt-36 md:pb-28"
|
|
1995
|
+
// Custom hero-specific padding
|
|
1813
1996
|
};
|
|
1814
1997
|
const titleSizes = {
|
|
1815
1998
|
sm: "text-3xl md:text-4xl",
|
|
@@ -1821,7 +2004,7 @@ function Hero({
|
|
|
1821
2004
|
solid: "bg-muted/30",
|
|
1822
2005
|
minimal: "bg-background"
|
|
1823
2006
|
};
|
|
1824
|
-
return /* @__PURE__ */ jsxs("section", { className: `relative ${
|
|
2007
|
+
return /* @__PURE__ */ jsxs("section", { className: `relative ${sizeClasses[size]} ${variantClasses[variant]} ${className}`, children: [
|
|
1825
2008
|
variant === "gradient" && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" }),
|
|
1826
2009
|
/* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" }),
|
|
1827
2010
|
/* @__PURE__ */ jsx(container_default, { size: "lg", children: /* @__PURE__ */ jsxs("div", { className: centered ? "text-center mx-auto max-w-4xl" : "max-w-4xl", children: [
|
|
@@ -1911,10 +2094,10 @@ function Link({
|
|
|
1911
2094
|
always: "underline",
|
|
1912
2095
|
none: "no-underline"
|
|
1913
2096
|
};
|
|
1914
|
-
const
|
|
1915
|
-
sm:
|
|
1916
|
-
md:
|
|
1917
|
-
lg:
|
|
2097
|
+
const sizeClasses = {
|
|
2098
|
+
sm: textSizes.sm,
|
|
2099
|
+
md: textSizes.base,
|
|
2100
|
+
lg: textSizes.lg
|
|
1918
2101
|
};
|
|
1919
2102
|
const displayClasses = {
|
|
1920
2103
|
inline: "inline",
|
|
@@ -1923,7 +2106,7 @@ function Link({
|
|
|
1923
2106
|
const linkClassName = [
|
|
1924
2107
|
variantClasses[variant],
|
|
1925
2108
|
underlineClasses[underline],
|
|
1926
|
-
|
|
2109
|
+
sizeClasses[size],
|
|
1927
2110
|
displayClasses[display],
|
|
1928
2111
|
"cursor-pointer transition-colors",
|
|
1929
2112
|
className
|
|
@@ -2700,12 +2883,7 @@ function NavDropdownItem({ to, children, className = "" }) {
|
|
|
2700
2883
|
NavDropdownItem.displayName = "NavDropdownItem";
|
|
2701
2884
|
var nav_dropdown_item_default = NavDropdownItem;
|
|
2702
2885
|
function Avatar({ src, alt = "", fallback, size = "md", className = "" }) {
|
|
2703
|
-
const
|
|
2704
|
-
sm: "w-10 h-10 sm:w-8 sm:h-8 text-sm sm:text-xs",
|
|
2705
|
-
md: "w-12 h-12 sm:w-10 sm:h-10 text-base sm:text-sm",
|
|
2706
|
-
lg: "w-14 h-14 sm:w-12 sm:h-12 text-lg sm:text-base",
|
|
2707
|
-
xl: "w-20 h-20 sm:w-16 sm:h-16 text-xl sm:text-lg"
|
|
2708
|
-
};
|
|
2886
|
+
const sizeConfig = avatarSizes[size];
|
|
2709
2887
|
let content;
|
|
2710
2888
|
if (src) {
|
|
2711
2889
|
content = /* @__PURE__ */ jsx("img", { src, alt, className: "w-full h-full object-cover" });
|
|
@@ -2717,7 +2895,7 @@ function Avatar({ src, alt = "", fallback, size = "md", className = "" }) {
|
|
|
2717
2895
|
return /* @__PURE__ */ jsx(
|
|
2718
2896
|
"div",
|
|
2719
2897
|
{
|
|
2720
|
-
className: `inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium overflow-hidden ${
|
|
2898
|
+
className: `inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium overflow-hidden ${sizeConfig.classes} ${sizeConfig.text} ${className}`,
|
|
2721
2899
|
children: content
|
|
2722
2900
|
}
|
|
2723
2901
|
);
|
|
@@ -2732,15 +2910,11 @@ function Badge({ children, variant = "default", size = "md", className = "", ...
|
|
|
2732
2910
|
warning: "bg-warning/10 text-warning border border-warning/20",
|
|
2733
2911
|
error: "bg-destructive/10 text-destructive border border-destructive/20"
|
|
2734
2912
|
};
|
|
2735
|
-
const
|
|
2736
|
-
sm: "px-2.5 sm:px-2 py-1 sm:py-0.5 text-sm sm:text-xs",
|
|
2737
|
-
md: "px-3 sm:px-2.5 py-1 sm:py-0.5 text-sm sm:text-xs font-semibold",
|
|
2738
|
-
lg: "px-4 sm:px-3 py-1.5 sm:py-1 text-base sm:text-sm font-semibold"
|
|
2739
|
-
};
|
|
2913
|
+
const sizeClasses = badgeSizes[size].classes;
|
|
2740
2914
|
return /* @__PURE__ */ jsx(
|
|
2741
2915
|
"span",
|
|
2742
2916
|
{
|
|
2743
|
-
className: `inline-flex items-center font-medium rounded-full transition-colors ${variantClasses[variant]} ${
|
|
2917
|
+
className: `inline-flex items-center font-medium rounded-full transition-colors ${variantClasses[variant]} ${sizeClasses} ${className}`,
|
|
2744
2918
|
...props,
|
|
2745
2919
|
children
|
|
2746
2920
|
}
|
|
@@ -2792,26 +2966,13 @@ function StatusLabel({
|
|
|
2792
2966
|
dot: "bg-primary"
|
|
2793
2967
|
}
|
|
2794
2968
|
};
|
|
2795
|
-
const
|
|
2796
|
-
sm: {
|
|
2797
|
-
container: "px-2 py-0.5 text-xs gap-1.5",
|
|
2798
|
-
dot: "w-1.5 h-1.5"
|
|
2799
|
-
},
|
|
2800
|
-
md: {
|
|
2801
|
-
container: "px-2.5 py-0.5 text-sm gap-2",
|
|
2802
|
-
dot: "w-2 h-2"
|
|
2803
|
-
},
|
|
2804
|
-
lg: {
|
|
2805
|
-
container: "px-3 py-1 text-base gap-2",
|
|
2806
|
-
dot: "w-2.5 h-2.5"
|
|
2807
|
-
}
|
|
2808
|
-
};
|
|
2969
|
+
const sizeClasses = statusLabelSizes[size];
|
|
2809
2970
|
return /* @__PURE__ */ jsxs(
|
|
2810
2971
|
"span",
|
|
2811
2972
|
{
|
|
2812
|
-
className: `inline-flex items-center font-medium rounded-full border ${statusConfig[status][variant]} ${
|
|
2973
|
+
className: `inline-flex items-center font-medium rounded-full border ${statusConfig[status][variant]} ${sizeClasses.container} ${className}`,
|
|
2813
2974
|
children: [
|
|
2814
|
-
/* @__PURE__ */ jsx("span", { className: `rounded-full ${statusConfig[status].dot} ${
|
|
2975
|
+
/* @__PURE__ */ jsx("span", { className: `rounded-full ${statusConfig[status].dot} ${sizeClasses.dot}` }),
|
|
2815
2976
|
children
|
|
2816
2977
|
]
|
|
2817
2978
|
}
|
|
@@ -2830,11 +2991,7 @@ function Chip({
|
|
|
2830
2991
|
clickable = false,
|
|
2831
2992
|
onClick
|
|
2832
2993
|
}) {
|
|
2833
|
-
const
|
|
2834
|
-
sm: "text-xs px-2 py-1 gap-1",
|
|
2835
|
-
md: "text-sm px-3 py-1.5 gap-1.5",
|
|
2836
|
-
lg: "text-base px-4 py-2 gap-2"
|
|
2837
|
-
};
|
|
2994
|
+
const sizeClasses = chipSizes[size].classes;
|
|
2838
2995
|
const variantClasses = {
|
|
2839
2996
|
default: "bg-muted text-muted-foreground",
|
|
2840
2997
|
primary: "bg-primary/10 text-primary",
|
|
@@ -2861,7 +3018,7 @@ function Chip({
|
|
|
2861
3018
|
className: `
|
|
2862
3019
|
inline-flex items-center justify-center
|
|
2863
3020
|
rounded-full font-medium
|
|
2864
|
-
${
|
|
3021
|
+
${sizeClasses}
|
|
2865
3022
|
${variantClasses[variant]}
|
|
2866
3023
|
${interactiveClasses}
|
|
2867
3024
|
${disabledClasses}
|
|
@@ -3898,11 +4055,7 @@ function useStaggeredTransition(count, baseDelay = 50) {
|
|
|
3898
4055
|
return Array.from({ length: count }, (_, i) => i * baseDelay);
|
|
3899
4056
|
}
|
|
3900
4057
|
function Spinner({ size = "md", variant = "primary", className = "", speed, ...props }) {
|
|
3901
|
-
const
|
|
3902
|
-
sm: "w-4 h-4 border-2",
|
|
3903
|
-
md: "w-8 h-8 border-2",
|
|
3904
|
-
lg: "w-12 h-12 border-4"
|
|
3905
|
-
};
|
|
4058
|
+
const sizeConfig = spinnerSizes[size];
|
|
3906
4059
|
const variantTopBorder = {
|
|
3907
4060
|
primary: "border-t-primary",
|
|
3908
4061
|
accent: "border-t-accent",
|
|
@@ -3916,7 +4069,7 @@ function Spinner({ size = "md", variant = "primary", className = "", speed, ...p
|
|
|
3916
4069
|
role: "status",
|
|
3917
4070
|
"aria-label": "Loading",
|
|
3918
4071
|
"data-variant": variant,
|
|
3919
|
-
className: `inline-block border-muted ${variantTopBorder} rounded-full animate-spin ${duration} ${
|
|
4072
|
+
className: `inline-block border-muted ${variantTopBorder} rounded-full animate-spin ${duration} ${sizeConfig.classes} ${sizeConfig.border} ${className}`,
|
|
3920
4073
|
...props,
|
|
3921
4074
|
children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
|
|
3922
4075
|
}
|
|
@@ -4199,12 +4352,15 @@ function DatePicker({
|
|
|
4199
4352
|
setIsOpen(!isOpen);
|
|
4200
4353
|
}
|
|
4201
4354
|
};
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
|
|
4205
|
-
|
|
4206
|
-
}
|
|
4207
|
-
const
|
|
4355
|
+
function getBaseHeightClass(heightClasses) {
|
|
4356
|
+
const classes = heightClasses.split(" ");
|
|
4357
|
+
const base = classes.find((cls) => /^h-\d+/.test(cls));
|
|
4358
|
+
return base || classes[0] || "";
|
|
4359
|
+
}
|
|
4360
|
+
const sizeConfig = interactiveSizes[size] || interactiveSizes.md;
|
|
4361
|
+
const containerClasses = `${getBaseHeightClass(sizeConfig.height)} ${sizeConfig.padding}`;
|
|
4362
|
+
const textClasses = sizeConfig.text;
|
|
4363
|
+
const iconSize = getIconPixels(size, "desktop");
|
|
4208
4364
|
return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative w-full ${className}`, children: [
|
|
4209
4365
|
/* @__PURE__ */ jsxs(
|
|
4210
4366
|
"div",
|
|
@@ -4215,8 +4371,8 @@ function DatePicker({
|
|
|
4215
4371
|
bg-background text-foreground
|
|
4216
4372
|
cursor-pointer
|
|
4217
4373
|
transition-all duration-200
|
|
4218
|
-
${
|
|
4219
|
-
${
|
|
4374
|
+
${containerClasses}
|
|
4375
|
+
${textClasses}
|
|
4220
4376
|
${isOpen ? "ring-2 ring-ring ring-offset-2" : "hover:border-ring"}
|
|
4221
4377
|
${disabled ? "opacity-50 cursor-not-allowed" : ""}
|
|
4222
4378
|
`.trim(),
|
|
@@ -4237,7 +4393,7 @@ function DatePicker({
|
|
|
4237
4393
|
placeholder,
|
|
4238
4394
|
readOnly: true,
|
|
4239
4395
|
disabled,
|
|
4240
|
-
className: `flex-1 min-w-0 bg-transparent outline-none cursor-pointer placeholder:text-muted-foreground ${
|
|
4396
|
+
className: `flex-1 min-w-0 bg-transparent outline-none cursor-pointer placeholder:text-muted-foreground ${textClasses}`,
|
|
4241
4397
|
"aria-label": "Selected date"
|
|
4242
4398
|
}
|
|
4243
4399
|
),
|
|
@@ -4253,8 +4409,8 @@ function DatePicker({
|
|
|
4253
4409
|
"svg",
|
|
4254
4410
|
{
|
|
4255
4411
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4256
|
-
width:
|
|
4257
|
-
height:
|
|
4412
|
+
width: iconSize - 2,
|
|
4413
|
+
height: iconSize - 2,
|
|
4258
4414
|
viewBox: "0 0 24 24",
|
|
4259
4415
|
fill: "none",
|
|
4260
4416
|
stroke: "currentColor",
|
|
@@ -4269,7 +4425,7 @@ function DatePicker({
|
|
|
4269
4425
|
)
|
|
4270
4426
|
}
|
|
4271
4427
|
) : clearable ? /* @__PURE__ */ jsx("div", { className: "w-6 h-6 flex-shrink-0" }) : null,
|
|
4272
|
-
/* @__PURE__ */ jsx(IconCalendar, { size:
|
|
4428
|
+
/* @__PURE__ */ jsx(IconCalendar, { size: iconSize, className: "text-muted-foreground flex-shrink-0" })
|
|
4273
4429
|
] })
|
|
4274
4430
|
]
|
|
4275
4431
|
}
|
|
@@ -4288,11 +4444,7 @@ function DatePicker({
|
|
|
4288
4444
|
DatePicker.displayName = "DatePicker";
|
|
4289
4445
|
var date_picker_default = DatePicker;
|
|
4290
4446
|
function Code({ children, size = "md", variant = "default", className = "" }) {
|
|
4291
|
-
const
|
|
4292
|
-
sm: "text-xs px-1 py-0.5",
|
|
4293
|
-
md: "text-sm px-1.5 py-0.5",
|
|
4294
|
-
lg: "text-base px-2 py-1"
|
|
4295
|
-
};
|
|
4447
|
+
const sizeClasses = codeSizes[size];
|
|
4296
4448
|
const variantClasses = {
|
|
4297
4449
|
default: "bg-muted text-foreground",
|
|
4298
4450
|
primary: "bg-primary/10 text-primary",
|
|
@@ -4305,7 +4457,7 @@ function Code({ children, size = "md", variant = "default", className = "" }) {
|
|
|
4305
4457
|
{
|
|
4306
4458
|
className: `
|
|
4307
4459
|
inline-block font-mono rounded border border-border/50
|
|
4308
|
-
${
|
|
4460
|
+
${sizeClasses}
|
|
4309
4461
|
${variantClasses[variant]}
|
|
4310
4462
|
${className}
|
|
4311
4463
|
`.trim(),
|
|
@@ -4466,11 +4618,8 @@ function Input({
|
|
|
4466
4618
|
size = "md",
|
|
4467
4619
|
validationState = "default"
|
|
4468
4620
|
}) {
|
|
4469
|
-
const
|
|
4470
|
-
|
|
4471
|
-
md: "h-12 sm:h-10 px-4 sm:px-3 py-2.5 sm:py-2 text-base sm:text-sm",
|
|
4472
|
-
lg: "h-14 sm:h-12 px-5 sm:px-4 py-3 text-lg sm:text-base"
|
|
4473
|
-
};
|
|
4621
|
+
const sizeConfig = interactiveSizes[size];
|
|
4622
|
+
const sizeClasses = `${sizeConfig.height} px-4 sm:px-3 ${sizeConfig.text}`;
|
|
4474
4623
|
const validationClasses = {
|
|
4475
4624
|
default: "border-input focus:border-ring",
|
|
4476
4625
|
error: "border-destructive focus:border-destructive",
|
|
@@ -4492,7 +4641,7 @@ function Input({
|
|
|
4492
4641
|
name,
|
|
4493
4642
|
required,
|
|
4494
4643
|
"aria-invalid": validationState === "error",
|
|
4495
|
-
className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 ${
|
|
4644
|
+
className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 ${sizeClasses} ${validationClasses[validationState]} ${className}`
|
|
4496
4645
|
}
|
|
4497
4646
|
);
|
|
4498
4647
|
}
|
|
@@ -4619,12 +4768,39 @@ function MultiSelect({
|
|
|
4619
4768
|
break;
|
|
4620
4769
|
}
|
|
4621
4770
|
};
|
|
4622
|
-
const
|
|
4623
|
-
|
|
4624
|
-
|
|
4625
|
-
|
|
4771
|
+
const sizeClasses = {
|
|
4772
|
+
xs: {
|
|
4773
|
+
container: interactiveSizes.xs.height.split(" ")[0].replace("h-", "min-h-") + " py-0.5 px-1.5",
|
|
4774
|
+
text: interactiveSizes.xs.text,
|
|
4775
|
+
chip: chipSizes.sm.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
|
|
4776
|
+
icon: getIconPixels("xs", "desktop")
|
|
4777
|
+
},
|
|
4778
|
+
sm: {
|
|
4779
|
+
container: interactiveSizes.sm.height.split(" ")[0].replace("h-", "min-h-") + " py-1 px-2",
|
|
4780
|
+
text: interactiveSizes.sm.text,
|
|
4781
|
+
chip: chipSizes.sm.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
|
|
4782
|
+
icon: getIconPixels("sm", "desktop")
|
|
4783
|
+
},
|
|
4784
|
+
md: {
|
|
4785
|
+
container: interactiveSizes.md.height.split(" ")[0].replace("h-", "min-h-") + " py-2 px-3",
|
|
4786
|
+
text: interactiveSizes.md.text,
|
|
4787
|
+
chip: chipSizes.md.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
|
|
4788
|
+
icon: getIconPixels("md", "desktop")
|
|
4789
|
+
},
|
|
4790
|
+
lg: {
|
|
4791
|
+
container: interactiveSizes.lg.height.split(" ")[0].replace("h-", "min-h-") + " py-2 px-4",
|
|
4792
|
+
text: interactiveSizes.lg.text,
|
|
4793
|
+
chip: chipSizes.lg.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
|
|
4794
|
+
icon: getIconPixels("lg", "desktop")
|
|
4795
|
+
},
|
|
4796
|
+
xl: {
|
|
4797
|
+
container: interactiveSizes.xl.height.split(" ")[0].replace("h-", "min-h-") + " py-2.5 px-5",
|
|
4798
|
+
text: interactiveSizes.xl.text,
|
|
4799
|
+
chip: chipSizes.lg.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
|
|
4800
|
+
icon: getIconPixels("xl", "desktop")
|
|
4801
|
+
}
|
|
4626
4802
|
};
|
|
4627
|
-
const currentSize =
|
|
4803
|
+
const currentSize = sizeClasses[size];
|
|
4628
4804
|
const getSelectedLabels = () => {
|
|
4629
4805
|
return selectedValues.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
|
|
4630
4806
|
};
|
|
@@ -4858,11 +5034,8 @@ function Select({
|
|
|
4858
5034
|
size = "md",
|
|
4859
5035
|
validationState = "default"
|
|
4860
5036
|
}) {
|
|
4861
|
-
const
|
|
4862
|
-
|
|
4863
|
-
md: "h-12 sm:h-10 px-4 sm:px-3 py-2.5 sm:py-2 text-base sm:text-sm pr-10",
|
|
4864
|
-
lg: "h-14 sm:h-12 px-5 sm:px-4 py-3 text-lg sm:text-base pr-10"
|
|
4865
|
-
};
|
|
5037
|
+
const sizeConfig = interactiveSizes[size];
|
|
5038
|
+
const sizeClasses = `${sizeConfig.height} px-4 sm:px-3 ${sizeConfig.text} pr-10`;
|
|
4866
5039
|
const validationClasses = {
|
|
4867
5040
|
default: "border-input focus:border-ring",
|
|
4868
5041
|
error: "border-destructive focus:border-destructive",
|
|
@@ -4880,7 +5053,7 @@ function Select({
|
|
|
4880
5053
|
name,
|
|
4881
5054
|
required,
|
|
4882
5055
|
"aria-invalid": validationState === "error",
|
|
4883
|
-
className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%236b7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%208l4%204%204-4%22%2F%3E%3C%2Fsvg%3E')] bg-[length:1.5em] bg-[right_0.5rem_center] bg-no-repeat ${
|
|
5056
|
+
className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%236b7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%208l4%204%204-4%22%2F%3E%3C%2Fsvg%3E')] bg-[length:1.5em] bg-[right_0.5rem_center] bg-no-repeat ${sizeClasses} ${validationClasses[validationState]} ${className}`,
|
|
4884
5057
|
children
|
|
4885
5058
|
}
|
|
4886
5059
|
);
|
|
@@ -5084,6 +5257,6 @@ function Code2({ children, block = false, variant = "default", className = "" })
|
|
|
5084
5257
|
Code2.displayName = "Code";
|
|
5085
5258
|
var code_default2 = Code2;
|
|
5086
5259
|
|
|
5087
|
-
export { accordion_default as Accordion, AccordionItem, alert_default as Alert, AuthProvider, avatar_default as Avatar, badge_default as Badge, breadcrumbs_default as Breadcrumbs, button_default as Button, button_group_default as ButtonGroup, button_with_icon_default as ButtonWithIcon, calendar_default as Calendar, card_default as Card, card_actions_default as CardActions, card_body_default as CardBody, card_figure_default as CardFigure, card_footer_default as CardFooter, card_header_default as CardHeader, card_title_default as CardTitle, checkbox_default as Checkbox, chip_default as Chip, code_default2 as Code, code_block_default as CodeBlock, code_default as CodeInput, color_mode_toggle_default as ColorModeToggle, container_default as Container, data_table_default as DataTable, date_picker_default as DatePicker, delete_dialog_default as DeleteDialog, dialog_default as Dialog, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, DropdownItem, empty_state_default as EmptyState, feature_section_default as FeatureSection, fieldset_default as Fieldset, footer_default as Footer, form_default as Form, form_field_default as FormField, grid_default as Grid, heading_default as Heading, hero_default as Hero, icon_default as Icon, icon_button_default as IconButton, input_default as Input, input_group_default as InputGroup, left_nav_item_default as LeftNavItem, left_nav_layout_default as LeftNavLayout, left_nav_section_default as LeftNavSection, link_default as Link, list_default as List, ListItem, Logo, modal_default as Modal, multi_select_default as MultiSelect, nav_default as Nav, nav_dropdown_default as NavDropdown, nav_dropdown_item_default as NavDropdownItem, navbar_default as Navbar, navbar_brand_default as NavbarBrand, navbar_link_default as NavbarLink, navbar_toggle_default as NavbarToggle, useOverlay_default as OverlayProvider, page_default as Page, page_header_default as PageHeader, page_transition_default as PageTransition, pagination_default as Pagination, popover_default as Popover, price_display_default as PriceDisplay, pricing_table_default as PricingTable, pricing_tier_default as PricingTier, progress_bar_default as ProgressBar, radio_default as Radio, radio_group_default as RadioGroup, section_default as Section, section_header_default as SectionHeader, select_default as Select, select_item_default as SelectItem, sidebar_default as Sidebar, skeleton_default as Skeleton, slider_default as Slider, smooth_transition_default as SmoothTransition, spinner_default as Spinner, stack_default as Stack, status_label_default as StatusLabel, stepper_default as Stepper, switch_default as Switch, table_default as Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, theme_provider_default as ThemeProvider, timeline_default as Timeline, TimelineItem, toast_default as Toast, tooltip_default as Tooltip, authFetch, checkAuthStatus, getCurrentUser, loginExternal, logoutExternal, openLoginPopup, redirectToLogin, useAuth, useScrollReset_default as useScrollReset, useStaggeredTransition, use_table_default as useTable, useTheme };
|
|
5260
|
+
export { accordion_default as Accordion, AccordionItem, alert_default as Alert, AuthProvider, avatar_default as Avatar, badge_default as Badge, breadcrumbs_default as Breadcrumbs, button_default as Button, button_group_default as ButtonGroup, button_with_icon_default as ButtonWithIcon, calendar_default as Calendar, card_default as Card, card_actions_default as CardActions, card_body_default as CardBody, card_figure_default as CardFigure, card_footer_default as CardFooter, card_header_default as CardHeader, card_title_default as CardTitle, checkbox_default as Checkbox, chip_default as Chip, code_default2 as Code, code_block_default as CodeBlock, code_default as CodeInput, color_mode_toggle_default as ColorModeToggle, container_default as Container, data_table_default as DataTable, date_picker_default as DatePicker, delete_dialog_default as DeleteDialog, dialog_default as Dialog, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, DropdownItem, empty_state_default as EmptyState, feature_section_default as FeatureSection, fieldset_default as Fieldset, footer_default as Footer, form_default as Form, form_field_default as FormField, grid_default as Grid, heading_default as Heading, hero_default as Hero, icon_default as Icon, icon_button_default as IconButton, input_default as Input, input_group_default as InputGroup, left_nav_item_default as LeftNavItem, left_nav_layout_default as LeftNavLayout, left_nav_section_default as LeftNavSection, link_default as Link, list_default as List, ListItem, Logo, modal_default as Modal, multi_select_default as MultiSelect, nav_default as Nav, nav_dropdown_default as NavDropdown, nav_dropdown_item_default as NavDropdownItem, navbar_default as Navbar, navbar_brand_default as NavbarBrand, navbar_link_default as NavbarLink, navbar_toggle_default as NavbarToggle, useOverlay_default as OverlayProvider, page_default as Page, page_header_default as PageHeader, page_transition_default as PageTransition, pagination_default as Pagination, popover_default as Popover, price_display_default as PriceDisplay, pricing_table_default as PricingTable, pricing_tier_default as PricingTier, progress_bar_default as ProgressBar, radio_default as Radio, radio_group_default as RadioGroup, section_default as Section, section_header_default as SectionHeader, select_default as Select, select_item_default as SelectItem, sidebar_default as Sidebar, skeleton_default as Skeleton, slider_default as Slider, smooth_transition_default as SmoothTransition, spinner_default as Spinner, stack_default as Stack, status_label_default as StatusLabel, stepper_default as Stepper, switch_default as Switch, table_default as Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, theme_provider_default as ThemeProvider, timeline_default as Timeline, TimelineItem, toast_default as Toast, tooltip_default as Tooltip, authFetch, avatarSizes, badgeSizes, borderRadius, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerMinHeights, containerMinWidths, containerSizes, gapSizes, getCurrentUser, getIconPixels, getVisualClasses, headingSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, statusLabelSizes, textSizes, useAuth, useScrollReset_default as useScrollReset, useStaggeredTransition, use_table_default as useTable, useTheme, visualSizes };
|
|
5088
5261
|
//# sourceMappingURL=index.js.map
|
|
5089
5262
|
//# sourceMappingURL=index.js.map
|