@isi-ui7/corporate-themes 0.2.9 → 0.2.11

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/globals.css

@@ -0,0 +1,600 @@
+.ui-shell__main {
+  overflow-y: auto !important;
+}
+
+:root {
+  color-scheme: light;
+}
+
+body {
+  margin: 0;
+  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
+  font-size: 0.75rem;
+}
+
+.page {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.page__header {
+  flex-shrink: 0;
+  padding: 0.5rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 1rem;
+  z-index: 100;
+  background: var(--cds-background, #fff);
+  border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  min-height: 4rem;
+}
+
+.page__header > :first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.page__actions {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.75rem;
+}
+
+.page__title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.page__title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.page__breadcrumb {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.375rem;
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--cds-link-primary, #0f62fe);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.page__breadcrumb-segment {
+  display: inline-flex;
+  gap: 0.375rem;
+  align-items: center;
+  min-width: 0;
+}
+
+.page__breadcrumb-current {
+  color: var(--cds-link-primary, #0f62fe);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.page__subtitle {
+  font-size: 0.75rem;
+  color: var(--cds-text-secondary, #525252);
+  margin: 0.125rem 0 0;
+}
+
+.page__body {
+  padding: 0.75rem 2rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.page__footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 2rem;
+  background: var(--cds-background, #fff);
+  border-top: 2px solid var(--cds-border-subtle-01, #e0e0e0);
+}
+.page__footer--spread > :first-child {
+  margin-right: auto;
+}
+
+.page__content {
+  flex: 1;
+  overflow: auto;
+  padding: 1.5rem 2rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.form-grid {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: 1fr;
+}
+.form-grid > * {
+  min-width: 0;
+}
+.form-grid--2col {
+  grid-template-columns: repeat(2, 1fr);
+}
+.form-grid--3col {
+  grid-template-columns: repeat(3, 1fr);
+}
+.form-grid--full {
+  grid-column: 1/-1;
+}
+
+.cds--date-picker--single,
+.cds--date-picker--single .cds--date-picker-container,
+.cds--date-picker--single .cds--date-picker-input__wrapper {
+  width: 100%;
+}
+
+.form-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+}
+
+.ui7-form-contract {
+  --ui7-form-label-gap: 6px;
+  --ui7-form-label-font-size: 12px;
+  --ui7-form-label-font-weight: 500;
+  --ui7-form-label-line-height: 16px;
+  --ui7-form-input-font-size: 14px;
+  --ui7-form-input-font-weight: 400;
+  --ui7-form-input-line-height: 20px;
+  --ui7-form-control-height: 40px;
+  --ui7-form-textarea-min-height: 88px;
+  --ui7-form-row-gap: 16px;
+  --ui7-form-section-gap: 24px;
+  --ui7-form-column-gap: 16px;
+  --ui7-form-density: compact;
+  --ui7-form-readonly-background: #f4f4f4;
+  --ui7-form-readonly-cursor: default;
+}
+
+.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 {
+  display: grid;
+  column-gap: var(--ui7-form-column-gap);
+  row-gap: var(--ui7-form-row-gap);
+  align-items: start;
+}
+
+.ui7-form-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui7-form-section-gap);
+}
+
+.ui7-form-column {
+  min-width: 0;
+}
+
+.ui7-form-label {
+  display: flex;
+  align-items: baseline;
+  gap: var(--ui7-form-label-gap);
+  font-size: var(--ui7-form-label-font-size);
+  font-weight: var(--ui7-form-label-font-weight);
+  line-height: var(--ui7-form-label-line-height);
+  color: var(--cds-text-secondary, #525252);
+}
+
+.ui7-form-label__required {
+  color: var(--cds-support-error, #da1e28);
+}
+
+.ui7-form-control {
+  box-sizing: border-box;
+  min-height: var(--ui7-form-control-height);
+  font-size: var(--ui7-form-input-font-size);
+  font-weight: var(--ui7-form-input-font-weight);
+  line-height: var(--ui7-form-input-line-height);
+}
+
+.ui7-form-control :is(.cds--text-input,
+.cds--number input,
+.cds--select-input,
+.cds--combo-box__input,
+.cds--date-picker,
+.cds--dropdown,
+.cds--list-box) {
+  box-sizing: border-box;
+  min-height: var(--ui7-form-control-height);
+  font-size: var(--ui7-form-input-font-size);
+  line-height: var(--ui7-form-input-line-height);
+}
+
+.ui7-form-control :is(.cds--text-input, .cds--number input, .cds--select-input, .cds--combo-box__input) {
+  height: var(--ui7-form-control-height);
+}
+
+.ui7-form-control textarea,
+.ui7-form-control .cds--text-area,
+.ui7-form-control .cds--text-area__wrapper {
+  min-height: var(--ui7-form-textarea-min-height);
+}
+
+.ui7-form-control--readonly,
+.ui7-form-contract--readonly .ui7-form-control,
+.ui7-form-control--readonly :is(input, textarea, button, [role=combobox], .cds--text-input, .cds--number input) {
+  background: var(--ui7-form-readonly-background, #f4f4f4);
+  cursor: var(--ui7-form-readonly-cursor, default);
+}
+
+.ui7-form-readonly-value {
+  background: var(--ui7-form-readonly-background, #f4f4f4);
+  color: var(--cds-text-primary, #161616);
+  cursor: var(--ui7-form-readonly-cursor, default);
+}
+
+.ui7-form-contract--readonly .ui7-form-readonly-value {
+  background: var(--ui7-form-readonly-background, #f4f4f4);
+}
+
+.ui7-form-helper {
+  margin-block-start: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--cds-text-secondary, #525252);
+}
+
+.page-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.page-tabs__panel {
+  display: none;
+  padding: 0.75rem 0;
+}
+.page-tabs__panel--active {
+  display: block;
+}
+.page-tabs__panel--table {
+  padding: 0;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  background: var(--cds-background-inverse, #393939);
+  color: var(--cds-text-inverse, #fff);
+  border-radius: 0.75rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  margin-left: 0.375rem;
+  line-height: 1;
+}
+
+.display-field {
+  display: flex;
+  flex-direction: column;
+}
+
+.display-field__label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--cds-text-secondary, #525252);
+  margin-bottom: 0.125rem;
+}
+
+.display-field__value {
+  font-size: 0.75rem;
+  min-height: 1.125rem;
+  color: var(--cds-text-primary, #000);
+}
+
+.modal-layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: calc(90vh - 3.5rem);
+}
+.modal-layout--sm {
+  min-width: 24rem;
+}
+.modal-layout--md {
+  min-width: 28rem;
+}
+.modal-layout--lg {
+  min-width: 32rem;
+}
+.modal-layout--xl {
+  min-width: 36rem;
+}
+
+.modal-layout__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 1rem 1.5rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.modal-layout__footer {
+  flex-shrink: 0;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  background: var(--cds-background, #fff);
+  justify-content: flex-end;
+}
+.modal-layout__footer--spread {
+  justify-content: space-between;
+}
+
+.modal-shell {
+  background: var(--cds-background, #fff);
+  width: min(90vw, 480px);
+  display: flex;
+  flex-direction: column;
+}
+.modal-shell__header {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+}
+.modal-shell__title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+}
+.modal-shell__body {
+  padding: 1rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  flex: 1;
+  overflow: auto;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  justify-content: flex-end;
+}
+
+.wizard-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+}
+.wizard-actions > :first-child {
+  margin-right: auto;
+}
+
+.receipt-card {
+  border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  background: var(--cds-layer-01, #f4f4f4);
+  padding: 1.5rem;
+  max-width: 480px;
+}
+.receipt-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  color: var(--cds-support-success, #198038);
+  font-weight: 600;
+  font-size: 1rem;
+}
+.receipt-card__row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.375rem 0;
+  border-bottom: 1px solid var(--cds-border-subtle-00, #e8e8e8);
+  font-size: 0.875rem;
+}
+.receipt-card__row:last-of-type {
+  border-bottom: none;
+}
+.receipt-card__label {
+  color: var(--cds-text-secondary, #525252);
+}
+.receipt-card__actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.profile-branch-section__label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--cds-text-secondary, #525252);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.profile-branch-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.625rem 1rem;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.profile-branch-dropdown__trigger:hover {
+  background: var(--cds-background-hover, #e8e8e8);
+}
+.profile-branch-dropdown__trigger:focus-visible {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+.profile-branch-dropdown__current {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.profile-branch-dropdown__chevron {
+  font-size: 0.625rem;
+  color: var(--cds-text-secondary, #525252);
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+}
+.profile-branch-dropdown__list {
+  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  background: var(--cds-layer-01, #f4f4f4);
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.profile-branch-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.625rem 1rem 0.625rem 1.5rem;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  gap: 0.375rem;
+  transition: background-color 0.15s ease;
+}
+.profile-branch-item__code {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--cds-text-primary, #161616);
+  flex: 1;
+}
+.profile-branch-item__name {
+  font-size: 0.75rem;
+  color: var(--cds-text-secondary, #525252);
+}
+.profile-branch-item__check {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--cds-interactive, #0f62fe);
+  margin-left: auto;
+}
+.profile-branch-item--active {
+  background: var(--cds-layer-selected-01, rgba(0, 0, 0, 0.08));
+  cursor: default;
+}
+.profile-branch-item--active .profile-branch-item__code {
+  font-weight: 700;
+}
+.profile-branch-item:not(.profile-branch-item--active):hover {
+  background: var(--cds-background-hover, #e8e8e8);
+}
+.profile-branch-item:focus-visible {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: var(--cds-background, #f4f4f4);
+}
+.login-page__card {
+  background: var(--cds-layer-01, #ffffff);
+  padding: 3rem 2.5rem;
+  max-width: 400px;
+  width: 100%;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+}
+.login-page__card h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  color: var(--cds-text-primary, #161616);
+}
+.login-page__card p {
+  font-size: 0.875rem;
+  color: var(--cds-text-secondary, #525252);
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .page__header {
+    padding: 0.5rem 1rem;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  .page__actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  .page__body {
+    padding: 0.75rem 1rem 1.25rem;
+  }
+  .form-grid--2col {
+    grid-template-columns: 1fr;
+  }
+  .form-grid--3col {
+    grid-template-columns: 1fr;
+  }
+  .modal-shell {
+    width: 100vw;
+    max-height: 100dvh;
+  }
+}
+@media (max-width: 480px) {
+  .page__header {
+    padding: 0.5rem 0.75rem;
+  }
+  .page__body {
+    padding: 0.5rem 0.75rem 1rem;
+  }
+  .page__title {
+    font-size: 1rem;
+  }
+}

package/dist/hooks/useBrandColors.d.ts

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