@moontra/moonui-pro 2.20.1 → 2.20.3

package/src/components/ui/card.tsx

@@ -1,214 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { motion } from "framer-motion";
-import { cn } from "../../lib/utils";
-import { microInteractionVariants, hoverAnimations, tapAnimations } from "../../lib/micro-interactions";
-
-const moonUICardVariantsPro = cva(
-  "rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-200",
-  {
-    variants: {
-      variant: {
-        default: "border-border dark:border-border",
-        outline: "border border-border shadow-none bg-transparent dark:border-border",
-        filled: "border-none bg-secondary dark:bg-secondary shadow-inner",
-        elevated: "border-none shadow-lg dark:shadow-xl dark:shadow-black/20",
-        gradient: "border-none bg-gradient-to-br from-primary/5 to-primary/10 dark:from-primary/10 dark:to-primary/20",
-        glass: "border border-white/20 bg-white/10 backdrop-blur-md dark:border-white/10 dark:bg-black/10",
-        neon: "border-2 border-primary/50 shadow-[0_0_15px_rgba(var(--primary),0.5)] dark:shadow-[0_0_20px_rgba(var(--primary),0.7)]",
-        glow: "border border-border shadow-[0_0_30px_rgba(var(--primary),0.15)] dark:shadow-[0_0_40px_rgba(var(--primary),0.25)]",
-      },
-      size: {
-        default: "p-6",
-        sm: "p-4",
-        lg: "p-8",
-        xl: "p-10",
-      },
-      radius: {
-        default: "rounded-lg",
-        sm: "rounded-md",
-        lg: "rounded-xl",
-        full: "rounded-3xl",
-        none: "rounded-none",
-      },
-      interactive: {
-        true: "cursor-pointer hover:shadow-lg hover:border-primary/20 dark:hover:border-primary/30 hover:-translate-y-0.5 active:translate-y-0 active:shadow-sm",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      radius: "default",
-    },
-  }
-);
-
-export interface MoonUICardProProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof moonUICardVariantsPro> {
-  asChild?: boolean;
-  microInteraction?: "lift" | "glow" | "scale" | "none";
-  enableGlassmorphism?: boolean;
-  enableParallax?: boolean;
-  enableTilt?: boolean;
-  tiltMaxAngle?: number;
-  parallaxOffset?: number;
-}
-
-const MoonUICardPro = React.forwardRef<HTMLDivElement, MoonUICardProProps>(
-  ({ 
-    className, 
-    variant, 
-    size, 
-    radius, 
-    interactive, 
-    microInteraction = "lift", 
-    enableGlassmorphism,
-    enableParallax = false,
-    enableTilt = false,
-    tiltMaxAngle = 15,
-    parallaxOffset = 20,
-    children,
-    asChild, 
-    ...props 
-  }, ref) => {
-    const [mousePos, setMousePos] = React.useState({ x: 0, y: 0 });
-    const [isHovered, setIsHovered] = React.useState(false);
-    
-    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-      if (!enableTilt && !enableParallax) return;
-      
-      const rect = e.currentTarget.getBoundingClientRect();
-      const centerX = rect.left + rect.width / 2;
-      const centerY = rect.top + rect.height / 2;
-      
-      const x = (e.clientX - centerX) / (rect.width / 2);
-      const y = (e.clientY - centerY) / (rect.height / 2);
-      
-      setMousePos({ x, y });
-    };
-    
-    const handleMouseEnter = () => setIsHovered(true);
-    const handleMouseLeave = () => {
-      setIsHovered(false);
-      setMousePos({ x: 0, y: 0 });
-    };
-    
-    // Apply glassmorphism variant if enabled
-    const finalVariant = enableGlassmorphism ? "glass" : variant;
-    
-    // Calculate tilt transforms
-    const rotateX = enableTilt ? mousePos.y * -tiltMaxAngle : 0;
-    const rotateY = enableTilt ? mousePos.x * tiltMaxAngle : 0;
-    
-    // Base interaction props
-    const interactionProps = interactive && microInteraction !== "none" ? {
-      whileHover: microInteraction === "scale" ? hoverAnimations.scale : 
-                  microInteraction === "glow" ? hoverAnimations.glow : 
-                  hoverAnimations.lift,
-      whileTap: tapAnimations.scale,
-    } : {};
-    
-    const { onDrag, onDragStart, onDragEnd, ...divProps } = props as any;
-    
-    return (
-      <motion.div
-        ref={ref}
-        className={cn(moonUICardVariantsPro({ variant: finalVariant, size, radius, interactive, className }))}
-        onMouseMove={handleMouseMove}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        style={{
-          transformStyle: enableTilt || enableParallax ? "preserve-3d" : undefined,
-          perspective: enableTilt || enableParallax ? "1000px" : undefined,
-        }}
-        animate={{
-          rotateX,
-          rotateY,
-        }}
-        transition={{ type: "spring", damping: 20, stiffness: 300 }}
-        {...interactionProps}
-        {...divProps}
-      >
-        {/* Parallax content wrapper */}
-        {enableParallax ? (
-          <motion.div
-            style={{ transform: "translateZ(50px)" }}
-            animate={{
-              x: isHovered ? mousePos.x * parallaxOffset : 0,
-              y: isHovered ? mousePos.y * parallaxOffset : 0,
-            }}
-            transition={{ type: "spring", damping: 20, stiffness: 300 }}
-          >
-            {children}
-          </motion.div>
-        ) : (
-          children
-        )}
-      </motion.div>
-    );
-  }
-);
-MoonUICardPro.displayName = "MoonUICardPro";
-
-const MoonUICardHeaderPro = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5", className)}
-    {...props}
-  />
-));
-MoonUICardHeaderPro.displayName = "MoonUICardHeaderPro";
-
-const MoonUICardTitlePro = React.forwardRef<
-  HTMLHeadingElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-MoonUICardTitlePro.displayName = "MoonUICardTitlePro";
-
-const MoonUICardDescriptionPro = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-MoonUICardDescriptionPro.displayName = "MoonUICardDescriptionPro";
-
-const MoonUICardContentPro = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("pt-0", className)} {...props} />
-));
-MoonUICardContentPro.displayName = "MoonUICardContentPro";
-
-const MoonUICardFooterPro = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center pt-4", className)}
-    {...props}
-  />
-));
-MoonUICardFooterPro.displayName = "MoonUICardFooterPro";
-
-export { MoonUICardPro, MoonUICardHeaderPro, MoonUICardFooterPro, MoonUICardTitlePro, MoonUICardDescriptionPro, MoonUICardContentPro  };
-
-// Backward compatibility exports
-export { MoonUICardPro as Card, MoonUICardHeaderPro as CardHeader, MoonUICardFooterPro as CardFooter, MoonUICardTitlePro as CardTitle, MoonUICardDescriptionPro as CardDescription, MoonUICardContentPro as CardContent };

package/src/components/ui/checkbox.tsx

@@ -1,259 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check, Minus } from "lucide-react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-
-/**
- * Checkbox Bileşeni
- *
- * Erişilebilir, özelleştirilebilir ve tema sistemiyle tam entegre checkbox bileşeni.
- * Form elemanları ve seçim listeleri için kullanılır.
- */
-
-const moonUICheckboxVariantsPro = cva(
-  "peer shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary-foreground",
-  {
-    variants: {
-      variant: {
-        default: "border-border bg-background data-[state=checked]:bg-primary data-[state=checked]:border-primary",
-        outline: "border-border bg-transparent data-[state=checked]:bg-primary data-[state=checked]:border-primary",
-        muted: "border-border bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary",
-        ghost: "border-transparent bg-transparent hover:bg-accent data-[state=checked]:bg-primary data-[state=checked]:border-primary",
-      },
-      size: {
-        sm: "h-3.5 w-3.5",
-        default: "h-4 w-4",
-        md: "h-5 w-5",
-        lg: "h-6 w-6",
-      },
-      radius: {
-        none: "rounded-none",
-        sm: "rounded-sm",
-        default: "rounded-sm",
-        md: "rounded-md",
-        full: "rounded-full",
-      },
-      animation: {
-        none: "",
-        subtle: "transition-all duration-200",
-        default: "transition-all duration-200",
-        bounce: "transition-all duration-200",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      radius: "default",
-      animation: "default",
-    },
-  }
-);
-
-export interface MoonUICheckboxProProps
-  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-    VariantProps<typeof moonUICheckboxVariantsPro> {
-  /**
-   * İndeterminate durumu - grup seçimlerinde bazı öğeler seçilmişse kullanılır
-   */
-  indeterminate?: boolean;
-  /**
-   * Özel ikon komponenti
-   */
-  icon?: React.ReactNode;
-}
-
-const MoonUICheckboxPro = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  MoonUICheckboxProProps
->(({ 
-  className, 
-  variant, 
-  size, 
-  radius, 
-  animation,
-  indeterminate = false,
-  icon,
-  checked,
-  ...props 
-}, ref) => {
-  // Indeterminate state yönetimi
-  const [isIndeterminate, setIsIndeterminate] = React.useState(indeterminate);
-  
-  React.useEffect(() => {
-    setIsIndeterminate(indeterminate);
-  }, [indeterminate]);
-
-  // Checked state override, indeterminate olduğunda
-  const effectiveChecked = isIndeterminate ? false : checked;
-  
-  return (
-    <CheckboxPrimitive.Root
-      ref={ref}
-      checked={effectiveChecked}
-      className={cn(moonUICheckboxVariantsPro({ variant, size, radius, animation }), className)}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        className={cn(
-          "flex items-center justify-center text-current",
-          animation === "bounce" && "data-[state=checked]:animate-bounce"
-        )}
-      >
-        {isIndeterminate ? (
-          <Minus className="h-[65%] w-[65%]" />
-        ) : icon ? (
-          icon
-        ) : (
-          <Check className="h-[65%] w-[65%]" />
-        )}
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-});
-MoonUICheckboxPro.displayName = CheckboxPrimitive.Root.displayName;
-
-// CheckboxGroup bileşeni
-interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Grup içi yerleşim - dikey veya yatay
-   */
-  orientation?: "horizontal" | "vertical";
-  /**
-   * Öğeler arasındaki boşluk (piksel)
-   */
-  spacing?: number | string;
-  /**
-   * Alt bileşenler
-   */
-  children: React.ReactNode;
-}
-
-const MoonUICheckboxGroupPro = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
-  ({ className, orientation = "vertical", spacing = "1rem", children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
-          className
-        )}
-        style={{ gap: spacing }}
-        role="group"
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-MoonUICheckboxGroupPro.displayName = "CheckboxGroup";
-
-// CheckboxLabel bileşeni
-interface CheckboxLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
-  /**
-   * Checkbox bileşeni için HTML id
-   */
-  htmlFor?: string;
-  /**
-   * Label içeriği
-   */
-  children: React.ReactNode;
-  /**
-   * Checkbox öncesi veya sonrası
-   */
-  position?: "start" | "end";
-  /**
-   * Devre dışı durum stili
-   */
-  disabled?: boolean;
-}
-
-const MoonUICheckboxLabelPro = React.forwardRef<HTMLLabelElement, CheckboxLabelProps>(
-  ({ className, htmlFor, children, position = "end", disabled = false, ...props }, ref) => {
-    return (
-      <label
-        ref={ref}
-        htmlFor={htmlFor}
-        className={cn(
-          "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-          position === "start" ? "mr-2" : "ml-2",
-          disabled && "cursor-not-allowed opacity-70",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </label>
-    );
-  }
-);
-MoonUICheckboxLabelPro.displayName = "CheckboxLabel";
-
-// Checkbox ve Label içeren bileşen
-interface CheckboxWithLabelProps extends MoonUICheckboxProProps {
-  /**
-   * Label içeriği
-   */
-  label: React.ReactNode;
-  /**
-   * Label pozisyonu
-   */
-  labelPosition?: "start" | "end";
-  /**
-   * Label için HTML sınıfları
-   */
-  labelClassName?: string;
-}
-
-const MoonUICheckboxWithLabelPro = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxWithLabelProps
->(({ 
-  id, 
-  label, 
-  labelPosition = "end", 
-  labelClassName, 
-  ...checkboxProps 
-}, ref) => {
-  const generatedId = React.useId();
-  const checkboxId = id || generatedId;
-  
-  return (
-    <div className="flex items-center">
-      {labelPosition === "start" && (
-        <MoonUICheckboxLabelPro 
-          htmlFor={checkboxId}
-          position="start"
-          disabled={checkboxProps.disabled}
-          className={labelClassName}
-        >
-          {label}
-        </MoonUICheckboxLabelPro>
-      )}
-      
-      <MoonUICheckboxPro ref={ref} id={checkboxId} {...checkboxProps} />
-      
-      {labelPosition === "end" && (
-        <MoonUICheckboxLabelPro 
-          htmlFor={checkboxId}
-          position="end"
-          disabled={checkboxProps.disabled}
-          className={labelClassName}
-        >
-          {label}
-        </MoonUICheckboxLabelPro>
-      )}
-    </div>
-  );
-});
-MoonUICheckboxWithLabelPro.displayName = "CheckboxWithLabel";
-
-export { MoonUICheckboxPro, MoonUICheckboxGroupPro as CheckboxGroup, MoonUICheckboxLabelPro as CheckboxLabel, MoonUICheckboxWithLabelPro as CheckboxWithLabel  };
-
-// Clean exports (only checkbox specific)
-export { MoonUICheckboxPro as Checkbox };

package/src/components/ui/collapsible.tsx

@@ -1,135 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-import { cva, type VariantProps } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "../../lib/utils"
-
-/**
- * Collapsible (Daraltılabilir) Bileşeni
- * 
- * İçeriği genişletilip daraltılabilen hafif bir bileşendir.
- * Tema sistemiyle tam entegre, erişilebilir ve özelleştirilebilir.
- */
-
-const MoonUICollapsiblePro = CollapsiblePrimitive.Root
-
-const MoonUIcollapsibleTriggerVariantsPro = cva(
-  "flex w-full items-center justify-between transition-all",
-  {
-    variants: {
-      variant: {
-        default: "text-foreground hover:text-primary",
-        ghost: "text-foreground hover:bg-accent/10 rounded",
-        outline: "text-foreground border border-border rounded-t-md hover:bg-accent/5",
-      },
-      size: {
-        sm: "text-xs py-2 px-3",
-        default: "text-sm py-3 px-4",
-        md: "text-base py-4 px-4",
-        lg: "text-lg py-5 px-5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-interface CollapsibleTriggerProps 
-  extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>,
-    VariantProps<typeof MoonUIcollapsibleTriggerVariantsPro> {}
-
-const MoonUICollapsibleTriggerPro = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.Trigger>,
-  CollapsibleTriggerProps
->(({ className, children, variant, size, asChild, ...props }, ref) => {
-  // asChild kullanıldığında otomatik ikon eklemeyi atla
-  if (asChild) {
-    return (
-      <CollapsiblePrimitive.Trigger
-        ref={ref}
-        className={cn(MoonUIcollapsibleTriggerVariantsPro({ variant, size }), className)}
-        asChild={asChild}
-        {...props}
-      >
-        {children}
-      </CollapsiblePrimitive.Trigger>
-    )
-  }
-
-  return (
-    <CollapsiblePrimitive.Trigger
-      ref={ref}
-      className={cn(MoonUIcollapsibleTriggerVariantsPro({ variant, size }), className)}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 ml-auto transition-transform duration-200 [&[data-state=open]]:rotate-180" />
-    </CollapsiblePrimitive.Trigger>
-  )
-})
-MoonUICollapsibleTriggerPro.displayName = CollapsiblePrimitive.Trigger.displayName
-
-const MoonUIcollapsibleContentVariantsPro = cva(
-  "overflow-hidden transition-all data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",
-  {
-    variants: {
-      variant: {
-        default: "text-muted-foreground",
-        ghost: "text-muted-foreground rounded-b",
-        outline: "text-muted-foreground border border-t-0 border-border rounded-b-md",
-      },
-      size: {
-        sm: "text-xs",
-        default: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-interface CollapsibleContentProps 
-  extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>,
-    VariantProps<typeof MoonUIcollapsibleContentVariantsPro> {}
-
-const MoonUICollapsibleContentPro = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.Content>,
-  CollapsibleContentProps
->(({ className, children, variant, size, ...props }, ref) => (
-  <CollapsiblePrimitive.Content
-    ref={ref}
-    className={cn(MoonUIcollapsibleContentVariantsPro({ variant, size }), className)}
-    {...props}
-  >
-    <div className="p-4">{children}</div>
-  </CollapsiblePrimitive.Content>
-))
-MoonUICollapsibleContentPro.displayName = CollapsiblePrimitive.Content.displayName
-
-
-// Internal aliases for Pro component usage
-export const CollapsibleInternal = MoonUICollapsiblePro
-export const collapsibleTriggerVariantsInternal = MoonUIcollapsibleTriggerVariantsPro
-export const CollapsibleTriggerInternal = MoonUICollapsibleTriggerPro
-export const collapsibleContentVariantsInternal = MoonUIcollapsibleContentVariantsPro
-export const CollapsibleContentInternal = MoonUICollapsibleContentPro
-
-// Pro exports  
-export { MoonUICollapsiblePro, MoonUIcollapsibleTriggerVariantsPro, MoonUICollapsibleTriggerPro, MoonUIcollapsibleContentVariantsPro, MoonUICollapsibleContentPro }
-
-// Clean exports (without MoonUI prefix for easier usage)
-export { MoonUICollapsiblePro as Collapsible, MoonUIcollapsibleTriggerVariantsPro as collapsibleTriggerVariants, MoonUICollapsibleTriggerPro as CollapsibleTrigger, MoonUIcollapsibleContentVariantsPro as collapsibleContentVariants, MoonUICollapsibleContentPro as CollapsibleContent }
-
-export type {
-  CollapsibleTriggerProps,
-  CollapsibleContentProps
-}

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

@@ -1,97 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import { cn } from "../../lib/utils"
-
-interface MoonUIColorPickerProProps {
-  value?: string
-  onChange?: (color: string) => void
-  className?: string
-  showInput?: boolean
-  showPresets?: boolean
-  size?: string
-  presets?: string[]
-}
-
-const defaultColors = [
-  "#000000", "#374151", "#EF4444", "#F97316", 
-  "#F59E0B", "#EAB308", "#22C55E", "#10B981",
-  "#06B6D4", "#3B82F6", "#6366F1", "#8B5CF6",
-  "#A855F7", "#D946EF", "#EC4899", "#F43F5E"
-]
-
-// React 19 compatible - removed forwardRef
-export const MoonUIColorPickerPro = ({ 
-  value = "#000000", 
-  onChange, 
-  className, 
-  showInput = false,
-  showPresets = true,
-  size = "default",
-  presets = defaultColors
-}: MoonUIColorPickerProProps) => {
-  const [currentColor, setCurrentColor] = useState(value)
-
-  const handleColorChange = (color: string) => {
-    setCurrentColor(color)
-    onChange?.(color)
-  }
-
-  const sizeClasses = {
-    sm: "w-6 h-6",
-    default: "w-8 h-8", 
-    lg: "w-10 h-10"
-  }
-
-  return (
-    <div className={cn("flex flex-col gap-2", className)}>
-      {showInput && (
-        <div className="flex gap-2 items-center">
-          <input
-            type="color"
-            value={currentColor}
-            onChange={(e) => handleColorChange(e.target.value)}
-            className={cn("rounded border cursor-pointer", sizeClasses[size as keyof typeof sizeClasses] || sizeClasses.default)}
-          />
-          <input
-            type="text"
-            value={currentColor}
-            onChange={(e) => handleColorChange(e.target.value)}
-            className="px-2 py-1 border rounded text-sm font-mono"
-            placeholder="#000000"
-          />
-        </div>
-      )}
-      
-      {!showInput && (
-        <input
-          type="color"
-          value={currentColor}
-          onChange={(e) => handleColorChange(e.target.value)}
-          className={cn("rounded border cursor-pointer", sizeClasses[size as keyof typeof sizeClasses] || sizeClasses.default)}
-        />
-      )}
-
-      {showPresets && presets && presets.length > 0 && (
-        <div className="flex flex-wrap gap-1">
-          {presets.map((color) => (
-            <button
-              key={color}
-              type="button"
-              onClick={() => handleColorChange(color)}
-              className={cn(
-                "w-6 h-6 rounded border-2 hover:scale-110 transition-transform",
-                currentColor === color ? "border-gray-900 dark:border-gray-100" : "border-transparent"
-              )}
-              style={{ backgroundColor: color }}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// Backward compatibility exports
-export { MoonUIColorPickerPro as ColorPicker }
-export default MoonUIColorPickerPro