@transcodes/ui-components 0.3.4 → 0.3.6

package/dist/widgets/tc-installation-banner.js

@@ -1,234 +0,0 @@
-import { LitElement as d, html as p, css as m } from "lit";
-import { property as r, state as h, customElement as u } from "lit/decorators.js";
-import { AnimationController as v } from "../controllers/animation.controller.js";
-import { StorageController as b } from "../controllers/storage.controller.js";
-import { sharedStyles as y } from "../styles/shared.js";
-var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (i, a, o, n) => {
-  for (var e = n > 1 ? void 0 : n ? f(a, o) : a, l = i.length - 1, c; l >= 0; l--)
-    (c = i[l]) && (e = (n ? c(a, o, e) : c(e)) || e);
-  return n && e && g(a, o, e), e;
-};
-let t = class extends d {
-  constructor() {
-    super(...arguments), this.title = "Install App", this.description = "Add to your home screen for quick access", this.installLabel = "Install", this.storageKey = "tc-install-banner-dismissed", this.dismissDays = 7, this.isDismissed = !1, this.animation = new v(this, {
-      showDuration: 400,
-      hideDuration: 300
-    }), this.storage = new b(
-      this,
-      this.storageKey
-    );
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState(), this.checkDismissState();
-  }
-  checkDismissState() {
-    const i = this.storage.value;
-    i?.dismissedAt && ((Date.now() - i.dismissedAt) / 864e5 < this.dismissDays ? this.isDismissed = !0 : this.storage.remove());
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  async show() {
-    this.isDismissed || (await this.animation.show(), this.updateDataState());
-  }
-  async dismiss() {
-    this.storage.set({ dismissedAt: Date.now() }), await this.animation.hide(), this.updateDataState(), this.dispatchEvent(
-      new CustomEvent("tc-dismiss", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleInstall() {
-    this.dispatchEvent(
-      new CustomEvent("tc-install", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleClose() {
-    this.dismiss();
-  }
-  render() {
-    return p`
-      <div part="banner" class="banner" role="banner">
-        <div part="icon" class="icon">
-          <tc-icon name="download" size="1.5rem"></tc-icon>
-        </div>
-        <div part="content" class="content">
-          <tc-text part="title" class="title" size="base" weight="600">
-            ${this.title}
-          </tc-text>
-          <tc-text part="description" class="description" size="sm" color="tertiary">
-            ${this.description}
-          </tc-text>
-        </div>
-        <div part="actions" class="actions">
-          <tc-button
-            part="install"
-            variant="primary"
-            size="small"
-            @tc-click=${this.handleInstall}
-          >
-            ${this.installLabel}
-          </tc-button>
-          <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>
-      </div>
-    `;
-  }
-};
-t.styles = [
-  y,
-  m`
-    :host {
-      display: block;
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 100;
-      padding: var(--space-md);
-      pointer-events: none;
-    }
-
-    .banner {
-      display: flex;
-      align-items: center;
-      gap: var(--space-md);
-      padding: var(--space-md) var(--space-lg);
-      background: var(--paper-white);
-      border-radius: var(--radius-lg);
-      box-shadow: 0 -4px 20px var(--overlay-shadow-light);
-      pointer-events: auto;
-      opacity: 0;
-      transform: translateY(100%);
-      transition: opacity var(--transition-smooth), transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .banner,
-    :host([data-state='visible']) .banner {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    :host([data-state='hiding']) .banner {
-      opacity: 0;
-      transform: translateY(100%);
-    }
-
-    :host([data-state='hidden']) {
-      display: none;
-    }
-
-    .icon {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 3rem;
-      height: 3rem;
-      background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
-      border-radius: var(--radius-md);
-      color: white;
-    }
-
-    .content {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .title {
-      font-weight: 600;
-      color: var(--ink-dark);
-    }
-
-    .description {
-      color: var(--ink-medium);
-      margin-top: 2px;
-    }
-
-    .actions {
-      display: flex;
-      align-items: center;
-      gap: var(--space-sm);
-    }
-
-    .close {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--size-close-button);
-      height: var(--size-close-button);
-      padding: 0;
-      border: none;
-      background: transparent;
-      color: var(--ink-light);
-      cursor: pointer;
-      border-radius: var(--radius-sm);
-      transition: var(--transition-fast);
-    }
-
-    .close:hover {
-      background: var(--paper-warm);
-      color: var(--ink-medium);
-    }
-
-    .close svg {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-
-    @media (max-width: 480px) {
-      .banner {
-        flex-wrap: wrap;
-      }
-
-      .content {
-        flex-basis: calc(100% - 4rem);
-      }
-
-      .actions {
-        flex-basis: 100%;
-        justify-content: flex-end;
-      }
-    }
-  `
-];
-s([
-  r({ type: String })
-], t.prototype, "title", 2);
-s([
-  r({ type: String })
-], t.prototype, "description", 2);
-s([
-  r({ type: String, attribute: "install-label" })
-], t.prototype, "installLabel", 2);
-s([
-  r({ type: String, attribute: "storage-key" })
-], t.prototype, "storageKey", 2);
-s([
-  r({ type: Number, attribute: "dismiss-days" })
-], t.prototype, "dismissDays", 2);
-s([
-  h()
-], t.prototype, "isDismissed", 2);
-t = s([
-  u("tc-installation-banner")
-], t);
-export {
-  t as TcInstallationBanner
-};

package/dist/widgets/tc-ios-installation-guide.js

@@ -1,240 +0,0 @@
-import { LitElement as p, html as l, css as h } from "lit";
-import { property as c, customElement as v } from "lit/decorators.js";
-import { AnimationController as m } from "../controllers/animation.controller.js";
-import { sharedStyles as u } from "../styles/shared.js";
-var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, d = (t, e, a, s) => {
-  for (var i = s > 1 ? void 0 : s ? g(e, a) : e, o = t.length - 1, n; o >= 0; o--)
-    (n = t[o]) && (i = (s ? n(e, a, i) : n(i)) || i);
-  return s && i && y(e, a, i), i;
-};
-let r = class extends p {
-  constructor() {
-    super(...arguments), this.title = "Install on iOS", this.steps = [
-      "Tap the Share button in Safari",
-      'Scroll down and tap "Add to Home Screen"',
-      'Tap "Add" in the top right corner'
-    ], this.animation = new m(this, {
-      showDuration: 300,
-      hideDuration: 200
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState();
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  async show() {
-    await this.animation.show(), this.updateDataState();
-  }
-  async close() {
-    await this.animation.hide(), this.updateDataState(), this.dispatchEvent(
-      new CustomEvent("tc-close", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleOverlayClick(t) {
-    t.target === t.currentTarget && this.close();
-  }
-  renderStep(t, e) {
-    const a = t.split("[share]"), s = a.length > 1 ? l`${a[0]}<svg class="share-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
-              <polyline points="16 6 12 2 8 6"></polyline>
-              <line x1="12" y1="2" x2="12" y2="15"></line>
-            </svg>${a[1]}` : t;
-    return l`
-      <div part="step" class="step">
-        <span part="step-number" class="step-number">${e + 1}</span>
-        <tc-text part="step-text" class="step-text" size="base">${s}</tc-text>
-      </div>
-    `;
-  }
-  render() {
-    return l`
-      <div part="overlay" class="overlay" @click=${this.handleOverlayClick}>
-        <div part="modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="guide-title">
-          <div part="header" class="header">
-            <h2 id="guide-title" class="title">${this.title}</h2>
-            <button part="close" class="close" @click=${this.close} aria-label="Close">
-              <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>
-          <div part="content" class="content">
-            <div part="steps" class="steps">
-              ${this.steps.map((t, e) => this.renderStep(t, e))}
-            </div>
-          </div>
-          <div part="action" class="action">
-            <tc-button variant="primary" @tc-click=${this.close}>Got it</tc-button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-};
-r.styles = [
-  u,
-  h`
-    :host {
-      display: contents;
-    }
-
-    .overlay {
-      position: fixed;
-      inset: 0;
-      z-index: 1000;
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-      background: var(--overlay-dim);
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .overlay,
-    :host([data-state='visible']) .overlay {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    :host([data-state='hiding']) .overlay {
-      opacity: 0;
-    }
-
-    :host([data-state='hidden']) .overlay {
-      visibility: hidden;
-    }
-
-    .modal {
-      width: 100%;
-      max-width: 400px;
-      margin: var(--space-md);
-      padding: var(--space-lg);
-      background: var(--paper-white);
-      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-      transform: translateY(100%);
-      transition: transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .modal,
-    :host([data-state='visible']) .modal {
-      transform: translateY(0);
-    }
-
-    :host([data-state='hiding']) .modal {
-      transform: translateY(100%);
-    }
-
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: var(--space-lg);
-    }
-
-    .title {
-      font-family: var(--font-body);
-      font-size: var(--font-size-lg);
-      font-weight: 600;
-      color: var(--ink-dark);
-      margin: 0;
-    }
-
-    .close {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--size-close-button);
-      height: var(--size-close-button);
-      padding: 0;
-      border: none;
-      background: transparent;
-      color: var(--ink-medium);
-      cursor: pointer;
-      border-radius: var(--radius-sm);
-      transition: var(--transition-fast);
-    }
-
-    .close:hover {
-      background: var(--paper-warm);
-      color: var(--ink-dark);
-    }
-
-    .close svg {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-
-    .steps {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-md);
-    }
-
-    .step {
-      display: flex;
-      align-items: flex-start;
-      gap: var(--space-md);
-    }
-
-    .step-number {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 1.75rem;
-      height: 1.75rem;
-      background: var(--accent-primary);
-      color: white;
-      font-family: var(--font-body);
-      font-size: var(--font-size-sm);
-      font-weight: 600;
-      border-radius: var(--radius-full);
-    }
-
-    .step-text {
-      flex: 1;
-      padding-top: 2px;
-      color: var(--ink-dark);
-      line-height: 1.5;
-    }
-
-    .share-icon {
-      display: inline-flex;
-      vertical-align: middle;
-      width: 1.25rem;
-      height: 1.25rem;
-      margin: 0 2px;
-      color: var(--accent-primary);
-    }
-
-    .action {
-      margin-top: var(--space-xl);
-    }
-  `
-];
-d([
-  c({ type: String })
-], r.prototype, "title", 2);
-d([
-  c({ type: Array })
-], r.prototype, "steps", 2);
-r = d([
-  v("tc-ios-installation-guide")
-], r);
-export {
-  r as TcIosInstallationGuide
-};

package/dist/widgets/tc-notification-modal.js

@@ -1,230 +0,0 @@
-import { LitElement as d, html as p, css as h } from "lit";
-import { property as o, customElement as m } from "lit/decorators.js";
-import { AnimationController as y } from "../controllers/animation.controller.js";
-import { StorageController as u } from "../controllers/storage.controller.js";
-import { sharedStyles as v } from "../styles/shared.js";
-var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (t, s, n, r) => {
-  for (var a = r > 1 ? void 0 : r ? g(s, n) : s, l = t.length - 1, c; l >= 0; l--)
-    (c = t[l]) && (a = (r ? c(s, n, a) : c(a)) || a);
-  return r && a && b(s, n, a), a;
-};
-let e = class extends d {
-  constructor() {
-    super(...arguments), this.title = "Enable Notifications", this.description = "Stay updated with important alerts and messages.", this.allowLabel = "Allow", this.denyLabel = "Not Now", this.storageKey = "tc-notification-modal-state", this.animation = new y(this, {
-      showDuration: 300,
-      hideDuration: 200
-    }), this.storage = new u(this, this.storageKey);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateDataState();
-  }
-  updateDataState() {
-    this.dataset.state = this.animation.state;
-  }
-  /**
-   * Check if the modal should be shown based on stored state.
-   */
-  shouldShow() {
-    const t = this.storage.value;
-    return !(t?.dismissed || t?.permission === "granted");
-  }
-  async show() {
-    this.shouldShow() && (await this.animation.show(), this.updateDataState());
-  }
-  async close() {
-    await this.animation.hide(), this.updateDataState(), this.dispatchEvent(
-      new CustomEvent("tc-close", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleOverlayClick(t) {
-    t.target === t.currentTarget && this.handleDeny();
-  }
-  handleAllow() {
-    this.storage.set({ dismissed: !0, permission: "granted" }), this.close(), this.dispatchEvent(
-      new CustomEvent("tc-allow", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleDeny() {
-    this.storage.set({ dismissed: !0, permission: "denied" }), this.close(), this.dispatchEvent(
-      new CustomEvent("tc-deny", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  render() {
-    return p`
-      <div part="overlay" class="overlay" @click=${this.handleOverlayClick}>
-        <div
-          part="modal"
-          class="modal"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="notification-title"
-          aria-describedby="notification-description"
-        >
-          <div part="icon" class="icon-container">
-            <tc-icon name="bell" size="2rem"></tc-icon>
-          </div>
-          <tc-section part="content" class="content" gap="var(--space-sm)">
-            <tc-text
-              id="notification-title"
-              part="title"
-              class="title"
-              tag="h2"
-              size="lg"
-              weight="600"
-            >
-              ${this.title}
-            </tc-text>
-            <tc-text
-              id="notification-description"
-              part="description"
-              size="base"
-              color="tertiary"
-            >
-              ${this.description}
-            </tc-text>
-          </tc-section>
-          <div part="actions" class="actions">
-            <tc-button variant="primary" @tc-click=${this.handleAllow}>
-              ${this.allowLabel}
-            </tc-button>
-            <button class="deny-button" @click=${this.handleDeny}>
-              ${this.denyLabel}
-            </button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-};
-e.styles = [
-  v,
-  h`
-    :host {
-      display: contents;
-    }
-
-    .overlay {
-      position: fixed;
-      inset: 0;
-      z-index: 1000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--space-lg);
-      background: var(--overlay-dim);
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .overlay,
-    :host([data-state='visible']) .overlay {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    :host([data-state='hiding']) .overlay {
-      opacity: 0;
-    }
-
-    :host([data-state='hidden']) .overlay {
-      visibility: hidden;
-    }
-
-    .modal {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 100%;
-      max-width: 320px;
-      padding: var(--space-xl);
-      background: var(--paper-white);
-      border-radius: var(--radius-lg);
-      box-shadow: 0 20px 60px var(--overlay-shadow-strong);
-      text-align: center;
-      transform: scale(0.95);
-      transition: transform var(--transition-smooth);
-    }
-
-    :host([data-state='showing']) .modal,
-    :host([data-state='visible']) .modal {
-      transform: scale(1);
-    }
-
-    :host([data-state='hiding']) .modal {
-      transform: scale(0.95);
-    }
-
-    .icon-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 4rem;
-      height: 4rem;
-      margin-bottom: var(--space-lg);
-      background: var(--alpha-primary10);
-      border-radius: var(--radius-full);
-      color: var(--accent-primary);
-    }
-
-    .content {
-      margin-bottom: var(--space-xl);
-    }
-
-    .title {
-      margin-bottom: var(--space-sm);
-    }
-
-    .actions {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-sm);
-      width: 100%;
-    }
-
-    .deny-button {
-      background: transparent;
-      border: none;
-      padding: var(--space-sm);
-      font-family: var(--font-body);
-      font-size: var(--font-size-sm);
-      color: var(--ink-medium);
-      cursor: pointer;
-      transition: color var(--transition-fast);
-    }
-
-    .deny-button:hover {
-      color: var(--ink-dark);
-    }
-  `
-];
-i([
-  o({ type: String })
-], e.prototype, "title", 2);
-i([
-  o({ type: String })
-], e.prototype, "description", 2);
-i([
-  o({ type: String, attribute: "allow-label" })
-], e.prototype, "allowLabel", 2);
-i([
-  o({ type: String, attribute: "deny-label" })
-], e.prototype, "denyLabel", 2);
-i([
-  o({ type: String, attribute: "storage-key" })
-], e.prototype, "storageKey", 2);
-e = i([
-  m("tc-notification-modal")
-], e);
-export {
-  e as TcNotificationModal
-};