@dimasbaguspm/versaur 0.0.29 → 0.0.31

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.
Files changed (41) hide show
  1. package/dist/js/{bottom-sheet-BKd7WCCS.js → bottom-sheet-3W_vCYl6.js} +3 -2
  2. package/dist/js/{bottom-sheet-input-DrbGhcXv.js → bottom-sheet-input-CI-9wYa7.js} +634 -727
  3. package/dist/js/forms/index.js +1 -1
  4. package/dist/js/{image-rectangle-CF656HIm.js → image-rectangle-BpMI_fTE.js} +242 -542
  5. package/dist/js/index.js +27 -29
  6. package/dist/js/layouts/index.js +1 -1
  7. package/dist/js/navigation/index.js +1 -1
  8. package/dist/js/overlays/index.js +2 -2
  9. package/dist/js/primitive/index.js +15 -17
  10. package/dist/js/{tabs-DoiqKzR9.js → tabs-BOdkXJdy.js} +1 -1
  11. package/dist/js/{tooltip-D1-q8Ars.js → tooltip-C1P1eN0U.js} +65 -57
  12. package/dist/js/{top-bar-B4SZ2YZC.js → top-bar-sahvpzBv.js} +179 -166
  13. package/dist/types/forms/chip-multiple-input/chip-multiple-input.d.ts +2 -3
  14. package/dist/types/forms/chip-multiple-input/types.d.ts +1 -21
  15. package/dist/types/forms/chip-single-input/chip-single-input.d.ts +2 -3
  16. package/dist/types/forms/chip-single-input/types.d.ts +1 -9
  17. package/dist/types/layouts/page-header/page-header.atoms.d.ts +2 -1
  18. package/dist/types/layouts/page-header/page-header.d.ts +4 -0
  19. package/dist/types/layouts/page-header/types.d.ts +6 -0
  20. package/dist/types/overlays/menu/index.d.ts +1 -1
  21. package/dist/types/overlays/menu/menu.d.ts +4 -1
  22. package/dist/types/overlays/menu/types.d.ts +4 -2
  23. package/dist/types/overlays/menu/use-menu.d.ts +0 -1
  24. package/dist/types/primitive/button-menu/button-menu.d.ts +4 -0
  25. package/dist/types/primitive/button-menu/index.d.ts +2 -0
  26. package/dist/types/primitive/button-menu/types.d.ts +13 -0
  27. package/dist/types/primitive/card/card.atoms.d.ts +3 -0
  28. package/dist/types/primitive/card/card.d.ts +4 -23
  29. package/dist/types/primitive/card/types.d.ts +13 -2
  30. package/dist/types/primitive/index.d.ts +0 -2
  31. package/dist/utils/enforce-subpath-import.js +1 -2
  32. package/package.json +1 -1
  33. package/dist/types/primitive/calendar/calendar.atoms.d.ts +0 -13
  34. package/dist/types/primitive/calendar/calendar.d.ts +0 -8
  35. package/dist/types/primitive/calendar/index.d.ts +0 -2
  36. package/dist/types/primitive/calendar/types.d.ts +0 -54
  37. package/dist/types/primitive/calendar/use-calendar.d.ts +0 -18
  38. package/dist/types/primitive/description-list/description-list.atoms.d.ts +0 -13
  39. package/dist/types/primitive/description-list/description-list.d.ts +0 -6
  40. package/dist/types/primitive/description-list/index.d.ts +0 -2
  41. package/dist/types/primitive/description-list/types.d.ts +0 -46
@@ -1,7 +1,7 @@
1
1
  import { c as cva, j as jsxRuntimeExports, a as cn } from "./index-DOdDlCoL.js";
2
2
  import * as React from "react";
3
3
  import React__default, { forwardRef, useState, useEffect, useCallback, useRef, createContext, useContext } from "react";
4
- import { X, ChevronLeft, ChevronRight, XIcon, ImageOff } from "lucide-react";
4
+ import { X, XIcon, ImageOff } from "lucide-react";
5
5
  import { S as Skeleton } from "./skeleton-BNZyaRjo.js";
6
6
  const alertVariants = cva(
7
7
  "relative flex items-center gap-2 rounded-md p-2 text-sm transition-all duration-200",
@@ -147,14 +147,14 @@ const alertVariants = cva(
147
147
  icon: r,
148
148
  className: s,
149
149
  children: i,
150
- ...n
151
- }, o) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
150
+ ...o
151
+ }, n) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
152
152
  "div",
153
153
  {
154
- ref: o,
154
+ ref: n,
155
155
  role: "alert",
156
156
  className: cn(alertVariants({ variant: e, color: t }), s),
157
- ...n,
157
+ ...o,
158
158
  children: [
159
159
  r && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, { children: r }),
160
160
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: i })
@@ -227,17 +227,17 @@ const alertVariants = cva(
227
227
  color: r = "primary",
228
228
  fontSize: s = "base",
229
229
  fontWeight: i = "medium",
230
- quiet: n = !1,
231
- ...o
230
+ quiet: o = !1,
231
+ ...n
232
232
  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
233
233
  "a",
234
234
  {
235
235
  ref: a,
236
236
  className: cn(
237
- anchorVariants({ color: r, fontSize: s, fontWeight: i, quiet: n }),
237
+ anchorVariants({ color: r, fontSize: s, fontWeight: i, quiet: o }),
238
238
  t
239
239
  ),
240
- ...o,
240
+ ...n,
241
241
  children: e
242
242
  }
243
243
  )
@@ -317,16 +317,16 @@ const alertVariants = cva(
317
317
  hasUnderline: r = !1,
318
318
  isCapitalize: s = !1,
319
319
  align: i = "left",
320
- italic: n = !1,
321
- clamp: o = "none",
320
+ italic: o = !1,
321
+ clamp: n = "none",
322
322
  ellipsis: a = !1,
323
323
  fontSize: l,
324
324
  fontWeight: c,
325
- className: x,
326
- children: h,
327
- ...d
328
- }, p) => {
329
- const f = [
325
+ className: u,
326
+ children: d,
327
+ ...g
328
+ }, f) => {
329
+ const x = [
330
330
  "h1",
331
331
  "h2",
332
332
  "h3",
@@ -336,35 +336,35 @@ const alertVariants = cva(
336
336
  "p",
337
337
  "span",
338
338
  "label"
339
- ].includes(e) ? e : "span", v = l ? `text-${l}` : "", w = c ? `font-${c}` : "";
339
+ ].includes(e) ? e : "span", m = l ? `text-${l}` : "", h = c ? `font-${c}` : "";
340
340
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
341
341
  e,
342
342
  {
343
- ref: p,
343
+ ref: f,
344
344
  className: cn(
345
345
  textVariants({
346
346
  color: t,
347
347
  hasUnderline: r,
348
348
  isCapitalize: s,
349
349
  align: i,
350
- italic: n,
351
- clamp: o,
350
+ italic: o,
351
+ clamp: n,
352
352
  ellipsis: a,
353
353
  // @ts-expect-error - `as` is not a valid variant
354
- as: f
354
+ as: x
355
355
  }),
356
- v,
357
- w,
358
- x
356
+ m,
357
+ h,
358
+ u
359
359
  ),
360
- ...d,
361
- children: h
360
+ ...g,
361
+ children: d
362
362
  }
363
363
  );
364
364
  }
365
365
  ), Attribute = forwardRef(
366
- function({ title: t, children: r, className: s, ...i }, n) {
367
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: n, className: cn("space-y-1", s), ...i, children: [
366
+ function({ title: t, children: r, className: s, ...i }, o) {
367
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: o, className: cn("space-y-1", s), ...i, children: [
368
368
  /* @__PURE__ */ jsxRuntimeExports.jsx(
369
369
  Text,
370
370
  {
@@ -380,7 +380,7 @@ const alertVariants = cva(
380
380
  ] });
381
381
  }
382
382
  );
383
- function getColSpan$1(e = 1) {
383
+ function getColSpan(e = 1) {
384
384
  switch (e) {
385
385
  case 1:
386
386
  return "col-span-1";
@@ -440,17 +440,17 @@ function getGridCols(e = 4) {
440
440
  return "grid-cols-4";
441
441
  }
442
442
  }
443
- const AttributeListItem = forwardRef(function({ children: t, className: r, span: s = 1, title: i, ...n }, o) {
444
- const a = getColSpan$1(s);
445
- return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: o, className: cn(a, r), ...n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: i, children: t }) });
443
+ const AttributeListItem = forwardRef(function({ children: t, className: r, span: s = 1, title: i, ...o }, n) {
444
+ const a = getColSpan(s);
445
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: n, className: cn(a, r), ...o, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: i, children: t }) });
446
446
  }), AttributeListRoot = forwardRef(
447
- function({ children: t, className: r, columns: s = 4, ...i }, n) {
448
- const o = getGridCols(s);
447
+ function({ children: t, className: r, columns: s = 4, ...i }, o) {
448
+ const n = getGridCols(s);
449
449
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
450
450
  "ul",
451
451
  {
452
- ref: n,
453
- className: cn("grid gap-4", o, r),
452
+ ref: o,
453
+ className: cn("grid gap-4", n, r),
454
454
  ...i,
455
455
  children: t
456
456
  }
@@ -477,10 +477,10 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
477
477
  },
478
478
  size: {
479
479
  xs: "h-6 w-6 text-xs",
480
- sm: "h-8 w-8 text-xs",
481
- md: "h-10 w-10 text-sm",
482
- lg: "h-12 w-12 text-base",
483
- xl: "h-16 w-16 text-xl"
480
+ sm: "h-7 w-7 text-xs",
481
+ md: "h-9 w-9 text-sm",
482
+ lg: "h-10 w-10 text-base",
483
+ xl: "h-12 w-12 text-xl"
484
484
  },
485
485
  shape: {
486
486
  circle: "rounded-full",
@@ -503,19 +503,19 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
503
503
  shape: r = "circle",
504
504
  className: s,
505
505
  children: i,
506
- ...n
507
- }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
506
+ ...o
507
+ }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
508
508
  "div",
509
509
  {
510
- ref: o,
510
+ ref: n,
511
511
  className: cn(avatarVariants({ variant: e, size: t, shape: r }), s),
512
- ...n,
512
+ ...o,
513
513
  children: i
514
514
  }
515
515
  )
516
516
  ), AvatarImage = forwardRef(
517
- ({ src: e, alt: t, className: r, onError: s, ...i }, n) => {
518
- const [o, a] = useState(!1);
517
+ ({ src: e, alt: t, className: r, onError: s, ...i }, o) => {
518
+ const [n, a] = useState(!1);
519
519
  useEffect(() => {
520
520
  a(!1);
521
521
  }, [e]);
@@ -525,10 +525,10 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
525
525
  },
526
526
  [s]
527
527
  );
528
- return o ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
528
+ return n ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
529
529
  "img",
530
530
  {
531
- ref: n,
531
+ ref: o,
532
532
  src: e,
533
533
  alt: t,
534
534
  className: cn(avatarImageVariants(), r),
@@ -702,12 +702,12 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
702
702
  color: r = "primary",
703
703
  size: s = "md",
704
704
  iconLeft: i,
705
- iconRight: n,
706
- className: o,
705
+ iconRight: o,
706
+ className: n,
707
707
  children: a,
708
708
  ...l
709
709
  }, c) => {
710
- const d = !(a != null && a !== "") && !!(i || n);
710
+ const g = !(a != null && a !== "") && !!(i || o);
711
711
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
712
712
  "span",
713
713
  {
@@ -718,20 +718,20 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
718
718
  color: r,
719
719
  shape: t,
720
720
  size: s,
721
- iconOnly: d
721
+ iconOnly: g
722
722
  }),
723
- o
723
+ n
724
724
  ),
725
725
  ...l,
726
- children: d ? (
726
+ children: g ? (
727
727
  // Icon-only mode: display only the icon
728
- i || n
728
+ i || o
729
729
  ) : (
730
730
  // Normal mode: display icon(s) and text
731
731
  /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
732
732
  i,
733
733
  a,
734
- n
734
+ o
735
735
  ] })
736
736
  )
737
737
  }
@@ -741,8 +741,8 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
741
741
  variants: {
742
742
  size: {
743
743
  xs: "h-6 w-6",
744
- sm: "h-6 w-6",
745
- md: "h-8 w-8",
744
+ sm: "h-7 w-7",
745
+ md: "h-9 w-9",
746
746
  lg: "h-10 w-10",
747
747
  xl: "h-12 w-12"
748
748
  }
@@ -752,13 +752,13 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
752
752
  }
753
753
  }), BrandLogo = forwardRef(
754
754
  ({ shape: e = "square", size: t, ...r }, s) => {
755
- const n = {
755
+ const o = {
756
756
  square: SvgSpenicleSquare,
757
757
  rounded: SvgSpenicleRounded,
758
758
  circle: SvgSpenicleCircle
759
759
  }[e] || SvgSpenicleSquare;
760
760
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
761
- n,
761
+ o,
762
762
  {
763
763
  ref: s,
764
764
  ...r,
@@ -832,21 +832,21 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
832
832
  variant: r = "primary",
833
833
  size: s = "md",
834
834
  disabled: i = !1,
835
- type: n = "button",
836
- children: o,
835
+ type: o = "button",
836
+ children: n,
837
837
  ...a
838
838
  }, l) {
839
839
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
840
840
  "button",
841
841
  {
842
842
  ref: l,
843
- type: n,
843
+ type: o,
844
844
  className: cn(buttonVariants({ variant: r, size: s }), t),
845
845
  disabled: i,
846
846
  "aria-disabled": i,
847
847
  inert: i ? !0 : void 0,
848
848
  ...a,
849
- children: o
849
+ children: n
850
850
  }
851
851
  );
852
852
  }
@@ -918,21 +918,21 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
918
918
  }
919
919
  );
920
920
  function useFloatingPosition(e, t = "1rem") {
921
- const r = useRef(null), [s, i] = useState({}), [n, o] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
921
+ const r = useRef(null), [s, i] = useState({}), [o, n] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
922
922
  const c = r.current;
923
923
  if (!c) return;
924
- const h = c.getBoundingClientRect().height > window.innerHeight;
925
- let d = {}, p = "";
926
- h ? (d = {
924
+ const d = c.getBoundingClientRect().height > window.innerHeight;
925
+ let g = {}, f = "";
926
+ d ? (g = {
927
927
  position: "fixed",
928
928
  bottom: t,
929
929
  zIndex: 50,
930
930
  transform: `translateY(${c.scrollTop}px)`
931
- }, p = `fixed bottom-4 ${e}-4`) : (d = {
931
+ }, f = `fixed bottom-4 ${e}-4`) : (g = {
932
932
  position: "fixed",
933
933
  bottom: t,
934
934
  zIndex: 50
935
- }, p = `fixed bottom-4 ${e}-4`), i(d), o(p);
935
+ }, f = `fixed bottom-4 ${e}-4`), i(g), n(f);
936
936
  }, [e, t]);
937
937
  return useEffect(() => {
938
938
  a();
@@ -947,7 +947,7 @@ function useFloatingPosition(e, t = "1rem") {
947
947
  r.current = c, c && a();
948
948
  },
949
949
  [a]
950
- ), s, n];
950
+ ), s, o];
951
951
  }
952
952
  const ButtonFloat = forwardRef(
953
953
  function({
@@ -955,28 +955,28 @@ const ButtonFloat = forwardRef(
955
955
  variant: r = "primary",
956
956
  size: s = "md",
957
957
  side: i = "right",
958
- offset: n = "1rem",
959
- ...o
958
+ offset: o = "1rem",
959
+ ...n
960
960
  }, a) {
961
- const [l, c, x] = useFloatingPosition(
961
+ const [l, c, u] = useFloatingPosition(
962
962
  i,
963
- n
964
- ), [h, d] = useState(!1);
963
+ o
964
+ ), [d, g] = useState(!1);
965
965
  return useEffect(() => {
966
- d(!0);
966
+ g(!0);
967
967
  }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: l, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
968
968
  "button",
969
969
  {
970
970
  ref: a,
971
- type: o.type || "button",
971
+ type: n.type || "button",
972
972
  className: cn(
973
973
  buttonFloatVariants({ variant: r, size: s }),
974
- x,
975
- h && "animate-fab-in",
974
+ u,
975
+ d && "animate-fab-in",
976
976
  t
977
977
  ),
978
978
  style: c,
979
- ...o
979
+ ...n
980
980
  }
981
981
  ) });
982
982
  }
@@ -1017,7 +1017,7 @@ function getIconColorFromVariant(e = "primary") {
1017
1017
  }
1018
1018
  }
1019
1019
  const buttonIconVariants = cva(
1020
- "inline-flex items-center justify-center font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] select-none",
1020
+ "inline-flex items-center justify-center font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] select-none cursor-pointer",
1021
1021
  {
1022
1022
  variants: {
1023
1023
  variant: {
@@ -1026,36 +1026,36 @@ const buttonIconVariants = cva(
1026
1026
  tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
1027
1027
  ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
1028
1028
  neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white shadow-sm",
1029
- "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
1030
- "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
1031
- "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
1032
- "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
1029
+ "primary-outline": "border border-border text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
1030
+ "secondary-outline": "border border-border text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
1031
+ "tertiary-outline": "border border-border text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
1032
+ "ghost-outline": "border border-border text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
1033
1033
  "neutral-outline": "border border-border text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-light focus-visible:ring-offset-white transition-all",
1034
1034
  "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
1035
1035
  "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
1036
1036
  "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary/20 focus-visible:ring-tertiary focus-visible:ring-offset-white",
1037
1037
  "neutral-ghost": "text-foreground bg-white hover:bg-neutral/50 focus-visible:ring-foreground focus-visible:ring-offset-white",
1038
1038
  success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
1039
- "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
1039
+ "success-outline": "border border-border text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
1040
1040
  "success-ghost": "text-success bg-white hover:bg-success/20 focus-visible:ring-success-light focus-visible:ring-offset-white",
1041
1041
  info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
1042
- "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
1042
+ "info-outline": "border border-border text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
1043
1043
  "info-ghost": "text-info bg-white hover:bg-info/20 focus-visible:ring-info-light focus-visible:ring-offset-white",
1044
1044
  warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
1045
- "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
1045
+ "warning-outline": "border border-border text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
1046
1046
  "warning-ghost": "text-warning bg-white hover:bg-warning/20 focus-visible:ring-warning-light focus-visible:ring-offset-white",
1047
1047
  danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
1048
- "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
1048
+ "danger-outline": "border border-border text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
1049
1049
  "danger-ghost": "text-danger bg-white hover:bg-danger/20 focus-visible:ring-danger-light focus-visible:ring-offset-white",
1050
1050
  outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
1051
1051
  destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
1052
1052
  },
1053
1053
  size: {
1054
1054
  xs: "h-6 w-6",
1055
- sm: "h-8 w-8",
1056
- md: "h-10 w-10",
1057
- lg: "h-12 w-12",
1058
- xl: "h-14 w-14"
1055
+ sm: "h-7 w-7",
1056
+ md: "h-9 w-9",
1057
+ lg: "h-10 w-10",
1058
+ xl: "h-12 w-12"
1059
1059
  },
1060
1060
  shape: {
1061
1061
  rounded: "rounded-md",
@@ -1098,13 +1098,13 @@ const buttonIconVariants = cva(
1098
1098
  size: "md",
1099
1099
  color: "primary"
1100
1100
  }
1101
- }), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: i, ...n }, o) {
1101
+ }), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: i, ...o }, n) {
1102
1102
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
1103
1103
  t,
1104
1104
  {
1105
- ref: o,
1105
+ ref: n,
1106
1106
  className: iconVariants({ color: r, size: s, className: i }),
1107
- ...n
1107
+ ...o
1108
1108
  }
1109
1109
  );
1110
1110
  }), ButtonIcon = React__default.forwardRef(
@@ -1113,8 +1113,8 @@ const buttonIconVariants = cva(
1113
1113
  variant: r = "primary",
1114
1114
  size: s = "md",
1115
1115
  shape: i = "rounded",
1116
- disabled: n = !1,
1117
- as: o,
1116
+ disabled: o = !1,
1117
+ as: n,
1118
1118
  "aria-label": a,
1119
1119
  ...l
1120
1120
  }, c) {
@@ -1131,16 +1131,16 @@ const buttonIconVariants = cva(
1131
1131
  }),
1132
1132
  t
1133
1133
  ),
1134
- disabled: n,
1135
- "aria-disabled": n,
1134
+ disabled: o,
1135
+ "aria-disabled": o,
1136
1136
  "aria-label": a,
1137
- inert: n ? !0 : void 0,
1137
+ inert: o ? !0 : void 0,
1138
1138
  ...l,
1139
1139
  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1140
1140
  Icon,
1141
1141
  {
1142
- as: o,
1143
- size: s,
1142
+ as: n,
1143
+ size: "sm",
1144
1144
  color: getIconColorFromVariant(r)
1145
1145
  }
1146
1146
  )
@@ -1264,8 +1264,8 @@ const BUTTONS = [
1264
1264
  disabled: r,
1265
1265
  className: s,
1266
1266
  "aria-label": i
1267
- }, n) => {
1268
- const { input: o, inputRef: a, handleButton: l, handleInput: c } = useCalculator({
1267
+ }, o) => {
1268
+ const { input: n, inputRef: a, handleButton: l, handleInput: c } = useCalculator({
1269
1269
  initialValue: e,
1270
1270
  disabled: r,
1271
1271
  onChange: t
@@ -1273,7 +1273,7 @@ const BUTTONS = [
1273
1273
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
1274
1274
  "div",
1275
1275
  {
1276
- ref: n,
1276
+ ref: o,
1277
1277
  className: cn(calculatorRootVariants({ disabled: r }), s),
1278
1278
  "aria-label": i || "Calculator",
1279
1279
  role: "region",
@@ -1283,14 +1283,14 @@ const BUTTONS = [
1283
1283
  {
1284
1284
  ref: a,
1285
1285
  className: "w-full mb-3 px-3 py-2 rounded border border-[var(--color-neutral)] bg-[var(--color-neutral-soft)] text-right text-xl font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]",
1286
- value: o,
1286
+ value: n,
1287
1287
  onChange: c,
1288
1288
  disabled: r,
1289
1289
  inputMode: "decimal",
1290
1290
  "aria-label": "Calculator input"
1291
1291
  }
1292
1292
  ),
1293
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((x, h) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: x.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
1293
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((u, d) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: u.map((g) => g === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
1294
1294
  ButtonIcon,
1295
1295
  {
1296
1296
  as: X,
@@ -1304,286 +1304,22 @@ const BUTTONS = [
1304
1304
  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
1305
1305
  CalculatorButton,
1306
1306
  {
1307
- variant: d === "=" ? "action" : d === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(d) ? "operator" : "default",
1308
- onClick: () => l(d),
1307
+ variant: g === "=" ? "action" : g === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(g) ? "operator" : "default",
1308
+ onClick: () => l(g),
1309
1309
  disabled: r,
1310
- "aria-label": d,
1311
- children: d
1310
+ "aria-label": g,
1311
+ children: g
1312
1312
  },
1313
- d
1314
- )) }, h)) })
1313
+ g
1314
+ )) }, d)) })
1315
1315
  ]
1316
1316
  }
1317
1317
  );
1318
1318
  }
1319
1319
  );
1320
1320
  Calculator.displayName = "Calculator";
1321
- const CalendarContext = createContext(null);
1322
- function useCalendarContext() {
1323
- const e = useContext(CalendarContext);
1324
- if (!e)
1325
- throw new Error(
1326
- "useCalendarContext must be used within CalendarContext.Provider"
1327
- );
1328
- return e;
1329
- }
1330
- const CalendarHeader = () => {
1331
- const { value: e, year: t, month: r, setMonth: s } = useCalendarContext();
1332
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-4 pt-4 pb-2", children: [
1333
- /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "base", fontWeight: "semibold", className: "ml-2", children: e ? e instanceof Date ? e.toLocaleDateString(void 0, {
1334
- year: "numeric",
1335
- month: "long"
1336
- }) : Array.isArray(e) && e[0] ? e[0].toLocaleDateString(void 0, {
1337
- year: "numeric",
1338
- month: "long"
1339
- }) : `${t} ${new Date(t, r).toLocaleString(void 0, { month: "long" })}` : `${t} ${new Date(t, r).toLocaleString(void 0, { month: "long" })}` }),
1340
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
1341
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1342
- ButtonIcon,
1343
- {
1344
- as: ChevronLeft,
1345
- variant: "ghost",
1346
- size: "sm",
1347
- "aria-label": "Previous month",
1348
- onClick: () => s(r === 0 ? 11 : r - 1)
1349
- }
1350
- ),
1351
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1352
- ButtonIcon,
1353
- {
1354
- as: ChevronRight,
1355
- variant: "ghost",
1356
- size: "sm",
1357
- "aria-label": "Next month",
1358
- onClick: () => s(r === 11 ? 0 : r + 1)
1359
- }
1360
- )
1361
- ] })
1362
- ] });
1363
- }, CalendarWeekdays = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 px-4 text-ghost-500 mb-3", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((e) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "xs", color: "ghost", align: "center", children: e }, e)) }), CalendarDaysSingle = () => {
1364
- const e = useCalendarContext(), { year: t, month: r, value: s, onChange: i, setMonth: n, setYear: o } = e, a = (g, m) => new Date(g, m + 1, 0).getDate(), c = ((g, m) => new Date(g, m, 1).getDay())(t, r), x = a(t, r), h = r - 1 < 0 ? 11 : r - 1, d = r === 0 ? t - 1 : t, p = a(t, h), y = r === 11 ? 0 : r + 1, f = r === 11 ? t + 1 : t, v = [];
1365
- for (let g = 0; g < c; g++) {
1366
- const m = p - c + g + 1;
1367
- v.push(
1368
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1369
- ButtonIcon,
1370
- {
1371
- as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: m }),
1372
- size: "sm",
1373
- "aria-label": "Previous month day",
1374
- variant: "ghost",
1375
- onClick: () => {
1376
- i?.(new Date(d, h, m)), n(h), o(d);
1377
- }
1378
- },
1379
- "prev-" + g
1380
- )
1381
- );
1382
- }
1383
- for (let g = 1; g <= x; g++) {
1384
- const m = s instanceof Date && s.getFullYear() === t && s.getMonth() === r && s.getDate() === g;
1385
- v.push(
1386
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1387
- ButtonIcon,
1388
- {
1389
- as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
1390
- Text,
1391
- {
1392
- as: "span",
1393
- fontSize: "sm",
1394
- color: m ? "inherit" : "ghost",
1395
- className: m ? "bg-primary text-white rounded-full" : "",
1396
- children: g
1397
- }
1398
- ),
1399
- variant: m ? "primary" : "ghost",
1400
- size: "sm",
1401
- "aria-label": `Select ${t}-${r + 1}-${g}`,
1402
- "aria-current": m ? "date" : void 0,
1403
- onClick: () => {
1404
- i?.(new Date(t, r, g));
1405
- }
1406
- },
1407
- g
1408
- )
1409
- );
1410
- }
1411
- const w = c + x;
1412
- for (let g = 0; g < (w % 7 === 0 ? 0 : 7 - w % 7); g++)
1413
- v.push(
1414
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1415
- ButtonIcon,
1416
- {
1417
- as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: g + 1 }),
1418
- size: "sm",
1419
- "aria-label": "Next month day",
1420
- variant: "ghost",
1421
- onClick: () => {
1422
- i?.(new Date(f, y, g + 1)), n(y), o(f);
1423
- }
1424
- },
1425
- "next-" + g
1426
- )
1427
- );
1428
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: v });
1429
- }, CalendarDaysRange = () => {
1430
- const { year: e, month: t, value: r, onChange: s, setMonth: i, setYear: n } = useCalendarContext(), o = (u, b) => new Date(u, b + 1, 0).getDate(), l = ((u, b) => new Date(u, b, 1).getDay())(e, t), c = o(e, t), x = t - 1 < 0 ? 11 : t - 1, h = t === 0 ? e - 1 : e, d = o(e, x), p = t === 11 ? 0 : t + 1, y = t === 11 ? e + 1 : e, f = [], v = () => {
1431
- if (!Array.isArray(r)) return [null, null];
1432
- const [u, b] = r;
1433
- return !u && !b ? [null, null] : u && b ? u <= b ? [u, b] : [b, u] : [u, b];
1434
- }, [w, g] = v(), m = (u) => {
1435
- if (!w || !g) return !1;
1436
- const b = new Date(e, t, u);
1437
- return b >= w && b <= g;
1438
- }, S = (u) => w ? w.getFullYear() === e && w.getMonth() === t && w.getDate() === u : !1, I = (u) => g ? g.getFullYear() === e && g.getMonth() === t && g.getDate() === u : !1;
1439
- for (let u = 0; u < l; u++) {
1440
- const b = d - l + u + 1;
1441
- f.push(
1442
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1443
- ButtonIcon,
1444
- {
1445
- as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: b }),
1446
- size: "sm",
1447
- "aria-label": "Previous month day",
1448
- variant: "ghost",
1449
- onClick: () => {
1450
- s?.([null, null]), i(x), n(h);
1451
- }
1452
- },
1453
- "prev-" + u
1454
- )
1455
- );
1456
- }
1457
- for (let u = 1; u <= c; u++) {
1458
- const b = m(u), E = S(u), C = I(u);
1459
- f.push(
1460
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1461
- ButtonIcon,
1462
- {
1463
- as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
1464
- Text,
1465
- {
1466
- as: "span",
1467
- fontSize: "sm",
1468
- color: b || E || C ? "inherit" : "ghost",
1469
- className: cn(
1470
- b && " bg-primary text-white",
1471
- E && "rounded-l-full bg-primary text-white",
1472
- C && "rounded-r-full bg-primary text-white"
1473
- ),
1474
- children: u
1475
- }
1476
- ),
1477
- variant: E || C || b ? "primary" : "ghost",
1478
- size: "sm",
1479
- "aria-label": `Select ${e}-${t + 1}-${u}`,
1480
- "aria-current": E || C ? "date" : void 0,
1481
- onClick: () => {
1482
- if (!Array.isArray(r) || !r[0] || r[0] && r[1])
1483
- s?.([new Date(e, t, u), null]);
1484
- else if (r[0] && !r[1]) {
1485
- const j = r[0], R = new Date(e, t, u);
1486
- j.getTime() === R.getTime() ? s?.([j, R]) : s?.(j < R ? [j, R] : [R, j]);
1487
- }
1488
- }
1489
- },
1490
- u
1491
- )
1492
- );
1493
- }
1494
- const N = l + c;
1495
- for (let u = 0; u < (N % 7 === 0 ? 0 : 7 - N % 7); u++)
1496
- f.push(
1497
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1498
- ButtonIcon,
1499
- {
1500
- as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: u + 1 }),
1501
- size: "sm",
1502
- "aria-label": "Next month day",
1503
- variant: "ghost",
1504
- onClick: () => {
1505
- s?.([null, null]), i(p), n(y);
1506
- }
1507
- },
1508
- "next-" + u
1509
- )
1510
- );
1511
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: f });
1512
- }, CalendarDays = () => {
1513
- const { type: e } = useCalendarContext();
1514
- return e === "range" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDaysRange, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDaysSingle, {});
1515
- };
1516
- function useCalendar({
1517
- value: e,
1518
- type: t,
1519
- onChange: r,
1520
- initialYear: s,
1521
- initialMonth: i
1522
- }) {
1523
- const [n, o] = useState(i), [a, l] = useState(s), [c, x] = useState([
1524
- null,
1525
- null
1526
- ]);
1527
- let h = e;
1528
- t === "range" && !e && (h = c);
1529
- const d = useCallback(() => {
1530
- const f = n === 0 ? 11 : n - 1, v = n === 0 ? a - 1 : a;
1531
- o(f), l(v), t === "single" && r?.(new Date(v, f, 1));
1532
- }, [n, a, t, r]), p = useCallback(() => {
1533
- const f = n === 11 ? 0 : n + 1, v = n === 11 ? a + 1 : a;
1534
- o(f), l(v), t === "single" && r?.(new Date(v, f, 1));
1535
- }, [n, a, t, r]), y = useCallback(
1536
- (f) => {
1537
- t === "single" ? r?.(f) : t === "range" && (x(f), r?.(f));
1538
- },
1539
- [t, r]
1540
- );
1541
- return {
1542
- year: a,
1543
- month: n,
1544
- value: h,
1545
- setMonth: o,
1546
- setYear: l,
1547
- onChange: y,
1548
- handlePrevMonth: d,
1549
- handleNextMonth: p
1550
- };
1551
- }
1552
- const CalendarRoot = ({
1553
- value: e,
1554
- onChange: t,
1555
- className: r,
1556
- type: s = "single",
1557
- ...i
1558
- }) => {
1559
- const n = /* @__PURE__ */ new Date(), o = useCalendar({
1560
- value: e,
1561
- onChange: t,
1562
- type: s,
1563
- initialYear: n.getFullYear(),
1564
- initialMonth: n.getMonth()
1565
- });
1566
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
1567
- CalendarContext.Provider,
1568
- {
1569
- value: {
1570
- year: o.year,
1571
- month: o.month,
1572
- value: o.value,
1573
- type: s,
1574
- setMonth: o.setMonth,
1575
- setYear: o.setYear,
1576
- onChange: o.onChange
1577
- },
1578
- children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", r), ...i, children: [
1579
- /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarHeader, {}),
1580
- /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarWeekdays, {}),
1581
- /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, {})
1582
- ] })
1583
- }
1584
- );
1585
- }, Calendar = Object.assign(CalendarRoot, {}), cardVariants = cva(
1586
- "block transition-colors duration-200 cursor-pointer",
1321
+ const cardVariants = cva(
1322
+ "block transition-colors duration-200 cursor-pointer w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light hover:bg-gray-50",
1587
1323
  {
1588
1324
  variants: {
1589
1325
  size: {
@@ -1596,90 +1332,66 @@ const CalendarRoot = ({
1596
1332
  shape: {
1597
1333
  rounded: "rounded-lg",
1598
1334
  square: "rounded-none"
1599
- }
1600
- },
1601
- defaultVariants: {
1602
- size: "md",
1603
- shape: "rounded"
1604
- }
1605
- }
1606
- ), tileVariants = cva(
1607
- // Base classes
1608
- "block transition-colors duration-200",
1609
- {
1610
- variants: {
1611
- variant: {
1612
- white: "bg-white border border-border",
1613
- neutral: "bg-neutral border border-gray-200",
1614
- primary: "bg-primary-soft border border-primary",
1615
- secondary: "bg-secondary-soft border border-secondary",
1616
- tertiary: "bg-tertiary-soft border border-tertiary",
1617
- ghost: "bg-transparent border border-ghost",
1618
- success: "bg-success-soft border border-success",
1619
- info: "bg-info-soft border border-info",
1620
- warning: "bg-warning-soft border border-warning",
1621
- danger: "bg-danger-soft border border-danger"
1622
- },
1623
- size: {
1624
- xs: "p-2",
1625
- sm: "p-3",
1626
- md: "p-4",
1627
- lg: "p-6",
1628
- xl: "p-8"
1629
1335
  },
1630
- shape: {
1631
- rounded: "rounded-lg",
1632
- square: "rounded-none"
1336
+ bordered: {
1337
+ true: "border border-border",
1338
+ false: ""
1633
1339
  }
1634
1340
  },
1635
1341
  defaultVariants: {
1636
- variant: "white",
1637
1342
  size: "md",
1638
- shape: "rounded"
1343
+ shape: "rounded",
1344
+ bordered: !1
1639
1345
  }
1640
1346
  }
1641
- ), Tile = forwardRef(
1642
- ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...i }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1643
- "div",
1347
+ ), CardList = forwardRef(
1348
+ ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: t, className: "inline-flex items-center", children: e })
1349
+ ), CardListItem = forwardRef(
1350
+ ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1351
+ "li",
1644
1352
  {
1645
- ref: n,
1646
- className: cn(tileVariants({ variant: e, size: t, shape: r }), s),
1647
- ...i
1353
+ ref: t,
1354
+ className: "flex items-center after:content-[''] after:inline-block after:mx-2 after:w-1 after:h-1 after:rounded-full after:bg-ghost last:after:hidden",
1355
+ children: e
1648
1356
  }
1649
1357
  )
1650
- ), Card = forwardRef(
1358
+ ), CardRoot = forwardRef(
1651
1359
  ({
1652
1360
  size: e = "md",
1653
1361
  shape: t = "rounded",
1654
1362
  avatar: r,
1655
1363
  title: s,
1656
1364
  subtitle: i,
1657
- badge: n,
1658
- supplementaryInfo: o,
1659
- className: a,
1660
- ...l
1661
- }, c) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1662
- Tile,
1365
+ badge: o,
1366
+ supplementaryInfo: n,
1367
+ bordered: a = !1,
1368
+ className: l,
1369
+ ...c
1370
+ }, u) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1371
+ "button",
1663
1372
  {
1664
- ref: c,
1665
- className: cn(cardVariants({ size: e, shape: t }), a),
1666
- ...l,
1373
+ ref: u,
1374
+ className: cn(cardVariants({ size: e, shape: t, bordered: a }), l),
1375
+ ...c,
1667
1376
  children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
1668
1377
  r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r }),
1669
1378
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
1670
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("mb-4", !n && !o && "mb-0"), children: [
1671
- s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h3", fontSize: "base", fontWeight: "semibold", children: s }),
1672
- i && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "xs", color: "gray", children: i })
1379
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
1380
+ s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h3", fontSize: "lg", fontWeight: "semibold", children: s }),
1381
+ i && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: i })
1673
1382
  ] }),
1674
- (n || o) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
1675
- n,
1676
- o && o
1383
+ (o || n) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
1384
+ o,
1385
+ typeof n == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: n }) : n
1677
1386
  ] })
1678
1387
  ] })
1679
1388
  ] })
1680
1389
  }
1681
1390
  )
1682
- ), filterChipVariants = cva(
1391
+ ), Card = Object.assign(CardRoot, {
1392
+ List: CardList,
1393
+ ListItem: CardListItem
1394
+ }), filterChipVariants = cva(
1683
1395
  "inline-flex items-center gap-1.5 rounded-full font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none select-none cursor-pointer text-sm leading-none",
1684
1396
  {
1685
1397
  variants: {
@@ -1723,8 +1435,8 @@ const CalendarRoot = ({
1723
1435
  variant: r = "neutral-outline",
1724
1436
  size: s = "md",
1725
1437
  disabled: i = !1,
1726
- children: n,
1727
- ...o
1438
+ children: o,
1439
+ ...n
1728
1440
  }, a) {
1729
1441
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
1730
1442
  "button",
@@ -1734,11 +1446,11 @@ const CalendarRoot = ({
1734
1446
  className: cn(filterChipVariants({ variant: r, size: s }), t),
1735
1447
  disabled: i,
1736
1448
  "aria-disabled": i,
1737
- "aria-label": `${n}, removable`,
1449
+ "aria-label": `${o}, removable`,
1738
1450
  inert: i ? !0 : void 0,
1739
- ...o,
1451
+ ...n,
1740
1452
  children: [
1741
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: n }),
1453
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: o }),
1742
1454
  /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: XIcon, color: "inherit", size: s === "lg" ? "md" : "sm" })
1743
1455
  ]
1744
1456
  }
@@ -1766,12 +1478,12 @@ const CalendarRoot = ({
1766
1478
  ), noResultsHeaderVariants = cva(
1767
1479
  "flex flex-row items-center gap-3 mb-2"
1768
1480
  ), NoResults = React__default.forwardRef(
1769
- function e({ icon: t, title: r, subtitle: s, action: i, className: n, hasGrayBackground: o, ...a }, l) {
1481
+ function e({ icon: t, title: r, subtitle: s, action: i, className: o, hasGrayBackground: n, ...a }, l) {
1770
1482
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
1771
1483
  "section",
1772
1484
  {
1773
1485
  ref: l,
1774
- className: cn(noResultsVariants({ hasGrayBackground: o }), n),
1486
+ className: cn(noResultsVariants({ hasGrayBackground: n }), o),
1775
1487
  role: "status",
1776
1488
  "aria-label": "No results found",
1777
1489
  ...a,
@@ -1919,13 +1631,13 @@ const getTableColumnClass = (e) => {
1919
1631
  );
1920
1632
  }
1921
1633
  ), TableColumn = forwardRef(
1922
- ({ as: e = "td", span: t, align: r = "left", children: s, className: i, ...n }, o) => {
1634
+ ({ as: e = "td", span: t, align: r = "left", children: s, className: i, ...o }, n) => {
1923
1635
  const a = e === "th" ? "columnheader" : "cell";
1924
1636
  let l = "text-left";
1925
1637
  return r === "center" ? l = "text-center" : r === "right" && (l = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
1926
1638
  "div",
1927
1639
  {
1928
- ref: o,
1640
+ ref: n,
1929
1641
  role: a,
1930
1642
  className: cn(
1931
1643
  "px-4 py-2",
@@ -1935,7 +1647,7 @@ const getTableColumnClass = (e) => {
1935
1647
  "truncate overflow-hidden whitespace-nowrap",
1936
1648
  i
1937
1649
  ),
1938
- ...n,
1650
+ ...o,
1939
1651
  children: s
1940
1652
  }
1941
1653
  );
@@ -1991,63 +1703,53 @@ const getTableColumnClass = (e) => {
1991
1703
  Footer: TableFooter,
1992
1704
  Row: TableRow,
1993
1705
  RowItem: TableRowItem
1994
- });
1995
- function getColSpan(e = 4) {
1996
- switch (e) {
1997
- case 1:
1998
- return "col-span-1";
1999
- case 2:
2000
- return "col-span-2";
2001
- case 3:
2002
- return "col-span-3";
2003
- case 4:
2004
- return "col-span-4";
2005
- case 5:
2006
- return "col-span-5";
2007
- case 6:
2008
- return "col-span-6";
2009
- case 7:
2010
- return "col-span-7";
2011
- case 8:
2012
- return "col-span-8";
2013
- case 9:
2014
- return "col-span-9";
2015
- case 10:
2016
- return "col-span-10";
2017
- case 11:
2018
- return "col-span-11";
2019
- case 12:
2020
- return "col-span-12";
2021
- default:
2022
- return "col-span-4";
2023
- }
2024
- }
2025
- const DescriptionListItem = forwardRef(function e({ children: t, className: r, span: s = 4, ...i }, n) {
2026
- const o = getColSpan(s);
2027
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: n, className: cn(o, r), ...i, children: t });
2028
- }), DescriptionListTerm = forwardRef(function e({ children: t, ...r }, s) {
2029
- return /* @__PURE__ */ jsxRuntimeExports.jsx("dt", { ref: s, ...r, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", fontWeight: "medium", color: "gray", children: t }) });
2030
- }), DescriptionListDetails = forwardRef(function e({ children: t, color: r = "black", ...s }, i) {
2031
- return /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { ref: i, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "base", fontWeight: "medium", color: r, children: t }) });
2032
- }), DescriptionListRoot = forwardRef(
2033
- function e({ children: t, className: r, ...s }, i) {
2034
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
2035
- "dl",
2036
- {
2037
- ref: i,
2038
- className: cn("grid grid-cols-12 gap-y-4", r),
2039
- ...s,
2040
- children: t
1706
+ }), tileVariants = cva(
1707
+ // Base classes
1708
+ "block transition-colors duration-200",
1709
+ {
1710
+ variants: {
1711
+ variant: {
1712
+ white: "bg-white border border-border",
1713
+ neutral: "bg-neutral border border-gray-200",
1714
+ primary: "bg-primary-soft border border-primary",
1715
+ secondary: "bg-secondary-soft border border-secondary",
1716
+ tertiary: "bg-tertiary-soft border border-tertiary",
1717
+ ghost: "bg-transparent border border-ghost",
1718
+ success: "bg-success-soft border border-success",
1719
+ info: "bg-info-soft border border-info",
1720
+ warning: "bg-warning-soft border border-warning",
1721
+ danger: "bg-danger-soft border border-danger"
1722
+ },
1723
+ size: {
1724
+ xs: "p-2",
1725
+ sm: "p-3",
1726
+ md: "p-4",
1727
+ lg: "p-6",
1728
+ xl: "p-8"
1729
+ },
1730
+ shape: {
1731
+ rounded: "rounded-lg",
1732
+ square: "rounded-none"
2041
1733
  }
2042
- );
1734
+ },
1735
+ defaultVariants: {
1736
+ variant: "white",
1737
+ size: "md",
1738
+ shape: "rounded"
1739
+ }
2043
1740
  }
2044
- ), DescriptionList = Object.assign(DescriptionListRoot, {
2045
- Item: DescriptionListItem,
2046
- Term: DescriptionListTerm,
2047
- Details: DescriptionListDetails
2048
- });
1741
+ ), Tile = forwardRef(
1742
+ ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...i }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
1743
+ "div",
1744
+ {
1745
+ ref: o,
1746
+ className: cn(tileVariants({ variant: e, size: t, shape: r }), s),
1747
+ ...i
1748
+ }
1749
+ )
1750
+ );
2049
1751
  function useImage({ src: e }) {
2050
- const [t, r] = useState(!1), [s, i] = useState(!1), n = useRef(!1), o = () => {
1752
+ const [t, r] = useState(!1), [s, i] = useState(!1), o = useRef(!1), n = () => {
2051
1753
  r(!0);
2052
1754
  }, a = () => {
2053
1755
  i(!0);
@@ -2056,16 +1758,16 @@ function useImage({ src: e }) {
2056
1758
  if (!e) return;
2057
1759
  const l = new Image();
2058
1760
  return l.src = e, l.onload = () => {
2059
- n.current || r(!0);
1761
+ o.current || r(!0);
2060
1762
  }, l.onerror = () => {
2061
- n.current || i(!0);
1763
+ o.current || i(!0);
2062
1764
  }, () => {
2063
- n.current = !0;
1765
+ o.current = !0;
2064
1766
  };
2065
1767
  }, [e]), {
2066
1768
  loaded: t,
2067
1769
  errored: s,
2068
- handleLoad: o,
1770
+ handleLoad: n,
2069
1771
  handleError: a
2070
1772
  };
2071
1773
  }
@@ -2143,13 +1845,13 @@ function BaseImageFallback({
2143
1845
  height: r,
2144
1846
  className: s,
2145
1847
  style: i,
2146
- shape: n,
2147
- size: o
1848
+ shape: o,
1849
+ size: n
2148
1850
  }) {
2149
1851
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
2150
1852
  "div",
2151
1853
  {
2152
- className: imageAtomVariants({ shape: n, size: o, className: s }),
1854
+ className: imageAtomVariants({ shape: o, size: n, className: s }),
2153
1855
  style: { width: t, height: r, ...i },
2154
1856
  "aria-label": e,
2155
1857
  role: "img",
@@ -2174,56 +1876,56 @@ const BaseImage = forwardRef(
2174
1876
  onLoad: r,
2175
1877
  onError: s,
2176
1878
  width: i,
2177
- height: n,
2178
- loading: o = "lazy",
1879
+ height: o,
1880
+ loading: n = "lazy",
2179
1881
  position: a = "cover",
2180
1882
  size: l = "auto",
2181
1883
  shape: c,
2182
- className: x,
2183
- ...h
2184
- }, d) => {
2185
- const { loaded: p, errored: y, handleLoad: f, handleError: v } = useImage({
1884
+ className: u,
1885
+ ...d
1886
+ }, g) => {
1887
+ const { loaded: f, errored: b, handleLoad: x, handleError: m } = useImage({
2186
1888
  src: e
2187
- }), w = typeof i == "number" ? i : Number(i), g = typeof n == "number" ? n : Number(n);
2188
- return !p && !y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
1889
+ }), h = typeof i == "number" ? i : Number(i), v = typeof o == "number" ? o : Number(o);
1890
+ return !f && !b ? /* @__PURE__ */ jsxRuntimeExports.jsx(
2189
1891
  BaseImageSkeleton,
2190
1892
  {
2191
1893
  shape: c,
2192
- width: w,
2193
- height: g
1894
+ width: h,
1895
+ height: v
2194
1896
  }
2195
- ) : y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
1897
+ ) : b ? /* @__PURE__ */ jsxRuntimeExports.jsx(
2196
1898
  BaseImageFallback,
2197
1899
  {
2198
1900
  shape: c,
2199
1901
  alt: t,
2200
- width: w,
2201
- height: g
1902
+ width: h,
1903
+ height: v
2202
1904
  }
2203
1905
  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
2204
1906
  "img",
2205
1907
  {
2206
- ref: d,
1908
+ ref: g,
2207
1909
  src: e,
2208
1910
  alt: t,
2209
- width: w,
2210
- height: g,
2211
- loading: o,
1911
+ width: h,
1912
+ height: v,
1913
+ loading: n,
2212
1914
  className: cn(
2213
1915
  imageVariants({
2214
1916
  position: a,
2215
1917
  size: l,
2216
1918
  shape: c
2217
1919
  }),
2218
- x
1920
+ u
2219
1921
  ),
2220
- onLoad: (m) => {
2221
- f(), r?.(m);
1922
+ onLoad: (w) => {
1923
+ x(), r?.(w);
2222
1924
  },
2223
- onError: (m) => {
2224
- v(), s?.(m);
1925
+ onError: (w) => {
1926
+ m(), s?.(w);
2225
1927
  },
2226
- ...h
1928
+ ...d
2227
1929
  }
2228
1930
  );
2229
1931
  }
@@ -2232,7 +1934,6 @@ export {
2232
1934
  Alert as A,
2233
1935
  Badge as B,
2234
1936
  Calculator as C,
2235
- DescriptionList as D,
2236
1937
  FilterChip as F,
2237
1938
  Icon as I,
2238
1939
  NoResults as N,
@@ -2245,12 +1946,11 @@ export {
2245
1946
  Button as f,
2246
1947
  ButtonFloat as g,
2247
1948
  ButtonIcon as h,
2248
- Calendar as i,
2249
- Card as j,
2250
- Text as k,
2251
- Tile as l,
2252
- ImageCircle as m,
2253
- ImageSquare as n,
2254
- ImageRectangle as o,
2255
- BaseImage as p
1949
+ Card as i,
1950
+ Text as j,
1951
+ Tile as k,
1952
+ ImageCircle as l,
1953
+ ImageSquare as m,
1954
+ ImageRectangle as n,
1955
+ BaseImage as o
2256
1956
  };