@atomazing-org/design-system
Version:
A library providing a set of useful utils, MUI style extensions, and components to build your application.
270 lines (259 loc) • 20.4 kB
JavaScript
import V from"@emotion/styled";import{Button as X}from"@mui/material";var J=V(X)`
padding: 10px 16px;
border-radius: 16px;
font-size: 16px;
margin: 8px;
`;import Q from"react";import L from"@emotion/styled";import B from"@mui/icons-material/ErrorOutlineRounded";import{Box as b}from"@mui/material";import{jsx as v,jsxs as x}from"react/jsx-runtime";var S=class extends Q.Component{constructor(t){super(t),this.state={hasError:!1}}static getDerivedStateFromError(t){return{hasError:!0,error:t}}componentDidCatch(t,o){console.error("Error:",t),console.error("Error Info:",o)}render(){var n,r,a;let{state:t,props:o}=this;return t.hasError?x(j,{children:[v(Z,{children:v(b,{children:"Something went wrong.\xA0"})}),x("h3",{children:[x(b,{style:{color:"#ff3131",display:"inline-block"},children:[v(B,{sx:{verticalAlign:"middle",mb:"4px"}})," ","ERROR:"]})," ",x(b,{translate:"no",children:["[",(n=t.error)==null?void 0:n.name,"] ",(r=t.error)==null?void 0:r.message]}),x(b,{style:{color:"#ff3131",display:"inline-block"},children:[v(B,{sx:{verticalAlign:"middle",mb:"4px"}})," ","Stack:"]})," ",x(b,{translate:"no",children:["[",(a=t.error)==null?void 0:a.stack,"]"]})]})]}):o.children}},j=L.div`
margin: 0 8vw;
@media (max-width: 768px) {
margin: 0;
}
`,Z=L.h1`
margin-top: 32px;
margin-bottom: 32px;
font-size: 36px;
color: #ff3131;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
@media (max-width: 768px) {
text-align: left;
justify-content: left;
font-size: 30px;
margin-top: 0;
margin-bottom: 0;
}
`;import{useEffect as q,useState as K}from"react";import ee from"@emotion/styled";import{Box as te,CircularProgress as re}from"@mui/material";import{Fragment as ie,jsx as P,jsxs as ae}from"react/jsx-runtime";var oe=()=>{let[e,t]=K(!1);return q(()=>{let o=setTimeout(()=>{t(!0)},100);return()=>clearTimeout(o)},[]),P(ne,{"aria-live":"polite",role:"status",children:e&&ae(ie,{children:[P(re,{"aria-label":"loading",size:80,thickness:4}),P("h3",{style:{opacity:.8},children:"Loading Page..."})]})})},ne=ee(te)`
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
gap: 8px;
`;import se from"@emotion/styled";var le=se.code`
background: #000000c8;
color: white;
padding: 4px 6px;
border-radius: 8px;
`;import pe from"@mui/icons-material/BrightnessAutoRounded";import de from"@mui/icons-material/DarkModeRounded";import me from"@mui/icons-material/LightModeRounded";import ue from"@mui/icons-material/PersonalVideoRounded";import{jsx as w}from"react/jsx-runtime";var k=32,ce=[{label:"Auto",value:"auto",icon:w(pe,{color:"inherit",sx:{fontSize:k}})},{label:"System",value:"system",icon:w(ue,{color:"inherit",sx:{fontSize:k}})},{label:"Light",value:"light",icon:w(me,{color:"inherit",sx:{fontSize:k}})},{label:"Dark",value:"dark",icon:w(de,{color:"inherit",sx:{fontSize:k}})}];var T={fontDark:"#101727",fontLight:"#f0f0f0",brand:"#9FA9EA",accent:"#F3503A",muted:"#64748B",success:"#2E7D32",info:"#0288D1",warning:"#ED6C02",error:"#D32F2F",neutral:"#64748B"};import{createContext as fe,useContext as he}from"react";var M=fe(void 0),xe=()=>{let e=he(M);if(!e)throw new Error("useThemeSettings must be used within ThemeProviderWrapper");return e};import{useMemo as y,useState as U,useEffect as A}from"react";import{ThemeProvider as Ye}from"@emotion/react";import{ThemeProvider as Ve}from"@mui/material/styles";var R={MuiTooltip:{defaultProps:{disableInteractive:!0},styleOverrides:{tooltip:({theme:e})=>({backdropFilter:"blur(6px)",WebkitBackdropFilter:"blur(6px)",padding:"8px 16px",borderRadius:e.shape.borderRadius,fontSize:"12px"})}},MuiButton:{styleOverrides:{root:({theme:e})=>({padding:"12px 24px",borderRadius:e.shape.borderRadius}),contained:{boxShadow:"none"}}},MuiSkeleton:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiSelect:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius}),select:{display:"flex",justifyContent:"flex-start",alignItems:"center",gap:"4px"}}},MuiDialog:{defaultProps:{slotProps:{paper:{style:{padding:"12px",borderRadius:24,minWidth:"400px"}}}},styleOverrides:{root:{"& .MuiDialog-container":{backdropFilter:"blur(4px)"}}}},MuiAvatar:{styleOverrides:{root:{fontWeight:500}}},MuiAlert:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiTextField:{defaultProps:{variant:"outlined"},styleOverrides:{root:({theme:e})=>({"& .MuiInputBase-root":{borderRadius:e.shape.borderRadius}})}},MuiOutlinedInput:{styleOverrides:{root:({theme:e})=>({color:e.palette.primary.main,"& fieldset":{borderColor:e.palette.primary.main},"&:hover fieldset":{borderColor:e.palette.primary.dark},"&.Mui-focused fieldset":{borderColor:e.palette.primary.main}})}},MuiInputLabel:{styleOverrides:{root:({theme:e})=>({color:e.palette.primary.main,"&.Mui-focused":{color:e.palette.primary.main}})}},MuiFormHelperText:{styleOverrides:{root:({theme:e})=>({color:e.palette.error.main})}},MuiPaper:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius}),elevation8:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiMenuItem:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiBottomNavigationAction:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"12px",margin:0,maxHeight:"none"})}},MuiDialogContent:{styleOverrides:{root:{padding:0}}},MuiSlider:{styleOverrides:{valueLabel:({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"6px 14px","&::before, &::after":{display:"none"}})}},MuiCircularProgress:{styleOverrides:{circle:{strokeLinecap:"round"}}},MuiTab:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiAccordion:{styleOverrides:{root:{"&::before":{display:"none"}}}}};import{createTheme as G}from"@mui/material";var d={...T},l=()=>d,D=e=>{d={...T,...e}},ge={get fontDark(){return d.fontDark},get fontLight(){return d.fontLight},get brand(){return d.brand},get accent(){return d.accent},get muted(){return d.muted},get success(){return d.success},get info(){return d.info},get warning(){return d.warning},get error(){return d.error},get neutral(){return d.neutral}};var z={defaultProps:{variantMapping:{text_xl_regular:"p",text_lg_regular:"p",text_md_regular:"p",text_sm_regular:"p",text_xs_regular:"p",text_2xs_regular:"p",text_xl_bold:"p",text_lg_bold:"p",text_md_bold:"p",text_sm_bold:"p",text_xs_bold:"p",text_2xs_bold:"p",text_xl_semibold:"p",text_lg_semibold:"p",text_md_semibold:"p",text_sm_semibold:"p",text_xs_semibold:"p",text_2xs_semibold:"p",text_xl_thin:"p",text_lg_thin:"p",text_md_thin:"p",text_sm_thin:"p",text_xs_thin:"p",text_2xs_thin:"p",header_2xl_regular:"h1",header_xl_regular:"h2",header_lg_regular:"h3",header_md_regular:"h4",header_sm_regular:"h5",header_xs_regular:"h6",header_2xl_bold:"h1",header_xl_bold:"h2",header_lg_bold:"h3",header_md_bold:"h4",header_sm_bold:"h5",header_xs_bold:"h6",header_2xl_semibold:"h1",header_xl_semibold:"h2",header_lg_semibold:"h3",header_md_semibold:"h4",header_sm_semibold:"h5",header_xs_semibold:"h6"}}},W={text_xl_regular:{font:"400 20px/30px inherit inherit"},text_lg_regular:{font:"400 18px/28px inherit inherit"},text_md_regular:{font:"400 16px/24px inherit inherit"},text_sm_regular:{font:"400 14px/20px inherit inherit"},text_xs_regular:{font:"400 12px/18px inherit inherit"},text_2xs_regular:{font:"400 10px/14px inherit inherit"},text_xl_bold:{font:"700 20px/30px inherit inherit"},text_lg_bold:{font:"700 18px/28px inherit inherit"},text_md_bold:{font:"700 16px/24px inherit inherit"},text_sm_bold:{font:"700 14px/20px inherit inherit"},text_xs_bold:{font:"700 12px/18px inherit inherit"},text_2xs_bold:{font:"700 10px/14px inherit inherit"},text_xl_semibold:{font:"600 20px/30px inherit inherit"},text_lg_semibold:{font:"600 18px/28px inherit inherit"},text_md_semibold:{font:"600 16px/24px inherit inherit"},text_sm_semibold:{font:"600 14px/20px inherit inherit"},text_xs_semibold:{font:"600 12px/18px inherit inherit"},text_2xs_semibold:{font:"600 10px/14px inherit inherit"},text_xl_thin:{font:"100 20px/30px inherit inherit"},text_lg_thin:{font:"100 18px/28px inherit inherit"},text_md_thin:{font:"100 16px/24px inherit inherit"},text_sm_thin:{font:"100 14px/20px inherit inherit"},text_xs_thin:{font:"100 12px/18px inherit inherit"},text_2xs_thin:{font:"100 10px/14px inherit inherit"},header_2xl_regular:{font:"400 34px/42px inherit inherit"},header_xl_regular:{font:"400 32px/40px inherit inherit"},header_lg_regular:{font:"400 28px/36px inherit inherit"},header_md_regular:{font:"400 24px/32px inherit inherit"},header_sm_regular:{font:"400 20px/28px inherit inherit"},header_xs_regular:{font:"400 18px/26px inherit inherit"},header_2xl_bold:{font:"700 34px/42px inherit inherit"},header_xl_bold:{font:"700 32px/40px inherit inherit"},header_lg_bold:{font:"700 28px/36px inherit inherit"},header_md_bold:{font:"700 24px/32px inherit inherit"},header_sm_bold:{font:"700 20px/28px inherit inherit"},header_xs_bold:{font:"700 18px/26px inherit inherit"},header_2xl_semibold:{font:"600 34px/42px inherit inherit"},header_xl_semibold:{font:"600 32px/40px inherit inherit"},header_lg_semibold:{font:"600 28px/36px inherit inherit"},header_md_semibold:{font:"600 24px/32px inherit inherit"},header_sm_semibold:{font:"600 20px/28px inherit inherit"},header_xs_semibold:{font:"600 18px/26px inherit inherit"}};var F=(e,t="light",o,n,r)=>{let a=t==="dark",i=G({palette:{mode:t}}),s={palette:{primary:{...i.palette.primary,main:e},brand:i.palette.augmentColor({color:{main:e}}),neutral:i.palette.augmentColor({color:{main:l().neutral}}),accent:i.palette.augmentColor({color:{main:l().accent}}),muted:i.palette.augmentColor({color:{main:l().muted}}),...o?{secondary:{...i.palette.secondary,main:o}}:{},error:{...i.palette.error,main:l().error},warning:{...i.palette.warning,main:l().warning},success:{...i.palette.success,main:l().success},info:{...i.palette.info,main:l().info},background:(()=>{let p=a?{default:"#1C1C1E",paper:"#2C2C2E"}:{default:"#F2F2F7",paper:"#FFFFFF"};return{...i.palette.background,...p,...n}})(),divider:a?"rgba(255,255,255,0.12)":"rgba(0,0,0,0.12)"},components:{...R,MuiTypography:z},typography:{...W,fontFamily:'var(--app-font-family, "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif)'},shape:{borderRadius:24}};return G(i,s,r!=null?r:{})};import{useMemo as Fe}from"react";import{Global as Oe,css as Ie}from"@emotion/react";import{useTheme as Ee}from"@mui/material/styles";var N=e=>/^#([\dA-Fa-f]{3}|[\dA-Fa-f]{6})$/.test(e),C=e=>{if(!N(e))return console.error("Invalid hex color provided:",e),l().fontDark;let t=e.slice(1),o=t.length===3?t.split("").map(p=>p+p).join(""):t,n=Number.parseInt(o.slice(0,2),16),r=Number.parseInt(o.slice(2,4),16),a=Number.parseInt(o.slice(4,6),16),i=Math.round((n*299+r*587+a*114)/1e3),s=l();return i>128?s.fontDark:s.fontLight},be=e=>C(e)===l().fontLight;var ye=()=>{let e=new Date().getHours();return e>=5&&e<12?"Good morning":e>12&&e<18?"Good afternoon":"Good evening"};var _e=e=>{let t=e.getFullYear(),o=String(e.getMonth()+1).padStart(2,"0"),n=String(e.getDate()).padStart(2,"0");return`${t}-${o}-${n}`};var ve=()=>{let e=(typeof navigator=="undefined"?"":navigator.userAgent).toLowerCase();return e.includes("windows nt")?"Windows":e.includes("iphone")||e.includes("ipad")||e.includes("ipod")?"iOS":e.includes("mac")?"macOS":e.includes("android")?"Android":e.includes("linux")?"Linux":"Unknown"},ke=()=>{let e=(typeof navigator=="undefined"?"":navigator.userAgent).toLowerCase();return e.includes("edg")?"Edge":e.includes("chrome")?"Chrome":e.includes("firefox")?"Firefox":e.includes("safari")?"Safari":"Unknown"},we={os:typeof navigator=="undefined"?"Unknown":ve(),browser:typeof navigator=="undefined"?"Unknown":ke()};var O=(e,t)=>{switch(e){case"light":return!1;case"dark":return!0;case"system":return t==="dark";default:return!1}};var Te=(e,t)=>{let o=t!=null?t:typeof navigator=="undefined"?"en-US":navigator.language,n=new Date;e=new Date(e);let r=Math.floor((n.getTime()-e.getTime())/1e3),a=new Intl.RelativeTimeFormat(o,{numeric:"auto"});if(r<60)return a.format(-r,"second");if(r<3600){let s=Math.floor(r/60);return a.format(-s,"minute")}if(r<86400){let s=Math.floor(r/3600);return a.format(-s,"hour")}let i=Math.floor(r/86400);return a.format(-i,"day")},Ce=(e,t)=>{let o=t!=null?t:typeof navigator=="undefined"?"en-US":navigator.language,n=new Date;e=new Date(e);let r=(e.getTime()-n.getTime())/1e3,a=Math.floor(r/(60*60)),i=Math.floor((r-60*60*a)/60),s=Math.floor(r-60*60*a-60*i),p=new Intl.RelativeTimeFormat(o,{numeric:"auto"});if(i===0&&s<60)return p.format(s,"second");if(a===0&&i<60)return p.format(i,"minute");if(a<24){let f=`${new Intl.RelativeTimeFormat(o,{numeric:"auto"}).format(a,"hour")}`,h=` ${new Intl.RelativeTimeFormat(o,{localeMatcher:"lookup",numeric:"always",style:"long"}).format(i,"minute")}`.replace(/^\D+/,"");return`${f} ${h}`}let _=Math.floor(s/86400);return p.format(_,"day")};import{useEffect as Se,useState as Pe}from"react";var Me=(e=768)=>{let[t,o]=Pe(!1);return Se(()=>{let n=()=>{o(window.innerWidth<e)};n();let r=()=>n();return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}},[e]),t};import{useState as Re,useEffect as De}from"react";var I=()=>{let[e,t]=Re("unknown");return De(()=>{let o=r=>{t(r.matches?"dark":"light")},n=globalThis.matchMedia("(prefers-color-scheme: dark)");return t(n.matches?"dark":"light"),n.addEventListener("change",o),()=>{n.removeEventListener("change",o)}},[]),e};import{jsx as Ae}from"react/jsx-runtime";var E=({fontFamily:e})=>{let t=Ee(),o=t.palette.mode==="dark",n=t.palette.primary.main,r=t.palette.background.default,a=t.palette.background.paper,i=Fe(()=>C(n),[n]);return Ae(Oe,{styles:Ie`
/* Allow application to control font via CSS var or prop */
:root {
${e?`--app-font-family: ${e};`:""}
}
* {
font-family:
var(
--app-font-family,
"Mulish",
system-ui,
-apple-system,
"Segoe UI",
Roboto,
Arial
),
sans-serif !important;
-webkit-tap-highlight-color: transparent;
&::selection {
background-color: ${`${n}e1`};
color: ${i};
}
}
html,
body,
#root {
height: 100%;
margin: 0;
}
:root {
height: 100%;
/* default fallback font; apps can override via --app-font-family */
font-family: var(
--app-font-family,
"Mulish",
system-ui,
-apple-system,
"Segoe UI",
Roboto,
Arial,
sans-serif
)
sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: ${o?"dark":"light"};
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
height: 100%;
overflow: auto;
touch-action: manipulation;
background: ${r};
background-attachment: fixed;
background-size: cover;
transition: 0.3s background;
/* Firefox */
scrollbar-color: ${n} ${r};
scrollbar-width: thin;
::-webkit-scrollbar {
width: 8px;
background-color: ${r};
}
::-webkit-scrollbar-thumb {
background-color: ${n};
border-radius: 64px;
}
::-webkit-scrollbar-thumb:hover {
background-color: ${`${n}d8`};
}
::-webkit-scrollbar-track {
border-radius: 64px;
background-color: ${r};
}
}
a {
text-decoration: none;
color: inherit;
}
img {
user-select: none;
}
input[type="file"]::-webkit-file-upload-button {
display: none;
}
input[type="datetime-local"]:placeholder-shown {
color: transparent !important;
}
pre {
padding: 16px;
border-radius: 18px;
overflow-x: auto;
}
.MuiDialogContent-root,
.MuiDrawer-paper,
.customScrollbar,
textarea {
/* Firefox */
scrollbar-color: ${n} ${a};
scrollbar-width: thin;
::-webkit-scrollbar {
width: 8px;
background-color: ${a};
}
::-webkit-scrollbar-thumb {
background-color: ${n};
border-radius: 64px;
}
::-webkit-scrollbar-thumb:hover {
background-color: ${`${n}d8`};
}
::-webkit-scrollbar-track {
border-radius: 64px;
background-color: ${a};
}
}
/* react-spring-bottom-sheet styles */
div[role="dialog"] {
border-radius: 42px 42px 0 0;
z-index: 9999999;
}
`})};import{keyframes as u}from"@emotion/react";var $e=u`
from {
opacity: 0;
transform: translateX(-40px);
}
to {
opacity: 1;
transform: translateX(0);
}
`,Be=u`
from {
opacity: 0;
}
to {
opacity: 1;
}
`,Le=u`
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
`,ze=u`
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
`,We=u`
from {
transform: scale(0);
}
to {
transform: scale(1);
}
`,Ge=(e,t=12)=>u`
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 ${e}b2;
}
70% {
transform: scale(1);
box-shadow: 0 0 0 ${t}px ${e}00;
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 ${e}00;
}
`,Ne=e=>u`
0% {
filter: none;
}
50% {
filter: drop-shadow(0 0 10px ${e}78);
}
100% {
filter: none;
}
`,Ue=u`
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.9) translateX(-2px);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
`,He=u`
0% {
transform: translateY(0);
}
30% {
transform: translateY(-5px);
}
50% {
transform: translateY(2px);
}
70% {
transform: translateY(-2px);
}
100% {
transform: translateY(0);
}
`;import{jsx as $,jsxs as Je}from"react/jsx-runtime";var Xe=({children:e,fontFamily:t,themes:o,colorPaletteOverride:n,themeOverrides:r})=>{let a=I();A(()=>{D(n)},[n]);let[i,s]=U("system"),[p,_]=U("auto");A(()=>{if(globalThis.window!==void 0)try{let m=globalThis.localStorage.getItem("appSettings");if(m){let c=JSON.parse(m);c.theme&&s(c.theme),c.darkMode&&_(c.darkMode)}}catch(m){}},[]),A(()=>{if(globalThis.window!==void 0)try{globalThis.localStorage.setItem("appSettings",JSON.stringify({theme:i,darkMode:p}))}catch(m){}},[i,p]);let f=y(()=>o&&o.length>0?o:[{name:"Default",primaryColor:l().brand}],[o]),h=y(()=>i==="system"||a==="unknown"?f[0]:f.find(m=>m.name===i)||f[0],[a,i,f]),g=y(()=>O(p,a)?"dark":"light",[p,a]),H=y(()=>{var c;let m=(c=h.background)==null?void 0:c[g];return F(h.primaryColor,g,h.secondaryColor,m,r)},[h,g,r]),Y=y(()=>({darkMode:g==="dark"}),[g]);return $(M.Provider,{value:{theme:i,darkMode:p,setTheme:s,setDarkMode:_},children:$(Ve,{theme:H,children:Je(Ye,{theme:Y,children:[$(E,{fontFamily:t}),e]})})})};export{ge as ColorPalette,J as DialogBtn,S as ErrorBoundary,E as GlobalStyles,oe as Loading,le as PathName,Xe as ThemeProviderWrapper,R as commonComponentProps,F as createCustomTheme,ce as darkModeOptions,T as defaultColorPalette,ye as displayGreeting,Be as fadeIn,$e as fadeInLeft,l as getColorPalette,_e as getDayIdentifier,C as getFontColor,He as installAppAnimation,O as isDarkMode,be as isFontLight,N as isHexColor,Ue as logoutAnimation,Ne as progressPulse,Ge as pulseAnimation,We as scale,D as setColorPaletteOverride,Le as slideIn,ze as slideInBottom,we as systemInfo,Te as timeAgo,Ce as timeAgoFromStart,Me as useResponsiveDisplay,I as useSystemTheme,xe as useThemeSettings};
//# sourceMappingURL=index.mjs.map