Password Input

import { PasswordInput } from '@saas-ui/react'

export const PasswordInputBasic = () => {
  return <PasswordInput />
}

'use client'

import { Stack } from '@chakra-ui/react'
import { PasswordInput } from '@saas-ui/react'

export const PasswordInputWithSizes = () => {
  return (
    <Stack maxW="300px">
      <PasswordInput placeholder="xs" size="xs" />
      <PasswordInput placeholder="sm" size="sm" />
      <PasswordInput placeholder="md" size="md" />
      <PasswordInput placeholder="lg" size="lg" />
    </Stack>
  )
}

'use client'

import { useState } from 'react'

import { PasswordInput } from '@saas-ui/react'

export const PasswordInputControlled = () => {
  const [value, setValue] = useState('')
  return (
    <PasswordInput value={value} onChange={(e) => setValue(e.target.value)} />
  )
}

'use client'

import { Button, Input, Stack } from '@chakra-ui/react'
import { Field } from '@saas-ui/react'
import { PasswordInput } from '@saas-ui/react'
import { useForm } from 'react-hook-form'

interface FormValues {
  username: string
  password: string
}

export const PasswordInputWithHookForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>()

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start" maxW="sm">
        <Field.Root invalid={!!errors.username}>
          <Field.Label>Username</Field.Label>
          <Input
            {...register('username', { required: 'Username is required' })}
          />
          <Field.ErrorText>{errors.username?.message}</Field.ErrorText>
        </Field.Root>

        <Field.Root invalid={!!errors.password}>
          <Field.Label>Password</Field.Label>
          <PasswordInput
            {...register('password', { required: 'Password is required' })}
          />
          <Field.ErrorText>{errors.password?.message}</Field.ErrorText>
        </Field.Root>

        <Button type="submit">Submit</Button>
      </Stack>
    </form>
  )
}

'use client'

import { useState } from 'react'

import { Stack, Text } from '@chakra-ui/react'
import { PasswordInput } from '@saas-ui/react'

export const PasswordInputControlledVisibility = () => {
  const [visible, setVisible] = useState(false)
  return (
    <Stack>
      <PasswordInput
        defaultValue="secret"
        visible={visible}
        onVisibleChange={setVisible}
      />
      <Text>Password is {visible ? 'visible' : 'hidden'}</Text>
    </Stack>
  )
}