Tabs

import { StateLabel, Tabs } from '@divistant/circca-react';

const ringkasan: [string, string][] = [
  ['Customer', 'PT Mitra Energi Persada'],
  ['Tanggal PO', '2 Okt 2026'],
  ['Nilai', 'Rp 186.000.000'],
  ['Dibuat oleh', 'Anisa Nugraha'],
];
const items = ['Microsoft 365 Business Premium × 120', 'Jasa migrasi email', 'Pelatihan admin (2 hari)'];
const dokumen = ['PO customer.pdf', 'Penawaran Q-2026-0311.pdf', 'Faktur pajak.pdf', 'BAST termin 1.pdf'];

export default function Example() {
  // Detail dokumen: Tabs di tengah, di atas panel isi. Count = jumlah isi tab (teks muted, bukan Badge).
  return (
    <div className="grid w-full gap-4 rounded-lg border-[0.5px] border-default bg-default p-4">
      <div className="flex items-center gap-2">
        <span className="type-heading-small text-default">PO-2026-0142</span>
        <StateLabel tone="info" size="sm">
          Diproses
        </StateLabel>
      </div>
      <Tabs defaultValue="ringkasan">
        <Tabs.List aria-label="Bagian PO-2026-0142">
          <Tabs.Tab value="ringkasan">Ringkasan</Tabs.Tab>
          <Tabs.Tab value="item" count={3}>
            Item
          </Tabs.Tab>
          <Tabs.Tab value="project">Project</Tabs.Tab>
          <Tabs.Tab value="dokumen" count={4}>
            Dokumen
          </Tabs.Tab>
          <Tabs.Tab value="riwayat">Riwayat</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="ringkasan">
          <dl className="grid grid-cols-[120px_1fr] gap-x-4 gap-y-2 type-callout-default">
            {ringkasan.map(([k, v]) => (
              <div key={k} className="contents">
                <dt className="text-muted">{k}</dt>
                <dd className="text-default">{v}</dd>
              </div>
            ))}
          </dl>
        </Tabs.Panel>
        <Tabs.Panel value="item">
          <ul className="grid gap-1.5 type-callout-default text-default">
            {items.map(i => (
              <li key={i}>{i}</li>
            ))}
          </ul>
        </Tabs.Panel>
        <Tabs.Panel value="project">
          <p className="type-callout-default text-default">PRJ-2026-031 · Migrasi M365 PT Mitra Energi Persada</p>
        </Tabs.Panel>
        <Tabs.Panel value="dokumen">
          <ul className="grid gap-1.5 type-callout-default text-default">
            {dokumen.map(d => (
              <li key={d}>{d}</li>
            ))}
          </ul>
        </Tabs.Panel>
        <Tabs.Panel value="riwayat">
          <ul className="grid gap-1.5 type-callout-default text-default">
            <li>Rina Kartika (Finance) menyetujui termin 1 · 5 Okt 2026</li>
            <li>Anisa Nugraha membuat PO · 2 Okt 2026</li>
          </ul>
        </Tabs.Panel>
      </Tabs>
    </div>
  );
}

import { Tabs } from '@divistant/circca-react';
import { ClockCounterClockwise, FileText, Package, SquaresFour } from '@phosphor-icons/react';

export default function Example() {
  // Ikon 14 opsional — pakai di semua tab atau tidak sama sekali.
  return (
    <Tabs defaultValue="item" className="w-full">
      <Tabs.List aria-label="Bagian PO-2026-0142">
        <Tabs.Tab value="ringkasan" icon={SquaresFour}>
          Ringkasan
        </Tabs.Tab>
        <Tabs.Tab value="item" icon={Package} count={3}>
          Item
        </Tabs.Tab>
        <Tabs.Tab value="dokumen" icon={FileText} count={4}>
          Dokumen
        </Tabs.Tab>
        <Tabs.Tab value="riwayat" icon={ClockCounterClockwise} disabled>
          Riwayat
        </Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="ringkasan" className="type-callout-default text-muted">Ringkasan PO.</Tabs.Panel>
      <Tabs.Panel value="item" className="type-callout-default text-muted">3 item lisensi & jasa.</Tabs.Panel>
      <Tabs.Panel value="dokumen" className="type-callout-default text-muted">4 lampiran.</Tabs.Panel>
    </Tabs>
  );
}

import { useState } from 'react';
import { Tabs, type TabsItem } from '@divistant/circca-react';

const tabs: TabsItem[] = [
  { value: 'ringkasan', label: 'Ringkasan' },
  { value: 'aktivitas', label: 'Aktivitas', count: 12 },
  { value: 'catatan', label: 'Catatan' },
];

export default function Example() {
  // Pintasan `items` (Tabs.List dirender otomatis) + state terkendali.
  const [tab, setTab] = useState('aktivitas');
  return (
    <div className="grid w-full max-w-sm gap-2 rounded-lg border-[0.5px] border-default bg-default p-3">
      <span className="type-body-default-semibold text-default">Rina Kartika · Finance</span>
      <Tabs value={tab} onValueChange={setTab} items={tabs} listLabel="Bagian profil">
        <Tabs.Panel value="ringkasan" className="type-callout-default text-muted">Approver termin & expense claim.</Tabs.Panel>
        <Tabs.Panel value="aktivitas" className="type-callout-default text-muted">12 aktivitas minggu ini.</Tabs.Panel>
        <Tabs.Panel value="catatan" className="type-callout-default text-muted">Belum ada catatan.</Tabs.Panel>
      </Tabs>
      <span className="type-caption-default text-muted">Tab aktif: {tab}</span>
    </div>
  );
}