@moontra/moonui 2.0.7 → 2.0.9

package/src/components/ui/switch.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "../../lib/utils"
+
+type SwitchSize = "sm" | "md" | "lg";
+type SwitchVariant = "primary" | "success" | "warning" | "danger" | "secondary";
+
+export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+  /** Switch boyutu */
+  size?: SwitchSize;
+  /** Switch renk varyantı */
+  variant?: SwitchVariant;
+  /** Yükleniyor durumunu gösterir */
+  loading?: boolean;
+  /** Sol tarafta gösterilecek ikon */
+  leftIcon?: React.ReactNode;
+  /** Sağ tarafta gösterilecek ikon */
+  rightIcon?: React.ReactNode;
+  /** Switch açıklaması */
+  description?: string;
+}
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  SwitchProps
+>(({ className, size = "md", variant = "primary", loading, leftIcon, rightIcon, description, ...props }, ref) => (
+  <div className="inline-flex items-center gap-2">
+    {leftIcon && <span className="text-muted-foreground">{leftIcon}</span>}
+    <SwitchPrimitives.Root
+      className={cn(
+        "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 dark:data-[state=unchecked]:bg-gray-700/70 dark:focus-visible:ring-primary/40 dark:focus-visible:ring-offset-gray-950",
+        
+        // Boyutlar
+        size === "sm" && "h-4 w-8",
+        size === "md" && "h-6 w-11", 
+        size === "lg" && "h-7 w-14",
+        
+        // Varyantlar (checked durumunda)
+        variant === "primary" && "data-[state=checked]:bg-primary",
+        variant === "success" && "data-[state=checked]:bg-success",
+        variant === "warning" && "data-[state=checked]:bg-warning",
+        variant === "danger" && "data-[state=checked]:bg-error",
+        variant === "secondary" && "data-[state=checked]:bg-accent",
+        
+        // Unchecked durumu
+        "data-[state=unchecked]:bg-input",
+        
+        // Loading durumu
+        loading && "opacity-80 cursor-wait",
+        
+        className
+      )}
+      disabled={loading || props.disabled}
+      {...props}
+      ref={ref}
+    >
+      {loading ? (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-primary"></div>
+        </div>
+      ) : null}
+      
+      <SwitchPrimitives.Thumb
+        className={cn(
+          "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+          // Boyuta göre thumb boyutları
+          size === "sm" && "h-3 w-3 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+          size === "md" && "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+          size === "lg" && "h-6 w-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0",
+        )}
+      />
+    </SwitchPrimitives.Root>
+    {rightIcon && <span className="text-muted-foreground">{rightIcon}</span>}
+    {description && <span className="text-sm text-muted-foreground">{description}</span>}
+  </div>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
+export type { SwitchSize, SwitchVariant }

package/src/components/ui/table.tsx

@@ -0,0 +1,322 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+export type SortDirection = "asc" | "desc" | null;
+
+const tableVariants = cva(
+  "w-full caption-bottom text-sm",
+  {
+    variants: {
+      variant: {
+        default: "dark:text-gray-200",
+        bordered: "border border-border dark:border-gray-700",
+        striped: "dark:text-gray-200",
+        card: "border border-border dark:border-gray-700 rounded-md shadow-sm dark:shadow-gray-900/20",
+        minimal: "border-none dark:text-gray-200",
+      },
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ColumnDefinition<T> {
+  id: string;
+  header: React.ReactNode;
+  accessorKey?: keyof T;
+  cell?: (row: T) => React.ReactNode;
+  sortable?: boolean;
+}
+
+interface TableProps<T>
+  extends React.HTMLAttributes<HTMLTableElement>,
+    VariantProps<typeof tableVariants> {
+  /** Veri yükleniyor durumunu gösterir */
+  loading?: boolean;
+  /** Sıralama için kullanılan sütun */
+  sortColumn?: string;
+  /** Sıralama yönü */
+  sortDirection?: SortDirection;
+  /** Sıralama değiştiğinde çağrılacak fonksiyon */
+  onSortChange?: (column: string, direction: SortDirection) => void;
+  /** Boş durum için özel içerik */
+  emptyContent?: React.ReactNode;
+  /** Seçili satır id'leri */
+  selectedRowIds?: string[];
+  /** Satır seçim değiştiğinde çağrılacak fonksiyon */
+  onRowSelectionChange?: (selectedRowIds: string[]) => void;
+  /** Satır seçim devre dışı */
+  disableRowSelection?: boolean;
+  /** Her satır için benzersiz id çıkarma fonksiyonu */
+  getRowId?: (row: T) => string;
+}
+
+// Tip parametresiz Table bileşeni için varsayılan tip, herhangi bir veri tipini kabul edebilmesi için
+const Table = React.forwardRef<
+  HTMLTableElement,
+  TableProps<unknown>
+>(({ 
+  className, 
+  variant, 
+  size, 
+  loading, 
+  emptyContent,
+  // Kullanılmayan özellikleri yoruma alarak lint uyarılarını önlüyoruz
+  // sortColumn,
+  // sortDirection,
+  // onSortChange,
+  // selectedRowIds,
+  // onRowSelectionChange,
+  // disableRowSelection,
+  // getRowId,
+  ...props 
+}, ref) => {
+  // Apply striped styles to the tbody via a class name
+  const striped = variant === "striped";
+  
+  // Çocukları güvenli bir şekilde işle ve tip kontrollerini doğru yap
+  const childrenWithProps = React.Children.map(props.children, (child) => {
+    if (React.isValidElement(child)) {
+      if (child.type === "tbody") {
+        // Tip güvenliği için props'ları düzgün şekilde ele alıyoruz
+        const tbodyProps = child.props as Record<string, unknown>;
+        return React.cloneElement(child as React.ReactElement<React.HTMLAttributes<HTMLTableSectionElement>>, {
+          className: cn(tbodyProps.className as string | undefined, striped && "even:[&>tr]:bg-muted/50")
+        });
+      }
+    }
+    return child;
+  });
+  
+  return (
+    <div className="relative w-full overflow-auto">
+      {/* Yükleniyor durumu için overlay */}
+      {loading && (
+        <div className="absolute inset-0 bg-background/60 flex items-center justify-center z-10">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+        </div>
+      )}
+      
+      <table
+        ref={ref}
+        className={cn(
+          tableVariants({ variant, size }),
+          loading && "opacity-70",
+          className
+        )}
+        {...props}
+      >
+        {childrenWithProps}
+      </table>
+      
+    </div>
+  );
+});
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  /** Veri yoksa gösterilecek boş durum içeriği */
+  emptyContent?: React.ReactNode;
+  /** Varsayılan boş durum mesajı */
+  emptyMessage?: string;
+}
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  TableBodyProps
+>(({ className, emptyContent, emptyMessage = "No data available", children, ...props }, ref) => {
+  // Çocuk elementlerin varlığını kontrol et
+  const hasChildren = React.Children.count(children) > 0;
+  
+  return (
+    <tbody
+      ref={ref}
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    >
+      {hasChildren ? (
+        children
+      ) : (
+        <tr>
+          <td colSpan={100} className="h-24 text-center">
+            {emptyContent || (
+              <div className="py-6 text-muted-foreground">
+                <div className="text-sm">
+                  {emptyMessage}
+                </div>
+              </div>
+            )}
+          </td>
+        </tr>
+      )}
+    </tbody>
+  )
+});
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary text-primary-foreground font-medium", className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  /** Bu sütun için sıralama durumu */
+  sortable?: boolean;
+  /** Bu sütunun sıralanma durumu */
+  sorted?: SortDirection;
+  /** Sıralama değiştiğinde çağrılacak fonksiyon */
+  onSort?: () => void;
+}
+
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  ({ className, sortable, sorted, onSort, children, ...props }, ref) => {
+    // Sıralama için simgeler
+    const renderSortIcon = () => {
+      if (!sortable) return null;
+      
+      if (sorted === "asc") {
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="ml-1 h-4 w-4 inline-block"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        );
+      }
+      
+      if (sorted === "desc") {
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="ml-1 h-4 w-4 inline-block"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        );
+      }
+      
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="ml-1 h-4 w-4 inline-block opacity-30"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+            clipRule="evenodd"
+          />
+        </svg>
+      );
+    };
+    
+    return (
+      <th
+        ref={ref}
+        className={cn(
+          "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+          sortable && "cursor-pointer hover:text-foreground select-none",
+          className
+        )}
+        onClick={sortable ? onSort : undefined}
+        {...props}
+      >
+        <div className="flex items-center">
+          {children}
+          {sortable && renderSortIcon()}
+        </div>
+      </th>
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
+
+export type { TableBodyProps };

package/src/components/ui/tabs.tsx

@@ -0,0 +1,195 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+/* -------------------------------------------------------------------------------------------------
+ * Tabs Root
+ * -----------------------------------------------------------------------------------------------*/
+interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+  /** Mobil görünümde dikey düzen için */
+  vertical?: boolean;
+}
+
+const Tabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  TabsProps
+>(({ vertical = false, ...props }, ref) => (
+  <TabsPrimitive.Root
+    ref={ref}
+    orientation={vertical ? "vertical" : "horizontal"}
+    {...props}
+  />
+));
+
+Tabs.displayName = TabsPrimitive.Root.displayName;
+
+/* -------------------------------------------------------------------------------------------------
+ * TabsList
+ * -----------------------------------------------------------------------------------------------*/
+const tabsListVariants = cva(
+  "flex items-center justify-start transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted rounded-md p-1 text-muted-foreground dark:bg-gray-800/80 dark:text-gray-400",
+        pills: "bg-transparent gap-2 p-0 dark:text-gray-400", 
+        underline: "bg-transparent border-b border-border dark:border-gray-700 gap-4 dark:text-gray-400",
+        cards: "bg-transparent gap-2 p-0 dark:text-gray-400",
+        minimal: "bg-transparent gap-1 p-0 dark:text-gray-400",
+      },
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col items-start gap-1"
+      },
+      fullWidth: {
+        true: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      orientation: "horizontal",
+      fullWidth: false
+    }
+  }
+);
+
+interface TabsListProps 
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,
+    VariantProps<typeof tabsListVariants> {
+  /** Dikey düzende göster */
+  orientation?: "horizontal" | "vertical";
+}
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, variant, orientation, fullWidth, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(tabsListVariants({ variant, orientation, fullWidth, className }))}
+    {...props}
+  />
+));
+
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+/* -------------------------------------------------------------------------------------------------
+ * TabsTrigger
+ * -----------------------------------------------------------------------------------------------*/
+const tabsTriggerVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-all duration-200 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: "rounded-md data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:data-[state=active]:bg-gray-900 dark:data-[state=active]:text-gray-100 dark:data-[state=active]:shadow-gray-950/10",
+        underline: "rounded-none border-b-2 border-transparent pb-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground dark:data-[state=active]:border-primary/80 dark:data-[state=active]:text-gray-100",
+        pills: "rounded-full bg-muted hover:bg-muted/80 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:bg-gray-800 dark:hover:bg-gray-700 dark:data-[state=active]:bg-primary/90 dark:data-[state=active]:text-white",
+        cards: "rounded-md bg-muted/50 hover:bg-muted data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-md dark:bg-gray-800/50 dark:hover:bg-gray-700/50 dark:data-[state=active]:bg-gray-900 dark:data-[state=active]:text-gray-100 dark:data-[state=active]:shadow-gray-950/20",
+        minimal: "rounded-sm bg-transparent hover:bg-muted/30 data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:underline data-[state=active]:underline-offset-4 dark:hover:bg-gray-800/30 dark:data-[state=active]:text-gray-200",
+      },
+      size: {
+        sm: "h-7 px-2 text-xs",
+        md: "h-9 px-3 py-1.5 text-sm",
+        lg: "h-10 px-4 py-2 text-base",
+      },
+      orientation: {
+        horizontal: "",
+        vertical: "justify-start w-full text-left"
+      },
+      fullWidth: {
+        true: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      orientation: "horizontal",
+      fullWidth: false
+    }
+  }
+);
+
+interface TabsTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,
+    VariantProps<typeof tabsTriggerVariants> {
+  /** İkon konumu */
+  iconPosition?: "left" | "right" | "none";
+  /** İkon */
+  icon?: React.ReactNode;
+  /** Badge içeriği */
+  badge?: React.ReactNode;
+  /** Aktif olmayan durumda yarı saydam */
+  fadeTabs?: boolean;
+  /** Dikey düzende göster */
+  orientation?: "horizontal" | "vertical";
+}
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(({ 
+  className, 
+  variant, 
+  size, 
+  icon, 
+  iconPosition = "left", 
+  badge,
+  fadeTabs = false,
+  orientation,
+  fullWidth,
+  children, 
+  ...props 
+}, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      tabsTriggerVariants({ variant, size, orientation, fullWidth }),
+      fadeTabs && "data-[state=inactive]:opacity-60",
+      className
+    )}
+    {...props}
+  >
+    {icon && iconPosition === "left" && (
+      <span className="mr-2">{icon}</span>
+    )}
+    {children}
+    {icon && iconPosition === "right" && (
+      <span className="ml-2">{icon}</span>
+    )}
+    {badge && (
+      <span className="ml-2">{badge}</span>
+    )}
+  </TabsPrimitive.Trigger>
+));
+
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+/* -------------------------------------------------------------------------------------------------
+ * TabsContent
+ * -----------------------------------------------------------------------------------------------*/
+interface TabsContentProps 
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
+  /** İçerik animasyonu */
+  animated?: boolean;
+}
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  TabsContentProps
+>(({ className, animated = false, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      animated && "data-[state=active]:animate-fadeIn data-[state=inactive]:animate-fadeOut",
+      className
+    )}
+    {...props}
+  />
+));
+
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/textarea.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  // Enhanced props that shouldn't be passed to DOM
+  variant?: "default" | "outline" | "ghost" | "underline"
+  size?: "sm" | "md" | "lg"
+  error?: boolean | string
+  success?: boolean
+  loading?: boolean
+  autoResize?: boolean
+  maxHeight?: number
+  characterCount?: boolean
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ 
+    className, 
+    // Extract enhanced props to prevent them from being passed to DOM
+    variant,
+    size,
+    error,
+    success,
+    loading,
+    autoResize,
+    maxHeight,
+    characterCount,
+    ...props 
+  }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }