@prohetamine/redstone 0.0.1

package/dist/index-DVf4BnNh.mjs

@@ -0,0 +1,352 @@
+import { bR as C, bS as O, bT as P, bU as h, bV as w, bW as v, bX as l, c0 as E, cv as d, b$ as x, cw as g, c3 as S, ci as $, cc as R, c4 as T } from "./index-B6Mg114Z.mjs";
+const L = C`
+  :host {
+    position: relative;
+    display: inline-block;
+  }
+
+  input {
+    width: 48px;
+    height: 48px;
+    background: ${({ tokens: n }) => n.theme.foregroundPrimary};
+    border-radius: ${({ borderRadius: n }) => n[4]};
+    border: 1px solid ${({ tokens: n }) => n.theme.borderPrimary};
+    font-family: ${({ fontFamily: n }) => n.regular};
+    font-size: ${({ textSize: n }) => n.large};
+    line-height: 18px;
+    letter-spacing: -0.16px;
+    text-align: center;
+    color: ${({ tokens: n }) => n.theme.textPrimary};
+    caret-color: ${({ tokens: n }) => n.core.textAccentPrimary};
+    transition:
+      background-color ${({ durations: n }) => n.lg}
+        ${({ easings: n }) => n["ease-out-power-2"]},
+      border-color ${({ durations: n }) => n.lg}
+        ${({ easings: n }) => n["ease-out-power-2"]},
+      box-shadow ${({ durations: n }) => n.lg}
+        ${({ easings: n }) => n["ease-out-power-2"]};
+    will-change: background-color, border-color, box-shadow;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
+    padding: ${({ spacing: n }) => n[4]};
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  input:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  input:focus-visible:enabled {
+    background-color: transparent;
+    border: 1px solid ${({ tokens: n }) => n.theme.borderSecondary};
+    box-shadow: 0px 0px 0px 4px ${({ tokens: n }) => n.core.foregroundAccent040};
+  }
+`;
+var y = function(n, t, e, i) {
+  var s = arguments.length, o = s < 3 ? t : i === null ? i = Object.getOwnPropertyDescriptor(t, e) : i, r;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") o = Reflect.decorate(n, t, e, i);
+  else for (var a = n.length - 1; a >= 0; a--) (r = n[a]) && (o = (s < 3 ? r(o) : s > 3 ? r(t, e, o) : r(t, e)) || o);
+  return s > 3 && o && Object.defineProperty(t, e, o), o;
+};
+let p = class extends v {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.value = "";
+  }
+  render() {
+    return l`<input
+      type="number"
+      maxlength="1"
+      inputmode="numeric"
+      autofocus
+      ?disabled=${this.disabled}
+      value=${this.value}
+    /> `;
+  }
+};
+p.styles = [O, P, L];
+y([
+  h({ type: Boolean })
+], p.prototype, "disabled", void 0);
+y([
+  h({ type: String })
+], p.prototype, "value", void 0);
+p = y([
+  w("wui-input-numeric")
+], p);
+const _ = E`
+  :host {
+    position: relative;
+    display: block;
+  }
+`;
+var m = function(n, t, e, i) {
+  var s = arguments.length, o = s < 3 ? t : i === null ? i = Object.getOwnPropertyDescriptor(t, e) : i, r;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") o = Reflect.decorate(n, t, e, i);
+  else for (var a = n.length - 1; a >= 0; a--) (r = n[a]) && (o = (s < 3 ? r(o) : s > 3 ? r(t, e, o) : r(t, e)) || o);
+  return s > 3 && o && Object.defineProperty(t, e, o), o;
+};
+let c = class extends v {
+  constructor() {
+    super(...arguments), this.length = 6, this.otp = "", this.values = Array.from({ length: this.length }).map(() => ""), this.numerics = [], this.shouldInputBeEnabled = (t) => this.values.slice(0, t).every((i) => i !== ""), this.handleKeyDown = (t, e) => {
+      const i = t.target, s = this.getInputElement(i), o = ["ArrowLeft", "ArrowRight", "Shift", "Delete"];
+      if (!s)
+        return;
+      o.includes(t.key) && t.preventDefault();
+      const r = s.selectionStart;
+      switch (t.key) {
+        case "ArrowLeft":
+          r && s.setSelectionRange(r + 1, r + 1), this.focusInputField("prev", e);
+          break;
+        case "ArrowRight":
+          this.focusInputField("next", e);
+          break;
+        case "Shift":
+          this.focusInputField("next", e);
+          break;
+        case "Delete":
+          s.value === "" ? this.focusInputField("prev", e) : this.updateInput(s, e, "");
+          break;
+        case "Backspace":
+          s.value === "" ? this.focusInputField("prev", e) : this.updateInput(s, e, "");
+          break;
+      }
+    }, this.focusInputField = (t, e) => {
+      if (t === "next") {
+        const i = e + 1;
+        if (!this.shouldInputBeEnabled(i))
+          return;
+        const s = this.numerics[i < this.length ? i : e], o = s ? this.getInputElement(s) : void 0;
+        o && (o.disabled = !1, o.focus());
+      }
+      if (t === "prev") {
+        const i = e - 1, s = this.numerics[i > -1 ? i : e], o = s ? this.getInputElement(s) : void 0;
+        o && o.focus();
+      }
+    };
+  }
+  firstUpdated() {
+    var e, i;
+    this.otp && (this.values = this.otp.split(""));
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("wui-input-numeric");
+    t && (this.numerics = Array.from(t)), (i = this.numerics[0]) == null || i.focus();
+  }
+  render() {
+    return l`
+      <wui-flex gap="1" data-testid="wui-otp-input">
+        ${Array.from({ length: this.length }).map((t, e) => l`
+            <wui-input-numeric
+              @input=${(i) => this.handleInput(i, e)}
+              @click=${(i) => this.selectInput(i)}
+              @keydown=${(i) => this.handleKeyDown(i, e)}
+              .disabled=${!this.shouldInputBeEnabled(e)}
+              .value=${this.values[e] || ""}
+            >
+            </wui-input-numeric>
+          `)}
+      </wui-flex>
+    `;
+  }
+  updateInput(t, e, i) {
+    const s = this.numerics[e], o = t || (s ? this.getInputElement(s) : void 0);
+    o && (o.value = i, this.values = this.values.map((r, a) => a === e ? i : r));
+  }
+  selectInput(t) {
+    const e = t.target;
+    if (e) {
+      const i = this.getInputElement(e);
+      i == null || i.select();
+    }
+  }
+  handleInput(t, e) {
+    const i = t.target, s = this.getInputElement(i);
+    if (s) {
+      const o = s.value;
+      t.inputType === "insertFromPaste" ? this.handlePaste(s, o, e) : x.isNumber(o) && t.data ? (this.updateInput(s, e, t.data), this.focusInputField("next", e)) : this.updateInput(s, e, "");
+    }
+    this.dispatchInputChangeEvent();
+  }
+  handlePaste(t, e, i) {
+    const s = e[0];
+    if (s && x.isNumber(s)) {
+      this.updateInput(t, i, s);
+      const r = e.substring(1);
+      if (i + 1 < this.length && r.length) {
+        const a = this.numerics[i + 1], I = a ? this.getInputElement(a) : void 0;
+        I && this.handlePaste(I, r, i + 1);
+      } else
+        this.focusInputField("next", i);
+    } else
+      this.updateInput(t, i, "");
+  }
+  getInputElement(t) {
+    var e;
+    return (e = t.shadowRoot) != null && e.querySelector("input") ? t.shadowRoot.querySelector("input") : null;
+  }
+  dispatchInputChangeEvent() {
+    const t = this.values.join("");
+    this.dispatchEvent(new CustomEvent("inputChange", {
+      detail: t,
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+};
+c.styles = [O, _];
+m([
+  h({ type: Number })
+], c.prototype, "length", void 0);
+m([
+  h({ type: String })
+], c.prototype, "otp", void 0);
+m([
+  d()
+], c.prototype, "values", void 0);
+c = m([
+  w("wui-otp")
+], c);
+const k = E`
+  wui-loading-spinner {
+    margin: 9px auto;
+  }
+
+  .email-display,
+  .email-display wui-text {
+    max-width: 100%;
+  }
+`;
+var f = function(n, t, e, i) {
+  var s = arguments.length, o = s < 3 ? t : i === null ? i = Object.getOwnPropertyDescriptor(t, e) : i, r;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") o = Reflect.decorate(n, t, e, i);
+  else for (var a = n.length - 1; a >= 0; a--) (r = n[a]) && (o = (s < 3 ? r(o) : s > 3 ? r(t, e, o) : r(t, e)) || o);
+  return s > 3 && o && Object.defineProperty(t, e, o), o;
+}, b;
+let u = b = class extends v {
+  firstUpdated() {
+    this.startOTPTimeout();
+  }
+  disconnectedCallback() {
+    clearTimeout(this.OTPTimeout);
+  }
+  constructor() {
+    var t;
+    super(), this.loading = !1, this.timeoutTimeLeft = g.getTimeToNextEmailLogin(), this.error = "", this.otp = "", this.email = (t = S.state.data) == null ? void 0 : t.email, this.authConnector = $.getAuthConnector();
+  }
+  render() {
+    if (!this.email)
+      throw new Error("w3m-email-otp-widget: No email provided");
+    const t = !!this.timeoutTimeLeft, e = this.getFooterLabels(t);
+    return l`
+      <wui-flex
+        flexDirection="column"
+        alignItems="center"
+        .padding=${["4", "0", "4", "0"]}
+        gap="4"
+      >
+        <wui-flex
+          class="email-display"
+          flexDirection="column"
+          alignItems="center"
+          .padding=${["0", "5", "0", "5"]}
+        >
+          <wui-text variant="md-regular" color="primary" align="center">
+            Enter the code we sent to
+          </wui-text>
+          <wui-text variant="md-medium" color="primary" lineClamp="1" align="center">
+            ${this.email}
+          </wui-text>
+        </wui-flex>
+
+        <wui-text variant="sm-regular" color="secondary">The code expires in 20 minutes</wui-text>
+
+        ${this.loading ? l`<wui-loading-spinner size="xl" color="accent-primary"></wui-loading-spinner>` : l` <wui-flex flexDirection="column" alignItems="center" gap="2">
+              <wui-otp
+                dissabled
+                length="6"
+                @inputChange=${this.onOtpInputChange.bind(this)}
+                .otp=${this.otp}
+              ></wui-otp>
+              ${this.error ? l`
+                    <wui-text variant="sm-regular" align="center" color="error">
+                      ${this.error}. Try Again
+                    </wui-text>
+                  ` : null}
+            </wui-flex>`}
+
+        <wui-flex alignItems="center" gap="2">
+          <wui-text variant="sm-regular" color="secondary">${e.title}</wui-text>
+          <wui-link @click=${this.onResendCode.bind(this)} .disabled=${t}>
+            ${e.action}
+          </wui-link>
+        </wui-flex>
+      </wui-flex>
+    `;
+  }
+  startOTPTimeout() {
+    this.timeoutTimeLeft = g.getTimeToNextEmailLogin(), this.OTPTimeout = setInterval(() => {
+      this.timeoutTimeLeft > 0 ? this.timeoutTimeLeft = g.getTimeToNextEmailLogin() : clearInterval(this.OTPTimeout);
+    }, 1e3);
+  }
+  async onOtpInputChange(t) {
+    var e;
+    try {
+      this.loading || (this.otp = t.detail, this.shouldSubmitOnOtpChange() && (this.loading = !0, await ((e = this.onOtpSubmit) == null ? void 0 : e.call(this, this.otp))));
+    } catch (i) {
+      this.error = R.parseError(i), this.loading = !1;
+    }
+  }
+  async onResendCode() {
+    try {
+      if (this.onOtpResend) {
+        if (!this.loading && !this.timeoutTimeLeft) {
+          if (this.error = "", this.otp = "", !$.getAuthConnector() || !this.email)
+            throw new Error("w3m-email-otp-widget: Unable to resend email");
+          this.loading = !0, await this.onOtpResend(this.email), this.startOTPTimeout(), T.showSuccess("Code email resent");
+        }
+      } else this.onStartOver && this.onStartOver();
+    } catch (t) {
+      T.showError(t);
+    } finally {
+      this.loading = !1;
+    }
+  }
+  getFooterLabels(t) {
+    return this.onStartOver ? {
+      title: "Something wrong?",
+      action: `Try again ${t ? `in ${this.timeoutTimeLeft}s` : ""}`
+    } : {
+      title: "Didn't receive it?",
+      action: `Resend ${t ? `in ${this.timeoutTimeLeft}s` : "Code"}`
+    };
+  }
+  shouldSubmitOnOtpChange() {
+    return this.authConnector && this.otp.length === b.OTP_LENGTH;
+  }
+};
+u.OTP_LENGTH = 6;
+u.styles = k;
+f([
+  d()
+], u.prototype, "loading", void 0);
+f([
+  d()
+], u.prototype, "timeoutTimeLeft", void 0);
+f([
+  d()
+], u.prototype, "error", void 0);
+u = b = f([
+  w("w3m-email-otp-widget")
+], u);
+export {
+  u as W
+};

package/dist/index-DhN9vL4k.js

@@ -0,0 +1,138 @@
+"use strict";const t=require("./index-CjZQCcwG.js"),u=t.css`
+  button {
+    display: block;
+    display: flex;
+    align-items: center;
+    padding: ${({spacing:e})=>e[1]};
+    transition: background-color ${({durations:e})=>e.lg}
+      ${({easings:e})=>e["ease-out-power-2"]};
+    will-change: background-color;
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+    border-radius: ${({borderRadius:e})=>e[32]};
+  }
+
+  wui-image {
+    border-radius: ${({borderRadius:e})=>e[32]};
+  }
+
+  wui-text {
+    padding-left: ${({spacing:e})=>e[1]};
+    padding-right: ${({spacing:e})=>e[1]};
+  }
+
+  .left-icon-container {
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .left-image-container {
+    position: relative;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .chain-image {
+    position: absolute;
+    border: 1px solid ${({tokens:e})=>e.theme.foregroundPrimary};
+  }
+
+  /* -- Sizes --------------------------------------------------- */
+  button[data-size='lg'] {
+    height: 32px;
+  }
+
+  button[data-size='md'] {
+    height: 28px;
+  }
+
+  button[data-size='sm'] {
+    height: 24px;
+  }
+
+  button[data-size='lg'] .token-image {
+    width: 24px;
+    height: 24px;
+  }
+
+  button[data-size='md'] .token-image {
+    width: 20px;
+    height: 20px;
+  }
+
+  button[data-size='sm'] .token-image {
+    width: 16px;
+    height: 16px;
+  }
+
+  button[data-size='lg'] .left-icon-container {
+    width: 24px;
+    height: 24px;
+  }
+
+  button[data-size='md'] .left-icon-container {
+    width: 20px;
+    height: 20px;
+  }
+
+  button[data-size='sm'] .left-icon-container {
+    width: 16px;
+    height: 16px;
+  }
+
+  button[data-size='lg'] .chain-image {
+    width: 12px;
+    height: 12px;
+    bottom: 2px;
+    right: -4px;
+  }
+
+  button[data-size='md'] .chain-image {
+    width: 10px;
+    height: 10px;
+    bottom: 2px;
+    right: -4px;
+  }
+
+  button[data-size='sm'] .chain-image {
+    width: 8px;
+    height: 8px;
+    bottom: 2px;
+    right: -3px;
+  }
+
+  /* -- Focus states --------------------------------------------------- */
+  button:focus-visible:enabled {
+    background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+    box-shadow: 0 0 0 4px ${({tokens:e})=>e.core.foregroundAccent040};
+  }
+
+  /* -- Hover & Active states ----------------------------------------------------------- */
+  @media (hover: hover) {
+    button:hover:enabled,
+    button:active:enabled {
+      background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+    }
+  }
+
+  /* -- Disabled states --------------------------------------------------- */
+  button:disabled {
+    background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+    opacity: 0.5;
+  }
+`;var a=function(e,i,r,s){var d=arguments.length,n=d<3?i:s===null?s=Object.getOwnPropertyDescriptor(i,r):s,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(e,i,r,s);else for(var l=e.length-1;l>=0;l--)(c=e[l])&&(n=(d<3?c(n):d>3?c(i,r,n):c(i,r))||n);return d>3&&n&&Object.defineProperty(i,r,n),n};const h={lg:"lg-regular",md:"lg-regular",sm:"md-regular"},g={lg:"lg",md:"md",sm:"sm"};let o=class extends t.i{constructor(){super(...arguments),this.size="md",this.disabled=!1,this.text="",this.loading=!1}render(){return this.loading?t.b` <wui-flex alignItems="center" gap="01" padding="01">
+        <wui-shimmer width="20px" height="20px"></wui-shimmer>
+        <wui-shimmer width="32px" height="18px" borderRadius="4xs"></wui-shimmer>
+      </wui-flex>`:t.b`
+      <button ?disabled=${this.disabled} data-size=${this.size}>
+        ${this.imageTemplate()} ${this.textTemplate()}
+      </button>
+    `}imageTemplate(){if(this.imageSrc&&this.chainImageSrc)return t.b`<wui-flex class="left-image-container">
+        <wui-image src=${this.imageSrc} class="token-image"></wui-image>
+        <wui-image src=${this.chainImageSrc} class="chain-image"></wui-image>
+      </wui-flex>`;if(this.imageSrc)return t.b`<wui-image src=${this.imageSrc} class="token-image"></wui-image>`;const i=g[this.size];return t.b`<wui-flex class="left-icon-container">
+      <wui-icon size=${i} name="networkPlaceholder"></wui-icon>
+    </wui-flex>`}textTemplate(){const i=h[this.size];return t.b`<wui-text color="primary" variant=${i}
+      >${this.text}</wui-text
+    >`}};o.styles=[t.resetStyles,t.elementStyles,u];a([t.n()],o.prototype,"size",void 0);a([t.n()],o.prototype,"imageSrc",void 0);a([t.n()],o.prototype,"chainImageSrc",void 0);a([t.n({type:Boolean})],o.prototype,"disabled",void 0);a([t.n()],o.prototype,"text",void 0);a([t.n({type:Boolean})],o.prototype,"loading",void 0);o=a([t.customElement("wui-token-button")],o);