@atomazing-org/design-system/dist/index.mjs

A library providing a set of useful utils, MUI style extensions, and components to build your application.

import N from"@emotion/styled";import{Button as W}from"@mui/material";var H=N(W)`
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 16px;
  margin: 8px;
`;import G from"react";import R from"@emotion/styled";import O from"@mui/icons-material/ErrorOutlineRounded";import{Box as h}from"@mui/material";import{jsx as u,jsxs as c}from"react/jsx-runtime";var k=class extends G.Component{constructor(r){super(r),this.state={hasError:!1}}static getDerivedStateFromError(r){return{hasError:!0,error:r}}componentDidCatch(r,t){console.error("Error:",r),console.error("Error Info:",t)}render(){var o,i,n;let{state:r,props:t}=this;return r.hasError?c(Y,{children:[u(U,{children:u(h,{children:"\u041E\u0448\u0438\u0431\u043A\u0430.\xA0"})}),c("h3",{children:[c(h,{style:{color:"#ff3131",display:"inline-block"},children:[u(O,{sx:{verticalAlign:"middle",mb:"4px"}})," ","ERROR:"]})," ",c(h,{translate:"no",children:["[",(o=r.error)==null?void 0:o.name,"] ",(i=r.error)==null?void 0:i.message]}),c(h,{style:{color:"#ff3131",display:"inline-block"},children:[u(O,{sx:{verticalAlign:"middle",mb:"4px"}})," ","Stack:"]})," ",c(h,{translate:"no",children:["[",(n=r.error)==null?void 0:n.stack,"]"]})]})]}):t.children}},Y=R.div`
  margin: 0 8vw;
  @media (max-width: 768px) {
    margin: 0;
  }
`,U=R.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 V,useState as X}from"react";import J from"@emotion/styled";import{Box as j,CircularProgress as Q}from"@mui/material";import{Fragment as K,jsx as v,jsxs as ee}from"react/jsx-runtime";var Z=()=>{let[e,r]=X(!1);return V(()=>{let t=setTimeout(()=>{r(!0)},100);return()=>clearTimeout(t)},[]),v(q,{children:e&&ee(K,{children:[v(Q,{"aria-label":"loading",size:80,thickness:4}),v("h3",{style:{opacity:.8},children:"Loading Page..."})]})})},q=J(j)`
  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 re from"@emotion/styled";var te=re.code`
  background: #000000c8;
  color: white;
  padding: 4px 6px;
  border-radius: 8px;
`;import{createContext as oe,useContext as ie}from"react";var T=oe(void 0),ne=()=>{let e=ie(T);if(!e)throw new Error("useThemeSettings must be used within ThemeProviderWrapper");return e};import{useMemo as b,useState as $,useEffect as $e}from"react";import{ThemeProvider as ze}from"@emotion/react";import{ThemeProvider as Ne}from"@mui/material/styles";var s={fontDark:"#101727",fontLight:"#f0f0f0",darkMode:"#383838",lightMode:"#ffffff",purple:"#b624ff",red:"#ff3131",orange:"#ff9318",orangeDark:"#ff9500"},M={Future:{primaryColor:"#203959",secondaryColor:"#ffffff"},Orange:{primaryColor:"#f6883d",secondaryColor:"#ffffff"},"Neo Mint":{primaryColor:"#00f5d4",secondaryColor:"#e4fff8"},"Cyber Grape":{primaryColor:"#4b0082",secondaryColor:"#f4f0fa"},"Coral Glass":{primaryColor:"#ff6f61",secondaryColor:"#fef2f2"},"Blueberry Ice":{primaryColor:"#3f51b5",secondaryColor:"#e8eaf6"},"Dark Purple":{primaryColor:s.purple},"Light Purple":{primaryColor:s.purple,secondaryColor:"#edeef6"},"Dark Blue":{primaryColor:"#106cff",secondaryColor:"#090815"},"Light Blue":{primaryColor:"#278ad2",secondaryColor:"#dddaf6"},"Dark Pink":{primaryColor:"#f2369d",secondaryColor:"#191218"},"Light Pink":{primaryColor:"#e5369a",secondaryColor:"#ffe3ff"},"Blush Blossom":{primaryColor:"#EC407A",secondaryColor:"#FCE4EC"},Cheesecake:{primaryColor:"#E14C94",secondaryColor:"#FDF0D5"},"Mystic Coral":{primaryColor:"#ff7b9c",secondaryColor:"#4a2333"},"Dark Orange":{primaryColor:"#FF5631",secondaryColor:"#0D0D0D"},"Light Orange":{primaryColor:"#F26E56",secondaryColor:"#F6F6F6"},Aurora:{primaryColor:"#00e952",secondaryColor:"#011926"}};var E=e=>/^#([\dA-Fa-f]{3}|[\dA-Fa-f]{6})$/.test(e),m=e=>{if(!E(e))return console.error("Invalid hex color provided:",e),s.fontDark;let r=e.slice(1),t=r.length===3?r.split("").map(l=>l+l).join(""):r,o=Number.parseInt(t.slice(0,2),16),i=Number.parseInt(t.slice(2,4),16),n=Number.parseInt(t.slice(4,6),16);return Math.round((o*299+i*587+n*114)/1e3)>128?s.fontDark:s.fontLight},ae=e=>m(e)===s.fontLight;var w={MuiTooltip:{defaultProps:{disableInteractive:!0},styleOverrides:{tooltip:({theme:e})=>({color:e.palette.mode==="dark"?"#fff":"#000",backgroundColor:e.palette.mode==="dark"?"#141431dd":"#ededf3dd",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,color:"#fff"}}},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"})}},MuiSvgIcon:{defaultProps:{color:"primary"}},MuiDialogContent:{styleOverrides:{root:{padding:0}}},MuiSlider:{styleOverrides:{valueLabel:({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"6px 14px",color:e.palette.mode==="dark"?"#fff":"#000",backgroundColor:e.palette.mode==="dark"?"#141431dd":"#ededf3dd","&::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 se}from"@mui/material";var F={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"}}},L={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 48px/60px inherit inherit"},header_xl_regular:{font:"400 42px/54px inherit inherit"},header_lg_regular:{font:"400 36px/46px inherit inherit"},header_md_regular:{font:"400 30px/38px inherit inherit"},header_sm_regular:{font:"400 26px/34px inherit inherit"},header_xs_regular:{font:"400 22px/30px inherit inherit"},header_2xl_bold:{font:"700 48px/60px inherit inherit"},header_xl_bold:{font:"700 42px/54px inherit inherit"},header_lg_bold:{font:"700 36px/46px inherit inherit"},header_md_bold:{font:"700 30px/38px inherit inherit"},header_sm_bold:{font:"700 26px/34px inherit inherit"},header_xs_bold:{font:"700 22px/30px inherit inherit"}};var x=(e,r="#232e58",t="dark")=>se({palette:{primary:{main:e},secondary:{main:r},warning:{main:t==="dark"?s.orange:s.orangeDark},error:{main:s.red},mode:t},components:{...w,MuiTypography:F},typography:L,shape:{borderRadius:24}}),f=Object.entries(M).map(([e,r])=>({name:e,MuiTheme:x(r.primaryColor,r.secondaryColor)})),S=(e,r,t)=>{switch(e){case"light":return!1;case"dark":return!0;case"system":return r==="dark";case"auto":return m(t)===s.fontLight;default:return!1}};import le from"@mui/icons-material/BrightnessAutoRounded";import pe from"@mui/icons-material/DarkModeRounded";import de from"@mui/icons-material/LightModeRounded";import me from"@mui/icons-material/PersonalVideoRounded";import{jsx as y}from"react/jsx-runtime";var g=32,fe=[{label:"Auto",value:"auto",icon:y(le,{color:"inherit",sx:{fontSize:g}})},{label:"System",value:"system",icon:y(me,{color:"inherit",sx:{fontSize:g}})},{label:"Light",value:"light",icon:y(de,{color:"inherit",sx:{fontSize:g}})},{label:"Dark",value:"dark",icon:y(pe,{color:"inherit",sx:{fontSize:g}})}];import{useMemo as B}from"react";import{Global as ce,css as he}from"@emotion/react";import{useTheme as ue}from"@mui/material/styles";import{jsx as xe}from"react/jsx-runtime";var P=()=>{let e=ue(),r=e.palette.mode==="dark",t=e.palette.primary.main,o=e.palette.secondary.main,i=B(()=>m(t),[t]),n=B(()=>m(o),[o]);return xe(ce,{styles:he`
        * {
          font-family: "Poppins", sans-serif !important;
          -webkit-tap-highlight-color: transparent;
          &::selection {
            background-color: ${`${t}e1`};
            color: ${i};
          }
        }

        html,
        body,
        #root {
          height: 100%;
          margin: 0;
        }

        :root {
          height: 100%;
          font-family: "Poppins", sans-serif;
          line-height: 1.5;
          font-weight: 400;
          color-scheme: ${r?"dark":"light"};
          color: ${n};
          font-synthesis: none;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          -webkit-text-size-adjust: 100%;

          --rsbs-backdrop-bg: rgba(0, 0, 0, 0.3);
          --rsbs-bg: ${r?"#383838":"#ffffff"};
        }

        body {
          margin: 0;
          height: 100%;
          overflow: auto;
          touch-action: manipulation;
          background: ${o};
          background-attachment: fixed;
          background-size: cover;
          transition: 0.3s background;

          ::-webkit-scrollbar {
            width: 8px;
            background-color: ${o};
          }
          ::-webkit-scrollbar-thumb {
            background-color: ${t};
            border-radius: 64px;
          }
          ::-webkit-scrollbar-thumb:hover {
            background-color: ${`${t}d8`};
          }
          ::-webkit-scrollbar-track {
            border-radius: 64px;
            background-color: ${o};
          }
        }

        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 {
          background-color: #000000d7;
          color: white;
          padding: 16px;
          border-radius: 18px;
          overflow-x: auto;
        }

        .MuiDialogContent-root,
        .MuiDrawer-paper,
        .customScrollbar,
        textarea {
          ::-webkit-scrollbar {
            width: 8px;
            border-radius: 4px;
            background-color: #84848415;
          }
          ::-webkit-scrollbar-thumb {
            background-color: #8484844b;
            border-radius: 4px;
          }
          ::-webkit-scrollbar-thumb:hover {
            background-color: #84848476;
          }
          ::-webkit-scrollbar-track {
            border-radius: 4px;
            background-color: #84848415;
          }
        }

        /* react-spring-bottom-sheet styles */
        div[role="dialog"] {
          border-radius: 42px 42px 0 0;
          z-index: 9999999;
        }

        div[data-rsbs-backdrop] {
          z-index: 999;
        }

        div[data-rsbs-header] {
          z-index: 999999;
          box-shadow: none;
          &::before {
            width: 60px;
            height: 6px;
            border-radius: 100px;
            background: ${r?"#717171":"#cfcfcf"};
            margin-top: 3px;
          }
        }
      `})};import{keyframes as d}from"@emotion/react";var ge=d`
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
`,ye=d`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`,be=d`
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
`,_e=d`
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
`,Ce=d`
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
`,ke=(e,r=12)=>d`
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 ${e}b2;
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 ${r}px ${e}00;
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 ${e}00;
  }
`,ve=e=>d`
  0% {
    filter: none;
  }
  50% {
    filter: drop-shadow(0 0 10px ${e}78);
  }
  100% {
    filter: none;
  }
`,Te=d`
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9) translateX(-2px);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
`,Me=d`
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(2px);
  }
  70% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
`;var we=()=>{let r=new Date().getHours(),t;return r<12&&r>=5?t="\u0414\u043E\u0431\u0440\u043E\u0435 \u0443\u0442\u0440\u043E,":r<18&&r>12?t="\u0414\u043E\u0431\u0440\u044B\u0439 \u0434\u0435\u043D\u044C,":t="\u0414\u043E\u0431\u0440\u044B\u0439 \u0432\u0435\u0447\u0435\u0440,",t};var Se=e=>{let r=e.getFullYear(),t=String(e.getMonth()+1).padStart(2,"0"),o=String(e.getDate()).padStart(2,"0");return`${r}-${t}-${o}`};var{userAgent:A}=globalThis.navigator,Pe=()=>{let e=A.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"},De=()=>{let e=A.toLowerCase();return e.includes("edg")?"Edge":e.includes("chrome")?"Chrome":e.includes("firefox")?"Firefox":e.includes("safari")?"Safari":"Unknown"},Ie={os:Pe(),browser:De()};var Oe=(e,r=navigator.language||"en-US")=>{let t=new Date;e=new Date(e);let o=Math.floor((t.getTime()-e.getTime())/1e3),i=new Intl.RelativeTimeFormat(r,{numeric:"auto"});if(o<60)return i.format(-o,"second");if(o<3600){let a=Math.floor(o/60);return i.format(-a,"minute")}if(o<86400){let a=Math.floor(o/3600);return i.format(-a,"hour")}let n=Math.floor(o/86400);return i.format(-n,"day")},Re=(e,r=navigator.language||"en-US")=>{let t=new Date;e=new Date(e);let o=(e.getTime()-t.getTime())/1e3,i=Math.floor(o/(60*60)),n=Math.floor((o-60*60*i)/60),a=Math.floor(o-60*60*i-60*n),l=new Intl.RelativeTimeFormat(r,{numeric:"auto"});if(n===0&&a<60)return l.format(a,"second");if(i===0&&n<60)return l.format(n,"minute");if(i<24){let C=`${new Intl.RelativeTimeFormat(r,{numeric:"auto"}).format(i,"hour")}`,p=` ${new Intl.RelativeTimeFormat(r,{localeMatcher:"lookup",numeric:"always",style:"long"}).format(n,"minute")}`.replace(/^\D+/,"");return`${C} ${p}`}let _=Math.floor(a/86400);return l.format(_,"day")};import{useEffect as Ee,useState as Fe}from"react";var Le=(e=768)=>{let[r,t]=Fe(!1);return Ee(()=>{let o=()=>{t(window.innerWidth<e)};o();let i=()=>o();return window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}},[e]),r};import{useState as Be,useEffect as Ae}from"react";var D=()=>{let[e,r]=Be("unknown");return Ae(()=>{let t=i=>{r(i.matches?"dark":"light")},o=globalThis.matchMedia("(prefers-color-scheme: dark)");return r(o.matches?"dark":"light"),o.addEventListener("change",t),()=>{o.removeEventListener("change",t)}},[]),e};import{jsx as I,jsxs as He}from"react/jsx-runtime";var We=({children:e})=>{let r=D(),[t,o]=$(()=>{let p=localStorage.getItem("appSettings");return p&&JSON.parse(p).theme||"system"}),[i,n]=$(()=>{let p=localStorage.getItem("appSettings");return p&&JSON.parse(p).darkMode||"auto"});$e(()=>{localStorage.setItem("appSettings",JSON.stringify({theme:t,darkMode:i}))},[t,i]);let a=b(()=>{var p;return r==="unknown"?f[0].MuiTheme:t==="system"?r==="dark"?f[0].MuiTheme:f[1].MuiTheme:((p=f.find(z=>z.name===t))==null?void 0:p.MuiTheme)||f[0].MuiTheme},[r,t]),l=b(()=>S(i,r,a.palette.secondary.main)?"dark":"light",[i,r,a]),_=b(()=>x(a.palette.primary.main,a.palette.secondary.main,l),[a,l]),C=b(()=>({darkMode:l==="dark"}),[l]);return I(T.Provider,{value:{theme:t,darkMode:i,setTheme:o,setDarkMode:n},children:I(Ne,{theme:_,children:He(ze,{theme:C,children:[I(P,{}),e]})})})};export{s as ColorPalette,H as DialogBtn,k as ErrorBoundary,P as GlobalStyles,Z as Loading,te as PathName,We as ThemeProviderWrapper,w as commonComponentProps,x as createCustomTheme,fe as darkModeOptions,we as displayGreeting,ye as fadeIn,ge as fadeInLeft,Se as getDayIdentifier,m as getFontColor,Me as installAppAnimation,S as isDarkMode,ae as isFontLight,E as isHexColor,Te as logoutAnimation,ve as progressPulse,ke as pulseAnimation,Ce as scale,be as slideIn,_e as slideInBottom,Ie as systemInfo,M as themeConfig,f as themes,Oe as timeAgo,Re as timeAgoFromStart,Le as useResponsiveDisplay,D as useSystemTheme,ne as useThemeSettings};
//# sourceMappingURL=index.mjs.map