@tnf-dev/mui 1.0.1-5 → 1.0.1-6
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.
- package/README.md +2 -1
- package/dist/cjs/components/inbox/index.d.cts +0 -1
- package/dist/cjs/components/index.d.cts +0 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/index.d.cts +0 -1
- package/dist/esm/components/inbox/index.d.ts +0 -1
- package/dist/esm/components/index.d.ts +0 -1
- package/dist/esm/index.d.ts +0 -1
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
@@ -15,7 +15,8 @@ npm install @tnf-dev/mui
|
|
15
15
|
To use the components from this package, you can import them into your React application as follows:
|
16
16
|
|
17
17
|
```tsx
|
18
|
-
import {
|
18
|
+
import { TeknifyProvider } from '@tnf-dev/react';
|
19
|
+
import { TeknifyMuiInbox } from '@tnf-dev/mui';
|
19
20
|
|
20
21
|
// Example usage in a component
|
21
22
|
const MyComponent = () => {
|
package/dist/cjs/index.cjs
CHANGED
@@ -1,2 +1,2 @@
|
|
1
1
|
"use client"
|
2
|
-
"use strict";var
|
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,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of H(i))!M.call(o,n)&&n!==e&&g(o,n,{get:()=>i[n],enumerable:!(p=R(i,n))||p.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: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,{})})}),x=W;var f=require("@mui/material"),b=require("@tnf-dev/react"),P=require("react"),h=require("react/jsx-runtime"),q=()=>{let{locale:o}=(0,P.use)(b.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:p})=>(0,C.jsx)(y.Popover,{open:!!p,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:x,NotificationHeader:B,NotificationPopover:F,NotificationItem:I,Loader:N,Empty:S}}),w=Q;0&&(module.exports={TeknifyMuiInbox});
|
package/dist/cjs/index.d.cts
CHANGED
package/dist/esm/index.d.ts
CHANGED
package/dist/esm/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
1
|
"use client"
|
2
|
-
|
2
|
+
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,{})})}),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: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:c,NotificationHeader:y,NotificationPopover:k,NotificationItem:h,Loader:d,Empty:f}}),Z=Y;export{Z as TeknifyMuiInbox};
|
package/package.json
CHANGED