@erplora/outfitkit 0.1.1

package/dist/ok-cta-band.js

@@ -0,0 +1,134 @@
+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 OkCtaBand extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "solid";
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      --primary: var(--ion-color-primary, #1496d6);
+      --primary-contrast: var(--ion-color-primary-contrast, #ffffff);
+      --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)));
+      --radius: var(--ok-radius-lg, 28px);
+      font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+    }
+    .band {
+      box-sizing: border-box;
+      position: relative;
+      overflow: hidden;
+      border-radius: var(--radius);
+      padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+    }
+    /* Sólido de marca (def): texto en contraste */
+    :host(:not([variant])) .band,
+    :host([variant='solid']) .band {
+      color: var(--primary-contrast);
+      background:
+        radial-gradient(80% 120% at 0% 0%, color-mix(in oklab, #fff 22%, transparent), transparent 60%),
+        radial-gradient(80% 120% at 100% 100%, color-mix(in oklab, #000 18%, transparent), transparent 55%),
+        linear-gradient(120deg, var(--primary), color-mix(in oklab, var(--primary) 60%, #6d28d9 40%));
+    }
+    :host([variant='solid']) .eyebrow,
+    :host(:not([variant])) .eyebrow { color: color-mix(in oklab, var(--primary-contrast) 85%, transparent); }
+    :host([variant='solid']) .sub,
+    :host(:not([variant])) .sub { color: color-mix(in oklab, var(--primary-contrast) 85%, transparent); }
+    /* Glass / sutil: hereda el color del tema */
+    :host([variant='soft']) .band {
+      color: var(--color);
+      background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 10%, var(--surface)),
+        color-mix(in oklab, var(--primary) 3%, var(--surface)));
+      border: 1px solid color-mix(in oklab, var(--primary) 22%, transparent);
+    }
+    :host([variant='glass']) .band {
+      color: var(--color);
+      background: color-mix(in oklab, var(--surface) 55%, transparent);
+      -webkit-backdrop-filter: blur(18px) saturate(1.4);
+      backdrop-filter: blur(18px) saturate(1.4);
+      border: 1px solid color-mix(in oklab, var(--color) 12%, transparent);
+    }
+    .eyebrow {
+      font-size: 0.74rem;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+    .title {
+      margin: 0;
+      font-size: clamp(1.7rem, 1.1rem + 2.8vw, 3rem);
+      line-height: 1.08;
+      letter-spacing: -0.03em;
+      font-weight: 680;
+      max-width: 22ch;
+    }
+    ::slotted([slot='heading']) {
+      margin: 0;
+      font-size: clamp(1.7rem, 1.1rem + 2.8vw, 3rem);
+      line-height: 1.08;
+      letter-spacing: -0.03em;
+      font-weight: 680;
+    }
+    .sub {
+      margin: 0;
+      font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
+      line-height: 1.5;
+      color: var(--muted);
+      max-width: 50ch;
+    }
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+      justify-content: center;
+      margin-top: 0.6rem;
+    }
+  `;
+  }
+  render() {
+    return html`
+      <div class="band">
+        ${this.eyebrow ? html`<span class="eyebrow">${this.eyebrow}</span>` : null}
+        ${this.heading ? html`<h2 class="title">${this.heading}</h2>` : html`<slot name="heading"></slot>`}
+        ${this.subheading ? html`<p class="sub">${this.subheading}</p>` : null}
+        <div class="actions"><slot name="actions"></slot></div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkCtaBand.prototype, "eyebrow");
+__decorateClass([
+  property()
+], OkCtaBand.prototype, "heading");
+__decorateClass([
+  property()
+], OkCtaBand.prototype, "subheading");
+__decorateClass([
+  property({ reflect: true })
+], OkCtaBand.prototype, "variant");
+define("ok-cta-band", OkCtaBand);
+export {
+  OkCtaBand
+};

package/dist/ok-currency.js

@@ -0,0 +1,172 @@
+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 OkCurrency extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.currency = "EUR";
+    this.locale = typeof navigator !== "undefined" && navigator.language || "es-ES";
+    this.placeholder = "";
+    this.display = "";
+    this.focused = false;
+  }
+  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);
+    }
+    .control {
+      --background: var(--background);
+      --color: var(--color);
+      --border-color: var(--border-color);
+      --border-radius: var(--border-radius);
+      --highlight-color-focused: var(--primary-color);
+      width: 100%;
+    }
+  `;
+  }
+  // Construye un formateador de moneda (símbolo + miles + 2 decimales) para el locale actual.
+  currencyFormatter() {
+    return new Intl.NumberFormat(this.locale, {
+      style: "currency",
+      currency: this.currency
+    });
+  }
+  // Devuelve el separador decimal del locale (',' o '.') usando Intl.
+  decimalSeparator() {
+    const parts = new Intl.NumberFormat(this.locale).formatToParts(1.1);
+    return parts.find((p) => p.type === "decimal")?.value ?? ".";
+  }
+  // Limpia el texto crudo dejando sólo dígitos y un único separador decimal.
+  sanitize(raw) {
+    const sep = this.decimalSeparator();
+    let out = "";
+    let hasSep = false;
+    for (const ch of raw) {
+      if (ch >= "0" && ch <= "9") out += ch;
+      else if (ch === sep && !hasSep) {
+        out += sep;
+        hasSep = true;
+      }
+    }
+    return out;
+  }
+  // Convierte el texto crudo (con separador del locale) a number. NaN si no hay número.
+  parse(raw) {
+    const sep = this.decimalSeparator();
+    const normalized = this.sanitize(raw).split(sep).join(".");
+    if (!normalized) return NaN;
+    return Number(normalized);
+  }
+  // Sincroniza el texto mostrado a partir del `value` cuando NO está enfocado.
+  syncDisplayFromValue() {
+    if (this.focused) return;
+    if (this.value == null || Number.isNaN(this.value)) {
+      this.display = "";
+      return;
+    }
+    this.display = this.currencyFormatter().format(this.value);
+  }
+  // Recalcula el display ante cambios de props relevantes (value/currency/locale).
+  willUpdate(changed) {
+    if ((changed.has("value") || changed.has("currency") || changed.has("locale")) && !this.focused) {
+      this.syncDisplayFromValue();
+    }
+  }
+  // Mientras escribe: filtra a dígitos + separador decimal y refleja el texto crudo.
+  onInput(e) {
+    const raw = e.detail?.value ?? "";
+    this.display = this.sanitize(String(raw));
+  }
+  // Al enfocar: muestra el número crudo (sin símbolo ni miles) para editar cómodamente.
+  onFocus() {
+    this.focused = true;
+    if (this.value != null && !Number.isNaN(this.value)) {
+      const sep = this.decimalSeparator();
+      this.display = String(this.value).split(".").join(sep);
+    } else {
+      this.display = "";
+    }
+  }
+  // Al perder el foco: parsea, reformatea con símbolo y emite `ok-change` si cambió.
+  onBlur() {
+    this.focused = false;
+    const parsed = this.parse(this.display);
+    if (Number.isNaN(parsed)) {
+      this.value = void 0;
+      this.display = "";
+    } else {
+      this.value = parsed;
+      this.display = this.currencyFormatter().format(parsed);
+    }
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail: { value: Number.isNaN(parsed) ? NaN : parsed },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html`
+      <ion-input
+        class="control"
+        fill="outline"
+        inputmode="decimal"
+        label=${this.label ?? ""}
+        label-placement=${this.label ? "stacked" : "fixed"}
+        placeholder=${this.placeholder}
+        .value=${this.display}
+        @ionInput=${this.onInput}
+        @ionFocus=${this.onFocus}
+        @ionBlur=${this.onBlur}
+      ></ion-input>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Number })
+], OkCurrency.prototype, "value");
+__decorateClass([
+  property()
+], OkCurrency.prototype, "currency");
+__decorateClass([
+  property()
+], OkCurrency.prototype, "locale");
+__decorateClass([
+  property()
+], OkCurrency.prototype, "placeholder");
+__decorateClass([
+  property()
+], OkCurrency.prototype, "label");
+__decorateClass([
+  state()
+], OkCurrency.prototype, "display");
+__decorateClass([
+  state()
+], OkCurrency.prototype, "focused");
+define("ok-currency", OkCurrency);
+export {
+  OkCurrency
+};