@yamada-ui/notice 0.5.3 → 0.5.4

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.
Files changed (9) hide show
  1. package/dist/{chunk-H6JQLH3P.mjs → chunk-7IT22KSQ.mjs} +13 -5
  2. package/dist/{chunk-VLY5Y4MA.mjs → chunk-D2HAPVIT.mjs} +7 -3
  3. package/dist/index.js +17 -5
  4. package/dist/index.mjs +2 -2
  5. package/dist/notice-provider.js +17 -5
  6. package/dist/notice-provider.mjs +2 -2
  7. package/dist/notice.js +6 -2
  8. package/dist/notice.mjs +1 -1
  9. package/package.json +1 -1
package/dist/{chunk-H6JQLH3P.mjs → chunk-7IT22KSQ.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  noticeStore
4
- } from "./chunk-VLY5Y4MA.mjs";
4
+ } from "./chunk-D2HAPVIT.mjs";
5
5
 
6
6
  // src/notice-provider.tsx
7
7
  import { ui } from "@yamada-ui/core";
@@ -12,7 +12,7 @@ import {
12
12
  } from "@yamada-ui/motion";
13
13
  import { Portal } from "@yamada-ui/portal";
14
14
  import { useTimeout } from "@yamada-ui/use-timeout";
15
- import { runIfFunc, useUpdateEffect } from "@yamada-ui/utils";
15
+ import { cx, runIfFunc, useUpdateEffect } from "@yamada-ui/utils";
16
16
  import { memo, useEffect, useState, useSyncExternalStore } from "react";
17
17
  import { jsx } from "react/jsx-runtime";
18
18
  var NoticeProvider = ({
@@ -44,7 +44,15 @@ var NoticeProvider = ({
44
44
  right,
45
45
  left
46
46
  };
47
- return /* @__PURE__ */ jsx(ui.ul, { className: "ui-notice-list", __css: css, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notices.map((notice) => /* @__PURE__ */ jsx(NoticeComponent, { variants, ...notice }, notice.id)) }) }, placement);
47
+ return /* @__PURE__ */ jsx(
48
+ ui.ul,
49
+ {
50
+ className: cx("ui-notice__list", `ui-notice__list--${placement}`),
51
+ __css: css,
52
+ children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notices.map((notice) => /* @__PURE__ */ jsx(NoticeComponent, { variants, ...notice }, notice.id)) })
53
+ },
54
+ placement
55
+ );
48
56
  });
49
57
  return /* @__PURE__ */ jsx(
50
58
  Portal,
@@ -120,7 +128,7 @@ var NoticeComponent = memo(
120
128
  motion.li,
121
129
  {
122
130
  layout: true,
123
- className: "ui-notice",
131
+ className: "ui-notice__list__item",
124
132
  variants,
125
133
  initial: "initial",
126
134
  animate: "animate",
@@ -132,7 +140,7 @@ var NoticeComponent = memo(
132
140
  display: "flex",
133
141
  justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center"
134
142
  },
135
- children: /* @__PURE__ */ jsx(ui.div, { className: "ui-notice-container", __css: css, children: runIfFunc(message, { onClose }) })
143
+ children: /* @__PURE__ */ jsx(ui.div, { className: "ui-notice__list__item__inner", __css: css, children: runIfFunc(message, { onClose }) })
136
144
  }
137
145
  );
138
146
  }
package/dist/{chunk-VLY5Y4MA.mjs → chunk-D2HAPVIT.mjs} RENAMED
@@ -12,7 +12,7 @@ import {
12
12
  ui,
13
13
  useTheme
14
14
  } from "@yamada-ui/core";
15
- import { merge } from "@yamada-ui/utils";
15
+ import { cx, merge } from "@yamada-ui/utils";
16
16
  import { useMemo } from "react";
17
17
  import { jsx, jsxs } from "react/jsx-runtime";
18
18
  var findId = (options, id) => options.find((notice) => notice.id === id);
@@ -200,6 +200,7 @@ var Notice = ({
200
200
  title,
201
201
  description,
202
202
  isClosable,
203
+ className,
203
204
  onClose
204
205
  }) => {
205
206
  return /* @__PURE__ */ jsxs(
@@ -210,23 +211,26 @@ var Notice = ({
210
211
  colorScheme,
211
212
  alignItems: "start",
212
213
  boxShadow: "lg",
214
+ className: cx("ui-notice", className),
213
215
  pe: isClosable ? 8 : void 0,
214
216
  children: [
215
217
  /* @__PURE__ */ jsx(
216
218
  AlertIcon,
217
219
  {
218
220
  variant: icon == null ? void 0 : icon.variant,
221
+ className: "ui-notice__icon",
219
222
  ...(icon == null ? void 0 : icon.color) ? { color: icon.color } : {},
220
223
  children: icon == null ? void 0 : icon.children
221
224
  }
222
225
  ),
223
226
  /* @__PURE__ */ jsxs(ui.div, { flex: "1", children: [
224
- title ? /* @__PURE__ */ jsx(AlertTitle, { noOfLines: 1, children: title }) : null,
225
- description ? /* @__PURE__ */ jsx(AlertDescription, { noOfLines: 3, children: description }) : null
227
+ title ? /* @__PURE__ */ jsx(AlertTitle, { className: "ui-notice__title", noOfLines: 1, children: title }) : null,
228
+ description ? /* @__PURE__ */ jsx(AlertDescription, { className: "ui-notice__desc", noOfLines: 3, children: description }) : null
226
229
  ] }),
227
230
  isClosable ? /* @__PURE__ */ jsx(
228
231
  CloseButton,
229
232
  {
233
+ className: "ui-notice__close-button",
230
234
  size: "sm",
231
235
  onClick: onClose,
232
236
  position: "absolute",
package/dist/index.js CHANGED
@@ -219,6 +219,7 @@ var Notice = ({
219
219
  title,
220
220
  description,
221
221
  isClosable,
222
+ className,
222
223
  onClose
223
224
  }) => {
224
225
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -229,23 +230,26 @@ var Notice = ({
229
230
  colorScheme,
230
231
  alignItems: "start",
231
232
  boxShadow: "lg",
233
+ className: (0, import_utils.cx)("ui-notice", className),
232
234
  pe: isClosable ? 8 : void 0,
233
235
  children: [
234
236
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
235
237
  import_alert.AlertIcon,
236
238
  {
237
239
  variant: icon == null ? void 0 : icon.variant,
240
+ className: "ui-notice__icon",
238
241
  ...(icon == null ? void 0 : icon.color) ? { color: icon.color } : {},
239
242
  children: icon == null ? void 0 : icon.children
240
243
  }
241
244
  ),
242
245
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { flex: "1", children: [
243
- title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertTitle, { noOfLines: 1, children: title }) : null,
244
- description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertDescription, { noOfLines: 3, children: description }) : null
246
+ title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertTitle, { className: "ui-notice__title", noOfLines: 1, children: title }) : null,
247
+ description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertDescription, { className: "ui-notice__desc", noOfLines: 3, children: description }) : null
245
248
  ] }),
246
249
  isClosable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
247
250
  import_close_button.CloseButton,
248
251
  {
252
+ className: "ui-notice__close-button",
249
253
  size: "sm",
250
254
  onClick: onClose,
251
255
  position: "absolute",
@@ -295,7 +299,15 @@ var NoticeProvider = ({
295
299
  right,
296
300
  left
297
301
  };
298
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.ul, { className: "ui-notice-list", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_motion.AnimatePresence, { initial: false, children: notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NoticeComponent, { variants, ...notice }, notice.id)) }) }, placement);
302
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
303
+ import_core2.ui.ul,
304
+ {
305
+ className: (0, import_utils2.cx)("ui-notice__list", `ui-notice__list--${placement}`),
306
+ __css: css,
307
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_motion.AnimatePresence, { initial: false, children: notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NoticeComponent, { variants, ...notice }, notice.id)) })
308
+ },
309
+ placement
310
+ );
299
311
  });
300
312
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
301
313
  import_portal.Portal,
@@ -371,7 +383,7 @@ var NoticeComponent = (0, import_react2.memo)(
371
383
  import_motion.motion.li,
372
384
  {
373
385
  layout: true,
374
- className: "ui-notice",
386
+ className: "ui-notice__list__item",
375
387
  variants,
376
388
  initial: "initial",
377
389
  animate: "animate",
@@ -383,7 +395,7 @@ var NoticeComponent = (0, import_react2.memo)(
383
395
  display: "flex",
384
396
  justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center"
385
397
  },
386
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: "ui-notice-container", __css: css, children: (0, import_utils2.runIfFunc)(message, { onClose }) })
398
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: "ui-notice__list__item__inner", __css: css, children: (0, import_utils2.runIfFunc)(message, { onClose }) })
387
399
  }
388
400
  );
389
401
  }
package/dist/index.mjs CHANGED
@@ -1,11 +1,11 @@
1
1
  "use client"
2
2
  import {
3
3
  NoticeProvider
4
- } from "./chunk-H6JQLH3P.mjs";
4
+ } from "./chunk-7IT22KSQ.mjs";
5
5
  import {
6
6
  noticeStore,
7
7
  useNotice
8
- } from "./chunk-VLY5Y4MA.mjs";
8
+ } from "./chunk-D2HAPVIT.mjs";
9
9
  export {
10
10
  NoticeProvider,
11
11
  noticeStore,
package/dist/notice-provider.js CHANGED
@@ -198,6 +198,7 @@ var Notice = ({
198
198
  title,
199
199
  description,
200
200
  isClosable,
201
+ className,
201
202
  onClose
202
203
  }) => {
203
204
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -208,23 +209,26 @@ var Notice = ({
208
209
  colorScheme,
209
210
  alignItems: "start",
210
211
  boxShadow: "lg",
212
+ className: (0, import_utils.cx)("ui-notice", className),
211
213
  pe: isClosable ? 8 : void 0,
212
214
  children: [
213
215
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
214
216
  import_alert.AlertIcon,
215
217
  {
216
218
  variant: icon == null ? void 0 : icon.variant,
219
+ className: "ui-notice__icon",
217
220
  ...(icon == null ? void 0 : icon.color) ? { color: icon.color } : {},
218
221
  children: icon == null ? void 0 : icon.children
219
222
  }
220
223
  ),
221
224
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { flex: "1", children: [
222
- title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertTitle, { noOfLines: 1, children: title }) : null,
223
- description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertDescription, { noOfLines: 3, children: description }) : null
225
+ title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertTitle, { className: "ui-notice__title", noOfLines: 1, children: title }) : null,
226
+ description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertDescription, { className: "ui-notice__desc", noOfLines: 3, children: description }) : null
224
227
  ] }),
225
228
  isClosable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
226
229
  import_close_button.CloseButton,
227
230
  {
231
+ className: "ui-notice__close-button",
228
232
  size: "sm",
229
233
  onClick: onClose,
230
234
  position: "absolute",
@@ -268,7 +272,15 @@ var NoticeProvider = ({
268
272
  right,
269
273
  left
270
274
  };
271
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.ul, { className: "ui-notice-list", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_motion.AnimatePresence, { initial: false, children: notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NoticeComponent, { variants, ...notice }, notice.id)) }) }, placement);
275
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
276
+ import_core2.ui.ul,
277
+ {
278
+ className: (0, import_utils2.cx)("ui-notice__list", `ui-notice__list--${placement}`),
279
+ __css: css,
280
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_motion.AnimatePresence, { initial: false, children: notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NoticeComponent, { variants, ...notice }, notice.id)) })
281
+ },
282
+ placement
283
+ );
272
284
  });
273
285
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
274
286
  import_portal.Portal,
@@ -344,7 +356,7 @@ var NoticeComponent = (0, import_react2.memo)(
344
356
  import_motion.motion.li,
345
357
  {
346
358
  layout: true,
347
- className: "ui-notice",
359
+ className: "ui-notice__list__item",
348
360
  variants,
349
361
  initial: "initial",
350
362
  animate: "animate",
@@ -356,7 +368,7 @@ var NoticeComponent = (0, import_react2.memo)(
356
368
  display: "flex",
357
369
  justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center"
358
370
  },
359
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: "ui-notice-container", __css: css, children: (0, import_utils2.runIfFunc)(message, { onClose }) })
371
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: "ui-notice__list__item__inner", __css: css, children: (0, import_utils2.runIfFunc)(message, { onClose }) })
360
372
  }
361
373
  );
362
374
  }
package/dist/notice-provider.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  NoticeProvider
4
- } from "./chunk-H6JQLH3P.mjs";
5
- import "./chunk-VLY5Y4MA.mjs";
4
+ } from "./chunk-7IT22KSQ.mjs";
5
+ import "./chunk-D2HAPVIT.mjs";
6
6
  export {
7
7
  NoticeProvider
8
8
  };
package/dist/notice.js CHANGED
@@ -216,6 +216,7 @@ var Notice = ({
216
216
  title,
217
217
  description,
218
218
  isClosable,
219
+ className,
219
220
  onClose
220
221
  }) => {
221
222
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -226,23 +227,26 @@ var Notice = ({
226
227
  colorScheme,
227
228
  alignItems: "start",
228
229
  boxShadow: "lg",
230
+ className: (0, import_utils.cx)("ui-notice", className),
229
231
  pe: isClosable ? 8 : void 0,
230
232
  children: [
231
233
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
232
234
  import_alert.AlertIcon,
233
235
  {
234
236
  variant: icon == null ? void 0 : icon.variant,
237
+ className: "ui-notice__icon",
235
238
  ...(icon == null ? void 0 : icon.color) ? { color: icon.color } : {},
236
239
  children: icon == null ? void 0 : icon.children
237
240
  }
238
241
  ),
239
242
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { flex: "1", children: [
240
- title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertTitle, { noOfLines: 1, children: title }) : null,
241
- description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertDescription, { noOfLines: 3, children: description }) : null
243
+ title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertTitle, { className: "ui-notice__title", noOfLines: 1, children: title }) : null,
244
+ description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertDescription, { className: "ui-notice__desc", noOfLines: 3, children: description }) : null
242
245
  ] }),
243
246
  isClosable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
244
247
  import_close_button.CloseButton,
245
248
  {
249
+ className: "ui-notice__close-button",
246
250
  size: "sm",
247
251
  onClick: onClose,
248
252
  position: "absolute",
package/dist/notice.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  noticeStore,
4
4
  useNotice
5
- } from "./chunk-VLY5Y4MA.mjs";
5
+ } from "./chunk-D2HAPVIT.mjs";
6
6
  export {
7
7
  noticeStore,
8
8
  useNotice
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/notice",
3
- "version": "0.5.3",
3
+ "version": "0.5.4",
4
4
  "description": "Yamada UI notice component",
5
5
  "keywords": [
6
6
  "yamada",