@transcodes/ui-components 0.4.1 → 0.4.3

package/dist/primitives/tc-toast.js

@@ -1,199 +0,0 @@
-import { css as h, LitElement as m, html as d } from "lit";
-import { property as e, customElement as p } from "lit/decorators.js";
-import { styleMap as u } from "lit/directives/style-map.js";
-import { AnimationController as v } from "../controllers/animation.controller.js";
-import { sharedStyles as y } from "../styles/shared.js";
-var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (c, a, r, o) => {
-  for (var s = o > 1 ? void 0 : o ? b(a, r) : a, n = c.length - 1, l; n >= 0; n--)
-    (l = c[n]) && (s = (o ? l(a, r, s) : l(s)) || s);
-  return o && s && f(a, r, s), s;
-};
-let t = class extends m {
-  constructor() {
-    super(...arguments), this.variant = "info", this.duration = 5e3, this.autoDismiss = !0, this.dismissible = !0, this.sx = {}, this.animation = new v(this, {
-      showDuration: 300,
-      hideDuration: 200
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.clearDismissTimer();
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  clearDismissTimer() {
-    this.dismissTimer && (clearTimeout(this.dismissTimer), this.dismissTimer = void 0);
-  }
-  startDismissTimer() {
-    this.autoDismiss && this.duration > 0 && (this.clearDismissTimer(), this.dismissTimer = setTimeout(() => {
-      this.hide();
-    }, this.duration));
-  }
-  async show() {
-    this.clearDismissTimer(), await this.animation.show(), this.updateDataState(), this.startDismissTimer();
-  }
-  async hide() {
-    this.clearDismissTimer(), await this.animation.hide(), this.updateDataState(), this.dispatchEvent(
-      new CustomEvent("tc-dismiss", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleClose() {
-    this.hide();
-  }
-  render() {
-    return d`
-      <div
-        part="toast"
-        class="toast toast--${this.variant}"
-        role="alert"
-        aria-live="polite"
-        style=${u(this.sx)}
-      >
-        <div part="content" class="content">
-          <slot></slot>
-        </div>
-        ${this.dismissible ? d`
-              <button
-                part="close"
-                class="close"
-                @click=${this.handleClose}
-                aria-label="Dismiss"
-              >
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <line x1="18" y1="6" x2="6" y2="18"></line>
-                  <line x1="6" y1="6" x2="18" y2="18"></line>
-                </svg>
-              </button>
-            ` : ""}
-      </div>
-    `;
-  }
-};
-t.styles = [
-  y,
-  h`
-    :host {
-      display: block;
-      position: fixed;
-      bottom: var(--space-lg);
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 1000;
-      pointer-events: none;
-    }
-
-    .toast {
-      display: flex;
-      align-items: center;
-      gap: var(--space-sm);
-      padding: var(--space-md) var(--space-lg);
-      border-radius: var(--radius-md);
-      font-family: var(--font-body);
-      font-size: var(--font-size-sm);
-      box-shadow: 0 4px 12px var(--overlay-shadow-subtle);
-      pointer-events: auto;
-      opacity: 0;
-      transform: translateY(100%);
-      transition: opacity var(--transition-smooth), transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .toast,
-    :host([data-state='visible']) .toast {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    :host([data-state='hiding']) .toast {
-      opacity: 0;
-      transform: translateY(100%);
-    }
-
-    :host([data-state='hidden']) {
-      display: none;
-    }
-
-    .toast--info {
-      background: var(--ink-dark);
-      color: var(--paper-white);
-    }
-
-    .toast--success {
-      background: var(--accent-success);
-      color: white;
-    }
-
-    .toast--warning {
-      background: var(--semantic-warning);
-      color: white;
-    }
-
-    .toast--error {
-      background: var(--error-base);
-      color: white;
-    }
-
-    .content {
-      flex: 1;
-      line-height: 1.4;
-    }
-
-    .close {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--size-icon-md);
-      height: var(--size-icon-md);
-      padding: 0;
-      border: none;
-      background: transparent;
-      color: inherit;
-      opacity: var(--opacity-hover);
-      cursor: pointer;
-      transition: opacity var(--transition-fast);
-    }
-
-    .close:hover {
-      opacity: 1;
-    }
-
-    .close svg {
-      width: var(--size-icon-sm);
-      height: var(--size-icon-sm);
-    }
-  `
-];
-i([
-  e({ type: String })
-], t.prototype, "variant", 2);
-i([
-  e({ type: Number })
-], t.prototype, "duration", 2);
-i([
-  e({ type: Boolean, attribute: "auto-dismiss" })
-], t.prototype, "autoDismiss", 2);
-i([
-  e({ type: Boolean })
-], t.prototype, "dismissible", 2);
-i([
-  e({ type: Object })
-], t.prototype, "sx", 2);
-t = i([
-  p("tc-toast")
-], t);
-export {
-  t as TcToast
-};

package/dist/screens/index.d.ts

@@ -1,4 +0,0 @@
-export { TcErrorScreen } from './tc-error-screen.js';
-export { TcLoadingScreen } from './tc-loading-screen.js';
-export { TcSuccessScreen } from './tc-success-screen.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/screens/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/screens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/screens/index.js

@@ -1,8 +0,0 @@
-import { TcErrorScreen as c } from "./tc-error-screen.js";
-import { TcLoadingScreen as n } from "./tc-loading-screen.js";
-import { TcSuccessScreen as f } from "./tc-success-screen.js";
-export {
-  c as TcErrorScreen,
-  n as TcLoadingScreen,
-  f as TcSuccessScreen
-};

package/dist/screens/tc-error-screen.d.ts

@@ -1,34 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * A full-screen error state with animated icon, message, and retry action.
- *
- * @fires tc-retry - Fired when the retry button is clicked
- * @csspart screen - The screen container
- * @csspart content - The content wrapper
- * @csspart icon - The error icon
- * @csspart title - The error title
- * @csspart message - The error message
- * @csspart action - The action button container
- */
-export declare class TcErrorScreen extends LitElement {
-    title: string;
-    message: string;
-    retryLabel: string;
-    showRetry: boolean;
-    autoAnimate: boolean;
-    sx: SxProps;
-    private isAnimated;
-    private animation;
-    static styles: import('lit').CSSResult;
-    connectedCallback(): void;
-    playAnimation(): Promise<void>;
-    private handleRetry;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-error-screen': TcErrorScreen;
-    }
-}
-//# sourceMappingURL=tc-error-screen.d.ts.map

package/dist/screens/tc-error-screen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-error-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-error-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,SAA0B;IAC/B,OAAO,SACiB;IACE,UAAU,SAClD;IACwC,SAAS,UAAQ;IACf,WAAW,UAAQ;IAC/C,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAmFpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,WAAW;IASV,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/screens/tc-error-screen.js

@@ -1,178 +0,0 @@
-import { css as m, LitElement as d, html as p } from "lit";
-import { property as a, state as y, customElement as h } from "lit/decorators.js";
-import { styleMap as u } from "lit/directives/style-map.js";
-import { AnimationController as g } from "../controllers/animation.controller.js";
-import "../primitives/tc-icon.js";
-import "../primitives/tc-text.js";
-import "../primitives/tc-button.js";
-import "../primitives/tc-container.js";
-import "../primitives/tc-section.js";
-var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, e = (i, n, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? v(n, o) : n, c = i.length - 1, l; c >= 0; c--)
-    (l = i[c]) && (r = (s ? l(n, o, r) : l(r)) || r);
-  return s && r && f(n, o, r), r;
-};
-let t = class extends d {
-  constructor() {
-    super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0, this.autoAnimate = !0, this.sx = {}, this.isAnimated = !1, this.animation = new g(this, {
-      showDuration: 600,
-      hideDuration: 300
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.autoAnimate && requestAnimationFrame(() => {
-      this.playAnimation();
-    });
-  }
-  async playAnimation() {
-    await this.animation.show(), this.isAnimated = !0;
-  }
-  handleRetry() {
-    this.dispatchEvent(
-      new CustomEvent("tc-retry", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  render() {
-    const i = this.isAnimated ? "animated" : "";
-    return p`
-      <div part="screen" class="screen" style=${u(this.sx)}>
-        <tc-container>
-          <div part="content" class="content">
-            <div part="icon" class="icon-container ${i}">
-              <tc-icon name="alert-circle" .sx=${{ "--icon-size": "var(--size-icon-xl)" }}></tc-icon>
-            </div>
-            <tc-section .sx=${{ gap: "var(--space-sm)" }} class="text-content ${i}">
-              <tc-text part="title" tag="h1" size="xl" weight="600" class="title">
-                ${this.title}
-              </tc-text>
-              <tc-text part="message" size="base" color="tertiary" class="message">
-                ${this.message}
-              </tc-text>
-            </tc-section>
-            ${this.showRetry ? p`
-                  <div part="action" class="action ${i}">
-                    <tc-button variant="primary" @tc-click=${this.handleRetry}>
-                      ${this.retryLabel}
-                    </tc-button>
-                  </div>
-                ` : ""}
-          </div>
-        </tc-container>
-      </div>
-    `;
-  }
-};
-t.styles = m`
-    :host {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      min-height: inherit;
-    }
-
-    .screen {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      min-height: inherit;
-      padding: var(--space-lg);
-      box-sizing: border-box;
-      background: var(--paper-white);
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--space-lg);
-      text-align: center;
-      max-width: 20rem;
-    }
-
-    .icon-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--space-md);
-      background: var(--error-bg);
-      border-radius: var(--radius-full);
-      color: var(--error-base);
-      transform: scale(0);
-      opacity: 0;
-      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
-        opacity 0.3s ease;
-    }
-
-    .icon-container.animated {
-      transform: scale(1);
-      opacity: 1;
-    }
-
-    .title {
-      margin: 0;
-    }
-
-    .message {
-      color: var(--ink-medium);
-    }
-
-    .text-content {
-      opacity: 0;
-      transform: translateY(var(--offset-slide-up-md));
-      transition: opacity 0.4s ease, transform 0.4s ease;
-      transition-delay: 0.4s;
-    }
-
-    .text-content.animated {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    .action {
-      width: 100%;
-      margin-top: var(--space-md);
-      opacity: 0;
-      transform: translateY(var(--offset-slide-up-md));
-      transition: opacity 0.4s ease, transform 0.4s ease;
-      transition-delay: 0.6s;
-    }
-
-    .action.animated {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  `;
-e([
-  a({ type: String })
-], t.prototype, "title", 2);
-e([
-  a({ type: String })
-], t.prototype, "message", 2);
-e([
-  a({ type: String, attribute: "retry-label" })
-], t.prototype, "retryLabel", 2);
-e([
-  a({ type: Boolean, attribute: "show-retry" })
-], t.prototype, "showRetry", 2);
-e([
-  a({ type: Boolean, attribute: "auto-animate" })
-], t.prototype, "autoAnimate", 2);
-e([
-  a({ type: Object })
-], t.prototype, "sx", 2);
-e([
-  y()
-], t.prototype, "isAnimated", 2);
-t = e([
-  h("tc-error-screen")
-], t);
-export {
-  t as TcErrorScreen
-};

package/dist/screens/tc-loading-screen.d.ts

@@ -1,25 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * A full-screen loading state with spinner and optional message.
- *
- * @csspart screen - The screen container
- * @csspart content - The content wrapper
- * @csspart spinner - The spinner element
- * @csspart message - The message text
- */
-export declare class TcLoadingScreen extends LitElement {
-    message: string;
-    spinnerSize: 'sm' | 'md' | 'lg' | 'auto';
-    sx: SxProps;
-    private loading;
-    static styles: import('lit').CSSResult;
-    connectedCallback(): void;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-loading-screen': TcLoadingScreen;
-    }
-}
-//# sourceMappingURL=tc-loading-screen.d.ts.map

package/dist/screens/tc-loading-screen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-loading-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-loading-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,OAAO,SAAM;IACc,WAAW,EAC9D,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,CAAQ;IACU,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,OAAO,CAA+B;IAE9C,OAAgB,MAAM,0BAkCpB;IAEO,iBAAiB;IAKjB,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/screens/tc-loading-screen.js

@@ -1,86 +0,0 @@
-import { css as m, LitElement as g, html as l } from "lit";
-import { property as c, customElement as h } from "lit/decorators.js";
-import { styleMap as d } from "lit/directives/style-map.js";
-import { LoadingController as y } from "../controllers/loading.controller.js";
-import "../primitives/tc-spinner.js";
-import "../primitives/tc-text.js";
-import "../primitives/tc-container.js";
-var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (p, r, n, i) => {
-  for (var e = i > 1 ? void 0 : i ? x(r, n) : r, a = p.length - 1, o; a >= 0; a--)
-    (o = p[a]) && (e = (i ? o(r, n, e) : o(e)) || e);
-  return i && e && f(r, n, e), e;
-};
-let t = class extends g {
-  constructor() {
-    super(...arguments), this.message = "", this.spinnerSize = "md", this.sx = {}, this.loading = new y(this);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.loading.start();
-  }
-  render() {
-    return l`
-      <div part="screen" class="screen" style=${d(this.sx)}>
-        <tc-container>
-          <div part="content" class="content">
-            <tc-spinner part="spinner" size=${this.spinnerSize}></tc-spinner>
-            ${this.message ? l`
-                  <tc-text part="message" class="message" size="base" color="tertiary">
-                    ${this.message}
-                  </tc-text>
-                ` : ""}
-          </div>
-        </tc-container>
-      </div>
-    `;
-  }
-};
-t.styles = m`
-    :host {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      min-height: inherit;
-    }
-
-    .screen {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      min-height: inherit;
-      padding: var(--space-lg);
-      box-sizing: border-box;
-      background: var(--paper-white);
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--space-lg);
-      text-align: center;
-    }
-
-    .message {
-      color: var(--ink-medium);
-      max-width: 20rem;
-    }
-  `;
-s([
-  c({ type: String })
-], t.prototype, "message", 2);
-s([
-  c({ type: String, attribute: "spinner-size" })
-], t.prototype, "spinnerSize", 2);
-s([
-  c({ type: Object })
-], t.prototype, "sx", 2);
-t = s([
-  h("tc-loading-screen")
-], t);
-export {
-  t as TcLoadingScreen
-};

package/dist/screens/tc-success-screen.d.ts

@@ -1,33 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * A full-screen success state with animated checkmark and message.
- *
- * @fires tc-action - Fired when the action button is clicked
- * @csspart screen - The screen container
- * @csspart content - The content wrapper
- * @csspart icon - The success icon container
- * @csspart title - The success title
- * @csspart message - The success message
- * @csspart action - The action button container
- */
-export declare class TcSuccessScreen extends LitElement {
-    title: string;
-    message: string;
-    actionLabel: string;
-    autoAnimate: boolean;
-    sx: SxProps;
-    private isAnimated;
-    private animation;
-    static styles: import('lit').CSSResult;
-    connectedCallback(): void;
-    playAnimation(): Promise<void>;
-    private handleAction;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-success-screen': TcSuccessScreen;
-    }
-}
-//# sourceMappingURL=tc-success-screen.d.ts.map

package/dist/screens/tc-success-screen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-success-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-success-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAc;IACnB,OAAO,SACS;IACW,WAAW,SAAM;IAChB,WAAW,UAAQ;IAC/C,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAoGpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,YAAY;IASX,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}