{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-password",
  "title": "Input Password",
  "description": "A password input with visibility toggle.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ds.formance.com/r/button.json",
    "https://ds.formance.com/r/input.json"
  ],
  "files": [
    {
      "path": "registry/default/ui/input-password.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nimport { Button } from '@/registry/default/ui/button';\nimport { Input } from '@/registry/default/ui/input';\n\nconst inputPasswordMaxWidthVariants = cva('', {\n  variants: {\n    maxWidth: {\n      xs: 'max-w-24 md:max-w-32 lg:max-w-40',\n      sm: 'max-w-32 md:max-w-64 lg:max-w-56',\n      md: 'max-w-44 md:max-w-64 lg:max-w-96',\n      lg: 'max-w-44 md:max-w-64 lg:max-w-120',\n      xl: 'max-w-44 md:max-w-64 lg:max-w-165',\n    },\n  },\n});\n\ntype InputPasswordProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'size'\n> &\n  VariantProps<typeof inputPasswordMaxWidthVariants>;\n\nfunction InputPassword({ className, maxWidth, ...props }: InputPasswordProps) {\n  const [showPassword, setShowPassword] = React.useState(false);\n  const disabled =\n    props.value === '' || props.value === undefined || props.disabled;\n\n  return (\n    <div\n      className={cn('relative', inputPasswordMaxWidthVariants({ maxWidth }))}\n    >\n      <Input\n        type={showPassword ? 'text' : 'password'}\n        className={cn('hide-password-toggle pr-10 font-mono', className)}\n        {...props}\n      />\n      <Button\n        type=\"button\"\n        variant={showPassword ? 'ghost' : 'outline'}\n        size=\"icon-xs\"\n        className=\"absolute right-1 top-1/2 -translate-y-1/2\"\n        onClick={() => setShowPassword((prev) => !prev)}\n        disabled={disabled}\n      >\n        {showPassword && !disabled ? (\n          <EyeIcon aria-hidden=\"true\" />\n        ) : (\n          <EyeOffIcon aria-hidden=\"true\" />\n        )}\n        <span className=\"sr-only\">\n          {showPassword ? 'Hide password' : 'Show password'}\n        </span>\n      </Button>\n\n      {/* hides browsers password toggles */}\n      <style>{`\n        .hide-password-toggle::-ms-reveal,\n        .hide-password-toggle::-ms-clear {\n          visibility: hidden;\n          pointer-events: none;\n          display: none;\n        }\n      `}</style>\n    </div>\n  );\n}\n\nexport { InputPassword };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}