@moontra/moonui-pro 2.5.12 → 2.5.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs
CHANGED
|
@@ -1751,7 +1751,7 @@ function styleInject(css2, { insertAt } = {}) {
|
|
|
1751
1751
|
}
|
|
1752
1752
|
|
|
1753
1753
|
// src/styles/index.css
|
|
1754
|
-
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');
|
|
1754
|
+
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');
|
|
1755
1755
|
function cn(...inputs) {
|
|
1756
1756
|
return twMerge(clsx(inputs));
|
|
1757
1757
|
}
|
|
@@ -56690,7 +56690,7 @@ function Sidebar({
|
|
|
56690
56690
|
] });
|
|
56691
56691
|
});
|
|
56692
56692
|
const sidebarClasses = cn(
|
|
56693
|
-
"flex h-full flex-col bg-background border-r",
|
|
56693
|
+
"moonui-pro flex h-full flex-col bg-background border-r",
|
|
56694
56694
|
glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
|
|
56695
56695
|
collapsed && !isMobile && "w-16",
|
|
56696
56696
|
!collapsed && !isMobile && "w-64",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moontra/moonui-pro",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.13",
|
|
4
4
|
"description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.mjs",
|
|
@@ -629,7 +629,7 @@ export function Sidebar({
|
|
|
629
629
|
})
|
|
630
630
|
|
|
631
631
|
const sidebarClasses = cn(
|
|
632
|
-
"flex h-full flex-col bg-background border-r",
|
|
632
|
+
"moonui-pro flex h-full flex-col bg-background border-r",
|
|
633
633
|
glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
|
|
634
634
|
collapsed && !isMobile && "w-16",
|
|
635
635
|
!collapsed && !isMobile && "w-64",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* MoonUI Design System - Advanced Tokens */
|
|
2
2
|
|
|
3
|
-
/* Base layer styles */
|
|
4
|
-
|
|
3
|
+
/* Base layer styles - Scoped to moonui-pro components only */
|
|
4
|
+
.moonui-pro {
|
|
5
5
|
/* ===== Semantic Color Tokens ===== */
|
|
6
6
|
|
|
7
7
|
/* Background Layers */
|
|
@@ -229,7 +229,8 @@
|
|
|
229
229
|
}
|
|
230
230
|
|
|
231
231
|
/* Dark Mode Overrides */
|
|
232
|
-
.dark
|
|
232
|
+
.moonui-pro.dark,
|
|
233
|
+
.dark .moonui-pro {
|
|
233
234
|
/* Background Layers */
|
|
234
235
|
--bg-base: var(--background);
|
|
235
236
|
--bg-subtle: var(--gray-800);
|
package/src/styles/index.css
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/* MoonUI Pro - Complete CSS System */
|
|
2
2
|
@import "./tailwind.css";
|
|
3
|
-
|
|
4
|
-
@import "./
|
|
3
|
+
/* Tokens and design-system CSS removed to prevent global scope pollution */
|
|
4
|
+
/* @import "./tokens.css"; */
|
|
5
|
+
/* @import "./design-system.css"; */
|
|
5
6
|
@import "./advanced-chart.css";
|
|
6
7
|
|
|
7
8
|
/* React Grid Layout - Required for Dashboard component */
|
package/src/styles/tokens.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* MoonUI Design Tokens */
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
/* Scoped to moonui-pro components only */
|
|
4
|
+
.moonui-pro {
|
|
4
5
|
/* === COLOR SYSTEM === */
|
|
5
6
|
|
|
6
7
|
/* Primary Colors */
|
|
@@ -319,7 +320,8 @@
|
|
|
319
320
|
|
|
320
321
|
/* === DARK MODE === */
|
|
321
322
|
|
|
322
|
-
.dark
|
|
323
|
+
.moonui-pro.dark,
|
|
324
|
+
.dark .moonui-pro {
|
|
323
325
|
--background: 224 71% 4%;
|
|
324
326
|
--foreground: 213 31% 91%;
|
|
325
327
|
--card: 224 71% 4%;
|