@transcodes/ui-components 0.2.0 → 0.3.1

package/dist/index.d.ts

@@ -286,6 +286,35 @@ export declare class StorageController<T = unknown> extends BaseController {
     hostDisconnected(): void;
 }
 
+/**
+ * A card component for displaying authenticator information.
+ * Commonly used for passkeys, TOTP, USB security keys, etc.
+ *
+ * @fires tc-delete - Fired when the delete button is clicked
+ * @fires tc-toggle - Fired when the enable/disable toggle is clicked
+ * @fires tc-click - Fired when the card is clicked
+ * @csspart card - The card container
+ * @csspart icon - The authenticator type icon container
+ * @csspart content - The main content area
+ * @csspart name - The authenticator name
+ * @csspart meta - The metadata area (last used, etc.)
+ * @csspart actions - The actions area
+ * @csspart delete - The delete button
+ */
+export declare class TcAuthenticatorCard extends LitElement {
+    name: string;
+    type: 'passkey' | 'totp' | 'usb' | 'phone' | 'email';
+    lastUsed: string;
+    enabled: boolean;
+    deletable: boolean;
+    clickable: boolean;
+    static styles: CSSResult;
+    private getIconName;
+    private handleCardClick;
+    private handleDelete;
+    render(): TemplateResult<1>;
+}
+
 /**
  * A simple container component without default flex layout.
  * Use for wrapping content with custom styles.
@@ -391,6 +420,23 @@ export declare class TcDivider extends LitElement {
     render(): TemplateResult<1>;
 }
 
+/**
+ * A simplified error/warning/info message component.
+ * Wraps tc-callout with appropriate icon and text styling.
+ *
+ * @csspart callout - The underlying callout container
+ * @csspart icon - The icon element
+ * @csspart message - The message text
+ */
+export declare class TcErrorMessage extends LitElement {
+    variant: 'warning' | 'info' | 'error';
+    message: string;
+    static styles: CSSResult;
+    private getIconName;
+    private getIconColor;
+    render(): TemplateResult<1> | null;
+}
+
 /**
  * A full-screen error state with icon, message, and retry action.
  *
@@ -539,6 +585,38 @@ export declare class TcInput extends LitElement {
     focus(): void;
 }
 
+/**
+ * An input field with an attached chip indicator.
+ * Useful for showing authentication method alongside email/username input.
+ *
+ * @fires tc-input - Fired when input value changes
+ * @fires tc-blur - Fired when input loses focus
+ * @fires tc-keydown - Fired on keydown
+ * @csspart wrapper - The input wrapper container
+ * @csspart input - The input element
+ * @csspart chip - The chip element
+ */
+export declare class TcInputWithChip extends LitElement {
+    label: string;
+    placeholder: string;
+    value: string;
+    error: string;
+    disabled: boolean;
+    readonly: boolean;
+    chipLabel: string;
+    chipIcon: string;
+    chipVariant: 'default' | 'success' | 'error' | 'info';
+    private inputId;
+    private isFocused;
+    static styles: CSSResult[];
+    render(): TemplateResult<1>;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleKeydown;
+    focus(): void;
+}
+
 /**
  * A banner prompting users to install the PWA.
  * Remembers dismissal state via localStorage.

package/dist/index.js

@@ -0,0 +1,80 @@
+import { AnimationController as t } from "./controllers/animation.controller.js";
+import { BaseController as m } from "./controllers/base.controller.js";
+import { FormValidationController as f } from "./controllers/form-validation.controller.js";
+import { HistoryController as x } from "./controllers/history.controller.js";
+import { LoadingController as T } from "./controllers/loading.controller.js";
+import { MatchMediaController as l } from "./controllers/match-media.controller.js";
+import { MessageBusController as C } from "./controllers/message-bus.controller.js";
+import { StorageController as d } from "./controllers/storage.controller.js";
+import { TcBox as I } from "./primitives/tc-box.js";
+import { TcButton as g } from "./primitives/tc-button.js";
+import { TcCallout as M } from "./primitives/tc-callout.js";
+import { TcCard as F } from "./primitives/tc-card.js";
+import { TcChip as A } from "./primitives/tc-chip.js";
+import { TcContainer as E } from "./primitives/tc-container.js";
+import { TcDivider as L } from "./primitives/tc-divider.js";
+import { TcErrorMessage as b } from "./primitives/tc-error-message.js";
+import { TcFormHeader as G } from "./primitives/tc-form-header.js";
+import { TcIcon as P } from "./primitives/tc-icon.js";
+import { TcInput as W } from "./primitives/tc-input.js";
+import { TcInputWithChip as k } from "./primitives/tc-input-with-chip.js";
+import { TcItem as w } from "./primitives/tc-item.js";
+import { TcItemButton as J } from "./primitives/tc-item-button.js";
+import { TcOtpInput as Q } from "./primitives/tc-otp-input.js";
+import { TcSection as U } from "./primitives/tc-section.js";
+import { TcSpinner as Y } from "./primitives/tc-spinner.js";
+import { TcSymbol as _ } from "./primitives/tc-symbol.js";
+import { TcText as oo } from "./primitives/tc-text.js";
+import { TcToast as to } from "./primitives/tc-toast.js";
+import { TcErrorScreen as mo } from "./screens/tc-error-screen.js";
+import { TcLoadingScreen as fo } from "./screens/tc-loading-screen.js";
+import { TcSuccessScreen as xo } from "./screens/tc-success-screen.js";
+import { TcAuthenticatorCard as To } from "./widgets/tc-authenticator-card.js";
+import { TcFloatingButton as lo } from "./widgets/tc-floating-button.js";
+import { TcIframeModal as Co } from "./widgets/tc-iframe-modal.js";
+import { TcInstallationBanner as uo } from "./widgets/tc-installation-banner.js";
+import { TcIosInstallationGuide as So } from "./widgets/tc-ios-installation-guide.js";
+import { TcNotificationModal as Bo } from "./widgets/tc-notification-modal.js";
+import { TcOfflineModal as ho } from "./widgets/tc-offline-modal.js";
+import { TcPageDecoration as yo } from "./widgets/tc-page-decoration.js";
+export {
+  t as AnimationController,
+  m as BaseController,
+  f as FormValidationController,
+  x as HistoryController,
+  T as LoadingController,
+  l as MatchMediaController,
+  C as MessageBusController,
+  d as StorageController,
+  To as TcAuthenticatorCard,
+  I as TcBox,
+  g as TcButton,
+  M as TcCallout,
+  F as TcCard,
+  A as TcChip,
+  E as TcContainer,
+  L as TcDivider,
+  b as TcErrorMessage,
+  mo as TcErrorScreen,
+  lo as TcFloatingButton,
+  G as TcFormHeader,
+  P as TcIcon,
+  Co as TcIframeModal,
+  W as TcInput,
+  k as TcInputWithChip,
+  uo as TcInstallationBanner,
+  So as TcIosInstallationGuide,
+  w as TcItem,
+  J as TcItemButton,
+  fo as TcLoadingScreen,
+  Bo as TcNotificationModal,
+  ho as TcOfflineModal,
+  Q as TcOtpInput,
+  yo as TcPageDecoration,
+  U as TcSection,
+  Y as TcSpinner,
+  xo as TcSuccessScreen,
+  _ as TcSymbol,
+  oo as TcText,
+  to as TcToast
+};

package/dist/primitives/tc-box.js

@@ -0,0 +1,38 @@
+import { LitElement as n, html as i, css as x } from "lit";
+import { property as a, customElement as b } from "lit/decorators.js";
+import { styleMap as f } from "lit/directives/style-map.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, m = (c, s, o, e) => {
+  for (var t = e > 1 ? void 0 : e ? y(s, o) : s, p = c.length - 1, l; p >= 0; p--)
+    (l = c[p]) && (t = (e ? l(s, o, t) : l(t)) || t);
+  return e && t && v(s, o, t), t;
+};
+let r = class extends n {
+  constructor() {
+    super(...arguments), this.sx = {};
+  }
+  render() {
+    return i`
+      <div part="box" class="box" style=${f(this.sx)}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+r.styles = x`
+    :host {
+      display: contents;
+    }
+
+    .box {
+      display: block;
+    }
+  `;
+m([
+  a({ type: Object })
+], r.prototype, "sx", 2);
+r = m([
+  b("tc-box")
+], r);
+export {
+  r as TcBox
+};

package/dist/primitives/tc-button.js

@@ -0,0 +1,167 @@
+import { LitElement as p, html as l, css as u } from "lit";
+import { property as r, customElement as b } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { styleMap as y } from "lit/directives/style-map.js";
+import { sharedStyles as m } from "../styles/shared.js";
+var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (o, i, s, a) => {
+  for (var t = a > 1 ? void 0 : a ? f(i, s) : i, d = o.length - 1, c; d >= 0; d--)
+    (c = o[d]) && (t = (a ? c(i, s, t) : c(t)) || t);
+  return a && t && h(i, s, t), t;
+};
+let e = class extends p {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.loading = !1, this.variant = "primary", this.sx = {};
+  }
+  render() {
+    const o = {
+      button: !0,
+      "button-ink": this.variant !== "secondary",
+      "button-primary": this.variant === "primary",
+      "button-secondary": this.variant === "secondary",
+      "button-success": this.variant === "success",
+      "button--loading": this.loading
+    };
+    return l`
+      <button
+        part="button"
+        class=${v(o)}
+        style=${y(this.sx)}
+        ?disabled=${this.disabled || this.loading}
+        type="button"
+        @click=${this.handleClick}
+      >
+        <span class="button-content">
+          ${this.loading ? l`<div part="spinner" class="button-spinner"></div>` : ""}
+          <slot></slot>
+        </span>
+      </button>
+    `;
+  }
+  handleClick(o) {
+    this.disabled || this.loading || this.dispatchEvent(
+      new CustomEvent("tc-click", {
+        bubbles: !0,
+        composed: !0,
+        detail: { originalEvent: o }
+      })
+    );
+  }
+};
+e.styles = [
+  m,
+  u`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      /* Extend base .button from design-tokens */
+      .button {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-sm);
+        overflow: hidden;
+      }
+
+      /* Radial gradient glow overlay for primary/success */
+      .button-ink::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: radial-gradient(
+          circle at center,
+          transparent 0%,
+          var(--overlay-glow-white) 100%
+        );
+        opacity: var(--opacity-hidden);
+        transition: opacity 600ms ease;
+        pointer-events: none;
+      }
+
+      .button-ink:hover:not(:disabled)::before {
+        opacity: 1;
+      }
+
+      /* Loading pulse animation */
+      .button--loading {
+        animation: pulse 1s ease-in-out infinite;
+      }
+
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: var(--opacity-visible);
+        }
+        50% {
+          opacity: var(--opacity-loading);
+        }
+      }
+
+      /* Active states - design-tokens doesn't include these */
+      .button-primary:active:not(:disabled) {
+        background: var(--accent-primary-pressed);
+        transform: translateY(0);
+        box-shadow: none;
+      }
+
+      .button-success:active:not(:disabled) {
+        background: var(--accent-success-pressed);
+        transform: translateY(0);
+        box-shadow: none;
+      }
+
+      .button-secondary:active:not(:disabled) {
+        background: var(--alpha-primary08);
+      }
+
+      /* Secondary spinner override */
+      .button-secondary .button-spinner {
+        border-color: var(--alpha-primary30);
+        border-top-color: var(--accent-primary);
+      }
+
+      /* Focus visible state */
+      .button:focus-visible {
+        outline: var(--size-border-width-thick) solid var(--accent-primary);
+        outline-offset: var(--size-border-width-thick);
+      }
+
+      /* Reduced motion */
+      @media (prefers-reduced-motion: reduce) {
+        .button,
+        .button-ink::before {
+          transition-duration: 0.01ms !important;
+        }
+
+        .button--loading {
+          animation: none;
+        }
+
+        .button-spinner {
+          animation-duration: 1.5s;
+        }
+      }
+    `
+];
+n([
+  r({ type: Boolean })
+], e.prototype, "disabled", 2);
+n([
+  r({ type: Boolean })
+], e.prototype, "loading", 2);
+n([
+  r({ type: String })
+], e.prototype, "variant", 2);
+n([
+  r({ type: Object })
+], e.prototype, "sx", 2);
+e = n([
+  b("tc-button")
+], e);
+export {
+  e as TcButton
+};

package/dist/primitives/tc-callout.js

@@ -0,0 +1,86 @@
+import { LitElement as c, html as m, css as p } from "lit";
+import { property as v, customElement as d } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { sharedStyles as f } from "../styles/shared.js";
+var h = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (n, e, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? y(e, s) : e, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (t = (r ? a(e, s, t) : a(t)) || t);
+  return r && t && h(e, s, t), t;
+};
+let o = class extends c {
+  constructor() {
+    super(...arguments), this.variant = "info";
+  }
+  render() {
+    const n = this.variant === "error", e = {
+      notice: !n,
+      "notice-info": this.variant === "info",
+      "notice-success": this.variant === "success",
+      "notice-warning": this.variant === "warning",
+      "error-message": n
+    };
+    return m`
+      <div part="callout" class=${u(e)} role="alert">
+        <div class="callout-inner">
+          <div part="icon" class="callout-icon">
+            <slot name="icon"></slot>
+          </div>
+          <div part="content" class="callout-content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = [
+  f,
+  p`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      /* Override animation from design-tokens for immediate display */
+      .notice {
+        animation: none;
+      }
+
+      /* Error variant uses error-message class from design-tokens */
+      .error-message {
+        animation: none;
+      }
+
+      /* Icon + content layout */
+      .callout-inner {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--space-sm);
+      }
+
+      .callout-icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+      }
+
+      /* Hide icon container when empty */
+      .callout-icon:empty {
+        display: none;
+      }
+
+      .callout-content {
+        flex: 1;
+        min-width: 0;
+      }
+    `
+];
+l([
+  v({ type: String })
+], o.prototype, "variant", 2);
+o = l([
+  d("tc-callout")
+], o);
+export {
+  o as TcCallout
+};

package/dist/primitives/tc-card.js

@@ -0,0 +1,76 @@
+import { LitElement as p, html as l, css as f } from "lit";
+import { property as c, customElement as m } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { sharedStyles as v } from "../styles/shared.js";
+var h = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (t, o, n, s) => {
+  for (var e = s > 1 ? void 0 : s ? y(o, n) : o, a = t.length - 1, i; a >= 0; a--)
+    (i = t[a]) && (e = (s ? i(o, n, e) : i(e)) || e);
+  return s && e && h(o, n, e), e;
+};
+let r = class extends p {
+  constructor() {
+    super(...arguments), this.noBorder = !1, this.sx = {};
+  }
+  render() {
+    const t = {
+      card: !0,
+      "card--no-border": this.noBorder
+    };
+    return l`
+      <div part="card" class=${b(t)} style=${u(this.sx)}>
+        <div class="card-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = [
+  v,
+  f`
+      :host {
+        display: block;
+      }
+
+      /* Inner border effect using mask - extends design-tokens .card */
+      .card::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        padding: 0.0625rem;
+        background: linear-gradient(
+          180deg,
+          var(--alpha-white90) 0%,
+          var(--alpha-white30) 100%
+        );
+        mask:
+          linear-gradient(#fff 0 0) content-box,
+          linear-gradient(#fff 0 0);
+        mask-composite: exclude;
+        pointer-events: none;
+      }
+
+      .card--no-border::before {
+        display: none;
+      }
+
+      .card-content {
+        position: relative;
+        z-index: 1;
+      }
+    `
+];
+d([
+  c({ type: Boolean, attribute: "no-border" })
+], r.prototype, "noBorder", 2);
+d([
+  c({ type: Object })
+], r.prototype, "sx", 2);
+r = d([
+  m("tc-card")
+], r);
+export {
+  r as TcCard
+};

package/dist/primitives/tc-chip.js

@@ -0,0 +1,79 @@
+import { LitElement as l, html as h, css as d } from "lit";
+import { property as n, customElement as f } from "lit/decorators.js";
+import { sharedStyles as v } from "../styles/shared.js";
+var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (o, i, s, t) => {
+  for (var r = t > 1 ? void 0 : t ? u(i, s) : i, a = o.length - 1, p; a >= 0; a--)
+    (p = o[a]) && (r = (t ? p(i, s, r) : p(r)) || r);
+  return t && r && m(i, s, r), r;
+};
+let e = class extends l {
+  constructor() {
+    super(...arguments), this.variant = "default", this.size = "md";
+  }
+  render() {
+    return h`
+      <span part="chip" class="chip chip--${this.variant} chip--${this.size}">
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+e.styles = [
+  v,
+  d`
+      :host {
+        display: inline-flex;
+      }
+
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-full);
+        font-family: var(--font-body);
+        font-weight: 500;
+      }
+
+      .chip--sm {
+        padding: var(--size-chip-padding-sm);
+        font-size: var(--font-size-xs);
+      }
+
+      .chip--md {
+        padding: var(--size-chip-padding-md);
+        font-size: var(--font-size-sm);
+      }
+
+      .chip--default {
+        background: var(--paper-cream);
+        color: var(--ink-dark);
+      }
+
+      .chip--success {
+        background: var(--alpha-success15);
+        color: var(--accent-success);
+      }
+
+      .chip--error {
+        background: var(--error-bg);
+        color: var(--error-base);
+      }
+
+      .chip--info {
+        background: var(--alpha-primary10);
+        color: var(--accent-primary);
+      }
+    `
+];
+c([
+  n({ type: String })
+], e.prototype, "variant", 2);
+c([
+  n({ type: String })
+], e.prototype, "size", 2);
+e = c([
+  f("tc-chip")
+], e);
+export {
+  e as TcChip
+};

package/dist/primitives/tc-container.js

@@ -0,0 +1,62 @@
+import { LitElement as p, html as d, css as m } from "lit";
+import { property as c, customElement as f } from "lit/decorators.js";
+import { styleMap as h } from "lit/directives/style-map.js";
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (r, i, o, s) => {
+  for (var t = s > 1 ? void 0 : s ? y(i, o) : i, n = r.length - 1, a; n >= 0; n--)
+    (a = r[n]) && (t = (s ? a(i, o, t) : a(t)) || t);
+  return s && t && w(i, o, t), t;
+};
+let e = class extends p {
+  constructor() {
+    super(...arguments), this.wide = !1, this.sx = {}, this.defaultStyles = {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "flex-start"
+    };
+  }
+  render() {
+    const r = {
+      ...this.defaultStyles,
+      ...this.sx
+    };
+    return d`
+      <div
+        part="container"
+        class="container ${this.wide ? "container--wide" : ""}"
+        style=${h(r)}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+e.styles = m`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .container {
+      position: relative;
+      width: 100%;
+      max-width: var(--container-max-width);
+      margin: 0 auto;
+    }
+
+    .container--wide {
+      max-width: var(--container-max-width-wide);
+    }
+  `;
+l([
+  c({ type: Boolean })
+], e.prototype, "wide", 2);
+l([
+  c({ type: Object })
+], e.prototype, "sx", 2);
+e = l([
+  f("tc-container")
+], e);
+export {
+  e as TcContainer
+};