@moontra/moonui 2.2.0 → 2.2.2

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

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"

package/src/components/ui/toast.tsx

@@ -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/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/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();

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;
+  }
+}