import { useState } from 'react';
import { Button, IconButton, Toolbar } from '@divistant/circca-react';
import { Copy, DotsThree, Funnel, Plus, Printer, SidebarSimple } from '@phosphor-icons/react';

// Daftar PO Customer — Figma Circca HIG › Toolbar (13:59): judul + subjudul, kelompok kaca, pencarian 200, aksi utama.
// Kelompok "Aksi daftar" ditandai `collapse`: di bar < 576 px diganti tombol "Aksi lain" (prop overflow).
export default function Example() {
  const [q, setQ] = useState('');
  return (
    <div className="rounded-xl border-[0.5px] border-muted bg-canvas">
      <Toolbar
        title="PO Customer"
        subtitle={q ? `Hasil untuk "${q}"` : '142 dokumen'}
        leading={<IconButton variant="ghost" icon={SidebarSimple} label="Sembunyikan sidebar" tooltipSide="bottom" />}
        search={{ 'aria-label': 'Cari PO', placeholder: 'Cari no. PO, customer', value: q, onValueChange: setQ }}
        overflow={<IconButton variant="ghost" icon={DotsThree} label="Aksi lain" />}
        primaryAction={
          <Button variant="primary" leadingVisual={Plus}>
            PO baru
          </Button>
        }
      >
        <Toolbar.Group aria-label="Aksi daftar" collapse>
          <IconButton variant="ghost" icon={Funnel} label="Filter" tooltipSide="bottom" />
          <IconButton variant="ghost" icon={Printer} label="Cetak daftar" tooltipSide="bottom" />
          <IconButton variant="ghost" icon={Copy} label="Salin tautan" tooltipSide="bottom" />
        </Toolbar.Group>
      </Toolbar>
    </div>
  );
}

import { useState } from 'react';
import { Button, IconButton, SegmentedControl, Toolbar } from '@divistant/circca-react';
import { PaperPlaneTilt, Printer } from '@phosphor-icons/react';

// Detail dokumen dengan navigasi Kembali/Maju antar-PO dan SegmentedControl tampilan (tanpa kaca — sudah punya trek).
// titleAs="h2" karena halaman detail sudah punya PageHeader berjudul h1 di bawahnya.
export default function Example() {
  const [index, setIndex] = useState(3);
  const [view, setView] = useState('ringkasan');
  return (
    <div className="rounded-xl border-[0.5px] border-muted bg-canvas">
      <Toolbar
        titleAs="h2"
        title={`PO-2026-014${index}`}
        subtitle={`${index} dari 142 · PT Pelanggan Contoh A`}
        navigation={{
          onBack: () => setIndex(i => Math.max(1, i - 1)),
          onForward: () => setIndex(i => Math.min(9, i + 1)),
          backDisabled: index === 1,
          forwardDisabled: index === 9,
          backLabel: 'PO sebelumnya',
          forwardLabel: 'PO berikutnya',
        }}
        primaryAction={
          <Button variant="primary" leadingVisual={PaperPlaneTilt}>
            Ajukan
          </Button>
        }
      >
        <Toolbar.Group glass={false} collapse>
          <SegmentedControl
            aria-label="Tampilan"
            size="sm"
            value={view}
            onValueChange={setView}
            items={[
              { value: 'ringkasan', label: 'Ringkasan' },
              { value: 'riwayat', label: 'Riwayat' },
            ]}
          />
        </Toolbar.Group>
        <Toolbar.Group aria-label="Aksi dokumen">
          <IconButton variant="ghost" icon={Printer} label="Cetak PO" tooltipSide="bottom" />
        </Toolbar.Group>
      </Toolbar>
    </div>
  );
}

import { Button, IconButton, Toolbar } from '@divistant/circca-react';
import { DotsThree, Funnel, Plus, Printer } from '@phosphor-icons/react';

// Bar sempit (mis. panel di SplitView): kelompok `collapse` diganti "Aksi lain", pencarian melipat menjadi tombol
// kaca pembesar. Tekan tombol itu — kolom membentang menutupi bar; Esc atau Batal mengembalikannya.
// Judul tetap terbaca; yang mengalah adalah kontrol.
export default function Example() {
  return (
    <div className="grid gap-3">
      {[420, 320].map(w => (
        <div key={w} style={{ width: w }} className="max-w-full rounded-xl border-[0.5px] border-muted bg-canvas">
          <Toolbar
            titleAs="h2"
            title="Invoice Distributor"
            subtitle="38 dokumen"
            search={{ 'aria-label': 'Cari invoice', placeholder: 'Cari no. invoice' }}
            overflow={<IconButton variant="ghost" icon={DotsThree} label="Aksi lain" />}
            primaryAction={
              <Button variant="primary" leadingVisual={Plus}>
                Baru
              </Button>
            }
          >
            <Toolbar.Group aria-label="Aksi daftar" collapse>
              <IconButton variant="ghost" icon={Funnel} label="Filter" />
              <IconButton variant="ghost" icon={Printer} label="Cetak daftar" />
            </Toolbar.Group>
          </Toolbar>
        </div>
      ))}
    </div>
  );
}