@frank-auth/react/dist/esm/config/index.js

Flexible and customizable React UI components for Frank Authentication

import { AppearanceManager as g } from "./appearance.js";
import { appearanceConfigToTailwind as N, BREAKPOINTS as F, BUTTON_VARIANTS as b, CARD_VARIANTS as U, createAppearanceManager as D, createResponsiveProps as P, getComponentClassNames as R, INPUT_VARIANTS as v, MODAL_SIZES as w, RESPONSIVE_UTILITIES as G, SIZE_CONFIGS as V } from "./appearance.js";
import { LocalizationManager as c } from "./localization.js";
import { createLocalizationManager as x, createTranslationNamespace as H, detectBrowserLocale as Z, getLocaleDirection as K, isRTL as Y } from "./localization.js";
import { OrganizationConfigManager as o, transformOrganizationSettings as f } from "./organization.js";
import { createOrganizationConfigManager as $, getFeaturesByTier as j } from "./organization.js";
import { ThemeManager as l } from "./theme.js";
import { createDarkTheme as q, createThemeManager as J, getThemeCSS as Q, THEME_PRESETS as X, validateTheme as aa } from "./theme.js";
import { DEFAULT_FRANK_AUTH_CONFIG as r, CONFIG_PRESETS as p } from "./defaults.js";
import { DEFAULT_ANIMATIONS as na, DEFAULT_APPEARANCE_CONFIG as ia, DEFAULT_BORDER_RADIUS as ta, DEFAULT_BRANDING_CONFIG as ra, DEFAULT_COLOR_PALETTE as oa, DEFAULT_COMPONENT_APPEARANCE as sa, DEFAULT_LAYOUT_CONFIG as ga, DEFAULT_LOCALIZATION_CONFIG as ca, DEFAULT_LOCALE_MESSAGES as fa, DEFAULT_ORGANIZATION_CONFIG as la, DEFAULT_SHADOWS as pa, DEFAULT_SPACING as ha, DEFAULT_THEME_CONFIG as ma, DEFAULT_TYPOGRAPHY as da } from "./defaults.js";
import { validateFrankAuthConfig as s } from "./validators.js";
import { assertValidConfig as Ma, getConfigErrors as Ca, getConfigWarnings as Ta, isValidConfig as Aa, validateApiUrl as za, validateAppearanceConfig as Ea, validateComponentOverrides as La, validateLocale as Oa, validateLocalizationConfig as _a, validateOrganizationConfig as Sa, validatePublishableKey as Ia, validateThemeConfig as ya, validateUserType as Na } from "./validators.js";
import { ThemeUtils as ba } from "../utils/theme.js";
var h = Object.defineProperty, m = (n, a, e) => a in n ? h(n, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[a] = e, i = (n, a, e) => m(n, typeof a != "symbol" ? a + "" : a, e);
class d {
  constructor(a) {
    i(this, "config"), i(this, "themeManager"), i(this, "appearanceManager"), i(this, "localizationManager"), i(this, "organizationManager"), i(this, "listeners", /* @__PURE__ */ new Set()), this.config = { ...r, ...a }, this.themeManager = new l(this.config.theme), this.appearanceManager = new g(this.config.appearance), this.localizationManager = new c(this.config.localization), this.config.organization && (this.organizationManager = new o(
      this.config.organization,
      this.themeManager,
      this.appearanceManager
    )), this.setupManagerListeners(), this.applyInitialConfiguration();
  }
  /**
   * Get current configuration
   */
  getConfig() {
    return { ...this.config };
  }
  /**
   * Update configuration
   */
  updateConfig(a) {
    this.config = { ...this.config, ...a }, a.theme && this.themeManager.setTheme(a.theme), a.appearance && this.appearanceManager.updateConfig(a.appearance), a.localization && this.localizationManager.updateConfig(a.localization), a.organization && this.organizationManager && this.organizationManager.updateConfig(a.organization), this.notifyListeners();
  }
  /**
   * Set organization configuration
   */
  setOrganization(a) {
    this.config.organization = a, this.config.projectId = a.id, this.organizationManager ? this.organizationManager.updateConfig(a) : (this.organizationManager = new o(
      a,
      this.themeManager,
      this.appearanceManager
    ), this.organizationManager.subscribe((t) => {
      this.config.organization = t, this.notifyListeners();
    }));
    const e = this.organizationManager.generateUIConfig();
    this.updateConfig(e);
  }
  /**
   * Get theme manager
   */
  getThemeManager() {
    return this.themeManager;
  }
  /**
   * Get appearance manager
   */
  getAppearanceManager() {
    return this.appearanceManager;
  }
  /**
   * Get localization manager
   */
  getLocalizationManager() {
    return this.localizationManager;
  }
  /**
   * Get organization manager
   */
  getOrganizationManager() {
    return this.organizationManager;
  }
  /**
   * Apply configuration to DOM
   */
  applyToDOM() {
    this.themeManager.applyToDOM(), this.appearanceManager.applyToDOM();
    const a = this.localizationManager.getCurrentLocaleMetadata().direction;
    typeof document < "u" && (document.documentElement.dir = a, document.documentElement.lang = this.localizationManager.getCurrentLocale());
  }
  /**
   * Generate complete CSS for server-side rendering
   */
  generateCSS() {
    let a = "";
    return a += this.themeManager.generateCSSVariables(), a += `
`, a += this.appearanceManager.generateCSS(), a += `
`, a;
  }
  /**
   * Validate current configuration
   */
  validateConfig() {
    return s(this.config);
  }
  /**
   * Subscribe to configuration changes
   */
  subscribe(a) {
    return this.listeners.add(a), () => {
      this.listeners.delete(a);
    };
  }
  /**
   * Reset to default configuration
   */
  reset() {
    this.config = { ...r }, this.themeManager.setTheme(this.config.theme || {}), this.appearanceManager.updateConfig(this.config.appearance || {}), this.localizationManager.updateConfig(this.config.localization || {}), this.notifyListeners();
  }
  /**
   * Destroy and cleanup
   */
  destroy() {
    this.listeners.clear();
  }
  // Private methods
  setupManagerListeners() {
    this.themeManager.subscribe((a) => {
      this.config.theme = a, this.notifyListeners();
    }), this.appearanceManager.subscribe((a) => {
      this.config.appearance = a, this.notifyListeners();
    }), this.localizationManager.subscribe((a) => {
      this.config.localization && (this.config.localization.defaultLocale = a), this.notifyListeners();
    });
  }
  applyInitialConfiguration() {
    this.config.organization?.settings.branding && this.themeManager.applyBranding({
      logo: {
        url: this.config.organization.settings.branding.logo,
        alt: this.config.organization.name
      },
      colors: {
        primary: this.config.organization.settings.branding.primaryColor || "#3b82f6",
        secondary: this.config.organization.settings.branding.secondaryColor || "#64748b"
      },
      fonts: {
        primary: "Inter, ui-sans-serif, system-ui, sans-serif"
      },
      customCSS: this.config.organization.settings.branding.customCSS
    }), typeof window < "u" && this.applyToDOM();
  }
  notifyListeners() {
    this.listeners.forEach((a) => a(this.config));
  }
}
function u(n) {
  const e = s(n);
  if (!e.isValid)
    throw new Error(`Invalid configuration: ${e.errors.map((t) => t.message).join(", ")}`);
  return { ...r, ...n };
}
function O(n) {
  return new d(n);
}
function _(n, a, e) {
  const t = f(e);
  return u({
    publishableKey: n,
    userType: a,
    organization: t
  });
}
function M(...n) {
  let a = { ...r };
  for (const e of n)
    a = {
      ...a,
      ...e,
      theme: { ...a.theme, ...e.theme },
      appearance: {
        ...a.appearance,
        ...e.appearance,
        layout: { ...a.appearance?.layout, ...e.appearance?.layout },
        components: { ...a.appearance?.components, ...e.appearance?.components },
        branding: { ...a.appearance?.branding, ...e.appearance?.branding }
      },
      localization: { ...a.localization, ...e.localization },
      organization: { ...a.organization, ...e.organization },
      features: { ...a.features, ...e.features },
      components: { ...a.components, ...e.components }
    };
  return a;
}
function S(n, a) {
  const e = p[n];
  if (!e)
    throw new Error(`Unknown preset: ${n}`);
  return a ? M(e, a) : e;
}
export {
  g as AppearanceManager,
  d as ConfigManager,
  c as LocalizationManager,
  o as OrganizationConfigManager,
  l as ThemeManager,
  ba as ThemeUtils,
  N as appearanceConfigToTailwind,
  Ma as assertValidConfig,
  F as breakpoints,
  b as buttonVariants,
  U as cardVariants,
  p as configPresets,
  D as createAppearanceManager,
  _ as createConfigFromOrganization,
  O as createConfigManager,
  S as createConfigPreset,
  q as createDarkTheme,
  u as createFrankAuthConfig,
  x as createLocalizationManager,
  $ as createOrganizationConfigManager,
  P as createResponsiveProps,
  J as createThemeManager,
  H as createTranslationNamespace,
  d as default,
  na as defaultAnimations,
  ia as defaultAppearance,
  ta as defaultBorderRadius,
  ra as defaultBranding,
  oa as defaultColors,
  sa as defaultComponentAppearance,
  r as defaultConfig,
  ga as defaultLayout,
  ca as defaultLocalization,
  fa as defaultMessages,
  la as defaultOrganization,
  pa as defaultShadows,
  ha as defaultSpacing,
  ma as defaultTheme,
  da as defaultTypography,
  Z as detectBrowserLocale,
  R as getComponentClassNames,
  Ca as getConfigErrors,
  Ta as getConfigWarnings,
  j as getFeaturesByTier,
  K as getLocaleDirection,
  Q as getThemeCSS,
  v as inputVariants,
  Y as isRTL,
  Aa as isValidConfig,
  M as mergeConfigs,
  w as modalSizes,
  G as responsiveUtils,
  V as sizeConfigs,
  X as themePresets,
  f as transformOrganizationSettings,
  za as validateApiUrl,
  Ea as validateAppearanceConfig,
  La as validateComponentOverrides,
  s as validateFrankAuthConfig,
  Oa as validateLocale,
  _a as validateLocalizationConfig,
  Sa as validateOrganizationConfig,
  Ia as validatePublishableKey,
  aa as validateTheme,
  ya as validateThemeConfig,
  Na as validateUserType
};
//# sourceMappingURL=index.js.map