fiboui 2.2.4 → 2.4.0

package/dist/theme.js

@@ -1,9 +1,19 @@
 "use client";
-import { F as a, c as s, m as i, u as o, w as r } from "./provider-CihtUuRx.js";
+import { F as a, u as m } from "./provider-Muljv62_.js";
+import { F as o, a as t, c as T, e as r, m as i, n as l, r as n, f as u, d as F, t as b, b as c, w as p } from "./themeData-CmTJt3dU.js";
 export {
+  o as FIBO_THEMES,
   a as FiboThemeProvider,
-  s as cupertinoTheme,
+  t as copyWithTheme,
+  T as cupertinoTheme,
+  r as extendTheme,
   i as materialTheme,
-  o as useFiboTheme,
-  r as webTheme
+  l as noirTheme,
+  n as resolveTheme,
+  u as themeClassName,
+  F as themeToCssRule,
+  b as themeToCssVars,
+  c as themeToInlineStyle,
+  m as useFiboTheme,
+  p as webTheme
 };

package/dist/themeData-CmTJt3dU.js

@@ -0,0 +1,441 @@
+"use client";
+const f = {
+  name: "material",
+  colors: {
+    primary: "#6750A4",
+    primaryVariant: "#4F378B",
+    secondary: "#625B71",
+    secondaryVariant: "#4A4458",
+    background: "#FFFBFE",
+    surface: "#FFFBFE",
+    error: "#B3261E",
+    success: "#4CAF50",
+    warning: "#FF9800",
+    info: "#2196F3",
+    onPrimary: "#FFFFFF",
+    onSecondary: "#000000",
+    onBackground: "#000000",
+    onSurface: "#000000",
+    onError: "#FFFFFF"
+  },
+  typography: {
+    h1: {
+      fontSize: "96px",
+      fontWeight: 300,
+      letterSpacing: "-1.5px"
+    },
+    h2: {
+      fontSize: "60px",
+      fontWeight: 300,
+      letterSpacing: "-0.5px"
+    },
+    h3: {
+      fontSize: "48px",
+      fontWeight: 400
+    },
+    h4: {
+      fontSize: "34px",
+      fontWeight: 400,
+      letterSpacing: "0.25px"
+    },
+    h5: {
+      fontSize: "24px",
+      fontWeight: 400
+    },
+    h6: {
+      fontSize: "20px",
+      fontWeight: 500,
+      letterSpacing: "0.15px"
+    },
+    body: {
+      fontSize: "16px",
+      fontWeight: 400,
+      letterSpacing: "0.5px"
+    },
+    caption: {
+      fontSize: "12px",
+      fontWeight: 400,
+      letterSpacing: "0.4px"
+    },
+    label: {
+      fontSize: "14px",
+      fontWeight: 500,
+      letterSpacing: "1.25px"
+    }
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px"
+  },
+  borderRadius: {
+    sm: "4px",
+    md: "8px",
+    lg: "16px",
+    full: "9999px"
+  },
+  shadows: {
+    sm: "0 2px 4px rgba(0,0,0,0.1)",
+    md: "0 4px 8px rgba(0,0,0,0.12)",
+    lg: "0 8px 16px rgba(0,0,0,0.14)"
+  },
+  fontFamily: "Roboto, sans-serif"
+}, s = {
+  name: "cupertino",
+  colors: {
+    primary: "#007AFF",
+    secondary: "#AF52DE",
+    background: "#FFFFFF",
+    surface: "#F2F2F7",
+    error: "#FF3B30",
+    success: "#34C759",
+    warning: "#FF9500",
+    info: "#5AC8FA",
+    onPrimary: "#FFFFFF",
+    onSecondary: "#FFFFFF",
+    onBackground: "#000000",
+    onSurface: "#000000",
+    onError: "#FFFFFF"
+  },
+  typography: {
+    h1: {
+      fontSize: "34px",
+      fontWeight: 700,
+      letterSpacing: "0.37px"
+    },
+    h2: {
+      fontSize: "28px",
+      fontWeight: 700,
+      letterSpacing: "0.36px"
+    },
+    h3: {
+      fontSize: "22px",
+      fontWeight: 600,
+      letterSpacing: "0.35px"
+    },
+    h4: {
+      fontSize: "20px",
+      fontWeight: 600
+    },
+    h5: {
+      fontSize: "17px",
+      fontWeight: 600,
+      letterSpacing: "-0.41px"
+    },
+    h6: {
+      fontSize: "15px",
+      fontWeight: 600,
+      letterSpacing: "-0.24px"
+    },
+    body: {
+      fontSize: "17px",
+      fontWeight: 400,
+      letterSpacing: "-0.41px"
+    },
+    caption: {
+      fontSize: "13px",
+      fontWeight: 400,
+      letterSpacing: "-0.08px"
+    },
+    label: {
+      fontSize: "15px",
+      fontWeight: 500,
+      letterSpacing: "-0.24px"
+    }
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "20px",
+    xl: "32px"
+  },
+  borderRadius: {
+    sm: "8px",
+    md: "12px",
+    lg: "20px",
+    full: "9999px"
+  },
+  shadows: {
+    sm: "0 1px 3px rgba(0,0,0,0.08)",
+    md: "0 2px 8px rgba(0,0,0,0.1)",
+    lg: "0 4px 16px rgba(0,0,0,0.12)"
+  },
+  fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif'
+}, g = {
+  name: "web",
+  colors: {
+    primary: "#3B82F6",
+    secondary: "#8B5CF6",
+    background: "#FFFFFF",
+    surface: "#F9FAFB",
+    error: "#EF4444",
+    success: "#10B981",
+    warning: "#F59E0B",
+    info: "#06B6D4",
+    onPrimary: "#FFFFFF",
+    onSecondary: "#FFFFFF",
+    onBackground: "#111827",
+    onSurface: "#374151",
+    onError: "#FFFFFF"
+  },
+  typography: {
+    h1: {
+      fontSize: "60px",
+      fontWeight: 800,
+      letterSpacing: "-0.02em"
+    },
+    h2: {
+      fontSize: "48px",
+      fontWeight: 700,
+      letterSpacing: "-0.01em"
+    },
+    h3: {
+      fontSize: "36px",
+      fontWeight: 700
+    },
+    h4: {
+      fontSize: "30px",
+      fontWeight: 600
+    },
+    h5: {
+      fontSize: "24px",
+      fontWeight: 600
+    },
+    h6: {
+      fontSize: "20px",
+      fontWeight: 600
+    },
+    body: {
+      fontSize: "16px",
+      fontWeight: 400,
+      lineHeight: "1.5"
+    },
+    caption: {
+      fontSize: "14px",
+      fontWeight: 400,
+      lineHeight: "1.4"
+    },
+    label: {
+      fontSize: "14px",
+      fontWeight: 500,
+      letterSpacing: "0.01em"
+    }
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px"
+  },
+  borderRadius: {
+    sm: "6px",
+    md: "8px",
+    lg: "12px",
+    full: "9999px"
+  },
+  shadows: {
+    sm: "0 1px 2px rgba(0,0,0,0.05)",
+    md: "0 4px 6px rgba(0,0,0,0.07)",
+    lg: "0 10px 15px rgba(0,0,0,0.1)"
+  },
+  fontFamily: "Inter, system-ui, sans-serif"
+}, c = {
+  name: "noir",
+  colors: {
+    primary: "#F4F4F6",
+    onPrimary: "#0A0A0B",
+    primaryVariant: "#C8C8D0",
+    secondary: "#8E8E9A",
+    onSecondary: "#F4F4F6",
+    secondaryVariant: "#4E4E57",
+    background: "#0A0A0B",
+    onBackground: "#F4F4F6",
+    surface: "#141417",
+    onSurface: "#F4F4F6",
+    error: "#F87171",
+    success: "#34D399",
+    warning: "#FBBF24",
+    info: "#94A3B8",
+    onError: "#0A0A0B",
+    outline: "rgba(255, 255, 255, 0.12)"
+  },
+  typography: {
+    h1: {
+      fontSize: "clamp(38px, 4.4vw, 60px)",
+      fontWeight: 300,
+      letterSpacing: "0.03em",
+      lineHeight: 1.12,
+      color: "var(--fibo-on-background)"
+    },
+    h2: {
+      fontSize: "clamp(28px, 3.2vw, 44px)",
+      fontWeight: 300,
+      letterSpacing: "0.03em",
+      lineHeight: 1.18,
+      color: "var(--fibo-on-background)"
+    },
+    h3: {
+      fontSize: "16px",
+      fontWeight: 500,
+      letterSpacing: "0.01em",
+      color: "var(--fibo-on-background)"
+    },
+    h4: {
+      fontSize: "15px",
+      fontWeight: 500,
+      color: "var(--fibo-on-background)"
+    },
+    h5: {
+      fontSize: "14px",
+      fontWeight: 500,
+      color: "var(--fibo-on-background)"
+    },
+    h6: {
+      fontSize: "13px",
+      fontWeight: 500,
+      color: "var(--fibo-on-background)"
+    },
+    body: {
+      fontSize: "13.5px",
+      fontWeight: 400,
+      lineHeight: 1.7,
+      color: "var(--fibo-secondary)"
+    },
+    caption: {
+      fontSize: "12.5px",
+      fontWeight: 400,
+      lineHeight: 1.4,
+      color: "var(--fibo-secondary)"
+    },
+    label: {
+      fontSize: "11.5px",
+      fontWeight: 500,
+      letterSpacing: "0.02em",
+      color: "var(--fibo-secondary)"
+    }
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "40px"
+  },
+  borderRadius: {
+    sm: "6px",
+    md: "14px",
+    lg: "18px",
+    full: "9999px"
+  },
+  shadows: {
+    sm: "0 1px 0 rgba(255,255,255,0.04)",
+    md: "0 12px 40px rgba(0,0,0,0.45)",
+    lg: "0 30px 80px rgba(0,0,0,0.75)"
+  },
+  fontFamily: 'var(--font-sans-loaded, "Plus Jakarta Sans"), system-ui, -apple-system, sans-serif'
+}, l = {
+  material: f,
+  cupertino: s,
+  web: g,
+  noir: c
+};
+function h(o) {
+  if (typeof o == "string") {
+    const n = l[o];
+    if (!n) throw new Error(`Unknown fiboui theme preset: ${o}`);
+    return n;
+  }
+  return o;
+}
+function e(o, n) {
+  return n ? { ...o, ...n } : o;
+}
+function x(o, n) {
+  return n ? {
+    h1: e(o.h1, n.h1),
+    h2: e(o.h2, n.h2),
+    h3: e(o.h3, n.h3),
+    h4: e(o.h4, n.h4),
+    h5: e(o.h5, n.h5),
+    h6: e(o.h6, n.h6),
+    body: e(o.body, n.body),
+    caption: e(o.caption, n.caption),
+    label: e(o.label, n.label)
+  } : o;
+}
+function F(o, n) {
+  return {
+    name: n.name ?? o.name,
+    colors: { ...o.colors, ...n.colors },
+    typography: x(o.typography, n.typography),
+    spacing: { ...o.spacing, ...n.spacing },
+    borderRadius: { ...o.borderRadius, ...n.borderRadius },
+    shadows: { ...o.shadows, ...n.shadows },
+    fontFamily: n.fontFamily ?? o.fontFamily
+  };
+}
+const m = F;
+function d(o) {
+  return `--fibo-text-${o}`;
+}
+function p(o) {
+  const n = o.colors, r = {
+    "--fibo-primary": n.primary,
+    "--fibo-on-primary": n.onPrimary,
+    "--fibo-secondary": n.secondary,
+    "--fibo-on-secondary": n.onSecondary,
+    "--fibo-background": n.background,
+    "--fibo-on-background": n.onBackground,
+    "--fibo-surface": n.surface,
+    "--fibo-on-surface": n.onSurface,
+    "--fibo-error": n.error,
+    "--fibo-font-family": o.fontFamily,
+    "--fibo-space-xs": o.spacing.xs,
+    "--fibo-space-sm": o.spacing.sm,
+    "--fibo-space-md": o.spacing.md,
+    "--fibo-space-lg": o.spacing.lg,
+    "--fibo-space-xl": o.spacing.xl,
+    "--fibo-radius-sm": o.borderRadius.sm,
+    "--fibo-radius-md": o.borderRadius.md,
+    "--fibo-radius-lg": o.borderRadius.lg,
+    "--fibo-radius-full": o.borderRadius.full,
+    "--fibo-shadow-sm": o.shadows.sm,
+    "--fibo-shadow-md": o.shadows.md,
+    "--fibo-shadow-lg": o.shadows.lg
+  };
+  return n.primaryVariant && (r["--fibo-primary-variant"] = n.primaryVariant), n.secondaryVariant && (r["--fibo-secondary-variant"] = n.secondaryVariant), n.success && (r["--fibo-success"] = n.success), n.warning && (r["--fibo-warning"] = n.warning), n.info && (r["--fibo-info"] = n.info), n.onError && (r["--fibo-on-error"] = n.onError), n.outline && (r["--fibo-outline"] = n.outline), Object.keys(o.typography).forEach((a) => {
+    const i = o.typography[a], t = d(a);
+    i.fontSize != null && (r[`${t}-size`] = String(i.fontSize)), i.fontWeight != null && (r[`${t}-weight`] = String(i.fontWeight)), i.letterSpacing != null && (r[`${t}-tracking`] = String(i.letterSpacing)), i.lineHeight != null && (r[`${t}-height`] = String(i.lineHeight)), i.color != null && (r[`${t}-color`] = String(i.color));
+  }), r;
+}
+function u(o) {
+  return p(o);
+}
+function b(o) {
+  const n = p(o), r = Object.entries(n).map(([i, t]) => `  ${i}: ${t};`).join(`
+`);
+  return `.fibo-theme-${o.name || "custom"} {
+${r}
+}`;
+}
+function S(o) {
+  return `fibo-theme-${o.name || "custom"}`;
+}
+export {
+  l as F,
+  F as a,
+  u as b,
+  s as c,
+  b as d,
+  m as e,
+  S as f,
+  f as m,
+  c as n,
+  h as r,
+  p as t,
+  g as w
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fiboui",
-  "version": "2.2.4",
+  "version": "2.4.0",
   "description": "A Flutter/SwiftUI-inspired React UI framework with builder pattern and theme system",
   "type": "module",
   "main": "./dist/index.js",