Stepper

import { useState } from 'react';
import { FormField, Stepper, formatMoney } from '@divistant/circca-react';

const HARGA_PER_LISENSI = 1_850_000;

export default function Example() {
  const [qty, setQty] = useState<number | null>(25);
  return (
    <div className="grid max-w-xs gap-4">
      <FormField
        label="Qty lisensi Microsoft 365 Business Standard"
        required
        helperText={qty ? `Subtotal ${formatMoney(qty * HARGA_PER_LISENSI)}` : 'Isi minimal 1 lisensi.'}
      >
        <Stepper value={qty} onValueChange={setQty} min={1} max={300} />
      </FormField>
    </div>
  );
}

import { useState } from 'react';
import { FormField, Stepper } from '@divistant/circca-react';

export default function Example() {
  const [termin, setTermin] = useState<number | null>(1);
  const [durasi, setDurasi] = useState<number | null>(12);
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <FormField label="Jumlah termin" helperText="1–6 termin. Di batas, panah yang tidak berlaku nonaktif.">
        <Stepper value={termin} onValueChange={setTermin} min={1} max={6} />
      </FormField>
      <FormField label="Durasi kontrak" helperText="Kelipatan 3 bulan (per kuartal).">
        <Stepper value={durasi} onValueChange={setDurasi} min={3} max={36} step={3} suffix="bulan" />
      </FormField>
    </div>
  );
}

import { FormField, Stepper } from '@divistant/circca-react';

export default function Example() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <FormField label="Qty (Small)" helperText="Small (24) — untuk baris item di tabel.">
        <Stepper size="sm" defaultValue={10} min={1} />
      </FormField>
      <FormField label="Qty lisensi" error="Stok lisensi distributor hanya 20 — kurangi qty atau pecah PO.">
        <Stepper defaultValue={25} min={1} />
      </FormField>
      <FormField label="Jumlah termin" readOnly helperText="PO sudah diajukan — tidak dapat diubah.">
        <Stepper defaultValue={3} min={1} />
      </FormField>
      <FormField label="Qty" disabled helperText="Item jasa dihitung per paket, bukan per unit.">
        <Stepper defaultValue={1} min={1} />
      </FormField>
    </div>
  );
}