@transcodes/ui-components 0.2.0 → 0.3.1

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

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

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

@@ -0,0 +1,230 @@
+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
+};