@fileverse/ui 4.2.1-toast-1 → 4.2.1-toast-3

package/dist/index.css

@@ -635,6 +635,8 @@ video {
     --color-icon-disabled: 0, 0%, 25%, 1; /* Gray-800 */
     --color-icon-inverse: 207, 8%, 23%, 1; /* Gray-100 */
     --color-icon-danger: 354, 96%, 59%, 1; /* Red-500 */
+    --color-icon-warning: 354, 96%, 59%, 1; /* Red-500 */
+    --color-icon-info: 354, 96%, 59%, 1; /* Red-500 */
     --color-icon-success: 127, 69%, 29%, 1; /* Green-700 */
     --color-icon-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
     /* Utility */
@@ -875,6 +877,10 @@ video {
     background-color: hsl(var(--color-bg-success-light));
   }
 
+  .color-bg-success {
+    background-color: hsl(var(--color-bg-success));
+  }
+
   .\!color-bg-default-inverse {
     background-color: hsl(var(--color-bg-default-inverse)) !important;
   }
@@ -924,6 +930,19 @@ video {
     border-color: hsl(var(--color-border-default));
   }
 
+  .color-border-toast-warning {
+    border-left-color: hsl(var(--color-border-warning));
+  }
+  .color-border-toast-error {
+    border-left-color: hsl(var(--color-border-danger));
+  }
+  .color-border-toast-success {
+    border-left-color: hsl(var(--color-border-success));
+  }
+  .color-border-toast-info {
+    border-left-color: hsl(var(--color-border-info));
+  }
+
   .color-border-hover {
     border-color: hsl(var(--color-border-hover));
   }
@@ -968,6 +987,20 @@ video {
     color: hsl(var(--color-icon-inverse));
   }
 
+  .color-icon-success {
+    color: hsl(var(--color-icon-success));
+  }
+
+  .color-icon-danger {
+    color: hsl(var(--color-icon-danger));
+  }
+  .color-icon-warning {
+    color: hsl(var(--color-icon-warning));
+  }
+  .color-icon-info {
+    color: hsl(var(--color-icon-info));
+  }
+
   .color-utility-overlay {
     background-color: hsl(var(--color-utility-overlay));
   }
@@ -1328,10 +1361,6 @@ video {
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
-.size-\[18px\] {
-  width: 18px;
-  height: 18px;
-}
 .\!h-6 {
   height: 1.5rem !important;
 }
@@ -1565,6 +1594,9 @@ video {
 .w-\[180px\] {
   width: 180px;
 }
+.w-\[18px\] {
+  width: 18px;
+}
 .w-\[200px\] {
   width: 200px;
 }
@@ -2150,6 +2182,9 @@ video {
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-2 {
   border-width: 2px;
 }
@@ -2190,9 +2225,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
-.border-\[hsl\(var\(--color-border-default\)\)\] {
-  border-color: hsl(var(--color-border-default));
-}
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
@@ -2200,36 +2232,12 @@ video {
 .border-transparent {
   border-color: transparent;
 }
-.border-l-\[hsl\(var\(--color-border-danger\)\)\] {
-  border-left-color: hsl(var(--color-border-danger));
-}
 .border-l-\[hsl\(var\(--color-border-default\)\)\] {
   border-left-color: hsl(var(--color-border-default));
 }
-.border-l-\[hsl\(var\(--color-border-info\)\)\] {
-  border-left-color: hsl(var(--color-border-info));
-}
-.border-l-\[hsl\(var\(--color-border-success\)\)\] {
-  border-left-color: hsl(var(--color-border-success));
-}
-.border-l-\[hsl\(var\(--color-border-warning\)\)\] {
-  border-left-color: hsl(var(--color-border-warning));
-}
 .\!bg-transparent {
   background-color: transparent !important;
 }
-.bg-\[hsl\(var\(--color-bg-danger\)\)\] {
-  background-color: hsl(var(--color-bg-danger));
-}
-.bg-\[hsl\(var\(--color-bg-default\)\)\] {
-  background-color: hsl(var(--color-bg-default));
-}
-.bg-\[hsl\(var\(--color-bg-success\)\)\] {
-  background-color: hsl(var(--color-bg-success));
-}
-.bg-\[var\(--color-bg-default\)\] {
-  background-color: var(--color-bg-default);
-}
 .bg-green-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
@@ -2489,21 +2497,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(119 129 138 / var(--tw-text-opacity, 1));
 }
-.text-\[hsl\(var\(--color-border-danger\)\)\] {
-  color: hsl(var(--color-border-danger));
-}
-.text-\[hsl\(var\(--color-border-info\)\)\] {
-  color: hsl(var(--color-border-info));
-}
-.text-\[hsl\(var\(--color-border-success\)\)\] {
-  color: hsl(var(--color-border-success));
-}
-.text-\[hsl\(var\(--color-border-warning\)\)\] {
-  color: hsl(var(--color-border-warning));
-}
-.text-\[hsl\(var\(--color-text-default\)\)\] {
-  color: hsl(var(--color-text-default));
-}
 .text-\[hsl\(var\(--color-text-inverse\)\)\] {
   color: hsl(var(--color-text-inverse));
 }

package/dist/index.es.js

@@ -65699,12 +65699,12 @@ const jCe = Jve, zy = y.forwardRef(({ className: e, position: t = "bottom-right"
     className: T(
       "fixed z-[100] flex gap-2 max-h-screen w-full flex-col-reverse p-4 sm:flex-col max-w-fit overflow-clip overscroll-contain",
       {
-        "top-0 right-0 overflow-y-auto": t === "top-right",
-        "top-0 left-0 overflow-y-auto": t === "top-left",
-        "bottom-0 right-0 overflow-y-auto": t === "bottom-right",
-        "bottom-0 left-0 overflow-y-auto": t === "bottom-left",
-        "top-0 left-1/2 -translate-x-1/2": t === "center-top",
-        "bottom-0 left-1/2 -translate-x-1/2": t === "center-bottom"
+        "top-0 right-0 items-end overflow-y-auto": t === "top-right",
+        "top-0 left-0 items-start overflow-y-auto": t === "top-left",
+        "bottom-0 right-0 items-end overflow-y-auto": t === "bottom-right",
+        "bottom-0 left-0 items-start overflow-y-auto": t === "bottom-left",
+        "top-0 left-1/2 items-center -translate-x-1/2": t === "center-top",
+        "bottom-0 left-1/2 items-center -translate-x-1/2": t === "center-bottom"
       },
       e
     ),
@@ -65713,7 +65713,7 @@ const jCe = Jve, zy = y.forwardRef(({ className: e, position: t = "bottom-right"
 ));
 zy.displayName = d5.displayName;
 const NCe = H1(
-  "group pointer-events-auto shrink-0 bg-[hsl(var(--color-bg-default))] relative flex items-center border border-[hsl(var(--color-border-default))] justify-between overflow-hidden rounded-lg px-3 py-2 shadow-elevation-3 transition-all data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=open]:duration-300 data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[swipe=end]:animate-out data-[state=closed]:fade-out-80",
+  "group pointer-events-auto shrink-0 relative color-bg-default color-border-default flex items-center justify-between overflow-hidden rounded-lg px-3 py-2 shadow-elevation-3 transition-all data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=open]:duration-300 data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[swipe=end]:animate-out data-[state=closed]:fade-out-80",
   {
     variants: {
       variant: {
@@ -65724,8 +65724,8 @@ const NCe = H1(
         info: "info"
       },
       type: {
-        normal: "normal-toast color-bg-default border color-border-default space-x-4 group w-[320px] max-w-full",
-        mini: "mini-toast gap-2 w-fit max-w-full"
+        normal: "normal-toast space-x-4 group w-[320px] max-w-full color-border-default",
+        mini: "mini-toast gap-2 w-fit max-w-full border-0"
       },
       position: {
         "top-right": "data-[state=open]:slide-in-from-right-[calc(100%+16px*2)] data-[state=closed]:slide-out-to-right-[calc(100%+16px*2)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]",
@@ -65740,52 +65740,52 @@ const NCe = H1(
       {
         type: "normal",
         variant: "default",
-        className: "bg-[hsl(var(--color-bg-default))] border border-[hsl(var(--color-border-default))]"
+        className: "color-bg-default color-border-default"
       },
       {
         type: "normal",
         variant: "error",
-        className: "border-l-4 border-l-[hsl(var(--color-border-danger))]"
+        className: "border-l-4 color-border-toast-error"
       },
       {
         type: "normal",
         variant: "success",
-        className: "border-l-4 border-l-[hsl(var(--color-border-success))]"
+        className: "border-l-4 color-border-toast-success"
       },
       {
         type: "normal",
         variant: "warning",
-        className: "border-l-4 border-l-[hsl(var(--color-border-warning))]"
+        className: "border-l-4 color-border-toast-warning"
       },
       {
         type: "normal",
         variant: "info",
-        className: "border-l-4 border-l-[hsl(var(--color-border-info))]"
+        className: "border-l-4 color-border-toast-info"
       },
       {
         type: "mini",
         variant: "default",
-        className: "bg-[var(--color-bg-default)] text-[hsl(var(--color-text-default))] border-[hsl(var(--color-border-default))]"
+        className: "border color-bg-default color-text-default"
       },
       {
         type: "mini",
         variant: "info",
-        className: "bg-[var(--color-bg-default)] text-[hsl(var(--color-text-default))] border-[hsl(var(--color-border-default))]"
+        className: "color-bg-default color-text-default"
       },
       {
         type: "mini",
         variant: "warning",
-        className: "bg-[var(--color-bg-default)] text-[hsl(var(--color-text-default))] border-[hsl(var(--color-border-default))]"
+        className: "color-bg-default color-text-default"
       },
       {
         type: "mini",
         variant: "error",
-        className: "bg-[hsl(var(--color-bg-danger))] text-[hsl(var(--color-text-inverse))]"
+        className: "color-bg-danger color-text-inverse"
       },
       {
         type: "mini",
         variant: "success",
-        className: "bg-[hsl(var(--color-bg-success))] text-[hsl(var(--color-text-inverse))]"
+        className: "color-bg-success color-text-inverse"
       }
     ],
     defaultVariants: {
@@ -66054,7 +66054,9 @@ const MNe = ({
               {
                 name: C,
                 size: "sm",
-                className: "size-[18px] shrink-0 text-current"
+                width: 18,
+                height: 18,
+                className: "w-[18px] h-[18px] shrink-0 text-current"
               }
             ),
             m === "emoji" && b && /* @__PURE__ */ f.jsx("span", { className: "text-heading-lg", children: b }),
@@ -66087,12 +66089,14 @@ const MNe = ({
                 {
                   name: C,
                   size: "sm",
+                  width: 18,
+                  height: 18,
                   className: T(
-                    "size-[18px] shrink-0",
-                    l === "error" && "text-[hsl(var(--color-border-danger))]",
-                    l === "success" && "text-[hsl(var(--color-border-success))]",
-                    l === "warning" && "text-[hsl(var(--color-border-warning))]",
-                    l === "info" && "text-[hsl(var(--color-border-info))]"
+                    "w-[18px] h-[18px] shrink-0",
+                    l === "error" && "color-icon-danger",
+                    l === "success" && "color-icon-success",
+                    l === "warning" && "color-icon-warning",
+                    l === "info" && "color-icon-info"
                   )
                 }
               ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse/ui",
-  "version": "4.2.1-toast-1",
+  "version": "4.2.1-toast-3",
   "files": [
     "/dist"
   ],
@@ -113,4 +113,4 @@
     ],
     "*.css": "stylelint --fix"
   }
-}
+}