{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "password-input",
  "title": "Password Input",
  "description": "A password input with show/hide toggle functionality.",
  "dependencies": [
    "@base-ui/react",
    "@phosphor-icons/react",
    "class-variance-authority"
  ],
  "registryDependencies": ["utils"],
  "files": [
    {
      "path": "src/components/ui/password-input.tsx",
      "content": "\"use client\";\n\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Eye, EyeSlash } from \"@phosphor-icons/react\";\nimport { type ComponentProps, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst passwordInputVariants = cva(\n  [\n    \"w-full bg-surface text-foreground placeholder:text-foreground/50 border-none outline-none transition-shadow duration-200\",\n    \"data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-8 pl-3 pr-9 text-sm rounded-lg shadow-neu-inset-sm\",\n        md: \"h-10 pl-4 pr-10 text-base rounded-xl shadow-neu-inset\",\n        lg: \"h-12 pl-5 pr-12 text-lg rounded-xl shadow-neu-inset-lg\",\n      },\n      error: {\n        true: \"shadow-focus-destructive\",\n        false: \"focus:shadow-focus-primary\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      error: false,\n    },\n  },\n);\n\nconst iconSizes = {\n  sm: 16,\n  md: 20,\n  lg: 24,\n} as const;\n\nconst buttonPositions = {\n  sm: \"right-2\",\n  md: \"right-3\",\n  lg: \"right-4\",\n} as const;\n\nexport type PasswordInputProps = Omit<\n  ComponentProps<typeof BaseInput>,\n  \"size\" | \"type\"\n> &\n  VariantProps<typeof passwordInputVariants> & {\n    wrapperClassName?: string;\n  };\n\nexport function PasswordInput({\n  className,\n  wrapperClassName,\n  size = \"md\",\n  error,\n  disabled,\n  ...props\n}: PasswordInputProps) {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n    <div className={cn(\"relative w-full\", wrapperClassName)}>\n      <BaseInput\n        type={showPassword ? \"text\" : \"password\"}\n        disabled={disabled}\n        className={cn(passwordInputVariants({ size, error }), className)}\n        {...props}\n      />\n      <button\n        type=\"button\"\n        onClick={() => setShowPassword(!showPassword)}\n        disabled={disabled}\n        className={cn(\n          \"absolute top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors\",\n          \"disabled:opacity-50 disabled:cursor-not-allowed\",\n          \"focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded\",\n          buttonPositions[size ?? \"md\"],\n        )}\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n      >\n        {showPassword ? (\n          <EyeSlash size={iconSizes[size ?? \"md\"]} weight=\"bold\" />\n        ) : (\n          <Eye size={iconSizes[size ?? \"md\"]} weight=\"bold\" />\n        )}\n      </button>\n    </div>\n  );\n}\n\nexport { passwordInputVariants };\nexport default PasswordInput;\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}