@moontra/moonui 2.1.4 → 2.1.7

package/src/components/ui/collapsible.tsx

@@ -14,7 +14,7 @@ import { cn } from "../../lib/utils"
  * Tema sistemiyle tam entegre, erişilebilir ve özelleştirilebilir.
  */
 
-const MoonUICollapsible = CollapsiblePrimitive.Root
+const Collapsible = CollapsiblePrimitive.Root
 
 const collapsibleTriggerVariants = cva(
   "flex w-full items-center justify-between transition-all",
@@ -39,11 +39,11 @@ const collapsibleTriggerVariants = cva(
   }
 )
 
-interface MoonUICollapsibleTriggerProps 
+interface CollapsibleTriggerProps 
   extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>,
     VariantProps<typeof collapsibleTriggerVariants> {}
 
-const MoonUICollapsibleTrigger = React.forwardRef<
+const CollapsibleTrigger = React.forwardRef<
   React.ElementRef<typeof CollapsiblePrimitive.Trigger>,
   CollapsibleTriggerProps
 >(({ className, children, variant, size, asChild, ...props }, ref) => {
@@ -97,11 +97,11 @@ const collapsibleContentVariants = cva(
   }
 )
 
-interface MoonUICollapsibleContentProps 
+interface CollapsibleContentProps 
   extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>,
     VariantProps<typeof collapsibleContentVariants> {}
 
-const MoonUICollapsibleContent = React.forwardRef<
+const CollapsibleContent = React.forwardRef<
   React.ElementRef<typeof CollapsiblePrimitive.Content>,
   CollapsibleContentProps
 >(({ className, children, variant, size, ...props }, ref) => (
@@ -115,15 +115,13 @@ const MoonUICollapsibleContent = React.forwardRef<
 ))
 CollapsibleContent.displayName = CollapsiblePrimitive.Content.displayName
 
-export { MoonUICollapsible,
-  MoonUICollapsibleTrigger,
-  MoonUICollapsibleContent,
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
   collapsibleTriggerVariants,
   collapsibleContentVariants,
- };
-
-// Backward compatibility exports
-export { MoonUICollapsible as Collapsible, MoonUICollapsibleTrigger as CollapsibleTrigger, MoonUICollapsibleContent as CollapsibleContent }
+}
 
 export type {
   CollapsibleTriggerProps,

package/src/components/ui/color-picker.tsx

@@ -131,7 +131,7 @@ function hslToHex(h: number, s: number, l: number): string {
   );
 }
 
-export interface MoonUIColorPickerProps
+export interface ColorPickerProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value">,
     VariantProps<typeof colorPickerVariants> {
   /**
@@ -661,4 +661,4 @@ export function GradientPicker({
 }
 
 // Re-export icons used
-export { Palette, Pipette  } from "lucide-react";
+export { Palette, Pipette } from "lucide-react";

package/src/components/ui/command.tsx

@@ -38,11 +38,11 @@ const commandVariants = cva(
 )
 
 // Command bileşeni - cmdk primitive wrapper
-interface MoonUICommandProps 
+interface CommandProps 
   extends React.ComponentProps<typeof CommandPrimitive>,
     VariantProps<typeof commandVariants> {}
 
-const MoonUICommand = React.forwardRef<
+const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
   CommandProps
 >(({ className, variant, size, ...props }, ref) => (
@@ -81,10 +81,10 @@ const CommandDialog = ({
 }
 
 // CommandInput bileşeni
-interface MoonUICommandInputProps 
+interface CommandInputProps 
   extends React.ComponentProps<typeof CommandPrimitive.Input> {}
 
-const MoonUICommandInput = React.forwardRef<
+const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   CommandInputProps
 >(({ className, ...props }, ref) => (
@@ -103,10 +103,10 @@ const MoonUICommandInput = React.forwardRef<
 CommandInput.displayName = CommandPrimitive.Input.displayName
 
 // CommandList bileşeni
-interface MoonUICommandListProps 
+interface CommandListProps 
   extends React.ComponentProps<typeof CommandPrimitive.List> {}
 
-const MoonUICommandList = React.forwardRef<
+const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
   CommandListProps
 >(({ className, ...props }, ref) => (
@@ -119,10 +119,10 @@ const MoonUICommandList = React.forwardRef<
 CommandList.displayName = CommandPrimitive.List.displayName
 
 // CommandEmpty bileşeni
-interface MoonUICommandEmptyProps 
+interface CommandEmptyProps 
   extends React.ComponentProps<typeof CommandPrimitive.Empty> {}
 
-const MoonUICommandEmpty = React.forwardRef<
+const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   CommandEmptyProps
 >(({ className, ...props }, ref) => (
@@ -135,10 +135,10 @@ const MoonUICommandEmpty = React.forwardRef<
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 
 // CommandGroup bileşeni
-interface MoonUICommandGroupProps 
+interface CommandGroupProps 
   extends React.ComponentProps<typeof CommandPrimitive.Group> {}
 
-const MoonUICommandGroup = React.forwardRef<
+const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
   CommandGroupProps
 >(({ className, ...props }, ref) => (
@@ -154,10 +154,10 @@ const MoonUICommandGroup = React.forwardRef<
 CommandGroup.displayName = CommandPrimitive.Group.displayName
 
 // CommandSeparator bileşeni
-interface MoonUICommandSeparatorProps 
+interface CommandSeparatorProps 
   extends React.ComponentProps<typeof CommandPrimitive.Separator> {}
 
-const MoonUICommandSeparator = React.forwardRef<
+const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
   CommandSeparatorProps
 >(({ className, ...props }, ref) => (
@@ -170,10 +170,10 @@ const MoonUICommandSeparator = React.forwardRef<
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName
 
 // CommandItem bileşeni
-interface MoonUICommandItemProps 
+interface CommandItemProps 
   extends React.ComponentProps<typeof CommandPrimitive.Item> {}
 
-const MoonUICommandItem = React.forwardRef<
+const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
   CommandItemProps
 >(({ className, ...props }, ref) => (
@@ -189,7 +189,7 @@ const MoonUICommandItem = React.forwardRef<
 CommandItem.displayName = CommandPrimitive.Item.displayName
 
 // CommandShortcut bileşeni - utility component
-const MoonUICommandShortcut = ({
+const CommandShortcut = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
@@ -203,18 +203,16 @@ const MoonUICommandShortcut = ({
     />
   )
 }
-MoonUICommandShortcut.displayName = "MoonUICommandShortcut"
+CommandShortcut.displayName = "CommandShortcut"
 
-export { MoonUICommand,
+export {
+  Command,
   CommandDialog,
-  MoonUICommandInput,
-  MoonUICommandList,
-  MoonUICommandEmpty,
-  MoonUICommandGroup,
-  MoonUICommandItem,
-  MoonUICommandShortcut,
-  MoonUICommandSeparator,
- };
-
-// Backward compatibility exports
-export { MoonUICommand as Command, MoonUIDialog as Dialog, MoonUIInput as Input, MoonUISeparator as Separator, MoonUICommandInput as CommandInput, MoonUICommandEmpty as CommandEmpty, MoonUICommandGroup as CommandGroup, MoonUICommandItem as CommandItem, MoonUICommandList as CommandList, MoonUICommandSeparator as CommandSeparator, MoonUICommandShortcut as CommandShortcut }
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

package/src/components/ui/component-analysis-report.md

@@ -0,0 +1,118 @@
+# MoonUI Component Analysis Report
+
+## Summary
+
+Total components in `/src/components/ui/`: **55 files**
+
+### Component Categories
+
+#### 🎯 Pro Components (24 components)
+These are wrapper components that require the `@moontra/moonui-pro` package:
+
+1. **advanced-chart.tsx** - Advanced charting component (wrapper)
+2. **animated-button.tsx** - Button with animations (wrapper)
+3. **calendar.tsx** - Calendar component (wrapper)
+4. **dashboard.tsx** - Dashboard layout component (wrapper)
+5. **draggable-list.tsx** - Draggable list component (wrapper)
+6. **error-boundary.tsx** - Error boundary component (wrapper)
+7. **file-upload.tsx** - File upload component (wrapper)
+8. **floating-action-button.tsx** - FAB component (wrapper)
+9. **github-stars.tsx** - GitHub stars display (wrapper)
+10. **health-check.tsx** - Health check monitoring (wrapper)
+11. **hover-card-3d.tsx** - 3D hover effect card (wrapper)
+12. **kanban.tsx** - Kanban board component (wrapper)
+13. **lazy-component.tsx** - Lazy loading component (wrapper)
+14. **magnetic-button.tsx** - Magnetic effect button (wrapper)
+15. **memory-efficient-data.tsx** - Memory optimized data display (wrapper)
+16. **optimized-image.tsx** - Optimized image component (wrapper)
+17. **performance-debugger.tsx** - Performance debugging tool (wrapper)
+18. **performance-monitor.tsx** - Performance monitoring tool (wrapper)
+19. **pinch-zoom.tsx** - Pinch zoom component (wrapper)
+20. **rich-text-editor.tsx** - Rich text editor (wrapper)
+21. **spotlight-card.tsx** - Spotlight effect card (wrapper)
+22. **swipeable-card.tsx** - Swipeable card component (wrapper)
+23. **timeline.tsx** - Timeline component (wrapper)
+24. **virtual-list.tsx** - Virtual scrolling list (wrapper)
+
+#### ✅ Free Components - Fully Implemented (23 components)
+These components have complete implementations:
+
+1. **aspect-ratio.tsx** - Aspect ratio container
+2. **avatar.tsx** - Avatar component with variants
+3. **badge.tsx** - Badge component with variants
+4. **breadcrumb.tsx** - Breadcrumb navigation
+5. **button.tsx** - Button component with 12 variants (primary, secondary, outline, ghost, destructive, success, link, gradient, glow, soft, glass, neon)
+6. **card.tsx** - Card container components
+7. **checkbox.tsx** - Checkbox with variants
+8. **collapsible.tsx** - Collapsible content component
+9. **color-picker.tsx** - Color picker component
+10. **command.tsx** - Command palette component
+11. **date-picker.tsx** - Date picker with calendar
+12. **dialog.tsx** - Dialog/Modal component
+13. **gesture-drawer.tsx** - Gesture-enabled drawer
+14. **input.tsx** - Input field with variants
+15. **label.tsx** - Label component
+16. **pagination.tsx** - Pagination component
+17. **popover.tsx** - Popover component
+18. **radio-group.tsx** - Radio group component
+19. **select.tsx** - Select dropdown component
+20. **simple-editor.tsx** - Simple text editor
+21. **slider.tsx** - Slider component
+22. **switch.tsx** - Toggle switch component
+23. **table.tsx** - Table component with sorting
+24. **tabs.tsx** - Tabs component
+25. **toggle.tsx** - Toggle button component
+26. **tooltip.tsx** - Tooltip component
+
+#### ❌ Empty/Placeholder Components (8 components)
+These files exist but are empty or contain only comments:
+
+1. **accordion.tsx** - Empty file (21 bytes)
+2. **alert.tsx** - Empty file (21 bytes)
+3. **dropdown-menu.tsx** - Empty file (21 bytes)
+4. **progress.tsx** - Empty file (21 bytes)
+5. **separator.tsx** - Empty file (21 bytes)
+6. **skeleton.tsx** - Empty file (21 bytes)
+7. **textarea.tsx** - Empty file (21 bytes)
+8. **toast.tsx** - Empty file (21 bytes)
+
+## Component Status Summary
+
+| Status | Count | Percentage |
+|--------|-------|------------|
+| ✅ Free (Implemented) | 23 | 42% |
+| 🎯 Pro (Wrapper) | 24 | 44% |
+| ❌ Empty/Placeholder | 8 | 14% |
+| **Total** | **55** | **100%** |
+
+## Implementation Quality
+
+### Pro Component Wrappers
+All pro component wrappers follow a consistent pattern:
+- Proper TypeScript interfaces defined
+- Try-catch block to import from `@moontra/moonui-pro`
+- Fallback UI showing the component requires pro package
+- Proper exports for component and types
+
+### Free Components
+Free components show good implementation quality:
+- Built on Radix UI primitives where applicable
+- Use CVA (class-variance-authority) for variant management
+- Proper TypeScript typing
+- Forward ref pattern for DOM access
+- Consistent styling with Tailwind CSS
+- Dark mode support
+
+## Recommendations
+
+1. **Complete Empty Components**: The 8 empty components (accordion, alert, dropdown-menu, progress, separator, skeleton, textarea, toast) need to be implemented or removed.
+
+2. **Documentation**: All implemented components appear to be working correctly but would benefit from usage documentation.
+
+3. **Testing**: Consider adding tests for both free and pro components to ensure wrapper behavior works correctly.
+
+4. **Component Showcase**: The component showcase page should clearly distinguish between free and pro components for users.
+
+## Conclusion
+
+The MoonUI component library has a good foundation with 47 active components (23 free + 24 pro). The pro component wrapper pattern is well-implemented and consistent. The main area needing attention is the 8 empty placeholder files that should either be implemented or removed to avoid confusion.

package/src/components/ui/data-table.tsx

@@ -99,7 +99,7 @@ const dataTableVariants = cva(
   }
 );
 
-interface MoonUIDataTableProps<TData, TValue>
+interface DataTableProps<TData, TValue>
   extends VariantProps<typeof dataTableVariants> {
   /**
    * The table columns definition
@@ -620,4 +620,4 @@ export function createFilterableColumn<TData, TValue>(
 }
 
 // Export utilities
-export { type ColumnDef  } from "@tanstack/react-table";
+export { type ColumnDef } from "@tanstack/react-table";

package/src/components/ui/date-picker.tsx

@@ -4,16 +4,16 @@ import * as React from "react";
 import { format, isValid } from "date-fns";
 import { Calendar as CalendarIcon, Clock } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { MoonUIButton as Button } from "./button";
-import { MoonUICalendar as Calendar } from "./calendar";
+import { Button } from "./button";
+import { Calendar } from "./calendar";
 import {
-  MoonUIPopover as Popover,
-  MoonUIPopoverContent as PopoverContent,
-  MoonUIPopoverTrigger as PopoverTrigger,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
 } from "./popover";
 import { cva, type VariantProps } from "class-variance-authority";
 import { motion, AnimatePresence } from "framer-motion";
-import { microInteractionVariants } from "../../lib/micro-interactions";
+import { microInteractionVariants } from "@/lib/micro-interactions";
 
 /**
  * DatePicker Component
@@ -52,8 +52,8 @@ const datePickerVariants = cva(
   }
 );
 
-export interface MoonUIDatePickerProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">,
+export interface DatePickerProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value">,
     VariantProps<typeof datePickerVariants> {
   /**
    * Selected date value
@@ -597,7 +597,7 @@ export function MonthPicker({
 }
 
 // Re-export utilities
-export { format  } from "date-fns";
+export { format } from "date-fns";
 
 // Import ChevronLeft and ChevronRight for MonthPicker
 import { ChevronLeft, ChevronRight } from "lucide-react";

package/src/components/ui/dialog.tsx

@@ -15,10 +15,10 @@ import { cn } from "../../lib/utils";
  * Provides a premium appearance with dark and light mode compatibility and fluid animations.
  */
 
-const MoonUIDialog = DialogPrimitive.Root;
-const MoonUIDialogTrigger = DialogPrimitive.Trigger;
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
-const MoonUIDialogClose = DialogPrimitive.Close;
+const DialogClose = DialogPrimitive.Close;
 
 const overlayVariants = cva(
     "fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -111,7 +111,7 @@ const dialogContentVariants = cva(
     }
 );
 
-interface MoonUIDialogContentProps
+interface DialogContentProps
     extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'title'>,
         VariantProps<typeof dialogContentVariants> {
     /** X butonunu gizle */
@@ -134,7 +134,7 @@ interface MoonUIDialogContentProps
     onClose?: () => void;
 }
 
-const MoonUIDialogContent = React.forwardRef<
+const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     DialogContentProps
 >(
@@ -245,7 +245,7 @@ const MoonUIDialogContent = React.forwardRef<
 );
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const MoonUIDialogHeader = ({
+const DialogHeader = ({
     className,
     ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -257,9 +257,9 @@ const MoonUIDialogHeader = ({
         {...props}
     />
 );
-MoonUIDialogHeader.displayName = "MoonUIDialogHeader";
+DialogHeader.displayName = "DialogHeader";
 
-const MoonUIDialogFooter = ({
+const DialogFooter = ({
     className,
     ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -271,9 +271,9 @@ const MoonUIDialogFooter = ({
         {...props}
     />
 );
-MoonUIDialogFooter.displayName = "MoonUIDialogFooter";
+DialogFooter.displayName = "DialogFooter";
 
-const MoonUIDialogTitle = React.forwardRef<
+const DialogTitle = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Title>,
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
@@ -288,7 +288,7 @@ const MoonUIDialogTitle = React.forwardRef<
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const MoonUIDialogDescription = React.forwardRef<
+const DialogDescription = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Description>,
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
@@ -319,16 +319,14 @@ const DialogForm = React.forwardRef<
 ));
 DialogForm.displayName = "DialogForm";
 
-export { MoonUIDialog,
-    MoonUIDialogTrigger,
-    MoonUIDialogContent,
-    MoonUIDialogHeader,
-    MoonUIDialogFooter,
-    MoonUIDialogTitle,
-    MoonUIDialogDescription,
-    MoonUIDialogClose,
+export {
+    Dialog,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
     DialogForm,
- };
-
-// Backward compatibility exports
-export { MoonUIDialog as Dialog, MoonUIDialogContent as DialogContent, MoonUIDialogHeader as DialogHeader, MoonUIDialogFooter as DialogFooter, MoonUIDialogTitle as DialogTitle, MoonUIDialogDescription as DialogDescription, MoonUIDialogTrigger as DialogTrigger, MoonUIDialogClose as DialogClose };
+};

package/src/components/ui/draggable-list.tsx

@@ -0,0 +1,81 @@
+// Basic Draggable List - Free Version
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface DraggableListProps<T> {
+  items: T[]
+  onReorder: (items: T[]) => void
+  renderItem: (item: T, index: number) => React.ReactNode
+  keyExtractor: (item: T) => string
+  className?: string
+  disabled?: boolean
+}
+
+export function DraggableList<T>({
+  items,
+  onReorder,
+  renderItem,
+  keyExtractor,
+  className,
+  disabled = false
+}: DraggableListProps<T>) {
+  const [draggedIndex, setDraggedIndex] = React.useState<number | null>(null)
+
+  const handleDragStart = (e: React.DragEvent, index: number) => {
+    if (disabled) return
+    setDraggedIndex(index)
+    e.dataTransfer.effectAllowed = "move"
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "move"
+  }
+
+  const handleDrop = (e: React.DragEvent, dropIndex: number) => {
+    e.preventDefault()
+    
+    if (disabled || draggedIndex === null || draggedIndex === dropIndex) {
+      setDraggedIndex(null)
+      return
+    }
+
+    const newItems = [...items]
+    const draggedItem = newItems[draggedIndex]
+    
+    newItems.splice(draggedIndex, 1)
+    newItems.splice(dropIndex, 0, draggedItem)
+    
+    onReorder(newItems)
+    setDraggedIndex(null)
+  }
+
+  const handleDragEnd = () => {
+    setDraggedIndex(null)
+  }
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {items.map((item, index) => (
+        <div
+          key={keyExtractor(item)}
+          draggable={!disabled}
+          onDragStart={(e) => handleDragStart(e, index)}
+          onDragOver={handleDragOver}
+          onDrop={(e) => handleDrop(e, index)}
+          onDragEnd={handleDragEnd}
+          className={cn(
+            "transition-opacity duration-200",
+            !disabled && "cursor-move hover:opacity-80",
+            draggedIndex === index && "opacity-50",
+            disabled && "cursor-not-allowed"
+          )}
+        >
+          {renderItem(item, index)}
+        </div>
+      ))}
+    </div>
+  )
+}