@erplora/outfitkit 0.1.1

package/dist/ok-gauge.js

@@ -0,0 +1,385 @@
+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 OkGauge extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.type = "arc";
+    this.value = 0;
+    this.min = 0;
+    this.max = 100;
+    this.thresholds = [];
+    this.color = "";
+    this.size = 140;
+    this.unit = "%";
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --bg: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --line: var(--ok-border-color, var(--ion-border-color, #e0e0e0));
+      --track: var(--ok-track-color, var(--ion-color-light, #f4f5f8));
+      --ink: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --ink-muted: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --accent: var(--ok-primary, var(--ion-color-primary, #3880ff));
+    }
+
+    .gauge {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+      box-sizing: border-box;
+    }
+
+    /* Arc y ring centran su SVG; bullet ocupa el ancho del contenedor. */
+    .gauge--arc,
+    .gauge--ring {
+      width: 100%;
+      align-items: center;
+    }
+    .gauge--bullet {
+      display: flex;
+      width: 100%;
+      align-items: stretch;
+      gap: 4px;
+    }
+
+    .dial {
+      position: relative;
+      display: inline-flex;
+      align-items: flex-end;
+      justify-content: center;
+    }
+
+    svg {
+      display: block;
+      overflow: visible;
+    }
+
+    /* Trazo de pista y relleno (compartidos arc/ring). */
+    .track {
+      fill: none;
+      stroke: var(--track);
+      stroke-linecap: round;
+    }
+    .fill {
+      fill: none;
+      stroke-linecap: round;
+      transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    /* Valor central. */
+    .value {
+      position: absolute;
+      font-weight: 600;
+      letter-spacing: -0.03em;
+      color: var(--ink);
+      font-variant-numeric: tabular-nums;
+      line-height: 1;
+    }
+    .value sup {
+      font-weight: 500;
+      color: var(--ink-muted);
+      margin-left: 1px;
+    }
+    /* Arc: valor abajo dentro del semicírculo. */
+    .gauge--arc .value {
+      left: 0;
+      right: 0;
+      bottom: 2px;
+      text-align: center;
+    }
+    /* Ring: valor centrado. */
+    .gauge--ring .dial {
+      align-items: center;
+    }
+    .gauge--ring .value {
+      inset: 0;
+      display: grid;
+      place-items: center;
+    }
+
+    .label {
+      font-size: 0.6875rem;
+      color: var(--ink-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      text-align: center;
+    }
+    .sublabel {
+      font-size: 0.8125rem;
+      color: var(--ink-muted);
+      text-align: center;
+    }
+
+    /* ---- Bullet (barra Tufte) ---- */
+    .bullet {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      width: 100%;
+    }
+    .bullet__head {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 8px;
+      font-size: 0.8125rem;
+      color: var(--ink-muted);
+    }
+    .bullet__head b {
+      color: var(--ink);
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+    }
+    .bullet__bar {
+      position: relative;
+      height: 14px;
+      background: var(--track);
+      border-radius: 999px;
+      overflow: hidden;
+    }
+    .bullet__zone {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+    }
+    .bullet__fill {
+      position: absolute;
+      top: 3px;
+      bottom: 3px;
+      left: 3px;
+      border-radius: 999px;
+      transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    .bullet__target {
+      position: absolute;
+      top: -2px;
+      bottom: -2px;
+      width: 2px;
+      background: var(--ink);
+      border-radius: 1px;
+      transform: translateX(-1px);
+    }
+  `;
+  }
+  // Fracción normalizada del valor en [0,1] respecto a min..max.
+  get fraction() {
+    const range = this.max - this.min || 1;
+    const f = (this.value - this.min) / range;
+    return Math.min(1, Math.max(0, f));
+  }
+  // Color efectivo del relleno: prop explícita > primer threshold cuyo `to` >= value > accent.
+  get fillColor() {
+    if (this.color) return this.color;
+    if (this.thresholds?.length) {
+      const sorted = [...this.thresholds].sort((a, b) => a.to - b.to);
+      for (const z of sorted) {
+        if (this.value <= z.to) return z.color;
+      }
+      return sorted[sorted.length - 1].color;
+    }
+    return "var(--accent)";
+  }
+  // Texto del valor con unidad como superíndice si la hay.
+  // Se envuelve en un único <span> para que el valor y la unidad fluyan inline
+  // como un solo bloque; en el ring el contenedor es grid/place-items y, sin el
+  // wrapper, el número y el <sup> caerían en filas distintas (uno encima de otro).
+  renderValueText() {
+    const n = Number.isInteger(this.value) ? this.value : Number(this.value.toFixed(1));
+    return html`<span class="value-text"
+      >${n}${this.unit ? html`<sup>${this.unit}</sup>` : null}</span
+    >`;
+  }
+  // ---- ARC: semicírculo 180° ----
+  renderArc() {
+    const w = this.size;
+    const stroke = Math.max(8, Math.round(w * 0.085));
+    const pad = stroke / 2 + 2;
+    const r = (w - pad * 2) / 2;
+    const cx = w / 2;
+    const cy = w / 2;
+    const h = r + pad;
+    const x0 = cx - r;
+    const x1 = cx + r;
+    const arcPath = `M ${x0} ${cy} A ${r} ${r} 0 0 1 ${x1} ${cy}`;
+    const len = Math.PI * r;
+    const offset = len * (1 - this.fraction);
+    const valueFs = Math.round(w * 0.18);
+    return html`
+      <div class="dial" style=${`width:${w}px;height:${h}px;`}>
+        <svg
+          width=${w}
+          height=${h}
+          viewBox=${`0 0 ${w} ${h}`}
+          role="img"
+          aria-label=${this.ariaText()}
+        >
+          <path class="track" d=${arcPath} stroke-width=${stroke} />
+          <path
+            class="fill"
+            d=${arcPath}
+            stroke=${this.fillColor}
+            stroke-width=${stroke}
+            stroke-dasharray=${len}
+            stroke-dashoffset=${offset}
+          />
+        </svg>
+        <div class="value" style=${`font-size:${valueFs}px;`}>${this.renderValueText()}</div>
+      </div>
+      ${this.label ? html`<div class="label">${this.label}</div>` : null}
+      ${this.sublabel ? html`<div class="sublabel">${this.sublabel}</div>` : null}
+    `;
+  }
+  // ---- RING: círculo completo determinado, empieza a las 12h ----
+  renderRing() {
+    const w = this.size;
+    const stroke = Math.max(6, Math.round(w * 0.075));
+    const pad = stroke / 2 + 2;
+    const r = (w - pad * 2) / 2;
+    const cx = w / 2;
+    const cy = w / 2;
+    const circ = 2 * Math.PI * r;
+    const offset = circ * (1 - this.fraction);
+    const valueFs = Math.round(w * 0.2);
+    return html`
+      <div class="dial" style=${`width:${w}px;height:${w}px;`}>
+        <svg
+          width=${w}
+          height=${w}
+          viewBox=${`0 0 ${w} ${w}`}
+          role="img"
+          aria-label=${this.ariaText()}
+          style="transform: rotate(-90deg);"
+        >
+          <circle class="track" cx=${cx} cy=${cy} r=${r} stroke-width=${stroke} />
+          <circle
+            class="fill"
+            cx=${cx}
+            cy=${cy}
+            r=${r}
+            stroke=${this.fillColor}
+            stroke-width=${stroke}
+            stroke-dasharray=${circ}
+            stroke-dashoffset=${offset}
+          />
+        </svg>
+        <div class="value" style=${`font-size:${valueFs}px;`}>${this.renderValueText()}</div>
+      </div>
+      ${this.label ? html`<div class="label">${this.label}</div>` : null}
+      ${this.sublabel ? html`<div class="sublabel">${this.sublabel}</div>` : null}
+    `;
+  }
+  // ---- BULLET: barra Tufte horizontal con zonas + target ----
+  renderBullet() {
+    const range = this.max - this.min || 1;
+    const pct = (v) => Math.min(100, Math.max(0, (v - this.min) / range * 100));
+    const sorted = this.thresholds?.length ? [...this.thresholds].sort((a, b) => a.to - b.to) : [];
+    let prev = this.min;
+    const zones = sorted.map((z) => {
+      const left = pct(prev);
+      const width = pct(z.to) - left;
+      prev = z.to;
+      return { left, width, color: z.color };
+    });
+    const fillW = pct(this.value);
+    const valueNum = Number.isInteger(this.value) ? this.value : Number(this.value.toFixed(1));
+    return html`
+      <div class="bullet" role="img" aria-label=${this.ariaText()}>
+        ${this.label || this.sublabel ? html`
+              <div class="bullet__head">
+                <span>${this.label ?? ""}</span>
+                <b>${valueNum}${this.unit}${this.sublabel ? html` · ${this.sublabel}` : ""}</b>
+              </div>
+            ` : null}
+        <div class="bullet__bar">
+          ${zones.map(
+      (z) => html`
+              <span
+                class="bullet__zone"
+                style=${`left:${z.left}%;width:${z.width}%;background:${this.zoneTint(
+        z.color
+      )};`}
+              ></span>
+            `
+    )}
+          <span
+            class="bullet__fill"
+            style=${`width:calc(${fillW}% - 6px);background:${this.fillColor};`}
+          ></span>
+          ${this.target != null ? html`<span class="bullet__target" style=${`left:${pct(this.target)}%;`}></span>` : null}
+        </div>
+      </div>
+    `;
+  }
+  // Tinte suave para el fondo de zona (la librería antigua usaba color-mix al ~18%).
+  zoneTint(color) {
+    return `color-mix(in srgb, ${color} 18%, transparent)`;
+  }
+  // Texto accesible que describe el gauge.
+  ariaText() {
+    const base = `${this.label ? this.label + ": " : ""}${this.value}${this.unit} de ${this.max}${this.unit}`;
+    return this.target != null ? `${base} (objetivo ${this.target}${this.unit})` : base;
+  }
+  render() {
+    if (this.type === "bullet") {
+      return html`<div class="gauge gauge--bullet">${this.renderBullet()}</div>`;
+    }
+    if (this.type === "ring") {
+      return html`<div class="gauge gauge--ring">${this.renderRing()}</div>`;
+    }
+    return html`<div class="gauge gauge--arc">${this.renderArc()}</div>`;
+  }
+}
+__decorateClass([
+  property()
+], OkGauge.prototype, "type");
+__decorateClass([
+  property({ type: Number })
+], OkGauge.prototype, "value");
+__decorateClass([
+  property({ type: Number })
+], OkGauge.prototype, "min");
+__decorateClass([
+  property({ type: Number })
+], OkGauge.prototype, "max");
+__decorateClass([
+  property({ attribute: false })
+], OkGauge.prototype, "thresholds");
+__decorateClass([
+  property({ type: Number })
+], OkGauge.prototype, "target");
+__decorateClass([
+  property()
+], OkGauge.prototype, "label");
+__decorateClass([
+  property()
+], OkGauge.prototype, "sublabel");
+__decorateClass([
+  property()
+], OkGauge.prototype, "color");
+__decorateClass([
+  property({ type: Number })
+], OkGauge.prototype, "size");
+__decorateClass([
+  property()
+], OkGauge.prototype, "unit");
+define("ok-gauge", OkGauge);
+export {
+  OkGauge
+};

package/dist/ok-heatmap.js

@@ -0,0 +1,268 @@
+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;
+};
+const MONTHS_ES = [
+  "Ene",
+  "Feb",
+  "Mar",
+  "Abr",
+  "May",
+  "Jun",
+  "Jul",
+  "Ago",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dic"
+];
+class OkHeatmap extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = [];
+    this.levels = 5;
+    this.scale = "";
+    this.layout = "weeks";
+    this.cellSize = 12;
+    this.legend = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+
+      /* Tokens propios estilo Ionic: --ok-* → --ion-* → hex. */
+      --brand: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --empty: var(--ok-surface-shade, var(--ion-color-light, #eceef1));
+      --muted: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --cell: 12px;
+      --radius: 2px;
+      --gap: 3px;
+    }
+
+    .wrap {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* ---- Layout 'weeks': 7 filas, flujo por columnas (una columna por semana) ---- */
+    .heat {
+      display: grid;
+      grid-auto-flow: column;
+      grid-template-rows: repeat(7, 1fr);
+      gap: var(--gap);
+      /* Permite scroll horizontal cuando hay muchas semanas en móvil. */
+      overflow-x: auto;
+      padding-bottom: 2px;
+    }
+
+    /* ---- Layout 'year': 12 columnas de meses, cada una un mini-grid de días ---- */
+    .year {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 8px;
+    }
+    .month {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+    .month-label {
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: var(--muted);
+      text-align: center;
+    }
+    .days {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 2px;
+    }
+
+    /* ---- Celda ---- */
+    .cell {
+      width: var(--cell);
+      height: var(--cell);
+      border-radius: var(--radius);
+      background: var(--empty);
+    }
+    .year .cell {
+      width: 100%;
+      aspect-ratio: 1 / 1;
+      height: auto;
+      border-radius: 1px;
+    }
+    /* Intensidades: mezcla brand X% con el fondo vacío (escala progresiva). */
+    .cell[data-v='1'] { background: color-mix(in srgb, var(--brand) 25%, var(--empty)); }
+    .cell[data-v='2'] { background: color-mix(in srgb, var(--brand) 50%, var(--empty)); }
+    .cell[data-v='3'] { background: color-mix(in srgb, var(--brand) 75%, var(--empty)); }
+    .cell[data-v='4'] { background: var(--brand); }
+
+    /* ---- Leyenda Menos → Más ---- */
+    .legend {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 5px;
+      font-size: 10.5px;
+      color: var(--muted);
+    }
+    .legend .cell {
+      width: var(--cell);
+      height: var(--cell);
+    }
+  `;
+  }
+  // Tier máximo pintable (los tiers se clampean a [0, maxTier]).
+  get maxTier() {
+    return Math.max(1, this.levels - 1);
+  }
+  // Aplica el color de escala explícito como override del token de host.
+  hostStyle() {
+    const parts = [`--cell:${this.cellSize}px`];
+    if (this.scale) parts.push(`--brand:${this.scale}`);
+    return parts.join(";");
+  }
+  // Calcula umbrales por cuantiles sobre los valores presentes (reparte tiers 1..maxTier).
+  thresholds() {
+    const vals = (this.data ?? []).map((d) => d.value).filter((v) => typeof v === "number" && v > 0).sort((a, b) => a - b);
+    if (!vals.length) return [];
+    const max = this.maxTier;
+    const th = [];
+    for (let k = 1; k <= max; k++) {
+      const idx = Math.min(vals.length - 1, Math.floor(k / (max + 1) * vals.length));
+      th.push(vals[idx]);
+    }
+    return th;
+  }
+  // Deriva el tier de intensidad de una celda (level explícito, o value vía cuantiles).
+  tierOf(cell, th) {
+    if (typeof cell.level === "number") {
+      return Math.max(0, Math.min(this.maxTier, Math.round(cell.level)));
+    }
+    const v = cell.value ?? 0;
+    if (v <= 0 || !th.length) return 0;
+    let tier = 1;
+    for (let k = 0; k < th.length; k++) {
+      if (v >= th[k]) tier = k + 1;
+    }
+    return Math.min(this.maxTier, tier);
+  }
+  // Texto del tooltip: label explícito, o fecha/clave + valor.
+  titleOf(cell) {
+    if (cell.label) return cell.label;
+    const head = cell.date ?? cell.key ?? "";
+    const tail = typeof cell.value === "number" ? `${cell.value}` : "";
+    if (head && tail) return `${head} · ${tail}`;
+    return head || tail || "";
+  }
+  // Resuelve cada celda de entrada (tier + title) preservando el orden.
+  resolve() {
+    const th = this.thresholds();
+    return (this.data ?? []).map((cell) => ({
+      tier: this.tierOf(cell, th),
+      title: this.titleOf(cell)
+    }));
+  }
+  // Pinta una celda (con data-v si tiene intensidad).
+  renderCell(c) {
+    return html`<div
+      class="cell"
+      data-v=${c.tier > 0 ? String(c.tier) : ""}
+      role="gridcell"
+      title=${c.title || ""}
+    ></div>`;
+  }
+  // Layout 'weeks': el grid se rellena por columnas automáticamente (grid-auto-flow: column).
+  renderWeeks(cells) {
+    return html`<div class="heat" role="grid" aria-label="Heatmap de actividad">
+      ${cells.map((c) => this.renderCell(c))}
+    </div>`;
+  }
+  // Layout 'year': agrupa por mes (de la fecha) y pinta 12 columnas de mini-grids.
+  renderYear() {
+    const th = this.thresholds();
+    const buckets = Array.from(
+      { length: 12 },
+      () => []
+    );
+    for (const raw of this.data ?? []) {
+      const resolved = { tier: this.tierOf(raw, th), title: this.titleOf(raw) };
+      let month = 0;
+      let day = 0;
+      if (raw.date) {
+        const d = new Date(raw.date);
+        if (!Number.isNaN(d.getTime())) {
+          month = d.getMonth();
+          day = d.getDate();
+        }
+      }
+      buckets[month].push({ day, cell: resolved });
+    }
+    return html`<div class="year" role="grid" aria-label="Heatmap anual">
+      ${buckets.map(
+      (items, m) => html`<div class="month" role="row" aria-label=${MONTHS_ES[m]}>
+          <div class="month-label">${MONTHS_ES[m]}</div>
+          <div class="days">
+            ${items.slice().sort((a, b) => a.day - b.day).map((it) => this.renderCell(it.cell))}
+          </div>
+        </div>`
+    )}
+    </div>`;
+  }
+  // Leyenda Menos → [vacío, 1, 2, …, maxTier] → Más.
+  renderLegend() {
+    const tiers = Array.from({ length: this.maxTier + 1 }, (_, i) => i);
+    return html`<div class="legend" aria-hidden="true">
+      <span>Menos</span>
+      ${tiers.map(
+      (t) => html`<div class="cell" data-v=${t > 0 ? String(t) : ""}></div>`
+    )}
+      <span>Más</span>
+    </div>`;
+  }
+  render() {
+    const cells = this.layout === "year" ? [] : this.resolve();
+    return html`<div class="wrap" style=${this.hostStyle()}>
+      ${this.layout === "year" ? this.renderYear() : this.renderWeeks(cells)}
+      ${this.legend ? this.renderLegend() : null}
+    </div>`;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkHeatmap.prototype, "data");
+__decorateClass([
+  property({ type: Number })
+], OkHeatmap.prototype, "levels");
+__decorateClass([
+  property()
+], OkHeatmap.prototype, "scale");
+__decorateClass([
+  property()
+], OkHeatmap.prototype, "layout");
+__decorateClass([
+  property({ type: Number, attribute: "cell-size" })
+], OkHeatmap.prototype, "cellSize");
+__decorateClass([
+  property({ type: Boolean })
+], OkHeatmap.prototype, "legend");
+define("ok-heatmap", OkHeatmap);
+export {
+  OkHeatmap
+};

package/dist/ok-hero.js

@@ -0,0 +1,43 @@
+import { LitElement, css, html } from "lit";
+import { define } from "./define.js";
+class OkHero extends LitElement {
+  static {
+    this.styles = css`
+    :host {
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.55));
+      --max-width: var(--ok-container-max, 1140px);
+      --padding: var(--ok-spacing, var(--ion-padding, 16px));
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      display: block;
+      color: var(--color);
+      font-family: var(--font);
+    }
+    .h {
+      max-width: var(--max-width);
+      margin-inline: auto;
+      padding: clamp(2rem, 6vw, 5rem) var(--padding);
+      display: grid;
+      gap: 1rem;
+    }
+    ::slotted([slot='title']) { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; margin: 0; }
+    ::slotted([slot='subtitle']) { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--color-muted); margin: 0; max-width: 42ch; }
+    .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
+  `;
+  }
+  render() {
+    return html`
+      <section class="h">
+        <slot name="title"></slot>
+        <slot name="subtitle"></slot>
+        <div class="actions"><slot name="actions"></slot></div>
+        <slot></slot>
+      </section>
+    `;
+  }
+}
+define("ok-hero", OkHero);
+export {
+  OkHero
+};