@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.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
- var sizeMap = {
115
- xs: 16,
116
- sm: 18,
117
- md: 22,
118
- lg: 26,
119
- xl: 30,
120
- "2xl": 36
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 = typeof size === "number" ? size : sizeMap[size] || sizeMap.md;
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 sizeClass = sizeClasses[size];
344
- return /* @__PURE__ */ jsx("img", { src: "/icons/logo.svg", alt: "Hydden Logo", className: `${sizeClass} ${className}`, loading: "lazy" });
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 minWidthClasses = {
375
- xs: "min-w-[20rem]",
376
- // 320px
377
- sm: "min-w-[24rem]",
378
- // 384px
379
- md: "min-w-[28rem]",
380
- // 448px
381
- lg: "min-w-[32rem]",
382
- // 512px
383
- xl: "min-w-[36rem]",
384
- // 576px
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 ${sizeClasses2[size]} ${paddingClasses[padding]} ${alignClasses[align]} ${minWidthClass} ${minHeightClass} ${className}`,
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 gapClasses = {
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
- ${gapClasses[gap]}
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 sizeClasses2 = {
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
- sizeClasses2[finalSize],
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[padding], variantClasses[variant], className].filter(Boolean).join(" ");
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[spacing]} ${alignClasses[align]} ${justifyClass} ${className}`,
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 sizeClasses2 = {
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" ? sizeClasses2[size] : ""} 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}`,
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 ? sizeClasses2[size] : "max-w-full",
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[padding]}
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 sizeClasses2 = {
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
- ${sizeClasses2[size]}
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 sizeClasses2 = {
1751
- xs: "h-8 sm:h-6 px-3 sm:px-2 text-sm sm:text-xs min-h-8 sm:min-h-6",
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} ${sizeClasses2[size]} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
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 sizeClasses2 = {
1810
- sm: "py-12 md:py-16",
1811
- md: "py-16 md:py-20",
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 ${sizeClasses2[size]} ${variantClasses[variant]} ${className}`, children: [
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 sizeClasses2 = {
1915
- sm: "text-base sm:text-sm",
1916
- md: "text-lg sm:text-base",
1917
- lg: "text-xl sm:text-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
- sizeClasses2[size],
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 sizeClasses2 = {
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 ${sizeClasses2[size]} ${className}`,
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 sizeClasses2 = {
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]} ${sizeClasses2[size]} ${className}`,
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 sizeClasses2 = {
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]} ${sizeClasses2[size].container} ${className}`,
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} ${sizeClasses2[size].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 sizeClasses2 = {
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
- ${sizeClasses2[size]}
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 sizeClasses2 = {
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} ${sizeClasses2[size]} ${className}`,
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
- const sizeClasses2 = {
4203
- sm: { container: "h-8 px-3", text: "text-sm", icon: 16 },
4204
- md: { container: "h-10 px-4", text: "text-base", icon: 18 },
4205
- lg: { container: "h-12 px-5", text: "text-lg", icon: 20 }
4206
- };
4207
- const currentSize = sizeClasses2[size];
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
- ${currentSize.container}
4219
- ${currentSize.text}
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 ${currentSize.text}`,
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: currentSize.icon - 2,
4257
- height: currentSize.icon - 2,
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: currentSize.icon, className: "text-muted-foreground flex-shrink-0" })
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 sizeClasses2 = {
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
- ${sizeClasses2[size]}
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 sizeClasses2 = {
4470
- sm: "h-10 sm:h-8 px-4 sm:px-3 py-2 sm:py-1.5 text-base sm:text-sm",
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 ${sizeClasses2[size]} ${validationClasses[validationState]} ${className}`
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 sizeClasses2 = {
4623
- sm: { container: "min-h-8 py-1 px-2", text: "text-sm", chip: "text-xs px-1.5 py-0.5", icon: 14 },
4624
- md: { container: "min-h-10 py-2 px-3", text: "text-base", chip: "text-sm px-2 py-1", icon: 16 },
4625
- lg: { container: "min-h-12 py-2 px-4", text: "text-lg", chip: "text-base px-2.5 py-1", icon: 18 }
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 = sizeClasses2[size];
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 sizeClasses2 = {
4862
- sm: "h-10 sm:h-8 px-4 sm:px-3 py-2 sm:py-1.5 text-base sm:text-sm",
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 ${sizeClasses2[size]} ${validationClasses[validationState]} ${className}`,
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