@ramme-io/ui 4.0.0 → 4.1.0

package/dist/contexts/ThemeContext.js

@@ -1,50 +1,60 @@
-import { jsx as Q } from "react/jsx-runtime";
-import { useState as f, useEffect as G, useCallback as b, useMemo as U, createContext as q, useContext as W } from "react";
-const x = [
+import { jsx as W } from "react/jsx-runtime";
+import { useState as y, useEffect as M, useCallback as h, useMemo as X, createContext as Z, useContext as ee } from "react";
+const L = [
   "light",
   "dark",
   "system",
   "corporate",
   "midnight",
   "blueprint"
-], O = {
+], m = 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace', K = {
   light: {
     sans: '"Inter", system-ui, sans-serif',
     serif: "Georgia, serif",
-    mono: '"Menlo", monospace'
+    mono: `"Menlo", ${m}`
   },
   dark: {
     sans: '"Inter", system-ui, sans-serif',
     serif: "Georgia, serif",
-    mono: '"Menlo", monospace'
+    mono: `"Menlo", ${m}`
   },
   system: {
     sans: '"Inter", system-ui, sans-serif',
     serif: "Georgia, serif",
-    mono: '"Menlo", monospace'
+    mono: `"Menlo", ${m}`
   },
   corporate: {
     sans: '"Lato", sans-serif',
     serif: '"Merriweather", serif',
-    mono: '"Menlo", monospace'
+    mono: `"Menlo", ${m}`
   },
   midnight: {
     sans: '"Roboto Mono", monospace',
     serif: "Georgia, serif",
-    mono: '"Roboto Mono", monospace'
+    mono: `"Roboto Mono", ${m}`
   },
   blueprint: {
     sans: '"Courier New", monospace',
     serif: "Georgia, serif",
-    mono: '"Courier New", monospace'
+    mono: `"Courier New", ${m}`
   }
-}, H = {
+}, oe = 550, re = 100, V = {
   name: "TAY Dreamboat",
   borderRadius: "0.5rem",
   fonts: {
-    sans: '"Inter", system-ui, sans-serif',
-    serif: '"TAY Dreamboat", "Tay", sans-serif',
-    mono: '"Menlo", monospace'
+    // Roboto, not Inter. products/ramme-marketing/index.html preconnects and
+    // loads Roboto, tailwind.config.cjs declared it, and both docs pages teach
+    // it as the body font — but `body { font-family: var(--app-font-sans) }`
+    // meant this line decided, and this line said Inter. The site therefore
+    // rendered in Inter while every other signal claimed Roboto.
+    // "Roboto Fallback" is the metric-matched face in @ramme-io/ui's index.css;
+    // it keeps the swap from reflowing the page.
+    sans: '"Roboto", "Roboto Fallback", system-ui, sans-serif',
+    // "Tay" used to sit in this stack. Its @font-face pointed at
+    // /fonts/Tay.woff2, which does not exist anywhere in the repo — a 404 in
+    // the fallback slot of the hero font.
+    serif: '"TAY Dreamboat", "TAY Dreamboat Fallback", serif',
+    mono: `"Menlo", ${m}`
   },
   lightColors: {
     background: "253 251 247",
@@ -84,29 +94,29 @@ const x = [
     danger: "239 68 68",
     dangerForeground: "255 255 255"
   }
-}, J = q(void 0), V = {
-  [H.name]: H
-}, C = ({
-  children: y,
-  defaultTheme: i,
+}, J = Z(void 0), q = {
+  [V.name]: V
+}, se = ({
+  children: S,
+  defaultTheme: l,
   defaultCustomTheme: d,
   appId: E,
   instanceConfig: c
 }) => {
-  var P, z, _;
-  const F = (P = c == null ? void 0 : c.fonts) == null ? void 0 : P.sans, $ = (z = c == null ? void 0 : c.fonts) == null ? void 0 : z.serif, M = (_ = c == null ? void 0 : c.fonts) == null ? void 0 : _.mono, t = E ? `ramme:theme:${E}` : "ramme:theme:global", [u, h] = f(() => {
+  var O, z, G;
+  const F = (O = c == null ? void 0 : c.fonts) == null ? void 0 : O.sans, w = (z = c == null ? void 0 : c.fonts) == null ? void 0 : z.serif, R = (G = c == null ? void 0 : c.fonts) == null ? void 0 : G.mono, t = E ? `ramme:theme:${E}` : "ramme:theme:global", [f, T] = y(() => {
     if (typeof window < "u") {
       const o = localStorage.getItem(`${t}:mode`);
-      return d && !o ? i || "system" : o && x.includes(o) ? o : i || "system";
+      return d && !o ? l || "system" : o && L.includes(o) ? o : l || "system";
     }
-    return i || "system";
-  }), [A, R] = f("light"), [m, k] = f("0.5rem"), [S, w] = f("1rem"), [s, g] = f(() => {
+    return l || "system";
+  }), [x, _] = y("light"), [p, I] = y("0.5rem"), [A, k] = y("1rem"), [a, b] = y(() => {
     if (typeof window < "u") {
       const o = localStorage.getItem(`${t}:custom`);
       if (o)
         try {
           const e = JSON.parse(o);
-          return e != null && e.name && V[e.name] ? V[e.name] : e;
+          return e != null && e.name && q[e.name] ? q[e.name] : e;
         } catch {
         }
       if (d && !o)
@@ -114,33 +124,42 @@ const x = [
     }
     return d || null;
   });
-  G(() => {
+  M(() => {
     if (typeof window < "u") {
       const o = window.matchMedia("(prefers-color-scheme: dark)");
-      R(o.matches ? "dark" : "light");
-      const e = (l) => {
-        R(l.matches ? "dark" : "light");
+      _(o.matches ? "dark" : "light");
+      const e = (g) => {
+        _(g.matches ? "dark" : "light");
       };
       o.addEventListener("change", e);
-      const v = localStorage.getItem(`${t}:borderRadius`), I = localStorage.getItem(`${t}:fontSize`);
-      return v && k(v), I && w(I), () => o.removeEventListener("change", e);
+      const u = localStorage.getItem(`${t}:borderRadius`), $ = localStorage.getItem(`${t}:fontSize`);
+      return u && I(u), $ && k($), () => o.removeEventListener("change", e);
     }
   }, [d, t]);
-  const L = b(() => {
-    localStorage.removeItem(`${t}:mode`), localStorage.removeItem(`${t}:custom`), localStorage.removeItem(`${t}:borderRadius`), localStorage.removeItem(`${t}:fontSize`), k("0.5rem"), w("1rem"), d ? (h("system"), g(d)) : i ? (h(i), g(null)) : (h("system"), g(null));
-  }, [i, d, t]), B = b((o) => {
-    h(o), localStorage.setItem(`${t}:mode`, o), ["light", "dark", "system"].includes(o) || (g(null), localStorage.removeItem(`${t}:custom`));
-  }, [t]), Y = b((o) => {
-    g(o), o ? localStorage.setItem(`${t}:custom`, JSON.stringify(o)) : localStorage.removeItem(`${t}:custom`);
-  }, [t]), D = b((o) => {
-    k(o), localStorage.setItem(`${t}:borderRadius`, o);
-  }, [t]), N = b((o) => {
-    w(o), localStorage.setItem(`${t}:fontSize`, o);
+  const B = h(() => {
+    localStorage.removeItem(`${t}:mode`), localStorage.removeItem(`${t}:custom`), localStorage.removeItem(`${t}:borderRadius`), localStorage.removeItem(`${t}:fontSize`), I("0.5rem"), k("1rem"), d ? (T("system"), b(d)) : l ? (T(l), b(null)) : (T("system"), b(null));
+  }, [l, d, t]), N = h((o) => {
+    T(o), localStorage.setItem(`${t}:mode`, o), ["light", "dark", "system"].includes(o) || (b(null), localStorage.removeItem(`${t}:custom`));
+  }, [t]), Y = h((o) => {
+    b(o), o ? localStorage.setItem(`${t}:custom`, JSON.stringify(o)) : localStorage.removeItem(`${t}:custom`);
+  }, [t]), D = h((o) => {
+    I(o), localStorage.setItem(`${t}:borderRadius`, o);
+  }, [t]), P = h((o) => {
+    k(o), localStorage.setItem(`${t}:fontSize`, o);
   }, [t]);
-  G(() => {
+  M(() => {
+    const o = document.documentElement;
+    let e;
+    const u = requestAnimationFrame(() => {
+      e = window.setTimeout(() => o.setAttribute("data-theme-ready", ""), re);
+    });
+    return () => {
+      cancelAnimationFrame(u), e !== void 0 && window.clearTimeout(e), o.removeAttribute("data-theme-ready");
+    };
+  }, []), M(() => {
     const o = document.documentElement;
-    x.forEach((a) => o.classList.remove(a)), o.classList.remove("custom-theme");
-    const e = (a, n) => o.style.setProperty(a, n), v = (a) => o.style.removeProperty(a), I = [
+    L.forEach((s) => o.classList.remove(s)), o.classList.remove("custom-theme");
+    const e = (s, n) => o.style.setProperty(s, n), u = (s) => o.style.removeProperty(s), $ = [
       "system-ui",
       "Inter",
       "Georgia",
@@ -157,13 +176,17 @@ const x = [
       "TAYDreamboat",
       "TAYBirdie",
       "TAYKula"
-    ], l = (a) => {
-      const n = a.split(",")[0].replace(/['"]*/g, "").trim();
-      if (I.some((p) => n.toLowerCase().includes(p.toLowerCase()))) return;
-      const r = `google-font-${n.replace(/\s+/g, "-")}`;
-      if (!document.getElementById(r)) {
-        const p = document.createElement("link");
-        p.id = r, p.rel = "stylesheet", p.href = `https://fonts.googleapis.com/css2?family=${n.replace(/\s+/g, "+")}:wght@400;500;600;700&display=swap`, document.head.appendChild(p);
+    ], g = (s) => {
+      const n = s.split(",")[0].replace(/['"]*/g, "").trim();
+      if ($.some((i) => n.toLowerCase().includes(i.toLowerCase()))) return;
+      const r = n.replace(/\s+/g, "+").toLowerCase();
+      if (Array.from(
+        document.querySelectorAll('link[rel="stylesheet"]')
+      ).some((i) => i.href.toLowerCase().includes(`family=${r}`))) return;
+      const C = `google-font-${n.replace(/\s+/g, "-")}`;
+      if (!document.getElementById(C)) {
+        const i = document.createElement("link");
+        i.id = C, i.rel = "stylesheet", i.href = `https://fonts.googleapis.com/css2?family=${n.replace(/\s+/g, "+")}:wght@400;500;600;700&display=swap`, document.head.appendChild(i);
       }
     }, j = [
       "--app-primary-color",
@@ -194,49 +217,55 @@ const x = [
       "--app-border-radius-sm",
       "--app-border-radius-md",
       "--app-border-radius-lg"
-    ], T = u === "system" ? A : u;
-    if (s) {
+    ], v = f === "system" ? x : f;
+    if (a) {
       o.classList.add("custom-theme");
-      const a = T === "dark" || T === "midnight";
-      a && o.classList.add("dark");
-      const n = s.colors, r = a ? s.darkColors || n : s.lightColors || n;
+      const s = v === "dark" || v === "midnight";
+      s && o.classList.add("dark");
+      const n = a.colors, r = s ? a.darkColors || n : a.lightColors || n;
       if (!r) {
-        console.error("ThemeEngine: Invalid customTheme payload", s);
+        console.error("ThemeEngine: Invalid customTheme payload", a);
         return;
       }
-      e("--app-primary-color", r.primary), e("--app-primary-foreground-color", r.primaryForeground), e("--app-secondary-color", r.secondary), e("--app-secondary-foreground-color", r.secondaryForeground), e("--app-accent-color", r.accent), e("--app-accent-foreground-color", r.accentForeground), e("--app-danger-color", r.danger), e("--app-danger-foreground-color", r.dangerForeground), e("--app-bg-color", r.background), e("--app-card-bg-color", r.card), e("--app-text-color", r.text), e("--app-border-color", r.border), e("--app-muted-bg", r.muted), e("--app-muted-text", r.mutedForeground), e("--app-input-bg-color", r.input), e("--app-input-border-color", r.inputBorder), e("--app-input-focus-ring-color", r.ring), e("--app-table-header-bg", r.muted), e("--app-table-header-text", r.text), e("--app-table-row-hover-bg", r.muted), e("--app-table-grid-line-color", r.border), s.fonts && (l(s.fonts.sans), s.fonts.serif && l(s.fonts.serif), e("--app-font-serif", s.fonts.serif), e("--app-font-sans", s.fonts.sans), e("--app-font-mono", s.fonts.mono)), document.body.style.backgroundColor = `rgb(${r.background})`, document.body.style.color = `rgb(${r.text})`, e("--app-border-radius-md", s.borderRadius), e("--app-border-radius-sm", `calc(${s.borderRadius} - 0.25rem)`), e("--app-border-radius-lg", `calc(${s.borderRadius} + 0.25rem)`);
+      e("--app-primary-color", r.primary), e("--app-primary-foreground-color", r.primaryForeground), e("--app-secondary-color", r.secondary), e("--app-secondary-foreground-color", r.secondaryForeground), e("--app-accent-color", r.accent), e("--app-accent-foreground-color", r.accentForeground), e("--app-danger-color", r.danger), e("--app-danger-foreground-color", r.dangerForeground), e("--app-bg-color", r.background), e("--app-card-bg-color", r.card), e("--app-text-color", r.text), e("--app-border-color", r.border), e("--app-muted-bg", r.muted), e("--app-muted-text", r.mutedForeground), e("--app-input-bg-color", r.input), e("--app-input-border-color", r.inputBorder), e("--app-input-focus-ring-color", r.ring), e("--app-table-header-bg", r.muted), e("--app-table-header-text", r.text), e("--app-table-row-hover-bg", r.muted), e("--app-table-grid-line-color", r.border), a.fonts && (g(a.fonts.sans), a.fonts.serif && g(a.fonts.serif), e("--app-font-serif", a.fonts.serif), e("--app-font-sans", a.fonts.sans), e("--app-font-mono", a.fonts.mono)), document.body.style.backgroundColor = `rgb(${r.background})`, document.body.style.color = `rgb(${r.text})`, e("--app-border-radius-md", a.borderRadius), e("--app-border-radius-sm", `calc(${a.borderRadius} - 0.25rem)`), e("--app-border-radius-lg", `calc(${a.borderRadius} + 0.25rem)`);
     } else {
-      o.classList.add(T), j.forEach(v);
-      const a = O[T] || O.light, n = F || a.sans, r = $ || a.serif, p = M || a.mono;
-      F || l(n), $ || l(r), e("--app-font-sans", n), e("--app-font-serif", r), e("--app-font-mono", p), document.body.style.backgroundColor = "", document.body.style.color = "", e("--app-border-radius-md", m), e("--app-border-radius-sm", `calc(${m} - 0.25rem)`), e("--app-border-radius-lg", `calc(${m} + 0.25rem)`);
+      o.classList.add(v), j.forEach(u);
+      const s = K[v] || K.light, n = F || s.sans, r = w || s.serif, H = R || s.mono;
+      F || g(n), w || g(r), e("--app-font-sans", n), e("--app-font-serif", r), e("--app-font-mono", H), document.body.style.backgroundColor = "", document.body.style.color = "", e("--app-border-radius-md", p), e("--app-border-radius-sm", `calc(${p} - 0.25rem)`), e("--app-border-radius-lg", `calc(${p} + 0.25rem)`);
     }
-    e("--app-font-size-base", S);
-  }, [u, A, s, m, S, F, $, M]);
-  const K = U(
+    if (e("--app-font-size-base", A), !o.hasAttribute("data-theme-ready")) return;
+    o.setAttribute("data-theme-morphing", "");
+    const Q = window.setTimeout(
+      () => o.removeAttribute("data-theme-morphing"),
+      oe
+    );
+    return () => window.clearTimeout(Q);
+  }, [f, x, a, p, A, F, w, R]);
+  const U = X(
     () => ({
-      theme: u,
-      availableThemes: x,
-      setTheme: B,
-      resetTheme: L,
-      borderRadius: m,
+      theme: f,
+      availableThemes: L,
+      setTheme: N,
+      resetTheme: B,
+      borderRadius: p,
       setBorderRadius: D,
-      fontSize: S,
-      setFontSize: N,
-      customTheme: s,
+      fontSize: A,
+      setFontSize: P,
+      customTheme: a,
       setCustomTheme: Y
     }),
-    [u, B, L, m, D, S, N, s, Y]
+    [f, N, B, p, D, A, P, a, Y]
   );
-  return /* @__PURE__ */ Q(J.Provider, { value: K, children: y });
-}, ee = () => {
-  const y = W(J);
-  if (y === void 0)
+  return /* @__PURE__ */ W(J.Provider, { value: U, children: S });
+}, ne = () => {
+  const S = ee(J);
+  if (S === void 0)
     throw new Error("useTheme must be used within a ThemeProvider");
-  return y;
+  return S;
 };
 export {
-  H as TAY_DREAMBOAT_THEME,
-  C as ThemeProvider,
-  x as availableThemes,
-  ee as useTheme
+  V as TAY_DREAMBOAT_THEME,
+  se as ThemeProvider,
+  L as availableThemes,
+  ne as useTheme
 };

package/dist/data/mockData.d.ts

@@ -5,9 +5,6 @@
  * @tags data, mock, example
  * @category data
  * @id mock-chart-data
- * @id mock-table-data
- * @id mock-table-data
- * @id mock-table-data
  */
 export declare const mockChartData: {
     name: string;