{
  "id": "password-input",
  "type": "Input",
  "bindings": {
    "type": {
      "source": "visibility.showPassword",
      "transform": "data ? 'text' : 'password'"
    },
    "value": {
      "source": "value",
      "transform": "data"
    },
    "onChange": {
      "source": "onChange",
      "transform": "(e) => data(e.target.value)"
    },
    "label": {
      "source": "label",
      "transform": "data"
    },
    "error": {
      "source": "error",
      "transform": "data"
    },
    "helperText": {
      "source": "helperText",
      "transform": "data"
    },
    "placeholder": {
      "source": "placeholder",
      "transform": "data || 'Enter password'"
    },
    "disabled": {
      "source": "disabled",
      "transform": "data"
    },
    "className": {
      "source": "className",
      "transform": "data"
    },
    "rightIcon": {
      "source": "visibility.showPassword",
      "transform": "{ _element: 'button', _props: { type: 'button', onClick: () => visibility.toggleVisibility(), className: 'text-muted-foreground hover:text-foreground transition-colors', 'aria-label': data ? 'Hide password' : 'Show password' }, _children: [{ _element: data ? 'EyeSlash' : 'Eye', _props: { size: 18 } }] }"
    }
  }
}
