lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
31 lines (30 loc) • 1.84 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// @ts-nocheck
import * as React from "react";
import { cn } from "../../lib/utils";
import { motion, AnimatePresence } from "framer-motion";
import { BorderBeam } from "./border-beam";
const Input = React.forwardRef(({ className, type, ...props }, ref) => {
const [isFocused, setIsFocused] = React.useState(false);
return (_jsxs("div", { className: "relative w-full group/input", children: [_jsx(motion.input, { type: type, className: cn(`flex h-10 w-full rounded-md border border-muted-foreground/50 dark:border-muted-foreground/30 bg-background
px-3 py-2 text-base ring-offset-background/30
file:border-0 file:bg-transparent file:text-sm
file:font-medium file:text-foreground placeholder:text-muted-foreground
focus-visible:outline-none focus-visible:ring-0
disabled:cursor-not-allowed disabled:opacity-70
md:text-sm transition-all duration-300`, isFocused ? "border-primary/50 dark:border-primary/30 shadow-[0_0_15px_rgba(var(--primary),0.05)]" : "", className), ref: ref, onFocus: (e) => {
setIsFocused(true);
props.onFocus?.(e);
}, onBlur: (e) => {
setIsFocused(false);
props.onBlur?.(e);
}, animate: {
scale: isFocused ? 1.01 : 1,
}, transition: {
type: "spring",
stiffness: 400,
damping: 20,
}, ...props }), _jsx(AnimatePresence, { children: isFocused && (_jsx(BorderBeam, { size: 120, duration: 3, colorFrom: "var(--primary, #3b82f6)", colorTo: "#9c40ff", className: "pointer-events-none" })) })] }));
});
Input.displayName = "Input";
export { Input };