@sikka/hawa 0.1.32 → 0.1.33
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.
- package/dist/styles.css +9 -0
- package/es/index.es.js +2 -2
- package/lib/index.js +2 -2
- package/package.json +1 -1
- package/src/elements/Toast.tsx +32 -28
- package/src/elements/Toaster.tsx +27 -25
- package/src/styles.css +9 -0
- package/tailwind.config.js +8 -40
package/package.json
CHANGED
package/src/elements/Toast.tsx
CHANGED
|
@@ -22,7 +22,7 @@ const ToastViewport = React.forwardRef<
|
|
|
22
22
|
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
|
23
23
|
|
|
24
24
|
const toastVariants = cva(
|
|
25
|
-
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border
|
|
25
|
+
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border shadow-lg transition-all 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)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
|
26
26
|
{
|
|
27
27
|
variants: {
|
|
28
28
|
variant: {
|
|
@@ -35,7 +35,7 @@ const toastVariants = cva(
|
|
|
35
35
|
warning: "warning group text-warning-foreground bg-warning",
|
|
36
36
|
error: "error group border-error bg-error text-error-foreground",
|
|
37
37
|
success: "success group text-success-foreground bg-success",
|
|
38
|
-
none: "
|
|
38
|
+
none: "",
|
|
39
39
|
},
|
|
40
40
|
},
|
|
41
41
|
|
|
@@ -52,18 +52,20 @@ const Toast = React.forwardRef<
|
|
|
52
52
|
severity?: "info" | "warning" | "error" | "success" | "none"
|
|
53
53
|
direction?: "rtl" | "ltr"
|
|
54
54
|
}
|
|
55
|
-
>(({ className, variant, severity = "none", ...props }, ref) => {
|
|
55
|
+
>(({ className, variant, severity = "none", direction, ...props }, ref) => {
|
|
56
56
|
return (
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
57
|
+
<ToastPrimitives.Root
|
|
58
|
+
ref={ref}
|
|
59
|
+
className={cn(
|
|
60
|
+
toastVariants({ variant, severity }),
|
|
61
|
+
className,
|
|
62
|
+
direction === "rtl"
|
|
63
|
+
? "p-6 pl-0 pr-10 data-[state=closed]:slide-out-to-left-full"
|
|
64
|
+
: "p-6 pr-8 data-[state=closed]:slide-out-to-right-full"
|
|
65
|
+
)}
|
|
66
|
+
dir={direction}
|
|
67
|
+
{...props}
|
|
68
|
+
/>
|
|
67
69
|
)
|
|
68
70
|
})
|
|
69
71
|
Toast.displayName = ToastPrimitives.Root.displayName
|
|
@@ -71,25 +73,27 @@ Toast.displayName = ToastPrimitives.Root.displayName
|
|
|
71
73
|
const ToastAction = React.forwardRef<
|
|
72
74
|
React.ElementRef<typeof ToastPrimitives.Action>,
|
|
73
75
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
|
74
|
-
>(({ className, ...props }, ref) =>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
>(({ className, ...props }, ref) => {
|
|
77
|
+
return (
|
|
78
|
+
<ToastPrimitives.Action
|
|
79
|
+
ref={ref}
|
|
80
|
+
className={cn(
|
|
81
|
+
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
82
|
+
// "group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
|
80
83
|
|
|
81
|
-
|
|
84
|
+
"group-[.info]:border-muted/40 group-[.info]:hover:border-info/30 group-[.info]:hover:bg-info group-[.info]:hover:text-info-foreground group-[.info]:focus:ring-info",
|
|
82
85
|
|
|
83
|
-
|
|
86
|
+
"group-[.error]:border-muted/40 group-[.error]:hover:border-error/30 group-[.error]:hover:bg-error group-[.error]:hover:text-error-foreground group-[.error]:focus:ring-error",
|
|
84
87
|
|
|
85
|
-
|
|
88
|
+
"group-[.success]:border-muted/40 group-[.success]:hover:border-success/30 group-[.success]:hover:bg-success group-[.success]:hover:text-success-foreground group-[.success]:focus:ring-success",
|
|
86
89
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
)
|
|
90
|
+
"group-[.warning]:border-muted/40 group-[.warning]:hover:border-warning/30 group-[.warning]:hover:bg-warning group-[.warning]:hover:text-warning-foreground group-[.warning]:focus:ring-warning",
|
|
91
|
+
className
|
|
92
|
+
)}
|
|
93
|
+
{...props}
|
|
94
|
+
/>
|
|
95
|
+
)
|
|
96
|
+
})
|
|
93
97
|
ToastAction.displayName = ToastPrimitives.Action.displayName
|
|
94
98
|
|
|
95
99
|
const ToastClose = React.forwardRef<
|
package/src/elements/Toaster.tsx
CHANGED
|
@@ -8,34 +8,36 @@ import {
|
|
|
8
8
|
} from "./Toast"
|
|
9
9
|
import { useToast } from "../hooks/useToast"
|
|
10
10
|
import { cn } from "../util"
|
|
11
|
-
import { DirectionProvider } from "@radix-ui/react-direction"
|
|
12
11
|
|
|
13
12
|
export function Toaster(props) {
|
|
14
13
|
const { toasts } = useToast()
|
|
15
|
-
|
|
14
|
+
console.log("toaster direction", props.direction)
|
|
16
15
|
return (
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
</
|
|
30
|
-
{
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
16
|
+
<ToastProvider
|
|
17
|
+
swipeDirection={props.direction === "rtl" ? "left" : "right"}
|
|
18
|
+
>
|
|
19
|
+
{toasts.map(function ({ id, title, description, action, ...toastProps }) {
|
|
20
|
+
return (
|
|
21
|
+
<Toast direction={props.direction} key={id} {...toastProps}>
|
|
22
|
+
<div
|
|
23
|
+
className={cn(
|
|
24
|
+
"grid gap-1",
|
|
25
|
+
props.direction === "rtl" ? "text-right" : "text-left"
|
|
26
|
+
)}
|
|
27
|
+
>
|
|
28
|
+
{title && <ToastTitle>{title}</ToastTitle>}
|
|
29
|
+
{description && (
|
|
30
|
+
<ToastDescription>{description}</ToastDescription>
|
|
31
|
+
)}
|
|
32
|
+
</div>
|
|
33
|
+
{action}
|
|
34
|
+
<ToastClose />
|
|
35
|
+
</Toast>
|
|
36
|
+
)
|
|
37
|
+
})}
|
|
38
|
+
<ToastViewport
|
|
39
|
+
className={cn("gap-2", props.direction === "rtl" && "fixed left-0")}
|
|
40
|
+
/>
|
|
41
|
+
</ToastProvider>
|
|
40
42
|
)
|
|
41
43
|
}
|
package/src/styles.css
CHANGED
|
@@ -2273,6 +2273,9 @@ video {
|
|
|
2273
2273
|
.pb-4 {
|
|
2274
2274
|
padding-bottom: 1rem;
|
|
2275
2275
|
}
|
|
2276
|
+
.pl-0 {
|
|
2277
|
+
padding-left: 0px;
|
|
2278
|
+
}
|
|
2276
2279
|
.pl-10 {
|
|
2277
2280
|
padding-left: 2.5rem;
|
|
2278
2281
|
}
|
|
@@ -2294,6 +2297,9 @@ video {
|
|
|
2294
2297
|
.pl-\[25px\] {
|
|
2295
2298
|
padding-left: 25px;
|
|
2296
2299
|
}
|
|
2300
|
+
.pr-10 {
|
|
2301
|
+
padding-right: 2.5rem;
|
|
2302
|
+
}
|
|
2297
2303
|
.pr-2 {
|
|
2298
2304
|
padding-right: 0.5rem;
|
|
2299
2305
|
}
|
|
@@ -3645,6 +3651,9 @@ body {
|
|
|
3645
3651
|
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
|
|
3646
3652
|
--tw-enter-translate-y: 0.5rem;
|
|
3647
3653
|
}
|
|
3654
|
+
.data-\[state\=closed\]\:slide-out-to-left-full[data-state=closed] {
|
|
3655
|
+
--tw-exit-translate-x: -100%;
|
|
3656
|
+
}
|
|
3648
3657
|
.data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed] {
|
|
3649
3658
|
--tw-exit-translate-x: 100%;
|
|
3650
3659
|
}
|
package/tailwind.config.js
CHANGED
|
@@ -13,9 +13,7 @@ module.exports = {
|
|
|
13
13
|
container: {
|
|
14
14
|
center: true,
|
|
15
15
|
padding: "2rem",
|
|
16
|
-
screens: {
|
|
17
|
-
"2xl": "1400px"
|
|
18
|
-
}
|
|
16
|
+
screens: { "2xl": "1400px" }
|
|
19
17
|
},
|
|
20
18
|
extend: {
|
|
21
19
|
boxShadow: {
|
|
@@ -51,28 +49,12 @@ module.exports = {
|
|
|
51
49
|
// "100%": { transform: "scaleY(1)" },
|
|
52
50
|
},
|
|
53
51
|
expandDown: {
|
|
54
|
-
"0%": {
|
|
55
|
-
|
|
56
|
-
// maxHeight: 0,
|
|
57
|
-
height: "0px"
|
|
58
|
-
},
|
|
59
|
-
"100%": {
|
|
60
|
-
// opacity: 1,
|
|
61
|
-
// maxHeight: 100,
|
|
62
|
-
height: "15rem"
|
|
63
|
-
}
|
|
52
|
+
"0%": { height: "0px" },
|
|
53
|
+
"100%": { height: "15rem" }
|
|
64
54
|
},
|
|
65
55
|
expandUp: {
|
|
66
|
-
"0%": {
|
|
67
|
-
|
|
68
|
-
// maxHeight: 100,
|
|
69
|
-
height: "15rem"
|
|
70
|
-
},
|
|
71
|
-
"100%": {
|
|
72
|
-
// opacity: 0,
|
|
73
|
-
// maxHeight: 0,
|
|
74
|
-
height: "0rem"
|
|
75
|
-
}
|
|
56
|
+
"0%": { height: "15rem" },
|
|
57
|
+
"100%": { height: "0rem" }
|
|
76
58
|
},
|
|
77
59
|
"accordion-down": {
|
|
78
60
|
from: { height: 0 },
|
|
@@ -83,15 +65,9 @@ module.exports = {
|
|
|
83
65
|
to: { height: 0 }
|
|
84
66
|
},
|
|
85
67
|
blink: {
|
|
86
|
-
"0%": {
|
|
87
|
-
|
|
88
|
-
}
|
|
89
|
-
"50%": {
|
|
90
|
-
opacity: "1"
|
|
91
|
-
},
|
|
92
|
-
"100%": {
|
|
93
|
-
opacity: " 0.2"
|
|
94
|
-
}
|
|
68
|
+
"0%": { opacity: "0.2" },
|
|
69
|
+
"50%": { opacity: "1" },
|
|
70
|
+
"100%": { opacity: " 0.2" }
|
|
95
71
|
},
|
|
96
72
|
slideDownAndFade: {
|
|
97
73
|
from: { opacity: 0, transform: "translateY(-2px)" },
|
|
@@ -127,10 +103,6 @@ module.exports = {
|
|
|
127
103
|
slideRightAndFade:
|
|
128
104
|
"slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)"
|
|
129
105
|
},
|
|
130
|
-
// borderRadius: {
|
|
131
|
-
// DEFAULT: "var(--border-radius)",
|
|
132
|
-
// inner: "var(--border-radius-inner)"
|
|
133
|
-
// },
|
|
134
106
|
borderRadius: {
|
|
135
107
|
inner: "var(--radius-inner)",
|
|
136
108
|
DEFAULT: "var(--radius)",
|
|
@@ -173,8 +145,6 @@ module.exports = {
|
|
|
173
145
|
DEFAULT: "hsl(var(--success) / <alpha-value>)",
|
|
174
146
|
foreground: "hsl(var(--success-foreground) / <alpha-value>)"
|
|
175
147
|
},
|
|
176
|
-
|
|
177
|
-
|
|
178
148
|
muted: {
|
|
179
149
|
DEFAULT: "hsl(var(--muted))",
|
|
180
150
|
foreground: "hsl(var(--muted-foreground))"
|
|
@@ -191,7 +161,6 @@ module.exports = {
|
|
|
191
161
|
DEFAULT: "hsl(var(--card))",
|
|
192
162
|
foreground: "hsl(var(--card-foreground))"
|
|
193
163
|
},
|
|
194
|
-
|
|
195
164
|
blackA: {
|
|
196
165
|
1: "hsla(0, 0%, 0%, 0.012)",
|
|
197
166
|
2: "hsla(0, 0%, 0%, 0.024)",
|
|
@@ -234,7 +203,6 @@ module.exports = {
|
|
|
234
203
|
11: "hsl(250, 43.0%, 48.0%)",
|
|
235
204
|
12: "hsl(250, 43.0%, 26.0%)"
|
|
236
205
|
},
|
|
237
|
-
|
|
238
206
|
buttonPrimary: {
|
|
239
207
|
300: "hsl(var(--button-primary-300))",
|
|
240
208
|
500: "hsl(var(--button-primary-500))",
|