juxscript 1.0.20 → 1.0.21

package/lib/components/kpicard.ts

@@ -7,7 +7,7 @@ import {
     notionTheme,
     chalkTheme,
     mintTheme
-} from '../themes/charts.js';
+} from './charts/lib/charts.js';
 
 /**
  * KPI card options
@@ -67,7 +67,7 @@ export class KPICard {
     private _id: string;
     private _element?: HTMLElement;
     private _container?: string;
-    
+
     public state: KPICardState = {
         title: 'KPI',
         value: 0,
@@ -94,7 +94,7 @@ export class KPICard {
 
     constructor(id: string, options: KPICardOptions = {}) {
         this._id = id;
-        
+
         // Apply options
         if (options.title !== undefined) this.state.title = options.title;
         if (options.value !== undefined) this.state.value = options.value;
@@ -254,7 +254,7 @@ export class KPICard {
 
     private _updateCard(): void {
         if (!this._container) return;
-        
+
         const element = document.querySelector(this._container);
         if (!element) return;
 
@@ -269,7 +269,7 @@ export class KPICard {
 
     private _loadThemeFont(): void {
         const themeConfig = this._getThemeConfig();
-        
+
         if (themeConfig.font && !document.querySelector(`link[href="${themeConfig.font}"]`)) {
             const link = document.createElement('link');
             link.rel = 'stylesheet';
@@ -303,7 +303,7 @@ export class KPICard {
             wrapper.style.opacity = '0';
             wrapper.style.transform = 'translateY(20px)';
             wrapper.style.transition = `opacity ${animationDuration}ms ease-out, transform ${animationDuration}ms ease-out`;
-            
+
             requestAnimationFrame(() => {
                 setTimeout(() => {
                     wrapper.style.opacity = '1';
@@ -342,7 +342,7 @@ export class KPICard {
         const titleEl = document.createElement('div');
         titleEl.className = 'jux-kpicard-title';
         titleEl.textContent = title;
-        
+
         // Smart color selection based on theme
         let titleColor = '#6b7280'; // default light mode
         if (styleMode === 'gradient') {
@@ -350,7 +350,7 @@ export class KPICard {
         } else if (styleMode === 'glass') {
             titleColor = 'rgba(31, 41, 55, 0.9)'; // dark text for glass effect
         }
-        
+
         titleEl.style.cssText = `
             font-size: ${16 * scaleFactor}px;
             font-weight: 500;
@@ -372,7 +372,7 @@ export class KPICard {
         const valueEl = document.createElement('div');
         valueEl.className = 'jux-kpicard-value';
         valueEl.textContent = `${prefix}${value}${suffix}`;
-        
+
         // Smart color selection for value
         let valueColor = '#1f2937'; // default dark
         if (styleMode === 'gradient') {
@@ -380,7 +380,7 @@ export class KPICard {
         } else if (styleMode === 'glass') {
             valueColor = '#111827'; // very dark for glass
         }
-        
+
         valueEl.style.cssText = `
             font-size: ${56 * scaleFactor}px;
             font-weight: 800;
@@ -394,7 +394,7 @@ export class KPICard {
             valueEl.style.opacity = '0';
             valueEl.style.transform = 'scale(0.8)';
             valueEl.style.transition = `opacity ${animationDuration}ms ease-out ${animationDuration / 2}ms, transform ${animationDuration}ms cubic-bezier(0.34, 1.56, 0.64, 1) ${animationDuration / 2}ms`;
-            
+
             requestAnimationFrame(() => {
                 setTimeout(() => {
                     valueEl.style.opacity = '1';
@@ -423,7 +423,7 @@ export class KPICard {
             // Delta text with smart coloring
             const deltaText = document.createElement('span');
             deltaText.textContent = `${delta > 0 ? '+' : ''}${delta}%`;
-            
+
             let deltaColor;
             if (styleMode === 'gradient') {
                 deltaColor = delta > 0 ? 'rgba(255, 255, 255, 0.95)' : 'rgba(255, 200, 200, 0.95)';
@@ -432,7 +432,7 @@ export class KPICard {
             } else {
                 deltaColor = delta > 0 ? '#10b981' : '#ef4444';
             }
-            
+
             deltaText.style.cssText = `
                 font-size: ${18 * scaleFactor}px;
                 font-weight: 700;
@@ -444,7 +444,7 @@ export class KPICard {
                 deltaContainer.style.opacity = '0';
                 deltaContainer.style.transform = 'translateX(-10px)';
                 deltaContainer.style.transition = `opacity ${animationDuration}ms ease-out ${animationDuration}ms, transform ${animationDuration}ms ease-out ${animationDuration}ms`;
-                
+
                 requestAnimationFrame(() => {
                     setTimeout(() => {
                         deltaContainer.style.opacity = '1';
@@ -473,7 +473,7 @@ export class KPICard {
         svg.setAttribute('fill', 'none');
         svg.style.flexShrink = '0';
 
-        const color = isGradientMode 
+        const color = isGradientMode
             ? (isUp ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 200, 200, 0.9)')
             : (isUp ? '#10b981' : '#ef4444');
 
@@ -542,7 +542,7 @@ export class KPICard {
 
     private _getThemeConfig() {
         const { theme } = this.state;
-        
+
         switch (theme) {
             case 'google':
                 return googleTheme;