@transcodes/ui-components 0.4.1 → 0.4.3

package/dist/primitives/tc-input-with-chip.js

@@ -1,250 +0,0 @@
-import { css as u, LitElement as v, html as n } from "lit";
-import { property as a, state as h, customElement as b } from "lit/decorators.js";
-import { classMap as d } from "lit/directives/class-map.js";
-import { styleMap as y } from "lit/directives/style-map.js";
-import { sharedStyles as f } from "../styles/shared.js";
-import "./tc-chip.js";
-import "./tc-icon.js";
-var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, i, s, p) => {
-  for (var o = p > 1 ? void 0 : p ? g(i, s) : i, l = t.length - 1, c; l >= 0; l--)
-    (c = t[l]) && (o = (p ? c(i, s, o) : c(o)) || o);
-  return p && o && m(i, s, o), o;
-};
-let e = class extends v {
-  constructor() {
-    super(...arguments), this.label = "", this.placeholder = "", this.value = "", this.error = "", this.disabled = !1, this.readonly = !1, this.chipLabel = "", this.chipIcon = "", this.chipVariant = "default", this.sx = {}, this.inputId = `tc-input-chip-${Math.random().toString(36).slice(2)}`, this.isFocused = !1;
-  }
-  render() {
-    const t = this.error.length > 0, i = {
-      "field-group": !0,
-      focused: this.isFocused,
-      "has-error": t
-    }, s = {
-      "input-container": !0,
-      "has-error": t
-    };
-    return n`
-      <div class=${d(i)} style=${y(this.sx)}>
-        ${this.label ? n`<label part="label" class="field-label" for=${this.inputId}>${this.label}</label>` : ""}
-        <div part="wrapper" class=${d(s)}>
-          <input
-            part="input"
-            id=${this.inputId}
-            class="input"
-            type="text"
-            placeholder=${this.placeholder}
-            .value=${this.value}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readonly}
-            aria-invalid=${t ? "true" : "false"}
-            aria-describedby=${t ? `${this.inputId}-error` : ""}
-            @input=${this.handleInput}
-            @focus=${this.handleFocus}
-            @blur=${this.handleBlur}
-            @keydown=${this.handleKeydown}
-          />
-          ${this.chipLabel ? n`
-                <div class="chip-container">
-                  <tc-chip part="chip" variant=${this.chipVariant} size="sm">
-                    <span class="chip-content">
-                      ${this.chipIcon ? n`<tc-icon name=${this.chipIcon} .sx=${{ "--icon-size": "0.875rem" }}></tc-icon>` : ""}
-                      ${this.chipLabel}
-                    </span>
-                  </tc-chip>
-                </div>
-              ` : ""}
-        </div>
-        ${t ? n`<p part="error" id="${this.inputId}-error" class="error-text" role="alert">
-              ${this.error}
-            </p>` : ""}
-      </div>
-    `;
-  }
-  handleInput(t) {
-    const i = t.target;
-    this.value = i.value, this.dispatchEvent(
-      new CustomEvent("tc-input", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: i.value }
-      })
-    );
-  }
-  handleFocus() {
-    this.isFocused = !0;
-  }
-  handleBlur(t) {
-    const i = t.target;
-    this.isFocused = !1, this.dispatchEvent(
-      new CustomEvent("tc-blur", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: i.value }
-      })
-    );
-  }
-  handleKeydown(t) {
-    this.dispatchEvent(
-      new CustomEvent("tc-keydown", {
-        bubbles: !0,
-        composed: !0,
-        detail: { key: t.key, value: this.value, originalEvent: t }
-      })
-    );
-  }
-  focus() {
-    this.shadowRoot?.querySelector("input")?.focus();
-  }
-};
-e.styles = [
-  f,
-  u`
-      :host {
-        display: block;
-        width: 100%;
-        min-width: 0;
-      }
-
-      .field-group {
-        width: 100%;
-      }
-
-      .field-group.focused .field-label {
-        color: var(--accent-primary);
-      }
-
-      .field-group.has-error .field-label {
-        color: var(--error-base);
-      }
-
-      .input-container {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: 100%;
-        background: var(--paper-white);
-        border: 1px solid var(--ink-faint);
-        border-radius: var(--input-radius);
-        transition: var(--transition-fast);
-      }
-
-      .input-container:focus-within {
-        border-color: var(--accent-primary);
-        box-shadow: 0 0 0 var(--shadow-focus-ring-width) var(--alpha-primary10);
-      }
-
-      .input-container.has-error {
-        border-color: var(--error-base);
-        background: var(--error-bg);
-      }
-
-      .input-container.has-error:focus-within {
-        box-shadow: 0 0 0 var(--shadow-focus-ring-width) var(--error-border);
-      }
-
-      .input {
-        flex: 1;
-        min-width: 0;
-        padding: var(--input-padding-y) var(--input-padding-x);
-        font-family: var(--font-body);
-        font-size: var(--input-font-size);
-        color: var(--ink-black);
-        background: transparent;
-        border: none;
-        outline: none;
-      }
-
-      .input::placeholder {
-        color: var(--ink-light);
-      }
-
-      .input:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-      }
-
-      .input:read-only {
-        cursor: default;
-      }
-
-      .chip-container {
-        display: flex;
-        align-items: center;
-        padding-right: var(--space-sm);
-      }
-
-      .chip-content {
-        display: flex;
-        align-items: center;
-        gap: var(--space-xs);
-      }
-
-      .error-text {
-        font-size: var(--font-size-sm);
-        color: var(--error-base);
-        margin: var(--space-xs) 0 0;
-        animation: slideDown 300ms ease backwards;
-      }
-
-      @keyframes slideDown {
-        from {
-          opacity: 0;
-          transform: translateY(calc(-1 * var(--offset-slide-up-sm)));
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      @media (prefers-reduced-motion: reduce) {
-        .input-container,
-        .error-text {
-          transition-duration: 0.01ms !important;
-          animation-duration: 0.01ms !important;
-        }
-      }
-    `
-];
-r([
-  a({ type: String })
-], e.prototype, "label", 2);
-r([
-  a({ type: String })
-], e.prototype, "placeholder", 2);
-r([
-  a({ type: String })
-], e.prototype, "value", 2);
-r([
-  a({ type: String })
-], e.prototype, "error", 2);
-r([
-  a({ type: Boolean })
-], e.prototype, "disabled", 2);
-r([
-  a({ type: Boolean })
-], e.prototype, "readonly", 2);
-r([
-  a({ type: String, attribute: "chip-label" })
-], e.prototype, "chipLabel", 2);
-r([
-  a({ type: String, attribute: "chip-icon" })
-], e.prototype, "chipIcon", 2);
-r([
-  a({ type: String, attribute: "chip-variant" })
-], e.prototype, "chipVariant", 2);
-r([
-  a({ type: Object })
-], e.prototype, "sx", 2);
-r([
-  h()
-], e.prototype, "inputId", 2);
-r([
-  h()
-], e.prototype, "isFocused", 2);
-e = r([
-  b("tc-input-with-chip")
-], e);
-export {
-  e as TcInputWithChip
-};

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

@@ -1,46 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * Form input component with label and error states.
- * Uses design-tokens classes (.input, .label, .field-group).
- *
- * @fires tc-input - Fired when input value changes
- * @fires tc-blur - Fired when input loses focus
- * @fires tc-keydown - Fired when a key is pressed
- * @fires tc-paste - Fired when content is pasted
- * @csspart wrapper - The input wrapper element
- * @csspart input - The input element
- * @csspart label - The label element
- * @csspart ink-line - The animated ink line
- * @csspart error - The error message element
- */
-export declare class TcInput extends LitElement {
-    label: string;
-    type: string;
-    placeholder: string;
-    value: string;
-    error: string;
-    disabled: boolean;
-    required: boolean;
-    name: string;
-    autocomplete: string;
-    inputmode: string;
-    maxlength: number;
-    sx: SxProps;
-    private inputId;
-    private isFocused;
-    static styles: import('lit').CSSResult[];
-    render(): import('lit').TemplateResult<1>;
-    private handleInput;
-    private handleFocus;
-    private handleBlur;
-    private handleKeydown;
-    private handlePaste;
-    focus(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-input': TcInput;
-    }
-}
-//# sourceMappingURL=tc-input.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tc-input.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACT,KAAK,SAAM;IACX,IAAI,SAAU;IACd,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAClB,IAAI,SAAM;IACV,YAAY,SAAM;IAClB,SAAS,SAAM;IACf,SAAS,SAAK;IACd,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,OAAO,CAAqD;IACpE,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAgB,MAAM,4BA6GpB;IAEO,MAAM;IA+Df,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAUnB,KAAK;CAIN;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/primitives/tc-input.js

@@ -1,264 +0,0 @@
-import { css as c, LitElement as m, html as d } from "lit";
-import { property as i, state as h, customElement as b } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { styleMap as v } from "lit/directives/style-map.js";
-import { sharedStyles as y } from "../styles/shared.js";
-var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (e, o, n, a) => {
-  for (var s = a > 1 ? void 0 : a ? g(o, n) : o, l = e.length - 1, p; l >= 0; l--)
-    (p = e[l]) && (s = (a ? p(o, n, s) : p(s)) || s);
-  return a && s && f(o, n, s), s;
-};
-let t = class extends m {
-  constructor() {
-    super(...arguments), this.label = "", this.type = "text", this.placeholder = "", this.value = "", this.error = "", this.disabled = !1, this.required = !1, this.name = "", this.autocomplete = "", this.inputmode = "", this.maxlength = 0, this.sx = {}, this.inputId = `tc-input-${Math.random().toString(36).slice(2)}`, this.isFocused = !1;
-  }
-  render() {
-    const e = this.error.length > 0, o = {
-      "field-group": !0,
-      focused: this.isFocused,
-      "has-error": e
-    }, n = {
-      "input-wrapper": !0,
-      focused: this.isFocused,
-      "has-error": e
-    }, a = {
-      input: !0,
-      "has-error": e
-    };
-    return d`
-      <div class=${u(o)}>
-        ${this.label ? d`<label part="label" class="field-label" for=${this.inputId}>${this.label}</label>` : ""}
-        <div part="wrapper" class=${u(n)}>
-          <input
-            part="input"
-            id=${this.inputId}
-            class=${u(a)}
-            type=${this.type}
-            name=${this.name}
-            placeholder=${this.placeholder}
-            .value=${this.value}
-            ?disabled=${this.disabled}
-            ?required=${this.required}
-            autocomplete=${this.autocomplete || "off"}
-            inputmode=${this.inputmode || ""}
-            maxlength=${this.maxlength || ""}
-            aria-invalid=${e ? "true" : "false"}
-            aria-describedby=${e ? `${this.inputId}-error` : ""}
-            style=${v(this.sx)}
-            @input=${this.handleInput}
-            @focus=${this.handleFocus}
-            @blur=${this.handleBlur}
-            @keydown=${this.handleKeydown}
-            @paste=${this.handlePaste}
-          />
-          <div part="ink-line" class="ink-line"></div>
-        </div>
-        ${e ? d`<p part="error" id="${this.inputId}-error" class="input-error-text" role="alert">
-              ${this.error}
-            </p>` : ""}
-      </div>
-    `;
-  }
-  handleInput(e) {
-    const o = e.target;
-    this.value = o.value, this.dispatchEvent(
-      new CustomEvent("tc-input", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: o.value }
-      })
-    );
-  }
-  handleFocus() {
-    this.isFocused = !0;
-  }
-  handleBlur(e) {
-    const o = e.target;
-    this.isFocused = !1, this.dispatchEvent(
-      new CustomEvent("tc-blur", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: o.value }
-      })
-    );
-  }
-  handleKeydown(e) {
-    this.dispatchEvent(
-      new CustomEvent("tc-keydown", {
-        bubbles: !0,
-        composed: !0,
-        detail: { key: e.key, value: this.value, originalEvent: e }
-      })
-    );
-  }
-  handlePaste(e) {
-    this.dispatchEvent(
-      new CustomEvent("tc-paste", {
-        bubbles: !0,
-        composed: !0,
-        detail: { data: e.clipboardData?.getData("text"), originalEvent: e }
-      })
-    );
-  }
-  focus() {
-    this.shadowRoot?.querySelector("input")?.focus();
-  }
-};
-t.styles = [
-  y,
-  c`
-      :host {
-        display: block;
-        width: 100%;
-        min-width: 0;
-      }
-
-      /* Extend design-tokens .field-group */
-      .field-group {
-        width: 100%;
-      }
-
-      /* Label color change on focus - extends design-tokens .field-label */
-      .field-group.focused .field-label {
-        color: var(--accent-primary);
-      }
-
-      .field-group.has-error .field-label {
-        color: var(--error-base);
-      }
-
-      .input-wrapper {
-        position: relative;
-        width: 100%;
-      }
-
-      /* Extend design-tokens .input */
-      .input {
-        width: 100%;
-        box-sizing: border-box;
-      }
-
-      .input:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-      }
-
-      /* Ink line animation */
-      .ink-line {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 0;
-        height: 0.125rem;
-        background: linear-gradient(
-          90deg,
-          var(--accent-primary) 0%,
-          var(--accent-primary-hover) 100%
-        );
-        border-radius: 0.0625rem;
-        transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
-        pointer-events: none;
-      }
-
-      .input-wrapper.focused .ink-line {
-        width: 60%;
-      }
-
-      /* Error states */
-      .input.has-error {
-        border-color: var(--error-base);
-        background: var(--error-bg);
-      }
-
-      .input.has-error:focus {
-        border-color: var(--error-base);
-        box-shadow: 0 0 0 var(--shadow-focus-ring-width) var(--error-border);
-      }
-
-      .input-wrapper.has-error .ink-line {
-        background: linear-gradient(
-          90deg,
-          var(--error-base) 0%,
-          var(--error-base) 100%
-        );
-      }
-
-      .input-error-text {
-        font-size: var(--font-size-sm);
-        color: var(--error-base);
-        margin: 0;
-        animation: slideDown 300ms ease backwards;
-      }
-
-      @keyframes slideDown {
-        from {
-          opacity: 0;
-          transform: translateY(calc(-1 * var(--offset-slide-up-sm)));
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      /* Reduced motion */
-      @media (prefers-reduced-motion: reduce) {
-        .field-label,
-        .input,
-        .ink-line,
-        .input-error-text {
-          transition-duration: 0.01ms !important;
-          animation-duration: 0.01ms !important;
-        }
-      }
-    `
-];
-r([
-  i({ type: String })
-], t.prototype, "label", 2);
-r([
-  i({ type: String })
-], t.prototype, "type", 2);
-r([
-  i({ type: String })
-], t.prototype, "placeholder", 2);
-r([
-  i({ type: String })
-], t.prototype, "value", 2);
-r([
-  i({ type: String })
-], t.prototype, "error", 2);
-r([
-  i({ type: Boolean })
-], t.prototype, "disabled", 2);
-r([
-  i({ type: Boolean })
-], t.prototype, "required", 2);
-r([
-  i({ type: String })
-], t.prototype, "name", 2);
-r([
-  i({ type: String })
-], t.prototype, "autocomplete", 2);
-r([
-  i({ type: String })
-], t.prototype, "inputmode", 2);
-r([
-  i({ type: Number })
-], t.prototype, "maxlength", 2);
-r([
-  i({ type: Object })
-], t.prototype, "sx", 2);
-r([
-  h()
-], t.prototype, "inputId", 2);
-r([
-  h()
-], t.prototype, "isFocused", 2);
-t = r([
-  b("tc-input")
-], t);
-export {
-  t as TcInput
-};

package/dist/primitives/tc-item-button.d.ts

@@ -1,29 +0,0 @@
-import { LitElement } from 'lit';
-import { SxProps } from '../types.js';
-/**
- * A clickable item button with hover states and optional arrow indicator.
- *
- * @slot - Item content
- * @slot prefix - Left side content (icon, symbol)
- * @slot suffix - Right side content (replaces arrow if provided)
- * @fires tc-click - Fired when the item is clicked
- * @csspart button - The button element
- * @csspart prefix - The prefix container
- * @csspart content - The main content container
- * @csspart suffix - The suffix container
- * @csspart arrow - The arrow indicator
- */
-export declare class TcItemButton extends LitElement {
-    disabled: boolean;
-    showArrow: boolean;
-    sx: SxProps;
-    static styles: import('lit').CSSResult;
-    private handleClick;
-    render(): import('lit').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tc-item-button': TcItemButton;
-    }
-}
-//# sourceMappingURL=tc-item-button.d.ts.map

package/dist/primitives/tc-item-button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tc-item-button.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-item-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,qBACa,YAAa,SAAQ,UAAU;IACb,QAAQ,UAAS;IACQ,SAAS,UAAQ;IAC3C,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAgB,MAAM,0BAsFpB;IAEF,OAAO,CAAC,WAAW;IAWV,MAAM;CA6ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}