@electroplix/components 0.4.1 → 0.5.0-alpha.2

package/dist/config.d.ts

@@ -0,0 +1,73 @@
+// Type declarations for @electroplix/components/config
+// Auto-generated by scripts/postbuild.cjs
+
+import type {
+  BaseTheme,
+  BlogTheme,
+  ButtonTheme,
+  ContentTheme,
+  DataDisplayTheme,
+  EcommerceTheme,
+  FormsTheme,
+  HeroTheme,
+  ListsCardsTheme,
+  MarketingTheme,
+  MediaTheme,
+  MiscTheme,
+  ModalsTheme,
+  NavigationTheme,
+  OnboardingTheme,
+  SearchTheme,
+  SiteIdentityTheme,
+  SocialTheme,
+  UserAccountsTheme,
+  ElectroplixConfig,
+} from './index';
+
+export type {
+  BaseTheme,
+  BlogTheme,
+  ButtonTheme,
+  ContentTheme,
+  DataDisplayTheme,
+  EcommerceTheme,
+  FormsTheme,
+  HeroTheme,
+  ListsCardsTheme,
+  MarketingTheme,
+  MediaTheme,
+  MiscTheme,
+  ModalsTheme,
+  NavigationTheme,
+  OnboardingTheme,
+  SearchTheme,
+  SiteIdentityTheme,
+  SocialTheme,
+  UserAccountsTheme,
+  ElectroplixConfig,
+};
+
+export declare const defaultBlogTheme: Required<BlogTheme>;
+export declare const defaultButtonTheme: Required<ButtonTheme>;
+export declare const defaultContentTheme: Required<ContentTheme>;
+export declare const defaultDataDisplayTheme: Required<DataDisplayTheme>;
+export declare const defaultEcommerceTheme: Required<EcommerceTheme>;
+export declare const defaultFormsTheme: Required<FormsTheme>;
+export declare const defaultHeroTheme: Required<HeroTheme>;
+export declare const defaultListsCardsTheme: Required<ListsCardsTheme>;
+export declare const defaultMarketingTheme: Required<MarketingTheme>;
+export declare const defaultMediaTheme: Required<MediaTheme>;
+export declare const defaultMiscTheme: Required<MiscTheme>;
+export declare const defaultModalsTheme: Required<ModalsTheme>;
+export declare const defaultNavigationTheme: Required<NavigationTheme>;
+export declare const defaultOnboardingTheme: Required<OnboardingTheme>;
+export declare const defaultSearchTheme: Required<SearchTheme>;
+export declare const defaultSiteIdentityTheme: Required<SiteIdentityTheme>;
+export declare const defaultSocialTheme: Required<SocialTheme>;
+export declare const defaultUserAccountsTheme: Required<UserAccountsTheme>;
+export declare const defaultConfig: ElectroplixConfig;
+export declare function defineConfig(config: ElectroplixConfig): ElectroplixConfig;
+export declare function mergeTheme<T extends Record<string, unknown>>(
+  target: T,
+  ...sources: Array<Partial<T> | undefined>
+): T;

package/dist/config.esm.js

@@ -0,0 +1,229 @@
+// @electroplix/components/config — server-safe configuration utilities.
+// This module intentionally does NOT include "use client" so it can be
+// imported from Server Components, config files, and Node.js scripts.
+// Auto-generated by scripts/postbuild.cjs — mirrors src/core/config.ts.
+
+/* ── base palette ────────────────────────────────────────── */
+
+const base = {
+  bgColor: "#0b0b0c",
+  textColor: "#F3F4F6",
+  accentColor: "#8B5CF6",
+  borderColor: "rgba(255,255,255,0.12)",
+  fontFamily: "Inter, ui-sans-serif, system-ui",
+  radius: 14,
+  spacing: 14,
+  headingSize: 20,
+  bodySize: 14,
+  fontWeight: "400",
+  lineHeight: 1.5,
+  letterSpacing: 0,
+  shadow: "none",
+};
+
+/* ── per-category defaults ───────────────────────────────── */
+
+export const defaultBlogTheme = {
+  ...base,
+  cardBg: "rgba(128,128,128,0.1)",
+  cardRadius: 10,
+  cardBorder: "rgba(255,255,255,0.12)",
+  tagBg: "rgba(139,92,246,0.15)",
+  tagColor: "#C4B5FD",
+};
+
+export const defaultButtonTheme = {
+  bgColor: "#2563eb",
+  textColor: "#fff",
+  accentColor: "#8B5CF6",
+  borderColor: "transparent",
+  fontFamily: "Inter, sans-serif",
+  fontSize: 15,
+  fontWeight: "500",
+  letterSpacing: 0,
+  lineHeight: 1,
+  radius: 8,
+  paddingX: 18,
+  paddingY: 10,
+  gap: 8,
+  opacity: 1,
+  shadow: "none",
+  transitionDuration: 200,
+};
+
+export const defaultContentTheme = {
+  ...base,
+  cardBg: "rgba(128,128,128,0.1)",
+  cardRadius: 10,
+  cardBorder: "rgba(255,255,255,0.12)",
+  maxW: 800,
+  px: 24,
+  py: 24,
+  gap: 16,
+};
+
+export const defaultDataDisplayTheme = {
+  ...base,
+  cardBg: "#0b0b0c",
+  cardRadius: 12,
+  cardBorder: "rgba(255,255,255,0.1)",
+  gridColor: "rgba(255,255,255,0.08)",
+};
+
+export const defaultEcommerceTheme = {
+  ...base,
+  headingSize: 22,
+  accentColor: "#7C3AED",
+  borderColor: "rgba(255,255,255,0.12)",
+  cardBg: "#0b0b0c",
+  cardRadius: 12,
+  cardBorder: "rgba(255,255,255,0.1)",
+  inputBg: "rgba(128,128,128,0.1)",
+  inputText: "#E5E7EB",
+  buttonSize: 14,
+};
+
+export const defaultFormsTheme = {
+  ...base,
+  cardBg: "rgba(128,128,128,0.1)",
+  cardRadius: 10,
+  cardBorder: "rgba(255,255,255,0.12)",
+  inputBg: "rgba(128,128,128,0.1)",
+  inputText: "#E5E7EB",
+  maxW: 600,
+  px: 24,
+  py: 24,
+  gap: 16,
+};
+
+export const defaultHeroTheme = {
+  ...base,
+  cardBg: "rgba(128,128,128,0.1)",
+  cardRadius: 12,
+  cardBorder: "rgba(255,255,255,0.12)",
+  minH: 480,
+  maxW: 1200,
+  px: 24,
+  py: 48,
+  gap: 24,
+};
+
+export const defaultListsCardsTheme = {
+  ...base,
+  cardBg: "rgba(128,128,128,0.1)",
+  cardRadius: 10,
+  cardBorder: "rgba(255,255,255,0.12)",
+  inputBg: "rgba(128,128,128,0.1)",
+  inputText: "#E5E7EB",
+  maxW: 1200,
+  px: 24,
+  py: 24,
+  gap: 16,
+};
+
+export const defaultMarketingTheme = {
+  ...base,
+  cardBg: "rgba(128,128,128,0.1)",
+  cardRadius: 10,
+  cardBorder: "rgba(255,255,255,0.12)",
+  inputBg: "#191a1f",
+  inputText: "#E5E7EB",
+  mutedText: "rgba(255,255,255,0.7)",
+  gridColor: "rgba(255,255,255,0.08)",
+  shadow: "0 10px 25px rgba(0,0,0,0.35)",
+};
+
+export const defaultMediaTheme = { ...base };
+
+export const defaultMiscTheme = {
+  ...base,
+  radius: 16,
+  spacing: 16,
+  headingSize: 18,
+  shadow: "0 20px 50px rgba(0,0,0,0.5)",
+  surfaceColor: "rgba(255,255,255,0.03)",
+  codeBg: "rgba(139,92,246,0.1)",
+  codeText: "#E5E7EB",
+  mutedText: "rgba(255,255,255,0.6)",
+};
+
+export const defaultModalsTheme = { ...base };
+
+export const defaultNavigationTheme = {
+  ...base,
+  height: 72,
+  padding: 24,
+  sticky: false,
+  showSearch: false,
+  showCTA: false,
+};
+
+export const defaultOnboardingTheme = {
+  ...base,
+  cardBg: "rgba(128,128,128,0.1)",
+  cardRadius: 10,
+  cardBorder: "rgba(255,255,255,0.12)",
+};
+
+export const defaultSearchTheme = {
+  ...base,
+  cardBg: "rgba(128,128,128,0.1)",
+  cardRadius: 10,
+  cardBorder: "rgba(255,255,255,0.12)",
+};
+
+export const defaultSiteIdentityTheme = { ...base };
+
+export const defaultSocialTheme = {
+  ...base,
+  mutedText: "rgba(255,255,255,0.65)",
+  buttonText: "#ffffff",
+};
+
+export const defaultUserAccountsTheme = {
+  ...base,
+  inputBg: "rgba(128,128,128,0.1)",
+  inputText: "#E5E7EB",
+};
+
+/* ── aggregate config ────────────────────────────────────── */
+
+export const defaultConfig = {
+  blog: { ...defaultBlogTheme },
+  buttons: { ...defaultButtonTheme },
+  content: { ...defaultContentTheme },
+  dataDisplay: { ...defaultDataDisplayTheme },
+  ecommerce: { ...defaultEcommerceTheme },
+  forms: { ...defaultFormsTheme },
+  hero: { ...defaultHeroTheme },
+  listsCards: { ...defaultListsCardsTheme },
+  marketing: { ...defaultMarketingTheme },
+  media: { ...defaultMediaTheme },
+  miscellaneous: { ...defaultMiscTheme },
+  modals: { ...defaultModalsTheme },
+  navigation: { ...defaultNavigationTheme },
+  onboarding: { ...defaultOnboardingTheme },
+  search: { ...defaultSearchTheme },
+  siteIdentity: { ...defaultSiteIdentityTheme },
+  social: { ...defaultSocialTheme },
+  userAccounts: { ...defaultUserAccountsTheme },
+};
+
+/* ── utilities ───────────────────────────────────────────── */
+
+export function defineConfig(config) {
+  return config;
+}
+
+export function mergeTheme(target, ...sources) {
+  const result = { ...target };
+  for (const source of sources) {
+    if (!source) continue;
+    for (const key of Object.keys(source)) {
+      if (source[key] !== undefined) {
+        result[key] = source[key];
+      }
+    }
+  }
+  return result;
+}