@moontra/moonui 2.1.9 → 2.2.1

package/src/components/ui/table.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -127,7 +129,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn("moonui-theme", "[&_tr]:border-b", className)} {...props} />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -148,7 +150,7 @@ const TableBody = React.forwardRef<
   return (
     <tbody
       ref={ref}
-      className={cn("[&_tr:last-child]:border-0", className)}
+      className={cn("moonui-theme", "[&_tr:last-child]:border-0", className)}
       {...props}
     >
       {hasChildren ? (
@@ -177,7 +179,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("bg-primary text-primary-foreground font-medium", className)}
+    className={cn("moonui-theme", "bg-primary text-primary-foreground font-medium", className)}
     {...props}
   />
 ));
@@ -290,7 +292,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn("moonui-theme", "p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
 ));
@@ -302,7 +304,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn("moonui-theme", "mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
 ));

package/src/components/ui/tabs.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -18,6 +20,7 @@ const Tabs = React.forwardRef<
 >(({ vertical = false, ...props }, ref) => (
   <TabsPrimitive.Root
     ref={ref}
+    className={cn("moonui-theme", props.className)}
     orientation={vertical ? "vertical" : "horizontal"}
     {...props}
   />
@@ -68,7 +71,7 @@ const TabsList = React.forwardRef<
 >(({ className, variant, orientation, fullWidth, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cn(tabsListVariants({ variant, orientation, fullWidth, className }))}
+    className={cn("moonui-theme", tabsListVariants({ variant, orientation, fullWidth, className }))}
     {...props}
   />
 ));
@@ -145,6 +148,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
+      "moonui-theme",
       tabsTriggerVariants({ variant, size, orientation, fullWidth }),
       fadeTabs && "data-[state=inactive]:opacity-60",
       className
@@ -182,6 +186,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
+      "moonui-theme",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       animated && "data-[state=active]:animate-fadeIn data-[state=inactive]:animate-fadeOut",
       className

package/src/components/ui/tags-input.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "./badge";
+
+export interface TagsInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+  value: string[];
+  onChange: (tags: string[]) => void;
+  maxTags?: number;
+  variant?: "primary" | "secondary" | "destructive" | "outline";
+  allowDuplicates?: boolean;
+  delimiter?: string;
+}
+
+const TagsInput = React.forwardRef<HTMLInputElement, TagsInputProps>(
+  (
+    {
+      value = [],
+      onChange,
+      maxTags,
+      variant = "primary",
+      allowDuplicates = false,
+      delimiter = ",",
+      placeholder = "Add tag and press Enter",
+      className,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const [inputValue, setInputValue] = React.useState("");
+    const [error, setError] = React.useState("");
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" || e.key === delimiter) {
+        e.preventDefault();
+        addTag();
+      } else if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
+        removeTag(value.length - 1);
+      }
+    };
+
+    const addTag = () => {
+      const tag = inputValue.trim();
+      
+      if (!tag) return;
+      
+      if (!allowDuplicates && value.includes(tag)) {
+        setError("This tag already exists");
+        setTimeout(() => setError(""), 2000);
+        return;
+      }
+      
+      if (maxTags && value.length >= maxTags) {
+        setError(`Maximum ${maxTags} tags allowed`);
+        setTimeout(() => setError(""), 2000);
+        return;
+      }
+      
+      onChange([...value, tag]);
+      setInputValue("");
+      setError("");
+    };
+
+    const removeTag = (index: number) => {
+      if (disabled) return;
+      onChange(value.filter((_, i) => i !== index));
+    };
+
+    return (
+      <div className="relative">
+        <div
+          className={cn(
+            "flex min-h-[2.5rem] w-full flex-wrap gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
+            "dark:bg-zinc-950/50 dark:border-zinc-800",
+            "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+            disabled && "cursor-not-allowed opacity-50",
+            className
+          )}
+        >
+          {value.map((tag, index) => (
+            <Badge
+              key={index}
+              variant={variant}
+              className="gap-1 pr-1.5"
+            >
+              <span className="text-xs">{tag}</span>
+              {!disabled && (
+                <button
+                  type="button"
+                  onClick={() => removeTag(index)}
+                  className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                >
+                  <X className="h-3 w-3 text-muted-foreground hover:text-foreground transition-colors" />
+                </button>
+              )}
+            </Badge>
+          ))}
+          <input
+            ref={ref}
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onBlur={addTag}
+            disabled={disabled}
+            placeholder={value.length === 0 ? placeholder : ""}
+            className={cn(
+              "flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+              "dark:placeholder:text-zinc-500",
+              "min-w-[120px]",
+              disabled && "cursor-not-allowed"
+            )}
+            {...props}
+          />
+        </div>
+        {error && (
+          <p className="mt-1 text-xs text-destructive">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+TagsInput.displayName = "TagsInput";
+
+export { TagsInput };

package/src/components/ui/textarea.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 
 import { cn } from "../../lib/utils"
@@ -31,7 +33,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   }, ref) => {
     return (
       <textarea
-        className={cn(
+        className={cn("moonui-theme", 
           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}

package/src/components/ui/toast.tsx

@@ -57,7 +57,7 @@ const Toast = React.forwardRef<
   return (
     <ToastPrimitives.Root
       ref={ref}
-      className={cn(toastVariants({ variant }), className)}
+      className={cn("moonui-theme", toastVariants({ variant }), className)}
       {...props}
     />
   );
@@ -103,7 +103,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    className={cn("moonui-theme", "text-sm font-semibold [&+div]:text-xs", className)}
     {...props}
   />
 ));
@@ -115,7 +115,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("text-sm opacity-90", className)}
+    className={cn("moonui-theme", "text-sm opacity-90", className)}
     {...props}
   />
 ));
@@ -207,6 +207,8 @@ const reducer = (state: State, action: any): State => {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
       };
+    default:
+      return state;
   }
 };
 

package/src/components/ui/toggle.tsx

@@ -36,12 +36,11 @@ const Toggle = React.forwardRef<
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive.Root
     ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
+    className={cn("moonui-theme", toggleVariants({ variant, size, className }))}
     {...props}
   />
 ))
 
 Toggle.displayName = TogglePrimitive.Root.displayName
 
-export { Toggle, toggleVariants }
-export type { ToggleProps }
+export { Toggle, toggleVariants }

package/src/components/ui/tooltip.tsx

@@ -43,7 +43,7 @@ const TooltipArrow = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TooltipPrimitive.Arrow
     ref={ref}
-    className={cn("fill-current", className)}
+    className={cn("moonui-theme", "fill-current", className)}
     {...props}
   />
 ))
@@ -62,7 +62,7 @@ const TooltipContent = React.forwardRef<
   <TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}
-    className={cn(tooltipVariants({ variant, size }), className)}
+    className={cn("moonui-theme", tooltipVariants({ variant, size }), className)}
     {...props}
   >
     {props.children}
@@ -80,7 +80,6 @@ export interface SimpleTooltipProps {
   side?: "top" | "right" | "bottom" | "left"
   align?: "start" | "center" | "end"
   delayDuration?: number
-  skipDelayDuration?: number
   sideOffset?: number
   showArrow?: boolean
   className?: string
@@ -102,7 +101,6 @@ const SimpleTooltip = React.forwardRef<
       side = "top",
       align = "center",
       delayDuration = 400,
-      skipDelayDuration = 300,
       sideOffset = 4,
       showArrow = false,
       className,
@@ -119,7 +117,6 @@ const SimpleTooltip = React.forwardRef<
         defaultOpen={defaultOpen}
         onOpenChange={onOpenChange}
         delayDuration={delayDuration}
-        skipDelayDuration={skipDelayDuration}
       >
         <TooltipTrigger asChild>{children}</TooltipTrigger>
         <TooltipContent

package/src/index.tsx

@@ -1,47 +1,5 @@
-// Core UI Components Export
-// Premium components with advanced features
+// Export all components with MoonUI prefix
+export * from "./components/ui";
 
-// Utilities
-export { cn } from "./lib/utils"
-
-export * from "./components/ui/accordion"
-export * from "./components/ui/alert"
-export * from "./components/ui/aspect-ratio"
-export * from "./components/ui/avatar"
-export * from "./components/ui/badge"
-export * from "./components/ui/breadcrumb"
-export * from "./components/ui/button"
-export * from "./components/ui/card"
-export * from "./components/ui/checkbox"
-export * from "./components/ui/collapsible"
-export * from "./components/ui/color-picker"
-export * from "./components/ui/command"
-export * from "./components/ui/data-table"
-export * from "./components/ui/date-picker"
-export * from "./components/ui/dialog"
-export * from "./components/ui/draggable-list"
-export * from "./components/ui/dropdown-menu"
-export * from "./components/ui/file-upload"
-export * from "./components/ui/gesture-drawer"
-export * from "./components/ui/github-stars"
-export * from "./components/ui/input"
-export * from "./components/ui/label"
-export * from "./components/ui/moon-logo"
-export * from "./components/ui/pagination"
-export * from "./components/ui/popover"
-export * from "./components/ui/progress"
-export * from "./components/ui/radio-group"
-export * from "./components/ui/rich-text-editor"
-export * from "./components/ui/select"
-export * from "./components/ui/separator"
-export * from "./components/ui/simple-editor"
-export * from "./components/ui/skeleton"
-export * from "./components/ui/slider"
-export * from "./components/ui/swipeable-card"
-export * from "./components/ui/switch"
-export * from "./components/ui/table"
-export * from "./components/ui/tabs"
-export * from "./components/ui/textarea"
-export * from "./components/ui/toast"
-export * from "./components/ui/toggle"
-export * from "./components/ui/tooltip"
+// Re-export utilities
+export { cn } from "./lib/utils";

package/src/lib/micro-interactions.ts

@@ -252,4 +252,5 @@ export const notificationAnimation = {
   transition: springAnimations.bouncy,
 };
 
-export type MicroInteractionProps = VariantProps<typeof microInteractionVariants>;
+export type MicroInteractionProps = VariantProps<typeof microInteractionVariants>;
+

package/src/lib/performance-profiler.ts

@@ -0,0 +1,79 @@
+export interface PerformanceMetric {
+  name: string;
+  duration: number;
+  timestamp: number;
+}
+
+export interface PerformanceSummary {
+  totalRenderTime: number;
+  componentCount: number;
+  averageRenderTime: number;
+  slowestComponent: string | null;
+  memoryUsage?: number;
+}
+
+class PerformanceProfiler {
+  private measurements: Map<string, PerformanceMetric[]> = new Map();
+
+  startMeasurement(category: string, name: string): () => void {
+    const startTime = performance.now();
+    
+    return () => {
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+      
+      if (!this.measurements.has(category)) {
+        this.measurements.set(category, []);
+      }
+      
+      this.measurements.get(category)!.push({
+        name,
+        duration,
+        timestamp: Date.now()
+      });
+    };
+  }
+
+  getMeasurements(category: string): PerformanceMetric[] {
+    return this.measurements.get(category) || [];
+  }
+
+  getPerformanceSummary(): PerformanceSummary {
+    const componentMetrics = this.getMeasurements('component');
+    
+    if (componentMetrics.length === 0) {
+      return {
+        totalRenderTime: 0,
+        componentCount: 0,
+        averageRenderTime: 0,
+        slowestComponent: null
+      };
+    }
+
+    const totalRenderTime = componentMetrics.reduce((sum, m) => sum + m.duration, 0);
+    const slowestComponent = componentMetrics.reduce((max, m) => 
+      m.duration > (max?.duration || 0) ? m : max, componentMetrics[0]);
+
+    return {
+      totalRenderTime,
+      componentCount: componentMetrics.length,
+      averageRenderTime: totalRenderTime / componentMetrics.length,
+      slowestComponent: slowestComponent.name,
+      memoryUsage: (performance as any).memory?.usedJSHeapSize
+    };
+  }
+
+  clearMeasurements(category?: string): void {
+    if (category) {
+      this.measurements.delete(category);
+    } else {
+      this.measurements.clear();
+    }
+  }
+
+  measureComponent(componentName: string): () => void {
+    return this.startMeasurement('component', componentName);
+  }
+}
+
+export const performanceProfiler = new PerformanceProfiler();