UNPKG

@frank-auth/react

Version:

Flexible and customizable React UI components for Frank Authentication

3 lines (2 loc) 6.64 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),D=require("../provider/theme-provider.cjs"),U=require("./use-auth.cjs"),C={blue:{colors:{primary:{50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",300:"#93c5fd",400:"#60a5fa",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af",900:"#1e3a8a",950:"#172554",DEFAULT:"#3b82f6",foreground:"#ffffff"}}},purple:{colors:{primary:{50:"#faf5ff",100:"#f3e8ff",200:"#e9d5ff",300:"#d8b4fe",400:"#c084fc",500:"#a855f7",600:"#9333ea",700:"#7c3aed",800:"#6b21a8",900:"#581c87",950:"#3b0764",DEFAULT:"#a855f7",foreground:"#ffffff"}}},green:{colors:{primary:{50:"#f0fdf4",100:"#dcfce7",200:"#bbf7d0",300:"#86efac",400:"#4ade80",500:"#22c55e",600:"#16a34a",700:"#15803d",800:"#166534",900:"#14532d",950:"#052e16",DEFAULT:"#22c55e",foreground:"#ffffff"}}},orange:{colors:{primary:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12",950:"#431407",DEFAULT:"#f97316",foreground:"#ffffff"}}},pink:{colors:{primary:{50:"#fdf2f8",100:"#fce7f3",200:"#fbcfe8",300:"#f9a8d4",400:"#f472b6",500:"#ec4899",600:"#db2777",700:"#be185d",800:"#9d174d",900:"#831843",950:"#500724",DEFAULT:"#ec4899",foreground:"#ffffff"}}},red:{colors:{primary:{50:"#fef2f2",100:"#fee2e2",200:"#fecaca",300:"#fca5a5",400:"#f87171",500:"#ef4444",600:"#dc2626",700:"#b91c1c",800:"#991b1b",900:"#7f1d1d",950:"#450a0a",DEFAULT:"#ef4444",foreground:"#ffffff"}}},gray:{colors:{primary:{50:"#f9fafb",100:"#f3f4f6",200:"#e5e7eb",300:"#d1d5db",400:"#9ca3af",500:"#6b7280",600:"#4b5563",700:"#374151",800:"#1f2937",900:"#111827",950:"#030712",DEFAULT:"#6b7280",foreground:"#ffffff"}}}};function b(){const e=D.useTheme(),{activeOrganization:l}=U.useAuth(),t=o.useCallback(()=>{e.mode==="light"?e.setMode("dark"):e.mode==="dark"?e.setMode("system"):e.setMode("light")},[e]),d=o.useCallback(()=>e.setMode("light"),[e]),s=o.useCallback(()=>e.setMode("dark"),[e]),r=o.useCallback(()=>e.setMode("system"),[e]),a=o.useMemo(()=>e.theme.colors,[e.theme.colors]),f=o.useMemo(()=>a.primary.DEFAULT,[a.primary]),m=o.useMemo(()=>a.secondary.DEFAULT,[a.secondary]),g=o.useMemo(()=>a.background,[a.background]),i=o.useMemo(()=>a.foreground,[a.foreground]),y=o.useMemo(()=>e.theme.typography,[e.theme.typography]),T=o.useMemo(()=>y.fontFamily.sans,[y.fontFamily.sans]),p=o.useMemo(()=>e.theme.spacing,[e.theme.spacing]),h=o.useMemo(()=>e.theme.borderRadius,[e.theme.borderRadius]),S=o.useMemo(()=>e.theme.shadows,[e.theme.shadows]),M=o.useCallback((n,c)=>{const u=a[n];return u?c&&typeof u=="object"?u[c]||u.DEFAULT||"":typeof u=="string"?u:u.DEFAULT||"":""},[a]),k=o.useCallback(n=>{const c=y.fontSize[n];return Array.isArray(c)?c[0]:c||""},[y.fontSize]),F=o.useCallback(n=>p[n]||"",[p]),L=o.useCallback(n=>h[n]||"",[h]),z=o.useCallback(n=>S[n]||"",[S]),A=o.useCallback(n=>{const c=C[n];c&&e.setTheme(c)},[e]),E=o.useMemo(()=>Object.keys(C),[]),R=o.useCallback(n=>{if(n.settings?.branding){const c={primaryColor:n.settings.branding.primaryColor,secondaryColor:n.settings.branding.secondaryColor,logo:n.logoUrl,favicon:n.settings.branding.favicon,customCSS:n.settings.branding.customCSS};e.applyBranding(c)}},[e]),B=o.useMemo(()=>!!(e.organizationBranding?.primaryColor||e.organizationBranding?.logo||e.organizationBranding?.customCSS),[e.organizationBranding]);return{theme:e.theme,mode:e.mode,effectiveMode:e.effectiveMode,isSystemMode:e.isSystemMode,isCustomized:e.isCustomized,cssVariables:e.cssVariables,generateCSS:e.generateCSS,setTheme:e.setTheme,setMode:e.setMode,resetTheme:e.resetTheme,organizationBranding:e.organizationBranding,applyBranding:e.applyBranding,applyOrganizationBranding:R,isCustomBranded:B,colors:a,primaryColor:f,secondaryColor:m,backgroundColor:g,foregroundColor:i,typography:y,fontFamily:T,spacing:p,borderRadius:h,shadows:S,getColorValue:M,getFontSize:k,getSpacing:F,getBorderRadius:L,getShadow:z,toggleMode:t,setLightMode:d,setDarkMode:s,setSystemMode:r,applyPreset:A,availablePresets:E}}function w(){const{colors:e,primaryColor:l,secondaryColor:t,backgroundColor:d,foregroundColor:s,getColorValue:r,setTheme:a,theme:f}=b(),m=o.useCallback(i=>{a({colors:{...f.colors,primary:{...f.colors.primary,DEFAULT:i}}})},[a,f.colors]),g=o.useCallback(i=>{a({colors:{...f.colors,secondary:{...f.colors.secondary,DEFAULT:i}}})},[a,f.colors]);return{colors:e,primaryColor:l,secondaryColor:t,backgroundColor:d,foregroundColor:s,getColorValue:r,setPrimaryColor:m,setSecondaryColor:g,getPrimaryShade:i=>r("primary",i),getSecondaryShade:i=>r("secondary",i),getSuccessColor:()=>r("success"),getWarningColor:()=>r("warning"),getDangerColor:()=>r("danger"),getInfoColor:()=>r("info")}}function v(){const{typography:e,fontFamily:l,getFontSize:t,setTheme:d,theme:s}=b(),r=o.useCallback(a=>{d({typography:{...s.typography,fontFamily:{...s.typography.fontFamily,sans:a}}})},[d,s.typography]);return{typography:e,fontFamily:l,getFontSize:t,setFontFamily:r,fontSizes:e.fontSize,fontWeights:e.fontWeight,lineHeights:e.lineHeight,letterSpacing:e.letterSpacing,getSmallSize:()=>t("sm"),getBaseSize:()=>t("base"),getLargeSize:()=>t("lg"),getXLSize:()=>t("xl")}}function P(){const{spacing:e,borderRadius:l,shadows:t,getSpacing:d,getBorderRadius:s,getShadow:r}=b();return{spacing:e,borderRadius:l,shadows:t,getSpacing:d,getBorderRadius:s,getShadow:r,getSmallSpacing:()=>d("sm"),getMediumSpacing:()=>d("md"),getLargeSpacing:()=>d("lg"),getSmallRadius:()=>s("sm"),getMediumRadius:()=>s("md"),getLargeRadius:()=>s("lg"),getFullRadius:()=>s("full"),getSmallShadow:()=>r("sm"),getMediumShadow:()=>r("md"),getLargeShadow:()=>r("lg")}}function V(){const{cssVariables:e,generateCSS:l,getColorValue:t,getFontSize:d,getSpacing:s,getBorderRadius:r,getShadow:a}=b(),f=o.useCallback(g=>g({colors:{get:t},fontSize:{get:d},spacing:{get:s},borderRadius:{get:r},shadows:{get:a}}),[t,d,s,r,a]),m=o.useCallback(g=>e[`--${g.replace(".","-")}`]||"",[e]);return{cssVariables:e,generateCSS:l,createStyles:f,getThemeValue:m,cardStyles:{backgroundColor:t("card"),color:t("cardForeground"),borderRadius:r("lg"),boxShadow:a("md"),padding:s("lg")},buttonStyles:{backgroundColor:t("primary"),color:t("primaryForeground"),borderRadius:r("md"),padding:`${s("sm")} ${s("md")}`,fontSize:d("base"),fontWeight:"500",border:"none",cursor:"pointer"},inputStyles:{backgroundColor:t("input"),color:t("foreground"),border:`1px solid ${t("border")}`,borderRadius:r("md"),padding:s("sm"),fontSize:d("base")}}}exports.useTheme=b;exports.useThemeColors=w;exports.useThemeLayout=P;exports.useThemeStyles=V;exports.useThemeTypography=v; //# sourceMappingURL=use-theme.cjs.map