@phpsoftbox/react-softbox 1.9.0 → 1.10.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.
|
@@ -4,8 +4,9 @@ export type AlertVariant = UiVariant;
|
|
|
4
4
|
type Props = React.HTMLAttributes<HTMLDivElement> & {
|
|
5
5
|
variant?: AlertVariant;
|
|
6
6
|
title?: React.ReactNode;
|
|
7
|
+
icon?: React.ReactNode;
|
|
7
8
|
actions?: React.ReactNode;
|
|
8
9
|
onClose?: () => void;
|
|
9
10
|
};
|
|
10
|
-
export default function Alert({ variant, title, actions, onClose, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export default function Alert({ variant, title, icon, actions, onClose, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export {};
|
|
@@ -8,8 +8,17 @@ const classMap = {
|
|
|
8
8
|
warning: styles.warning,
|
|
9
9
|
danger: styles.danger,
|
|
10
10
|
};
|
|
11
|
-
|
|
11
|
+
const defaultIcons = {
|
|
12
|
+
default: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
13
|
+
primary: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
14
|
+
info: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
15
|
+
success: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "m6.8 10 2.1 2.2 4.3-4.4", strokeLinecap: "round", strokeLinejoin: "round" })] })),
|
|
16
|
+
warning: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("path", { d: "M10 3.4 17 16.2a1 1 0 0 1-.88 1.4H3.88A1 1 0 0 1 3 16.2L10 3.4Z", strokeLinejoin: "round" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "14.4", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
17
|
+
danger: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "m7.5 7.5 5 5m0-5-5 5", strokeLinecap: "round" })] })),
|
|
18
|
+
};
|
|
19
|
+
export default function Alert({ variant = 'info', title, icon, actions, onClose, className, children, ...props }) {
|
|
12
20
|
const classes = [styles.alert, classMap[variant], className].filter(Boolean).join(' ');
|
|
13
|
-
|
|
21
|
+
const resolvedIcon = icon === undefined ? defaultIcons[variant] : icon;
|
|
22
|
+
return (_jsxs("div", { className: classes, role: "status", ...props, children: [resolvedIcon !== null ? _jsx("div", { className: styles.icon, children: resolvedIcon }) : null, _jsxs("div", { className: styles.main, children: [title ? _jsx("div", { className: styles.title, children: title }) : null, children ? _jsx("div", { className: styles.message, children: children }) : null, actions ? _jsx("div", { className: styles.actions, children: actions }) : null] }), onClose ? (_jsx("button", { type: "button", className: styles.close, onClick: onClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: "\u00D7" })) : null] }));
|
|
14
23
|
}
|
|
15
24
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,6 +9,23 @@
|
|
|
9
9
|
color: var(--color-text);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
.icon {
|
|
13
|
+
display: inline-flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
width: 20px;
|
|
17
|
+
min-width: 20px;
|
|
18
|
+
height: 20px;
|
|
19
|
+
margin-top: 1px;
|
|
20
|
+
color: var(--alert-icon-color, var(--color-muted));
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.icon svg {
|
|
24
|
+
width: 20px;
|
|
25
|
+
height: 20px;
|
|
26
|
+
display: block;
|
|
27
|
+
}
|
|
28
|
+
|
|
12
29
|
.main {
|
|
13
30
|
display: flex;
|
|
14
31
|
flex-direction: column;
|
|
@@ -45,29 +62,35 @@
|
|
|
45
62
|
.default {
|
|
46
63
|
border-color: rgba(30, 51, 85, 0.6);
|
|
47
64
|
box-shadow: 0 0 0 1px rgba(30, 51, 85, 0.2);
|
|
65
|
+
--alert-icon-color: #9fb2cc;
|
|
48
66
|
}
|
|
49
67
|
|
|
50
68
|
.primary {
|
|
51
69
|
border-color: rgba(20, 201, 214, 0.5);
|
|
52
70
|
box-shadow: 0 0 0 1px rgba(20, 201, 214, 0.2);
|
|
71
|
+
--alert-icon-color: #14c9d6;
|
|
53
72
|
}
|
|
54
73
|
|
|
55
74
|
.info {
|
|
56
75
|
border-color: rgba(30, 99, 233, 0.4);
|
|
57
76
|
box-shadow: 0 0 0 1px rgba(30, 99, 233, 0.2);
|
|
77
|
+
--alert-icon-color: #1e63e9;
|
|
58
78
|
}
|
|
59
79
|
|
|
60
80
|
.success {
|
|
61
81
|
border-color: rgba(79, 230, 163, 0.5);
|
|
62
82
|
box-shadow: 0 0 0 1px rgba(79, 230, 163, 0.2);
|
|
83
|
+
--alert-icon-color: #4fe6a3;
|
|
63
84
|
}
|
|
64
85
|
|
|
65
86
|
.warning {
|
|
66
87
|
border-color: rgba(246, 200, 106, 0.5);
|
|
67
88
|
box-shadow: 0 0 0 1px rgba(246, 200, 106, 0.2);
|
|
89
|
+
--alert-icon-color: #f6c86a;
|
|
68
90
|
}
|
|
69
91
|
|
|
70
92
|
.danger {
|
|
71
93
|
border-color: rgba(255, 107, 107, 0.5);
|
|
72
94
|
box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.2);
|
|
95
|
+
--alert-icon-color: #ff6b6b;
|
|
73
96
|
}
|