xlibs-components/dist/components/magicui/magic-input.js

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

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cva } from "class-variance-authority";
import { cn } from '../../lib/utils.js';
const magicInputVariants = cva("flex w-full rounded-lg border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200 font-sans", {
    variants: {
        variant: {
            default: "border-border focus-visible:border-primary",
            glass: "backdrop-blur-sm border-border/50 bg-card/50 focus-visible:border-primary/50",
            neon: "border-primary/50 shadow-[0_0_10px_rgba(var(--primary),0.3)] focus-visible:shadow-[0_0_20px_rgba(var(--primary),0.5)]",
            magic: "border-transparent bg-gradient-to-r from-primary/10 to-chart-2/10 focus-visible:border-primary",
            floating: "border-border hover:border-primary/50 focus-visible:border-primary",
        },
        inputSize: {
            default: "h-10 px-3 py-2",
            sm: "h-8 px-2 py-1 text-sm",
            lg: "h-12 px-4 py-3 text-base",
            xl: "h-14 px-6 py-4 text-lg",
        },
    },
    defaultVariants: {
        variant: "default",
        inputSize: "default",
    },
});
const MagicInput = React.forwardRef(({ className, variant, inputSize, icon, iconPosition = "left", label, error, success, ...props }, ref) => {
    const inputId = React.useId();
    return (_jsxs("div", { className: "space-y-2", children: [label && (_jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-foreground font-sans", children: label })), _jsxs("div", { className: "relative", children: [icon && iconPosition === "left" && (_jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground", children: icon })), _jsx("input", { id: inputId, className: cn(magicInputVariants({ variant, inputSize, className }), icon && iconPosition === "left" && "pl-10", icon && iconPosition === "right" && "pr-10", error && "border-destructive focus-visible:ring-destructive", success && "border-green-500 focus-visible:ring-green-500"), ref: ref, ...props }), icon && iconPosition === "right" && (_jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground", children: icon }))] }), error && (_jsx("p", { className: "text-sm text-destructive font-sans", children: error })), success && (_jsx("p", { className: "text-sm text-green-600 font-sans", children: "\u2713 Success" }))] }));
});
MagicInput.displayName = "MagicInput";
export { MagicInput, magicInputVariants };