@transcodes/ui-components 0.4.1 → 0.4.3

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

@@ -1,163 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,88 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,236 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}