npm package: @isi-ui7/corporate-themes
Description: Corporate themes (BCA Syariah, BJB Syariah, Pos Indonesia, Ihsan Solusi Informatika) with Carbon variants.
Latest version: 0.1.2

# @isi-ui7/corporate-themes

Sistem tema korporat berbasis Carbon Design System — branding per institusi bank dengan token warna, logo, dan variant Carbon (white/g10/g90/g100).

## Fitur

- `ThemeProvider`: inject tema korporat ke seluruh aplikasi
- `CorporateTheme`: apply CSS class tema ke subtree tertentu
- `GlobalCorporateTheme`: inject CSS variables global ke `<html>`
- `ThemeSwitcher`: komponen UI untuk ganti variant (white/g10/g90/g100)
- `useTheme()`: akses tema aktif dan variant dari komponen manapun
- `useThemeTokens()`: akses token warna aktif (brandColors, buttonPrimary, dll.)
- `useBrandColors()`, `useThemeVariant()`, `useCorporateFeatures()`: hooks spesifik
- Multiple tema tersedia: `bca-syariah`, `bni-syariah`, dst. (via `corporateThemes`)

## Instalasi

```bash
pnpm add @isi-ui7/corporate-themes react react-dom
```

## Penggunaan

### Setup di app root

```tsx
// app/layout.tsx
import { ThemeProvider } from "@isi-ui7/corporate-themes";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <ThemeProvider corporateId="bca-syariah" variant="g90">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
```

### Akses tema dari komponen

```tsx
"use client";
import { useTheme, useThemeTokens } from "@isi-ui7/corporate-themes";

export function BrandedHeader() {
  const { theme, variant } = useTheme();
  const tokens = useThemeTokens();

  return (
    <header style={{ background: tokens.headerBackground }}>
      <img src={tokens.logoUrl.light} alt={theme.displayName} />
      <span>{theme.displayName} — {variant}</span>
    </header>
  );
}
```

### Ganti variant di runtime

```tsx
"use client";
import { useTheme, ThemeSwitcher } from "@isi-ui7/corporate-themes";

export function Toolbar() {
  const { variant, setVariant } = useTheme();
  return <ThemeSwitcher current={variant} onChange={setVariant} />;
}
```

### Apply tema ke subtree saja

```tsx
import { CorporateTheme } from "@isi-ui7/corporate-themes";

<CorporateTheme corporateId="bni-syariah" variant="white">
  <SidebarContent />
</CorporateTheme>
```

## Props

### `ThemeProvider`

| Nama | Tipe | Wajib | Deskripsi |
| --- | --- | --- | --- |
| `corporateId` | `string` | tidak | ID tema korporat (contoh: `"bca-syariah"`). Default: tema pertama |
| `variant` | `CarbonThemeVariant` | tidak | Variant Carbon awal. Default: tema `defaultVariant` |
| `children` | `ReactNode` | ya | Konten aplikasi |

### `CorporateTheme`

| Nama | Tipe | Wajib | Deskripsi |
| --- | --- | --- | --- |
| `corporateId` | `string` | tidak | ID tema korporat untuk subtree ini |
| `variant` | `CarbonThemeVariant` | tidak | Variant untuk subtree ini |
| `children` | `ReactNode` | ya | Subtree yang di-themed |

### `CarbonThemeVariant`

`"white" | "g10" | "g90" | "g100"`

## `useTheme()` — returns `ThemeContextValue`

| Property | Tipe | Deskripsi |
| --- | --- | --- |
| `theme` | `CorporateTheme` | Data tema aktif (id, name, displayName, tokens, supportedVariants) |
| `variant` | `CarbonThemeVariant` | Variant Carbon aktif |
| `corporateId` | `string` | ID tema aktif |
| `setVariant` | `(v) => void` | Ganti variant di runtime |

## `useThemeTokens()` — returns `ThemeTokens`

| Token | Tipe | Deskripsi |
| --- | --- | --- |
| `brandColors` | `BrandColors` | Palet warna merek (primary, secondary, accent, dll.) |
| `logoUrl` | `{ light, dark }` | URL logo untuk mode terang/gelap |
| `headerBackground` | `string` | Warna background header |
| `buttonPrimary` | `string` | Warna tombol primary |
| `linkPrimary` | `string` | Warna link primary |
| `focus` | `string` | Warna focus ring |
| ... | | Lihat `ThemeTokens` di `types.ts` |

## A11y

- CSS variables diinjeksi ke level `<html>` atau subtree — kompatibel dengan Carbon focus management
- Contrast ratio mengikuti standar WCAG 2.1 AA (tanggungjawab konfigurasi token per tema)

## Scripts

```bash
pnpm build      # Build ke dist/
pnpm lint       # ESLint
pnpm test       # Vitest
pnpm typecheck  # TypeScript check
```

## Catatan

- Peer deps: React/ReactDOM `^18 || ^19`
- Tidak ada dependensi Carbon langsung — token diimplementasi sebagai CSS custom properties
- `ThemeProvider` menggunakan React Context — wrap di level layout tertinggi
- `corporateThemes` (dari `import { corporateThemes }`) adalah daftar semua tema yang tersedia