@moontra/moonui 2.1.5 → 2.1.7

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

package/src/components/ui/dropdown-menu.tsx

@@ -6,19 +6,19 @@ import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "../../lib/utils"
 
-const MoonUIDropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root
 
-const MoonUIDropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 
-const MoonUIDropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
 
-const MoonUIDropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 
-const MoonUIDropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
-const MoonUIDropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
-const MoonUIDropdownMenuSubTrigger = React.forwardRef<
+const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean
@@ -37,10 +37,10 @@ const MoonUIDropdownMenuSubTrigger = React.forwardRef<
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
-MoonUIDropdownMenuSubTrigger.displayName =
+DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName
 
-const MoonUIDropdownMenuSubContent = React.forwardRef<
+const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
@@ -53,10 +53,10 @@ const MoonUIDropdownMenuSubContent = React.forwardRef<
     {...props}
   />
 ))
-MoonUIDropdownMenuSubContent.displayName =
+DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName
 
-const MoonUIDropdownMenuContent = React.forwardRef<
+const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
@@ -72,9 +72,9 @@ const MoonUIDropdownMenuContent = React.forwardRef<
     />
   </DropdownMenuPrimitive.Portal>
 ))
-MoonUIDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
-const MoonUIDropdownMenuItem = React.forwardRef<
+const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean
@@ -90,9 +90,9 @@ const MoonUIDropdownMenuItem = React.forwardRef<
     {...props}
   />
 ))
-MoonUIDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
-const MoonUIDropdownMenuCheckboxItem = React.forwardRef<
+const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
@@ -113,10 +113,10 @@ const MoonUIDropdownMenuCheckboxItem = React.forwardRef<
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
 ))
-MoonUIDropdownMenuCheckboxItem.displayName =
+DropdownMenuCheckboxItem.displayName =
   DropdownMenuPrimitive.CheckboxItem.displayName
 
-const MoonUIDropdownMenuRadioItem = React.forwardRef<
+const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
@@ -136,9 +136,9 @@ const MoonUIDropdownMenuRadioItem = React.forwardRef<
     {children}
   </DropdownMenuPrimitive.RadioItem>
 ))
-MoonUIDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
-const MoonUIDropdownMenuLabel = React.forwardRef<
+const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean
@@ -154,9 +154,9 @@ const MoonUIDropdownMenuLabel = React.forwardRef<
     {...props}
   />
 ))
-MoonUIDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
-const MoonUIDropdownMenuSeparator = React.forwardRef<
+const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
@@ -166,9 +166,9 @@ const MoonUIDropdownMenuSeparator = React.forwardRef<
     {...props}
   />
 ))
-MoonUIDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
-const MoonUIDropdownMenuShortcut = ({
+const DropdownMenuShortcut = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
@@ -179,24 +179,22 @@ const MoonUIDropdownMenuShortcut = ({
     />
   )
 }
-MoonUIDropdownMenuShortcut.displayName = "MoonUIDropdownMenuShortcut"
-
-export { MoonUIDropdownMenu,
-  MoonUIDropdownMenuTrigger,
-  MoonUIDropdownMenuContent,
-  MoonUIDropdownMenuItem,
-  MoonUIDropdownMenuCheckboxItem,
-  MoonUIDropdownMenuRadioItem,
-  MoonUIDropdownMenuLabel,
-  MoonUIDropdownMenuSeparator,
-  MoonUIDropdownMenuShortcut,
-  MoonUIDropdownMenuGroup,
-  MoonUIDropdownMenuPortal,
-  MoonUIDropdownMenuSub,
-  MoonUIDropdownMenuSubContent,
-  MoonUIDropdownMenuSubTrigger,
-  MoonUIDropdownMenuRadioGroup,
- };
-
-// Backward compatibility exports
-export { MoonUICheckbox as Checkbox, MoonUIDropdownMenu as DropdownMenu, MoonUILabel as Label, MoonUIRadioGroup as RadioGroup, MoonUISeparator as Separator, MoonUIDropdownMenuTrigger as DropdownMenuTrigger, MoonUIDropdownMenuContent as DropdownMenuContent, MoonUIDropdownMenuItem as DropdownMenuItem, MoonUIDropdownMenuCheckboxItem as DropdownMenuCheckboxItem, MoonUIDropdownMenuRadioItem as DropdownMenuRadioItem, MoonUIDropdownMenuLabel as DropdownMenuLabel, MoonUIDropdownMenuSeparator as DropdownMenuSeparator, MoonUIDropdownMenuShortcut as DropdownMenuShortcut, MoonUIDropdownMenuGroup as DropdownMenuGroup, MoonUIDropdownMenuPortal as DropdownMenuPortal, MoonUIDropdownMenuSub as DropdownMenuSub, MoonUIDropdownMenuSubContent as DropdownMenuSubContent, MoonUIDropdownMenuSubTrigger as DropdownMenuSubTrigger, MoonUIDropdownMenuRadioGroup as DropdownMenuRadioGroup }
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/src/components/ui/file-upload.tsx

@@ -19,7 +19,7 @@ import {
   Loader2
 } from 'lucide-react'
 
-export interface MoonUIFileUploadProps {
+export interface FileUploadProps {
   accept?: string
   multiple?: boolean
   maxSize?: number // in bytes
@@ -135,7 +135,7 @@ const FileItem = ({
   )
 }
 
-export const MoonUIFileUpload = React.forwardRef<HTMLDivElement, MoonUIFileUploadProps>(
+export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
   ({ 
     accept = "*",
     multiple = true,
@@ -397,4 +397,4 @@ export const MoonUIFileUpload = React.forwardRef<HTMLDivElement, MoonUIFileUploa
   }
 )
 
-MoonUIFileUpload.displayName = "MoonUIFileUpload"
+FileUpload.displayName = "FileUpload"

package/src/components/ui/gesture-drawer.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import React, { useState, useRef, useEffect } from "react"
+import { motion, useMotionValue, useTransform, animate, PanInfo } from "framer-motion"
+import { cn } from "../../lib/utils"
+
+export interface GestureDrawerProps {
+  children: React.ReactNode
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  direction?: "up" | "down" | "left" | "right"
+  threshold?: number
+  className?: string
+  overlayClassName?: string
+  enableSwipeToClose?: boolean
+}
+
+export const GestureDrawer = React.forwardRef<HTMLDivElement, GestureDrawerProps>(
+  ({
+    children,
+    isOpen,
+    onOpenChange,
+    direction = "up",
+    threshold = 50,
+    className,
+    overlayClassName,
+    enableSwipeToClose = true,
+    ...props
+  }, ref) => {
+    const y = useMotionValue(0)
+    const x = useMotionValue(0)
+    
+    const isVertical = direction === "up" || direction === "down"
+    const motionValue = isVertical ? y : x
+    
+    const opacity = useTransform(motionValue, [0, threshold], [1, 0.5])
+    
+    const handleDragEnd = (event: any, info: PanInfo) => {
+      if (!enableSwipeToClose) return
+      
+      const offset = isVertical ? info.offset.y : info.offset.x
+      const velocity = isVertical ? info.velocity.y : info.velocity.x
+      
+      let shouldClose = false
+      
+      switch (direction) {
+        case "up":
+          shouldClose = offset > threshold || velocity > 500
+          break
+        case "down":
+          shouldClose = offset < -threshold || velocity < -500
+          break
+        case "left":
+          shouldClose = offset > threshold || velocity > 500
+          break
+        case "right":
+          shouldClose = offset < -threshold || velocity < -500
+          break
+      }
+      
+      if (shouldClose) {
+        onOpenChange(false)
+      } else {
+        animate(motionValue, 0, { type: "spring", stiffness: 300, damping: 20 })
+      }
+    }
+    
+    const getInitialPosition = () => {
+      switch (direction) {
+        case "up":
+          return { y: "100%" }
+        case "down":
+          return { y: "-100%" }
+        case "left":
+          return { x: "100%" }
+        case "right":
+          return { x: "-100%" }
+        default:
+          return { y: "100%" }
+      }
+    }
+    
+    const getAnimatePosition = () => {
+      return isVertical ? { y: 0 } : { x: 0 }
+    }
+    
+    if (!isOpen) return null
+    
+    return (
+      <div className="fixed inset-0 z-50">
+        {/* Overlay */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={() => onOpenChange(false)}
+          className={cn("absolute inset-0 bg-black/50", overlayClassName)}
+        />
+        
+        {/* Drawer */}
+        <motion.div
+          ref={ref}
+          drag={enableSwipeToClose ? (isVertical ? "y" : "x") : false}
+          dragConstraints={{ 
+            top: direction === "up" ? 0 : undefined,
+            bottom: direction === "down" ? 0 : undefined,
+            left: direction === "left" ? 0 : undefined,
+            right: direction === "right" ? 0 : undefined
+          }}
+          dragElastic={0.2}
+          onDragEnd={handleDragEnd}
+          style={{ 
+            [isVertical ? "y" : "x"]: motionValue,
+            opacity
+          }}
+          initial={getInitialPosition()}
+          animate={getAnimatePosition()}
+          exit={getInitialPosition()}
+          transition={{ type: "spring", damping: 30, stiffness: 300 }}
+          className={cn(
+            "absolute bg-background border shadow-lg",
+            {
+              "bottom-0 left-0 right-0 rounded-t-lg": direction === "up",
+              "top-0 left-0 right-0 rounded-b-lg": direction === "down", 
+              "top-0 bottom-0 right-0 rounded-l-lg": direction === "left",
+              "top-0 bottom-0 left-0 rounded-r-lg": direction === "right"
+            },
+            className
+          )}
+          {...props}
+        >
+          {/* Drag Handle */}
+          {(direction === "up" || direction === "down") && (
+            <div className="flex justify-center p-2">
+              <div className="w-12 h-1 bg-muted rounded-full" />
+            </div>
+          )}
+          
+          {children}
+        </motion.div>
+      </div>
+    )
+  }
+)
+
+GestureDrawer.displayName = "GestureDrawer"

package/src/components/ui/index.ts

@@ -1,12 +1,46 @@
-// FREE UI Components - Source of Truth: @moontra/moonui NPM package
-// Ana proje artık NPM paketlerini kullanır (wrapper pattern)
+// Core UI Components Export
+// Premium components with advanced features
 
-// All FREE components from @moontra/moonui package
-export * from "@moontra/moonui"
-
-// Local development-only components (not in package)
+export * from "./accordion"
+export * from "./alert"
+export * from "./aspect-ratio"
+export * from "./avatar"
+export * from "./badge"
+export * from "./breadcrumb"
+export * from "./button"
+export * from "./calendar"
+export * from "./card"
+export * from "./checkbox"
+export * from "./collapsible"
+export * from "./color-picker"
+export * from "./command"
+export * from "./data-table"
+export * from "./date-picker"
+export * from "./dialog"
+export * from "./draggable-list"
+export * from "./dropdown-menu"
+export * from "./file-upload"
+export * from "./gesture-drawer"
+export * from "./github-stars"
+export * from "./input"
+export * from "./label"
 export * from "./locked-component"
 export * from "./moon-logo"
-
-// Pro Components - Available via @moontra/moonui-pro package
-// Import Pro components via: import { Component } from "@/components/pro"
+export * from "./pagination"
+export * from "./popover"
+export * from "./progress"
+export * from "./radio-group"
+export * from "./rich-text-editor"
+export * from "./select"
+export * from "./separator"
+export * from "./simple-editor"
+export * from "./skeleton"
+export * from "./slider"
+export * from "./swipeable-card"
+export * from "./switch"
+export * from "./table"
+export * from "./tabs"
+export * from "./textarea"
+export * from "./toast"
+export * from "./toggle"
+export * from "./tooltip"

package/src/components/ui/input.tsx

@@ -26,7 +26,7 @@ const inputWrapperVariants = cva(
   }
 );
 
-const moonUIInputVariants = cva(
+const inputVariants = cva(
   [
     "w-full bg-background transition-all duration-200",
     "text-foreground placeholder:text-muted-foreground dark:placeholder:text-gray-500", 
@@ -85,9 +85,9 @@ const moonUIInputVariants = cva(
   }
 );
 
-export interface MoonUIInputProps
+export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
-    Omit<VariantProps<typeof moonUIInputVariants>, "isDisabled" | "hasLeftIcon" | "hasRightIcon" | "hasRightButton"> {
+    Omit<VariantProps<typeof inputVariants>, "isDisabled" | "hasLeftIcon" | "hasRightIcon" | "hasRightButton"> {
   /** Hata mesajı */
   error?: string;
   /** Başarı mesajı */
@@ -122,7 +122,7 @@ export interface MoonUIInputProps
  * @param props.rightButton - Sağ tarafta gösterilecek buton
  * @param props.alwaysShowMessage - Mesajın her zaman görünür olması
  */
-const MoonUIInput = React.forwardRef<HTMLInputElement, MoonUIInputProps>(
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ 
     className, 
     wrapperClassName,
@@ -214,9 +214,6 @@ const MoonUIInput = React.forwardRef<HTMLInputElement, MoonUIInputProps>(
     );
   }
 );
-MoonUIInput.displayName = "MoonUIInput";
+Input.displayName = "Input";
 
-export { MoonUIInput  };
-
-// Backward compatibility exports
-export { MoonUIInput as Input };
+export { Input };

package/src/components/ui/label.tsx

@@ -6,14 +6,14 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../../lib/utils"
 
-const moonUILabelVariants = cva(
+const labelVariants = cva(
   "text-sm font-medium leading-none text-gray-900 dark:text-gray-200 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:peer-disabled:opacity-60 transition-colors duration-200"
 )
 
-const MoonUILabel = React.forwardRef<
+const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof moonUILabelVariants>
+    VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
@@ -21,9 +21,6 @@ const MoonUILabel = React.forwardRef<
     {...props}
   />
 ))
-MoonUILabel.displayName = LabelPrimitive.Root.displayName
+Label.displayName = LabelPrimitive.Root.displayName
 
-export { MoonUILabel  };
-
-// Backward compatibility exports
-export { MoonUILabel as Label }
+export { Label }

package/src/components/ui/moon-logo.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { cn } from "../../lib/utils"
 
-interface MoonUIMoonLogoProps extends React.SVGProps<SVGSVGElement> {
+interface MoonLogoProps extends React.SVGProps<SVGSVGElement> {
   variant?: "default" | "monochrome" | "gradient"
   showText?: boolean
 }

package/src/components/ui/pagination.tsx

@@ -3,7 +3,7 @@ import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
 import { cn } from "../../lib/utils"
 import { ButtonProps, buttonVariants } from "./button"
 
-const MoonUIPagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
     role="navigation"
     aria-label="pagination"
@@ -11,9 +11,9 @@ const MoonUIPagination = ({ className, ...props }: React.ComponentProps<"nav">)
     {...props}
   />
 )
-MoonUIPagination.displayName = "MoonUIPagination"
+Pagination.displayName = "Pagination"
 
-const MoonUIPaginationContent = React.forwardRef<
+const PaginationContent = React.forwardRef<
   HTMLUListElement,
   React.ComponentProps<"ul">
 >(({ className, ...props }, ref) => (
@@ -23,22 +23,22 @@ const MoonUIPaginationContent = React.forwardRef<
     {...props}
   />
 ))
-MoonUIPaginationContent.displayName = "PaginationContent"
+PaginationContent.displayName = "PaginationContent"
 
-const MoonUIPaginationItem = React.forwardRef<
+const PaginationItem = React.forwardRef<
   HTMLLIElement,
   React.ComponentProps<"li">
 >(({ className, ...props }, ref) => (
   <li ref={ref} className={cn("", className)} {...props} />
 ))
-MoonUIPaginationItem.displayName = "PaginationItem"
+PaginationItem.displayName = "PaginationItem"
 
 type PaginationLinkProps = {
   isActive?: boolean
 } & Pick<ButtonProps, "size"> &
   React.ComponentProps<"a">
 
-const MoonUIPaginationLink = ({
+const PaginationLink = ({
   className,
   isActive,
   size = "icon",
@@ -56,9 +56,9 @@ const MoonUIPaginationLink = ({
     {...props}
   />
 )
-MoonUIPaginationLink.displayName = "PaginationLink"
+PaginationLink.displayName = "PaginationLink"
 
-const MoonUIPaginationPrevious = ({
+const PaginationPrevious = ({
   className,
   ...props
 }: React.ComponentProps<typeof PaginationLink>) => (
@@ -72,9 +72,9 @@ const MoonUIPaginationPrevious = ({
     <span>Previous</span>
   </PaginationLink>
 )
-MoonUIPaginationPrevious.displayName = "PaginationPrevious"
+PaginationPrevious.displayName = "PaginationPrevious"
 
-const MoonUIPaginationNext = ({
+const PaginationNext = ({
   className,
   ...props
 }: React.ComponentProps<typeof PaginationLink>) => (
@@ -88,9 +88,9 @@ const MoonUIPaginationNext = ({
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 )
-MoonUIPaginationNext.displayName = "PaginationNext"
+PaginationNext.displayName = "PaginationNext"
 
-const MoonUIPaginationEllipsis = ({
+const PaginationEllipsis = ({
   className,
   ...props
 }: React.ComponentProps<"span">) => (
@@ -103,16 +103,14 @@ const MoonUIPaginationEllipsis = ({
     <span className="sr-only">More pages</span>
   </span>
 )
-MoonUIPaginationEllipsis.displayName = "PaginationEllipsis"
+PaginationEllipsis.displayName = "PaginationEllipsis"
 
-export { MoonUIPagination,
+export {
+  Pagination,
   PaginationContent,
   PaginationEllipsis,
   PaginationItem,
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
- };
-
-// Backward compatibility exports
-export { MoonUIPagination as Pagination }
+}