@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/ui/separator.tsx

@@ -1,145 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-const moonUISeparatorVariantsPro = cva(
-  "shrink-0 bg-border",
-  {
-    variants: {
-      orientation: {
-        horizontal: "h-[1px] w-full",
-        vertical: "h-full w-[1px]",
-      },
-      variant: {
-        default: "bg-border",
-        dashed: "border-dashed border-border bg-transparent",
-        dotted: "border-dotted border-border bg-transparent",
-        gradient: "bg-gradient-to-r from-transparent via-border to-transparent",
-      },
-      size: {
-        sm: "",
-        md: "",
-        lg: "",
-      },
-    },
-    compoundVariants: [
-      {
-        orientation: "horizontal",
-        variant: "dashed",
-        className: "border-t h-0",
-      },
-      {
-        orientation: "vertical",
-        variant: "dashed",
-        className: "border-l w-0",
-      },
-      {
-        orientation: "horizontal",
-        variant: "dotted",
-        className: "border-t h-0",
-      },
-      {
-        orientation: "vertical",
-        variant: "dotted",
-        className: "border-l w-0",
-      },
-      {
-        orientation: "horizontal",
-        size: "sm",
-        variant: ["dashed", "dotted"],
-        className: "border-t-[0.5px]",
-      },
-      {
-        orientation: "horizontal",
-        size: "lg",
-        variant: ["dashed", "dotted"],
-        className: "border-t-2",
-      },
-      {
-        orientation: "vertical",
-        size: "sm",
-        variant: ["dashed", "dotted"],
-        className: "border-l-[0.5px]",
-      },
-      {
-        orientation: "vertical",
-        size: "lg",
-        variant: ["dashed", "dotted"],
-        className: "border-l-2",
-      },
-      {
-        orientation: "horizontal",
-        size: "sm",
-        variant: ["default", "gradient"],
-        className: "h-[0.5px]",
-      },
-      {
-        orientation: "horizontal",
-        size: "lg",
-        variant: ["default", "gradient"],
-        className: "h-[2px]",
-      },
-      {
-        orientation: "vertical",
-        size: "sm",
-        variant: ["default", "gradient"],
-        className: "w-[0.5px]",
-      },
-      {
-        orientation: "vertical",
-        size: "lg",
-        variant: ["default", "gradient"],
-        className: "w-[2px]",
-      },
-    ],
-    defaultVariants: {
-      orientation: "horizontal",
-      variant: "default",
-      size: "md",
-    },
-  }
-)
-
-export interface MoonUISeparatorProProps
-  extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'orientation'>,
-    VariantProps<typeof moonUISeparatorVariantsPro> {
-  orientation?: "horizontal" | "vertical";
-}
-
-const MoonUISeparatorPro = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  MoonUISeparatorProProps
->(
-  (
-    { 
-      className, 
-      orientation = "horizontal", 
-      variant = "default",
-      size = "md",
-      decorative = true, 
-      ...props 
-    },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        moonUISeparatorVariantsPro({ orientation, variant, size }),
-        className
-      )}
-      {...props}
-    />
-  )
-)
-MoonUISeparatorPro.displayName = SeparatorPrimitive.Root.displayName
-
-export { MoonUISeparatorPro, moonUISeparatorVariantsPro  };
-
-// Backward compatibility exports
-export { MoonUISeparatorPro as Separator, moonUISeparatorVariantsPro as separatorVariants }

package/src/components/ui/sheet.tsx

@@ -1,139 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-import { cn } from "../../lib/utils"
-
-const Sheet = SheetPrimitive.Root
-
-const SheetTrigger = SheetPrimitive.Trigger
-
-const SheetClose = SheetPrimitive.Close
-
-const SheetPortal = SheetPrimitive.Portal
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-background/80 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",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
-)
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-SheetHeader.displayName = "SheetHeader"
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}

package/src/components/ui/skeleton.tsx

@@ -1,20 +0,0 @@
-"use client"
-
-import { cn } from "../../lib/utils"
-
-interface MoonUISkeletonProProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export function MoonUISkeletonPro({
-  className,
-  ...props
-}: MoonUISkeletonProProps) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
-}
-
-// Backward compatibility export
-export { MoonUISkeletonPro as Skeleton }

package/src/components/ui/slider.tsx

@@ -1,354 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-/**
- * Slider Component
- *
- * Accessible, customizable slider component fully integrated with the theme system.
- * Used for value ranges like volume, brightness, price ranges.
- */
-
-const moonUISliderVariantsPro = cva(
-  "relative flex w-full touch-none select-none items-center",
-  {
-    variants: {
-      size: {
-        sm: "h-5",
-        default: "h-6",
-        md: "h-8",
-        lg: "h-10",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-)
-
-const sliderTrackVariants = cva(
-  "relative h-1.5 w-full grow overflow-hidden rounded-full",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted",
-        primary: "bg-primary/20",
-        secondary: "bg-secondary/20",
-        accent: "bg-accent/20",
-        success: "bg-success/20",
-        warning: "bg-warning/20",
-        error: "bg-error/20",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const sliderRangeVariants = cva(
-  "absolute h-full",
-  {
-    variants: {
-      variant: {
-        default: "bg-foreground",
-        primary: "bg-primary",
-        secondary: "bg-secondary",
-        accent: "bg-accent",
-        success: "bg-success",
-        warning: "bg-warning",
-        error: "bg-error",
-      },
-    },
-    defaultVariants: {
-      variant: "primary",
-    },
-  }
-)
-
-const sliderThumbVariants = cva(
-  "block rounded-full border-2 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "border-foreground bg-background",
-        primary: "border-primary bg-background",
-        secondary: "border-secondary bg-background",
-        accent: "border-accent bg-background",
-        success: "border-success bg-background",
-        warning: "border-warning bg-background",
-        error: "border-error bg-background",
-      },
-      size: {
-        sm: "h-3 w-3",
-        default: "h-4 w-4",
-        md: "h-5 w-5",
-        lg: "h-6 w-6",
-      },
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "default",
-    },
-  }
-)
-
-// Custom type definition for component properties
-type SliderBaseProps = {
-  /**
-   * Track variant
-   */
-  trackVariant?: VariantProps<typeof sliderTrackVariants>["variant"];
-  /**
-   * Range variant
-   */
-  rangeVariant?: VariantProps<typeof sliderRangeVariants>["variant"];
-  /**
-   * Thumb variant
-   */
-  thumbVariant?: VariantProps<typeof sliderThumbVariants>["variant"];
-  /**
-   * Thumb size
-   */
-  thumbSize?: VariantProps<typeof sliderThumbVariants>["size"];
-  /**
-   * Show value label
-   */
-  showValueLabel?: boolean;
-  /**
-   * Value label format function
-   */
-  valueLabelFormat?: (value: number) => string;
-  /**
-   * Value label class name
-   */
-  valueLabelClassName?: string;
-  /**
-   * Slider value
-   */
-  value?: number[];
-  /**
-   * Default value
-   */
-  defaultValue?: number[];
-  /**
-   * Function called when value changes
-   */
-  onValueChange?: (value: number[]) => void;
-  /**
-   * Minimum value
-   */
-  min?: number;
-  /**
-   * Maximum value
-   */
-  max?: number;
-  /**
-   * Step value
-   */
-  step?: number;
-  /**
-   * Slider size
-   */
-  size?: VariantProps<typeof moonUISliderVariantsPro>["size"];
-  /**
-   * Disabled state
-   */
-  disabled?: boolean;
-}
-
-// Merge HTML properties without defaultValue conflicts
-type SliderProps = SliderBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'>
-
-const MoonUISliderPro = React.forwardRef<
-  HTMLDivElement,
-  SliderProps
->(({
-  className,
-  size,
-  trackVariant,
-  rangeVariant,
-  thumbVariant,
-  thumbSize,
-  showValueLabel = false,
-  valueLabelFormat,
-  valueLabelClassName,
-  value,
-  defaultValue = [0],
-  onValueChange,
-  disabled,
-  ...props
-}, ref) => {
-  // Value management
-  const [sliderValue, setSliderValue] = React.useState<number[]>(
-    value as number[] || defaultValue as number[] || [0]
-  );
-
-  React.useEffect(() => {
-    if (value !== undefined) {
-      setSliderValue(value as number[]);
-    }
-  }, [value]);
-
-  // Format value label with proper precision handling
-  const formatValue = (val: number) => {
-    if (valueLabelFormat) {
-      return valueLabelFormat(val);
-    }
-    // Round to avoid floating point precision issues
-    const roundedValue = Math.round(val * 100) / 100;
-    return `${roundedValue}`;
-  };
-
-  // Calculate percentage for thumb position
-  const calculateThumbPercent = (value: number, min: number, max: number) => {
-    return ((value - min) / (max - min)) * 100;
-  };
-
-  // Handle mouse/touch events
-  const trackRef = React.useRef<HTMLDivElement>(null);
-  
-  const min = props.min || 0;
-  const max = props.max || 100;
-  const step = props.step || 1;
-
-  // Handle value change with proper precision
-  const handleValueChange = (newValues: number[]) => {
-    // Round values to avoid floating point precision issues
-    const roundedValues = newValues.map(val => {
-      if (step < 1) {
-        // For decimal steps, round to appropriate decimal places
-        const decimals = step.toString().split('.')[1]?.length || 0;
-        return Math.round(val * Math.pow(10, decimals)) / Math.pow(10, decimals);
-      }
-      return Math.round(val);
-    });
-    
-    setSliderValue(roundedValues);
-    if (onValueChange) {
-      onValueChange(roundedValues);
-    }
-  };
-
-  // Handle track click
-  const handleTrackClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (disabled) return;
-    
-    const track = trackRef.current;
-    if (!track) return;
-
-    const rect = track.getBoundingClientRect();
-    const percent = (event.clientX - rect.left) / rect.width;
-    const rawValue = min + percent * (max - min);
-    const steppedValue = Math.round(rawValue / step) * step;
-    const boundedValue = Math.max(min, Math.min(max, steppedValue));
-    
-    const newValues = [...sliderValue];
-    // Just update the first thumb for simplicity
-    newValues[0] = boundedValue;
-    handleValueChange(newValues);
-  };
-
-  const handleThumbMouseDown = (index: number) => (event: React.MouseEvent) => {
-    if (disabled) return;
-    event.preventDefault();
-    
-    const handleMouseMove = (moveEvent: MouseEvent) => {
-      const track = trackRef.current;
-      if (!track) return;
-
-      const rect = track.getBoundingClientRect();
-      const percent = (moveEvent.clientX - rect.left) / rect.width;
-      const rawValue = min + percent * (max - min);
-      const steppedValue = Math.round(rawValue / step) * step;
-      const boundedValue = Math.max(min, Math.min(max, steppedValue));
-      
-      const newValues = [...sliderValue];
-      newValues[index] = boundedValue;
-      handleValueChange(newValues);
-    };
-
-    const handleMouseUp = () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-  };
-
-  return (
-    <div className="w-full" ref={ref} {...props}>
-      {showValueLabel && (
-        <div className={cn(
-          "flex justify-end mb-1 text-sm text-muted-foreground",
-          valueLabelClassName
-        )}>
-          {sliderValue.length === 1 ? (
-            <span>{formatValue(sliderValue[0])}</span>
-          ) : (
-            <span>{formatValue(sliderValue[0])} - {formatValue(sliderValue[sliderValue.length - 1])}</span>
-          )}
-        </div>
-      )}
-      
-      <div
-        className={cn(moonUISliderVariantsPro({ size }), className)}
-        data-disabled={disabled ? true : undefined}
-      >
-        {/* Track */}
-        <div
-          ref={trackRef}
-          className={cn(sliderTrackVariants({ variant: trackVariant || thumbVariant || "default" }))}
-          onClick={handleTrackClick}
-        >
-          {/* Range */}
-          <div
-            className={cn(sliderRangeVariants({ variant: rangeVariant || thumbVariant || "primary" }))}
-            style={{
-              left: '0%',
-              width: `${calculateThumbPercent(sliderValue[0], min, max)}%`,
-            }}
-          />
-        </div>
-
-        {/* Thumbs */}
-        {sliderValue.map((value, i) => (
-          <div
-            key={i}
-            className={cn(sliderThumbVariants({
-              variant: thumbVariant || "primary",
-              size: thumbSize
-            }))}
-            style={{
-              left: `${calculateThumbPercent(value, min, max)}%`,
-              transform: 'translateX(-50%)',
-              position: 'absolute',
-              top: '50%',
-              marginTop: thumbSize === "sm" ? '-6px' : thumbSize === "lg" ? '-12px' : '-8px',
-              cursor: disabled ? 'not-allowed' : 'pointer',
-            }}
-            onMouseDown={handleThumbMouseDown(i)}
-            aria-label={`Thumb ${i + 1}`}
-            tabIndex={disabled ? -1 : 0}
-            role="slider"
-            aria-valuemin={min}
-            aria-valuemax={max}
-            aria-valuenow={value}
-            aria-disabled={disabled}
-          />
-        ))}
-      </div>
-    </div>
-  )
-})
-
-MoonUISliderPro.displayName = "MoonUISliderPro"
-
-export { MoonUISliderPro  };
-
-// Backward compatibility exports
-export { MoonUISliderPro as Slider }