@fileverse/ui 4.2.0 → 4.2.1-toast-2

package/dist/index.css

@@ -539,6 +539,7 @@ 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 */
@@ -547,7 +548,10 @@ 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 */
@@ -604,10 +608,11 @@ 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, 100%, 89%, 1; /* Red-200 */
+    --color-bg-danger: 354, 84%, 42%, 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 */
@@ -617,6 +622,9 @@ 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 */
@@ -627,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 */
@@ -867,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;
   }
@@ -916,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));
   }
@@ -960,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));
   }
@@ -1172,9 +1213,6 @@ video {
 .top-1\/2 {
   top: 50%;
 }
-.top-2 {
-  top: 0.5rem;
-}
 .top-3 {
   top: 0.75rem;
 }
@@ -1556,6 +1594,9 @@ video {
 .w-\[180px\] {
   width: 180px;
 }
+.w-\[18px\] {
+  width: 18px;
+}
 .w-\[200px\] {
   width: 200px;
 }
@@ -1568,6 +1609,9 @@ video {
 .w-\[280px\] {
   width: 280px;
 }
+.w-\[320px\] {
+  width: 320px;
+}
 .w-\[350px\] {
   width: 350px;
 }
@@ -1958,6 +2002,9 @@ 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));
@@ -2018,18 +2065,27 @@ 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;
@@ -2126,6 +2182,9 @@ video {
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-2 {
   border-width: 2px;
 }
@@ -2138,6 +2197,9 @@ video {
 .border-b-2 {
   border-bottom-width: 2px;
 }
+.border-l-4 {
+  border-left-width: 4px;
+}
 .border-r {
   border-right-width: 1px;
 }
@@ -2170,6 +2232,9 @@ video {
 .border-transparent {
   border-color: transparent;
 }
+.border-l-\[hsl\(var\(--color-border-default\)\)\] {
+  border-left-color: hsl(var(--color-border-default));
+}
 .\!bg-transparent {
   background-color: transparent !important;
 }
@@ -2432,6 +2497,12 @@ video {
   --tw-text-opacity: 1;
   color: rgb(119 129 138 / var(--tw-text-opacity, 1));
 }
+.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));
@@ -2554,6 +2625,9 @@ 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);
 }
@@ -2577,6 +2651,9 @@ 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);
 }
@@ -2677,7 +2754,7 @@ textarea:is(:-webkit-autofill, :autofill) {
 }
 
 .toast-mini {
-  padding: 12px !important;
+  padding: 8px 12px !important;
   gap: 8px !important;
   width: -moz-fit-content !important;
   width: fit-content !important;
@@ -2707,7 +2784,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;
@@ -2740,7 +2817,6 @@ textarea:is(:-webkit-autofill, :autofill) {
   padding-right: 12px !important;
 }
 
-
 .space-xsm {
   padding: 8px !important;
 }
@@ -2776,10 +2852,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;
@@ -2811,7 +2887,6 @@ textarea:is(:-webkit-autofill, :autofill) {
   padding-top: 32px !important;
 }
 
-
 .gap-xsm {
   gap: 8px !important;
 }
@@ -2877,6 +2952,9 @@ 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));
   }
@@ -2938,72 +3016,6 @@ 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));
   }
@@ -3118,6 +3130,9 @@ 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;
 }
@@ -3131,9 +3146,6 @@ 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;
@@ -3197,10 +3209,6 @@ 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;
 }
@@ -3302,6 +3310,9 @@ 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;
 }
@@ -3362,8 +3373,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-full[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-left[data-state="closed"] {
   --tw-exit-translate-x: -100%;
@@ -3371,14 +3382,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-full[data-state="closed"] {
-  --tw-exit-translate-x: -100%;
+.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-right[data-state="closed"] {
   --tw-exit-translate-x: 100%;
 }
-.data-\[state\=closed\]\:slide-out-to-right-full[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-top[data-state="closed"] {
   --tw-exit-translate-y: -100%;
@@ -3386,14 +3397,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-full[data-state="closed"] {
-  --tw-exit-translate-y: -100%;
+.data-\[state\=closed\]\:slide-out-to-top-\[calc\(100\%\+16px\*2\)\][data-state="closed"] {
+  --tw-exit-translate-y: -calc(100% + 16px * 2);
 }
 .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
   --tw-enter-translate-y: 100%;
 }
-.data-\[state\=open\]\:slide-in-from-bottom-full[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-left[data-state="open"] {
   --tw-enter-translate-x: -100%;
@@ -3401,24 +3412,36 @@ 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-full[data-state="open"] {
-  --tw-enter-translate-y: -100%;
+.data-\[state\=open\]\:slide-in-from-top-\[calc\(100\%\+16px\*2\)\][data-state="open"] {
+  --tw-enter-translate-y: -calc(100% + 16px * 2);
 }
 .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));
@@ -3434,6 +3457,9 @@ 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 {
@@ -3503,10 +3529,6 @@ 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;
@@ -3716,4 +3738,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" | "danger" | "secondary" | "success" | "mini" | null | undefined;
+    variant?: "default" | "success" | "error" | "warning" | "info" | null | undefined;
+    type?: "normal" | "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;
-    hasIcon?: boolean;
-    customIcon?: string;
+    toastType?: "mini" | "normal";
 } & React_2.RefAttributes<HTMLLIElement>>;
 
 export declare function toast({ ...props }: Toast_2): {
@@ -984,9 +984,19 @@ export declare interface ToasterProps {
 
 declare type ToasterToast = ToastProps & {
     id: string;
-    title?: React_2.ReactNode;
+    title?: string;
+    toastType?: "normal" | "mini";
+    isLoading?: boolean;
+    iconType?: "icon" | "emoji";
+    customEmoji?: string;
+    customIcon?: keyof typeof UltimateIcons;
     description?: React_2.ReactNode;
-    action?: ToastActionElement;
+    showCloseButton?: boolean;
+    isActionable?: boolean;
+    action?: {
+        label: string;
+        handler: () => void;
+    };
 };
 
 export declare type ToastProps = React_2.ComponentPropsWithoutRef<typeof Toast>;