@bloomkit/react 0.1.4 → 0.1.6

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
@@ -133,6 +133,21 @@ var buttonVariants = cva(
133
133
  "bg-[var(--bloom-accent3-deep)] text-white",
134
134
  "hover:-translate-y-[2px] hover:shadow-[var(--bloom-shadow-hover)]",
135
135
  "active:translate-y-0 active:scale-[0.98]"
136
+ ],
137
+ danger: [
138
+ "bg-[var(--bloom-accent4-deep)] text-white",
139
+ "hover:-translate-y-[2px] hover:shadow-[var(--bloom-shadow-hover)]",
140
+ "active:translate-y-0 active:scale-[0.98]"
141
+ ],
142
+ warning: [
143
+ "bg-[var(--bloom-accent2-deep)] text-white",
144
+ "hover:-translate-y-[2px] hover:shadow-[var(--bloom-shadow-hover)]",
145
+ "active:translate-y-0 active:scale-[0.98]"
146
+ ],
147
+ success: [
148
+ "bg-[var(--bloom-accent1-deep)] text-white",
149
+ "hover:-translate-y-[2px] hover:shadow-[var(--bloom-shadow-hover)]",
150
+ "active:translate-y-0 active:scale-[0.98]"
136
151
  ]
137
152
  }
138
153
  },
@@ -383,18 +398,18 @@ import { forwardRef as forwardRef6 } from "react";
383
398
  import { cva as cva5 } from "class-variance-authority";
384
399
  var alertVariants = cva5(
385
400
  [
386
- "relative rounded-[var(--bloom-radius)] p-[var(--space-lg)]",
387
- "bg-[var(--bloom-surface)]",
388
- "border-l-[4px]",
389
- "font-[family-name:var(--bloom-font)]"
401
+ "relative flex gap-[var(--space-md)] items-start",
402
+ "rounded-[var(--bloom-radius-lg)] p-[var(--space-lg)]",
403
+ "font-[family-name:var(--bloom-font)]",
404
+ "border"
390
405
  ],
391
406
  {
392
407
  variants: {
393
408
  variant: {
394
- info: "border-l-[var(--bloom-accent3)]",
395
- success: "border-l-[var(--bloom-accent1)]",
396
- warning: "border-l-[var(--bloom-accent2)]",
397
- error: "border-l-[var(--bloom-accent4)]"
409
+ info: "bg-[var(--bloom-accent3)]/10 border-[var(--bloom-accent3)]/20",
410
+ success: "bg-[var(--bloom-accent1)]/10 border-[var(--bloom-accent1)]/20",
411
+ warning: "bg-[var(--bloom-accent2)]/10 border-[var(--bloom-accent2)]/20",
412
+ error: "bg-[var(--bloom-accent4)]/10 border-[var(--bloom-accent4)]/20"
398
413
  }
399
414
  },
400
415
  defaultVariants: {
@@ -402,11 +417,40 @@ var alertVariants = cva5(
402
417
  }
403
418
  }
404
419
  );
420
+ var alertIconColors = {
421
+ info: "color-[var(--bloom-accent3-deep)]",
422
+ success: "color-[var(--bloom-accent1-deep)]",
423
+ warning: "color-[var(--bloom-accent2-deep)]",
424
+ error: "color-[var(--bloom-accent4-deep)]"
425
+ };
405
426
 
406
427
  // src/components/alert/alert.tsx
407
- import { jsx as jsx6 } from "react/jsx-runtime";
428
+ import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
429
+ var variantIcons = {
430
+ success: /* @__PURE__ */ jsxs3("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
431
+ /* @__PURE__ */ jsx6("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
432
+ /* @__PURE__ */ jsx6("path", { d: "M6.5 10.5L8.5 12.5L13.5 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
433
+ ] }),
434
+ error: /* @__PURE__ */ jsxs3("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
435
+ /* @__PURE__ */ jsx6("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
436
+ /* @__PURE__ */ jsx6("path", { d: "M7.5 7.5L12.5 12.5M12.5 7.5L7.5 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
437
+ ] }),
438
+ warning: /* @__PURE__ */ jsxs3("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
439
+ /* @__PURE__ */ jsx6("path", { d: "M10 3L18 17H2L10 3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
440
+ /* @__PURE__ */ jsx6("path", { d: "M10 8.5V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
441
+ /* @__PURE__ */ jsx6("circle", { cx: "10", cy: "14.5", r: "0.75", fill: "currentColor" })
442
+ ] }),
443
+ info: /* @__PURE__ */ jsxs3("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
444
+ /* @__PURE__ */ jsx6("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
445
+ /* @__PURE__ */ jsx6("path", { d: "M10 9V14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
446
+ /* @__PURE__ */ jsx6("circle", { cx: "10", cy: "6.5", r: "0.75", fill: "currentColor" })
447
+ ] })
448
+ };
408
449
  var Alert = forwardRef6(
409
- ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props })
450
+ ({ className, variant = "info", children, ...props }, ref) => /* @__PURE__ */ jsxs3("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props, children: [
451
+ /* @__PURE__ */ jsx6("div", { className: cn("shrink-0 mt-px", alertIconColors[variant ?? "info"]), children: variantIcons[variant ?? "info"] }),
452
+ /* @__PURE__ */ jsx6("div", { className: "flex-1 min-w-0", children })
453
+ ] })
410
454
  );
411
455
  Alert.displayName = "Alert";
412
456
  var AlertTitle = forwardRef6(
@@ -415,7 +459,7 @@ var AlertTitle = forwardRef6(
415
459
  {
416
460
  ref,
417
461
  className: cn(
418
- "font-[family-name:var(--bloom-font-display)] text-[length:var(--bloom-text-subheading)] font-medium color-[var(--bloom-text)] mb-[var(--space-xs)]",
462
+ "font-[family-name:var(--bloom-font-display)] text-[length:var(--bloom-text-body)] font-medium color-[var(--bloom-text)]",
419
463
  className
420
464
  ),
421
465
  ...props
@@ -428,7 +472,7 @@ var AlertDescription = forwardRef6(
428
472
  "p",
429
473
  {
430
474
  ref,
431
- className: cn("text-[length:var(--bloom-text-body)] color-[var(--bloom-text-secondary)]", className),
475
+ className: cn("text-[length:var(--bloom-text-caption)] color-[var(--bloom-text-secondary)] mt-[var(--space-xs)]", className),
432
476
  ...props
433
477
  }
434
478
  )
@@ -463,12 +507,12 @@ var avatarVariants = cva6(
463
507
  );
464
508
 
465
509
  // src/components/avatar/avatar.tsx
466
- import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
510
+ import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
467
511
  var Avatar = forwardRef7(
468
512
  ({ className, size, initials, src, alt, ...props }, ref) => {
469
513
  const [imgError, setImgError] = useState2(false);
470
514
  const showImage = src && !imgError;
471
- return /* @__PURE__ */ jsxs3("div", { ref, className: cn(avatarVariants({ size }), className), ...props, children: [
515
+ return /* @__PURE__ */ jsxs4("div", { ref, className: cn(avatarVariants({ size }), className), ...props, children: [
472
516
  /* @__PURE__ */ jsx7("span", { "aria-hidden": showImage || void 0, children: initials }),
473
517
  showImage && /* @__PURE__ */ jsx7(
474
518
  "img",
@@ -497,10 +541,10 @@ AvatarGroup.displayName = "AvatarGroup";
497
541
 
498
542
  // src/components/tooltip/tooltip.tsx
499
543
  import * as TooltipPrimitive from "@radix-ui/react-tooltip";
500
- import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
544
+ import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
501
545
  var TooltipProvider = TooltipPrimitive.Provider;
502
546
  function Tooltip({ content, children, side = "top", className }) {
503
- return /* @__PURE__ */ jsxs4(TooltipPrimitive.Root, { children: [
547
+ return /* @__PURE__ */ jsxs5(TooltipPrimitive.Root, { children: [
504
548
  /* @__PURE__ */ jsx8(TooltipPrimitive.Trigger, { asChild: true, children }),
505
549
  /* @__PURE__ */ jsx8(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
506
550
  TooltipPrimitive.Content,
@@ -508,8 +552,9 @@ function Tooltip({ content, children, side = "top", className }) {
508
552
  side,
509
553
  sideOffset: 8,
510
554
  className: cn(
511
- "bloom z-50 rounded-[var(--bloom-radius-sm)]",
512
- "bg-[var(--bloom-text)] color-[var(--bloom-bg)]",
555
+ "bloom z-50 rounded-[var(--bloom-radius)]",
556
+ "bg-[var(--bloom-surface)] color-[var(--bloom-text)]",
557
+ "border border-[var(--bloom-surface2)]",
513
558
  "px-[var(--space-md)] py-[var(--space-sm)]",
514
559
  "text-[length:var(--bloom-text-caption)] font-[family-name:var(--bloom-font)]",
515
560
  "shadow-[var(--bloom-shadow)]",
@@ -542,7 +587,7 @@ var progressFillVariants = cva7([
542
587
  ]);
543
588
 
544
589
  // src/components/progress/progress.tsx
545
- import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
590
+ import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
546
591
  var Progress = forwardRef8(
547
592
  ({ className, value = 0, ...props }, ref) => {
548
593
  const clampedValue = Math.min(100, Math.max(0, value));
@@ -584,7 +629,7 @@ var ProgressCircular = forwardRef8(
584
629
  "aria-valuemax": 100,
585
630
  className: cn("inline-flex", className),
586
631
  ...props,
587
- children: /* @__PURE__ */ jsxs5("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
632
+ children: /* @__PURE__ */ jsxs6("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
588
633
  /* @__PURE__ */ jsx9(
589
634
  "circle",
590
635
  {
@@ -624,9 +669,9 @@ ProgressCircular.displayName = "ProgressCircular";
624
669
  // src/components/slider/slider.tsx
625
670
  import { forwardRef as forwardRef9 } from "react";
626
671
  import * as SliderPrimitive from "@radix-ui/react-slider";
627
- import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
672
+ import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
628
673
  var Slider = forwardRef9(
629
- ({ className, disabled, ...props }, ref) => /* @__PURE__ */ jsxs6(
674
+ ({ className, disabled, ...props }, ref) => /* @__PURE__ */ jsxs7(
630
675
  SliderPrimitive.Root,
631
676
  {
632
677
  ref,
@@ -681,9 +726,9 @@ Slider.displayName = "Slider";
681
726
 
682
727
  // src/components/modal/modal.tsx
683
728
  import * as DialogPrimitive from "@radix-ui/react-dialog";
684
- import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
729
+ import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
685
730
  function Modal({ open, onOpenChange, title, description, children, className }) {
686
- return /* @__PURE__ */ jsx11(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs7(DialogPrimitive.Portal, { children: [
731
+ return /* @__PURE__ */ jsx11(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs8(DialogPrimitive.Portal, { children: [
687
732
  /* @__PURE__ */ jsx11(
688
733
  DialogPrimitive.Overlay,
689
734
  {
@@ -694,7 +739,7 @@ function Modal({ open, onOpenChange, title, description, children, className })
694
739
  )
695
740
  }
696
741
  ),
697
- /* @__PURE__ */ jsxs7(
742
+ /* @__PURE__ */ jsxs8(
698
743
  DialogPrimitive.Content,
699
744
  {
700
745
  className: cn(
@@ -749,9 +794,9 @@ function Modal({ open, onOpenChange, title, description, children, className })
749
794
 
750
795
  // src/components/dropdown/dropdown.tsx
751
796
  import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
752
- import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
797
+ import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
753
798
  function Dropdown({ trigger, children, className }) {
754
- return /* @__PURE__ */ jsxs8(DropdownMenuPrimitive.Root, { children: [
799
+ return /* @__PURE__ */ jsxs9(DropdownMenuPrimitive.Root, { children: [
755
800
  /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Trigger, { asChild: true, children: trigger }),
756
801
  /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
757
802
  DropdownMenuPrimitive.Content,
@@ -881,7 +926,7 @@ TabsContent.displayName = "TabsContent";
881
926
  // src/components/date-picker/date-picker.tsx
882
927
  import { useState as useState3, useMemo as useMemo2 } from "react";
883
928
  import * as Popover from "@radix-ui/react-popover";
884
- import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
929
+ import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
885
930
  function getDaysInMonth(year, month) {
886
931
  return new Date(year, month + 1, 0).getDate();
887
932
  }
@@ -928,8 +973,8 @@ function DatePicker({ value, onChange, placeholder = "Select date", className })
928
973
  setOpen(false);
929
974
  };
930
975
  const formattedValue = value ? value.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : null;
931
- return /* @__PURE__ */ jsxs9(Popover.Root, { open, onOpenChange: setOpen, children: [
932
- /* @__PURE__ */ jsx14(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
976
+ return /* @__PURE__ */ jsxs10(Popover.Root, { open, onOpenChange: setOpen, children: [
977
+ /* @__PURE__ */ jsx14(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
933
978
  "button",
934
979
  {
935
980
  className: cn(
@@ -944,7 +989,7 @@ function DatePicker({ value, onChange, placeholder = "Select date", className })
944
989
  className
945
990
  ),
946
991
  children: [
947
- /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
992
+ /* @__PURE__ */ jsxs10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
948
993
  /* @__PURE__ */ jsx14("rect", { x: "2", y: "3", width: "12", height: "11", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
949
994
  /* @__PURE__ */ jsx14("path", { d: "M2 6h12", stroke: "currentColor", strokeWidth: "1.5" }),
950
995
  /* @__PURE__ */ jsx14("path", { d: "M5 1v3M11 1v3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
@@ -953,7 +998,7 @@ function DatePicker({ value, onChange, placeholder = "Select date", className })
953
998
  ]
954
999
  }
955
1000
  ) }),
956
- /* @__PURE__ */ jsx14(Popover.Portal, { children: /* @__PURE__ */ jsxs9(
1001
+ /* @__PURE__ */ jsx14(Popover.Portal, { children: /* @__PURE__ */ jsxs10(
957
1002
  Popover.Content,
958
1003
  {
959
1004
  sideOffset: 8,
@@ -967,7 +1012,7 @@ function DatePicker({ value, onChange, placeholder = "Select date", className })
967
1012
  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
968
1013
  ),
969
1014
  children: [
970
- /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between mb-[var(--space-md)]", children: [
1015
+ /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between mb-[var(--space-md)]", children: [
971
1016
  /* @__PURE__ */ jsx14(
972
1017
  "button",
973
1018
  {
@@ -977,7 +1022,7 @@ function DatePicker({ value, onChange, placeholder = "Select date", className })
977
1022
  children: /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx14("path", { d: "M10 4l-4 4 4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
978
1023
  }
979
1024
  ),
980
- /* @__PURE__ */ jsxs9("span", { className: "font-[family-name:var(--bloom-font-display)] text-[length:var(--bloom-text-body)] font-medium color-[var(--bloom-text)]", children: [
1025
+ /* @__PURE__ */ jsxs10("span", { className: "font-[family-name:var(--bloom-font-display)] text-[length:var(--bloom-text-body)] font-medium color-[var(--bloom-text)]", children: [
981
1026
  MONTH_NAMES[viewMonth],
982
1027
  " ",
983
1028
  viewYear
@@ -1030,22 +1075,23 @@ import {
1030
1075
  import { cva as cva9 } from "class-variance-authority";
1031
1076
  var toastVariants = cva9(
1032
1077
  [
1033
- "relative flex items-start gap-[var(--space-md)]",
1078
+ "relative flex items-center gap-[var(--space-md)]",
1034
1079
  "w-full max-w-[380px]",
1035
- "rounded-[var(--bloom-radius)]",
1036
- "bg-[var(--bloom-surface)] p-[var(--space-lg)]",
1080
+ "rounded-[var(--bloom-radius-lg)]",
1081
+ "p-[var(--space-lg)]",
1037
1082
  "shadow-[var(--bloom-shadow-hover)]",
1038
- "border border-[var(--bloom-surface2)]",
1083
+ "border",
1039
1084
  "font-[family-name:var(--bloom-font)]",
1040
- "overflow-hidden"
1085
+ "overflow-hidden",
1086
+ "animate-in fade-in-0 slide-in-from-bottom-4"
1041
1087
  ],
1042
1088
  {
1043
1089
  variants: {
1044
1090
  variant: {
1045
- info: "border-l-[4px] border-l-[var(--bloom-accent3)]",
1046
- success: "border-l-[4px] border-l-[var(--bloom-accent1)]",
1047
- warning: "border-l-[4px] border-l-[var(--bloom-accent2)]",
1048
- error: "border-l-[4px] border-l-[var(--bloom-accent4)]"
1091
+ info: "bg-[var(--bloom-surface)] border-[var(--bloom-surface2)]",
1092
+ success: "bg-[var(--bloom-accent1)]/10 border-[var(--bloom-accent1)]/20",
1093
+ warning: "bg-[var(--bloom-accent2)]/10 border-[var(--bloom-accent2)]/20",
1094
+ error: "bg-[var(--bloom-accent4)]/10 border-[var(--bloom-accent4)]/20"
1049
1095
  }
1050
1096
  },
1051
1097
  defaultVariants: {
@@ -1053,9 +1099,15 @@ var toastVariants = cva9(
1053
1099
  }
1054
1100
  }
1055
1101
  );
1102
+ var toastIconColors = {
1103
+ info: "color-[var(--bloom-accent3-deep)]",
1104
+ success: "color-[var(--bloom-accent1-deep)]",
1105
+ warning: "color-[var(--bloom-accent2-deep)]",
1106
+ error: "color-[var(--bloom-accent4-deep)]"
1107
+ };
1056
1108
 
1057
1109
  // src/components/toast/toast.tsx
1058
- import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
1110
+ import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
1059
1111
  var ToastContext = createContext(null);
1060
1112
  function useToast() {
1061
1113
  const ctx = useContext(ToastContext);
@@ -1072,19 +1124,41 @@ function ToastProvider({ children }) {
1072
1124
  const dismiss = useCallback((id) => {
1073
1125
  setToasts((prev) => prev.filter((t) => t.id !== id));
1074
1126
  }, []);
1075
- return /* @__PURE__ */ jsxs10(ToastContext.Provider, { value: { toast }, children: [
1127
+ return /* @__PURE__ */ jsxs11(ToastContext.Provider, { value: { toast }, children: [
1076
1128
  children,
1077
1129
  /* @__PURE__ */ jsx15("div", { className: "bloom fixed bottom-[var(--space-xl)] right-[var(--space-xl)] z-[100] flex flex-col gap-[var(--space-md)]", children: toasts.map((t) => /* @__PURE__ */ jsx15(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
1078
1130
  ] });
1079
1131
  }
1132
+ var variantIcons2 = {
1133
+ success: /* @__PURE__ */ jsxs11("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
1134
+ /* @__PURE__ */ jsx15("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
1135
+ /* @__PURE__ */ jsx15("path", { d: "M6.5 10.5L8.5 12.5L13.5 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
1136
+ ] }),
1137
+ error: /* @__PURE__ */ jsxs11("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
1138
+ /* @__PURE__ */ jsx15("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
1139
+ /* @__PURE__ */ jsx15("path", { d: "M7.5 7.5L12.5 12.5M12.5 7.5L7.5 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
1140
+ ] }),
1141
+ warning: /* @__PURE__ */ jsxs11("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
1142
+ /* @__PURE__ */ jsx15("path", { d: "M10 3L18 17H2L10 3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
1143
+ /* @__PURE__ */ jsx15("path", { d: "M10 8.5V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
1144
+ /* @__PURE__ */ jsx15("circle", { cx: "10", cy: "14.5", r: "0.75", fill: "currentColor" })
1145
+ ] }),
1146
+ info: /* @__PURE__ */ jsxs11("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
1147
+ /* @__PURE__ */ jsx15("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
1148
+ /* @__PURE__ */ jsx15("path", { d: "M10 9V14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
1149
+ /* @__PURE__ */ jsx15("circle", { cx: "10", cy: "6.5", r: "0.75", fill: "currentColor" })
1150
+ ] })
1151
+ };
1080
1152
  function ToastItem({ toast: t, onDismiss }) {
1081
1153
  const duration = t.duration ?? 4e3;
1154
+ const variant = t.variant ?? "info";
1082
1155
  useEffect2(() => {
1083
1156
  const timer = setTimeout(() => onDismiss(t.id), duration);
1084
1157
  return () => clearTimeout(timer);
1085
1158
  }, [t.id, duration, onDismiss]);
1086
- return /* @__PURE__ */ jsxs10("div", { className: cn(toastVariants({ variant: t.variant })), children: [
1087
- /* @__PURE__ */ jsxs10("div", { className: "flex-1", children: [
1159
+ return /* @__PURE__ */ jsxs11("div", { className: cn(toastVariants({ variant: t.variant })), children: [
1160
+ /* @__PURE__ */ jsx15("div", { className: cn("shrink-0 mt-[1px]", toastIconColors[variant]), children: variantIcons2[variant] }),
1161
+ /* @__PURE__ */ jsxs11("div", { className: "flex-1 min-w-0", children: [
1088
1162
  /* @__PURE__ */ jsx15("p", { className: "text-[length:var(--bloom-text-body)] font-medium color-[var(--bloom-text)]", children: t.title }),
1089
1163
  t.description && /* @__PURE__ */ jsx15("p", { className: "text-[length:var(--bloom-text-caption)] color-[var(--bloom-text-secondary)] mt-[var(--space-xs)]", children: t.description })
1090
1164
  ] }),
@@ -1092,19 +1166,10 @@ function ToastItem({ toast: t, onDismiss }) {
1092
1166
  "button",
1093
1167
  {
1094
1168
  onClick: () => onDismiss(t.id),
1095
- className: "color-[var(--bloom-text-secondary)] hover:color-[var(--bloom-text)] transition-colors shrink-0",
1169
+ className: "color-[var(--bloom-text-secondary)] hover:color-[var(--bloom-text)] transition-colors shrink-0 rounded-full h-[28px] w-[28px] inline-flex items-center justify-center hover:bg-[var(--bloom-surface2)]",
1096
1170
  "aria-label": "Dismiss",
1097
1171
  children: /* @__PURE__ */ jsx15("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx15("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
1098
1172
  }
1099
- ),
1100
- /* @__PURE__ */ jsx15(
1101
- "div",
1102
- {
1103
- className: "absolute bottom-0 left-0 h-[2px] bg-[var(--bloom-accent1-deep)]/40",
1104
- style: {
1105
- animation: `bloom-shrink ${duration}ms linear forwards`
1106
- }
1107
- }
1108
1173
  )
1109
1174
  ] });
1110
1175
  }