@transcodes/ui-components 0.4.1 → 0.4.3

package/dist/primitives/tc-container.js

@@ -1,64 +0,0 @@
-import { css as p, LitElement as d, html as m } from "lit";
-import { property as c, customElement as h } from "lit/decorators.js";
-import { styleMap as f } from "lit/directives/style-map.js";
-var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (r, i, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? x(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 d {
-  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 m`
-      <div
-        part="container"
-        class="container ${this.wide ? "container--wide" : ""}"
-        style=${f(r)}
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-e.styles = p`
-    :host {
-      display: block;
-      width: 100%;
-      min-width: 0;
-    }
-
-    .container {
-      position: relative;
-      width: 100%;
-      max-width: var(--container-max-width);
-      margin: 0 auto;
-      box-sizing: border-box;
-    }
-
-    .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([
-  h("tc-container")
-], e);
-export {
-  e as TcContainer
-};

package/dist/primitives/tc-divider.d.ts

@@ -1,22 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * A horizontal divider line with optional text.
- *
- * @csspart divider - The divider element (simple mode)
- * @csspart container - The container element (text mode)
- * @csspart line - The line elements (text mode)
- * @csspart text - The text element (text mode)
- */
-export declare class TcDivider extends LitElement {
-    text: string;
-    sx: SxProps;
-    static styles: import('lit').CSSResult;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-divider': TcDivider;
-    }
-}
-//# sourceMappingURL=tc-divider.d.ts.map

package/dist/primitives/tc-divider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-divider.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAM;IACV,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAqCpB;IAEO,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/primitives/tc-divider.js

@@ -1,78 +0,0 @@
-import { css as c, LitElement as m, html as l } from "lit";
-import { property as p, customElement as h } from "lit/decorators.js";
-import { styleMap as v } from "lit/directives/style-map.js";
-var x = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (s, e, d, t) => {
-  for (var r = t > 1 ? void 0 : t ? f(e, d) : e, n = s.length - 1, o; n >= 0; n--)
-    (o = s[n]) && (r = (t ? o(e, d, r) : o(r)) || r);
-  return t && r && x(e, d, r), r;
-};
-let i = class extends m {
-  constructor() {
-    super(...arguments), this.text = "", this.sx = {};
-  }
-  render() {
-    const e = { ...{
-      "--divider-color": "var(--ink-faint)",
-      "--divider-spacing": "var(--space-md)"
-    }, ...this.sx };
-    return this.text ? l`
-        <div part="container" class="divider-container" style=${v(e)}>
-          <hr part="line" class="divider-line" />
-          <span part="text" class="divider-text">${this.text}</span>
-          <hr part="line" class="divider-line" />
-        </div>
-      ` : l`
-      <hr part="divider" class="divider" style=${v(e)} />
-    `;
-  }
-};
-i.styles = c`
-    :host {
-      display: block;
-      width: 100%;
-      min-width: 0;
-    }
-
-    /* Simple divider (no text) */
-    .divider {
-      border: none;
-      height: 1px;
-      background-color: var(--divider-color);
-      margin: var(--divider-spacing) 0;
-    }
-
-    /* Divider with text */
-    .divider-container {
-      display: flex;
-      align-items: center;
-      gap: var(--space-md);
-      margin: var(--divider-spacing) 0;
-    }
-
-    .divider-line {
-      flex: 1;
-      border: none;
-      height: 1px;
-      background-color: var(--divider-color);
-      margin: 0;
-    }
-
-    .divider-text {
-      flex-shrink: 0;
-      font-size: var(--font-size-sm);
-      color: var(--ink-light);
-      font-family: var(--font-body);
-    }
-  `;
-a([
-  p({ type: String })
-], i.prototype, "text", 2);
-a([
-  p({ type: Object })
-], i.prototype, "sx", 2);
-i = a([
-  h("tc-divider")
-], i);
-export {
-  i as TcDivider
-};

package/dist/primitives/tc-error-message.d.ts

@@ -1,25 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * 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;
-    sx: SxProps;
-    static styles: import('lit').CSSResult;
-    private getIconName;
-    private getIconColor;
-    render(): import('lit').TemplateResult<1> | null;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-error-message': TcErrorMessage;
-    }
-}
-//# sourceMappingURL=tc-error-message.d.ts.map

package/dist/primitives/tc-error-message.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-error-message.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-error-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,iBAAiB,CAAC;AACzB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAEtB;;;;;;;GAOG;AACH,qBACa,cAAe,SAAQ,UAAU;IAChB,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,CAAW;IAChD,OAAO,SAAM;IACb,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAcpB;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,YAAY;IAWX,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/primitives/tc-error-message.js

@@ -1,81 +0,0 @@
-import { css as p, LitElement as m, html as g } from "lit";
-import { property as c, customElement as u } from "lit/decorators.js";
-import "./tc-callout.js";
-import "./tc-icon.js";
-import "./tc-text.js";
-var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (l, r, i, s) => {
-  for (var t = s > 1 ? void 0 : s ? v(r, i) : r, n = l.length - 1, o; n >= 0; n--)
-    (o = l[n]) && (t = (s ? o(r, i, t) : o(t)) || t);
-  return s && t && h(r, i, t), t;
-};
-let e = class extends m {
-  constructor() {
-    super(...arguments), this.variant = "error", this.message = "", this.sx = {};
-  }
-  getIconName() {
-    switch (this.variant) {
-      case "warning":
-        return "alert-triangle";
-      case "info":
-        return "info";
-      default:
-        return "alert-circle";
-    }
-  }
-  getIconColor() {
-    switch (this.variant) {
-      case "warning":
-        return "var(--semantic-warning)";
-      case "info":
-        return "var(--semantic-info)";
-      default:
-        return "var(--error-base)";
-    }
-  }
-  render() {
-    return this.message ? g`
-      <tc-callout part="callout" variant=${this.variant} .sx=${this.sx}>
-        <tc-icon
-          slot="icon"
-          part="icon"
-          name=${this.getIconName()}
-          size="var(--size-icon-action)"
-          color=${this.getIconColor()}
-        ></tc-icon>
-        <tc-text part="message" class="message-text" size="sm">
-          ${this.message}
-        </tc-text>
-      </tc-callout>
-    ` : null;
-  }
-};
-e.styles = p`
-    :host {
-      display: block;
-      width: 100%;
-      min-width: 0;
-    }
-
-    tc-callout::part(callout) {
-      padding: var(--space-sm) var(--space-md);
-    }
-
-    .message-text {
-      line-height: 1.4;
-    }
-  `;
-a([
-  c({ type: String })
-], e.prototype, "variant", 2);
-a([
-  c({ type: String })
-], e.prototype, "message", 2);
-a([
-  c({ type: Object })
-], e.prototype, "sx", 2);
-e = a([
-  u("tc-error-message")
-], e);
-export {
-  e as TcErrorMessage
-};

package/dist/primitives/tc-form-header.d.ts

@@ -1,26 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * Form header component with animated title, subtitle, and optional notice.
- * Uses design-tokens form classes (.form-title, .form-subtitle).
- *
- * @csspart header - The header container
- * @csspart title - The title element
- * @csspart subtitle - The subtitle element
- * @csspart notice - The notice element
- */
-export declare class TcFormHeader extends LitElement {
-    title: string;
-    subtitle: string;
-    notice: string;
-    noAnimation: boolean;
-    sx: SxProps;
-    static styles: import('lit').CSSResult[];
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-form-header': TcFormHeader;
-    }
-}
-//# sourceMappingURL=tc-form-header.d.ts.map

package/dist/primitives/tc-form-header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-form-header.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-form-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IACd,KAAK,SAAM;IACX,QAAQ,SAAM;IACd,MAAM,SAAM;IACgB,WAAW,UAAS;IAChD,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAsEpB;IAEO,MAAM;CA6BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/primitives/tc-form-header.js

@@ -1,122 +0,0 @@
-import { css as p, LitElement as c, html as n } from "lit";
-import { property as r, customElement as f } from "lit/decorators.js";
-import { styleMap as h } from "lit/directives/style-map.js";
-import { sharedStyles as u } from "../styles/shared.js";
-var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (i, o, m, s) => {
-  for (var e = s > 1 ? void 0 : s ? b(o, m) : o, l = i.length - 1, d; l >= 0; l--)
-    (d = i[l]) && (e = (s ? d(o, m, e) : d(e)) || e);
-  return s && e && v(o, m, e), e;
-};
-let t = class extends c {
-  constructor() {
-    super(...arguments), this.title = "", this.subtitle = "", this.notice = "", this.noAnimation = !1, this.sx = {};
-  }
-  render() {
-    const i = !this.noAnimation;
-    return n`
-      <header part="header" class="header" style=${h(this.sx)}>
-        ${this.title ? n`<h1 part="title" class="form-title ${i ? "form-title--animated" : ""}">
-              ${this.title}
-            </h1>` : ""}
-        ${this.subtitle ? n`<p part="subtitle" class="form-subtitle ${i ? "form-subtitle--animated" : ""}">
-              ${this.subtitle}
-            </p>` : ""}
-        ${this.notice ? n`<div part="notice" class="notice ${i ? "notice--animated" : ""}">
-              ${this.notice}
-            </div>` : ""}
-      </header>
-    `;
-  }
-};
-t.styles = [
-  u,
-  p`
-      :host {
-        display: block;
-        width: 100%;
-        min-width: 0;
-        text-align: center;
-      }
-
-      .header {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: var(--space-sm);
-      }
-
-      /* Extend design-tokens .form-title */
-      .form-title {
-        margin: 0;
-        line-height: 1.2;
-      }
-
-      .form-title--animated {
-        animation: slideDown var(--duration-fast) var(--easing-ease-in-out) backwards;
-      }
-
-      /* Extend design-tokens .form-subtitle */
-      .form-subtitle {
-        margin: 0;
-        max-width: 28ch;
-      }
-
-      .form-subtitle--animated {
-        animation: slideUp var(--duration-smooth) var(--easing-ease-in-out) 100ms backwards;
-      }
-
-      .notice {
-        margin-top: var(--space-sm);
-        padding: var(--space-sm) var(--space-md);
-        background: var(--paper-warm);
-        border-radius: var(--radius-md);
-        font-size: var(--font-size-sm);
-        color: var(--ink-medium);
-      }
-
-      .notice--animated {
-        animation: noticeReveal 500ms var(--easing-ease-in-out) 200ms backwards;
-      }
-
-      @keyframes noticeReveal {
-        from {
-          opacity: 0;
-          transform: scale(0.95);
-        }
-        to {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-
-      /* Reduced motion */
-      @media (prefers-reduced-motion: reduce) {
-        .form-title--animated,
-        .form-subtitle--animated,
-        .notice--animated {
-          animation: none;
-        }
-      }
-    `
-];
-a([
-  r({ type: String })
-], t.prototype, "title", 2);
-a([
-  r({ type: String })
-], t.prototype, "subtitle", 2);
-a([
-  r({ type: String })
-], t.prototype, "notice", 2);
-a([
-  r({ type: Boolean, attribute: "no-animation" })
-], t.prototype, "noAnimation", 2);
-a([
-  r({ type: Object })
-], t.prototype, "sx", 2);
-t = a([
-  f("tc-form-header")
-], t);
-export {
-  t as TcFormHeader
-};

package/dist/primitives/tc-icon.d.ts

@@ -1,20 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-import { SxProps } from '../types.js';
-export type IconName = 'arrow-left' | 'arrow-right' | 'check' | 'x' | 'close' | 'chevron-right' | 'chevron-left' | 'error' | 'alert-circle' | 'info' | 'warning' | 'loading' | 'loader' | 'biometric' | 'email' | 'passkey' | 'bell' | 'download' | 'wifi-off' | 'apple' | 'google' | 'windows' | 'samsung' | 'phone' | 'success' | 'lock' | 'person' | 'device' | 'totp' | 'email-otp' | 'qrcode' | 'key';
-/**
- * An icon component with built-in icon set.
- *
- * @csspart icon - The icon container
- */
-export declare class TcIcon extends LitElement {
-    name: IconName;
-    sx: SxProps;
-    static styles: import('lit').CSSResult;
-    render(): TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-icon': TcIcon;
-    }
-}
-//# sourceMappingURL=tc-icon.d.ts.map

package/dist/primitives/tc-icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-icon.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,MAAM,QAAQ,GAChB,YAAY,GACZ,aAAa,GACb,OAAO,GACP,GAAG,GACH,OAAO,GACP,eAAe,GACf,cAAc,GACd,OAAO,GACP,cAAc,GACd,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,GACR,WAAW,GACX,OAAO,GACP,SAAS,GACT,MAAM,GACN,UAAU,GACV,UAAU,GAEV,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GAET,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,GAER,MAAM,GACN,WAAW,GACX,QAAQ,GACR,KAAK,CAAC;AAwCV;;;;GAIG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,CAAU;IACxB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAkBpB;IAEO,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/primitives/tc-icon.js

@@ -1,95 +0,0 @@
-import { html as e, css as a, LitElement as p } from "lit";
-import { property as h, customElement as g } from "lit/decorators.js";
-import { styleMap as d } from "lit/directives/style-map.js";
-var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, c = (l, r, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? z(r, t) : r, s = l.length - 1, v; s >= 0; s--)
-    (v = l[s]) && (o = (i ? v(r, t, o) : v(o)) || o);
-  return i && o && x(r, t, o), o;
-};
-const u = {
-  "arrow-left": e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>`,
-  "arrow-right": e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>`,
-  check: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`,
-  x: e`<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>`,
-  close: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`,
-  "chevron-right": e`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
-  "chevron-left": e`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
-  error: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`,
-  "alert-circle": e`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`,
-  info: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`,
-  warning: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>`,
-  loading: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>`,
-  loader: e`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>`,
-  biometric: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67-.09.18-.26.28-.44.28zM3.5 9.72c-.1 0-.2-.03-.29-.09-.23-.16-.28-.47-.12-.7.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25.16.22.11.54-.12.7-.23.16-.54.11-.7-.12-.9-1.26-2.04-2.25-3.39-2.94-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21zm6.25 12.07c-.13 0-.26-.05-.35-.15-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39-2.57 0-4.66 1.97-4.66 4.39 0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15zm7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12zM14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1-1.4-1.39-2.17-3.24-2.17-5.22 0-1.62 1.38-2.94 3.08-2.94 1.7 0 3.08 1.32 3.08 2.94 0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29-.49-1.31-.73-2.61-.73-3.96 0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38z"/></svg>`,
-  email: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>`,
-  passkey: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 10h-8.35C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H13l2 2 2-2 2 2 2-2.93-2-2.07zm-14 2c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>`,
-  bell: e`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>`,
-  download: e`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
-  "wifi-off": e`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"></path><path d="M10.71 5.05A16 16 0 0 1 22.58 9"></path><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>`,
-  // Brand icons
-  apple: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>`,
-  google: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>`,
-  windows: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 12V6.75l6-1.32v6.48L3 12zm17-9v8.75l-10 .15V5.21L20 3zM3 13l6 .09v6.81l-6-1.15V13zm17 .25V22l-10-1.91V13.1l10 .15z"/></svg>`,
-  samsung: e`<svg viewBox="0 0 24 24"><text x="12" y="17" font-size="18" font-weight="700" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" text-anchor="middle" fill="currentColor">S</text></svg>`,
-  // General icons
-  phone: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>`,
-  success: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`,
-  lock: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>`,
-  person: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>`,
-  device: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15 7v4h1v2h-3V5h2l-3-4-3 4h2v8H8v-2.07c.7-.37 1.2-1.08 1.2-1.93 0-1.21-.99-2.2-2.2-2.2-1.21 0-2.2.99-2.2 2.2 0 .85.5 1.56 1.2 1.93V13c0 1.11.89 2 2 2h3v3.05c-.71.37-1.2 1.1-1.2 1.95 0 1.22.99 2.2 2.2 2.2 1.21 0 2.2-.98 2.2-2.2 0-.85-.49-1.58-1.2-1.95V15h3c1.11 0 2-.89 2-2v-2h1V7h-4z"/></svg>`,
-  // Auth icons
-  totp: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>`,
-  "email-otp": e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>`,
-  qrcode: e`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM15 19h2v2h-2zM17 17h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2zM19 19h2v2h-2z"/><path d="M6 6h2v2H6zM6 16h2v2H6zM16 6h2v2h-2z"/></svg>`,
-  key: e`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"/></svg>`
-};
-let n = class extends p {
-  constructor() {
-    super(...arguments), this.name = "info", this.sx = {};
-  }
-  render() {
-    const l = u[this.name];
-    if (!l)
-      return console.warn(`Icon "${this.name}" not found`), e``;
-    const t = { ...{
-      "--icon-size": "1.5rem",
-      "--icon-color": "currentColor"
-    }, ...this.sx };
-    return e`
-      <span part="icon" class="icon" style=${d(t)}>
-        ${l}
-      </span>
-    `;
-  }
-};
-n.styles = a`
-    :host {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    svg {
-      width: var(--icon-size);
-      height: var(--icon-size);
-      color: var(--icon-color);
-    }
-  `;
-c([
-  h({ type: String })
-], n.prototype, "name", 2);
-c([
-  h({ type: Object })
-], n.prototype, "sx", 2);
-n = c([
-  g("tc-icon")
-], n);
-export {
-  n as TcIcon
-};

package/dist/primitives/tc-input-with-chip.d.ts

@@ -1,40 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * 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';
-    sx: SxProps;
-    private inputId;
-    private isFocused;
-    static styles: import('lit').CSSResult[];
-    render(): import('lit').TemplateResult<1>;
-    private handleInput;
-    private handleFocus;
-    private handleBlur;
-    private handleKeydown;
-    focus(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-input-with-chip': TcInputWithChip;
-    }
-}
-//# sourceMappingURL=tc-input-with-chip.d.ts.map

package/dist/primitives/tc-input-with-chip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-input-with-chip.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-input-with-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACO,SAAS,SAAM;IAChB,QAAQ,SAAM;IACX,WAAW,EAC9D,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAa;IACK,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,OAAO,CACiC;IAChD,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAgB,MAAM,4BA6GpB;IAEO,MAAM;IAoEf,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAUrB,KAAK;CAIN;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}