TextInput

import {
  TextInput,
  InputSelect,
  Icon,
  Button,
  CompactButton,
} from "@nili/ui"
import { RiMailLine, RiSearchLine, RiBankCardLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <TextInput
        type="email"
        label="Email Address"
        sublabel="(Optional)"
        information
        hint="This is a hint text to help user."
        placeholder="hello@nili.design"
        startIcon={<Icon icon={RiMailLine} />}
        required
      />

      <TextInput
        type="phone"
        label="Phone Number"
        select={
          <InputSelect icon={<span>🇺🇸</span>} aria-label="Country code">
            +1
          </InputSelect>
        }
      />

      <TextInput type="website" label="Website" startAffix="https://" />

      <TextInput
        type="amount"
        label="Amount"
        prefix="$"
        select={
          <InputSelect icon={<span>🇪🇺</span>} aria-label="Currency">
            EUR
          </InputSelect>
        }
      />
    </>
  )
}

import { TextInput } from "@nili/ui"

export function Example() {
  return (
    <>
      <TextInput label="Default" placeholder="Enter text..." />
      <TextInput label="Filled" defaultValue="hello@nili.design" type="email" />
      <TextInput label="Disabled" defaultValue="Locked" disabled />
      <TextInput
        label="Error"
        defaultValue="not-an-email"
        type="email"
        error="Enter a valid email address"
      />
      <TextInput size="sm" label="Small" />
      <TextInput size="xs" label="X-Small" />
    </>
  )
}

import { TagInput } from "@nili/ui"

export function Example() {
  return (
    <TagInput
      label="Cities"
      hint="Press Enter to add a tag"
      defaultValue={["Berlin", "London", "Paris"]}
      placeholder="Add a city..."
      dismissLabel="Remove"
    />
  )
}

import { CounterInput } from "@nili/ui"

export function Example() {
  return (
    <CounterInput
      label="Guests"
      hint="Between 1 and 10"
      defaultValue={2}
      min={1}
      max={10}
      decrementLabel="Decrease"
      incrementLabel="Increase"
    />
  )
}

import { DigitInput } from "@nili/ui"

export function Example() {
  return (
    <>
      <DigitInput
        length={4}
        label="Verification code"
        hint="We sent a code to your phone"
        groupLabel="Verification code"
        cellLabel={(index, total) => `Digit ${index} of ${total}`}
      />
      <DigitInput
        length={6}
        error={t('f.codeWrong')}
        defaultValue="123"
        groupLabel="PIN"
        cellLabel={(index, total) => `Digit ${index} of ${total}`}
      />
    </>
  )
}

import { InlineInput, Icon, CompactButton } from "@nili/ui"
import { RiUser3Line, RiPencilLine } from "@remixicon/react"

export function Example() {
  return (
    <InlineInput
      label="Display name"
      placeholder="Enter a name"
      defaultValue="Ada Lovelace"
      startIcon={<Icon icon={RiUser3Line} />}
      button={
        <CompactButton appearance="ghost" size="md" aria-label="Edit">
          <Icon icon={RiPencilLine} />
        </CompactButton>
      }
    />
  )
}