npm - @cerberus-design/react - Versions diffs - 0.7.4-next-9a605c3 → 0.7.4-next-d474a8b - Mend

@cerberus-design/react 0.7.4-next-9a605c3 → 0.7.4-next-d474a8b

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 (21) hide show

package/build/legacy/{chunk-SPGBCV6A.js → chunk-BYDTAFCU.js} +11 -5
package/build/legacy/chunk-BYDTAFCU.js.map +1 -0
package/build/legacy/{chunk-TAJBSUS7.js → chunk-I5FPKT7H.js} +53 -30
package/build/legacy/chunk-I5FPKT7H.js.map +1 -0
package/build/legacy/components/Notification.js +1 -2
package/build/legacy/context/notification-center.js +3 -3
package/build/legacy/index.js +2 -2
package/build/modern/{chunk-32E6OUMD.js → chunk-NZWANWYC.js} +53 -30
package/build/modern/chunk-NZWANWYC.js.map +1 -0
package/build/modern/{chunk-OCBED5GL.js → chunk-U5QWMMKZ.js} +11 -5
package/build/modern/chunk-U5QWMMKZ.js.map +1 -0
package/build/modern/components/Notification.js +1 -2
package/build/modern/context/notification-center.js +3 -3
package/build/modern/index.js +2 -2
package/package.json +3 -3
package/src/components/Notification.tsx +7 -3
package/src/context/notification-center.tsx +50 -28
package/build/legacy/chunk-SPGBCV6A.js.map +0 -1
package/build/legacy/chunk-TAJBSUS7.js.map +0 -1
package/build/modern/chunk-32E6OUMD.js.map +0 -1
package/build/modern/chunk-OCBED5GL.js.map +0 -1

package/build/legacy/{chunk-SPGBCV6A.js → chunk-BYDTAFCU.js} RENAMED Viewed

@@ -1,6 +1,3 @@
-import {
-  IconButton
-} from "./chunk-SLHX5K6I.js";
 import {
   trapFocus
 } from "./chunk-KESKDLX6.js";
@@ -58,7 +55,16 @@ function Notification(props) {
             children
           }
         ),
-        /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Close", onClick: onClose, value: props.id, children: /* @__PURE__ */ jsx(Close, {}) })
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Close",
+            className: styles.close,
+            onClick: onClose,
+            value: props.id,
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        )
       ]
     }
   );
@@ -67,4 +73,4 @@ function Notification(props) {
 export {
   Notification
 };
-//# sourceMappingURL=chunk-SPGBCV6A.js.map
+//# sourceMappingURL=chunk-BYDTAFCU.js.map

package/build/legacy/chunk-BYDTAFCU.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/components/Notification.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport {\n useRef,\n type DialogHTMLAttributes,\n type PropsWithChildren,\n type MouseEvent,\n} from 'react'\nimport { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n const palette = props.palette || 'info'\n const key = `${palette}Notification` as keyof typeof $cerberusIcons\n const Icon = $cerberusIcons[key] as IconType\n return <Icon />\n}\n\nexport interface NotificationBaseProps\n extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n id: string\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * The info notification component.\n * @param props - The component props.\n * @returns The info notification component.\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n * <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n * This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n const { children, palette, onClose, ...nativeProps } = props\n const ref = useRef<HTMLDialogElement>(null)\n const onKeyDown = trapFocus(ref)\n const styles = notification({ palette })\n\n return (\n <dialog\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n position: 'relative',\n gap: '4',\n }),\n styles.dialog,\n )}\n onKeyDown={onKeyDown}\n ref={ref}\n role=\"alert\"\n >\n <span className={styles.icon}>\n <MatchNotificationIcon palette={palette} />\n </span>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0',\n py: '2',\n })}\n >\n {children}\n </div>\n\n <button\n aria-label=\"Close\"\n className={styles.close}\n onClick={onClose}\n value={props.id}\n >\n <Close />\n </button>\n </dialog>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAIK;AACP,SAAS,aAAa;AAcb,cA+BL,YA/BK;AAJT,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,UAAU,MAAM,WAAW;AACjC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,eAAe,GAAG;AAC/B,SAAO,oBAAC,QAAK;AACf;AAuBO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEL;AAAA,4BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,IAAI;AAAA,YACN,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,OAAO,MAAM;AAAA,YAEb,8BAAC,SAAM;AAAA;AAAA,QACT;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/{chunk-TAJBSUS7.js → chunk-I5FPKT7H.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   Notification
-} from "./chunk-SPGBCV6A.js";
+} from "./chunk-BYDTAFCU.js";
 import {
   NotificationDescription
 } from "./chunk-SINTHADQ.js";
@@ -10,6 +10,9 @@ import {
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
+import {
+  Button
+} from "./chunk-2ATICEW3.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
@@ -22,13 +25,14 @@ import {
   useMemo,
   useState
 } from "react";
-import { vstack } from "@cerberus-design/styled-system/patterns";
-import { cx } from "@cerberus-design/styled-system/css";
+import { animateIn, vstack } from "@cerberus-design/styled-system/patterns";
 import { notification } from "@cerberus-design/styled-system/recipes";
+import { cx } from "@cerberus-design/styled-system/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 var NotificationsContext = createContext(null);
 function NotificationCenter(props) {
   const [activeNotifications, setActiveNotifications] = useState([]);
+  const styles = notification();
   const handleNotify = useCallback((options) => {
     setActiveNotifications((prev) => {
       const id = `${options.palette}:${prev.length + 1}`;
@@ -43,6 +47,14 @@ function NotificationCenter(props) {
       return prev.filter((option) => option.id !== target.value);
     });
   }, []);
+  const handleCloseAll = useCallback(() => {
+    setActiveNotifications((prev) => {
+      prev.forEach((item) => {
+        if (item.onClose) item.onClose();
+      });
+      return [];
+    });
+  }, []);
   const value = useMemo(
     () => ({
       notify: handleNotify
@@ -51,35 +63,46 @@ function NotificationCenter(props) {
   );
   return /* @__PURE__ */ jsxs(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ jsx(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ jsx(Portal, { container: props.container, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(
-          notification().center,
-          vstack({
+    /* @__PURE__ */ jsx(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ jsx(Portal, { container: props.container, children: /* @__PURE__ */ jsxs("div", { className: styles.center, children: [
+      /* @__PURE__ */ jsx(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: cx(styles.closeAll, animateIn()),
+          onClick: handleCloseAll,
+          palette: "action",
+          shape: "rounded",
+          size: "sm",
+          usage: "text",
+          children: "Close all"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: vstack({
             alignItems: "flex-end",
             gap: "4"
-          })
-        ),
-        style: {
-          alignItems: "flex-end"
-        },
-        children: activeNotifications.map((option) => /* @__PURE__ */ jsxs(
-          Notification,
-          {
-            id: option.id,
-            onClose: handleClose,
-            open: true,
-            palette: option.palette,
-            children: [
-              /* @__PURE__ */ jsx(NotificationHeading, { palette: option.palette, children: option.heading }),
-              /* @__PURE__ */ jsx(NotificationDescription, { palette: option.palette, children: option.description })
-            ]
+          }),
+          style: {
+            alignItems: "flex-end"
           },
-          option.id
-        ))
-      }
-    ) }) })
+          children: activeNotifications.map((option) => /* @__PURE__ */ jsxs(
+            Notification,
+            {
+              id: option.id,
+              onClose: handleClose,
+              open: true,
+              palette: option.palette,
+              children: [
+                /* @__PURE__ */ jsx(NotificationHeading, { palette: option.palette, children: option.heading }),
+                /* @__PURE__ */ jsx(NotificationDescription, { palette: option.palette, children: option.description })
+              ]
+            },
+            option.id
+          ))
+        }
+      )
+    ] }) }) })
   ] });
 }
 function useNotificationCenter() {
@@ -96,4 +119,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-TAJBSUS7.js.map
+//# sourceMappingURL=chunk-I5FPKT7H.js.map

package/build/legacy/chunk-I5FPKT7H.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus-design/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus-design/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus-design/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n palette: 'info' | 'success' | 'warning' | 'danger'\n heading: string\n id?: string\n description?: ReactNode\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n const styles = notification()\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const handleCloseAll = useCallback(() => {\n setActiveNotifications((prev) => {\n prev.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n return []\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={activeNotifications.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"text\"\n >\n Close all\n </Button>\n </Show>\n <div\n className={vstack({\n alignItems: 'flex-end',\n gap: '4',\n })}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {activeNotifications.map((option) => (\n <Notification\n id={option.id!}\n key={option.id}\n onClose={handleClose}\n open\n palette={option.palette}\n >\n <NotificationHeading palette={option.palette}>\n {option.heading}\n </NotificationHeading>\n <NotificationDescription palette={option.palette}>\n {option.description}\n </NotificationDescription>\n </Notification>\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAKP,SAAS,WAAW,cAAc;AAElC,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AA+FL,cAqBE,YArBF;AA5Ed,IAAM,uBAAuB,cAAyC,IAAI;AAyBnE,SAAS,mBACd,OACA;AACA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,CAAC,CAAC;AACJ,QAAM,SAAS,aAAa;AAE5B,QAAM,eAAe,YAAY,CAAC,YAA2B;AAC3D,2BAAuB,CAAC,SAAS;AAC/B,YAAM,KAAK,GAAG,QAAQ,OAAO,IAAI,KAAK,SAAS,CAAC;AAChD,aAAO,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,GAAG,CAAC;AAAA,IACrC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,CAAC,MAAqC;AACpE,UAAM,SAAS,EAAE;AACjB,2BAAuB,CAAC,SAAS;AAC/B,YAAM,OAAO,KAAK,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAC7D,UAAI,6BAAM,QAAS,MAAK,QAAQ;AAChC,aAAO,KAAK,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAAA,IAC3D,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,YAAY,MAAM;AACvC,2BAAuB,CAAC,SAAS;AAC/B,WAAK,QAAQ,CAAC,SAAS;AACrB,YAAI,KAAK,QAAS,MAAK,QAAQ;AAAA,MACjC,CAAC;AACD,aAAO,CAAC;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAC5B;AAAA,UAAM;AAAA,IAEP,oBAAC,QAAK,MAAM,oBAAoB,SAAS,GACvC,8BAAC,UAAO,WAAW,MAAM,WACvB,+BAAC,SAAI,WAAW,OAAO,QACrB;AAAA,0BAAC,QAAK,MAAM,oBAAoB,UAAU,GACxC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,OAAO,UAAU,UAAU,CAAC;AAAA,UAC1C,SAAS;AAAA,UACT,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,MAAK;AAAA,UACL,OAAM;AAAA,UACP;AAAA;AAAA,MAED,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,UACP,CAAC;AAAA,UACD,OAAO;AAAA,YACL,YAAY;AAAA,UACd;AAAA,UAEC,8BAAoB,IAAI,CAAC,WACxB;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cAEX,SAAS;AAAA,cACT,MAAI;AAAA,cACJ,SAAS,OAAO;AAAA,cAEhB;AAAA,oCAAC,uBAAoB,SAAS,OAAO,SAClC,iBAAO,SACV;AAAA,gBACA,oBAAC,2BAAwB,SAAS,OAAO,SACtC,iBAAO,aACV;AAAA;AAAA;AAAA,YAVK,OAAO;AAAA,UAWd,CACD;AAAA;AAAA,MACH;AAAA,OACF,GACF,GACF;AAAA,KACF;AAEJ;AAeO,SAAS,wBAA4C;AAC1D,QAAM,UAAU,WAAW,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/build/legacy/components/Notification.js CHANGED Viewed

@@ -1,8 +1,7 @@
 "use client";
 import {
   Notification
-} from "../chunk-SPGBCV6A.js";
-import "../chunk-SLHX5K6I.js";
+} from "../chunk-BYDTAFCU.js";
 import "../chunk-KESKDLX6.js";
 import "../chunk-BEYPMC73.js";
 import "../chunk-GVNPFXKL.js";

package/build/legacy/context/notification-center.js CHANGED Viewed

@@ -2,13 +2,13 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-TAJBSUS7.js";
-import "../chunk-SPGBCV6A.js";
+} from "../chunk-I5FPKT7H.js";
+import "../chunk-BYDTAFCU.js";
 import "../chunk-SINTHADQ.js";
 import "../chunk-NWMNEJGU.js";
 import "../chunk-4CAT3FHV.js";
+import "../chunk-2ATICEW3.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-SLHX5K6I.js";
 import "../chunk-KESKDLX6.js";
 import "../chunk-BEYPMC73.js";
 import "../chunk-GVNPFXKL.js";

package/build/legacy/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-TAJBSUS7.js";
+} from "./chunk-I5FPKT7H.js";
 import {
   PromptModal,
   usePromptModal
@@ -41,7 +41,7 @@ import {
 } from "./chunk-KJUCHZHV.js";
 import {
   Notification
-} from "./chunk-SPGBCV6A.js";
+} from "./chunk-BYDTAFCU.js";
 import {
   NotificationDescription
 } from "./chunk-SINTHADQ.js";

package/build/modern/{chunk-32E6OUMD.js → chunk-NZWANWYC.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   Notification
-} from "./chunk-OCBED5GL.js";
+} from "./chunk-U5QWMMKZ.js";
 import {
   NotificationDescription
 } from "./chunk-SINTHADQ.js";
@@ -10,6 +10,9 @@ import {
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
+import {
+  Button
+} from "./chunk-2ATICEW3.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
@@ -22,13 +25,14 @@ import {
   useMemo,
   useState
 } from "react";
-import { vstack } from "@cerberus-design/styled-system/patterns";
-import { cx } from "@cerberus-design/styled-system/css";
+import { animateIn, vstack } from "@cerberus-design/styled-system/patterns";
 import { notification } from "@cerberus-design/styled-system/recipes";
+import { cx } from "@cerberus-design/styled-system/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 var NotificationsContext = createContext(null);
 function NotificationCenter(props) {
   const [activeNotifications, setActiveNotifications] = useState([]);
+  const styles = notification();
   const handleNotify = useCallback((options) => {
     setActiveNotifications((prev) => {
       const id = `${options.palette}:${prev.length + 1}`;
@@ -43,6 +47,14 @@ function NotificationCenter(props) {
       return prev.filter((option) => option.id !== target.value);
     });
   }, []);
+  const handleCloseAll = useCallback(() => {
+    setActiveNotifications((prev) => {
+      prev.forEach((item) => {
+        if (item.onClose) item.onClose();
+      });
+      return [];
+    });
+  }, []);
   const value = useMemo(
     () => ({
       notify: handleNotify
@@ -51,35 +63,46 @@ function NotificationCenter(props) {
   );
   return /* @__PURE__ */ jsxs(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ jsx(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ jsx(Portal, { container: props.container, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(
-          notification().center,
-          vstack({
+    /* @__PURE__ */ jsx(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ jsx(Portal, { container: props.container, children: /* @__PURE__ */ jsxs("div", { className: styles.center, children: [
+      /* @__PURE__ */ jsx(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: cx(styles.closeAll, animateIn()),
+          onClick: handleCloseAll,
+          palette: "action",
+          shape: "rounded",
+          size: "sm",
+          usage: "text",
+          children: "Close all"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: vstack({
             alignItems: "flex-end",
             gap: "4"
-          })
-        ),
-        style: {
-          alignItems: "flex-end"
-        },
-        children: activeNotifications.map((option) => /* @__PURE__ */ jsxs(
-          Notification,
-          {
-            id: option.id,
-            onClose: handleClose,
-            open: true,
-            palette: option.palette,
-            children: [
-              /* @__PURE__ */ jsx(NotificationHeading, { palette: option.palette, children: option.heading }),
-              /* @__PURE__ */ jsx(NotificationDescription, { palette: option.palette, children: option.description })
-            ]
+          }),
+          style: {
+            alignItems: "flex-end"
           },
-          option.id
-        ))
-      }
-    ) }) })
+          children: activeNotifications.map((option) => /* @__PURE__ */ jsxs(
+            Notification,
+            {
+              id: option.id,
+              onClose: handleClose,
+              open: true,
+              palette: option.palette,
+              children: [
+                /* @__PURE__ */ jsx(NotificationHeading, { palette: option.palette, children: option.heading }),
+                /* @__PURE__ */ jsx(NotificationDescription, { palette: option.palette, children: option.description })
+              ]
+            },
+            option.id
+          ))
+        }
+      )
+    ] }) }) })
   ] });
 }
 function useNotificationCenter() {
@@ -96,4 +119,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-32E6OUMD.js.map
+//# sourceMappingURL=chunk-NZWANWYC.js.map

package/build/modern/chunk-NZWANWYC.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus-design/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus-design/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus-design/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n palette: 'info' | 'success' | 'warning' | 'danger'\n heading: string\n id?: string\n description?: ReactNode\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n const styles = notification()\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const handleCloseAll = useCallback(() => {\n setActiveNotifications((prev) => {\n prev.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n return []\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={activeNotifications.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"text\"\n >\n Close all\n </Button>\n </Show>\n <div\n className={vstack({\n alignItems: 'flex-end',\n gap: '4',\n })}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {activeNotifications.map((option) => (\n <Notification\n id={option.id!}\n key={option.id}\n onClose={handleClose}\n open\n palette={option.palette}\n >\n <NotificationHeading palette={option.palette}>\n {option.heading}\n </NotificationHeading>\n <NotificationDescription palette={option.palette}>\n {option.description}\n </NotificationDescription>\n </Notification>\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAKP,SAAS,WAAW,cAAc;AAElC,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AA+FL,cAqBE,YArBF;AA5Ed,IAAM,uBAAuB,cAAyC,IAAI;AAyBnE,SAAS,mBACd,OACA;AACA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,CAAC,CAAC;AACJ,QAAM,SAAS,aAAa;AAE5B,QAAM,eAAe,YAAY,CAAC,YAA2B;AAC3D,2BAAuB,CAAC,SAAS;AAC/B,YAAM,KAAK,GAAG,QAAQ,OAAO,IAAI,KAAK,SAAS,CAAC;AAChD,aAAO,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,GAAG,CAAC;AAAA,IACrC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,CAAC,MAAqC;AACpE,UAAM,SAAS,EAAE;AACjB,2BAAuB,CAAC,SAAS;AAC/B,YAAM,OAAO,KAAK,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAC7D,UAAI,MAAM,QAAS,MAAK,QAAQ;AAChC,aAAO,KAAK,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAAA,IAC3D,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,YAAY,MAAM;AACvC,2BAAuB,CAAC,SAAS;AAC/B,WAAK,QAAQ,CAAC,SAAS;AACrB,YAAI,KAAK,QAAS,MAAK,QAAQ;AAAA,MACjC,CAAC;AACD,aAAO,CAAC;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAC5B;AAAA,UAAM;AAAA,IAEP,oBAAC,QAAK,MAAM,oBAAoB,SAAS,GACvC,8BAAC,UAAO,WAAW,MAAM,WACvB,+BAAC,SAAI,WAAW,OAAO,QACrB;AAAA,0BAAC,QAAK,MAAM,oBAAoB,UAAU,GACxC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,OAAO,UAAU,UAAU,CAAC;AAAA,UAC1C,SAAS;AAAA,UACT,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,MAAK;AAAA,UACL,OAAM;AAAA,UACP;AAAA;AAAA,MAED,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,UACP,CAAC;AAAA,UACD,OAAO;AAAA,YACL,YAAY;AAAA,UACd;AAAA,UAEC,8BAAoB,IAAI,CAAC,WACxB;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cAEX,SAAS;AAAA,cACT,MAAI;AAAA,cACJ,SAAS,OAAO;AAAA,cAEhB;AAAA,oCAAC,uBAAoB,SAAS,OAAO,SAClC,iBAAO,SACV;AAAA,gBACA,oBAAC,2BAAwB,SAAS,OAAO,SACtC,iBAAO,aACV;AAAA;AAAA;AAAA,YAVK,OAAO;AAAA,UAWd,CACD;AAAA;AAAA,MACH;AAAA,OACF,GACF,GACF;AAAA,KACF;AAEJ;AAeO,SAAS,wBAA4C;AAC1D,QAAM,UAAU,WAAW,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-OCBED5GL.js → chunk-U5QWMMKZ.js} RENAMED Viewed

@@ -1,6 +1,3 @@
-import {
-  IconButton
-} from "./chunk-SLHX5K6I.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
@@ -58,7 +55,16 @@ function Notification(props) {
             children
           }
         ),
-        /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Close", onClick: onClose, value: props.id, children: /* @__PURE__ */ jsx(Close, {}) })
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Close",
+            className: styles.close,
+            onClick: onClose,
+            value: props.id,
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        )
       ]
     }
   );
@@ -67,4 +73,4 @@ function Notification(props) {
 export {
   Notification
 };
-//# sourceMappingURL=chunk-OCBED5GL.js.map
+//# sourceMappingURL=chunk-U5QWMMKZ.js.map

package/build/modern/chunk-U5QWMMKZ.js.map ADDED Viewed

@@ -0,0 +1 @@

package/build/modern/components/Notification.js CHANGED Viewed

@@ -1,8 +1,7 @@
 "use client";
 import {
   Notification
-} from "../chunk-OCBED5GL.js";
-import "../chunk-SLHX5K6I.js";
+} from "../chunk-U5QWMMKZ.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-BEYPMC73.js";
 import "../chunk-GVNPFXKL.js";

package/build/modern/context/notification-center.js CHANGED Viewed

@@ -2,13 +2,13 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-32E6OUMD.js";
-import "../chunk-OCBED5GL.js";
+} from "../chunk-NZWANWYC.js";
+import "../chunk-U5QWMMKZ.js";
 import "../chunk-SINTHADQ.js";
 import "../chunk-NWMNEJGU.js";
 import "../chunk-4CAT3FHV.js";
+import "../chunk-2ATICEW3.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-SLHX5K6I.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-BEYPMC73.js";
 import "../chunk-GVNPFXKL.js";

package/build/modern/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-32E6OUMD.js";
+} from "./chunk-NZWANWYC.js";
 import {
   PromptModal,
   usePromptModal
@@ -41,7 +41,7 @@ import {
 } from "./chunk-KJUCHZHV.js";
 import {
   Notification
-} from "./chunk-OCBED5GL.js";
+} from "./chunk-U5QWMMKZ.js";
 import {
   NotificationDescription
 } from "./chunk-SINTHADQ.js";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.7.4-next-9a605c3",
+  "version": "0.7.4-next-d474a8b",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -25,8 +25,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.1.0",
-    "@cerberus-design/styled-system": "0.7.4-next-9a605c3",
-    "@cerberus-design/configs": "0.0.0"
+    "@cerberus-design/configs": "0.0.0",
+    "@cerberus-design/styled-system": "0.7.4-next-d474a8b"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Notification.tsx CHANGED Viewed

@@ -12,7 +12,6 @@ import {
   type PropsWithChildren,
   type MouseEvent,
 } from 'react'
-import { IconButton } from './IconButton'
 import { Close } from '@cerberus/icons'
 import { $cerberusIcons } from '../config/defineIcons'
 import type { IconType } from '../config/cerbIcons'
@@ -86,9 +85,14 @@ export function Notification(props: PropsWithChildren<NotificationProps>) {
         {children}
       </div>
-      <IconButton ariaLabel="Close" onClick={onClose} value={props.id}>
+      <button
+        aria-label="Close"
+        className={styles.close}
+        onClick={onClose}
+        value={props.id}
+      >
         <Close />
-      </IconButton>
+      </button>
     </dialog>
   )
 }

package/src/context/notification-center.tsx CHANGED Viewed

@@ -14,10 +14,11 @@ import { Show } from '../components/Show'
 import { NotificationHeading } from '../components/NotificationHeading'
 import { NotificationDescription } from '../components/NotificationDescription'
 import { Notification } from '../components/Notification'
-import { vstack } from '@cerberus-design/styled-system/patterns'
+import { animateIn, vstack } from '@cerberus-design/styled-system/patterns'
 import { Portal, type PortalProps } from '../components/Portal'
-import { cx } from '@cerberus-design/styled-system/css'
 import { notification } from '@cerberus-design/styled-system/recipes'
+import { Button } from '../components/Button'
+import { cx } from '@cerberus-design/styled-system/css'
 /**
  * This module provides a context and hook for notifications.
@@ -67,6 +68,7 @@ export function NotificationCenter(
   const [activeNotifications, setActiveNotifications] = useState<
     NotifyOptions[]
   >([])
+  const styles = notification()
   const handleNotify = useCallback((options: NotifyOptions) => {
     setActiveNotifications((prev) => {
@@ -84,6 +86,15 @@ export function NotificationCenter(
     })
   }, [])
+  const handleCloseAll = useCallback(() => {
+    setActiveNotifications((prev) => {
+      prev.forEach((item) => {
+        if (item.onClose) item.onClose()
+      })
+      return []
+    })
+  }, [])
   const value = useMemo(
     () => ({
       notify: handleNotify,
@@ -100,34 +111,45 @@ export function NotificationCenter(
       <Show when={activeNotifications.length > 0}>
         <Portal container={props.container}>
-          <div
-            className={cx(
-              notification().center,
-              vstack({
+          <div className={styles.center}>
+            <Show when={activeNotifications.length >= 4}>
+              <Button
+                className={cx(styles.closeAll, animateIn())}
+                onClick={handleCloseAll}
+                palette="action"
+                shape="rounded"
+                size="sm"
+                usage="text"
+              >
+                Close all
+              </Button>
+            </Show>
+            <div
+              className={vstack({
                 alignItems: 'flex-end',
                 gap: '4',
-              }),
-            )}
-            style={{
-              alignItems: 'flex-end',
-            }}
-          >
-            {activeNotifications.map((option) => (
-              <Notification
-                id={option.id!}
-                key={option.id}
-                onClose={handleClose}
-                open
-                palette={option.palette}
-              >
-                <NotificationHeading palette={option.palette}>
-                  {option.heading}
-                </NotificationHeading>
-                <NotificationDescription palette={option.palette}>
-                  {option.description}
-                </NotificationDescription>
-              </Notification>
-            ))}
+              })}
+              style={{
+                alignItems: 'flex-end',
+              }}
+            >
+              {activeNotifications.map((option) => (
+                <Notification
+                  id={option.id!}
+                  key={option.id}
+                  onClose={handleClose}
+                  open
+                  palette={option.palette}
+                >
+                  <NotificationHeading palette={option.palette}>
+                    {option.heading}
+                  </NotificationHeading>
+                  <NotificationDescription palette={option.palette}>
+                    {option.description}
+                  </NotificationDescription>
+                </Notification>
+              ))}
+            </div>
           </div>
         </Portal>
       </Show>

package/build/legacy/chunk-SPGBCV6A.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/components/Notification.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport {\n useRef,\n type DialogHTMLAttributes,\n type PropsWithChildren,\n type MouseEvent,\n} from 'react'\nimport { IconButton } from './IconButton'\nimport { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n const palette = props.palette || 'info'\n const key = `${palette}Notification` as keyof typeof $cerberusIcons\n const Icon = $cerberusIcons[key] as IconType\n return <Icon />\n}\n\nexport interface NotificationBaseProps\n extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n id: string\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * The info notification component.\n * @param props - The component props.\n * @returns The info notification component.\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n * <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n * This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n const { children, palette, onClose, ...nativeProps } = props\n const ref = useRef<HTMLDialogElement>(null)\n const onKeyDown = trapFocus(ref)\n const styles = notification({ palette })\n\n return (\n <dialog\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n position: 'relative',\n gap: '4',\n }),\n styles.dialog,\n )}\n onKeyDown={onKeyDown}\n ref={ref}\n role=\"alert\"\n >\n <span className={styles.icon}>\n <MatchNotificationIcon palette={palette} />\n </span>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0',\n py: '2',\n })}\n >\n {children}\n </div>\n\n <IconButton ariaLabel=\"Close\" onClick={onClose} value={props.id}>\n <Close />\n </IconButton>\n </dialog>\n )\n}\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAIK;AAEP,SAAS,aAAa;AAcb,cA+BL,YA/BK;AAJT,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,UAAU,MAAM,WAAW;AACjC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,eAAe,GAAG;AAC/B,SAAO,oBAAC,QAAK;AACf;AAuBO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEL;AAAA,4BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,IAAI;AAAA,YACN,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QAEA,oBAAC,cAAW,WAAU,SAAQ,SAAS,SAAS,OAAO,MAAM,IAC3D,8BAAC,SAAM,GACT;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/chunk-TAJBSUS7.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { vstack } from '@cerberus-design/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { notification } from '@cerberus-design/styled-system/recipes'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n palette: 'info' | 'success' | 'warning' | 'danger'\n heading: string\n id?: string\n description?: ReactNode\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div\n className={cx(\n notification().center,\n vstack({\n alignItems: 'flex-end',\n gap: '4',\n }),\n )}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {activeNotifications.map((option) => (\n <Notification\n id={option.id!}\n key={option.id}\n onClose={handleClose}\n open\n palette={option.palette}\n >\n <NotificationHeading palette={option.palette}>\n {option.heading}\n </NotificationHeading>\n <NotificationDescription palette={option.palette}>\n {option.description}\n </NotificationDescription>\n </Notification>\n ))}\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAKP,SAAS,cAAc;AAEvB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAgGf,SAOE,KAPF;AA7Ed,IAAM,uBAAuB,cAAyC,IAAI;AAyBnE,SAAS,mBACd,OACA;AACA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,CAAC,CAAC;AAEJ,QAAM,eAAe,YAAY,CAAC,YAA2B;AAC3D,2BAAuB,CAAC,SAAS;AAC/B,YAAM,KAAK,GAAG,QAAQ,OAAO,IAAI,KAAK,SAAS,CAAC;AAChD,aAAO,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,GAAG,CAAC;AAAA,IACrC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,CAAC,MAAqC;AACpE,UAAM,SAAS,EAAE;AACjB,2BAAuB,CAAC,SAAS;AAC/B,YAAM,OAAO,KAAK,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAC7D,UAAI,6BAAM,QAAS,MAAK,QAAQ;AAChC,aAAO,KAAK,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAAA,IAC3D,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAC5B;AAAA,UAAM;AAAA,IAEP,oBAAC,QAAK,MAAM,oBAAoB,SAAS,GACvC,8BAAC,UAAO,WAAW,MAAM,WACvB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,aAAa,EAAE;AAAA,UACf,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,KAAK;AAAA,UACP,CAAC;AAAA,QACH;AAAA,QACA,OAAO;AAAA,UACL,YAAY;AAAA,QACd;AAAA,QAEC,8BAAoB,IAAI,CAAC,WACxB;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,OAAO;AAAA,YAEX,SAAS;AAAA,YACT,MAAI;AAAA,YACJ,SAAS,OAAO;AAAA,YAEhB;AAAA,kCAAC,uBAAoB,SAAS,OAAO,SAClC,iBAAO,SACV;AAAA,cACA,oBAAC,2BAAwB,SAAS,OAAO,SACtC,iBAAO,aACV;AAAA;AAAA;AAAA,UAVK,OAAO;AAAA,QAWd,CACD;AAAA;AAAA,IACH,GACF,GACF;AAAA,KACF;AAEJ;AAeO,SAAS,wBAA4C;AAC1D,QAAM,UAAU,WAAW,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-32E6OUMD.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { vstack } from '@cerberus-design/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { notification } from '@cerberus-design/styled-system/recipes'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n palette: 'info' | 'success' | 'warning' | 'danger'\n heading: string\n id?: string\n description?: ReactNode\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div\n className={cx(\n notification().center,\n vstack({\n alignItems: 'flex-end',\n gap: '4',\n }),\n )}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {activeNotifications.map((option) => (\n <Notification\n id={option.id!}\n key={option.id}\n onClose={handleClose}\n open\n palette={option.palette}\n >\n <NotificationHeading palette={option.palette}>\n {option.heading}\n </NotificationHeading>\n <NotificationDescription palette={option.palette}>\n {option.description}\n </NotificationDescription>\n </Notification>\n ))}\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAKP,SAAS,cAAc;AAEvB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAgGf,SAOE,KAPF;AA7Ed,IAAM,uBAAuB,cAAyC,IAAI;AAyBnE,SAAS,mBACd,OACA;AACA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,CAAC,CAAC;AAEJ,QAAM,eAAe,YAAY,CAAC,YAA2B;AAC3D,2BAAuB,CAAC,SAAS;AAC/B,YAAM,KAAK,GAAG,QAAQ,OAAO,IAAI,KAAK,SAAS,CAAC;AAChD,aAAO,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,GAAG,CAAC;AAAA,IACrC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,CAAC,MAAqC;AACpE,UAAM,SAAS,EAAE;AACjB,2BAAuB,CAAC,SAAS;AAC/B,YAAM,OAAO,KAAK,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAC7D,UAAI,MAAM,QAAS,MAAK,QAAQ;AAChC,aAAO,KAAK,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAAA,IAC3D,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAC5B;AAAA,UAAM;AAAA,IAEP,oBAAC,QAAK,MAAM,oBAAoB,SAAS,GACvC,8BAAC,UAAO,WAAW,MAAM,WACvB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,aAAa,EAAE;AAAA,UACf,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,KAAK;AAAA,UACP,CAAC;AAAA,QACH;AAAA,QACA,OAAO;AAAA,UACL,YAAY;AAAA,QACd;AAAA,QAEC,8BAAoB,IAAI,CAAC,WACxB;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,OAAO;AAAA,YAEX,SAAS;AAAA,YACT,MAAI;AAAA,YACJ,SAAS,OAAO;AAAA,YAEhB;AAAA,kCAAC,uBAAoB,SAAS,OAAO,SAClC,iBAAO,SACV;AAAA,cACA,oBAAC,2BAAwB,SAAS,OAAO,SACtC,iBAAO,aACV;AAAA;AAAA;AAAA,UAVK,OAAO;AAAA,QAWd,CACD;AAAA;AAAA,IACH,GACF,GACF;AAAA,KACF;AAEJ;AAeO,SAAS,wBAA4C;AAC1D,QAAM,UAAU,WAAW,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-OCBED5GL.js.map DELETED Viewed

@@ -1 +0,0 @@