abhishek-portfolio-template 1.0.0

package/template/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+        inset?: boolean
+    }
+>(({ className, inset, children, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+            "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+            inset && "pl-8",
+            className,
+        )}
+        {...props}
+    >
+        {children}
+        <ChevronRight className="ml-auto h-4 w-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+    DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubContent
+        ref={ref}
+        className={cn(
+            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+            className,
+        )}
+        {...props}
+    />
+))
+DropdownMenuSubContent.displayName =
+    DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+    <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={cn(
+                "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                className,
+            )}
+            {...props}
+        />
+    </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+        inset?: boolean
+    }
+>(({ className, inset, ...props }, ref) => (
+    <DropdownMenuPrimitive.Item
+        ref={ref}
+        className={cn(
+            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            inset && "pl-8",
+            className,
+        )}
+        {...props}
+    />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+    <DropdownMenuPrimitive.CheckboxItem
+        ref={ref}
+        className={cn(
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            className,
+        )}
+        checked={checked}
+        {...props}
+    >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <DropdownMenuPrimitive.ItemIndicator>
+                <Check className="h-4 w-4" />
+            </DropdownMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+    DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+    <DropdownMenuPrimitive.RadioItem
+        ref={ref}
+        className={cn(
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            className,
+        )}
+        {...props}
+    >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <DropdownMenuPrimitive.ItemIndicator>
+                <Circle className="h-2 w-2 fill-current" />
+            </DropdownMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+        inset?: boolean
+    }
+>(({ className, inset, ...props }, ref) => (
+    <DropdownMenuPrimitive.Label
+        ref={ref}
+        className={cn(
+            "px-2 py-1.5 text-sm font-semibold",
+            inset && "pl-8",
+            className,
+        )}
+        {...props}
+    />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+    React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.Separator
+        ref={ref}
+        className={cn("-mx-1 my-1 h-px bg-muted", className)}
+        {...props}
+    />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+    return (
+        <span
+            className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+            {...props}
+        />
+    )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuCheckboxItem,
+    DropdownMenuRadioItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuGroup,
+    DropdownMenuPortal,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuRadioGroup,
+}

package/template/src/components/ui/emoji-rating.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import { useState } from "react"
+import { cn } from "@/lib/utils"
+
+interface RatingInteractionProps {
+    className?: string
+}
+
+const ratingData = [
+    { emoji: "😔", label: "Terrible", color: "from-red-400 to-red-500", shadowColor: "shadow-red-500/30" },
+    { emoji: "😕", label: "Poor", color: "from-orange-400 to-orange-500", shadowColor: "shadow-orange-500/30" },
+    { emoji: "😐", label: "Okay", color: "from-yellow-400 to-yellow-500", shadowColor: "shadow-yellow-500/30" },
+    { emoji: "🙂", label: "Good", color: "from-lime-400 to-lime-500", shadowColor: "shadow-lime-500/30" },
+    { emoji: "😍", label: "Amazing", color: "from-emerald-400 to-emerald-500", shadowColor: "shadow-emerald-500/30" },
+]
+
+export function RatingInteraction({ className }: RatingInteractionProps) {
+    const [rating, setRating] = useState(0)
+    const [hoverRating, setHoverRating] = useState(0)
+    const [submitted, setSubmitted] = useState(false)
+
+    const handleClick = async (value: number) => {
+        setRating(value)
+        setSubmitted(true)
+
+        try {
+            await fetch('/api/ratings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ rating: value })
+            })
+        } catch (e) {
+            console.error("Failed to submit rating", e)
+        }
+    }
+
+    const displayRating = hoverRating || rating
+
+    if (submitted) {
+        return (
+            <div className={cn("flex flex-col items-center gap-4 py-8 animate-in fade-in zoom-in duration-500", className)}>
+                <div className="w-16 h-16 mb-2"><img src="https://emojicdn.elk.sh/🎉?style=apple" className="w-full h-full object-contain" alt="Success" /></div>
+                <p className="text-white/60 font-medium">Thank you for your feedback!</p>
+            </div>
+        )
+    }
+
+    return (
+        <div className={cn("flex flex-col items-center gap-6", className)}>
+            <div className="text-center space-y-1">
+                <p className="text-xs font-semibold uppercase tracking-[0.2em] text-white/40">How was your experience?</p>
+            </div>
+
+            {/* Emoji rating buttons */}
+            <div className="flex items-center gap-3">
+                {ratingData.map((item, i) => {
+                    const value = i + 1
+                    const isActive = value <= displayRating
+
+                    return (
+                        <button
+                            key={value}
+                            onClick={() => handleClick(value)}
+                            onMouseEnter={() => setHoverRating(value)}
+                            onMouseLeave={() => setHoverRating(0)}
+                            className="group relative focus:outline-none"
+                            aria-label={`Rate ${value}: ${item.label}`}
+                        >
+                            <div
+                                className={cn(
+                                    "relative flex h-12 w-12 md:h-14 md:w-14 items-center justify-center rounded-2xl transition-all duration-300 ease-out bg-white/5 border border-white/5",
+                                    isActive ? "scale-110 bg-white/10" : "scale-100 group-hover:scale-105 group-hover:bg-white/10",
+                                )}
+                            >
+                                {/* Emoji with smooth grayscale transition */}
+                                <div
+                                    className={cn(
+                                        "w-8 h-8 md:w-10 md:h-10 transition-all duration-300 ease-out select-none flex items-center justify-center",
+                                        isActive
+                                            ? "grayscale-0 drop-shadow-lg scale-110"
+                                            : "grayscale opacity-40 group-hover:opacity-100 group-hover:grayscale-0",
+                                    )}
+                                >
+                                    <img
+                                        src={`https://emojicdn.elk.sh/${item.emoji}?style=apple`}
+                                        alt={item.label}
+                                        className="w-full h-full object-contain pointer-events-none"
+                                        loading="lazy"
+                                    />
+                                </div>
+                            </div>
+                        </button>
+                    )
+                })}
+            </div>
+
+            <div className="relative h-6 w-32">
+                {/* Rating labels */}
+                {ratingData.map((item, i) => (
+                    <div
+                        key={i}
+                        className={cn(
+                            "absolute inset-0 flex items-center justify-center transition-all duration-300 ease-out",
+                            displayRating === i + 1 ? "opacity-100 blur-0 scale-100" : "opacity-0 blur-md scale-105",
+                        )}
+                    >
+                        <span className="text-xs font-medium tracking-wide text-white/60">{item.label}</span>
+                    </div>
+                ))}
+                {/* Default Empty State Text (Optional, or just hide) */}
+                <div
+                    className={cn(
+                        "absolute inset-0 flex items-center justify-center transition-all duration-300 ease-out",
+                        displayRating === 0 ? "opacity-100 blur-0 scale-100" : "opacity-0 blur-md scale-95",
+                    )}
+                >
+                    <span className="text-xs font-medium tracking-wide text-white/20">Select one</span>
+                </div>
+            </div>
+        </div>
+    )
+}

package/template/src/components/ui/exit-message.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export const ExitMessage = () => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const handleMouseLeave = (e: MouseEvent) => {
+            // Check if cursor left from the top (Exit Intent)
+            if (e.clientY <= 0) {
+                setIsVisible(true);
+            }
+        };
+
+        const handleMouseEnter = () => {
+            // Hide if user comes back
+            setIsVisible(false);
+        };
+
+        document.documentElement.addEventListener("mouseleave", handleMouseLeave);
+        document.documentElement.addEventListener("mouseenter", handleMouseEnter);
+
+        return () => {
+            document.documentElement.removeEventListener("mouseleave", handleMouseLeave);
+            document.documentElement.removeEventListener("mouseenter", handleMouseEnter);
+        };
+    }, []);
+
+    return (
+        <AnimatePresence>
+            {isVisible && (
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: 20 }}
+                    transition={{ duration: 0.5, ease: "easeOut" }}
+                    className="fixed bottom-0 left-0 w-full flex justify-center pb-6 pointer-events-none z-[10000]"
+                >
+                    <div className="bg-black/50 backdrop-blur-md border border-white/5 rounded-full px-6 py-2 shadow-2xl">
+                        <p className="text-white/60 text-xs font-medium tracking-widest uppercase">
+                            Thanks for spending time here.
+                        </p>
+                    </div>
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+};

package/template/src/components/ui/image-zoom-overlay.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { motion, AnimatePresence, useMotionValue, useTransform } from "framer-motion";
+import { X, ZoomIn, ZoomOut, RotateCcw } from "lucide-react";
+import { useEffect, useState, useCallback, useRef } from "react";
+import { createPortal } from "react-dom";
+
+interface ImageZoomOverlayProps {
+    isOpen: boolean;
+    onClose: () => void;
+    imageUrl: string;
+    altText?: string;
+}
+
+export function ImageZoomOverlay({ isOpen, onClose, imageUrl, altText }: ImageZoomOverlayProps) {
+    const [mounted, setMounted] = useState(false);
+    const [scale, setScale] = useState(1);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // Motion values for panning
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    // Reset zoom and pan when opening/closing
+    useEffect(() => {
+        if (!isOpen) {
+            setScale(1);
+            x.set(0);
+            y.set(0);
+        }
+    }, [isOpen, x, y]);
+
+    // Body scroll lock
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            return () => {
+                document.body.style.overflow = '';
+            };
+        }
+    }, [isOpen]);
+
+    const handleWheel = useCallback((e: React.WheelEvent) => {
+        if (e.ctrlKey || e.metaKey) { // OS-level pinch gesture often maps to ctrl+wheel
+            e.preventDefault();
+            const delta = -e.deltaY * 0.01;
+            setScale(prev => Math.min(Math.max(1, prev + delta), 5));
+        }
+    }, []);
+
+    const reset = () => {
+        setScale(1);
+        x.set(0);
+        y.set(0);
+    };
+
+    if (!mounted) return null;
+
+    const content = (
+        <AnimatePresence>
+            {isOpen && (
+                <div
+                    className="fixed inset-0 z-[999999] flex items-center justify-center overflow-hidden touch-none"
+                    onWheel={handleWheel}
+                >
+                    {/* Backdrop */}
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        onClick={onClose}
+                        className="absolute inset-0 bg-black/95 backdrop-blur-xl cursor-zoom-out"
+                    />
+
+                    {/* Controls HUD */}
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: 20 }}
+                        className="absolute bottom-10 left-1/2 -translate-x-1/2 z-[10] flex items-center gap-4 px-6 py-3 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md shadow-2xl"
+                    >
+                        <button
+                            onClick={() => setScale(s => Math.max(1, s - 0.5))}
+                            className="p-2 rounded-xl hover:bg-white/10 text-white/60 hover:text-white transition-all"
+                            title="Zoom Out"
+                        >
+                            <ZoomOut className="w-5 h-5" />
+                        </button>
+
+                        <div className="w-px h-4 bg-white/10 mx-2" />
+
+                        <span className="text-xs font-mono text-white/40 min-w-[3rem] text-center">
+                            {Math.round(scale * 100)}%
+                        </span>
+
+                        <div className="w-px h-4 bg-white/10 mx-2" />
+
+                        <button
+                            onClick={() => setScale(s => Math.min(5, s + 0.5))}
+                            className="p-2 rounded-xl hover:bg-white/10 text-white/60 hover:text-white transition-all"
+                            title="Zoom In"
+                        >
+                            <ZoomIn className="w-5 h-5" />
+                        </button>
+
+                        <button
+                            onClick={reset}
+                            className="p-2 rounded-xl hover:bg-white/10 text-white/60 hover:text-white transition-all ml-2"
+                            title="Reset"
+                        >
+                            <RotateCcw className="w-4 h-4" />
+                        </button>
+                    </motion.div>
+
+                    {/* Close Button */}
+                    <motion.button
+                        initial={{ opacity: 0, scale: 0.5 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0, scale: 0.5 }}
+                        onClick={onClose}
+                        className="absolute top-8 right-8 z-[10] p-4 rounded-full bg-white/10 hover:bg-white/20 text-white/80 transition-all border border-white/10"
+                    >
+                        <X className="w-6 h-6" />
+                    </motion.button>
+
+                    {/* Hint text */}
+                    <motion.p
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        className="absolute top-8 left-1/2 -translate-x-1/2 text-[10px] uppercase tracking-[0.3em] text-white/20 font-black"
+                    >
+                        Pinch_or_Scroll_to_Explore
+                    </motion.p>
+
+                    {/* Image Container */}
+                    <motion.div
+                        ref={containerRef}
+                        className="relative w-full h-full flex items-center justify-center p-4 md:p-20"
+                        style={{ perspective: 1000 }}
+                    >
+                        <motion.img
+                            src={imageUrl}
+                            alt={altText || "Zoomed project image"}
+                            initial={{ opacity: 0, scale: 0.8, y: 20 }}
+                            animate={{
+                                opacity: 1,
+                                scale: scale,
+                                x: x.get(),
+                                y: y.get(),
+                                rotateX: 0,
+                                transition: {
+                                    opacity: { duration: 0.4 },
+                                    scale: { type: "spring", stiffness: 300, damping: 30 },
+                                    y: { type: "spring", stiffness: 300, damping: 30 }
+                                }
+                            }}
+                            exit={{ opacity: 0, scale: 0.8, y: 20 }}
+                            drag={scale > 1}
+                            dragConstraints={containerRef}
+                            onDrag={(e, info) => {
+                                x.set(x.get() + info.delta.x);
+                                y.set(y.get() + info.delta.y);
+                            }}
+                            className={`max-w-full max-h-full object-contain shadow-[0_0_100px_rgba(0,0,0,0.5)] rounded-lg md:rounded-2xl transition-shadow duration-500 ${scale > 1 ? 'cursor-grab active:cursor-grabbing' : 'cursor-default'}`}
+                            draggable={false}
+                        />
+                    </motion.div>
+                </div>
+            )}
+        </AnimatePresence>
+    );
+
+    return createPortal(content, document.body);
+}

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

@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <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"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }