@frank-auth/react/dist/cjs/config/appearance.cjs

Flexible and customizable React UI components for Frank Authentication

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./defaults.cjs");var S=Object.defineProperty,x=(a,r,e)=>r in a?S(a,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[r]=e,m=(a,r,e)=>x(a,typeof r!="symbol"?r+"":r,e);const u={flat:{className:"bg-default-100 hover:bg-default-200 focus:bg-default-100",style:{backgroundColor:"hsl(var(--color-default-100))",border:"none",borderRadius:"var(--border-radius-md)"}},bordered:{className:"border-2 border-default-200 hover:border-default-300 focus:border-primary",style:{backgroundColor:"transparent",border:"2px solid hsl(var(--color-default-200))",borderRadius:"var(--border-radius-md)"}},underlined:{className:"border-b-2 border-default-300 hover:border-default-400 focus:border-primary",style:{backgroundColor:"transparent",border:"none",borderBottom:"2px solid hsl(var(--color-default-300))",borderRadius:"0"}},faded:{className:"bg-default-50 hover:bg-default-100 focus:bg-default-100 border border-default-200",style:{backgroundColor:"hsl(var(--color-default-50))",border:"1px solid hsl(var(--color-default-200))",borderRadius:"var(--border-radius-md)"}}},g={solid:{className:"bg-primary text-primary-foreground hover:bg-primary-600 focus:bg-primary-700",style:{backgroundColor:"hsl(var(--color-primary))",color:"hsl(var(--color-primary-foreground))",border:"none"}},bordered:{className:"border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground",style:{backgroundColor:"transparent",color:"hsl(var(--color-primary))",border:"2px solid hsl(var(--color-primary))"}},light:{className:"bg-primary-100 text-primary-700 hover:bg-primary-200",style:{backgroundColor:"hsl(var(--color-primary-100))",color:"hsl(var(--color-primary-700))",border:"none"}},flat:{className:"bg-default-100 text-default-700 hover:bg-default-200",style:{backgroundColor:"hsl(var(--color-default-100))",color:"hsl(var(--color-default-700))",border:"none"}},faded:{className:"bg-default-50 text-default-700 hover:bg-default-100 border border-default-200",style:{backgroundColor:"hsl(var(--color-default-50))",color:"hsl(var(--color-default-700))",border:"1px solid hsl(var(--color-default-200))"}},shadow:{className:"bg-primary text-primary-foreground hover:bg-primary-600 shadow-lg hover:shadow-xl",style:{backgroundColor:"hsl(var(--color-primary))",color:"hsl(var(--color-primary-foreground))",border:"none",boxShadow:"var(--shadow-lg)"}},ghost:{className:"text-primary hover:bg-primary-100 hover:text-primary-700",style:{backgroundColor:"transparent",color:"hsl(var(--color-primary))",border:"none"}}},f={shadow:{className:"bg-card text-card-foreground shadow-md",style:{backgroundColor:"hsl(var(--color-card))",color:"hsl(var(--color-card-foreground))",boxShadow:"var(--shadow-md)"}},bordered:{className:"bg-card text-card-foreground border border-border",style:{backgroundColor:"hsl(var(--color-card))",color:"hsl(var(--color-card-foreground))",border:"1px solid hsl(var(--color-border))"}},flat:{className:"bg-default-50 text-default-900",style:{backgroundColor:"hsl(var(--color-default-50))",color:"hsl(var(--color-default-900))"}}},b={sm:{padding:"var(--spacing-sm)",fontSize:"var(--font-size-sm)",height:"32px",minHeight:"32px"},md:{padding:"var(--spacing-md)",fontSize:"var(--font-size-base)",height:"40px",minHeight:"40px"},lg:{padding:"var(--spacing-lg)",fontSize:"var(--font-size-lg)",height:"48px",minHeight:"48px"}},v={xs:{width:"320px",maxWidth:"90vw"},sm:{width:"400px",maxWidth:"90vw"},md:{width:"512px",maxWidth:"90vw"},lg:{width:"640px",maxWidth:"90vw"},xl:{width:"768px",maxWidth:"90vw"},"2xl":{width:"896px",maxWidth:"95vw"},"3xl":{width:"1024px",maxWidth:"95vw"},"4xl":{width:"1280px",maxWidth:"95vw"},"5xl":{width:"1536px",maxWidth:"95vw"},full:{width:"100vw",height:"100vh",maxWidth:"100vw",maxHeight:"100vh"}},h={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},p={isBreakpoint:a=>typeof window>"u"?!1:window.matchMedia(`(min-width: ${h[a]})`).matches,getCurrentBreakpoint:()=>{if(typeof window>"u")return"md";const a=Object.entries(h).reverse();for(const[r,e]of a)if(window.matchMedia(`(min-width: ${e})`).matches)return r;return"sm"},getResponsiveValue:(a,r)=>{const e=p.getCurrentBreakpoint(),s=["2xl","xl","lg","md","sm"],n=s.indexOf(e);for(let t=n;t<s.length;t++){const o=s[t];if(a[o]!==void 0)return a[o]}return r}};class y{constructor(r){m(this,"config"),m(this,"listeners",new Set),this.config=this.mergeAppearanceConfig(d.DEFAULT_APPEARANCE_CONFIG,r)}getConfig(){return{...this.config}}updateConfig(r){this.config=this.mergeAppearanceConfig(this.config,r),this.notifyListeners()}applyOrganizationBranding(r){const e={logo:{url:r.settings.branding?.logo,alt:r.name},colors:{primary:r.settings.branding?.primaryColor||this.config.branding.colors.primary,secondary:r.settings.branding?.secondaryColor||this.config.branding.colors.secondary},fonts:this.config.branding.fonts,customCSS:r.settings.branding?.customCSS};this.updateConfig({branding:e})}getComponentStyles(r,e,s,n){const t=this.config.components[r];let o=this.getBaseComponentStyles(r,t);if(e){const c=this.getVariantStyles(r,e);o=this.mergeStyles(o,c)}const i=s||t?.size||"md",l=this.getSizeStyles(i);if(o=this.mergeStyles(o,l),n){const c=this.getColorStyles(n);o=this.mergeStyles(o,c)}return o}getLayoutStyles(){return{"--container-max-width":this.config.layout.containerMaxWidth,"--sidebar-width":this.config.layout.sidebarWidth,"--header-height":this.config.layout.headerHeight,"--footer-height":this.config.layout.footerHeight,"--content-padding":this.config.layout.contentPadding}}getBrandingVariables(){const{branding:r}=this.config;return{"--brand-primary":r.colors.primary,"--brand-secondary":r.colors.secondary,"--brand-accent":r.colors.accent||r.colors.primary,"--brand-font-primary":r.fonts.primary,"--brand-font-secondary":r.fonts.secondary||r.fonts.primary}}generateCSS(){const r=this.getBrandingVariables(),e=this.getLayoutStyles();let s=`:root {
`;return Object.entries(r).forEach(([n,t])=>{s+=`  ${n}: ${t};
`}),Object.entries(e).forEach(([n,t])=>{s+=`  ${n}: ${t};
`}),s+=`}

`,this.config.customCSS&&(s+=this.config.customCSS+`
`),this.config.branding.customCSS&&(s+=this.config.branding.customCSS+`
`),s}applyToDOM(){if(typeof document>"u")return;const r=this.getBrandingVariables(),e=this.getLayoutStyles(),s=document.documentElement;Object.entries({...r,...e}).forEach(([i,l])=>{s.style.setProperty(i,l)});const n="frank-auth-custom-css";let t=document.getElementById(n);t||(t=document.createElement("style"),t.id=n,document.head.appendChild(t));const o=[this.config.customCSS,this.config.branding.customCSS].filter(Boolean).join(`
`);t.textContent=o}subscribe(r){return this.listeners.add(r),()=>{this.listeners.delete(r)}}mergeAppearanceConfig(r,e){return e?{...r,...e,layout:{...r.layout,...e.layout},components:{...r.components,...e.components},branding:{...r.branding,...e.branding,logo:{...r.branding.logo,...e.branding?.logo},colors:{...r.branding.colors,...e.branding?.colors},fonts:{...r.branding.fonts,...e.branding?.fonts}}}:{...r}}getBaseComponentStyles(r,e){return{className:`frank-${r}`,style:{borderRadius:`var(--border-radius-${e?.radius||"md"})`,transition:"all var(--duration-normal) var(--easing-ease-out)"}}}getVariantStyles(r,e){switch(r){case"input":return u[e]||u.bordered;case"button":return g[e]||g.solid;case"card":return f[e]||f.shadow;default:return{className:"",style:{}}}}getSizeStyles(r){const e=b[r];return{className:`frank-size-${r}`,style:{padding:e.padding,fontSize:e.fontSize,minHeight:e.minHeight}}}getColorStyles(r){return{className:`frank-color-${r}`,style:{"--component-color":`var(--color-${r})`,"--component-color-foreground":`var(--color-${r}-foreground)`}}}mergeStyles(r,e){return{className:[r.className,e.className].filter(Boolean).join(" "),style:{...r.style,...e.style}}}notifyListeners(){this.listeners.forEach(r=>r(this.config))}}function C(a){return new y(a)}function N(a,r,e,s,n,t){const o=[`frank-${a}`];e&&o.push(`frank-${a}-${e}`);const i=s||r[a]?.size||"md";return o.push(`frank-size-${i}`),n&&o.push(`frank-color-${n}`),t&&o.push(...t),o.join(" ")}function A(a){const r={};if(a.input){const{variant:e,size:s,color:n,radius:t}=a.input,o=["transition-all","duration-200"];switch(e){case"flat":o.push("bg-default-100","hover:bg-default-200","focus:bg-default-100");break;case"bordered":o.push("border-2","border-default-200","hover:border-default-300","focus:border-primary");break;case"underlined":o.push("border-b-2","border-default-300","hover:border-default-400","focus:border-primary");break;case"faded":o.push("bg-default-50","border","border-default-200","hover:bg-default-100");break}switch(s){case"sm":o.push("px-2","py-1","text-sm","h-8");break;case"md":o.push("px-3","py-2","text-base","h-10");break;case"lg":o.push("px-4","py-3","text-lg","h-12");break}t==="none"?o.push("rounded-none"):t==="sm"?o.push("rounded-sm"):t==="md"?o.push("rounded-md"):t==="lg"?o.push("rounded-lg"):t==="xl"?o.push("rounded-xl"):t==="full"&&o.push("rounded-full"),r.input=o.join(" ")}return r}function w(a,r){return p.getResponsiveValue(a,r)}exports.DEFAULT_APPEARANCE_CONFIG=d.DEFAULT_APPEARANCE_CONFIG;exports.DEFAULT_BRANDING_CONFIG=d.DEFAULT_BRANDING_CONFIG;exports.DEFAULT_COMPONENT_APPEARANCE=d.DEFAULT_COMPONENT_APPEARANCE;exports.DEFAULT_LAYOUT_CONFIG=d.DEFAULT_LAYOUT_CONFIG;exports.AppearanceManager=y;exports.BREAKPOINTS=h;exports.BUTTON_VARIANTS=g;exports.CARD_VARIANTS=f;exports.INPUT_VARIANTS=u;exports.MODAL_SIZES=v;exports.RESPONSIVE_UTILITIES=p;exports.SIZE_CONFIGS=b;exports.appearanceConfigToTailwind=A;exports.createAppearanceManager=C;exports.createResponsiveProps=w;exports.getComponentClassNames=N;
//# sourceMappingURL=appearance.cjs.map