@moontra/moonui 2.0.8 → 2.0.9

package/src/components/ui/progress.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Progress Bileşeni
+ *
+ * İlerleme durumunu görsel olarak gösteren, tema sistemiyle tam entegre bir bileşen.
+ * Yükleme işlemleri, form gönderimi ve diğer zaman alan işlemleri göstermek için kullanılır.
+ */
+
+const progressVariants = cva(
+  "relative overflow-hidden bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        primary: "bg-primary/20",
+        secondary: "bg-secondary/20",
+        success: "bg-success/20",
+        warning: "bg-warning/20",
+        error: "bg-error/20",
+      },
+      size: {
+        xs: "h-1",
+        sm: "h-1.5",
+        default: "h-2",
+        md: "h-2.5",
+        lg: "h-3",
+        xl: "h-4",
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        default: "rounded-md", 
+        lg: "rounded-lg",
+        full: "rounded-full",
+      },
+      animation: {
+        default: "[&>div]:transition-all [&>div]:duration-500",
+        smooth: "[&>div]:transition-all [&>div]:duration-700",
+        fast: "[&>div]:transition-all [&>div]:duration-300",
+        none: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "full",
+      animation: "default",
+    },
+  }
+);
+
+const progressIndicatorVariants = cva(
+  "h-full w-full flex-1",
+  {
+    variants: {
+      variant: {
+        default: "bg-foreground",
+        primary: "bg-primary",
+        secondary: "bg-secondary",
+        success: "bg-success",
+        warning: "bg-warning",
+        error: "bg-error",
+      },
+      animation: {
+        default: "transition-all duration-500",
+        smooth: "transition-all duration-700",
+        fast: "transition-all duration-300",
+        none: "",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      animation: "default",
+    },
+  }
+);
+
+export interface ProgressProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof progressVariants> {
+  /**
+   * İlerleme çubuğu değeri (0-100)
+   */
+  value?: number;
+  /**
+   * İndikatör (dolgu) için renk varyantı
+   */
+  indicatorVariant?: VariantProps<typeof progressIndicatorVariants>["variant"];
+  /**
+   * İlerleme durumunu gösteren metin görünürlüğü
+   */
+  showValueLabel?: boolean;
+  /**
+   * İlerleme değeri etiketi için format (ör: "30%" veya "3/10")
+   */
+  valueLabel?: string;
+  /**
+   * Etiket stili
+   */
+  labelClassName?: string;
+  /**
+   * Belirsiz ilerleme animasyonu (indeterminate)
+   */
+  indeterminate?: boolean;
+  /**
+   * İlerleme değeri maksimumu (default: 100)
+   */
+  max?: number;
+}
+
+const Progress = React.forwardRef<
+  HTMLDivElement,
+  ProgressProps
+>(({
+  className,
+  value = 0,
+  variant,
+  size,
+  radius,
+  animation,
+  indicatorVariant,
+  showValueLabel = false,
+  valueLabel,
+  labelClassName,
+  indeterminate = false,
+  max = 100,
+  ...props
+}, ref) => {
+  // İlerleme değeri 0-100 arasında olmalı
+  const normalizedValue = Math.max(0, Math.min(value, max));
+  const percentage = max > 0 ? (normalizedValue / max) * 100 : 0;
+  
+  // Etiket içeriği
+  const label = valueLabel || `${Math.round(percentage)}%`;
+  
+  return (
+    <>
+      {showValueLabel && (
+        <div className="flex justify-between items-center mb-1">
+          <span 
+            className={cn(
+              "text-sm font-medium text-muted-foreground",
+              labelClassName
+            )}
+          >
+            {label}
+          </span>
+        </div>
+      )}
+      <div
+        ref={ref}
+        className={cn(progressVariants({ variant, size, radius, animation }), className)}
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-valuenow={indeterminate ? undefined : normalizedValue}
+        {...props}
+      >
+        <div
+          className={cn(
+            progressIndicatorVariants({ variant: indicatorVariant || "primary", animation }),
+            indeterminate && "animate-indeterminate-progress"
+          )}
+          style={indeterminate ? {} : { transform: `translateX(-${100 - percentage}%)` }}
+        />
+      </div>
+    </>
+  );
+});
+Progress.displayName = "Progress";
+
+// Not: Belirsiz ilerleme animasyonu için CSS keyframe styles.css veya Tailwind config içinde tanımlanmalı
+// @keyframes indeterminate-progress içeren bir tanımlama yapılmalıdır
+// .animate-indeterminate-progress sınıfı da bu animasyonu kullanmalıdır
+
+export { Progress, progressVariants };

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

@@ -0,0 +1,243 @@
+"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 radioGroupItemVariants = 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 RadioGroupContext = React.createContext<{
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  name?: string;
+}>({});
+
+const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ className, value, onValueChange, disabled, name, ...props }, ref) => {
+    return (
+      <RadioGroupContext.Provider value={{ value, onValueChange, disabled, name }}>
+        <div
+          ref={ref}
+          role="radiogroup"
+          className={cn("grid gap-2", className)}
+          {...props}
+        />
+      </RadioGroupContext.Provider>
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
+export interface RadioGroupItemProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof radioGroupItemVariants> {
+  /**
+   * 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 RadioGroupItem = React.forwardRef<
+  HTMLInputElement,
+  RadioGroupItemProps
+>(({ className, variant, size, indicator, id, value, disabled, ...props }, ref) => {
+  // Get context values from radio group
+  const radioGroup = React.useContext(RadioGroupContext);
+  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(
+          radioGroupItemVariants({ 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>
+  );
+});
+RadioGroupItem.displayName = "RadioGroupItem";
+
+// 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 RadioLabel = 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>
+    );
+  }
+);
+RadioLabel.displayName = "RadioLabel";
+
+// 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 RadioItemWithLabel = React.forwardRef<
+  HTMLInputElement,
+  RadioItemWithLabelProps
+>(({ 
+  id, 
+  label, 
+  labelClassName, 
+  ...radioProps 
+}, ref) => {
+  const generatedId = React.useId();
+  const radioId = id || generatedId;
+  
+  return (
+    <div className="flex items-center">
+      <RadioGroupItem ref={ref} id={radioId} {...radioProps} />
+      <RadioLabel 
+        htmlFor={radioId}
+        disabled={radioProps.disabled}
+        className={labelClassName}
+      >
+        {label}
+      </RadioLabel>
+    </div>
+  );
+});
+RadioItemWithLabel.displayName = "RadioItemWithLabel";
+
+export { RadioGroup, RadioGroupItem, RadioLabel, RadioItemWithLabel };

package/src/components/ui/select.tsx

@@ -0,0 +1,273 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp, Loader2 } 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 Select = SelectPrimitive.Root
+Select.displayName = "Select"
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+type SelectTriggerVariant = "standard" | "outline" | "ghost" | "underline";
+type SelectTriggerSize = "sm" | "md" | "lg";
+
+interface SelectTriggerProps 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;
+}
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(({ 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>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+/**
+ * Scroll Up Button Component
+ */
+const SelectScrollUpButton = 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>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+/**
+ * Scroll Down Button Component
+ */
+const SelectScrollDownButton = 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>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "item-aligned", ...props }, ref) => (
+  <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}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = 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}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+type SelectItemVariant = "default" | "subtle" | "destructive" | "success" | "warning";
+type SelectItemSize = "sm" | "md" | "lg";
+
+interface SelectItemProps 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;
+}
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  SelectItemProps
+>(({ className, children, variant = "default", size = "md", rightIcon, customIndicator, ...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",
+      
+      /* 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",
+      
+      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>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    
+    {rightIcon && (
+      <span className="ml-auto pl-2 opacity-70">
+        {rightIcon}
+      </span>
+    )}
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = 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}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}