@thesage/ui 0.0.11 → 0.0.13

package/dist/index.mjs

@@ -25,6 +25,8 @@ var buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground shadow",
+        primary: "bg-primary text-primary-foreground shadow",
+        // Alias for default
         destructive: "bg-destructive text-destructive-foreground shadow-sm",
         outline: "border border-input bg-transparent shadow-sm hover:bg-primary hover:text-primary-foreground hover:border-primary",
         secondary: "bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-sm hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground",
@@ -9556,13 +9558,30 @@ var AnimatedBeam = ({
 import { Mesh as Mesh3, Program as Program3, Renderer as Renderer3, Triangle as Triangle3, Vec3 } from "ogl";
 import { useEffect as useEffect12, useRef as useRef5 } from "react";
 import { jsx as jsx85 } from "react/jsx-runtime";
+function hexToRgb4(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return [0, 0, 0];
+  return [
+    parseInt(result[1], 16) / 255,
+    parseInt(result[2], 16) / 255,
+    parseInt(result[3], 16) / 255
+  ];
+}
+function getCSSVariable2(name, fallback) {
+  if (typeof window === "undefined") return fallback;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
 function OrbBackground({
   className,
   hue = 0,
   hoverIntensity = 0.2,
   rotateOnHover = true,
   forceHoverState = false,
-  backgroundColor = "#000000"
+  backgroundColor,
+  orbColor1,
+  orbColor2,
+  orbColor3
 }) {
   const ctnDom = useRef5(null);
   const vert = (
@@ -9590,6 +9609,10 @@ function OrbBackground({
     uniform float rot;
     uniform float hoverIntensity;
     uniform vec3 backgroundColor;
+    // THEME-AWARE: Orb colors from theme (to revert: change back to const)
+    uniform vec3 orbColor1;
+    uniform vec3 orbColor2;
+    uniform vec3 orbColor3;
     varying vec2 vUv;
 
     vec3 rgb2yiq(vec3 c) {
@@ -9658,10 +9681,12 @@ function OrbBackground({
       float a = max(max(colorIn.r, colorIn.g), colorIn.b);
       return vec4(colorIn.rgb / (a + 1e-5), a);
     }
-    
-    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
-    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
-    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+
+    // THEME-AWARE: Colors now come from uniforms (orbColor1, orbColor2, orbColor3)
+    // To revert to hardcoded: uncomment these and remove uniforms above
+    // const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+    // const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+    // const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
     const float innerRadius = 0.6;
     const float noiseScale = 0.65;
     
@@ -9674,9 +9699,10 @@ function OrbBackground({
     }
     
     vec4 draw(vec2 uv) {
-      vec3 color1 = adjustHue(baseColor1, hue);
-      vec3 color2 = adjustHue(baseColor2, hue);
-      vec3 color3 = adjustHue(baseColor3, hue);
+      // THEME-AWARE: Use uniform colors instead of hardcoded consts
+      vec3 color1 = adjustHue(orbColor1, hue);
+      vec3 color2 = adjustHue(orbColor2, hue);
+      vec3 color3 = adjustHue(orbColor3, hue);
       
       float ang = atan(uv.y, uv.x);
       float len = length(uv);
@@ -9745,6 +9771,14 @@ function OrbBackground({
   useEffect12(() => {
     const container = ctnDom.current;
     if (!container) return;
+    const bgColor = backgroundColor || getCSSVariable2("--color-background", "#000000");
+    const color1 = orbColor1 || "#9c43fe";
+    const color2 = orbColor2 || "#4cc2e9";
+    const color3 = orbColor3 || "#101499";
+    const bgRgb = hexToRgb4(bgColor);
+    const color1Rgb = hexToRgb4(color1);
+    const color2Rgb = hexToRgb4(color2);
+    const color3Rgb = hexToRgb4(color3);
     const renderer = new Renderer3({ alpha: true, premultipliedAlpha: false });
     const gl = renderer.gl;
     gl.clearColor(0, 0, 0, 0);
@@ -9762,7 +9796,11 @@ function OrbBackground({
         hover: { value: 0 },
         rot: { value: 0 },
         hoverIntensity: { value: hoverIntensity },
-        backgroundColor: { value: hexToVec3(backgroundColor) }
+        // THEME-AWARE: Pass theme colors to shader
+        backgroundColor: { value: new Vec3(...bgRgb) },
+        orbColor1: { value: new Vec3(...color1Rgb) },
+        orbColor2: { value: new Vec3(...color2Rgb) },
+        orbColor3: { value: new Vec3(...color3Rgb) }
       }
     });
     const mesh = new Mesh3(gl, { geometry, program });
@@ -9819,7 +9857,6 @@ function OrbBackground({
         currentRot += dt * rotationSpeed;
       }
       program.uniforms.rot.value = currentRot;
-      program.uniforms.backgroundColor.value = hexToVec3(backgroundColor);
       renderer.render({ scene: mesh });
     };
     rafId = requestAnimationFrame(update);
@@ -9836,47 +9873,6 @@ function OrbBackground({
   }, [hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor]);
   return /* @__PURE__ */ jsx85("div", { ref: ctnDom, className: cn("w-full h-full pointer-events-auto", className) });
 }
-function hslToRgb(h, s, l) {
-  let r, g, b;
-  if (s === 0) {
-    r = g = b = l;
-  } else {
-    const hue2rgb = (p2, q2, t) => {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
-      if (t < 1 / 2) return q2;
-      if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
-      return p2;
-    };
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1 / 3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1 / 3);
-  }
-  return new Vec3(r, g, b);
-}
-function hexToVec3(color) {
-  if (color.startsWith("#")) {
-    const r = parseInt(color.slice(1, 3), 16) / 255;
-    const g = parseInt(color.slice(3, 5), 16) / 255;
-    const b = parseInt(color.slice(5, 7), 16) / 255;
-    return new Vec3(r, g, b);
-  }
-  const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-  if (rgbMatch) {
-    return new Vec3(parseInt(rgbMatch[1]) / 255, parseInt(rgbMatch[2]) / 255, parseInt(rgbMatch[3]) / 255);
-  }
-  const hslMatch = color.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%/);
-  if (hslMatch) {
-    const h = parseInt(hslMatch[1]) / 360;
-    const s = parseInt(hslMatch[2]) / 100;
-    const l = parseInt(hslMatch[3]) / 100;
-    return hslToRgb(h, s, l);
-  }
-  return new Vec3(0, 0, 0);
-}
 
 // src/components/blocks/Hero.tsx
 import { ArrowRight as ArrowRight2 } from "lucide-react";
@@ -11355,6 +11351,49 @@ function mergeCustomColorTokens(baseTokens2, customPalette) {
     ...customPalette.derivedTokens
   };
 }
+function validateThemeTokens(theme, mode) {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
+  const root = document.documentElement;
+  const style = getComputedStyle(root);
+  const requiredTokens = [
+    "--color-background",
+    "--color-foreground",
+    "--color-primary",
+    "--color-primary-foreground",
+    "--color-border",
+    "--color-ring",
+    "--font-heading",
+    "--font-body",
+    "--font-mono"
+  ];
+  const missingTokens = [];
+  const invalidTokens = [];
+  requiredTokens.forEach((token) => {
+    const value = style.getPropertyValue(token).trim();
+    if (!value) {
+      missingTokens.push(token);
+    } else if (token.startsWith("--color-") && !value.match(/^(#|rgb|hsl|var\()/)) {
+      invalidTokens.push(`${token} = "${value}"`);
+    } else if (token.startsWith("--font-") && value === "") {
+      invalidTokens.push(`${token} = empty`);
+    }
+  });
+  if (missingTokens.length > 0) {
+    console.warn(
+      `[ThemeProvider] Missing CSS variables for theme "${theme}" (${mode} mode):`,
+      missingTokens
+    );
+  }
+  if (invalidTokens.length > 0) {
+    console.warn(
+      `[ThemeProvider] Invalid CSS variable values for theme "${theme}" (${mode} mode):`,
+      invalidTokens
+    );
+  }
+  if (missingTokens.length === 0 && invalidTokens.length === 0) {
+    console.log(`[ThemeProvider] \u2713 Theme validation passed for "${theme}" (${mode} mode)`);
+  }
+}
 function ThemeProvider({ children }) {
   const { theme, mode } = useThemeStore();
   const customPalette = useCustomizer((state) => state.customColors?.[theme]?.[mode]);
@@ -11388,6 +11427,7 @@ function ThemeProvider({ children }) {
     } else {
       root.classList.remove("dark");
     }
+    validateThemeTokens(theme, mode);
     const timeout = setTimeout(() => {
       root.classList.remove("theme-transitioning");
       setIsTransitioning(false);