{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "password-input",
  "title": "Password Input",
  "author": "@fma-ds/ds",
  "description": "A password field with a show/hide toggle, built on `InputGroup`. Pair it with `password-rules` when creating a password.\n\n- **Toggle**: a button named by `toggleLabel` (default \"Show password\"; pass a translation as needed) whose `aria-pressed` reports whether the text is revealed.\n- **Visibility**: uncontrolled (`defaultRevealed`) or controlled (`isRevealed`/`onRevealedChange`).\n- **Input**: the rest of the props go to the input, so it works inside a react-aria `TextField` (label, description, validation) and takes `autoComplete=\"current-password\"` or `\"new-password\"`.\n\nHides Edge's built-in reveal button.",
  "dependencies": [
    "cn@^0.5.0",
    "lucide-react@^1.61.0"
  ],
  "registryDependencies": [
    "@fma-ds/input-group"
  ],
  "files": [
    {
      "path": "src/core/password-input/password-input.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"cn\";\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/core/input-group/input-group\";\n\ntype PasswordInputProps = Omit<React.ComponentProps<typeof InputGroupInput>, \"type\"> & {\n  /** Accessible name of the reveal toggle; its pressed state says whether it's on. */\n  toggleLabel?: string;\n  /** Controlled visibility. */\n  isRevealed?: boolean;\n  defaultRevealed?: boolean;\n  onRevealedChange?: (isRevealed: boolean) => void;\n  /** Classes for the outer `InputGroup`; `className` goes to the input. */\n  groupClassName?: string;\n};\n\n/**\n * A password field with a show/hide toggle. Spreads the rest onto the input,\n * so it works inside a react-aria `TextField` and takes `autoComplete`\n * (\"current-password\" / \"new-password\").\n */\nfunction PasswordInput({\n  toggleLabel = \"Show password\",\n  isRevealed: isRevealedProp,\n  defaultRevealed = false,\n  onRevealedChange,\n  groupClassName,\n  className,\n  disabled,\n  ...props\n}: PasswordInputProps) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultRevealed);\n  const isRevealed = isRevealedProp ?? uncontrolled;\n\n  function toggle() {\n    const next = !isRevealed;\n    if (isRevealedProp === undefined) setUncontrolled(next);\n    onRevealedChange?.(next);\n  }\n\n  return (\n    <InputGroup data-slot=\"password-input\" className={groupClassName} isDisabled={disabled}>\n      <InputGroupInput\n        type={isRevealed ? \"text\" : \"password\"}\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        disabled={disabled}\n        // Edge's own reveal button would duplicate ours.\n        className={cn(\"[&::-ms-clear]:hidden [&::-ms-reveal]:hidden\", className)}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <InputGroupButton\n          size=\"icon-xs\"\n          aria-label={toggleLabel}\n          aria-pressed={isRevealed}\n          isDisabled={disabled}\n          onPress={toggle}\n        >\n          {isRevealed ? <EyeOffIcon /> : <EyeIcon />}\n        </InputGroupButton>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n\nexport type { PasswordInputProps };\nexport { PasswordInput };\n",
      "type": "registry:component",
      "target": "components/fma-ds/password-input.tsx"
    }
  ],
  "meta": {
    "status": "stable",
    "source": "original",
    "license": "MIT",
    "tags": [
      "form",
      "input",
      "password",
      "react-aria"
    ],
    "contentHash": "cec54111bd25"
  },
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}