@frank-auth/react/dist/cjs/provider/theme-provider.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),c=require("react"),k=require("../config/theme.cjs"),h=require("../config/defaults.cjs"),S=c.createContext(null);function v(s,o){switch(o.type){case"SET_THEME":return{...s,theme:o.payload,isCustomized:!0};case"SET_MODE":return{...s,mode:o.payload,isSystemMode:o.payload==="system"};case"SET_EFFECTIVE_MODE":return{...s,effectiveMode:o.payload};case"SET_SYSTEM_MODE":return{...s,isSystemMode:o.payload};case"SET_CSS_VARIABLES":return{...s,cssVariables:o.payload};case"SET_CUSTOMIZED":return{...s,isCustomized:o.payload};case"SET_ORGANIZATION_BRANDING":return{...s,organizationBranding:o.payload,isCustomized:!!o.payload};case"RESET_THEME":return{...p};default:return s}}const p={theme:h.DEFAULT_THEME_CONFIG,mode:"system",effectiveMode:"light",isSystemMode:!0,cssVariables:{},isCustomized:!1};function A({children:s,theme:o,mode:r="system",organizationBranding:a,onThemeChange:n}){const[t,d]=c.useReducer(v,{...p,theme:o?{...h.DEFAULT_THEME_CONFIG,...o}:h.DEFAULT_THEME_CONFIG,mode:r,isSystemMode:r==="system"}),i=c.useMemo(()=>k.createThemeManager(t.theme),[]),l=c.useCallback(()=>typeof window>"u"?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",[]),f=c.useCallback(()=>{let e;t.mode==="system"?e=l():e=t.mode,e!==t.effectiveMode&&d({type:"SET_EFFECTIVE_MODE",payload:e})},[t.mode,t.effectiveMode,l]);c.useEffect(()=>{if(typeof window>"u")return;const e=window.matchMedia("(prefers-color-scheme: dark)"),m=()=>{t.mode==="system"&&f()};return e.addEventListener("change",m),f(),()=>{e.removeEventListener("change",m)}},[t.mode,f]),c.useEffect(()=>{i.setTheme(t.theme),i.setMode(t.effectiveMode);const e=i.generateCSSVariables();d({type:"SET_CSS_VARIABLES",payload:e}),n?.(t.theme)},[i,t.theme,t.effectiveMode,n]),c.useEffect(()=>{a&&(d({type:"SET_ORGANIZATION_BRANDING",payload:a}),i.applyBranding({logo:{url:a.logo,alt:"Organization Logo"},colors:{primary:a.primaryColor||"#3b82f6",secondary:a.secondaryColor||"#64748b"},fonts:{primary:a.fonts?.primary||"Inter, ui-sans-serif, system-ui, sans-serif",secondary:a.fonts?.secondary},customCSS:a.customCSS}))},[a,i]),c.useEffect(()=>{if(typeof document>"u")return;const e=document.documentElement;Object.entries(t.cssVariables).forEach(([m,E])=>{e.style.setProperty(m,E)}),e.classList.remove("light","dark"),e.classList.add(t.effectiveMode),e.setAttribute("data-theme",t.effectiveMode),e.setAttribute("data-theme-mode",t.mode),e.setAttribute("data-theme-customized",t.isCustomized.toString())},[t.cssVariables,t.effectiveMode,t.mode,t.isCustomized]);const C=c.useCallback(e=>{const m={...t.theme,...e};d({type:"SET_THEME",payload:m})},[t.theme]),g=c.useCallback(e=>{if(d({type:"SET_MODE",payload:e}),e!=="system")d({type:"SET_EFFECTIVE_MODE",payload:e});else{const m=l();d({type:"SET_EFFECTIVE_MODE",payload:m})}},[l]),M=c.useCallback(e=>{d({type:"SET_ORGANIZATION_BRANDING",payload:e}),i.applyBranding({logo:{url:e.logo,alt:"Organization Logo"},colors:{primary:e.primaryColor||t.theme.colors.primary.DEFAULT,secondary:e.secondaryColor||t.theme.colors.secondary.DEFAULT},fonts:{primary:e.fonts?.primary||t.theme.typography.fontFamily.sans[0],secondary:e.fonts?.secondary},customCSS:e.customCSS})},[i,t.theme]),b=c.useCallback(()=>{i.setTheme(h.DEFAULT_THEME_CONFIG),d({type:"RESET_THEME"})},[i]),_=c.useCallback(()=>{let e=`:root {
`;return Object.entries(t.cssVariables).forEach(([m,E])=>{e+=`  ${m}: ${E};
`}),e+=`}

`,e+=`[data-theme="light"] {
`,e+=`  color-scheme: light;
`,e+=`}

`,e+=`[data-theme="dark"] {
`,e+=`  color-scheme: dark;
`,e+=`}

`,t.organizationBranding?.customCSS&&(e+=`/* Organization Custom CSS */
`,e+=t.organizationBranding.customCSS,e+=`

`),e},[t.cssVariables,t.organizationBranding]),O={...t,setTheme:C,setMode:g,applyBranding:M,resetTheme:b,generateCSS:_};return u.jsx(S.Provider,{value:O,children:s})}function y(){const s=c.useContext(S);if(!s)throw new Error("useTheme must be used within a ThemeProvider");return s}function T(){const{mode:s,effectiveMode:o,setMode:r,isSystemMode:a}=y();return{mode:s,effectiveMode:o,isSystemMode:a,setMode:r,toggleMode:()=>{r(s==="light"?"dark":s==="dark"?"light":o==="light"?"dark":"light")},setLightMode:()=>r("light"),setDarkMode:()=>r("dark"),setSystemMode:()=>r("system")}}function I(){const{organizationBranding:s,applyBranding:o,isCustomized:r}=y(),a=c.useCallback(n=>{if(n.settings?.branding){const t={primaryColor:n.settings.branding.primaryColor,secondaryColor:n.settings.branding.secondaryColor,logo:n.logoUrl,favicon:n.settings.branding.favicon,customCSS:n.settings.branding.customCSS};o(t)}},[o]);return{branding:s,isCustomBranded:r,applyOrganizationBranding:a,applyBranding:o,hasLogo:!!s?.logo,hasCustomCSS:!!s?.customCSS,primaryColor:s?.primaryColor,secondaryColor:s?.secondaryColor}}function w(){const{cssVariables:s,generateCSS:o}=y();return{variables:s,getVariable:r=>s[r],generateCSS:o,applyToElement:r=>{Object.entries(s).forEach(([a,n])=>{r.style.setProperty(a,n)})}}}function D(s){const o=r=>{const a=y();return u.jsx(s,{...r,theme:a})};return o.displayName=`withTheme(${s.displayName||s.name})`,o}function F({className:s,iconClassName:o,showLabel:r=!1,...a}){const{mode:n,effectiveMode:t,toggleMode:d}=T(),i=()=>n==="system"?t==="dark"?"🌙":"☀️":n==="dark"?"🌙":"☀️",l=()=>n==="system"?`System (${t})`:n==="dark"?"Dark":"Light";return u.jsxs("button",{type:"button",onClick:d,className:s,title:`Switch to ${t==="dark"?"light":"dark"} mode`,...a,children:[u.jsx("span",{className:o,children:i()}),r&&u.jsx("span",{children:l()})]})}exports.ThemeContext=S;exports.ThemeProvider=A;exports.ThemeSwitcher=F;exports.useOrganizationBranding=I;exports.useTheme=y;exports.useThemeMode=T;exports.useThemeVariables=w;exports.withTheme=D;
//# sourceMappingURL=theme-provider.cjs.map