Steps

import { useState } from 'react';
import { Button, Steps, formatMoney } from '@divistant/circca-react';

const STEPS = [
  { key: 'customer', label: 'Customer', done: 'PT Mitra Energi Persada' },
  { key: 'nilai', label: 'Nilai', done: formatMoney(186_000_000) },
  { key: 'penagihan', label: 'Penagihan', done: 'Termin 60 / 40' },
  { key: 'tinjau', label: 'Tinjau', done: '' },
];

// Wizard buat PO customer: langkah yang sudah dilewati bisa diklik untuk kembali; langkah berikutnya hanya lewat "Lanjut".
export default function Example() {
  const [at, setAt] = useState(1);
  const current = STEPS[at]!;
  return (
    <div className="grid gap-5">
      <Steps
        aria-label="Langkah buat PO customer"
        current={current.key}
        onStepClick={(_, i) => setAt(i)}
        steps={STEPS.map((s, i) => ({ key: s.key, label: s.label, description: i < at ? s.done : undefined }))}
      />
      <div className="flex items-center justify-between gap-3 border-t-[0.5px] border-muted pt-4">
        <span className="type-callout-default text-muted">Isi langkah “{current.label}”…</span>
        <div className="flex gap-2">
          <Button disabled={at === 0} onClick={() => setAt(i => i - 1)}>
            Kembali
          </Button>
          <Button variant="primary" onClick={() => setAt(i => Math.min(i + 1, STEPS.length - 1))}>
            {at === STEPS.length - 1 ? 'Ajukan PO' : 'Lanjut'}
          </Button>
        </div>
      </div>
    </div>
  );
}

import { Steps } from '@divistant/circca-react';

// Saat "Ajukan PO" ditekan di langkah Tinjau, langkah yang isiannya belum valid ditandai Error (silang merah + teks).
export default function Example() {
  return (
    <Steps
      aria-label="Langkah buat PO customer"
      current="tinjau"
      onStepClick={() => {}}
      steps={[
        { key: 'customer', label: 'Customer', description: 'PT Mitra Energi Persada' },
        { key: 'nilai', label: 'Nilai', description: 'Nilai item belum diisi', error: true },
        { key: 'penagihan', label: 'Penagihan', description: 'Termin 60 / 40' },
        { key: 'tinjau', label: 'Tinjau' },
      ]}
    />
  );
}

import { Steps } from '@divistant/circca-react';

// Di ponsel atau panel sempit (lebar wadah < 36rem) Steps otomatis ringkas: "Langkah 2 dari 4" + bar segmen.
// compact="always" memaksa tampilan ringkas di mana pun.
export default function Example() {
  return (
    <div className="grid max-w-[360px] gap-6">
      <Steps
        aria-label="Langkah buat PO customer"
        current="nilai"
        compact="always"
        steps={[
          { key: 'customer', label: 'Customer' },
          { key: 'nilai', label: 'Nilai' },
          { key: 'penagihan', label: 'Penagihan' },
          { key: 'tinjau', label: 'Tinjau' },
        ]}
      />
    </div>
  );
}