@thesage/ui 0.0.11 → 0.0.13

package/README.md

@@ -1,45 +1,113 @@
-# Sage UI
+# Sage Design Engine (@thesage/ui)
 
-**The Solopreneur's Development Stack.**
+<div align="center">
 
-`@thesage/ui` is the core component library for the Sage ecosystem. It provides a comprehensive set of accessible, reusable, and composable UI components built on top of Radix UI and Tailwind CSS.
+[![npm version](https://img.shields.io/npm/v/@thesage/ui?color=indigo&style=flat-square)](https://www.npmjs.com/package/@thesage/ui)
+[![License](https://img.shields.io/npm/l/@thesage/ui?color=blue&style=flat-square)](https://github.com/shalomormsby/ecosystem/blob/main/LICENSE)
+[![Downloads](https://img.shields.io/npm/dt/@thesage/ui?color=teal&style=flat-square)](https://www.npmjs.com/package/@thesage/ui)
 
-## Features
+**The Design Engine for the Solopreneur.**
 
-- 🎨 **Systematic Design**: Built on a robust token system for consistent implementation.
-- ♿ **Accessible**: rigorous adherence to WAI-ARIA standards (via Radix UI).
-- 🌓 **Dark Mode**: First-class support for light and dark themes.
-- 🧩 **Composable**: components are designed to be composed together to build complex interfaces.
-- 🚀 **Performance**: Exported as tree-shakeable ESM modules.
+[Documentation](https://thesage.dev) • [Components](https://thesage.dev/components) • [GitHub](https://github.com/shalomormsby/ecosystem)
 
-## Installation
+</div>
+
+---
+
+**Sage Design Engine** is not just a component library—it's a systematic design engine built for speed, consistency, and beauty. Built on top of **Radix UI** for headless accessibility and **Tailwind CSS** for styling, it provides a comprehensive suite of 45+ polished components that work together seamlessly.
+
+## ✨ Features
+
+- **🎨 Systematic Design**: Powered by a robust design token system (colors, typography, spacing).
+- **♿ Fully Accessible**: Built on WAI-ARIA standards via Radix UI primitives.
+- **🌗 Mode Aware**: First-class support for light and dark modes with automatic color harmonization.
+- **🧩 Composable**: Components designed to fit together like LEGO blocks.
+- **🛠️ Type Safe**: Written in TypeScript with full type inference.
+
+## 🚀 Installation
+
+### 1. Install Dependencies
+Sage Design Engine is built on Tailwind CSS. You need to install the package and its peer dependencies.
 
 ```bash
-npm install @thesage/ui
-# or
-pnpm add @thesage/ui
-# or
-yarn add @thesage/ui
+pnpm add @thesage/ui @thesage/tokens @thesage/hooks lucide-react clsx tailwind-merge
+pnpm add -D tailwindcss@^3.4 postcss autoprefixer
+```
+
+### 2. Configure Tailwind
+Update your `tailwind.config.js` contents to use the preset and scan the component definitions.
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [require('@thesage/config/tailwind')],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@thesage/ui/dist/**/*.{js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+### 3. Import Styles
+Import the global CSS file (which contains the theme variables) in your root entry file (e.g., `main.tsx` or `App.tsx`).
+
+```tsx
+import '@thesage/ui/globals.css';
+```
+
+## 💻 Usage
+
+Sage Design Engine components are designed to be dropped into any React application.
+
+```tsx
+import { Button, Card, Text, Heading } from '@thesage/ui';
+
+export default function WelcomeCard() {
+  return (
+    <Card className="max-w-md p-6">
+      <Heading level={3} className="mb-2">Welcome to Sage</Heading>
+      <Text variant="muted" className="mb-4">
+        Build faster with components that look premium out of the box.
+      </Text>
+      <div className="flex gap-2">
+        <Button variant="primary">Get Started</Button>
+        <Button variant="ghost">Documentation</Button>
+      </div>
+    </Card>
+  );
+}
 ```
 
-## Usage
+## 🖌️ Theming
+
+Sage Design Engine uses a 4-layer token system. Changing a single primary color automatically updates buttons, focus rings, and chart colors across your entire application.
 
 ```tsx
-import { Button } from '@thesage/ui';
+// Example: Customizing the theme
+import { ThemeProvider } from '@thesage/ui';
 
-export default function MyComponent() {
+export default function App({ children }) {
   return (
-    <Button variant="primary" onClick={() => console.log('Clicked!')}>
-      Hello World
-    </Button>
+    <ThemeProvider theme="sage" defaultMode="system">
+      {children}
+    </ThemeProvider>
   );
 }
 ```
 
-## Documentation
+## 📦 Component Categories
 
-For full documentation, component examples, and guides, visit **[thesage.dev](https://thesage.dev)**.
+- **Actions**: Button, Toggle, ToggleGroup
+- **Forms**: Input, Select, Checkbox, Switch, Slider, Form
+- **Navigation**: Tabs, Menubar, Breadcrumb, Pagination
+- **Overlays**: Dialog, Sheet, Popover, Tooltip, Toast
+- **Data Display**: Card, Avatar, Badge, Table, ScrollArea
+- **Feedback**: Alert, Progress, Skeleton, Sonner
 
-## License
+## 📄 License
 
 MIT © [Shalom Ormsby](https://github.com/shalomormsby)

package/dist/index.d.mts

@@ -54,7 +54,7 @@ export { F as FieldValidation, a as FormErrors, V as ValidationRule, h as hasErr
 import 'clsx';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -2207,9 +2207,28 @@ interface OrbBackgroundProps {
     hoverIntensity?: number;
     rotateOnHover?: boolean;
     forceHoverState?: boolean;
+    /**
+     * Background color (hex). If not provided, uses CSS variable --color-background.
+     * @default undefined (reads from theme)
+     */
     backgroundColor?: string;
+    /**
+     * Primary orb color (hex). Creates the main vibrant tone.
+     * @default '#9c43fe' (purple)
+     */
+    orbColor1?: string;
+    /**
+     * Secondary orb color (hex). Adds cool cyan tones.
+     * @default '#4cc2e9' (cyan)
+     */
+    orbColor2?: string;
+    /**
+     * Tertiary orb color (hex). Provides deep blue accent tones.
+     * @default '#101499' (deep blue)
+     */
+    orbColor3?: string;
 }
-declare function OrbBackground({ className, hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor }: OrbBackgroundProps): react_jsx_runtime.JSX.Element;
+declare function OrbBackground({ className, hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor, orbColor1, orbColor2, orbColor3, }: OrbBackgroundProps): react_jsx_runtime.JSX.Element;
 
 interface HeroBlockProps {
     className?: string;

package/dist/index.d.ts

@@ -54,7 +54,7 @@ export { F as FieldValidation, a as FormErrors, V as ValidationRule, h as hasErr
 import 'clsx';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -2207,9 +2207,28 @@ interface OrbBackgroundProps {
     hoverIntensity?: number;
     rotateOnHover?: boolean;
     forceHoverState?: boolean;
+    /**
+     * Background color (hex). If not provided, uses CSS variable --color-background.
+     * @default undefined (reads from theme)
+     */
     backgroundColor?: string;
+    /**
+     * Primary orb color (hex). Creates the main vibrant tone.
+     * @default '#9c43fe' (purple)
+     */
+    orbColor1?: string;
+    /**
+     * Secondary orb color (hex). Adds cool cyan tones.
+     * @default '#4cc2e9' (cyan)
+     */
+    orbColor2?: string;
+    /**
+     * Tertiary orb color (hex). Provides deep blue accent tones.
+     * @default '#101499' (deep blue)
+     */
+    orbColor3?: string;
 }
-declare function OrbBackground({ className, hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor }: OrbBackgroundProps): react_jsx_runtime.JSX.Element;
+declare function OrbBackground({ className, hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor, orbColor1, orbColor2, orbColor3, }: OrbBackgroundProps): react_jsx_runtime.JSX.Element;
 
 interface HeroBlockProps {
     className?: string;

package/dist/index.js

@@ -387,6 +387,8 @@ var buttonVariants = (0, import_class_variance_authority.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",
@@ -9878,13 +9880,30 @@ var AnimatedBeam = ({
 var import_ogl3 = require("ogl");
 var import_react36 = require("react");
 var import_jsx_runtime85 = require("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 = (0, import_react36.useRef)(null);
   const vert = (
@@ -9912,6 +9931,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) {
@@ -9980,10 +10003,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;
     
@@ -9996,9 +10021,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);
@@ -10067,6 +10093,14 @@ function OrbBackground({
   (0, import_react36.useEffect)(() => {
     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 import_ogl3.Renderer({ alpha: true, premultipliedAlpha: false });
     const gl = renderer.gl;
     gl.clearColor(0, 0, 0, 0);
@@ -10084,7 +10118,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 import_ogl3.Vec3(...bgRgb) },
+        orbColor1: { value: new import_ogl3.Vec3(...color1Rgb) },
+        orbColor2: { value: new import_ogl3.Vec3(...color2Rgb) },
+        orbColor3: { value: new import_ogl3.Vec3(...color3Rgb) }
       }
     });
     const mesh = new import_ogl3.Mesh(gl, { geometry, program });
@@ -10141,7 +10179,6 @@ function OrbBackground({
         currentRot += dt * rotationSpeed;
       }
       program.uniforms.rot.value = currentRot;
-      program.uniforms.backgroundColor.value = hexToVec3(backgroundColor);
       renderer.render({ scene: mesh });
     };
     rafId = requestAnimationFrame(update);
@@ -10158,47 +10195,6 @@ function OrbBackground({
   }, [hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor]);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("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 import_ogl3.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 import_ogl3.Vec3(r, g, b);
-  }
-  const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-  if (rgbMatch) {
-    return new import_ogl3.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 import_ogl3.Vec3(0, 0, 0);
-}
 
 // src/components/blocks/Hero.tsx
 var import_lucide_react22 = require("lucide-react");
@@ -11677,6 +11673,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]);
@@ -11710,6 +11749,7 @@ function ThemeProvider({ children }) {
     } else {
       root.classList.remove("dark");
     }
+    validateThemeTokens(theme, mode);
     const timeout = setTimeout(() => {
       root.classList.remove("theme-transitioning");
       setIsTransitioning(false);