@transcodes/ui-components 0.4.2 → 0.4.3

package/dist/primitives/tc-page-decoration.js

@@ -1,130 +0,0 @@
-import { css as c, LitElement as d, html as m } from "lit";
-import { property as b, customElement as p } from "lit/decorators.js";
-import { styleMap as v } from "lit/directives/style-map.js";
-import { sharedStyles as u } from "../styles/shared.js";
-var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (l, t, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? h(t, o) : t, i = l.length - 1, s; i >= 0; i--)
-    (s = l[i]) && (r = (a ? s(t, o, r) : s(r)) || r);
-  return a && r && f(t, o, r), r;
-};
-let e = class extends d {
-  constructor() {
-    super(...arguments), this.variant = "primary", this.sx = {};
-  }
-  render() {
-    return m`
-      <div part="decoration" class="decoration" style=${v(this.sx)}>
-        <div part="blob" class="blob blob-1"></div>
-        <div part="blob" class="blob blob-2"></div>
-        <div part="blob" class="blob blob-3"></div>
-      </div>
-    `;
-  }
-};
-e.styles = [
-  u,
-  c`
-    :host {
-      position: absolute;
-      inset: 0;
-      z-index: 0;
-      pointer-events: none;
-      overflow: hidden;
-    }
-
-    .decoration {
-      position: absolute;
-      inset: 0;
-    }
-
-    .blob {
-      position: absolute;
-      border-radius: var(--radius-full);
-      opacity: 0.35;
-      filter: blur(0.0625rem);
-    }
-
-    /* Primary (purple) variant */
-    :host([variant='primary']) .blob {
-      background: radial-gradient(
-        circle,
-        var(--accent-primary) 0%,
-        transparent 70%
-      );
-    }
-
-    /* Success (green) variant */
-    :host([variant='success']) .blob {
-      background: radial-gradient(
-        circle,
-        var(--accent-success) 0%,
-        transparent 70%
-      );
-    }
-
-    /* Error (red) variant */
-    :host([variant='error']) .blob {
-      background: radial-gradient(
-        circle,
-        var(--error-base) 0%,
-        transparent 70%
-      );
-    }
-
-    .blob-1 {
-      width: 18rem;
-      height: 18rem;
-      top: -6rem;
-      left: -5rem;
-      animation: decorFloat 12s ease-in-out infinite;
-    }
-
-    .blob-2 {
-      width: 14rem;
-      height: 14rem;
-      top: 30%;
-      right: -6rem;
-      animation: decorFloat 10s ease-in-out infinite reverse;
-    }
-
-    .blob-3 {
-      width: var(--size-decoration-blob);
-      height: var(--size-decoration-blob);
-      bottom: -8rem;
-      left: 20%;
-      animation: decorFloat 14s ease-in-out infinite 2s;
-    }
-
-    @keyframes decorFloat {
-      0%,
-      100% {
-        transform: translate(0, 0) scale(1);
-      }
-      33% {
-        transform: translate(0.375rem, -0.5rem) scale(1.08);
-      }
-      66% {
-        transform: translate(-0.25rem, -0.25rem) scale(1.15);
-      }
-    }
-
-    /* Reduced motion */
-    @media (prefers-reduced-motion: reduce) {
-      .blob {
-        animation: none;
-      }
-    }
-  `
-];
-n([
-  b({ type: String })
-], e.prototype, "variant", 2);
-n([
-  b({ type: Object })
-], e.prototype, "sx", 2);
-e = n([
-  p("tc-page-decoration")
-], e);
-export {
-  e as TcPageDecoration
-};

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

@@ -1,19 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * A section container with flex column layout.
- *
- * @slot - Section content
- * @csspart section - The section element
- */
-export declare class TcSection extends LitElement {
-    sx: SxProps;
-    static styles: import('lit').CSSResult;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-section': TcSection;
-    }
-}
-//# sourceMappingURL=tc-section.d.ts.map

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

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

package/dist/primitives/tc-section.js

@@ -1,47 +0,0 @@
-import { css as p, LitElement as m, html as a } from "lit";
-import { property as f, customElement as d } from "lit/decorators.js";
-import { styleMap as x } from "lit/directives/style-map.js";
-var y = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (e, s, c, r) => {
-  for (var t = r > 1 ? void 0 : r ? h(s, c) : s, i = e.length - 1, l; i >= 0; i--)
-    (l = e[i]) && (t = (r ? l(s, c, t) : l(t)) || t);
-  return r && t && y(s, c, t), t;
-};
-let o = class extends m {
-  constructor() {
-    super(...arguments), this.sx = {};
-  }
-  render() {
-    const e = {
-      gap: "var(--space-md)",
-      ...this.sx
-    };
-    return a`
-      <section part="section" class="section" style=${x(e)}>
-        <slot></slot>
-      </section>
-    `;
-  }
-};
-o.styles = p`
-    :host {
-      display: block;
-      width: 100%;
-      min-width: 0;
-    }
-
-    .section {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      box-sizing: border-box;
-    }
-  `;
-n([
-  f({ type: Object })
-], o.prototype, "sx", 2);
-o = n([
-  d("tc-section")
-], o);
-export {
-  o as TcSection
-};

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

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * A loading spinner with responsive sizing.
- * Uses spin animation from design-tokens.
- *
- * @csspart spinner - The spinner element
- */
-export declare class TcSpinner extends LitElement {
-    private mobile;
-    size: 'sm' | 'md' | 'lg' | 'auto';
-    sx: SxProps;
-    static styles: import('lit').CSSResult[];
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-spinner': TcSpinner;
-    }
-}
-//# sourceMappingURL=tc-spinner.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tc-spinner.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAO,CAAC,MAAM,CAAwD;IAE1C,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAU;IAC3C,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BAgDpB;IAEO,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/primitives/tc-spinner.js

@@ -1,90 +0,0 @@
-import { css as d, LitElement as h, html as m } from "lit";
-import { property as l, customElement as v } from "lit/decorators.js";
-import { styleMap as b } from "lit/directives/style-map.js";
-import { MatchMediaController as c } from "../controllers/match-media.controller.js";
-import { sharedStyles as w } from "../styles/shared.js";
-var z = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (r, i, s, n) => {
-  for (var e = n > 1 ? void 0 : n ? y(i, s) : i, o = r.length - 1, a; o >= 0; o--)
-    (a = r[o]) && (e = (n ? a(i, s, e) : a(e)) || e);
-  return n && e && z(i, s, e), e;
-};
-let t = class extends h {
-  constructor() {
-    super(...arguments), this.mobile = new c(this, "(max-width: 768px)"), this.size = "auto", this.sx = {};
-  }
-  render() {
-    let r;
-    this.size === "auto" ? r = this.mobile.matches ? "spinner--auto-mobile" : "spinner--auto-desktop" : r = `spinner--${this.size}`;
-    const s = { ...{ "--spinner-color": "var(--accent-primary)" }, ...this.sx };
-    return m`
-      <div
-        part="spinner"
-        class="spinner ${r}"
-        style=${b(s)}
-        role="progressbar"
-        aria-label="Loading"
-      ></div>
-    `;
-  }
-};
-t.styles = [
-  w,
-  d`
-      :host {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .spinner {
-        display: block;
-        border-radius: var(--radius-full);
-        border-style: solid;
-        border-color: var(--paper-cream);
-        border-top-color: var(--spinner-color);
-        animation: spin var(--duration-slow) linear infinite;
-      }
-
-      .spinner--sm {
-        width: var(--size-spinner-sm);
-        height: var(--size-spinner-sm);
-        border-width: var(--size-border-width-thick);
-      }
-
-      .spinner--md {
-        width: var(--size-spinner-md);
-        height: var(--size-spinner-md);
-        border-width: var(--size-border-width-heavy);
-      }
-
-      .spinner--lg {
-        width: var(--size-spinner-lg);
-        height: var(--size-spinner-lg);
-        border-width: var(--size-border-width-bold);
-      }
-
-      .spinner--auto-mobile {
-        width: var(--size-spinner-lg);
-        height: var(--size-spinner-lg);
-        border-width: var(--size-border-width-heavy);
-      }
-
-      .spinner--auto-desktop {
-        width: var(--size-spinner-xl);
-        height: var(--size-spinner-xl);
-        border-width: var(--size-border-width-bold);
-      }
-    `
-];
-p([
-  l({ type: String })
-], t.prototype, "size", 2);
-p([
-  l({ type: Object })
-], t.prototype, "sx", 2);
-t = p([
-  v("tc-spinner")
-], t);
-export {
-  t as TcSpinner
-};

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

@@ -1,19 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * A circular symbol/avatar component.
- *
- * @slot - Symbol content (icon or text)
- * @csspart symbol - The symbol container
- */
-export declare class TcSymbol extends LitElement {
-    sx: SxProps;
-    static styles: import('lit').CSSResult;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-symbol': TcSymbol;
-    }
-}
-//# sourceMappingURL=tc-symbol.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tc-symbol.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-symbol.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACV,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAmBpB;IAEO,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/primitives/tc-symbol.js

@@ -1,54 +0,0 @@
-import { css as a, LitElement as y, html as c } from "lit";
-import { property as b, customElement as p } from "lit/decorators.js";
-import { styleMap as f } from "lit/directives/style-map.js";
-var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (o, s, l, t) => {
-  for (var e = t > 1 ? void 0 : t ? u(s, l) : s, m = o.length - 1, i; m >= 0; m--)
-    (i = o[m]) && (e = (t ? i(s, l, e) : i(e)) || e);
-  return t && e && v(s, l, e), e;
-};
-let r = class extends y {
-  constructor() {
-    super(...arguments), this.sx = {};
-  }
-  render() {
-    const s = { ...{
-      "--symbol-size": "3rem",
-      "--symbol-bg": "var(--paper-cream)",
-      "--symbol-color": "var(--ink-dark)"
-    }, ...this.sx };
-    return c`
-      <div part="symbol" class="symbol" style=${f(s)}>
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-r.styles = a`
-    :host {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .symbol {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--radius-full);
-      background: var(--symbol-bg);
-      color: var(--symbol-color);
-      width: var(--symbol-size);
-      height: var(--symbol-size);
-      font-family: var(--font-body);
-      font-weight: 600;
-    }
-  `;
-n([
-  b({ type: Object })
-], r.prototype, "sx", 2);
-r = n([
-  p("tc-symbol")
-], r);
-export {
-  r as TcSymbol
-};

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

@@ -1,32 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-type TextTag = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
-type TextSize = 'sm' | 'base' | 'lg' | 'xl' | '2xl';
-type TextWeight = '400' | '500' | '600' | '700';
-type TextColor = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'accent' | 'success' | 'error' | 'warning' | 'info';
-/**
- * A text component with dynamic tag rendering.
- * Supports semantic HTML tags for accessibility.
- * Uses design-tokens for consistent theming across light/dark modes.
- *
- * @slot - Text content
- * @csspart text - The text element
- */
-export declare class TcText extends LitElement {
-    tag: TextTag;
-    size?: TextSize;
-    weight?: TextWeight;
-    color?: TextColor | string;
-    sx: SxProps;
-    static styles: import('lit').CSSResult[];
-    private getColorClass;
-    private getColorStyle;
-    render(): import('lit').TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-text': TcText;
-    }
-}
-export {};
-//# sourceMappingURL=tc-text.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tc-text.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAKtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,KAAK,OAAO,GACR,GAAG,GACH,MAAM,GACN,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,OAAO,CAAC;AAEZ,KAAK,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AACpD,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAChD,KAAK,SAAS,GACV,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,CAAC;AAEX;;;;;;;GAOG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,GAAG,EAAE,OAAO,CAAO;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,4BA2EpB;IAEF,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,aAAa;IAgBZ,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/primitives/tc-text.js

@@ -1,145 +0,0 @@
-import { css as x, LitElement as p } from "lit";
-import { property as a, customElement as g } from "lit/decorators.js";
-import { styleMap as h } from "lit/directives/style-map.js";
-import { unsafeStatic as f, html as m } from "lit/static-html.js";
-import { sharedStyles as y } from "../styles/shared.js";
-var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (r, o, s, i) => {
-  for (var e = i > 1 ? void 0 : i ? u(o, s) : o, c = r.length - 1, l; c >= 0; c--)
-    (l = r[c]) && (e = (i ? l(o, s, e) : l(e)) || e);
-  return i && e && v(o, s, e), e;
-};
-let t = class extends p {
-  constructor() {
-    super(...arguments), this.tag = "p", this.sx = {};
-  }
-  getColorClass() {
-    return this.color && {
-      primary: "text--primary",
-      secondary: "text--secondary",
-      tertiary: "text--tertiary",
-      muted: "text--muted",
-      accent: "text--accent",
-      success: "text--success",
-      error: "text--error",
-      warning: "text--warning",
-      info: "text--info"
-    }[this.color] || "";
-  }
-  getColorStyle() {
-    if (this.color && (this.color.startsWith("var(") || this.color.startsWith("#") || this.color.startsWith("rgb")))
-      return this.color;
-  }
-  render() {
-    const r = f(this.tag), o = [
-      "text",
-      this.size ? `text--${this.size}` : "",
-      this.weight ? `text--w${this.weight}` : "",
-      this.getColorClass()
-    ].filter(Boolean).join(" "), s = this.getColorStyle(), i = {
-      ...s ? { color: s } : {},
-      ...this.sx
-    };
-    return m`
-      <${r} part="text" class=${o} style=${h(i)}>
-        <slot></slot>
-      </${r}>
-    `;
-  }
-};
-t.styles = [
-  y,
-  x`
-      :host {
-        display: contents;
-      }
-
-      .text {
-        margin: 0;
-        padding: 0;
-        font-family: var(--font-body);
-        line-height: 1.4;
-        color: var(--ink-black);
-      }
-
-      /* Size variants using design-tokens */
-      .text--sm {
-        font-size: var(--font-size-sm);
-      }
-      .text--base {
-        font-size: var(--font-size-base);
-      }
-      .text--lg {
-        font-size: var(--font-size-lg);
-      }
-      .text--xl {
-        font-size: var(--font-size-xl);
-      }
-      .text--2xl {
-        font-size: var(--font-size-2xl);
-      }
-
-      /* Weight variants */
-      .text--w400 {
-        font-weight: 400;
-      }
-      .text--w500 {
-        font-weight: 500;
-      }
-      .text--w600 {
-        font-weight: 600;
-      }
-      .text--w700 {
-        font-weight: 700;
-      }
-
-      /* Color variants using design-tokens - these will respond to theme changes */
-      .text--primary {
-        color: var(--ink-black);
-      }
-      .text--secondary {
-        color: var(--ink-dark);
-      }
-      .text--tertiary {
-        color: var(--ink-medium);
-      }
-      .text--muted {
-        color: var(--ink-light);
-      }
-      .text--accent {
-        color: var(--accent-primary);
-      }
-      .text--success {
-        color: var(--accent-success);
-      }
-      .text--error {
-        color: var(--error-base);
-      }
-      .text--warning {
-        color: var(--semantic-warning);
-      }
-      .text--info {
-        color: var(--semantic-info);
-      }
-    `
-];
-n([
-  a({ type: String })
-], t.prototype, "tag", 2);
-n([
-  a({ type: String })
-], t.prototype, "size", 2);
-n([
-  a({ type: String })
-], t.prototype, "weight", 2);
-n([
-  a({ type: String })
-], t.prototype, "color", 2);
-n([
-  a({ type: Object })
-], t.prototype, "sx", 2);
-t = n([
-  g("tc-text")
-], t);
-export {
-  t as TcText
-};

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

@@ -1,36 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * A toast notification component with auto-dismiss and animation.
- *
- * @slot - Toast message content
- * @fires tc-dismiss - Fired when the toast is dismissed
- * @csspart toast - The toast container
- * @csspart content - The content container
- * @csspart close - The close button
- */
-export declare class TcToast extends LitElement {
-    variant: 'info' | 'success' | 'warning' | 'error';
-    duration: number;
-    autoDismiss: boolean;
-    dismissible: boolean;
-    sx: SxProps;
-    private animation;
-    private dismissTimer?;
-    static styles: import('lit').CSSResult[];
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private updateDataState;
-    private clearDismissTimer;
-    private startDismissTimer;
-    show(): Promise<void>;
-    hide(): Promise<void>;
-    private handleClose;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-toast': TcToast;
-    }
-}
-//# sourceMappingURL=tc-toast.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tc-toast.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACT,OAAO,EAC/B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAU;IACO,QAAQ,SAAQ;IACY,WAAW,UAAQ;IAC9C,WAAW,UAAQ;IACpB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,SAAS,CAGd;IAEH,OAAO,CAAC,YAAY,CAAC,CAAgC;IAErD,OAAgB,MAAM,4BA6FpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IASnB,IAAI;IAOJ,IAAI;IAaV,OAAO,CAAC,WAAW;IAIV,MAAM;CAuChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}