@tnf-dev/mui 1.0.1-10

package/README.md

@@ -0,0 +1,29 @@
+# @tnf-dev/mui
+
+This package contains the Material UI components used in the Teknify project.
+
+## Installation
+
+To install the package, run the following command:
+
+```bash
+npm install @tnf-dev/react @tnf-dev/mui
+```
+
+## Usage
+
+To use the components from this package, you can import them into your React application as follows:
+
+```tsx
+import { TeknifyProvider } from '@tnf-dev/react';
+import { TeknifyMuiInbox } from '@tnf-dev/mui';
+
+// Example usage in a component
+const MyComponent = () => {
+  return (
+    <TeknifyProvider applicationId='<YOUR_APPLICATION_ID>' subscriberId='<USER_SUBSCRIBER_ID>'>
+      <TeknifyMuiInbox />
+    </TeknifyProvider>
+  );
+};
+```

package/dist/cjs/components/inbox/bell.cjs

@@ -0,0 +1,2 @@
+"use client"
+"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;

package/dist/cjs/components/inbox/bell.d.cts

@@ -0,0 +1,6 @@
+import { BellProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const Bell: FC<BellProps>;
+
+export { Bell as default };

package/dist/cjs/components/inbox/empty.cjs

@@ -0,0 +1,2 @@
+"use client"
+"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("@teknify/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;

package/dist/cjs/components/inbox/empty.d.cts

@@ -0,0 +1,6 @@
+import { EmptyProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const Empty: FC<EmptyProps>;
+
+export { Empty as default };

package/dist/cjs/components/inbox/index.cjs

@@ -0,0 +1,2 @@
+"use client"
+"use strict";var g=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var M=(o,i)=>{for(var e in i)g(o,e,{get:i[e],enumerable:!0})},O=(o,i,e,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let p of H(i))!L.call(o,p)&&p!==e&&g(o,p,{get:()=>i[p],enumerable:!(n=A(i,p))||n.enumerable});return o};var W=o=>O(g({},"__esModule",{value:!0}),o);var X={};M(X,{default:()=>V});module.exports=W(X);var w=require("@teknify/react");var c=require("@mui/icons-material"),m=require("@mui/material"),a=require("react/jsx-runtime"),q=({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,{})})}),x=q;var s=require("@mui/material"),P=require("@teknify/react"),b=require("react"),h=require("react/jsx-runtime"),D=()=>{let{locale:o}=(0,b.use)(P.TeknifyContext);return(0,h.jsx)(s.Stack,{p:2,children:(0,h.jsx)(s.Typography,{textAlign:"center",children:o.components.Empty.noNotifications})})},N=D;var f=require("@mui/material"),u=require("react/jsx-runtime"),G=()=>(0,u.jsx)(f.Stack,{py:2,alignItems:"center",children:(0,u.jsx)(f.CircularProgress,{})}),S=G;var d=require("@mui/material"),v=require("@teknify/react"),T=require("react"),C=require("react/jsx-runtime"),J=()=>{let{locale:o}=(0,T.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})})},B=J;var l=require("@mui/icons-material"),t=require("@mui/material"),I=require("@teknify/react"),F=require("react"),r=require("react/jsx-runtime"),K=({notification:o})=>{let{locale:i}=(0,F.useContext)(I.TeknifyContext);return(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},...o.isRead?{}:{cursor:"pointer",":hover":{color:"primary.main"}}},...o.isRead?{}:{onClick:o.markAsRead},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,{flex:1,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:i.components.NotificationItem.markAsRead,children:(0,r.jsx)(t.IconButton,{size:"small",onClick:o.markAsRead,children:(0,r.jsx)(l.ChecklistOutlined,{fontSize:"small"})})})})]})},R=K;var y=require("@mui/material"),k=require("react/jsx-runtime"),Q=({anchorElement:o,children:i,onClose:e,open:n})=>(0,k.jsx)(y.Popover,{open:!!n,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})}),E=Q;var z=require("react/jsx-runtime"),U=()=>(0,z.jsx)(w.TeknifyInbox,{components:{Bell:x,NotificationHeader:B,NotificationPopover:E,NotificationItem:R,Loader:S,Empty:N}}),V=U;

package/dist/cjs/components/inbox/index.d.cts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+interface TeknifyMuiInboxProps {
+}
+declare const TeknifyMuiInbox: FC<TeknifyMuiInboxProps>;
+
+export { TeknifyMuiInbox as default };

package/dist/cjs/components/inbox/loader.cjs

@@ -0,0 +1,2 @@
+"use client"
+"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;

package/dist/cjs/components/inbox/loader.d.cts

@@ -0,0 +1,6 @@
+import { LoaderProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const Loader: FC<LoaderProps>;
+
+export { Loader as default };

package/dist/cjs/components/inbox/notification-header.cjs

@@ -0,0 +1,2 @@
+"use client"
+"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("@teknify/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;

package/dist/cjs/components/inbox/notification-header.d.cts

@@ -0,0 +1,6 @@
+import { NotificationHeaderProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const NotificationHeader: FC<NotificationHeaderProps>;
+
+export { NotificationHeader as default };

package/dist/cjs/components/inbox/notification-item.cjs

@@ -0,0 +1,2 @@
+"use client"
+"use strict";var d=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var g=(o,e)=>{for(var a in e)d(o,a,{get:e[a],enumerable:!0})},k=(o,e,a,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!h.call(o,r)&&r!==a&&d(o,r,{get:()=>e[r],enumerable:!(c=n(e,r))||c.enumerable});return o};var y=o=>k(d({},"__esModule",{value:!0}),o);var u={};g(u,{default:()=>S});module.exports=y(u);var s=require("@mui/icons-material"),t=require("@mui/material"),p=require("@teknify/react"),l=require("react"),i=require("react/jsx-runtime"),x=({notification:o})=>{let{locale:e}=(0,l.useContext)(p.TeknifyContext);return(0,i.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},...o.isRead?{}:{cursor:"pointer",":hover":{color:"primary.main"}}},...o.isRead?{}:{onClick:o.markAsRead},children:[(0,i.jsx)(t.Stack,{children:(0,i.jsxs)(t.Stack,{direction:"row",spacing:2,children:[o.icon?(0,i.jsx)(t.Avatar,{src:o.icon,sx:{width:"36px",height:"36px"}}):(0,i.jsx)(t.Stack,{width:"36px",height:"36px",borderRadius:100,alignItems:"center",justifyContent:"center",bgcolor:"#ddd",children:(0,i.jsx)(s.Notifications,{fontSize:"small"})}),(0,i.jsxs)(t.Stack,{flex:1,children:[(0,i.jsx)(t.Typography,{fontSize:14,fontWeight:600,children:o.title}),(0,i.jsx)(t.Typography,{fontSize:14,color:"textSecondary",children:o.message})]}),(0,i.jsx)(t.Stack,{children:!o.isRead&&(0,i.jsx)(t.Box,{width:10,height:10,bgcolor:"red",borderRadius:100,border:"2px solid #ddd"})})]})}),(0,i.jsx)(t.Stack,{position:"absolute",top:2,right:2,"data-id":"actions",p:1,spacing:1,bgcolor:"Background",children:!o.isRead&&(0,i.jsx)(t.Tooltip,{title:e.components.NotificationItem.markAsRead,children:(0,i.jsx)(t.IconButton,{size:"small",onClick:o.markAsRead,children:(0,i.jsx)(s.ChecklistOutlined,{fontSize:"small"})})})})]})},S=x;

package/dist/cjs/components/inbox/notification-item.d.cts

@@ -0,0 +1,6 @@
+import { NotificationItemProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const NotificationItem: FC<NotificationItemProps>;
+
+export { NotificationItem as default };

package/dist/cjs/components/inbox/notification-popover.cjs

@@ -0,0 +1,2 @@
+"use client"
+"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;

package/dist/cjs/components/inbox/notification-popover.d.cts

@@ -0,0 +1,6 @@
+import { NotificationPopoverProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const NotificationPopover: FC<NotificationPopoverProps>;
+
+export { NotificationPopover as default };

package/dist/cjs/components/index.cjs

@@ -0,0 +1,2 @@
+"use client"
+"use strict";var g=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var O=(o,e)=>{for(var i in e)g(o,i,{get:e[i],enumerable:!0})},W=(o,e,i,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of L(e))!M.call(o,p)&&p!==i&&g(o,p,{get:()=>e[p],enumerable:!(n=H(e,p))||n.enumerable});return o};var q=o=>W(g({},"__esModule",{value:!0}),o);var X={};O(X,{TeknifyMuiInbox:()=>z});module.exports=q(X);var w=require("@teknify/react");var m=require("@mui/icons-material"),c=require("@mui/material"),a=require("react/jsx-runtime"),D=({onClick:o,counts:e,ref:i,active:n})=>(0,a.jsx)(c.Badge,{badgeContent:e,color:"error",slotProps:{badge(){return{sx(){return{top:5}}}}},children:(0,a.jsx)(c.IconButton,{onClick:o,ref:i,component:"button",children:n?(0,a.jsx)(m.Notifications,{}):(0,a.jsx)(m.NotificationsOutlined,{})})}),x=D;var s=require("@mui/material"),b=require("@teknify/react"),P=require("react"),h=require("react/jsx-runtime"),G=()=>{let{locale:o}=(0,P.use)(b.TeknifyContext);return(0,h.jsx)(s.Stack,{p:2,children:(0,h.jsx)(s.Typography,{textAlign:"center",children:o.components.Empty.noNotifications})})},N=G;var f=require("@mui/material"),u=require("react/jsx-runtime"),J=()=>(0,u.jsx)(f.Stack,{py:2,alignItems:"center",children:(0,u.jsx)(f.CircularProgress,{})}),S=J;var d=require("@mui/material"),T=require("@teknify/react"),v=require("react"),k=require("react/jsx-runtime"),K=()=>{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})})},I=K;var l=require("@mui/icons-material"),t=require("@mui/material"),B=require("@teknify/react"),F=require("react"),r=require("react/jsx-runtime"),Q=({notification:o})=>{let{locale:e}=(0,F.useContext)(B.TeknifyContext);return(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},...o.isRead?{}:{cursor:"pointer",":hover":{color:"primary.main"}}},...o.isRead?{}:{onClick:o.markAsRead},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,{flex:1,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:e.components.NotificationItem.markAsRead,children:(0,r.jsx)(t.IconButton,{size:"small",onClick:o.markAsRead,children:(0,r.jsx)(l.ChecklistOutlined,{fontSize:"small"})})})})]})},R=Q;var y=require("@mui/material"),C=require("react/jsx-runtime"),U=({anchorElement:o,children:e,onClose:i,open:n})=>(0,C.jsx)(y.Popover,{open:!!n,anchorEl:o,onClose:i,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:(0,C.jsx)(y.Box,{height:500,width:400,bgcolor:"#fafafa",children:e})}),E=U;var A=require("react/jsx-runtime"),V=()=>(0,A.jsx)(w.TeknifyInbox,{components:{Bell:x,NotificationHeader:I,NotificationPopover:E,NotificationItem:R,Loader:S,Empty:N}}),z=V;0&&(module.exports={TeknifyMuiInbox});

package/dist/cjs/components/index.d.cts

@@ -0,0 +1,2 @@
+export { default as TeknifyMuiInbox } from './inbox/index.cjs';
+import 'react';

package/dist/cjs/index.cjs

@@ -0,0 +1,2 @@
+"use client"
+"use strict";var g=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var O=(o,e)=>{for(var i in e)g(o,i,{get:e[i],enumerable:!0})},W=(o,e,i,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of L(e))!M.call(o,p)&&p!==i&&g(o,p,{get:()=>e[p],enumerable:!(n=H(e,p))||n.enumerable});return o};var q=o=>W(g({},"__esModule",{value:!0}),o);var X={};O(X,{TeknifyMuiInbox:()=>z});module.exports=q(X);var w=require("@teknify/react");var m=require("@mui/icons-material"),c=require("@mui/material"),a=require("react/jsx-runtime"),D=({onClick:o,counts:e,ref:i,active:n})=>(0,a.jsx)(c.Badge,{badgeContent:e,color:"error",slotProps:{badge(){return{sx(){return{top:5}}}}},children:(0,a.jsx)(c.IconButton,{onClick:o,ref:i,component:"button",children:n?(0,a.jsx)(m.Notifications,{}):(0,a.jsx)(m.NotificationsOutlined,{})})}),x=D;var s=require("@mui/material"),b=require("@teknify/react"),P=require("react"),h=require("react/jsx-runtime"),G=()=>{let{locale:o}=(0,P.use)(b.TeknifyContext);return(0,h.jsx)(s.Stack,{p:2,children:(0,h.jsx)(s.Typography,{textAlign:"center",children:o.components.Empty.noNotifications})})},N=G;var f=require("@mui/material"),u=require("react/jsx-runtime"),J=()=>(0,u.jsx)(f.Stack,{py:2,alignItems:"center",children:(0,u.jsx)(f.CircularProgress,{})}),S=J;var d=require("@mui/material"),T=require("@teknify/react"),v=require("react"),k=require("react/jsx-runtime"),K=()=>{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})})},I=K;var l=require("@mui/icons-material"),t=require("@mui/material"),B=require("@teknify/react"),F=require("react"),r=require("react/jsx-runtime"),Q=({notification:o})=>{let{locale:e}=(0,F.useContext)(B.TeknifyContext);return(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},...o.isRead?{}:{cursor:"pointer",":hover":{color:"primary.main"}}},...o.isRead?{}:{onClick:o.markAsRead},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,{flex:1,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:e.components.NotificationItem.markAsRead,children:(0,r.jsx)(t.IconButton,{size:"small",onClick:o.markAsRead,children:(0,r.jsx)(l.ChecklistOutlined,{fontSize:"small"})})})})]})},R=Q;var y=require("@mui/material"),C=require("react/jsx-runtime"),U=({anchorElement:o,children:e,onClose:i,open:n})=>(0,C.jsx)(y.Popover,{open:!!n,anchorEl:o,onClose:i,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:(0,C.jsx)(y.Box,{height:500,width:400,bgcolor:"#fafafa",children:e})}),E=U;var A=require("react/jsx-runtime"),V=()=>(0,A.jsx)(w.TeknifyInbox,{components:{Bell:x,NotificationHeader:I,NotificationPopover:E,NotificationItem:R,Loader:S,Empty:N}}),z=V;0&&(module.exports={TeknifyMuiInbox});

package/dist/cjs/index.d.cts

@@ -0,0 +1,2 @@
+export { default as TeknifyMuiInbox } from './components/inbox/index.cjs';
+import 'react';

package/dist/esm/components/inbox/bell.d.ts

@@ -0,0 +1,6 @@
+import { BellProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const Bell: FC<BellProps>;
+
+export { Bell as default };

package/dist/esm/components/inbox/bell.js

@@ -0,0 +1,2 @@
+"use client"
+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};

package/dist/esm/components/inbox/empty.d.ts

@@ -0,0 +1,6 @@
+import { EmptyProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const Empty: FC<EmptyProps>;
+
+export { Empty as default };

package/dist/esm/components/inbox/empty.js

@@ -0,0 +1,2 @@
+"use client"
+import{Stack as p,Typography as r}from"@mui/material";import{TeknifyContext as m}from"@teknify/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};

package/dist/esm/components/inbox/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+interface TeknifyMuiInboxProps {
+}
+declare const TeknifyMuiInbox: FC<TeknifyMuiInboxProps>;
+
+export { TeknifyMuiInbox as default };

package/dist/esm/components/inbox/index.js

@@ -0,0 +1,2 @@
+"use client"
+import{TeknifyInbox as Z}from"@teknify/react";import{Notifications as k,NotificationsOutlined as x}from"@mui/icons-material";import{Badge as P,IconButton as b}from"@mui/material";import{jsx as e}from"react/jsx-runtime";var N=({onClick:o,counts:i,ref:n,active:p})=>e(P,{badgeContent:i,color:"error",slotProps:{badge(){return{sx(){return{top:5}}}}},children:e(b,{onClick:o,ref:n,component:"button",children:p?e(k,{}):e(x,{})})}),c=N;import{Stack as S,Typography as v}from"@mui/material";import{TeknifyContext as T}from"@teknify/react";import{use as B}from"react";import{jsx as m}from"react/jsx-runtime";var I=()=>{let{locale:o}=B(T);return m(S,{p:2,children:m(v,{textAlign:"center",children:o.components.Empty.noNotifications})})},s=I;import{CircularProgress as F,Stack as R}from"@mui/material";import{jsx as f}from"react/jsx-runtime";var E=()=>f(R,{py:2,alignItems:"center",children:f(F,{})}),d=E;import{Stack as w,Typography as z}from"@mui/material";import{TeknifyContext as A}from"@teknify/react";import{use as H}from"react";import{jsx as l}from"react/jsx-runtime";var L=()=>{let{locale:o}=H(A);return l(w,{p:2,bgcolor:"white",justifyContent:"center",borderBottom:"1px solid #ddd",children:l(z,{fontWeight:600,children:o.components.NotificationHeader.notifications})})},y=L;import{ChecklistOutlined as M,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{TeknifyContext as K}from"@teknify/react";import{useContext as Q}from"react";import{jsx as t,jsxs as a}from"react/jsx-runtime";var U=({notification:o})=>{let{locale:i}=Q(K);return 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},...o.isRead?{}:{cursor:"pointer",":hover":{color:"primary.main"}}},...o.isRead?{}:{onClick:o.markAsRead},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,{flex:1,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:i.components.NotificationItem.markAsRead,children:t(G,{size:"small",onClick:o.markAsRead,children:t(M,{fontSize:"small"})})})})]})},h=U;import{Box as V,Popover as X}from"@mui/material";import{jsx as u}from"react/jsx-runtime";var Y=({anchorElement:o,children:i,onClose:n,open:p})=>u(X,{open:!!p,anchorEl:o,onClose:n,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:u(V,{height:500,width:400,bgcolor:"#fafafa",children:i})}),C=Y;import{jsx as $}from"react/jsx-runtime";var _=()=>$(Z,{components:{Bell:c,NotificationHeader:y,NotificationPopover:C,NotificationItem:h,Loader:d,Empty:s}}),Wo=_;export{Wo as default};

package/dist/esm/components/inbox/loader.d.ts

@@ -0,0 +1,6 @@
+import { LoaderProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const Loader: FC<LoaderProps>;
+
+export { Loader as default };

package/dist/esm/components/inbox/loader.js

@@ -0,0 +1,2 @@
+"use client"
+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};

package/dist/esm/components/inbox/notification-header.d.ts

@@ -0,0 +1,6 @@
+import { NotificationHeaderProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const NotificationHeader: FC<NotificationHeaderProps>;
+
+export { NotificationHeader as default };

package/dist/esm/components/inbox/notification-header.js

@@ -0,0 +1,2 @@
+"use client"
+import{Stack as i,Typography as e}from"@mui/material";import{TeknifyContext as r}from"@teknify/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};

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

@@ -0,0 +1,6 @@
+import { NotificationItemProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const NotificationItem: FC<NotificationItemProps>;
+
+export { NotificationItem as default };

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

@@ -0,0 +1,2 @@
+"use client"
+import{ChecklistOutlined as s,Notifications as d}from"@mui/icons-material";import{Avatar as c,Box as p,Card as l,IconButton as n,Stack as i,Tooltip as m,Typography as r}from"@mui/material";import{TeknifyContext as h}from"@teknify/react";import{useContext as g}from"react";import{jsx as t,jsxs as e}from"react/jsx-runtime";var k=({notification:o})=>{let{locale:a}=g(h);return e(l,{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},...o.isRead?{}:{cursor:"pointer",":hover":{color:"primary.main"}}},...o.isRead?{}:{onClick:o.markAsRead},children:[t(i,{children:e(i,{direction:"row",spacing:2,children:[o.icon?t(c,{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"})}),e(i,{flex:1,children:[t(r,{fontSize:14,fontWeight:600,children:o.title}),t(r,{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(m,{title:a.components.NotificationItem.markAsRead,children:t(n,{size:"small",onClick:o.markAsRead,children:t(s,{fontSize:"small"})})})})]})},f=k;export{f as default};

package/dist/esm/components/inbox/notification-popover.d.ts

@@ -0,0 +1,6 @@
+import { NotificationPopoverProps } from '@teknify/react';
+import { FC } from 'react';
+
+declare const NotificationPopover: FC<NotificationPopoverProps>;
+
+export { NotificationPopover as default };

package/dist/esm/components/inbox/notification-popover.js

@@ -0,0 +1,2 @@
+"use client"
+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};

package/dist/esm/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TeknifyMuiInbox } from './inbox/index.js';
+import 'react';

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+"use client"
+import{TeknifyInbox as Z}from"@teknify/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 N=({onClick:o,counts:e,ref:n,active:p})=>i(b,{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(x,{})})}),m=N;import{Stack as S,Typography as T}from"@mui/material";import{TeknifyContext as v}from"@teknify/react";import{use as I}from"react";import{jsx as c}from"react/jsx-runtime";var B=()=>{let{locale:o}=I(v);return c(S,{p:2,children:c(T,{textAlign:"center",children:o.components.Empty.noNotifications})})},s=B;import{CircularProgress as F,Stack as R}from"@mui/material";import{jsx as f}from"react/jsx-runtime";var E=()=>f(R,{py:2,alignItems:"center",children:f(F,{})}),d=E;import{Stack as w,Typography as z}from"@mui/material";import{TeknifyContext as A}from"@teknify/react";import{use as H}from"react";import{jsx as l}from"react/jsx-runtime";var L=()=>{let{locale:o}=H(A);return l(w,{p:2,bgcolor:"white",justifyContent:"center",borderBottom:"1px solid #ddd",children:l(z,{fontWeight:600,children:o.components.NotificationHeader.notifications})})},y=L;import{ChecklistOutlined as M,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{TeknifyContext as K}from"@teknify/react";import{useContext as Q}from"react";import{jsx as t,jsxs as a}from"react/jsx-runtime";var U=({notification:o})=>{let{locale:e}=Q(K);return 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},...o.isRead?{}:{cursor:"pointer",":hover":{color:"primary.main"}}},...o.isRead?{}:{onClick:o.markAsRead},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,{flex:1,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:e.components.NotificationItem.markAsRead,children:t(G,{size:"small",onClick:o.markAsRead,children:t(M,{fontSize:"small"})})})})]})},h=U;import{Box as V,Popover as X}from"@mui/material";import{jsx as u}from"react/jsx-runtime";var Y=({anchorElement:o,children:e,onClose:n,open:p})=>u(X,{open:!!p,anchorEl:o,onClose:n,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:u(V,{height:500,width:400,bgcolor:"#fafafa",children:e})}),k=Y;import{jsx as j}from"react/jsx-runtime";var _=()=>j(Z,{components:{Bell:m,NotificationHeader:y,NotificationPopover:k,NotificationItem:h,Loader:d,Empty:s}}),$=_;export{$ as TeknifyMuiInbox};

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TeknifyMuiInbox } from './components/inbox/index.js';
+import 'react';

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+"use client"
+import{TeknifyInbox as Z}from"@teknify/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 N=({onClick:o,counts:e,ref:n,active:p})=>i(b,{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(x,{})})}),m=N;import{Stack as S,Typography as T}from"@mui/material";import{TeknifyContext as v}from"@teknify/react";import{use as I}from"react";import{jsx as c}from"react/jsx-runtime";var B=()=>{let{locale:o}=I(v);return c(S,{p:2,children:c(T,{textAlign:"center",children:o.components.Empty.noNotifications})})},s=B;import{CircularProgress as F,Stack as R}from"@mui/material";import{jsx as f}from"react/jsx-runtime";var E=()=>f(R,{py:2,alignItems:"center",children:f(F,{})}),d=E;import{Stack as w,Typography as z}from"@mui/material";import{TeknifyContext as A}from"@teknify/react";import{use as H}from"react";import{jsx as l}from"react/jsx-runtime";var L=()=>{let{locale:o}=H(A);return l(w,{p:2,bgcolor:"white",justifyContent:"center",borderBottom:"1px solid #ddd",children:l(z,{fontWeight:600,children:o.components.NotificationHeader.notifications})})},y=L;import{ChecklistOutlined as M,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{TeknifyContext as K}from"@teknify/react";import{useContext as Q}from"react";import{jsx as t,jsxs as a}from"react/jsx-runtime";var U=({notification:o})=>{let{locale:e}=Q(K);return 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},...o.isRead?{}:{cursor:"pointer",":hover":{color:"primary.main"}}},...o.isRead?{}:{onClick:o.markAsRead},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,{flex:1,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:e.components.NotificationItem.markAsRead,children:t(G,{size:"small",onClick:o.markAsRead,children:t(M,{fontSize:"small"})})})})]})},h=U;import{Box as V,Popover as X}from"@mui/material";import{jsx as u}from"react/jsx-runtime";var Y=({anchorElement:o,children:e,onClose:n,open:p})=>u(X,{open:!!p,anchorEl:o,onClose:n,anchorOrigin:{horizontal:"center",vertical:"bottom"},anchorReference:"anchorEl",children:u(V,{height:500,width:400,bgcolor:"#fafafa",children:e})}),k=Y;import{jsx as j}from"react/jsx-runtime";var _=()=>j(Z,{components:{Bell:m,NotificationHeader:y,NotificationPopover:k,NotificationItem:h,Loader:d,Empty:s}}),$=_;export{$ as TeknifyMuiInbox};

package/package.json

@@ -0,0 +1,89 @@
+{
+  "browser": "./dist/esm/index.js",
+  "browserslist": {
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ]
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sanitize-html": "^2.17.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@types/sanitize-html": "^2.16.0"
+  },
+  "exports": {
+    ".": {
+      "browser": {
+        "default": "./dist/esm/index.js",
+        "types": "./dist/esm/index.d.ts"
+      },
+      "import": {
+        "default": "./dist/esm/index.js",
+        "types": "./dist/esm/index.d.ts"
+      },
+      "require": {
+        "default": "./dist/cjs/index.cjs",
+        "types": "./dist/cjs/index.d.cts"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "dist/cjs/**/*",
+    "dist/esm/**/*"
+  ],
+  "license": "MIT",
+  "main": "./dist/cjs/index.js",
+  "name": "@tnf-dev/mui",
+  "nx": {
+    "tags": [
+      "type:package"
+    ]
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.2",
+    "@mui/material": "^7.1.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sanitize-html": "^2.17.0"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "react-dom": {
+        "optional": true
+      }
+    }
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "directory": "packages/mui",
+    "type": "git",
+    "url": "git+https://github.com/teknix-saas/teknify-sdk"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production tsup && npm run check-exports",
+    "check-exports": "attw --pack .",
+    "dev": "tsup --watch"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "types": "./dist/esm/index.d.ts",
+  "version": "1.0.1-10"
+}