@erplora/outfitkit 0.1.1

package/dist/ok-hover-card.js

@@ -0,0 +1,480 @@
+import { LitElement, css, html, nothing } from "lit";
+import { property, state, query } from "lit/decorators.js";
+import { define } from "./define.js";
+import { c as computeAnchor } from "./shared/anchor.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 = {
+  card: "Preview"
+};
+class OkHoverCard extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.stats = [];
+    this.actions = [];
+    this.placement = "bottom";
+    this.openDelay = 220;
+    this.closeDelay = 180;
+    this.labels = {};
+    this.open = false;
+    this.shown = false;
+    this.end = false;
+    this.above = false;
+    this.onKeydown = (e) => {
+      if (e.key === "Escape" && this.open) {
+        this.clearTimers();
+        this.hide();
+      }
+    };
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Tokens propios estilo Ionic, default = cadena --ok-* → --ion-* → hex. */
+      --color: var(--ok-text-color, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-color-medium, var(--ion-color-medium, #6b6b76));
+      --color-faint: var(--ok-color-medium, var(--ion-color-step-450, #92949c));
+      --panel-bg: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #ffffff)));
+      --avatar-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.12));
+      --border-soft: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.08));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --primary-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
+      --primary-shade: var(--ok-primary-shade, var(--ion-color-primary-shade, #3171e0));
+      --action-bg: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.05));
+      --action-bg-hover: var(--ok-hover-strong, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.1));
+      --radius: var(--ok-radius, 12px);
+      --radius-sm: var(--ok-radius-sm, 7px);
+      --shadow: var(--ok-shadow, 0 12px 32px rgba(0, 0, 0, 0.16));
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+      --font-mono: var(--ok-font-mono, ui-monospace, 'SF Mono', 'Menlo', monospace);
+      --width: var(--ok-hover-card-width, 280px);
+
+      /* INLINE: el host envuelve solo el disparador en línea con el texto. */
+      display: inline;
+      position: relative;
+      font-family: var(--font);
+    }
+
+    /* Ancla: contenedor inline del disparador (slot por defecto). */
+    .trigger {
+      display: inline;
+      position: relative;
+    }
+
+    /* Panel flotante. position:absolute relativo al host (no fixed). */
+    .card {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: 1000;
+      width: var(--width);
+      max-width: calc(100vw - 24px);
+      margin-top: 8px;
+      box-sizing: border-box;
+      padding: 14px;
+      background: var(--panel-bg);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      font-size: 0.8125rem;
+      color: var(--color-muted);
+      line-height: 1.5;
+      text-align: left;
+      cursor: default;
+      /* Estado oculto: invisible y no interactivo, listo para animar. */
+      opacity: 0;
+      transform: translateY(4px);
+      pointer-events: none;
+      transition: opacity var(--ok-transition, 160ms ease), transform var(--ok-transition, 160ms ease);
+    }
+    /* Abre hacia la izquierda (alinea borde derecho con el del disparador). */
+    .card.end {
+      left: auto;
+      right: 0;
+    }
+    /* Abre hacia arriba. */
+    .card.above {
+      top: auto;
+      bottom: 100%;
+      margin-top: 0;
+      margin-bottom: 8px;
+      transform: translateY(-4px);
+    }
+    .card.shown {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .card {
+        transition: opacity 120ms ease;
+        transform: none;
+      }
+      .card.above {
+        transform: none;
+      }
+    }
+
+    /* Cabecera: avatar + título/handle. */
+    .head {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      margin-bottom: 8px;
+    }
+    .avatar {
+      width: 38px;
+      height: 38px;
+      flex-shrink: 0;
+      border-radius: 10px;
+      background: var(--avatar-bg);
+      display: grid;
+      place-items: center;
+      overflow: hidden;
+      font-weight: 600;
+      font-size: 13px;
+      color: var(--color);
+    }
+    .avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .title {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 6px;
+      font-weight: 600;
+      font-size: 0.9375rem;
+      letter-spacing: -0.01em;
+      color: var(--color);
+    }
+    /* Badge inline junto al título (estilo brand). */
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 1px 7px;
+      border-radius: 999px;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      line-height: 1.4;
+      background: var(--primary-color);
+      color: var(--primary-contrast);
+    }
+    .handle {
+      margin-top: 1px;
+      font-family: var(--font-mono);
+      font-size: 0.6875rem;
+      color: var(--color-faint);
+    }
+
+    .body {
+      font-size: 0.8125rem;
+      color: var(--color-muted);
+      line-height: 1.5;
+    }
+    ::slotted([slot='content']) {
+      font-size: 0.8125rem;
+      color: var(--color-muted);
+      line-height: 1.5;
+    }
+
+    /* Fila de 3 cifras tabulares. */
+    .stats {
+      display: flex;
+      gap: 14px;
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px solid var(--border-soft);
+      font-size: 0.6875rem;
+      color: var(--color-faint);
+    }
+    .stat b {
+      display: block;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--color);
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* Pie: hasta 2 botones (el realce brand). */
+    .footer {
+      display: flex;
+      gap: 6px;
+      margin-top: 10px;
+    }
+    .action {
+      flex: 1;
+      height: 28px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 8px;
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-sm);
+      background: var(--action-bg);
+      color: var(--color);
+      font: inherit;
+      font-size: 0.6875rem;
+      font-weight: 500;
+      text-decoration: none;
+      cursor: pointer;
+      transition: background-color var(--ok-transition, 150ms ease),
+        border-color var(--ok-transition, 150ms ease);
+    }
+    @media (hover: hover) {
+      .action:hover {
+        background: var(--action-bg-hover);
+      }
+    }
+    .action.brand {
+      background: var(--primary-color);
+      border-color: var(--primary-color);
+      color: var(--primary-contrast);
+    }
+    @media (hover: hover) {
+      .action.brand:hover {
+        background: var(--primary-shade);
+        border-color: var(--primary-shade);
+      }
+    }
+  `;
+  }
+  // Textos efectivos: defaults en inglés + overrides del consumidor.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.clearTimers();
+  }
+  clearTimers() {
+    if (this.openTimer) window.clearTimeout(this.openTimer);
+    if (this.closeTimer) window.clearTimeout(this.closeTimer);
+    this.openTimer = void 0;
+    this.closeTimer = void 0;
+  }
+  // Programa la apertura tras `openDelay` (cancela cualquier cierre pendiente).
+  scheduleOpen() {
+    if (this.closeTimer) {
+      window.clearTimeout(this.closeTimer);
+      this.closeTimer = void 0;
+    }
+    if (this.open) return;
+    if (this.openTimer) return;
+    this.openTimer = window.setTimeout(() => {
+      this.openTimer = void 0;
+      this.show();
+    }, Math.max(0, this.openDelay));
+  }
+  // Programa el cierre tras `closeDelay` (cancela cualquier apertura pendiente).
+  scheduleClose() {
+    if (this.openTimer) {
+      window.clearTimeout(this.openTimer);
+      this.openTimer = void 0;
+    }
+    if (!this.open) return;
+    if (this.closeTimer) return;
+    this.closeTimer = window.setTimeout(() => {
+      this.closeTimer = void 0;
+      this.hide();
+    }, Math.max(0, this.closeDelay));
+  }
+  show() {
+    if (this.open) return;
+    this.open = true;
+    this.dispatchEvent(
+      new CustomEvent("ok-open", { detail: { open: true }, bubbles: true, composed: true })
+    );
+    requestAnimationFrame(() => {
+      this.anchor();
+      requestAnimationFrame(() => this.shown = true);
+    });
+  }
+  hide() {
+    if (!this.open) return;
+    this.shown = false;
+    const card = this.cardEl;
+    const finish = () => {
+      this.open = false;
+    };
+    if (card && !this.prefersReducedMotion()) {
+      card.addEventListener("transitionend", finish, { once: true });
+    } else {
+      finish();
+    }
+    this.dispatchEvent(
+      new CustomEvent("ok-open", { detail: { open: false }, bubbles: true, composed: true })
+    );
+  }
+  // Resuelve los lados (derecha/arriba) con computeAnchor; respeta la `placement` preferida.
+  anchor() {
+    const trigger = this.triggerEl;
+    const card = this.cardEl;
+    if (!trigger || !card) return;
+    const { end, above } = computeAnchor(trigger, card, { gap: 8, margin: 12 });
+    this.end = end;
+    this.above = this.placement === "top" ? !this.fitsBelow() || above : above;
+  }
+  // ¿Cabe la tarjeta debajo del disparador dentro del viewport?
+  fitsBelow() {
+    const trigger = this.triggerEl;
+    const card = this.cardEl;
+    if (!trigger || !card) return true;
+    const t = trigger.getBoundingClientRect();
+    const p = card.getBoundingClientRect();
+    return t.bottom + 8 + p.height <= window.innerHeight - 12;
+  }
+  prefersReducedMotion() {
+    return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  }
+  // Click en un botón del pie: si tiene `href` navega; si no, emite `ok-action`. Cierra siempre.
+  runAction(action) {
+    if (action.href) {
+      window.location.href = action.href;
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("ok-action", {
+        detail: { id: action.id, action },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.clearTimers();
+    this.hide();
+  }
+  renderAvatar() {
+    if (this.avatarSrc) {
+      return html`<img src=${this.avatarSrc} alt="" />`;
+    }
+    return this.avatar ?? "";
+  }
+  render() {
+    const hasStats = this.stats.length > 0;
+    const hasActions = this.actions.length > 0;
+    const cardCls = `card${this.shown ? " shown" : ""}${this.end ? " end" : ""}${this.above ? " above" : ""}`;
+    return html`
+      <span
+        class="trigger"
+        @mouseenter=${() => this.scheduleOpen()}
+        @mouseleave=${() => this.scheduleClose()}
+        @focusin=${() => this.scheduleOpen()}
+        @focusout=${() => this.scheduleClose()}
+        @keydown=${this.onKeydown}
+      >
+        <slot></slot>
+        ${this.open ? html`
+              <span
+                class=${cardCls}
+                role="dialog"
+                aria-label=${this.name ?? this.t.card}
+                @mouseenter=${() => this.scheduleOpen()}
+                @mouseleave=${() => this.scheduleClose()}
+              >
+                <span class="head">
+                  <span class="avatar">${this.renderAvatar()}</span>
+                  <span>
+                    ${this.name ? html`<span class="title"
+                          >${this.name}${this.badge ? html`<span class="badge">${this.badge}</span>` : nothing}</span
+                        >` : nothing}
+                    ${this.handle ? html`<span class="handle">${this.handle}</span>` : nothing}
+                  </span>
+                </span>
+                <slot name="content"
+                  >${this.body ? html`<span class="body">${this.body}</span>` : nothing}</slot
+                >
+                ${hasStats ? html`<span class="stats">
+                      ${this.stats.slice(0, 3).map(
+      (s) => html`<span class="stat"><b>${s.value}</b>${s.label}</span>`
+    )}
+                    </span>` : nothing}
+                ${hasActions ? html`<span class="footer">
+                      ${this.actions.slice(0, 2).map(
+      (a) => a.href ? html`<a
+                              class="action${a.brand ? " brand" : ""}"
+                              href=${a.href}
+                              @click=${() => this.clearTimers()}
+                              >${a.label}</a
+                            >` : html`<button
+                              type="button"
+                              class="action${a.brand ? " brand" : ""}"
+                              @click=${() => this.runAction(a)}
+                            >
+                              ${a.label}
+                            </button>`
+    )}
+                    </span>` : nothing}
+              </span>
+            ` : nothing}
+      </span>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkHoverCard.prototype, "name");
+__decorateClass([
+  property()
+], OkHoverCard.prototype, "badge");
+__decorateClass([
+  property()
+], OkHoverCard.prototype, "handle");
+__decorateClass([
+  property()
+], OkHoverCard.prototype, "avatar");
+__decorateClass([
+  property({ attribute: "avatar-src" })
+], OkHoverCard.prototype, "avatarSrc");
+__decorateClass([
+  property()
+], OkHoverCard.prototype, "body");
+__decorateClass([
+  property({ attribute: false })
+], OkHoverCard.prototype, "stats");
+__decorateClass([
+  property({ attribute: false })
+], OkHoverCard.prototype, "actions");
+__decorateClass([
+  property()
+], OkHoverCard.prototype, "placement");
+__decorateClass([
+  property({ type: Number, attribute: "open-delay" })
+], OkHoverCard.prototype, "openDelay");
+__decorateClass([
+  property({ type: Number, attribute: "close-delay" })
+], OkHoverCard.prototype, "closeDelay");
+__decorateClass([
+  property({ attribute: false })
+], OkHoverCard.prototype, "labels");
+__decorateClass([
+  state()
+], OkHoverCard.prototype, "open");
+__decorateClass([
+  state()
+], OkHoverCard.prototype, "shown");
+__decorateClass([
+  state()
+], OkHoverCard.prototype, "end");
+__decorateClass([
+  state()
+], OkHoverCard.prototype, "above");
+__decorateClass([
+  query(".card")
+], OkHoverCard.prototype, "cardEl");
+__decorateClass([
+  query(".trigger")
+], OkHoverCard.prototype, "triggerEl");
+define("ok-hover-card", OkHoverCard);
+export {
+  OkHoverCard
+};

package/dist/ok-icon-tile.js

@@ -0,0 +1,123 @@
+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 OkIconTile extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.color = "neutral";
+    this.size = "md";
+    this.shape = "rounded";
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Inline atom: no ocupa el ancho del contenedor. */
+      display: inline-flex;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --fg: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      /* Fondo SOFT derivado del PROPIO color del icono (lavado ~13%), no del --ion-color-*-tint
+       * del tema (que suele ser saturado y tapaba el icono). Así el icono va a color pleno (--fg)
+       * sobre un lavado apenas perceptible y SIEMPRE se ve. Override con --bg si se quiere otro. */
+      --bg: color-mix(in srgb, var(--fg) 13%, transparent);
+      --size: 2rem; /* 32px (md) */
+      --radius: 0.5rem; /* 8px */
+      --icon-size: 1.125rem; /* 18px */
+    }
+
+    /* Solo el color del icono (--fg); el fondo se deriva del lavado soft del propio --fg (arriba). */
+    :host([color='brand'])   { --fg: var(--ok-brand,  var(--ion-color-primary,  #3880ff)); }
+    :host([color='leaf'])    { --fg: var(--ok-leaf,   var(--ion-color-success,  #2dad62)); }
+    :host([color='warn'])    { --fg: var(--ok-warn,   var(--ion-color-warning,  #c79100)); }
+    :host([color='danger'])  { --fg: var(--ok-danger, var(--ion-color-danger,   #d8553f)); }
+    :host([color='info'])    { --fg: var(--ok-info,   var(--ion-color-tertiary, #5b8cd9)); }
+    :host([color='neutral']) { --fg: var(--ok-color-medium, var(--ion-color-medium, #6b7280)); }
+
+    /* Tamaños. */
+    :host([size='lg']) {
+      --size: 2.5rem; /* 40px */
+      --icon-size: 1.375rem; /* 22px */
+    }
+
+    /* Forma circular. */
+    :host([shape='circle']) {
+      --radius: 9999px;
+    }
+
+    .tile {
+      display: inline-grid;
+      place-items: center;
+      width: var(--size);
+      height: var(--size);
+      border-radius: var(--radius);
+      background: var(--bg);
+      color: var(--fg);
+      flex-shrink: 0;
+    }
+
+    /* Tanto ion-icon como iconify-icon respetan el tamaño. */
+    ion-icon,
+    iconify-icon,
+    ::slotted(*) {
+      font-size: var(--icon-size);
+      width: var(--icon-size);
+      height: var(--icon-size);
+    }
+
+    iconify-icon {
+      display: inline-flex;
+    }
+  `;
+  }
+  // Render del icono: `iconify-icon` si el nombre trae prefijo de set ("set:name");
+  // si no, `ion-icon` (que resuelve por nombre Ionicons). Ambos los registra el host.
+  renderIcon() {
+    if (!this.icon) {
+      return html`<slot></slot>`;
+    }
+    if (this.icon.includes(":")) {
+      return html`<iconify-icon icon=${this.icon} aria-hidden="true"></iconify-icon>`;
+    }
+    return html`<ion-icon name=${this.icon} aria-hidden="true"></ion-icon>`;
+  }
+  render() {
+    const decorative = !this.label;
+    return html`
+      <span
+        class="tile"
+        role="img"
+        aria-hidden=${decorative ? "true" : "false"}
+        aria-label=${this.label ?? ""}
+      >
+        ${this.renderIcon()}
+      </span>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkIconTile.prototype, "icon");
+__decorateClass([
+  property({ reflect: true })
+], OkIconTile.prototype, "color");
+__decorateClass([
+  property({ reflect: true })
+], OkIconTile.prototype, "size");
+__decorateClass([
+  property({ reflect: true })
+], OkIconTile.prototype, "shape");
+__decorateClass([
+  property()
+], OkIconTile.prototype, "label");
+define("ok-icon-tile", OkIconTile);
+export {
+  OkIconTile
+};