zentrixui/dist/utils/theme.js

ZentrixUI - A modern, highly customizable and accessible React file upload component library with multiple variants, JSON-based configuration, and excellent developer experience.

function generateThemeClasses(variant, size, radius, config, additionalClasses) {
  const classes = ["file-upload"];
  classes.push(`file-upload--${variant}`);
  classes.push(`file-upload--${size}`);
  classes.push(`file-upload--radius-${radius}`);
  classes.push("file-upload--responsive");
  if (additionalClasses) {
    classes.push(...additionalClasses);
  }
  return classes.join(" ");
}
function applyTheme(theme, config) {
  const root = document.documentElement;
  root.setAttribute("data-theme", theme);
  if (config?.styling) {
    const { colors, spacing, typography, borders, shadows } = config.styling;
    if (colors) {
      Object.entries(colors).forEach(([key, value]) => {
        root.style.setProperty(`--file-upload-${key}`, value);
      });
    }
    if (spacing) {
      Object.entries(spacing).forEach(([key, value]) => {
        root.style.setProperty(`--file-upload-spacing-${key}`, value);
      });
    }
    if (typography) {
      Object.entries(typography).forEach(([key, value]) => {
        root.style.setProperty(`--file-upload-${key}`, value);
      });
    }
    if (borders) {
      Object.entries(borders).forEach(([key, value]) => {
        root.style.setProperty(`--file-upload-border-${key}`, value);
      });
    }
    if (shadows) {
      Object.entries(shadows).forEach(([key, value]) => {
        root.style.setProperty(`--file-upload-shadow-${key}`, value);
      });
    }
  }
}
function getSystemTheme() {
  if (typeof window !== "undefined" && window.matchMedia) {
    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  }
  return "light";
}
function resolveTheme(theme) {
  if (theme === "auto") {
    return getSystemTheme();
  }
  return theme;
}
function createThemeWatcher(callback) {
  if (typeof window === "undefined" || !window.matchMedia) {
    return () => {
    };
  }
  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
  const handler = (e) => {
    callback(e.matches ? "dark" : "light");
  };
  mediaQuery.addEventListener("change", handler);
  return () => {
    mediaQuery.removeEventListener("change", handler);
  };
}
function generateCSSVariables(config) {
  const variables = {};
  if (config.styling) {
    const { colors, spacing, typography, borders, shadows } = config.styling;
    if (colors) {
      Object.entries(colors).forEach(([key, value]) => {
        variables[`--file-upload-${key}`] = value;
      });
    }
    if (spacing) {
      Object.entries(spacing).forEach(([key, value]) => {
        variables[`--file-upload-spacing-${key}`] = value;
      });
    }
    if (typography) {
      Object.entries(typography).forEach(([key, value]) => {
        variables[`--file-upload-${key}`] = value;
      });
    }
    if (borders) {
      Object.entries(borders).forEach(([key, value]) => {
        variables[`--file-upload-border-${key}`] = value;
      });
    }
    if (shadows) {
      Object.entries(shadows).forEach(([key, value]) => {
        variables[`--file-upload-shadow-${key}`] = value;
      });
    }
  }
  return variables;
}
function cn(...classes) {
  return classes.filter(Boolean).join(" ");
}
function getResponsiveClasses(size, variant) {
  const classes = [];
  switch (variant) {
    case "dropzone":
      classes.push("file-upload--sm:responsive", "file-upload--md:responsive");
      break;
    case "multi-file":
      classes.push("file-upload--sm:stack", "file-upload--md:stack");
      break;
    default:
      classes.push("file-upload--responsive");
  }
  return classes;
}
function validateThemeConfig(config) {
  const errors = [];
  if (config.styling?.colors) {
    const hexPattern = /^#[0-9a-fA-F]{6}$/;
    Object.entries(config.styling.colors).forEach(([key, value]) => {
      if (typeof value === "string" && !hexPattern.test(value)) {
        errors.push(`Invalid color format for ${key}: ${value}. Expected hex format like #ffffff`);
      }
    });
  }
  if (config.styling?.spacing) {
    Object.entries(config.styling.spacing).forEach(([key, value]) => {
      if (typeof value === "string" && !value.match(/^\d+(\.\d+)?(px|rem|em|%)$/)) {
        errors.push(`Invalid spacing format for ${key}: ${value}. Expected CSS unit like 1rem, 16px, etc.`);
      }
    });
  }
  return {
    isValid: errors.length === 0,
    errors
  };
}
export {
  applyTheme,
  cn,
  createThemeWatcher,
  generateCSSVariables,
  generateThemeClasses,
  getResponsiveClasses,
  getSystemTheme,
  resolveTheme,
  validateThemeConfig
};
//# sourceMappingURL=theme.js.map