@erplora/outfitkit 0.1.1

package/dist/ok-wizard.js

@@ -0,0 +1,153 @@
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+import "./ok-stepper.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 OkWizard extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.steps = [];
+    this.current = 0;
+    this.backLabel = "Back";
+    this.nextLabel = "Next";
+    this.finishLabel = "Finish";
+  }
+  static {
+    this.styles = css`
+    /* Autocontenido; ancho máximo el del contenedor. */
+    :host {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+      font-family: var(--ok-font-family, var(--ion-font-family, inherit));
+    }
+
+    .stepper {
+      margin-bottom: 1.5rem;
+    }
+
+    /* Contenedor del contenido del paso. Solo se muestra el slot del paso actual; el resto se
+       oculta vía [hidden]. Min-height para que la barra de navegación no salte entre pasos. */
+    .panels {
+      min-height: 4rem;
+    }
+    .panel[hidden] {
+      display: none;
+    }
+
+    /* Barra de navegación: Atrás a la izquierda, Siguiente/Finalizar a la derecha. */
+    .nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      margin-top: 1.5rem;
+      padding-top: 1rem;
+      border-top: 1px solid var(--ok-border-color, var(--ion-border-color, #e0e0e0));
+    }
+    /* Cuando no hay botón Atrás, empujamos el de avance a la derecha. */
+    .nav.no-back {
+      justify-content: flex-end;
+    }
+
+    @media (max-width: 640px) {
+      .stepper {
+        margin-bottom: 1rem;
+      }
+    }
+  `;
+  }
+  /** Cambia al índice dado (con clamp) y emite ok-step-change si realmente cambia. */
+  _goTo(index) {
+    const last = this.steps.length - 1;
+    const next = Math.max(0, Math.min(index, last));
+    if (next === this.current) return;
+    this.current = next;
+    this.dispatchEvent(
+      new CustomEvent("ok-step-change", {
+        detail: { index: next },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /** Retrocede un paso. */
+  _back() {
+    this._goTo(this.current - 1);
+  }
+  /** Avanza un paso, o emite ok-finish si es el último. */
+  _next() {
+    if (this.current >= this.steps.length - 1) {
+      this.dispatchEvent(
+        new CustomEvent("ok-finish", { bubbles: true, composed: true })
+      );
+      return;
+    }
+    this._goTo(this.current + 1);
+  }
+  /** Navegación desde el stepper (clic en un paso). */
+  _onStepSelect(e) {
+    const { index } = e.detail;
+    e.stopPropagation();
+    this._goTo(index);
+  }
+  render() {
+    const isFirst = this.current <= 0;
+    const isLast = this.current >= this.steps.length - 1;
+    return html`
+      <div class="stepper">
+        <ok-stepper
+          .steps=${this.steps}
+          .current=${this.current}
+          @ok-step-select=${(e) => this._onStepSelect(e)}
+        ></ok-stepper>
+      </div>
+
+      <!-- Solo el panel del paso actual es visible; el resto queda oculto pero en el DOM -->
+      <div class="panels">
+        ${this.steps.map(
+      (_step, i) => html`<div class="panel" ?hidden=${i !== this.current}>
+            <slot name="step-${i}"></slot>
+          </div>`
+    )}
+      </div>
+
+      <div class="nav ${isFirst ? "no-back" : ""}">
+        ${isFirst ? "" : html`<ion-button fill="outline" color="medium" @click=${() => this._back()}>
+              ${this.backLabel}
+            </ion-button>`}
+        <ion-button color="primary" @click=${() => this._next()}>
+          ${isLast ? this.finishLabel : this.nextLabel}
+        </ion-button>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ attribute: false })
+], OkWizard.prototype, "steps");
+__decorateClass([
+  property({ type: Number })
+], OkWizard.prototype, "current");
+__decorateClass([
+  property()
+], OkWizard.prototype, "backLabel");
+__decorateClass([
+  property()
+], OkWizard.prototype, "nextLabel");
+__decorateClass([
+  property()
+], OkWizard.prototype, "finishLabel");
+define("ok-wizard", OkWizard);
+export {
+  OkWizard
+};

package/dist/outfitkit.js

@@ -0,0 +1,96 @@
+import "./ok-store.js";
+import "./store.js";
+import "./ok-data-table.js";
+import "./ok-mail.js";
+import "./ok-tree.js";
+import "./ok-inline-feedback.js";
+import "./ok-empty-state.js";
+import "./ok-kpi.js";
+import "./ok-stat.js";
+import "./ok-stepper.js";
+import "./ok-wizard.js";
+import "./ok-widget-board.js";
+import "./ok-contact-form.js";
+import "./ok-calendar.js";
+import "./ok-kanban.js";
+import "./ok-app-launcher.js";
+import "./ok-split-button.js";
+import "./ok-combo.js";
+import "./ok-tag-input.js";
+import "./ok-rating.js";
+import "./ok-otp.js";
+import "./ok-pinpad.js";
+import "./ok-currency.js";
+import "./ok-phone.js";
+import "./ok-dropzone.js";
+import "./ok-sparkline.js";
+import "./ok-chat.js";
+import "./ok-scheduler.js";
+import "./ok-menubar.js";
+import "./ok-carousel.js";
+import "./ok-signature.js";
+import "./ok-qr.js";
+import "./ok-audio.js";
+import "./ok-video.js";
+import "./ok-pdf.js";
+import "./ok-receipt.js";
+import "./ok-invoice.js";
+import "./ok-timeline.js";
+import "./ok-qty-stepper.js";
+import "./ok-command-palette.js";
+import "./ok-color-picker.js";
+import "./ok-avatar.js";
+import "./ok-status-pill.js";
+import "./ok-drawer.js";
+import "./ok-page-header.js";
+import "./ok-bento.js";
+import "./ok-bento-item.js";
+import "./ok-reveal.js";
+import "./ok-feature-card.js";
+import "./ok-pricing-card.js";
+import "./ok-product-card.js";
+import "./ok-logo-cloud.js";
+import "./ok-testimonial.js";
+import "./ok-cta-band.js";
+import "./ok-language-select.js";
+import "./ok-navbar.js";
+import "./ok-footer.js";
+import "./ok-hero.js";
+import "./ok-pagination.js";
+import "./ok-skeleton.js";
+import "./ok-gauge.js";
+import "./ok-chart.js";
+import "./ok-donut.js";
+import "./ok-heatmap.js";
+import "./ok-funnel.js";
+import "./ok-bar-list.js";
+import "./ok-detail-list.js";
+import "./ok-icon-tile.js";
+import "./ok-status-dot.js";
+import "./ok-kbd.js";
+import "./ok-menu.js";
+import "./ok-hover-card.js";
+import "./ok-notification-center.js";
+import "./ok-coachmark.js";
+import "./ok-select-card.js";
+import "./ok-error-page.js";
+import "./ok-date-picker.js";
+import "./ok-time-picker.js";
+import "./ok-range-dual.js";
+import "./ok-file-item.js";
+import "./ok-rich-text.js";
+import "./ok-code.js";
+import "./ok-json-viewer.js";
+import "./ok-diff.js";
+import "./ok-keyboard.js";
+import "./ok-calculator.js";
+import "./ok-image.js";
+import "./ok-gallery.js";
+import "./ok-lightbox.js";
+import "./ok-cropper.js";
+import "./ok-splitter.js";
+import "./ok-loyalty-card.js";
+import "./ok-event-card.js";
+import "./ok-avatar-group.js";
+import "./ok-org-chart.js";
+import "./ok-file-manager.js";

package/dist/shared/anchor.js

@@ -0,0 +1,14 @@
+function computeAnchor(trigger, panel, opts = {}) {
+  const gap = opts.gap ?? 8;
+  const margin = opts.margin ?? 8;
+  const t = trigger.getBoundingClientRect();
+  const p = panel.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const end = t.left + p.width > vw - margin && t.right - p.width >= margin;
+  const above = t.bottom + gap + p.height > vh - margin && t.top - gap - p.height >= margin;
+  return { end, above };
+}
+export {
+  computeAnchor as c
+};

package/dist/store/controller.d.ts

@@ -0,0 +1,17 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { Store } from './store.js';
+export declare class StoreController<T = unknown> implements ReactiveController {
+    private host;
+    private store;
+    private key?;
+    private unsubscribe?;
+    constructor(host: ReactiveControllerHost, store: Store, key?: string);
+    /** Valor actual de la clave observada (o `undefined` si el controller observa todo el store). */
+    get value(): T | undefined;
+    /** Escribe en la clave observada. No-op si el controller no tiene clave. */
+    set(value: T): void;
+    /** Actualiza la clave observada a partir del valor previo. No-op si no hay clave. */
+    update(fn: (prev: T | undefined) => T): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

package/dist/store/idb.d.ts

@@ -0,0 +1,16 @@
+export interface IdbAdapter {
+    /** Lee TODO el objectStore como pares [clave, valor] (para hidratar la caché al arrancar). */
+    getAll(): Promise<Array<[string, unknown]>>;
+    /** Escribe (o reemplaza) un valor por clave. */
+    set(key: string, val: unknown): Promise<void>;
+    /** Borra una clave. */
+    delete(key: string): Promise<void>;
+    /** Vacía el objectStore entero. */
+    clear(): Promise<void>;
+}
+/**
+ * Crea un adaptador IndexedDB para una DB/objectStore concretos. Si no hay soporte de IndexedDB,
+ * devuelve un adaptador NO-OP (memoria-solo). La apertura es perezosa y se cachea; si falla, se
+ * cae también a NO-OP (sin lanzar). `dbName`/`storeName` por defecto: 'outfitkit' / 'kv'.
+ */
+export declare function createIdb(dbName?: string, storeName?: string): IdbAdapter;

package/dist/store/store.d.ts

@@ -0,0 +1,39 @@
+/** Callback de suscripción: recibe el nuevo valor y la clave que cambió. En `clear()`, value=undefined. */
+export type StoreSubscriber<T = unknown> = (value: T | undefined, key: string) => void;
+export interface StoreOptions {
+    /** Nombre de la base de datos IndexedDB (default: 'outfitkit'). */
+    name?: string;
+    /** Nombre del objectStore dentro de la DB (default: 'kv'). */
+    storeName?: string;
+}
+export interface Store {
+    /** Resuelve cuando la caché se ha hidratado desde IndexedDB. Espérala antes de leer al arrancar. */
+    readonly ready: Promise<void>;
+    /** Lee un valor de la caché (SÍNCRONO). `undefined` si no existe. */
+    get<T = unknown>(key: string): T | undefined;
+    /** Escribe un valor: actualiza caché, notifica suscriptores y persiste en IndexedDB (fire-and-forget). */
+    set<T = unknown>(key: string, value: T): void;
+    /** Actualiza un valor a partir del anterior: `fn(prev) => next`. */
+    update<T = unknown>(key: string, fn: (prev: T | undefined) => T): void;
+    /** Borra una clave. */
+    delete(key: string): void;
+    /** Alias de `delete`. */
+    remove(key: string): void;
+    /** Vacía el store entero. */
+    clear(): void;
+    /** ¿Existe la clave en la caché? */
+    has(key: string): boolean;
+    /** Claves actuales. */
+    keys(): string[];
+    /** Pares [clave, valor] actuales. */
+    entries(): Array<[string, unknown]>;
+    /** Suscríbete a una clave concreta. Devuelve la función de desuscripción. */
+    subscribe<T = unknown>(key: string, cb: StoreSubscriber<T>): () => void;
+    /** Suscríbete a TODOS los cambios. Devuelve la función de desuscripción. */
+    subscribe(cb: StoreSubscriber): () => void;
+    /** Resuelve cuando se han escrito a IndexedDB todas las operaciones pendientes. */
+    flush(): Promise<void>;
+}
+export declare function createStore(options?: StoreOptions): Store;
+/** Singleton por defecto (DB 'outfitkit', store 'kv'). Cómodo para uso global rápido. */
+export declare const store: Store;

package/dist/store-controller.js

@@ -0,0 +1,31 @@
+class StoreController {
+  constructor(host, store, key) {
+    this.host = host;
+    this.store = store;
+    this.key = key;
+    host.addController(this);
+  }
+  /** Valor actual de la clave observada (o `undefined` si el controller observa todo el store). */
+  get value() {
+    return this.key === void 0 ? void 0 : this.store.get(this.key);
+  }
+  /** Escribe en la clave observada. No-op si el controller no tiene clave. */
+  set(value) {
+    if (this.key !== void 0) this.store.set(this.key, value);
+  }
+  /** Actualiza la clave observada a partir del valor previo. No-op si no hay clave. */
+  update(fn) {
+    if (this.key !== void 0) this.store.update(this.key, fn);
+  }
+  hostConnected() {
+    const onChange = () => this.host.requestUpdate();
+    this.unsubscribe = this.key === void 0 ? this.store.subscribe(onChange) : this.store.subscribe(this.key, onChange);
+  }
+  hostDisconnected() {
+    this.unsubscribe?.();
+    this.unsubscribe = void 0;
+  }
+}
+export {
+  StoreController
+};

package/dist/store.js

@@ -0,0 +1,182 @@
+const DEFAULT_DB = "outfitkit";
+const DEFAULT_STORE = "kv";
+function hasIndexedDB() {
+  return typeof indexedDB !== "undefined" && indexedDB !== null;
+}
+function noopAdapter() {
+  return {
+    getAll: () => Promise.resolve([]),
+    set: () => Promise.resolve(),
+    delete: () => Promise.resolve(),
+    clear: () => Promise.resolve()
+  };
+}
+function promisify(req) {
+  return new Promise((resolve, reject) => {
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+function createIdb(dbName = DEFAULT_DB, storeName = DEFAULT_STORE) {
+  if (!hasIndexedDB()) return noopAdapter();
+  let dbPromise = null;
+  function openDb() {
+    if (dbPromise) return dbPromise;
+    dbPromise = new Promise((resolve, reject) => {
+      const req = indexedDB.open(dbName, 1);
+      req.onupgradeneeded = () => {
+        const db = req.result;
+        if (!db.objectStoreNames.contains(storeName)) {
+          db.createObjectStore(storeName);
+        }
+      };
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+    return dbPromise;
+  }
+  async function withStore(mode, fn, fallback) {
+    try {
+      const db = await openDb();
+      const tx = db.transaction(storeName, mode);
+      const store2 = tx.objectStore(storeName);
+      return await fn(store2);
+    } catch (err) {
+      console.warn("[outfitkit/store] IndexedDB falló, se ignora la operación:", err);
+      return fallback;
+    }
+  }
+  return {
+    getAll() {
+      return withStore(
+        "readonly",
+        async (store2) => {
+          const keys = await promisify(store2.getAllKeys());
+          const values = await promisify(store2.getAll());
+          const out = [];
+          for (let i = 0; i < keys.length; i++) {
+            out.push([String(keys[i]), values[i]]);
+          }
+          return out;
+        },
+        []
+      );
+    },
+    set(key, val) {
+      return withStore(
+        "readwrite",
+        async (store2) => {
+          await promisify(store2.put(val, key));
+        },
+        void 0
+      );
+    },
+    delete(key) {
+      return withStore(
+        "readwrite",
+        async (store2) => {
+          await promisify(store2.delete(key));
+        },
+        void 0
+      );
+    },
+    clear() {
+      return withStore(
+        "readwrite",
+        async (store2) => {
+          await promisify(store2.clear());
+        },
+        void 0
+      );
+    }
+  };
+}
+function createStore(options = {}) {
+  const idb = createIdb(options.name, options.storeName);
+  const cache = /* @__PURE__ */ new Map();
+  const keySubs = /* @__PURE__ */ new Map();
+  const allSubs = /* @__PURE__ */ new Set();
+  let pending = Promise.resolve();
+  function enqueue(op) {
+    pending = pending.then(op).catch(() => {
+    });
+  }
+  const ready = idb.getAll().then((rows) => {
+    for (const [key, value] of rows) {
+      if (!cache.has(key)) cache.set(key, value);
+    }
+  });
+  function notify(key, value) {
+    const subs = keySubs.get(key);
+    if (subs) for (const cb of [...subs]) cb(value, key);
+    for (const cb of [...allSubs]) cb(value, key);
+  }
+  const store2 = {
+    ready,
+    get(key) {
+      return cache.get(key);
+    },
+    set(key, value) {
+      cache.set(key, value);
+      notify(key, value);
+      enqueue(() => idb.set(key, value));
+    },
+    update(key, fn) {
+      const next = fn(cache.get(key));
+      store2.set(key, next);
+    },
+    delete(key) {
+      const existed = cache.delete(key);
+      if (existed) {
+        notify(key, void 0);
+        enqueue(() => idb.delete(key));
+      }
+    },
+    remove(key) {
+      store2.delete(key);
+    },
+    clear() {
+      const keys = [...cache.keys()];
+      cache.clear();
+      for (const key of keys) notify(key, void 0);
+      enqueue(() => idb.clear());
+    },
+    has(key) {
+      return cache.has(key);
+    },
+    keys() {
+      return [...cache.keys()];
+    },
+    entries() {
+      return [...cache.entries()];
+    },
+    subscribe(keyOrCb, maybeCb) {
+      if (typeof keyOrCb === "function") {
+        const cb2 = keyOrCb;
+        allSubs.add(cb2);
+        return () => allSubs.delete(cb2);
+      }
+      const key = keyOrCb;
+      const cb = maybeCb;
+      let subs = keySubs.get(key);
+      if (!subs) {
+        subs = /* @__PURE__ */ new Set();
+        keySubs.set(key, subs);
+      }
+      subs.add(cb);
+      return () => {
+        subs.delete(cb);
+        if (subs.size === 0) keySubs.delete(key);
+      };
+    },
+    flush() {
+      return pending;
+    }
+  };
+  return store2;
+}
+const store = createStore();
+export {
+  createStore,
+  store
+};

package/dist/theme.example.css

@@ -0,0 +1,70 @@
+/* OutfitKit — tokens de tema (PLANTILLA). Cópialo a tu style.css y ajústalo.
+ *
+ * OutfitKit NO define valores por defecto: aquí decides de dónde salen. La opción más
+ * cómoda es heredarlos de Ionic (--ion-*), con lo que el tema claro/oscuro del shell se
+ * aplica solo. Si NO usas Ionic (p.ej. landing Django sin Ionic), pon valores propios.
+ *
+ * Cada token --ok-* tiene fallback interno a --ion-* y a un hex, así que puedes definir
+ * solo los que quieras cambiar; el resto degradan con sensatez. */
+
+:root {
+  /* Heredar de Ionic (recomendado si hay Ionic cargado) */
+  --ok-primary: var(--ion-color-primary);
+  --ok-primary-contrast: var(--ion-color-primary-contrast);
+  --ok-bg: var(--ion-background-color);
+  --ok-surface: var(--ion-card-background);
+  --ok-text: var(--ion-text-color);
+  --ok-border: rgba(var(--ion-text-color-rgb), 0.12);
+
+  /* Geometría / tipografía */
+  --ok-radius: 12px;
+  --ok-spacing: 1rem;
+  --ok-container-max: 1140px;
+  --ok-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
+  /* Micro-interacciones (hover suave en escritorio + feedback de pulsación, sutil) */
+  --ok-transition: 150ms ease;   /* duración/easing de los estados hover/activo */
+  --ok-press-scale: 0.97;        /* escala al pulsar (feedback breve, vale en táctil) */
+}
+
+/* Ejemplo SIN Ionic (descomenta y pon tu marca):
+:root {
+  --ok-primary: #1496d6;
+  --ok-primary-contrast: #ffffff;
+  --ok-bg: #ffffff;
+  --ok-surface: #ffffff;
+  --ok-text: #18181b;
+  --ok-border: rgba(24, 24, 27, 0.12);
+}
+:root.dark, :root[data-theme="dark"] {
+  --ok-bg: #09090b;
+  --ok-surface: #18181b;
+  --ok-text: #fafafa;
+  --ok-border: rgba(250, 250, 250, 0.14);
+}
+*/
+
+/* ── Overlay estrecho estilo "menú web" ──────────────────────────────────────
+ * Los overlays de Ionic (ion-popover / ion-menu / ion-modal) son anchos por
+ * defecto. Aplica esta clase con su `css-class`/`cssClass` (o directamente al
+ * elemento) para que en ESCRITORIO tengan un ancho máximo acorde a un menú web;
+ * en MÓVIL se dejan al ancho nativo de Ionic.
+ *   <ion-popover css-class="ok-overlay"> …  |  popover.cssClass = 'ok-overlay'
+ */
+.ok-overlay {
+  --width: auto;
+  --max-width: var(--ok-overlay-max, 380px);
+  /* También aplica a ion-modal / ion-select interface="modal" en ESCRITORIO:
+   * tamaño auto y acotado (menú web), no el modal a pantalla completa de Ionic. */
+  --height: auto;
+  --max-height: 80vh;
+  --border-radius: 14px;
+}
+@media (max-width: 768px) {
+  .ok-overlay {
+    /* En MÓVIL se deja al comportamiento nativo de Ionic (ancho completo). */
+    --width: 100%;
+    --max-width: 100%;
+    --max-height: 80vh;
+  }
+}