@isi-ui7/corporate-themes 0.2.2 → 0.2.4

package/dist/globals.css

@@ -174,10 +174,20 @@ body {
 
 .ui7-form-contract--density-compact {
   --ui7-form-density: compact;
+  --ui7-form-control-height: 2rem;
+  --cds-layout-size-height-sm: 2rem;
+  --cds-layout-size-height-md: 2rem;
+  --cds-layout-size-height-lg: 2rem;
+  --cds-layout-size-height: 2rem;
 }
 
 .ui7-form-contract--density-comfortable {
   --ui7-form-density: comfortable;
+  --ui7-form-control-height: 2.5rem;
+  --cds-layout-size-height-sm: 2.5rem;
+  --cds-layout-size-height-md: 2.5rem;
+  --cds-layout-size-height-lg: 2.5rem;
+  --cds-layout-size-height: 2.5rem;
 }
 
 .ui7-form-row {

package/dist/hooks/useFormVisualContract.d.ts

@@ -8,6 +8,9 @@ export declare function useFormVisualContract(): {
         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";

package/dist/index.js

@@ -1,5 +1,5 @@
 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";
+import { useContext as p, createContext as F, useMemo as k, useState as A, useEffect as g } from "react";
 const B = {
   brandColors: {
     primary: "#0F62FE",
@@ -70,7 +70,7 @@ const B = {
   headerBackground: "#0066CC",
   sidebarBackground: "#00A651",
   navigationBackground: "#F5F5F5"
-}, T = {
+}, w = {
   brandColors: {
     primary: "#C8102E",
     // BJB Red (main brand color)
@@ -104,7 +104,7 @@ const B = {
   headerBackground: "#C8102E",
   sidebarBackground: "#8B0000",
   navigationBackground: "#FFF5F5"
-}, V = {
+}, T = {
   brandColors: {
     primary: "#ED1C24",
     primaryHover: "#C61018",
@@ -135,7 +135,7 @@ const B = {
   headerBackground: "#ED1C24",
   sidebarBackground: "#FF7F00",
   navigationBackground: "#FFF4E6"
-}, L = {
+}, V = {
   brandColors: {
     primary: "#0F62FE",
     primaryHover: "#0043CE",
@@ -166,7 +166,7 @@ const B = {
   headerBackground: "#0F62FE",
   sidebarBackground: "#1192E8",
   navigationBackground: "#F4F7FF"
-}, y = [
+}, f = [
   {
     id: "carbon-default",
     name: "carbon-default",
@@ -179,7 +179,7 @@ const B = {
     id: "ihsan",
     name: "ihsan",
     displayName: "ISI",
-    tokens: L,
+    tokens: V,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   },
@@ -195,7 +195,7 @@ const B = {
     id: "bjb-syariah",
     name: "bjb-syariah",
     displayName: "BJBS",
-    tokens: T,
+    tokens: w,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g90"
   },
@@ -203,11 +203,11 @@ const B = {
     id: "pos-indonesia",
     name: "pos-indonesia",
     displayName: "PosInd",
-    tokens: V,
+    tokens: T,
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   }
-], b = {
+], C = {
   rowsPerPage: "Tampil",
   search: "Cari",
   noData: "Tidak ada data",
@@ -233,49 +233,52 @@ const B = {
   profile: "Profil Saya",
   changePassword: "Ganti Password",
   logout: "Keluar",
-  searchMenuPlaceholder: "Cari menu...",
-  searchMenuAriaLabel: "Cari menu navigasi",
+  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(b);
-function x({
+}, E = F(C);
+function L({
   labels: e,
   children: a
 }) {
-  const t = e ? { ...b, ...e } : b;
+  const t = e ? { ...C, ...e } : C;
   return /* @__PURE__ */ n(E.Provider, { value: t, children: a });
 }
-function G() {
-  return h(E);
+function z() {
+  return p(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;
+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 N({ corporateId: e, variant: a, children: t }) {
-  const r = k(() => P(e), [e]), [d, v] = A(
+function x({ corporateId: e, variant: a, children: t }) {
+  const r = k(() => H(e), [e]), [d, v] = A(
     a ?? r.defaultVariant
   );
-  C(() => {
+  g(() => {
     a && r.supportedVariants.includes(a) && v(a);
-  }, [a, r]), C(() => {
+  }, [a, r]), g(() => {
     if (typeof document > "u") return;
     const m = document.documentElement, o = document.body;
-    y.flatMap(
-      (s) => s.supportedVariants.map((g) => `platform-theme-${s.id}-${g}`)
-    ).forEach((s) => {
-      m.classList.remove(s), o.classList.remove(s);
+    f.flatMap(
+      (c) => c.supportedVariants.map((h) => `platform-theme-${c.id}-${h}`)
+    ).forEach((c) => {
+      m.classList.remove(c), o.classList.remove(c);
     });
-    const i = `platform-theme-${r.id}-${d}`;
-    return m.classList.add(i), o.classList.add(i), () => {
-      m.classList.remove(i), o.classList.remove(i);
+    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 = {
@@ -284,18 +287,18 @@ function N({ corporateId: e, variant: a, children: t }) {
     corporateId: r.id,
     setVariant: v
   };
-  return /* @__PURE__ */ n(p.Provider, { value: u, children: t });
+  return /* @__PURE__ */ n(b.Provider, { value: u, children: t });
 }
 function l() {
-  const e = h(p);
+  const e = p(b);
   if (!e)
     throw new Error("useTheme must be used inside ThemeProvider");
   return e;
 }
-function w({ corporateId: e, variant: a, children: t }) {
-  return /* @__PURE__ */ n(N, { corporateId: e, variant: a, children: t });
+function N({ corporateId: e, variant: a, children: t }) {
+  return /* @__PURE__ */ n(x, { corporateId: e, variant: a, children: t });
 }
-function z({
+function K({
   as: e,
   className: a,
   corporateId: t,
@@ -304,26 +307,26 @@ function z({
   ...v
 }) {
   const u = l(), m = e ?? "div", o = k(
-    () => t ? P(t) : u.theme,
+    () => t ? H(t) : u.theme,
     [t, u.theme]
-  ), [f, i] = A(
+  ), [y, s] = A(
     r ?? u.variant ?? o.defaultVariant
   );
-  C(() => {
-    r && o.supportedVariants.includes(r) ? i(r) : r || i(o.defaultVariant);
+  g(() => {
+    r && o.supportedVariants.includes(r) ? s(r) : r || s(o.defaultVariant);
   }, [r, o]);
-  const s = {
+  const c = {
     theme: o,
-    variant: f,
+    variant: y,
     corporateId: o.id,
-    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 }) });
+    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 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 }) });
+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 I = ["white", "g10", "g90", "g100"];
+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: [
@@ -333,30 +336,30 @@ function q() {
       {
         value: e,
         onChange: (r) => a(r.target.value),
-        children: I.map((r) => /* @__PURE__ */ n("option", { value: r, children: r.toUpperCase() }, r))
+        children: U.map((r) => /* @__PURE__ */ n("option", { value: r, children: r.toUpperCase() }, r))
       }
     )
   ] });
 }
-function U() {
+function I() {
   const { theme: e } = l();
   return e.tokens;
 }
 function O() {
-  return U().brandColors;
+  return I().brandColors;
 }
-function W() {
+function J() {
   const { variant: e, setVariant: a } = l();
   return { variant: e, setVariant: a };
 }
-function J() {
+function Q() {
   const { theme: e } = l();
   return {
     logo: e.tokens.logoUrl,
     brandColors: e.tokens.brandColors
   };
 }
-function Q() {
+function X() {
   const { theme: e } = l();
   return e.tokens.density === "normal" ? "normal" : "compact";
 }
@@ -375,10 +378,13 @@ const j = {
   columnGap: "16px",
   readonlyBackground: "#f4f4f4",
   readonlyCursor: "default"
-}, c = {
+}, 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",
@@ -390,41 +396,52 @@ const j = {
   helper: "ui7-form-helper",
   readonlyValue: "ui7-form-readonly-value"
 };
-function H(e, a = "compact") {
+function P(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;
+  return P(e, a) === "compact" ? i.densityCompact : i.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(" ");
+  switch (e) {
+    case "half":
+      return i.widthHalf;
+    case "full":
+      return i.widthFull;
+    case "two-thirds":
+    default:
+      return i.widthTwoThirds;
+  }
 }
-function X() {
-  const { theme: e } = l(), a = H(e.tokens.density ?? "compact"), t = a === "compact" ? c.densityCompact : c.densityComfortable;
+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: R({ density: a }),
-    classNames: c,
+    scopeClassName: _({ density: a }),
+    classNames: i,
     tokens: j
   };
 }
 export {
-  z as CorporateTheme,
-  K as GlobalCorporateTheme,
-  x as LabelsProvider,
-  N as ThemeContextProvider,
-  w as ThemeProvider,
+  K as CorporateTheme,
+  W as GlobalCorporateTheme,
+  L as LabelsProvider,
+  x as ThemeContextProvider,
+  N as ThemeProvider,
   q as ThemeSwitcher,
-  y as corporateThemes,
-  b as defaultLabels,
+  f as corporateThemes,
+  C as defaultLabels,
   O as useBrandColors,
-  J as useCorporateFeatures,
-  Q as useDensity,
-  X as useFormVisualContract,
-  G as useLabels,
+  Q as useCorporateFeatures,
+  X as useDensity,
+  Y as useFormVisualContract,
+  z as useLabels,
   l as useTheme,
-  U as useThemeTokens,
-  W as useThemeVariant
+  I as useThemeTokens,
+  J as useThemeVariant
 };

package/dist/labels.d.ts

@@ -26,9 +26,12 @@ export interface Ui7Labels {
     logout: string;
     searchMenuPlaceholder: string;
     searchMenuAriaLabel: string;
+    openSearchNavigationButtonAriaLabel: string;
     clearSearchAriaLabel: string;
     removeFavoriteAriaLabel: string;
     addFavoriteAriaLabel: string;
+    favoritesTitle: string;
+    appSwitcherButtonAriaLabel: string;
     profileButtonAriaLabel: string;
     notificationsButtonAriaLabel: string;
     notificationsUnreadSuffix: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/corporate-themes",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Corporate themes (BCA Syariah, BJB Syariah, Pos Indonesia, Ihsan Solusi Informatika) with Carbon variants.",
   "license": "MIT",
   "repository": {
@@ -33,7 +33,7 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@isi-ui7/bos7-shared": "0.2.0"
+    "@isi-ui7/bos7-shared": "0.2.6"
   },
   "devDependencies": {
     "react": "^19.0.0",
@@ -46,10 +46,10 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
-    "@isi-ui7/editable-table": "0.2.1",
-    "@isi-ui7/data-table": "0.2.1",
-    "@isi-ui7/ui-shell": "0.2.2",
-    "@isi-ui7/modal-manager": "0.2.1"
+    "@isi-ui7/ui-shell": "0.2.4",
+    "@isi-ui7/data-table": "0.2.2",
+    "@isi-ui7/modal-manager": "0.2.1",
+    "@isi-ui7/editable-table": "0.2.2"
   },
   "scripts": {
     "build": "vite build && node scripts/build-css.mjs",