@tnf-dev/mui 1.0.1-5

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 (38) hide show
  1. package/README.md +28 -0
  2. package/dist/cjs/components/inbox/bell.cjs +2 -0
  3. package/dist/cjs/components/inbox/bell.d.cts +6 -0
  4. package/dist/cjs/components/inbox/empty.cjs +2 -0
  5. package/dist/cjs/components/inbox/empty.d.cts +6 -0
  6. package/dist/cjs/components/inbox/index.cjs +2 -0
  7. package/dist/cjs/components/inbox/index.d.cts +8 -0
  8. package/dist/cjs/components/inbox/loader.cjs +2 -0
  9. package/dist/cjs/components/inbox/loader.d.cts +6 -0
  10. package/dist/cjs/components/inbox/notification-header.cjs +2 -0
  11. package/dist/cjs/components/inbox/notification-header.d.cts +6 -0
  12. package/dist/cjs/components/inbox/notification-item.cjs +2 -0
  13. package/dist/cjs/components/inbox/notification-item.d.cts +6 -0
  14. package/dist/cjs/components/inbox/notification-popover.cjs +2 -0
  15. package/dist/cjs/components/inbox/notification-popover.d.cts +6 -0
  16. package/dist/cjs/components/index.cjs +2 -0
  17. package/dist/cjs/components/index.d.cts +3 -0
  18. package/dist/cjs/index.cjs +2 -0
  19. package/dist/cjs/index.d.cts +3 -0
  20. package/dist/esm/components/inbox/bell.d.ts +6 -0
  21. package/dist/esm/components/inbox/bell.js +2 -0
  22. package/dist/esm/components/inbox/empty.d.ts +6 -0
  23. package/dist/esm/components/inbox/empty.js +2 -0
  24. package/dist/esm/components/inbox/index.d.ts +8 -0
  25. package/dist/esm/components/inbox/index.js +2 -0
  26. package/dist/esm/components/inbox/loader.d.ts +6 -0
  27. package/dist/esm/components/inbox/loader.js +2 -0
  28. package/dist/esm/components/inbox/notification-header.d.ts +6 -0
  29. package/dist/esm/components/inbox/notification-header.js +2 -0
  30. package/dist/esm/components/inbox/notification-item.d.ts +6 -0
  31. package/dist/esm/components/inbox/notification-item.js +2 -0
  32. package/dist/esm/components/inbox/notification-popover.d.ts +6 -0
  33. package/dist/esm/components/inbox/notification-popover.js +2 -0
  34. package/dist/esm/components/index.d.ts +3 -0
  35. package/dist/esm/components/index.js +2 -0
  36. package/dist/esm/index.d.ts +3 -0
  37. package/dist/esm/index.js +2 -0
  38. package/package.json +89 -0
package/README.md ADDED
@@ -0,0 +1,28 @@
1
+ # @tnf-dev/mui
2
+
3
+ This package contains the Material UI components used in the Teknify project.
4
+
5
+ ## Installation
6
+
7
+ To install the package, run the following command:
8
+
9
+ ```bash
10
+ npm install @tnf-dev/mui
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ To use the components from this package, you can import them into your React application as follows:
16
+
17
+ ```tsx
18
+ import { TeknifyMuiInbox, TeknifyProvider } from '@tnf-dev/mui';
19
+
20
+ // Example usage in a component
21
+ const MyComponent = () => {
22
+ return (
23
+ <TeknifyProvider applicationId='<YOUR_APPLICATION_ID>' subscriberId='<USER_SUBSCRIBER_ID>'>
24
+ <TeknifyMuiInbox />
25
+ </TeknifyProvider>
26
+ );
27
+ };
28
+ ```
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ "use strict";var s=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var c=(t,o)=>{for(var r in o)s(t,r,{get:o[r],enumerable:!0})},u=(t,o,r,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of f(o))!m.call(t,e)&&e!==r&&s(t,e,{get:()=>o[e],enumerable:!(i=a(o,e))||i.enumerable});return t};var B=t=>u(s({},"__esModule",{value:!0}),t);var C={};c(C,{default:()=>g});module.exports=B(C);var l=require("@mui/icons-material"),p=require("@mui/material"),n=require("react/jsx-runtime"),d=({onClick:t,counts:o,ref:r,active:i})=>(0,n.jsx)(p.Badge,{badgeContent:o,color:"error",slotProps:{badge(){return{sx(){return{top:5}}}}},children:(0,n.jsx)(p.IconButton,{onClick:t,ref:r,component:"button",children:i?(0,n.jsx)(l.Notifications,{}):(0,n.jsx)(l.NotificationsOutlined,{})})}),g=d;
@@ -0,0 +1,6 @@
1
+ import { BellProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const Bell: FC<BellProps>;
5
+
6
+ export { Bell as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ "use strict";var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var l=(o,t)=>{for(var r in t)n(o,r,{get:t[r],enumerable:!0})},E=(o,t,r,y)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of f(t))!s.call(o,p)&&p!==r&&n(o,p,{get:()=>t[p],enumerable:!(y=a(t,p))||y.enumerable});return o};var g=o=>E(n({},"__esModule",{value:!0}),o);var T={};l(T,{default:()=>C});module.exports=g(T);var m=require("@mui/material"),c=require("@tnf-dev/react"),i=require("react"),e=require("react/jsx-runtime"),k=()=>{let{locale:o}=(0,i.use)(c.TeknifyContext);return(0,e.jsx)(m.Stack,{p:2,children:(0,e.jsx)(m.Typography,{textAlign:"center",children:o.components.Empty.noNotifications})})},C=k;
@@ -0,0 +1,6 @@
1
+ import { EmptyProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const Empty: FC<EmptyProps>;
5
+
6
+ export { Empty as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ "use strict";var g=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var L=(o,i)=>{for(var e in i)g(o,e,{get:i[e],enumerable:!0})},M=(o,i,e,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of R(i))!H.call(o,n)&&n!==e&&g(o,n,{get:()=>i[n],enumerable:!(p=z(i,n))||p.enumerable});return o};var A=o=>M(g({},"__esModule",{value:!0}),o);var U={};L(U,{default:()=>Q});module.exports=A(U);var E=require("@tnf-dev/react");var c=require("@mui/icons-material"),m=require("@mui/material"),a=require("react/jsx-runtime"),O=({onClick:o,counts:i,ref:e,active:p})=>(0,a.jsx)(m.Badge,{badgeContent:i,color:"error",slotProps:{badge(){return{sx(){return{top:5}}}}},children:(0,a.jsx)(m.IconButton,{onClick:o,ref:e,component:"button",children:p?(0,a.jsx)(c.Notifications,{}):(0,a.jsx)(c.NotificationsOutlined,{})})}),P=O;var s=require("@mui/material"),b=require("@tnf-dev/react"),x=require("react"),h=require("react/jsx-runtime"),W=()=>{let{locale:o}=(0,x.use)(b.TeknifyContext);return(0,h.jsx)(s.Stack,{p:2,children:(0,h.jsx)(s.Typography,{textAlign:"center",children:o.components.Empty.noNotifications})})},S=W;var f=require("@mui/material"),u=require("react/jsx-runtime"),q=()=>(0,u.jsx)(f.Stack,{py:2,alignItems:"center",children:(0,u.jsx)(f.CircularProgress,{})}),N=q;var d=require("@mui/material"),v=require("@tnf-dev/react"),B=require("react"),C=require("react/jsx-runtime"),D=()=>{let{locale:o}=(0,B.use)(v.TeknifyContext);return(0,C.jsx)(d.Stack,{p:2,bgcolor:"white",justifyContent:"center",borderBottom:"1px solid #ddd",children:(0,C.jsx)(d.Typography,{fontWeight:600,children:o.components.NotificationHeader.notifications})})},T=D;var l=require("@mui/icons-material"),t=require("@mui/material"),r=require("react/jsx-runtime"),G=({notification:o})=>(0,r.jsxs)(t.Card,{sx:{p:1,m:1,position:"relative","& [data-id=actions]":{visibility:"hidden",opacity:0,transition:"0.3s"},":hover [data-id=actions]":{visibility:"visible",opacity:1}},children:[(0,r.jsx)(t.Stack,{children:(0,r.jsxs)(t.Stack,{direction:"row",spacing:2,children:[o.icon?(0,r.jsx)(t.Avatar,{src:o.icon,sx:{width:"36px",height:"36px"}}):(0,r.jsx)(t.Stack,{width:"36px",height:"36px",borderRadius:100,alignItems:"center",justifyContent:"center",bgcolor:"#ddd",children:(0,r.jsx)(l.Notifications,{fontSize:"small"})}),(0,r.jsxs)(t.Stack,{children:[(0,r.jsx)(t.Typography,{fontSize:14,fontWeight:600,children:o.title}),(0,r.jsx)(t.Typography,{fontSize:14,color:"textSecondary",children:o.message})]}),(0,r.jsx)(t.Stack,{children:!o.isRead&&(0,r.jsx)(t.Box,{width:10,height:10,bgcolor:"red",borderRadius:100,border:"2px solid #ddd"})})]})}),(0,r.jsx)(t.Stack,{position:"absolute",top:2,right:2,"data-id":"actions",p:1,spacing:1,bgcolor:"Background",children:!o.isRead&&(0,r.jsx)(t.Tooltip,{title:"Mark as read",children:(0,r.jsx)(t.IconButton,{size:"small",onClick:o.markAsRead,children:(0,r.jsx)(l.ChecklistOutlined,{fontSize:"small"})})})})]}),F=G;var y=require("@mui/material"),k=require("react/jsx-runtime"),J=({anchorElement:o,children:i,onClose:e,open:p})=>(0,k.jsx)(y.Popover,{open:!!p,anchorEl:o,onClose:e,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:(0,k.jsx)(y.Box,{height:500,width:400,bgcolor:"#fafafa",children:i})}),I=J;var w=require("react/jsx-runtime"),K=()=>(0,w.jsx)(E.TeknifyInbox,{components:{Bell:P,NotificationHeader:T,NotificationPopover:I,NotificationItem:F,Loader:N,Empty:S}}),Q=K;
@@ -0,0 +1,8 @@
1
+ import '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ interface TeknifyMuiInboxProps {
5
+ }
6
+ declare const TeknifyMuiInbox: FC<TeknifyMuiInboxProps>;
7
+
8
+ export { TeknifyMuiInbox as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ "use strict";var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var i=(o,r)=>{for(var e in r)p(o,e,{get:r[e],enumerable:!0})},l=(o,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of d(r))!f.call(o,t)&&t!==e&&p(o,t,{get:()=>r[t],enumerable:!(s=c(r,t))||s.enumerable});return o};var n=o=>l(p({},"__esModule",{value:!0}),o);var P={};i(P,{default:()=>L});module.exports=n(P);var a=require("@mui/material"),m=require("react/jsx-runtime"),C=()=>(0,m.jsx)(a.Stack,{py:2,alignItems:"center",children:(0,m.jsx)(a.CircularProgress,{})}),L=C;
@@ -0,0 +1,6 @@
1
+ import { LoaderProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const Loader: FC<LoaderProps>;
5
+
6
+ export { Loader as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ "use strict";var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var y=(o,t)=>{for(var e in t)n(o,e,{get:t[e],enumerable:!0})},l=(o,t,e,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of s(t))!m.call(o,i)&&i!==e&&n(o,i,{get:()=>t[i],enumerable:!(p=d(t,i))||p.enumerable});return o};var g=o=>l(n({},"__esModule",{value:!0}),o);var H={};y(H,{default:()=>C});module.exports=g(H);var r=require("@mui/material"),c=require("@tnf-dev/react"),f=require("react"),a=require("react/jsx-runtime"),h=()=>{let{locale:o}=(0,f.use)(c.TeknifyContext);return(0,a.jsx)(r.Stack,{p:2,bgcolor:"white",justifyContent:"center",borderBottom:"1px solid #ddd",children:(0,a.jsx)(r.Typography,{fontWeight:600,children:o.components.NotificationHeader.notifications})})},C=h;
@@ -0,0 +1,6 @@
1
+ import { NotificationHeaderProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const NotificationHeader: FC<NotificationHeaderProps>;
5
+
6
+ export { NotificationHeader as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ "use strict";var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var h=(i,a)=>{for(var r in a)s(i,r,{get:a[r],enumerable:!0})},m=(i,a,r,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let e of l(a))!n.call(i,e)&&e!==r&&s(i,e,{get:()=>a[e],enumerable:!(p=c(a,e))||p.enumerable});return i};var g=i=>m(s({},"__esModule",{value:!0}),i);var S={};h(S,{default:()=>y});module.exports=g(S);var d=require("@mui/icons-material"),t=require("@mui/material"),o=require("react/jsx-runtime"),k=({notification:i})=>(0,o.jsxs)(t.Card,{sx:{p:1,m:1,position:"relative","& [data-id=actions]":{visibility:"hidden",opacity:0,transition:"0.3s"},":hover [data-id=actions]":{visibility:"visible",opacity:1}},children:[(0,o.jsx)(t.Stack,{children:(0,o.jsxs)(t.Stack,{direction:"row",spacing:2,children:[i.icon?(0,o.jsx)(t.Avatar,{src:i.icon,sx:{width:"36px",height:"36px"}}):(0,o.jsx)(t.Stack,{width:"36px",height:"36px",borderRadius:100,alignItems:"center",justifyContent:"center",bgcolor:"#ddd",children:(0,o.jsx)(d.Notifications,{fontSize:"small"})}),(0,o.jsxs)(t.Stack,{children:[(0,o.jsx)(t.Typography,{fontSize:14,fontWeight:600,children:i.title}),(0,o.jsx)(t.Typography,{fontSize:14,color:"textSecondary",children:i.message})]}),(0,o.jsx)(t.Stack,{children:!i.isRead&&(0,o.jsx)(t.Box,{width:10,height:10,bgcolor:"red",borderRadius:100,border:"2px solid #ddd"})})]})}),(0,o.jsx)(t.Stack,{position:"absolute",top:2,right:2,"data-id":"actions",p:1,spacing:1,bgcolor:"Background",children:!i.isRead&&(0,o.jsx)(t.Tooltip,{title:"Mark as read",children:(0,o.jsx)(t.IconButton,{size:"small",onClick:i.markAsRead,children:(0,o.jsx)(d.ChecklistOutlined,{fontSize:"small"})})})})]}),y=k;
@@ -0,0 +1,6 @@
1
+ import { NotificationItemProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const NotificationItem: FC<NotificationItemProps>;
5
+
6
+ export { NotificationItem as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ "use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var l=(r,o)=>{for(var t in o)a(r,t,{get:o[t],enumerable:!0})},P=(r,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of f(o))!h.call(r,i)&&i!==t&&a(r,i,{get:()=>o[i],enumerable:!(e=c(o,i))||e.enumerable});return r};var m=r=>P(a({},"__esModule",{value:!0}),r);var s={};l(s,{default:()=>g});module.exports=m(s);var n=require("@mui/material"),p=require("react/jsx-runtime"),v=({anchorElement:r,children:o,onClose:t,open:e})=>(0,p.jsx)(n.Popover,{open:!!e,anchorEl:r,onClose:t,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:(0,p.jsx)(n.Box,{height:500,width:400,bgcolor:"#fafafa",children:o})}),g=v;
@@ -0,0 +1,6 @@
1
+ import { NotificationPopoverProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const NotificationPopover: FC<NotificationPopoverProps>;
5
+
6
+ export { NotificationPopover as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ "use strict";var g=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var L=(o,i)=>{for(var e in i)g(o,e,{get:i[e],enumerable:!0})},A=(o,i,e,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let p of H(i))!M.call(o,p)&&p!==e&&g(o,p,{get:()=>i[p],enumerable:!(n=R(i,p))||n.enumerable});return o};var O=o=>A(g({},"__esModule",{value:!0}),o);var U={};L(U,{TeknifyMuiInbox:()=>w});module.exports=O(U);var E=require("@tnf-dev/react");var c=require("@mui/icons-material"),m=require("@mui/material"),a=require("react/jsx-runtime"),W=({onClick:o,counts:i,ref:e,active:n})=>(0,a.jsx)(m.Badge,{badgeContent:i,color:"error",slotProps:{badge(){return{sx(){return{top:5}}}}},children:(0,a.jsx)(m.IconButton,{onClick:o,ref:e,component:"button",children:n?(0,a.jsx)(c.Notifications,{}):(0,a.jsx)(c.NotificationsOutlined,{})})}),b=W;var f=require("@mui/material"),x=require("@tnf-dev/react"),P=require("react"),h=require("react/jsx-runtime"),q=()=>{let{locale:o}=(0,P.use)(x.TeknifyContext);return(0,h.jsx)(f.Stack,{p:2,children:(0,h.jsx)(f.Typography,{textAlign:"center",children:o.components.Empty.noNotifications})})},S=q;var s=require("@mui/material"),u=require("react/jsx-runtime"),D=()=>(0,u.jsx)(s.Stack,{py:2,alignItems:"center",children:(0,u.jsx)(s.CircularProgress,{})}),N=D;var d=require("@mui/material"),T=require("@tnf-dev/react"),v=require("react"),k=require("react/jsx-runtime"),G=()=>{let{locale:o}=(0,v.use)(T.TeknifyContext);return(0,k.jsx)(d.Stack,{p:2,bgcolor:"white",justifyContent:"center",borderBottom:"1px solid #ddd",children:(0,k.jsx)(d.Typography,{fontWeight:600,children:o.components.NotificationHeader.notifications})})},B=G;var l=require("@mui/icons-material"),t=require("@mui/material"),r=require("react/jsx-runtime"),J=({notification:o})=>(0,r.jsxs)(t.Card,{sx:{p:1,m:1,position:"relative","& [data-id=actions]":{visibility:"hidden",opacity:0,transition:"0.3s"},":hover [data-id=actions]":{visibility:"visible",opacity:1}},children:[(0,r.jsx)(t.Stack,{children:(0,r.jsxs)(t.Stack,{direction:"row",spacing:2,children:[o.icon?(0,r.jsx)(t.Avatar,{src:o.icon,sx:{width:"36px",height:"36px"}}):(0,r.jsx)(t.Stack,{width:"36px",height:"36px",borderRadius:100,alignItems:"center",justifyContent:"center",bgcolor:"#ddd",children:(0,r.jsx)(l.Notifications,{fontSize:"small"})}),(0,r.jsxs)(t.Stack,{children:[(0,r.jsx)(t.Typography,{fontSize:14,fontWeight:600,children:o.title}),(0,r.jsx)(t.Typography,{fontSize:14,color:"textSecondary",children:o.message})]}),(0,r.jsx)(t.Stack,{children:!o.isRead&&(0,r.jsx)(t.Box,{width:10,height:10,bgcolor:"red",borderRadius:100,border:"2px solid #ddd"})})]})}),(0,r.jsx)(t.Stack,{position:"absolute",top:2,right:2,"data-id":"actions",p:1,spacing:1,bgcolor:"Background",children:!o.isRead&&(0,r.jsx)(t.Tooltip,{title:"Mark as read",children:(0,r.jsx)(t.IconButton,{size:"small",onClick:o.markAsRead,children:(0,r.jsx)(l.ChecklistOutlined,{fontSize:"small"})})})})]}),I=J;var y=require("@mui/material"),C=require("react/jsx-runtime"),K=({anchorElement:o,children:i,onClose:e,open:n})=>(0,C.jsx)(y.Popover,{open:!!n,anchorEl:o,onClose:e,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:(0,C.jsx)(y.Box,{height:500,width:400,bgcolor:"#fafafa",children:i})}),F=K;var z=require("react/jsx-runtime"),Q=()=>(0,z.jsx)(E.TeknifyInbox,{components:{Bell:b,NotificationHeader:B,NotificationPopover:F,NotificationItem:I,Loader:N,Empty:S}}),w=Q;0&&(module.exports={TeknifyMuiInbox});
@@ -0,0 +1,3 @@
1
+ export { default as TeknifyMuiInbox } from './inbox/index.cjs';
2
+ import '@tnf-dev/react';
3
+ import 'react';
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ "use strict";var k=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var O=Object.prototype.hasOwnProperty;var W=(o,i)=>{for(var e in i)k(o,e,{get:i[e],enumerable:!0})},u=(o,i,e,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of A(i))!O.call(o,n)&&n!==e&&k(o,n,{get:()=>i[n],enumerable:!(p=L(i,n))||p.enumerable});return o},c=(o,i,e)=>(u(o,i,"default"),e&&u(e,i,"default"));var q=o=>u(k({},"__esModule",{value:!0}),o);var m={};W(m,{TeknifyMuiInbox:()=>H});module.exports=q(m);c(m,require("@tnf-dev/react"),module.exports);var R=require("@tnf-dev/react");var f=require("@mui/icons-material"),s=require("@mui/material"),a=require("react/jsx-runtime"),D=({onClick:o,counts:i,ref:e,active:p})=>(0,a.jsx)(s.Badge,{badgeContent:i,color:"error",slotProps:{badge(){return{sx(){return{top:5}}}}},children:(0,a.jsx)(s.IconButton,{onClick:o,ref:e,component:"button",children:p?(0,a.jsx)(f.Notifications,{}):(0,a.jsx)(f.NotificationsOutlined,{})})}),S=D;var d=require("@mui/material"),N=require("@tnf-dev/react"),T=require("react"),C=require("react/jsx-runtime"),G=()=>{let{locale:o}=(0,T.use)(N.TeknifyContext);return(0,C.jsx)(d.Stack,{p:2,children:(0,C.jsx)(d.Typography,{textAlign:"center",children:o.components.Empty.noNotifications})})},v=G;var l=require("@mui/material"),x=require("react/jsx-runtime"),J=()=>(0,x.jsx)(l.Stack,{py:2,alignItems:"center",children:(0,x.jsx)(l.CircularProgress,{})}),B=J;var y=require("@mui/material"),I=require("@tnf-dev/react"),F=require("react"),b=require("react/jsx-runtime"),K=()=>{let{locale:o}=(0,F.use)(I.TeknifyContext);return(0,b.jsx)(y.Stack,{p:2,bgcolor:"white",justifyContent:"center",borderBottom:"1px solid #ddd",children:(0,b.jsx)(y.Typography,{fontWeight:600,children:o.components.NotificationHeader.notifications})})},E=K;var g=require("@mui/icons-material"),t=require("@mui/material"),r=require("react/jsx-runtime"),Q=({notification:o})=>(0,r.jsxs)(t.Card,{sx:{p:1,m:1,position:"relative","& [data-id=actions]":{visibility:"hidden",opacity:0,transition:"0.3s"},":hover [data-id=actions]":{visibility:"visible",opacity:1}},children:[(0,r.jsx)(t.Stack,{children:(0,r.jsxs)(t.Stack,{direction:"row",spacing:2,children:[o.icon?(0,r.jsx)(t.Avatar,{src:o.icon,sx:{width:"36px",height:"36px"}}):(0,r.jsx)(t.Stack,{width:"36px",height:"36px",borderRadius:100,alignItems:"center",justifyContent:"center",bgcolor:"#ddd",children:(0,r.jsx)(g.Notifications,{fontSize:"small"})}),(0,r.jsxs)(t.Stack,{children:[(0,r.jsx)(t.Typography,{fontSize:14,fontWeight:600,children:o.title}),(0,r.jsx)(t.Typography,{fontSize:14,color:"textSecondary",children:o.message})]}),(0,r.jsx)(t.Stack,{children:!o.isRead&&(0,r.jsx)(t.Box,{width:10,height:10,bgcolor:"red",borderRadius:100,border:"2px solid #ddd"})})]})}),(0,r.jsx)(t.Stack,{position:"absolute",top:2,right:2,"data-id":"actions",p:1,spacing:1,bgcolor:"Background",children:!o.isRead&&(0,r.jsx)(t.Tooltip,{title:"Mark as read",children:(0,r.jsx)(t.IconButton,{size:"small",onClick:o.markAsRead,children:(0,r.jsx)(g.ChecklistOutlined,{fontSize:"small"})})})})]}),w=Q;var h=require("@mui/material"),P=require("react/jsx-runtime"),U=({anchorElement:o,children:i,onClose:e,open:p})=>(0,P.jsx)(h.Popover,{open:!!p,anchorEl:o,onClose:e,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:(0,P.jsx)(h.Box,{height:500,width:400,bgcolor:"#fafafa",children:i})}),z=U;var M=require("react/jsx-runtime"),V=()=>(0,M.jsx)(R.TeknifyInbox,{components:{Bell:S,NotificationHeader:E,NotificationPopover:z,NotificationItem:w,Loader:B,Empty:v}}),H=V;0&&(module.exports={TeknifyMuiInbox,...require("@tnf-dev/react")});
@@ -0,0 +1,3 @@
1
+ export * from '@tnf-dev/react';
2
+ export { default as TeknifyMuiInbox } from './components/inbox/index.cjs';
3
+ import 'react';
@@ -0,0 +1,6 @@
1
+ import { BellProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const Bell: FC<BellProps>;
5
+
6
+ export { Bell as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ import{Notifications as i,NotificationsOutlined as l}from"@mui/icons-material";import{Badge as p,IconButton as s}from"@mui/material";import{jsx as o}from"react/jsx-runtime";var a=({onClick:t,counts:r,ref:e,active:n})=>o(p,{badgeContent:r,color:"error",slotProps:{badge(){return{sx(){return{top:5}}}}},children:o(s,{onClick:t,ref:e,component:"button",children:n?o(i,{}):o(l,{})})}),c=a;export{c as default};
@@ -0,0 +1,6 @@
1
+ import { EmptyProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const Empty: FC<EmptyProps>;
5
+
6
+ export { Empty as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ import{Stack as p,Typography as r}from"@mui/material";import{TeknifyContext as m}from"@tnf-dev/react";import{use as n}from"react";import{jsx as o}from"react/jsx-runtime";var e=()=>{let{locale:t}=n(m);return o(p,{p:2,children:o(r,{textAlign:"center",children:t.components.Empty.noNotifications})})},s=e;export{s as default};
@@ -0,0 +1,8 @@
1
+ import '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ interface TeknifyMuiInboxProps {
5
+ }
6
+ declare const TeknifyMuiInbox: FC<TeknifyMuiInboxProps>;
7
+
8
+ export { TeknifyMuiInbox as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ import{TeknifyInbox as X}from"@tnf-dev/react";import{Notifications as k,NotificationsOutlined as P}from"@mui/icons-material";import{Badge as b,IconButton as x}from"@mui/material";import{jsx as i}from"react/jsx-runtime";var S=({onClick:o,counts:e,ref:p,active:n})=>i(b,{badgeContent:e,color:"error",slotProps:{badge(){return{sx(){return{top:5}}}}},children:i(x,{onClick:o,ref:p,component:"button",children:n?i(k,{}):i(P,{})})}),c=S;import{Stack as N,Typography as v}from"@mui/material";import{TeknifyContext as B}from"@tnf-dev/react";import{use as T}from"react";import{jsx as m}from"react/jsx-runtime";var F=()=>{let{locale:o}=T(B);return m(N,{p:2,children:m(v,{textAlign:"center",children:o.components.Empty.noNotifications})})},s=F;import{CircularProgress as I,Stack as E}from"@mui/material";import{jsx as f}from"react/jsx-runtime";var w=()=>f(E,{py:2,alignItems:"center",children:f(I,{})}),d=w;import{Stack as z,Typography as R}from"@mui/material";import{TeknifyContext as H}from"@tnf-dev/react";import{use as L}from"react";import{jsx as l}from"react/jsx-runtime";var M=()=>{let{locale:o}=L(H);return l(z,{p:2,bgcolor:"white",justifyContent:"center",borderBottom:"1px solid #ddd",children:l(R,{fontWeight:600,children:o.components.NotificationHeader.notifications})})},y=M;import{ChecklistOutlined as A,Notifications as O}from"@mui/icons-material";import{Avatar as W,Box as q,Card as D,IconButton as G,Stack as r,Tooltip as J,Typography as g}from"@mui/material";import{jsx as t,jsxs as a}from"react/jsx-runtime";var K=({notification:o})=>a(D,{sx:{p:1,m:1,position:"relative","& [data-id=actions]":{visibility:"hidden",opacity:0,transition:"0.3s"},":hover [data-id=actions]":{visibility:"visible",opacity:1}},children:[t(r,{children:a(r,{direction:"row",spacing:2,children:[o.icon?t(W,{src:o.icon,sx:{width:"36px",height:"36px"}}):t(r,{width:"36px",height:"36px",borderRadius:100,alignItems:"center",justifyContent:"center",bgcolor:"#ddd",children:t(O,{fontSize:"small"})}),a(r,{children:[t(g,{fontSize:14,fontWeight:600,children:o.title}),t(g,{fontSize:14,color:"textSecondary",children:o.message})]}),t(r,{children:!o.isRead&&t(q,{width:10,height:10,bgcolor:"red",borderRadius:100,border:"2px solid #ddd"})})]})}),t(r,{position:"absolute",top:2,right:2,"data-id":"actions",p:1,spacing:1,bgcolor:"Background",children:!o.isRead&&t(J,{title:"Mark as read",children:t(G,{size:"small",onClick:o.markAsRead,children:t(A,{fontSize:"small"})})})})]}),h=K;import{Box as Q,Popover as U}from"@mui/material";import{jsx as u}from"react/jsx-runtime";var V=({anchorElement:o,children:e,onClose:p,open:n})=>u(U,{open:!!n,anchorEl:o,onClose:p,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:u(Q,{height:500,width:400,bgcolor:"#fafafa",children:e})}),C=V;import{jsx as Z}from"react/jsx-runtime";var Y=()=>Z(X,{components:{Bell:c,NotificationHeader:y,NotificationPopover:C,NotificationItem:h,Loader:d,Empty:s}}),Ro=Y;export{Ro as default};
@@ -0,0 +1,6 @@
1
+ import { LoaderProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const Loader: FC<LoaderProps>;
5
+
6
+ export { Loader as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ import{CircularProgress as o,Stack as t}from"@mui/material";import{jsx as r}from"react/jsx-runtime";var e=()=>r(t,{py:2,alignItems:"center",children:r(o,{})}),p=e;export{p as default};
@@ -0,0 +1,6 @@
1
+ import { NotificationHeaderProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const NotificationHeader: FC<NotificationHeaderProps>;
5
+
6
+ export { NotificationHeader as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ import{Stack as i,Typography as e}from"@mui/material";import{TeknifyContext as r}from"@tnf-dev/react";import{use as n}from"react";import{jsx as o}from"react/jsx-runtime";var a=()=>{let{locale:t}=n(r);return o(i,{p:2,bgcolor:"white",justifyContent:"center",borderBottom:"1px solid #ddd",children:o(e,{fontWeight:600,children:t.components.NotificationHeader.notifications})})},m=a;export{m as default};
@@ -0,0 +1,6 @@
1
+ import { NotificationItemProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const NotificationItem: FC<NotificationItemProps>;
5
+
6
+ export { NotificationItem as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ import{ChecklistOutlined as r,Notifications as d}from"@mui/icons-material";import{Avatar as s,Box as p,Card as c,IconButton as l,Stack as i,Tooltip as n,Typography as e}from"@mui/material";import{jsx as t,jsxs as a}from"react/jsx-runtime";var h=({notification:o})=>a(c,{sx:{p:1,m:1,position:"relative","& [data-id=actions]":{visibility:"hidden",opacity:0,transition:"0.3s"},":hover [data-id=actions]":{visibility:"visible",opacity:1}},children:[t(i,{children:a(i,{direction:"row",spacing:2,children:[o.icon?t(s,{src:o.icon,sx:{width:"36px",height:"36px"}}):t(i,{width:"36px",height:"36px",borderRadius:100,alignItems:"center",justifyContent:"center",bgcolor:"#ddd",children:t(d,{fontSize:"small"})}),a(i,{children:[t(e,{fontSize:14,fontWeight:600,children:o.title}),t(e,{fontSize:14,color:"textSecondary",children:o.message})]}),t(i,{children:!o.isRead&&t(p,{width:10,height:10,bgcolor:"red",borderRadius:100,border:"2px solid #ddd"})})]})}),t(i,{position:"absolute",top:2,right:2,"data-id":"actions",p:1,spacing:1,bgcolor:"Background",children:!o.isRead&&t(n,{title:"Mark as read",children:t(l,{size:"small",onClick:o.markAsRead,children:t(r,{fontSize:"small"})})})})]}),k=h;export{k as default};
@@ -0,0 +1,6 @@
1
+ import { NotificationPopoverProps } from '@tnf-dev/react';
2
+ import { FC } from 'react';
3
+
4
+ declare const NotificationPopover: FC<NotificationPopoverProps>;
5
+
6
+ export { NotificationPopover as default };
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ import{Box as n,Popover as a}from"@mui/material";import{jsx as o}from"react/jsx-runtime";var p=({anchorElement:r,children:t,onClose:i,open:e})=>o(a,{open:!!e,anchorEl:r,onClose:i,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:o(n,{height:500,width:400,bgcolor:"#fafafa",children:t})}),f=p;export{f as default};
@@ -0,0 +1,3 @@
1
+ export { default as TeknifyMuiInbox } from './inbox/index.js';
2
+ import '@tnf-dev/react';
3
+ import 'react';
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ import{TeknifyInbox as X}from"@tnf-dev/react";import{Notifications as C,NotificationsOutlined as b}from"@mui/icons-material";import{Badge as x,IconButton as P}from"@mui/material";import{jsx as i}from"react/jsx-runtime";var S=({onClick:o,counts:e,ref:n,active:p})=>i(x,{badgeContent:e,color:"error",slotProps:{badge(){return{sx(){return{top:5}}}}},children:i(P,{onClick:o,ref:n,component:"button",children:p?i(C,{}):i(b,{})})}),c=S;import{Stack as N,Typography as T}from"@mui/material";import{TeknifyContext as v}from"@tnf-dev/react";import{use as B}from"react";import{jsx as m}from"react/jsx-runtime";var I=()=>{let{locale:o}=B(v);return m(N,{p:2,children:m(T,{textAlign:"center",children:o.components.Empty.noNotifications})})},f=I;import{CircularProgress as F,Stack as E}from"@mui/material";import{jsx as s}from"react/jsx-runtime";var w=()=>s(E,{py:2,alignItems:"center",children:s(F,{})}),d=w;import{Stack as z,Typography as R}from"@mui/material";import{TeknifyContext as H}from"@tnf-dev/react";import{use as M}from"react";import{jsx as l}from"react/jsx-runtime";var L=()=>{let{locale:o}=M(H);return l(z,{p:2,bgcolor:"white",justifyContent:"center",borderBottom:"1px solid #ddd",children:l(R,{fontWeight:600,children:o.components.NotificationHeader.notifications})})},y=L;import{ChecklistOutlined as A,Notifications as O}from"@mui/icons-material";import{Avatar as W,Box as q,Card as D,IconButton as G,Stack as r,Tooltip as J,Typography as g}from"@mui/material";import{jsx as t,jsxs as a}from"react/jsx-runtime";var K=({notification:o})=>a(D,{sx:{p:1,m:1,position:"relative","& [data-id=actions]":{visibility:"hidden",opacity:0,transition:"0.3s"},":hover [data-id=actions]":{visibility:"visible",opacity:1}},children:[t(r,{children:a(r,{direction:"row",spacing:2,children:[o.icon?t(W,{src:o.icon,sx:{width:"36px",height:"36px"}}):t(r,{width:"36px",height:"36px",borderRadius:100,alignItems:"center",justifyContent:"center",bgcolor:"#ddd",children:t(O,{fontSize:"small"})}),a(r,{children:[t(g,{fontSize:14,fontWeight:600,children:o.title}),t(g,{fontSize:14,color:"textSecondary",children:o.message})]}),t(r,{children:!o.isRead&&t(q,{width:10,height:10,bgcolor:"red",borderRadius:100,border:"2px solid #ddd"})})]})}),t(r,{position:"absolute",top:2,right:2,"data-id":"actions",p:1,spacing:1,bgcolor:"Background",children:!o.isRead&&t(J,{title:"Mark as read",children:t(G,{size:"small",onClick:o.markAsRead,children:t(A,{fontSize:"small"})})})})]}),h=K;import{Box as Q,Popover as U}from"@mui/material";import{jsx as u}from"react/jsx-runtime";var V=({anchorElement:o,children:e,onClose:n,open:p})=>u(U,{open:!!p,anchorEl:o,onClose:n,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:u(Q,{height:500,width:400,bgcolor:"#fafafa",children:e})}),k=V;import{jsx as _}from"react/jsx-runtime";var Y=()=>_(X,{components:{Bell:c,NotificationHeader:y,NotificationPopover:k,NotificationItem:h,Loader:d,Empty:f}}),Z=Y;export{Z as TeknifyMuiInbox};
@@ -0,0 +1,3 @@
1
+ export * from '@tnf-dev/react';
2
+ export { default as TeknifyMuiInbox } from './components/inbox/index.js';
3
+ import 'react';
@@ -0,0 +1,2 @@
1
+ "use client"
2
+ export*from"@tnf-dev/react";import{TeknifyInbox as X}from"@tnf-dev/react";import{Notifications as C,NotificationsOutlined as x}from"@mui/icons-material";import{Badge as b,IconButton as P}from"@mui/material";import{jsx as i}from"react/jsx-runtime";var S=({onClick:o,counts:e,ref:p,active:n})=>i(b,{badgeContent:e,color:"error",slotProps:{badge(){return{sx(){return{top:5}}}}},children:i(P,{onClick:o,ref:p,component:"button",children:n?i(C,{}):i(x,{})})}),m=S;import{Stack as N,Typography as T}from"@mui/material";import{TeknifyContext as v}from"@tnf-dev/react";import{use as B}from"react";import{jsx as c}from"react/jsx-runtime";var I=()=>{let{locale:o}=B(v);return c(N,{p:2,children:c(T,{textAlign:"center",children:o.components.Empty.noNotifications})})},f=I;import{CircularProgress as F,Stack as E}from"@mui/material";import{jsx as s}from"react/jsx-runtime";var w=()=>s(E,{py:2,alignItems:"center",children:s(F,{})}),d=w;import{Stack as z,Typography as R}from"@mui/material";import{TeknifyContext as H}from"@tnf-dev/react";import{use as M}from"react";import{jsx as l}from"react/jsx-runtime";var L=()=>{let{locale:o}=M(H);return l(z,{p:2,bgcolor:"white",justifyContent:"center",borderBottom:"1px solid #ddd",children:l(R,{fontWeight:600,children:o.components.NotificationHeader.notifications})})},y=L;import{ChecklistOutlined as A,Notifications as O}from"@mui/icons-material";import{Avatar as W,Box as q,Card as D,IconButton as G,Stack as r,Tooltip as J,Typography as g}from"@mui/material";import{jsx as t,jsxs as a}from"react/jsx-runtime";var K=({notification:o})=>a(D,{sx:{p:1,m:1,position:"relative","& [data-id=actions]":{visibility:"hidden",opacity:0,transition:"0.3s"},":hover [data-id=actions]":{visibility:"visible",opacity:1}},children:[t(r,{children:a(r,{direction:"row",spacing:2,children:[o.icon?t(W,{src:o.icon,sx:{width:"36px",height:"36px"}}):t(r,{width:"36px",height:"36px",borderRadius:100,alignItems:"center",justifyContent:"center",bgcolor:"#ddd",children:t(O,{fontSize:"small"})}),a(r,{children:[t(g,{fontSize:14,fontWeight:600,children:o.title}),t(g,{fontSize:14,color:"textSecondary",children:o.message})]}),t(r,{children:!o.isRead&&t(q,{width:10,height:10,bgcolor:"red",borderRadius:100,border:"2px solid #ddd"})})]})}),t(r,{position:"absolute",top:2,right:2,"data-id":"actions",p:1,spacing:1,bgcolor:"Background",children:!o.isRead&&t(J,{title:"Mark as read",children:t(G,{size:"small",onClick:o.markAsRead,children:t(A,{fontSize:"small"})})})})]}),h=K;import{Box as Q,Popover as U}from"@mui/material";import{jsx as u}from"react/jsx-runtime";var V=({anchorElement:o,children:e,onClose:p,open:n})=>u(U,{open:!!n,anchorEl:o,onClose:p,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:u(Q,{height:500,width:400,bgcolor:"#fafafa",children:e})}),k=V;import{jsx as _}from"react/jsx-runtime";var Y=()=>_(X,{components:{Bell:m,NotificationHeader:y,NotificationPopover:k,NotificationItem:h,Loader:d,Empty:f}}),Z=Y;export{Z as TeknifyMuiInbox};
package/package.json ADDED
@@ -0,0 +1,89 @@
1
+ {
2
+ "browser": "./dist/esm/index.js",
3
+ "browserslist": {
4
+ "development": [
5
+ "last 1 chrome version",
6
+ "last 1 firefox version",
7
+ "last 1 safari version"
8
+ ],
9
+ "production": [
10
+ ">0.2%",
11
+ "not dead",
12
+ "not op_mini all"
13
+ ]
14
+ },
15
+ "dependencies": {
16
+ "react": "^19.1.0",
17
+ "react-dom": "^19.1.0",
18
+ "sanitize-html": "^2.17.0"
19
+ },
20
+ "devDependencies": {
21
+ "@arethetypeswrong/cli": "^0.18.2",
22
+ "@types/react": "^19.1.8",
23
+ "@types/react-dom": "^19.1.6",
24
+ "@types/sanitize-html": "^2.16.0"
25
+ },
26
+ "exports": {
27
+ ".": {
28
+ "browser": {
29
+ "default": "./dist/esm/index.js",
30
+ "types": "./dist/esm/index.d.ts"
31
+ },
32
+ "import": {
33
+ "default": "./dist/esm/index.js",
34
+ "types": "./dist/esm/index.d.ts"
35
+ },
36
+ "require": {
37
+ "default": "./dist/cjs/index.cjs",
38
+ "types": "./dist/cjs/index.d.cts"
39
+ }
40
+ }
41
+ },
42
+ "files": [
43
+ "dist",
44
+ "dist/cjs/**/*",
45
+ "dist/esm/**/*"
46
+ ],
47
+ "license": "MIT",
48
+ "main": "./dist/cjs/index.js",
49
+ "name": "@tnf-dev/mui",
50
+ "nx": {
51
+ "tags": [
52
+ "type:package"
53
+ ]
54
+ },
55
+ "peerDependencies": {
56
+ "@emotion/react": "^11.14.0",
57
+ "@emotion/styled": "^11.14.0",
58
+ "@mui/icons-material": "^7.1.2",
59
+ "@mui/material": "^7.1.2",
60
+ "react": "^19.1.0",
61
+ "react-dom": "^19.1.0",
62
+ "sanitize-html": "^2.17.0"
63
+ },
64
+ "peerDependenciesMeta": {
65
+ "react-dom": {
66
+ "react-dom": {
67
+ "optional": true
68
+ }
69
+ }
70
+ },
71
+ "private": false,
72
+ "publishConfig": {
73
+ "access": "public"
74
+ },
75
+ "repository": {
76
+ "directory": "packages/mui",
77
+ "type": "git",
78
+ "url": "git+https://github.com/teknix-saas/teknify-sdk"
79
+ },
80
+ "scripts": {
81
+ "build": "NODE_ENV=production tsup && npm run check-exports",
82
+ "check-exports": "attw --pack .",
83
+ "dev": "tsup --watch"
84
+ },
85
+ "sideEffects": false,
86
+ "type": "module",
87
+ "types": "./dist/esm/index.d.ts",
88
+ "version": "1.0.1-5"
89
+ }