@erplora/outfitkit 0.1.1

package/dist/ok-carousel.js

@@ -0,0 +1,352 @@
+import { LitElement, css, html } from "lit";
+import { property, state, query } 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 = {
+  previous: "Previous",
+  next: "Next",
+  goToSlide: "Go to slide {n}"
+};
+class OkCarousel extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.slides = [];
+    this.index = 0;
+    this.autoplay = 0;
+    this.loop = false;
+    this.labels = {};
+    this.slottedCount = 0;
+    this.dragStartX = 0;
+    this.dragging = false;
+    this.dragDelta = 0;
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --bg: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --dot-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.25));
+      --dot-active: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --arrow-bg: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --shadow: var(--ok-shadow, 0 2px 10px rgba(0, 0, 0, 0.15));
+      --border-radius: var(--ok-radius, 12px);
+      --height: var(--ok-carousel-height, 260px);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* Ocupa el ancho del contenedor y es responsive. */
+      display: block;
+      width: 100%;
+      color: var(--color);
+      font-family: var(--font);
+    }
+    /* Ventana del carrusel: recorta los slides; el track se desplaza dentro. */
+    .viewport {
+      position: relative;
+      width: 100%;
+      height: var(--height);
+      overflow: hidden;
+      border-radius: var(--border-radius);
+      background: var(--bg);
+      touch-action: pan-y;
+    }
+    /* Pista horizontal con todos los slides en fila; se mueve con translateX. */
+    .track {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      transition: transform 0.35s ease;
+      will-change: transform;
+    }
+    /* Mientras se arrastra con el dedo, sin transición (sigue al puntero). */
+    .track.dragging {
+      transition: none;
+    }
+    .slide {
+      flex: 0 0 100%;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+    /* Cuando los slides vienen de .slides (HTML/string). */
+    .slide.from-prop {
+      padding: 1rem;
+      text-align: center;
+    }
+    .slide ::slotted(*) {
+      width: 100%;
+      height: 100%;
+    }
+    /* Flechas de navegación, superpuestas a izquierda/derecha y centradas verticalmente. */
+    .arrow {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 2;
+      --background: var(--arrow-bg);
+      --color: var(--color);
+      --border-radius: 50%;
+      --box-shadow: var(--shadow);
+      --padding-start: 0;
+      --padding-end: 0;
+      margin: 0;
+      width: 40px;
+      height: 40px;
+    }
+    .arrow.prev {
+      left: 8px;
+    }
+    .arrow.next {
+      right: 8px;
+    }
+    .arrow[disabled] {
+      opacity: 0.35;
+    }
+    /* Tira de puntos indicadores bajo la ventana. */
+    .dots {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      margin-top: 0.6rem;
+    }
+    .dot {
+      width: 9px;
+      height: 9px;
+      padding: 0;
+      border: 0;
+      border-radius: 50%;
+      background: var(--dot-color);
+      cursor: pointer;
+      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;
+    }
+    .dot.active {
+      background: var(--dot-active);
+      transform: scale(1.25);
+    }
+    @media (hover: hover) {
+      .dot:not(.active):hover {
+        background: var(--dot-active);
+        transform: scale(1.15);
+      }
+    }
+    .dot:active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .dot:hover,
+      .dot:active {
+        transform: none;
+      }
+    }
+    /* En móvil, oculta las flechas y deja navegar por swipe + puntos. */
+    @media (max-width: 480px) {
+      .arrow {
+        width: 34px;
+        height: 34px;
+      }
+    }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopAutoplay();
+  }
+  updated(changed) {
+    if (changed.has("autoplay") || changed.has("slides")) {
+      this.restartAutoplay();
+    }
+  }
+  // Total de slides según la fuente activa (datos > slot).
+  get count() {
+    return this.slides.length > 0 ? this.slides.length : this.slottedCount;
+  }
+  // Lee cuántos slides hay en el slot por defecto (un hijo = un slide).
+  onSlotChange(e) {
+    const slot = e.target;
+    this.slottedCount = slot.assignedElements().length;
+  }
+  // Mueve el carrusel a un índice concreto (respeta loop) y emite `ok-change`.
+  goTo(i, emit = true) {
+    const n = this.count;
+    if (n === 0) return;
+    let next = i;
+    if (next < 0) next = this.loop ? n - 1 : 0;
+    if (next > n - 1) next = this.loop ? 0 : n - 1;
+    if (next === this.index) return;
+    this.index = next;
+    if (emit) {
+      this.dispatchEvent(
+        new CustomEvent("ok-change", {
+          detail: { index: this.index },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  next() {
+    this.goTo(this.index + 1);
+    this.restartAutoplay();
+  }
+  prev() {
+    this.goTo(this.index - 1);
+    this.restartAutoplay();
+  }
+  // ---- Autoplay -----------------------------------------------------------
+  restartAutoplay() {
+    this.stopAutoplay();
+    if (this.autoplay > 0 && this.count > 1) {
+      this.autoplayTimer = setInterval(() => {
+        if (!this.loop && this.index >= this.count - 1) {
+          this.goTo(0);
+        } else {
+          this.goTo(this.index + 1);
+        }
+      }, this.autoplay);
+    }
+  }
+  stopAutoplay() {
+    if (this.autoplayTimer) {
+      clearInterval(this.autoplayTimer);
+      this.autoplayTimer = void 0;
+    }
+  }
+  // ---- Swipe táctil (pointer events) --------------------------------------
+  onPointerDown(e) {
+    if (this.count <= 1) return;
+    this.dragging = true;
+    this.dragStartX = e.clientX;
+    this.dragDelta = 0;
+    this.stopAutoplay();
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+  }
+  onPointerMove(e) {
+    if (!this.dragging) return;
+    this.dragDelta = e.clientX - this.dragStartX;
+    if (this.trackEl) {
+      const base = -this.index * 100;
+      const pct = this.dragDelta / (this.offsetWidth || 1) * 100;
+      this.trackEl.style.transform = `translateX(${base + pct}%)`;
+    }
+  }
+  onPointerUp() {
+    if (!this.dragging) return;
+    this.dragging = false;
+    const threshold = (this.offsetWidth || 1) * 0.18;
+    if (this.dragDelta <= -threshold) this.goTo(this.index + 1);
+    else if (this.dragDelta >= threshold) this.goTo(this.index - 1);
+    if (this.trackEl) this.trackEl.style.transform = "";
+    this.dragDelta = 0;
+    this.restartAutoplay();
+  }
+  render() {
+    const n = this.count;
+    const fromProp = this.slides.length > 0;
+    const atStart = this.index <= 0;
+    const atEnd = this.index >= n - 1;
+    return html`
+      <div class="viewport">
+        <ion-button
+          class="arrow prev"
+          fill="clear"
+          aria-label=${this.t.previous}
+          ?disabled=${n <= 1 || !this.loop && atStart}
+          @click=${() => this.prev()}
+        >
+          <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
+        </ion-button>
+
+        <div
+          class=${`track ${this.dragging ? "dragging" : ""}`.trim()}
+          style=${`transform: translateX(-${this.index * 100}%)`}
+          @pointerdown=${this.onPointerDown}
+          @pointermove=${this.onPointerMove}
+          @pointerup=${this.onPointerUp}
+          @pointercancel=${this.onPointerUp}
+          @pointerleave=${this.onPointerUp}
+        >
+          ${fromProp ? this.slides.map(
+      (s) => html`<div class="slide from-prop">${this.unsafeSlide(s)}</div>`
+    ) : html`<div class="slide">
+                <slot @slotchange=${this.onSlotChange}></slot>
+              </div>`}
+        </div>
+
+        <ion-button
+          class="arrow next"
+          fill="clear"
+          aria-label=${this.t.next}
+          ?disabled=${n <= 1 || !this.loop && atEnd}
+          @click=${() => this.next()}
+        >
+          <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
+        </ion-button>
+      </div>
+
+      ${n > 1 ? html`<div class="dots" role="tablist">
+            ${Array.from({ length: n }).map(
+      (_, i) => html`<button
+                type="button"
+                class=${`dot ${i === this.index ? "active" : ""}`.trim()}
+                role="tab"
+                aria-selected=${i === this.index ? "true" : "false"}
+                aria-label=${this.t.goToSlide.replace("{n}", String(i + 1))}
+                @click=${() => {
+        this.goTo(i);
+        this.restartAutoplay();
+      }}
+              ></button>`
+    )}
+          </div>` : ""}
+    `;
+  }
+  // Renderiza un slide aportado por `.slides`. Por seguridad CSP/XSS, NO inyectamos HTML crudo;
+  // se muestra como texto. (El consumidor que necesite HTML rico debe usar el `<slot>`.)
+  unsafeSlide(s) {
+    return html`${s}`;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkCarousel.prototype, "slides");
+__decorateClass([
+  property({ type: Number })
+], OkCarousel.prototype, "index");
+__decorateClass([
+  property({ type: Number })
+], OkCarousel.prototype, "autoplay");
+__decorateClass([
+  property({ type: Boolean })
+], OkCarousel.prototype, "loop");
+__decorateClass([
+  property({ attribute: false })
+], OkCarousel.prototype, "labels");
+__decorateClass([
+  state()
+], OkCarousel.prototype, "slottedCount");
+__decorateClass([
+  query(".track")
+], OkCarousel.prototype, "trackEl");
+define("ok-carousel", OkCarousel);
+export {
+  OkCarousel
+};

package/dist/ok-chart.js

@@ -0,0 +1,325 @@
+import { LitElement, css, svg, 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 OkChart extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.type = "line";
+    this.series = [];
+    this.labels = [];
+    this.axis = [];
+    this.gridlines = true;
+    this.height = 200;
+    this.endpoint = false;
+    this.endpointLabel = "";
+    this.vbWidth = 600;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --primary: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --grid: var(--ok-border-color, var(--ion-border-color, #e0e0e0));
+      --axis-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --value-color: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --mute: var(--ok-color-step-200, var(--ion-color-step-200, #cccccc));
+      --surface: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --legend-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+    }
+
+    .chart {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      overflow: visible;
+      font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
+    }
+
+    .grid line {
+      stroke: var(--grid);
+      stroke-width: 1;
+      shape-rendering: crispEdges;
+    }
+
+    .axis text {
+      fill: var(--axis-color);
+      font-size: 10px;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .value-label {
+      fill: var(--value-color);
+      font-weight: 600;
+      font-size: 11px;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .legend {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+      font-size: 0.72rem;
+      color: var(--legend-color);
+    }
+    .legend-item {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+    }
+    .legend-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+    .legend-dot.dashed {
+      height: 2px;
+      border-radius: 1px;
+    }
+  `;
+  }
+  get vbHeight() {
+    return this.height;
+  }
+  // Margen para dejar sitio al eje de valor (izq) y a las etiquetas X (abajo).
+  get pad() {
+    return {
+      left: this.axis.length ? 44 : 12,
+      right: this.endpoint ? 56 : 12,
+      top: 12,
+      bottom: this.labels.length ? 22 : 12
+    };
+  }
+  get plotW() {
+    const p = this.pad;
+    return this.vbWidth - p.left - p.right;
+  }
+  get plotH() {
+    const p = this.pad;
+    return this.vbHeight - p.top - p.bottom;
+  }
+  // Mínimo/máximo global de todas las series (las barras crecen desde 0).
+  get bounds() {
+    const all = [];
+    for (const s of this.series ?? []) for (const v of s.data ?? []) all.push(v);
+    if (!all.length) return { min: 0, max: 1 };
+    let min = Math.min(...all);
+    let max = Math.max(...all);
+    if (this.type !== "line") min = Math.min(min, 0);
+    if (min === max) max = min + 1;
+    return { min, max };
+  }
+  // Color efectivo de una serie (prop o el token primario del componente).
+  seriesColor(s, muted = false) {
+    if (s.mute || muted) return s.color ?? "var(--mute)";
+    return s.color || "var(--primary)";
+  }
+  // Mapea (índice, valor) → coordenadas {x, y} del área de dibujo.
+  xAt(i, n) {
+    const p = this.pad;
+    if (n <= 1) return p.left + this.plotW / 2;
+    return p.left + i / (n - 1) * this.plotW;
+  }
+  yAt(value) {
+    const { min, max } = this.bounds;
+    const p = this.pad;
+    return p.top + (1 - (value - min) / (max - min)) * this.plotH;
+  }
+  // ---- Rejilla horizontal ----
+  renderGrid() {
+    if (!this.gridlines) return svg``;
+    const p = this.pad;
+    const rows = Math.max(this.axis.length || 4, 2);
+    const lines = [];
+    for (let i = 0; i < rows; i++) {
+      const y = p.top + i / (rows - 1) * this.plotH;
+      lines.push(svg`<line x1=${p.left} x2=${this.vbWidth - p.right} y1=${y} y2=${y} />`);
+    }
+    return svg`<g class="grid">${lines}</g>`;
+  }
+  // ---- Eje de valor (izquierda) ----
+  renderValueAxis() {
+    if (!this.axis.length) return svg``;
+    const p = this.pad;
+    const n = this.axis.length;
+    const ticks = this.axis.map((t, i) => {
+      const y = n > 1 ? p.top + i / (n - 1) * this.plotH : p.top + this.plotH / 2;
+      return svg`<text x=${p.left - 8} y=${y + 3} text-anchor="end">${t}</text>`;
+    });
+    return svg`<g class="axis">${ticks}</g>`;
+  }
+  // ---- Etiquetas del eje X (abajo) ----
+  renderXLabels() {
+    if (!this.labels.length) return svg``;
+    const n = this.labels.length;
+    const y = this.vbHeight - this.pad.bottom + 14;
+    const ticks = this.labels.map((t, i) => {
+      const x = this.xAt(i, n);
+      const anchor = i === 0 ? "start" : i === n - 1 ? "end" : "middle";
+      return svg`<text x=${x} y=${y} text-anchor=${anchor}>${t}</text>`;
+    });
+    return svg`<g class="axis">${ticks}</g>`;
+  }
+  // ---- Líneas / áreas ----
+  renderLines() {
+    const fillArea = this.type === "area";
+    const parts = [];
+    (this.series ?? []).forEach((s, si) => {
+      const data = s.data ?? [];
+      const n = data.length;
+      if (!n) return;
+      const color = this.seriesColor(s);
+      const pts = data.map((v, i) => `${this.xAt(i, n)},${this.yAt(v)}`);
+      const linePath = `M${pts.join(" L")}`;
+      if (fillArea && !s.dashed) {
+        const baseY = this.pad.top + this.plotH;
+        const x0 = this.xAt(0, n);
+        const xEnd = this.xAt(n - 1, n);
+        const areaPath = `${linePath} L${xEnd},${baseY} L${x0},${baseY} Z`;
+        const gid = `ok-chart-grad-${si}`;
+        parts.push(svg`
+          <defs>
+            <linearGradient id=${gid} x1="0" x2="0" y1="0" y2="1">
+              <stop offset="0%" stop-color=${color} stop-opacity="0.5" />
+              <stop offset="100%" stop-color=${color} stop-opacity="0" />
+            </linearGradient>
+          </defs>
+          <path d=${areaPath} fill=${`url(#${gid})`} stroke="none" />
+        `);
+      }
+      parts.push(svg`<path
+        d=${linePath}
+        fill="none"
+        stroke=${color}
+        stroke-width=${s.dashed ? 1.5 : 2}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-dasharray=${s.dashed ? "4 4" : ""}
+      />`);
+      if (this.endpoint && si === 0 && n) {
+        const lastX = this.xAt(n - 1, n);
+        const lastY = this.yAt(data[n - 1]);
+        const label = this.endpointLabel || String(data[n - 1]);
+        parts.push(svg`
+          <circle cx=${lastX} cy=${lastY} r="4" fill=${color}
+            stroke="var(--surface)" stroke-width="2" />
+          <text class="value-label" x=${lastX + 10} y=${lastY + 3}>${label}</text>
+        `);
+      }
+    });
+    return svg`${parts}`;
+  }
+  // ---- Barras agrupadas (rounded rx=2, soporte mute por serie) ----
+  renderBars() {
+    const series = this.series ?? [];
+    const groups = Math.max(...series.map((s) => s.data?.length ?? 0), 0);
+    if (!groups) return svg``;
+    const p = this.pad;
+    const baseY = this.yAt(this.bounds.min < 0 ? 0 : this.bounds.min);
+    const groupW = this.plotW / groups;
+    const innerGap = 0.28;
+    const usable = groupW * (1 - innerGap);
+    const nSeries = series.length || 1;
+    const barW = Math.max(usable / nSeries, 1);
+    const rects = [];
+    for (let g = 0; g < groups; g++) {
+      series.forEach((s, si) => {
+        const v = s.data?.[g];
+        if (v == null) return;
+        const x = p.left + g * groupW + (groupW - usable) / 2 + si * barW;
+        const y = this.yAt(v);
+        const top = Math.min(y, baseY);
+        const h = Math.max(Math.abs(baseY - y), 0.5);
+        const color = this.seriesColor(s);
+        rects.push(svg`<rect
+          x=${x + 0.5}
+          y=${top}
+          width=${Math.max(barW - 1, 1)}
+          height=${h}
+          rx="2"
+          fill=${color}
+        />`);
+      });
+    }
+    return svg`<g>${rects}</g>`;
+  }
+  // ---- Leyenda (si alguna serie tiene nombre) ----
+  renderLegend() {
+    const items = (this.series ?? []).filter((s) => s.name);
+    if (!items.length) return null;
+    return html`<div class="legend">
+      ${items.map(
+      (s) => html`<span class="legend-item">
+          <span
+            class=${s.dashed ? "legend-dot dashed" : "legend-dot"}
+            style=${`background:${this.seriesColor(s)}`}
+          ></span>
+          ${s.name}
+        </span>`
+    )}
+    </div>`;
+  }
+  render() {
+    const body = this.type === "bar" ? this.renderBars() : this.renderLines();
+    return html`
+      <div class="chart">
+        <svg
+          viewBox=${`0 0 ${this.vbWidth} ${this.vbHeight}`}
+          style=${`height:${this.height}px`}
+          preserveAspectRatio="none"
+          role="img"
+          aria-label=${(this.series ?? []).map((s) => s.name).filter(Boolean).join(", ") || "chart"}
+        >
+          ${this.renderGrid()} ${this.renderValueAxis()} ${this.renderXLabels()} ${body}
+        </svg>
+        ${this.renderLegend()}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkChart.prototype, "type");
+__decorateClass([
+  property({ attribute: false })
+], OkChart.prototype, "series");
+__decorateClass([
+  property({ attribute: false })
+], OkChart.prototype, "labels");
+__decorateClass([
+  property({ attribute: false })
+], OkChart.prototype, "axis");
+__decorateClass([
+  property({ type: Boolean })
+], OkChart.prototype, "gridlines");
+__decorateClass([
+  property({ type: Number })
+], OkChart.prototype, "height");
+__decorateClass([
+  property({ type: Boolean })
+], OkChart.prototype, "endpoint");
+__decorateClass([
+  property()
+], OkChart.prototype, "endpointLabel");
+define("ok-chart", OkChart);
+export {
+  OkChart
+};