NavigationBar

import { NavigationBar } from '@divistant/circca-react';
import { Plus } from '@phosphor-icons/react';

// Title style Large: halaman utama sebuah tab. Judul besar di bawah bar, aksi utama di kanan.
// Tanpa tombol kembali karena halaman ini akar tab "Tugas".
export default function Example() {
  return (
    <div className="mx-auto w-[390px] max-w-full rounded-2xl bg-canvas">
      <NavigationBar
        title="Tugas"
        headingLevel={2}
        actions={<NavigationBar.Action icon={Plus} label="Buat tugas" />}
      />
    </div>
  );
}

import type { MouseEvent } from 'react';
import { NavigationBar } from '@divistant/circca-react';
import { DotsThree } from '@phosphor-icons/react';

const cegah = (e: MouseEvent) => e.preventDefault();

// Title style Inline: layar detail. Tombol kembali hanya chevron; nama aksesibelnya "Kembali ke PO Customer".
// Judul panjang terpotong "…" — aksi kanan tidak terdorong keluar (bingkai kedua 280 px).
export default function Example() {
  return (
    <div className="grid justify-items-center gap-4 rounded-2xl bg-canvas py-2">
      <div className="w-[390px] max-w-full">
        <NavigationBar
          title="PO-2026-0142"
          titleStyle="inline"
          headingLevel={2}
          back={<NavigationBar.Back label="PO Customer" href="#" onClick={cegah} />}
          actions={<NavigationBar.Action icon={DotsThree} label="Aksi lain" />}
        />
      </div>
      <div className="w-[280px] max-w-full">
        <NavigationBar
          title="PO-2026-0142 · PT Mitra Energi Persada"
          titleStyle="inline"
          headingLevel={2}
          back={<NavigationBar.Back label="PO Customer" href="#" onClick={cegah} />}
          actions={<NavigationBar.Action label="Selesai">Selesai</NavigationBar.Action>}
        />
      </div>
    </div>
  );
}

import { useState, type MouseEvent } from 'react';
import { NavigationBar, StateLabel, TabBar } from '@divistant/circca-react';
import { Bell, CheckSquare, House, Plus, Stamp, UserCircle } from '@phosphor-icons/react';

const cegah = (e: MouseEvent) => e.preventDefault();

const PERSETUJUAN = Array.from({ length: 10 }, (_, i) => ({
  no: `PO-2026-${String(142 + i).padStart(4, '0')}`,
  customer: ['PT Mitra Energi Persada', 'PT Sinar Logistik Nusantara', 'CV Data Prima'][i % 3],
}));

// collapseOnScroll: gulir daftar — judul besar "Persetujuan" mengecil ke tengah bar. NavigationBar harus anak
// langsung kontainer gulir. Transisi mengikuti prefers-reduced-motion (tanpa animasi bila gerak dikurangi).
export default function Example() {
  const [aktif, setAktif] = useState('persetujuan');
  const tab = (id: string) => ({
    href: '#',
    current: aktif === id,
    onClick: (e: MouseEvent) => {
      e.preventDefault();
      setAktif(id);
    },
  });
  return (
    <div className="relative mx-auto h-[700px] w-[390px] max-w-full overflow-hidden rounded-[40px] border-[0.5px] border-default bg-canvas">
      <div className="h-full overflow-y-auto pb-24">
        <NavigationBar
          title="Persetujuan"
          headingLevel={2}
          collapseOnScroll
          actions={<NavigationBar.Action icon={Plus} label="Ajukan persetujuan" />}
        />
        <ul className="mx-4 grid rounded-xl bg-default">
          {PERSETUJUAN.map(p => (
            <li key={p.no} className="flex items-center gap-3 border-b-[0.5px] border-muted px-4 py-3 last:border-b-0">
              <a href="#" onClick={cegah} className="min-w-0 flex-1 rounded-md outline-none focus-visible:shadow-focus">
                <p className="type-body-default-medium text-default">{p.no}</p>
                <p className="truncate type-footnote-default text-muted">{p.customer}</p>
              </a>
              <StateLabel tone="warning" size="sm">
                Menunggu
              </StateLabel>
            </li>
          ))}
        </ul>
      </div>
      <TabBar label="Navigasi utama" position="absolute" safeArea>
        <TabBar.Item icon={House} {...tab('beranda')}>Beranda</TabBar.Item>
        <TabBar.Item icon={CheckSquare} {...tab('tugas')}>Tugas</TabBar.Item>
        <TabBar.Item icon={Stamp} badge={3} badgeLabel="3 menunggu persetujuan" {...tab('persetujuan')}>
          Persetujuan
        </TabBar.Item>
        <TabBar.Item icon={Bell} {...tab('notifikasi')}>Notifikasi</TabBar.Item>
        <TabBar.Item icon={UserCircle} {...tab('akun')}>Akun</TabBar.Item>
      </TabBar>
    </div>
  );
}