DescriptionList

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

// Gaya inset grouped (default): kartu sendiri, label kiri, nilai rata kanan, baris dipisah garis tipis.
export default function Example() {
  return (
    <DescriptionList
      className="max-w-[360px]"
      items={[
        {
          label: 'Customer',
          value: (
            <a href="#" className="text-accent-fg hover:underline">
              PT Pelanggan Contoh A
            </a>
          ),
        },
        { label: 'No. PO customer', value: 'PO/PCA/IX/2026/0911', description: '12 Sep 2026' },
        { label: 'Cara penagihan', value: 'Termin 60 / 40', description: 'lisensi + jasa' },
        { label: 'Nilai kontrak', value: formatMoney(150_000_000), numeric: true },
        { label: 'Status', value: <StateLabel tone="warning" size="sm">Menunggu BAST</StateLabel> },
        { label: 'Catatan', value: null },
      ]}
    />
  );
}

import { Card, DescriptionList } from '@divistant/circca-react';

// Kisi atribut di Ringkasan detail PO: `columns` + variant="plain" di dalam Card. Item otomatis Vertical.
const Tautan = ({ children }: { children: string }) => (
  <a href="#" className="text-accent-fg hover:underline">
    {children}
  </a>
);

export default function Example() {
  return (
    <Card className="max-w-3xl" title="Ringkasan" headingLevel={2}>
      <DescriptionList variant="plain" columns={3}>
        <DescriptionList.Item label="Customer" value={<Tautan>PT Pelanggan Contoh A</Tautan>} />
        <DescriptionList.Item label="No. PO customer" value="PO/PCA/IX/2026/0911" description="12 Sep 2026" />
        <DescriptionList.Item label="Cara penagihan" value="Termin 60 / 40" description="lisensi + jasa" />
        <DescriptionList.Item label="Distributor" value={<Tautan>PT Distributor Lisensi Contoh</Tautan>} description="INV-DST-8812" />
        <DescriptionList.Item label="Project" value={<Tautan>PRJ-2026-0088</Tautan>} description="PM Dimas Prasetyo" />
        <DescriptionList.Item label="Pemilik" value="Anisa Nugraha" description="diajukan Budi Santoso" />
      </DescriptionList>
    </Card>
  );
}

import { Card, DescriptionList } from '@divistant/circca-react';

// Layout Vertical: label di atas nilai — untuk nilai panjang. Kiri: inset; kanan: plain di dalam Card.
export default function Example() {
  return (
    <div className="grid max-w-3xl items-start gap-4 sm:grid-cols-2">
      <DescriptionList layout="vertical">
        <DescriptionList.Item label="Alamat penagihan" value="Jl. Contoh Raya No. 12, Jakarta Selatan 12190" />
        <DescriptionList.Item label="Ruang lingkup" value="Instalasi, aktivasi 25 lisensi, dan pelatihan admin 2 sesi di kantor customer." />
        <DescriptionList.Item label="Kontak customer" value="Sari Wulandari" description="Procurement · 0812-0000-0911" />
      </DescriptionList>
      <Card title="Pengiriman">
        <DescriptionList variant="plain">
          <DescriptionList.Item label="Metode" value="Aktivasi online" />
          <DescriptionList.Item label="Target BAST" value="10 Okt 2026" />
          <DescriptionList.Item layout="vertical" label="Catatan" value="Customer meminta sesi pelatihan dijadwalkan setelah aktivasi selesai." />
        </DescriptionList>
      </Card>
    </div>
  );
}