@authdog/react-elements 0.0.39 → 0.0.42

package/src/components/flow/totp-validator.tsx

@@ -1,93 +1,87 @@
-"use client"
+"use client";
 
-import type React from "react"
+import type React from "react";
 
-import { useState, useRef } from "react"
-import { Button } from "../../components/ui/button"
-import { Card, CardContent } from "../../components/ui/card"
-import { Alert, AlertDescription } from "../../components/ui/alert"
-import { Shield, CheckCircle, AlertCircle } from "lucide-react"
+import { useState, useRef } from "react";
+import { Button } from "../../components/ui/button";
+import { Card, CardContent } from "../../components/ui/card";
+import { Alert, AlertDescription } from "../../components/ui/alert";
+import { Shield, CheckCircle, AlertCircle } from "lucide-react";
 
 interface TOTPValidatorProps {
-    onValidate: (code: string) => Promise<void>;
+  onValidate: (code: string) => Promise<void>;
 }
 
-export const TOTPValidator = (
-    {
-        onValidate
-    }: TOTPValidatorProps
-) =>  {
-  const [code, setCode] = useState(["", "", "", "", "", ""])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState("")
-  const [success, setSuccess] = useState(false)
-  const inputRefs = useRef<(HTMLInputElement | null)[]>([])
+export const TOTPValidator = ({ onValidate }: TOTPValidatorProps) => {
+  const [code, setCode] = useState(["", "", "", "", "", ""]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
 
   const handleInputChange = (index: number, value: string) => {
     // Only allow digits
-    if (!/^\d*$/.test(value)) return
+    if (!/^\d*$/.test(value)) return;
 
-    const newCode = [...code]
-    newCode[index] = value.slice(-1) // Only take the last character
+    const newCode = [...code];
+    newCode[index] = value.slice(-1); // Only take the last character
 
-    setCode(newCode)
-    setError("")
-    setSuccess(false)
+    setCode(newCode);
+    setError("");
+    setSuccess(false);
 
     // Auto-focus next input
     if (value && index < 5) {
-      inputRefs.current[index + 1]?.focus()
+      inputRefs.current[index + 1]?.focus();
     }
-  }
+  };
 
   const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
     // Handle backspace
     if (e.key === "Backspace" && !code[index] && index > 0) {
-      inputRefs.current[index - 1]?.focus()
+      inputRefs.current[index - 1]?.focus();
     }
 
     // Handle paste
     if (e.key === "v" && (e.ctrlKey || e.metaKey)) {
-      e.preventDefault()
+      e.preventDefault();
       navigator.clipboard.readText().then((text) => {
-        const digits = text.replace(/\D/g, "").slice(0, 6).split("")
-        const newCode = [...code]
+        const digits = text.replace(/\D/g, "").slice(0, 6).split("");
+        const newCode = [...code];
         digits.forEach((digit, i) => {
-          if (i < 6) newCode[i] = digit
-        })
-        setCode(newCode)
+          if (i < 6) newCode[i] = digit;
+        });
+        setCode(newCode);
 
         // Focus the next empty input or the last one
-        const nextIndex = Math.min(digits.length, 5)
-        inputRefs.current[nextIndex]?.focus()
-      })
+        const nextIndex = Math.min(digits.length, 5);
+        inputRefs.current[nextIndex]?.focus();
+      });
     }
-  }
+  };
 
   const validateTOTP = async () => {
-    const totpCode = code.join("")
+    const totpCode = code.join("");
 
     if (totpCode.length !== 6) {
-      setError("Please enter all 6 digits")
-      return
+      setError("Please enter all 6 digits");
+      return;
     }
 
-    setLoading(true)
-    setError("")
+    setLoading(true);
+    setError("");
 
     try {
-        await onValidate(totpCode)
-        setSuccess(true)
+      await onValidate(totpCode);
+      setSuccess(true);
     } catch (error) {
-        setError("Invalid TOTP code. Please try again.")
+      setError("Invalid TOTP code. Please try again.");
     } finally {
-        setLoading(false)
+      setLoading(false);
     }
 
-
-
     // try {
-      // Call your TOTP validation endpoint
+    // Call your TOTP validation endpoint
     //   const response = await fetch("/api/validate-totp", {
     //     method: "POST",
     //     headers: {
@@ -126,20 +120,20 @@ export const TOTPValidator = (
     // } finally {
     //   setLoading(false)
     // }
-  }
+  };
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    validateTOTP()
-  }
+    e.preventDefault();
+    validateTOTP();
+  };
 
   const clearCode = () => {
-    setCode(["", "", "", "", "", ""])
-    setError("")
-    setSuccess(false)
-    setLoading(false)
-    inputRefs.current[0]?.focus()
-  }
+    setCode(["", "", "", "", "", ""]);
+    setError("");
+    setSuccess(false);
+    setLoading(false);
+    inputRefs.current[0]?.focus();
+  };
 
   if (success) {
     return (
@@ -151,17 +145,25 @@ export const TOTPValidator = (
                 <CheckCircle className="w-8 h-8 text-green-600" />
               </div>
               <div>
-                <h3 className="text-lg font-semibold text-green-900">Verification Successful!</h3>
-                <p className="text-sm text-green-700 mt-1">Your TOTP code has been validated.</p>
+                <h3 className="text-lg font-semibold text-green-900">
+                  Verification Successful!
+                </h3>
+                <p className="text-sm text-green-700 mt-1">
+                  Your TOTP code has been validated.
+                </p>
               </div>
-              <Button onClick={clearCode} variant="outline" className="bg-white">
+              <Button
+                onClick={clearCode}
+                variant="outline"
+                className="bg-white"
+              >
                 Verify Another Code
               </Button>
             </div>
           </CardContent>
         </Card>
       </div>
-    )
+    );
   }
 
   return (
@@ -174,29 +176,36 @@ export const TOTPValidator = (
                 <Shield className="w-6 h-6 text-blue-600" />
               </div>
               <h3 className="text-lg font-semibold">Enter Verification Code</h3>
-              <p className="text-sm text-muted-foreground mt-1">Enter the 6-digit code from your authenticator app</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                Enter the 6-digit code from your authenticator app
+              </p>
             </div>
 
             <form onSubmit={handleSubmit} className="space-y-6">
               <div className="flex justify-center gap-2">
                 {code.map((digit, index) => (
-                  <Card key={index} className="w-12 h-14 border-2 focus-within:border-blue-500 transition-colors">
+                  <Card
+                    key={index}
+                    className="w-12 h-14 border-2 focus-within:border-blue-500 transition-colors"
+                  >
                     <CardContent className="p-0 h-full flex items-center justify-center">
                       <input
                         ref={(el) => {
-                          inputRefs.current[index] = el
+                          inputRefs.current[index] = el;
                         }}
                         type="tel"
                         inputMode="numeric"
                         maxLength={1}
                         value={digit}
-                        onChange={(e) => handleInputChange(index, e.target.value)}
+                        onChange={(e) =>
+                          handleInputChange(index, e.target.value)
+                        }
                         onKeyDown={(e) => handleKeyDown(index, e)}
                         className="w-full h-full text-center text-2xl font-bold border-none outline-none bg-transparent"
                         autoComplete="one-time-code"
                         disabled={loading}
                         style={{
-                            height: 'auto'
+                          height: "auto",
                         }}
                       />
                     </CardContent>
@@ -212,20 +221,32 @@ export const TOTPValidator = (
               )}
 
               <div className="space-y-3">
-                <Button type="submit" className="w-full" disabled={loading || code.some((digit) => digit === "")}>
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={loading || code.some((digit) => digit === "")}
+                >
                   {loading ? "Verifying..." : "Verify Code"}
                 </Button>
 
-                <Button type="button" variant="ghost" size="sm" onClick={clearCode} className="w-full text-xs">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearCode}
+                  className="w-full text-xs"
+                >
                   Clear Code
                 </Button>
               </div>
             </form>
 
-            <p className="text-xs text-muted-foreground">Codes refresh every 30 seconds</p>
+            <p className="text-xs text-muted-foreground">
+              Codes refresh every 30 seconds
+            </p>
           </div>
         </CardContent>
       </Card>
     </div>
-  )
-}
+  );
+};

package/src/components/icons.tsx

@@ -1,31 +1,25 @@
-import { LucideProps } from "lucide-react"
-import { useEffect, useState } from "react"
+import { LucideProps } from "lucide-react";
+import { useEffect, useState } from "react";
 
 const iconProps: LucideProps = {
   className: "mr-2 h-4 w-4",
-  "aria-hidden": "true"
-}
+  "aria-hidden": "true",
+};
 
-export const renderIcon = ((Icon: any) => {
-  const [isMounted, setIsMounted] = useState(false)
+export const IconWrapper = ({ Icon }: { Icon: any }) => {
+  const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
-    setIsMounted(true)
-  }, [])
-
-  if (!isMounted) {
-    return <span className="mr-2 h-4 w-4" aria-hidden="true" />
-  }
+    setIsMounted(true);
+  }, []);
 
-  return <Icon {...iconProps} />
-}) as React.FC<{
-  Icon: any
-}>
-
-export const IconWrapper = ({ Icon }: { Icon: any }) => {
   return (
     <span className="inline-flex items-center justify-center">
-      {renderIcon(Icon)}
+      {!isMounted ? (
+        <span className="mr-2 h-4 w-4" aria-hidden="true" />
+      ) : (
+        <Icon {...iconProps} />
+      )}
     </span>
-  )
-}
+  );
+};

package/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@authdog/react-elements/lib/utils"
+import { cn } from "../../lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
@@ -16,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 function Alert({
   className,
@@ -31,7 +31,7 @@ function Alert({
       className={cn(alertVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -40,11 +40,11 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="alert-title"
       className={cn(
         "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDescription({
@@ -56,11 +56,11 @@ function AlertDescription({
       data-slot="alert-description"
       className={cn(
         "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/avatar.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@authdog/react-elements/lib/utils"
+import { cn } from "../../lib/utils";
 
 function Avatar({
   className,
@@ -14,11 +14,11 @@ function Avatar({
       data-slot="avatar"
       className={cn(
         "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarImage({
@@ -31,7 +31,7 @@ function AvatarImage({
       className={cn("aspect-square size-full", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarFallback({
@@ -43,11 +43,11 @@ function AvatarFallback({
       data-slot="avatar-fallback"
       className={cn(
         "bg-muted flex size-full items-center justify-center rounded-full",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };

package/src/components/ui/badge.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@authdog/react-elements/lib/utils"
+import { cn } from "../../lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
@@ -22,8 +22,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 function Badge({
   className,
@@ -32,7 +32,7 @@ function Badge({
   ...props
 }: React.ComponentProps<"span"> &
   VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
+  const Comp = asChild ? Slot : "span";
 
   return (
     <Comp
@@ -40,7 +40,7 @@ function Badge({
       className={cn(badgeVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

package/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@authdog/react-elements/lib/utils"
+import { cn } from "../../lib/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -8,11 +8,11 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card"
       className={cn(
         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -21,11 +21,11 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-header"
       className={cn(
         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -35,7 +35,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
@@ -45,7 +45,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
@@ -54,11 +54,11 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-action"
       className={cn(
         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -68,7 +68,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("px-6", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -78,7 +78,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -89,4 +89,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-}
+};