Password Input

<PasswordInput
  className="w-72"
  clearable
  hint="Optional hint"
  label="Password"
  placeholder="Create password"
/>

<PasswordInput.Root className="w-72">
  <PasswordInput.Label>Password</PasswordInput.Label>
  <PasswordInput.InputGroup>
    <PasswordInput.Input placeholder="Placeholder text" />
    <PasswordInput.VisibilityTrigger />
  </PasswordInput.InputGroup>
  <PasswordInput.Hint>Optional hint</PasswordInput.Hint>
</PasswordInput.Root>

import {type ReactElement, useState} from "react"

import {Button} from "@qualcomm-ui/react/button"
import {PasswordInput} from "@qualcomm-ui/react/password-input"

export default function PasswordInputControlledValueDemo(): ReactElement {
  const [value, setValue] = useState<string>("passw0rd")

  return (
    <div className="flex items-end gap-4">
      <PasswordInput
        className="w-72"
        label="Password"
        onValueChange={(updatedValue) => {
          console.debug("Value changed:", updatedValue)
          setValue(updatedValue)
        }}
        placeholder="Enter your password"
        value={value}
      />

      <Button emphasis="primary" onClick={() => setValue("")} variant="outline">
        Reset
      </Button>
    </div>
  )
}

import {type ReactElement, useState} from "react"

import {Button} from "@qualcomm-ui/react/button"
import {PasswordInput} from "@qualcomm-ui/react/password-input"

export default function PasswordInputControlledVisibilityDemo(): ReactElement {
  const [visible, setVisible] = useState<boolean>(false)

  return (
    <div className="flex flex-col gap-4">
      <PasswordInput
        className="w-72"
        defaultValue="passw0rd"
        label="Password"
        onVisibleChange={setVisible}
        placeholder="Enter your password"
        visible={visible}
      />

      <Button
        emphasis="primary"
        onClick={() => setVisible(!visible)}
        variant="outline"
      >
        {visible ? "Hide Password" : "Show Password"}
      </Button>
    </div>
  )
}