@transcodes/ui-components 0.3.0 → 0.3.1

package/dist/primitives/tc-otp-input.js

@@ -0,0 +1,230 @@
+import { LitElement as u, html as h, css as p } from "lit";
+import { property as c, state as d, customElement as v } from "lit/decorators.js";
+import { sharedStyles as m } from "../styles/shared.js";
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? f(e, s) : e, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (a = (r ? l(e, s, a) : l(a)) || a);
+  return r && a && g(e, s, a), a;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.length = 6, this.error = !1, this.disabled = !1, this.showProgress = !0, this.values = [];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.values = new Array(this.length).fill("");
+  }
+  render() {
+    const e = this.values.filter((s) => s.length > 0).length / this.length * 100;
+    return h`
+      <div class="container">
+        <div part="cells" class="cells" role="group" aria-label="OTP input">
+          ${this.values.map((s, r) => {
+      const o = [
+        "cell",
+        s.length > 0 ? "cell--filled" : "",
+        this.error ? "cell--error" : ""
+      ].filter(Boolean).join(" ");
+      return h`
+              <input
+                part="cell"
+                class=${o}
+                type="text"
+                inputmode="numeric"
+                maxlength="1"
+                pattern="[0-9]"
+                .value=${s}
+                ?disabled=${this.disabled}
+                aria-label="Digit ${r + 1}"
+                @input=${(l) => this.handleInput(l, r)}
+                @keydown=${(l) => this.handleKeydown(l, r)}
+                @paste=${(l) => this.handlePaste(l)}
+              />
+            `;
+    })}
+        </div>
+        ${this.showProgress ? h`
+              <div part="progress" class="progress">
+                <div
+                  part="progress-bar"
+                  class="progress-bar"
+                  style="width: ${e}%"
+                ></div>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+  handleInput(t, e) {
+    const r = t.target.value.replace(/\D/g, "").slice(0, 1);
+    this.values = [...this.values], this.values[e] = r, this.dispatchEvent(
+      new CustomEvent("tc-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.values.join(""), values: [...this.values] }
+      })
+    ), r && e < this.length - 1 && this.focusCell(e + 1), this.values.every((a) => a.length > 0) && this.dispatchEvent(
+      new CustomEvent("tc-complete", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.values.join("") }
+      })
+    );
+  }
+  handleKeydown(t, e) {
+    t.key === "Backspace" && !this.values[e] && e > 0 ? (t.preventDefault(), this.values = [...this.values], this.values[e - 1] = "", this.focusCell(e - 1)) : t.key === "ArrowLeft" && e > 0 ? (t.preventDefault(), this.focusCell(e - 1)) : t.key === "ArrowRight" && e < this.length - 1 && (t.preventDefault(), this.focusCell(e + 1));
+  }
+  handlePaste(t) {
+    t.preventDefault();
+    const s = (t.clipboardData?.getData("text") || "").replace(/\D/g, "").slice(0, this.length);
+    if (s) {
+      this.values = new Array(this.length).fill(""), s.split("").forEach((a, o) => {
+        this.values[o] = a;
+      }), this.values = [...this.values];
+      const r = Math.min(s.length, this.length - 1);
+      this.focusCell(r), this.dispatchEvent(
+        new CustomEvent("tc-change", {
+          bubbles: !0,
+          composed: !0,
+          detail: { value: this.values.join(""), values: [...this.values] }
+        })
+      ), s.length >= this.length && this.dispatchEvent(
+        new CustomEvent("tc-complete", {
+          bubbles: !0,
+          composed: !0,
+          detail: { value: this.values.join("") }
+        })
+      );
+    }
+  }
+  focusCell(t) {
+    requestAnimationFrame(() => {
+      this.shadowRoot?.querySelectorAll(
+        ".cell"
+      )?.[t]?.focus();
+    });
+  }
+  /** Focus the first empty cell or the last cell */
+  focus() {
+    const t = this.values.findIndex((s) => !s), e = t >= 0 ? t : this.length - 1;
+    this.focusCell(e);
+  }
+  /** Clear all values */
+  clear() {
+    this.values = new Array(this.length).fill(""), this.focusCell(0);
+  }
+  /** Get the current OTP value */
+  getValue() {
+    return this.values.join("");
+  }
+};
+i.styles = [
+  m,
+  p`
+      :host {
+        display: block;
+      }
+
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-md);
+      }
+
+      .cells {
+        display: flex;
+        gap: var(--space-sm);
+        justify-content: center;
+      }
+
+      .cell {
+        width: clamp(2.625rem, 2.35rem + 1.36vw, 3rem);
+        height: clamp(3.125rem, 2.78rem + 1.74vw, 3.5rem);
+        border: var(--size-border-width-thick) solid transparent;
+        border-radius: var(--radius-md);
+        background: var(--paper-cream);
+        font-family: var(--font-body);
+        font-size: clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem);
+        font-weight: 600;
+        text-align: center;
+        color: var(--ink-black);
+        transition: all var(--duration-instant) ease;
+        caret-color: var(--accent-primary);
+      }
+
+      .cell:focus {
+        outline: none;
+        background: var(--paper-white);
+        border-color: var(--accent-primary);
+        box-shadow: var(--shadow-otp-cell-focus);
+      }
+
+      .cell--filled {
+        background: var(--paper-white);
+        border-color: var(--ink-faint);
+      }
+
+      .cell--error {
+        border-color: var(--error-base) !important;
+        animation: shake var(--duration-smooth) ease;
+      }
+
+      .cell:disabled {
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+      }
+
+      /* Progress bar */
+      .progress {
+        width: 100%;
+        max-width: 12rem;
+        height: var(--size-border-width-heavy);
+        background: var(--paper-warm);
+        border-radius: var(--radius-full);
+        overflow: hidden;
+      }
+
+      .progress-bar {
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          var(--accent-primary) 0%,
+          var(--accent-primary-hover) 100%
+        );
+        transition: width var(--duration-instant) ease;
+      }
+
+      /* Reduced motion */
+      @media (prefers-reduced-motion: reduce) {
+        .cell,
+        .progress-bar {
+          transition-duration: 0.01ms !important;
+        }
+
+        .cell--error {
+          animation: none;
+        }
+      }
+    `
+];
+n([
+  c({ type: Number })
+], i.prototype, "length", 2);
+n([
+  c({ type: Boolean })
+], i.prototype, "error", 2);
+n([
+  c({ type: Boolean })
+], i.prototype, "disabled", 2);
+n([
+  c({ type: Boolean, attribute: "show-progress" })
+], i.prototype, "showProgress", 2);
+n([
+  d()
+], i.prototype, "values", 2);
+i = n([
+  v("tc-otp-input")
+], i);
+export {
+  i as TcOtpInput
+};

package/dist/primitives/tc-section.js

@@ -0,0 +1,48 @@
+import { LitElement as a, html as m, css as y } from "lit";
+import { property as n, customElement as f } from "lit/decorators.js";
+import { styleMap as h } from "lit/directives/style-map.js";
+var u = Object.defineProperty, d = Object.getOwnPropertyDescriptor, l = (s, r, p, o) => {
+  for (var t = o > 1 ? void 0 : o ? d(r, p) : r, c = s.length - 1, i; c >= 0; c--)
+    (i = s[c]) && (t = (o ? i(r, p, t) : i(t)) || t);
+  return o && t && u(r, p, t), t;
+};
+let e = class extends a {
+  constructor() {
+    super(...arguments), this.gap = "var(--space-md)", this.sx = {};
+  }
+  render() {
+    const s = {
+      gap: this.gap,
+      ...this.sx
+    };
+    return m`
+      <section part="section" class="section" style=${h(s)}>
+        <slot></slot>
+      </section>
+    `;
+  }
+};
+e.styles = y`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .section {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+  `;
+l([
+  n({ type: String })
+], e.prototype, "gap", 2);
+l([
+  n({ type: Object })
+], e.prototype, "sx", 2);
+e = l([
+  f("tc-section")
+], e);
+export {
+  e as TcSection
+};

package/dist/primitives/tc-spinner.js

@@ -0,0 +1,87 @@
+import { LitElement as d, html as h, css as m } from "lit";
+import { property as l, customElement as c } from "lit/decorators.js";
+import { MatchMediaController as v } from "../controllers/match-media.controller.js";
+import { sharedStyles as b } from "../styles/shared.js";
+var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, a = (e, s, n, t) => {
+  for (var r = t > 1 ? void 0 : t ? z(s, n) : s, o = e.length - 1, p; o >= 0; o--)
+    (p = e[o]) && (r = (t ? p(s, n, r) : p(r)) || r);
+  return t && r && w(s, n, r), r;
+};
+let i = class extends d {
+  constructor() {
+    super(...arguments), this.mobile = new v(this, "(max-width: 768px)"), this.size = "auto", this.color = "var(--accent-primary)";
+  }
+  render() {
+    let e;
+    return this.size === "auto" ? e = this.mobile.matches ? "spinner--auto-mobile" : "spinner--auto-desktop" : e = `spinner--${this.size}`, h`
+      <div
+        part="spinner"
+        class="spinner ${e}"
+        style="--spinner-color: ${this.color};"
+        role="progressbar"
+        aria-label="Loading"
+      ></div>
+    `;
+  }
+};
+i.styles = [
+  b,
+  m`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .spinner {
+        display: block;
+        border-radius: 50%;
+        border-style: solid;
+        border-color: var(--paper-cream);
+        border-top-color: var(--spinner-color);
+        animation: spin var(--duration-slow) linear infinite;
+      }
+
+      .spinner--sm {
+        width: var(--size-spinner-sm);
+        height: var(--size-spinner-sm);
+        border-width: var(--size-border-width-thick);
+      }
+
+      .spinner--md {
+        width: var(--size-spinner-md);
+        height: var(--size-spinner-md);
+        border-width: var(--size-border-width-heavy);
+      }
+
+      .spinner--lg {
+        width: var(--size-spinner-lg);
+        height: var(--size-spinner-lg);
+        border-width: var(--size-border-width-bold);
+      }
+
+      .spinner--auto-mobile {
+        width: var(--size-spinner-lg);
+        height: var(--size-spinner-lg);
+        border-width: var(--size-border-width-heavy);
+      }
+
+      .spinner--auto-desktop {
+        width: 5rem;
+        height: 5rem;
+        border-width: var(--size-border-width-bold);
+      }
+    `
+];
+a([
+  l({ type: String })
+], i.prototype, "size", 2);
+a([
+  l({ type: String })
+], i.prototype, "color", 2);
+i = a([
+  c("tc-spinner")
+], i);
+export {
+  i as TcSpinner
+};

package/dist/primitives/tc-symbol.js

@@ -0,0 +1,56 @@
+import { LitElement as m, html as p, css as c } from "lit";
+import { property as a, customElement as b } from "lit/decorators.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (y, t, l, e) => {
+  for (var r = e > 1 ? void 0 : e ? f(t, l) : t, i = y.length - 1, n; i >= 0; i--)
+    (n = y[i]) && (r = (e ? n(t, l, r) : n(r)) || r);
+  return e && r && v(t, l, r), r;
+};
+let o = class extends m {
+  constructor() {
+    super(...arguments), this.size = "3rem", this.background = "var(--paper-cream)", this.color = "var(--ink-dark)";
+  }
+  render() {
+    return p`
+      <div
+        part="symbol"
+        class="symbol"
+        style="--symbol-size: ${this.size}; --symbol-bg: ${this.background}; --symbol-color: ${this.color};"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+o.styles = c`
+    :host {
+      display: inline-flex;
+    }
+
+    .symbol {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-full);
+      background: var(--symbol-bg);
+      color: var(--symbol-color);
+      width: var(--symbol-size);
+      height: var(--symbol-size);
+      font-family: var(--font-body);
+      font-weight: 600;
+    }
+  `;
+s([
+  a({ type: String })
+], o.prototype, "size", 2);
+s([
+  a({ type: String })
+], o.prototype, "background", 2);
+s([
+  a({ type: String })
+], o.prototype, "color", 2);
+o = s([
+  b("tc-symbol")
+], o);
+export {
+  o as TcSymbol
+};

package/dist/primitives/tc-text.js

@@ -0,0 +1,145 @@
+import { LitElement as x, css as p } from "lit";
+import { property as a, customElement as g } from "lit/decorators.js";
+import { styleMap as h } from "lit/directives/style-map.js";
+import { unsafeStatic as f, html as m } from "lit/static-html.js";
+import { sharedStyles as y } from "../styles/shared.js";
+var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (r, o, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? u(o, s) : o, c = r.length - 1, l; c >= 0; c--)
+    (l = r[c]) && (e = (i ? l(o, s, e) : l(e)) || e);
+  return i && e && v(o, s, e), e;
+};
+let t = class extends x {
+  constructor() {
+    super(...arguments), this.tag = "p", this.sx = {};
+  }
+  getColorClass() {
+    return this.color && {
+      primary: "text--primary",
+      secondary: "text--secondary",
+      tertiary: "text--tertiary",
+      muted: "text--muted",
+      accent: "text--accent",
+      success: "text--success",
+      error: "text--error",
+      warning: "text--warning",
+      info: "text--info"
+    }[this.color] || "";
+  }
+  getColorStyle() {
+    if (this.color && (this.color.startsWith("var(") || this.color.startsWith("#") || this.color.startsWith("rgb")))
+      return this.color;
+  }
+  render() {
+    const r = f(this.tag), o = [
+      "text",
+      this.size ? `text--${this.size}` : "",
+      this.weight ? `text--w${this.weight}` : "",
+      this.getColorClass()
+    ].filter(Boolean).join(" "), s = this.getColorStyle(), i = {
+      ...s ? { color: s } : {},
+      ...this.sx
+    };
+    return m`
+      <${r} part="text" class=${o} style=${h(i)}>
+        <slot></slot>
+      </${r}>
+    `;
+  }
+};
+t.styles = [
+  y,
+  p`
+      :host {
+        display: contents;
+      }
+
+      .text {
+        margin: 0;
+        padding: 0;
+        font-family: var(--font-body);
+        line-height: 1.4;
+        color: var(--ink-black);
+      }
+
+      /* Size variants using design-tokens */
+      .text--sm {
+        font-size: var(--font-size-sm);
+      }
+      .text--base {
+        font-size: var(--font-size-base);
+      }
+      .text--lg {
+        font-size: var(--font-size-lg);
+      }
+      .text--xl {
+        font-size: var(--font-size-xl);
+      }
+      .text--2xl {
+        font-size: var(--font-size-2xl);
+      }
+
+      /* Weight variants */
+      .text--w400 {
+        font-weight: 400;
+      }
+      .text--w500 {
+        font-weight: 500;
+      }
+      .text--w600 {
+        font-weight: 600;
+      }
+      .text--w700 {
+        font-weight: 700;
+      }
+
+      /* Color variants using design-tokens - these will respond to theme changes */
+      .text--primary {
+        color: var(--ink-black);
+      }
+      .text--secondary {
+        color: var(--ink-dark);
+      }
+      .text--tertiary {
+        color: var(--ink-medium);
+      }
+      .text--muted {
+        color: var(--ink-light);
+      }
+      .text--accent {
+        color: var(--accent-primary);
+      }
+      .text--success {
+        color: var(--accent-success);
+      }
+      .text--error {
+        color: var(--error-base);
+      }
+      .text--warning {
+        color: var(--semantic-warning);
+      }
+      .text--info {
+        color: var(--semantic-info);
+      }
+    `
+];
+n([
+  a({ type: String })
+], t.prototype, "tag", 2);
+n([
+  a({ type: String })
+], t.prototype, "size", 2);
+n([
+  a({ type: String })
+], t.prototype, "weight", 2);
+n([
+  a({ type: String })
+], t.prototype, "color", 2);
+n([
+  a({ type: Object })
+], t.prototype, "sx", 2);
+t = n([
+  g("tc-text")
+], t);
+export {
+  t as TcText
+};