xlibs-components/dist/components/ui/input.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

// Input component extends from shadcnui - https://ui.shadcn.com/docs/components/input
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { cn } from '../../lib/utils.js';
import { useMotionTemplate, useMotionValue, motion } from "framer-motion";
const Input = React.forwardRef(({ className, type, ...props }, ref) => {
    const radius = 100; // change this to increase the rdaius of the hover effect
    const [visible, setVisible] = React.useState(false);
    let mouseX = useMotionValue(0);
    let mouseY = useMotionValue(0);
    function handleMouseMove({ currentTarget, clientX, clientY }) {
        let { left, top } = currentTarget.getBoundingClientRect();
        mouseX.set(clientX - left);
        mouseY.set(clientY - top);
    }
    return (_jsx(motion.div, { style: {
            background: useMotionTemplate `
        radial-gradient(
          ${visible ? radius + "px" : "0px"} circle at ${mouseX}px ${mouseY}px,
          #3b82f6,
          transparent 80%
        )
      `,
        }, onMouseMove: handleMouseMove, onMouseEnter: () => setVisible(true), onMouseLeave: () => setVisible(false), className: "group/input rounded-lg p-[2px] transition duration-300", children: _jsx("input", { type: type, className: cn(`shadow-input dark:placeholder-text-neutral-600 flex h-10 w-full rounded-md border-none bg-gray-50 px-3 py-2 text-sm text-black transition duration-400 group-hover/input:shadow-none file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-400 focus-visible:ring-[2px] focus-visible:ring-neutral-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-zinc-800 dark:text-white dark:shadow-[0px_0px_1px_1px_#404040] dark:focus-visible:ring-neutral-600`, className), ref: ref, ...props }) }));
});
Input.displayName = "Input";
export { Input };