@erplora/outfitkit 0.1.1

package/dist/ok-tag-input.js

@@ -0,0 +1,358 @@
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_LABELS = {
+  placeholder: "Add tag…",
+  removeLabel: "Remove {tag}"
+};
+class OkTagInput extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = [];
+    this.placeholder = "";
+    this.labels = {};
+    this.draft = "";
+    this.open = false;
+    this.activeIndex = -1;
+    this.onDocClick = (e) => {
+      if (!this.open) return;
+      if (!e.composedPath().includes(this)) this.close();
+    };
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-text-muted, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.55));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --primary-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
+      --background: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --chip-bg: var(--ok-chip-bg, rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.14));
+      --chip-color: var(--ok-chip-color, var(--ion-color-primary, #3880ff));
+      --hover-bg: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.06));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.18));
+      --border-radius: var(--ok-radius, 8px);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+      --shadow: var(--ok-shadow, 0 6px 24px rgba(0, 0, 0, 0.14));
+
+      /* Por defecto ocupa el ancho del contenedor y es responsive. */
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      position: relative;
+      color: var(--color);
+      font-family: var(--font);
+      font-size: 0.95rem;
+    }
+    /* Caja contenedora: chips + campo de texto, con wrap responsive. */
+    .box {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.4rem;
+      width: 100%;
+      box-sizing: border-box;
+      min-height: 2.6rem;
+      padding: 0.35rem 0.5rem;
+      background: var(--background);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      cursor: text;
+    }
+    .box:focus-within {
+      border-color: var(--primary-color);
+    }
+    /* Chip propio (no ion-chip). */
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.3rem;
+      max-width: 100%;
+      padding: 0.2rem 0.2rem 0.2rem 0.55rem;
+      background: var(--chip-bg);
+      color: var(--chip-color);
+      border-radius: 999px;
+      font-size: 0.85rem;
+      line-height: 1.2;
+      transition: background-color var(--ok-transition, 150ms ease),
+        color var(--ok-transition, 150ms ease),
+        border-color var(--ok-transition, 150ms ease),
+        box-shadow var(--ok-transition, 150ms ease), transform 120ms ease;
+    }
+    .chip .text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .chip .remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.15rem;
+      height: 1.15rem;
+      padding: 0;
+      border: 0;
+      border-radius: 999px;
+      background: none;
+      color: inherit;
+      cursor: pointer;
+      opacity: 0.7;
+      transition: background-color var(--ok-transition, 150ms ease),
+        color var(--ok-transition, 150ms ease),
+        border-color var(--ok-transition, 150ms ease),
+        box-shadow var(--ok-transition, 150ms ease), transform 120ms ease,
+        opacity var(--ok-transition, 150ms ease);
+    }
+    @media (hover: hover) {
+      .chip .remove:hover {
+        opacity: 1;
+        background: rgba(0, 0, 0, 0.08);
+      }
+    }
+    .chip .remove:active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .chip:active,
+      .chip .remove:hover,
+      .chip .remove:active {
+        transform: none;
+      }
+    }
+    .chip .remove ion-icon {
+      font-size: 0.9rem;
+    }
+    /* El campo de texto crece para ocupar el resto de la fila. */
+    ion-input {
+      --background: transparent;
+      --color: var(--color);
+      --placeholder-color: var(--color-muted);
+      --padding-start: 0.15rem;
+      --padding-end: 0.15rem;
+      flex: 1 1 6rem;
+      min-width: 6rem;
+    }
+    /* Dropdown de sugerencias, ancho del contenedor. */
+    .dropdown {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: calc(100% + 4px);
+      z-index: 50;
+      max-height: 14rem;
+      overflow-y: auto;
+      margin: 0;
+      padding: 0.25rem;
+      list-style: none;
+      background: var(--background);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      box-shadow: var(--shadow);
+      box-sizing: border-box;
+    }
+    .suggestion {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0.5rem 0.6rem;
+      border-radius: calc(var(--border-radius) - 2px);
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      transition: background 0.12s ease, color 0.12s ease;
+    }
+    .suggestion:hover,
+    .suggestion.active {
+      background: var(--primary-color);
+      color: var(--primary-contrast);
+    }
+  `;
+  }
+  // Textos efectivos: defaults inglés sobreescritos por los pasados desde fuera.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Placeholder efectivo: prop explícita si se pasó, si no el de los labels.
+  get effectivePlaceholder() {
+    return this.placeholder || this.t.placeholder;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.onDocClick, true);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.onDocClick, true);
+    super.disconnectedCallback();
+  }
+  close() {
+    this.open = false;
+    this.activeIndex = -1;
+  }
+  // Sugerencias filtradas: casan con el draft y no están ya añadidas.
+  get filteredSuggestions() {
+    if (!this.suggestions?.length) return [];
+    const q = this.draft.trim().toLowerCase();
+    return this.suggestions.filter(
+      (s) => !this.value.includes(s) && (!q || s.toLowerCase().includes(q))
+    );
+  }
+  // Emite `ok-change` con la lista de tags actual.
+  emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail: { tags: [...this.value] },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Añade un tag (recortado, sin duplicados ni vacíos) y emite cambio.
+  addTag(raw) {
+    const tag = raw.trim();
+    if (!tag || this.value.includes(tag)) {
+      this.draft = "";
+      return;
+    }
+    this.value = [...this.value, tag];
+    this.draft = "";
+    this.close();
+    this.emitChange();
+  }
+  // Quita el tag en el índice indicado y emite cambio.
+  removeAt(index) {
+    this.value = this.value.filter((_, i) => i !== index);
+    this.emitChange();
+  }
+  handleInput(e) {
+    const detail = e.detail;
+    this.draft = detail?.value ?? "";
+    this.open = !!this.filteredSuggestions.length;
+    this.activeIndex = -1;
+  }
+  handleKeydown(e) {
+    const sugg = this.filteredSuggestions;
+    switch (e.key) {
+      case "Enter":
+        e.preventDefault();
+        if (this.open && this.activeIndex >= 0 && sugg[this.activeIndex]) {
+          this.addTag(sugg[this.activeIndex]);
+        } else if (this.draft.trim()) {
+          this.addTag(this.draft);
+        }
+        break;
+      case ",":
+        e.preventDefault();
+        if (this.draft.trim()) this.addTag(this.draft);
+        break;
+      case "Backspace":
+        if (!this.draft && this.value.length) {
+          e.preventDefault();
+          this.removeAt(this.value.length - 1);
+        }
+        break;
+      case "ArrowDown":
+        if (sugg.length) {
+          e.preventDefault();
+          this.open = true;
+          this.activeIndex = (this.activeIndex + 1) % sugg.length;
+        }
+        break;
+      case "ArrowUp":
+        if (sugg.length) {
+          e.preventDefault();
+          this.open = true;
+          this.activeIndex = (this.activeIndex - 1 + sugg.length) % sugg.length;
+        }
+        break;
+      case "Escape":
+        if (this.open) {
+          e.preventDefault();
+          this.close();
+        }
+        break;
+    }
+  }
+  render() {
+    const sugg = this.filteredSuggestions;
+    return html`<div
+      class="box"
+      @click=${(e) => {
+      const input = this.renderRoot.querySelector("ion-input");
+      if (e.target === e.currentTarget) input?.setFocus?.();
+    }}
+    >
+      ${this.value.map(
+      (tag, i) => html`<span class="chip">
+          <span class="text">${tag}</span>
+          <button
+            type="button"
+            class="remove"
+            aria-label=${this.t.removeLabel.replace("{tag}", tag)}
+            @click=${(e) => {
+        e.stopPropagation();
+        this.removeAt(i);
+      }}
+          >
+            <ion-icon name="close-outline"></ion-icon>
+          </button>
+        </span>`
+    )}
+      <ion-input
+        .value=${this.draft}
+        placeholder=${this.value.length ? "" : this.effectivePlaceholder}
+        @ionInput=${(e) => this.handleInput(e)}
+        @keydown=${(e) => this.handleKeydown(e)}
+      ></ion-input>
+    </div>
+    ${this.open && sugg.length ? html`<ul class="dropdown" role="listbox">
+          ${sugg.map(
+      (s, i) => html`<li
+              role="option"
+              class=${`suggestion ${i === this.activeIndex ? "active" : ""}`.trim()}
+              @mouseenter=${() => {
+        this.activeIndex = i;
+      }}
+              @click=${() => this.addTag(s)}
+            >
+              ${s}
+            </li>`
+    )}
+        </ul>` : ""}`;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkTagInput.prototype, "value");
+__decorateClass([
+  property()
+], OkTagInput.prototype, "placeholder");
+__decorateClass([
+  property({ attribute: false })
+], OkTagInput.prototype, "suggestions");
+__decorateClass([
+  property({ attribute: false })
+], OkTagInput.prototype, "labels");
+__decorateClass([
+  state()
+], OkTagInput.prototype, "draft");
+__decorateClass([
+  state()
+], OkTagInput.prototype, "open");
+__decorateClass([
+  state()
+], OkTagInput.prototype, "activeIndex");
+define("ok-tag-input", OkTagInput);
+export {
+  OkTagInput
+};

package/dist/ok-testimonial.js

@@ -0,0 +1,136 @@
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class OkTestimonial extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.rating = 0;
+    this.glass = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      --color: var(--ok-text, var(--ion-text-color, #18181b));
+      --muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
+      --surface: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
+      --border: var(--ok-border, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.1));
+      --radius: var(--ok-radius, 18px);
+      --star: var(--ion-color-warning, #ffc409);
+      --primary: var(--ion-color-primary, #1496d6);
+      font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+    }
+    .card {
+      box-sizing: border-box;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      padding: clamp(1.4rem, 2.5vw, 2rem);
+      color: var(--color);
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      position: relative;
+    }
+    :host([glass]) .card {
+      background: color-mix(in oklab, var(--surface) 62%, transparent);
+      -webkit-backdrop-filter: blur(14px) saturate(1.4);
+      backdrop-filter: blur(14px) saturate(1.4);
+      border-color: color-mix(in oklab, var(--color) 12%, transparent);
+    }
+    .quote-mark {
+      font-family: Georgia, 'Times New Roman', serif;
+      font-size: 3rem;
+      line-height: 0.6;
+      color: color-mix(in oklab, var(--primary) 35%, transparent);
+      height: 1.2rem;
+    }
+    .stars {
+      display: inline-flex;
+      gap: 0.1rem;
+      color: var(--star);
+      font-size: 0.95rem;
+    }
+    .quote {
+      flex: 1;
+      font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
+      line-height: 1.55;
+      letter-spacing: -0.01em;
+    }
+    ::slotted(*) { margin: 0; }
+    .author {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-top: auto;
+    }
+    .avatar {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 999px;
+      object-fit: cover;
+      flex: 0 0 auto;
+      background: color-mix(in oklab, var(--primary) 16%, transparent);
+      display: grid;
+      place-items: center;
+      color: var(--primary);
+      font-weight: 700;
+      font-size: 0.9rem;
+    }
+    .meta { min-width: 0; }
+    .name { font-weight: 650; font-size: 0.95rem; }
+    .role { color: var(--muted); font-size: 0.82rem; }
+  `;
+  }
+  initials() {
+    if (!this.author) return "";
+    return this.author.split(/\s+/).slice(0, 2).map((w) => w[0] ?? "").join("").toUpperCase();
+  }
+  render() {
+    const r = Math.max(0, Math.min(5, Math.round(this.rating)));
+    return html`
+      <div class="card">
+        ${r ? html`<span class="stars" aria-label="${r} de 5">${"★".repeat(r)}</span>` : html`<span class="quote-mark">”</span>`}
+        <div class="quote"><slot></slot></div>
+        <div class="author">
+          ${this.avatar ? html`<img class="avatar" src=${this.avatar} alt=${this.author ?? ""} />` : html`<span class="avatar">${this.initials()}</span>`}
+          <div class="meta">
+            ${this.author ? html`<div class="name">${this.author}</div>` : null}
+            ${this.authorRole ? html`<div class="role">${this.authorRole}</div>` : null}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Number })
+], OkTestimonial.prototype, "rating");
+__decorateClass([
+  property()
+], OkTestimonial.prototype, "author");
+__decorateClass([
+  property({ attribute: "author-role" })
+], OkTestimonial.prototype, "authorRole");
+__decorateClass([
+  property()
+], OkTestimonial.prototype, "avatar");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkTestimonial.prototype, "glass");
+define("ok-testimonial", OkTestimonial);
+export {
+  OkTestimonial
+};