@moontra/moonui 3.0.0 → 3.1.0

package/src/components/ui/input-otp.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Dot } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Premium InputOTP Component
+ *
+ * input-otp kütüphanesi tabanlı, erişilebilir tek kullanımlık şifre (OTP) girişi.
+ * Paste desteği, pattern doğrulama ve aktif slot vurgusu sunar.
+ */
+
+// Pattern sabitleri — kullanım kolaylığı için input-otp'den yeniden export edilir
+export {
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS_AND_CHARS,
+} from "input-otp";
+
+/* -------------------------------------------------------------------------------------------------
+ * InputOTP Root
+ * -----------------------------------------------------------------------------------------------*/
+export type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  InputOTPProps
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "moonui-theme",
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+));
+InputOTP.displayName = "InputOTP";
+
+/* -------------------------------------------------------------------------------------------------
+ * InputOTPGroup
+ * -----------------------------------------------------------------------------------------------*/
+const InputOTPGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+
+/* -------------------------------------------------------------------------------------------------
+ * InputOTPSlot
+ * -----------------------------------------------------------------------------------------------*/
+const inputOTPSlotVariants = cva(
+  [
+    "relative flex h-10 w-10 items-center justify-center",
+    "border-y border-r border-input text-sm text-foreground",
+    "transition-all duration-200",
+    "first:rounded-l-md first:border-l last:rounded-r-md",
+  ],
+  {
+    variants: {
+      // Aktif slot vurgusu — token tabanlı ring stili
+      isActive: {
+        true: "z-10 ring-2 ring-ring ring-offset-background",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      isActive: false,
+    },
+  }
+);
+
+export interface InputOTPSlotProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Omit<VariantProps<typeof inputOTPSlotVariants>, "isActive"> {
+  /** Bu slotun temsil ettiği karakter index'i */
+  index: number;
+}
+
+const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(
+  ({ index, className, ...props }, ref) => {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const slot = inputOTPContext?.slots?.[index];
+    const char = slot?.char;
+    const hasFakeCaret = slot?.hasFakeCaret;
+    const isActive = slot?.isActive;
+
+    return (
+      <div
+        ref={ref}
+        data-active={isActive ? "" : undefined}
+        className={cn(inputOTPSlotVariants({ isActive: !!isActive }), className)}
+        {...props}
+      >
+        {char}
+        {hasFakeCaret && (
+          // Sahte imleç — gerçek input görünmez olduğu için aktif slotta yanıp söner
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+InputOTPSlot.displayName = "InputOTPSlot";
+
+/* -------------------------------------------------------------------------------------------------
+ * InputOTPSeparator
+ * -----------------------------------------------------------------------------------------------*/
+const InputOTPSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="separator"
+    className={cn("text-muted-foreground", className)}
+    {...props}
+  >
+    <Dot aria-hidden="true" />
+  </div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+  inputOTPSlotVariants,
+};

package/tailwind-preset.js

@@ -133,6 +133,7 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
         shake: "shake 0.5s ease-in-out",
         rotate: "rotate 0.5s ease-in-out",
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
       },
       keyframes: {
         "accordion-down": {
@@ -152,6 +153,11 @@ module.exports = {
           "0%": { transform: "rotate(0deg)" },
           "100%": { transform: "rotate(360deg)" },
         },
+        // InputOTP sahte imleç animasyonu
+        "caret-blink": {
+          "0%,70%,100%": { opacity: "1" },
+          "20%,50%": { opacity: "0" },
+        },
       },
       boxShadow: {
         "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",

package/src/use-paddle.ts

@@ -1,138 +0,0 @@
-import { useState, useEffect } from 'react';
-import { getPaddleInstance } from '@/lib/paddle';
-import type { Paddle } from '@paddle/paddle-js';
-
-interface UsePaddleReturn {
-  paddle: Paddle | null;
-  isLoading: boolean;
-  error: string | null;
-  openCheckout: (planId: string) => Promise<void>;
-}
-
-/**
- * Custom hook for Paddle integration
- * Handles Paddle initialization and checkout operations
- */
-export function usePaddle(): UsePaddleReturn {
-  const [paddle, setPaddle] = useState<Paddle | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Initialize Paddle on mount
-  useEffect(() => {
-    let mounted = true;
-
-    const initPaddle = async () => {
-      try {
-        setIsLoading(true);
-        setError(null);
-
-        const paddleInstance = await getPaddleInstance();
-        
-        if (mounted) {
-          if (paddleInstance) {
-            setPaddle(paddleInstance);
-          } else {
-            setError('Failed to initialize Paddle');
-          }
-        }
-      } catch (err) {
-        if (mounted) {
-          setError(err instanceof Error ? err.message : 'Unknown error');
-        }
-      } finally {
-        if (mounted) {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    initPaddle();
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  /**
-   * Open Paddle checkout for a specific plan
-   */
-  const openCheckout = async (planId: string) => {
-    if (!paddle) {
-      throw new Error('Paddle not initialized');
-    }
-
-    try {
-      // Call our API to handle the checkout
-      const response = await fetch('/api/paddle', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ plan: planId }),
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(errorText || 'Failed to create checkout');
-      }
-
-      const result = await response.json();
-      
-      if (!result.success) {
-        throw new Error(result.message || 'Checkout failed');
-      }
-
-      // For mock mode, we need to manually trigger checkout
-      if (process.env.NEXT_PUBLIC_USE_MOCK_PADDLE === 'true') {
-        console.log('🧪 [Hook] Mock mode detected, triggering checkout');
-        
-        // Import paddle config to get price ID
-        const { PADDLE_CONFIG } = await import('@/lib/paddle');
-        const priceId = PADDLE_CONFIG.priceIds[planId as keyof typeof PADDLE_CONFIG.priceIds];
-        
-        console.log('🧪 [Hook] Using price ID:', priceId, 'for plan:', planId);
-        console.log('🧪 [Hook] Paddle instance:', paddle);
-        
-        // Trigger mock checkout
-        const checkoutData = {
-          items: [{ priceId, quantity: 1 }],
-          settings: {
-            displayMode: 'overlay' as const,
-            theme: 'light' as const,
-            locale: 'en' as const,
-            successUrl: `${window.location.origin}/dashboard?success=true`
-          },
-          customData: {
-            planId,
-            userId: 'test_user',
-            timestamp: new Date().toISOString()
-          }
-        };
-        
-        console.log('🧪 [Hook] Opening checkout with data:', checkoutData);
-        
-        try {
-          paddle.Checkout.open(checkoutData);
-          console.log('🧪 [Hook] Checkout.open called successfully');
-        } catch (checkoutError) {
-          console.error('🧪 [Hook] Checkout.open error:', checkoutError);
-        }
-      }
-
-      // Checkout is opened inline by Paddle
-      console.log('✅ Paddle checkout opened for plan:', planId);
-      
-    } catch (error) {
-      console.error('❌ Checkout error:', error);
-      throw error;
-    }
-  };
-
-  return {
-    paddle,
-    isLoading,
-    error,
-    openCheckout,
-  };
-}