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

package/dist/button.css

@@ -0,0 +1,335 @@
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+.IncodeLoadingIcon {
+  animation: var(--animate-spin, spin 1s linear infinite);
+  display: inline-block;
+  position: relative;
+}
+
+.IncodeLoadingIconPrimary, .IncodeLoadingIconSecondary {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+}
+
+.IncodeLoadingIconPrimaryIcon {
+  fill: var(--color-spinner-surface-primary, var(--spinner-surface-primary));
+}
+
+.IncodeLoadingIconSecondaryIcon {
+  fill: var(--color-spinner-surface-secondary, var(--spinner-surface-secondary));
+}
+
+.IncodeCaptureUploadingIconContainer {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+.IncodeSpacerFlex {
+  flex: 1;
+}
+
+.IncodeSpacerVertical0 {
+  height: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical2 {
+  height: var(--spacing-2, var(--spacing-2, 2px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical4 {
+  height: var(--spacing-4, var(--spacing-4, 4px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical8 {
+  height: var(--spacing-8, var(--spacing-8, 8px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical12 {
+  height: var(--spacing-12, var(--spacing-12, 12px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical16 {
+  height: var(--spacing-16, var(--spacing-16, 16px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical20 {
+  height: var(--spacing-20, var(--spacing-20, 20px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical24 {
+  height: var(--spacing-24, var(--spacing-24, 24px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical32 {
+  height: var(--spacing-32, var(--spacing-32, 32px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical40 {
+  height: var(--spacing-40, var(--spacing-40, 40px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical48 {
+  height: var(--spacing-48, var(--spacing-48, 48px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical64 {
+  height: var(--spacing-64, var(--spacing-64, 64px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical80 {
+  height: var(--spacing-80, var(--spacing-80, 80px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical96 {
+  height: var(--spacing-96, var(--spacing-96, 96px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical104 {
+  height: var(--spacing-104, var(--spacing-104, 104px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical120 {
+  height: var(--spacing-120, var(--spacing-120, 120px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical160 {
+  height: var(--spacing-160, var(--spacing-160, 160px));
+  width: 100%;
+}
+
+.IncodeSpacerVertical200 {
+  height: var(--spacing-200, var(--spacing-200, 200px));
+  width: 100%;
+}
+
+.IncodeSpacerHorizontal0 {
+  height: 100%;
+  width: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeSpacerHorizontal2 {
+  height: 100%;
+  width: var(--spacing-2, var(--spacing-2, 2px));
+}
+
+.IncodeSpacerHorizontal4 {
+  height: 100%;
+  width: var(--spacing-4, var(--spacing-4, 4px));
+}
+
+.IncodeSpacerHorizontal8 {
+  height: 100%;
+  width: var(--spacing-8, var(--spacing-8, 8px));
+}
+
+.IncodeSpacerHorizontal12 {
+  height: 100%;
+  width: var(--spacing-12, var(--spacing-12, 12px));
+}
+
+.IncodeSpacerHorizontal16 {
+  height: 100%;
+  width: var(--spacing-16, var(--spacing-16, 16px));
+}
+
+.IncodeSpacerHorizontal20 {
+  height: 100%;
+  width: var(--spacing-20, var(--spacing-20, 20px));
+}
+
+.IncodeSpacerHorizontal24 {
+  height: 100%;
+  width: var(--spacing-24, var(--spacing-24, 24px));
+}
+
+.IncodeSpacerHorizontal32 {
+  height: 100%;
+  width: var(--spacing-32, var(--spacing-32, 32px));
+}
+
+.IncodeSpacerHorizontal40 {
+  height: 100%;
+  width: var(--spacing-40, var(--spacing-40, 40px));
+}
+
+.IncodeSpacerHorizontal48 {
+  height: 100%;
+  width: var(--spacing-48, var(--spacing-48, 48px));
+}
+
+.IncodeSpacerHorizontal64 {
+  height: 100%;
+  width: var(--spacing-64, var(--spacing-64, 64px));
+}
+
+.IncodeSpacerHorizontal80 {
+  height: 100%;
+  width: var(--spacing-80, var(--spacing-80, 80px));
+}
+
+.IncodeSpacerHorizontal96 {
+  height: 100%;
+  width: var(--spacing-96, var(--spacing-96, 96px));
+}
+
+.IncodeSpacerHorizontal104 {
+  height: 100%;
+  width: var(--spacing-104, var(--spacing-104, 104px));
+}
+
+.IncodeSpacerHorizontal120 {
+  height: 100%;
+  width: var(--spacing-120, var(--spacing-120, 120px));
+}
+
+.IncodeSpacerHorizontal160 {
+  height: 100%;
+  width: var(--spacing-160, var(--spacing-160, 160px));
+}
+
+.IncodeSpacerHorizontal200 {
+  height: 100%;
+  width: var(--spacing-200, var(--spacing-200, 200px));
+}
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-duration: initial;
+      --tw-font-weight: initial;
+      --tw-border-style: solid;
+    }
+  }
+}
+
+.IncodeButton {
+  border-radius: var(--radius-button-primary, var(--button-primary-border-radius));
+  text-align: center;
+  width: 100%;
+  max-width: 420px;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
+  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
+  --tw-duration: .2s;
+  margin-inline: auto;
+  transition-duration: .2s;
+  display: block;
+}
+
+.IncodeButton.IncodeButtonPrimary {
+  background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
+  color: var(--color-button-primary-text-default, var(--button-primary-text-default));
+  padding-inline: var(--spacing-32, var(--spacing-32, 32px));
+  font-size: var(--text-18, var(--primitive-typography-size-18));
+  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  border-style: var(--tw-border-style);
+  border-width: 1.5px;
+  border-color: var(--color-button-primary-border-default, var(--button-primary-border-default));
+  padding-block: 18px;
+}
+
+.IncodeButton.IncodeButtonPrimary:active {
+  background-color: var(--color-button-primary-surface-pressed, var(--button-primary-surface-pressed));
+}
+
+.IncodeButton.IncodeButtonPrimary:not(.IncodeButtonLoading):disabled {
+  background-color: var(--color-button-primary-surface-disabled, var(--button-primary-surface-disabled));
+  color: var(--color-button-primary-text-disabled, var(--button-primary-text-disabled));
+  cursor: not-allowed;
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-button-primary-border-disabled, var(--button-primary-border-disabled));
+}
+
+.IncodeButton.IncodeButtonPrimary.IncodeButtonLoading {
+  min-height: 56px;
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+  pointer-events: none;
+  cursor: not-allowed;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeButton.IncodeButtonPrimary.IncodeButtonLoading .IncodeLoadingIconPrimaryIcon {
+  fill: var(--button-primary-text-default);
+}
+
+.IncodeButton.IncodeButtonPrimary.IncodeButtonLoading .IncodeLoadingIconSecondaryIcon {
+  fill: var(--surface-brand-400-static);
+}
+
+.IncodeButton.IncodeButtonLink {
+  color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
+  border-style: var(--tw-border-style);
+  border-width: var(--border-width-none, var(--border-none));
+  --tw-border-style: none;
+  font-size: var(--text-16, var(--primitive-typography-size-16));
+  --tw-font-weight: var(--font-weight-normal, 400);
+  font-weight: var(--font-weight-normal, 400);
+  background-color: #0000;
+  border-style: none;
+  width: 100%;
+  height: 56px;
+  text-decoration-line: underline;
+}
+
+.IncodeButton.IncodeButtonLink:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.IncodeButton.IncodeButtonLink.IncodeButtonLoading {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.IncodeButton.IncodeButtonLink.IncodeButtonLoading .IncodeLoadingIconPrimaryIcon {
+  fill: var(--button-primary-surface-default);
+}
+
+.IncodeButton.IncodeButtonLink.IncodeButtonLoading .IncodeLoadingIconSecondaryIcon {
+  fill: var(--surface-brand-400-static);
+}
+
+@property --tw-duration {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/dist/email/email.es.js

@@ -0,0 +1,145 @@
+import { u as e, S as g, a as h, B as v } from "../button-DeMZ_34N.js";
+import { createEmailManager as O } from "@incodetech/core/email";
+import { d as f, y as b, k as y } from "../vendor-preact-CK0WeTOR.js";
+import { a as V, I as P, P as E } from "../incodeModule-BF5MX9GT.js";
+import { O as k } from "../otpInput-BUrV4IAF.js";
+const I = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, w = ({
+  prefilledEmail: i,
+  emailError: s,
+  disabled: r = !1,
+  onEmailChange: t
+}) => {
+  const [n, o] = f("");
+  b(() => {
+    if (i) {
+      o(i);
+      const a = I.test(i.trim());
+      t(i.trim(), a);
+    }
+  }, [i, t]);
+  const m = (a) => {
+    const u = a.target.value;
+    o(u);
+    const l = u.trim(), c = l.length > 0 && I.test(l);
+    t(l, c);
+  }, p = s ? "email-error" : void 0;
+  return /* @__PURE__ */ e("div", { class: "IncodeEmailInput", children: /* @__PURE__ */ e("div", { class: "IncodeEmailInputContainer", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        class: `IncodeEmailInputWrapper ${s ? "IncodeEmailInputWrapperError" : ""} ${r ? "IncodeEmailInputWrapperDisabled" : ""}`,
+        children: [
+          /* @__PURE__ */ e("label", { for: "email-input", class: "IncodeEmailInputLabel", children: "Email" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              id: "email-input",
+              type: "email",
+              value: n,
+              onInput: m,
+              placeholder: "Email",
+              disabled: r,
+              class: "IncodeEmailInputField",
+              "data-testid": "email-input",
+              "aria-label": "Email address",
+              "aria-invalid": s ? "true" : "false",
+              "aria-describedby": p,
+              autocomplete: "email"
+            }
+          )
+        ]
+      }
+    ),
+    s && /* @__PURE__ */ e(y, { children: [
+      /* @__PURE__ */ e(g, { size: 8 }),
+      /* @__PURE__ */ e(
+        "p",
+        {
+          id: p,
+          class: "IncodeEmailInputError",
+          "data-testid": "email-error",
+          role: "alert",
+          children: s
+        }
+      )
+    ] })
+  ] }) });
+}, C = ({ config: i, onFinish: s, onError: r }) => {
+  const [t, n] = h(() => {
+    if (!i)
+      throw new Error("Email config is required");
+    return O({ config: i });
+  }), [o, m] = f(!1);
+  if (b(() => {
+    if (t.status === "idle" && n.load)
+      try {
+        n.load();
+      } catch (a) {
+        r?.(
+          a instanceof Error ? a.message : "Failed to initialize email verification"
+        );
+      }
+  }, []), t.status === "idle" || t.status === "loadingPrefill" || t.status === "inputting" || t.status === "submitting" || t.status === "sendingOtp") {
+    const a = t.status === "idle" || t.status === "loadingPrefill" || t.status === "submitting" || t.status === "sendingOtp", d = t.status === "inputting" ? t.prefilledEmail : void 0, u = t.status === "inputting" ? t.emailError : void 0;
+    return /* @__PURE__ */ e(
+      E,
+      {
+        className: "IncodeEmailPage",
+        title: "Verify Email",
+        subtitle: i.otpVerification ? "We will send you a verification code" : void 0,
+        children: [
+          /* @__PURE__ */ e(
+            w,
+            {
+              prefilledEmail: d,
+              emailError: u,
+              disabled: a,
+              onEmailChange: (l, c) => {
+                n.setEmail(l, c), m(c);
+              }
+            }
+          ),
+          /* @__PURE__ */ e(g, {}),
+          /* @__PURE__ */ e(
+            v,
+            {
+              onClick: () => n.submit(),
+              disabled: !o,
+              isLoading: a,
+              "data-testid": "email-submit",
+              children: "Continue"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (t.status === "awaitingOtp" || t.status === "verifyingOtp" || t.status === "otpError") {
+    const a = t.status === "verifyingOtp";
+    return /* @__PURE__ */ e(
+      E,
+      {
+        className: "IncodeEmailPage IncodeEmailOtpPage",
+        title: "Enter Verification Code",
+        children: /* @__PURE__ */ e(
+          k,
+          {
+            resendTimer: t.status === "awaitingOtp" ? t.resendTimer : 0,
+            canResend: t.status === "awaitingOtp" ? t.canResend : !1,
+            error: t.status === "otpError" ? t.error : void 0,
+            onSubmit: (d) => n.submitOtp(d),
+            onResend: () => n.resendOtp(),
+            onBack: () => n.back(),
+            backLinkText: "change email address",
+            isLoading: a
+          }
+        )
+      }
+    );
+  }
+  return t.status === "success" ? (s?.(), null) : (t.status === "error" && r?.(t.error), null);
+}, L = ({ config: i, onFinish: s, onError: r }) => /* @__PURE__ */ e(P, { children: i ? /* @__PURE__ */ e(C, { config: i, onFinish: s, onError: r }) : null });
+V(L, "incode-email");
+export {
+  L as Email
+};

package/dist/email/styles.css

@@ -0,0 +1,123 @@
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-duration: initial;
+      --tw-font-weight: initial;
+    }
+  }
+}
+
+.IncodeEmailPage .IncodePageContent {
+  padding-top: var(--spacing-32, var(--spacing-32, 32px));
+  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
+}
+
+.IncodeEmailInput, .IncodeEmailInputContainer {
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeEmailInputWrapper {
+  border-radius: var(--radius-small, var(--border-radius-small));
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-input-border-default, var(--input-border-default));
+  background-color: var(--color-input-surface-default, var(--input-surface-default));
+  width: 100%;
+  max-width: 340px;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
+  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
+  --tw-duration: .2s;
+  flex-direction: column;
+  transition-duration: .2s;
+  display: flex;
+}
+
+.IncodeEmailInputWrapper:focus-within {
+  border-color: var(--color-input-border-active, var(--input-border-active));
+}
+
+.IncodeEmailInputWrapper.IncodeEmailInputWrapperError {
+  border-color: var(--color-input-border-negative, var(--input-border-negative));
+}
+
+.IncodeEmailInputWrapper.IncodeEmailInputWrapperDisabled {
+  border-color: var(--color-input-border-disabled, var(--input-border-disabled));
+  background-color: var(--color-input-surface-disabled, var(--input-surface-disabled));
+}
+
+.IncodeEmailInputLabel {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.IncodeEmailInputField {
+  border-style: var(--tw-border-style);
+  border-width: var(--border-width-none, var(--border-none));
+  --tw-border-style: none;
+  width: 100%;
+  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
+  padding-block: var(--spacing-16, var(--spacing-16, 16px));
+  font-size: var(--text-18, var(--primitive-typography-size-18));
+  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  color: var(--color-input-text-field-default, var(--input-text-field-default));
+  --tw-outline-style: none;
+  border-radius: var(--radius-small, var(--border-radius-small));
+  background-color: #0000;
+  border-style: none;
+  outline-style: none;
+}
+
+.IncodeEmailInputField::placeholder {
+  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
+}
+
+.IncodeEmailInputField:disabled {
+  cursor: not-allowed;
+  color: var(--color-input-text-field-disabled, var(--input-text-field-disabled));
+}
+
+.IncodeEmailInputField:focus {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+
+.IncodeEmailInputError {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  text-align: center;
+  font-size: var(--text-14, var(--primitive-typography-size-14));
+  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-duration {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false
+}

package/dist/flow/flow.es.js

@@ -0,0 +1,9 @@
+import "../button-DeMZ_34N.js";
+import "@incodetech/core/flow";
+import "../vendor-preact-CK0WeTOR.js";
+import "../title-ng7q7YDh.js";
+import { I as i, p as a } from "../flow-ZK6OBsa3.js";
+export {
+  i as IncodeFlow,
+  a as preloadIncodeFlow
+};