@isi-ui7/corporate-themes 0.2.1 → 0.2.3

package/dist/index.js

@@ -1,6 +1,6 @@
-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 = {
+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 H = {
   headerBackground: "#0F62FE",
   sidebarBackground: "#393939",
   navigationBackground: "#F4F4F4"
-}, B = {
+}, D = {
   brandColors: {
     primary: "#0066CC",
     // BCA Blue
@@ -70,7 +70,7 @@ const H = {
   headerBackground: "#0066CC",
   sidebarBackground: "#00A651",
   navigationBackground: "#F5F5F5"
-}, D = {
+}, T = {
   brandColors: {
     primary: "#C8102E",
     // BJB Red (main brand color)
@@ -104,7 +104,7 @@ const H = {
   headerBackground: "#C8102E",
   sidebarBackground: "#8B0000",
   navigationBackground: "#FFF5F5"
-}, S = {
+}, V = {
   brandColors: {
     primary: "#ED1C24",
     primaryHover: "#C61018",
@@ -135,7 +135,7 @@ const H = {
   headerBackground: "#ED1C24",
   sidebarBackground: "#FF7F00",
   navigationBackground: "#FFF4E6"
-}, T = {
+}, L = {
   brandColors: {
     primary: "#0F62FE",
     primaryHover: "#0043CE",
@@ -166,12 +166,12 @@ const H = {
   headerBackground: "#0F62FE",
   sidebarBackground: "#1192E8",
   navigationBackground: "#F4F7FF"
-}, m = [
+}, y = [
   {
     id: "carbon-default",
     name: "carbon-default",
     displayName: "ISI",
-    tokens: H,
+    tokens: B,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   },
@@ -179,7 +179,7 @@ const H = {
     id: "ihsan",
     name: "ihsan",
     displayName: "ISI",
-    tokens: T,
+    tokens: L,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   },
@@ -187,7 +187,7 @@ const H = {
     id: "bca-syariah",
     name: "bca-syariah",
     displayName: "BCAS",
-    tokens: B,
+    tokens: D,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   },
@@ -195,7 +195,7 @@ const H = {
     id: "bjb-syariah",
     name: "bjb-syariah",
     displayName: "BJBS",
-    tokens: D,
+    tokens: T,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g90"
   },
@@ -203,7 +203,7 @@ const H = {
     id: "pos-indonesia",
     name: "pos-indonesia",
     displayName: "PosInd",
-    tokens: S,
+    tokens: V,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   }
@@ -229,138 +229,202 @@ const H = {
   markAllRead: "Tandai Semua Dibaca",
   noNotifications: "Tidak ada notifikasi",
   apps: "Aplikasi",
-  required: "Wajib diisi"
-}, A = p(b);
-function V({
+  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: r
+  children: a
 }) {
   const t = e ? { ...b, ...e } : b;
-  return /* @__PURE__ */ n(A.Provider, { value: t, children: r });
+  return /* @__PURE__ */ n(E.Provider, { value: t, children: a });
 }
-function U() {
-  return F(A);
+function G() {
+  return h(E);
 }
-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;
+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 w({ corporateId: e, variant: r, children: t }) {
-  const a = k(() => E(e), [e]), [d, v] = f(
-    r ?? a.defaultVariant
+function N({ corporateId: e, variant: a, children: t }) {
+  const r = k(() => P(e), [e]), [d, v] = A(
+    a ?? r.defaultVariant
   );
   C(() => {
-    r && a.supportedVariants.includes(r) && v(r);
-  }, [r, a]), 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(
+    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 i = `platform-theme-${a.id}-${d}`;
-    return u.classList.add(i), o.classList.add(i), () => {
-      u.classList.remove(i), o.classList.remove(i);
+    const i = `platform-theme-${r.id}-${d}`;
+    return m.classList.add(i), o.classList.add(i), () => {
+      m.classList.remove(i), o.classList.remove(i);
     };
-  }, [a, d]);
-  const l = {
-    theme: a,
+  }, [r, d]);
+  const u = {
+    theme: r,
     variant: d,
-    corporateId: a.id,
+    corporateId: r.id,
     setVariant: v
   };
-  return /* @__PURE__ */ n(h.Provider, { value: l, children: t });
+  return /* @__PURE__ */ n(p.Provider, { value: u, children: t });
 }
-function c() {
-  const e = F(h);
+function l() {
+  const e = h(p);
   if (!e)
     throw new Error("useTheme must be used inside ThemeProvider");
   return e;
 }
-function x({ corporateId: e, variant: r, children: t }) {
-  return /* @__PURE__ */ n(w, { corporateId: e, variant: r, children: t });
+function w({ corporateId: e, variant: a, children: t }) {
+  return /* @__PURE__ */ n(N, { corporateId: e, variant: a, children: t });
 }
-function $({
+function z({
   as: e,
-  className: r,
+  className: a,
   corporateId: t,
-  variant: a,
+  variant: r,
   children: d,
   ...v
 }) {
-  const l = c(), u = e ?? "div", o = k(
-    () => t ? E(t) : l.theme,
-    [t, l.theme]
-  ), [y, i] = f(
-    a ?? 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
   );
   C(() => {
-    a && o.supportedVariants.includes(a) ? i(a) : a || i(o.defaultVariant);
-  }, [a, o]);
+    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: 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 }) });
+  }, 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 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 }) });
+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 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: [
+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: (a) => r(a.target.value),
-        children: I.map((a) => /* @__PURE__ */ n("option", { value: a, children: a.toUpperCase() }, a))
+        onChange: (r) => a(r.target.value),
+        children: I.map((r) => /* @__PURE__ */ n("option", { value: r, children: r.toUpperCase() }, r))
       }
     )
   ] });
 }
-function L() {
-  const { theme: e } = c();
+function U() {
+  const { theme: e } = l();
   return e.tokens;
 }
-function K() {
-  return L().brandColors;
+function O() {
+  return U().brandColors;
 }
-function q() {
-  const { variant: e, setVariant: r } = c();
-  return { variant: e, setVariant: r };
+function W() {
+  const { variant: e, setVariant: a } = l();
+  return { variant: e, setVariant: a };
 }
-function z() {
-  const { theme: e } = c();
+function J() {
+  const { theme: e } = l();
   return {
     logo: e.tokens.logoUrl,
     brandColors: e.tokens.brandColors
   };
 }
-function G() {
-  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 {
-  $ as CorporateTheme,
-  M as GlobalCorporateTheme,
-  V as LabelsProvider,
-  w as ThemeContextProvider,
-  x as ThemeProvider,
-  R as ThemeSwitcher,
-  m as corporateThemes,
+  z as CorporateTheme,
+  K as GlobalCorporateTheme,
+  x as LabelsProvider,
+  N as ThemeContextProvider,
+  w as ThemeProvider,
+  q as ThemeSwitcher,
+  y as corporateThemes,
   b as defaultLabels,
-  K as useBrandColors,
-  z as useCorporateFeatures,
-  G as useDensity,
-  U as useLabels,
-  c as useTheme,
-  L as useThemeTokens,
-  q as useThemeVariant
+  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

@@ -21,5 +21,18 @@ export interface Ui7Labels {
     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;