@transcodes/ui-components 0.4.3 → 0.4.5

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

@@ -0,0 +1,250 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,264 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1 @@
+{"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"}