@isi-ui7/corporate-themes 0.2.9 → 0.2.10

package/dist/hooks/useCorporateFeatures.d.ts

@@ -0,0 +1,7 @@
+export declare function useCorporateFeatures(): {
+    logo: {
+        light: string;
+        dark: string;
+    };
+    brandColors: import('..').BrandColors;
+};

package/dist/hooks/useDensity.d.ts

@@ -0,0 +1 @@
+export declare function useDensity(): "compact" | "normal";

package/dist/hooks/useFormVisualContract.d.ts

@@ -0,0 +1,27 @@
+import { Ui7FormDensity } from '@isi-ui7/bos7-shared/style-contract';
+
+export declare function useFormVisualContract(): {
+    density: Ui7FormDensity;
+    densityClassName: "ui7-form-contract--density-compact" | "ui7-form-contract--density-comfortable";
+    scopeClassName: string;
+    classNames: {
+        readonly scope: "ui7-form-contract";
+        readonly densityCompact: "ui7-form-contract--density-compact";
+        readonly densityComfortable: "ui7-form-contract--density-comfortable";
+        readonly widthHalf: "ui7-form-contract--width-half";
+        readonly widthTwoThirds: "ui7-form-contract--width-two-thirds";
+        readonly widthFull: "ui7-form-contract--width-full";
+        readonly readonly: "ui7-form-contract--readonly";
+        readonly row: "ui7-form-row";
+        readonly section: "ui7-form-section";
+        readonly column: "ui7-form-column";
+        readonly label: "ui7-form-label";
+        readonly labelRequired: "ui7-form-label__required";
+        readonly control: "ui7-form-control";
+        readonly controlReadonly: "ui7-form-control--readonly";
+        readonly helper: "ui7-form-helper";
+        readonly readonlyValue: "ui7-form-readonly-value";
+    };
+    tokens: import('@isi-ui7/bos7-shared/style-contract').Ui7FormVisualTokens;
+};
+export type { Ui7FormDensity };

package/dist/hooks/useThemeTokens.d.ts

@@ -0,0 +1 @@
+export declare function useThemeTokens(): import('..').ThemeTokens;

package/dist/hooks/useThemeVariant.d.ts

@@ -0,0 +1,4 @@
+export declare function useThemeVariant(): {
+    variant: import('..').CarbonThemeVariant;
+    setVariant: (variant: import('..').CarbonThemeVariant) => void;
+};

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export * from './types';
+export * from './tokens';
+export { useLabels, LabelsProvider } from './LabelsContext';
+export type { Ui7Labels } from './labels';
+export { defaultLabels } from './labels';
+export { ThemeContextProvider, useTheme, corporateThemes } from './context/ThemeContext';
+export { ThemeProvider } from './components/ThemeProvider';
+export { CorporateTheme, GlobalCorporateTheme } from './components/CorporateTheme';
+export { ThemeSwitcher } from './components/ThemeSwitcher';
+export { useThemeTokens } from './hooks/useThemeTokens';
+export { useBrandColors } from './hooks/useBrandColors';
+export { useThemeVariant } from './hooks/useThemeVariant';
+export { useCorporateFeatures } from './hooks/useCorporateFeatures';
+export { useDensity } from './hooks/useDensity';
+export { useFormVisualContract } from './hooks/useFormVisualContract';

package/dist/index.js

@@ -0,0 +1,447 @@
+import { jsx as n, jsxs as S } from "react/jsx-runtime";
+import { useContext as p, createContext as F, useMemo as k, useState as A, useEffect as g } from "react";
+const B = {
+  brandColors: {
+    primary: "#0F62FE",
+    primaryHover: "#0043CE",
+    primaryActive: "#002D9C",
+    secondary: "#393939",
+    secondaryHover: "#4C4C4C",
+    secondaryActive: "#6F6F6F",
+    accent: "#4589FF",
+    accentHover: "#1F70FF"
+  },
+  logoUrl: {
+    light: "/assets/logos/carbon-light.svg",
+    dark: "/assets/logos/carbon-dark.svg"
+  },
+  interactive: "#0F62FE",
+  interactiveHover: "#0043CE",
+  interactiveActive: "#002D9C",
+  buttonPrimary: "#0F62FE",
+  buttonPrimaryHover: "#0043CE",
+  buttonPrimaryActive: "#002D9C",
+  buttonSecondary: "#393939",
+  buttonSecondaryHover: "#4C4C4C",
+  linkPrimary: "#0F62FE",
+  linkPrimaryHover: "#002D9C",
+  linkSecondary: "#4589FF",
+  focus: "#0F62FE",
+  borderInteractive: "#0F62FE",
+  headerBackground: "#0F62FE",
+  sidebarBackground: "#393939",
+  navigationBackground: "#F4F4F4"
+}, D = {
+  brandColors: {
+    primary: "#0066CC",
+    // BCA Blue
+    primaryHover: "#0052A3",
+    primaryActive: "#003D7A",
+    secondary: "#00A651",
+    // Islamic Green
+    secondaryHover: "#008542",
+    secondaryActive: "#006633",
+    accent: "#FFB81C",
+    // Gold accent
+    accentHover: "#E6A519"
+  },
+  logoUrl: {
+    light: "/assets/logos/bca-syariah-light.svg",
+    dark: "/assets/logos/bca-syariah-dark.svg"
+  },
+  // Interactive - gunakan primary blue
+  interactive: "#0066CC",
+  interactiveHover: "#0052A3",
+  interactiveActive: "#003D7A",
+  // Buttons
+  buttonPrimary: "#0066CC",
+  buttonPrimaryHover: "#0052A3",
+  buttonPrimaryActive: "#003D7A",
+  buttonSecondary: "#00A651",
+  buttonSecondaryHover: "#008542",
+  // Links
+  linkPrimary: "#0066CC",
+  linkPrimaryHover: "#003D7A",
+  linkSecondary: "#00A651",
+  // Focus
+  focus: "#0066CC",
+  borderInteractive: "#0066CC",
+  // Custom UI
+  headerBackground: "#0066CC",
+  sidebarBackground: "#00A651",
+  navigationBackground: "#F5F5F5"
+}, w = {
+  brandColors: {
+    primary: "#C8102E",
+    // BJB Red (main brand color)
+    primaryHover: "#A00D25",
+    primaryActive: "#7A0A1C",
+    secondary: "#8B0000",
+    // Dark Red
+    secondaryHover: "#6B0000",
+    secondaryActive: "#4B0000",
+    accent: "#E31837",
+    // Bright Red accent
+    accentHover: "#C8102E"
+  },
+  logoUrl: {
+    light: "/assets/logos/bjb-syariah-light.svg",
+    dark: "/assets/logos/bjb-syariah-dark.svg"
+  },
+  interactive: "#C8102E",
+  interactiveHover: "#A00D25",
+  interactiveActive: "#7A0A1C",
+  buttonPrimary: "#C8102E",
+  buttonPrimaryHover: "#A00D25",
+  buttonPrimaryActive: "#7A0A1C",
+  buttonSecondary: "#8B0000",
+  buttonSecondaryHover: "#6B0000",
+  linkPrimary: "#C8102E",
+  linkPrimaryHover: "#7A0A1C",
+  linkSecondary: "#E31837",
+  focus: "#C8102E",
+  borderInteractive: "#C8102E",
+  headerBackground: "#C8102E",
+  sidebarBackground: "#8B0000",
+  navigationBackground: "#FFF5F5"
+}, T = {
+  brandColors: {
+    primary: "#ED1C24",
+    primaryHover: "#C61018",
+    primaryActive: "#A00D14",
+    secondary: "#FF7F00",
+    secondaryHover: "#E66F00",
+    secondaryActive: "#CC6300",
+    accent: "#FFD100",
+    accentHover: "#E6BC00"
+  },
+  logoUrl: {
+    light: "/assets/logos/pos-indonesia-light.svg",
+    dark: "/assets/logos/pos-indonesia-dark.svg"
+  },
+  interactive: "#ED1C24",
+  interactiveHover: "#C61018",
+  interactiveActive: "#A00D14",
+  buttonPrimary: "#ED1C24",
+  buttonPrimaryHover: "#C61018",
+  buttonPrimaryActive: "#A00D14",
+  buttonSecondary: "#FF7F00",
+  buttonSecondaryHover: "#E66F00",
+  linkPrimary: "#ED1C24",
+  linkPrimaryHover: "#A00D14",
+  linkSecondary: "#FF7F00",
+  focus: "#ED1C24",
+  borderInteractive: "#ED1C24",
+  headerBackground: "#ED1C24",
+  sidebarBackground: "#FF7F00",
+  navigationBackground: "#FFF4E6"
+}, V = {
+  brandColors: {
+    primary: "#0F62FE",
+    primaryHover: "#0043CE",
+    primaryActive: "#002D9C",
+    secondary: "#1192E8",
+    secondaryHover: "#0F7EC8",
+    secondaryActive: "#0C6AAA",
+    accent: "#08BDBA",
+    accentHover: "#07A6A4"
+  },
+  logoUrl: {
+    light: "/assets/logos/ihsan-solusi-light.svg",
+    dark: "/assets/logos/ihsan-solusi-dark.svg"
+  },
+  interactive: "#0F62FE",
+  interactiveHover: "#0043CE",
+  interactiveActive: "#002D9C",
+  buttonPrimary: "#0F62FE",
+  buttonPrimaryHover: "#0043CE",
+  buttonPrimaryActive: "#002D9C",
+  buttonSecondary: "#1192E8",
+  buttonSecondaryHover: "#0F7EC8",
+  linkPrimary: "#0F62FE",
+  linkPrimaryHover: "#002D9C",
+  linkSecondary: "#1192E8",
+  focus: "#0F62FE",
+  borderInteractive: "#0F62FE",
+  headerBackground: "#0F62FE",
+  sidebarBackground: "#1192E8",
+  navigationBackground: "#F4F7FF"
+}, f = [
+  {
+    id: "carbon-default",
+    name: "carbon-default",
+    displayName: "ISI",
+    tokens: B,
+    supportedVariants: ["white", "g10", "g90", "g100"],
+    defaultVariant: "g10"
+  },
+  {
+    id: "ihsan",
+    name: "ihsan",
+    displayName: "ISI",
+    tokens: V,
+    supportedVariants: ["white", "g10", "g90", "g100"],
+    defaultVariant: "g10"
+  },
+  {
+    id: "bca-syariah",
+    name: "bca-syariah",
+    displayName: "BCAS",
+    tokens: D,
+    supportedVariants: ["white", "g10", "g90", "g100"],
+    defaultVariant: "g10"
+  },
+  {
+    id: "bjb-syariah",
+    name: "bjb-syariah",
+    displayName: "BJBS",
+    tokens: w,
+    supportedVariants: ["white", "g10", "g90", "g100"],
+    defaultVariant: "g90"
+  },
+  {
+    id: "pos-indonesia",
+    name: "pos-indonesia",
+    displayName: "PosInd",
+    tokens: T,
+    supportedVariants: ["white", "g10", "g90", "g100"],
+    defaultVariant: "g10"
+  }
+], C = {
+  rowsPerPage: "Tampil",
+  search: "Cari",
+  noData: "Tidak ada data",
+  loading: "Memuat...",
+  nextPage: "Selanjutnya",
+  prevPage: "Sebelumnya",
+  firstPage: "Halaman pertama",
+  lastPage: "Halaman terakhir",
+  filterColumns: "Kolom",
+  lookupPlaceholder: "Ketik untuk mencari...",
+  lookupNoResults: "Tidak ditemukan",
+  lookupLoading: "Mencari...",
+  addRow: "Tambah Baris",
+  deleteRow: "Hapus",
+  editableNoData: "Belum ada data",
+  modalClose: "Tutup",
+  modalCancel: "Batal",
+  notifications: "Notifikasi",
+  markAllRead: "Tandai Semua Dibaca",
+  noNotifications: "Tidak ada notifikasi",
+  apps: "Aplikasi",
+  required: "Wajib diisi",
+  profile: "Profil Saya",
+  changePassword: "Ganti Password",
+  logout: "Keluar",
+  searchMenuPlaceholder: "Cari navigasi...",
+  searchMenuAriaLabel: "Cari navigasi menu",
+  openSearchNavigationButtonAriaLabel: "Buka pencarian navigasi",
+  clearSearchAriaLabel: "Hapus pencarian",
+  removeFavoriteAriaLabel: "Hapus favorit",
+  addFavoriteAriaLabel: "Tandai favorit",
+  favoritesTitle: "Favorit",
+  appSwitcherButtonAriaLabel: "Ganti aplikasi",
+  profileButtonAriaLabel: "Profil pengguna",
+  notificationsButtonAriaLabel: "Notifikasi",
+  notificationsUnreadSuffix: "belum dibaca",
+  branchLabel: "Cabang",
+  viewAll: "Lihat semua"
+}, E = F(C);
+function L({
+  labels: e,
+  children: a
+}) {
+  const t = e ? { ...C, ...e } : C;
+  return /* @__PURE__ */ n(E.Provider, { value: t, children: a });
+}
+function z() {
+  return p(E);
+}
+const b = F(null);
+function H(e) {
+  const a = f.find((t) => t.id === "carbon-default") ?? f.find((t) => t.id === "ihsan") ?? f[0];
+  return e ? f.find((t) => t.id === e) ?? a : a;
+}
+function x({ corporateId: e, variant: a, children: t }) {
+  const r = k(() => H(e), [e]), [d, v] = A(
+    a ?? r.defaultVariant
+  );
+  g(() => {
+    a && r.supportedVariants.includes(a) && v(a);
+  }, [a, r]), g(() => {
+    if (typeof document > "u") return;
+    const m = document.documentElement, o = document.body;
+    f.flatMap(
+      (c) => c.supportedVariants.map((h) => `platform-theme-${c.id}-${h}`)
+    ).forEach((c) => {
+      m.classList.remove(c), o.classList.remove(c);
+    });
+    const s = `platform-theme-${r.id}-${d}`;
+    return m.classList.add(s), o.classList.add(s), () => {
+      m.classList.remove(s), o.classList.remove(s);
+    };
+  }, [r, d]);
+  const u = {
+    theme: r,
+    variant: d,
+    corporateId: r.id,
+    setVariant: v
+  };
+  return /* @__PURE__ */ n(b.Provider, { value: u, children: t });
+}
+function l() {
+  const e = p(b);
+  if (!e)
+    throw new Error("useTheme must be used inside ThemeProvider");
+  return e;
+}
+function N({ corporateId: e, variant: a, children: t }) {
+  return /* @__PURE__ */ n(x, { corporateId: e, variant: a, children: t });
+}
+function K({
+  as: e,
+  className: a,
+  corporateId: t,
+  variant: r,
+  children: d,
+  ...v
+}) {
+  const u = l(), m = e ?? "div", o = k(
+    () => t ? H(t) : u.theme,
+    [t, u.theme]
+  ), [y, s] = A(
+    r ?? u.variant ?? o.defaultVariant
+  );
+  g(() => {
+    r && o.supportedVariants.includes(r) ? s(r) : r || s(o.defaultVariant);
+  }, [r, o]);
+  const c = {
+    theme: o,
+    variant: y,
+    corporateId: o.id,
+    setVariant: s
+  }, h = [a, `platform-theme-${o.id}-${y}`].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(b.Provider, { value: c, children: /* @__PURE__ */ n(m, { className: h, ...v, children: d }) });
+}
+function W({ corporateId: e, variant: a, labels: t, children: r }) {
+  return /* @__PURE__ */ n(L, { labels: t, children: /* @__PURE__ */ n(N, { corporateId: e, variant: a, children: r }) });
+}
+const U = ["white", "g10", "g90", "g100"];
+function q() {
+  const { variant: e, setVariant: a, theme: t } = l();
+  return /* @__PURE__ */ S("div", { style: { display: "inline-flex", gap: "0.5rem", alignItems: "center" }, children: [
+    /* @__PURE__ */ n("span", { style: { fontSize: "0.85rem" }, children: t.displayName }),
+    /* @__PURE__ */ n(
+      "select",
+      {
+        value: e,
+        onChange: (r) => a(r.target.value),
+        children: U.map((r) => /* @__PURE__ */ n("option", { value: r, children: r.toUpperCase() }, r))
+      }
+    )
+  ] });
+}
+function I() {
+  const { theme: e } = l();
+  return e.tokens;
+}
+function O() {
+  return I().brandColors;
+}
+function J() {
+  const { variant: e, setVariant: a } = l();
+  return { variant: e, setVariant: a };
+}
+function Q() {
+  const { theme: e } = l();
+  return {
+    logo: e.tokens.logoUrl,
+    brandColors: e.tokens.brandColors
+  };
+}
+function X() {
+  const { theme: e } = l();
+  return e.tokens.density === "normal" ? "normal" : "compact";
+}
+const j = {
+  labelSpacing: "6px",
+  labelFontSize: "12px",
+  labelFontWeight: 500,
+  labelLineHeight: "16px",
+  inputFontSize: "14px",
+  inputFontWeight: 400,
+  inputLineHeight: "20px",
+  controlHeight: "40px",
+  textareaMinHeight: "88px",
+  rowGap: "16px",
+  sectionGap: "24px",
+  columnGap: "16px",
+  readonlyBackground: "#f4f4f4",
+  readonlyCursor: "default"
+}, i = {
+  scope: "ui7-form-contract",
+  densityCompact: "ui7-form-contract--density-compact",
+  densityComfortable: "ui7-form-contract--density-comfortable",
+  widthHalf: "ui7-form-contract--width-half",
+  widthTwoThirds: "ui7-form-contract--width-two-thirds",
+  widthFull: "ui7-form-contract--width-full",
+  readonly: "ui7-form-contract--readonly",
+  row: "ui7-form-row",
+  section: "ui7-form-section",
+  column: "ui7-form-column",
+  label: "ui7-form-label",
+  labelRequired: "ui7-form-label__required",
+  control: "ui7-form-control",
+  controlReadonly: "ui7-form-control--readonly",
+  helper: "ui7-form-helper",
+  readonlyValue: "ui7-form-readonly-value"
+};
+function P(e, a = "compact") {
+  return e === "compact" ? "compact" : e === "comfortable" || e === "normal" ? "comfortable" : a;
+}
+function M(e, a = "compact") {
+  return P(e, a) === "compact" ? i.densityCompact : i.densityComfortable;
+}
+function R(e) {
+  switch (e) {
+    case "half":
+      return i.widthHalf;
+    case "full":
+      return i.widthFull;
+    case "two-thirds":
+    default:
+      return i.widthTwoThirds;
+  }
+}
+function _(e) {
+  const a = [i.scope];
+  return (e == null ? void 0 : e.density) !== void 0 && a.push(M(e.density)), a.push(R(e == null ? void 0 : e.width)), e != null && e.readonly && a.push(i.readonly), e != null && e.className && a.push(e.className), a.join(" ");
+}
+function Y() {
+  const { theme: e } = l(), a = P(e.tokens.density ?? "compact"), t = a === "compact" ? i.densityCompact : i.densityComfortable;
+  return {
+    density: a,
+    densityClassName: t,
+    scopeClassName: _({ density: a }),
+    classNames: i,
+    tokens: j
+  };
+}
+export {
+  K as CorporateTheme,
+  W as GlobalCorporateTheme,
+  L as LabelsProvider,
+  x as ThemeContextProvider,
+  N as ThemeProvider,
+  q as ThemeSwitcher,
+  f as corporateThemes,
+  C as defaultLabels,
+  O as useBrandColors,
+  Q as useCorporateFeatures,
+  X as useDensity,
+  Y as useFormVisualContract,
+  z as useLabels,
+  l as useTheme,
+  I as useThemeTokens,
+  J as useThemeVariant
+};

package/dist/labels.d.ts

@@ -0,0 +1,41 @@
+export interface Ui7Labels {
+    rowsPerPage: string;
+    search: string;
+    noData: string;
+    loading: string;
+    nextPage: string;
+    prevPage: string;
+    firstPage: string;
+    lastPage: string;
+    filterColumns: string;
+    lookupPlaceholder: string;
+    lookupNoResults: string;
+    lookupLoading: string;
+    addRow: string;
+    deleteRow: string;
+    editableNoData: string;
+    modalClose: string;
+    modalCancel: string;
+    notifications: string;
+    markAllRead: string;
+    noNotifications: string;
+    apps: string;
+    required: string;
+    profile: string;
+    changePassword: string;
+    logout: string;
+    searchMenuPlaceholder: string;
+    searchMenuAriaLabel: string;
+    openSearchNavigationButtonAriaLabel: string;
+    clearSearchAriaLabel: string;
+    removeFavoriteAriaLabel: string;
+    addFavoriteAriaLabel: string;
+    favoritesTitle: string;
+    appSwitcherButtonAriaLabel: string;
+    profileButtonAriaLabel: string;
+    notificationsButtonAriaLabel: string;
+    notificationsUnreadSuffix: string;
+    branchLabel: string;
+    viewAll: string;
+}
+export declare const defaultLabels: Ui7Labels;