@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.3 kB
JavaScript
import{useMediaQuery as t}from"@mui/material";import{useState as e,useEffect as r,startTransition as o,useMemo as i,useContext as m}from"react";import s from"../node_modules/tiny-invariant/dist/esm/tiny-invariant.js";import{breakpoints as n}from"../systems/BrandCore/primitiveVariables.js";import{useScreenSize as l}from"../utils/screen.hook.js";import{customTheme as a}from"./theme.js";import{ThemeContext as d}from"./theme.context.js";const p=(m="light",s="lg",d="ltr")=>{const{width:p}=l(),[u,g]=e(m),[c,h]=e(s),[b,f]=e(d),[k,y]=e(!1),[v,j]=e("");r(()=>{b&&document.documentElement.setAttribute("dir",b)},[b]);r(()=>{o(()=>{h(p&&p<n.lg?"sm":"lg")})},[p]),r(()=>{o(()=>{f(d)})},[d]),r(()=>{o(()=>{g(m)})},[m]);const x=i(()=>a(u,c,b),[u,b,c]),S=t(x.breakpoints.only("sm"),{noSsr:!0}),w=t(x.breakpoints.only("md"),{noSsr:!0}),O=t(x.breakpoints.between("lg","xl"),{noSsr:!0}),T=t(x.breakpoints.up("xl"),{noSsr:!0});return r(()=>{o(()=>{S&&j("sm"),w&&j("md"),O&&j("lg"),T&&j("xl")})},[S,w,O,T]),{breakpoint:v,custom:x.custom,gridOverlayVisible:k,mode:u,theme:x,toggleGridOverlay:()=>{o(()=>{y(t=>!t)})},toggleMode:t=>{o(()=>{if(t)return g(t);g(t=>"light"===t?"dark":"light")})}}},u=()=>{const t=m(d);return s(t,"useTheme must be used within a ThemeProvider"),t};export{u as useTheme,p as useThemeBuilder};