@moontra/moonui-pro 2.20.2 → 2.20.4

package/src/components/ui/radio-group.tsx

@@ -1,257 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Circle } from "lucide-react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-
-/**
- * Radio Group Component
- *
- * Accessible, customizable, and fully integrated with the theme system radio button group.
- * Allows users to select a single option from a group of choices.
- */
-
-const MoonUIradioGroupItemVariantsPro = cva(
-  "aspect-square border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "border-border bg-background text-primary",
-        outline: "border-border bg-transparent text-primary",
-        filled: "border-primary bg-primary/10 text-primary",
-      },
-      size: {
-        sm: "h-3.5 w-3.5",
-        default: "h-4 w-4",
-        md: "h-5 w-5",
-        lg: "h-6 w-6",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Radio group value
-   */
-  value?: string;
-  /**
-   * Function to call when radio group value changes
-   */
-  onValueChange?: (value: string) => void;
-  /**
-   * Radio group disabled state
-   */
-  disabled?: boolean;
-  /**
-   * Radio group name
-   */
-  name?: string;
-}
-
-const MoonUIRadioGroupContextPro = React.createContext<{
-  value?: string;
-  onValueChange?: (value: string) => void;
-  disabled?: boolean;
-  name?: string;
-}>({});
-
-const MoonUIRadioGroupPro = React.forwardRef<HTMLDivElement, RadioGroupProps>(
-  ({ className, value, onValueChange, disabled, name, ...props }, ref) => {
-    return (
-      <MoonUIRadioGroupContextPro.Provider value={{ value, onValueChange, disabled, name }}>
-        <div
-          ref={ref}
-          role="radiogroup"
-          className={cn("grid gap-2", className)}
-          {...props}
-        />
-      </MoonUIRadioGroupContextPro.Provider>
-    );
-  }
-);
-MoonUIRadioGroupPro.displayName = "RadioGroupPro";
-
-export interface RadioGroupItemProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
-    VariantProps<typeof MoonUIradioGroupItemVariantsPro> {
-  /**
-   * Custom indicator component
-   */
-  indicator?: React.ReactNode;
-  /**
-   * HTML id for radio button
-   */
-  id?: string;
-  /**
-   * Radio button value
-   */
-  value: string;
-  /**
-   * Radio button disabled state
-   */
-  disabled?: boolean;
-}
-
-const MoonUIRadioGroupItemPro = React.forwardRef<
-  HTMLInputElement,
-  RadioGroupItemProps
->(({ className, variant, size, indicator, id, value, disabled, ...props }, ref) => {
-  // Get context values from radio group
-  const radioGroup = React.useContext(MoonUIRadioGroupContextPro);
-  const generatedId = React.useId();
-  const radioId = id || generatedId;
-  const isChecked = radioGroup.value === value;
-  
-  // Call onValueChange function when RadioGroupItem changes
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (radioGroup.onValueChange) {
-      radioGroup.onValueChange(e.target.value);
-    }
-    
-    if (props.onChange) {
-      props.onChange(e);
-    }
-  };
-  
-  return (
-    <div className="relative flex items-center">
-      <input
-        type="radio"
-        id={radioId}
-        ref={ref}
-        value={value}
-        checked={isChecked}
-        disabled={disabled || radioGroup.disabled}
-        name={radioGroup.name}
-        onChange={handleChange}
-        className="sr-only"
-        {...props}
-      />
-      <label
-        htmlFor={radioId}
-        className={cn(
-          MoonUIradioGroupItemVariantsPro({ variant, size }),
-          "rounded-full",
-          "focus-visible:ring-primary/50",
-          "relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden",
-          disabled && "cursor-not-allowed opacity-50",
-          className
-        )}
-      >
-        <span className={cn(
-          "absolute inset-0 pointer-events-none",
-          isChecked && "flex items-center justify-center"
-        )}>
-          {isChecked && (indicator || <Circle className="h-[60%] w-[60%] fill-current text-current" />)}
-        </span>
-      </label>
-    </div>
-  );
-});
-MoonUIRadioGroupItemPro.displayName = "RadioGroupItemPro";
-
-// Radio Label Component
-interface RadioLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
-  /**
-   * HTML id for radio button
-   */
-  htmlFor?: string;
-  /**
-   * Label content
-   */
-  children: React.ReactNode;
-  /**
-   * Disabled state style
-   */
-  disabled?: boolean;
-}
-
-const MoonUIRadioLabelPro = React.forwardRef<HTMLLabelElement, RadioLabelProps>(
-  ({ className, htmlFor, children, disabled = false, ...props }, ref) => {
-    return (
-      <label
-        ref={ref}
-        htmlFor={htmlFor}
-        className={cn(
-          "text-sm font-medium leading-none ml-2 text-foreground",
-          disabled && "cursor-not-allowed opacity-70",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </label>
-    );
-  }
-);
-MoonUIRadioLabelPro.displayName = "RadioLabelPro";
-
-// Radio Item and Label combination
-interface RadioItemWithLabelProps extends RadioGroupItemProps {
-  /**
-   * Label content
-   */
-  label: React.ReactNode;
-  /**
-   * HTML classes for label
-   */
-  labelClassName?: string;
-  /**
-   * HTML id for radio button
-   */
-  id?: string;
-  /**
-   * Disabled state
-   */
-  disabled?: boolean;
-}
-
-const MoonUIRadioItemWithLabelPro = React.forwardRef<
-  HTMLInputElement,
-  RadioItemWithLabelProps
->(({ 
-  id, 
-  label, 
-  labelClassName, 
-  ...radioProps 
-}, ref) => {
-  const generatedId = React.useId();
-  const radioId = id || generatedId;
-  
-  return (
-    <div className="flex items-center">
-      <MoonUIRadioGroupItemPro ref={ref} id={radioId} {...radioProps} />
-      <MoonUIRadioLabelPro 
-        htmlFor={radioId}
-        disabled={radioProps.disabled}
-        className={labelClassName}
-      >
-        {label}
-      </MoonUIRadioLabelPro>
-    </div>
-  );
-});
-MoonUIRadioItemWithLabelPro.displayName = "RadioItemWithLabelPro";
-
-
-// Internal aliases for Pro component usage
-export const radioGroupItemVariantsInternal = MoonUIradioGroupItemVariantsPro
-export const RadioGroupContextInternal = MoonUIRadioGroupContextPro
-export const RadioGroupInternal = MoonUIRadioGroupPro
-export const RadioGroupItemInternal = MoonUIRadioGroupItemPro
-export const radioGroupInternal = MoonUIRadioGroupPro
-export const RadioLabelInternal = MoonUIRadioLabelPro
-export const RadioItemWithLabelInternal = MoonUIRadioItemWithLabelPro
-
-// Pro exports  
-export { MoonUIradioGroupItemVariantsPro, MoonUIRadioGroupContextPro, MoonUIRadioGroupPro, MoonUIRadioGroupItemPro, MoonUIRadioLabelPro, MoonUIRadioItemWithLabelPro }
-
-// Clean exports (without MoonUI prefix for easier usage)
-export { MoonUIradioGroupItemVariantsPro as radioGroupItemVariants, MoonUIRadioGroupContextPro as RadioGroupContext, MoonUIRadioGroupPro as RadioGroup, MoonUIRadioGroupItemPro as RadioGroupItem, MoonUIRadioLabelPro as RadioLabel, MoonUIRadioItemWithLabelPro as RadioItemWithLabel };

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

@@ -1,47 +0,0 @@
-"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

@@ -1,378 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp, Loader2, Search, X } from "lucide-react"
-
-import { cn } from "../../lib/utils"
-
-/**
- * Premium Select Component
- * 
- * Advanced dropdown/select component with variants, sizes and accessibility features.
- * Compatible with dark and light mode, providing a modern user experience with smooth animations.
- */
-
-// Directly re-exporting the Root component
-const MoonUISelectPro = SelectPrimitive.Root
-MoonUISelectPro.displayName = "MoonUISelectPro"
-
-const MoonUISelectGroupPro = SelectPrimitive.Group
-
-const MoonUISelectValuePro = SelectPrimitive.Value
-
-type SelectTriggerVariant = "standard" | "outline" | "ghost" | "underline";
-type SelectTriggerSize = "sm" | "md" | "lg";
-
-interface MoonUISelectTriggerProProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
-  /** Visual variant */
-  variant?: SelectTriggerVariant;
-  /** Size */
-  size?: SelectTriggerSize;
-  /** Error state */
-  error?: boolean | string;
-  /** Success state */
-  success?: boolean;
-  /** Loading state */
-  loading?: boolean;
-  /** Icon displayed on the left */
-  leftIcon?: React.ReactNode;
-  /** Icon displayed on the right (instead of default chevron) */
-  rightIcon?: React.ReactNode;
-  /** Enable clear button */
-  clearable?: boolean;
-  /** On clear callback */
-  onClear?: () => void;
-  /** Custom placeholder when value is selected */
-  selectedPlaceholder?: string;
-}
-
-const MoonUISelectTriggerPro = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  MoonUISelectTriggerProProps
->(({ className, children, variant = "standard", size = "md", error, success, loading, leftIcon, rightIcon, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      /* Base styles */
-      "flex w-full items-center justify-between gap-1 rounded-md transition-all duration-200",
-      "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      "focus-visible:outline-none",
-      /* Error state */
-      error && "border-error focus-visible:ring-error/30 focus-visible:border-error",
-      /* Success state */
-      success && "border-success focus-visible:ring-success/30 focus-visible:border-success",
-      /* Size variants */
-      size === "sm" && "h-8 text-xs px-2",
-      size === "md" && "h-10 text-sm px-3",
-      size === "lg" && "h-12 text-base px-4",
-      /* Visual variants */
-      variant === "standard" && "border border-gray-300 dark:border-gray-700 bg-background dark:bg-gray-900 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/50 focus-visible:border-primary dark:focus-visible:border-primary",
-      variant === "outline" && "border border-gray-300 dark:border-gray-700 bg-transparent hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/50 focus-visible:border-primary dark:focus-visible:border-primary",
-      variant === "ghost" && "border-none bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/50",
-      variant === "underline" && "border-t-0 border-l-0 border-r-0 border-b border-gray-300 dark:border-gray-600 rounded-none px-0 hover:border-gray-400 dark:hover:border-gray-500 focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary dark:focus-visible:border-primary",
-      className
-    )}
-    {...props}
-    disabled={props.disabled || loading}
-    data-error={error ? true : undefined}
-    data-success={success ? true : undefined}
-    data-loading={loading ? true : undefined}
-  >
-    <div className="flex items-center flex-1 gap-2">
-      {leftIcon && (
-        <span className="flex items-center justify-center text-gray-500 dark:text-gray-400">
-          {leftIcon}
-        </span>
-      )}
-      {loading ? (
-        <div className="flex items-center gap-2">
-          <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground dark:text-gray-400" />
-          <span className="text-muted-foreground dark:text-gray-400">Loading...</span>
-        </div>
-      ) : children}
-    </div>
-    {!loading && (
-      <SelectPrimitive.Icon asChild>
-        {rightIcon ? (
-          <span className="opacity-60">{rightIcon}</span>
-        ) : (
-          <ChevronDown className="h-4 w-4 opacity-60 transition-transform duration-200 ease-out group-data-[state=open]:rotate-180" />
-        )}
-      </SelectPrimitive.Icon>
-    )}
-  </SelectPrimitive.Trigger>
-))
-MoonUISelectTriggerPro.displayName = SelectPrimitive.Trigger.displayName
-
-/**
- * Scroll Up Button Component
- */
-const MoonUISelectScrollUpButtonPro = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1 text-muted-foreground hover:text-foreground transition-colors",
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-))
-MoonUISelectScrollUpButtonPro.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-/**
- * Scroll Down Button Component
- */
-const MoonUISelectScrollDownButtonPro = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1 text-muted-foreground hover:text-foreground transition-colors",
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-))
-MoonUISelectScrollDownButtonPro.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
-
-interface MoonUISelectContentProProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
-  /** Enable search functionality */
-  enableSearch?: boolean;
-  /** Search placeholder */
-  searchPlaceholder?: string;
-  /** No results text */
-  noResultsText?: string;
-  /** Loading search results */
-  searchLoading?: boolean;
-  /** Custom search icon */
-  searchIcon?: React.ReactNode;
-}
-
-const MoonUISelectContentPro = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  MoonUISelectContentProProps
->(({ className, children, position = "popper", side = "bottom", align = "start", enableSearch, searchPlaceholder = "Search...", noResultsText = "No results found", searchLoading, searchIcon, ...props }, ref) => {
-  const [searchValue, setSearchValue] = React.useState("");
-  
-  // Filter children based on search
-  const filteredChildren = React.useMemo(() => {
-    if (!enableSearch || !searchValue) return children;
-    
-    const searchLower = searchValue.toLowerCase();
-    return React.Children.toArray(children).filter((child) => {
-      if (!React.isValidElement(child)) return true;
-      
-      // Keep groups and labels
-      if (child.type === MoonUISelectGroupPro || child.type === MoonUISelectLabelPro || child.type === MoonUISelectSeparatorPro) {
-        return true;
-      }
-      
-      // Filter items
-      if (child.type === MoonUISelectItemPro) {
-        const reactChild = child as React.ReactElement<any>;
-        const text = reactChild.props.children?.toString().toLowerCase() || "";
-        return text.includes(searchLower);
-      }
-      
-      return true;
-    });
-  }, [children, searchValue, enableSearch]);
-  
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        ref={ref}
-        className={cn(
-          ["relative z-50 max-h-96 min-w-[8rem] overflow-hidden", 
-          "rounded-md border border-gray-200 dark:border-gray-700",
-          "bg-white dark:bg-gray-900 text-foreground", 
-          "shadow-lg dark:shadow-gray-900/20",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", 
-          "data-[state=open]:duration-150"],
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        )}
-        position={position}
-        side={side}
-        align={align}
-        sideOffset={4}
-        avoidCollisions={true}
-        collisionPadding={10}
-        {...props}
-      >
-        {enableSearch && (
-          <div className="p-2 border-b border-gray-200 dark:border-gray-700">
-            <div className="flex items-center gap-2 px-2 py-1.5 rounded-md bg-gray-100 dark:bg-gray-800">
-              {searchIcon || <Search className="h-4 w-4 text-gray-500 dark:text-gray-400" />}
-              <input
-                type="text"
-                placeholder={searchPlaceholder}
-                value={searchValue}
-                onChange={(e) => setSearchValue(e.target.value)}
-                className="flex-1 bg-transparent outline-none text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400"
-                onClick={(e) => e.stopPropagation()}
-                onKeyDown={(e) => e.stopPropagation()}
-              />
-              {searchValue && (
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setSearchValue("");
-                  }}
-                  className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-                >
-                  <X className="h-3 w-3" />
-                </button>
-              )}
-            </div>
-          </div>
-        )}
-        <MoonUISelectScrollUpButtonPro />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          )}
-        >
-          {searchLoading ? (
-            <div className="flex items-center justify-center py-8">
-              <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
-            </div>
-          ) : filteredChildren && React.Children.count(filteredChildren) > 0 ? (
-            filteredChildren
-          ) : enableSearch ? (
-            <div className="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
-              {noResultsText}
-            </div>
-          ) : (
-            children
-          )}
-        </SelectPrimitive.Viewport>
-        <MoonUISelectScrollDownButtonPro />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-})
-MoonUISelectContentPro.displayName = SelectPrimitive.Content.displayName
-
-const MoonUISelectLabelPro = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-MoonUISelectLabelPro.displayName = SelectPrimitive.Label.displayName
-
-type SelectItemVariant = "default" | "subtle" | "destructive" | "success" | "warning";
-type SelectItemSize = "sm" | "md" | "lg";
-
-interface MoonUISelectItemProProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
-  /** Visual variant */
-  variant?: SelectItemVariant;
-  /** Size */
-  size?: SelectItemSize;
-  /** Icon displayed on the right */
-  rightIcon?: React.ReactNode;
-  /** Custom indicator icon (instead of default check) */
-  customIndicator?: React.ReactNode;
-  /** Enable hover scale animation */
-  enableHoverScale?: boolean;
-  /** Description text shown below the main text */
-  description?: string;
-}
-
-const MoonUISelectItemPro = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  MoonUISelectItemProProps
->(({ className, children, variant = "default", size = "md", rightIcon, customIndicator, enableHoverScale, description, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all duration-150",
-      
-      /* Size variants */
-      size === "sm" && "py-1 pl-7 pr-2 text-xs",
-      size === "md" && "py-1.5 pl-8 pr-2 text-sm",
-      size === "lg" && "py-2 pl-9 pr-3 text-base",
-      
-      /* Color variants */
-      variant === "default" && "focus:bg-accent focus:text-accent-foreground dark:focus:bg-gray-700 dark:focus:text-gray-100",
-      variant === "subtle" && "focus:bg-gray-100 dark:focus:bg-gray-800 focus:text-foreground dark:focus:text-gray-200",
-      variant === "destructive" && "text-error dark:text-red-400 focus:bg-error/10 dark:focus:bg-red-900/20 focus:text-error dark:focus:text-red-300",
-      variant === "success" && "text-success dark:text-green-400 focus:bg-success/10 dark:focus:bg-green-900/20 focus:text-success dark:focus:text-green-300",
-      variant === "warning" && "text-warning dark:text-yellow-400 focus:bg-warning/10 dark:focus:bg-yellow-900/20 focus:text-warning dark:focus:text-yellow-300",
-      
-      /* Hover scale animation */
-      enableHoverScale && "hover:scale-[1.02] hover:pl-9",
-      
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        {customIndicator || <Check className="h-4 w-4" />}
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <div className="flex-1">
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-      {description && (
-        <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{description}</p>
-      )}
-    </div>
-    
-    {rightIcon && (
-      <span className="ml-auto pl-2 opacity-70">
-        {rightIcon}
-      </span>
-    )}
-  </SelectPrimitive.Item>
-))
-MoonUISelectItemPro.displayName = SelectPrimitive.Item.displayName
-
-const MoonUISelectSeparatorPro = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted dark:bg-gray-700", className)}
-    {...props}
-  />
-))
-MoonUISelectSeparatorPro.displayName = SelectPrimitive.Separator.displayName
-
-export { MoonUISelectPro,
-  MoonUISelectGroupPro,
-  MoonUISelectValuePro,
-  MoonUISelectTriggerPro,
-  MoonUISelectContentPro,
-  MoonUISelectLabelPro,
-  MoonUISelectItemPro,
-  MoonUISelectSeparatorPro,
-  MoonUISelectScrollUpButtonPro as SelectScrollUpButton,
-  MoonUISelectScrollDownButtonPro as SelectScrollDownButton,
- };
-
-// Backward compatibility exports
-export { MoonUISelectPro as Select, MoonUISelectTriggerPro as SelectTrigger, MoonUISelectContentPro as SelectContent, MoonUISelectItemPro as SelectItem, MoonUISelectValuePro as SelectValue, MoonUISelectGroupPro as SelectGroup, MoonUISelectLabelPro as SelectLabel, MoonUISelectSeparatorPro as SelectSeparator }