@moontra/moonui-pro 2.20.0 → 2.20.2

package/src/styles/index.css

@@ -20,6 +20,602 @@
   }
 }
 
+/* Dialog Animation Keyframes */
+@keyframes bounce-in {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes bounce-out {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+}
+
+@keyframes rotate-in-90 {
+  from {
+    transform: rotate(-90deg) scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes rotate-out-90 {
+  from {
+    transform: rotate(0) scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: rotate(90deg) scale(0.9);
+    opacity: 0;
+  }
+}
+
+@keyframes rotate-x-90 {
+  from {
+    transform: perspective(800px) rotateX(-90deg);
+    opacity: 0;
+  }
+  to {
+    transform: perspective(800px) rotateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes spin-in-180 {
+  from {
+    transform: rotate(-540deg) scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes spin-out-180 {
+  from {
+    transform: rotate(0) scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: rotate(540deg) scale(0);
+    opacity: 0;
+  }
+}
+
+@keyframes zoom-in-110 {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes elastic-in {
+  0% {
+    transform: scale(0.3);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.15);
+  }
+  75% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes elastic-out {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.3);
+    opacity: 0;
+  }
+}
+
+@keyframes spring-in {
+  0% {
+    transform: scale(0.9) translateY(20px);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05) translateY(-10px);
+  }
+  100% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes spring-out {
+  0% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.9) translateY(20px);
+    opacity: 0;
+  }
+}
+
+/* MoonUI Pro Component Styles - Standalone with Theming Support */
+@layer components {
+  /* ======================
+     TOGGLE COMPONENT
+     ====================== */
+  .moonui-toggle-base {
+    @apply inline-flex items-center justify-center rounded-md text-sm font-medium;
+    @apply ring-offset-background transition-all duration-200;
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+    @apply disabled:pointer-events-none disabled:opacity-50;
+    color: hsl(var(--foreground));
+  }
+  
+  .dark .moonui-toggle-base {
+    color: hsl(var(--foreground));
+  }
+
+  .dark .moonui-toggle-default:hover {
+    background-color: hsl(var(--muted));
+    color: hsl(var(--muted-foreground));
+  }
+  
+  .dark .moonui-toggle-default[data-state="on"] {
+    background-color: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .dark .moonui-toggle-secondary:hover {
+    background-color: hsl(var(--accent) / 0.2);
+    color: hsl(var(--accent-foreground));
+  }
+  
+  .dark .moonui-toggle-secondary[data-state="on"] {
+    background-color: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  /* ======================
+     BUTTON COMPONENT
+     ====================== */
+  .moonui-button-base {
+    @apply inline-flex items-center justify-center rounded-md text-sm font-medium;
+    @apply ring-offset-background transition-colors duration-200;
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+    @apply disabled:pointer-events-none disabled:opacity-50;
+  }
+
+  /* ======================
+     CARD COMPONENT
+     ====================== */
+  .moonui-card-base {
+    @apply rounded-lg border bg-card text-card-foreground shadow-sm;
+  }
+
+  .moonui-card-header {
+    @apply flex flex-col space-y-1.5 p-6;
+  }
+
+  .moonui-card-title {
+    @apply text-2xl font-semibold leading-none tracking-tight;
+  }
+
+  .moonui-card-description {
+    @apply text-sm text-muted-foreground;
+  }
+
+  .moonui-card-content {
+    @apply p-6 pt-0;
+  }
+
+  .moonui-card-footer {
+    @apply flex items-center p-6 pt-0;
+  }
+
+  /* ======================
+     INPUT COMPONENT
+     ====================== */
+  .moonui-input-base {
+    @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2;
+    @apply text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium;
+    @apply placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2;
+    @apply focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  /* ======================
+     LABEL COMPONENT
+     ====================== */
+  .moonui-label-base {
+    @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
+  }
+
+  /* ======================
+     DIALOG COMPONENT
+     ====================== */
+  .moonui-dialog-overlay {
+    @apply fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out;
+    @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+  }
+
+  .moonui-dialog-content {
+    @apply fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%];
+    @apply gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in;
+    @apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+    @apply data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2;
+    @apply data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2;
+    @apply data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg;
+  }
+
+  /* ======================
+     ALERT COMPONENT
+     ====================== */
+  .moonui-alert-base {
+    @apply relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute;
+    @apply [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground;
+  }
+
+  .moonui-alert-destructive {
+    @apply border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive;
+  }
+
+  /* ======================
+     BADGE COMPONENT
+     ====================== */
+  .moonui-badge-base {
+    @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold;
+    @apply transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
+  }
+
+  .moonui-badge-default {
+    @apply border-transparent bg-primary text-primary-foreground hover:bg-primary/80;
+  }
+
+  .moonui-badge-secondary {
+    @apply border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80;
+  }
+
+  .moonui-badge-destructive {
+    @apply border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80;
+  }
+
+  .moonui-badge-outline {
+    @apply text-foreground;
+  }
+
+  /* ======================
+     TABLE COMPONENT
+     ====================== */
+  .moonui-table-base {
+    @apply w-full caption-bottom text-sm;
+  }
+
+  .moonui-table-header {
+    @apply [&_tr]:border-b;
+  }
+
+  .moonui-table-body {
+    @apply [&_tr:last-child]:border-0;
+  }
+
+  .moonui-table-footer {
+    @apply border-t bg-muted/50 font-medium [&>tr]:last:border-b-0;
+  }
+
+  .moonui-table-row {
+    @apply border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted;
+  }
+
+  .moonui-table-head {
+    @apply h-12 px-4 text-left align-middle font-medium text-muted-foreground;
+    @apply [&:has([role=checkbox])]:pr-0;
+  }
+
+  .moonui-table-cell {
+    @apply p-4 align-middle [&:has([role=checkbox])]:pr-0;
+  }
+
+  /* ======================
+     SHEET COMPONENT
+     ====================== */
+  .moonui-sheet-overlay {
+    @apply fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out;
+    @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+  }
+
+  .moonui-sheet-content {
+    @apply fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out;
+    @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300;
+    @apply data-[state=open]:duration-500;
+  }
+
+  /* ======================
+     TOOLTIP COMPONENT
+     ====================== */
+  .moonui-tooltip-content {
+    @apply z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground;
+    @apply shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out;
+    @apply data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
+    @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2;
+    @apply data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+  }
+
+  /* ======================
+     SCROLL AREA COMPONENT
+     ====================== */
+  .moonui-scrollbar {
+    @apply flex touch-none select-none transition-colors;
+  }
+
+  .moonui-scrollbar-vertical {
+    @apply h-full w-2.5 border-l border-l-transparent p-[1px];
+  }
+
+  .moonui-scrollbar-horizontal {
+    @apply h-2.5 w-full border-t border-t-transparent p-[1px];
+  }
+
+  .moonui-scrollbar-thumb {
+    @apply relative flex-1 rounded-full bg-border;
+  }
+
+  /* ======================
+     PROGRESS COMPONENT
+     ====================== */
+  .moonui-progress-base {
+    @apply relative h-4 w-full overflow-hidden rounded-full bg-secondary;
+  }
+
+  .moonui-progress-indicator {
+    @apply h-full w-full flex-1 bg-primary transition-all;
+  }
+
+  /* ======================
+     SWITCH COMPONENT
+     ====================== */
+  .moonui-switch-base {
+    @apply peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2;
+    @apply border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2;
+    @apply focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+    @apply disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary;
+    @apply data-[state=unchecked]:bg-input;
+  }
+
+  .moonui-switch-thumb {
+    @apply pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0;
+    @apply transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0;
+  }
+
+  /* ======================
+     PRO COMPONENTS
+     ====================== */
+  
+  /* File Upload Component */
+  .moonui-file-upload-base {
+    @apply relative flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2;
+    @apply border-dashed border-muted-foreground/25 p-6 text-center transition-colors;
+    @apply hover:border-muted-foreground/50 hover:bg-muted/25;
+  }
+
+  .moonui-file-upload-active {
+    @apply border-primary bg-primary/5;
+  }
+
+  /* Data Table Component */
+  .moonui-data-table-base {
+    @apply relative w-full overflow-auto;
+  }
+
+  .moonui-data-table-header {
+    @apply border-b bg-muted/50;
+  }
+
+  .moonui-data-table-row {
+    @apply border-b transition-colors hover:bg-muted/50;
+  }
+
+  .moonui-data-table-cell {
+    @apply p-4 align-middle;
+  }
+
+  /* Calendar Pro Component */
+  .moonui-calendar-pro-base {
+    @apply flex h-full w-full bg-background;
+  }
+
+  .moonui-calendar-sidebar {
+    @apply border-r bg-muted/30 flex flex-col flex-shrink-0;
+  }
+
+  .moonui-calendar-event {
+    @apply absolute left-0 right-0 rounded px-2 py-1 text-xs;
+    @apply cursor-pointer transition-colors hover:opacity-80;
+  }
+
+  /* Chart Components */
+  .moonui-chart-container {
+    @apply relative w-full;
+  }
+
+  .moonui-chart-tooltip {
+    @apply rounded-lg border bg-background px-3 py-2 text-sm shadow-md;
+  }
+
+  .moonui-chart-legend {
+    @apply flex items-center justify-center gap-4 text-sm;
+  }
+
+  /* Gesture Drawer Component */
+  .moonui-gesture-drawer-base {
+    @apply fixed bg-background shadow-2xl overflow-hidden;
+  }
+
+  .moonui-gesture-drawer-handle {
+    @apply absolute bg-muted-foreground/20 transition-all duration-200;
+    @apply cursor-grab active:cursor-grabbing;
+  }
+
+  .moonui-gesture-drawer-backdrop {
+    @apply fixed inset-0 bg-black/50 backdrop-blur-sm;
+  }
+
+  /* Hover Card 3D Component */
+  .moonui-hover-card-3d-base {
+    @apply relative rounded-lg border bg-card text-card-foreground shadow-sm;
+    @apply transition-all duration-200 will-change-transform;
+  }
+
+  /* Media Gallery Component */
+  .moonui-media-gallery-base {
+    @apply grid gap-4;
+  }
+
+  .moonui-media-gallery-item {
+    @apply relative overflow-hidden rounded-lg bg-muted;
+    @apply cursor-pointer transition-transform hover:scale-105;
+  }
+
+  .moonui-media-gallery-overlay {
+    @apply absolute inset-0 bg-black/60 opacity-0 transition-opacity;
+    @apply flex items-center justify-center hover:opacity-100;
+  }
+
+  /* Tags Input Component */
+  .moonui-tags-input-base {
+    @apply min-h-10 w-full rounded-md border border-input bg-background px-3 py-2;
+    @apply text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring;
+    @apply focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  .moonui-tags-input-tag {
+    @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold;
+    @apply transition-colors bg-secondary text-secondary-foreground hover:bg-secondary/80;
+  }
+
+  .moonui-tags-input-remove {
+    @apply ml-1 h-3 w-3 rounded-full outline-none ring-offset-background;
+    @apply focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-destructive hover:text-destructive-foreground;
+  }
+
+  /* Advanced Chart Components */
+  .moonui-advanced-chart-base {
+    @apply w-full rounded-lg border bg-card p-6;
+  }
+
+  .moonui-advanced-chart-header {
+    @apply mb-4 flex items-center justify-between;
+  }
+
+  .moonui-advanced-chart-title {
+    @apply text-lg font-semibold;
+  }
+
+  .moonui-advanced-chart-controls {
+    @apply flex items-center gap-2;
+  }
+
+  /* Pro Access Control */
+  .moonui-pro-upgrade-card {
+    @apply w-fit mx-auto rounded-lg border bg-card text-card-foreground shadow-sm;
+  }
+
+  .moonui-pro-upgrade-content {
+    @apply py-6 text-center;
+  }
+
+  .moonui-pro-upgrade-icon {
+    @apply rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto;
+  }
+
+  .moonui-pro-upgrade-title {
+    @apply font-semibold text-sm mb-2;
+  }
+
+  .moonui-pro-upgrade-description {
+    @apply text-muted-foreground text-xs mb-4;
+  }
+
+  /* Loading States */
+  .moonui-loading-spinner {
+    @apply h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent;
+  }
+
+  .moonui-loading-skeleton {
+    @apply animate-pulse rounded-md bg-muted;
+  }
+
+  /* Form Components */
+  .moonui-form-field {
+    @apply space-y-2;
+  }
+
+  .moonui-form-label {
+    @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
+  }
+
+  .moonui-form-description {
+    @apply text-sm text-muted-foreground;
+  }
+
+  .moonui-form-message {
+    @apply text-sm font-medium text-destructive;
+  }
+
+  /* Animation Utilities */
+  .moonui-fade-in {
+    @apply animate-in fade-in-0 duration-200;
+  }
+
+  .moonui-fade-out {
+    @apply animate-out fade-out-0 duration-200;
+  }
+
+  .moonui-slide-in-bottom {
+    @apply animate-in slide-in-from-bottom-2 duration-200;
+  }
+
+  .moonui-slide-out-bottom {
+    @apply animate-out slide-out-to-bottom-2 duration-200;
+  }
+
+  .moonui-zoom-in {
+    @apply animate-in zoom-in-95 duration-200;
+  }
+
+  .moonui-zoom-out {
+    @apply animate-out zoom-out-95 duration-200;
+  }
+}
+
 /* Dashboard Grid Layout Overrides */
 .react-grid-layout {
   position: relative !important;

package/src/use-performance-optimizer.ts

@@ -136,7 +136,7 @@ export function useDebouncePerformance<T extends (...args: any[]) => void>(
   callback: T,
   delay: number = 300
 ): T {
-  const timeoutRef = React.useRef<NodeJS.Timeout>();
+  const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
   
   const debouncedCallback = React.useCallback(
     (...args: Parameters<T>) => {

package/src/utils/chart-helpers.ts

@@ -155,7 +155,7 @@ export function detectOutliers(data: ChartDataPoint[], key: string, threshold: n
       ...point,
       [`${key}_outlier`]: zScore > threshold,
       [`${key}_zscore`]: Math.round(zScore * 100) / 100,
-    }
+    } as ChartDataPoint
   })
 }