{
  "example": "import { PasswordInput } from \"@godxjp/ui/data-entry\";\n\n<PasswordInput name=\"password\" autoComplete=\"current-password\" placeholder=\"パスワード\" />",
  "group": "data-entry",
  "importPath": "@godxjp/ui/data-entry",
  "name": "PasswordInput",
  "props": [
    {
      "description": "Control password visibility; false hides the reveal action.",
      "name": "visibilityToggle",
      "type": "boolean | { visible?: boolean; onVisibleChange?: (visible: boolean) => void }"
    },
    {
      "description": "Customize the reveal glyph. The reveal action owns the single trailing slot.",
      "name": "iconRender",
      "type": "(visible: boolean) => ReactNode"
    },
    {
      "description": "Validation state the field paints — Ant Design `status`. `error` also reports `aria-invalid`, so the red boundary and what a screen reader hears are one fact; `warning` paints only, because a warning is not a validity failure. antd's `success`/`validating` are not implemented: antd only draws them together with its `hasFeedback` icon slot, which FormField owns here.",
      "name": "status",
      "type": "\"error\" | \"warning\""
    },
    {
      "defaultValue": "\"outlined\"",
      "description": "Chrome level — Ant Design `variant`. `outlined` is the historical field; `filled` swaps the boundary for a tinted surface (dense forms); `borderless` drops both, for a field inside a box that already draws one. antd's fourth member `underlined` is deliberately absent — a single bottom rule is a Material convention and SmartHR, the JP authority here, draws every field as a full box.",
      "name": "variant",
      "type": "\"outlined\" | \"filled\" | \"borderless\""
    },
    {
      "description": "Character counter — inherited from Input.",
      "name": "count",
      "type": "ControlCountProp"
    },
    {
      "description": "Controlled value (or use defaultValue/uncontrolled).",
      "name": "value",
      "type": "string"
    },
    {
      "description": "Form field name for native submission.",
      "name": "name",
      "type": "string"
    },
    {
      "description": "Placeholder text.",
      "name": "placeholder",
      "type": "string"
    },
    {
      "description": "Disables the field + toggle.",
      "name": "disabled",
      "type": "boolean"
    },
    {
      "description": "Inherited from Input — a leading glyph (e.g. a Lock icon) pinned inside the start of the field. The built-in show/hide eye stays on the trailing edge, so leading + trailing coexist here.",
      "name": "leadingIcon",
      "type": "React.ReactNode"
    }
  ],
  "related": [
    "Input (the base text field this wraps)",
    "FormField (label + error wrapper around it)"
  ],
  "rules": [
    3,
    6
  ],
  "storyPath": "data-entry/password-input.tsx",
  "tagline": "Input for passwords with a built-in show/hide eye toggle. Accepts all Input props except `type`.",
  "usage": [
    "Coarse pointers: affix actions use --control-affix-touch-target-size (44px by default); text space is reserved separately. Fine-pointer geometry is unchanged.",
    "DO use for any password / secret field instead of `<Input type=\"password\">` so users get the show/hide affordance.",
    "DO pass `name` + `autoComplete=\"current-password\"|\"new-password\"` for correct form/password-manager behavior.",
    "DON'T add your own eye button — it's built in (and excluded from the tab order)."
  ],
  "useCases": [
    "Login password field",
    "Sign-up / change-password forms (new-password)",
    "API key / secret entry in settings"
  ]
}