@isi-ui7/corporate-themes 0.1.1

package/dist/components/CorporateTheme.d.ts

@@ -0,0 +1,26 @@
+import { ElementType, ReactElement, ReactNode } from 'react';
+import { CarbonThemeVariant } from '../types';
+
+type CorporateThemeProps<T extends ElementType> = {
+    as?: T;
+    className?: string;
+    corporateId?: string;
+    variant?: CarbonThemeVariant;
+    children: ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "className" | "children">;
+type GlobalCorporateThemeProps = {
+    corporateId?: string;
+    variant?: CarbonThemeVariant;
+    children: ReactElement;
+};
+/**
+ * Scoped theme wrapper, similar to Carbon's <Theme>, that applies the corporate theme
+ * class to a container and provides a scoped ThemeContext value.
+ */
+export declare function CorporateTheme<T extends ElementType = "div">({ as, className, corporateId, variant, children, ...rest }: CorporateThemeProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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 {};

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { CarbonThemeVariant } from '../types';
+
+type Props = {
+    corporateId?: string;
+    variant?: CarbonThemeVariant;
+    children: ReactNode;
+};
+export declare function ThemeProvider({ corporateId, variant, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ThemeSwitcher.d.ts

@@ -0,0 +1 @@
+export declare function ThemeSwitcher(): import("react/jsx-runtime").JSX.Element;

package/dist/context/ThemeContext.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { corporateThemes } from '../tokens';
+import { CarbonThemeVariant, CorporateTheme, ThemeContextValue } from '../types';
+
+declare const ThemeContext: import('react').Context<ThemeContextValue | null>;
+type ProviderProps = {
+    corporateId?: string;
+    variant?: CarbonThemeVariant;
+    children: ReactNode;
+};
+export declare function findTheme(id?: string): CorporateTheme;
+export declare function ThemeContextProvider({ corporateId, variant, children }: ProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export { ThemeContext, corporateThemes };

package/dist/corporates/bca-syariah/index.d.ts

@@ -0,0 +1,14 @@
+import { bcaSyariahTokens } from './tokens';
+
+export declare const bcaSyariah: {
+    id: string;
+    classNames: {
+        white: string;
+        g10: string;
+        g90: string;
+        g100: string;
+    };
+    tokens: import('../..').ThemeTokens;
+};
+export type BcaSyariahTheme = typeof bcaSyariah;
+export { bcaSyariahTokens };

package/dist/corporates/bca-syariah/tokens.d.ts

@@ -0,0 +1,3 @@
+import { ThemeTokens } from '../../types';
+
+export declare const bcaSyariahTokens: ThemeTokens;

package/dist/corporates/bjb-syariah/index.d.ts

@@ -0,0 +1,14 @@
+import { bjbSyariahTokens } from './tokens';
+
+export declare const bjbSyariah: {
+    id: string;
+    classNames: {
+        white: string;
+        g10: string;
+        g90: string;
+        g100: string;
+    };
+    tokens: import('../..').ThemeTokens;
+};
+export type BjbsSyariahTheme = typeof bjbSyariah;
+export { bjbSyariahTokens };

package/dist/corporates/bjb-syariah/tokens.d.ts

@@ -0,0 +1,3 @@
+import { ThemeTokens } from '../../types';
+
+export declare const bjbSyariahTokens: ThemeTokens;

package/dist/corporates/carbon-default/index.d.ts

@@ -0,0 +1,14 @@
+import { carbonDefaultTokens } from './tokens';
+
+export declare const carbonDefault: {
+    id: string;
+    classNames: {
+        white: string;
+        g10: string;
+        g90: string;
+        g100: string;
+    };
+    tokens: import('../..').ThemeTokens;
+};
+export type CarbonDefaultTheme = typeof carbonDefault;
+export { carbonDefaultTokens };

package/dist/corporates/carbon-default/tokens.d.ts

@@ -0,0 +1,3 @@
+import { ThemeTokens } from '../../types';
+
+export declare const carbonDefaultTokens: ThemeTokens;

package/dist/corporates/ihsan-solusi/index.d.ts

@@ -0,0 +1,14 @@
+import { ihsanSolusiTokens } from './tokens';
+
+export declare const ihsanSolusi: {
+    id: string;
+    classNames: {
+        white: string;
+        g10: string;
+        g90: string;
+        g100: string;
+    };
+    tokens: import('../..').ThemeTokens;
+};
+export type IhsanSolusiTheme = typeof ihsanSolusi;
+export { ihsanSolusiTokens };

package/dist/corporates/ihsan-solusi/tokens.d.ts

@@ -0,0 +1,3 @@
+import { ThemeTokens } from '../../types';
+
+export declare const ihsanSolusiTokens: ThemeTokens;

package/dist/corporates/pos-indonesia/index.d.ts

@@ -0,0 +1,14 @@
+import { posIndonesiaTokens } from './tokens';
+
+export declare const posIndonesia: {
+    id: string;
+    classNames: {
+        white: string;
+        g10: string;
+        g90: string;
+        g100: string;
+    };
+    tokens: import('../..').ThemeTokens;
+};
+export type PosIndonesiaTheme = typeof posIndonesia;
+export { posIndonesiaTokens };

package/dist/corporates/pos-indonesia/tokens.d.ts

@@ -0,0 +1,3 @@
+import { ThemeTokens } from '../../types';
+
+export declare const posIndonesiaTokens: ThemeTokens;

package/dist/hooks/useBrandColors.d.ts

@@ -0,0 +1 @@
+export declare function useBrandColors(): import('..').BrandColors;

package/dist/hooks/useCorporateFeatures.d.ts

@@ -0,0 +1,7 @@
+export declare function useCorporateFeatures(): {
+    logo: {
+        light: string;
+        dark: string;
+    };
+    brandColors: import('..').BrandColors;
+};

package/dist/hooks/useThemeTokens.d.ts

@@ -0,0 +1 @@
+export declare function useThemeTokens(): import('..').ThemeTokens;

package/dist/hooks/useThemeVariant.d.ts

@@ -0,0 +1,4 @@
+export declare function useThemeVariant(): {
+    variant: import('..').CarbonThemeVariant;
+    setVariant: (variant: import('..').CarbonThemeVariant) => void;
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from './types';
+export * from './tokens';
+export { ThemeContextProvider, useTheme, corporateThemes } from './context/ThemeContext';
+export { ThemeProvider } from './components/ThemeProvider';
+export { CorporateTheme, GlobalCorporateTheme } from './components/CorporateTheme';
+export { ThemeSwitcher } from './components/ThemeSwitcher';
+export { useThemeTokens } from './hooks/useThemeTokens';
+export { useBrandColors } from './hooks/useBrandColors';
+export { useThemeVariant } from './hooks/useThemeVariant';
+export { useCorporateFeatures } from './hooks/useCorporateFeatures';

package/dist/index.js

@@ -0,0 +1,324 @@
+import { jsx as i, jsxs as k } from "react/jsx-runtime";
+import { useMemo as b, useState as h, useEffect as g, createContext as f, useContext as A } from "react";
+const E = {
+  brandColors: {
+    primary: "#0F62FE",
+    primaryHover: "#0043CE",
+    primaryActive: "#002D9C",
+    secondary: "#393939",
+    secondaryHover: "#4C4C4C",
+    secondaryActive: "#6F6F6F",
+    accent: "#4589FF",
+    accentHover: "#1F70FF"
+  },
+  logoUrl: {
+    light: "/assets/logos/carbon-light.svg",
+    dark: "/assets/logos/carbon-dark.svg"
+  },
+  interactive: "#0F62FE",
+  interactiveHover: "#0043CE",
+  interactiveActive: "#002D9C",
+  buttonPrimary: "#0F62FE",
+  buttonPrimaryHover: "#0043CE",
+  buttonPrimaryActive: "#002D9C",
+  buttonSecondary: "#393939",
+  buttonSecondaryHover: "#4C4C4C",
+  linkPrimary: "#0F62FE",
+  linkPrimaryHover: "#002D9C",
+  linkSecondary: "#4589FF",
+  focus: "#0F62FE",
+  borderInteractive: "#0F62FE",
+  headerBackground: "#0F62FE",
+  sidebarBackground: "#393939",
+  navigationBackground: "#F4F4F4"
+}, H = {
+  brandColors: {
+    primary: "#0066CC",
+    // BCA Blue
+    primaryHover: "#0052A3",
+    primaryActive: "#003D7A",
+    secondary: "#00A651",
+    // Islamic Green
+    secondaryHover: "#008542",
+    secondaryActive: "#006633",
+    accent: "#FFB81C",
+    // Gold accent
+    accentHover: "#E6A519"
+  },
+  logoUrl: {
+    light: "/assets/logos/bca-syariah-light.svg",
+    dark: "/assets/logos/bca-syariah-dark.svg"
+  },
+  // Interactive - gunakan primary blue
+  interactive: "#0066CC",
+  interactiveHover: "#0052A3",
+  interactiveActive: "#003D7A",
+  // Buttons
+  buttonPrimary: "#0066CC",
+  buttonPrimaryHover: "#0052A3",
+  buttonPrimaryActive: "#003D7A",
+  buttonSecondary: "#00A651",
+  buttonSecondaryHover: "#008542",
+  // Links
+  linkPrimary: "#0066CC",
+  linkPrimaryHover: "#003D7A",
+  linkSecondary: "#00A651",
+  // Focus
+  focus: "#0066CC",
+  borderInteractive: "#0066CC",
+  // Custom UI
+  headerBackground: "#0066CC",
+  sidebarBackground: "#00A651",
+  navigationBackground: "#F5F5F5"
+}, B = {
+  brandColors: {
+    primary: "#C8102E",
+    // BJB Red (main brand color)
+    primaryHover: "#A00D25",
+    primaryActive: "#7A0A1C",
+    secondary: "#8B0000",
+    // Dark Red
+    secondaryHover: "#6B0000",
+    secondaryActive: "#4B0000",
+    accent: "#E31837",
+    // Bright Red accent
+    accentHover: "#C8102E"
+  },
+  logoUrl: {
+    light: "/assets/logos/bjb-syariah-light.svg",
+    dark: "/assets/logos/bjb-syariah-dark.svg"
+  },
+  interactive: "#C8102E",
+  interactiveHover: "#A00D25",
+  interactiveActive: "#7A0A1C",
+  buttonPrimary: "#C8102E",
+  buttonPrimaryHover: "#A00D25",
+  buttonPrimaryActive: "#7A0A1C",
+  buttonSecondary: "#8B0000",
+  buttonSecondaryHover: "#6B0000",
+  linkPrimary: "#C8102E",
+  linkPrimaryHover: "#7A0A1C",
+  linkSecondary: "#E31837",
+  focus: "#C8102E",
+  borderInteractive: "#C8102E",
+  headerBackground: "#C8102E",
+  sidebarBackground: "#8B0000",
+  navigationBackground: "#FFF5F5"
+}, P = {
+  brandColors: {
+    primary: "#ED1C24",
+    primaryHover: "#C61018",
+    primaryActive: "#A00D14",
+    secondary: "#FF7F00",
+    secondaryHover: "#E66F00",
+    secondaryActive: "#CC6300",
+    accent: "#FFD100",
+    accentHover: "#E6BC00"
+  },
+  logoUrl: {
+    light: "/assets/logos/pos-indonesia-light.svg",
+    dark: "/assets/logos/pos-indonesia-dark.svg"
+  },
+  interactive: "#ED1C24",
+  interactiveHover: "#C61018",
+  interactiveActive: "#A00D14",
+  buttonPrimary: "#ED1C24",
+  buttonPrimaryHover: "#C61018",
+  buttonPrimaryActive: "#A00D14",
+  buttonSecondary: "#FF7F00",
+  buttonSecondaryHover: "#E66F00",
+  linkPrimary: "#ED1C24",
+  linkPrimaryHover: "#A00D14",
+  linkSecondary: "#FF7F00",
+  focus: "#ED1C24",
+  borderInteractive: "#ED1C24",
+  headerBackground: "#ED1C24",
+  sidebarBackground: "#FF7F00",
+  navigationBackground: "#FFF4E6"
+}, D = {
+  brandColors: {
+    primary: "#0F62FE",
+    primaryHover: "#0043CE",
+    primaryActive: "#002D9C",
+    secondary: "#1192E8",
+    secondaryHover: "#0F7EC8",
+    secondaryActive: "#0C6AAA",
+    accent: "#08BDBA",
+    accentHover: "#07A6A4"
+  },
+  logoUrl: {
+    light: "/assets/logos/ihsan-solusi-light.svg",
+    dark: "/assets/logos/ihsan-solusi-dark.svg"
+  },
+  interactive: "#0F62FE",
+  interactiveHover: "#0043CE",
+  interactiveActive: "#002D9C",
+  buttonPrimary: "#0F62FE",
+  buttonPrimaryHover: "#0043CE",
+  buttonPrimaryActive: "#002D9C",
+  buttonSecondary: "#1192E8",
+  buttonSecondaryHover: "#0F7EC8",
+  linkPrimary: "#0F62FE",
+  linkPrimaryHover: "#002D9C",
+  linkSecondary: "#1192E8",
+  focus: "#0F62FE",
+  borderInteractive: "#0F62FE",
+  headerBackground: "#0F62FE",
+  sidebarBackground: "#1192E8",
+  navigationBackground: "#F4F7FF"
+}, u = [
+  {
+    id: "carbon-default",
+    name: "carbon-default",
+    displayName: "Carbon Default",
+    tokens: E,
+    supportedVariants: ["white", "g10", "g90", "g100"],
+    defaultVariant: "g10"
+  },
+  {
+    id: "ihsan",
+    name: "ihsan",
+    displayName: "ISI",
+    tokens: D,
+    supportedVariants: ["white", "g10", "g90", "g100"],
+    defaultVariant: "g10"
+  },
+  {
+    id: "bca-syariah",
+    name: "bca-syariah",
+    displayName: "BCAS",
+    tokens: H,
+    supportedVariants: ["white", "g10", "g90", "g100"],
+    defaultVariant: "g10"
+  },
+  {
+    id: "bjb-syariah",
+    name: "bjb-syariah",
+    displayName: "BJBS",
+    tokens: B,
+    supportedVariants: ["white", "g10", "g90", "g100"],
+    defaultVariant: "g90"
+  },
+  {
+    id: "pos-indonesia",
+    name: "pos-indonesia",
+    displayName: "PosInd",
+    tokens: P,
+    supportedVariants: ["white", "g10", "g90", "g100"],
+    defaultVariant: "g10"
+  }
+], 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;
+}
+function S({ corporateId: e, variant: a, children: t }) {
+  const r = b(() => p(e), [e]), [c, m] = h(
+    a ?? r.defaultVariant
+  );
+  g(() => {
+    a && r.supportedVariants.includes(a) && m(a);
+  }, [a, r]), g(() => {
+    if (typeof document > "u") return;
+    const l = document.documentElement, o = document.body;
+    u.flatMap(
+      (s) => s.supportedVariants.map((C) => `platform-theme-${s.id}-${C}`)
+    ).forEach((s) => {
+      l.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);
+    };
+  }, [r, c]);
+  const d = {
+    theme: r,
+    variant: c,
+    corporateId: r.id,
+    setVariant: m
+  };
+  return /* @__PURE__ */ i(F.Provider, { value: d, children: t });
+}
+function v() {
+  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 j({
+  as: e,
+  className: a,
+  corporateId: t,
+  variant: r,
+  children: c,
+  ...m
+}) {
+  const d = v(), l = e ?? "div", o = b(
+    () => t ? p(t) : d.theme,
+    [t, d.theme]
+  ), [y, n] = h(
+    r ?? d.variant ?? o.defaultVariant
+  );
+  g(() => {
+    r && o.supportedVariants.includes(r) ? n(r) : r || n(o.defaultVariant);
+  }, [r, o]);
+  const s = {
+    theme: o,
+    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 }) });
+}
+function N({ corporateId: e, variant: a, children: t }) {
+  return /* @__PURE__ */ i(V, { corporateId: e, variant: a, children: t });
+}
+const T = ["white", "g10", "g90", "g100"];
+function U() {
+  const { variant: e, setVariant: a, theme: t } = v();
+  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(
+      "select",
+      {
+        value: e,
+        onChange: (r) => a(r.target.value),
+        children: T.map((r) => /* @__PURE__ */ i("option", { value: r, children: r.toUpperCase() }, r))
+      }
+    )
+  ] });
+}
+function w() {
+  const { theme: e } = v();
+  return e.tokens;
+}
+function L() {
+  return w().brandColors;
+}
+function $() {
+  const { variant: e, setVariant: a } = v();
+  return { variant: e, setVariant: a };
+}
+function M() {
+  const { theme: e } = v();
+  return {
+    logo: e.tokens.logoUrl,
+    brandColors: e.tokens.brandColors
+  };
+}
+export {
+  j as CorporateTheme,
+  N as GlobalCorporateTheme,
+  S as ThemeContextProvider,
+  V as ThemeProvider,
+  U as ThemeSwitcher,
+  u as corporateThemes,
+  L as useBrandColors,
+  M as useCorporateFeatures,
+  v as useTheme,
+  w as useThemeTokens,
+  $ as useThemeVariant
+};