Number, password and code inputs

"use client";

import { FormField, NumberInput, PasswordInput, PinInput } from "@waveinno/ui";
import * as React from "react";

export default function FieldsDemo() {
  const [cap, setCap] = React.useState<number | null>(120);
  const [rate, setRate] = React.useState<number | null>(30);
  const [code, setCode] = React.useState("");
  const [done, setDone] = React.useState<string | null>(null);
  return (
    <div className="grid gap-x-8 gap-y-6 md:grid-cols-2">
      <FormField label="Capacity" hint="Cars the site can hold. ↑ ↓ to step, Shift for ten.">
        <NumberInput value={cap} onValueChange={setCap} min={0} max={2000} suffix="cars" />
      </FormField>
      <FormField label="Hourly rate">
        <NumberInput value={rate} onValueChange={setRate} min={0} step={5} prefix="৳" stepper="stack" />
      </FormField>
      <FormField label="Password" hint="Caps Lock is flagged while it is on.">
        <PasswordInput placeholder="Your password" />
      </FormField>
      <FormField label="New password">
        <PasswordInput strength placeholder="At least 8 characters" />
      </FormField>
      <div className="space-y-2">
        <p className="text-[13px] font-medium text-text">Verification code</p>
        <PinInput value={code} onValueChange={setCode} onComplete={setDone} />
        <p className="text-[12px] text-muted">{done ? `Entered ${done}` : "Paste a code to fill every box."}</p>
      </div>
      <div className="space-y-3">
        <div className="space-y-2">
          <p className="text-[12px] text-muted">split · 3–3</p>
          <PinInput variant="split" defaultValue="482" />
        </div>
        <div className="flex flex-wrap gap-6">
          <div className="space-y-2">
            <p className="text-[12px] text-muted">underline · a PIN, masked</p>
            <PinInput variant="underline" length={4} mask defaultValue="12" aria-label="PIN" />
          </div>
          <div className="space-y-2">
            <p className="text-[12px] text-muted">error</p>
            <PinInput length={4} error defaultValue="1234" />
          </div>
        </div>
      </div>
    </div>
  );
}