@erplora/outfitkit 0.1.1

package/dist/ok-split-button.js

@@ -0,0 +1,251 @@
+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 = {
+  more: "More actions",
+  menu: "Actions",
+  empty: "No actions"
+};
+class OkSplitButton extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.color = "primary";
+    this.fill = "solid";
+    this.items = [];
+    this.labels = {};
+    this.open = false;
+    this.onDocClick = (e) => {
+      if (!e.composedPath().includes(this)) this.close();
+    };
+    this.onKeydown = (e) => {
+      if (e.key === "Escape") this.close();
+    };
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-text-muted, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.6));
+      --hover-bg: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.06));
+      --panel-bg: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #ffffff)));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.12));
+      --border-radius: var(--ok-radius, 8px);
+      --shadow: var(--ok-shadow, 0 8px 28px rgba(0, 0, 0, 0.18));
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      /* INLINE: solo lo que miden los botones. */
+      display: inline-block;
+      position: relative;
+      color: var(--color);
+      font-family: var(--font);
+    }
+    /* Grupo: botón principal + caret pegados, con separación visual entre ambos. */
+    .group {
+      display: inline-flex;
+      align-items: stretch;
+    }
+    /* El botón principal pierde el redondeo derecho; el caret pierde el izquierdo. */
+    .main {
+      --border-radius: var(--border-radius) 0 0 var(--border-radius);
+      margin: 0;
+    }
+    .caret {
+      --border-radius: 0 var(--border-radius) var(--border-radius) 0;
+      --padding-start: 6px;
+      --padding-end: 6px;
+      margin: 0;
+      min-width: 0;
+      border-left: 1px solid rgba(255, 255, 255, 0.25);
+    }
+    .caret ion-icon {
+      font-size: 1rem;
+    }
+    /* Menú/popover propio, posicionado bajo el grupo y alineado a la izquierda. */
+    .menu {
+      position: absolute;
+      top: calc(100% + 6px);
+      left: 0;
+      z-index: 1000;
+      min-width: 180px;
+      max-width: 280px;
+      padding: 0.3rem;
+      background: var(--panel-bg);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+      box-shadow: var(--shadow);
+      box-sizing: border-box;
+    }
+    .item {
+      display: flex;
+      align-items: center;
+      gap: 0.55rem;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0.5rem 0.6rem;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 6px;
+      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;
+    }
+    @media (hover: hover) {
+      .item:hover {
+        background: var(--hover-bg);
+      }
+    }
+    .item:active {
+      transform: scale(var(--ok-press-scale, 0.97));
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .item:hover,
+      .item:active {
+        transform: none;
+      }
+    }
+    .item ion-icon {
+      flex: 0 0 auto;
+      font-size: 1.05rem;
+      color: var(--color-muted);
+    }
+    .item .label {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .empty {
+      padding: 0.5rem 0.6rem;
+      font-size: 0.85rem;
+      color: var(--color-muted);
+    }
+  `;
+  }
+  // Textos efectivos: defaults en inglés + overrides del consumidor.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unbind();
+  }
+  bind() {
+    document.addEventListener("click", this.onDocClick, true);
+    document.addEventListener("keydown", this.onKeydown);
+  }
+  unbind() {
+    document.removeEventListener("click", this.onDocClick, true);
+    document.removeEventListener("keydown", this.onKeydown);
+  }
+  toggle() {
+    this.open ? this.close() : this.openMenu();
+  }
+  openMenu() {
+    if (this.open) return;
+    this.open = true;
+    this.bind();
+    this.dispatchEvent(
+      new CustomEvent("ok-open", { detail: { open: true }, bubbles: true, composed: true })
+    );
+  }
+  close() {
+    if (!this.open) return;
+    this.open = false;
+    this.unbind();
+    this.dispatchEvent(
+      new CustomEvent("ok-open", { detail: { open: false }, bubbles: true, composed: true })
+    );
+  }
+  // Click en la acción principal: emite `ok-main` (no abre el menú).
+  mainClick() {
+    this.dispatchEvent(new CustomEvent("ok-main", { detail: {}, bubbles: true, composed: true }));
+  }
+  // Click en un item del menú: emite `ok-select` y cierra.
+  selectItem(item) {
+    this.dispatchEvent(
+      new CustomEvent("ok-select", {
+        detail: { id: item.id, item },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.close();
+  }
+  renderItem(item) {
+    return html`<button
+      type="button"
+      class="item"
+      role="menuitem"
+      @click=${() => this.selectItem(item)}
+    >
+      ${item.icon ? html`<ion-icon .name=${item.icon}></ion-icon>` : ""}
+      <span class="label">${item.label}</span>
+    </button>`;
+  }
+  render() {
+    return html`
+      <div class="group">
+        <ion-button
+          class="main"
+          color=${this.color}
+          fill=${this.fill}
+          @click=${() => this.mainClick()}
+        >
+          ${this.label}
+        </ion-button>
+        <ion-button
+          class="caret"
+          color=${this.color}
+          fill=${this.fill}
+          aria-haspopup="menu"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-label=${this.t.more}
+          @click=${() => this.toggle()}
+        >
+          <ion-icon slot="icon-only" name="chevron-down-outline"></ion-icon>
+        </ion-button>
+      </div>
+      ${this.open ? html`<div class="menu" role="menu" aria-label=${this.t.menu}>
+            ${this.items.length ? this.items.map((item) => this.renderItem(item)) : html`<div class="empty">${this.t.empty}</div>`}
+          </div>` : ""}
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkSplitButton.prototype, "label");
+__decorateClass([
+  property()
+], OkSplitButton.prototype, "color");
+__decorateClass([
+  property()
+], OkSplitButton.prototype, "fill");
+__decorateClass([
+  property({ attribute: false })
+], OkSplitButton.prototype, "items");
+__decorateClass([
+  property({ attribute: false })
+], OkSplitButton.prototype, "labels");
+__decorateClass([
+  state()
+], OkSplitButton.prototype, "open");
+define("ok-split-button", OkSplitButton);
+export {
+  OkSplitButton
+};

package/dist/ok-splitter.js

@@ -0,0 +1,289 @@
+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 OkSplitter extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.size = 50;
+    this.min = 10;
+    this.max = 90;
+    this.collapsed = "none";
+    this.dragging = false;
+    this._size = 50;
+    this._splitEl = null;
+    this._pointerId = null;
+  }
+  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));
+      --divider-bg: var(--ok-surface-2, var(--ion-color-step-50, #f4f5f8));
+      --divider-bg-hover: var(--ok-surface-3, var(--ion-color-step-100, #e9eaee));
+      --line: var(--ok-border-color, var(--ion-border-color, #e0e0e0));
+      --grip: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --radius: var(--ok-radius-lg, 12px);
+      --divider-size: 6px;
+      --min-height: 200px;
+    }
+
+    .split {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      min-height: var(--min-height);
+      background: var(--bg);
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+    .split.vertical {
+      flex-direction: column;
+    }
+
+    .pane {
+      min-width: 0;
+      min-height: 0;
+      overflow: auto;
+      box-sizing: border-box;
+    }
+    /* En arrastre, suprimir selección de texto. */
+    :host([dragging]) {
+      user-select: none;
+    }
+    :host([dragging]) .pane {
+      pointer-events: none;
+    }
+
+    .divider {
+      flex: 0 0 var(--divider-size);
+      background: var(--divider-bg);
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: col-resize;
+      transition: background 120ms ease-out;
+      touch-action: none;
+      align-self: stretch;
+    }
+    .split.vertical .divider {
+      cursor: row-resize;
+    }
+    .divider:hover,
+    :host([dragging]) .divider {
+      background: var(--divider-bg-hover);
+    }
+    .divider::before {
+      border-left: 1px solid var(--line);
+    }
+    .split.horizontal .divider {
+      border-left: 1px solid var(--line);
+      border-right: 1px solid var(--line);
+    }
+    .split.vertical .divider {
+      border-top: 1px solid var(--line);
+      border-bottom: 1px solid var(--line);
+    }
+
+    /* Grip de puntos radiales (vertical para split horizontal). */
+    .grip {
+      pointer-events: none;
+    }
+    .split.horizontal .grip {
+      width: 2px;
+      height: 18px;
+      background: radial-gradient(
+          circle,
+          var(--grip) 1px,
+          transparent 1.5px
+        )
+        0 0 / 2px 5px repeat-y;
+    }
+    .split.vertical .grip {
+      width: 18px;
+      height: 2px;
+      background: radial-gradient(
+          circle,
+          var(--grip) 1px,
+          transparent 1.5px
+        )
+        0 0 / 5px 2px repeat-x;
+    }
+
+    /* Panel colapsado: ocupa todo, oculta divisor + otro panel. */
+    .divider.hidden,
+    .pane.hidden {
+      display: none;
+    }
+  `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._size = this._clamp(this.size);
+  }
+  willUpdate(changed) {
+    if (changed.has("size") || changed.has("min") || changed.has("max")) {
+      this._size = this._clamp(this.size);
+    }
+  }
+  // Restringe el tamaño a [min, max] dentro de [0, 100].
+  _clamp(v) {
+    const lo = Math.max(0, Math.min(100, this.min));
+    const hi = Math.max(lo, Math.min(100, this.max));
+    return Math.max(lo, Math.min(hi, v));
+  }
+  _onPointerDown(e) {
+    if (this.collapsed !== "none") return;
+    e.preventDefault();
+    const target = e.currentTarget;
+    this._splitEl = this.renderRoot.querySelector(".split");
+    this._pointerId = e.pointerId;
+    target.setPointerCapture(e.pointerId);
+    this.dragging = true;
+  }
+  _onPointerMove(e) {
+    if (!this.dragging || !this._splitEl) return;
+    const rect = this._splitEl.getBoundingClientRect();
+    let pct;
+    if (this.orientation === "vertical") {
+      const h = rect.height;
+      pct = h > 0 ? (e.clientY - rect.top) / h * 100 : this._size;
+    } else {
+      const w = rect.width;
+      pct = w > 0 ? (e.clientX - rect.left) / w * 100 : this._size;
+    }
+    const next = this._clamp(Math.round(pct * 10) / 10);
+    if (next !== this._size) {
+      this._size = next;
+      this._emit();
+    }
+  }
+  _onPointerUp(e) {
+    if (!this.dragging) return;
+    const target = e.currentTarget;
+    if (this._pointerId !== null && target.hasPointerCapture?.(this._pointerId)) {
+      target.releasePointerCapture(this._pointerId);
+    }
+    this._pointerId = null;
+    this.dragging = false;
+    this.size = this._size;
+  }
+  // Permitir teclado en el divisor para accesibilidad.
+  _onKeyDown(e) {
+    if (this.collapsed !== "none") return;
+    const horiz = this.orientation === "horizontal";
+    let delta = 0;
+    if (horiz && e.key === "ArrowLeft" || !horiz && e.key === "ArrowUp") delta = -2;
+    else if (horiz && e.key === "ArrowRight" || !horiz && e.key === "ArrowDown") delta = 2;
+    else if (e.key === "Home") {
+      this._setSize(this.min);
+      e.preventDefault();
+      return;
+    } else if (e.key === "End") {
+      this._setSize(this.max);
+      e.preventDefault();
+      return;
+    } else return;
+    e.preventDefault();
+    this._setSize(this._size + delta);
+  }
+  _setSize(v) {
+    const next = this._clamp(v);
+    if (next !== this._size) {
+      this._size = next;
+      this.size = next;
+      this._emit();
+    }
+  }
+  // Emite ok-resize con el tamaño actual del primer panel (%).
+  _emit() {
+    this.dispatchEvent(
+      new CustomEvent("ok-resize", {
+        detail: { size: this._size },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    const horiz = this.orientation === "horizontal";
+    const startHidden = this.collapsed === "start";
+    const endHidden = this.collapsed === "end";
+    const dividerHidden = this.collapsed !== "none";
+    const startFlex = startHidden ? "0 0 0" : endHidden ? "1 1 auto" : `0 0 ${this._size}%`;
+    const endFlex = endHidden ? "0 0 0" : startHidden ? "1 1 auto" : "1 1 0";
+    const axis = horiz ? "horizontal" : "vertical";
+    return html`
+      <div class="split ${axis}">
+        <div
+          class="pane start ${startHidden ? "hidden" : ""}"
+          style="flex:${startFlex}"
+        >
+          <slot name="start"></slot>
+        </div>
+        <div
+          class="divider ${dividerHidden ? "hidden" : ""}"
+          role="separator"
+          tabindex="0"
+          aria-orientation=${horiz ? "vertical" : "horizontal"}
+          aria-valuenow=${Math.round(this._size)}
+          aria-valuemin=${Math.round(this.min)}
+          aria-valuemax=${Math.round(this.max)}
+          aria-label="Redimensionar paneles"
+          @pointerdown=${this._onPointerDown}
+          @pointermove=${this._onPointerMove}
+          @pointerup=${this._onPointerUp}
+          @pointercancel=${this._onPointerUp}
+          @keydown=${this._onKeyDown}
+        >
+          <span class="grip"></span>
+        </div>
+        <div
+          class="pane end ${endHidden ? "hidden" : ""}"
+          style="flex:${endFlex}"
+        >
+          <slot name="end"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ reflect: true })
+], OkSplitter.prototype, "orientation");
+__decorateClass([
+  property({ type: Number })
+], OkSplitter.prototype, "size");
+__decorateClass([
+  property({ type: Number })
+], OkSplitter.prototype, "min");
+__decorateClass([
+  property({ type: Number })
+], OkSplitter.prototype, "max");
+__decorateClass([
+  property()
+], OkSplitter.prototype, "collapsed");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkSplitter.prototype, "dragging");
+__decorateClass([
+  state()
+], OkSplitter.prototype, "_size");
+define("ok-splitter", OkSplitter);
+export {
+  OkSplitter
+};

package/dist/ok-stat.js

@@ -0,0 +1,77 @@
+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 OkStat extends LitElement {
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Tokens propios estilo Ionic (overridables): --ok-* → --ion-* → hex. */
+      --color: var(--ok-text-color, var(--ion-text-color, #1f2933));
+      --label-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+      --hint-color: var(--ok-color-medium, var(--ion-color-medium, #92949c));
+    }
+
+    .stat {
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .label {
+      margin: 0;
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: var(--label-color);
+    }
+
+    .value {
+      margin: 0;
+      font-size: 1.25rem;
+      font-weight: 700;
+      line-height: 1.15;
+      color: var(--color);
+    }
+
+    .hint {
+      margin: 0;
+      font-size: 0.75rem;
+      color: var(--hint-color);
+    }
+  `;
+  }
+  render() {
+    return html`
+      <div class="stat">
+        ${this.label ? html`<p class="label">${this.label}</p>` : null}
+        ${this.value ? html`<p class="value">${this.value}</p>` : null}
+        ${this.hint ? html`<p class="hint">${this.hint}</p>` : null}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkStat.prototype, "label");
+__decorateClass([
+  property()
+], OkStat.prototype, "value");
+__decorateClass([
+  property()
+], OkStat.prototype, "hint");
+define("ok-stat", OkStat);
+export {
+  OkStat
+};