@isi-ui7/corporate-themes 0.2.0 → 0.2.1

package/dist/LabelsContext.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { Ui7Labels } from './labels';
+
+export declare function LabelsProvider({ labels, children, }: {
+    labels?: Partial<Ui7Labels>;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useLabels(): Ui7Labels;

package/dist/components/CorporateTheme.d.ts

@@ -1,5 +1,6 @@
 import { ElementType, ReactElement, ReactNode } from 'react';
 import { CarbonThemeVariant } from '../types';
+import { Ui7Labels } from '../labels';
 
 type CorporateThemeProps<T extends ElementType> = {
     as?: T;
@@ -11,6 +12,7 @@ type CorporateThemeProps<T extends ElementType> = {
 type GlobalCorporateThemeProps = {
     corporateId?: string;
     variant?: CarbonThemeVariant;
+    labels?: Partial<Ui7Labels>;
     children: ReactElement;
 };
 /**
@@ -22,5 +24,5 @@ export declare function CorporateTheme<T extends ElementType = "div">({ as, clas
  * Global theme provider, analogous to Carbon's <GlobalTheme>.
  * It sets the corporate/variant in context (and root classes via ThemeContextProvider).
  */
-export declare function GlobalCorporateTheme({ corporateId, variant, children }: GlobalCorporateThemeProps): import("react/jsx-runtime").JSX.Element;
+export declare function GlobalCorporateTheme({ corporateId, variant, labels, children }: GlobalCorporateThemeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 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';

package/dist/index.js

@@ -1,6 +1,6 @@
-import { jsx as i, jsxs as k } from "react/jsx-runtime";
-import { useMemo as h, useState as b, useEffect as g, createContext as f, useContext as A } from "react";
-const E = {
+import { jsx as n, jsxs as P } from "react/jsx-runtime";
+import { useContext as F, createContext as p, useMemo as k, useState as f, useEffect as C } from "react";
+const H = {
   brandColors: {
     primary: "#0F62FE",
     primaryHover: "#0043CE",
@@ -31,7 +31,7 @@ const E = {
   headerBackground: "#0F62FE",
   sidebarBackground: "#393939",
   navigationBackground: "#F4F4F4"
-}, H = {
+}, B = {
   brandColors: {
     primary: "#0066CC",
     // BCA Blue
@@ -70,7 +70,7 @@ const E = {
   headerBackground: "#0066CC",
   sidebarBackground: "#00A651",
   navigationBackground: "#F5F5F5"
-}, B = {
+}, D = {
   brandColors: {
     primary: "#C8102E",
     // BJB Red (main brand color)
@@ -104,7 +104,7 @@ const E = {
   headerBackground: "#C8102E",
   sidebarBackground: "#8B0000",
   navigationBackground: "#FFF5F5"
-}, P = {
+}, S = {
   brandColors: {
     primary: "#ED1C24",
     primaryHover: "#C61018",
@@ -135,7 +135,7 @@ const E = {
   headerBackground: "#ED1C24",
   sidebarBackground: "#FF7F00",
   navigationBackground: "#FFF4E6"
-}, D = {
+}, T = {
   brandColors: {
     primary: "#0F62FE",
     primaryHover: "#0043CE",
@@ -171,7 +171,7 @@ const E = {
     id: "carbon-default",
     name: "carbon-default",
     displayName: "ISI",
-    tokens: E,
+    tokens: H,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   },
@@ -179,7 +179,7 @@ const E = {
     id: "ihsan",
     name: "ihsan",
     displayName: "ISI",
-    tokens: D,
+    tokens: T,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   },
@@ -187,7 +187,7 @@ const E = {
     id: "bca-syariah",
     name: "bca-syariah",
     displayName: "BCAS",
-    tokens: H,
+    tokens: B,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   },
@@ -195,7 +195,7 @@ const E = {
     id: "bjb-syariah",
     name: "bjb-syariah",
     displayName: "BJBS",
-    tokens: B,
+    tokens: D,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g90"
   },
@@ -203,127 +203,164 @@ const E = {
     id: "pos-indonesia",
     name: "pos-indonesia",
     displayName: "PosInd",
-    tokens: P,
+    tokens: S,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   }
-], F = f(null);
-function p(e) {
-  const t = m.find((a) => a.id === "carbon-default") ?? m.find((a) => a.id === "ihsan") ?? m[0];
-  return e ? m.find((a) => a.id === e) ?? t : t;
+], b = {
+  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"
+}, A = p(b);
+function V({
+  labels: e,
+  children: r
+}) {
+  const t = e ? { ...b, ...e } : b;
+  return /* @__PURE__ */ n(A.Provider, { value: t, children: r });
+}
+function U() {
+  return F(A);
 }
-function S({ corporateId: e, variant: t, children: a }) {
-  const r = h(() => p(e), [e]), [d, v] = b(
-    t ?? r.defaultVariant
+const h = p(null);
+function E(e) {
+  const r = m.find((t) => t.id === "carbon-default") ?? m.find((t) => t.id === "ihsan") ?? m[0];
+  return e ? m.find((t) => t.id === e) ?? r : r;
+}
+function w({ corporateId: e, variant: r, children: t }) {
+  const a = k(() => E(e), [e]), [d, v] = f(
+    r ?? a.defaultVariant
   );
-  g(() => {
-    t && r.supportedVariants.includes(t) && v(t);
-  }, [t, r]), g(() => {
+  C(() => {
+    r && a.supportedVariants.includes(r) && v(r);
+  }, [r, a]), C(() => {
     if (typeof document > "u") return;
     const u = document.documentElement, o = document.body;
     m.flatMap(
-      (s) => s.supportedVariants.map((C) => `platform-theme-${s.id}-${C}`)
+      (s) => s.supportedVariants.map((g) => `platform-theme-${s.id}-${g}`)
     ).forEach((s) => {
       u.classList.remove(s), o.classList.remove(s);
     });
-    const n = `platform-theme-${r.id}-${d}`;
-    return u.classList.add(n), o.classList.add(n), () => {
-      u.classList.remove(n), o.classList.remove(n);
+    const i = `platform-theme-${a.id}-${d}`;
+    return u.classList.add(i), o.classList.add(i), () => {
+      u.classList.remove(i), o.classList.remove(i);
     };
-  }, [r, d]);
+  }, [a, d]);
   const l = {
-    theme: r,
+    theme: a,
     variant: d,
-    corporateId: r.id,
+    corporateId: a.id,
     setVariant: v
   };
-  return /* @__PURE__ */ i(F.Provider, { value: l, children: a });
+  return /* @__PURE__ */ n(h.Provider, { value: l, children: t });
 }
 function c() {
-  const e = A(F);
+  const e = F(h);
   if (!e)
     throw new Error("useTheme must be used inside ThemeProvider");
   return e;
 }
-function V({ corporateId: e, variant: t, children: a }) {
-  return /* @__PURE__ */ i(S, { corporateId: e, variant: t, children: a });
+function x({ corporateId: e, variant: r, children: t }) {
+  return /* @__PURE__ */ n(w, { corporateId: e, variant: r, children: t });
 }
-function j({
+function $({
   as: e,
-  className: t,
-  corporateId: a,
-  variant: r,
+  className: r,
+  corporateId: t,
+  variant: a,
   children: d,
   ...v
 }) {
-  const l = c(), u = e ?? "div", o = h(
-    () => a ? p(a) : l.theme,
-    [a, l.theme]
-  ), [y, n] = b(
-    r ?? l.variant ?? o.defaultVariant
+  const l = c(), u = e ?? "div", o = k(
+    () => t ? E(t) : l.theme,
+    [t, l.theme]
+  ), [y, i] = f(
+    a ?? l.variant ?? o.defaultVariant
   );
-  g(() => {
-    r && o.supportedVariants.includes(r) ? n(r) : r || n(o.defaultVariant);
-  }, [r, o]);
+  C(() => {
+    a && o.supportedVariants.includes(a) ? i(a) : a || i(o.defaultVariant);
+  }, [a, o]);
   const s = {
     theme: o,
     variant: y,
     corporateId: o.id,
-    setVariant: n
-  }, C = [t, `platform-theme-${o.id}-${y}`].filter(Boolean).join(" ");
-  return /* @__PURE__ */ i(F.Provider, { value: s, children: /* @__PURE__ */ i(u, { className: C, ...v, children: d }) });
+    setVariant: i
+  }, g = [r, `platform-theme-${o.id}-${y}`].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(h.Provider, { value: s, children: /* @__PURE__ */ n(u, { className: g, ...v, children: d }) });
 }
-function N({ corporateId: e, variant: t, children: a }) {
-  return /* @__PURE__ */ i(V, { corporateId: e, variant: t, children: a });
+function M({ corporateId: e, variant: r, labels: t, children: a }) {
+  return /* @__PURE__ */ n(V, { labels: t, children: /* @__PURE__ */ n(x, { corporateId: e, variant: r, children: a }) });
 }
-const T = ["white", "g10", "g90", "g100"];
-function U() {
-  const { variant: e, setVariant: t, theme: a } = c();
-  return /* @__PURE__ */ k("div", { style: { display: "inline-flex", gap: "0.5rem", alignItems: "center" }, children: [
-    /* @__PURE__ */ i("span", { style: { fontSize: "0.85rem" }, children: a.displayName }),
-    /* @__PURE__ */ i(
+const I = ["white", "g10", "g90", "g100"];
+function R() {
+  const { variant: e, setVariant: r, theme: t } = c();
+  return /* @__PURE__ */ P("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) => t(r.target.value),
-        children: T.map((r) => /* @__PURE__ */ i("option", { value: r, children: r.toUpperCase() }, r))
+        onChange: (a) => r(a.target.value),
+        children: I.map((a) => /* @__PURE__ */ n("option", { value: a, children: a.toUpperCase() }, a))
       }
     )
   ] });
 }
-function I() {
+function L() {
   const { theme: e } = c();
   return e.tokens;
 }
-function L() {
-  return I().brandColors;
+function K() {
+  return L().brandColors;
 }
-function $() {
-  const { variant: e, setVariant: t } = c();
-  return { variant: e, setVariant: t };
+function q() {
+  const { variant: e, setVariant: r } = c();
+  return { variant: e, setVariant: r };
 }
-function M() {
+function z() {
   const { theme: e } = c();
   return {
     logo: e.tokens.logoUrl,
     brandColors: e.tokens.brandColors
   };
 }
-function z() {
+function G() {
   const { theme: e } = c();
   return e.tokens.density ?? "compact";
 }
 export {
-  j as CorporateTheme,
-  N as GlobalCorporateTheme,
-  S as ThemeContextProvider,
-  V as ThemeProvider,
-  U as ThemeSwitcher,
+  $ as CorporateTheme,
+  M as GlobalCorporateTheme,
+  V as LabelsProvider,
+  w as ThemeContextProvider,
+  x as ThemeProvider,
+  R as ThemeSwitcher,
   m as corporateThemes,
-  L as useBrandColors,
-  M as useCorporateFeatures,
-  z as useDensity,
+  b as defaultLabels,
+  K as useBrandColors,
+  z as useCorporateFeatures,
+  G as useDensity,
+  U as useLabels,
   c as useTheme,
-  I as useThemeTokens,
-  $ as useThemeVariant
+  L as useThemeTokens,
+  q as useThemeVariant
 };

package/dist/labels.d.ts

@@ -0,0 +1,25 @@
+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;
+}
+export declare const defaultLabels: Ui7Labels;