ProductMark

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

// Size 20 | 24 | 32 | 48. Tanpa nama, tanda diumumkan sebagai gambar bernama produk ("BizOps").
// Warna mengikuti palet merek produk (token --circca-brand-*), termasuk di tema gelap.
export default function Example() {
  return (
    <div className="grid gap-6">
      <div className="flex items-end gap-6">
        <ProductMark product="bizops" size={20} />
        <ProductMark product="bizops" size={24} />
        <ProductMark product="bizops" size={32} />
        <ProductMark product="bizops" size={48} />
      </div>
      <div className="flex flex-wrap items-center gap-8">
        <ProductMark product="divistant" size={24} showName />
        <ProductMark product="bizops" size={24} showName />
        <ProductMark product="integraci" size={24} showName />
      </div>
    </div>
  );
}

import { useState, type MouseEvent } from 'react';
import { NavList, ProductMark, SplitView } from '@divistant/circca-react';
import { FileText, House, Receipt, ShoppingCart } from '@phosphor-icons/react';

// Header sidebar BizOps for IT Services (NavList/Header Figma 26:93): tanda 24 + "BizOps" / "by Divistant",
// tinggi 48, padding kiri 8. Logo menautkan ke Beranda; nama tertulis sehingga tanda dekoratif.
export default function Example() {
  const [aktif, setAktif] = useState('po-customer');
  const item = (id: string) => ({
    href: '#',
    current: aktif === id,
    onClick: (e: MouseEvent) => {
      e.preventDefault();
      setAktif(id);
    },
  });
  return (
    <SplitView
      landmarks={false}
      className="h-[360px] overflow-hidden rounded-2xl border-[0.5px] border-default"
      sidebar={
        <>
          <a
            href="#"
            onClick={e => {
              e.preventDefault();
              setAktif('beranda');
            }}
            aria-label="BizOps by Divistant, ke Beranda"
            className="mb-2 flex h-12 items-center rounded-lg pl-2 outline-none focus-visible:shadow-focus"
          >
            <ProductMark product="bizops" size={24} showName aria-hidden />
          </a>
          <NavList label="Navigasi utama" iconStyle="tile">
            <NavList.Item icon={House} {...item('beranda')}>
              Beranda
            </NavList.Item>
            <NavList.Group title="Order & pengadaan" tone="info">
              <NavList.Item icon={FileText} {...item('po-customer')}>
                PO Customer
              </NavList.Item>
              <NavList.Item icon={ShoppingCart} {...item('po-distributor')}>
                PO Distributor
              </NavList.Item>
            </NavList.Group>
            <NavList.Group title="Finance" tone="highlight">
              <NavList.Item icon={Receipt} {...item('invoice')}>
                Invoice
              </NavList.Item>
            </NavList.Group>
          </NavList>
        </>
      }
    >
      <div className="flex h-[52px] items-center gap-2 px-3">
        <SplitView.SidebarToggle />
        <h2 className="truncate type-headline-default text-default">PO Customer</h2>
      </div>
    </SplitView>
  );
}

import { AppHeader, ProductMark } from '@divistant/circca-react';

// ProductMark sebagai `brand` AppHeader — untuk layar tanpa sidebar (mis. halaman Hubungkan akun).
// Hanya tanda: nama aksesibel "BizOps" dari role="img".
export default function Example() {
  return (
    <div className="rounded-xl border-[0.5px] border-muted bg-canvas">
      <AppHeader
        landmark={false}
        brand={<ProductMark product="bizops" size={24} />}
        notifications={<AppHeader.Notifications unread={3} />}
        user={<AppHeader.User name="Andri Nugraha" />}
      />
    </div>
  );
}