@fileverse/ui 4.2.1-toast-1 → 4.2.1

package/dist/index.css

@@ -539,7 +539,6 @@ video {
     --color-bg-danger-light: 354, 100%, 94%, 1; /* Red-100 */
     --color-bg-default-inverse: 0, 0%, 0%, 1; /* Black */
     --color-bg-tertiary: 195, 10%, 92%, 1; /* Tertiary */
-    --color-bg-success: 126, 73%, 39%, 1;
     --color-bg-success-light: 124, 79%, 93%, 1; /* Green-100 */
 
     /* Border */
@@ -548,10 +547,7 @@ video {
     --color-border-light: 0, 0%, 100%, 1; /* White */
     --color-border-active: 0, 0%, 0%, 1; /* Black */
     --color-border-focused: 260, 100%, 52%, 1; /* Blue-700 */
-    --color-border-warning: 18, 88%, 55%, 1; /* Red-500 */
     --color-border-danger: 354, 96%, 59%, 1; /* Red-500 */
-    --color-border-success: 127, 69%, 29%, 1;
-    --color-border-info: 260, 100%, 52%, 1;
     --color-border-disabled: 206, 9%, 66%, 1; /* Gray-500 */
 
     /* Icon */
@@ -608,11 +604,10 @@ video {
     --color-bg-brand: 50, 74%, 54%, 1; /* Yellow-400 */
     --color-bg-brand-hover: 50, 60%, 45%, 1; /* Yellow-500 */
     --color-bg-brand-light: 57, 92%, 76%, 1; /* Yellow-100 */
-    --color-bg-danger: 354, 84%, 42%, 1; /* Red-200 */
+    --color-bg-danger: 354, 100%, 89%, 1; /* Red-200 */
     --color-bg-danger-light: 356, 100%, 97%, 1; /* Red-50 */
     --color-bg-default-inverse: 0, 0%, 100%, 1; /* White */
     --color-bg-tertiary: 0, 0%, 25%, 1; /* Gray-800 */
-    --color-bg-success: 128, 59%, 20%, 1;
     --color-bg-success-light: 128, 59%, 20%, 1; /* Green-900 */
 
     /* Border */
@@ -622,9 +617,6 @@ video {
     --color-border-active: 0, 0%, 91%, 1; /* Gray-200 */
     --color-border-focused: 254, 100%, 73%, 1; /* Blue-400 */
     --color-border-danger: 354, 100%, 70%, 1; /* Red-400 */
-    --color-border-warning: 22, 89%, 62%, 1; /* Red-500 */
-    --color-border-success: 126, 74%, 73%, 1;
-    --color-border-info: 254, 100%, 73%, 1;
     --color-border-disabled: 0, 0%, 53%, 1; /* Gray-400  */
 
     /* Icon */
@@ -1180,6 +1172,9 @@ video {
 .top-1\/2 {
   top: 50%;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .top-3 {
   top: 0.75rem;
 }
@@ -1328,10 +1323,6 @@ video {
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
-.size-\[18px\] {
-  width: 18px;
-  height: 18px;
-}
 .\!h-6 {
   height: 1.5rem !important;
 }
@@ -1577,9 +1568,6 @@ video {
 .w-\[280px\] {
   width: 280px;
 }
-.w-\[320px\] {
-  width: 320px;
-}
 .w-\[350px\] {
   width: 350px;
 }
@@ -1970,9 +1958,6 @@ video {
 .gap-8 {
   gap: 2rem;
 }
-.gap-\[4px\] {
-  gap: 4px;
-}
 .-space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-0.25rem * var(--tw-space-x-reverse));
@@ -2033,27 +2018,18 @@ video {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
-.self-start {
-  align-self: flex-start;
-}
 .overflow-auto {
   overflow: auto;
 }
 .overflow-hidden {
   overflow: hidden;
 }
-.overflow-clip {
-  overflow: clip;
-}
 .overflow-y-auto {
   overflow-y: auto;
 }
 .overflow-x-hidden {
   overflow-x: hidden;
 }
-.overscroll-contain {
-  overscroll-behavior: contain;
-}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2162,9 +2138,6 @@ video {
 .border-b-2 {
   border-bottom-width: 2px;
 }
-.border-l-4 {
-  border-left-width: 4px;
-}
 .border-r {
   border-right-width: 1px;
 }
@@ -2190,9 +2163,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 +2170,9 @@ 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,27 +2432,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));
-}
-.text-current {
-  color: currentColor;
-}
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
@@ -2632,9 +2554,6 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
-.duration-500 {
-  transition-duration: 500ms;
-}
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2658,9 +2577,6 @@ video {
 .duration-300 {
   animation-duration: 300ms;
 }
-.duration-500 {
-  animation-duration: 500ms;
-}
 .ease-in-out {
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2761,7 +2677,7 @@ textarea:is(:-webkit-autofill, :autofill) {
 }
 
 .toast-mini {
-  padding: 8px 12px !important;
+  padding: 12px !important;
   gap: 8px !important;
   width: -moz-fit-content !important;
   width: fit-content !important;
@@ -2791,7 +2707,7 @@ textarea:is(:-webkit-autofill, :autofill) {
   padding-bottom: 20px !important;
 }
 .left-space-lg {
-  padding-left: 20px !important;
+  padding-left: 20px !important;      
 }
 .right-space-lg {
   padding-right: 20px !important;
@@ -2824,6 +2740,7 @@ textarea:is(:-webkit-autofill, :autofill) {
   padding-right: 12px !important;
 }
 
+
 .space-xsm {
   padding: 8px !important;
 }
@@ -2859,10 +2776,10 @@ textarea:is(:-webkit-autofill, :autofill) {
   padding-right: 4px !important;
 }
 .bottom-space-2xsm {
-  padding-bottom: 4px !important;
+  padding-bottom: 4px !important
 }
 .bottom-space-2xlg {
-  padding-bottom: 32px !important;
+  padding-bottom: 32px !important
 }
 .space-2xsm {
   padding: 4px !important;
@@ -2894,6 +2811,7 @@ textarea:is(:-webkit-autofill, :autofill) {
   padding-top: 32px !important;
 }
 
+
 .gap-xsm {
   gap: 8px !important;
 }
@@ -2959,9 +2877,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .checked\:color-bg-default-inverse:checked {
     background-color: hsl(var(--color-bg-default-inverse));
   }
-.focus-within\:color-button-secondary-hover:focus-within {
-    background-color: hsl(var(--color-button-secondary-hover));
-  }
 .hover\:color-text-inverse:hover {
     color: hsl(var(--color-text-inverse));
   }
@@ -3023,6 +2938,72 @@ textarea:is(:-webkit-autofill, :autofill) {
 .disabled\:color-border-disabled:disabled {
     border-color: hsl(var(--color-border-disabled));
   }
+.group.secondary .group-\[\.secondary\]\:color-text-default {
+    color: hsl(var(--color-text-default));
+  }
+.group.danger .group-\[\.danger\]\:color-text-danger {
+    color: hsl(var(--color-text-danger));
+  }
+.group.success .group-\[\.success\]\:color-text-success {
+    color: hsl(var(--color-text-success));
+  }
+.group.default .group-\[\.default\]\:color-text-inverse {
+    color: hsl(var(--color-text-inverse));
+  }
+.group.secondary .group-\[\.secondary\]\:color-bg-secondary {
+    background-color: hsl(var(--color-bg-secondary));
+  }
+.group.danger .group-\[\.danger\]\:color-bg-danger-light {
+    background-color: hsl(var(--color-bg-danger-light));
+  }
+.group.success .group-\[\.success\]\:color-bg-success-light {
+    background-color: hsl(var(--color-bg-success-light));
+  }
+.group.default .group-\[\.default\]\:color-bg-default-inverse {
+    background-color: hsl(var(--color-bg-default-inverse));
+  }
+.group.default .group-\[\.default\]\:color-border-default {
+    border-color: hsl(var(--color-border-default));
+  }
+.group.secondary .group-\[\.secondary\]\:color-border-default {
+    border-color: hsl(var(--color-border-default));
+  }
+.group.success .group-\[\.success\]\:color-border-default {
+    border-color: hsl(var(--color-border-default));
+  }
+.group.secondary .group-\[\.secondary\]\:color-border-hover {
+    border-color: hsl(var(--color-border-hover));
+  }
+.group.success .group-\[\.success\]\:color-border-hover {
+    border-color: hsl(var(--color-border-hover));
+  }
+.group.danger .group-\[\.danger\]\:color-border-danger {
+    border-color: hsl(var(--color-border-danger));
+  }
+.group.secondary .group-\[\.secondary\]\:hover\:color-text-default:hover {
+    color: hsl(var(--color-text-default));
+  }
+.group.danger .group-\[\.danger\]\:hover\:color-text-danger:hover {
+    color: hsl(var(--color-text-danger));
+  }
+.group.success .group-\[\.success\]\:hover\:color-text-success:hover {
+    color: hsl(var(--color-text-success));
+  }
+.group.default .group-\[\.default\]\:hover\:color-text-inverse:hover {
+    color: hsl(var(--color-text-inverse));
+  }
+.group.secondary .group-\[\.secondary\]\:hover\:color-bg-secondary:hover {
+    background-color: hsl(var(--color-bg-secondary));
+  }
+.group.danger .group-\[\.danger\]\:hover\:color-bg-danger-light:hover {
+    background-color: hsl(var(--color-bg-danger-light));
+  }
+.group.success .group-\[\.success\]\:hover\:color-bg-success-light:hover {
+    background-color: hsl(var(--color-bg-success-light));
+  }
+.group.default .group-\[\.default\]\:hover\:color-bg-default-inverse:hover {
+    background-color: hsl(var(--color-bg-default-inverse));
+  }
 .aria-selected\:color-text-default[aria-selected="true"] {
     color: hsl(var(--color-text-default));
   }
@@ -3137,9 +3118,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .hover\:\!border-transparent:hover {
   border-color: transparent !important;
 }
-.hover\:bg-\[rgba\(0\2c 0\2c 0\2c 0\.1\)\]:hover {
-  background-color: rgba(0,0,0,0.1);
-}
 .hover\:bg-inherit:hover {
   background-color: inherit;
 }
@@ -3153,6 +3131,9 @@ textarea:is(:-webkit-autofill, :autofill) {
   --tw-brightness: brightness(.95);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.focus\:opacity-100:focus {
+  opacity: 1;
+}
 .focus\:shadow-none:focus {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -3216,6 +3197,10 @@ textarea:is(:-webkit-autofill, :autofill) {
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
+.group:hover .group-hover\:brightness-95 {
+  --tw-brightness: brightness(.95);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .peer:checked ~ .peer-checked\:block {
   display: block;
 }
@@ -3317,9 +3302,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=closed\]\:duration-300[data-state="closed"] {
   transition-duration: 300ms;
 }
-.data-\[state\=open\]\:duration-300[data-state="open"] {
-  transition-duration: 300ms;
-}
 .data-\[state\=open\]\:duration-500[data-state="open"] {
   transition-duration: 500ms;
 }
@@ -3380,8 +3362,8 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
   --tw-exit-translate-y: 100%;
 }
-.data-\[state\=closed\]\:slide-out-to-bottom-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
-  --tw-exit-translate-y: calc(100% + 16px * 2);
+.data-\[state\=closed\]\:slide-out-to-bottom-full[data-state="closed"] {
+  --tw-exit-translate-y: 100%;
 }
 .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
   --tw-exit-translate-x: -100%;
@@ -3389,14 +3371,14 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
   --tw-exit-translate-x: -50%;
 }
-.data-\[state\=closed\]\:slide-out-to-left-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
-  --tw-exit-translate-x: -calc(100% + 16px * 2);
+.data-\[state\=closed\]\:slide-out-to-left-full[data-state="closed"] {
+  --tw-exit-translate-x: -100%;
 }
 .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
   --tw-exit-translate-x: 100%;
 }
-.data-\[state\=closed\]\:slide-out-to-right-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
-  --tw-exit-translate-x: calc(100% + 16px * 2);
+.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
+  --tw-exit-translate-x: 100%;
 }
 .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
   --tw-exit-translate-y: -100%;
@@ -3404,14 +3386,14 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
   --tw-exit-translate-y: -48%;
 }
-.data-\[state\=closed\]\:slide-out-to-top-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
-  --tw-exit-translate-y: -calc(100% + 16px * 2);
+.data-\[state\=closed\]\:slide-out-to-top-full[data-state="closed"] {
+  --tw-exit-translate-y: -100%;
 }
 .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
   --tw-enter-translate-y: 100%;
 }
-.data-\[state\=open\]\:slide-in-from-bottom-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
-  --tw-enter-translate-y: calc(100% + 16px * 2);
+.data-\[state\=open\]\:slide-in-from-bottom-full[data-state="open"] {
+  --tw-enter-translate-y: 100%;
 }
 .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
   --tw-enter-translate-x: -100%;
@@ -3419,36 +3401,24 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
   --tw-enter-translate-x: -50%;
 }
-.data-\[state\=open\]\:slide-in-from-left-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
-  --tw-enter-translate-x: -calc(100% + 16px * 2);
-}
 .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
   --tw-enter-translate-x: 100%;
 }
-.data-\[state\=open\]\:slide-in-from-right-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
-  --tw-enter-translate-x: calc(100% + 16px * 2);
-}
 .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
   --tw-enter-translate-y: -100%;
 }
 .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
   --tw-enter-translate-y: -48%;
 }
-.data-\[state\=open\]\:slide-in-from-top-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
-  --tw-enter-translate-y: -calc(100% + 16px * 2);
+.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
+  --tw-enter-translate-y: -100%;
 }
 .data-\[state\=closed\]\:duration-300[data-state="closed"] {
   animation-duration: 300ms;
 }
-.data-\[state\=open\]\:duration-300[data-state="open"] {
-  animation-duration: 300ms;
-}
 .data-\[state\=open\]\:duration-500[data-state="open"] {
   animation-duration: 500ms;
 }
-.dark\:border-l-\[hsl\(var\(--color-border-active\)\)\]:is(.dark *) {
-  border-left-color: hsl(var(--color-border-active));
-}
 .dark\:bg-\[\#000\]:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -3464,9 +3434,6 @@ textarea:is(:-webkit-autofill, :autofill) {
   --tw-text-opacity: 1;
   color: rgb(54 59 63 / var(--tw-text-opacity, 1));
 }
-.dark\:hover\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.2\)\]:hover:is(.dark *) {
-  background-color: rgba(255,255,255,0.2);
-}
 @media (min-width: 640px) {
 
   .sm\:max-w-fit {
@@ -3536,6 +3503,10 @@ textarea:is(:-webkit-autofill, :autofill) {
     width: auto;
   }
 
+  .md\:max-w-\[420px\] {
+    max-width: 420px;
+  }
+
   .md\:max-w-min {
     max-width: -moz-min-content;
     max-width: min-content;
@@ -3745,4 +3716,4 @@ textarea:is(:-webkit-autofill, :autofill) {
 }
 .\[\&_tr\]\:border-b tr {
   border-bottom-width: 1px;
-}
+}

package/dist/index.es.d.ts

@@ -949,13 +949,13 @@ declare interface TimePickerProps extends React_2.HTMLAttributes<HTMLDivElement>
 declare type TimePickerType = "minutes" | "seconds" | "hours" | "12hours";
 
 export declare const Toast: React_2.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React_2.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "success" | "error" | "warning" | "info" | null | undefined;
-    type?: "normal" | "mini" | null | undefined;
+    variant?: "default" | "danger" | "secondary" | "success" | "mini" | null | undefined;
     position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "center-top" | "center-bottom" | null | undefined;
 } & ClassProp) | undefined) => string> & {
     position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "center-top" | "center-bottom";
     duration?: number;
-    toastType?: "mini" | "normal";
+    hasIcon?: boolean;
+    customIcon?: string;
 } & React_2.RefAttributes<HTMLLIElement>>;
 
 export declare function toast({ ...props }: Toast_2): {
@@ -984,19 +984,9 @@ export declare interface ToasterProps {
 
 declare type ToasterToast = ToastProps & {
     id: string;
-    title?: string;
-    toastType?: "normal" | "mini";
-    isLoading?: boolean;
-    iconType?: "icon" | "emoji";
-    customEmoji?: string;
-    customIcon?: keyof typeof UltimateIcons;
+    title?: React_2.ReactNode;
     description?: React_2.ReactNode;
-    showCloseButton?: boolean;
-    isActionable?: boolean;
-    action?: {
-        label: string;
-        handler: () => void;
-    };
+    action?: ToastActionElement;
 };
 
 export declare type ToastProps = React_2.ComponentPropsWithoutRef<typeof Toast>;