@moontra/moonui-pro 2.4.4 → 2.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.d.ts +22 -4
  2. package/dist/index.mjs +1025 -206
  3. package/package.json +1 -2
  4. package/src/components/advanced-chart/index.tsx +962 -142
  5. package/src/components/data-table/data-table-column-toggle.tsx +7 -4
  6. package/src/components/data-table/data-table-filter-drawer.tsx +48 -42
  7. package/src/components/data-table/index.tsx +98 -24
  8. package/src/styles/advanced-chart.css +239 -0
  9. package/src/styles/index.css +2 -1
  10. package/src/utils/chart-helpers.ts +100 -0
package/dist/index.mjs CHANGED
@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
3
3
  import * as t from 'react';
4
4
  import t__default, { useState, useRef, useCallback, forwardRef, createContext, useContext, useMemo, useEffect, useDebugValue, Component, useLayoutEffect } from 'react';
5
5
  import * as AccordionPrimitive from '@radix-ui/react-accordion';
6
- import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, ChevronLeft, Calendar, Edit, Trash2, Clock, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, Download, Maximize2, Activity, Star, Upload, CheckCircle2, Filter, FileSpreadsheet, FileJson, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, ExternalLink, BarChart3, Users, DollarSign, Github, GitFork, Server, EyeOff, ZoomOut, ZoomIn, RotateCw, Zap, Monitor, Timer, Cpu, MemoryStick, HardDrive, Network, CheckCircle, Video, Music, Archive, File, Columns, XCircle, ArrowDownRight, ArrowUpRight } from 'lucide-react';
6
+ import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, ChevronLeft, Calendar, Edit, Trash2, Clock, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, ZoomOut, ZoomIn, Download, FileSpreadsheet, FileJson, Maximize2, Move, Activity, Star, Upload, CheckCircle2, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, ExternalLink, BarChart3, Users, DollarSign, Github, GitFork, Server, EyeOff, RotateCw, Zap, Monitor, Timer, Cpu, MemoryStick, HardDrive, Network, CheckCircle, Video, Music, Archive, File, Columns, XCircle, ArrowDownRight, ArrowUpRight } from 'lucide-react';
7
7
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
8
8
  import { cva } from 'class-variance-authority';
9
9
  import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -24,7 +24,7 @@ import * as ToastPrimitives from '@radix-ui/react-toast';
24
24
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
25
25
  import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
26
26
  import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector.js';
27
- import { ResponsiveContainer, ScatterChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Scatter, PieChart, Pie, Cell, AreaChart, Area, ReferenceLine, Brush, BarChart, Bar, LineChart, Line, ReferenceArea } from 'recharts';
27
+ import { ResponsiveContainer, LineChart, Line, RadialBarChart, Tooltip, Legend, RadialBar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, ScatterChart, CartesianGrid, XAxis, YAxis, Scatter, PieChart, Pie, Cell, AreaChart, Area, ReferenceLine, Brush, BarChart, Bar, ReferenceArea } from 'recharts';
28
28
  import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
29
29
  import { useForm } from 'react-hook-form';
30
30
  import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel } from '@tanstack/react-table';
@@ -1746,7 +1746,7 @@ function styleInject(css2, { insertAt } = {}) {
1746
1746
  }
1747
1747
 
1748
1748
  // src/styles/index.css
1749
- styleInject(':root {\n --primary-50: 240 249 255;\n --primary-100: 224 242 254;\n --primary-200: 186 230 253;\n --primary-300: 125 211 252;\n --primary-400: 56 189 248;\n --primary-500: 14 165 233;\n --primary-600: 2 132 199;\n --primary-700: 3 105 161;\n --primary-800: 7 89 133;\n --primary-900: 12 74 110;\n --primary-950: 8 47 73;\n --secondary-50: 248 250 252;\n --secondary-100: 241 245 249;\n --secondary-200: 226 232 240;\n --secondary-300: 203 213 225;\n --secondary-400: 148 163 184;\n --secondary-500: 100 116 139;\n --secondary-600: 71 85 105;\n --secondary-700: 51 65 85;\n --secondary-800: 30 41 59;\n --secondary-900: 15 23 42;\n --secondary-950: 2 6 23;\n --success-50: 240 253 244;\n --success-100: 220 252 231;\n --success-200: 187 247 208;\n --success-300: 134 239 172;\n --success-400: 74 222 128;\n --success-500: 34 197 94;\n --success-600: 22 163 74;\n --success-700: 21 128 61;\n --success-800: 22 101 52;\n --success-900: 20 83 45;\n --success-950: 5 46 22;\n --warning-50: 254 252 232;\n --warning-100: 254 249 195;\n --warning-200: 254 240 138;\n --warning-300: 253 224 71;\n --warning-400: 250 204 21;\n --warning-500: 234 179 8;\n --warning-600: 202 138 4;\n --warning-700: 161 98 7;\n --warning-800: 133 77 14;\n --warning-900: 113 63 18;\n --warning-950: 66 32 6;\n --error-50: 254 242 242;\n --error-100: 254 226 226;\n --error-200: 254 202 202;\n --error-300: 252 165 165;\n --error-400: 248 113 113;\n --error-500: 239 68 68;\n --error-600: 220 38 38;\n --error-700: 185 28 28;\n --error-800: 153 27 27;\n --error-900: 127 29 29;\n --error-950: 69 10 10;\n --background: 0 0% 100%;\n --foreground: 222.2 47.4% 11.2%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 47.4% 11.2%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 47.4% 11.2%;\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --muted: 210 40% 96%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --accent: 210 40% 96%;\n --accent-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 100% 50%;\n --destructive-foreground: 210 40% 98%;\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 215 20.2% 65.1%;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n --font-sans:\n "Inter",\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n --font-serif:\n "Crimson Text",\n Georgia,\n "Times New Roman",\n serif;\n --font-mono:\n "JetBrains Mono",\n "Fira Code",\n "Consolas",\n monospace;\n --text-xs: 0.75rem;\n --text-sm: 0.875rem;\n --text-base: 1rem;\n --text-lg: 1.125rem;\n --text-xl: 1.25rem;\n --text-2xl: 1.5rem;\n --text-3xl: 1.875rem;\n --text-4xl: 2.25rem;\n --text-5xl: 3rem;\n --text-6xl: 3.75rem;\n --text-7xl: 4.5rem;\n --text-8xl: 6rem;\n --text-9xl: 8rem;\n --leading-none: 1;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-normal: 1.5;\n --leading-relaxed: 1.625;\n --leading-loose: 2;\n --font-thin: 100;\n --font-extralight: 200;\n --font-light: 300;\n --font-normal: 400;\n --font-medium: 500;\n --font-semibold: 600;\n --font-bold: 700;\n --font-extrabold: 800;\n --font-black: 900;\n --spacing-0: 0;\n --spacing-px: 1px;\n --spacing-0-5: 0.125rem;\n --spacing-1: 0.25rem;\n --spacing-1-5: 0.375rem;\n --spacing-2: 0.5rem;\n --spacing-2-5: 0.625rem;\n --spacing-3: 0.75rem;\n --spacing-3-5: 0.875rem;\n --spacing-4: 1rem;\n --spacing-5: 1.25rem;\n --spacing-6: 1.5rem;\n --spacing-7: 1.75rem;\n --spacing-8: 2rem;\n --spacing-9: 2.25rem;\n --spacing-10: 2.5rem;\n --spacing-11: 2.75rem;\n --spacing-12: 3rem;\n --spacing-14: 3.5rem;\n --spacing-16: 4rem;\n --spacing-20: 5rem;\n --spacing-24: 6rem;\n --spacing-28: 7rem;\n --spacing-32: 8rem;\n --spacing-36: 9rem;\n --spacing-40: 10rem;\n --spacing-44: 11rem;\n --spacing-48: 12rem;\n --spacing-52: 13rem;\n --spacing-56: 14rem;\n --spacing-60: 15rem;\n --spacing-64: 16rem;\n --spacing-72: 18rem;\n --spacing-80: 20rem;\n --spacing-96: 24rem;\n --radius-none: 0;\n --radius-sm: 0.125rem;\n --radius-base: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-full: 9999px;\n --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);\n --shadow-none: 0 0 #0000;\n --elevation-0: var(--shadow-none);\n --elevation-1: var(--shadow-sm);\n --elevation-2: var(--shadow-base);\n --elevation-3: var(--shadow-md);\n --elevation-4: var(--shadow-lg);\n --elevation-5: var(--shadow-xl);\n --elevation-6: var(--shadow-2xl);\n --duration-75: 75ms;\n --duration-100: 100ms;\n --duration-150: 150ms;\n --duration-200: 200ms;\n --duration-300: 300ms;\n --duration-500: 500ms;\n --duration-700: 700ms;\n --duration-1000: 1000ms;\n --ease-linear: linear;\n --ease-in: cubic-bezier(0.4, 0, 1, 1);\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n --animate-fade-in: fadeIn var(--duration-300) var(--ease-out);\n --animate-fade-out: fadeOut var(--duration-300) var(--ease-in);\n --animate-slide-in-up: slideInUp var(--duration-300) var(--ease-out);\n --animate-slide-in-down: slideInDown var(--duration-300) var(--ease-out);\n --animate-slide-in-left: slideInLeft var(--duration-300) var(--ease-out);\n --animate-slide-in-right: slideInRight var(--duration-300) var(--ease-out);\n --animate-scale-in: scaleIn var(--duration-200) var(--ease-out);\n --animate-scale-out: scaleOut var(--duration-200) var(--ease-in);\n --animate-bounce: bounce var(--duration-500) var(--ease-bounce);\n --animate-pulse: pulse var(--duration-1000) var(--ease-in-out) infinite;\n --animate-spin: spin var(--duration-1000) var(--ease-linear) infinite;\n --breakpoint-sm: 640px;\n --breakpoint-md: 768px;\n --breakpoint-lg: 1024px;\n --breakpoint-xl: 1280px;\n --breakpoint-2xl: 1536px;\n --container-sm: 640px;\n --container-md: 768px;\n --container-lg: 1024px;\n --container-xl: 1280px;\n --container-2xl: 1536px;\n --z-0: 0;\n --z-10: 10;\n --z-20: 20;\n --z-30: 30;\n --z-40: 40;\n --z-50: 50;\n --z-auto: auto;\n --z-dropdown: 1000;\n --z-sticky: 1020;\n --z-fixed: 1030;\n --z-modal-backdrop: 1040;\n --z-modal: 1050;\n --z-popover: 1060;\n --z-tooltip: 1070;\n --z-toast: 1080;\n --button-height-sm: 2rem;\n --button-height-md: 2.5rem;\n --button-height-lg: 3rem;\n --button-height-xl: 3.5rem;\n --button-padding-sm: 0.5rem 0.75rem;\n --button-padding-md: 0.625rem 1rem;\n --button-padding-lg: 0.75rem 1.25rem;\n --button-padding-xl: 1rem 1.5rem;\n --button-font-size-sm: var(--text-sm);\n --button-font-size-md: var(--text-base);\n --button-font-size-lg: var(--text-lg);\n --button-font-size-xl: var(--text-xl);\n --input-height-sm: 2rem;\n --input-height-md: 2.5rem;\n --input-height-lg: 3rem;\n --input-height-xl: 3.5rem;\n --input-padding-sm: 0.5rem 0.75rem;\n --input-padding-md: 0.625rem 1rem;\n --input-padding-lg: 0.75rem 1.25rem;\n --input-padding-xl: 1rem 1.5rem;\n --input-border-width: 1px;\n --input-border-radius: var(--radius-md);\n --input-focus-ring-width: 2px;\n --input-focus-ring-offset: 2px;\n --card-padding-sm: 1rem;\n --card-padding-md: 1.5rem;\n --card-padding-lg: 2rem;\n --card-padding-xl: 2.5rem;\n --card-border-radius: var(--radius-lg);\n --card-border-width: 1px;\n --card-shadow: var(--elevation-1);\n --card-hover-shadow: var(--elevation-2);\n}\n.dark {\n --background: 224 71% 4%;\n --foreground: 213 31% 91%;\n --card: 224 71% 4%;\n --card-foreground: 213 31% 91%;\n --popover: 224 71% 4%;\n --popover-foreground: 213 31% 91%;\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 1.2%;\n --secondary: 222.2 84% 4.9%;\n --secondary-foreground: 210 40% 98%;\n --muted: 223 47% 11%;\n --muted-foreground: 215.4 16.3% 56.9%;\n --accent: 216 34% 17%;\n --accent-foreground: 210 40% 98%;\n --destructive: 0 63% 31%;\n --destructive-foreground: 210 40% 98%;\n --border: 216 34% 17%;\n --input: 216 34% 17%;\n --ring: 216 34% 17%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n}\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes slideInUp {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n@keyframes slideInDown {\n from {\n transform: translateY(-100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n@keyframes slideInLeft {\n from {\n transform: translateX(-100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n@keyframes slideInRight {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n@keyframes scaleIn {\n from {\n transform: scale(0.95);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n@keyframes scaleOut {\n from {\n transform: scale(1);\n opacity: 1;\n }\n to {\n transform: scale(0.95);\n opacity: 0;\n }\n}\n@keyframes bounce {\n 0%, 20%, 53%, 80%, 100% {\n transform: translate3d(0, 0, 0);\n }\n 40%, 43% {\n transform: translate3d(0, -30px, 0);\n }\n 70% {\n transform: translate3d(0, -15px, 0);\n }\n 90% {\n transform: translate3d(0, -4px, 0);\n }\n}\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.animate-fade-in {\n animation: var(--animate-fade-in);\n}\n.animate-fade-out {\n animation: var(--animate-fade-out);\n}\n.animate-slide-in-up {\n animation: var(--animate-slide-in-up);\n}\n.animate-slide-in-down {\n animation: var(--animate-slide-in-down);\n}\n.animate-slide-in-left {\n animation: var(--animate-slide-in-left);\n}\n.animate-slide-in-right {\n animation: var(--animate-slide-in-right);\n}\n.animate-scale-in {\n animation: var(--animate-scale-in);\n}\n.animate-scale-out {\n animation: var(--animate-scale-out);\n}\n.animate-bounce {\n animation: var(--animate-bounce);\n}\n.animate-pulse {\n animation: var(--animate-pulse);\n}\n.animate-spin {\n animation: var(--animate-spin);\n}\n@media (max-width: 639px) {\n .container {\n max-width: 100%;\n }\n}\n@media (min-width: 640px) {\n .container {\n max-width: var(--container-sm);\n }\n}\n@media (min-width: 768px) {\n .container {\n max-width: var(--container-md);\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: var(--container-lg);\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: var(--container-xl);\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: var(--container-2xl);\n }\n}\n:root {\n --bg-base: var(--background);\n --bg-subtle: var(--gray-50);\n --bg-muted: var(--gray-100);\n --bg-emphasis: var(--gray-200);\n --bg-inverse: var(--foreground);\n --surface-base: var(--background);\n --surface-overlay: var(--gray-50);\n --surface-raised: var(--background);\n --surface-sunken: var(--gray-100);\n --text-primary: var(--foreground);\n --text-secondary: var(--gray-600);\n --text-tertiary: var(--gray-500);\n --text-disabled: var(--gray-400);\n --text-inverse: var(--background);\n --text-link: var(--primary);\n --text-link-hover: var(--primary-hover);\n --brand-primary: var(--primary);\n --brand-primary-hover: var(--primary-hover);\n --brand-primary-active: var(--primary-active);\n --brand-secondary: var(--secondary);\n --state-hover: var(--gray-100);\n --state-active: var(--gray-200);\n --state-selected: var(--primary);\n --state-disabled: var(--gray-300);\n --state-focus: var(--primary);\n --feedback-success: var(--success);\n --feedback-success-light: 142 71% 95%;\n --feedback-success-dark: 142 71% 35%;\n --feedback-warning: var(--warning);\n --feedback-warning-light: 38 92% 95%;\n --feedback-warning-dark: 38 92% 40%;\n --feedback-error: var(--error);\n --feedback-error-light: 0 84% 95%;\n --feedback-error-dark: 0 84% 50%;\n --feedback-info: 217 91% 60%;\n --feedback-info-light: 217 91% 95%;\n --feedback-info-dark: 217 91% 50%;\n --border-default: var(--border);\n --border-subtle: var(--gray-200);\n --border-strong: var(--gray-400);\n --border-interactive: var(--primary);\n --border-error: var(--error);\n --border-success: var(--success);\n --border-warning: var(--warning);\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-primary: 0 4px 14px 0 hsl(var(--primary) / 0.3);\n --shadow-success: 0 4px 14px 0 hsl(var(--success) / 0.3);\n --shadow-error: 0 4px 14px 0 hsl(var(--error) / 0.3);\n --shadow-warning: 0 4px 14px 0 hsl(var(--warning) / 0.3);\n --shadow-inner-xs: inset 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-inner-sm: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --shadow-inner-md: inset 0 4px 6px -1px rgb(0 0 0 / 0.1);\n --ease-linear: linear;\n --ease-in: cubic-bezier(0.4, 0, 1, 1);\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);\n --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n --ease-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n --duration-instant: 0ms;\n --duration-fast: 150ms;\n --duration-normal: 250ms;\n --duration-slow: 350ms;\n --duration-slower: 500ms;\n --duration-slowest: 750ms;\n --space-0: 0;\n --space-px: 1px;\n --space-0\\.5: 0.125rem;\n --space-1: 0.25rem;\n --space-1\\.5: 0.375rem;\n --space-2: 0.5rem;\n --space-2\\.5: 0.625rem;\n --space-3: 0.75rem;\n --space-3\\.5: 0.875rem;\n --space-4: 1rem;\n --space-5: 1.25rem;\n --space-6: 1.5rem;\n --space-7: 1.75rem;\n --space-8: 2rem;\n --space-9: 2.25rem;\n --space-10: 2.5rem;\n --space-11: 2.75rem;\n --space-12: 3rem;\n --space-14: 3.5rem;\n --space-16: 4rem;\n --space-20: 5rem;\n --space-24: 6rem;\n --space-28: 7rem;\n --space-32: 8rem;\n --space-36: 9rem;\n --space-40: 10rem;\n --space-44: 11rem;\n --space-48: 12rem;\n --space-52: 13rem;\n --space-56: 14rem;\n --space-60: 15rem;\n --space-64: 16rem;\n --space-72: 18rem;\n --space-80: 20rem;\n --space-96: 24rem;\n --text-2xs: 0.625rem;\n --text-xs: 0.75rem;\n --text-sm: 0.875rem;\n --text-base: 1rem;\n --text-lg: 1.125rem;\n --text-xl: 1.25rem;\n --text-2xl: 1.5rem;\n --text-3xl: 1.875rem;\n --text-4xl: 2.25rem;\n --text-5xl: 3rem;\n --text-6xl: 3.75rem;\n --text-7xl: 4.5rem;\n --text-8xl: 6rem;\n --text-9xl: 8rem;\n --leading-none: 1;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-normal: 1.5;\n --leading-relaxed: 1.625;\n --leading-loose: 2;\n --tracking-tighter: -0.05em;\n --tracking-tight: -0.025em;\n --tracking-normal: 0;\n --tracking-wide: 0.025em;\n --tracking-wider: 0.05em;\n --tracking-widest: 0.1em;\n --font-thin: 100;\n --font-extralight: 200;\n --font-light: 300;\n --font-normal: 400;\n --font-medium: 500;\n --font-semibold: 600;\n --font-bold: 700;\n --font-extrabold: 800;\n --font-black: 900;\n --radius-none: 0;\n --radius-sm: 0.125rem;\n --radius-base: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-full: 9999px;\n --z-0: 0;\n --z-10: 10;\n --z-20: 20;\n --z-30: 30;\n --z-40: 40;\n --z-50: 50;\n --z-dropdown: 1000;\n --z-sticky: 1020;\n --z-fixed: 1030;\n --z-modal-backdrop: 1040;\n --z-modal: 1050;\n --z-popover: 1060;\n --z-tooltip: 1070;\n --z-notification: 1080;\n --blur-none: 0;\n --blur-sm: 4px;\n --blur-base: 8px;\n --blur-md: 12px;\n --blur-lg: 16px;\n --blur-xl: 24px;\n --blur-2xl: 40px;\n --blur-3xl: 64px;\n}\n.dark {\n --bg-base: var(--background);\n --bg-subtle: var(--gray-800);\n --bg-muted: var(--gray-700);\n --bg-emphasis: var(--gray-600);\n --surface-overlay: var(--gray-800);\n --surface-raised: var(--gray-800);\n --surface-sunken: var(--background);\n --text-secondary: var(--gray-400);\n --text-tertiary: var(--gray-500);\n --text-disabled: var(--gray-600);\n --state-hover: var(--gray-700);\n --state-active: var(--gray-600);\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);\n}\n.shadow-xs {\n box-shadow: var(--shadow-xs);\n}\n.shadow-sm {\n box-shadow: var(--shadow-sm);\n}\n.shadow-md {\n box-shadow: var(--shadow-md);\n}\n.shadow-lg {\n box-shadow: var(--shadow-lg);\n}\n.shadow-xl {\n box-shadow: var(--shadow-xl);\n}\n.shadow-2xl {\n box-shadow: var(--shadow-2xl);\n}\n.shadow-primary {\n box-shadow: var(--shadow-primary);\n}\n.shadow-success {\n box-shadow: var(--shadow-success);\n}\n.shadow-error {\n box-shadow: var(--shadow-error);\n}\n.shadow-warning {\n box-shadow: var(--shadow-warning);\n}\n.shadow-inner-xs {\n box-shadow: var(--shadow-inner-xs);\n}\n.shadow-inner-sm {\n box-shadow: var(--shadow-inner-sm);\n}\n.shadow-inner-md {\n box-shadow: var(--shadow-inner-md);\n}\n.animate-none {\n animation: none;\n}\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n.animate-ping {\n animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n.animate-bounce {\n animation: bounce 1s infinite;\n}\n.animate-fade-in {\n animation: fadeIn var(--duration-normal) var(--ease-out);\n}\n.animate-fade-out {\n animation: fadeOut var(--duration-normal) var(--ease-out);\n}\n.animate-slide-in {\n animation: slideIn var(--duration-normal) var(--ease-out);\n}\n.animate-scale-in {\n animation: scaleIn var(--duration-normal) var(--ease-out);\n}\n.transition-none {\n transition: none;\n}\n.transition-all {\n transition-property: all;\n}\n.transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke;\n}\n.transition-opacity {\n transition-property: opacity;\n}\n.transition-shadow {\n transition-property: box-shadow;\n}\n.transition-transform {\n transition-property: transform;\n}\n.duration-instant {\n transition-duration: var(--duration-instant);\n}\n.duration-fast {\n transition-duration: var(--duration-fast);\n}\n.duration-normal {\n transition-duration: var(--duration-normal);\n}\n.duration-slow {\n transition-duration: var(--duration-slow);\n}\n.duration-slower {\n transition-duration: var(--duration-slower);\n}\n.duration-slowest {\n transition-duration: var(--duration-slowest);\n}\n.ease-linear {\n transition-timing-function: var(--ease-linear);\n}\n.ease-in {\n transition-timing-function: var(--ease-in);\n}\n.ease-out {\n transition-timing-function: var(--ease-out);\n}\n.ease-in-out {\n transition-timing-function: var(--ease-in-out);\n}\n.ease-bounce {\n transition-timing-function: var(--ease-bounce);\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: .5;\n }\n}\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n 50% {\n transform: translateY(0);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n}\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes slideIn {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes scaleIn {\n from {\n transform: scale(0.95);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n');
1749
+ styleInject(':root {\n --primary-50: 240 249 255;\n --primary-100: 224 242 254;\n --primary-200: 186 230 253;\n --primary-300: 125 211 252;\n --primary-400: 56 189 248;\n --primary-500: 14 165 233;\n --primary-600: 2 132 199;\n --primary-700: 3 105 161;\n --primary-800: 7 89 133;\n --primary-900: 12 74 110;\n --primary-950: 8 47 73;\n --secondary-50: 248 250 252;\n --secondary-100: 241 245 249;\n --secondary-200: 226 232 240;\n --secondary-300: 203 213 225;\n --secondary-400: 148 163 184;\n --secondary-500: 100 116 139;\n --secondary-600: 71 85 105;\n --secondary-700: 51 65 85;\n --secondary-800: 30 41 59;\n --secondary-900: 15 23 42;\n --secondary-950: 2 6 23;\n --success-50: 240 253 244;\n --success-100: 220 252 231;\n --success-200: 187 247 208;\n --success-300: 134 239 172;\n --success-400: 74 222 128;\n --success-500: 34 197 94;\n --success-600: 22 163 74;\n --success-700: 21 128 61;\n --success-800: 22 101 52;\n --success-900: 20 83 45;\n --success-950: 5 46 22;\n --warning-50: 254 252 232;\n --warning-100: 254 249 195;\n --warning-200: 254 240 138;\n --warning-300: 253 224 71;\n --warning-400: 250 204 21;\n --warning-500: 234 179 8;\n --warning-600: 202 138 4;\n --warning-700: 161 98 7;\n --warning-800: 133 77 14;\n --warning-900: 113 63 18;\n --warning-950: 66 32 6;\n --error-50: 254 242 242;\n --error-100: 254 226 226;\n --error-200: 254 202 202;\n --error-300: 252 165 165;\n --error-400: 248 113 113;\n --error-500: 239 68 68;\n --error-600: 220 38 38;\n --error-700: 185 28 28;\n --error-800: 153 27 27;\n --error-900: 127 29 29;\n --error-950: 69 10 10;\n --background: 0 0% 100%;\n --foreground: 222.2 47.4% 11.2%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 47.4% 11.2%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 47.4% 11.2%;\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --muted: 210 40% 96%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --accent: 210 40% 96%;\n --accent-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 100% 50%;\n --destructive-foreground: 210 40% 98%;\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 215 20.2% 65.1%;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n --font-sans:\n "Inter",\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n --font-serif:\n "Crimson Text",\n Georgia,\n "Times New Roman",\n serif;\n --font-mono:\n "JetBrains Mono",\n "Fira Code",\n "Consolas",\n monospace;\n --text-xs: 0.75rem;\n --text-sm: 0.875rem;\n --text-base: 1rem;\n --text-lg: 1.125rem;\n --text-xl: 1.25rem;\n --text-2xl: 1.5rem;\n --text-3xl: 1.875rem;\n --text-4xl: 2.25rem;\n --text-5xl: 3rem;\n --text-6xl: 3.75rem;\n --text-7xl: 4.5rem;\n --text-8xl: 6rem;\n --text-9xl: 8rem;\n --leading-none: 1;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-normal: 1.5;\n --leading-relaxed: 1.625;\n --leading-loose: 2;\n --font-thin: 100;\n --font-extralight: 200;\n --font-light: 300;\n --font-normal: 400;\n --font-medium: 500;\n --font-semibold: 600;\n --font-bold: 700;\n --font-extrabold: 800;\n --font-black: 900;\n --spacing-0: 0;\n --spacing-px: 1px;\n --spacing-0-5: 0.125rem;\n --spacing-1: 0.25rem;\n --spacing-1-5: 0.375rem;\n --spacing-2: 0.5rem;\n --spacing-2-5: 0.625rem;\n --spacing-3: 0.75rem;\n --spacing-3-5: 0.875rem;\n --spacing-4: 1rem;\n --spacing-5: 1.25rem;\n --spacing-6: 1.5rem;\n --spacing-7: 1.75rem;\n --spacing-8: 2rem;\n --spacing-9: 2.25rem;\n --spacing-10: 2.5rem;\n --spacing-11: 2.75rem;\n --spacing-12: 3rem;\n --spacing-14: 3.5rem;\n --spacing-16: 4rem;\n --spacing-20: 5rem;\n --spacing-24: 6rem;\n --spacing-28: 7rem;\n --spacing-32: 8rem;\n --spacing-36: 9rem;\n --spacing-40: 10rem;\n --spacing-44: 11rem;\n --spacing-48: 12rem;\n --spacing-52: 13rem;\n --spacing-56: 14rem;\n --spacing-60: 15rem;\n --spacing-64: 16rem;\n --spacing-72: 18rem;\n --spacing-80: 20rem;\n --spacing-96: 24rem;\n --radius-none: 0;\n --radius-sm: 0.125rem;\n --radius-base: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-full: 9999px;\n --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);\n --shadow-none: 0 0 #0000;\n --elevation-0: var(--shadow-none);\n --elevation-1: var(--shadow-sm);\n --elevation-2: var(--shadow-base);\n --elevation-3: var(--shadow-md);\n --elevation-4: var(--shadow-lg);\n --elevation-5: var(--shadow-xl);\n --elevation-6: var(--shadow-2xl);\n --duration-75: 75ms;\n --duration-100: 100ms;\n --duration-150: 150ms;\n --duration-200: 200ms;\n --duration-300: 300ms;\n --duration-500: 500ms;\n --duration-700: 700ms;\n --duration-1000: 1000ms;\n --ease-linear: linear;\n --ease-in: cubic-bezier(0.4, 0, 1, 1);\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n --animate-fade-in: fadeIn var(--duration-300) var(--ease-out);\n --animate-fade-out: fadeOut var(--duration-300) var(--ease-in);\n --animate-slide-in-up: slideInUp var(--duration-300) var(--ease-out);\n --animate-slide-in-down: slideInDown var(--duration-300) var(--ease-out);\n --animate-slide-in-left: slideInLeft var(--duration-300) var(--ease-out);\n --animate-slide-in-right: slideInRight var(--duration-300) var(--ease-out);\n --animate-scale-in: scaleIn var(--duration-200) var(--ease-out);\n --animate-scale-out: scaleOut var(--duration-200) var(--ease-in);\n --animate-bounce: bounce var(--duration-500) var(--ease-bounce);\n --animate-pulse: pulse var(--duration-1000) var(--ease-in-out) infinite;\n --animate-spin: spin var(--duration-1000) var(--ease-linear) infinite;\n --breakpoint-sm: 640px;\n --breakpoint-md: 768px;\n --breakpoint-lg: 1024px;\n --breakpoint-xl: 1280px;\n --breakpoint-2xl: 1536px;\n --container-sm: 640px;\n --container-md: 768px;\n --container-lg: 1024px;\n --container-xl: 1280px;\n --container-2xl: 1536px;\n --z-0: 0;\n --z-10: 10;\n --z-20: 20;\n --z-30: 30;\n --z-40: 40;\n --z-50: 50;\n --z-auto: auto;\n --z-dropdown: 1000;\n --z-sticky: 1020;\n --z-fixed: 1030;\n --z-modal-backdrop: 1040;\n --z-modal: 1050;\n --z-popover: 1060;\n --z-tooltip: 1070;\n --z-toast: 1080;\n --button-height-sm: 2rem;\n --button-height-md: 2.5rem;\n --button-height-lg: 3rem;\n --button-height-xl: 3.5rem;\n --button-padding-sm: 0.5rem 0.75rem;\n --button-padding-md: 0.625rem 1rem;\n --button-padding-lg: 0.75rem 1.25rem;\n --button-padding-xl: 1rem 1.5rem;\n --button-font-size-sm: var(--text-sm);\n --button-font-size-md: var(--text-base);\n --button-font-size-lg: var(--text-lg);\n --button-font-size-xl: var(--text-xl);\n --input-height-sm: 2rem;\n --input-height-md: 2.5rem;\n --input-height-lg: 3rem;\n --input-height-xl: 3.5rem;\n --input-padding-sm: 0.5rem 0.75rem;\n --input-padding-md: 0.625rem 1rem;\n --input-padding-lg: 0.75rem 1.25rem;\n --input-padding-xl: 1rem 1.5rem;\n --input-border-width: 1px;\n --input-border-radius: var(--radius-md);\n --input-focus-ring-width: 2px;\n --input-focus-ring-offset: 2px;\n --card-padding-sm: 1rem;\n --card-padding-md: 1.5rem;\n --card-padding-lg: 2rem;\n --card-padding-xl: 2.5rem;\n --card-border-radius: var(--radius-lg);\n --card-border-width: 1px;\n --card-shadow: var(--elevation-1);\n --card-hover-shadow: var(--elevation-2);\n}\n.dark {\n --background: 224 71% 4%;\n --foreground: 213 31% 91%;\n --card: 224 71% 4%;\n --card-foreground: 213 31% 91%;\n --popover: 224 71% 4%;\n --popover-foreground: 213 31% 91%;\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 1.2%;\n --secondary: 222.2 84% 4.9%;\n --secondary-foreground: 210 40% 98%;\n --muted: 223 47% 11%;\n --muted-foreground: 215.4 16.3% 56.9%;\n --accent: 216 34% 17%;\n --accent-foreground: 210 40% 98%;\n --destructive: 0 63% 31%;\n --destructive-foreground: 210 40% 98%;\n --border: 216 34% 17%;\n --input: 216 34% 17%;\n --ring: 216 34% 17%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n}\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes slideInUp {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n@keyframes slideInDown {\n from {\n transform: translateY(-100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n@keyframes slideInLeft {\n from {\n transform: translateX(-100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n@keyframes slideInRight {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n@keyframes scaleIn {\n from {\n transform: scale(0.95);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n@keyframes scaleOut {\n from {\n transform: scale(1);\n opacity: 1;\n }\n to {\n transform: scale(0.95);\n opacity: 0;\n }\n}\n@keyframes bounce {\n 0%, 20%, 53%, 80%, 100% {\n transform: translate3d(0, 0, 0);\n }\n 40%, 43% {\n transform: translate3d(0, -30px, 0);\n }\n 70% {\n transform: translate3d(0, -15px, 0);\n }\n 90% {\n transform: translate3d(0, -4px, 0);\n }\n}\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.animate-fade-in {\n animation: var(--animate-fade-in);\n}\n.animate-fade-out {\n animation: var(--animate-fade-out);\n}\n.animate-slide-in-up {\n animation: var(--animate-slide-in-up);\n}\n.animate-slide-in-down {\n animation: var(--animate-slide-in-down);\n}\n.animate-slide-in-left {\n animation: var(--animate-slide-in-left);\n}\n.animate-slide-in-right {\n animation: var(--animate-slide-in-right);\n}\n.animate-scale-in {\n animation: var(--animate-scale-in);\n}\n.animate-scale-out {\n animation: var(--animate-scale-out);\n}\n.animate-bounce {\n animation: var(--animate-bounce);\n}\n.animate-pulse {\n animation: var(--animate-pulse);\n}\n.animate-spin {\n animation: var(--animate-spin);\n}\n@media (max-width: 639px) {\n .container {\n max-width: 100%;\n }\n}\n@media (min-width: 640px) {\n .container {\n max-width: var(--container-sm);\n }\n}\n@media (min-width: 768px) {\n .container {\n max-width: var(--container-md);\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: var(--container-lg);\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: var(--container-xl);\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: var(--container-2xl);\n }\n}\n:root {\n --bg-base: var(--background);\n --bg-subtle: var(--gray-50);\n --bg-muted: var(--gray-100);\n --bg-emphasis: var(--gray-200);\n --bg-inverse: var(--foreground);\n --surface-base: var(--background);\n --surface-overlay: var(--gray-50);\n --surface-raised: var(--background);\n --surface-sunken: var(--gray-100);\n --text-primary: var(--foreground);\n --text-secondary: var(--gray-600);\n --text-tertiary: var(--gray-500);\n --text-disabled: var(--gray-400);\n --text-inverse: var(--background);\n --text-link: var(--primary);\n --text-link-hover: var(--primary-hover);\n --brand-primary: var(--primary);\n --brand-primary-hover: var(--primary-hover);\n --brand-primary-active: var(--primary-active);\n --brand-secondary: var(--secondary);\n --state-hover: var(--gray-100);\n --state-active: var(--gray-200);\n --state-selected: var(--primary);\n --state-disabled: var(--gray-300);\n --state-focus: var(--primary);\n --feedback-success: var(--success);\n --feedback-success-light: 142 71% 95%;\n --feedback-success-dark: 142 71% 35%;\n --feedback-warning: var(--warning);\n --feedback-warning-light: 38 92% 95%;\n --feedback-warning-dark: 38 92% 40%;\n --feedback-error: var(--error);\n --feedback-error-light: 0 84% 95%;\n --feedback-error-dark: 0 84% 50%;\n --feedback-info: 217 91% 60%;\n --feedback-info-light: 217 91% 95%;\n --feedback-info-dark: 217 91% 50%;\n --border-default: var(--border);\n --border-subtle: var(--gray-200);\n --border-strong: var(--gray-400);\n --border-interactive: var(--primary);\n --border-error: var(--error);\n --border-success: var(--success);\n --border-warning: var(--warning);\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-primary: 0 4px 14px 0 hsl(var(--primary) / 0.3);\n --shadow-success: 0 4px 14px 0 hsl(var(--success) / 0.3);\n --shadow-error: 0 4px 14px 0 hsl(var(--error) / 0.3);\n --shadow-warning: 0 4px 14px 0 hsl(var(--warning) / 0.3);\n --shadow-inner-xs: inset 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-inner-sm: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --shadow-inner-md: inset 0 4px 6px -1px rgb(0 0 0 / 0.1);\n --ease-linear: linear;\n --ease-in: cubic-bezier(0.4, 0, 1, 1);\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);\n --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n --ease-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n --duration-instant: 0ms;\n --duration-fast: 150ms;\n --duration-normal: 250ms;\n --duration-slow: 350ms;\n --duration-slower: 500ms;\n --duration-slowest: 750ms;\n --space-0: 0;\n --space-px: 1px;\n --space-0\\.5: 0.125rem;\n --space-1: 0.25rem;\n --space-1\\.5: 0.375rem;\n --space-2: 0.5rem;\n --space-2\\.5: 0.625rem;\n --space-3: 0.75rem;\n --space-3\\.5: 0.875rem;\n --space-4: 1rem;\n --space-5: 1.25rem;\n --space-6: 1.5rem;\n --space-7: 1.75rem;\n --space-8: 2rem;\n --space-9: 2.25rem;\n --space-10: 2.5rem;\n --space-11: 2.75rem;\n --space-12: 3rem;\n --space-14: 3.5rem;\n --space-16: 4rem;\n --space-20: 5rem;\n --space-24: 6rem;\n --space-28: 7rem;\n --space-32: 8rem;\n --space-36: 9rem;\n --space-40: 10rem;\n --space-44: 11rem;\n --space-48: 12rem;\n --space-52: 13rem;\n --space-56: 14rem;\n --space-60: 15rem;\n --space-64: 16rem;\n --space-72: 18rem;\n --space-80: 20rem;\n --space-96: 24rem;\n --text-2xs: 0.625rem;\n --text-xs: 0.75rem;\n --text-sm: 0.875rem;\n --text-base: 1rem;\n --text-lg: 1.125rem;\n --text-xl: 1.25rem;\n --text-2xl: 1.5rem;\n --text-3xl: 1.875rem;\n --text-4xl: 2.25rem;\n --text-5xl: 3rem;\n --text-6xl: 3.75rem;\n --text-7xl: 4.5rem;\n --text-8xl: 6rem;\n --text-9xl: 8rem;\n --leading-none: 1;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-normal: 1.5;\n --leading-relaxed: 1.625;\n --leading-loose: 2;\n --tracking-tighter: -0.05em;\n --tracking-tight: -0.025em;\n --tracking-normal: 0;\n --tracking-wide: 0.025em;\n --tracking-wider: 0.05em;\n --tracking-widest: 0.1em;\n --font-thin: 100;\n --font-extralight: 200;\n --font-light: 300;\n --font-normal: 400;\n --font-medium: 500;\n --font-semibold: 600;\n --font-bold: 700;\n --font-extrabold: 800;\n --font-black: 900;\n --radius-none: 0;\n --radius-sm: 0.125rem;\n --radius-base: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-full: 9999px;\n --z-0: 0;\n --z-10: 10;\n --z-20: 20;\n --z-30: 30;\n --z-40: 40;\n --z-50: 50;\n --z-dropdown: 1000;\n --z-sticky: 1020;\n --z-fixed: 1030;\n --z-modal-backdrop: 1040;\n --z-modal: 1050;\n --z-popover: 1060;\n --z-tooltip: 1070;\n --z-notification: 1080;\n --blur-none: 0;\n --blur-sm: 4px;\n --blur-base: 8px;\n --blur-md: 12px;\n --blur-lg: 16px;\n --blur-xl: 24px;\n --blur-2xl: 40px;\n --blur-3xl: 64px;\n}\n.dark {\n --bg-base: var(--background);\n --bg-subtle: var(--gray-800);\n --bg-muted: var(--gray-700);\n --bg-emphasis: var(--gray-600);\n --surface-overlay: var(--gray-800);\n --surface-raised: var(--gray-800);\n --surface-sunken: var(--background);\n --text-secondary: var(--gray-400);\n --text-tertiary: var(--gray-500);\n --text-disabled: var(--gray-600);\n --state-hover: var(--gray-700);\n --state-active: var(--gray-600);\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);\n}\n.shadow-xs {\n box-shadow: var(--shadow-xs);\n}\n.shadow-sm {\n box-shadow: var(--shadow-sm);\n}\n.shadow-md {\n box-shadow: var(--shadow-md);\n}\n.shadow-lg {\n box-shadow: var(--shadow-lg);\n}\n.shadow-xl {\n box-shadow: var(--shadow-xl);\n}\n.shadow-2xl {\n box-shadow: var(--shadow-2xl);\n}\n.shadow-primary {\n box-shadow: var(--shadow-primary);\n}\n.shadow-success {\n box-shadow: var(--shadow-success);\n}\n.shadow-error {\n box-shadow: var(--shadow-error);\n}\n.shadow-warning {\n box-shadow: var(--shadow-warning);\n}\n.shadow-inner-xs {\n box-shadow: var(--shadow-inner-xs);\n}\n.shadow-inner-sm {\n box-shadow: var(--shadow-inner-sm);\n}\n.shadow-inner-md {\n box-shadow: var(--shadow-inner-md);\n}\n.animate-none {\n animation: none;\n}\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n.animate-ping {\n animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n.animate-bounce {\n animation: bounce 1s infinite;\n}\n.animate-fade-in {\n animation: fadeIn var(--duration-normal) var(--ease-out);\n}\n.animate-fade-out {\n animation: fadeOut var(--duration-normal) var(--ease-out);\n}\n.animate-slide-in {\n animation: slideIn var(--duration-normal) var(--ease-out);\n}\n.animate-scale-in {\n animation: scaleIn var(--duration-normal) var(--ease-out);\n}\n.transition-none {\n transition: none;\n}\n.transition-all {\n transition-property: all;\n}\n.transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke;\n}\n.transition-opacity {\n transition-property: opacity;\n}\n.transition-shadow {\n transition-property: box-shadow;\n}\n.transition-transform {\n transition-property: transform;\n}\n.duration-instant {\n transition-duration: var(--duration-instant);\n}\n.duration-fast {\n transition-duration: var(--duration-fast);\n}\n.duration-normal {\n transition-duration: var(--duration-normal);\n}\n.duration-slow {\n transition-duration: var(--duration-slow);\n}\n.duration-slower {\n transition-duration: var(--duration-slower);\n}\n.duration-slowest {\n transition-duration: var(--duration-slowest);\n}\n.ease-linear {\n transition-timing-function: var(--ease-linear);\n}\n.ease-in {\n transition-timing-function: var(--ease-in);\n}\n.ease-out {\n transition-timing-function: var(--ease-out);\n}\n.ease-in-out {\n transition-timing-function: var(--ease-in-out);\n}\n.ease-bounce {\n transition-timing-function: var(--ease-bounce);\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: .5;\n }\n}\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n 50% {\n transform: translateY(0);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n}\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes slideIn {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes scaleIn {\n from {\n transform: scale(0.95);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n.chart-animate-in {\n animation: chartFadeIn 0.5s ease-out;\n}\n.chart-point-pulse {\n animation: pointPulse 2s ease-in-out infinite;\n}\n.chart-gradient-shift {\n animation: gradientShift 3s ease-in-out infinite;\n}\n.recharts-tooltip-wrapper {\n outline: none !important;\n}\n.recharts-tooltip-cursor {\n fill: hsl(var(--muted) / 0.1);\n}\n.recharts-legend-item {\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.recharts-legend-item:hover {\n transform: translateY(-1px);\n}\n.recharts-line-curve,\n.recharts-area-curve {\n transition: all 0.3s ease;\n}\n.recharts-bar-rectangle {\n transition: all 0.2s ease;\n}\n.recharts-bar-rectangle:hover {\n filter: brightness(1.1);\n}\n.recharts-pie-sector {\n transition: all 0.2s ease;\n cursor: pointer;\n}\n.recharts-pie-sector:hover {\n filter: brightness(1.1);\n transform: scale(1.02);\n}\n.recharts-brush {\n fill: hsl(var(--primary) / 0.1);\n stroke: hsl(var(--primary) / 0.3);\n}\n.recharts-brush-slide {\n fill: hsl(var(--primary) / 0.2);\n fill-opacity: 0.5;\n}\n.recharts-cartesian-grid-horizontal line,\n.recharts-cartesian-grid-vertical line {\n stroke-dasharray: 3 3;\n opacity: 0.3;\n}\n.recharts-xAxis .recharts-cartesian-axis-tick-value,\n.recharts-yAxis .recharts-cartesian-axis-tick-value {\n fill: hsl(var(--muted-foreground));\n font-size: 11px;\n}\n.dark .recharts-tooltip-wrapper {\n filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));\n}\n.dark .recharts-cartesian-grid-horizontal line,\n.dark .recharts-cartesian-grid-vertical line {\n opacity: 0.2;\n}\n.sparkline-chart .recharts-surface {\n overflow: visible !important;\n}\n@keyframes chartSkeletonPulse {\n 0%, 100% {\n opacity: 0.5;\n transform: scaleY(0.8);\n }\n 50% {\n opacity: 1;\n transform: scaleY(1);\n }\n}\n@keyframes chartFadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n@keyframes pointPulse {\n 0%, 100% {\n transform: scale(1);\n opacity: 1;\n }\n 50% {\n transform: scale(1.2);\n opacity: 0.8;\n }\n}\n@keyframes gradientShift {\n 0%, 100% {\n stop-opacity: 0.8;\n }\n 50% {\n stop-opacity: 0.4;\n }\n}\n.chart-legend-item {\n position: relative;\n overflow: hidden;\n}\n.chart-legend-item::before {\n content: "";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);\n transition: left 0.5s ease;\n}\n.chart-legend-item:hover::before {\n left: 100%;\n}\n.chart-crosshair {\n stroke: hsl(var(--muted-foreground));\n stroke-width: 1;\n stroke-dasharray: 5 5;\n opacity: 0.5;\n}\n.chart-minimap {\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-md);\n background: hsl(var(--background) / 0.8);\n -webkit-backdrop-filter: blur(8px);\n backdrop-filter: blur(8px);\n}\n.chart-export-menu {\n animation: slideDown 0.2s ease-out;\n}\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.chart-zoom-indicator {\n background: hsl(var(--background) / 0.9);\n -webkit-backdrop-filter: blur(8px);\n backdrop-filter: blur(8px);\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius-full);\n padding: 0.25rem 0.5rem;\n font-size: 0.75rem;\n font-weight: 500;\n}\n.recharts-surface {\n will-change: transform;\n}\n.recharts-line,\n.recharts-area,\n.recharts-bar {\n will-change: opacity, transform;\n}\n@media (max-width: 640px) {\n .recharts-wrapper {\n font-size: 0.875rem;\n }\n .recharts-legend-wrapper {\n margin-top: 1rem !important;\n }\n}\n@media print {\n .chart-controls {\n display: none !important;\n }\n .recharts-tooltip-wrapper {\n display: none !important;\n }\n}\n');
1750
1750
  function cn(...inputs) {
1751
1751
  return twMerge(clsx(inputs));
1752
1752
  }
@@ -3791,7 +3791,7 @@ var me = t.forwardRef((r2, o) => {
3791
3791
  var e;
3792
3792
  return Array.from(((e = I.current) == null ? void 0 : e.querySelectorAll(ce)) || []);
3793
3793
  }
3794
- function X13(e) {
3794
+ function X14(e) {
3795
3795
  let s = V()[e];
3796
3796
  s && E.setState("value", s.getAttribute(T));
3797
3797
  }
@@ -3806,10 +3806,10 @@ var me = t.forwardRef((r2, o) => {
3806
3806
  s = e > 0 ? we(s, N) : De(s, N), i = s == null ? void 0 : s.querySelector(ce);
3807
3807
  i ? E.setState("value", i.getAttribute(T)) : Q(e);
3808
3808
  }
3809
- let oe = () => X13(V().length - 1), ie3 = (e) => {
3809
+ let oe = () => X14(V().length - 1), ie3 = (e) => {
3810
3810
  e.preventDefault(), e.metaKey ? oe() : e.altKey ? re(1) : Q(1);
3811
3811
  }, se = (e) => {
3812
- e.preventDefault(), e.metaKey ? X13(0) : e.altKey ? re(-1) : Q(-1);
3812
+ e.preventDefault(), e.metaKey ? X14(0) : e.altKey ? re(-1) : Q(-1);
3813
3813
  };
3814
3814
  return t.createElement(Primitive2.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
3815
3815
  var s;
@@ -3836,7 +3836,7 @@ var me = t.forwardRef((r2, o) => {
3836
3836
  break;
3837
3837
  }
3838
3838
  case "Home": {
3839
- e.preventDefault(), X13(0);
3839
+ e.preventDefault(), X14(0);
3840
3840
  break;
3841
3841
  }
3842
3842
  case "End": {
@@ -48941,18 +48941,161 @@ function Timeline({
48941
48941
  ] }) })
48942
48942
  ] });
48943
48943
  }
48944
- var DEFAULT_COLORS = [
48945
- "#3b82f6",
48946
- "#ef4444",
48947
- "#10b981",
48948
- "#f59e0b",
48949
- "#8b5cf6",
48950
- "#06b6d4",
48951
- "#f97316",
48952
- "#84cc16",
48953
- "#ec4899",
48954
- "#6366f1"
48955
- ];
48944
+ var COLOR_THEMES = {
48945
+ default: [
48946
+ "#3b82f6",
48947
+ "#ef4444",
48948
+ "#10b981",
48949
+ "#f59e0b",
48950
+ "#8b5cf6",
48951
+ "#06b6d4",
48952
+ "#f97316",
48953
+ "#84cc16",
48954
+ "#ec4899",
48955
+ "#6366f1"
48956
+ ],
48957
+ vibrant: [
48958
+ "#FF006E",
48959
+ "#FB5607",
48960
+ "#FFBE0B",
48961
+ "#8338EC",
48962
+ "#3A86FF",
48963
+ "#06FFB4",
48964
+ "#FF4365",
48965
+ "#00F5FF",
48966
+ "#FF124F",
48967
+ "#7209B7"
48968
+ ],
48969
+ pastel: [
48970
+ "#B5E2FA",
48971
+ "#F7AEF8",
48972
+ "#FDC5F5",
48973
+ "#F8B7D3",
48974
+ "#FAC9B8",
48975
+ "#C8E9A0",
48976
+ "#A7D2CB",
48977
+ "#F2D98D",
48978
+ "#E5B3BB",
48979
+ "#D6A2E8"
48980
+ ],
48981
+ dark: [
48982
+ "#1e3a5f",
48983
+ "#4b0e0e",
48984
+ "#0e4b2b",
48985
+ "#4b3c0e",
48986
+ "#2e0e4b",
48987
+ "#0e3c4b",
48988
+ "#4b2e0e",
48989
+ "#2b4b0e",
48990
+ "#4b0e3c",
48991
+ "#1e0e4b"
48992
+ ],
48993
+ neon: [
48994
+ "#39FF14",
48995
+ "#FF10F0",
48996
+ "#00FFFF",
48997
+ "#FE019A",
48998
+ "#FFFF00",
48999
+ "#FF073A",
49000
+ "#00FF00",
49001
+ "#FF0099",
49002
+ "#0FF0FC",
49003
+ "#FFE400"
49004
+ ]
49005
+ };
49006
+ var DEFAULT_COLORS = COLOR_THEMES.default;
49007
+ var CustomTooltip = ({ active, payload, label }) => {
49008
+ if (!active || !payload || !payload.length)
49009
+ return null;
49010
+ return /* @__PURE__ */ jsxs(
49011
+ motion.div,
49012
+ {
49013
+ initial: { opacity: 0, scale: 0.9 },
49014
+ animate: { opacity: 1, scale: 1 },
49015
+ exit: { opacity: 0, scale: 0.9 },
49016
+ className: "backdrop-blur-xl bg-background/80 dark:bg-gray-900/90 p-3 rounded-xl shadow-2xl border border-border/50 dark:border-gray-700/50",
49017
+ children: [
49018
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-2", children: label }),
49019
+ payload.map((entry, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
49020
+ /* @__PURE__ */ jsx(
49021
+ "div",
49022
+ {
49023
+ className: "w-3 h-3 rounded-full",
49024
+ style: { backgroundColor: entry.color }
49025
+ }
49026
+ ),
49027
+ /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
49028
+ entry.name,
49029
+ ":"
49030
+ ] }),
49031
+ /* @__PURE__ */ jsx("span", { className: "font-semibold", children: entry.value })
49032
+ ] }, index))
49033
+ ]
49034
+ }
49035
+ );
49036
+ };
49037
+ var CustomLegend = ({ payload, onItemClick }) => {
49038
+ return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4 mt-4", children: payload.map((entry, index) => /* @__PURE__ */ jsxs(
49039
+ motion.button,
49040
+ {
49041
+ whileHover: { scale: 1.05 },
49042
+ whileTap: { scale: 0.95 },
49043
+ onClick: () => onItemClick && onItemClick(entry),
49044
+ className: cn(
49045
+ "flex items-center gap-2 px-3 py-1.5 rounded-lg transition-all",
49046
+ "hover:bg-accent/10 dark:hover:bg-gray-800/50",
49047
+ entry.inactive && "opacity-50"
49048
+ ),
49049
+ children: [
49050
+ /* @__PURE__ */ jsx(
49051
+ motion.div,
49052
+ {
49053
+ animate: {
49054
+ scale: entry.inactive ? 0.8 : 1,
49055
+ opacity: entry.inactive ? 0.5 : 1
49056
+ },
49057
+ className: "w-3 h-3 rounded-full",
49058
+ style: { backgroundColor: entry.color }
49059
+ }
49060
+ ),
49061
+ /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: entry.value })
49062
+ ]
49063
+ },
49064
+ `item-${index}`
49065
+ )) });
49066
+ };
49067
+ var SparklinePreview = ({ data, dataKey, color }) => {
49068
+ const values = data.map((d) => d[dataKey]);
49069
+ const min = Math.min(...values);
49070
+ const max = Math.max(...values);
49071
+ const range = max - min;
49072
+ return /* @__PURE__ */ jsx("svg", { width: "60", height: "20", className: "ml-2", children: /* @__PURE__ */ jsx(
49073
+ "polyline",
49074
+ {
49075
+ fill: "none",
49076
+ stroke: color,
49077
+ strokeWidth: "2",
49078
+ points: values.map(
49079
+ (v, i) => `${i / (values.length - 1) * 60},${20 - (v - min) / range * 20}`
49080
+ ).join(" ")
49081
+ }
49082
+ ) });
49083
+ };
49084
+ var ChartSkeleton = ({ height }) => /* @__PURE__ */ jsx("div", { className: "w-full", style: { height }, children: /* @__PURE__ */ jsx("div", { className: "flex items-end justify-center h-full gap-2 px-8", children: [...Array(8)].map((_, i) => /* @__PURE__ */ jsx(
49085
+ motion.div,
49086
+ {
49087
+ initial: { height: 0 },
49088
+ animate: { height: `${Math.random() * 80 + 20}%` },
49089
+ transition: {
49090
+ duration: 1.5,
49091
+ delay: i * 0.1,
49092
+ repeat: Infinity,
49093
+ repeatType: "reverse"
49094
+ },
49095
+ className: "w-full bg-gradient-to-t from-primary/20 to-primary/5 rounded-t-lg"
49096
+ },
49097
+ i
49098
+ )) }) });
48956
49099
  function AdvancedChart({
48957
49100
  data,
48958
49101
  type,
@@ -48980,10 +49123,31 @@ function AdvancedChart({
48980
49123
  loading = false,
48981
49124
  error = null,
48982
49125
  animated = true,
48983
- responsive = true
49126
+ responsive = true,
49127
+ showCrosshair = false,
49128
+ enableZoom = false,
49129
+ enablePan = false,
49130
+ showMiniMap = false,
49131
+ darkMode = false,
49132
+ gradientColors = true,
49133
+ interactiveLegend = true,
49134
+ showDataLabels = false,
49135
+ sparklineMode = false,
49136
+ animationDuration = 1500,
49137
+ theme = "default"
48984
49138
  }) {
48985
49139
  const [isFullscreen, setIsFullscreen] = t__default.useState(false);
49140
+ const [showSettings, setShowSettings] = t__default.useState(false);
49141
+ const [zoomLevel, setZoomLevel] = t__default.useState(100);
49142
+ const [selectedTheme, setSelectedTheme] = t__default.useState(theme);
49143
+ const [hoveredDataPoint, setHoveredDataPoint] = t__default.useState(null);
49144
+ const [hiddenSeries, setHiddenSeries] = t__default.useState(/* @__PURE__ */ new Set());
48986
49145
  const chartRef = t__default.useRef(null);
49146
+ const containerRef = t__default.useRef(null);
49147
+ const themeColors = t__default.useMemo(() => {
49148
+ return COLOR_THEMES[selectedTheme] || DEFAULT_COLORS;
49149
+ }, [selectedTheme]);
49150
+ const gradientId = t__default.useId();
48987
49151
  const trend = t__default.useMemo(() => {
48988
49152
  if (!data.length || !series.length)
48989
49153
  return null;
@@ -48999,45 +49163,147 @@ function AdvancedChart({
48999
49163
  percentage: Math.abs(change).toFixed(1)
49000
49164
  };
49001
49165
  }, [data, series]);
49166
+ const toggleSeriesVisibility = (dataKey) => {
49167
+ setHiddenSeries((prev) => {
49168
+ const newSet = new Set(prev);
49169
+ if (newSet.has(dataKey)) {
49170
+ newSet.delete(dataKey);
49171
+ } else {
49172
+ newSet.add(dataKey);
49173
+ }
49174
+ return newSet;
49175
+ });
49176
+ };
49177
+ const handleLegendItemClick = (entry) => {
49178
+ if (interactiveLegend) {
49179
+ toggleSeriesVisibility(entry.dataKey);
49180
+ }
49181
+ };
49002
49182
  const handleExport = (format) => {
49003
49183
  if (onExport) {
49004
49184
  onExport(format);
49005
49185
  }
49006
49186
  };
49187
+ const handleZoom = (direction) => {
49188
+ setZoomLevel((prev) => {
49189
+ if (direction === "in")
49190
+ return Math.min(prev + 10, 200);
49191
+ return Math.max(prev - 10, 50);
49192
+ });
49193
+ };
49194
+ const renderGradientDefs = () => /* @__PURE__ */ jsx("defs", { children: series.map((s, index) => {
49195
+ const color = s.color || themeColors[index % themeColors.length];
49196
+ return /* @__PURE__ */ jsxs(
49197
+ "linearGradient",
49198
+ {
49199
+ id: `gradient-${gradientId}-${s.dataKey}`,
49200
+ x1: "0",
49201
+ y1: "0",
49202
+ x2: "0",
49203
+ y2: "1",
49204
+ children: [
49205
+ /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
49206
+ /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })
49207
+ ]
49208
+ },
49209
+ `gradient-${s.dataKey}`
49210
+ );
49211
+ }) });
49007
49212
  const renderChart = () => {
49008
49213
  const commonProps = {
49009
49214
  data,
49010
49215
  width: typeof width === "string" ? void 0 : width,
49011
- height,
49012
- margin: { top: 20, right: 30, left: 20, bottom: 20 }
49013
- // onClick: onDataPointClick,
49216
+ height: sparklineMode ? 60 : height,
49217
+ margin: sparklineMode ? { top: 5, right: 5, left: 5, bottom: 5 } : { top: 20, right: 30, left: 20, bottom: showBrush ? 60 : 20 }
49218
+ };
49219
+ const visibleSeries = series.filter((s) => !s.hide && !hiddenSeries.has(s.dataKey));
49220
+ const axisStyle = {
49221
+ fontSize: 12,
49222
+ fill: darkMode ? "#9ca3af" : "#6b7280"
49223
+ };
49224
+ const gridStyle = {
49225
+ stroke: darkMode ? "#374151" : "#e5e7eb",
49226
+ strokeDasharray: "3 3",
49227
+ opacity: 0.5
49014
49228
  };
49015
- const visibleSeries = series.filter((s) => !s.hide);
49016
49229
  switch (type) {
49017
49230
  case "line":
49018
49231
  return /* @__PURE__ */ jsxs(LineChart, { ...commonProps, children: [
49019
- showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
49020
- /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey }),
49021
- /* @__PURE__ */ jsx(YAxis, {}),
49022
- showTooltip && /* @__PURE__ */ jsx(Tooltip, {}),
49023
- showLegend && /* @__PURE__ */ jsx(Legend, {}),
49024
- visibleSeries.map((s, index) => /* @__PURE__ */ jsx(
49025
- Line,
49232
+ gradientColors && renderGradientDefs(),
49233
+ showGrid && !sparklineMode && /* @__PURE__ */ jsx(CartesianGrid, { ...gridStyle }),
49234
+ !sparklineMode && /* @__PURE__ */ jsxs(Fragment, { children: [
49235
+ /* @__PURE__ */ jsx(
49236
+ XAxis,
49237
+ {
49238
+ dataKey: xAxisKey,
49239
+ ...axisStyle,
49240
+ tick: { fontSize: 11 },
49241
+ axisLine: { stroke: darkMode ? "#4b5563" : "#d1d5db" }
49242
+ }
49243
+ ),
49244
+ /* @__PURE__ */ jsx(
49245
+ YAxis,
49246
+ {
49247
+ ...axisStyle,
49248
+ tick: { fontSize: 11 },
49249
+ axisLine: { stroke: darkMode ? "#4b5563" : "#d1d5db" }
49250
+ }
49251
+ )
49252
+ ] }),
49253
+ showTooltip && !sparklineMode && /* @__PURE__ */ jsx(
49254
+ Tooltip,
49026
49255
  {
49027
- type: s.type || "monotone",
49028
- dataKey: s.dataKey,
49029
- stroke: s.color || colors[index % colors.length],
49030
- strokeWidth: s.strokeWidth || 2,
49031
- name: s.name,
49032
- animationDuration: animated ? 1e3 : 0
49033
- },
49034
- s.dataKey
49035
- )),
49256
+ cursor: showCrosshair ? {
49257
+ stroke: darkMode ? "#6b7280" : "#9ca3af",
49258
+ strokeWidth: 1,
49259
+ strokeDasharray: "5 5"
49260
+ } : false
49261
+ }
49262
+ ),
49263
+ showLegend && !sparklineMode && /* @__PURE__ */ jsx(
49264
+ Legend,
49265
+ {
49266
+ content: (props) => {
49267
+ const CustomLegendComponent = customLegend;
49268
+ return CustomLegendComponent ? /* @__PURE__ */ jsx(CustomLegendComponent, { ...props }) : /* @__PURE__ */ jsx(CustomLegend, { ...props, onItemClick: handleLegendItemClick });
49269
+ }
49270
+ }
49271
+ ),
49272
+ visibleSeries.map((s, index) => {
49273
+ const color = s.color || themeColors[index % themeColors.length];
49274
+ return /* @__PURE__ */ jsx(
49275
+ Line,
49276
+ {
49277
+ type: s.type || "monotone",
49278
+ dataKey: s.dataKey,
49279
+ stroke: color,
49280
+ strokeWidth: sparklineMode ? 1.5 : s.strokeWidth || 2,
49281
+ strokeDasharray: s.strokeDasharray,
49282
+ name: s.name,
49283
+ dot: sparklineMode ? false : s.dot !== void 0 ? s.dot : {
49284
+ r: 3,
49285
+ strokeWidth: 2,
49286
+ fill: darkMode ? "#1f2937" : "#ffffff"
49287
+ },
49288
+ activeDot: sparklineMode ? false : s.activeDot !== void 0 ? s.activeDot : {
49289
+ r: 5,
49290
+ strokeWidth: 2,
49291
+ fill: color,
49292
+ stroke: darkMode ? "#1f2937" : "#ffffff",
49293
+ className: "animate-pulse"
49294
+ },
49295
+ animationDuration: animated ? animationDuration : 0,
49296
+ animationBegin: index * 100,
49297
+ label: showDataLabels ? s.label : false
49298
+ },
49299
+ s.dataKey
49300
+ );
49301
+ }),
49036
49302
  showReference && referenceLines.map((ref, index) => /* @__PURE__ */ jsx(
49037
49303
  ReferenceLine,
49038
49304
  {
49039
49305
  y: ref.value,
49040
- stroke: ref.color || "#666",
49306
+ stroke: ref.color || (darkMode ? "#6b7280" : "#9ca3af"),
49041
49307
  strokeDasharray: "5 5",
49042
49308
  label: ref.label
49043
49309
  },
@@ -49048,79 +49314,191 @@ function AdvancedChart({
49048
49314
  {
49049
49315
  x1: ref.x1,
49050
49316
  x2: ref.x2,
49051
- fill: ref.color || "#f0f0f0",
49317
+ fill: ref.color || (darkMode ? "#374151" : "#f3f4f6"),
49052
49318
  fillOpacity: 0.3,
49053
49319
  label: ref.label
49054
49320
  },
49055
49321
  index
49056
49322
  )),
49057
- showBrush && /* @__PURE__ */ jsx(Brush, {})
49323
+ showBrush && !sparklineMode && /* @__PURE__ */ jsx(
49324
+ Brush,
49325
+ {
49326
+ height: 30,
49327
+ fill: darkMode ? "#1f2937" : "#f9fafb",
49328
+ stroke: darkMode ? "#374151" : "#e5e7eb"
49329
+ }
49330
+ )
49058
49331
  ] });
49059
49332
  case "bar":
49060
49333
  return /* @__PURE__ */ jsxs(BarChart, { ...commonProps, children: [
49061
- showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
49062
- /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey }),
49063
- /* @__PURE__ */ jsx(YAxis, {}),
49064
- showTooltip && /* @__PURE__ */ jsx(Tooltip, {}),
49065
- showLegend && /* @__PURE__ */ jsx(Legend, {}),
49066
- visibleSeries.map((s, index) => /* @__PURE__ */ jsx(
49067
- Bar,
49334
+ gradientColors && renderGradientDefs(),
49335
+ showGrid && /* @__PURE__ */ jsx(CartesianGrid, { ...gridStyle }),
49336
+ /* @__PURE__ */ jsx(
49337
+ XAxis,
49068
49338
  {
49069
- dataKey: s.dataKey,
49070
- fill: s.color || colors[index % colors.length],
49071
- name: s.name,
49072
- animationDuration: animated ? 1e3 : 0
49073
- },
49074
- s.dataKey
49075
- )),
49339
+ dataKey: xAxisKey,
49340
+ ...axisStyle,
49341
+ tick: { fontSize: 11 },
49342
+ axisLine: { stroke: darkMode ? "#4b5563" : "#d1d5db" }
49343
+ }
49344
+ ),
49345
+ /* @__PURE__ */ jsx(
49346
+ YAxis,
49347
+ {
49348
+ ...axisStyle,
49349
+ tick: { fontSize: 11 },
49350
+ axisLine: { stroke: darkMode ? "#4b5563" : "#d1d5db" }
49351
+ }
49352
+ ),
49353
+ showTooltip && /* @__PURE__ */ jsx(
49354
+ Tooltip,
49355
+ {
49356
+ cursor: { fill: darkMode ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)" }
49357
+ }
49358
+ ),
49359
+ showLegend && /* @__PURE__ */ jsx(
49360
+ Legend,
49361
+ {
49362
+ content: (props) => {
49363
+ const CustomLegendComponent = customLegend;
49364
+ return CustomLegendComponent ? /* @__PURE__ */ jsx(CustomLegendComponent, { ...props }) : /* @__PURE__ */ jsx(CustomLegend, { ...props, onItemClick: handleLegendItemClick });
49365
+ }
49366
+ }
49367
+ ),
49368
+ visibleSeries.map((s, index) => {
49369
+ const color = s.color || themeColors[index % themeColors.length];
49370
+ return /* @__PURE__ */ jsx(
49371
+ Bar,
49372
+ {
49373
+ dataKey: s.dataKey,
49374
+ fill: gradientColors ? `url(#gradient-${gradientId}-${s.dataKey})` : color,
49375
+ name: s.name,
49376
+ animationDuration: animated ? animationDuration : 0,
49377
+ animationBegin: index * 100,
49378
+ radius: [4, 4, 0, 0],
49379
+ label: showDataLabels ? s.label : false,
49380
+ stackId: s.stackId,
49381
+ onMouseEnter: () => setHoveredDataPoint(s.dataKey),
49382
+ onMouseLeave: () => setHoveredDataPoint(null),
49383
+ className: "hover:opacity-80 transition-opacity cursor-pointer"
49384
+ },
49385
+ s.dataKey
49386
+ );
49387
+ }),
49076
49388
  showReference && referenceLines.map((ref, index) => /* @__PURE__ */ jsx(
49077
49389
  ReferenceLine,
49078
49390
  {
49079
49391
  y: ref.value,
49080
- stroke: ref.color || "#666",
49392
+ stroke: ref.color || (darkMode ? "#6b7280" : "#9ca3af"),
49081
49393
  strokeDasharray: "5 5",
49082
49394
  label: ref.label
49083
49395
  },
49084
49396
  index
49085
49397
  )),
49086
- showBrush && /* @__PURE__ */ jsx(Brush, {})
49398
+ showBrush && /* @__PURE__ */ jsx(
49399
+ Brush,
49400
+ {
49401
+ height: 30,
49402
+ fill: darkMode ? "#1f2937" : "#f9fafb",
49403
+ stroke: darkMode ? "#374151" : "#e5e7eb"
49404
+ }
49405
+ )
49087
49406
  ] });
49088
49407
  case "area":
49089
49408
  return /* @__PURE__ */ jsxs(AreaChart, { ...commonProps, children: [
49090
- showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
49091
- /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey }),
49092
- /* @__PURE__ */ jsx(YAxis, {}),
49409
+ gradientColors && renderGradientDefs(),
49410
+ showGrid && /* @__PURE__ */ jsx(CartesianGrid, { ...gridStyle }),
49411
+ /* @__PURE__ */ jsx(
49412
+ XAxis,
49413
+ {
49414
+ dataKey: xAxisKey,
49415
+ ...axisStyle,
49416
+ tick: { fontSize: 11 },
49417
+ axisLine: { stroke: darkMode ? "#4b5563" : "#d1d5db" }
49418
+ }
49419
+ ),
49420
+ /* @__PURE__ */ jsx(
49421
+ YAxis,
49422
+ {
49423
+ ...axisStyle,
49424
+ tick: { fontSize: 11 },
49425
+ axisLine: { stroke: darkMode ? "#4b5563" : "#d1d5db" }
49426
+ }
49427
+ ),
49093
49428
  showTooltip && /* @__PURE__ */ jsx(Tooltip, {}),
49094
- showLegend && /* @__PURE__ */ jsx(Legend, {}),
49095
- visibleSeries.map((s, index) => /* @__PURE__ */ jsx(
49096
- Area,
49429
+ showLegend && /* @__PURE__ */ jsx(
49430
+ Legend,
49097
49431
  {
49098
- type: s.type || "monotone",
49099
- dataKey: s.dataKey,
49100
- stroke: s.color || colors[index % colors.length],
49101
- fill: s.color || colors[index % colors.length],
49102
- fillOpacity: s.fillOpacity || 0.3,
49103
- name: s.name,
49104
- animationDuration: animated ? 1e3 : 0
49105
- },
49106
- s.dataKey
49107
- )),
49432
+ content: (props) => {
49433
+ const CustomLegendComponent = customLegend;
49434
+ return CustomLegendComponent ? /* @__PURE__ */ jsx(CustomLegendComponent, { ...props }) : /* @__PURE__ */ jsx(CustomLegend, { ...props, onItemClick: handleLegendItemClick });
49435
+ }
49436
+ }
49437
+ ),
49438
+ visibleSeries.map((s, index) => {
49439
+ const color = s.color || themeColors[index % themeColors.length];
49440
+ return /* @__PURE__ */ jsx(
49441
+ Area,
49442
+ {
49443
+ type: s.type || "monotone",
49444
+ dataKey: s.dataKey,
49445
+ stroke: color,
49446
+ strokeWidth: 2,
49447
+ fill: gradientColors ? `url(#gradient-${gradientId}-${s.dataKey})` : color,
49448
+ fillOpacity: s.fillOpacity || 0.6,
49449
+ name: s.name,
49450
+ animationDuration: animated ? animationDuration : 0,
49451
+ animationBegin: index * 100,
49452
+ dot: s.dot !== void 0 ? s.dot : false,
49453
+ activeDot: s.activeDot !== void 0 ? s.activeDot : {
49454
+ r: 4,
49455
+ strokeWidth: 2,
49456
+ fill: color,
49457
+ stroke: darkMode ? "#1f2937" : "#ffffff",
49458
+ className: "animate-pulse"
49459
+ },
49460
+ label: showDataLabels ? s.label : false,
49461
+ stackId: s.stackId
49462
+ },
49463
+ s.dataKey
49464
+ );
49465
+ }),
49108
49466
  showReference && referenceLines.map((ref, index) => /* @__PURE__ */ jsx(
49109
49467
  ReferenceLine,
49110
49468
  {
49111
49469
  y: ref.value,
49112
- stroke: ref.color || "#666",
49470
+ stroke: ref.color || (darkMode ? "#6b7280" : "#9ca3af"),
49113
49471
  strokeDasharray: "5 5",
49114
49472
  label: ref.label
49115
49473
  },
49116
49474
  index
49117
49475
  )),
49118
- showBrush && /* @__PURE__ */ jsx(Brush, {})
49476
+ showBrush && /* @__PURE__ */ jsx(
49477
+ Brush,
49478
+ {
49479
+ height: 30,
49480
+ fill: darkMode ? "#1f2937" : "#f9fafb",
49481
+ stroke: darkMode ? "#374151" : "#e5e7eb"
49482
+ }
49483
+ )
49119
49484
  ] });
49120
49485
  case "pie":
49121
49486
  return /* @__PURE__ */ jsxs(PieChart, { ...commonProps, children: [
49122
- showTooltip && /* @__PURE__ */ jsx(Tooltip, {}),
49123
- showLegend && /* @__PURE__ */ jsx(Legend, {}),
49487
+ showTooltip && /* @__PURE__ */ jsx(
49488
+ Tooltip,
49489
+ {
49490
+ content: customTooltip ? customTooltip : CustomTooltip
49491
+ }
49492
+ ),
49493
+ showLegend && /* @__PURE__ */ jsx(
49494
+ Legend,
49495
+ {
49496
+ content: (props) => {
49497
+ const CustomLegendComponent = customLegend;
49498
+ return CustomLegendComponent ? /* @__PURE__ */ jsx(CustomLegendComponent, { ...props }) : /* @__PURE__ */ jsx(CustomLegend, { ...props, onItemClick: handleLegendItemClick });
49499
+ }
49500
+ }
49501
+ ),
49124
49502
  /* @__PURE__ */ jsx(
49125
49503
  Pie,
49126
49504
  {
@@ -49129,80 +49507,496 @@ function AdvancedChart({
49129
49507
  nameKey: xAxisKey,
49130
49508
  cx: "50%",
49131
49509
  cy: "50%",
49510
+ innerRadius: type === "pie" ? 0 : "40%",
49132
49511
  outerRadius: Math.min(height, typeof width === "number" ? width : 400) / 3,
49133
- animationDuration: animated ? 1e3 : 0,
49134
- children: data.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
49512
+ animationDuration: animated ? animationDuration : 0,
49513
+ animationBegin: 0,
49514
+ label: showDataLabels ? {
49515
+ fill: darkMode ? "#e5e7eb" : "#374151",
49516
+ fontSize: 12
49517
+ } : false,
49518
+ labelLine: showDataLabels ? {
49519
+ stroke: darkMode ? "#6b7280" : "#9ca3af",
49520
+ strokeWidth: 1
49521
+ } : false,
49522
+ children: data.map((entry, index) => {
49523
+ const color = themeColors[index % themeColors.length];
49524
+ return /* @__PURE__ */ jsx(
49525
+ Cell,
49526
+ {
49527
+ fill: color,
49528
+ className: "hover:opacity-80 transition-opacity cursor-pointer",
49529
+ onMouseEnter: () => setHoveredDataPoint(entry),
49530
+ onMouseLeave: () => setHoveredDataPoint(null)
49531
+ },
49532
+ `cell-${index}`
49533
+ );
49534
+ })
49135
49535
  }
49136
49536
  )
49137
49537
  ] });
49138
49538
  case "scatter":
49139
49539
  return /* @__PURE__ */ jsxs(ScatterChart, { ...commonProps, children: [
49140
- showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
49141
- /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey }),
49142
- /* @__PURE__ */ jsx(YAxis, { dataKey: yAxisKey }),
49540
+ showGrid && /* @__PURE__ */ jsx(CartesianGrid, { ...gridStyle }),
49541
+ /* @__PURE__ */ jsx(
49542
+ XAxis,
49543
+ {
49544
+ dataKey: xAxisKey,
49545
+ ...axisStyle,
49546
+ tick: { fontSize: 11 },
49547
+ axisLine: { stroke: darkMode ? "#4b5563" : "#d1d5db" }
49548
+ }
49549
+ ),
49550
+ /* @__PURE__ */ jsx(
49551
+ YAxis,
49552
+ {
49553
+ dataKey: yAxisKey,
49554
+ ...axisStyle,
49555
+ tick: { fontSize: 11 },
49556
+ axisLine: { stroke: darkMode ? "#4b5563" : "#d1d5db" }
49557
+ }
49558
+ ),
49143
49559
  showTooltip && /* @__PURE__ */ jsx(Tooltip, {}),
49144
- showLegend && /* @__PURE__ */ jsx(Legend, {}),
49145
- visibleSeries.map((s, index) => /* @__PURE__ */ jsx(
49146
- Scatter,
49560
+ showLegend && /* @__PURE__ */ jsx(
49561
+ Legend,
49147
49562
  {
49148
- dataKey: s.dataKey,
49149
- fill: s.color || colors[index % colors.length],
49150
- name: s.name,
49151
- animationDuration: animated ? 1e3 : 0
49152
- },
49153
- s.dataKey
49154
- ))
49563
+ content: (props) => {
49564
+ const CustomLegendComponent = customLegend;
49565
+ return CustomLegendComponent ? /* @__PURE__ */ jsx(CustomLegendComponent, { ...props }) : /* @__PURE__ */ jsx(CustomLegend, { ...props, onItemClick: handleLegendItemClick });
49566
+ }
49567
+ }
49568
+ ),
49569
+ visibleSeries.map((s, index) => {
49570
+ const color = s.color || themeColors[index % themeColors.length];
49571
+ return /* @__PURE__ */ jsx(
49572
+ Scatter,
49573
+ {
49574
+ data,
49575
+ fill: color,
49576
+ name: s.name,
49577
+ animationDuration: animated ? animationDuration : 0,
49578
+ animationBegin: index * 100,
49579
+ shape: (props) => {
49580
+ const isHovered = hoveredDataPoint === props.payload;
49581
+ return /* @__PURE__ */ jsx(
49582
+ "circle",
49583
+ {
49584
+ ...props,
49585
+ r: isHovered ? 6 : 4,
49586
+ className: "transition-all duration-200 hover:r-6",
49587
+ onMouseEnter: () => setHoveredDataPoint(props.payload),
49588
+ onMouseLeave: () => setHoveredDataPoint(null)
49589
+ }
49590
+ );
49591
+ }
49592
+ },
49593
+ s.dataKey
49594
+ );
49595
+ })
49596
+ ] });
49597
+ case "radar":
49598
+ return /* @__PURE__ */ jsxs(RadarChart, { ...commonProps, children: [
49599
+ /* @__PURE__ */ jsx(
49600
+ PolarGrid,
49601
+ {
49602
+ stroke: darkMode ? "#374151" : "#e5e7eb",
49603
+ strokeDasharray: "3 3"
49604
+ }
49605
+ ),
49606
+ /* @__PURE__ */ jsx(
49607
+ PolarAngleAxis,
49608
+ {
49609
+ dataKey: xAxisKey,
49610
+ ...axisStyle,
49611
+ tick: { fontSize: 10 }
49612
+ }
49613
+ ),
49614
+ /* @__PURE__ */ jsx(
49615
+ PolarRadiusAxis,
49616
+ {
49617
+ ...axisStyle,
49618
+ tick: { fontSize: 10 },
49619
+ axisLine: false
49620
+ }
49621
+ ),
49622
+ showTooltip && /* @__PURE__ */ jsx(
49623
+ Tooltip,
49624
+ {
49625
+ content: customTooltip ? customTooltip : CustomTooltip
49626
+ }
49627
+ ),
49628
+ showLegend && /* @__PURE__ */ jsx(
49629
+ Legend,
49630
+ {
49631
+ content: (props) => {
49632
+ const CustomLegendComponent = customLegend;
49633
+ return CustomLegendComponent ? /* @__PURE__ */ jsx(CustomLegendComponent, { ...props }) : /* @__PURE__ */ jsx(CustomLegend, { ...props, onItemClick: handleLegendItemClick });
49634
+ }
49635
+ }
49636
+ ),
49637
+ visibleSeries.map((s, index) => {
49638
+ const color = s.color || themeColors[index % themeColors.length];
49639
+ return /* @__PURE__ */ jsx(
49640
+ Radar,
49641
+ {
49642
+ dataKey: s.dataKey,
49643
+ stroke: color,
49644
+ fill: color,
49645
+ fillOpacity: 0.3,
49646
+ name: s.name,
49647
+ animationDuration: animated ? animationDuration : 0,
49648
+ animationBegin: index * 100
49649
+ },
49650
+ s.dataKey
49651
+ );
49652
+ })
49155
49653
  ] });
49654
+ case "radialBar":
49655
+ return /* @__PURE__ */ jsxs(
49656
+ RadialBarChart,
49657
+ {
49658
+ ...commonProps,
49659
+ innerRadius: "10%",
49660
+ outerRadius: "90%",
49661
+ children: [
49662
+ showTooltip && /* @__PURE__ */ jsx(
49663
+ Tooltip,
49664
+ {
49665
+ content: customTooltip ? customTooltip : CustomTooltip
49666
+ }
49667
+ ),
49668
+ showLegend && /* @__PURE__ */ jsx(
49669
+ Legend,
49670
+ {
49671
+ content: (props) => {
49672
+ const CustomLegendComponent = customLegend;
49673
+ return CustomLegendComponent ? /* @__PURE__ */ jsx(CustomLegendComponent, { ...props }) : /* @__PURE__ */ jsx(CustomLegend, { ...props, onItemClick: handleLegendItemClick });
49674
+ }
49675
+ }
49676
+ ),
49677
+ /* @__PURE__ */ jsx(
49678
+ RadialBar,
49679
+ {
49680
+ dataKey: series[0]?.dataKey || "value",
49681
+ cornerRadius: 10,
49682
+ fill: themeColors[0],
49683
+ animationDuration: animated ? animationDuration : 0,
49684
+ label: showDataLabels ? {
49685
+ fill: darkMode ? "#e5e7eb" : "#374151",
49686
+ position: "center"
49687
+ } : false
49688
+ }
49689
+ )
49690
+ ]
49691
+ }
49692
+ );
49156
49693
  default:
49157
49694
  return /* @__PURE__ */ jsx("div", { children: "Unsupported chart type" });
49158
49695
  }
49159
49696
  };
49160
49697
  if (loading) {
49161
- return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "flex items-center justify-center", style: { height }, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
49162
- /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 animate-spin" }),
49163
- /* @__PURE__ */ jsx("span", { children: "Loading chart..." })
49164
- ] }) }) });
49698
+ return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full overflow-hidden", className), children: [
49699
+ /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
49700
+ /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
49701
+ /* @__PURE__ */ jsx(MoonUISkeletonPro, { className: "h-4 w-32" }),
49702
+ /* @__PURE__ */ jsx(MoonUISkeletonPro, { className: "h-3 w-48" })
49703
+ ] }),
49704
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
49705
+ /* @__PURE__ */ jsx(MoonUISkeletonPro, { className: "h-8 w-8 rounded" }),
49706
+ /* @__PURE__ */ jsx(MoonUISkeletonPro, { className: "h-8 w-8 rounded" }),
49707
+ /* @__PURE__ */ jsx(MoonUISkeletonPro, { className: "h-8 w-8 rounded" })
49708
+ ] })
49709
+ ] }),
49710
+ /* @__PURE__ */ jsx(MoonUICardContentPro, { children: /* @__PURE__ */ jsx(ChartSkeleton, { height }) })
49711
+ ] });
49165
49712
  }
49166
49713
  if (error) {
49167
- return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "flex items-center justify-center", style: { height }, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
49168
- /* @__PURE__ */ jsx("p", { className: "text-destructive mb-2", children: error }),
49169
- onRefresh && /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", onClick: onRefresh, children: [
49170
- /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
49171
- "Retry"
49172
- ] })
49173
- ] }) }) });
49714
+ return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "flex items-center justify-center", style: { height }, children: /* @__PURE__ */ jsxs(
49715
+ motion.div,
49716
+ {
49717
+ initial: { opacity: 0, scale: 0.9 },
49718
+ animate: { opacity: 1, scale: 1 },
49719
+ className: "text-center",
49720
+ children: [
49721
+ /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-full bg-destructive/10 dark:bg-destructive/20 flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ jsx(X, { className: "w-6 h-6 text-destructive" }) }),
49722
+ /* @__PURE__ */ jsx("p", { className: "text-destructive mb-4 font-medium", children: error }),
49723
+ onRefresh && /* @__PURE__ */ jsxs(
49724
+ MoonUIButtonPro,
49725
+ {
49726
+ variant: "outline",
49727
+ onClick: onRefresh,
49728
+ className: "group",
49729
+ children: [
49730
+ /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4 group-hover:rotate-180 transition-transform duration-500" }),
49731
+ "Retry"
49732
+ ]
49733
+ }
49734
+ )
49735
+ ]
49736
+ }
49737
+ ) }) });
49174
49738
  }
49175
- return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full", className), ref: chartRef, children: [
49176
- /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
49177
- /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
49178
- /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "text-base font-medium", children: [
49179
- title,
49180
- trend && /* @__PURE__ */ jsxs("span", { className: "ml-2 inline-flex items-center", children: [
49181
- trend.direction === "up" && /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-green-500" }),
49182
- trend.direction === "down" && /* @__PURE__ */ jsx(TrendingDown, { className: "h-4 w-4 text-red-500" }),
49183
- trend.direction === "neutral" && /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4 text-gray-500" }),
49184
- /* @__PURE__ */ jsxs("span", { className: cn(
49185
- "ml-1 text-sm",
49186
- trend.direction === "up" && "text-green-500",
49187
- trend.direction === "down" && "text-red-500",
49188
- trend.direction === "neutral" && "text-gray-500"
49189
- ), children: [
49190
- trend.percentage,
49191
- "%"
49192
- ] })
49193
- ] })
49739
+ return /* @__PURE__ */ jsx(
49740
+ motion.div,
49741
+ {
49742
+ ref: containerRef,
49743
+ className: cn(
49744
+ "relative",
49745
+ isFullscreen && "fixed inset-0 z-50 bg-background p-4"
49746
+ ),
49747
+ initial: { opacity: 0, y: 20 },
49748
+ animate: { opacity: 1, y: 0 },
49749
+ transition: { duration: 0.5 },
49750
+ children: /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn(
49751
+ "w-full overflow-hidden transition-all duration-300",
49752
+ darkMode && "dark",
49753
+ isFullscreen && "h-full",
49754
+ className
49755
+ ), ref: chartRef, children: [
49756
+ /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
49757
+ /* @__PURE__ */ jsxs(
49758
+ motion.div,
49759
+ {
49760
+ className: "space-y-1",
49761
+ initial: { opacity: 0, x: -20 },
49762
+ animate: { opacity: 1, x: 0 },
49763
+ transition: { delay: 0.1 },
49764
+ children: [
49765
+ /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "text-base font-medium flex items-center gap-2", children: [
49766
+ title,
49767
+ trend && /* @__PURE__ */ jsxs(
49768
+ motion.span,
49769
+ {
49770
+ className: "inline-flex items-center",
49771
+ initial: { scale: 0 },
49772
+ animate: { scale: 1 },
49773
+ transition: { type: "spring", delay: 0.3 },
49774
+ children: [
49775
+ trend.direction === "up" && /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-green-500 dark:text-green-400" }),
49776
+ trend.direction === "down" && /* @__PURE__ */ jsx(TrendingDown, { className: "h-4 w-4 text-red-500 dark:text-red-400" }),
49777
+ trend.direction === "neutral" && /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" }),
49778
+ /* @__PURE__ */ jsxs("span", { className: cn(
49779
+ "ml-1 text-sm font-semibold",
49780
+ trend.direction === "up" && "text-green-500 dark:text-green-400",
49781
+ trend.direction === "down" && "text-red-500 dark:text-red-400",
49782
+ trend.direction === "neutral" && "text-gray-500 dark:text-gray-400"
49783
+ ), children: [
49784
+ trend.percentage,
49785
+ "%"
49786
+ ] })
49787
+ ]
49788
+ }
49789
+ ),
49790
+ sparklineMode && series[0] && /* @__PURE__ */ jsx(
49791
+ SparklinePreview,
49792
+ {
49793
+ data,
49794
+ dataKey: series[0].dataKey,
49795
+ color: series[0].color || themeColors[0]
49796
+ }
49797
+ )
49798
+ ] }),
49799
+ subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtitle })
49800
+ ]
49801
+ }
49802
+ ),
49803
+ /* @__PURE__ */ jsxs(
49804
+ motion.div,
49805
+ {
49806
+ className: "flex items-center space-x-1",
49807
+ initial: { opacity: 0, x: 20 },
49808
+ animate: { opacity: 1, x: 0 },
49809
+ transition: { delay: 0.2 },
49810
+ children: [
49811
+ enableZoom && !sparklineMode && /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded-lg mr-2", children: [
49812
+ /* @__PURE__ */ jsx(
49813
+ MoonUIButtonPro,
49814
+ {
49815
+ variant: "ghost",
49816
+ size: "sm",
49817
+ onClick: () => handleZoom("out"),
49818
+ disabled: zoomLevel <= 50,
49819
+ className: "h-7 w-7 p-0",
49820
+ children: /* @__PURE__ */ jsx(ZoomOut, { className: "h-3 w-3" })
49821
+ }
49822
+ ),
49823
+ /* @__PURE__ */ jsxs("span", { className: "text-xs px-2 text-muted-foreground", children: [
49824
+ zoomLevel,
49825
+ "%"
49826
+ ] }),
49827
+ /* @__PURE__ */ jsx(
49828
+ MoonUIButtonPro,
49829
+ {
49830
+ variant: "ghost",
49831
+ size: "sm",
49832
+ onClick: () => handleZoom("in"),
49833
+ disabled: zoomLevel >= 200,
49834
+ className: "h-7 w-7 p-0",
49835
+ children: /* @__PURE__ */ jsx(ZoomIn, { className: "h-3 w-3" })
49836
+ }
49837
+ )
49838
+ ] }),
49839
+ onRefresh && /* @__PURE__ */ jsx(
49840
+ MoonUIButtonPro,
49841
+ {
49842
+ variant: "ghost",
49843
+ size: "sm",
49844
+ onClick: onRefresh,
49845
+ className: "group",
49846
+ children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 group-hover:rotate-180 transition-transform duration-500" })
49847
+ }
49848
+ ),
49849
+ /* @__PURE__ */ jsxs(MoonUIPopoverPro, { open: showSettings, onOpenChange: setShowSettings, children: [
49850
+ /* @__PURE__ */ jsx(MoonUIPopoverTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }) }) }),
49851
+ /* @__PURE__ */ jsx(MoonUIPopoverContentPro, { className: "w-80", align: "end", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
49852
+ /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm", children: "Chart Settings" }) }),
49853
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
49854
+ /* @__PURE__ */ jsx(MoonUILabelPro, { className: "text-xs", children: "Color Theme" }),
49855
+ /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: Object.entries(COLOR_THEMES).map(([themeName, colors2]) => /* @__PURE__ */ jsxs(
49856
+ "button",
49857
+ {
49858
+ onClick: () => setSelectedTheme(themeName),
49859
+ className: cn(
49860
+ "p-2 rounded-lg border-2 transition-all",
49861
+ selectedTheme === themeName ? "border-primary" : "border-transparent hover:border-muted-foreground/20"
49862
+ ),
49863
+ children: [
49864
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: colors2.slice(0, 3).map((color, i) => /* @__PURE__ */ jsx(
49865
+ "div",
49866
+ {
49867
+ className: "w-3 h-3 rounded-full",
49868
+ style: { backgroundColor: color }
49869
+ },
49870
+ i
49871
+ )) }),
49872
+ /* @__PURE__ */ jsx("span", { className: "text-xs mt-1 block capitalize", children: themeName })
49873
+ ]
49874
+ },
49875
+ themeName
49876
+ )) })
49877
+ ] }),
49878
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
49879
+ /* @__PURE__ */ jsx(MoonUILabelPro, { htmlFor: "animation", className: "text-xs", children: "Animations" }),
49880
+ /* @__PURE__ */ jsx(
49881
+ MoonUISwitchPro,
49882
+ {
49883
+ id: "animation",
49884
+ checked: animated,
49885
+ onCheckedChange: (checked) => {
49886
+ }
49887
+ }
49888
+ )
49889
+ ] }),
49890
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
49891
+ /* @__PURE__ */ jsx(MoonUILabelPro, { htmlFor: "grid", className: "text-xs", children: "Show Grid" }),
49892
+ /* @__PURE__ */ jsx(
49893
+ MoonUISwitchPro,
49894
+ {
49895
+ id: "grid",
49896
+ checked: showGrid,
49897
+ onCheckedChange: (checked) => {
49898
+ }
49899
+ }
49900
+ )
49901
+ ] }),
49902
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
49903
+ /* @__PURE__ */ jsx(MoonUILabelPro, { htmlFor: "crosshair", className: "text-xs", children: "Crosshair Cursor" }),
49904
+ /* @__PURE__ */ jsx(
49905
+ MoonUISwitchPro,
49906
+ {
49907
+ id: "crosshair",
49908
+ checked: showCrosshair,
49909
+ onCheckedChange: (checked) => {
49910
+ }
49911
+ }
49912
+ )
49913
+ ] })
49914
+ ] }) })
49915
+ ] }),
49916
+ onExport && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
49917
+ /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }) }) }),
49918
+ /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
49919
+ /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("png"), children: [
49920
+ /* @__PURE__ */ jsx(Image$1, { className: "mr-2 h-4 w-4" }),
49921
+ "Export as PNG"
49922
+ ] }),
49923
+ /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("svg"), children: [
49924
+ /* @__PURE__ */ jsx(FileSpreadsheet, { className: "mr-2 h-4 w-4" }),
49925
+ "Export as SVG"
49926
+ ] }),
49927
+ /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("pdf"), children: [
49928
+ /* @__PURE__ */ jsx(FileSpreadsheet, { className: "mr-2 h-4 w-4" }),
49929
+ "Export as PDF"
49930
+ ] }),
49931
+ /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
49932
+ /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("csv"), children: [
49933
+ /* @__PURE__ */ jsx(FileSpreadsheet, { className: "mr-2 h-4 w-4" }),
49934
+ "Export as CSV"
49935
+ ] }),
49936
+ /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("json"), children: [
49937
+ /* @__PURE__ */ jsx(FileJson, { className: "mr-2 h-4 w-4" }),
49938
+ "Export as JSON"
49939
+ ] })
49940
+ ] })
49941
+ ] }),
49942
+ /* @__PURE__ */ jsx(
49943
+ MoonUIButtonPro,
49944
+ {
49945
+ variant: "ghost",
49946
+ size: "sm",
49947
+ onClick: () => setIsFullscreen(!isFullscreen),
49948
+ children: isFullscreen ? /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" })
49949
+ }
49950
+ )
49951
+ ]
49952
+ }
49953
+ )
49194
49954
  ] }),
49195
- subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtitle })
49196
- ] }),
49197
- /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
49198
- onRefresh && /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", onClick: onRefresh, children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) }),
49199
- /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }) }),
49200
- onExport && /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", onClick: () => handleExport("png"), children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }) }),
49201
- /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", onClick: () => setIsFullscreen(!isFullscreen), children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" }) })
49955
+ /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "relative", children: [
49956
+ enablePan && /* @__PURE__ */ jsxs(
49957
+ motion.div,
49958
+ {
49959
+ initial: { opacity: 0 },
49960
+ animate: { opacity: 1 },
49961
+ className: "absolute top-2 left-2 z-10 flex items-center gap-1 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded-md",
49962
+ children: [
49963
+ /* @__PURE__ */ jsx(Move, { className: "h-3 w-3" }),
49964
+ /* @__PURE__ */ jsx("span", { children: "Drag to pan" })
49965
+ ]
49966
+ }
49967
+ ),
49968
+ /* @__PURE__ */ jsx(
49969
+ motion.div,
49970
+ {
49971
+ animate: { scale: zoomLevel / 100 },
49972
+ transition: { type: "spring", stiffness: 300, damping: 30 },
49973
+ style: { transformOrigin: "center" },
49974
+ children: responsive ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: sparklineMode ? 60 : height, children: renderChart() }) : /* @__PURE__ */ jsx("div", { style: { width: "100%", height: sparklineMode ? "60px" : `${height}px` }, children: renderChart() })
49975
+ }
49976
+ ),
49977
+ showMiniMap && !sparklineMode && /* @__PURE__ */ jsx(
49978
+ motion.div,
49979
+ {
49980
+ initial: { opacity: 0, y: 20 },
49981
+ animate: { opacity: 1, y: 0 },
49982
+ className: "absolute bottom-2 right-2 w-32 h-20 bg-background/80 backdrop-blur-sm border rounded-lg p-1",
49983
+ children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(LineChart, { data, margin: { top: 0, right: 0, left: 0, bottom: 0 }, children: series.filter((s) => !s.hide && !hiddenSeries.has(s.dataKey)).map((s, index) => /* @__PURE__ */ jsx(
49984
+ Line,
49985
+ {
49986
+ type: "monotone",
49987
+ dataKey: s.dataKey,
49988
+ stroke: s.color || themeColors[index % themeColors.length],
49989
+ strokeWidth: 1,
49990
+ dot: false
49991
+ },
49992
+ s.dataKey
49993
+ )) }) })
49994
+ }
49995
+ )
49996
+ ] })
49202
49997
  ] })
49203
- ] }),
49204
- /* @__PURE__ */ jsx(MoonUICardContentPro, { children: responsive ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: renderChart() }) : /* @__PURE__ */ jsx("div", { style: { width: "100%", height: `${height}px` }, children: renderChart() }) })
49205
- ] });
49998
+ }
49999
+ );
49206
50000
  }
49207
50001
  var METRIC_COLORS = {
49208
50002
  primary: "text-blue-600",
@@ -52156,7 +52950,9 @@ function FileUpload({
52156
52950
  }
52157
52951
  function DataTableColumnToggle({ table, trigger }) {
52158
52952
  const [search, setSearch] = t__default.useState("");
52159
- const columns = table.getAllColumns().filter((column) => column.getCanHide());
52953
+ const columns = table.getAllColumns().filter(
52954
+ (column) => column.getCanHide() && column.id !== "select" && column.id !== "actions" && column.id !== "expander"
52955
+ );
52160
52956
  const filteredColumns = t__default.useMemo(() => {
52161
52957
  if (!search)
52162
52958
  return columns;
@@ -52168,9 +52964,7 @@ function DataTableColumnToggle({ table, trigger }) {
52168
52964
  }, [columns, search]);
52169
52965
  const visibleCount = columns.filter((col) => col.getIsVisible()).length;
52170
52966
  const handleToggleAll = (visible) => {
52171
- columns.forEach((column) => {
52172
- column.toggleVisibility(visible);
52173
- });
52967
+ table.toggleAllColumnsVisible(visible);
52174
52968
  };
52175
52969
  return /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
52176
52970
  /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: trigger || /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", className: "gap-2", children: [
@@ -52749,12 +53543,16 @@ function DataTableFilterDrawer({
52749
53543
  width = "400px",
52750
53544
  filters: externalFilters,
52751
53545
  onFiltersChange,
52752
- customFilters
53546
+ customFilters,
53547
+ matchAll: externalMatchAll,
53548
+ onMatchAllChange
52753
53549
  }) {
52754
53550
  const [internalFilters, setInternalFilters] = useState([]);
52755
- const [matchAll, setMatchAll] = useState(true);
53551
+ const [internalMatchAll, setInternalMatchAll] = useState(true);
52756
53552
  const filters = externalFilters || internalFilters;
52757
53553
  const setFilters = onFiltersChange || setInternalFilters;
53554
+ const matchAll = externalMatchAll !== void 0 ? externalMatchAll : internalMatchAll;
53555
+ const setMatchAll = onMatchAllChange || setInternalMatchAll;
52758
53556
  const filterableColumns = useMemo(() => {
52759
53557
  return table.getAllColumns().filter((column) => {
52760
53558
  if (column.id === "select" || column.id === "actions" || column.id === "expander") {
@@ -52788,57 +53586,16 @@ function DataTableFilterDrawer({
52788
53586
  };
52789
53587
  const applyFilters = () => {
52790
53588
  table.resetColumnFilters();
52791
- filters.forEach((filter) => {
52792
- const column = table.getColumn(filter.column);
53589
+ const columnsWithFilters = [...new Set(filters.map((f) => f.column))];
53590
+ columnsWithFilters.forEach((columnId) => {
53591
+ const column = table.getColumn(columnId);
52793
53592
  if (!column)
52794
53593
  return;
52795
- switch (filter.operator) {
52796
- case "equals":
52797
- column.setFilterValue(filter.value);
52798
- break;
52799
- case "notEquals":
52800
- column.setFilterValue((value) => value !== filter.value);
52801
- break;
52802
- case "contains":
52803
- column.setFilterValue(
52804
- (value) => String(value).toLowerCase().includes(String(filter.value).toLowerCase())
52805
- );
52806
- break;
52807
- case "notContains":
52808
- column.setFilterValue(
52809
- (value) => !String(value).toLowerCase().includes(String(filter.value).toLowerCase())
52810
- );
52811
- break;
52812
- case "startsWith":
52813
- column.setFilterValue(
52814
- (value) => String(value).toLowerCase().startsWith(String(filter.value).toLowerCase())
52815
- );
52816
- break;
52817
- case "endsWith":
52818
- column.setFilterValue(
52819
- (value) => String(value).toLowerCase().endsWith(String(filter.value).toLowerCase())
52820
- );
52821
- break;
52822
- case "greaterThan":
52823
- column.setFilterValue((value) => Number(value) > Number(filter.value));
52824
- break;
52825
- case "lessThan":
52826
- column.setFilterValue((value) => Number(value) < Number(filter.value));
52827
- break;
52828
- case "greaterThanOrEqual":
52829
- column.setFilterValue((value) => Number(value) >= Number(filter.value));
52830
- break;
52831
- case "lessThanOrEqual":
52832
- column.setFilterValue((value) => Number(value) <= Number(filter.value));
52833
- break;
52834
- case "isNull":
52835
- column.setFilterValue((value) => value == null || value === "");
52836
- break;
52837
- case "isNotNull":
52838
- column.setFilterValue((value) => value != null && value !== "");
52839
- break;
52840
- }
53594
+ column.setFilterValue({ custom: true, filters, matchAll });
52841
53595
  });
53596
+ if (filters.length === 0) {
53597
+ table.resetColumnFilters();
53598
+ }
52842
53599
  onOpenChange(false);
52843
53600
  };
52844
53601
  return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -53078,10 +53835,16 @@ function DataTable({
53078
53835
  state: externalState
53079
53836
  }) {
53080
53837
  const columns = t__default.useMemo(() => {
53081
- return originalColumns.map((col) => ({
53082
- ...col,
53083
- enableHiding: col.enableHiding !== false
53084
- }));
53838
+ return originalColumns.map((col) => {
53839
+ const { enableHiding, ...restCol } = col;
53840
+ return {
53841
+ ...restCol,
53842
+ enableHiding: true,
53843
+ // Force all columns to be hideable
53844
+ filterFn: "custom"
53845
+ // Use our custom filter function
53846
+ };
53847
+ });
53085
53848
  }, [originalColumns]);
53086
53849
  const { hasProAccess, isLoading } = useSubscription();
53087
53850
  if (!isLoading && !hasProAccess) {
@@ -53121,17 +53884,60 @@ function DataTable({
53121
53884
  onRowSelectionChange: setRowSelection,
53122
53885
  onGlobalFilterChange: setGlobalFilter,
53123
53886
  globalFilterFn: "includesString",
53887
+ filterFns: {
53888
+ custom: (row, columnId, filterValue) => {
53889
+ if (!filterValue?.custom || !filterValue?.filters)
53890
+ return true;
53891
+ const filters = filterValue.filters;
53892
+ const matchAll = filterValue.matchAll !== void 0 ? filterValue.matchAll : true;
53893
+ const allFilterResults = filters.map((filterCondition) => {
53894
+ const cellValue = row.getValue(filterCondition.column);
53895
+ const filterVal = filterCondition.value;
53896
+ switch (filterCondition.operator) {
53897
+ case "equals":
53898
+ return cellValue === filterVal;
53899
+ case "notEquals":
53900
+ return cellValue !== filterVal;
53901
+ case "contains":
53902
+ return String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase());
53903
+ case "notContains":
53904
+ return !String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase());
53905
+ case "startsWith":
53906
+ return String(cellValue).toLowerCase().startsWith(String(filterVal).toLowerCase());
53907
+ case "endsWith":
53908
+ return String(cellValue).toLowerCase().endsWith(String(filterVal).toLowerCase());
53909
+ case "greaterThan":
53910
+ return Number(cellValue) > Number(filterVal);
53911
+ case "lessThan":
53912
+ return Number(cellValue) < Number(filterVal);
53913
+ case "greaterThanOrEqual":
53914
+ return Number(cellValue) >= Number(filterVal);
53915
+ case "lessThanOrEqual":
53916
+ return Number(cellValue) <= Number(filterVal);
53917
+ case "isNull":
53918
+ return cellValue == null || cellValue === "";
53919
+ case "isNotNull":
53920
+ return cellValue != null && cellValue !== "";
53921
+ default:
53922
+ return true;
53923
+ }
53924
+ });
53925
+ if (matchAll) {
53926
+ return allFilterResults.every((result) => result);
53927
+ } else {
53928
+ return allFilterResults.some((result) => result);
53929
+ }
53930
+ }
53931
+ },
53124
53932
  manualPagination,
53125
53933
  pageCount,
53126
- enableColumnFilters: true,
53127
- enableSorting: true,
53128
- enableHiding: true,
53129
- state: externalState || {
53130
- sorting,
53131
- columnFilters,
53132
- columnVisibility,
53133
- rowSelection,
53134
- globalFilter
53934
+ state: {
53935
+ sorting: externalState?.sorting ?? sorting,
53936
+ columnFilters: externalState?.columnFilters ?? columnFilters,
53937
+ columnVisibility: externalState?.columnVisibility ?? columnVisibility,
53938
+ rowSelection: externalState?.rowSelection ?? rowSelection,
53939
+ globalFilter: externalState?.globalFilter ?? globalFilter,
53940
+ ...externalState || {}
53135
53941
  },
53136
53942
  initialState: {
53137
53943
  pagination: {
@@ -53309,7 +54115,8 @@ function DataTable({
53309
54115
  columns,
53310
54116
  isExpanded,
53311
54117
  enableExpandable,
53312
- renderSubComponent
54118
+ renderSubComponent,
54119
+ visibilityState: table.getState().columnVisibility
53313
54120
  },
53314
54121
  rowId
53315
54122
  );
@@ -53497,7 +54304,8 @@ var TableRow2 = t__default.memo(({
53497
54304
  columns,
53498
54305
  isExpanded,
53499
54306
  enableExpandable,
53500
- renderSubComponent
54307
+ renderSubComponent,
54308
+ visibilityState
53501
54309
  }) => {
53502
54310
  const rowId = row.original.id || row.id;
53503
54311
  return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -53509,10 +54317,17 @@ var TableRow2 = t__default.memo(({
53509
54317
  row.getIsSelected() && "bg-muted",
53510
54318
  isExpanded && "border-b-0"
53511
54319
  ),
53512
- children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "moonui-data-table-td p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
54320
+ children: row.getAllCells().filter((cell) => {
54321
+ const isVisible = visibilityState[cell.column.id] !== false;
54322
+ return isVisible;
54323
+ }).map((cell) => {
54324
+ return /* @__PURE__ */ jsx("td", { className: "moonui-data-table-td p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
54325
+ })
53513
54326
  }
53514
54327
  ),
53515
- isExpanded && renderSubComponent && /* @__PURE__ */ jsx("tr", { className: "border-b", children: /* @__PURE__ */ jsx("td", { colSpan: row.getVisibleCells().length, className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsx(
54328
+ isExpanded && renderSubComponent && /* @__PURE__ */ jsx("tr", { className: "border-b", children: /* @__PURE__ */ jsx("td", { colSpan: row.getAllCells().filter(
54329
+ (cell) => visibilityState[cell.column.id] !== false
54330
+ ).length || 1, className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsx(
53516
54331
  "div",
53517
54332
  {
53518
54333
  className: "transition-all duration-300 ease-out",
@@ -53527,7 +54342,11 @@ var TableRow2 = t__default.memo(({
53527
54342
  }, (prevProps, nextProps) => {
53528
54343
  const prevRowId = prevProps.row.original.id || prevProps.row.id;
53529
54344
  const nextRowId = nextProps.row.original.id || nextProps.row.id;
53530
- return prevRowId === nextRowId && prevProps.isExpanded === nextProps.isExpanded && prevProps.row.getIsSelected() === nextProps.row.getIsSelected();
54345
+ const prevVisibilityKeys = Object.keys(prevProps.visibilityState).sort().join(",");
54346
+ const nextVisibilityKeys = Object.keys(nextProps.visibilityState).sort().join(",");
54347
+ const prevVisibilityValues = Object.values(prevProps.visibilityState).join(",");
54348
+ const nextVisibilityValues = Object.values(nextProps.visibilityState).join(",");
54349
+ return prevRowId === nextRowId && prevProps.isExpanded === nextProps.isExpanded && prevProps.row.getIsSelected() === nextProps.row.getIsSelected() && prevVisibilityKeys === nextVisibilityKeys && prevVisibilityValues === nextVisibilityValues;
53531
54350
  });
53532
54351
  TableRow2.displayName = "TableRow";
53533
54352