@transcodes/ui-components 0.3.5 → 0.4.0

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.d.ts

@@ -1,42 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * A modal for requesting notification permission with storage-based dismissal tracking.
- *
- * @fires tc-allow - Fired when the user clicks allow
- * @fires tc-deny - Fired when the user clicks deny
- * @fires tc-close - Fired when the modal is closed
- * @csspart overlay - The backdrop overlay
- * @csspart modal - The modal container
- * @csspart icon - The notification icon
- * @csspart title - The modal title
- * @csspart description - The modal description
- * @csspart actions - The action buttons container
- */
-export declare class TcNotificationModal extends LitElement {
-    title: string;
-    description: string;
-    allowLabel: string;
-    denyLabel: string;
-    storageKey: string;
-    private animation;
-    private storage;
-    static styles: import('lit').CSSResult[];
-    connectedCallback(): void;
-    private updateDataState;
-    /**
-     * Check if the modal should be shown based on stored state.
-     */
-    shouldShow(): boolean;
-    show(): Promise<void>;
-    close(): Promise<void>;
-    private handleOverlayClick;
-    private handleAllow;
-    private handleDeny;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-notification-modal': TcNotificationModal;
-    }
-}
-//# sourceMappingURL=tc-notification-modal.d.ts.map

package/dist/widgets/tc-notification-modal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-notification-modal.d.ts","sourceRoot":"","sources":["../../src/widgets/tc-notification-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;;;GAYG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACrB,KAAK,SAA0B;IAC/B,WAAW,SACc;IACC,UAAU,SAAW;IACtB,SAAS,SAAa;IACrB,UAAU,SAChC;IAEhC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAO,CAAC,OAAO,CAGW;IAE1B,OAAgB,MAAM,4BAqGpB;IAEO,iBAAiB;IAK1B,OAAO,CAAC,eAAe;IAIvB;;OAEG;IACH,UAAU,IAAI,OAAO;IAOf,IAAI;IAMJ,KAAK;IAYX,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,UAAU;IAYT,MAAM;CA8ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}

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
-};

package/dist/widgets/tc-offline-modal.d.ts

@@ -1,39 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * A modal displayed when the device goes offline.
- * Automatically shows/hides based on network status.
- *
- * @fires tc-retry - Fired when the retry button is clicked
- * @fires tc-online - Fired when the device comes back online
- * @fires tc-offline - Fired when the device goes offline
- * @csspart overlay - The backdrop overlay
- * @csspart modal - The modal container
- * @csspart icon - The offline icon
- * @csspart title - The modal title
- * @csspart description - The modal description
- * @csspart action - The action button container
- */
-export declare class TcOfflineModal extends LitElement {
-    title: string;
-    description: string;
-    retryLabel: string;
-    autoDetect: boolean;
-    private isOffline;
-    private animation;
-    static styles: import('lit').CSSResult[];
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private handleOnline;
-    private handleOffline;
-    private updateDataState;
-    show(): Promise<void>;
-    hide(): Promise<void>;
-    private handleRetry;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-offline-modal': TcOfflineModal;
-    }
-}
-//# sourceMappingURL=tc-offline-modal.d.ts.map

package/dist/widgets/tc-offline-modal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-offline-modal.d.ts","sourceRoot":"","sources":["../../src/widgets/tc-offline-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;;;;GAaG;AACH,qBACa,cAAe,SAAQ,UAAU;IAChB,KAAK,SAAmB;IACxB,WAAW,SACkB;IACH,UAAU,SAClD;IACyC,UAAU,UAAQ;IAEhE,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,4BAmFpB;IAEO,iBAAiB;IAejB,oBAAoB;IAM7B,OAAO,CAAC,YAAY,CAUlB;IAEF,OAAO,CAAC,aAAa,CAUnB;IAEF,OAAO,CAAC,eAAe;IAIjB,IAAI;IAKJ,IAAI;IAKV,OAAO,CAAC,WAAW;IAcV,MAAM;CA2ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}