{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:ui",
  "title": "Input",
  "description": "A input component",
  "files": [
    {
      "path": "src/registry/ui/input.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nexport const containerVariants = cva(\n  cn(\n    \"flex w-full px-2.5 relative rounded-lg\",\n    \"text-base cursor-text\",\n    \"data-[is-invalid=true]:border-destructive\",\n    \"data-[disabled=true]:opacity-70 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:border-input\",\n    \"hover:border-ring focus-within:border-ring\",\n    \"transition-all duration-200\",\n  ),\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted border-2 border-input\",\n        faded: cn(\n          \"bg-muted border-2 border-muted\",\n          \"hover:bg-accent hover:border-accent\",\n          \"focus-within:bg-accent focus-within:border-accent\",\n          \"data-[disabled=true]:hover:bg-muted data-[disabled=true]:hover:border-muted\",\n        ),\n        bordered: \"border-2 border-input\",\n        underline: \"border-b-2 border-input rounded-none\",\n      },\n      size: {\n        sm: \"h-10 py-1.5\",\n        md: \"h-12 py-2\",\n        lg: \"h-13 py-2\",\n      },\n    },\n    compoundVariants: [\n      {\n        variant: \"underline\",\n        size: \"sm\",\n        className: \"px-1 h-9\",\n      },\n      {\n        variant: \"underline\",\n        size: \"md\",\n        className: \"px-1 h-11\",\n      },\n      {\n        variant: \"underline\",\n        size: \"lg\",\n        className: \"px-1 h-12\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  },\n);\n\nconst inputVariants = cva(\n  cn(\n    \"w-full outline-hidden\",\n    \"disabled:cursor-not-allowed\",\n    \"bg-transparent\",\n    \"placeholder:text-muted-foreground\",\n    \"[&:-webkit-autofill]:bg-transparent\",\n    \"[&:-webkit-autofill:hover]:bg-transparent\",\n    \"[&:-webkit-autofill:focus]:bg-transparent\",\n    \"[&:-webkit-autofill:active]:bg-transparent\",\n    \"[&:-webkit-autofill]:[transition-delay:9999s]\",\n  ),\n  {\n    variants: {\n      size: {\n        sm: \"text-base\",\n        md: \"text-base\",\n        lg: \"text-lg\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\ninterface InputProps\n  extends Omit<React.ComponentProps<\"input\">, \"size\">,\n    VariantProps<typeof containerVariants> {\n  inputClassName?: string;\n  startContent?: React.ReactNode;\n  endContent?: React.ReactNode;\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      inputClassName,\n      type,\n      placeholder,\n      value,\n      variant,\n      size,\n      \"aria-invalid\": ariaInvalid,\n      disabled,\n      startContent,\n      endContent,\n      ...props\n    },\n    ref,\n  ) => {\n    const [showPassword, setShowPassword] = React.useState(false);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    );\n\n    const endContentRender = () => {\n      if (endContent) {\n        return endContent;\n      }\n\n      if (type === \"password\") {\n        return (\n          <button\n            aria-label=\"Change password visibility\"\n            type=\"button\"\n            className=\"cursor-pointer\"\n            onClick={() => setShowPassword(!showPassword)}\n          >\n            {!showPassword ? <EyeOffIcon size={20} /> : <EyeIcon size={20} />}\n          </button>\n        );\n      }\n\n      return null;\n    };\n\n    return (\n      <div\n        className={cn(\n          containerVariants({ variant, size }),\n          \"group flex items-center justify-center gap-1.5\",\n          className,\n        )}\n        data-is-invalid={ariaInvalid?.toString()}\n        data-disabled={disabled?.toString()}\n        onClick={() => {\n          if (!disabled && inputRef.current) {\n            inputRef.current.focus();\n          }\n        }}\n      >\n        {startContent && startContent}\n        <div className=\"inline-flex w-full items-center h-full relative\">\n          <input\n            type={\n              type === \"password\" && endContent === undefined && showPassword\n                ? \"text\"\n                : type\n            }\n            ref={inputRef}\n            className={cn(inputVariants({ size }), inputClassName)}\n            value={value}\n            disabled={disabled}\n            placeholder={placeholder}\n            {...props}\n          />\n        </div>\n        {endContentRender()}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n\nexport { Input, type InputProps };\n",
      "type": "registry:ui",
      "target": "components/wed/input.tsx"
    }
  ]
}