@transcodes/ui-components 0.3.0 → 0.3.1

package/dist/primitives/tc-input.js

@@ -0,0 +1,262 @@
+import { LitElement as c, html as d, css as m } 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 y } from "lit/directives/style-map.js";
+import { sharedStyles as v } 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 c {
+  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=${y(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 = [
+  v,
+  m`
+      :host {
+        display: block;
+      }
+
+      /* 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 0.1875rem 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(-0.25rem);
+        }
+        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.js

@@ -0,0 +1,168 @@
+import { LitElement as c, html as d, css as f } from "lit";
+import { property as o, customElement as u } from "lit/decorators.js";
+import { styleMap as h } from "lit/directives/style-map.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (i, s, a, n) => {
+  for (var e = n > 1 ? void 0 : n ? b(s, a) : s, l = i.length - 1, p; l >= 0; l--)
+    (p = i[l]) && (e = (n ? p(s, a, e) : p(e)) || e);
+  return n && e && m(s, a, e), e;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.gap = "var(--space-md)", this.padding = "var(--space-md)", this.disabled = !1, this.showArrow = !0, this.sx = {};
+  }
+  handleClick() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("tc-click", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    const i = {
+      "--item-padding": this.padding,
+      "--item-gap": this.gap,
+      ...this.sx
+    };
+    return d`
+      <button
+        part="button"
+        class="button"
+        ?disabled=${this.disabled}
+        style=${h(i)}
+        @click=${this.handleClick}
+      >
+        <div part="prefix" class="prefix">
+          <slot name="prefix"></slot>
+        </div>
+        <div part="content" class="content">
+          <slot></slot>
+        </div>
+        <div part="suffix" class="suffix">
+          <slot name="suffix"></slot>
+        </div>
+        ${this.showArrow ? d`
+              <svg
+                part="arrow"
+                class="arrow"
+                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>
+            ` : ""}
+      </button>
+    `;
+  }
+};
+t.styles = f`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .button {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: var(--item-padding);
+      gap: var(--item-gap);
+      background: var(--paper-cream);
+      border: none;
+      border-radius: var(--radius-md);
+      box-sizing: border-box;
+      cursor: pointer;
+      font-family: inherit;
+      text-align: left;
+      transition: var(--transition-fast);
+    }
+
+    .button:hover:not(:disabled) {
+      background: var(--paper-warm);
+    }
+
+    .button:active:not(:disabled) {
+      transform: scale(0.995);
+    }
+
+    .button:focus-visible {
+      outline: 2px solid var(--accent-primary);
+      outline-offset: 2px;
+    }
+
+    .button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .prefix {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .content {
+      flex: 1;
+      min-width: 0;
+      font-family: var(--font-body);
+      font-size: var(--font-size-base);
+      color: var(--ink-dark);
+    }
+
+    .suffix {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .arrow {
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      color: var(--ink-light);
+      transition: var(--transition-fast);
+    }
+
+    .button:hover:not(:disabled) .arrow {
+      color: var(--ink-medium);
+      transform: translateX(2px);
+    }
+
+    /* Hide empty slots */
+    .prefix:not(:has(*)),
+    .suffix:not(:has(*)) {
+      display: none;
+    }
+
+    /* Hide arrow when suffix has content */
+    .suffix:has(*) + .arrow {
+      display: none;
+    }
+  `;
+r([
+  o({ type: String })
+], t.prototype, "gap", 2);
+r([
+  o({ type: String })
+], t.prototype, "padding", 2);
+r([
+  o({ type: Boolean })
+], t.prototype, "disabled", 2);
+r([
+  o({ type: Boolean, attribute: "show-arrow" })
+], t.prototype, "showArrow", 2);
+r([
+  o({ type: Object })
+], t.prototype, "sx", 2);
+t = r([
+  u("tc-item-button")
+], t);
+export {
+  t as TcItemButton
+};

package/dist/primitives/tc-item.js

@@ -0,0 +1,93 @@
+import { LitElement as d, html as f, css as m } from "lit";
+import { property as l, customElement as c } from "lit/decorators.js";
+import { styleMap as v } from "lit/directives/style-map.js";
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (i, s, p, r) => {
+  for (var t = r > 1 ? void 0 : r ? y(s, p) : s, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (t = (r ? o(s, p, t) : o(t)) || t);
+  return r && t && x(s, p, t), t;
+};
+let e = class extends d {
+  constructor() {
+    super(...arguments), this.gap = "var(--space-md)", this.padding = "var(--space-md)", this.sx = {};
+  }
+  render() {
+    const i = {
+      "--item-padding": this.padding,
+      "--item-gap": this.gap,
+      ...this.sx
+    };
+    return f`
+      <div part="item" class="item" style=${v(i)}>
+        <div part="prefix" class="prefix">
+          <slot name="prefix"></slot>
+        </div>
+        <div part="content" class="content">
+          <slot></slot>
+        </div>
+        <div part="suffix" class="suffix">
+          <slot name="suffix"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = m`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: var(--item-padding);
+      gap: var(--item-gap);
+      background: var(--paper-cream);
+      border-radius: var(--radius-md);
+      box-sizing: border-box;
+    }
+
+    .prefix {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .content {
+      flex: 1;
+      min-width: 0;
+      font-family: var(--font-body);
+      font-size: var(--font-size-base);
+      color: var(--ink-dark);
+    }
+
+    .suffix {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Hide empty slots */
+    .prefix:not(:has(*)),
+    .suffix:not(:has(*)) {
+      display: none;
+    }
+  `;
+a([
+  l({ type: String })
+], e.prototype, "gap", 2);
+a([
+  l({ type: String })
+], e.prototype, "padding", 2);
+a([
+  l({ type: Object })
+], e.prototype, "sx", 2);
+e = a([
+  c("tc-item")
+], e);
+export {
+  e as TcItem
+};