@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/themes/light.css

@@ -0,0 +1,543 @@
+:root,
+:host {
+  /* Color / Gray */
+
+  --primitive-color-gray-0: #ffffff;
+  --primitive-color-gray-0-80: rgba(255, 255, 255, 0.8);
+  --primitive-color-gray-50: #fcfcfd;
+  --primitive-color-gray-100: #ebecef;
+  --primitive-color-gray-200: #c6c8d2;
+  --primitive-color-gray-300: #a3a8b8;
+  --primitive-color-gray-500: #60667c;
+  --primitive-color-gray-700: #3a3e4b;
+  --primitive-color-gray-800: #262831;
+  --primitive-color-gray-900: #14151a;
+  --primitive-color-gray-900-80: rgba(20, 21, 26, 0.8);
+  --primitive-color-gray-1000: #000000;
+  --primitive-color-gray-1000-80: rgba(0, 0, 0, 0.8);
+
+  /* Color / Brand */
+
+  --primitive-color-brand-50: #e5f0ff;
+  --primitive-color-brand-200: #99ceff;
+  --primitive-color-brand-300: #66a6ff;
+  --primitive-color-brand-400: #3388ff;
+  --primitive-color-brand-500: #006aff;
+  --primitive-color-brand-600: #0055cc;
+  --primitive-color-brand-900: #21273b;
+
+  /* Color / Brand Secondary */
+
+  --primitive-color-brand-secondary-50: #f2e2fe;
+  --primitive-color-brand-secondary-500: #820ad1;
+
+  /* Color / Positive */
+
+  --primitive-color-positive-50: #e4fbf0;
+  --primitive-color-positive-600: #189f60;
+  --primitive-color-positive-800: #0c5030;
+
+  /* Color / Warning */
+
+  --primitive-color-warning-50: #fff7eb;
+  --primitive-color-warning-400: #ffb647;
+  --primitive-color-warning-500: #ff9900;
+  --primitive-color-warning-950: #523100;
+
+  /* Color / Negative */
+
+  --primitive-color-negative-50: #fff0f0;
+  --primitive-color-negative-500: #ff5a5f;
+  --primitive-color-negative-600: #e71111;
+  --primitive-color-negative-950: #240001;
+
+  /* Typography / Family */
+  --primitive-typography-family-rethink-sans: 'Rethink Sans';
+  --primitive-typography-family-dm-sans: 'DM Sans';
+
+  /* Typography / Size */
+
+  --primitive-typography-size-12: 12px;
+  --primitive-typography-size-14: 14px;
+  --primitive-typography-size-16: 16px;
+  --primitive-typography-size-18: 18px;
+  --primitive-typography-size-20: 20px;
+  --primitive-typography-size-24: 24px;
+  --primitive-typography-size-32: 32px;
+  --primitive-typography-size-40: 40px;
+  --primitive-typography-size-48: 48px;
+  --primitive-typography-size-80: 80px;
+
+  /* Typography / Weight */
+
+  --primitive-typography-weight-thin: 300;
+  --primitive-typography-weight-regular: 400;
+  --primitive-typography-weight-medium: 500;
+  --primitive-typography-weight-semibold: 600;
+  --primitive-typography-weight-bold: 700;
+  --primitive-typography-weight-extrabold: 800;
+
+  /* Typography / Letter Spacing */
+
+  --primitive-typography-letter-spacing-0: 0px;
+  --primitive-typography-letter-spacing-minus-0-5: -0.5px;
+  --primitive-typography-letter-spacing-minus-1: -1px;
+  --primitive-typography-letter-spacing-minus-1-5: -1.5px;
+
+  /* Border / Width */
+
+  --primitive-border-width-0: 0px;
+  --primitive-border-width-1: 1px;
+  --primitive-border-width-2: 2px;
+  --primitive-border-width-4: 4px;
+
+  /* Border / Radius */
+
+  --primitive-border-radius-0: 0px;
+  --primitive-border-radius-4: 4px;
+  --primitive-border-radius-8: 8px;
+  --primitive-border-radius-16: 16px;
+  --primitive-border-radius-24: 24px;
+  --primitive-border-radius-40: 40px;
+  --primitive-border-radius-64: 64px;
+  --primitive-border-radius-9999: 9999px;
+
+  /* Scale */
+
+  --primitive-scale-0: 0px;
+  --primitive-scale-2: 2px;
+  --primitive-scale-4: 4px;
+  --primitive-scale-8: 8px;
+  --primitive-scale-12: 12px;
+  --primitive-scale-16: 16px;
+  --primitive-scale-20: 20px;
+  --primitive-scale-24: 24px;
+  --primitive-scale-32: 32px;
+  --primitive-scale-40: 40px;
+  --primitive-scale-48: 48px;
+  --primitive-scale-56: 56px;
+  --primitive-scale-64: 64px;
+  --primitive-scale-72: 72px;
+  --primitive-scale-80: 80px;
+  --primitive-scale-88: 88px;
+  --primitive-scale-96: 96px;
+  --primitive-scale-104: 104px;
+  --primitive-scale-120: 120px;
+  --primitive-scale-128: 128px;
+  --primitive-scale-160: 160px;
+  --primitive-scale-200: 200px;
+}
+:root,
+:host {
+  /* Border / Width */
+
+  --border-none: var(--primitive-border-width-0);
+  --border-regular: var(--primitive-border-width-1);
+  --border-bold: var(--primitive-border-width-2);
+
+  /* Border / Radius */
+
+  --border-radius-none: var(--primitive-border-radius-0);
+  --border-radius-x-small: var(--primitive-border-radius-4);
+  --border-radius-small: var(--primitive-border-radius-8);
+  --border-radius-medium: var(--primitive-border-radius-16);
+  --border-radius-large: var(--primitive-border-radius-24);
+  --border-radius-x-large: var(--primitive-border-radius-40);
+  --border-radius-xx-large: var(--primitive-border-radius-64);
+  --border-radius-full: var(--primitive-border-radius-9999);
+
+  /* Spacing */
+
+  --spacing-none: var(--primitive-scale-0);
+  --spacing-2: var(--primitive-scale-2);
+  --spacing-4: var(--primitive-scale-4);
+  --spacing-8: var(--primitive-scale-8);
+  --spacing-12: var(--primitive-scale-12);
+  --spacing-16: var(--primitive-scale-16);
+  --spacing-20: var(--primitive-scale-20);
+  --spacing-24: var(--primitive-scale-24);
+  --spacing-32: var(--primitive-scale-32);
+  --spacing-40: var(--primitive-scale-40);
+  --spacing-48: var(--primitive-scale-48);
+  --spacing-64: var(--primitive-scale-64);
+  --spacing-80: var(--primitive-scale-80);
+  --spacing-96: var(--primitive-scale-96);
+  --spacing-104: var(--primitive-scale-104);
+  --spacing-120: var(--primitive-scale-120);
+  --spacing-160: var(--primitive-scale-160);
+  --spacing-200: var(--primitive-scale-200);
+
+  /* Icon / Size */
+
+  --icon-size-xx-small: var(--primitive-scale-16);
+  --icon-size-x-small: var(--primitive-scale-20);
+  --icon-size-small: var(--primitive-scale-24);
+  --icon-size-medium: var(--primitive-scale-32);
+  --icon-size-large: var(--primitive-scale-40);
+  --icon-size-x-large: var(--primitive-scale-48);
+  --icon-size-xx-large: var(--primitive-scale-64);
+  --icon-size-xxx-large: var(--primitive-scale-80);
+}
+:root,
+:host {
+  /* Surface / Neutral */
+
+  --surface-neutral-0: var(--primitive-color-gray-0);
+  --surface-neutral-0-80: var(--primitive-color-gray-0-80);
+  --surface-neutral-50: var(--primitive-color-gray-50);
+  --surface-neutral-100: var(--primitive-color-gray-100);
+  --surface-neutral-200: var(--primitive-color-gray-200);
+  --surface-neutral-300: var(--primitive-color-gray-300);
+  --surface-neutral-500: var(--primitive-color-gray-500);
+  --surface-neutral-700: var(--primitive-color-gray-700);
+  --surface-neutral-800: var(--primitive-color-gray-800);
+  --surface-neutral-900: var(--primitive-color-gray-900);
+  --surface-neutral-900-80: var(--primitive-color-gray-900-80);
+  --surface-neutral-900-static: var(--primitive-color-gray-900);
+  --surface-neutral-1000: var(--primitive-color-gray-1000);
+
+  /* Surface / Brand */
+
+  --surface-brand-50: var(--primitive-color-brand-50);
+  --surface-brand-400: var(--primitive-color-brand-400);
+  --surface-brand-400-static: var(--primitive-color-brand-400);
+  --surface-brand-500: var(--primitive-color-brand-500);
+  --surface-brand-500-static: var(--primitive-color-brand-500);
+  --surface-brand-600: var(--primitive-color-brand-600);
+  --surface-brand-600-static: var(--primitive-color-brand-600);
+
+  /* Surface / Status */
+
+  --surface-status-negative-50: var(--primitive-color-negative-50);
+  --surface-status-negative-600: var(--primitive-color-negative-600);
+
+  --surface-status-warning-50: var(--primitive-color-warning-50);
+  --surface-status-warning-500: var(--primitive-color-warning-500);
+
+  --surface-status-positive-50: var(--primitive-color-positive-50);
+  --surface-status-positive-600: var(--primitive-color-positive-600);
+  --surface-status-positive-600-static: var(--primitive-color-positive-600);
+
+  /* Icon / Neutral */
+
+  --icon-neutral-0: var(--primitive-color-gray-0);
+  --icon-neutral-0-static: var(--primitive-color-gray-0);
+  --icon-neutral-50: var(--primitive-color-gray-50);
+  --icon-neutral-50-static: var(--primitive-color-gray-50);
+  --icon-neutral-300: var(--primitive-color-gray-300);
+  --icon-neutral-500: var(--primitive-color-gray-500);
+  --icon-neutral-500-static: var(--primitive-color-gray-500);
+  --icon-neutral-800: var(--primitive-color-gray-800);
+  --icon-neutral-800-static: var(--primitive-color-gray-800);
+
+  /* Icon / Brand */
+
+  --icon-brand-500: var(--primitive-color-brand-500);
+  --icon-brand-500-static: var(--primitive-color-brand-500);
+
+  /* Icon / Status */
+
+  --icon-status-negative: var(--primitive-color-negative-600);
+  --icon-status-warning: var(--primitive-color-warning-500);
+  --icon-status-positive: var(--primitive-color-positive-600);
+  --icon-status-positive-static: var(--primitive-color-positive-600);
+
+  /* Border / Neutral */
+
+  --border-neutral-100: var(--primitive-color-gray-100);
+  --border-neutral-300: var(--primitive-color-gray-300);
+  --border-neutral-500: var(--primitive-color-gray-500);
+
+  /* Border / Brand */
+
+  --border-brand-500: var(--primitive-color-brand-500);
+  --border-brand-500-static: var(--primitive-color-brand-500);
+  --border-brand-600: var(--primitive-color-brand-600);
+
+  /* Border / Status */
+
+  --border-status-negative: var(--primitive-color-negative-600);
+  --border-status-warning: var(--primitive-color-warning-500);
+  --border-status-positive: var(--primitive-color-positive-600);
+  --border-status-positive-static: var(--primitive-color-positive-600);
+
+  /* Text / Body */
+
+  --text-body-primary: var(--primitive-color-gray-800);
+  --text-body-secondary: var(--primitive-color-gray-500);
+  --text-body-tertiary: var(--primitive-color-gray-300);
+  --text-body-0: var(--primitive-color-gray-0);
+  --text-body-0-static: var(--primitive-color-gray-0);
+
+  /* Text / Link */
+
+  --text-link-default: var(--primitive-color-brand-500);
+  --text-link-hover: var(--primitive-color-brand-300);
+  --text-link-hover-static: var(--primitive-color-brand-300);
+  --text-link-disabled: var(--primitive-color-gray-500);
+  --text-link-disabled-static: var(--primitive-color-gray-500);
+  --text-link-visited: var(--primitive-color-gray-700);
+
+  /* Text / Accent */
+
+  --text-accent-brand: var(--primitive-color-brand-500);
+  --text-accent-brand-static: var(--primitive-color-brand-500);
+  --text-accent-brand-secondary: var(--primitive-color-brand-secondary-500);
+  --text-accent-brand-secondary-static: var(
+    --primitive-color-brand-secondary-500
+  );
+
+  /* Text / Status */
+
+  --text-status-negative: var(--primitive-color-negative-600);
+  --text-status-warning: var(--primitive-color-warning-500);
+  --text-status-positive: var(--primitive-color-positive-600);
+  --text-status-positive-static: var(--primitive-color-positive-600);
+}
+[data-incode-theme='dark'] {
+  /* Surface / Neutral */
+
+  --surface-neutral-0: var(--primitive-color-gray-1000);
+  --surface-neutral-0-80: var(--primitive-color-gray-900-80);
+  --surface-neutral-50: var(--primitive-color-gray-900);
+  --surface-neutral-100: var(--primitive-color-gray-800);
+  --surface-neutral-200: var(--primitive-color-gray-700);
+  --surface-neutral-300: var(--primitive-color-gray-500);
+  --surface-neutral-500: var(--primitive-color-gray-300);
+  --surface-neutral-700: var(--primitive-color-gray-200);
+  --surface-neutral-800: var(--primitive-color-gray-100);
+  --surface-neutral-900: var(--primitive-color-gray-0);
+  --surface-neutral-900-80: var(--primitive-color-gray-0-80);
+  --surface-neutral-1000: var(--primitive-color-gray-0);
+
+  /* Surface / Brand */
+
+  --surface-brand-50: var(--primitive-color-brand-900);
+
+  /* Surface / Status */
+
+  --surface-status-negative-50: var(--primitive-color-negative-950);
+  --surface-status-negative-600: var(--primitive-color-negative-500);
+
+  --surface-status-warning-50: var(--primitive-color-warning-950);
+  --surface-status-warning-500: var(--primitive-color-warning-400);
+
+  --surface-status-positive-50: var(--primitive-color-positive-800);
+
+  /* Icon / Neutral */
+
+  --icon-neutral-0: var(--primitive-color-gray-800);
+  --icon-neutral-300: var(--primitive-color-gray-500);
+  --icon-neutral-500: var(--primitive-color-gray-300);
+  --icon-neutral-800: var(--primitive-color-gray-100);
+
+  /* Icon / Status */
+
+  --icon-status-negative: var(--primitive-color-negative-500);
+  --icon-status-warning: var(--primitive-color-warning-400);
+
+  /* Border / Neutral */
+
+  --border-neutral-100: var(--primitive-color-gray-700);
+  --border-neutral-300: var(--primitive-color-gray-500);
+  --border-neutral-500: var(--primitive-color-gray-300);
+
+  /* Border / Brand */
+
+  --border-brand-600: var(--primitive-color-brand-400);
+
+  /* Border / Status */
+
+  --border-status-negative: var(--primitive-color-negative-500);
+  --border-status-warning: var(--primitive-color-warning-400);
+
+  /* Text / Body */
+
+  --text-body-primary: var(--primitive-color-gray-50);
+  --text-body-secondary: var(--primitive-color-gray-300);
+  --text-body-tertiary: var(--primitive-color-gray-500);
+
+  /* Text / Link */
+
+  --text-link-default: var(--primitive-color-brand-400);
+  --text-link-visited: var(--primitive-color-gray-300);
+
+  /* Text / Status */
+
+  --text-status-negative: var(--primitive-color-negative-500);
+  --text-status-warning: var(--primitive-color-warning-400);
+}
+:root,
+:host {
+  /* Button / Primary */
+  --button-primary-surface-default: var(--surface-brand-500-static);
+  --button-primary-surface-hover: var(--surface-brand-400-static);
+  --button-primary-surface-pressed: var(--surface-brand-600-static);
+  --button-primary-surface-disabled: var(--surface-neutral-100);
+
+  --button-primary-text-default: var(--text-body-0-static);
+  --button-primary-text-disabled: var(--text-body-tertiary);
+
+  --button-primary-border-default: var(--surface-brand-500-static);
+  --button-primary-border-hover: var(--surface-brand-400-static);
+  --button-primary-border-pressed: var(--surface-brand-600-static);
+  --button-primary-border-disabled: var(--surface-neutral-100);
+  --button-primary-border-radius: var(--border-radius-medium);
+
+  /* Button / Secondary */
+  --button-secondary-surface-default: var(--surface-neutral-0);
+  --button-secondary-surface-hover: var(--surface-brand-50);
+  --button-secondary-surface-pressed: var(--surface-brand-600-static);
+  --button-secondary-surface-disabled: var(--surface-neutral-200);
+
+  --button-secondary-text-default: var(--text-accent-brand-static);
+  --button-secondary-text-disabled: var(--text-body-secondary);
+
+  --button-secondary-border-default: var(--surface-brand-500-static);
+  --button-secondary-border-hover: var(--surface-brand-400-static);
+  --button-secondary-border-pressed: var(--surface-brand-600-static);
+  --button-secondary-border-disabled: var(--surface-neutral-100);
+  --button-secondary-border-radius: var(--border-radius-medium);
+
+  /* Button / Tertiary */
+  --button-tertiary-text-default: var(--text-accent-brand-static);
+  --button-tertiary-text-disabled: var(--text-body-secondary);
+
+  /* Checkbox */
+  --checkbox-surface-default: var(--surface-neutral-50);
+  --checkbox-surface-selected: var(--surface-brand-500-static);
+  --checkbox-surface-disabled: var(--surface-neutral-200);
+
+  --checkbox-border-default: var(--border-neutral-100);
+  --checkbox-border-selected: var(--border-brand-500-static);
+  --checkbox-border-disabled: var(--border-neutral-300);
+  --checkbox-border-negative: var(--border-status-negative);
+  --checkbox-border-radius: var(--border-radius-small);
+
+  --checkbox-icon-default: var(--surface-neutral-0);
+
+  --checkbox-text-default: var(--text-body-primary);
+  --checkbox-text-disabled: var(--text-body-tertiary);
+  --checkbox-text-negative: var(--text-status-negative);
+
+  /* Card */
+  --card-surface-primary: var(--surface-neutral-800);
+
+  --card-text-title: var(--surface-neutral-100);
+  --card-text-subtitle: var(--text-body-secondary);
+
+  /* Countdown */
+  --countdown-surface-default: var(--surface-neutral-900-static);
+
+  --countdown-text-default: var(--text-body-0-static);
+
+  /* Input */
+  --input-surface-default: var(--surface-neutral-50);
+  --input-surface-active: var(--surface-neutral-50);
+  --input-surface-disabled: var(--surface-neutral-100);
+  --input-surface-negative: var(--surface-neutral-50);
+
+  --input-border-default: var(--border-neutral-100);
+  --input-border-active: var(--border-brand-500-static);
+  --input-border-disabled: var(--border-neutral-100);
+  --input-border-negative: var(--border-status-negative);
+
+  --input-icon-default: var(--surface-neutral-300);
+  --input-icon-positive: var(--surface-status-positive-600-static);
+  --input-icon-negative: var(--border-status-negative);
+  --input-icon-warning: var(--surface-status-warning-500);
+
+  --input-text-label-default: var(--text-body-primary);
+  --input-text-label-disabled: var(--text-body-tertiary);
+
+  --input-text-field-default: var(--text-body-primary);
+  --input-text-field-disabled: var(--text-body-tertiary);
+  --input-text-field-placeholder: var(--text-body-tertiary);
+
+  --input-text-helper-default: var(--text-body-secondary);
+  --input-text-helper-disabled: var(--text-body-tertiary);
+  --input-text-helper-negative: var(--text-status-negative);
+
+  /* Dropdown */
+
+  --dropdown-surface-default: var(--surface-neutral-50);
+  --dropdown-surface-active: var(--surface-neutral-50);
+  --dropdown-surface-disabled: var(--surface-neutral-100);
+  --dropdown-surface-negative: var(--surface-neutral-50);
+
+  --dropdown-border-default: var(--border-neutral-100);
+  --dropdown-border-active: var(--border-brand-500-static);
+  --dropdown-border-disabled: var(--border-neutral-100);
+  --dropdown-border-negative: var(--border-status-negative);
+
+  --dropdown-icon-default: var(--surface-neutral-300);
+  --dropdown-icon-positive: var(--surface-status-positive-600-static);
+  --dropdown-icon-negative: var(--border-status-negative);
+  --dropdown-icon-warning: var(--surface-status-warning-500);
+
+  --dropdown-text-label-default: var(--text-body-primary);
+  --dropdown-text-label-disabled: var(--text-body-tertiary);
+
+  --dropdown-text-input-default: var(--text-body-primary);
+  --dropdown-text-input-disabled: var(--text-body-tertiary);
+  --dropdown-text-input-placeholder: var(--text-body-tertiary);
+
+  --dropdown-text-helper-default: var(--text-body-secondary);
+  --dropdown-text-helper-disabled: var(--text-body-tertiary);
+  --dropdown-text-helper-negative: var(--text-status-negative);
+
+  /* Link */
+
+  --link-default: var(--text-accent-brand-static);
+  --link-hover: var(--text-body-primary);
+  --link-disabled: var(--text-body-secondary);
+  --link-visited: var(--text-accent-brand-static);
+
+  /* Spinner */
+
+  --spinner-surface-primary: var(--surface-brand-500-static);
+  --spinner-surface-secondary: var(--surface-brand-50);
+  --spinner-surface-overlay: var(--surface-neutral-0);
+  --spinner-surface-overlay-opacity: 1;
+
+  --spinner-text-title: var(--text-body-primary);
+  --spinner-text-subtitle: var(--text-body-secondary);
+
+  /* Snackbar */
+
+  --snackbar-surface-neutral: var(--surface-brand-50);
+  --snackbar-surface-positive: var(--surface-status-positive-50);
+  --snackbar-surface-warning: var(--surface-status-warning-50);
+  --snackbar-surface-negative: var(--surface-status-negative-50);
+
+  --snackbar-border-neutral: var(--border-brand-500-static);
+  --snackbar-border-positive: var(--border-status-positive-static);
+  --snackbar-border-warning: var(--border-status-warning);
+  --snackbar-border-negative: var(--border-status-negative);
+
+  --snackbar-icon-brand: var(--icon-brand-500-static);
+  --snackbar-icon-positive: var(--icon-status-positive-static);
+  --snackbar-icon-negative: var(--icon-status-negative);
+  --snackbar-icon-warning: var(--icon-status-warning);
+
+  --snackbar-text-default: var(--text-body-primary);
+  --snackbar-text-link: var(--link-default);
+  --snackbar-text-positive: var(--text-status-positive-static);
+  --snackbar-text-warning: var(--text-status-warning);
+  --snackbar-text-negative: var(--text-status-negative);
+
+  /* Toggle-switch */
+
+  --toggle-switch-surface-primary-on: var(--surface-brand-500-static);
+  --toggle-switch-surface-primary-off: var(--surface-neutral-200);
+  --toggle-switch-surface-primary-disabled: var(--surface-neutral-200);
+
+  --toggle-switch-surface-secondary-on: var(--surface-neutral-100);
+  --toggle-switch-surface-secondary-off: var(--surface-neutral-100);
+  --toggle-switch-surface-secondary-disabled: var(--surface-neutral-200);
+
+  --toggle-switch-text-default: var(--text-body-primary);
+  --toggle-switch-text-disabled: var(--text-body-tertiary);
+  --toggle-switch-text-negative: var(--text-status-negative);
+  --toggle-switch-text-link: var(--text-accent-brand-static);
+}

package/dist/title-BfO5Dlzk.js

@@ -0,0 +1,25 @@
+import { d as o, y as s } from "./vendor-preact-CK0WeTOR.js";
+import { g as l } from "./instance-B-q0ZREN.js";
+import { u as c } from "./incodeModule-Dv8Qllrv.js";
+function h() {
+  const n = l(), [, e] = o(0), [d, r] = o(n.isInitialized);
+  return s(() => {
+    const t = () => {
+      e((a) => a + 1);
+    }, i = () => {
+      r(!0), e((a) => a + 1);
+    };
+    return n.on("languageChanged", t), n.on("initialized", i), n.on("loaded", t), () => {
+      n.off("languageChanged", t), n.off("initialized", i), n.off("loaded", t);
+    };
+  }, [n]), {
+    t: n.t.bind(n),
+    ready: d,
+    i18n: n
+  };
+}
+const m = ({ children: n, className: e }) => /* @__PURE__ */ c("h2", { class: `IncodeTitle ${e ?? ""}`, children: n });
+export {
+  m as T,
+  h as u
+};

package/dist/types/base.d.ts

@@ -0,0 +1 @@
+export { }

package/dist/types/dark.d.ts

@@ -0,0 +1 @@
+export { }

package/dist/types/email.d.ts

@@ -0,0 +1,57 @@
+import { EmailConfig } from '@incodetech/core/email';
+import { FC } from 'preact/compat';
+
+/**
+ * Email verification UI component.
+ *
+ * Provides a complete email verification experience including:
+ * - Email address input with validation
+ * - OTP code entry with resend functionality
+ * - Loading states and error handling
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Email
+ *   config={{
+ *     otpVerification: true,
+ *     otpExpirationInMinutes: 5,
+ *     prefill: false,
+ *   }}
+ *   onFinish={() => router.push('/next-step')}
+ *   onError={(err) => toast.error(err)}
+ * />
+ * ```
+ *
+ * @see {@link createEmailManager} for headless usage
+ */
+export declare const Email: FC<EmailProps>;
+
+/**
+ * Props for the Email component
+ */
+declare type EmailProps = IncodeModuleProps<EmailConfig>;
+
+declare type IncodeModuleProps<TConfig, TResult = void> = {
+    /**
+     * Module configuration required to render the flow.
+     * For Web Components, this is typically assigned via `element.config = ...`.
+     */
+    config?: TConfig;
+    /**
+     * Callback invoked when the module completes successfully.
+     * @param result - Optional result data from the module completion
+     */
+    onFinish?: (result?: TResult) => void;
+    /**
+     * Callback invoked when a fatal module error occurs.
+     */
+    onError?: (error: string | undefined) => void;
+};
+
+export { }
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'incode-email': HTMLElement & IncodeModuleProps<EmailConfig>;
+    }
+}

package/dist/types/flow.d.ts

@@ -0,0 +1,69 @@
+import { FC } from 'preact/compat';
+import { FinishStatus } from '@incodetech/core/flow';
+import { WasmConfig } from '@incodetech/core';
+
+export declare type FlowConfig = {
+    apiURL: string;
+    token: string;
+    wasmConfig?: WasmConfig;
+    lang?: string;
+    disableDashboardTheme?: boolean;
+    onModuleLoading?: (moduleKey: string) => void;
+    onModuleLoaded?: (moduleKey: string) => void;
+    onWasmWarmup?: (pipelines: string[]) => void;
+    spinnerConfig?: SpinnerConfig;
+};
+
+export declare const IncodeFlow: FC<IncodeFlowProps>;
+
+declare type IncodeFlowProps = IncodeModuleProps<FlowConfig, FinishStatus>;
+
+declare type IncodeModuleProps<TConfig, TResult = void> = {
+    /**
+     * Module configuration required to render the flow.
+     * For Web Components, this is typically assigned via `element.config = ...`.
+     */
+    config?: TConfig;
+    /**
+     * Callback invoked when the module completes successfully.
+     * @param result - Optional result data from the module completion
+     */
+    onFinish?: (result?: TResult) => void;
+    /**
+     * Callback invoked when a fatal module error occurs.
+     */
+    onError?: (error: string | undefined) => void;
+};
+
+declare type PreloadConfig = {
+    apiURL: string;
+    token: string;
+    lang?: string;
+    disableDashboardTheme?: boolean;
+    wasmConfig?: WasmConfig;
+};
+
+export declare type PreloadHandle = {
+    get isReady(): boolean;
+    get error(): string | null;
+    waitUntilReady(): Promise<void>;
+    cancel(): void;
+};
+
+export declare function preloadIncodeFlow(config: PreloadConfig): PreloadHandle;
+
+export declare type SpinnerConfig = {
+    title?: string;
+    subtitle?: string;
+    size?: SpinnerSize;
+};
+
+declare type SpinnerSize = 'small' | 'medium' | 'large';
+
+export { }
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'incode-flow': HTMLElement & IncodeModuleProps<FlowConfig, FinishStatus>;
+    }
+}