@moontra/moonui-pro 2.5.11 → 2.5.13

package/dist/index.mjs

@@ -1751,7 +1751,7 @@ function styleInject(css2, { insertAt } = {}) {
 }
 
 // src/styles/index.css
-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.react-grid-layout {\n  position: relative;\n  transition: height 200ms ease;\n}\n.react-grid-item {\n  transition: all 200ms ease;\n  transition-property:\n    left,\n    top,\n    width,\n    height;\n}\n.react-grid-item img {\n  pointer-events: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.react-grid-item.cssTransforms {\n  transition-property:\n    transform,\n    width,\n    height;\n}\n.react-grid-item.resizing {\n  transition: none;\n  z-index: 1;\n  will-change: width, height;\n}\n.react-grid-item.react-draggable-dragging {\n  transition: none;\n  z-index: 3;\n  will-change: transform;\n}\n.react-grid-item.dropping {\n  visibility: hidden;\n}\n.react-grid-item.react-grid-placeholder {\n  background: red;\n  opacity: 0.2;\n  transition-duration: 100ms;\n  z-index: 2;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -o-user-select: none;\n  user-select: none;\n}\n.react-grid-item.react-grid-placeholder.placeholder-resizing {\n  transition: none;\n}\n.react-grid-item > .react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n}\n.react-grid-item > .react-resizable-handle::after {\n  content: "";\n  position: absolute;\n  right: 3px;\n  bottom: 3px;\n  width: 5px;\n  height: 5px;\n  border-right: 2px solid rgba(0, 0, 0, 0.4);\n  border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n}\n.react-resizable-hide > .react-resizable-handle {\n  display: none;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n.react-resizable {\n  position: relative;\n}\n.react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  box-sizing: border-box;\n  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);\n  background-position: bottom right;\n  padding: 0 3px 3px 0;\n}\n.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-resizable-handle-w,\n.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-resizable-handle-n,\n.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n.react-grid-layout {\n  position: relative !important;\n  transition: height 200ms ease;\n}\n.react-grid-item {\n  transition: all 200ms ease;\n  transition-property:\n    left,\n    top,\n    width,\n    height;\n}\n.react-grid-item > div {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.react-grid-item.cssTransforms {\n  transition-property:\n    transform,\n    width,\n    height;\n}\n.react-grid-item.resizing {\n  transition: none;\n  z-index: 1;\n  will-change: width, height;\n}\n.react-grid-item.react-draggable-dragging {\n  transition: none;\n  z-index: 3;\n  will-change: transform;\n}\n@media (max-width: 768px) {\n  .react-grid-layout {\n    overflow-x: hidden !important;\n    height: auto !important;\n  }\n  .react-grid-item {\n    position: relative !important;\n    transform: none !important;\n    margin-bottom: 24px !important;\n    width: 100% !important;\n    left: 0 !important;\n    right: 0 !important;\n  }\n  .react-grid-item:last-child {\n    margin-bottom: 0 !important;\n  }\n  .react-grid-item.cssTransforms {\n    position: relative !important;\n    transform: none !important;\n  }\n  .react-grid-placeholder {\n    display: none !important;\n  }\n}\n');
+styleInject('.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.react-grid-layout {\n  position: relative;\n  transition: height 200ms ease;\n}\n.react-grid-item {\n  transition: all 200ms ease;\n  transition-property:\n    left,\n    top,\n    width,\n    height;\n}\n.react-grid-item img {\n  pointer-events: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.react-grid-item.cssTransforms {\n  transition-property:\n    transform,\n    width,\n    height;\n}\n.react-grid-item.resizing {\n  transition: none;\n  z-index: 1;\n  will-change: width, height;\n}\n.react-grid-item.react-draggable-dragging {\n  transition: none;\n  z-index: 3;\n  will-change: transform;\n}\n.react-grid-item.dropping {\n  visibility: hidden;\n}\n.react-grid-item.react-grid-placeholder {\n  background: red;\n  opacity: 0.2;\n  transition-duration: 100ms;\n  z-index: 2;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -o-user-select: none;\n  user-select: none;\n}\n.react-grid-item.react-grid-placeholder.placeholder-resizing {\n  transition: none;\n}\n.react-grid-item > .react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n}\n.react-grid-item > .react-resizable-handle::after {\n  content: "";\n  position: absolute;\n  right: 3px;\n  bottom: 3px;\n  width: 5px;\n  height: 5px;\n  border-right: 2px solid rgba(0, 0, 0, 0.4);\n  border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n}\n.react-resizable-hide > .react-resizable-handle {\n  display: none;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n.react-resizable {\n  position: relative;\n}\n.react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  box-sizing: border-box;\n  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);\n  background-position: bottom right;\n  padding: 0 3px 3px 0;\n}\n.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-resizable-handle-w,\n.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-resizable-handle-n,\n.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n.react-grid-layout {\n  position: relative !important;\n  transition: height 200ms ease;\n}\n.react-grid-item {\n  transition: all 200ms ease;\n  transition-property:\n    left,\n    top,\n    width,\n    height;\n}\n.react-grid-item > div {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.react-grid-item.cssTransforms {\n  transition-property:\n    transform,\n    width,\n    height;\n}\n.react-grid-item.resizing {\n  transition: none;\n  z-index: 1;\n  will-change: width, height;\n}\n.react-grid-item.react-draggable-dragging {\n  transition: none;\n  z-index: 3;\n  will-change: transform;\n}\n@media (max-width: 768px) {\n  .react-grid-layout {\n    overflow-x: hidden !important;\n    height: auto !important;\n  }\n  .react-grid-item {\n    position: relative !important;\n    transform: none !important;\n    margin-bottom: 24px !important;\n    width: 100% !important;\n    left: 0 !important;\n    right: 0 !important;\n  }\n  .react-grid-item:last-child {\n    margin-bottom: 0 !important;\n  }\n  .react-grid-item.cssTransforms {\n    position: relative !important;\n    transform: none !important;\n  }\n  .react-grid-placeholder {\n    display: none !important;\n  }\n}\n');
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -56306,27 +56306,44 @@ var TableRow2 = t__default.memo(({
   return prevRowId === nextRowId && prevProps.isExpanded === nextProps.isExpanded && prevProps.row.getIsSelected() === nextProps.row.getIsSelected() && prevVisibilityKeys === nextVisibilityKeys && prevVisibilityValues === nextVisibilityValues;
 });
 TableRow2.displayName = "TableRow";
-var SearchInput = t__default.forwardRef(({ placeholder, defaultValue, onChange, keyboardShortcuts }, ref) => {
-  const localRef = useRef(null);
-  const inputRef = ref || localRef;
-  const handleChange = useCallback((e) => {
-    onChange(e.target.value);
-  }, [onChange]);
+var SearchInput = t__default.memo(({
+  searchInputRef,
+  searchPlaceholder,
+  initialValue,
+  onSearchChange,
+  keyboardShortcuts
+}) => {
+  const [localValue, setLocalValue] = useState(initialValue || "");
+  const timeoutRef = useRef();
   useEffect(() => {
-    const input = typeof inputRef === "object" && inputRef?.current;
-    if (input && input.value !== defaultValue) {
-      input.value = defaultValue;
+    setLocalValue(initialValue);
+  }, [initialValue]);
+  const handleChange = useCallback((e) => {
+    const newValue = e.target.value;
+    setLocalValue(newValue);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
     }
-  }, [defaultValue, inputRef]);
+    timeoutRef.current = setTimeout(() => {
+      onSearchChange(newValue);
+    }, 300);
+  }, [onSearchChange]);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
   return /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" }),
     /* @__PURE__ */ jsx(
       "input",
       {
-        ref: inputRef,
+        ref: searchInputRef,
         type: "text",
-        placeholder,
-        defaultValue,
+        placeholder: searchPlaceholder,
+        value: localValue,
         onChange: handleChange,
         autoComplete: "off",
         autoCorrect: "off",
@@ -56341,7 +56358,6 @@ var SearchInput = t__default.forwardRef(({ placeholder, defaultValue, onChange,
     ] })
   ] }) });
 });
-SearchInput.displayName = "SearchInput";
 function Sidebar({
   sections,
   footer,
@@ -56611,20 +56627,6 @@ function Sidebar({
       )
     ] });
   });
-  const searchComponent = useMemo(() => {
-    if (!showSearch)
-      return null;
-    return /* @__PURE__ */ jsx(
-      SearchInput,
-      {
-        ref: searchInputRef,
-        placeholder: searchPlaceholder,
-        defaultValue: searchQuery,
-        onChange: handleSearch,
-        keyboardShortcuts
-      }
-    );
-  }, [showSearch, searchPlaceholder, keyboardShortcuts, handleSearch]);
   const SidebarMenuContent = t__default.memo(() => {
     return /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-6", children: [
       pinnedItems.length > 0 && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { children: [
@@ -56673,13 +56675,22 @@ function Sidebar({
   const SidebarContent = t__default.memo(() => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(SidebarHeader, {}),
-      showSearch && (!collapsed || isMobile) && searchComponent,
+      showSearch && (!collapsed || isMobile) && /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          searchInputRef,
+          searchPlaceholder,
+          initialValue: searchQuery,
+          onSearchChange: handleSearch,
+          keyboardShortcuts
+        }
+      ),
       /* @__PURE__ */ jsx(SidebarMenuContent, {}),
       /* @__PURE__ */ jsx(SidebarFooter, {})
     ] });
   });
   const sidebarClasses = cn(
-    "flex h-full flex-col bg-background border-r",
+    "moonui-pro flex h-full flex-col bg-background border-r",
     glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
     collapsed && !isMobile && "w-16",
     !collapsed && !isMobile && "w-64",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.11",
+  "version": "2.5.13",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/sidebar/index.tsx

@@ -36,41 +36,63 @@ import {
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu'
 
-// Uncontrolled Search Input to preserve focus
-const SearchInput = React.forwardRef<
-  HTMLInputElement,
-  {
-    placeholder: string
-    defaultValue: string
-    onChange: (value: string) => void
-    keyboardShortcuts: boolean
-  }
->(({ placeholder, defaultValue, onChange, keyboardShortcuts }, ref) => {
-  const localRef = useRef<HTMLInputElement>(null)
-  const inputRef = ref || localRef
+// Search Input Component - with local state to prevent focus loss
+const SearchInput = React.memo(({ 
+  searchInputRef,
+  searchPlaceholder,
+  initialValue,
+  onSearchChange,
+  keyboardShortcuts
+}: {
+  searchInputRef: React.RefObject<HTMLInputElement | null>
+  searchPlaceholder: string
+  initialValue: string
+  onSearchChange: (value: string) => void
+  keyboardShortcuts: boolean
+}) => {
+  // Local state to prevent focus loss
+  const [localValue, setLocalValue] = useState<string>(initialValue || '')
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>()
+  
+  // Update local value when initial value changes from parent
+  useEffect(() => {
+    setLocalValue(initialValue)
+  }, [initialValue])
   
-  // Use uncontrolled input with onChange
+  // Handle input changes locally and debounce to parent
   const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(e.target.value)
-  }, [onChange])
+    const newValue = e.target.value
+    setLocalValue(newValue)
+    
+    // Clear previous timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+    
+    // Debounce the parent update
+    timeoutRef.current = setTimeout(() => {
+      onSearchChange(newValue)
+    }, 300)
+  }, [onSearchChange])
   
-  // Update value programmatically when defaultValue changes
+  // Cleanup timeout on unmount
   useEffect(() => {
-    const input = typeof inputRef === 'object' && inputRef?.current
-    if (input && input.value !== defaultValue) {
-      input.value = defaultValue
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
     }
-  }, [defaultValue, inputRef])
+  }, [])
   
   return (
     <div className="p-4 border-b">
       <div className="relative">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
         <input
-          ref={inputRef as React.RefObject<HTMLInputElement>}
+          ref={searchInputRef}
           type="text"
-          placeholder={placeholder}
-          defaultValue={defaultValue}
+          placeholder={searchPlaceholder}
+          value={localValue}
           onChange={handleChange}
           autoComplete="off"
           autoCorrect="off"  
@@ -87,7 +109,6 @@ const SearchInput = React.forwardRef<
     </div>
   )
 })
-SearchInput.displayName = 'SearchInput'
 
 export interface SidebarItem {
   id: string
@@ -190,7 +211,7 @@ export function Sidebar({
   const [expandedSections, setExpandedSections] = useState<string[]>([])
   const [currentSearchQuery, setCurrentSearchQuery] = useState(searchQuery)
   const [pinnedItems, setPinnedItems] = useState<string[]>([])
-  const searchInputRef = useRef<HTMLInputElement>(null)
+  const searchInputRef = useRef<HTMLInputElement | null>(null)
   const mouseX = useMotionValue(0)
   const mouseY = useMotionValue(0)
   const springX = useSpring(mouseX, { stiffness: 300, damping: 30 })
@@ -508,19 +529,6 @@ export function Sidebar({
     )
   })
 
-  // Create stable search component with uncontrolled input
-  const searchComponent = useMemo(() => {
-    if (!showSearch) return null
-    return (
-      <SearchInput
-        ref={searchInputRef}
-        placeholder={searchPlaceholder}
-        defaultValue={searchQuery}
-        onChange={handleSearch}
-        keyboardShortcuts={keyboardShortcuts}
-      />
-    )
-  }, [showSearch, searchPlaceholder, keyboardShortcuts, handleSearch]) // Only re-create when these stable props change
 
   // Menu Content
   const SidebarMenuContent = React.memo(() => {
@@ -605,7 +613,15 @@ export function Sidebar({
     return (
       <>
         <SidebarHeader />
-        {showSearch && (!collapsed || isMobile) && searchComponent}
+        {showSearch && (!collapsed || isMobile) && (
+          <SearchInput
+            searchInputRef={searchInputRef}
+            searchPlaceholder={searchPlaceholder}
+            initialValue={searchQuery}
+            onSearchChange={handleSearch}
+            keyboardShortcuts={keyboardShortcuts}
+          />
+        )}
         <SidebarMenuContent />
         <SidebarFooter />
       </>
@@ -613,7 +629,7 @@ export function Sidebar({
   })
 
   const sidebarClasses = cn(
-    "flex h-full flex-col bg-background border-r",
+    "moonui-pro flex h-full flex-col bg-background border-r",
     glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
     collapsed && !isMobile && "w-16",
     !collapsed && !isMobile && "w-64",

package/src/styles/design-system.css

@@ -1,7 +1,7 @@
 /* MoonUI Design System - Advanced Tokens */
 
-/* Base layer styles */
-:root {
+/* Base layer styles - Scoped to moonui-pro components only */
+.moonui-pro {
   /* ===== Semantic Color Tokens ===== */
   
   /* Background Layers */
@@ -229,7 +229,8 @@
 }
 
 /* Dark Mode Overrides */
-.dark {
+.moonui-pro.dark,
+.dark .moonui-pro {
   /* Background Layers */
   --bg-base: var(--background);
   --bg-subtle: var(--gray-800);

package/src/styles/index.css

@@ -1,7 +1,8 @@
 /* MoonUI Pro - Complete CSS System */
 @import "./tailwind.css";
-@import "./tokens.css";
-@import "./design-system.css";
+/* Tokens and design-system CSS removed to prevent global scope pollution */
+/* @import "./tokens.css"; */
+/* @import "./design-system.css"; */
 @import "./advanced-chart.css";
 
 /* React Grid Layout - Required for Dashboard component */

package/src/styles/tokens.css

@@ -1,6 +1,7 @@
 /* MoonUI Design Tokens */
 
-:root {
+/* Scoped to moonui-pro components only */
+.moonui-pro {
   /* === COLOR SYSTEM === */
   
   /* Primary Colors */
@@ -319,7 +320,8 @@
 
 /* === DARK MODE === */
 
-.dark {
+.moonui-pro.dark,
+.dark .moonui-pro {
   --background: 224 71% 4%;
   --foreground: 213 31% 91%;
   --card: 224 71% 4%;