@g4rcez/components 2.0.37 → 2.0.39
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"/>
|
|
@@ -69,7 +69,7 @@ export const Step = ({ step, currentStep, status, title, titleClassName, ...prop
|
|
|
69
69
|
return (<Fragment>
|
|
70
70
|
<div className={`h-[2px] w-full xl:block bg-card-border hidden first:hidden ${innerStatus === "active" || innerStatus === "complete" ? "bg-success" : ""}`}/>
|
|
71
71
|
<motion.button {...props} type="button" data-step={step} animate={innerStatus} className="flex relative justify-center items-center w-auto text-center">
|
|
72
|
-
<motion.div variants={variants} transition={transitions} className={`hidden xl:block
|
|
72
|
+
<motion.div variants={variants} transition={transitions} className={`hidden xl:block absolute inset-0 rounded-full text-center ${innerStatus === "error" ? "bg-danger" : ""}`}/>
|
|
73
73
|
<motion.div initial={false} animate={innerStatus} transition={transition} className="flex relative justify-center items-center font-semibold rounded-full size-10 aspect-square" variants={{
|
|
74
74
|
error: {
|
|
75
75
|
color: parser("var(--danger-foreground)"),
|