@erplora/outfitkit 0.1.1

package/dist/ok-image.js

@@ -0,0 +1,471 @@
+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;
+};
+class OkImage extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.alt = "";
+    this.ratio = "16:9";
+    this.radius = "md";
+    this.zoom = "none";
+    this.placeholderText = "cargando…";
+    this.loaded = false;
+    this.errored = false;
+    this.zooming = false;
+    this.lightboxOpen = false;
+    this.lensX = 50;
+    this.lensY = 50;
+    this.closeLightbox = () => {
+      this.lightboxOpen = false;
+    };
+    this.onKeydown = (e) => {
+      if (e.key === "Escape" && this.lightboxOpen) this.closeLightbox();
+    };
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex/literal. */
+      --bg: var(--ok-surface-variant, var(--ion-color-step-100, #e9edf0));
+      --radius: var(--ok-radius-md, 8px);
+      --caption-color: #ffffff;
+      --caption-fade: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.66));
+      --ph-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --shimmer-tint: rgba(0, 0, 0, 0.08);
+      --lens-size: 96px;
+      --lens-scale: 1.5;
+      --dur-fade: 280ms;
+      --dur-fast: 120ms;
+      --ease: cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+    /* ---------- Marco ---------- */
+    .frame {
+      display: block;
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      background: var(--bg);
+      border-radius: var(--radius);
+      aspect-ratio: 16 / 9;
+    }
+    :host([ratio='square']) .frame {
+      aspect-ratio: 1 / 1;
+    }
+    :host([ratio='portrait']) .frame {
+      aspect-ratio: 3 / 4;
+    }
+    :host([ratio='free']) .frame {
+      aspect-ratio: auto;
+    }
+    :host([radius='sm']) {
+      --radius: var(--ok-radius-sm, 6px);
+    }
+    :host([radius='lg']) {
+      --radius: var(--ok-radius-xl, 14px);
+    }
+
+    /* ---------- Imagen ---------- */
+    .el {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      opacity: 0;
+      transition: opacity var(--dur-fade) var(--ease),
+        transform var(--dur-fade) var(--ease);
+      transform-origin: center center;
+    }
+    :host([ratio='free']) .el {
+      height: auto;
+    }
+    .frame.is-loaded .el {
+      opacity: 1;
+    }
+
+    /* ---------- Placeholder + shimmer ---------- */
+    .ph {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      background: linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--bg) 70%, #fff));
+      color: var(--ph-color);
+      font-size: 0.7rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      opacity: 1;
+      transition: opacity var(--dur-fade) var(--ease);
+    }
+    .ph::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--shimmer-tint) 50%,
+        transparent 100%
+      );
+      background-size: 200% 100%;
+      animation: shimmer 1.6s linear infinite;
+      pointer-events: none;
+    }
+    @keyframes shimmer {
+      from {
+        background-position: 200% 0;
+      }
+      to {
+        background-position: -200% 0;
+      }
+    }
+    .frame.is-loaded .ph,
+    .frame.is-error .ph {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .frame.is-error .ph::after {
+      animation: none;
+    }
+    .frame.is-error .err {
+      opacity: 1;
+    }
+    .err {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      background: var(--bg);
+      color: var(--ph-color);
+      font-size: 0.7rem;
+      letter-spacing: 0.04em;
+      opacity: 0;
+      transition: opacity var(--dur-fade) var(--ease);
+    }
+
+    /* ---------- Caption ---------- */
+    .caption {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding: 1.5rem 0.75rem 0.75rem;
+      background: var(--caption-fade);
+      color: var(--caption-color);
+      font-size: 0.85rem;
+      font-weight: 500;
+      pointer-events: none;
+      z-index: 2;
+    }
+
+    /* ---------- Zoom: lens ---------- */
+    :host([zoom='lens']) .frame {
+      cursor: zoom-in;
+    }
+    :host([zoom='lens']) .frame.is-zooming {
+      cursor: zoom-out;
+    }
+    :host([zoom='lens']) .frame.is-zooming .el {
+      transform: scale(var(--lens-scale));
+    }
+    .lens {
+      position: absolute;
+      width: var(--lens-size);
+      height: var(--lens-size);
+      border: 2px solid #fff;
+      border-radius: var(--ok-radius-sm, 6px);
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(2px);
+      pointer-events: none;
+      opacity: 0;
+      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);
+      transition: opacity var(--dur-fast) var(--ease);
+      z-index: 3;
+    }
+    .frame.is-zooming .lens {
+      opacity: 1;
+    }
+
+    /* ---------- Zoom: lightbox ---------- */
+    :host([zoom='lightbox']) .frame {
+      cursor: pointer;
+    }
+    .lb-hint {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      width: 28px;
+      height: 28px;
+      display: grid;
+      place-items: center;
+      border-radius: var(--ok-radius-sm, 6px);
+      background: rgba(0, 0, 0, 0.5);
+      color: #fff;
+      opacity: 0;
+      transition: opacity var(--dur-fast) var(--ease);
+      pointer-events: none;
+      z-index: 3;
+    }
+    :host([zoom='lightbox']) .frame:hover .lb-hint {
+      opacity: 1;
+    }
+    .lb-hint svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    /* ---------- Overlay del lightbox ---------- */
+    .lightbox {
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      display: grid;
+      place-items: center;
+      padding: 2rem;
+      background: rgba(0, 0, 0, 0.85);
+      cursor: zoom-out;
+      animation: lb-in var(--dur-fade) var(--ease);
+    }
+    @keyframes lb-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    .lightbox img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      border-radius: var(--ok-radius-md, 8px);
+      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
+    }
+    .lb-close {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      width: 40px;
+      height: 40px;
+      display: grid;
+      place-items: center;
+      border: none;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.14);
+      color: #fff;
+      cursor: pointer;
+      transition: background var(--dur-fast) var(--ease);
+    }
+    .lb-close:hover {
+      background: rgba(255, 255, 255, 0.28);
+    }
+    .lb-close svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .el,
+      .ph,
+      .lightbox {
+        transition-duration: 0.01ms;
+        animation: none;
+      }
+      .ph::after {
+        animation: none;
+      }
+    }
+  `;
+  }
+  // Resetea el estado de carga cuando cambia el src.
+  willUpdate(changed) {
+    if (changed.has("src")) {
+      this.loaded = false;
+      this.errored = false;
+    }
+  }
+  onLoad() {
+    this.loaded = true;
+  }
+  onError() {
+    this.errored = true;
+  }
+  // ---------- Lens: seguir el puntero ----------
+  onPointerMove(e) {
+    if (this.zoom !== "lens" || !this.zooming) return;
+    const frame = e.currentTarget;
+    const r = frame.getBoundingClientRect();
+    this.lensX = Math.min(100, Math.max(0, (e.clientX - r.left) / r.width * 100));
+    this.lensY = Math.min(100, Math.max(0, (e.clientY - r.top) / r.height * 100));
+  }
+  onFrameClick() {
+    if (this.zoom === "lens") {
+      this.zooming = !this.zooming;
+      return;
+    }
+    if (this.zoom === "lightbox") {
+      this.openLightbox();
+    }
+  }
+  onPointerEnter() {
+  }
+  onPointerLeave() {
+    if (this.zoom === "lens") this.zooming = false;
+  }
+  openLightbox() {
+    this.lightboxOpen = true;
+    this.dispatchEvent(
+      new CustomEvent("ok-open", {
+        detail: { src: this.src, alt: this.alt },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("keydown", this.onKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("keydown", this.onKeydown);
+  }
+  renderLens() {
+    if (this.zoom !== "lens") return null;
+    return html`
+      <span
+        class="lens"
+        style="left:${this.lensX}%;top:${this.lensY}%;transform:translate(-50%,-50%);"
+      ></span>
+    `;
+  }
+  renderLightboxHint() {
+    if (this.zoom !== "lightbox") return null;
+    return html`
+      <span class="lb-hint" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="11" cy="11" r="8"></circle>
+          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          <line x1="11" y1="8" x2="11" y2="14"></line>
+          <line x1="8" y1="11" x2="14" y2="11"></line>
+        </svg>
+      </span>
+    `;
+  }
+  renderLightbox() {
+    if (!this.lightboxOpen) return null;
+    return html`
+      <div class="lightbox" role="dialog" aria-modal="true" @click=${this.closeLightbox}>
+        <button
+          class="lb-close"
+          type="button"
+          aria-label="Cerrar"
+          @click=${this.closeLightbox}
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+        <img src=${this.src} alt=${this.alt} />
+      </div>
+    `;
+  }
+  render() {
+    const interactive = this.zoom !== "none";
+    const cls = [
+      "frame",
+      this.loaded ? "is-loaded" : "",
+      this.errored ? "is-error" : "",
+      this.zooming ? "is-zooming" : ""
+    ].filter(Boolean).join(" ");
+    return html`
+      <div
+        class=${cls}
+        role=${interactive ? "button" : "img"}
+        aria-label=${interactive ? this.alt || "Imagen" : this.alt}
+        tabindex=${interactive ? "0" : "-1"}
+        @click=${interactive ? this.onFrameClick : null}
+        @keydown=${interactive ? (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.onFrameClick();
+      }
+    } : null}
+        @pointermove=${this.onPointerMove}
+        @pointerenter=${this.onPointerEnter}
+        @pointerleave=${this.onPointerLeave}
+      >
+        <img
+          class="el"
+          src=${this.src}
+          alt=${this.alt}
+          loading="lazy"
+          decoding="async"
+          @load=${this.onLoad}
+          @error=${this.onError}
+        />
+        <div class="ph" aria-hidden="true">${this.placeholderText}</div>
+        <div class="err" aria-hidden=${!this.errored}>imagen no disponible</div>
+        ${this.renderLens()} ${this.renderLightboxHint()}
+        ${this.caption ? html`<div class="caption">${this.caption}</div>` : null}
+      </div>
+      ${this.renderLightbox()}
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkImage.prototype, "src");
+__decorateClass([
+  property()
+], OkImage.prototype, "alt");
+__decorateClass([
+  property({ reflect: true })
+], OkImage.prototype, "ratio");
+__decorateClass([
+  property()
+], OkImage.prototype, "caption");
+__decorateClass([
+  property({ reflect: true })
+], OkImage.prototype, "radius");
+__decorateClass([
+  property({ reflect: true })
+], OkImage.prototype, "zoom");
+__decorateClass([
+  property({ attribute: "placeholder-text" })
+], OkImage.prototype, "placeholderText");
+__decorateClass([
+  state()
+], OkImage.prototype, "loaded");
+__decorateClass([
+  state()
+], OkImage.prototype, "errored");
+__decorateClass([
+  state()
+], OkImage.prototype, "zooming");
+__decorateClass([
+  state()
+], OkImage.prototype, "lightboxOpen");
+__decorateClass([
+  state()
+], OkImage.prototype, "lensX");
+__decorateClass([
+  state()
+], OkImage.prototype, "lensY");
+define("ok-image", OkImage);
+export {
+  OkImage
+};

package/dist/ok-inline-feedback.js

@@ -0,0 +1,221 @@
+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 = {
+  dismiss: "Dismiss"
+};
+class OkInlineFeedback extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.tone = "info";
+    this.dismissible = false;
+    this.hidden = false;
+    this.labels = {};
+    this.hasActions = false;
+    this.onActionsSlotChange = (e) => {
+      const slot = e.target;
+      this.hasActions = slot.assignedNodes({ flatten: true }).length > 0;
+    };
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex.
+         --tone-color y --tone-icon se reasignan por tone abajo. */
+      --tone-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --background-opacity: 0.1;
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --border-radius: var(--ok-radius, var(--ion-border-radius, 8px));
+      --padding: var(--ok-spacing, var(--ion-padding, 16px));
+      --accent-width: 4px;
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Responsive: el banner ocupa el ancho del contenedor. */
+      display: block;
+      width: 100%;
+      font-family: var(--font);
+      box-sizing: border-box;
+    }
+    :host([hidden]) { display: none; }
+
+    /* Mapa de tonos → color Ionic + icono por defecto. */
+    :host([tone='success']) { --tone-color: var(--ok-success, var(--ion-color-success, #2dd55b)); }
+    :host([tone='warning']) { --tone-color: var(--ok-warning, var(--ion-color-warning, #ffc409)); }
+    :host([tone='danger'])  { --tone-color: var(--ok-danger, var(--ion-color-danger, #c5000f)); }
+    :host([tone='neutral']) { --tone-color: var(--ok-medium, var(--ion-color-medium, #5f5f5f)); }
+    /* info / sin tono → primary (default ya aplicado en :host). */
+
+    .box {
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      padding: var(--padding);
+      border-radius: var(--border-radius);
+      border-inline-start: var(--accent-width) solid var(--tone-color);
+      /* Fondo tonal: el color del tono con baja opacidad (color-mix con fallback al borde fino). */
+      background: color-mix(in srgb, var(--tone-color) calc(var(--background-opacity) * 100%), transparent);
+      color: var(--color);
+    }
+
+    .icon {
+      flex: 0 0 auto;
+      font-size: 1.4rem;
+      line-height: 1;
+      color: var(--tone-color);
+      margin-top: 0.05rem;
+    }
+
+    .content {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .row {
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+    }
+    .text {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
+    }
+    .heading {
+      font-weight: 700;
+      font-size: 0.98rem;
+      line-height: 1.3;
+    }
+    .body {
+      font-size: 0.92rem;
+      line-height: 1.45;
+    }
+    .actions {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    /* Si no hay actions, el slot queda vacío y no ocupa espacio. */
+    .actions.empty { display: none; }
+
+    .close {
+      flex: 0 0 auto;
+      background: none;
+      border: 0;
+      cursor: pointer;
+      padding: 0.15rem;
+      margin: -0.15rem -0.15rem 0 0;
+      color: inherit;
+      opacity: 0.6;
+      font-size: 1.2rem;
+      line-height: 1;
+      border-radius: 4px;
+      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),
+        opacity 0.15s ease, transform 120ms ease;
+    }
+    @media (hover: hover) {
+      .close:hover { opacity: 1; background: rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.07); }
+    }
+    .close:active { transform: scale(var(--ok-press-scale, 0.97)); }
+
+    /* Móvil: las actions bajan bajo el texto (apiladas a ancho completo). */
+    @media (max-width: 640px) {
+      .row { flex-direction: column; align-items: stretch; }
+      .actions { width: 100%; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .close:hover,
+      .close:active { transform: none; }
+    }
+  `;
+  }
+  // Textos efectivos: defaults en inglés + overrides del consumidor.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Icono por defecto según el tono (overridable por la prop `icon`).
+  defaultIcon() {
+    switch (this.tone) {
+      case "success":
+        return "checkmark-circle";
+      case "warning":
+        return "warning";
+      case "danger":
+        return "alert-circle";
+      case "neutral":
+        return "information-circle";
+      case "info":
+      default:
+        return "information-circle";
+    }
+  }
+  // Oculta el banner y avisa al consumidor; éste puede revertir restaurando `hidden=false`.
+  dismiss() {
+    this.hidden = true;
+    this.dispatchEvent(new CustomEvent("ok-dismiss", { bubbles: true, composed: true }));
+  }
+  render() {
+    const iconName = this.icon ?? this.defaultIcon();
+    return html`
+      <div class="box" role="status">
+        <ion-icon class="icon" name=${iconName} aria-hidden="true"></ion-icon>
+        <div class="content">
+          <div class="row">
+            <div class="text">
+              ${this.heading ? html`<div class="heading">${this.heading}</div>` : null}
+              <div class="body"><slot></slot></div>
+            </div>
+            <div class="actions ${this.hasActions ? "" : "empty"}">
+              <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
+            </div>
+          </div>
+        </div>
+        ${this.dismissible ? html`
+              <button class="close" aria-label=${this.t.dismiss} @click=${this.dismiss}>
+                <ion-icon name="close" aria-hidden="true"></ion-icon>
+              </button>
+            ` : null}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], OkInlineFeedback.prototype, "tone");
+__decorateClass([
+  property({ type: String })
+], OkInlineFeedback.prototype, "heading");
+__decorateClass([
+  property({ type: String })
+], OkInlineFeedback.prototype, "icon");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkInlineFeedback.prototype, "dismissible");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkInlineFeedback.prototype, "hidden");
+__decorateClass([
+  property({ attribute: false })
+], OkInlineFeedback.prototype, "labels");
+__decorateClass([
+  state()
+], OkInlineFeedback.prototype, "hasActions");
+define("ok-inline-feedback", OkInlineFeedback);
+export {
+  OkInlineFeedback
+};