@isi-ui7/corporate-themes 0.1.2 → 0.2.0

package/dist/hooks/useDensity.d.ts

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

package/dist/index.d.ts

@@ -8,3 +8,4 @@ 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';

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx as i, jsxs as k } from "react/jsx-runtime";
-import { useMemo as h, useState as b, useEffect as g, createContext as A, useContext as f } from "react";
+import { useMemo as h, useState as b, useEffect as g, createContext as f, useContext as A } from "react";
 const E = {
   brandColors: {
     primary: "#0F62FE",
@@ -166,7 +166,7 @@ const E = {
   headerBackground: "#0F62FE",
   sidebarBackground: "#1192E8",
   navigationBackground: "#F4F7FF"
-}, u = [
+}, m = [
   {
     id: "carbon-default",
     name: "carbon-default",
@@ -207,60 +207,60 @@ const E = {
     supportedVariants: ["white", "g10", "g90", "g100"],
     defaultVariant: "g10"
   }
-], F = A(null);
+], F = f(null);
 function p(e) {
-  const a = u.find((t) => t.id === "carbon-default") ?? u.find((t) => t.id === "ihsan") ?? u[0];
-  return e ? u.find((t) => t.id === e) ?? a : a;
+  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;
 }
-function S({ corporateId: e, variant: a, children: t }) {
-  const r = h(() => p(e), [e]), [c, m] = b(
-    a ?? r.defaultVariant
+function S({ corporateId: e, variant: t, children: a }) {
+  const r = h(() => p(e), [e]), [d, v] = b(
+    t ?? r.defaultVariant
   );
   g(() => {
-    a && r.supportedVariants.includes(a) && m(a);
-  }, [a, r]), g(() => {
+    t && r.supportedVariants.includes(t) && v(t);
+  }, [t, r]), g(() => {
     if (typeof document > "u") return;
-    const l = document.documentElement, o = document.body;
-    u.flatMap(
+    const u = document.documentElement, o = document.body;
+    m.flatMap(
       (s) => s.supportedVariants.map((C) => `platform-theme-${s.id}-${C}`)
     ).forEach((s) => {
-      l.classList.remove(s), o.classList.remove(s);
+      u.classList.remove(s), o.classList.remove(s);
     });
-    const n = `platform-theme-${r.id}-${c}`;
-    return l.classList.add(n), o.classList.add(n), () => {
-      l.classList.remove(n), o.classList.remove(n);
+    const n = `platform-theme-${r.id}-${d}`;
+    return u.classList.add(n), o.classList.add(n), () => {
+      u.classList.remove(n), o.classList.remove(n);
     };
-  }, [r, c]);
-  const d = {
+  }, [r, d]);
+  const l = {
     theme: r,
-    variant: c,
+    variant: d,
     corporateId: r.id,
-    setVariant: m
+    setVariant: v
   };
-  return /* @__PURE__ */ i(F.Provider, { value: d, children: t });
+  return /* @__PURE__ */ i(F.Provider, { value: l, children: a });
 }
-function v() {
-  const e = f(F);
+function c() {
+  const e = A(F);
   if (!e)
     throw new Error("useTheme must be used inside ThemeProvider");
   return e;
 }
-function V({ corporateId: e, variant: a, children: t }) {
-  return /* @__PURE__ */ i(S, { corporateId: e, variant: a, children: t });
+function V({ corporateId: e, variant: t, children: a }) {
+  return /* @__PURE__ */ i(S, { corporateId: e, variant: t, children: a });
 }
 function j({
   as: e,
-  className: a,
-  corporateId: t,
+  className: t,
+  corporateId: a,
   variant: r,
-  children: c,
-  ...m
+  children: d,
+  ...v
 }) {
-  const d = v(), l = e ?? "div", o = h(
-    () => t ? p(t) : d.theme,
-    [t, d.theme]
+  const l = c(), u = e ?? "div", o = h(
+    () => a ? p(a) : l.theme,
+    [a, l.theme]
   ), [y, n] = b(
-    r ?? d.variant ?? o.defaultVariant
+    r ?? l.variant ?? o.defaultVariant
   );
   g(() => {
     r && o.supportedVariants.includes(r) ? n(r) : r || n(o.defaultVariant);
@@ -270,55 +270,60 @@ function j({
     variant: y,
     corporateId: o.id,
     setVariant: n
-  }, C = [a, `platform-theme-${o.id}-${y}`].filter(Boolean).join(" ");
-  return /* @__PURE__ */ i(F.Provider, { value: s, children: /* @__PURE__ */ i(l, { className: C, ...m, children: c }) });
+  }, 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 }) });
 }
-function N({ corporateId: e, variant: a, children: t }) {
-  return /* @__PURE__ */ i(V, { corporateId: e, variant: a, children: t });
+function N({ corporateId: e, variant: t, children: a }) {
+  return /* @__PURE__ */ i(V, { corporateId: e, variant: t, children: a });
 }
 const T = ["white", "g10", "g90", "g100"];
 function U() {
-  const { variant: e, setVariant: a, theme: t } = v();
+  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: t.displayName }),
+    /* @__PURE__ */ i("span", { style: { fontSize: "0.85rem" }, children: a.displayName }),
     /* @__PURE__ */ i(
       "select",
       {
         value: e,
-        onChange: (r) => a(r.target.value),
+        onChange: (r) => t(r.target.value),
         children: T.map((r) => /* @__PURE__ */ i("option", { value: r, children: r.toUpperCase() }, r))
       }
     )
   ] });
 }
 function I() {
-  const { theme: e } = v();
+  const { theme: e } = c();
   return e.tokens;
 }
 function L() {
   return I().brandColors;
 }
 function $() {
-  const { variant: e, setVariant: a } = v();
-  return { variant: e, setVariant: a };
+  const { variant: e, setVariant: t } = c();
+  return { variant: e, setVariant: t };
 }
 function M() {
-  const { theme: e } = v();
+  const { theme: e } = c();
   return {
     logo: e.tokens.logoUrl,
     brandColors: e.tokens.brandColors
   };
 }
+function z() {
+  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,
-  u as corporateThemes,
+  m as corporateThemes,
   L as useBrandColors,
   M as useCorporateFeatures,
-  v as useTheme,
+  z as useDensity,
+  c as useTheme,
   I as useThemeTokens,
   $ as useThemeVariant
 };