@erplora/outfitkit 0.1.1

package/dist/ok-phone.js

@@ -0,0 +1,225 @@
+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 = {
+  country: "Country",
+  number: "Phone number"
+};
+const _OkPhone = class _OkPhone2 extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.country = "ES";
+    this.placeholder = "";
+    this.labels = {};
+    this.number = "";
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --background: var(--ok-surface, var(--ion-item-background, #ffffff));
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.2));
+      --border-radius: var(--ok-radius, var(--ion-border-radius, 8px));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --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);
+    }
+    .label {
+      display: block;
+      margin: 0 0 0.25rem;
+      font-size: 0.85rem;
+      color: var(--color);
+    }
+    /* Selector de país (ancho fijo cómodo) + número (resto del espacio). */
+    .row {
+      display: flex;
+      align-items: stretch;
+      gap: 0.5rem;
+      width: 100%;
+    }
+    .country {
+      --background: var(--background);
+      --color: var(--color);
+      --border-color: var(--border-color);
+      --border-radius: var(--border-radius);
+      flex: 0 0 7.5rem;
+      min-width: 0;
+    }
+    .number {
+      --background: var(--background);
+      --color: var(--color);
+      --border-color: var(--border-color);
+      --border-radius: var(--border-radius);
+      --highlight-color-focused: var(--primary-color);
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    /* Móvil: apila país sobre número para no comprimir el input. */
+    @media (max-width: 480px) {
+      .row {
+        flex-direction: column;
+      }
+      .country {
+        flex: 0 0 auto;
+        width: 100%;
+      }
+    }
+  `;
+  }
+  static {
+    this.DEFAULT_COUNTRIES = [
+      { iso: "ES", name: "España", dial: "+34" },
+      { iso: "PT", name: "Portugal", dial: "+351" },
+      { iso: "FR", name: "Francia", dial: "+33" },
+      { iso: "IT", name: "Italia", dial: "+39" },
+      { iso: "DE", name: "Alemania", dial: "+49" },
+      { iso: "GB", name: "Reino Unido", dial: "+44" },
+      { iso: "IE", name: "Irlanda", dial: "+353" },
+      { iso: "NL", name: "Países Bajos", dial: "+31" },
+      { iso: "BE", name: "Bélgica", dial: "+32" },
+      { iso: "US", name: "Estados Unidos", dial: "+1" },
+      { iso: "MX", name: "México", dial: "+52" },
+      { iso: "AR", name: "Argentina", dial: "+54" },
+      { iso: "CO", name: "Colombia", dial: "+57" },
+      { iso: "CL", name: "Chile", dial: "+56" }
+    ];
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Sincroniza el número interno con la prop `value` (filtrando a dígitos).
+  willUpdate(changed) {
+    if (changed.has("value")) {
+      this.number = this.onlyDigits(this.value);
+    }
+  }
+  // Lista efectiva de países.
+  get list() {
+    return this.countries?.length ? this.countries : _OkPhone2.DEFAULT_COUNTRIES;
+  }
+  // País actualmente seleccionado (fallback al primero de la lista).
+  get current() {
+    return this.list.find((c) => c.iso === this.country) ?? this.list[0];
+  }
+  // Deja sólo dígitos en una cadena.
+  onlyDigits(raw) {
+    let out = "";
+    for (const ch of raw) if (ch >= "0" && ch <= "9") out += ch;
+    return out;
+  }
+  // Convierte un ISO2 a su bandera emoji (Regional Indicator Symbols). Sin assets.
+  flag(iso) {
+    const code = iso.trim().toUpperCase();
+    if (code.length !== 2) return "";
+    const base = 127462;
+    return String.fromCodePoint(
+      base + (code.charCodeAt(0) - 65),
+      base + (code.charCodeAt(1) - 65)
+    );
+  }
+  // Calcula el número en formato E.164 (dial + dígitos), o '' si no hay número.
+  e164() {
+    return this.number ? `${this.current.dial}${this.number}` : "";
+  }
+  // Emite `ok-change` con el estado actual completo.
+  emit() {
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail: {
+          value: this.number,
+          country: this.current.iso,
+          dial: this.current.dial,
+          e164: this.e164()
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Cambio de país en el ion-select.
+  onCountry(e) {
+    const iso = e.detail?.value ?? this.country;
+    this.country = iso;
+    this.emit();
+  }
+  // Edición del número: filtra a dígitos y emite.
+  onNumber(e) {
+    const raw = e.detail?.value ?? "";
+    this.number = this.onlyDigits(String(raw));
+    this.value = this.number;
+    this.emit();
+  }
+  render() {
+    return html`
+      ${this.label ? html`<span class="label">${this.label}</span>` : null}
+      <div class="row">
+        <ion-select
+          class="country"
+          fill="outline"
+          interface="popover"
+          aria-label=${this.t.country}
+          .value=${this.current.iso}
+          @ionChange=${this.onCountry}
+        >
+          ${this.list.map(
+      (c) => html`<ion-select-option value=${c.iso}>
+              ${this.flag(c.iso)} ${c.dial}
+            </ion-select-option>`
+    )}
+        </ion-select>
+        <ion-input
+          class="number"
+          type="tel"
+          inputmode="tel"
+          fill="outline"
+          aria-label=${this.t.number}
+          placeholder=${this.placeholder}
+          .value=${this.number}
+          @ionInput=${this.onNumber}
+        ></ion-input>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property()
+], _OkPhone.prototype, "value");
+__decorateClass([
+  property()
+], _OkPhone.prototype, "country");
+__decorateClass([
+  property({ attribute: false })
+], _OkPhone.prototype, "countries");
+__decorateClass([
+  property()
+], _OkPhone.prototype, "placeholder");
+__decorateClass([
+  property()
+], _OkPhone.prototype, "label");
+__decorateClass([
+  property({ attribute: false })
+], _OkPhone.prototype, "labels");
+__decorateClass([
+  state()
+], _OkPhone.prototype, "number");
+let OkPhone = _OkPhone;
+define("ok-phone", OkPhone);
+export {
+  OkPhone
+};

package/dist/ok-pinpad.js

@@ -0,0 +1,171 @@
+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 DEFAULT_LABELS = {
+  keypad: "Number pad",
+  backspace: "Delete"
+};
+class OkPinpad extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.masked = false;
+    this.labels = {};
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --dot-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --display-bg: var(--ok-hover, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.04));
+      --border-radius: var(--ok-radius, 8px);
+      --gap: var(--ok-pinpad-gap, 0.6rem);
+      --key-size: var(--ok-pinpad-key-size, 4rem);
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      display: inline-flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--gap);
+      font-family: var(--font);
+      color: var(--color);
+    }
+    /* Pantalla superior con los dígitos o puntos. */
+    .display {
+      min-height: 2.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.45rem;
+      padding: 0.4rem 0.6rem;
+      background: var(--display-bg);
+      border-radius: var(--border-radius);
+      font-size: 1.5rem;
+      font-weight: 600;
+      letter-spacing: 0.1em;
+      min-width: calc(var(--key-size) * 3 + var(--gap) * 2);
+      box-sizing: border-box;
+    }
+    .display .dot {
+      width: 0.7rem;
+      height: 0.7rem;
+      border-radius: 50%;
+      background: var(--dot-color);
+    }
+    .display .placeholder {
+      opacity: 0.4;
+      font-weight: 400;
+      font-size: 1rem;
+    }
+    /* Rejilla de teclas 3×4. */
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(3, var(--key-size));
+      gap: var(--gap);
+    }
+    ion-button {
+      --border-radius: var(--border-radius);
+      width: var(--key-size);
+      height: var(--key-size);
+      margin: 0;
+      font-size: 1.35rem;
+      font-weight: 500;
+    }
+    /* La celda vacía (esquina inferior izquierda) mantiene la rejilla cuadrada. */
+    .spacer {
+      width: var(--key-size);
+      height: var(--key-size);
+    }
+  `;
+  }
+  // Textos efectivos: defaults en inglés + overrides del consumidor.
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  // Añade un dígito (respetando `length`) y emite eventos.
+  press(digit) {
+    if (this.length != null && this.value.length >= this.length) return;
+    this.value = this.value + digit;
+    this.emitInput();
+    if (this.length != null && this.value.length === this.length) {
+      this.dispatchEvent(
+        new CustomEvent("ok-complete", {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  // Borra el último dígito y emite `ok-input`.
+  backspace() {
+    if (!this.value) return;
+    this.value = this.value.slice(0, -1);
+    this.emitInput();
+  }
+  emitInput() {
+    this.dispatchEvent(
+      new CustomEvent("ok-input", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // Pinta la pantalla: dots si `masked`, dígitos si no, placeholder si vacío.
+  renderDisplay() {
+    if (!this.value) {
+      return html`<span class="placeholder">&mdash;</span>`;
+    }
+    if (this.masked) {
+      return Array.from(this.value, () => html`<span class="dot"></span>`);
+    }
+    return html`<span>${this.value}</span>`;
+  }
+  render() {
+    const digits = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+    return html`
+      <div class="display" role="status" aria-live="polite">${this.renderDisplay()}</div>
+      <div class="grid" role="group" aria-label=${this.t.keypad}>
+        ${digits.map(
+      (d) => html`<ion-button
+            fill="outline"
+            aria-label=${d}
+            @click=${() => this.press(d)}
+          >${d}</ion-button>`
+    )}
+        <span class="spacer" aria-hidden="true"></span>
+        <ion-button fill="outline" aria-label="0" @click=${() => this.press("0")}>0</ion-button>
+        <ion-button fill="clear" aria-label=${this.t.backspace} @click=${() => this.backspace()}>
+          <ion-icon slot="icon-only" name="backspace-outline"></ion-icon>
+        </ion-button>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String })
+], OkPinpad.prototype, "value");
+__decorateClass([
+  property({ type: Number })
+], OkPinpad.prototype, "length");
+__decorateClass([
+  property({ type: Boolean })
+], OkPinpad.prototype, "masked");
+__decorateClass([
+  property({ attribute: false })
+], OkPinpad.prototype, "labels");
+define("ok-pinpad", OkPinpad);
+export {
+  OkPinpad
+};

package/dist/ok-pricing-card.js

@@ -0,0 +1,184 @@
+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 DEFAULT_LABELS = {
+  popular: "Popular"
+};
+class OkPricingCard extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.period = "";
+    this.features = [];
+    this.featured = false;
+    this.labels = {};
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      --color: var(--ok-text, var(--ion-text-color, #18181b));
+      --muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
+      --surface: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
+      --border: var(--ok-border, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.1));
+      --radius: var(--ok-radius, 18px);
+      --primary: var(--ion-color-primary, #1496d6);
+      --success: var(--ion-color-success, #2dd36f);
+      font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+    }
+    .card {
+      box-sizing: border-box;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: clamp(1.4rem, 2.5vw, 2rem);
+      color: var(--color);
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      position: relative;
+      transition: transform var(--ok-transition, 160ms ease), box-shadow var(--ok-transition, 160ms ease);
+    }
+    :host([featured]) .card {
+      border: 1.5px solid color-mix(in oklab, var(--primary) 70%, transparent);
+      box-shadow: 0 24px 60px -30px color-mix(in oklab, var(--primary) 65%, transparent);
+      background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 6%, var(--surface)), var(--surface));
+    }
+    .card:hover { transform: translateY(-4px); }
+    .badge {
+      position: absolute;
+      top: -0.8rem;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 0.3rem 0.85rem;
+      border-radius: 999px;
+      font-size: 0.7rem;
+      font-weight: 700;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      color: var(--ion-color-primary-contrast, #fff);
+      background: var(--primary);
+      box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--primary) 80%, transparent);
+      white-space: nowrap;
+    }
+    .name {
+      font-size: 0.72rem;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+    :host([featured]) .name { color: var(--primary); }
+    .price {
+      display: flex;
+      align-items: baseline;
+      gap: 0.35rem;
+      margin-top: 0.4rem;
+    }
+    .price .amount {
+      font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem);
+      font-weight: 700;
+      letter-spacing: -0.03em;
+      line-height: 1;
+    }
+    .price .period { font-size: 0.95rem; color: var(--muted); }
+    .desc {
+      margin-top: 0.6rem;
+      color: var(--muted);
+      font-size: 0.92rem;
+      line-height: 1.5;
+    }
+    ul {
+      list-style: none;
+      margin: 1.25rem 0 0;
+      padding: 1.25rem 0 0;
+      border-top: 1px solid color-mix(in oklab, var(--color) 9%, transparent);
+      display: flex;
+      flex-direction: column;
+      gap: 0.65rem;
+      flex: 1;
+    }
+    li {
+      display: flex;
+      gap: 0.55rem;
+      align-items: flex-start;
+      font-size: 0.92rem;
+      line-height: 1.4;
+    }
+    li .check {
+      flex: 0 0 auto;
+      width: 1.15rem;
+      height: 1.15rem;
+      margin-top: 0.05rem;
+      display: grid;
+      place-items: center;
+      border-radius: 999px;
+      color: var(--success);
+      background: color-mix(in oklab, var(--success) 16%, transparent);
+      font-size: 0.7rem;
+      font-weight: 700;
+    }
+    .cta { margin-top: 1.4rem; }
+    ::slotted([slot='cta']) { width: 100%; }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  render() {
+    const badgeText = this.badge ?? (this.featured ? this.t.popular : "");
+    return html`
+      <div class="card">
+        ${badgeText ? html`<span class="badge">${badgeText}</span>` : null}
+        ${this.name ? html`<div class="name">${this.name}</div>` : null}
+        ${this.price ? html`<div class="price">
+              <span class="amount">${this.price}</span>
+              ${this.period ? html`<span class="period">${this.period}</span>` : null}
+            </div>` : null}
+        ${this.description ? html`<p class="desc">${this.description}</p>` : null}
+        ${this.features.length ? html`<ul>
+              ${this.features.map((f) => html`<li><span class="check">✓</span><span>${f}</span></li>`)}
+            </ul>` : html`<slot></slot>`}
+        <div class="cta"><slot name="cta"></slot></div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkPricingCard.prototype, "name");
+__decorateClass([
+  property()
+], OkPricingCard.prototype, "price");
+__decorateClass([
+  property()
+], OkPricingCard.prototype, "period");
+__decorateClass([
+  property()
+], OkPricingCard.prototype, "description");
+__decorateClass([
+  property({ attribute: false })
+], OkPricingCard.prototype, "features");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkPricingCard.prototype, "featured");
+__decorateClass([
+  property()
+], OkPricingCard.prototype, "badge");
+__decorateClass([
+  property({ attribute: false })
+], OkPricingCard.prototype, "labels");
+define("ok-pricing-card", OkPricingCard);
+export {
+  OkPricingCard
+};