vlite3 1.4.7 → 1.4.9

package/components/ThemeProvider/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ThemeProvider } from './ThemeProvider.vue';
+export type { ThemeProviderProps, ThemeStyles, ThemeMaxWidth } from './types';
+export { buildThemeVariables, buildCardOverrideStyles } from './themeVars';

package/components/ThemeProvider/themeVars.d.ts

@@ -0,0 +1,16 @@
+import { ThemeProviderProps, ThemeStyles } from './types';
+export declare const DEFAULT_BASE_FONT_SIZE = 16;
+export declare const DEFAULT_HEADING_SCALE = 1.25;
+export declare const DEFAULT_BORDER_RADIUS = 8;
+export declare const DEFAULT_MAX_WIDTH = 1440;
+/**
+ * Nested card overrides. Lives outside `buildThemeVariables` because the SFC
+ * has to inject it as a real `<style>` block (it targets descendant
+ * `.bg-card .bg-card` selectors which cannot be expressed as inline variables).
+ */
+export declare function buildCardOverrideStyles(bg: string, isDark: boolean): string;
+/**
+ * Compute the full theme-styles record from a {@link ThemeProviderProps}.
+ * Pure: no DOM, no Vue. Re-usable from tests and from server-side code.
+ */
+export declare function buildThemeVariables(props: ThemeProviderProps): ThemeStyles;

package/components/ThemeProvider/themeVars.js

@@ -0,0 +1,372 @@
+import { hexToHSL as s, mixColorHex as a } from "../../utils/colorUtils.js";
+const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
+  const l = Number(r);
+  return Number.isFinite(l) && l > 0 ? l : o;
+}, F = (r, o) => {
+  const l = Number(r);
+  return Number.isFinite(l) && l >= 0 ? l : o;
+}, i = (r) => Number.parseFloat(r.toFixed(8)).toString(), w = [
+  "0.5",
+  "1",
+  "1.5",
+  "2",
+  "2.5",
+  "3",
+  "3.5",
+  "4",
+  "4.5",
+  "5",
+  "5.5",
+  "6",
+  "6.5",
+  "7",
+  "7.5",
+  "8",
+  "8.5",
+  "9",
+  "9.5",
+  "10",
+  "10.5",
+  "11",
+  "11.5",
+  "12",
+  "12.5",
+  "13",
+  "13.5",
+  "14",
+  "14.5",
+  "15",
+  "15.5",
+  "16",
+  "16.5",
+  "17",
+  "17.5",
+  "18",
+  "18.5",
+  "19",
+  "19.5",
+  "20"
+], E = {
+  1: 0.95,
+  "1.5": 0.91,
+  2: 0.85,
+  "2.5": 0.8,
+  3: 0.75,
+  "3.5": 0.7,
+  4: 0.65,
+  5: 0.6,
+  6: 0.55,
+  7: 0.5,
+  8: 0.45
+}, B = {
+  "0.5": 1,
+  1: 1.03030303,
+  "1.5": 1.06060606,
+  2: 1.1030303,
+  "2.5": 1.13333333,
+  3: 1.16363636,
+  "3.5": 1.19393939,
+  4: 1.2242424242424241,
+  "4.5": 1.31515152,
+  5: 1.39393939,
+  "5.5": 1.48484848,
+  6: 1.57575758,
+  "6.5": 1.63636364,
+  7: 1.6969697,
+  "7.5": 1.75757576,
+  8: 1.81818182,
+  "8.5": 1.87878788,
+  9: 1.93939394,
+  "9.5": 2,
+  10: 2.06060606,
+  "10.5": 2.1,
+  11: 2.15,
+  "11.5": 2.2,
+  12: 2.25,
+  "12.5": 2.3,
+  13: 2.35,
+  "13.5": 2.4,
+  14: 2.45,
+  "14.5": 2.5,
+  15: 2.55,
+  "15.5": 2.6,
+  16: 2.65,
+  "16.5": 2.7,
+  17: 2.75,
+  "17.5": 2.8,
+  18: 2.85,
+  "18.5": 2.9,
+  19: 2.95,
+  "19.5": 3,
+  20: 3.05
+}, T = [
+  ["xs", 0.75, 1],
+  ["sm", 0.875, 1.25],
+  ["base", 1, 1.5],
+  ["lg", 1.125, 1.75],
+  ["xl", 1.25, 1.75],
+  ["2xl", 1.5, 2],
+  ["3xl", 1.875, 2.25],
+  ["4xl", 2.25, 2.5],
+  ["5xl", 3, 3],
+  ["6xl", 3.75, 3.75]
+], C = {
+  "--font-weight-extralight": "200",
+  "--font-weight-light": "300",
+  "--font-weight-normal": "400",
+  "--font-weight-medium": "500",
+  "--font-weight-semibold": "600",
+  "--font-weight-bold": "700",
+  "--font-weight-extrabold": "800",
+  "--font-weight-black": "900"
+}, L = (r, o, l) => {
+  const t = o / x;
+  r["font-size"] = `${o}px`, r["--font-size-base"] = `${o}px`, T.forEach(([c, e, f]) => {
+    const u = e * t;
+    r[`--text-${c}`] = `${i(u)}rem`, r[`--text-${c}--line-height`] = f === e ? "1" : `calc(${i(f * t)} / ${i(u)})`;
+  }), Object.entries(E).forEach(([c, e]) => {
+    r[`--text--fs-${c}`] = `${i(e)}em`;
+  });
+  const n = l / k;
+  w.forEach((c) => {
+    const f = 1 + (B[c] - 1) * n;
+    r[`--text-fs-${c}`] = `${i(f)}em`;
+  });
+}, _ = (r, o) => {
+  const l = o / x;
+  r["--radius"] = `${i(l)}rem`, r["--radius-sm"] = `${i(l * 0.8)}rem`, r["--radius-md"] = `${i(l)}rem`, r["--radius-lg"] = `${i(l * 1.34)}rem`, r["--radius-xl"] = `${i(l * 1.6)}rem`, r["--radius-2xl"] = `${i(l * 2)}rem`, r["--radius-3xl"] = `${i(l * 3)}rem`;
+}, S = (r, o) => {
+  if (typeof o == "string") {
+    const t = o.trim().toLowerCase();
+    r["--shop-max-width"] = t === "full" || t === "none" ? "none" : o;
+    return;
+  }
+  if (o === 0) {
+    r["--shop-max-width"] = "none";
+    return;
+  }
+  const l = g(o ?? void 0, $);
+  r["--shop-max-width"] = `${l}px`;
+}, A = {
+  danger: {
+    light: "#ffeeee",
+    default: "#ff3b30",
+    dark: "#ee392e",
+    fg: "#ffffff",
+    fgLight: "#d70015",
+    subtle: "#fdecea",
+    subtleFg: "#b42318",
+    subtleBorder: "#f5c2c0"
+  },
+  warning: {
+    light: "#fbf4e6",
+    default: "#ff9500",
+    dark: "#ee8b06",
+    fg: "#ffffff",
+    fgLight: "#c95100",
+    subtle: "#fef7e6",
+    subtleFg: "#8a4b08",
+    subtleBorder: "#f6d8a8"
+  },
+  info: {
+    light: "#e3eeff",
+    default: "#007aff",
+    dark: "#0e72ee",
+    fg: "#ffffff",
+    fgLight: "#0051a8",
+    subtle: "#e8f0fe",
+    subtleFg: "#1a56db",
+    subtleBorder: "#c3dafe"
+  },
+  success: {
+    light: "#e1ede6",
+    default: "#007E51",
+    dark: "#06764c",
+    fg: "#ffffff",
+    fgLight: "#248a3d",
+    subtle: "#ECF8EB",
+    subtleFg: "#216e39",
+    subtleBorder: "#b7e1c1"
+  },
+  secondary: {
+    subtle: "#f1f1ef",
+    subtleFg: "#37352f",
+    subtleBorder: "#e3e2df"
+  },
+  purple: { subtle: "#f3ecff", subtleFg: "#6941c6", subtleBorder: "#e4d7ff" },
+  teal: { subtle: "#e6f6f5", subtleFg: "#0f766e", subtleBorder: "#bfe8e5" },
+  indigo: { subtle: "#e7e6fd", subtleFg: "#4338ca", subtleBorder: "#d6dcff" },
+  orange: { subtle: "#fff1e6", subtleFg: "#c2410c", subtleBorder: "#ffd6bf" },
+  pink: { subtle: "#fdebf3", subtleFg: "#be185d", subtleBorder: "#f8c6db" },
+  cyan: { subtle: "#E1F8F8", subtleFg: "#0e7490", subtleBorder: "#c2ecf5" },
+  chart: ["#6366f1", "#22c55e", "#f59e0b", "#ef4444", "#3b82f6", "#ec4899"]
+}, N = {
+  danger: {
+    light: "#391413",
+    default: "#7F1D1D",
+    dark: "#882d28",
+    fg: "#ffffff",
+    fgLight: "#FCFCFC",
+    subtle: "#2a1111",
+    subtleFg: "#FF4B4B",
+    subtleBorder: "#991b1b"
+  },
+  warning: {
+    light: "#34220a",
+    default: "#95600E",
+    dark: "#9e6a23",
+    fg: "#ffffff",
+    fgLight: "#ff9f0a",
+    subtle: "#2a1c07",
+    subtleFg: "#fbbf24",
+    subtleBorder: "#92400e"
+  },
+  info: {
+    light: "#112039",
+    default: "#1a4298",
+    dark: "#3360d2",
+    fg: "#ffffff",
+    fgLight: "#93c5fd",
+    subtle: "#0f1e33",
+    subtleFg: "#d2e6ff",
+    subtleBorder: "#1e40af"
+  },
+  success: {
+    light: "#112815",
+    default: "#0e4d2e",
+    dark: "#235a3b",
+    fg: "#ffffff",
+    fgLight: "#6ee7b7",
+    subtle: "#0f2419",
+    subtleFg: "#e2f5e9",
+    subtleBorder: "#1f7a4c"
+  },
+  secondary: {
+    subtle: "#1f1f1f",
+    subtleFg: "#e4e4e7",
+    subtleBorder: "#3f3f46"
+  },
+  purple: { subtle: "#1d1333", subtleFg: "#c084fc", subtleBorder: "#6b21a8" },
+  teal: { subtle: "#0f2a28", subtleFg: "#2dd4bf", subtleBorder: "#0f766e" },
+  indigo: { subtle: "#1c0a49", subtleFg: "#dcd1ff", subtleBorder: "#3730a3" },
+  orange: { subtle: "#2a1709", subtleFg: "#fb923c", subtleBorder: "#9a3412" },
+  pink: { subtle: "#2a0f1c", subtleFg: "#f472b6", subtleBorder: "#9d174d" },
+  cyan: { subtle: "#0e242a", subtleFg: "#22d3ee", subtleBorder: "#0e7490" },
+  chart: ["#818cf8", "#34d399", "#fbbf24", "#fb7185", "#60a5fa", "#f472b6"]
+}, D = (r, o) => {
+  const l = o ? N : A;
+  ["danger", "warning", "info", "success"].forEach((c) => {
+    const e = l[c];
+    r[`--color-${c}-light`] = e.light, r[`--color-${c}`] = e.default, r[`--color-${c}-dark`] = e.dark, r[`--color-${c}-fg`] = e.fg, r[`--color-${c}-fg-light`] = e.fgLight, r[`--color-${c}-subtle`] = e.subtle, r[`--color-${c}-subtle-fg`] = e.subtleFg, r[`--color-${c}-subtle-border`] = e.subtleBorder, c === "danger" && (r["--color-destructive"] = e.default, r["--color-destructive-foreground"] = e.fg);
+  }), [
+    "secondary",
+    "purple",
+    "teal",
+    "indigo",
+    "orange",
+    "pink",
+    "cyan"
+  ].forEach((c) => {
+    const e = l[c];
+    r[`--color-${c}-subtle`] = e.subtle, r[`--color-${c}-subtle-fg`] = e.subtleFg, r[`--color-${c}-subtle-border`] = e.subtleBorder;
+  }), l.chart.forEach((c, e) => {
+    r[`--color-chart-${e + 1}`] = c;
+  });
+};
+function O(r, o) {
+  if (!r) return "";
+  if (o) {
+    const c = a(r, "#ffffff", 0.07), e = a(r, "#ffffff", 0.12), f = a(r, "#ffffff", 0.1), u = a(r, "#ffffff", 0.14), d = a(r, "#ffffff", 0.13), v = a(r, "#ffffff", 0.16), b = a(r, "#ffffff", 0.07), h = a(r, "#ffffff", 0.11), m = a(r, "#ffffff", 0.1), p = a(r, "#ffffff", 0.14);
+    return `
+.vlite-theme-provider.dark .bg-card {
+  --color-body: ${c} !important;
+  --color-white: ${c} !important;
+  --color-mixture-1: ${e} !important;
+  --color-mixture-2: #ffffff !important;
+  background-color: ${c} !important;
+}
+.vlite-theme-provider.dark .bg-card .bg-card {
+  --color-body: ${f} !important;
+  --color-white: ${f} !important;
+  --color-mixture-1: ${u} !important;
+  --color-mixture-2: #000000;
+  background-color: ${f} !important;
+}
+.vlite-theme-provider.dark .bg-card .bg-card .bg-card {
+  --color-body: ${d} !important;
+  --color-white: ${d} !important;
+  --color-mixture-1: ${v} !important;
+  --color-mixture-2: #000000;
+  background-color: ${d} !important;
+}
+.vlite-theme-provider.dark .bg-card-light {
+  --color-body: ${b} !important;
+  --color-white: ${b} !important;
+  --color-mixture-1: ${h} !important;
+  --color-mixture-2: #ffffff !important;
+  background-color: ${b} !important;
+}
+.vlite-theme-provider.dark .bg-card .bg-card-light {
+  --color-body: ${m} !important;
+  --color-white: ${m} !important;
+  --color-mixture-1: ${p} !important;
+  --color-mixture-2: #000000;
+  background-color: ${m} !important;
+}
+`;
+  }
+  const l = a(r, "#000000", 0.03), t = a(r, "#000000", 0.055), n = a(r, "#000000", 0.09);
+  return `
+.vlite-theme-provider .bg-card,
+.vlite-theme-provider .bg-card-light {
+  --color-body: ${l} !important;
+  --color-white: ${l} !important;
+  --color-mixture-1: ${l} !important;
+  --color-mixture-2: #000000 !important;
+  background-color: ${l} !important;
+  border-color: color-mix(in oklab, var(--color-mixture-1) 94%, var(--color-mixture-2));
+}
+.vlite-theme-provider .bg-card .bg-card,
+.vlite-theme-provider .bg-card-light .bg-card-light {
+  --color-body: ${t} !important;
+  --color-white: ${t} !important;
+  --color-mixture-1: ${t};
+  --color-mixture-2: #000000;
+  background-color: ${t} !important;
+}
+.vlite-theme-provider .bg-card .bg-card .bg-card,
+.vlite-theme-provider .bg-card-light .bg-card-light .bg-card-light {
+  --color-body: ${n} !important;
+  --color-white: ${n} !important;
+  --color-mixture-1: ${n};
+  --color-mixture-2: #000000;
+  background-color: ${n} !important;
+}
+`;
+}
+function R(r) {
+  const o = {};
+  if (o["--color-white"] = r.bgColor ?? "#ffffff", o["--color-black"] = "#000000", r.bgColor) {
+    o["--color-background"] = r.bgColor, o["--color-body"] = r.bgColor;
+    const l = s(r.bgColor).l < 50;
+    l ? (o["--color-mixture-1"] = "#0c0c0c", o["--color-mixture-2"] = "#ffffff", o["--color-white"] = r.bgColor, o["--color-black"] = "#ffffff", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 96.5%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 94.5%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 90.5%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 86.5%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 82.5%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 79.5%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 70%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 74%, #ffffff)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 70%, #ffffff)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 94%, #ffffff)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 96%, #ffffff)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 87.5%, #ffffff)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 92.5%, #ffffff)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 95%, #ffffff)", o["--color-muted-foreground"] = "var(--color-gray-600)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 90%, #ffffff)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #ffffff)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #ffffff)", o["--shadow-sm"] = "none", o["--shadow-DEFAULT"] = "none", o["--shadow-md"] = "none", o["--shadow-lg"] = "none", o["--shadow-xl"] = "none") : (o["--color-mixture-1"] = "#ffffff", o["--color-mixture-2"] = "#000000", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 98%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 97%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 96%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 94%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 92%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 86%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 80%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 88%, #000000)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 87%, #000000)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 96%, #000000)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 98%, #000000)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 94.8%, #000000)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 94%, #000000)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 97%, #000000)", o["--color-muted-foreground"] = "color-mix(in oklab, var(--color-background) 10%, #000000)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 95%, #000000)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #000000)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #000000)", o["--shadow-sm"] = "rgba(95, 97, 100, 0.07) 0px 15px 90px 0px, rgba(0, 0, 0, 0.02) 0.2px 0.2px 1px 0px", o["--shadow-DEFAULT"] = "rgba(55, 59, 74, 0.074) 0px 10px 55px 3px", o["--shadow-md"] = "var(--shadow-DEFAULT)", o["--shadow-lg"] = "rgba(100, 100, 111, 0.15) 0px 7px 40px -1px", o["--shadow-xl"] = "rgba(0, 0, 0, 0.2) 0px 15px 50px -12px"), D(o, l);
+  }
+  if (r.primaryColor) {
+    o["--color-primary"] = r.primaryColor;
+    const { l } = s(r.primaryColor), t = l > 50 ? "#171717" : "#fafafa";
+    o["--color-primary-foreground"] = t, o["--color-primary-fg"] = t, o["--color-primary-dark"] = `color-mix(in oklab, ${r.primaryColor} 80%, #000000)`, o["--color-primary-light"] = `color-mix(in oklab, ${t} 92%, ${r.primaryColor})`, o["--color-primary-fg-light"] = o["--color-primary-dark"];
+  }
+  return r.footerBgColor && (o["--color-footer"] = r.footerBgColor), o["--spacing"] = "0.25rem", Object.assign(o, C), L(
+    o,
+    g(r.baseFontSize, x),
+    g(r.headingScale, k)
+  ), _(o, F(r.borderRadius, y)), S(o, r.maxWidth), o["--tooltip-bg"] = "var(--color-background)", o["--tooltip-text"] = "var(--color-foreground)", o["--tooltip-border"] = "color-mix(in oklab, var(--color-mixture-1) 90%, var(--color-mixture-2))", o["--tooltip-radius"] = "var(--radius)", o["--tooltip-shadow"] = "var(--shadow-DEFAULT)", o["--tooltip-arrow-size"] = "0.5em", o["--tooltip-z-index"] = "50", o["--date-picker-border"] = "var(--color-border)", o["--date-picker-radius"] = "var(--radius)", o["--timer-picker-bg"] = "var(--color-background)", o["--iconPicker-border"] = "var(--color-border)", o;
+}
+export {
+  x as DEFAULT_BASE_FONT_SIZE,
+  y as DEFAULT_BORDER_RADIUS,
+  k as DEFAULT_HEADING_SCALE,
+  $ as DEFAULT_MAX_WIDTH,
+  O as buildCardOverrideStyles,
+  R as buildThemeVariables
+};

package/components/ThemeProvider/types.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Public type surface for {@link ThemeProvider}.
+ *
+ * The provider is intentionally **data-driven**: it accepts plain theme tokens
+ * (colors, sizing, scale) and produces the matching set of CSS variables
+ * (`--color-*`, `--text-*`, `--radius-*`, `--shop-max-width`, …). Downstream
+ * app code can then map any domain object (shop theme, blog theme, dashboard
+ * theme) onto this single shape.
+ *
+ * Generic over `unknown` because the provider never reads the data itself —
+ * it just forwards the props to its computed style block.
+ */
+export type ThemeMaxWidth = number | string | null | undefined;
+export interface ThemeProviderProps {
+    /**
+     * Page background color. Used to derive the full set of `--color-*` tokens
+     * (foreground, border, card, muted, accent, scrollbar, …).
+     */
+    bgColor?: string;
+    /** Brand / primary color. Generates `--color-primary*` variants. */
+    primaryColor?: string;
+    /** Optional footer background. Surfaced as `--color-footer` if provided. */
+    footerBgColor?: string;
+    /** Base font size in `px`. Default `16`. Drives `--text-*` scale. */
+    baseFontSize?: number;
+    /** Heading ratio relative to the default `1.25` step. Default `1.25`. */
+    headingScale?: number;
+    /** Border radius in `px`. Default `8`. Drives `--radius*` family. */
+    borderRadius?: number;
+    /**
+     * Maximum content width:
+     *   - `number`  → emitted as `${n}px`
+     *   - `'full' | 'none' | 0` → emitted as `none`
+     *   - any other string is passed through verbatim
+     */
+    maxWidth?: ThemeMaxWidth;
+    /** Optional root class. Defaults to `'vlite-theme-provider'`. */
+    rootClass?: string;
+}
+/**
+ * The flat key/value record of CSS variables produced by
+ * {@link buildThemeVariables}. Consumers that need to read the resolved
+ * theme (e.g. a side panel that wants to read `--color-background`) can
+ * inject this from a parent `ThemeProvider`.
+ */
+export type ThemeStyles = Record<string, string>;

package/components/Timeline/Timeline.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as p, computed as g, openBlock as r, createElementBlock as d, normalizeClass as k, createElementVNode as b, normalizeStyle as S, createCommentVNode as P, Fragment as C, renderList as B, isMemoSame as T, createBlock as z, withCtx as o, renderSlot as n, mergeProps as s } from "vue";
+import { defineComponent as p, computed as g, openBlock as r, createElementBlock as d, normalizeClass as k, createElementVNode as b, normalizeStyle as S, createCommentVNode as x, Fragment as C, renderList as B, isMemoSame as T, createBlock as z, withCtx as o, renderSlot as s, mergeProps as n } from "vue";
 import V from "./TimelineItem.vue.js";
-const E = {
+const j = {
   key: 0,
   class: "absolute top-4 left-4 right-4 h-0.5 bg-border",
   "aria-hidden": "true"
-}, M = {
+}, E = {
   key: 1,
   class: "absolute top-4 left-4 right-4 h-0.5 bg-border block sm:hidden",
   "aria-hidden": "true"
@@ -22,8 +22,8 @@ const E = {
   },
   emits: ["step-click"],
   setup(e, { emit: w }) {
-    const l = e, x = w, a = g(() => l.direction === "vertical"), y = g(() => l.steps.length <= 1 ? 0 : Math.min(l.activeStep, l.steps.length - 1) / (l.steps.length - 1) * 100), $ = (i, f) => {
-      x("step-click", i, f);
+    const l = e, P = w, a = g(() => l.direction === "vertical"), y = g(() => l.steps.length <= 1 ? 0 : Math.min(l.activeStep, l.steps.length - 1) / (l.steps.length - 1) * 100), $ = (i, f) => {
+      P("step-click", i, f);
     };
     return (i, f) => (r(), d("nav", {
       "aria-label": "Progress",
@@ -35,22 +35,22 @@ const E = {
           "relative flex",
           a.value ? "flex-col space-y-0" : "",
           !a.value && e.textPosition === "bottom" ? "flex-row w-full justify-between items-center" : "",
-          !a.value && e.textPosition === "right" ? "flex-row w-full" : ""
+          !a.value && e.textPosition === "right" ? "flex-row w-full max-sm:justify-between max-sm:items-center" : ""
         ])
       }, [
-        !a.value && e.textPosition === "bottom" ? (r(), d("div", E, [
+        !a.value && e.textPosition === "bottom" ? (r(), d("div", j, [
           b("div", {
             class: "h-full bg-primary transition-all duration-300 ease-in-out",
             style: S({ width: `${y.value}%` })
           }, null, 4)
-        ])) : P("", !0),
-        !a.value && e.textPosition === "right" ? (r(), d("div", M, [
+        ])) : x("", !0),
+        !a.value && e.textPosition === "right" ? (r(), d("div", E, [
           b("div", {
             class: "h-full bg-primary transition-all duration-300 ease-in-out",
             style: S({ width: `${y.value}%` })
           }, null, 4)
-        ])) : P("", !0),
-        (r(!0), d(C, null, B(e.steps, (c, m, N, u) => {
+        ])) : x("", !0),
+        (r(!0), d(C, null, B(e.steps, (c, m, M, u) => {
           const v = [
             c,
             m,
@@ -77,22 +77,22 @@ const E = {
             onStepClick: $
           }, {
             indicator: o((t) => [
-              n(i.$slots, "indicator", s({ ref_for: !0 }, t))
+              s(i.$slots, "indicator", n({ ref_for: !0 }, t))
             ]),
             title: o((t) => [
-              n(i.$slots, "title", s({ ref_for: !0 }, t))
+              s(i.$slots, "title", n({ ref_for: !0 }, t))
             ]),
             subtitle: o((t) => [
-              n(i.$slots, "subtitle", s({ ref_for: !0 }, t))
+              s(i.$slots, "subtitle", n({ ref_for: !0 }, t))
             ]),
             status: o((t) => [
-              n(i.$slots, "status", s({ ref_for: !0 }, t))
+              s(i.$slots, "status", n({ ref_for: !0 }, t))
             ]),
             content: o((t) => [
-              n(i.$slots, "content", s({ ref_for: !0 }, t))
+              s(i.$slots, "content", n({ ref_for: !0 }, t))
             ]),
             body: o((t) => [
-              n(i.$slots, "body", s({ ref_for: !0 }, t))
+              s(i.$slots, "body", n({ ref_for: !0 }, t))
             ]),
             _: 3
           }, 8, ["step", "index", "is-last", "active-step", "direction", "text-position", "line-style", "indicator-type", "clickable"]));

package/components/Timeline/TimelineItem.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as P, computed as b, openBlock as s, createElementBlock as l, normalizeClass as o, createElementVNode as i, createVNode as y, createCommentVNode as c, renderSlot as a, toDisplayString as d, createBlock as g, resolveDynamicComponent as I, normalizeProps as $, mergeProps as L } from "vue";
+import { defineComponent as P, computed as b, openBlock as n, createElementBlock as l, normalizeClass as o, createElementVNode as i, createVNode as y, createCommentVNode as c, renderSlot as a, toDisplayString as d, createBlock as g, resolveDynamicComponent as I, normalizeProps as $, mergeProps as L } from "vue";
 import h from "./TimelineIndicator.vue.js";
 import B from "../StatusChip/StatusChip.vue.js";
 import { $t as r } from "../../utils/i18n.js";
@@ -33,10 +33,10 @@ const C = { class: "flex flex-col items-center shrink-0 mr-4 w-9" }, T = { class
   },
   emits: ["step-click"],
   setup(t, { emit: v }) {
-    const n = t, k = v, S = b(() => n.direction === "vertical"), m = b(() => n.step.progressStatus ? n.step.progressStatus : n.index < n.activeStep ? "completed" : n.index === n.activeStep ? "current" : "upcoming"), u = (e) => e.titleI18n ? r(e.titleI18n) : e.title, w = (e) => e.subtitleI18n ? r(e.subtitleI18n) : e.subtitle, x = (e) => e.descriptionI18n ? r(e.descriptionI18n) : e.description, f = () => {
-      n.clickable && k("step-click", n.step, n.index);
+    const s = t, k = v, S = b(() => s.direction === "vertical"), m = b(() => s.step.progressStatus ? s.step.progressStatus : s.index < s.activeStep ? "completed" : s.index === s.activeStep ? "current" : "upcoming"), u = (e) => e.titleI18n ? r(e.titleI18n) : e.title, w = (e) => e.subtitleI18n ? r(e.subtitleI18n) : e.subtitle, x = (e) => e.descriptionI18n ? r(e.descriptionI18n) : e.description, f = () => {
+      s.clickable && k("step-click", s.step, s.index);
     };
-    return (e, F) => S.value ? (s(), l("li", {
+    return (e, F) => S.value ? (n(), l("li", {
       key: 0,
       class: o(["relative flex w-full", t.clickable ? "cursor-pointer" : ""]),
       onClick: f
@@ -48,7 +48,7 @@ const C = { class: "flex flex-col items-center shrink-0 mr-4 w-9" }, T = { class
           index: t.index,
           icon: t.step.icon
         }, null, 8, ["status", "type", "index", "icon"]),
-        t.isLast ? c("", !0) : (s(), l("div", {
+        t.isLast ? c("", !0) : (n(), l("div", {
           key: 0,
           class: o(["my-2 flex-1 transition-colors duration-300", [
             t.lineStyle === "dashed" ? "w-0 border-l-[1.5px] border-dashed" : "w-0.5",
@@ -76,15 +76,15 @@ const C = { class: "flex flex-col items-center shrink-0 mr-4 w-9" }, T = { class
                   step: t.step,
                   index: t.index
                 }, () => [
-                  t.step.subtitle || t.step.subtitleI18n ? (s(), l("p", N, d(w(t.step)), 1)) : c("", !0)
+                  t.step.subtitle || t.step.subtitleI18n ? (n(), l("p", N, d(w(t.step)), 1)) : c("", !0)
                 ])
               ]),
-              t.step.status || e.$slots.status ? (s(), l("div", j, [
+              t.step.status || e.$slots.status ? (n(), l("div", j, [
                 a(e.$slots, "status", {
                   step: t.step,
                   index: t.index
                 }, () => [
-                  t.step.status ? (s(), g(B, {
+                  t.step.status ? (n(), g(B, {
                     key: 0,
                     status: t.step.status
                   }, null, 8, ["status"])) : c("", !0)
@@ -96,19 +96,19 @@ const C = { class: "flex flex-col items-center shrink-0 mr-4 w-9" }, T = { class
                 step: t.step,
                 index: t.index
               }, () => [
-                t.step.component ? (s(), g(I(t.step.component), $(L({ key: 0 }, t.step.componentProps)), null, 16)) : t.step.description || t.step.descriptionI18n ? (s(), l("p", E, d(x(t.step)), 1)) : c("", !0)
+                t.step.component ? (n(), g(I(t.step.component), $(L({ key: 0 }, t.step.componentProps)), null, 16)) : t.step.description || t.step.descriptionI18n ? (n(), l("p", E, d(x(t.step)), 1)) : c("", !0)
               ])
             ])
           ])
         ])
       ], 2)
-    ], 2)) : (s(), l("li", {
+    ], 2)) : (n(), l("li", {
       key: 1,
       onClick: f,
       class: o([
         "relative",
         t.clickable ? "cursor-pointer" : "",
-        t.textPosition === "bottom" ? "flex-none w-8" : "flex-1 last:flex-none"
+        t.textPosition === "bottom" ? "flex-none w-8" : "flex-none w-8 sm:flex-1 sm:w-auto sm:last:flex-none"
       ])
     }, [
       i("div", {
@@ -139,10 +139,10 @@ const C = { class: "flex flex-col items-center shrink-0 mr-4 w-9" }, T = { class
             i("span", {
               class: o(["text-sm font-medium leading-tight", m.value === "upcoming" ? "text-muted-foreground" : "text-primary"])
             }, d(u(t.step)), 3),
-            t.step.description || t.step.descriptionI18n ? (s(), l("span", q, d(x(t.step)), 1)) : c("", !0)
+            t.step.description || t.step.descriptionI18n ? (n(), l("span", q, d(x(t.step)), 1)) : c("", !0)
           ])
         ], 2),
-        t.textPosition === "right" && !t.isLast ? (s(), l("div", A, [
+        t.textPosition === "right" && !t.isLast ? (n(), l("div", A, [
           i("div", {
             class: o(["h-full bg-primary transition-all duration-300", t.index < t.activeStep ? "w-full" : "w-0"])
           }, null, 2)

package/composables/useThemeStyles.d.ts

@@ -0,0 +1,8 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { ThemeStyles } from '../components/ThemeProvider/types';
+export declare const THEME_STYLES_KEY: InjectionKey<ComputedRef<ThemeStyles>>;
+/**
+ * Inject the reactive theme-styles computed ref produced by the nearest
+ * `<ThemeProvider>` ancestor. Returns `undefined` if no provider is present.
+ */
+export declare function useThemeStyles(): ComputedRef<ThemeStyles> | undefined;

package/composables/useThemeStyles.js

@@ -0,0 +1,9 @@
+import { inject as e } from "vue";
+const t = /* @__PURE__ */ Symbol("vlite-theme-styles");
+function i() {
+  return e(t, void 0);
+}
+export {
+  t as THEME_STYLES_KEY,
+  i as useThemeStyles
+};

package/index.d.ts

@@ -62,6 +62,9 @@ export * from './components/Rating';
 export * from './components/AsyncSelect';
 export * from './components/ImageComparison';
 export { default as ImageMagnifier } from './components/ImageMagnifier.vue';
+export * from './components/ThemeProvider';
+export * from './components/ScaleGenerator';
+export { THEME_STYLES_KEY, useThemeStyles } from './composables/useThemeStyles';
 export { default as Icon } from './components/Icon.vue';
 export { default as Logo } from './components/Logo.vue';
 export { default as Alert } from './components/Alert.vue';