@moontra/moonui 2.1.9 → 2.2.1

package/src/styles/index.css

@@ -1,4 +1,317 @@
 /* MoonUI - Complete CSS System */
-@import "./tailwind.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import "./tokens.css";
-@import "./design-system.css";
+@import "./design-system.css";
+
+/* ======================
+   MOONUI COMPONENT STYLES
+   ====================== */
+
+@layer components {
+  /* ======================
+     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;
+  }
+
+  /* ======================
+     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));
+  }
+
+  /* ======================
+     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;
+  }
+
+  /* ======================
+     CHECKBOX COMPONENT
+     ====================== */
+  .moonui-checkbox-base {
+    @apply peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background;
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+    @apply disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary;
+    @apply data-[state=checked]:text-primary-foreground;
+  }
+
+  /* ======================
+     RADIO GROUP COMPONENT
+     ====================== */
+  .moonui-radio-base {
+    @apply aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background;
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+    @apply disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  /* ======================
+     SELECT COMPONENT
+     ====================== */
+  .moonui-select-trigger {
+    @apply flex h-10 w-full items-center justify-between rounded-md border border-input;
+    @apply bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground;
+    @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
+    @apply disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  .moonui-select-content {
+    @apply relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover;
+    @apply text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out;
+    @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95;
+    @apply data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2;
+  }
+
+  /* ======================
+     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;
+  }
+
+  /* ======================
+     SKELETON COMPONENT
+     ====================== */
+  .moonui-skeleton-base {
+    @apply animate-pulse rounded-md bg-muted;
+  }
+
+  /* ======================
+     AVATAR COMPONENT
+     ====================== */
+  .moonui-avatar-base {
+    @apply relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full;
+  }
+
+  .moonui-avatar-image {
+    @apply aspect-square h-full w-full;
+  }
+
+  .moonui-avatar-fallback {
+    @apply flex h-full w-full items-center justify-center rounded-full bg-muted;
+  }
+
+  /* ======================
+     ACCORDION COMPONENT
+     ====================== */
+  .moonui-accordion-item {
+    @apply border-b;
+  }
+
+  .moonui-accordion-trigger {
+    @apply flex flex-1 items-center justify-between py-4 font-medium transition-all;
+    @apply hover:underline [&[data-state=open]>svg]:rotate-180;
+  }
+
+  .moonui-accordion-content {
+    @apply overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up;
+    @apply data-[state=open]:animate-accordion-down;
+  }
+
+  /* ======================
+     TABS COMPONENT
+     ====================== */
+  .moonui-tabs-list {
+    @apply inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground;
+  }
+
+  .moonui-tabs-trigger {
+    @apply inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5;
+    @apply text-sm font-medium ring-offset-background transition-all focus-visible:outline-none;
+    @apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+    @apply disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background;
+    @apply data-[state=active]:text-foreground data-[state=active]:shadow-sm;
+  }
+
+  .moonui-tabs-content {
+    @apply mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2;
+    @apply focus-visible:ring-ring focus-visible:ring-offset-2;
+  }
+
+  /* ======================
+     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;
+  }
+
+  /* ======================
+     SLIDER COMPONENT
+     ====================== */
+  .moonui-slider-base {
+    @apply relative flex w-full touch-none select-none items-center;
+  }
+
+  .moonui-slider-track {
+    @apply relative h-2 w-full grow overflow-hidden rounded-full bg-secondary;
+  }
+
+  .moonui-slider-range {
+    @apply absolute h-full bg-primary;
+  }
+
+  .moonui-slider-thumb {
+    @apply block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background;
+    @apply transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring;
+    @apply focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  }
+}

package/src/use-performance-optimizer.ts

@@ -19,11 +19,11 @@ export function usePerformanceOptimizer() {
       const componentMetrics = performanceProfiler.getMeasurements('component');
       if (componentMetrics.length > 0) {
         const slowComponents = componentMetrics
-          .filter(m => m.duration > 16.67) // Slower than 60fps
-          .sort((a, b) => b.duration - a.duration)
+          .filter((m: any) => m.duration > 16.67) // Slower than 60fps
+          .sort((a: any, b: any) => b.duration - a.duration)
           .slice(0, 5);
 
-        slowComponents.forEach(component => {
+        slowComponents.forEach((component: any) => {
           suggestions.push({
             type: 'component',
             severity: component.duration > 50 ? 'high' : 'medium',
@@ -55,7 +55,7 @@ export function usePerformanceOptimizer() {
       // Analyze layout shifts
       const layoutShifts = performanceProfiler.getMeasurements('layout-shift');
       if (layoutShifts.length > 0) {
-        const totalShift = layoutShifts.reduce((sum, shift) => sum + (shift.value || 0), 0);
+        const totalShift = layoutShifts.reduce((sum: any, shift: any) => sum + (shift.value || 0), 0);
         
         if (totalShift > 0.1) {
           suggestions.push({
@@ -112,9 +112,9 @@ export function useRenderOptimization<T>(
   React.useEffect(() => {
     if (process.env.NODE_ENV === 'development') {
       const componentName = 'useRenderOptimization';
-      performanceProfiler.measureComponent(componentName, () => {
-        // Measure the impact of memoization
-      });
+      const endMeasure = performanceProfiler.measureComponent(componentName);
+      // Measure the impact of memoization
+      endMeasure();
     }
   }, dependencies);
 
@@ -126,7 +126,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>) => {
@@ -135,9 +135,9 @@ export function useDebouncePerformance<T extends (...args: any[]) => void>(
       }
       
       timeoutRef.current = setTimeout(() => {
-        performanceProfiler.measureComponent('debounced-callback', () => {
-          callback(...args);
-        });
+        const endMeasure = performanceProfiler.measureComponent('debounced-callback');
+        callback(...args);
+        endMeasure();
       }, delay);
     },
     [callback, delay]
@@ -167,9 +167,9 @@ export function useThrottlePerformance<T extends (...args: any[]) => void>(
       
       if (now - lastCallRef.current >= delay) {
         lastCallRef.current = now;
-        performanceProfiler.measureComponent('throttled-callback', () => {
-          callback(...args);
-        });
+        const endMeasure = performanceProfiler.measureComponent('throttled-callback');
+        callback(...args);
+        endMeasure();
       }
     },
     [callback, delay]
@@ -187,16 +187,16 @@ export function useComponentLifecycleTracking(componentName: string) {
     // Component mount
     mountTime.current = performance.now();
     
-    performanceProfiler.measureComponent(`${componentName}-mount`, () => {
-      // Measure mount time
-    });
+    const endMountMeasure = performanceProfiler.measureComponent(`${componentName}-mount`);
+    // Measure mount time
+    endMountMeasure();
 
     return () => {
       // Component unmount
       const lifetime = performance.now() - mountTime.current;
-      performanceProfiler.measureComponent(`${componentName}-unmount`, () => {
-        // Record component lifetime
-      });
+      const endUnmountMeasure = performanceProfiler.measureComponent(`${componentName}-unmount`);
+      // Record component lifetime
+      endUnmountMeasure();
     };
   }, [componentName]);
 
@@ -205,9 +205,9 @@ export function useComponentLifecycleTracking(componentName: string) {
     updateCount.current++;
     
     if (updateCount.current > 1) {
-      performanceProfiler.measureComponent(`${componentName}-update`, () => {
-        // Measure update time
-      });
+      const endUpdateMeasure = performanceProfiler.measureComponent(`${componentName}-update`);
+      // Measure update time
+      endUpdateMeasure();
     }
   });
 
@@ -271,9 +271,9 @@ export function useLazyImageOptimization(src: string, threshold: number = 0.1) {
           
           img.onload = () => {
             const loadTime = performance.now() - startTime;
-            performanceProfiler.measureComponent('image-load', () => {
-              // Record image load time
-            });
+            const endImageMeasure = performanceProfiler.measureComponent('image-load');
+            // Record image load time
+            endImageMeasure();
             setIsLoaded(true);
           };
           

package/src/use-scroll-animation.ts

@@ -12,10 +12,9 @@ interface UseScrollAnimationOptions {
 export function useScrollAnimation(options: UseScrollAnimationOptions = {}) {
   const ref = useRef<HTMLElement>(null)
   const isInView = useInView(ref, {
-    threshold: options.threshold || 0.1,
+    amount: options.threshold || 0.1,
     once: options.triggerOnce ?? true,
-    margin: options.rootMargin || '-100px',
-  })
+  } as any)
 
   return { ref, isInView }
 }
@@ -106,9 +105,8 @@ export function useInfiniteScroll(
 ) {
   const ref = useRef<HTMLElement>(null)
   const isInView = useInView(ref, {
-    threshold: options.threshold || 0.1,
-    margin: options.rootMargin || '100px',
-  })
+    amount: options.threshold || 0.1,
+  } as any)
 
   useEffect(() => {
     if (isInView) {
@@ -153,7 +151,7 @@ export function useScrollTriggeredCounter(
   const ref = useRef<HTMLElement>(null)
   
   const isInView = useInView(ref, {
-    threshold: 0.5,
+    amount: 0.5,
     once: true
   })