@yamada-ui/alert 0.3.5 → 0.3.7
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/alert.js +55 -15
- package/dist/alert.mjs +1 -1
- package/dist/{chunk-G632DWL6.mjs → chunk-BS7ANQVW.mjs} +55 -15
- package/dist/index.js +55 -15
- package/dist/index.mjs +1 -1
- package/package.json +5 -5
package/dist/alert.js
CHANGED
|
@@ -49,7 +49,10 @@ var getStatusIcon = (status) => statuses[status].icon;
|
|
|
49
49
|
var Alert = (0, import_core.forwardRef)(
|
|
50
50
|
({ status = "info", colorScheme, ...props }, ref) => {
|
|
51
51
|
colorScheme = colorScheme != null ? colorScheme : getStatusColorScheme(status);
|
|
52
|
-
const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Alert", {
|
|
52
|
+
const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Alert", {
|
|
53
|
+
...props,
|
|
54
|
+
colorScheme
|
|
55
|
+
});
|
|
53
56
|
const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
|
|
54
57
|
const css = {
|
|
55
58
|
w: "100%",
|
|
@@ -59,7 +62,17 @@ var Alert = (0, import_core.forwardRef)(
|
|
|
59
62
|
overflow: "hidden",
|
|
60
63
|
...styles.container
|
|
61
64
|
};
|
|
62
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
import_core.ui.div,
|
|
67
|
+
{
|
|
68
|
+
ref,
|
|
69
|
+
className: (0, import_utils.cx)("ui-alert", className),
|
|
70
|
+
role: "alert",
|
|
71
|
+
__css: css,
|
|
72
|
+
...rest,
|
|
73
|
+
children
|
|
74
|
+
}
|
|
75
|
+
) });
|
|
63
76
|
}
|
|
64
77
|
);
|
|
65
78
|
var AlertIcon = ({
|
|
@@ -73,28 +86,55 @@ var AlertIcon = ({
|
|
|
73
86
|
const css = {
|
|
74
87
|
...status === "loading" ? styles.loading : styles.icon
|
|
75
88
|
};
|
|
76
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
77
|
-
|
|
89
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
+
import_core.ui.span,
|
|
78
91
|
{
|
|
79
|
-
|
|
92
|
+
display: "inherit",
|
|
93
|
+
className: (0, import_utils.cx)("ui-alert-icon", className),
|
|
94
|
+
__css: css,
|
|
95
|
+
...rest,
|
|
96
|
+
children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
97
|
+
Icon,
|
|
98
|
+
{
|
|
99
|
+
...status === "loading" ? { variant, color: "currentcolor" } : { boxSize: "100%" }
|
|
100
|
+
}
|
|
101
|
+
)
|
|
80
102
|
}
|
|
81
|
-
)
|
|
103
|
+
);
|
|
82
104
|
};
|
|
83
|
-
var AlertTitle = (0, import_core.forwardRef)(
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
105
|
+
var AlertTitle = (0, import_core.forwardRef)(
|
|
106
|
+
({ className, ...rest }, ref) => {
|
|
107
|
+
const { styles } = useAlert();
|
|
108
|
+
const css = {
|
|
109
|
+
display: "block",
|
|
110
|
+
...styles.title
|
|
111
|
+
};
|
|
112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
|
+
import_core.ui.p,
|
|
114
|
+
{
|
|
115
|
+
ref,
|
|
116
|
+
className: (0, import_utils.cx)("ui-alert-title", className),
|
|
117
|
+
__css: css,
|
|
118
|
+
...rest
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
);
|
|
91
123
|
var AlertDescription = (0, import_core.forwardRef)(
|
|
92
124
|
({ className, ...rest }, ref) => {
|
|
93
125
|
const { styles } = useAlert();
|
|
94
126
|
const css = {
|
|
95
127
|
...styles.description
|
|
96
128
|
};
|
|
97
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
129
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
130
|
+
import_core.ui.span,
|
|
131
|
+
{
|
|
132
|
+
ref,
|
|
133
|
+
className: (0, import_utils.cx)("ui-alert-desc", className),
|
|
134
|
+
__css: css,
|
|
135
|
+
...rest
|
|
136
|
+
}
|
|
137
|
+
);
|
|
98
138
|
}
|
|
99
139
|
);
|
|
100
140
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/alert.mjs
CHANGED
|
@@ -25,7 +25,10 @@ var getStatusIcon = (status) => statuses[status].icon;
|
|
|
25
25
|
var Alert = forwardRef(
|
|
26
26
|
({ status = "info", colorScheme, ...props }, ref) => {
|
|
27
27
|
colorScheme = colorScheme != null ? colorScheme : getStatusColorScheme(status);
|
|
28
|
-
const [styles, mergedProps] = useMultiComponentStyle("Alert", {
|
|
28
|
+
const [styles, mergedProps] = useMultiComponentStyle("Alert", {
|
|
29
|
+
...props,
|
|
30
|
+
colorScheme
|
|
31
|
+
});
|
|
29
32
|
const { className, children, ...rest } = omitThemeProps(mergedProps);
|
|
30
33
|
const css = {
|
|
31
34
|
w: "100%",
|
|
@@ -35,7 +38,17 @@ var Alert = forwardRef(
|
|
|
35
38
|
overflow: "hidden",
|
|
36
39
|
...styles.container
|
|
37
40
|
};
|
|
38
|
-
return /* @__PURE__ */ jsx(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ jsx(
|
|
41
|
+
return /* @__PURE__ */ jsx(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ jsx(
|
|
42
|
+
ui.div,
|
|
43
|
+
{
|
|
44
|
+
ref,
|
|
45
|
+
className: cx("ui-alert", className),
|
|
46
|
+
role: "alert",
|
|
47
|
+
__css: css,
|
|
48
|
+
...rest,
|
|
49
|
+
children
|
|
50
|
+
}
|
|
51
|
+
) });
|
|
39
52
|
}
|
|
40
53
|
);
|
|
41
54
|
var AlertIcon = ({
|
|
@@ -49,28 +62,55 @@ var AlertIcon = ({
|
|
|
49
62
|
const css = {
|
|
50
63
|
...status === "loading" ? styles.loading : styles.icon
|
|
51
64
|
};
|
|
52
|
-
return /* @__PURE__ */ jsx(
|
|
53
|
-
|
|
65
|
+
return /* @__PURE__ */ jsx(
|
|
66
|
+
ui.span,
|
|
54
67
|
{
|
|
55
|
-
|
|
68
|
+
display: "inherit",
|
|
69
|
+
className: cx("ui-alert-icon", className),
|
|
70
|
+
__css: css,
|
|
71
|
+
...rest,
|
|
72
|
+
children: children || /* @__PURE__ */ jsx(
|
|
73
|
+
Icon,
|
|
74
|
+
{
|
|
75
|
+
...status === "loading" ? { variant, color: "currentcolor" } : { boxSize: "100%" }
|
|
76
|
+
}
|
|
77
|
+
)
|
|
56
78
|
}
|
|
57
|
-
)
|
|
79
|
+
);
|
|
58
80
|
};
|
|
59
|
-
var AlertTitle = forwardRef(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
81
|
+
var AlertTitle = forwardRef(
|
|
82
|
+
({ className, ...rest }, ref) => {
|
|
83
|
+
const { styles } = useAlert();
|
|
84
|
+
const css = {
|
|
85
|
+
display: "block",
|
|
86
|
+
...styles.title
|
|
87
|
+
};
|
|
88
|
+
return /* @__PURE__ */ jsx(
|
|
89
|
+
ui.p,
|
|
90
|
+
{
|
|
91
|
+
ref,
|
|
92
|
+
className: cx("ui-alert-title", className),
|
|
93
|
+
__css: css,
|
|
94
|
+
...rest
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
);
|
|
67
99
|
var AlertDescription = forwardRef(
|
|
68
100
|
({ className, ...rest }, ref) => {
|
|
69
101
|
const { styles } = useAlert();
|
|
70
102
|
const css = {
|
|
71
103
|
...styles.description
|
|
72
104
|
};
|
|
73
|
-
return /* @__PURE__ */ jsx(
|
|
105
|
+
return /* @__PURE__ */ jsx(
|
|
106
|
+
ui.span,
|
|
107
|
+
{
|
|
108
|
+
ref,
|
|
109
|
+
className: cx("ui-alert-desc", className),
|
|
110
|
+
__css: css,
|
|
111
|
+
...rest
|
|
112
|
+
}
|
|
113
|
+
);
|
|
74
114
|
}
|
|
75
115
|
);
|
|
76
116
|
|
package/dist/index.js
CHANGED
|
@@ -49,7 +49,10 @@ var getStatusIcon = (status) => statuses[status].icon;
|
|
|
49
49
|
var Alert = (0, import_core.forwardRef)(
|
|
50
50
|
({ status = "info", colorScheme, ...props }, ref) => {
|
|
51
51
|
colorScheme = colorScheme != null ? colorScheme : getStatusColorScheme(status);
|
|
52
|
-
const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Alert", {
|
|
52
|
+
const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Alert", {
|
|
53
|
+
...props,
|
|
54
|
+
colorScheme
|
|
55
|
+
});
|
|
53
56
|
const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
|
|
54
57
|
const css = {
|
|
55
58
|
w: "100%",
|
|
@@ -59,7 +62,17 @@ var Alert = (0, import_core.forwardRef)(
|
|
|
59
62
|
overflow: "hidden",
|
|
60
63
|
...styles.container
|
|
61
64
|
};
|
|
62
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
import_core.ui.div,
|
|
67
|
+
{
|
|
68
|
+
ref,
|
|
69
|
+
className: (0, import_utils.cx)("ui-alert", className),
|
|
70
|
+
role: "alert",
|
|
71
|
+
__css: css,
|
|
72
|
+
...rest,
|
|
73
|
+
children
|
|
74
|
+
}
|
|
75
|
+
) });
|
|
63
76
|
}
|
|
64
77
|
);
|
|
65
78
|
var AlertIcon = ({
|
|
@@ -73,28 +86,55 @@ var AlertIcon = ({
|
|
|
73
86
|
const css = {
|
|
74
87
|
...status === "loading" ? styles.loading : styles.icon
|
|
75
88
|
};
|
|
76
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
77
|
-
|
|
89
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
+
import_core.ui.span,
|
|
78
91
|
{
|
|
79
|
-
|
|
92
|
+
display: "inherit",
|
|
93
|
+
className: (0, import_utils.cx)("ui-alert-icon", className),
|
|
94
|
+
__css: css,
|
|
95
|
+
...rest,
|
|
96
|
+
children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
97
|
+
Icon,
|
|
98
|
+
{
|
|
99
|
+
...status === "loading" ? { variant, color: "currentcolor" } : { boxSize: "100%" }
|
|
100
|
+
}
|
|
101
|
+
)
|
|
80
102
|
}
|
|
81
|
-
)
|
|
103
|
+
);
|
|
82
104
|
};
|
|
83
|
-
var AlertTitle = (0, import_core.forwardRef)(
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
105
|
+
var AlertTitle = (0, import_core.forwardRef)(
|
|
106
|
+
({ className, ...rest }, ref) => {
|
|
107
|
+
const { styles } = useAlert();
|
|
108
|
+
const css = {
|
|
109
|
+
display: "block",
|
|
110
|
+
...styles.title
|
|
111
|
+
};
|
|
112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
|
+
import_core.ui.p,
|
|
114
|
+
{
|
|
115
|
+
ref,
|
|
116
|
+
className: (0, import_utils.cx)("ui-alert-title", className),
|
|
117
|
+
__css: css,
|
|
118
|
+
...rest
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
);
|
|
91
123
|
var AlertDescription = (0, import_core.forwardRef)(
|
|
92
124
|
({ className, ...rest }, ref) => {
|
|
93
125
|
const { styles } = useAlert();
|
|
94
126
|
const css = {
|
|
95
127
|
...styles.description
|
|
96
128
|
};
|
|
97
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
129
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
130
|
+
import_core.ui.span,
|
|
131
|
+
{
|
|
132
|
+
ref,
|
|
133
|
+
className: (0, import_utils.cx)("ui-alert-desc", className),
|
|
134
|
+
__css: css,
|
|
135
|
+
...rest
|
|
136
|
+
}
|
|
137
|
+
);
|
|
98
138
|
}
|
|
99
139
|
);
|
|
100
140
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/alert",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.7",
|
|
4
4
|
"description": "Yamada UI alert component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@yamada-ui/core": "0.5.
|
|
39
|
-
"@yamada-ui/utils": "0.1.
|
|
40
|
-
"@yamada-ui/icon": "0.2.
|
|
41
|
-
"@yamada-ui/loading": "0.3.
|
|
38
|
+
"@yamada-ui/core": "0.5.2",
|
|
39
|
+
"@yamada-ui/utils": "0.1.4",
|
|
40
|
+
"@yamada-ui/icon": "0.2.7",
|
|
41
|
+
"@yamada-ui/loading": "0.3.7"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"react": "^18.0.0",
|