@transcodes/ui-components 0.3.0 → 0.3.2

package/dist/primitives/tc-divider.js

@@ -0,0 +1,76 @@
+import { LitElement as c, html as p, css as v } from "lit";
+import { property as l, customElement as h } from "lit/decorators.js";
+var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (e, t, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? m(t, o) : t, d = e.length - 1, a; d >= 0; d--)
+    (a = e[d]) && (r = (s ? a(t, o, r) : a(r)) || r);
+  return s && r && g(t, o, r), r;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.color = "var(--ink-faint)", this.spacing = "var(--space-md)", this.text = "";
+  }
+  render() {
+    const e = `--divider-color: ${this.color}; --divider-spacing: ${this.spacing};`;
+    return this.text ? p`
+        <div part="container" class="divider-container" style=${e}>
+          <hr part="line" class="divider-line" />
+          <span part="text" class="divider-text">${this.text}</span>
+          <hr part="line" class="divider-line" />
+        </div>
+      ` : p`
+      <hr part="divider" class="divider" style=${e} />
+    `;
+  }
+};
+i.styles = v`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    /* 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);
+    }
+  `;
+n([
+  l({ type: String })
+], i.prototype, "color", 2);
+n([
+  l({ type: String })
+], i.prototype, "spacing", 2);
+n([
+  l({ type: String })
+], i.prototype, "text", 2);
+i = n([
+  h("tc-divider")
+], i);
+export {
+  i as TcDivider
+};

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

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

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

@@ -0,0 +1,120 @@
+import { LitElement as p, html as n, css as c } from "lit";
+import { property as r, customElement as f } from "lit/decorators.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { sharedStyles as h } 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 p {
+  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=${u(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 = [
+  h,
+  c`
+      :host {
+        display: block;
+        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.js

@@ -0,0 +1,95 @@
+import { LitElement as a, html as o, css as p } from "lit";
+import { property as h, customElement as g } from "lit/decorators.js";
+var d = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (r, t, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? x(t, s) : t, v = r.length - 1, c; v >= 0; v--)
+    (c = r[v]) && (e = (i ? c(t, s, e) : c(e)) || e);
+  return i && e && d(t, s, e), e;
+};
+const z = {
+  "arrow-left": o`<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": o`<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: o`<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: o`<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: o`<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": o`<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": o`<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: o`<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": o`<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: o`<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: o`<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>`,
+  loading: o`<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: o`<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: o`<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: o`<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: o`<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: o`<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: o`<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": o`<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: o`<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: o`<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: o`<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: o`<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: o`<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: o`<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: o`<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: o`<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: o`<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: o`<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": o`<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: o`<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: o`<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 l = class extends a {
+  constructor() {
+    super(...arguments), this.name = "info", this.size = "1.5rem", this.color = "currentColor";
+  }
+  render() {
+    const r = z[this.name];
+    return r ? o`
+      <span
+        part="icon"
+        class="icon"
+        style="--icon-size: ${this.size}; --icon-color: ${this.color};"
+      >
+        ${r}
+      </span>
+    ` : (console.warn(`Icon "${this.name}" not found`), o``);
+  }
+};
+l.styles = p`
+    :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);
+    }
+  `;
+n([
+  h({ type: String })
+], l.prototype, "name", 2);
+n([
+  h({ type: String })
+], l.prototype, "size", 2);
+n([
+  h({ type: String })
+], l.prototype, "color", 2);
+l = n([
+  g("tc-icon")
+], l);
+export {
+  l as TcIcon
+};

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

@@ -0,0 +1,242 @@
+import { LitElement as h, html as n, css as b } from "lit";
+import { property as a, state as u, customElement as v } from "lit/decorators.js";
+import { classMap as d } from "lit/directives/class-map.js";
+import { sharedStyles as f } from "../styles/shared.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, i, s, p) => {
+  for (var o = p > 1 ? void 0 : p ? y(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 h {
+  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.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)}>
+        ${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} 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,
+  b`
+      :host {
+        display: block;
+      }
+
+      .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(--form-input-radius);
+        transition: var(--transition-fast);
+      }
+
+      .input-container:focus-within {
+        border-color: var(--accent-primary);
+        box-shadow: 0 0 0 3px 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 3px var(--error-border);
+      }
+
+      .input {
+        flex: 1;
+        min-width: 0;
+        padding: var(--form-input-padding-y) var(--form-input-padding-x);
+        font-family: var(--font-body);
+        font-size: var(--form-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(-0.25rem);
+        }
+        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([
+  u()
+], e.prototype, "inputId", 2);
+r([
+  u()
+], e.prototype, "isFocused", 2);
+e = r([
+  v("tc-input-with-chip")
+], e);
+export {
+  e as TcInputWithChip
+};