@transcodes/ui-components 0.3.0 → 0.3.1

package/dist/primitives/tc-toast.js

@@ -0,0 +1,189 @@
+import { LitElement as h, html as d, css as m } from "lit";
+import { property as o, customElement as p } from "lit/decorators.js";
+import { AnimationController as u } from "../controllers/animation.controller.js";
+import { sharedStyles as v } from "../styles/shared.js";
+var y = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (c, e, r, a) => {
+  for (var t = a > 1 ? void 0 : a ? f(e, r) : e, n = c.length - 1, l; n >= 0; n--)
+    (l = c[n]) && (t = (a ? l(e, r, t) : l(t)) || t);
+  return a && t && y(e, r, t), t;
+};
+let s = class extends h {
+  constructor() {
+    super(...arguments), this.variant = "info", this.duration = 5e3, this.autoDismiss = !0, this.dismissible = !0, this.animation = new u(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">
+        <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>
+    `;
+  }
+};
+s.styles = [
+  v,
+  m`
+    :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([
+  o({ type: String })
+], s.prototype, "variant", 2);
+i([
+  o({ type: Number })
+], s.prototype, "duration", 2);
+i([
+  o({ type: Boolean, attribute: "auto-dismiss" })
+], s.prototype, "autoDismiss", 2);
+i([
+  o({ type: Boolean })
+], s.prototype, "dismissible", 2);
+s = i([
+  p("tc-toast")
+], s);
+export {
+  s as TcToast
+};

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

@@ -0,0 +1,119 @@
+import { LitElement as m, html as p, css as h } from "lit";
+import { property as s, customElement as g } from "lit/decorators.js";
+var d = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (l, i, a, n) => {
+  for (var t = n > 1 ? void 0 : n ? y(i, a) : i, c = l.length - 1, o; c >= 0; c--)
+    (o = l[c]) && (t = (n ? o(i, a, t) : o(t)) || t);
+  return n && t && d(i, a, t), t;
+};
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0;
+  }
+  handleRetry() {
+    this.dispatchEvent(
+      new CustomEvent("tc-retry", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return p`
+      <div part="screen" class="screen">
+        <tc-container>
+          <div part="content" class="content">
+            <div part="icon" class="icon-container">
+              <tc-icon name="alert-circle" size="2rem"></tc-icon>
+            </div>
+            <tc-section gap="var(--space-sm)">
+              <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">
+                    <tc-button variant="primary" @tc-click=${this.handleRetry}>
+                      ${this.retryLabel}
+                    </tc-button>
+                  </div>
+                ` : ""}
+          </div>
+        </tc-container>
+      </div>
+    `;
+  }
+};
+e.styles = h`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: inherit;
+    }
+
+    .screen {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 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;
+      width: 4rem;
+      height: 4rem;
+      background: var(--error-bg);
+      border-radius: var(--radius-full);
+      color: var(--error-base);
+    }
+
+    .title {
+      margin: 0;
+    }
+
+    .message {
+      color: var(--ink-medium);
+    }
+
+    .action {
+      width: 100%;
+      margin-top: var(--space-md);
+    }
+  `;
+r([
+  s({ type: String })
+], e.prototype, "title", 2);
+r([
+  s({ type: String })
+], e.prototype, "message", 2);
+r([
+  s({ type: String, attribute: "retry-label" })
+], e.prototype, "retryLabel", 2);
+r([
+  s({ type: Boolean, attribute: "show-retry" })
+], e.prototype, "showRetry", 2);
+e = r([
+  g("tc-error-screen")
+], e);
+export {
+  e as TcErrorScreen
+};

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

@@ -0,0 +1,77 @@
+import { LitElement as m, html as p, css as g } from "lit";
+import { property as l, customElement as d } from "lit/decorators.js";
+import { LoadingController as h } from "../controllers/loading.controller.js";
+var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (o, r, s, n) => {
+  for (var e = n > 1 ? void 0 : n ? u(r, s) : r, i = o.length - 1, a; i >= 0; i--)
+    (a = o[i]) && (e = (n ? a(r, s, e) : a(e)) || e);
+  return n && e && f(r, s, e), e;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.message = "", this.spinnerSize = "3rem", this.loading = new h(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.loading.start();
+  }
+  render() {
+    return p`
+      <div part="screen" class="screen">
+        <tc-container>
+          <div part="content" class="content">
+            <tc-spinner part="spinner" size=${this.spinnerSize}></tc-spinner>
+            ${this.message ? p`
+                  <tc-text part="message" class="message" size="base" color="tertiary">
+                    ${this.message}
+                  </tc-text>
+                ` : ""}
+          </div>
+        </tc-container>
+      </div>
+    `;
+  }
+};
+t.styles = g`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: inherit;
+    }
+
+    .screen {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 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;
+    }
+  `;
+c([
+  l({ type: String })
+], t.prototype, "message", 2);
+c([
+  l({ type: String, attribute: "spinner-size" })
+], t.prototype, "spinnerSize", 2);
+t = c([
+  d("tc-loading-screen")
+], t);
+export {
+  t as TcLoadingScreen
+};

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

@@ -0,0 +1,192 @@
+import { LitElement as p, html as m, css as d } from "lit";
+import { property as r, state as h, customElement as u } from "lit/decorators.js";
+import { AnimationController as y } from "../controllers/animation.controller.js";
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (a, s, o, n) => {
+  for (var e = n > 1 ? void 0 : n ? g(s, o) : s, c = a.length - 1, l; c >= 0; c--)
+    (l = a[c]) && (e = (n ? l(s, o, e) : l(e)) || e);
+  return n && e && f(s, o, e), e;
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.title = "Success!", this.message = "Your action was completed successfully.", this.actionLabel = "", this.autoAnimate = !0, this.isAnimated = !1, this.animation = new y(this, {
+      showDuration: 600,
+      hideDuration: 300
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.autoAnimate && requestAnimationFrame(() => {
+      this.playAnimation();
+    });
+  }
+  async playAnimation() {
+    await this.animation.show(), this.isAnimated = !0;
+  }
+  handleAction() {
+    this.dispatchEvent(
+      new CustomEvent("tc-action", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    const a = this.isAnimated ? "animated" : "";
+    return m`
+      <div part="screen" class="screen">
+        <tc-container>
+          <div part="content" class="content">
+            <div part="icon" class="icon-container ${a}">
+              <svg
+                class="checkmark"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12"></polyline>
+              </svg>
+            </div>
+            <tc-section gap="var(--space-sm)" class="text-content ${a}">
+              <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.actionLabel ? m`
+                  <div part="action" class="action ${a}">
+                    <tc-button variant="success" @tc-click=${this.handleAction}>
+                      ${this.actionLabel}
+                    </tc-button>
+                  </div>
+                ` : ""}
+          </div>
+        </tc-container>
+      </div>
+    `;
+  }
+};
+t.styles = d`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: inherit;
+    }
+
+    .screen {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 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;
+      width: 5rem;
+      height: 5rem;
+      background: var(--alpha-success10);
+      border-radius: var(--radius-full);
+      color: var(--accent-success);
+      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;
+    }
+
+    .checkmark {
+      width: 2.5rem;
+      height: 2.5rem;
+      stroke-dasharray: 50;
+      stroke-dashoffset: 50;
+    }
+
+    .icon-container.animated .checkmark {
+      animation: draw-check 0.5s ease-out 0.3s forwards;
+    }
+
+    @keyframes draw-check {
+      to {
+        stroke-dashoffset: 0;
+      }
+    }
+
+    .title {
+      margin: 0;
+    }
+
+    .message {
+      color: var(--ink-medium);
+    }
+
+    .text-content {
+      opacity: 0;
+      transform: translateY(10px);
+      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(10px);
+      transition: opacity 0.4s ease, transform 0.4s ease;
+      transition-delay: 0.6s;
+    }
+
+    .action.animated {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  `;
+i([
+  r({ type: String })
+], t.prototype, "title", 2);
+i([
+  r({ type: String })
+], t.prototype, "message", 2);
+i([
+  r({ type: String, attribute: "action-label" })
+], t.prototype, "actionLabel", 2);
+i([
+  r({ type: Boolean, attribute: "auto-animate" })
+], t.prototype, "autoAnimate", 2);
+i([
+  h()
+], t.prototype, "isAnimated", 2);
+t = i([
+  u("tc-success-screen")
+], t);
+export {
+  t as TcSuccessScreen
+};

package/dist/styles/shared.js

@@ -0,0 +1,7 @@
+import { componentStyles as o } from "@transcodes/design-tokens/components";
+import { unsafeCSS as t } from "lit";
+const s = t(o);
+export {
+  s as default,
+  s as sharedStyles
+};