@erplora/outfitkit 0.1.1

package/dist/ok-keyboard.js

@@ -0,0 +1,402 @@
+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 QWERTY = [
+  "1234567890".split("").map((c) => ({ base: c })),
+  [..."qwertyuiop".split("").map((c) => ({ base: c })), { base: "", label: "⌫", kind: "del" }],
+  "asdfghjkl".split("").map((c) => ({ base: c })),
+  [
+    { base: "", label: "⇧", kind: "shift" },
+    ..."zxcvbnm".split("").map((c) => ({ base: c })),
+    { base: "," },
+    { base: "." },
+    { base: "\n", label: "↵", kind: "enter" }
+  ],
+  [
+    { base: "", label: "123", kind: "num" },
+    { base: " ", label: "espacio", kind: "space" },
+    { base: "@", label: "@", kind: "mod" }
+  ]
+];
+const SYMBOL = [
+  "1234567890".split("").map((c) => ({ base: c })),
+  "@#$_&-+()/".split("").map((c) => ({ base: c })),
+  [
+    { base: "", label: "ABC", kind: "num" },
+    ...`*"':;!?`.split("").map((c) => ({ base: c })),
+    { base: "", label: "⌫", kind: "del" }
+  ],
+  [
+    { base: " ", label: "espacio", kind: "space" },
+    { base: "." },
+    { base: "," },
+    { base: "\n", label: "↵", kind: "enter" }
+  ]
+];
+const NUMERIC = [
+  [{ base: "1" }, { base: "2" }, { base: "3" }],
+  [{ base: "4" }, { base: "5" }, { base: "6" }],
+  [{ base: "7" }, { base: "8" }, { base: "9" }],
+  [
+    { base: "", label: "⌫", kind: "del" },
+    { base: "0" },
+    { base: "\n", label: "↵", kind: "enter" }
+  ]
+];
+class OkKeyboard extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.layout = "qwerty";
+    this.density = "touch";
+    this.value = "";
+    this.showDisplay = false;
+    this.displayLabel = "Entrada";
+    this.isShift = false;
+    this.activeLayout = "qwerty";
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --bg: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --key-bg: var(--ok-key-bg, var(--ion-color-light, #f4f5f8));
+      --key-bg-hover: var(--ok-key-bg-hover, var(--ion-color-light-shade, #e6e7ea));
+      --special-bg: var(--ok-key-special-bg, var(--ion-color-light-shade, #e6e7ea));
+      --line: var(--ok-border-color, var(--ion-border-color, #d7d8da));
+      --ink: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --ink-muted: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --ink-faint: var(--ok-color-medium-tint, var(--ion-color-medium-tint, #b3b5bd));
+      --brand: var(--ok-color-primary, var(--ion-color-primary, #0091ce));
+      --brand-shade: var(--ok-color-primary-shade, var(--ion-color-primary-shade, #007fb5));
+      --brand-fg: var(--ok-color-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
+      --radius: var(--ok-radius, 12px);
+      --key-radius: var(--ok-key-radius, 8px);
+
+      /* Métricas de densidad touch (default). */
+      --gap: 6px;
+      --key-h: 48px;
+      --key-min-w: 44px;
+      --key-fs: 16px;
+      --pad: 12px;
+    }
+
+    /* Densidad compacta (mobile / denso). */
+    :host([density='compact']) {
+      --gap: 4px;
+      --key-h: 38px;
+      --key-min-w: 34px;
+      --key-fs: 14px;
+      --pad: 8px;
+      --radius: var(--ok-radius, 8px);
+      --key-radius: var(--ok-key-radius, 6px);
+    }
+
+    .kb-wrap {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+      box-sizing: border-box;
+    }
+
+    /* Tira de display (label + valor + caret). */
+    .display {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      background: var(--key-bg);
+      border: 1px solid var(--line);
+      border-radius: var(--key-radius);
+      padding: 8px 12px;
+      min-height: 36px;
+      box-sizing: border-box;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 0.95rem;
+      color: var(--ink);
+      font-variant-numeric: tabular-nums;
+    }
+    .display__label {
+      font-size: 0.625rem;
+      color: var(--ink-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      font-family: inherit;
+    }
+    .display__value {
+      flex: 1;
+      color: var(--ink);
+      letter-spacing: 0.05em;
+      word-break: break-all;
+      white-space: pre-wrap;
+    }
+    /* Caret parpadeante cuando el valor está vacío. */
+    .display__caret {
+      color: var(--ink-faint);
+      animation: ok-kb-blink 1s step-end infinite;
+    }
+    @keyframes ok-kb-blink {
+      50% {
+        opacity: 0;
+      }
+    }
+
+    .keys {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+      padding: var(--pad);
+      background: var(--bg);
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      user-select: none;
+      -webkit-user-select: none;
+      touch-action: manipulation;
+      box-sizing: border-box;
+    }
+
+    .row {
+      display: flex;
+      gap: var(--gap);
+      width: 100%;
+    }
+
+    .key {
+      flex: 1 1 var(--key-min-w);
+      min-width: var(--key-min-w);
+      height: var(--key-h);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--key-bg);
+      border: 1px solid var(--line);
+      border-bottom-width: 2px;
+      border-radius: var(--key-radius);
+      color: var(--ink);
+      font-family: inherit;
+      font-size: var(--key-fs);
+      font-weight: 500;
+      cursor: pointer;
+      padding: 0 2px;
+      box-sizing: border-box;
+      transition: background 120ms ease-out, transform 120ms ease-out,
+        border-color 120ms ease-out;
+      font-variant-numeric: tabular-nums;
+    }
+    .key:hover {
+      background: var(--key-bg-hover);
+    }
+    .key:active {
+      transform: scale(0.97);
+    }
+    .key:focus-visible {
+      outline: 2px solid var(--brand);
+      outline-offset: 2px;
+    }
+
+    /* Anchos relativos por flex-grow. */
+    .key--wide {
+      flex-grow: 1.5;
+    }
+    .key--xwide {
+      flex-grow: 2;
+    }
+    .key--space {
+      flex-grow: 6;
+    }
+    .key--enter {
+      background: var(--brand);
+      color: var(--brand-fg);
+      border-color: transparent;
+      flex-grow: 1.6;
+    }
+    .key--enter:hover {
+      background: var(--brand-shade);
+    }
+
+    /* Teclas de acción/modificadores. */
+    .key--shift,
+    .key--del,
+    .key--num,
+    .key--mod {
+      background: var(--special-bg);
+      color: var(--ink-muted);
+      font-size: 0.8125rem;
+      font-weight: 500;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      flex-grow: 1.4;
+    }
+    .key--shift:hover,
+    .key--del:hover,
+    .key--num:hover,
+    .key--mod:hover {
+      background: var(--key-bg-hover);
+      color: var(--ink);
+    }
+
+    /* Shift activo: la tecla shift se ilumina con marca. */
+    :host([is-shift]) .key--shift {
+      background: var(--brand);
+      color: var(--brand-fg);
+      border-color: transparent;
+    }
+    /* Shift activo: las teclas de carácter muestran mayúscula. */
+    :host([is-shift]) .key--char {
+      text-transform: uppercase;
+    }
+
+    /* Modo numérico: rejilla de 3 columnas centrada. */
+    .keys--numeric {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--gap);
+      max-width: 320px;
+    }
+    .keys--numeric .row {
+      display: contents;
+    }
+    .keys--numeric .key {
+      flex: initial;
+      font-size: 1.375rem;
+      font-weight: 600;
+    }
+  `;
+  }
+  willUpdate(changed) {
+    if (changed.has("layout")) {
+      this.activeLayout = this.layout;
+    }
+  }
+  get rows() {
+    switch (this.activeLayout) {
+      case "numeric":
+        return NUMERIC;
+      case "symbol":
+        return SYMBOL;
+      default:
+        return QWERTY;
+    }
+  }
+  emit(name, detail) {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+  setValue(next) {
+    this.value = next;
+    this.emit("ok-input", { value: next });
+  }
+  handleKey(k) {
+    switch (k.kind) {
+      case "shift":
+        this.isShift = !this.isShift;
+        return;
+      case "del":
+        this.setValue(this.value.slice(0, -1));
+        this.emit("ok-key", { key: "Backspace" });
+        return;
+      case "enter":
+        this.emit("ok-key", { key: "Enter" });
+        this.emit("ok-enter", { value: this.value });
+        return;
+      case "num":
+        this.activeLayout = this.activeLayout === "qwerty" ? "symbol" : "qwerty";
+        return;
+      default: {
+        let ch = k.base;
+        if (this.isShift && ch.length === 1 && ch !== " " && ch !== "\n") {
+          ch = ch.toUpperCase();
+        }
+        this.setValue(this.value + ch);
+        this.emit("ok-key", { key: ch });
+        if (this.isShift && k.kind !== "mod") {
+          this.isShift = false;
+        }
+      }
+    }
+  }
+  renderKey(k) {
+    const isChar = !k.kind || k.kind === "space" || k.kind === "mod";
+    const cls = [
+      "key",
+      isChar ? "key--char" : "",
+      k.kind ? `key--${k.kind}` : ""
+    ].filter(Boolean).join(" ");
+    let label = k.label ?? k.base;
+    if (this.isShift && isChar && k.base.length === 1 && k.base !== " " && k.base !== "\n") {
+      label = k.base.toUpperCase();
+    }
+    return html`
+      <button
+        type="button"
+        class=${cls}
+        part="key"
+        aria-label=${k.kind === "space" ? "espacio" : k.kind === "del" ? "borrar" : k.kind === "enter" ? "intro" : label}
+        @click=${() => this.handleKey(k)}
+      >
+        ${label}
+      </button>
+    `;
+  }
+  renderDisplay() {
+    if (!this.showDisplay) return null;
+    return html`
+      <div class="display" part="display">
+        <span class="display__label">${this.displayLabel}</span>
+        <span class="display__value"
+          >${this.value}${this.value.length === 0 ? html`<span class="display__caret">_</span>` : null}</span
+        >
+      </div>
+    `;
+  }
+  render() {
+    const numeric = this.activeLayout === "numeric";
+    return html`
+      <div class="kb-wrap">
+        ${this.renderDisplay()}
+        <div
+          class=${`keys${numeric ? " keys--numeric" : ""}`}
+          role="group"
+          aria-label="Teclado en pantalla"
+        >
+          ${this.rows.map(
+      (row) => html`<div class="row" role="row">${row.map((k) => this.renderKey(k))}</div>`
+    )}
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ reflect: true })
+], OkKeyboard.prototype, "layout");
+__decorateClass([
+  property({ reflect: true })
+], OkKeyboard.prototype, "density");
+__decorateClass([
+  property()
+], OkKeyboard.prototype, "value");
+__decorateClass([
+  property({ type: Boolean, attribute: "show-display" })
+], OkKeyboard.prototype, "showDisplay");
+__decorateClass([
+  property({ attribute: "display-label" })
+], OkKeyboard.prototype, "displayLabel");
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "is-shift" })
+], OkKeyboard.prototype, "isShift");
+__decorateClass([
+  state()
+], OkKeyboard.prototype, "activeLayout");
+define("ok-keyboard", OkKeyboard);
+export {
+  OkKeyboard
+};

package/dist/ok-kpi.js

@@ -0,0 +1,147 @@
+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 OkKpi extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.trend = "flat";
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --background: var(--ok-card-background, var(--ion-card-background, var(--ion-background-color, #ffffff)));
+      --color: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --label-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --border-color: var(--ok-border-color, var(--ion-border-color, rgba(0, 0, 0, 0.08)));
+      --border-radius: var(--ok-radius, 12px);
+      --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+      --padding: 1rem 1.125rem;
+      /* Colores de tendencia. */
+      --trend-up-color: var(--ok-color-success, var(--ion-color-success, #2dd36f));
+      --trend-down-color: var(--ok-color-danger, var(--ion-color-danger, #eb445a));
+      --trend-flat-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+    }
+
+    .card {
+      box-sizing: border-box;
+      width: 100%;
+      background: var(--background);
+      color: var(--color);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      box-shadow: var(--box-shadow);
+      padding: var(--padding);
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    }
+
+    /* Fila superior: label + icono opcional. */
+    .top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+    }
+
+    .label {
+      margin: 0;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--label-color);
+    }
+
+    .label-icon {
+      font-size: 1.25rem;
+      color: var(--label-color);
+      flex: 0 0 auto;
+    }
+
+    .value {
+      margin: 0;
+      font-size: 1.75rem;
+      font-weight: 700;
+      line-height: 1.1;
+    }
+
+    /* Delta: flecha + texto, coloreado según tendencia. */
+    .delta {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      font-size: 0.8125rem;
+      font-weight: 600;
+    }
+    .delta ion-icon {
+      font-size: 1rem;
+    }
+    .delta.up {
+      color: var(--trend-up-color);
+    }
+    .delta.down {
+      color: var(--trend-down-color);
+    }
+    .delta.flat {
+      color: var(--trend-flat-color);
+    }
+
+    ::slotted(*) {
+      margin-top: 0.25rem;
+    }
+  `;
+  }
+  /** Devuelve el ion-icon de flecha según la tendencia. */
+  trendIcon() {
+    if (this.trend === "up") return "trending-up";
+    if (this.trend === "down") return "trending-down";
+    return "remove";
+  }
+  render() {
+    return html`
+      <div class="card">
+        <div class="top">
+          ${this.label ? html`<p class="label">${this.label}</p>` : null}
+          ${this.icon ? html`<ion-icon class="label-icon" name=${this.icon} aria-hidden="true"></ion-icon>` : null}
+        </div>
+        ${this.value ? html`<p class="value">${this.value}</p>` : null}
+        ${this.delta ? html`<span class="delta ${this.trend}">
+              <ion-icon name=${this.trendIcon()} aria-hidden="true"></ion-icon>${this.delta}
+            </span>` : null}
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkKpi.prototype, "label");
+__decorateClass([
+  property()
+], OkKpi.prototype, "value");
+__decorateClass([
+  property()
+], OkKpi.prototype, "delta");
+__decorateClass([
+  property()
+], OkKpi.prototype, "trend");
+__decorateClass([
+  property()
+], OkKpi.prototype, "icon");
+define("ok-kpi", OkKpi);
+export {
+  OkKpi
+};