@transcodes/ui-components 0.4.3 → 0.4.4

package/dist/primitives/tc-item-button.js

@@ -0,0 +1,163 @@
+import { css as c, LitElement as f, html as p } from "lit";
+import { property as d, customElement as u } from "lit/decorators.js";
+import { styleMap as b } from "lit/directives/style-map.js";
+var h = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (r, o, n, i) => {
+  for (var t = i > 1 ? void 0 : i ? m(o, n) : o, a = r.length - 1, l; a >= 0; a--)
+    (l = r[a]) && (t = (i ? l(o, n, t) : l(t)) || t);
+  return i && t && h(o, n, t), t;
+};
+let e = class extends f {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.showArrow = !0, this.sx = {};
+  }
+  handleClick() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("tc-click", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    const r = {
+      "--item-padding": "var(--space-md)",
+      "--item-gap": "var(--space-md)",
+      ...this.sx
+    };
+    return p`
+      <button
+        part="button"
+        class="button"
+        ?disabled=${this.disabled}
+        style=${b(r)}
+        @click=${this.handleClick}
+      >
+        <div part="prefix" class="prefix">
+          <slot name="prefix"></slot>
+        </div>
+        <div part="content" class="content">
+          <slot></slot>
+        </div>
+        <div part="suffix" class="suffix">
+          <slot name="suffix"></slot>
+        </div>
+        ${this.showArrow ? p`
+              <svg
+                part="arrow"
+                class="arrow"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="9 18 15 12 9 6"></polyline>
+              </svg>
+            ` : ""}
+      </button>
+    `;
+  }
+};
+e.styles = c`
+    :host {
+      display: block;
+      width: 100%;
+      min-width: 0;
+    }
+
+    .button {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: var(--item-padding);
+      gap: var(--item-gap);
+      background: var(--paper-cream);
+      border: none;
+      border-radius: var(--radius-md);
+      box-sizing: border-box;
+      cursor: pointer;
+      font-family: inherit;
+      text-align: left;
+      transition: var(--transition-fast);
+    }
+
+    .button:hover:not(:disabled) {
+      background: var(--paper-warm);
+    }
+
+    .button:active:not(:disabled) {
+      transform: scale(0.995);
+    }
+
+    .button:focus-visible {
+      outline: 2px solid var(--accent-primary);
+      outline-offset: 2px;
+    }
+
+    .button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .prefix {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .content {
+      flex: 1;
+      min-width: 0;
+      font-family: var(--font-body);
+      font-size: var(--font-size-base);
+      color: var(--ink-dark);
+    }
+
+    .suffix {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .arrow {
+      flex-shrink: 0;
+      width: var(--size-icon-action);
+      height: var(--size-icon-action);
+      color: var(--ink-light);
+      transition: var(--transition-fast);
+    }
+
+    .button:hover:not(:disabled) .arrow {
+      color: var(--ink-medium);
+      transform: translateX(2px);
+    }
+
+    /* Hide empty slots */
+    .prefix:not(:has(*)),
+    .suffix:not(:has(*)) {
+      display: none;
+    }
+
+    /* Hide arrow when suffix has content */
+    .suffix:has(*) + .arrow {
+      display: none;
+    }
+  `;
+s([
+  d({ type: Boolean })
+], e.prototype, "disabled", 2);
+s([
+  d({ type: Boolean, attribute: "show-arrow" })
+], e.prototype, "showArrow", 2);
+s([
+  d({ type: Object })
+], e.prototype, "sx", 2);
+e = s([
+  u("tc-item-button")
+], e);
+export {
+  e as TcItemButton
+};

package/dist/primitives/tc-item.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
+/**
+ * A non-clickable item container for displaying content.
+ *
+ * @slot - Item content
+ * @slot prefix - Left side content (icon, symbol)
+ * @slot suffix - Right side content (badge, action)
+ * @csspart item - The item container
+ * @csspart prefix - The prefix container
+ * @csspart content - The main content container
+ * @csspart suffix - The suffix container
+ */
+export declare class TcItem extends LitElement {
+    sx: SxProps;
+    static styles: import('lit').CSSResult;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-item': TcItem;
+    }
+}
+//# sourceMappingURL=tc-item.d.ts.map

package/dist/primitives/tc-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tc-item.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BA6CpB;IAEO,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/primitives/tc-item.js

@@ -0,0 +1,88 @@
+import { css as l, LitElement as f, html as d } from "lit";
+import { property as m, customElement as c } from "lit/decorators.js";
+import { styleMap as v } from "lit/directives/style-map.js";
+var x = Object.defineProperty, u = Object.getOwnPropertyDescriptor, p = (e, s, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? u(s, a) : s, n = e.length - 1, o; n >= 0; n--)
+    (o = e[n]) && (t = (i ? o(s, a, t) : o(t)) || t);
+  return i && t && x(s, a, t), t;
+};
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.sx = {};
+  }
+  render() {
+    const e = {
+      "--item-padding": "var(--space-md)",
+      "--item-gap": "var(--space-md)",
+      ...this.sx
+    };
+    return d`
+      <div part="item" class="item" style=${v(e)}>
+        <div part="prefix" class="prefix">
+          <slot name="prefix"></slot>
+        </div>
+        <div part="content" class="content">
+          <slot></slot>
+        </div>
+        <div part="suffix" class="suffix">
+          <slot name="suffix"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = l`
+    :host {
+      display: block;
+      width: 100%;
+      min-width: 0;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: var(--item-padding);
+      gap: var(--item-gap);
+      background: var(--paper-cream);
+      border-radius: var(--radius-md);
+      box-sizing: border-box;
+    }
+
+    .prefix {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .content {
+      flex: 1;
+      min-width: 0;
+      font-family: var(--font-body);
+      font-size: var(--font-size-base);
+      color: var(--ink-dark);
+    }
+
+    .suffix {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Hide empty slots */
+    .prefix:not(:has(*)),
+    .suffix:not(:has(*)) {
+      display: none;
+    }
+  `;
+p([
+  m({ type: Object })
+], r.prototype, "sx", 2);
+r = p([
+  c("tc-item")
+], r);
+export {
+  r as TcItem
+};

package/dist/primitives/tc-otp-input.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
+/**
+ * OTP (One-Time Password) input component with individual cells and progress indicator.
+ * Uses shake animation from design-tokens.
+ *
+ * @fires tc-complete - Fired when all cells are filled
+ * @fires tc-change - Fired when the OTP value changes
+ * @csspart cells - The cells container
+ * @csspart cell - Individual cell input
+ * @csspart progress - The progress bar container
+ * @csspart progress-bar - The progress bar fill
+ */
+export declare class TcOtpInput extends LitElement {
+    length: number;
+    error: boolean;
+    disabled: boolean;
+    showProgress: boolean;
+    sx: SxProps;
+    private values;
+    static styles: import('lit').CSSResult[];
+    connectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+    private handleInput;
+    private handleKeydown;
+    private handlePaste;
+    private focusCell;
+    /** Focus the first empty cell or the last cell */
+    focus(): void;
+    /** Clear all values */
+    clear(): void;
+    /** Get the current OTP value */
+    getValue(): string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-otp-input': TcOtpInput;
+    }
+}
+//# sourceMappingURL=tc-otp-input.d.ts.map

package/dist/primitives/tc-otp-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tc-otp-input.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-otp-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACZ,MAAM,SAAK;IACV,KAAK,UAAS;IACd,QAAQ,UAAS;IACW,YAAY,UAAQ;IACjD,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,MAAM,CAAgB;IAEvC,OAAgB,MAAM,4BA2FpB;IAEO,iBAAiB;IAKjB,MAAM;IAoDf,OAAO,CAAC,WAAW;IAgCnB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IAoCnB,OAAO,CAAC,SAAS;IASjB,kDAAkD;IAClD,KAAK;IAML,uBAAuB;IACvB,KAAK;IAKL,gCAAgC;IAChC,QAAQ,IAAI,MAAM;CAGnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

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

@@ -0,0 +1,236 @@
+import { css as u, LitElement as p, html as h } from "lit";
+import { property as c, state as d, customElement as v } from "lit/decorators.js";
+import { styleMap as m } from "lit/directives/style-map.js";
+import { sharedStyles as g } from "../styles/shared.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? b(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 && f(e, s, a), a;
+};
+let i = class extends p {
+  constructor() {
+    super(...arguments), this.length = 6, this.error = !1, this.disabled = !1, this.showProgress = !0, this.sx = {}, 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" style=${m(this.sx)}>
+        <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 = [
+  g,
+  u`
+      :host {
+        display: block;
+        width: 100%;
+        min-width: 0;
+      }
+
+      .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: var(--size-progress-bar-width);
+        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([
+  c({ type: Object })
+], i.prototype, "sx", 2);
+n([
+  d()
+], i.prototype, "values", 2);
+i = n([
+  v("tc-otp-input")
+], i);
+export {
+  i as TcOtpInput
+};

package/dist/primitives/tc-page-decoration.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
+/**
+ * Decorative floating blob background for pages.
+ * Uses CSS custom properties for color variants and inkFloat/inkDrift animations from design-tokens.
+ *
+ * @csspart decoration - The decoration container
+ * @csspart blob - Individual blob element
+ */
+export declare class TcPageDecoration extends LitElement {
+    variant: 'primary' | 'success' | 'error';
+    sx: SxProps;
+    static styles: import('lit').CSSResult[];
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tc-page-decoration': TcPageDecoration;
+    }
+}
+//# sourceMappingURL=tc-page-decoration.d.ts.map

package/dist/primitives/tc-page-decoration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tc-page-decoration.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-page-decoration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;GAMG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAClB,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CACxD;IACgB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BA8FpB;IAEO,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}