@g4rcez/components 2.0.38 → 2.0.40
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.
|
@@ -5,16 +5,16 @@ import { AnimatePresence, motion } from "motion/react";
|
|
|
5
5
|
import { Toast as Base } from "@base-ui/react/toast";
|
|
6
6
|
import { createContext, useCallback, useContext, useRef } from "react";
|
|
7
7
|
import { useHover } from "../../hooks/use-hover";
|
|
8
|
-
const variants = cva("relative isolate z-tooltip flex justify-between overflow-hidden whitespace-
|
|
8
|
+
const variants = cva("relative isolate z-tooltip flex justify-between overflow-hidden whitespace-wrap rounded-lg border text-sm shadow-shadow-notification", {
|
|
9
9
|
variants: {
|
|
10
10
|
theme: {
|
|
11
11
|
default: "border-card-border bg-card-background text-foreground",
|
|
12
12
|
info: "bg-alert-info-bg text-alert-info-text border-alert-info-border",
|
|
13
13
|
warn: "bg-alert-warn-bg text-alert-warn-text border-alert-warn-border",
|
|
14
|
+
muted: "bg-alert-muted-bg text-alert-muted-text border-alert-muted-border",
|
|
14
15
|
danger: "bg-alert-danger-bg text-alert-danger-text border-alert-danger-border",
|
|
15
16
|
success: "bg-alert-success-bg text-alert-success-text border-alert-success-border",
|
|
16
17
|
secondary: "bg-alert-secondary-bg text-alert-secondary-text border-alert-secondary-border",
|
|
17
|
-
muted: "bg-alert-muted-bg text-alert-muted-text border-alert-muted-border",
|
|
18
18
|
},
|
|
19
19
|
},
|
|
20
20
|
defaultVariants: { theme: "default" },
|
|
@@ -34,15 +34,15 @@ function Notification(props) {
|
|
|
34
34
|
const variant = props.hover ? "hover" : props.isLast ? "isLast" : "other";
|
|
35
35
|
const className = variants({ theme: props.toast.data?.theme || "default" });
|
|
36
36
|
return (<Base.Root toast={props.toast} swipeDirection={["down", "right"]}>
|
|
37
|
-
<motion.li layout layoutScroll animate={variant} data-index={props.index} initial={{ y: -100, zIndex: -1 }} className="absolute top-0 right-0 w-80 pointer-events-auto text-select" variants={{
|
|
37
|
+
<motion.li layout layoutScroll animate={variant} data-index={props.index} initial={{ y: -100, zIndex: -1 }} className="absolute top-0 right-0 w-80 pointer-events-auto text-select" transition={{ type: "spring", mass: 1.2, damping: 30, stiffness: 200 }} exit={{ opacity: [0.9, 0], transition: { opacity: { bounce: 0.25, duration: 0.3 } } }} variants={{
|
|
38
38
|
isLast: { y: 10, scale: 1, animationDuration: "300ms", opacity: 1 },
|
|
39
39
|
hover: { y: 0, position: "static", scale: 1, opacity: 1 },
|
|
40
40
|
other: animatedIndex[props.reversedIndex] || animatedIndex.default,
|
|
41
|
-
}}
|
|
41
|
+
}}>
|
|
42
42
|
<Base.Content className={className}>
|
|
43
43
|
<div className="flex flex-col p-4">
|
|
44
|
-
{props.toast.title ? (<Base.Title className="text-lg font-medium leading-relaxed select-text
|
|
45
|
-
<Base.Description className="select-text
|
|
44
|
+
{props.toast.title ? (<Base.Title className="text-lg font-medium leading-relaxed select-text"/>) : null}
|
|
45
|
+
<Base.Description className="select-text"/>
|
|
46
46
|
</div>
|
|
47
47
|
{closable ? (<Base.Close className="absolute top-2 right-2 p-1 rounded-full transition text-foreground hover:bg-danger/10 hover:text-danger-hover">
|
|
48
48
|
<XIcon className="size-5"/>
|