@moontra/moonui 2.2.0 → 2.2.1

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

@@ -0,0 +1,172 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Input } from "./input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select"
+import { Phone } from "lucide-react"
+
+// Country codes data
+const countryCodes = [
+  { code: "+1", country: "US", flag: "🇺🇸", name: "United States" },
+  { code: "+44", country: "GB", flag: "🇬🇧", name: "United Kingdom" },
+  { code: "+49", country: "DE", flag: "🇩🇪", name: "Germany" },
+  { code: "+33", country: "FR", flag: "🇫🇷", name: "France" },
+  { code: "+39", country: "IT", flag: "🇮🇹", name: "Italy" },
+  { code: "+34", country: "ES", flag: "🇪🇸", name: "Spain" },
+  { code: "+31", country: "NL", flag: "🇳🇱", name: "Netherlands" },
+  { code: "+46", country: "SE", flag: "🇸🇪", name: "Sweden" },
+  { code: "+47", country: "NO", flag: "🇳🇴", name: "Norway" },
+  { code: "+45", country: "DK", flag: "🇩🇰", name: "Denmark" },
+  { code: "+358", country: "FI", flag: "🇫🇮", name: "Finland" },
+  { code: "+48", country: "PL", flag: "🇵🇱", name: "Poland" },
+  { code: "+90", country: "TR", flag: "🇹🇷", name: "Turkey" },
+  { code: "+86", country: "CN", flag: "🇨🇳", name: "China" },
+  { code: "+81", country: "JP", flag: "🇯🇵", name: "Japan" },
+  { code: "+82", country: "KR", flag: "🇰🇷", name: "South Korea" },
+  { code: "+91", country: "IN", flag: "🇮🇳", name: "India" },
+  { code: "+61", country: "AU", flag: "🇦🇺", name: "Australia" },
+  { code: "+64", country: "NZ", flag: "🇳🇿", name: "New Zealand" },
+  { code: "+27", country: "ZA", flag: "🇿🇦", name: "South Africa" },
+  { code: "+55", country: "BR", flag: "🇧🇷", name: "Brazil" },
+  { code: "+52", country: "MX", flag: "🇲🇽", name: "Mexico" },
+  { code: "+54", country: "AR", flag: "🇦🇷", name: "Argentina" },
+  { code: "+20", country: "EG", flag: "🇪🇬", name: "Egypt" },
+  { code: "+966", country: "SA", flag: "🇸🇦", name: "Saudi Arabia" },
+  { code: "+971", country: "AE", flag: "🇦🇪", name: "UAE" },
+]
+
+// Format phone number based on country
+const formatPhoneNumber = (value: string, countryCode: string): string => {
+  const cleaned = value.replace(/\D/g, "")
+  
+  switch (countryCode) {
+    case "+1": // US/Canada
+      if (cleaned.length <= 3) return cleaned
+      if (cleaned.length <= 6) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`
+      return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`
+    
+    case "+44": // UK
+      if (cleaned.length <= 4) return cleaned
+      if (cleaned.length <= 7) return `${cleaned.slice(0, 4)} ${cleaned.slice(4)}`
+      return `${cleaned.slice(0, 4)} ${cleaned.slice(4, 7)} ${cleaned.slice(7, 11)}`
+    
+    case "+90": // Turkey
+      if (cleaned.length <= 3) return cleaned
+      if (cleaned.length <= 6) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`
+      if (cleaned.length <= 9) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} ${cleaned.slice(6)}`
+      return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} ${cleaned.slice(6, 8)} ${cleaned.slice(8, 10)}`
+    
+    default: // Generic formatting
+      let formatted = ""
+      for (let i = 0; i < cleaned.length; i++) {
+        if (i > 0 && i % 3 === 0) formatted += " "
+        formatted += cleaned[i]
+      }
+      return formatted
+  }
+}
+
+// Get max length based on country
+const getMaxLength = (countryCode: string): number => {
+  switch (countryCode) {
+    case "+1": return 10 // US/Canada
+    case "+44": return 11 // UK
+    case "+90": return 10 // Turkey
+    default: return 15 // Generic max
+  }
+}
+
+export interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+  value?: string
+  onChange?: (value: string, countryCode: string) => void
+  defaultCountry?: string
+  showIcon?: boolean
+  showCountrySelect?: boolean
+  countries?: typeof countryCodes
+}
+
+export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+  ({ 
+    className, 
+    value = "", 
+    onChange, 
+    defaultCountry = "+1",
+    showIcon = true,
+    showCountrySelect = true,
+    countries = countryCodes,
+    size,
+    ...props 
+  }, ref) => {
+    const [countryCode, setCountryCode] = React.useState(defaultCountry)
+    const [phoneNumber, setPhoneNumber] = React.useState(value)
+    
+    const selectedCountry = countries.find(c => c.code === countryCode) || countries[0]
+    
+    const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const rawValue = e.target.value.replace(/\D/g, "")
+      const maxLength = getMaxLength(countryCode)
+      const truncated = rawValue.slice(0, maxLength)
+      const formatted = formatPhoneNumber(truncated, countryCode)
+      
+      setPhoneNumber(truncated)
+      onChange?.(truncated, countryCode)
+      
+      // Update the input value with formatted version
+      e.target.value = formatted
+    }
+    
+    const handleCountryChange = (newCountryCode: string) => {
+      setCountryCode(newCountryCode)
+      onChange?.(phoneNumber, newCountryCode)
+    }
+    
+    const formattedValue = formatPhoneNumber(phoneNumber, countryCode)
+    
+    return (
+      <div className={cn("relative flex gap-2", className)}>
+        {showCountrySelect && (
+          <Select value={countryCode} onValueChange={handleCountryChange}>
+            <SelectTrigger className="w-[120px]">
+              <SelectValue>
+                <div className="flex items-center gap-2">
+                  <span>{selectedCountry.flag}</span>
+                  <span>{selectedCountry.code}</span>
+                </div>
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {countries.map((country) => (
+                <SelectItem key={country.code} value={country.code}>
+                  <div className="flex items-center gap-2">
+                    <span>{country.flag}</span>
+                    <span>{country.code}</span>
+                    <span className="text-muted-foreground">{country.name}</span>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+        
+        <div className="relative flex-1">
+          <Input
+            ref={ref}
+            type="tel"
+            inputMode="numeric"
+            autoComplete="tel"
+            placeholder={countryCode === "+1" ? "(555) 123-4567" : "123 456 789"}
+            value={formattedValue}
+            onChange={handlePhoneChange}
+            className={cn(showIcon && "pl-10", className)}
+            {...props}
+          />
+          {showIcon && (
+            <Phone className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+PhoneInput.displayName = "PhoneInput"

package/src/components/ui/popover-pro.tsx

@@ -0,0 +1,424 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { motion, AnimatePresence, useSpring, useTransform } from "framer-motion"
+import { cn } from "../../lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+
+const PopoverPro = PopoverPrimitive.Root
+const PopoverTriggerPro = PopoverPrimitive.Trigger
+const PopoverAnchorPro = PopoverPrimitive.Anchor
+const PopoverPortalPro = PopoverPrimitive.Portal
+
+// Animation variants
+const popoverAnimations = {
+  // Basic animations
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.95 }
+  },
+  slide: {
+    initial: { opacity: 0, y: -10 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -10 }
+  },
+  // Advanced animations
+  spring: {
+    initial: { opacity: 0, scale: 0.8, y: -20 },
+    animate: { 
+      opacity: 1, 
+      scale: 1, 
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 20
+      }
+    },
+    exit: { opacity: 0, scale: 0.8, y: -20 }
+  },
+  elastic: {
+    initial: { opacity: 0, scale: 0.5, rotate: -10 },
+    animate: { 
+      opacity: 1, 
+      scale: 1, 
+      rotate: 0,
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 15
+      }
+    },
+    exit: { opacity: 0, scale: 0.5, rotate: 10 }
+  },
+  bounce: {
+    initial: { opacity: 0, y: -30 },
+    animate: { 
+      opacity: 1, 
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: 500,
+        damping: 15,
+        mass: 1
+      }
+    },
+    exit: { opacity: 0, y: -30 }
+  },
+  flip: {
+    initial: { opacity: 0, rotateX: -90 },
+    animate: { 
+      opacity: 1, 
+      rotateX: 0,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 20
+      }
+    },
+    exit: { opacity: 0, rotateX: 90 }
+  },
+  slideFromBottom: {
+    initial: { opacity: 0, y: 20 },
+    animate: { 
+      opacity: 1, 
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 25
+      }
+    },
+    exit: { opacity: 0, y: 20 }
+  },
+  zoom: {
+    initial: { opacity: 0, scale: 0 },
+    animate: { 
+      opacity: 1, 
+      scale: 1,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 20
+      }
+    },
+    exit: { opacity: 0, scale: 0 }
+  },
+  morph: {
+    initial: { 
+      opacity: 0, 
+      scale: 0.8,
+      borderRadius: "50%"
+    },
+    animate: { 
+      opacity: 1, 
+      scale: 1,
+      borderRadius: "12px",
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 25
+      }
+    },
+    exit: { 
+      opacity: 0, 
+      scale: 0.8,
+      borderRadius: "50%"
+    }
+  }
+}
+
+const popoverContentVariants = cva(
+  "z-50 w-72 rounded-md p-4 shadow-md outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border bg-popover text-popover-foreground",
+        glass: [
+          "border border-white/20 bg-white/80 backdrop-blur-xl",
+          "dark:border-gray-800/50 dark:bg-gray-900/80",
+          "shadow-xl"
+        ],
+        gradient: [
+          "bg-gradient-to-br from-white to-gray-50",
+          "dark:from-gray-900 dark:to-gray-950",
+          "border border-gray-200 dark:border-gray-800",
+          "shadow-xl"
+        ],
+        solid: [
+          "bg-white dark:bg-gray-900",
+          "border-2 border-gray-200 dark:border-gray-700",
+          "shadow-2xl"
+        ],
+        floating: [
+          "bg-white dark:bg-gray-900",
+          "shadow-2xl shadow-black/20 dark:shadow-black/40",
+          "border border-gray-100 dark:border-gray-800"
+        ],
+        neumorphic: [
+          "bg-gray-100 dark:bg-gray-900",
+          "shadow-[20px_20px_60px_#bebebe,-20px_-20px_60px_#ffffff]",
+          "dark:shadow-[20px_20px_60px_#1a1a1a,-20px_-20px_60px_#2a2a2a]",
+          "border-0"
+        ]
+      },
+      size: {
+        sm: "w-56 p-3",
+        default: "w-72 p-4",
+        lg: "w-96 p-6",
+        xl: "w-[32rem] p-8",
+        auto: "w-auto p-4"
+      },
+      overlayBlur: {
+        none: "",
+        sm: "backdrop-blur-sm",
+        md: "backdrop-blur-md",
+        lg: "backdrop-blur-lg",
+        xl: "backdrop-blur-xl"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      overlayBlur: "none"
+    }
+  }
+)
+
+export interface PopoverContentProProps
+  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,
+    VariantProps<typeof popoverContentVariants> {
+  animation?: keyof typeof popoverAnimations
+  enableSpringPhysics?: boolean
+  showArrow?: boolean
+  arrowSize?: number
+  customBackdrop?: boolean
+  dragToDismiss?: boolean
+  pinnable?: boolean
+  resizable?: boolean
+  focusTrap?: boolean
+  closeOnEscape?: boolean
+  closeOnClickOutside?: boolean
+  staggerChildren?: boolean
+  glowEffect?: boolean
+  magneticEdges?: boolean
+}
+
+const PopoverContentPro = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProProps
+>(
+  (
+    {
+      className,
+      align = "center",
+      sideOffset = 4,
+      variant,
+      size,
+      overlayBlur,
+      animation = "spring",
+      enableSpringPhysics = false,
+      showArrow = false,
+      arrowSize = 8,
+      customBackdrop = false,
+      dragToDismiss = false,
+      pinnable = false,
+      resizable = false,
+      focusTrap = false,
+      closeOnEscape = true,
+      closeOnClickOutside = true,
+      staggerChildren = false,
+      glowEffect = false,
+      magneticEdges = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [isPinned, setIsPinned] = React.useState(false)
+    const [isDragging, setIsDragging] = React.useState(false)
+    const animationVariant = popoverAnimations[animation] || popoverAnimations.spring
+
+    // Spring physics for magnetic edges
+    const x = useSpring(0, { stiffness: 300, damping: 30 })
+    const y = useSpring(0, { stiffness: 300, damping: 30 })
+
+    const contentElement = (
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        onEscapeKeyDown={(e) => {
+          if (!closeOnEscape || isPinned) {
+            e.preventDefault()
+          }
+        }}
+        onPointerDownOutside={(e) => {
+          if (!closeOnClickOutside || isPinned) {
+            e.preventDefault()
+          }
+        }}
+        className={cn(
+          popoverContentVariants({ variant, size, overlayBlur }),
+          glowEffect && "shadow-[0_0_30px_rgba(59,130,246,0.3)]",
+          resizable && "resize overflow-auto",
+          isDragging && "cursor-grabbing",
+          className
+        )}
+        {...props}
+      >
+        {pinnable && (
+          <button
+            onClick={() => setIsPinned(!isPinned)}
+            className="absolute top-2 right-2 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
+            aria-label={isPinned ? "Unpin popover" : "Pin popover"}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              className={cn(
+                "transition-transform",
+                isPinned && "rotate-45"
+              )}
+            >
+              <path d="M12 17v5M9 10V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6M9 10l-2 2v3h10v-3l-2-2" />
+            </svg>
+          </button>
+        )}
+        
+        {showArrow && (
+          <PopoverPrimitive.Arrow
+            width={arrowSize * 2}
+            height={arrowSize}
+            className={cn(
+              "fill-current",
+              variant === "glass" && "text-white/80 dark:text-gray-900/80",
+              variant === "gradient" && "text-white dark:text-gray-900",
+              variant === "default" && "text-popover"
+            )}
+          />
+        )}
+        
+        <div
+          className={cn(
+            staggerChildren && "space-y-2",
+            dragToDismiss && "select-none"
+          )}
+        >
+          {children}
+        </div>
+      </PopoverPrimitive.Content>
+    )
+
+    if (enableSpringPhysics || magneticEdges) {
+      return (
+        <AnimatePresence mode="wait">
+          <motion.div
+            {...(animationVariant as any)}
+            style={magneticEdges ? { x, y } : undefined}
+            drag={dragToDismiss}
+            dragElastic={0.2}
+            dragConstraints={{ left: -50, right: 50, top: -50, bottom: 50 }}
+            onDragStart={() => setIsDragging(true)}
+            onDragEnd={() => setIsDragging(false)}
+          >
+            {contentElement}
+          </motion.div>
+        </AnimatePresence>
+      )
+    }
+
+    return contentElement
+  }
+)
+
+PopoverContentPro.displayName = PopoverPrimitive.Content.displayName
+
+// Additional Pro components
+const PopoverHeaderPro = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("mb-4 space-y-1", className)}
+    {...props}
+  />
+))
+PopoverHeaderPro.displayName = "PopoverHeaderPro"
+
+const PopoverTitlePro = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold text-lg leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+PopoverTitlePro.displayName = "PopoverTitlePro"
+
+const PopoverDescriptionPro = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+PopoverDescriptionPro.displayName = "PopoverDescriptionPro"
+
+const PopoverFooterPro = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "mt-4 flex items-center justify-end space-x-2 pt-4 border-t",
+      className
+    )}
+    {...props}
+  />
+))
+PopoverFooterPro.displayName = "PopoverFooterPro"
+
+const PopoverSeparatorPro = React.forwardRef<
+  HTMLHRElement,
+  React.HTMLAttributes<HTMLHRElement>
+>(({ className, ...props }, ref) => (
+  <hr
+    ref={ref}
+    className={cn("my-4 border-t", className)}
+    {...props}
+  />
+))
+PopoverSeparatorPro.displayName = "PopoverSeparatorPro"
+
+export {
+  PopoverPro,
+  PopoverTriggerPro,
+  PopoverContentPro,
+  PopoverAnchorPro,
+  PopoverPortalPro,
+  PopoverHeaderPro,
+  PopoverTitlePro,
+  PopoverDescriptionPro,
+  PopoverFooterPro,
+  PopoverSeparatorPro,
+  popoverContentVariants
+}

package/src/components/ui/rich-text-editor/index.tsx

@@ -1,6 +1,7 @@
-// Basic Rich Text Editor - Free Version
 "use client"
 
+// Basic Rich Text Editor - Free Version
+
 import * as React from "react"
 import { cn } from "../../../lib/utils"
 

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "../../lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/src/components/ui/select.tsx

@@ -143,10 +143,14 @@ SelectScrollDownButton.displayName =
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "item-aligned", ...props }, ref) => (
+>(({ className, children, position = "popper", side = "bottom", sideOffset = 4, align = "start", ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
+      side={side}
+      sideOffset={sideOffset}
+      align={align}
+      avoidCollisions={false}
       className={cn(
         ["relative z-50 max-h-96 min-w-[8rem] overflow-hidden", 
         "rounded-md border border-gray-200 dark:border-gray-700",

package/src/components/ui/separator.tsx

@@ -105,7 +105,7 @@ const separatorVariants = cva(
 )
 
 export interface SeparatorProps
-  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>,
+  extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, keyof VariantProps<typeof separatorVariants>>,
     VariantProps<typeof separatorVariants> {}
 
 const Separator = React.forwardRef<
@@ -126,7 +126,7 @@ const Separator = React.forwardRef<
     <SeparatorPrimitive.Root
       ref={ref}
       decorative={decorative}
-      orientation={orientation}
+      orientation={orientation || undefined}
       className={cn(
         separatorVariants({ orientation, variant, size }),
         className

package/src/components/ui/swipeable-card.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 // Basic Swipeable Card - Free Version
 "use client"
 

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