@brycks/core-front 0.3.5 → 0.5.0
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/components/data/List/List.cjs +1 -1
- package/dist/components/data/List/List.cjs.map +1 -1
- package/dist/components/data/List/List.js +1 -1
- package/dist/components/data/List/List.js.map +1 -1
- package/dist/components/data/Table/Table.cjs +1 -1
- package/dist/components/data/Table/Table.cjs.map +1 -1
- package/dist/components/data/Table/Table.js +196 -166
- package/dist/components/data/Table/Table.js.map +1 -1
- package/dist/components/data/TreeView/TreeView.cjs +1 -1
- package/dist/components/data/TreeView/TreeView.cjs.map +1 -1
- package/dist/components/data/TreeView/TreeView.js +1 -1
- package/dist/components/data/TreeView/TreeView.js.map +1 -1
- package/dist/components/data.cjs +1 -1
- package/dist/components/data.js +23 -21
- package/dist/components/feedback/Alert/Alert.cjs +1 -1
- package/dist/components/feedback/Alert/Alert.cjs.map +1 -1
- package/dist/components/feedback/Alert/Alert.js +20 -19
- package/dist/components/feedback/Alert/Alert.js.map +1 -1
- package/dist/components/feedback/Banner/Banner.cjs +2 -0
- package/dist/components/feedback/Banner/Banner.cjs.map +1 -0
- package/dist/components/feedback/Banner/Banner.js +77 -0
- package/dist/components/feedback/Banner/Banner.js.map +1 -0
- package/dist/components/feedback/ConfirmDialog/ConfirmDialog.cjs +2 -0
- package/dist/components/feedback/ConfirmDialog/ConfirmDialog.cjs.map +1 -0
- package/dist/components/feedback/ConfirmDialog/ConfirmDialog.js +68 -0
- package/dist/components/feedback/ConfirmDialog/ConfirmDialog.js.map +1 -0
- package/dist/components/feedback/Drawer/Drawer.cjs +2 -2
- package/dist/components/feedback/Drawer/Drawer.cjs.map +1 -1
- package/dist/components/feedback/Drawer/Drawer.js +58 -57
- package/dist/components/feedback/Drawer/Drawer.js.map +1 -1
- package/dist/components/feedback/Modal/Modal.cjs +1 -1
- package/dist/components/feedback/Modal/Modal.cjs.map +1 -1
- package/dist/components/feedback/Modal/Modal.js +101 -91
- package/dist/components/feedback/Modal/Modal.js.map +1 -1
- package/dist/components/feedback/Popover/Popover.cjs +2 -2
- package/dist/components/feedback/Popover/Popover.cjs.map +1 -1
- package/dist/components/feedback/Popover/Popover.js +93 -85
- package/dist/components/feedback/Popover/Popover.js.map +1 -1
- package/dist/components/feedback/Toast/Toast.cjs +2 -2
- package/dist/components/feedback/Toast/Toast.cjs.map +1 -1
- package/dist/components/feedback/Toast/Toast.js +102 -93
- package/dist/components/feedback/Toast/Toast.js.map +1 -1
- package/dist/components/feedback.cjs +1 -1
- package/dist/components/feedback.js +17 -13
- package/dist/components/feedback.js.map +1 -1
- package/dist/components/form/Combobox/Combobox.cjs +2 -2
- package/dist/components/form/Combobox/Combobox.cjs.map +1 -1
- package/dist/components/form/Combobox/Combobox.js +187 -167
- package/dist/components/form/Combobox/Combobox.js.map +1 -1
- package/dist/components/form/DateInput/DateInput.cjs +1 -1
- package/dist/components/form/DateInput/DateInput.cjs.map +1 -1
- package/dist/components/form/DateInput/DateInput.js +2 -2
- package/dist/components/form/DateInput/DateInput.js.map +1 -1
- package/dist/components/form/DateRangePicker/DateRangePicker.cjs +1 -1
- package/dist/components/form/DateRangePicker/DateRangePicker.cjs.map +1 -1
- package/dist/components/form/DateRangePicker/DateRangePicker.js +34 -34
- package/dist/components/form/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/components/form/DropZone/DropZone.cjs +1 -1
- package/dist/components/form/DropZone/DropZone.cjs.map +1 -1
- package/dist/components/form/DropZone/DropZone.js +10 -10
- package/dist/components/form/DropZone/DropZone.js.map +1 -1
- package/dist/components/form/FileInput/FileInput.cjs +1 -1
- package/dist/components/form/FileInput/FileInput.cjs.map +1 -1
- package/dist/components/form/FileInput/FileInput.js +1 -1
- package/dist/components/form/FileInput/FileInput.js.map +1 -1
- package/dist/components/form/FormCard/FormCard.cjs +1 -1
- package/dist/components/form/FormCard/FormCard.cjs.map +1 -1
- package/dist/components/form/FormCard/FormCard.js +9 -9
- package/dist/components/form/FormCard/FormCard.js.map +1 -1
- package/dist/components/form/FormField/FormField.cjs +1 -1
- package/dist/components/form/FormField/FormField.cjs.map +1 -1
- package/dist/components/form/FormField/FormField.js +67 -55
- package/dist/components/form/FormField/FormField.js.map +1 -1
- package/dist/components/form/MultiSelect/MultiSelect.cjs +1 -1
- package/dist/components/form/MultiSelect/MultiSelect.cjs.map +1 -1
- package/dist/components/form/MultiSelect/MultiSelect.js +2 -3
- package/dist/components/form/MultiSelect/MultiSelect.js.map +1 -1
- package/dist/components/form/Radio/Radio.cjs +1 -1
- package/dist/components/form/Radio/Radio.cjs.map +1 -1
- package/dist/components/form/Radio/Radio.js +20 -20
- package/dist/components/form/Radio/Radio.js.map +1 -1
- package/dist/components/form/SearchInput/SearchInput.cjs +2 -0
- package/dist/components/form/SearchInput/SearchInput.cjs.map +1 -0
- package/dist/components/form/SearchInput/SearchInput.js +68 -0
- package/dist/components/form/SearchInput/SearchInput.js.map +1 -0
- package/dist/components/form/TagInput/TagInput.cjs +1 -1
- package/dist/components/form/TagInput/TagInput.cjs.map +1 -1
- package/dist/components/form/TagInput/TagInput.js +104 -102
- package/dist/components/form/TagInput/TagInput.js.map +1 -1
- package/dist/components/form/TimePicker/TimePicker.cjs +1 -1
- package/dist/components/form/TimePicker/TimePicker.cjs.map +1 -1
- package/dist/components/form/TimePicker/TimePicker.js +29 -30
- package/dist/components/form/TimePicker/TimePicker.js.map +1 -1
- package/dist/components/form.cjs +1 -1
- package/dist/components/form.js +15 -13
- package/dist/components/form.js.map +1 -1
- package/dist/components/layout/Card/Card.cjs +1 -1
- package/dist/components/layout/Card/Card.cjs.map +1 -1
- package/dist/components/layout/Card/Card.js +7 -5
- package/dist/components/layout/Card/Card.js.map +1 -1
- package/dist/components/layout/Collapse/Collapse.cjs.map +1 -1
- package/dist/components/layout/Collapse/Collapse.js.map +1 -1
- package/dist/components/media/Image/Image.cjs +1 -1
- package/dist/components/media/Image/Image.cjs.map +1 -1
- package/dist/components/media/Image/Image.js +9 -9
- package/dist/components/media/Image/Image.js.map +1 -1
- package/dist/components/media/ImageThumbnail/ImageThumbnail.cjs +1 -1
- package/dist/components/media/ImageThumbnail/ImageThumbnail.cjs.map +1 -1
- package/dist/components/media/ImageThumbnail/ImageThumbnail.js +6 -6
- package/dist/components/media/ImageThumbnail/ImageThumbnail.js.map +1 -1
- package/dist/components/navigation/Accordion/Accordion.cjs +1 -1
- package/dist/components/navigation/Accordion/Accordion.cjs.map +1 -1
- package/dist/components/navigation/Accordion/Accordion.js +0 -1
- package/dist/components/navigation/Accordion/Accordion.js.map +1 -1
- package/dist/components/navigation/Menu/Menu.cjs +1 -1
- package/dist/components/navigation/Menu/Menu.cjs.map +1 -1
- package/dist/components/navigation/Menu/Menu.js +87 -86
- package/dist/components/navigation/Menu/Menu.js.map +1 -1
- package/dist/components/navigation/Pagination/Pagination.cjs +1 -1
- package/dist/components/navigation/Pagination/Pagination.cjs.map +1 -1
- package/dist/components/navigation/Pagination/Pagination.js +107 -99
- package/dist/components/navigation/Pagination/Pagination.js.map +1 -1
- package/dist/components/navigation/SegmentedControl/SegmentedControl.cjs +2 -0
- package/dist/components/navigation/SegmentedControl/SegmentedControl.cjs.map +1 -0
- package/dist/components/navigation/SegmentedControl/SegmentedControl.js +90 -0
- package/dist/components/navigation/SegmentedControl/SegmentedControl.js.map +1 -0
- package/dist/components/navigation.cjs +1 -1
- package/dist/components/navigation.js +25 -23
- package/dist/components/navigation.js.map +1 -1
- package/dist/components/utility/Avatar/Avatar.cjs +1 -1
- package/dist/components/utility/Avatar/Avatar.cjs.map +1 -1
- package/dist/components/utility/Avatar/Avatar.js +18 -18
- package/dist/components/utility/Avatar/Avatar.js.map +1 -1
- package/dist/components/utility/Badge/Badge.cjs +1 -1
- package/dist/components/utility/Badge/Badge.cjs.map +1 -1
- package/dist/components/utility/Badge/Badge.js +31 -23
- package/dist/components/utility/Badge/Badge.js.map +1 -1
- package/dist/components/utility/Kbd/Kbd.cjs +2 -0
- package/dist/components/utility/Kbd/Kbd.cjs.map +1 -0
- package/dist/components/utility/Kbd/Kbd.js +20 -0
- package/dist/components/utility/Kbd/Kbd.js.map +1 -0
- package/dist/components/utility/Logo/Logo.cjs +1 -1
- package/dist/components/utility/Logo/Logo.cjs.map +1 -1
- package/dist/components/utility/Logo/Logo.js +21 -21
- package/dist/components/utility/Logo/Logo.js.map +1 -1
- package/dist/components/utility.cjs +1 -1
- package/dist/components/utility.js +9 -7
- package/dist/components/utility.js.map +1 -1
- package/dist/data.d.ts +34 -1
- package/dist/design-system/themes/ThemeProvider.cjs +1 -1
- package/dist/design-system/themes/ThemeProvider.cjs.map +1 -1
- package/dist/design-system/themes/ThemeProvider.js +46 -46
- package/dist/design-system/themes/ThemeProvider.js.map +1 -1
- package/dist/design-system/tokens/zIndex.cjs +1 -1
- package/dist/design-system/tokens/zIndex.cjs.map +1 -1
- package/dist/design-system/tokens/zIndex.js +2 -0
- package/dist/design-system/tokens/zIndex.js.map +1 -1
- package/dist/feedback.d.ts +75 -2
- package/dist/form.d.ts +41 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +213 -3
- package/dist/index.js +177 -165
- package/dist/index.js.map +1 -1
- package/dist/navigation.d.ts +58 -0
- package/dist/styles.css +1 -1
- package/dist/tokens.d.ts +2 -0
- package/dist/utility.d.ts +19 -0
- package/package.json +2 -1
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { createPortal as
|
|
4
|
-
import { cx as
|
|
5
|
-
import { ToastContext as
|
|
6
|
-
const
|
|
1
|
+
import { jsxs as h, Fragment as $, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as D, useState as f, useEffect as w, useCallback as x } from "react";
|
|
3
|
+
import { createPortal as H } from "react-dom";
|
|
4
|
+
import { cx as V } from "../../../utils/styles.js";
|
|
5
|
+
import { ToastContext as X } from "./ToastContext.js";
|
|
6
|
+
const A = {
|
|
7
7
|
info: {
|
|
8
|
-
bg: "var(--brycks-info-
|
|
9
|
-
border: "var(--brycks-info-
|
|
8
|
+
bg: "var(--brycks-info-muted)",
|
|
9
|
+
border: "var(--brycks-info-soft-hover)",
|
|
10
10
|
icon: "var(--brycks-info-default)"
|
|
11
11
|
},
|
|
12
12
|
success: {
|
|
13
|
-
bg: "var(--brycks-success-
|
|
14
|
-
border: "var(--brycks-success-
|
|
13
|
+
bg: "var(--brycks-success-muted)",
|
|
14
|
+
border: "var(--brycks-success-soft-hover)",
|
|
15
15
|
icon: "var(--brycks-success-default)"
|
|
16
16
|
},
|
|
17
17
|
warning: {
|
|
18
|
-
bg: "var(--brycks-warning-
|
|
19
|
-
border: "var(--brycks-warning-
|
|
18
|
+
bg: "var(--brycks-warning-muted)",
|
|
19
|
+
border: "var(--brycks-warning-soft-hover)",
|
|
20
20
|
icon: "var(--brycks-warning-default)"
|
|
21
21
|
},
|
|
22
22
|
error: {
|
|
23
|
-
bg: "var(--brycks-error-
|
|
24
|
-
border: "var(--brycks-error-
|
|
23
|
+
bg: "var(--brycks-error-muted)",
|
|
24
|
+
border: "var(--brycks-error-soft-hover)",
|
|
25
25
|
icon: "var(--brycks-error-default)"
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
|
-
function
|
|
28
|
+
function F({ intent: m }) {
|
|
29
29
|
return /* @__PURE__ */ t("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ t("path", { d: {
|
|
30
30
|
info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
|
|
31
31
|
success: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
|
|
@@ -33,71 +33,74 @@ function D({ intent: m }) {
|
|
|
33
33
|
error: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
34
34
|
}[m] }) });
|
|
35
35
|
}
|
|
36
|
-
function
|
|
36
|
+
function q() {
|
|
37
37
|
return /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
|
|
38
38
|
}
|
|
39
|
-
const
|
|
40
|
-
intent:
|
|
39
|
+
const z = D(function({
|
|
40
|
+
intent: e = "info",
|
|
41
41
|
title: a,
|
|
42
42
|
description: i,
|
|
43
|
-
isOpen:
|
|
43
|
+
isOpen: o = !0,
|
|
44
44
|
duration: c = 5e3,
|
|
45
45
|
onClose: l,
|
|
46
46
|
showCloseButton: g = !0,
|
|
47
|
-
|
|
47
|
+
closeLabel: y = "Close toast",
|
|
48
|
+
action: b,
|
|
48
49
|
icon: p,
|
|
49
|
-
className:
|
|
50
|
-
style:
|
|
51
|
-
testId:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
50
|
+
className: v,
|
|
51
|
+
style: s,
|
|
52
|
+
testId: n,
|
|
53
|
+
onMouseEnter: u,
|
|
54
|
+
onMouseLeave: d,
|
|
55
|
+
...I
|
|
56
|
+
}, L) {
|
|
57
|
+
const [E, T] = f(o), [P, S] = f(!1), [C, M] = f(!1);
|
|
58
|
+
if (w(() => {
|
|
59
|
+
if (o)
|
|
60
|
+
T(!0), S(!1);
|
|
58
61
|
else {
|
|
59
62
|
S(!0);
|
|
60
|
-
const
|
|
61
|
-
return () => clearTimeout(
|
|
63
|
+
const r = setTimeout(() => T(!1), 200);
|
|
64
|
+
return () => clearTimeout(r);
|
|
62
65
|
}
|
|
63
|
-
}, [
|
|
64
|
-
if (!
|
|
65
|
-
const
|
|
66
|
+
}, [o]), w(() => {
|
|
67
|
+
if (!o || c === 0 || C) return;
|
|
68
|
+
const r = setTimeout(() => {
|
|
66
69
|
l?.();
|
|
67
70
|
}, c);
|
|
68
|
-
return () => clearTimeout(
|
|
69
|
-
}, [
|
|
70
|
-
const
|
|
71
|
+
return () => clearTimeout(r);
|
|
72
|
+
}, [o, c, l, C]), !E) return null;
|
|
73
|
+
const k = A[e], W = {
|
|
71
74
|
display: "flex",
|
|
72
75
|
alignItems: "flex-start",
|
|
73
76
|
gap: 12,
|
|
74
77
|
padding: "12px 16px",
|
|
75
|
-
backgroundColor:
|
|
76
|
-
border: `1px solid ${
|
|
78
|
+
backgroundColor: k.bg,
|
|
79
|
+
border: `1px solid ${k.border}`,
|
|
77
80
|
borderRadius: "var(--brycks-radius-lg)",
|
|
78
81
|
boxShadow: "var(--brycks-shadow-lg)",
|
|
79
82
|
maxWidth: 400,
|
|
80
|
-
animation:
|
|
81
|
-
...
|
|
82
|
-
},
|
|
83
|
-
color:
|
|
83
|
+
animation: P ? "brycks-toast-out 200ms ease-in forwards" : "brycks-toast-in 200ms ease-out",
|
|
84
|
+
...s
|
|
85
|
+
}, j = {
|
|
86
|
+
color: k.icon,
|
|
84
87
|
flexShrink: 0,
|
|
85
88
|
marginTop: 2
|
|
86
|
-
},
|
|
89
|
+
}, Y = {
|
|
87
90
|
flex: 1,
|
|
88
91
|
display: "flex",
|
|
89
92
|
flexDirection: "column",
|
|
90
93
|
gap: 4
|
|
91
|
-
},
|
|
94
|
+
}, B = {
|
|
92
95
|
fontSize: 14,
|
|
93
96
|
fontWeight: 600,
|
|
94
97
|
color: "var(--brycks-foreground-default)",
|
|
95
98
|
lineHeight: 1.4
|
|
96
|
-
},
|
|
99
|
+
}, N = {
|
|
97
100
|
fontSize: 13,
|
|
98
101
|
color: "var(--brycks-foreground-muted)",
|
|
99
102
|
lineHeight: 1.4
|
|
100
|
-
},
|
|
103
|
+
}, R = {
|
|
101
104
|
display: "flex",
|
|
102
105
|
alignItems: "center",
|
|
103
106
|
justifyContent: "center",
|
|
@@ -109,7 +112,7 @@ const C = B(function({
|
|
|
109
112
|
flexShrink: 0,
|
|
110
113
|
marginLeft: "auto"
|
|
111
114
|
};
|
|
112
|
-
return /* @__PURE__ */
|
|
115
|
+
return /* @__PURE__ */ h($, { children: [
|
|
113
116
|
/* @__PURE__ */ t("style", { children: `
|
|
114
117
|
@keyframes brycks-toast-in {
|
|
115
118
|
from { opacity: 0; transform: translateY(-8px) scale(0.95); }
|
|
@@ -120,37 +123,43 @@ const C = B(function({
|
|
|
120
123
|
to { opacity: 0; transform: translateY(-8px) scale(0.95); }
|
|
121
124
|
}
|
|
122
125
|
` }),
|
|
123
|
-
/* @__PURE__ */
|
|
126
|
+
/* @__PURE__ */ h(
|
|
124
127
|
"div",
|
|
125
128
|
{
|
|
126
|
-
ref:
|
|
127
|
-
role: "alert",
|
|
128
|
-
"aria-live": "polite",
|
|
129
|
-
className:
|
|
130
|
-
style:
|
|
131
|
-
"data-testid":
|
|
132
|
-
|
|
129
|
+
ref: L,
|
|
130
|
+
role: e === "error" || e === "warning" ? "alert" : "status",
|
|
131
|
+
"aria-live": e === "error" || e === "warning" ? "assertive" : "polite",
|
|
132
|
+
className: V("brycks-toast", `brycks-toast--${e}`, v),
|
|
133
|
+
style: W,
|
|
134
|
+
"data-testid": n,
|
|
135
|
+
onMouseEnter: (r) => {
|
|
136
|
+
M(!0), u?.(r);
|
|
137
|
+
},
|
|
138
|
+
onMouseLeave: (r) => {
|
|
139
|
+
M(!1), d?.(r);
|
|
140
|
+
},
|
|
141
|
+
...I,
|
|
133
142
|
children: [
|
|
134
|
-
/* @__PURE__ */ t("span", { style:
|
|
135
|
-
/* @__PURE__ */
|
|
136
|
-
a && /* @__PURE__ */ t("span", { style:
|
|
137
|
-
i && /* @__PURE__ */ t("span", { style:
|
|
138
|
-
|
|
143
|
+
/* @__PURE__ */ t("span", { style: j, children: p || /* @__PURE__ */ t(F, { intent: e }) }),
|
|
144
|
+
/* @__PURE__ */ h("div", { style: Y, children: [
|
|
145
|
+
a && /* @__PURE__ */ t("span", { style: B, children: a }),
|
|
146
|
+
i && /* @__PURE__ */ t("span", { style: N, children: i }),
|
|
147
|
+
b && /* @__PURE__ */ t("div", { style: { marginTop: 8 }, children: b })
|
|
139
148
|
] }),
|
|
140
149
|
g && /* @__PURE__ */ t(
|
|
141
150
|
"button",
|
|
142
151
|
{
|
|
143
152
|
type: "button",
|
|
144
|
-
style:
|
|
153
|
+
style: R,
|
|
145
154
|
onClick: l,
|
|
146
|
-
"aria-label":
|
|
147
|
-
onMouseEnter: (
|
|
148
|
-
|
|
155
|
+
"aria-label": y,
|
|
156
|
+
onMouseEnter: (r) => {
|
|
157
|
+
r.currentTarget.style.backgroundColor = "var(--brycks-background-muted)";
|
|
149
158
|
},
|
|
150
|
-
onMouseLeave: (
|
|
151
|
-
|
|
159
|
+
onMouseLeave: (r) => {
|
|
160
|
+
r.currentTarget.style.backgroundColor = "transparent";
|
|
152
161
|
},
|
|
153
|
-
children: /* @__PURE__ */ t(
|
|
162
|
+
children: /* @__PURE__ */ t(q, {})
|
|
154
163
|
}
|
|
155
164
|
)
|
|
156
165
|
]
|
|
@@ -158,8 +167,8 @@ const C = B(function({
|
|
|
158
167
|
)
|
|
159
168
|
] });
|
|
160
169
|
});
|
|
161
|
-
|
|
162
|
-
const
|
|
170
|
+
z.displayName = "Toast";
|
|
171
|
+
const G = {
|
|
163
172
|
"top-left": { top: 16, left: 16 },
|
|
164
173
|
"top-center": { top: 16, left: "50%", transform: "translateX(-50%)" },
|
|
165
174
|
"top-right": { top: 16, right: 16 },
|
|
@@ -167,50 +176,50 @@ const V = {
|
|
|
167
176
|
"bottom-center": { bottom: 16, left: "50%", transform: "translateX(-50%)" },
|
|
168
177
|
"bottom-right": { bottom: 16, right: 16 }
|
|
169
178
|
};
|
|
170
|
-
let
|
|
171
|
-
function
|
|
179
|
+
let J = 0;
|
|
180
|
+
function O({
|
|
172
181
|
children: m,
|
|
173
|
-
position:
|
|
182
|
+
position: e = "top-right",
|
|
174
183
|
maxToasts: a = 5
|
|
175
184
|
}) {
|
|
176
|
-
const [i,
|
|
177
|
-
|
|
185
|
+
const [i, o] = f([]), [c, l] = f(!1);
|
|
186
|
+
w(() => {
|
|
178
187
|
l(!0);
|
|
179
188
|
}, []);
|
|
180
189
|
const g = x(
|
|
181
|
-
(
|
|
182
|
-
const
|
|
183
|
-
return
|
|
184
|
-
const
|
|
185
|
-
return
|
|
186
|
-
}),
|
|
190
|
+
(s) => {
|
|
191
|
+
const n = `toast-${++J}`;
|
|
192
|
+
return o((u) => {
|
|
193
|
+
const d = [...u, { id: n, props: s }];
|
|
194
|
+
return d.length > a ? d.slice(-a) : d;
|
|
195
|
+
}), n;
|
|
187
196
|
},
|
|
188
197
|
[a]
|
|
189
|
-
),
|
|
190
|
-
|
|
191
|
-
}, []),
|
|
192
|
-
|
|
193
|
-
}, []),
|
|
198
|
+
), y = x((s) => {
|
|
199
|
+
o((n) => n.filter((u) => u.id !== s));
|
|
200
|
+
}, []), b = x(() => {
|
|
201
|
+
o([]);
|
|
202
|
+
}, []), p = {
|
|
194
203
|
position: "fixed",
|
|
195
204
|
zIndex: "var(--brycks-z-toast)",
|
|
196
205
|
display: "flex",
|
|
197
206
|
flexDirection: "column",
|
|
198
207
|
gap: 8,
|
|
199
208
|
pointerEvents: "none",
|
|
200
|
-
...
|
|
201
|
-
},
|
|
209
|
+
...G[e]
|
|
210
|
+
}, v = {
|
|
202
211
|
pointerEvents: "auto"
|
|
203
212
|
};
|
|
204
|
-
return /* @__PURE__ */
|
|
213
|
+
return /* @__PURE__ */ h(X.Provider, { value: { toasts: i, addToast: g, removeToast: y, removeAll: b }, children: [
|
|
205
214
|
m,
|
|
206
|
-
c &&
|
|
207
|
-
/* @__PURE__ */ t("div", { className: "brycks-toast-container", style:
|
|
215
|
+
c && H(
|
|
216
|
+
/* @__PURE__ */ t("div", { className: "brycks-toast-container", style: p, children: i.map(({ id: s, props: n }) => /* @__PURE__ */ t("div", { style: v, children: /* @__PURE__ */ t(z, { ...n, isOpen: !0, onClose: () => y(s) }) }, s)) }),
|
|
208
217
|
document.body
|
|
209
218
|
)
|
|
210
219
|
] });
|
|
211
220
|
}
|
|
212
221
|
export {
|
|
213
|
-
|
|
214
|
-
|
|
222
|
+
z as Toast,
|
|
223
|
+
O as ToastProvider
|
|
215
224
|
};
|
|
216
225
|
//# sourceMappingURL=Toast.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../../../../src/components/feedback/Toast/Toast.tsx"],"sourcesContent":["/**\n * Toast Component\n *\n * A notification toast with auto-dismiss and action support.\n * Includes a toast container for managing multiple toasts.\n */\n\nimport {\n forwardRef,\n useState,\n useEffect,\n useCallback,\n type CSSProperties,\n type ReactNode,\n type HTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { ToastContext } from './ToastContext'\nimport type { ToastItem } from './ToastContext'\n\nexport type ToastIntent = 'info' | 'success' | 'warning' | 'error'\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\nexport interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Toast intent/type */\n intent?: ToastIntent\n /** Toast title */\n title?: ReactNode\n /** Toast description */\n description?: ReactNode\n /** Whether the toast is visible */\n isOpen?: boolean\n /** Duration in ms before auto-dismiss (0 = no auto-dismiss) */\n duration?: number\n /** Callback when toast should close */\n onClose?: () => void\n /** Whether to show close button */\n showCloseButton?: boolean\n /** Action button */\n action?: ReactNode\n /** Custom icon */\n icon?: ReactNode\n /** Custom class name */\n className?: string\n /** Test ID */\n testId?: string\n}\n\nconst intentConfig: Record<ToastIntent, { bg: string; border: string; icon: string }> = {\n info: {\n bg: 'var(--brycks-info-50)',\n border: 'var(--brycks-info-200)',\n icon: 'var(--brycks-info-default)',\n },\n success: {\n bg: 'var(--brycks-success-50)',\n border: 'var(--brycks-success-200)',\n icon: 'var(--brycks-success-default)',\n },\n warning: {\n bg: 'var(--brycks-warning-50)',\n border: 'var(--brycks-warning-200)',\n icon: 'var(--brycks-warning-default)',\n },\n error: {\n bg: 'var(--brycks-error-50)',\n border: 'var(--brycks-error-200)',\n icon: 'var(--brycks-error-default)',\n },\n}\n\nfunction ToastIcon({ intent }: { intent: ToastIntent }) {\n const paths: Record<ToastIntent, string> = {\n info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',\n success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',\n warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',\n error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',\n }\n\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <path d={paths[intent]} />\n </svg>\n )\n}\n\nfunction CloseIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n )\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n {\n intent = 'info',\n title,\n description,\n isOpen = true,\n duration = 5000,\n onClose,\n showCloseButton = true,\n action,\n icon,\n className,\n style,\n testId,\n ...props\n },\n ref\n) {\n const [isVisible, setIsVisible] = useState(isOpen)\n const [isExiting, setIsExiting] = useState(false)\n\n useEffect(() => {\n if (isOpen) {\n setIsVisible(true)\n setIsExiting(false)\n } else {\n setIsExiting(true)\n const timer = setTimeout(() => setIsVisible(false), 200)\n return () => clearTimeout(timer)\n }\n }, [isOpen])\n\n useEffect(() => {\n if (!isOpen || duration === 0) return\n\n const timer = setTimeout(() => {\n onClose?.()\n }, duration)\n\n return () => clearTimeout(timer)\n }, [isOpen, duration, onClose])\n\n if (!isVisible) return null\n\n const config = intentConfig[intent]\n\n const toastStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'flex-start',\n gap: 12,\n padding: '12px 16px',\n backgroundColor: config.bg,\n border: `1px solid ${config.border}`,\n borderRadius: 'var(--brycks-radius-lg)',\n boxShadow: 'var(--brycks-shadow-lg)',\n maxWidth: 400,\n animation: isExiting\n ? 'brycks-toast-out 200ms ease-in forwards'\n : 'brycks-toast-in 200ms ease-out',\n ...style,\n }\n\n const iconStyle: CSSProperties = {\n color: config.icon,\n flexShrink: 0,\n marginTop: 2,\n }\n\n const contentStyle: CSSProperties = {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n gap: 4,\n }\n\n const titleStyle: CSSProperties = {\n fontSize: 14,\n fontWeight: 600,\n color: 'var(--brycks-foreground-default)',\n lineHeight: 1.4,\n }\n\n const descriptionStyle: CSSProperties = {\n fontSize: 13,\n color: 'var(--brycks-foreground-muted)',\n lineHeight: 1.4,\n }\n\n const closeButtonStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 24,\n height: 24,\n borderRadius: 'var(--brycks-radius-sm)',\n color: 'var(--brycks-foreground-muted)',\n transition: 'all 150ms ease-out',\n flexShrink: 0,\n marginLeft: 'auto',\n }\n\n return (\n <>\n <style>\n {`\n @keyframes brycks-toast-in {\n from { opacity: 0; transform: translateY(-8px) scale(0.95); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n @keyframes brycks-toast-out {\n from { opacity: 1; transform: translateY(0) scale(1); }\n to { opacity: 0; transform: translateY(-8px) scale(0.95); }\n }\n `}\n </style>\n <div\n ref={ref}\n role=\"alert\"\n aria-live=\"polite\"\n className={cx('brycks-toast', `brycks-toast--${intent}`, className)}\n style={toastStyle}\n data-testid={testId}\n {...props}\n >\n <span style={iconStyle}>\n {icon || <ToastIcon intent={intent} />}\n </span>\n <div style={contentStyle}>\n {title && <span style={titleStyle}>{title}</span>}\n {description && <span style={descriptionStyle}>{description}</span>}\n {action && <div style={{ marginTop: 8 }}>{action}</div>}\n </div>\n {showCloseButton && (\n <button\n type=\"button\"\n style={closeButtonStyle}\n onClick={onClose}\n aria-label=\"Close toast\"\n onMouseEnter={(e) => {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent'\n }}\n >\n <CloseIcon />\n </button>\n )}\n </div>\n </>\n )\n})\n\nToast.displayName = 'Toast'\n\n// Toast Provider\nexport interface ToastProviderProps {\n children: ReactNode\n position?: ToastPosition\n maxToasts?: number\n}\n\nconst positionStyles: Record<ToastPosition, CSSProperties> = {\n 'top-left': { top: 16, left: 16 },\n 'top-center': { top: 16, left: '50%', transform: 'translateX(-50%)' },\n 'top-right': { top: 16, right: 16 },\n 'bottom-left': { bottom: 16, left: 16 },\n 'bottom-center': { bottom: 16, left: '50%', transform: 'translateX(-50%)' },\n 'bottom-right': { bottom: 16, right: 16 },\n}\n\nlet toastCounter = 0\n\nexport function ToastProvider({\n children,\n position = 'top-right',\n maxToasts = 5,\n}: ToastProviderProps) {\n const [toasts, setToasts] = useState<ToastItem[]>([])\n const [mounted, setMounted] = useState(false)\n\n useEffect(() => {\n setMounted(true)\n }, [])\n\n const addToast = useCallback(\n (props: Omit<ToastProps, 'isOpen' | 'onClose'>) => {\n const id = `toast-${++toastCounter}`\n setToasts((prev) => {\n const newToasts = [...prev, { id, props }]\n if (newToasts.length > maxToasts) {\n return newToasts.slice(-maxToasts)\n }\n return newToasts\n })\n return id\n },\n [maxToasts]\n )\n\n const removeToast = useCallback((id: string) => {\n setToasts((prev) => prev.filter((t) => t.id !== id))\n }, [])\n\n const removeAll = useCallback(() => {\n setToasts([])\n }, [])\n\n const containerStyle: CSSProperties = {\n position: 'fixed',\n zIndex: 'var(--brycks-z-toast)' as unknown as number,\n display: 'flex',\n flexDirection: 'column',\n gap: 8,\n pointerEvents: 'none',\n ...positionStyles[position],\n }\n\n const toastWrapperStyle: CSSProperties = {\n pointerEvents: 'auto',\n }\n\n return (\n <ToastContext.Provider value={{ toasts, addToast, removeToast, removeAll }}>\n {children}\n {mounted &&\n createPortal(\n <div className=\"brycks-toast-container\" style={containerStyle}>\n {toasts.map(({ id, props }) => (\n <div key={id} style={toastWrapperStyle}>\n <Toast {...props} isOpen onClose={() => removeToast(id)} />\n </div>\n ))}\n </div>,\n document.body\n )}\n </ToastContext.Provider>\n )\n}\n"],"names":["intentConfig","ToastIcon","intent","jsx","CloseIcon","Toast","forwardRef","title","description","isOpen","duration","onClose","showCloseButton","action","icon","className","style","testId","props","ref","isVisible","setIsVisible","useState","isExiting","setIsExiting","useEffect","timer","config","toastStyle","iconStyle","contentStyle","titleStyle","descriptionStyle","closeButtonStyle","jsxs","Fragment","cx","e","positionStyles","toastCounter","ToastProvider","children","position","maxToasts","toasts","setToasts","mounted","setMounted","addToast","useCallback","id","prev","newToasts","removeToast","t","removeAll","containerStyle","toastWrapperStyle","ToastContext","createPortal"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../../../../src/components/feedback/Toast/Toast.tsx"],"sourcesContent":["/**\n * Toast Component\n *\n * A notification toast with auto-dismiss and action support.\n * Includes a toast container for managing multiple toasts.\n */\n\nimport {\n forwardRef,\n useState,\n useEffect,\n useCallback,\n type CSSProperties,\n type ReactNode,\n type HTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { ToastContext } from './ToastContext'\nimport type { ToastItem } from './ToastContext'\n\nexport type ToastIntent = 'info' | 'success' | 'warning' | 'error'\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\nexport interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Toast intent/type */\n intent?: ToastIntent\n /** Toast title */\n title?: ReactNode\n /** Toast description */\n description?: ReactNode\n /** Whether the toast is visible */\n isOpen?: boolean\n /** Duration in ms before auto-dismiss (0 = no auto-dismiss) */\n duration?: number\n /** Callback when toast should close */\n onClose?: () => void\n /** Whether to show close button */\n showCloseButton?: boolean\n /** Accessible label of the close button */\n closeLabel?: string\n /** Action button */\n action?: ReactNode\n /** Custom icon */\n icon?: ReactNode\n /** Custom class name */\n className?: string\n /** Test ID */\n testId?: string\n}\n\nconst intentConfig: Record<ToastIntent, { bg: string; border: string; icon: string }> = {\n info: {\n bg: 'var(--brycks-info-muted)',\n border: 'var(--brycks-info-soft-hover)',\n icon: 'var(--brycks-info-default)',\n },\n success: {\n bg: 'var(--brycks-success-muted)',\n border: 'var(--brycks-success-soft-hover)',\n icon: 'var(--brycks-success-default)',\n },\n warning: {\n bg: 'var(--brycks-warning-muted)',\n border: 'var(--brycks-warning-soft-hover)',\n icon: 'var(--brycks-warning-default)',\n },\n error: {\n bg: 'var(--brycks-error-muted)',\n border: 'var(--brycks-error-soft-hover)',\n icon: 'var(--brycks-error-default)',\n },\n}\n\nfunction ToastIcon({ intent }: { intent: ToastIntent }) {\n const paths: Record<ToastIntent, string> = {\n info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',\n success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',\n warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',\n error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',\n }\n\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <path d={paths[intent]} />\n </svg>\n )\n}\n\nfunction CloseIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n )\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n {\n intent = 'info',\n title,\n description,\n isOpen = true,\n duration = 5000,\n onClose,\n showCloseButton = true,\n closeLabel = 'Close toast',\n action,\n icon,\n className,\n style,\n testId,\n onMouseEnter,\n onMouseLeave,\n ...props\n },\n ref\n) {\n const [isVisible, setIsVisible] = useState(isOpen)\n const [isExiting, setIsExiting] = useState(false)\n const [isPaused, setIsPaused] = useState(false)\n\n useEffect(() => {\n if (isOpen) {\n setIsVisible(true)\n setIsExiting(false)\n } else {\n setIsExiting(true)\n const timer = setTimeout(() => setIsVisible(false), 200)\n return () => clearTimeout(timer)\n }\n }, [isOpen])\n\n // Auto-dismiss pauses while the pointer is over the toast\n useEffect(() => {\n if (!isOpen || duration === 0 || isPaused) return\n\n const timer = setTimeout(() => {\n onClose?.()\n }, duration)\n\n return () => clearTimeout(timer)\n }, [isOpen, duration, onClose, isPaused])\n\n if (!isVisible) return null\n\n const config = intentConfig[intent]\n\n const toastStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'flex-start',\n gap: 12,\n padding: '12px 16px',\n backgroundColor: config.bg,\n border: `1px solid ${config.border}`,\n borderRadius: 'var(--brycks-radius-lg)',\n boxShadow: 'var(--brycks-shadow-lg)',\n maxWidth: 400,\n animation: isExiting\n ? 'brycks-toast-out 200ms ease-in forwards'\n : 'brycks-toast-in 200ms ease-out',\n ...style,\n }\n\n const iconStyle: CSSProperties = {\n color: config.icon,\n flexShrink: 0,\n marginTop: 2,\n }\n\n const contentStyle: CSSProperties = {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n gap: 4,\n }\n\n const titleStyle: CSSProperties = {\n fontSize: 14,\n fontWeight: 600,\n color: 'var(--brycks-foreground-default)',\n lineHeight: 1.4,\n }\n\n const descriptionStyle: CSSProperties = {\n fontSize: 13,\n color: 'var(--brycks-foreground-muted)',\n lineHeight: 1.4,\n }\n\n const closeButtonStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 24,\n height: 24,\n borderRadius: 'var(--brycks-radius-sm)',\n color: 'var(--brycks-foreground-muted)',\n transition: 'all 150ms ease-out',\n flexShrink: 0,\n marginLeft: 'auto',\n }\n\n return (\n <>\n <style>\n {`\n @keyframes brycks-toast-in {\n from { opacity: 0; transform: translateY(-8px) scale(0.95); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n @keyframes brycks-toast-out {\n from { opacity: 1; transform: translateY(0) scale(1); }\n to { opacity: 0; transform: translateY(-8px) scale(0.95); }\n }\n `}\n </style>\n <div\n ref={ref}\n role={intent === 'error' || intent === 'warning' ? 'alert' : 'status'}\n aria-live={intent === 'error' || intent === 'warning' ? 'assertive' : 'polite'}\n className={cx('brycks-toast', `brycks-toast--${intent}`, className)}\n style={toastStyle}\n data-testid={testId}\n onMouseEnter={(e) => {\n setIsPaused(true)\n onMouseEnter?.(e)\n }}\n onMouseLeave={(e) => {\n setIsPaused(false)\n onMouseLeave?.(e)\n }}\n {...props}\n >\n <span style={iconStyle}>\n {icon || <ToastIcon intent={intent} />}\n </span>\n <div style={contentStyle}>\n {title && <span style={titleStyle}>{title}</span>}\n {description && <span style={descriptionStyle}>{description}</span>}\n {action && <div style={{ marginTop: 8 }}>{action}</div>}\n </div>\n {showCloseButton && (\n <button\n type=\"button\"\n style={closeButtonStyle}\n onClick={onClose}\n aria-label={closeLabel}\n onMouseEnter={(e) => {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent'\n }}\n >\n <CloseIcon />\n </button>\n )}\n </div>\n </>\n )\n})\n\nToast.displayName = 'Toast'\n\n// Toast Provider\nexport interface ToastProviderProps {\n children: ReactNode\n position?: ToastPosition\n maxToasts?: number\n}\n\nconst positionStyles: Record<ToastPosition, CSSProperties> = {\n 'top-left': { top: 16, left: 16 },\n 'top-center': { top: 16, left: '50%', transform: 'translateX(-50%)' },\n 'top-right': { top: 16, right: 16 },\n 'bottom-left': { bottom: 16, left: 16 },\n 'bottom-center': { bottom: 16, left: '50%', transform: 'translateX(-50%)' },\n 'bottom-right': { bottom: 16, right: 16 },\n}\n\nlet toastCounter = 0\n\nexport function ToastProvider({\n children,\n position = 'top-right',\n maxToasts = 5,\n}: ToastProviderProps) {\n const [toasts, setToasts] = useState<ToastItem[]>([])\n const [mounted, setMounted] = useState(false)\n\n useEffect(() => {\n setMounted(true)\n }, [])\n\n const addToast = useCallback(\n (props: Omit<ToastProps, 'isOpen' | 'onClose'>) => {\n const id = `toast-${++toastCounter}`\n setToasts((prev) => {\n const newToasts = [...prev, { id, props }]\n if (newToasts.length > maxToasts) {\n return newToasts.slice(-maxToasts)\n }\n return newToasts\n })\n return id\n },\n [maxToasts]\n )\n\n const removeToast = useCallback((id: string) => {\n setToasts((prev) => prev.filter((t) => t.id !== id))\n }, [])\n\n const removeAll = useCallback(() => {\n setToasts([])\n }, [])\n\n const containerStyle: CSSProperties = {\n position: 'fixed',\n zIndex: 'var(--brycks-z-toast)' as unknown as number,\n display: 'flex',\n flexDirection: 'column',\n gap: 8,\n pointerEvents: 'none',\n ...positionStyles[position],\n }\n\n const toastWrapperStyle: CSSProperties = {\n pointerEvents: 'auto',\n }\n\n return (\n <ToastContext.Provider value={{ toasts, addToast, removeToast, removeAll }}>\n {children}\n {mounted &&\n createPortal(\n <div className=\"brycks-toast-container\" style={containerStyle}>\n {toasts.map(({ id, props }) => (\n <div key={id} style={toastWrapperStyle}>\n <Toast {...props} isOpen onClose={() => removeToast(id)} />\n </div>\n ))}\n </div>,\n document.body\n )}\n </ToastContext.Provider>\n )\n}\n"],"names":["intentConfig","ToastIcon","intent","jsx","CloseIcon","Toast","forwardRef","title","description","isOpen","duration","onClose","showCloseButton","closeLabel","action","icon","className","style","testId","onMouseEnter","onMouseLeave","props","ref","isVisible","setIsVisible","useState","isExiting","setIsExiting","isPaused","setIsPaused","useEffect","timer","config","toastStyle","iconStyle","contentStyle","titleStyle","descriptionStyle","closeButtonStyle","jsxs","Fragment","cx","e","positionStyles","toastCounter","ToastProvider","children","position","maxToasts","toasts","setToasts","mounted","setMounted","addToast","useCallback","id","prev","newToasts","removeToast","t","removeAll","containerStyle","toastWrapperStyle","ToastContext","createPortal"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./feedback/Modal/Modal.cjs"),e=require("./feedback/Alert/Alert.cjs"),t=require("./feedback/Tooltip/Tooltip.cjs"),r=require("./feedback/Toast/Toast.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./feedback/Modal/Modal.cjs"),e=require("./feedback/Alert/Alert.cjs"),t=require("./feedback/Banner/Banner.cjs"),s=require("./feedback/ConfirmDialog/ConfirmDialog.cjs"),i=require("./feedback/Tooltip/Tooltip.cjs"),r=require("./feedback/Toast/Toast.cjs"),a=require("./feedback/Toast/ToastContext.cjs"),n=require("./feedback/Drawer/Drawer.cjs"),l=require("./feedback/Popover/Popover.cjs"),u=require("./feedback/Progress/Progress.cjs");exports.Modal=o.Modal;exports.Alert=e.Alert;exports.Banner=t.Banner;exports.ConfirmDialog=s.ConfirmDialog;exports.Tooltip=i.Tooltip;exports.Toast=r.Toast;exports.ToastProvider=r.ToastProvider;exports.useToast=a.useToast;exports.Drawer=n.Drawer;exports.Popover=l.Popover;exports.Progress=u.Progress;
|
|
2
2
|
//# sourceMappingURL=feedback.cjs.map
|
|
@@ -1,20 +1,24 @@
|
|
|
1
1
|
import { Modal as e } from "./feedback/Modal/Modal.js";
|
|
2
2
|
import { Alert as p } from "./feedback/Alert/Alert.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
3
|
+
import { Banner as m } from "./feedback/Banner/Banner.js";
|
|
4
|
+
import { ConfirmDialog as a } from "./feedback/ConfirmDialog/ConfirmDialog.js";
|
|
5
|
+
import { Tooltip as i } from "./feedback/Tooltip/Tooltip.js";
|
|
6
|
+
import { Toast as T, ToastProvider as n } from "./feedback/Toast/Toast.js";
|
|
7
|
+
import { useToast as d } from "./feedback/Toast/ToastContext.js";
|
|
8
|
+
import { Drawer as v } from "./feedback/Drawer/Drawer.js";
|
|
9
|
+
import { Popover as u } from "./feedback/Popover/Popover.js";
|
|
10
|
+
import { Progress as A } from "./feedback/Progress/Progress.js";
|
|
9
11
|
export {
|
|
10
12
|
p as Alert,
|
|
11
|
-
|
|
13
|
+
m as Banner,
|
|
14
|
+
a as ConfirmDialog,
|
|
15
|
+
v as Drawer,
|
|
12
16
|
e as Modal,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
u as Popover,
|
|
18
|
+
A as Progress,
|
|
19
|
+
T as Toast,
|
|
20
|
+
n as ToastProvider,
|
|
21
|
+
i as Tooltip,
|
|
22
|
+
d as useToast
|
|
19
23
|
};
|
|
20
24
|
//# sourceMappingURL=feedback.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"feedback.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"feedback.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),ge=require("react-dom"),ye=require("../../../utils/styles.cjs"),he=require("../../../hooks/useId.cjs"),l=require("../../../design-system/tokens/motion.cjs"),i=require("../../../design-system/primitives/sizing.cjs"),z=require("../../../design-system/tokens/typography.cjs"),c=require("../../../design-system/tokens/spacing.cjs"),me={sm:{height:i.componentHeights.sm,fontSize:z.fontSizes.base-1,padding:i.componentPaddingX.sm,iconSize:i.iconSizes.sm},md:{height:i.componentHeights.md,fontSize:z.fontSizes.base,padding:i.componentPaddingX.md,iconSize:i.iconSizes.md},lg:{height:i.componentHeights.lg,fontSize:z.fontSizes.md,padding:i.componentPaddingX.lg,iconSize:i.iconSizes.lg}},ve=(w,g)=>{const p=g.toLowerCase();return w.label.toLowerCase().includes(p)||w.value.toLowerCase().includes(p)||(w.description?.toLowerCase().includes(p)??!1)};function ke(){return t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:t.jsx("path",{d:"M4 6l4 4 4-4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function xe(){return t.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none","aria-hidden":"true",children:t.jsx("path",{d:"M4 4l6 6M10 4l-6 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}const A=s.forwardRef(function({options:g,value:p,defaultValue:H=null,onChange:E,onInputChange:R,placeholder:N="Select or search...",size:M="md",disabled:y=!1,isInvalid:q=!1,required:Y=!1,clearable:K=!0,"aria-label":O,"aria-labelledby":V,filterFn:P=ve,emptyText:G="No options found",isLoading:D=!1,loadingText:U="Loading…",creatable:$=!1,onCreate:I,createLabel:J=m=>`Create "${m}"`,clearLabel:Q="Clear selection",listboxLabel:Z="Options",className:_,testId:ee},S){const m=he.useId("combobox-listbox"),[te,re]=s.useState(H),[a,v]=s.useState(""),[r,h]=s.useState(!1),[o,d]=s.useState(-1),[W,B]=s.useState(!1),j=s.useRef(null),C=s.useRef(null),T=s.useRef(null),u=p!==void 0?p:te,k=me[M],f=s.useMemo(()=>g.find(e=>e.value===u),[g,u]),b=s.useMemo(()=>a?g.filter(e=>P(e,a)):g,[g,a,P]);s.useEffect(()=>{!r&&f?v(f.label):!r&&!u&&v("")},[r,f,u]);const x=s.useCallback(e=>{p===void 0&&re(e),E?.(e),h(!1),d(-1),C.current?.focus()},[p,E]),ne=s.useCallback(e=>{const n=e.target.value;v(n),R?.(n),r||h(!0),d(0)},[r,R]),se=s.useCallback(e=>{e.stopPropagation(),x(null),v(""),C.current?.focus()},[x]),oe=s.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),r?d(n=>Math.min(n+1,b.length-1)):(h(!0),d(0));break;case"ArrowUp":e.preventDefault(),r&&d(n=>Math.max(n-1,0));break;case"Enter":e.preventDefault(),r&&o>=0&&b[o]?b[o].disabled||x(b[o].value):$&&a&&b.length===0&&I?.(a);break;case"Escape":e.preventDefault(),h(!1),d(-1),f&&v(f.label);break;case"Tab":r&&(h(!1),d(-1));break}},[r,o,b,x,$,a,I,f]);s.useEffect(()=>{if(!r)return;const e=n=>{j.current?.contains(n.target)||(h(!1),d(-1),f&&v(f.label))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[r,f]),s.useEffect(()=>{if(!r||o<0)return;T.current?.children[o]?.scrollIntoView({block:"nearest"})},[r,o]);const[L,ie]=s.useState({top:0,left:0,width:0});s.useEffect(()=>{if(!r||!j.current)return;const e=()=>{const n=j.current.getBoundingClientRect();ie({top:n.bottom+window.scrollY+c.spacing[1],left:n.left+window.scrollX,width:n.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[r]);const ae={position:"relative",display:"inline-flex",width:"100%"},le={position:"relative",display:"flex",alignItems:"center",width:"100%",height:k.height,backgroundColor:y?"var(--brycks-background-muted)":"var(--brycks-background-default)",border:`1px solid ${q?"var(--brycks-error-default)":W?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-md)",transition:`all ${l.durations.fast}ms ${l.easings.easeOut}`,cursor:y?"not-allowed":"text",boxShadow:W?"var(--brycks-focus-ring)":void 0},ce={flex:1,height:"100%",padding:`0 ${k.padding}px`,paddingRight:c.spacing[10],fontSize:k.fontSize,color:y?"var(--brycks-foreground-disabled)":"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none",cursor:y?"not-allowed":"text"},de={position:"absolute",right:k.padding,display:"flex",alignItems:"center",gap:c.spacing[1],pointerEvents:"none"},ue={display:"flex",alignItems:"center",justifyContent:"center",width:c.spacing[5],height:c.spacing[5],color:"var(--brycks-foreground-muted)",cursor:"pointer",borderRadius:"var(--brycks-radius-sm)",transition:`all ${l.durations.fast}ms ${l.easings.easeOut}`,pointerEvents:"auto"},fe={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",transform:r?"rotate(180deg)":"rotate(0)",transition:`transform ${l.durations.fast}ms ${l.easings.easeOut}`},pe={position:"absolute",top:L.top,left:L.left,width:L.width,maxHeight:300,overflowY:"auto",backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",zIndex:"var(--brycks-z-dropdown)",padding:c.spacing[1],animation:`brycks-dropdown-in ${l.durations.quick}ms ${l.easings.easeOut}`},F=(e,n,be)=>({display:"flex",alignItems:"center",gap:i.componentGap.md,padding:`${c.spacing[2]}px ${i.componentPaddingX.sm}px`,fontSize:k.fontSize,color:n?"var(--brycks-foreground-disabled)":"var(--brycks-foreground-default)",backgroundColor:e?"var(--brycks-background-muted)":be?"var(--brycks-primary-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:n?"not-allowed":"pointer",transition:`background-color ${l.durations.fast}ms ${l.easings.easeOut}`}),X={padding:`${c.spacing[4]}px ${c.spacing[3]}px`,fontSize:k.fontSize,color:"var(--brycks-foreground-muted)",textAlign:"center"};return t.jsxs("div",{ref:j,className:ye.cx("brycks-combobox",`brycks-combobox--${M}`,_),style:ae,"data-testid":ee,children:[t.jsxs("div",{style:le,onClick:()=>!y&&C.current?.focus(),children:[t.jsx("input",{ref:e=>{C.current=e,typeof S=="function"?S(e):S&&(S.current=e)},type:"text",role:"combobox","aria-expanded":r,"aria-haspopup":"listbox","aria-autocomplete":"list","aria-controls":r?m:void 0,"aria-activedescendant":r&&o>=0?`${m}-option-${o}`:void 0,"aria-invalid":q,"aria-required":Y,"aria-label":O,"aria-labelledby":V,value:a,placeholder:N,disabled:y,style:ce,onChange:ne,onKeyDown:oe,onFocus:()=>{B(!0),h(!0)},onBlur:()=>B(!1)}),t.jsxs("div",{style:de,children:[K&&u&&!y&&t.jsx("button",{type:"button","aria-label":Q,style:ue,onClick:se,onMouseEnter:e=>{e.currentTarget.style.backgroundColor="var(--brycks-background-muted)",e.currentTarget.style.color="var(--brycks-foreground-default)"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color="var(--brycks-foreground-muted)"},children:t.jsx(xe,{})}),t.jsx("span",{style:fe,children:t.jsx(ke,{})})]})]}),r&&ge.createPortal(t.jsxs(t.Fragment,{children:[t.jsx("style",{children:`
|
|
2
2
|
@keyframes brycks-dropdown-in {
|
|
3
3
|
from { opacity: 0; transform: translateY(-4px); }
|
|
4
4
|
to { opacity: 1; transform: translateY(0); }
|
|
5
5
|
}
|
|
6
|
-
`}),t.jsx("ul",{ref:
|
|
6
|
+
`}),t.jsx("ul",{ref:T,id:m,role:"listbox","aria-label":O||Z,"aria-busy":D||void 0,style:pe,children:D?t.jsx("li",{style:X,role:"status","aria-live":"polite",children:t.jsxs("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:c.spacing[2]},children:[t.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",className:"brycks-animate-spin","aria-hidden":"true",children:[t.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",opacity:"0.2"}),t.jsx("path",{d:"M12 2C6.47715 2 2 6.47715 2 12",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round"})]}),U]})}):b.length>0?b.map((e,n)=>t.jsxs("li",{id:`${m}-option-${n}`,role:"option","aria-selected":e.value===u,"aria-disabled":e.disabled,style:F(n===o,!!e.disabled,e.value===u),onClick:()=>!e.disabled&&x(e.value),onMouseEnter:()=>d(n),children:[e.icon&&t.jsx("span",{style:{flexShrink:0},children:e.icon}),t.jsxs("div",{style:{flex:1,minWidth:0},children:[t.jsx("div",{style:{fontWeight:e.value===u?500:400},children:e.label}),e.description&&t.jsx("div",{style:{fontSize:z.fontSizes.sm,color:"var(--brycks-foreground-muted)"},children:e.description})]}),e.value===u&&t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",style:{flexShrink:0},children:t.jsx("path",{d:"M3 8l3 3 7-7",stroke:"var(--brycks-primary-default)",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]},e.value)):t.jsx("li",{style:X,children:$&&a?t.jsx("button",{type:"button",style:{...F(!0,!1,!1),width:"100%",border:"none",cursor:"pointer"},onClick:()=>I?.(a),children:J(a)}):G})})]}),document.body)]})});A.displayName="Combobox";exports.Combobox=A;
|
|
7
7
|
//# sourceMappingURL=Combobox.cjs.map
|