@novu/react 3.19.2-rc.dc9caee828 → 3.20.0-rc.569d407fd0

package/dist/esm/components/msteams-link-user/DefaultMsTeamsLinkUser.js

@@ -1,6 +1,5 @@
 // src/components/msteams-link-user/DefaultMsTeamsLinkUser.tsx
-import { useCallback } from "react";
-import { useNovuUI } from "../../context/NovuUIContext.js";
+import { useMemo } from "react";
 import { Mounter } from "../Mounter.js";
 import { jsx } from "react/jsx-runtime";
 var DefaultMsTeamsLinkUser = (props) => {
@@ -15,27 +14,19 @@ var DefaultMsTeamsLinkUser = (props) => {
     linkLabel,
     unlinkLabel
   } = props;
-  const { novuUI } = useNovuUI();
-  const mount = useCallback(
-    (element) => {
-      return novuUI.mountComponent({
-        name: "MsTeamsLinkUser",
-        props: {
-          integrationIdentifier,
-          connectionIdentifier,
-          context,
-          onLinkSuccess,
-          onLinkError,
-          onUnlinkSuccess,
-          onUnlinkError,
-          linkLabel,
-          unlinkLabel
-        },
-        element
-      });
-    },
+  const mountProps = useMemo(
+    () => ({
+      integrationIdentifier,
+      connectionIdentifier,
+      context,
+      onLinkSuccess,
+      onLinkError,
+      onUnlinkSuccess,
+      onUnlinkError,
+      linkLabel,
+      unlinkLabel
+    }),
     [
-      novuUI,
       integrationIdentifier,
       connectionIdentifier,
       context,
@@ -47,7 +38,7 @@ var DefaultMsTeamsLinkUser = (props) => {
       unlinkLabel
     ]
   );
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+  return /* @__PURE__ */ jsx(Mounter, { name: "MsTeamsLinkUser", props: mountProps });
 };
 export {
   DefaultMsTeamsLinkUser

package/dist/esm/components/msteams-link-user/DefaultMsTeamsLinkUser.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/msteams-link-user/DefaultMsTeamsLinkUser.tsx"],"sourcesContent":["import { MsTeamsLinkUserProps } from '@novu/js/ui';\nimport { useCallback } from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultMsTeamsLinkUserProps = Pick<\n  MsTeamsLinkUserProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'context'\n  | 'onLinkSuccess'\n  | 'onLinkError'\n  | 'onUnlinkSuccess'\n  | 'onUnlinkError'\n  | 'linkLabel'\n  | 'unlinkLabel'\n>;\n\nexport const DefaultMsTeamsLinkUser = (props: DefaultMsTeamsLinkUserProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    context,\n    onLinkSuccess,\n    onLinkError,\n    onUnlinkSuccess,\n    onUnlinkError,\n    linkLabel,\n    unlinkLabel,\n  } = props;\n  const { novuUI } = useNovuUI();\n\n  const mount = useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'MsTeamsLinkUser',\n        props: {\n          integrationIdentifier,\n          connectionIdentifier,\n          context,\n          onLinkSuccess,\n          onLinkError,\n          onUnlinkSuccess,\n          onUnlinkError,\n          linkLabel,\n          unlinkLabel,\n        },\n        element,\n      });\n    },\n    [\n      novuUI,\n      integrationIdentifier,\n      connectionIdentifier,\n      context,\n      onLinkSuccess,\n      onLinkError,\n      onUnlinkSuccess,\n      onUnlinkError,\n      linkLabel,\n      unlinkLabel,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n};\n"],"mappings":";AACA,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AA6Df;AA9CF,IAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,QAAM,QAAQ;AAAA,IACZ,CAAC,YAAyB;AACxB,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,oBAAC,WAAQ,OAAc;AAChC;","names":[]}
+{"version":3,"sources":["../../../../src/components/msteams-link-user/DefaultMsTeamsLinkUser.tsx"],"sourcesContent":["import { MsTeamsLinkUserProps } from '@novu/js/ui';\nimport { useMemo } from 'react';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultMsTeamsLinkUserProps = Pick<\n  MsTeamsLinkUserProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'context'\n  | 'onLinkSuccess'\n  | 'onLinkError'\n  | 'onUnlinkSuccess'\n  | 'onUnlinkError'\n  | 'linkLabel'\n  | 'unlinkLabel'\n>;\n\nexport const DefaultMsTeamsLinkUser = (props: DefaultMsTeamsLinkUserProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    context,\n    onLinkSuccess,\n    onLinkError,\n    onUnlinkSuccess,\n    onUnlinkError,\n    linkLabel,\n    unlinkLabel,\n  } = props;\n\n  const mountProps = useMemo(\n    () => ({\n      integrationIdentifier,\n      connectionIdentifier,\n      context,\n      onLinkSuccess,\n      onLinkError,\n      onUnlinkSuccess,\n      onUnlinkError,\n      linkLabel,\n      unlinkLabel,\n    }),\n    [\n      integrationIdentifier,\n      connectionIdentifier,\n      context,\n      onLinkSuccess,\n      onLinkError,\n      onUnlinkSuccess,\n      onUnlinkError,\n      linkLabel,\n      unlinkLabel,\n    ]\n  );\n\n  return <Mounter name=\"MsTeamsLinkUser\" props={mountProps} />;\n};\n"],"mappings":";AACA,SAAS,eAAe;AACxB,SAAS,eAAe;AAqDf;AAtCF,IAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,oBAAC,WAAQ,MAAK,mBAAkB,OAAO,YAAY;AAC5D;","names":[]}

package/dist/esm/components/msteams-link-user/MsTeamsLinkUser.js

@@ -2,10 +2,9 @@
 import React, { useMemo } from "react";
 import { useNovu } from "../../hooks/NovuProvider.js";
 import { NovuUI } from "../NovuUI.js";
-import { withRenderer } from "../Renderer.js";
 import { DefaultMsTeamsLinkUser } from "./DefaultMsTeamsLinkUser.js";
 import { jsx } from "react/jsx-runtime";
-var MsTeamsLinkUserInternal = withRenderer((props) => {
+var MsTeamsLinkUserInternal = (props) => {
   const { container, appearance, ...defaultProps } = props;
   const novu = useNovu();
   const options = useMemo(() => {
@@ -16,7 +15,7 @@ var MsTeamsLinkUserInternal = withRenderer((props) => {
     };
   }, [container, appearance, novu.options]);
   return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: /* @__PURE__ */ jsx(DefaultMsTeamsLinkUser, { ...defaultProps }) });
-});
+};
 MsTeamsLinkUserInternal.displayName = "MsTeamsLinkUserInternal";
 var MsTeamsLinkUser = React.memo((props) => {
   return /* @__PURE__ */ jsx(MsTeamsLinkUserInternal, { ...props });

package/dist/esm/components/msteams-link-user/MsTeamsLinkUser.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/msteams-link-user/MsTeamsLinkUser.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { withRenderer } from '../Renderer';\nimport { DefaultMsTeamsLinkUser, DefaultMsTeamsLinkUserProps } from './DefaultMsTeamsLinkUser';\n\nexport type MsTeamsLinkUserProps = DefaultMsTeamsLinkUserProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst MsTeamsLinkUserInternal = withRenderer<MsTeamsLinkUserProps>((props) => {\n  const { container, appearance, ...defaultProps } = props;\n  const novu = useNovu();\n\n  const options: NovuUIOptions = useMemo(() => {\n    return {\n      container,\n      appearance,\n      options: novu.options,\n    };\n  }, [container, appearance, novu.options]);\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultMsTeamsLinkUser {...defaultProps} />\n    </NovuUI>\n  );\n});\n\nMsTeamsLinkUserInternal.displayName = 'MsTeamsLinkUserInternal';\n\nexport const MsTeamsLinkUser = React.memo((props: MsTeamsLinkUserProps) => {\n  return <MsTeamsLinkUserInternal {...props} />;\n});\n\nMsTeamsLinkUser.displayName = 'MsTeamsLinkUser';\n"],"mappings":";AAAA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,8BAA2D;AAkB9D;AAdN,IAAM,0BAA0B,aAAmC,CAAC,UAAU;AAC5E,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,0BAAwB,GAAG,cAAc,GAC5C;AAEJ,CAAC;AAED,wBAAwB,cAAc;AAE/B,IAAM,kBAAkB,MAAM,KAAK,CAAC,UAAgC;AACzE,SAAO,oBAAC,2BAAyB,GAAG,OAAO;AAC7C,CAAC;AAED,gBAAgB,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/msteams-link-user/MsTeamsLinkUser.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { DefaultMsTeamsLinkUser, DefaultMsTeamsLinkUserProps } from './DefaultMsTeamsLinkUser';\n\nexport type MsTeamsLinkUserProps = DefaultMsTeamsLinkUserProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst MsTeamsLinkUserInternal = (props: MsTeamsLinkUserProps) => {\n  const { container, appearance, ...defaultProps } = props;\n  const novu = useNovu();\n\n  const options: NovuUIOptions = useMemo(() => {\n    return {\n      container,\n      appearance,\n      options: novu.options,\n    };\n  }, [container, appearance, novu.options]);\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultMsTeamsLinkUser {...defaultProps} />\n    </NovuUI>\n  );\n};\n\nMsTeamsLinkUserInternal.displayName = 'MsTeamsLinkUserInternal';\n\nexport const MsTeamsLinkUser = React.memo((props: MsTeamsLinkUserProps) => {\n  return <MsTeamsLinkUserInternal {...props} />;\n});\n\nMsTeamsLinkUser.displayName = 'MsTeamsLinkUser';\n"],"mappings":";AAAA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,8BAA2D;AAkB9D;AAdN,IAAM,0BAA0B,CAAC,UAAgC;AAC/D,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,0BAAwB,GAAG,cAAc,GAC5C;AAEJ;AAEA,wBAAwB,cAAc;AAE/B,IAAM,kBAAkB,MAAM,KAAK,CAAC,UAAgC;AACzE,SAAO,oBAAC,2BAAyB,GAAG,OAAO;AAC7C,CAAC;AAED,gBAAgB,cAAc;","names":[]}

package/dist/esm/components/notification-item/ClockIcon.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+/** The engine's clock icon, used when the host has no `appearance.icons.clock` override. */
+declare const ClockIcon: (props: React__default.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+export { ClockIcon };

package/dist/esm/components/notification-item/ClockIcon.js

@@ -0,0 +1,18 @@
+// src/components/notification-item/ClockIcon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ClockIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("title", { children: "clock" }),
+  /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_3188_15050)", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6 3V6L8 7M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) })
+] });
+export {
+  ClockIcon
+};
+//# sourceMappingURL=ClockIcon.js.map

package/dist/esm/components/notification-item/ClockIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/notification-item/ClockIcon.tsx"],"sourcesContent":["import React from 'react';\n\n/** The engine's clock icon, used when the host has no `appearance.icons.clock` override. */\nexport const ClockIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <title>clock</title>\n    <g clipPath=\"url(#clip0_3188_15050)\">\n      <path\n        d=\"M6 3V6L8 7M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </g>\n  </svg>\n);\n"],"mappings":";AAIE,SACE,KADF;AADK,IAAM,YAAY,CAAC,UACxB,qBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAA8B,GAAG,OAC1E;AAAA,sBAAC,WAAM,mBAAK;AAAA,EACZ,oBAAC,OAAE,UAAS,0BACV;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,QAAO;AAAA,MACP,eAAc;AAAA,MACd,gBAAe;AAAA;AAAA,EACjB,GACF;AAAA,GACF;","names":[]}

package/dist/esm/components/notification-item/Markdown.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MarkdownProps = {
+    children: string;
+    strongKey: string;
+    emKey: string;
+    context: Record<string, unknown>;
+};
+/** Renders the same inline markdown as the engine: `**strong**`, `*em*`, and both nested. */
+declare const Markdown: ({ children, strongKey, emKey, context }: MarkdownProps) => react_jsx_runtime.JSX.Element;
+
+export { Markdown };

package/dist/esm/components/notification-item/Markdown.js

@@ -0,0 +1,28 @@
+// src/components/notification-item/Markdown.tsx
+import { markdownStyles, parseMarkdownIntoTokens } from "@novu/js/ui-core";
+import { Fragment, useMemo } from "react";
+import { useStyle } from "../../hooks/internal/useEngineStores.js";
+import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
+var Markdown = ({ children, strongKey, emKey, context }) => {
+  const style = useStyle();
+  const tokens = useMemo(() => parseMarkdownIntoTokens(children), [children]);
+  const strongClassName = style({ key: strongKey, className: markdownStyles.strong.className, context });
+  const emClassName = style({ key: emKey, className: markdownStyles.em.className, context });
+  return /* @__PURE__ */ jsx(Fragment2, { children: tokens.map((token, index) => {
+    const key = `${index}-${token.type}`;
+    if (token.type === "boldItalic") {
+      return /* @__PURE__ */ jsx("strong", { className: strongClassName, children: /* @__PURE__ */ jsx("em", { className: emClassName, children: token.content }) }, key);
+    }
+    if (token.type === "bold") {
+      return /* @__PURE__ */ jsx("strong", { className: strongClassName, children: token.content }, key);
+    }
+    if (token.type === "italic") {
+      return /* @__PURE__ */ jsx("em", { className: emClassName, children: token.content }, key);
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: token.content }, key);
+  }) });
+};
+export {
+  Markdown
+};
+//# sourceMappingURL=Markdown.js.map

package/dist/esm/components/notification-item/Markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/notification-item/Markdown.tsx"],"sourcesContent":["import { markdownStyles, parseMarkdownIntoTokens } from '@novu/js/ui-core';\nimport React, { Fragment, useMemo } from 'react';\nimport { useStyle } from '../../hooks/internal/useEngineStores';\n\ntype MarkdownProps = {\n  children: string;\n  strongKey: string;\n  emKey: string;\n  context: Record<string, unknown>;\n};\n\n/** Renders the same inline markdown as the engine: `**strong**`, `*em*`, and both nested. */\nexport const Markdown = ({ children, strongKey, emKey, context }: MarkdownProps) => {\n  const style = useStyle();\n  const tokens = useMemo(() => parseMarkdownIntoTokens(children), [children]);\n  const strongClassName = style({ key: strongKey as never, className: markdownStyles.strong.className, context });\n  const emClassName = style({ key: emKey as never, className: markdownStyles.em.className, context });\n\n  return (\n    <>\n      {tokens.map((token, index) => {\n        const key = `${index}-${token.type}`;\n        if (token.type === 'boldItalic') {\n          return (\n            <strong key={key} className={strongClassName}>\n              <em className={emClassName}>{token.content}</em>\n            </strong>\n          );\n        }\n        if (token.type === 'bold') {\n          return (\n            <strong key={key} className={strongClassName}>\n              {token.content}\n            </strong>\n          );\n        }\n        if (token.type === 'italic') {\n          return (\n            <em key={key} className={emClassName}>\n              {token.content}\n            </em>\n          );\n        }\n\n        return <Fragment key={key}>{token.content}</Fragment>;\n      })}\n    </>\n  );\n};\n"],"mappings":";AAAA,SAAS,gBAAgB,+BAA+B;AACxD,SAAgB,UAAU,eAAe;AACzC,SAAS,gBAAgB;AAiBrB,qBAAAA,WAMU,WANV;AAPG,IAAM,WAAW,CAAC,EAAE,UAAU,WAAW,OAAO,QAAQ,MAAqB;AAClF,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,QAAQ,MAAM,wBAAwB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAC1E,QAAM,kBAAkB,MAAM,EAAE,KAAK,WAAoB,WAAW,eAAe,OAAO,WAAW,QAAQ,CAAC;AAC9G,QAAM,cAAc,MAAM,EAAE,KAAK,OAAgB,WAAW,eAAe,GAAG,WAAW,QAAQ,CAAC;AAElG,SACE,oBAAAA,WAAA,EACG,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,UAAM,MAAM,GAAG,KAAK,IAAI,MAAM,IAAI;AAClC,QAAI,MAAM,SAAS,cAAc;AAC/B,aACE,oBAAC,YAAiB,WAAW,iBAC3B,8BAAC,QAAG,WAAW,aAAc,gBAAM,SAAQ,KADhC,GAEb;AAAA,IAEJ;AACA,QAAI,MAAM,SAAS,QAAQ;AACzB,aACE,oBAAC,YAAiB,WAAW,iBAC1B,gBAAM,WADI,GAEb;AAAA,IAEJ;AACA,QAAI,MAAM,SAAS,UAAU;AAC3B,aACE,oBAAC,QAAa,WAAW,aACtB,gBAAM,WADA,GAET;AAAA,IAEJ;AAEA,WAAO,oBAAC,YAAoB,gBAAM,WAAZ,GAAoB;AAAA,EAC5C,CAAC,GACH;AAEJ;","names":["Fragment"]}

package/dist/esm/components/notification-item/NotificationItem.d.ts

@@ -0,0 +1,40 @@
+import { NotificationItemDotProps } from './parts/Dot.js';
+import { NotificationItemDateProps } from './parts/Date.js';
+import { NotificationItemSubjectProps, NotificationItemBodyProps } from './parts/Subject.js';
+import { NotificationItemContentProps, NotificationItemTextProps } from './parts/Content.js';
+import { NotificationItemAvatarProps } from './parts/Avatar.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Notification } from '@novu/js';
+import { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';
+import { ReactNode } from 'react';
+
+type NotificationItemProps = {
+    notification: Notification;
+    /** Your own arrangement of the parts. Without it, the built-in arrangement is rendered. */
+    children?: ReactNode;
+    className?: string;
+    onNotificationClick?: NotificationClickHandler;
+    onPrimaryActionClick?: NotificationActionClickHandler;
+    onSecondaryActionClick?: NotificationActionClickHandler;
+    renderAvatar?: (notification: Notification) => ReactNode;
+    renderSubject?: (notification: Notification) => ReactNode;
+    renderBody?: (notification: Notification) => ReactNode;
+    renderDefaultActions?: (notification: Notification) => ReactNode;
+    renderCustomActions?: (notification: Notification) => ReactNode;
+};
+declare const NotificationItem: {
+    (props: NotificationItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Avatar: ({ className }: NotificationItemAvatarProps) => react_jsx_runtime.JSX.Element;
+    Content: ({ className, children }: NotificationItemContentProps) => react_jsx_runtime.JSX.Element;
+    Text: ({ className, children }: NotificationItemTextProps) => react_jsx_runtime.JSX.Element;
+    Subject: ({ className, children }: NotificationItemSubjectProps) => react_jsx_runtime.JSX.Element | null;
+    Body: ({ className, children }: NotificationItemBodyProps) => react_jsx_runtime.JSX.Element;
+    DefaultActions: () => react_jsx_runtime.JSX.Element;
+    CustomActions: () => react_jsx_runtime.JSX.Element;
+    Date: ({ className, children }: NotificationItemDateProps) => react_jsx_runtime.JSX.Element;
+    Dot: ({ className }: NotificationItemDotProps) => react_jsx_runtime.JSX.Element;
+};
+
+export { NotificationItem, type NotificationItemProps };

package/dist/esm/components/notification-item/NotificationItem.js

@@ -0,0 +1,131 @@
+// src/components/notification-item/NotificationItem.tsx
+import { SeverityLevelEnum } from "@novu/js";
+import {
+  cn,
+  createNotificationItemController,
+  isInsideIsland,
+  notificationItemStyles,
+  SEVERITY_TO_BAR_KEYS,
+  SEVERITY_TO_NOTIFICATION_KEYS
+} from "@novu/js/ui-core";
+import { useMemo, useRef } from "react";
+import { useEngineStores, useStyle } from "../../hooks/internal/useEngineStores.js";
+import {
+  NotificationItemProvider,
+  useInheritedNotificationHandlers
+} from "./context.js";
+import { CustomActions, DefaultActions } from "./parts/Actions.js";
+import { Avatar } from "./parts/Avatar.js";
+import { Content, Text } from "./parts/Content.js";
+import { Date } from "./parts/Date.js";
+import { Dot } from "./parts/Dot.js";
+import { Body, Subject } from "./parts/Subject.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DefaultArrangement = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Avatar, {}),
+  /* @__PURE__ */ jsxs(Content, { children: [
+    /* @__PURE__ */ jsxs(Text, { children: [
+      /* @__PURE__ */ jsx(Subject, {}),
+      /* @__PURE__ */ jsx(Body, {})
+    ] }),
+    /* @__PURE__ */ jsx(DefaultActions, {}),
+    /* @__PURE__ */ jsx(CustomActions, {}),
+    /* @__PURE__ */ jsx(Date, {})
+  ] }),
+  /* @__PURE__ */ jsx(Dot, {})
+] });
+var NotificationItemRoot = (props) => {
+  const {
+    notification,
+    children,
+    className,
+    onNotificationClick,
+    onPrimaryActionClick,
+    onSecondaryActionClick,
+    renderAvatar,
+    renderSubject,
+    renderBody,
+    renderDefaultActions,
+    renderCustomActions
+  } = props;
+  const style = useStyle();
+  const { inbox } = useEngineStores();
+  const inherited = useInheritedNotificationHandlers();
+  const handlers = useMemo(
+    () => ({
+      onNotificationClick: onNotificationClick ?? inherited.onNotificationClick,
+      onPrimaryActionClick: onPrimaryActionClick ?? inherited.onPrimaryActionClick,
+      onSecondaryActionClick: onSecondaryActionClick ?? inherited.onSecondaryActionClick
+    }),
+    [onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, inherited]
+  );
+  const latest = useRef({ notification, handlers });
+  latest.current = { notification, handlers };
+  const controller = useMemo(
+    () => createNotificationItemController({
+      notification: () => latest.current.notification,
+      handlers: () => latest.current.handlers,
+      navigate: inbox.navigate
+    }),
+    [inbox]
+  );
+  const contextValue = useMemo(
+    () => ({
+      notification,
+      handlers,
+      renderers: { renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions }
+    }),
+    [notification, handlers, renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions]
+  );
+  const severity = notification.severity ?? SeverityLevelEnum.NONE;
+  return /* @__PURE__ */ jsx(NotificationItemProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      className: style({
+        key: SEVERITY_TO_NOTIFICATION_KEYS[severity],
+        className: cn(
+          notificationItemStyles.root.className,
+          notificationItemStyles.root.severity[severity],
+          { [notificationItemStyles.root.clickable]: controller.isClickable() },
+          className
+        ),
+        context: { notification }
+      }),
+      onClick: (event) => {
+        if (!isInsideIsland(event.target)) {
+          event.stopPropagation();
+        }
+        void controller.handleClick(event.nativeEvent);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: style({
+              key: SEVERITY_TO_BAR_KEYS[severity],
+              className: cn(notificationItemStyles.bar.className, notificationItemStyles.bar.severity[severity]),
+              context: { notification }
+            })
+          }
+        ),
+        children ?? /* @__PURE__ */ jsx(DefaultArrangement, {})
+      ]
+    }
+  ) });
+};
+NotificationItemRoot.displayName = "NotificationItem";
+var NotificationItem = Object.assign(NotificationItemRoot, {
+  Avatar,
+  Content,
+  Text,
+  Subject,
+  Body,
+  DefaultActions,
+  CustomActions,
+  Date,
+  Dot
+});
+export {
+  NotificationItem
+};
+//# sourceMappingURL=NotificationItem.js.map

package/dist/esm/components/notification-item/NotificationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/notification-item/NotificationItem.tsx"],"sourcesContent":["import type { Notification } from '@novu/js';\nimport { SeverityLevelEnum } from '@novu/js';\nimport type { NotificationActionClickHandler, NotificationClickHandler } from '@novu/js/ui';\nimport {\n  cn,\n  createNotificationItemController,\n  isInsideIsland,\n  notificationItemStyles,\n  SEVERITY_TO_BAR_KEYS,\n  SEVERITY_TO_NOTIFICATION_KEYS,\n} from '@novu/js/ui-core';\nimport React, { type ReactNode, useMemo, useRef } from 'react';\nimport { useEngineStores, useStyle } from '../../hooks/internal/useEngineStores';\nimport {\n  type NotificationItemContextValue,\n  NotificationItemProvider,\n  useInheritedNotificationHandlers,\n} from './context';\nimport { CustomActions, DefaultActions } from './parts/Actions';\nimport { Avatar } from './parts/Avatar';\nimport { Content, Text } from './parts/Content';\nimport { Date } from './parts/Date';\nimport { Dot } from './parts/Dot';\nimport { Body, Subject } from './parts/Subject';\n\nexport type NotificationItemProps = {\n  notification: Notification;\n  /** Your own arrangement of the parts. Without it, the built-in arrangement is rendered. */\n  children?: ReactNode;\n  className?: string;\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n  renderAvatar?: (notification: Notification) => ReactNode;\n  renderSubject?: (notification: Notification) => ReactNode;\n  renderBody?: (notification: Notification) => ReactNode;\n  renderDefaultActions?: (notification: Notification) => ReactNode;\n  renderCustomActions?: (notification: Notification) => ReactNode;\n};\n\nconst DefaultArrangement = () => (\n  <>\n    <Avatar />\n    <Content>\n      <Text>\n        <Subject />\n        <Body />\n      </Text>\n      <DefaultActions />\n      <CustomActions />\n      <Date />\n    </Content>\n    <Dot />\n  </>\n);\n\n/**\n * The built-in notification item, rendered natively in React.\n *\n * `<NotificationItem notification={n} />` is the default look. Pass children to arrange the parts yourself:\n * `NotificationItem.Avatar`, `Content`, `Text`, `Subject`, `Body`, `DefaultActions`, `CustomActions`, `Date`\n * and `Dot`. The root carries the item's behaviour in both modes: severity styling, the hover group, and the\n * click that marks the notification read and follows its redirect. Handlers fall back to the ones given to\n * `Inbox`, `Notifications` or `InboxContent`.\n */\nconst NotificationItemRoot = (props: NotificationItemProps) => {\n  const {\n    notification,\n    children,\n    className,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    renderAvatar,\n    renderSubject,\n    renderBody,\n    renderDefaultActions,\n    renderCustomActions,\n  } = props;\n  const style = useStyle();\n  const { inbox } = useEngineStores();\n  const inherited = useInheritedNotificationHandlers();\n\n  const handlers = useMemo(\n    () => ({\n      onNotificationClick: onNotificationClick ?? inherited.onNotificationClick,\n      onPrimaryActionClick: onPrimaryActionClick ?? inherited.onPrimaryActionClick,\n      onSecondaryActionClick: onSecondaryActionClick ?? inherited.onSecondaryActionClick,\n    }),\n    [onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, inherited]\n  );\n\n  const latest = useRef({ notification, handlers });\n  latest.current = { notification, handlers };\n  const controller = useMemo(\n    () =>\n      createNotificationItemController({\n        notification: () => latest.current.notification,\n        handlers: () => latest.current.handlers,\n        navigate: inbox.navigate,\n      }),\n    [inbox]\n  );\n\n  const contextValue = useMemo<NotificationItemContextValue>(\n    () => ({\n      notification,\n      handlers,\n      renderers: { renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions },\n    }),\n    [notification, handlers, renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions]\n  );\n\n  const severity = notification.severity ?? SeverityLevelEnum.NONE;\n\n  return (\n    <NotificationItemProvider value={contextValue}>\n      <a\n        className={style({\n          key: SEVERITY_TO_NOTIFICATION_KEYS[severity],\n          className: cn(\n            notificationItemStyles.root.className,\n            notificationItemStyles.root.severity[severity],\n            { [notificationItemStyles.root.clickable]: controller.isClickable() },\n            className\n          ),\n          context: { notification },\n        })}\n        onClick={(event) => {\n          if (!isInsideIsland(event.target)) {\n            event.stopPropagation();\n          }\n          void controller.handleClick(event.nativeEvent);\n        }}\n      >\n        <div\n          className={style({\n            key: SEVERITY_TO_BAR_KEYS[severity],\n            className: cn(notificationItemStyles.bar.className, notificationItemStyles.bar.severity[severity]),\n            context: { notification },\n          })}\n        />\n        {children ?? <DefaultArrangement />}\n      </a>\n    </NotificationItemProvider>\n  );\n};\n\nNotificationItemRoot.displayName = 'NotificationItem';\n\nexport const NotificationItem = Object.assign(NotificationItemRoot, {\n  Avatar,\n  Content,\n  Text,\n  Subject,\n  Body,\n  DefaultActions,\n  CustomActions,\n  Date,\n  Dot,\n});\n"],"mappings":"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","names":[]}

package/dist/esm/components/notification-item/context.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { Notification } from '@novu/js';
+import { NotificationItemHandlers } from '@novu/js/ui-core';
+
+type NotificationItemRenderers = {
+    renderAvatar?: (notification: Notification) => ReactNode;
+    renderSubject?: (notification: Notification) => ReactNode;
+    renderBody?: (notification: Notification) => ReactNode;
+    renderDefaultActions?: (notification: Notification) => ReactNode;
+    renderCustomActions?: (notification: Notification) => ReactNode;
+};
+type NotificationItemContextValue = {
+    notification: Notification;
+    handlers: NotificationItemHandlers;
+    renderers: NotificationItemRenderers;
+};
+declare const NotificationItemProvider: React.Provider<NotificationItemContextValue | undefined>;
+declare const useNotificationItem: (part: string) => NotificationItemContextValue;
+declare const NotificationHandlersProvider: React.Provider<NotificationItemHandlers>;
+declare const useInheritedNotificationHandlers: () => NotificationItemHandlers;
+
+export { NotificationHandlersProvider, type NotificationItemContextValue, NotificationItemProvider, type NotificationItemRenderers, useInheritedNotificationHandlers, useNotificationItem };

package/dist/esm/components/notification-item/context.js

@@ -0,0 +1,21 @@
+// src/components/notification-item/context.tsx
+import { createContext, useContext } from "react";
+var NotificationItemContext = createContext(void 0);
+var NotificationItemProvider = NotificationItemContext.Provider;
+var useNotificationItem = (part) => {
+  const context = useContext(NotificationItemContext);
+  if (!context) {
+    throw new Error(`<NotificationItem.${part} /> must be rendered inside <NotificationItem />`);
+  }
+  return context;
+};
+var NotificationHandlersContext = createContext({});
+var NotificationHandlersProvider = NotificationHandlersContext.Provider;
+var useInheritedNotificationHandlers = () => useContext(NotificationHandlersContext);
+export {
+  NotificationHandlersProvider,
+  NotificationItemProvider,
+  useInheritedNotificationHandlers,
+  useNotificationItem
+};
+//# sourceMappingURL=context.js.map

package/dist/esm/components/notification-item/context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/notification-item/context.tsx"],"sourcesContent":["import type { Notification } from '@novu/js';\nimport type { NotificationItemHandlers } from '@novu/js/ui-core';\nimport { createContext, type ReactNode, useContext } from 'react';\n\nexport type NotificationItemRenderers = {\n  renderAvatar?: (notification: Notification) => ReactNode;\n  renderSubject?: (notification: Notification) => ReactNode;\n  renderBody?: (notification: Notification) => ReactNode;\n  renderDefaultActions?: (notification: Notification) => ReactNode;\n  renderCustomActions?: (notification: Notification) => ReactNode;\n};\n\nexport type NotificationItemContextValue = {\n  notification: Notification;\n  handlers: NotificationItemHandlers;\n  renderers: NotificationItemRenderers;\n};\n\nconst NotificationItemContext = createContext<NotificationItemContextValue | undefined>(undefined);\n\nexport const NotificationItemProvider = NotificationItemContext.Provider;\n\nexport const useNotificationItem = (part: string): NotificationItemContextValue => {\n  const context = useContext(NotificationItemContext);\n  if (!context) {\n    throw new Error(`<NotificationItem.${part} /> must be rendered inside <NotificationItem />`);\n  }\n\n  return context;\n};\n\n/**\n * The handlers given to `Inbox`, `Notifications` or `InboxContent`. Items rendered from their `renderNotification`\n * fall back to these when they get no handlers of their own.\n */\nconst NotificationHandlersContext = createContext<NotificationItemHandlers>({});\n\nexport const NotificationHandlersProvider = NotificationHandlersContext.Provider;\n\nexport const useInheritedNotificationHandlers = () => useContext(NotificationHandlersContext);\n"],"mappings":";AAEA,SAAS,eAA+B,kBAAkB;AAgB1D,IAAM,0BAA0B,cAAwD,MAAS;AAE1F,IAAM,2BAA2B,wBAAwB;AAEzD,IAAM,sBAAsB,CAAC,SAA+C;AACjF,QAAM,UAAU,WAAW,uBAAuB;AAClD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qBAAqB,IAAI,kDAAkD;AAAA,EAC7F;AAEA,SAAO;AACT;AAMA,IAAM,8BAA8B,cAAwC,CAAC,CAAC;AAEvE,IAAM,+BAA+B,4BAA4B;AAEjE,IAAM,mCAAmC,MAAM,WAAW,2BAA2B;","names":[]}

package/dist/esm/components/notification-item/parts/Actions.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * The read, archive and snooze controls. An island: the engine renders it into this block, so the dropdowns,
+ * tooltips and pickers exist once. Clicks inside it never reach the item's own click handler.
+ */
+declare const DefaultActions: () => react_jsx_runtime.JSX.Element;
+/** The primary and secondary action buttons. An island, like the default actions. */
+declare const CustomActions: () => react_jsx_runtime.JSX.Element;
+
+export { CustomActions, DefaultActions };

package/dist/esm/components/notification-item/parts/Actions.js

@@ -0,0 +1,30 @@
+// src/components/notification-item/parts/Actions.tsx
+import { useMemo } from "react";
+import { Mounter } from "../../Mounter.js";
+import { useNotificationItem } from "../context.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+var DefaultActions = () => {
+  const { notification, renderers } = useNotificationItem("DefaultActions");
+  const mountProps = useMemo(() => ({ notification }), [notification]);
+  if (renderers.renderDefaultActions) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderers.renderDefaultActions(notification) });
+  }
+  return /* @__PURE__ */ jsx(Mounter, { name: "NotificationDefaultActions", props: mountProps, bare: true });
+};
+var CustomActions = () => {
+  const { notification, handlers, renderers } = useNotificationItem("CustomActions");
+  const { onPrimaryActionClick, onSecondaryActionClick } = handlers;
+  const mountProps = useMemo(
+    () => ({ notification, onPrimaryActionClick, onSecondaryActionClick }),
+    [notification, onPrimaryActionClick, onSecondaryActionClick]
+  );
+  if (renderers.renderCustomActions) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderers.renderCustomActions(notification) });
+  }
+  return /* @__PURE__ */ jsx(Mounter, { name: "NotificationCustomActions", props: mountProps, bare: true });
+};
+export {
+  CustomActions,
+  DefaultActions
+};
+//# sourceMappingURL=Actions.js.map

package/dist/esm/components/notification-item/parts/Actions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Actions.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Mounter } from '../../Mounter';\nimport { useNotificationItem } from '../context';\n\n/**\n * The read, archive and snooze controls. An island: the engine renders it into this block, so the dropdowns,\n * tooltips and pickers exist once. Clicks inside it never reach the item's own click handler.\n */\nexport const DefaultActions = () => {\n  const { notification, renderers } = useNotificationItem('DefaultActions');\n  const mountProps = useMemo(() => ({ notification }), [notification]);\n\n  if (renderers.renderDefaultActions) {\n    return <>{renderers.renderDefaultActions(notification)}</>;\n  }\n\n  return <Mounter name=\"NotificationDefaultActions\" props={mountProps} bare />;\n};\n\n/** The primary and secondary action buttons. An island, like the default actions. */\nexport const CustomActions = () => {\n  const { notification, handlers, renderers } = useNotificationItem('CustomActions');\n  const { onPrimaryActionClick, onSecondaryActionClick } = handlers;\n  const mountProps = useMemo(\n    () => ({ notification, onPrimaryActionClick, onSecondaryActionClick }),\n    [notification, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  if (renderers.renderCustomActions) {\n    return <>{renderers.renderCustomActions(notification)}</>;\n  }\n\n  return <Mounter name=\"NotificationCustomActions\" props={mountProps} bare />;\n};\n"],"mappings":";AAAA,SAAgB,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,2BAA2B;AAWzB;AALJ,IAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,cAAc,UAAU,IAAI,oBAAoB,gBAAgB;AACxE,QAAM,aAAa,QAAQ,OAAO,EAAE,aAAa,IAAI,CAAC,YAAY,CAAC;AAEnE,MAAI,UAAU,sBAAsB;AAClC,WAAO,gCAAG,oBAAU,qBAAqB,YAAY,GAAE;AAAA,EACzD;AAEA,SAAO,oBAAC,WAAQ,MAAK,8BAA6B,OAAO,YAAY,MAAI,MAAC;AAC5E;AAGO,IAAM,gBAAgB,MAAM;AACjC,QAAM,EAAE,cAAc,UAAU,UAAU,IAAI,oBAAoB,eAAe;AACjF,QAAM,EAAE,sBAAsB,uBAAuB,IAAI;AACzD,QAAM,aAAa;AAAA,IACjB,OAAO,EAAE,cAAc,sBAAsB,uBAAuB;AAAA,IACpE,CAAC,cAAc,sBAAsB,sBAAsB;AAAA,EAC7D;AAEA,MAAI,UAAU,qBAAqB;AACjC,WAAO,gCAAG,oBAAU,oBAAoB,YAAY,GAAE;AAAA,EACxD;AAEA,SAAO,oBAAC,WAAQ,MAAK,6BAA4B,OAAO,YAAY,MAAI,MAAC;AAC3E;","names":[]}

package/dist/esm/components/notification-item/parts/Avatar.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type NotificationItemAvatarProps = {
+    className?: string;
+};
+declare const Avatar: ({ className }: NotificationItemAvatarProps) => react_jsx_runtime.JSX.Element;
+
+export { Avatar, type NotificationItemAvatarProps };

package/dist/esm/components/notification-item/parts/Avatar.js

@@ -0,0 +1,40 @@
+// src/components/notification-item/parts/Avatar.tsx
+import { notificationItemStyles } from "@novu/js/ui-core";
+import { useStyle } from "../../../hooks/internal/useEngineStores.js";
+import { useNotificationItem } from "../context.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+var Avatar = ({ className }) => {
+  const { notification, renderers } = useNotificationItem("Avatar");
+  const style = useStyle();
+  if (renderers.renderAvatar) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderers.renderAvatar(notification) });
+  }
+  if (!notification.avatar) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: style({
+          key: notificationItemStyles.avatarFallback.key,
+          className: [notificationItemStyles.avatarFallback.className, className].filter(Boolean).join(" "),
+          context: { notification }
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      alt: "",
+      className: style({
+        key: notificationItemStyles.avatar.key,
+        className: [notificationItemStyles.avatar.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      src: notification.avatar
+    }
+  );
+};
+export {
+  Avatar
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/esm/components/notification-item/parts/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Avatar.tsx"],"sourcesContent":["import { notificationItemStyles } from '@novu/js/ui-core';\nimport React from 'react';\nimport { useStyle } from '../../../hooks/internal/useEngineStores';\nimport { useNotificationItem } from '../context';\n\nexport type NotificationItemAvatarProps = { className?: string };\n\nexport const Avatar = ({ className }: NotificationItemAvatarProps) => {\n  const { notification, renderers } = useNotificationItem('Avatar');\n  const style = useStyle();\n\n  if (renderers.renderAvatar) {\n    return <>{renderers.renderAvatar(notification)}</>;\n  }\n\n  if (!notification.avatar) {\n    return (\n      <div\n        className={style({\n          key: notificationItemStyles.avatarFallback.key,\n          className: [notificationItemStyles.avatarFallback.className, className].filter(Boolean).join(' '),\n          context: { notification },\n        })}\n      />\n    );\n  }\n\n  return (\n    <img\n      alt=\"\"\n      className={style({\n        key: notificationItemStyles.avatar.key,\n        className: [notificationItemStyles.avatar.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n      src={notification.avatar}\n    />\n  );\n};\n"],"mappings":";AAAA,SAAS,8BAA8B;AAEvC,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AASzB;AALJ,IAAM,SAAS,CAAC,EAAE,UAAU,MAAmC;AACpE,QAAM,EAAE,cAAc,UAAU,IAAI,oBAAoB,QAAQ;AAChE,QAAM,QAAQ,SAAS;AAEvB,MAAI,UAAU,cAAc;AAC1B,WAAO,gCAAG,oBAAU,aAAa,YAAY,GAAE;AAAA,EACjD;AAEA,MAAI,CAAC,aAAa,QAAQ;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,MAAM;AAAA,UACf,KAAK,uBAAuB,eAAe;AAAA,UAC3C,WAAW,CAAC,uBAAuB,eAAe,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,UAChG,SAAS,EAAE,aAAa;AAAA,QAC1B,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,WAAW,MAAM;AAAA,QACf,KAAK,uBAAuB,OAAO;AAAA,QACnC,WAAW,CAAC,uBAAuB,OAAO,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACxF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MACD,KAAK,aAAa;AAAA;AAAA,EACpB;AAEJ;","names":[]}

package/dist/esm/components/notification-item/parts/Content.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type NotificationItemContentProps = {
+    className?: string;
+    children?: ReactNode;
+};
+/** The column next to the avatar that holds the text, the actions and the date. */
+declare const Content: ({ className, children }: NotificationItemContentProps) => react_jsx_runtime.JSX.Element;
+type NotificationItemTextProps = {
+    className?: string;
+    children?: ReactNode;
+};
+/** Groups the subject and the body. */
+declare const Text: ({ className, children }: NotificationItemTextProps) => react_jsx_runtime.JSX.Element;
+
+export { Content, type NotificationItemContentProps, type NotificationItemTextProps, Text };

package/dist/esm/components/notification-item/parts/Content.js

@@ -0,0 +1,40 @@
+// src/components/notification-item/parts/Content.tsx
+import { notificationItemStyles } from "@novu/js/ui-core";
+import { useStyle } from "../../../hooks/internal/useEngineStores.js";
+import { useNotificationItem } from "../context.js";
+import { jsx } from "react/jsx-runtime";
+var Content = ({ className, children }) => {
+  const { notification } = useNotificationItem("Content");
+  const style = useStyle();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: style({
+        key: notificationItemStyles.content.key,
+        className: [notificationItemStyles.content.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      children
+    }
+  );
+};
+var Text = ({ className, children }) => {
+  const { notification } = useNotificationItem("Text");
+  const style = useStyle();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: style({
+        key: notificationItemStyles.textContainer.key,
+        className: [notificationItemStyles.textContainer.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      children
+    }
+  );
+};
+export {
+  Content,
+  Text
+};
+//# sourceMappingURL=Content.js.map

package/dist/esm/components/notification-item/parts/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Content.tsx"],"sourcesContent":["import { notificationItemStyles } from '@novu/js/ui-core';\nimport React, { type ReactNode } from 'react';\nimport { useStyle } from '../../../hooks/internal/useEngineStores';\nimport { useNotificationItem } from '../context';\n\nexport type NotificationItemContentProps = { className?: string; children?: ReactNode };\n\n/** The column next to the avatar that holds the text, the actions and the date. */\nexport const Content = ({ className, children }: NotificationItemContentProps) => {\n  const { notification } = useNotificationItem('Content');\n  const style = useStyle();\n\n  return (\n    <div\n      className={style({\n        key: notificationItemStyles.content.key,\n        className: [notificationItemStyles.content.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport type NotificationItemTextProps = { className?: string; children?: ReactNode };\n\n/** Groups the subject and the body. */\nexport const Text = ({ className, children }: NotificationItemTextProps) => {\n  const { notification } = useNotificationItem('Text');\n  const style = useStyle();\n\n  return (\n    <div\n      className={style({\n        key: notificationItemStyles.textContainer.key,\n        className: [notificationItemStyles.textContainer.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";AAAA,SAAS,8BAA8B;AAEvC,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AAUhC;AALG,IAAM,UAAU,CAAC,EAAE,WAAW,SAAS,MAAoC;AAChF,QAAM,EAAE,aAAa,IAAI,oBAAoB,SAAS;AACtD,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,uBAAuB,QAAQ;AAAA,QACpC,WAAW,CAAC,uBAAuB,QAAQ,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACzF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;AAKO,IAAM,OAAO,CAAC,EAAE,WAAW,SAAS,MAAiC;AAC1E,QAAM,EAAE,aAAa,IAAI,oBAAoB,MAAM;AACnD,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,uBAAuB,cAAc;AAAA,QAC1C,WAAW,CAAC,uBAAuB,cAAc,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAC/F,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/esm/components/notification-item/parts/Date.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type NotificationItemDateProps = {
+    className?: string;
+    children?: ReactNode;
+};
+/** When the notification arrived, when it was delivered again, or until when it is snoozed. */
+declare const Date: ({ className, children }: NotificationItemDateProps) => react_jsx_runtime.JSX.Element;
+
+export { Date, type NotificationItemDateProps };