@transcodes/ui-components 0.4.3 → 0.4.5

package/dist/primitives/tc-toast.js

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

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

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

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

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

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

@@ -0,0 +1,177 @@
+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 = (r, s, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? v(s, o) : s, c = r.length - 1, l; c >= 0; c--)
+    (l = r[c]) && (i = (n ? l(s, o, i) : l(i)) || i);
+  return n && i && f(s, o, i), i;
+};
+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 r = 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 ${r}">
+              <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 ${r}">
+              <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 ${r}">
+                    <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;
+    }
+
+    .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

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

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

@@ -0,0 +1,85 @@
+import { css as m, LitElement as g, html as l } from "lit";
+import { property as a, 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, r = (p, s, n, i) => {
+  for (var e = i > 1 ? void 0 : i ? x(s, n) : s, o = p.length - 1, c; o >= 0; o--)
+    (c = p[o]) && (e = (i ? c(s, n, e) : c(e)) || e);
+  return i && e && f(s, 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;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--space-lg);
+      text-align: center;
+    }
+
+    .message {
+      color: var(--ink-medium);
+      max-width: 20rem;
+    }
+  `;
+r([
+  a({ type: String })
+], t.prototype, "message", 2);
+r([
+  a({ type: String, attribute: "spinner-size" })
+], t.prototype, "spinnerSize", 2);
+r([
+  a({ type: Object })
+], t.prototype, "sx", 2);
+t = r([
+  h("tc-loading-screen")
+], t);
+export {
+  t as TcLoadingScreen
+};

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

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

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