@moontra/moonui 2.0.7 → 2.0.9

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,256 @@
+"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 checkboxVariants = 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 CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+    VariantProps<typeof checkboxVariants> {
+  /**
+   * İndeterminate durumu - grup seçimlerinde bazı öğeler seçilmişse kullanılır
+   */
+  indeterminate?: boolean;
+  /**
+   * Özel ikon komponenti
+   */
+  icon?: React.ReactNode;
+}
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ 
+  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(checkboxVariants({ 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>
+  );
+});
+Checkbox.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 CheckboxGroup = 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>
+    );
+  }
+);
+CheckboxGroup.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 CheckboxLabel = 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>
+    );
+  }
+);
+CheckboxLabel.displayName = "CheckboxLabel";
+
+// Checkbox ve Label içeren bileşen
+interface CheckboxWithLabelProps extends CheckboxProps {
+  /**
+   * Label içeriği
+   */
+  label: React.ReactNode;
+  /**
+   * Label pozisyonu
+   */
+  labelPosition?: "start" | "end";
+  /**
+   * Label için HTML sınıfları
+   */
+  labelClassName?: string;
+}
+
+const CheckboxWithLabel = 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" && (
+        <CheckboxLabel 
+          htmlFor={checkboxId}
+          position="start"
+          disabled={checkboxProps.disabled}
+          className={labelClassName}
+        >
+          {label}
+        </CheckboxLabel>
+      )}
+      
+      <Checkbox ref={ref} id={checkboxId} {...checkboxProps} />
+      
+      {labelPosition === "end" && (
+        <CheckboxLabel 
+          htmlFor={checkboxId}
+          position="end"
+          disabled={checkboxProps.disabled}
+          className={labelClassName}
+        >
+          {label}
+        </CheckboxLabel>
+      )}
+    </div>
+  );
+});
+CheckboxWithLabel.displayName = "CheckboxWithLabel";
+
+export { Checkbox, CheckboxGroup, CheckboxLabel, CheckboxWithLabel };

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,129 @@
+"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 Collapsible = CollapsiblePrimitive.Root
+
+const collapsibleTriggerVariants = 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 collapsibleTriggerVariants> {}
+
+const CollapsibleTrigger = 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(collapsibleTriggerVariants({ variant, size }), className)}
+        asChild={asChild}
+        {...props}
+      >
+        {children}
+      </CollapsiblePrimitive.Trigger>
+    )
+  }
+
+  return (
+    <CollapsiblePrimitive.Trigger
+      ref={ref}
+      className={cn(collapsibleTriggerVariants({ 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>
+  )
+})
+CollapsibleTrigger.displayName = CollapsiblePrimitive.Trigger.displayName
+
+const collapsibleContentVariants = 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 collapsibleContentVariants> {}
+
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Content>,
+  CollapsibleContentProps
+>(({ className, children, variant, size, ...props }, ref) => (
+  <CollapsiblePrimitive.Content
+    ref={ref}
+    className={cn(collapsibleContentVariants({ variant, size }), className)}
+    {...props}
+  >
+    <div className="p-4">{children}</div>
+  </CollapsiblePrimitive.Content>
+))
+CollapsibleContent.displayName = CollapsiblePrimitive.Content.displayName
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  collapsibleTriggerVariants,
+  collapsibleContentVariants,
+}
+
+export type {
+  CollapsibleTriggerProps,
+  CollapsibleContentProps
+}