@moontra/moonui-pro 2.5.12 → 2.5.14

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.moonui-calendar {\n  --calendar-cell-size: 2.25rem;\n  --calendar-cell-size-sm: 2rem;\n}\n@media (max-width: 640px) {\n  .moonui-calendar {\n    --calendar-cell-size: var(--calendar-cell-size-sm);\n  }\n  .moonui-calendar .months {\n    flex-direction: column !important;\n  }\n  .moonui-calendar .rdp-cell,\n  .moonui-calendar .rdp-day {\n    width: var(--calendar-cell-size) !important;\n    height: var(--calendar-cell-size) !important;\n  }\n}\n.moonui-calendar .rdp-head_cell {\n  width: var(--calendar-cell-size);\n  height: var(--calendar-cell-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.75rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  color: var(--muted-foreground);\n}\n.moonui-calendar .rdp-tbody {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.moonui-calendar .rdp-row {\n  display: flex;\n  gap: 0.25rem;\n  margin: 0;\n}\n.moonui-calendar .rdp-cell {\n  width: var(--calendar-cell-size);\n  height: var(--calendar-cell-size);\n  padding: 0;\n  text-align: center;\n}\n.moonui-calendar .rdp-day {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.375rem;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.moonui-calendar .rdp-day_range_middle {\n  border-radius: 0 !important;\n  background-color: var(--accent);\n  color: var(--accent-foreground);\n}\n.moonui-calendar .rdp-day_range_start {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n.moonui-calendar .rdp-day_range_end {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n@media (max-width: 640px) {\n  .time-range-popover {\n    max-width: calc(100vw - 2rem) !important;\n  }\n  .time-range-popover .preset-column {\n    border-right: none !important;\n    border-bottom: 1px solid var(--border) !important;\n    min-width: 100% !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));
 }
@@ -2550,7 +2550,7 @@ function Calendar({
     DayPicker,
     {
       showOutsideDays,
-      className: cn("p-3", className),
+      className: cn("moonui-calendar p-3", className),
       classNames: {
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
@@ -2563,10 +2563,10 @@ function Calendar({
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
-        table: "w-full border-collapse",
-        head_row: "grid grid-cols-7",
-        head_cell: "text-muted-foreground rounded-md w-9 h-9 font-normal text-[0.8rem] flex items-center justify-center",
-        row: "grid grid-cols-7 gap-1 mt-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex w-full",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           moonUIButtonProVariants({ variant: "ghost" }),
@@ -51461,6 +51461,13 @@ function TimeRangePicker({
   const [isOpen, setIsOpen] = t__default.useState(false);
   const [customRange, setCustomRange] = t__default.useState({});
   const [comparisonEnabled, setComparisonEnabled] = t__default.useState(false);
+  const [isMobile, setIsMobile] = t__default.useState(false);
+  t__default.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
   const currentRange = value || PRESET_RANGES[2].getRange();
   const formatRange = (range) => {
     if (range.preset && range.preset !== "custom") {
@@ -51506,20 +51513,21 @@ function TimeRangePicker({
       MoonUIPopoverContentPro,
       {
         className: cn(
-          "w-auto p-0",
+          "time-range-popover w-auto max-w-[95vw] p-0 overflow-hidden",
           glassmorphism && "bg-background/95 backdrop-blur-md border-white/10"
         ),
         align: "end",
         side: "bottom",
         sideOffset: 4,
+        collisionPadding: 8,
         children: /* @__PURE__ */ jsx(
           motion.div,
           {
             initial: { opacity: 0, y: -10 },
             animate: { opacity: 1, y: 0 },
             transition: { duration: 0.2 },
-            children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
-              showPresets && /* @__PURE__ */ jsxs("div", { className: "border-r p-3", children: [
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row", children: [
+              showPresets && /* @__PURE__ */ jsxs("div", { className: "preset-column border-b sm:border-b-0 sm:border-r p-3 min-w-[140px]", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 pb-2", children: [
                   /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-muted-foreground" }),
                   /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Quick Select" })
@@ -51531,7 +51539,7 @@ function TimeRangePicker({
                     whileTap: { scale: 0.98 },
                     onClick: () => handlePresetSelect(preset),
                     className: cn(
-                      "w-full text-left px-2 py-1.5 text-sm rounded-md transition-colors",
+                      "w-full text-left px-2 py-1.5 text-sm rounded-md transition-colors whitespace-nowrap",
                       "hover:bg-muted",
                       currentRange.preset === preset.value && "bg-primary text-primary-foreground"
                     ),
@@ -51557,7 +51565,7 @@ function TimeRangePicker({
                   /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 text-muted-foreground" }),
                   /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Custom Range" })
                 ] }),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx(
                   Calendar,
                   {
                     mode: "range",
@@ -51566,10 +51574,10 @@ function TimeRangePicker({
                       to: customRange.to
                     },
                     onSelect: (range) => setCustomRange(range || {}),
-                    numberOfMonths: 2,
+                    numberOfMonths: isMobile ? 1 : 2,
                     className: "rounded-md"
                   }
-                ),
+                ) }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-3 px-2", children: [
                   /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: customRange.from && customRange.to && /* @__PURE__ */ jsxs("span", { children: [
                     Math.ceil((customRange.to.getTime() - customRange.from.getTime()) / (1e3 * 60 * 60 * 24)),
@@ -56314,7 +56322,7 @@ var SearchInput = t__default.memo(({
   keyboardShortcuts
 }) => {
   const [localValue, setLocalValue] = useState(initialValue || "");
-  const timeoutRef = useRef();
+  const timeoutRef = useRef(void 0);
   useEffect(() => {
     setLocalValue(initialValue);
   }, [initialValue]);
@@ -56690,7 +56698,7 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.12",
+  "version": "2.5.14",
   "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/dashboard/time-range-picker.tsx

@@ -107,6 +107,14 @@ export function TimeRangePicker({
   const [isOpen, setIsOpen] = React.useState(false)
   const [customRange, setCustomRange] = React.useState<{ from?: Date; to?: Date }>({})
   const [comparisonEnabled, setComparisonEnabled] = React.useState(false)
+  const [isMobile, setIsMobile] = React.useState(false)
+  
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640)
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
 
   const currentRange = value || PRESET_RANGES[2].getRange() // Default: Last 7 days
 
@@ -157,22 +165,23 @@ export function TimeRangePicker({
       </PopoverTrigger>
       <PopoverContent 
         className={cn(
-          "w-auto p-0",
+          "time-range-popover w-auto max-w-[95vw] p-0 overflow-hidden",
           glassmorphism && "bg-background/95 backdrop-blur-md border-white/10"
         )} 
         align="end"
         side="bottom"
         sideOffset={4}
+        collisionPadding={8}
       >
         <motion.div
           initial={{ opacity: 0, y: -10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.2 }}
         >
-          <div className="flex">
+          <div className="flex flex-col sm:flex-row">
             {/* Preset'ler */}
             {showPresets && (
-              <div className="border-r p-3">
+              <div className="preset-column border-b sm:border-b-0 sm:border-r p-3 min-w-[140px]">
                 <div className="flex items-center gap-2 px-2 pb-2">
                   <Clock className="h-4 w-4 text-muted-foreground" />
                   <h4 className="text-sm font-medium">Quick Select</h4>
@@ -185,7 +194,7 @@ export function TimeRangePicker({
                       whileTap={{ scale: 0.98 }}
                       onClick={() => handlePresetSelect(preset)}
                       className={cn(
-                        "w-full text-left px-2 py-1.5 text-sm rounded-md transition-colors",
+                        "w-full text-left px-2 py-1.5 text-sm rounded-md transition-colors whitespace-nowrap",
                         "hover:bg-muted",
                         currentRange.preset === preset.value && "bg-primary text-primary-foreground"
                       )}
@@ -219,16 +228,18 @@ export function TimeRangePicker({
                 <h4 className="text-sm font-medium">Custom Range</h4>
               </div>
               
-              <Calendar
-                mode="range"
-                selected={{
-                  from: customRange.from,
-                  to: customRange.to
-                }}
-                onSelect={(range: any) => setCustomRange(range || {})}
-                numberOfMonths={2}
-                className="rounded-md"
-              />
+              <div className="overflow-x-auto">
+                <Calendar
+                  mode="range"
+                  selected={{
+                    from: customRange.from,
+                    to: customRange.to
+                  }}
+                  onSelect={(range: any) => setCustomRange(range || {})}
+                  numberOfMonths={isMobile ? 1 : 2}
+                  className="rounded-md"
+                />
+              </div>
 
               <div className="flex items-center justify-between pt-3 px-2">
                 <div className="text-sm text-muted-foreground">

package/src/components/sidebar/index.tsx

@@ -52,7 +52,7 @@ const SearchInput = React.memo(({
 }) => {
   // Local state to prevent focus loss
   const [localValue, setLocalValue] = useState<string>(initialValue || '')
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>()
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   
   // Update local value when initial value changes from parent
   useEffect(() => {
@@ -629,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/components/ui/calendar.tsx

@@ -17,7 +17,7 @@ function Calendar({
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn("moonui-calendar p-3", className)}
       classNames={{
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
@@ -30,11 +30,11 @@ function Calendar({
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
-        table: "w-full border-collapse",
-        head_row: "grid grid-cols-7",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex w-full",
         head_cell:
-          "text-muted-foreground rounded-md w-9 h-9 font-normal text-[0.8rem] flex items-center justify-center",
-        row: "grid grid-cols-7 gap-1 mt-1",
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),

package/src/styles/calendar.css

@@ -0,0 +1,99 @@
+/* Calendar Component Styles */
+.moonui-calendar {
+  --calendar-cell-size: 2.25rem; /* 36px */
+  --calendar-cell-size-sm: 2rem; /* 32px on mobile */
+}
+
+/* Mobile responsive calendar */
+@media (max-width: 640px) {
+  .moonui-calendar {
+    --calendar-cell-size: var(--calendar-cell-size-sm);
+  }
+  
+  /* Stack months vertically on mobile */
+  .moonui-calendar .months {
+    flex-direction: column !important;
+  }
+  
+  /* Adjust cell sizes for mobile */
+  .moonui-calendar .rdp-cell,
+  .moonui-calendar .rdp-day {
+    width: var(--calendar-cell-size) !important;
+    height: var(--calendar-cell-size) !important;
+  }
+}
+
+/* Fix day names alignment */
+.moonui-calendar .rdp-head_cell {
+  width: var(--calendar-cell-size);
+  height: var(--calendar-cell-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+
+/* Fix calendar grid */
+.moonui-calendar .rdp-tbody {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.moonui-calendar .rdp-row {
+  display: flex;
+  gap: 0.25rem;
+  margin: 0;
+}
+
+.moonui-calendar .rdp-cell {
+  width: var(--calendar-cell-size);
+  height: var(--calendar-cell-size);
+  padding: 0;
+  text-align: center;
+}
+
+.moonui-calendar .rdp-day {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+/* Range selection styles */
+.moonui-calendar .rdp-day_range_middle {
+  border-radius: 0 !important;
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.moonui-calendar .rdp-day_range_start {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.moonui-calendar .rdp-day_range_end {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+/* Popover responsive */
+@media (max-width: 640px) {
+  .time-range-popover {
+    max-width: calc(100vw - 2rem) !important;
+  }
+  
+  .time-range-popover .preset-column {
+    border-right: none !important;
+    border-bottom: 1px solid var(--border) !important;
+    min-width: 100% !important;
+  }
+}

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,8 +1,10 @@
 /* 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";
+@import "./calendar.css";
 
 /* React Grid Layout - Required for Dashboard component */
 @import "react-grid-layout/css/styles.css";

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%;