@isi-ui7/corporate-themes 0.2.0 → 0.2.2

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 S } from "react/jsx-runtime";
+import { useContext as h, createContext as F, useMemo as k, useState as A, useEffect as C } from "react";
+const B = {
   brandColors: {
     primary: "#0F62FE",
     primaryHover: "#0043CE",
@@ -31,7 +31,7 @@ const E = {
   headerBackground: "#0F62FE",
   sidebarBackground: "#393939",
   navigationBackground: "#F4F4F4"
-}, H = {
+}, D = {
   brandColors: {
     primary: "#0066CC",
     // BCA Blue
@@ -70,7 +70,7 @@ const E = {
   headerBackground: "#0066CC",
   sidebarBackground: "#00A651",
   navigationBackground: "#F5F5F5"
-}, B = {
+}, T = {
   brandColors: {
     primary: "#C8102E",
     // BJB Red (main brand color)
@@ -104,7 +104,7 @@ const E = {
   headerBackground: "#C8102E",
   sidebarBackground: "#8B0000",
   navigationBackground: "#FFF5F5"
-}, P = {
+}, V = {
   brandColors: {
     primary: "#ED1C24",
     primaryHover: "#C61018",
@@ -135,7 +135,7 @@ const E = {
   headerBackground: "#ED1C24",
   sidebarBackground: "#FF7F00",
   navigationBackground: "#FFF4E6"
-}, D = {
+}, L = {
   brandColors: {
     primary: "#0F62FE",
     primaryHover: "#0043CE",
@@ -166,12 +166,12 @@ const E = {
   headerBackground: "#0F62FE",
   sidebarBackground: "#1192E8",
   navigationBackground: "#F4F7FF"
-}, m = [
+}, y = [
   {
     id: "carbon-default",
     name: "carbon-default",
     displayName: "ISI",
-    tokens: E,
+    tokens: B,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   },
@@ -179,7 +179,7 @@ const E = {
     id: "ihsan",
     name: "ihsan",
     displayName: "ISI",
-    tokens: D,
+    tokens: L,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   },
@@ -187,7 +187,7 @@ const E = {
     id: "bca-syariah",
     name: "bca-syariah",
     displayName: "BCAS",
-    tokens: H,
+    tokens: D,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   },
@@ -195,7 +195,7 @@ const E = {
     id: "bjb-syariah",
     name: "bjb-syariah",
     displayName: "BJBS",
-    tokens: B,
+    tokens: T,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g90"
   },
@@ -203,127 +203,228 @@ const E = {
     id: "pos-indonesia",
     name: "pos-indonesia",
     displayName: "PosInd",
-    tokens: P,
+    tokens: V,
     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",
+  profile: "Profil Saya",
+  changePassword: "Ganti Password",
+  logout: "Keluar",
+  searchMenuPlaceholder: "Cari menu...",
+  searchMenuAriaLabel: "Cari menu navigasi",
+  clearSearchAriaLabel: "Hapus pencarian",
+  removeFavoriteAriaLabel: "Hapus favorit",
+  addFavoriteAriaLabel: "Tandai favorit",
+  profileButtonAriaLabel: "Profil pengguna",
+  notificationsButtonAriaLabel: "Notifikasi",
+  notificationsUnreadSuffix: "belum dibaca",
+  branchLabel: "Cabang",
+  viewAll: "Lihat semua"
+}, E = F(b);
+function x({
+  labels: e,
+  children: a
+}) {
+  const t = e ? { ...b, ...e } : b;
+  return /* @__PURE__ */ n(E.Provider, { value: t, children: a });
+}
+function G() {
+  return h(E);
+}
+const p = F(null);
+function P(e) {
+  const a = y.find((t) => t.id === "carbon-default") ?? y.find((t) => t.id === "ihsan") ?? y[0];
+  return e ? y.find((t) => t.id === e) ?? a : a;
 }
-function S({ corporateId: e, variant: t, children: a }) {
-  const r = h(() => p(e), [e]), [d, v] = b(
-    t ?? r.defaultVariant
+function N({ corporateId: e, variant: a, children: t }) {
+  const r = k(() => P(e), [e]), [d, v] = A(
+    a ?? r.defaultVariant
   );
-  g(() => {
-    t && r.supportedVariants.includes(t) && v(t);
-  }, [t, r]), g(() => {
+  C(() => {
+    a && r.supportedVariants.includes(a) && v(a);
+  }, [a, r]), 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}`)
+    const m = document.documentElement, o = document.body;
+    y.flatMap(
+      (s) => s.supportedVariants.map((g) => `platform-theme-${s.id}-${g}`)
     ).forEach((s) => {
-      u.classList.remove(s), o.classList.remove(s);
+      m.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-${r.id}-${d}`;
+    return m.classList.add(i), o.classList.add(i), () => {
+      m.classList.remove(i), o.classList.remove(i);
     };
   }, [r, d]);
-  const l = {
+  const u = {
     theme: r,
     variant: d,
     corporateId: r.id,
     setVariant: v
   };
-  return /* @__PURE__ */ i(F.Provider, { value: l, children: a });
+  return /* @__PURE__ */ n(p.Provider, { value: u, children: t });
 }
-function c() {
-  const e = A(F);
+function l() {
+  const e = h(p);
   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 w({ corporateId: e, variant: a, children: t }) {
+  return /* @__PURE__ */ n(N, { corporateId: e, variant: a, children: t });
 }
-function j({
+function z({
   as: e,
-  className: t,
-  corporateId: a,
+  className: a,
+  corporateId: t,
   variant: r,
   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 u = l(), m = e ?? "div", o = k(
+    () => t ? P(t) : u.theme,
+    [t, u.theme]
+  ), [f, i] = A(
+    r ?? u.variant ?? o.defaultVariant
   );
-  g(() => {
-    r && o.supportedVariants.includes(r) ? n(r) : r || n(o.defaultVariant);
+  C(() => {
+    r && o.supportedVariants.includes(r) ? i(r) : r || i(o.defaultVariant);
   }, [r, o]);
   const s = {
     theme: o,
-    variant: y,
+    variant: f,
     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 = [a, `platform-theme-${o.id}-${f}`].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(p.Provider, { value: s, children: /* @__PURE__ */ n(m, { className: g, ...v, children: d }) });
 }
-function N({ corporateId: e, variant: t, children: a }) {
-  return /* @__PURE__ */ i(V, { corporateId: e, variant: t, children: a });
+function K({ corporateId: e, variant: a, labels: t, children: r }) {
+  return /* @__PURE__ */ n(x, { labels: t, children: /* @__PURE__ */ n(w, { corporateId: e, variant: a, children: r }) });
 }
-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 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) => t(r.target.value),
-        children: T.map((r) => /* @__PURE__ */ i("option", { value: r, children: r.toUpperCase() }, r))
+        onChange: (r) => a(r.target.value),
+        children: I.map((r) => /* @__PURE__ */ n("option", { value: r, children: r.toUpperCase() }, r))
       }
     )
   ] });
 }
-function I() {
-  const { theme: e } = c();
+function U() {
+  const { theme: e } = l();
   return e.tokens;
 }
-function L() {
-  return I().brandColors;
+function O() {
+  return U().brandColors;
 }
-function $() {
-  const { variant: e, setVariant: t } = c();
-  return { variant: e, setVariant: t };
+function W() {
+  const { variant: e, setVariant: a } = l();
+  return { variant: e, setVariant: a };
 }
-function M() {
-  const { theme: e } = c();
+function J() {
+  const { theme: e } = l();
   return {
     logo: e.tokens.logoUrl,
     brandColors: e.tokens.brandColors
   };
 }
-function z() {
-  const { theme: e } = c();
-  return e.tokens.density ?? "compact";
+function Q() {
+  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"
+}, c = {
+  scope: "ui7-form-contract",
+  densityCompact: "ui7-form-contract--density-compact",
+  densityComfortable: "ui7-form-contract--density-comfortable",
+  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 H(e, a = "compact") {
+  return e === "compact" ? "compact" : e === "comfortable" || e === "normal" ? "comfortable" : a;
+}
+function M(e, a = "compact") {
+  return H(e, a) === "compact" ? c.densityCompact : c.densityComfortable;
+}
+function R(e) {
+  const a = [c.scope];
+  return (e == null ? void 0 : e.density) !== void 0 && a.push(M(e.density)), e != null && e.readonly && a.push(c.readonly), e != null && e.className && a.push(e.className), a.join(" ");
+}
+function X() {
+  const { theme: e } = l(), a = H(e.tokens.density ?? "compact"), t = a === "compact" ? c.densityCompact : c.densityComfortable;
+  return {
+    density: a,
+    densityClassName: t,
+    scopeClassName: R({ density: a }),
+    classNames: c,
+    tokens: j
+  };
 }
 export {
-  j as CorporateTheme,
-  N as GlobalCorporateTheme,
-  S as ThemeContextProvider,
-  V as ThemeProvider,
-  U as ThemeSwitcher,
-  m as corporateThemes,
-  L as useBrandColors,
-  M as useCorporateFeatures,
-  z as useDensity,
-  c as useTheme,
-  I as useThemeTokens,
-  $ as useThemeVariant
+  z as CorporateTheme,
+  K as GlobalCorporateTheme,
+  x as LabelsProvider,
+  N as ThemeContextProvider,
+  w as ThemeProvider,
+  q as ThemeSwitcher,
+  y as corporateThemes,
+  b as defaultLabels,
+  O as useBrandColors,
+  J as useCorporateFeatures,
+  Q as useDensity,
+  X as useFormVisualContract,
+  G as useLabels,
+  l as useTheme,
+  U as useThemeTokens,
+  W as useThemeVariant
 };

package/dist/labels.d.ts

@@ -0,0 +1,38 @@
+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;
+    clearSearchAriaLabel: string;
+    removeFavoriteAriaLabel: string;
+    addFavoriteAriaLabel: string;
+    profileButtonAriaLabel: string;
+    notificationsButtonAriaLabel: string;
+    notificationsUnreadSuffix: string;
+    branchLabel: string;
+    viewAll: string;
+}
+export declare const defaultLabels: Ui7Labels;