@cerberus-design/react 0.7.4-next-154c1e8 → 0.7.4-next-9a605c3

package/build/legacy/_tsup-dts-rollup.d.ts

@@ -25,6 +25,7 @@ import { defaultCoordinates } from '@dnd-kit/core';
 import { defaultDropAnimation } from '@dnd-kit/core';
 import { defaultDropAnimationSideEffects } from '@dnd-kit/core';
 import { defaultScreenReaderInstructions } from '@dnd-kit/core';
+import { DialogHTMLAttributes } from 'react';
 import { DistanceMeasurement } from '@dnd-kit/core';
 import { DndContext } from '@dnd-kit/core';
 import { DndContextDescriptor } from '@dnd-kit/core';
@@ -76,9 +77,11 @@ import { MeasuringStrategy } from '@dnd-kit/core';
 import { ModalIconVariantProps } from '@cerberus/styled-system/recipes';
 import { Modifier } from '@dnd-kit/core';
 import { Modifiers } from '@dnd-kit/core';
+import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseSensor } from '@dnd-kit/core';
 import { MouseSensorOptions } from '@dnd-kit/core';
 import { MutableRefObject } from 'react';
+import { NotificationVariantProps } from '@cerberus-design/styled-system/recipes';
 import { Over } from '@dnd-kit/core';
 import { PointerActivationConstraint } from '@dnd-kit/core';
 import { PointerEventHandlers } from '@dnd-kit/core';
@@ -143,6 +146,16 @@ export { AutoScrollActivator }
 
 export { AutoScrollOptions }
 
+declare interface BaseNotificationDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+}
+export { BaseNotificationDescriptionProps }
+export { BaseNotificationDescriptionProps as BaseNotificationDescriptionProps_alias_1 }
+
+declare interface BaseNotificationHeadingProps extends HTMLAttributes<HTMLParagraphElement> {
+}
+export { BaseNotificationHeadingProps }
+export { BaseNotificationHeadingProps as BaseNotificationHeadingProps_alias_1 }
+
 /**
  * A component that allows the user to perform actions
  * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx
@@ -255,11 +268,15 @@ export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
 export declare interface DefinedIcons {
-    confirmModal?: CarbonIconType | ElementType;
-    fileUploader?: CarbonIconType | ElementType;
-    promptModal?: CarbonIconType | ElementType;
-    invalid: CarbonIconType | ElementType;
-    toggleChecked?: CarbonIconType | ElementType;
+    confirmModal?: IconType;
+    promptModal?: IconType;
+    fileUploader?: IconType;
+    infoNotification?: IconType;
+    successNotification?: IconType;
+    warningNotification?: IconType;
+    dangerNotification?: IconType;
+    invalid: IconType;
+    toggleChecked?: IconType;
 }
 
 declare function defineIcons(icons: DefinedIcons): Required<DefinedIcons>;
@@ -482,6 +499,8 @@ declare type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>;
 export { IconButtonRecipeProps }
 export { IconButtonRecipeProps as IconButtonRecipeProps_alias_1 }
 
+export declare type IconType = CarbonIconType | ElementType;
+
 declare function Input(props: InputProps): JSX_2.Element;
 export { Input }
 export { Input as Input_alias_1 }
@@ -758,6 +777,109 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+/**
+ * The info notification component.
+ * @param props - The component props.
+ * @returns The info notification component.
+ * @example
+ * ```tsx
+ * <Notification id="info:1" open>
+ *  <NotificationHeading>Info Notification</NotificationHeading>
+ * <NotificationDescription>
+ *  This is a description with a <a href="#">link</a> in the message.
+ * </NotificationDescription>
+ * </Notification>
+ * ```
+ */
+declare function Notification_2(props: PropsWithChildren<NotificationProps>): JSX_2.Element;
+export { Notification_2 as Notification }
+export { Notification_2 as Notification_alias_1 }
+
+declare interface NotificationBaseProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {
+    id: string;
+    onClose?: (e: MouseEvent_2<HTMLButtonElement>) => void;
+}
+export { NotificationBaseProps }
+export { NotificationBaseProps as NotificationBaseProps_alias_1 }
+
+/**
+ * Provides a notification center to the app.
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <Notifications>
+ *   <SomeFeatureSection />
+ * </Notifications>
+ *
+ * // Use the hook to show a notification.
+ * const notify = useNotifications()
+ *
+ * const handleClick = useCallback(() => {
+ *  notify({
+ *   palette: 'info',
+ *   heading: 'New feature!',
+ *   description: 'We have added a new feature to the app.',
+ * })
+ * }, [notify])
+ * ```
+ */
+declare function NotificationCenter(props: PropsWithChildren<NotificationsProviderProps>): JSX_2.Element;
+export { NotificationCenter }
+export { NotificationCenter as NotificationCenter_alias_1 }
+
+/**
+ * The NotificationDescription component is used to render the description of a notification.
+ * @param props - The anything a HTMLParagraphElement can accept.
+ */
+declare function NotificationDescription(props: NotificationDescriptionProps): JSX_2.Element;
+export { NotificationDescription }
+export { NotificationDescription as NotificationDescription_alias_1 }
+
+declare type NotificationDescriptionProps = BaseNotificationDescriptionProps & NotificationVariantProps;
+export { NotificationDescriptionProps }
+export { NotificationDescriptionProps as NotificationDescriptionProps_alias_1 }
+
+/**
+ * The NotificationHeading component is used to render the heading of a notification.
+ * @param props - The anything a HTMLParagraphElement can accept.
+ */
+declare function NotificationHeading(props: NotificationHeadingProps): JSX_2.Element;
+export { NotificationHeading }
+export { NotificationHeading as NotificationHeading_alias_1 }
+
+declare type NotificationHeadingProps = BaseNotificationHeadingProps & NotificationVariantProps;
+export { NotificationHeadingProps }
+export { NotificationHeadingProps as NotificationHeadingProps_alias_1 }
+
+declare type NotificationProps = NotificationBaseProps & NotificationVariantProps;
+export { NotificationProps }
+export { NotificationProps as NotificationProps_alias_1 }
+
+declare interface NotificationsProviderProps extends PortalProps {
+}
+export { NotificationsProviderProps }
+export { NotificationsProviderProps as NotificationsProviderProps_alias_1 }
+
+declare interface NotificationsValue {
+    notify: (options: NotifyOptions) => void;
+}
+export { NotificationsValue }
+export { NotificationsValue as NotificationsValue_alias_1 }
+
+/**
+ * This module provides a context and hook for notifications.
+ * @module
+ */
+declare interface NotifyOptions {
+    palette: 'info' | 'success' | 'warning' | 'danger';
+    heading: string;
+    id?: string;
+    description?: ReactNode;
+    onClose?: () => void;
+}
+export { NotifyOptions }
+export { NotifyOptions as NotifyOptions_alias_1 }
+
 export { Over }
 
 export { PointerActivationConstraint }
@@ -1219,6 +1341,23 @@ declare function useNavMenuContext(): NavMenuContextValue;
 export { useNavMenuContext }
 export { useNavMenuContext as useNavMenuContext_alias_1 }
 
+/**
+ * The hook to use the NotificationCenter.
+ * @returns The notify method to trigger a notification.
+ * @example
+ * ```tsx
+ * const {notify} = useNotificationCenter()
+ * notify({
+ *  palette: 'info',
+ *  heading: 'New feature',
+ *  description: 'We have added a new feature to the app.',
+ * })
+ * ```
+ */
+declare function useNotificationCenter(): NotificationsValue;
+export { useNotificationCenter }
+export { useNotificationCenter as useNotificationCenter_alias_1 }
+
 declare function usePromptModal(): PromptModalValue;
 export { usePromptModal }
 export { usePromptModal as usePromptModal_alias_1 }

package/build/legacy/{chunk-7BB66W4A.js → chunk-4EMJR2AY.js}

@@ -27,7 +27,7 @@ import {
 } from "./chunk-KESKDLX6.js";
 import {
   $cerberusIcons
-} from "./chunk-OLQQB53X.js";
+} from "./chunk-BEYPMC73.js";
 import {
   useModal
 } from "./chunk-TZNYJ3G7.js";
@@ -152,4 +152,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-7BB66W4A.js.map
+//# sourceMappingURL=chunk-4EMJR2AY.js.map

package/build/legacy/{chunk-OLQQB53X.js → chunk-BEYPMC73.js}

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-GIHAFJYX.js";
+} from "./chunk-GVNPFXKL.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -24,4 +24,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-OLQQB53X.js.map
+//# sourceMappingURL=chunk-BEYPMC73.js.map

package/build/legacy/{chunk-3RZUW5KH.js → chunk-DB2OA5PU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4CAT3FHV.js";
 import {
   Input
-} from "./chunk-DED42MIR.js";
+} from "./chunk-XB4ZRAH4.js";
 import {
   Label
 } from "./chunk-JJGZRBIR.js";
@@ -36,7 +36,7 @@ import {
 } from "./chunk-KESKDLX6.js";
 import {
   $cerberusIcons
-} from "./chunk-OLQQB53X.js";
+} from "./chunk-BEYPMC73.js";
 import {
   useModal
 } from "./chunk-TZNYJ3G7.js";
@@ -205,4 +205,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-3RZUW5KH.js.map
+//# sourceMappingURL=chunk-DB2OA5PU.js.map

package/build/legacy/{chunk-GIHAFJYX.js → chunk-GVNPFXKL.js}

@@ -1,14 +1,21 @@
 // src/config/cerbIcons.ts
 import {
   Checkmark,
+  CheckmarkFilled,
   CloudUpload,
+  ErrorFilled,
   Information,
+  InformationFilled,
   WarningFilled
 } from "@cerberus/icons";
 var defaultIcons = {
   confirmModal: Information,
-  fileUploader: CloudUpload,
   promptModal: Information,
+  fileUploader: CloudUpload,
+  infoNotification: InformationFilled,
+  successNotification: CheckmarkFilled,
+  warningNotification: WarningFilled,
+  dangerNotification: ErrorFilled,
   invalid: WarningFilled,
   toggleChecked: Checkmark
 };
@@ -16,4 +23,4 @@ var defaultIcons = {
 export {
   defaultIcons
 };
-//# sourceMappingURL=chunk-GIHAFJYX.js.map
+//# sourceMappingURL=chunk-GVNPFXKL.js.map

package/build/legacy/chunk-GVNPFXKL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  confirmModal?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAiBA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}

package/build/legacy/{chunk-ANXV7JDK.js → chunk-IL5ELPTT.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-OLQQB53X.js";
+} from "./chunk-BEYPMC73.js";
 
 // src/components/Toggle.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -55,4 +55,4 @@ function Toggle(props) {
 export {
   Toggle
 };
-//# sourceMappingURL=chunk-ANXV7JDK.js.map
+//# sourceMappingURL=chunk-IL5ELPTT.js.map

package/build/legacy/chunk-NWMNEJGU.js

@@ -0,0 +1,16 @@
+// src/components/NotificationHeading.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import {
+  notification
+} from "@cerberus-design/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function NotificationHeading(props) {
+  const { palette, ...nativeProps } = props;
+  const styles = notification({ palette });
+  return /* @__PURE__ */ jsx("p", { className: cx(nativeProps.className, styles.heading), ...nativeProps });
+}
+
+export {
+  NotificationHeading
+};
+//# sourceMappingURL=chunk-NWMNEJGU.js.map

package/build/legacy/chunk-NWMNEJGU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NotificationHeading.tsx"],"sourcesContent":["/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nimport { cx } from '@cerberus-design/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationHeadingProps\n  extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n  NotificationVariantProps\n\n/**\n * The NotificationHeading component is used to render the heading of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n  )\n}\n"],"mappings":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE,oBAAC,OAAE,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;","names":[]}

package/build/legacy/chunk-SINTHADQ.js

@@ -0,0 +1,22 @@
+// src/components/NotificationDescription.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import {
+  notification
+} from "@cerberus-design/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function NotificationDescription(props) {
+  const { palette, ...nativeProps } = props;
+  const styles = notification({ palette });
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cx(nativeProps.className, styles.description),
+      ...nativeProps
+    }
+  );
+}
+
+export {
+  NotificationDescription
+};
+//# sourceMappingURL=chunk-SINTHADQ.js.map

package/build/legacy/chunk-SINTHADQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NotificationDescription.tsx"],"sourcesContent":["/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nimport { cx } from '@cerberus-design/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationDescriptionProps\n  extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n  NotificationVariantProps\n\n/**\n * The NotificationDescription component is used to render the description of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p\n      className={cx(nativeProps.className, styles.description)}\n      {...nativeProps}\n    />\n  )\n}\n"],"mappings":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,wBAAwB,OAAqC;AAC3E,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,YAAY,WAAW,OAAO,WAAW;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/build/legacy/chunk-SPGBCV6A.js

@@ -0,0 +1,70 @@
+import {
+  IconButton
+} from "./chunk-SLHX5K6I.js";
+import {
+  trapFocus
+} from "./chunk-KESKDLX6.js";
+import {
+  $cerberusIcons
+} from "./chunk-BEYPMC73.js";
+
+// src/components/Notification.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import { hstack, vstack } from "@cerberus-design/styled-system/patterns";
+import {
+  notification
+} from "@cerberus-design/styled-system/recipes";
+import {
+  useRef
+} from "react";
+import { Close } from "@cerberus/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MatchNotificationIcon(props) {
+  const palette = props.palette || "info";
+  const key = `${palette}Notification`;
+  const Icon = $cerberusIcons[key];
+  return /* @__PURE__ */ jsx(Icon, {});
+}
+function Notification(props) {
+  const { children, palette, onClose, ...nativeProps } = props;
+  const ref = useRef(null);
+  const onKeyDown = trapFocus(ref);
+  const styles = notification({ palette });
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        hstack({
+          position: "relative",
+          gap: "4"
+        }),
+        styles.dialog
+      ),
+      onKeyDown,
+      ref,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(MatchNotificationIcon, { palette }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: vstack({
+              alignItems: "flex-start",
+              gap: "0",
+              py: "2"
+            }),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Close", onClick: onClose, value: props.id, children: /* @__PURE__ */ jsx(Close, {}) })
+      ]
+    }
+  );
+}
+
+export {
+  Notification
+};
+//# sourceMappingURL=chunk-SPGBCV6A.js.map

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

@@ -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 { 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

@@ -0,0 +1,99 @@
+import {
+  Notification
+} from "./chunk-SPGBCV6A.js";
+import {
+  NotificationDescription
+} from "./chunk-SINTHADQ.js";
+import {
+  NotificationHeading
+} from "./chunk-NWMNEJGU.js";
+import {
+  Portal
+} from "./chunk-4CAT3FHV.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+
+// src/context/notification-center.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { vstack } from "@cerberus-design/styled-system/patterns";
+import { cx } from "@cerberus-design/styled-system/css";
+import { notification } from "@cerberus-design/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NotificationsContext = createContext(null);
+function NotificationCenter(props) {
+  const [activeNotifications, setActiveNotifications] = useState([]);
+  const handleNotify = useCallback((options) => {
+    setActiveNotifications((prev) => {
+      const id = `${options.palette}:${prev.length + 1}`;
+      return [...prev, { ...options, id }];
+    });
+  }, []);
+  const handleClose = useCallback((e) => {
+    const target = e.currentTarget;
+    setActiveNotifications((prev) => {
+      const item = prev.find((option) => option.id === target.value);
+      if (item == null ? void 0 : item.onClose) item.onClose();
+      return prev.filter((option) => option.id !== target.value);
+    });
+  }, []);
+  const value = useMemo(
+    () => ({
+      notify: handleNotify
+    }),
+    [handleNotify]
+  );
+  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({
+            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 })
+            ]
+          },
+          option.id
+        ))
+      }
+    ) }) })
+  ] });
+}
+function useNotificationCenter() {
+  const context = useContext(NotificationsContext);
+  if (!context) {
+    throw new Error(
+      "useNotificationCenter must be used within a NotificationsProvider"
+    );
+  }
+  return context;
+}
+
+export {
+  NotificationCenter,
+  useNotificationCenter
+};
+//# sourceMappingURL=chunk-TAJBSUS7.js.map

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

@@ -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 { 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/legacy/{chunk-DCI4IKCI.js → chunk-X5JR5LSC.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
-} from "./chunk-OLQQB53X.js";
+} from "./chunk-BEYPMC73.js";
 
 // src/components/FileUploader.tsx
 import { cx } from "@cerberus-design/styled-system/css";
@@ -60,4 +60,4 @@ function FileUploader(props) {
 export {
   FileUploader
 };
-//# sourceMappingURL=chunk-DCI4IKCI.js.map
+//# sourceMappingURL=chunk-X5JR5LSC.js.map

package/build/legacy/{chunk-DED42MIR.js → chunk-XB4ZRAH4.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
-} from "./chunk-OLQQB53X.js";
+} from "./chunk-BEYPMC73.js";
 
 // src/components/Input.tsx
 import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-DED42MIR.js.map
+//# sourceMappingURL=chunk-XB4ZRAH4.js.map

package/build/legacy/components/FileUploader.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   FileUploader
-} from "../chunk-DCI4IKCI.js";
+} from "../chunk-X5JR5LSC.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-OLQQB53X.js";
-import "../chunk-GIHAFJYX.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
 export {
   FileUploader
 };

package/build/legacy/components/Input.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Input
-} from "../chunk-DED42MIR.js";
+} from "../chunk-XB4ZRAH4.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-OLQQB53X.js";
-import "../chunk-GIHAFJYX.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
 export {
   Input
 };

package/build/legacy/components/Notification.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  Notification
+} from "../chunk-SPGBCV6A.js";
+import "../chunk-SLHX5K6I.js";
+import "../chunk-KESKDLX6.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
+export {
+  Notification
+};
+//# sourceMappingURL=Notification.js.map

package/build/legacy/components/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/NotificationDescription.js

@@ -0,0 +1,7 @@
+import {
+  NotificationDescription
+} from "../chunk-SINTHADQ.js";
+export {
+  NotificationDescription
+};
+//# sourceMappingURL=NotificationDescription.js.map

package/build/legacy/components/NotificationDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/NotificationHeading.js

@@ -0,0 +1,7 @@
+import {
+  NotificationHeading
+} from "../chunk-NWMNEJGU.js";
+export {
+  NotificationHeading
+};
+//# sourceMappingURL=NotificationHeading.js.map

package/build/legacy/components/NotificationHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}