@yamada-ui/notice 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/notice
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/notice
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/notice
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/notice
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-JM3M4FPB.mjs

@@ -0,0 +1,209 @@
+// src/notice.tsx
+import { Alert, AlertDescription, AlertIcon, AlertTitle } from "@yamada-ui/alert";
+import { CloseButton } from "@yamada-ui/close-button";
+import {
+  ui,
+  useTheme
+} from "@yamada-ui/core";
+import { merge } from "@yamada-ui/utils";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var findId = (options, id) => options.find((notice) => notice.id === id);
+var findNotice = (state, id) => {
+  const placement = getNoticePlacement(state, id);
+  const index = placement ? state[placement].findIndex((notice) => notice.id === id) : -1;
+  return { placement, index };
+};
+var getNoticePlacement = (state, id) => {
+  for (const [placement, values] of Object.entries(state)) {
+    if (findId(values, id))
+      return placement;
+  }
+};
+var counter = 0;
+var createNotice = (message, { id, placement = "top", duration, onCloseComplete, status, style }) => {
+  counter += 1;
+  id = id != null ? id : counter;
+  return {
+    id,
+    placement,
+    status,
+    duration,
+    message,
+    onDelete: () => noticeStore.remove(String(id), placement),
+    isDelete: false,
+    onCloseComplete,
+    style
+  };
+};
+var createRender = (options) => {
+  const { component } = options;
+  const Render = (props) => {
+    if (typeof component === "function") {
+      return component({ ...props, ...options });
+    } else {
+      return /* @__PURE__ */ jsx(Notice, { ...props, ...options });
+    }
+  };
+  return Render;
+};
+var createNoticeFunc = (defaultOptions, theme) => {
+  var _a, _b;
+  const themeOptions = (_b = (_a = theme.__config.notice) == null ? void 0 : _a.options) != null ? _b : {};
+  const computedOptions = (options) => merge(themeOptions, merge(defaultOptions, options));
+  const notice = (options = {}) => {
+    options = computedOptions(options);
+    const message = createRender(options);
+    return noticeStore.create(message, options);
+  };
+  notice.update = (id, options) => {
+    options = computedOptions(options);
+    noticeStore.update(id, options);
+  };
+  notice.closeAll = noticeStore.closeAll;
+  notice.close = noticeStore.close;
+  notice.isActive = noticeStore.isActive;
+  return notice;
+};
+var useNotice = (defaultOptions) => {
+  const { theme } = useTheme();
+  return useMemo(() => createNoticeFunc(defaultOptions != null ? defaultOptions : {}, theme), [defaultOptions, theme]);
+};
+var initialState = {
+  top: [],
+  "top-left": [],
+  "top-right": [],
+  bottom: [],
+  "bottom-left": [],
+  "bottom-right": []
+};
+var createNoticeStore = (initialState2) => {
+  let state = initialState2;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (setStateFn) => {
+    state = setStateFn(state);
+    listeners.forEach((l) => l());
+  };
+  return {
+    getSnapshot: () => state,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        setState(() => initialState2);
+        listeners.delete(listener);
+      };
+    },
+    remove: (id, placement) => {
+      setState((prevState) => ({
+        ...prevState,
+        [placement]: prevState[placement].filter((notice) => notice.id != id)
+      }));
+    },
+    create: (message, options) => {
+      var _a;
+      const limit = ((_a = options.limit) != null ? _a : 0) - 1;
+      const notice = createNotice(message, options);
+      const { placement, id } = notice;
+      setState((prev) => {
+        var _a2;
+        let prevNotices = (_a2 = prev[placement]) != null ? _a2 : [];
+        if (limit > 0 && prevNotices.length > limit) {
+          const n = prevNotices.length - limit;
+          const notices2 = placement.includes("top") ? prevNotices.slice(n * -1) : prevNotices.slice(0, n);
+          const ids = notices2.map(({ id: id2 }) => id2);
+          prevNotices = prevNotices.map(
+            (notice2) => ids.includes(notice2.id) ? { ...notice2, isDelete: true } : notice2
+          );
+        }
+        const notices = placement.includes("top") ? [notice, ...prevNotices] : [...prevNotices, notice];
+        return { ...prev, [placement]: notices };
+      });
+      return id;
+    },
+    update: (id, options) => {
+      setState((prev) => {
+        const next = { ...prev };
+        const { placement, index } = findNotice(next, id);
+        if (placement && index !== -1) {
+          next[placement][index] = {
+            ...next[placement][index],
+            ...options,
+            message: createRender(options)
+          };
+        }
+        return next;
+      });
+    },
+    closeAll: ({ placement } = {}) => {
+      setState((prev) => {
+        let placements = [
+          "bottom",
+          "bottom-right",
+          "bottom-left",
+          "top",
+          "top-left",
+          "top-right"
+        ];
+        if (placement)
+          placements = placement;
+        return placements.reduce(
+          (acc, placement2) => {
+            acc[placement2] = prev[placement2].map((notice) => ({ ...notice, isDelete: true }));
+            return acc;
+          },
+          { ...prev }
+        );
+      });
+    },
+    close: (id) => {
+      setState((prev) => {
+        const placement = getNoticePlacement(prev, id);
+        if (!placement)
+          return prev;
+        return {
+          ...prev,
+          [placement]: prev[placement].map(
+            (notice) => notice.id == id ? { ...notice, isDelete: true } : notice
+          )
+        };
+      });
+    },
+    isActive: (id) => Boolean(findNotice(noticeStore.getSnapshot(), id).placement)
+  };
+};
+var noticeStore = createNoticeStore(initialState);
+var Notice = ({
+  variant = "subtle",
+  colorScheme,
+  status,
+  icon,
+  title,
+  description,
+  isClosable,
+  onClose
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Alert,
+    {
+      status,
+      variant,
+      colorScheme,
+      alignItems: "start",
+      boxShadow: "lg",
+      pe: isClosable ? 8 : void 0,
+      children: [
+        /* @__PURE__ */ jsx(AlertIcon, { variant: icon == null ? void 0 : icon.variant, ...(icon == null ? void 0 : icon.color) ? { color: icon.color } : {}, children: icon == null ? void 0 : icon.children }),
+        /* @__PURE__ */ jsxs(ui.div, { flex: "1", children: [
+          title ? /* @__PURE__ */ jsx(AlertTitle, { noOfLines: 1, children: title }) : null,
+          description ? /* @__PURE__ */ jsx(AlertDescription, { noOfLines: 3, children: description }) : null
+        ] }),
+        isClosable ? /* @__PURE__ */ jsx(CloseButton, { size: "sm", onClick: onClose, position: "absolute", top: 2, right: 2 }) : null
+      ]
+    }
+  );
+};
+
+export {
+  useNotice,
+  noticeStore
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { NoticeOptions, NoticeProps, UseNoticeOptions, noticeStore, useNotice } from './notice.js';
+import '@yamada-ui/alert';
+import '@yamada-ui/core';
+import '@yamada-ui/utils';
+import 'react';

package/dist/index.js

@@ -0,0 +1,233 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  noticeStore: () => noticeStore,
+  useNotice: () => useNotice
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/notice.tsx
+var import_alert = require("@yamada-ui/alert");
+var import_close_button = require("@yamada-ui/close-button");
+var import_core = require("@yamada-ui/core");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var findId = (options, id) => options.find((notice) => notice.id === id);
+var findNotice = (state, id) => {
+  const placement = getNoticePlacement(state, id);
+  const index = placement ? state[placement].findIndex((notice) => notice.id === id) : -1;
+  return { placement, index };
+};
+var getNoticePlacement = (state, id) => {
+  for (const [placement, values] of Object.entries(state)) {
+    if (findId(values, id))
+      return placement;
+  }
+};
+var counter = 0;
+var createNotice = (message, { id, placement = "top", duration, onCloseComplete, status, style }) => {
+  counter += 1;
+  id = id != null ? id : counter;
+  return {
+    id,
+    placement,
+    status,
+    duration,
+    message,
+    onDelete: () => noticeStore.remove(String(id), placement),
+    isDelete: false,
+    onCloseComplete,
+    style
+  };
+};
+var createRender = (options) => {
+  const { component } = options;
+  const Render = (props) => {
+    if (typeof component === "function") {
+      return component({ ...props, ...options });
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Notice, { ...props, ...options });
+    }
+  };
+  return Render;
+};
+var createNoticeFunc = (defaultOptions, theme) => {
+  var _a, _b;
+  const themeOptions = (_b = (_a = theme.__config.notice) == null ? void 0 : _a.options) != null ? _b : {};
+  const computedOptions = (options) => (0, import_utils.merge)(themeOptions, (0, import_utils.merge)(defaultOptions, options));
+  const notice = (options = {}) => {
+    options = computedOptions(options);
+    const message = createRender(options);
+    return noticeStore.create(message, options);
+  };
+  notice.update = (id, options) => {
+    options = computedOptions(options);
+    noticeStore.update(id, options);
+  };
+  notice.closeAll = noticeStore.closeAll;
+  notice.close = noticeStore.close;
+  notice.isActive = noticeStore.isActive;
+  return notice;
+};
+var useNotice = (defaultOptions) => {
+  const { theme } = (0, import_core.useTheme)();
+  return (0, import_react.useMemo)(() => createNoticeFunc(defaultOptions != null ? defaultOptions : {}, theme), [defaultOptions, theme]);
+};
+var initialState = {
+  top: [],
+  "top-left": [],
+  "top-right": [],
+  bottom: [],
+  "bottom-left": [],
+  "bottom-right": []
+};
+var createNoticeStore = (initialState2) => {
+  let state = initialState2;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (setStateFn) => {
+    state = setStateFn(state);
+    listeners.forEach((l) => l());
+  };
+  return {
+    getSnapshot: () => state,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        setState(() => initialState2);
+        listeners.delete(listener);
+      };
+    },
+    remove: (id, placement) => {
+      setState((prevState) => ({
+        ...prevState,
+        [placement]: prevState[placement].filter((notice) => notice.id != id)
+      }));
+    },
+    create: (message, options) => {
+      var _a;
+      const limit = ((_a = options.limit) != null ? _a : 0) - 1;
+      const notice = createNotice(message, options);
+      const { placement, id } = notice;
+      setState((prev) => {
+        var _a2;
+        let prevNotices = (_a2 = prev[placement]) != null ? _a2 : [];
+        if (limit > 0 && prevNotices.length > limit) {
+          const n = prevNotices.length - limit;
+          const notices2 = placement.includes("top") ? prevNotices.slice(n * -1) : prevNotices.slice(0, n);
+          const ids = notices2.map(({ id: id2 }) => id2);
+          prevNotices = prevNotices.map(
+            (notice2) => ids.includes(notice2.id) ? { ...notice2, isDelete: true } : notice2
+          );
+        }
+        const notices = placement.includes("top") ? [notice, ...prevNotices] : [...prevNotices, notice];
+        return { ...prev, [placement]: notices };
+      });
+      return id;
+    },
+    update: (id, options) => {
+      setState((prev) => {
+        const next = { ...prev };
+        const { placement, index } = findNotice(next, id);
+        if (placement && index !== -1) {
+          next[placement][index] = {
+            ...next[placement][index],
+            ...options,
+            message: createRender(options)
+          };
+        }
+        return next;
+      });
+    },
+    closeAll: ({ placement } = {}) => {
+      setState((prev) => {
+        let placements = [
+          "bottom",
+          "bottom-right",
+          "bottom-left",
+          "top",
+          "top-left",
+          "top-right"
+        ];
+        if (placement)
+          placements = placement;
+        return placements.reduce(
+          (acc, placement2) => {
+            acc[placement2] = prev[placement2].map((notice) => ({ ...notice, isDelete: true }));
+            return acc;
+          },
+          { ...prev }
+        );
+      });
+    },
+    close: (id) => {
+      setState((prev) => {
+        const placement = getNoticePlacement(prev, id);
+        if (!placement)
+          return prev;
+        return {
+          ...prev,
+          [placement]: prev[placement].map(
+            (notice) => notice.id == id ? { ...notice, isDelete: true } : notice
+          )
+        };
+      });
+    },
+    isActive: (id) => Boolean(findNotice(noticeStore.getSnapshot(), id).placement)
+  };
+};
+var noticeStore = createNoticeStore(initialState);
+var Notice = ({
+  variant = "subtle",
+  colorScheme,
+  status,
+  icon,
+  title,
+  description,
+  isClosable,
+  onClose
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_alert.Alert,
+    {
+      status,
+      variant,
+      colorScheme,
+      alignItems: "start",
+      boxShadow: "lg",
+      pe: isClosable ? 8 : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertIcon, { variant: icon == null ? void 0 : icon.variant, ...(icon == null ? void 0 : icon.color) ? { color: icon.color } : {}, children: icon == null ? void 0 : icon.children }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { flex: "1", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertTitle, { noOfLines: 1, children: title }) : null,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertDescription, { noOfLines: 3, children: description }) : null
+        ] }),
+        isClosable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_close_button.CloseButton, { size: "sm", onClick: onClose, position: "absolute", top: 2, right: 2 }) : null
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  noticeStore,
+  useNotice
+});

package/dist/index.mjs

@@ -0,0 +1,8 @@
+import {
+  noticeStore,
+  useNotice
+} from "./chunk-JM3M4FPB.mjs";
+export {
+  noticeStore,
+  useNotice
+};

package/dist/notice.d.ts

@@ -0,0 +1,49 @@
+import { AlertProps } from '@yamada-ui/alert';
+import { NoticeConfigOptions, NoticePlacement, NoticeComponentProps, CSSUIObject, StyledTheme } from '@yamada-ui/core';
+import { Dict } from '@yamada-ui/utils';
+import { ReactNode } from 'react';
+
+type UseNoticeOptions = NoticeConfigOptions;
+type NoticeOptions = {
+    id: string | number;
+    placement: NoticePlacement;
+    duration: UseNoticeOptions['duration'];
+    status: UseNoticeOptions['status'];
+    message: (props: NoticeComponentProps) => ReactNode;
+    isDelete?: boolean;
+    onDelete: () => void;
+    onCloseComplete?: () => void;
+    style?: CSSUIObject;
+};
+declare const createNoticeFunc: (defaultOptions: UseNoticeOptions, theme: StyledTheme<Dict<any>>) => {
+    (options?: UseNoticeOptions): string | number;
+    update(id: string | number, options: Omit<UseNoticeOptions, 'id'>): void;
+    closeAll: (options?: {
+        placement?: NoticePlacement[];
+    }) => void;
+    close: (id: string | number) => void;
+    isActive: (id: string | number) => boolean;
+};
+type CreateNoticeReturn = ReturnType<typeof createNoticeFunc>;
+declare const useNotice: (defaultOptions?: UseNoticeOptions) => CreateNoticeReturn;
+type State = {
+    [K in NoticePlacement]: NoticeOptions[];
+};
+type Store = {
+    subscribe: (onStoreChange: () => void) => () => void;
+    getSnapshot: () => State;
+    create: (message: (props: NoticeComponentProps) => ReactNode, options: UseNoticeOptions) => string | number;
+    close: (id: string | number) => void;
+    closeAll: (options?: {
+        placement?: NoticePlacement[];
+    }) => void;
+    update: (id: string | number, options: Omit<UseNoticeOptions, 'id'>) => void;
+    remove: (id: string | number, placement: NoticePlacement) => void;
+    isActive: (id: string | number) => boolean;
+};
+declare const noticeStore: Store;
+type NoticeProps = Omit<AlertProps, keyof UseNoticeOptions> & UseNoticeOptions & {
+    onClose?: () => void;
+};
+
+export { NoticeOptions, NoticeProps, UseNoticeOptions, noticeStore, useNotice };

package/dist/notice.js

@@ -0,0 +1,231 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/notice.tsx
+var notice_exports = {};
+__export(notice_exports, {
+  noticeStore: () => noticeStore,
+  useNotice: () => useNotice
+});
+module.exports = __toCommonJS(notice_exports);
+var import_alert = require("@yamada-ui/alert");
+var import_close_button = require("@yamada-ui/close-button");
+var import_core = require("@yamada-ui/core");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var findId = (options, id) => options.find((notice) => notice.id === id);
+var findNotice = (state, id) => {
+  const placement = getNoticePlacement(state, id);
+  const index = placement ? state[placement].findIndex((notice) => notice.id === id) : -1;
+  return { placement, index };
+};
+var getNoticePlacement = (state, id) => {
+  for (const [placement, values] of Object.entries(state)) {
+    if (findId(values, id))
+      return placement;
+  }
+};
+var counter = 0;
+var createNotice = (message, { id, placement = "top", duration, onCloseComplete, status, style }) => {
+  counter += 1;
+  id = id != null ? id : counter;
+  return {
+    id,
+    placement,
+    status,
+    duration,
+    message,
+    onDelete: () => noticeStore.remove(String(id), placement),
+    isDelete: false,
+    onCloseComplete,
+    style
+  };
+};
+var createRender = (options) => {
+  const { component } = options;
+  const Render = (props) => {
+    if (typeof component === "function") {
+      return component({ ...props, ...options });
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Notice, { ...props, ...options });
+    }
+  };
+  return Render;
+};
+var createNoticeFunc = (defaultOptions, theme) => {
+  var _a, _b;
+  const themeOptions = (_b = (_a = theme.__config.notice) == null ? void 0 : _a.options) != null ? _b : {};
+  const computedOptions = (options) => (0, import_utils.merge)(themeOptions, (0, import_utils.merge)(defaultOptions, options));
+  const notice = (options = {}) => {
+    options = computedOptions(options);
+    const message = createRender(options);
+    return noticeStore.create(message, options);
+  };
+  notice.update = (id, options) => {
+    options = computedOptions(options);
+    noticeStore.update(id, options);
+  };
+  notice.closeAll = noticeStore.closeAll;
+  notice.close = noticeStore.close;
+  notice.isActive = noticeStore.isActive;
+  return notice;
+};
+var useNotice = (defaultOptions) => {
+  const { theme } = (0, import_core.useTheme)();
+  return (0, import_react.useMemo)(() => createNoticeFunc(defaultOptions != null ? defaultOptions : {}, theme), [defaultOptions, theme]);
+};
+var initialState = {
+  top: [],
+  "top-left": [],
+  "top-right": [],
+  bottom: [],
+  "bottom-left": [],
+  "bottom-right": []
+};
+var createNoticeStore = (initialState2) => {
+  let state = initialState2;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (setStateFn) => {
+    state = setStateFn(state);
+    listeners.forEach((l) => l());
+  };
+  return {
+    getSnapshot: () => state,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        setState(() => initialState2);
+        listeners.delete(listener);
+      };
+    },
+    remove: (id, placement) => {
+      setState((prevState) => ({
+        ...prevState,
+        [placement]: prevState[placement].filter((notice) => notice.id != id)
+      }));
+    },
+    create: (message, options) => {
+      var _a;
+      const limit = ((_a = options.limit) != null ? _a : 0) - 1;
+      const notice = createNotice(message, options);
+      const { placement, id } = notice;
+      setState((prev) => {
+        var _a2;
+        let prevNotices = (_a2 = prev[placement]) != null ? _a2 : [];
+        if (limit > 0 && prevNotices.length > limit) {
+          const n = prevNotices.length - limit;
+          const notices2 = placement.includes("top") ? prevNotices.slice(n * -1) : prevNotices.slice(0, n);
+          const ids = notices2.map(({ id: id2 }) => id2);
+          prevNotices = prevNotices.map(
+            (notice2) => ids.includes(notice2.id) ? { ...notice2, isDelete: true } : notice2
+          );
+        }
+        const notices = placement.includes("top") ? [notice, ...prevNotices] : [...prevNotices, notice];
+        return { ...prev, [placement]: notices };
+      });
+      return id;
+    },
+    update: (id, options) => {
+      setState((prev) => {
+        const next = { ...prev };
+        const { placement, index } = findNotice(next, id);
+        if (placement && index !== -1) {
+          next[placement][index] = {
+            ...next[placement][index],
+            ...options,
+            message: createRender(options)
+          };
+        }
+        return next;
+      });
+    },
+    closeAll: ({ placement } = {}) => {
+      setState((prev) => {
+        let placements = [
+          "bottom",
+          "bottom-right",
+          "bottom-left",
+          "top",
+          "top-left",
+          "top-right"
+        ];
+        if (placement)
+          placements = placement;
+        return placements.reduce(
+          (acc, placement2) => {
+            acc[placement2] = prev[placement2].map((notice) => ({ ...notice, isDelete: true }));
+            return acc;
+          },
+          { ...prev }
+        );
+      });
+    },
+    close: (id) => {
+      setState((prev) => {
+        const placement = getNoticePlacement(prev, id);
+        if (!placement)
+          return prev;
+        return {
+          ...prev,
+          [placement]: prev[placement].map(
+            (notice) => notice.id == id ? { ...notice, isDelete: true } : notice
+          )
+        };
+      });
+    },
+    isActive: (id) => Boolean(findNotice(noticeStore.getSnapshot(), id).placement)
+  };
+};
+var noticeStore = createNoticeStore(initialState);
+var Notice = ({
+  variant = "subtle",
+  colorScheme,
+  status,
+  icon,
+  title,
+  description,
+  isClosable,
+  onClose
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_alert.Alert,
+    {
+      status,
+      variant,
+      colorScheme,
+      alignItems: "start",
+      boxShadow: "lg",
+      pe: isClosable ? 8 : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertIcon, { variant: icon == null ? void 0 : icon.variant, ...(icon == null ? void 0 : icon.color) ? { color: icon.color } : {}, children: icon == null ? void 0 : icon.children }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { flex: "1", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertTitle, { noOfLines: 1, children: title }) : null,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertDescription, { noOfLines: 3, children: description }) : null
+        ] }),
+        isClosable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_close_button.CloseButton, { size: "sm", onClick: onClose, position: "absolute", top: 2, right: 2 }) : null
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  noticeStore,
+  useNotice
+});

package/dist/notice.mjs

@@ -0,0 +1,8 @@
+import {
+  noticeStore,
+  useNotice
+} from "./chunk-JM3M4FPB.mjs";
+export {
+  noticeStore,
+  useNotice
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@yamada-ui/notice",
+  "version": "0.1.0",
+  "description": "Yamada UI notice component",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "notice",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/notice"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "react-loader-spinner": "^5.3.4",
+    "@yamada-ui/core": "0.1.0",
+    "@yamada-ui/alert": "0.1.0",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/close-button": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}