@lit-roa/base 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,30 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @lit-roa/base
+
+Tokens de diseño, estilos y utilidades que comparten todos los componentes.
+Normalmente no se instala directo: llega como dependencia de cada componente.
+
+## Personalizar el diseño en un sitio
+
+Define las variables en el CSS global del sitio:
+
+```css
+:root {
+  --lr-color-primario: #0f766e;
+  --lr-color-sobre-primario: #ffffff;
+  --lr-radio: 0.25rem;
+  --lr-fuente: 'Inter', sans-serif;
+}
+```
+
+| Variable | Uso |
+| --- | --- |
+| `--lr-color-primario` | Botones y acentos |
+| `--lr-color-sobre-primario` | Texto sobre el color primario |
+| `--lr-color-texto` | Texto principal |
+| `--lr-color-texto-suave` | Texto secundario |
+| `--lr-color-fondo` | Fondo de tarjetas |
+| `--lr-color-borde` | Bordes |
+| `--lr-radio` | Redondeo de esquinas |
+| `--lr-espacio` | Espaciado base |
+| `--lr-fuente` | Tipografía |
+| `--lr-sombra` | Sombra de tarjetas |

package/dist/estilos.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Tokens de diseño. Cada sitio los cambia definiendo las variables
+ * `--lr-*` en su CSS global (por ejemplo en `:root`), sin tocar los
+ * componentes. Los valores de aquí son solo el respaldo.
+ */
+export declare const tokens: import("lit").CSSResult;
+/** Reinicio mínimo que comparten todos los componentes. */
+export declare const estilosBase: import("lit").CSSResult;
+//# sourceMappingURL=estilos.d.ts.map

package/dist/estilos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"estilos.d.ts","sourceRoot":"","sources":["../src/estilos.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,MAAM,yBAalB,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,WAAW,yBAcvB,CAAC"}

package/dist/estilos.js

@@ -0,0 +1,37 @@
+import { css } from 'lit';
+/**
+ * Tokens de diseño. Cada sitio los cambia definiendo las variables
+ * `--lr-*` en su CSS global (por ejemplo en `:root`), sin tocar los
+ * componentes. Los valores de aquí son solo el respaldo.
+ */
+export const tokens = css `
+  :host {
+    --_color-primario: var(--lr-color-primario, #1d4ed8);
+    --_color-sobre-primario: var(--lr-color-sobre-primario, #ffffff);
+    --_color-texto: var(--lr-color-texto, #111827);
+    --_color-texto-suave: var(--lr-color-texto-suave, #6b7280);
+    --_color-fondo: var(--lr-color-fondo, #ffffff);
+    --_color-borde: var(--lr-color-borde, #e5e7eb);
+    --_radio: var(--lr-radio, 0.75rem);
+    --_espacio: var(--lr-espacio, 1rem);
+    --_fuente: var(--lr-fuente, system-ui, sans-serif);
+    --_sombra: var(--lr-sombra, 0 1px 3px rgb(0 0 0 / 0.1));
+  }
+`;
+/** Reinicio mínimo que comparten todos los componentes. */
+export const estilosBase = css `
+  :host {
+    box-sizing: border-box;
+    font-family: var(--_fuente);
+    color: var(--_color-texto);
+  }
+  :host([hidden]) {
+    display: none;
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+`;
+//# sourceMappingURL=estilos.js.map

package/dist/estilos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"estilos.js","sourceRoot":"","sources":["../src/estilos.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAaxB,CAAC;AAEF,2DAA2D;AAC3D,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAc7B,CAAC"}

package/dist/eventos.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Lanza un evento propio que atraviesa el shadow DOM, para que el sitio
+ * (Angular, WordPress, etc.) lo escuche con `addEventListener` o
+ * `(nombre-evento)="..."` en Angular.
+ */
+export declare function emitir<T>(origen: HTMLElement, nombre: string, detalle?: T): boolean;
+//# sourceMappingURL=eventos.d.ts.map

package/dist/eventos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eventos.d.ts","sourceRoot":"","sources":["../src/eventos.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,GAAG,OAAO,CAInF"}

package/dist/eventos.js

@@ -0,0 +1,9 @@
+/**
+ * Lanza un evento propio que atraviesa el shadow DOM, para que el sitio
+ * (Angular, WordPress, etc.) lo escuche con `addEventListener` o
+ * `(nombre-evento)="..."` en Angular.
+ */
+export function emitir(origen, nombre, detalle) {
+    return origen.dispatchEvent(new CustomEvent(nombre, { detail: detalle, bubbles: true, composed: true, cancelable: true }));
+}
+//# sourceMappingURL=eventos.js.map

package/dist/eventos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eventos.js","sourceRoot":"","sources":["../src/eventos.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,MAAM,CAAI,MAAmB,EAAE,MAAc,EAAE,OAAW;IACxE,OAAO,MAAM,CAAC,aAAa,CACzB,IAAI,WAAW,CAAI,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CACjG,CAAC;AACJ,CAAC"}

package/dist/formato.d.ts

@@ -0,0 +1,3 @@
+/** Formatea una cantidad como precio, por omisión en pesos mexicanos. */
+export declare function formatearPrecio(cantidad: number, moneda?: string, idioma?: string): string;
+//# sourceMappingURL=formato.d.ts.map

package/dist/formato.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formato.d.ts","sourceRoot":"","sources":["../src/formato.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,SAAQ,EAAE,MAAM,SAAU,GAAG,MAAM,CAE1F"}

package/dist/formato.js

@@ -0,0 +1,5 @@
+/** Formatea una cantidad como precio, por omisión en pesos mexicanos. */
+export function formatearPrecio(cantidad, moneda = 'MXN', idioma = 'es-MX') {
+    return new Intl.NumberFormat(idioma, { style: 'currency', currency: moneda }).format(cantidad);
+}
+//# sourceMappingURL=formato.js.map

package/dist/formato.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formato.js","sourceRoot":"","sources":["../src/formato.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,MAAM,UAAU,eAAe,CAAC,QAAgB,EAAE,MAAM,GAAG,KAAK,EAAE,MAAM,GAAG,OAAO;IAChF,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACjG,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { tokens, estilosBase } from './estilos.js';
+export { formatearPrecio } from './formato.js';
+export { emitir } from './eventos.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { tokens, estilosBase } from './estilos.js';
+export { formatearPrecio } from './formato.js';
+export { emitir } from './eventos.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,26 @@
-{
-  "name": "@lit-roa/base",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@lit-roa/base",
+  "version": "0.1.0",
+  "description": "Tokens de diseño, estilos y utilidades compartidas por los componentes.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -b"
+  },
+  "dependencies": {
+    "lit": "^3.3.3"
+  },
+  "license": "MIT"
+}

package/src/estilos.ts

@@ -0,0 +1,38 @@
+import { css } from 'lit';
+
+/**
+ * Tokens de diseño. Cada sitio los cambia definiendo las variables
+ * `--lr-*` en su CSS global (por ejemplo en `:root`), sin tocar los
+ * componentes. Los valores de aquí son solo el respaldo.
+ */
+export const tokens = css`
+  :host {
+    --_color-primario: var(--lr-color-primario, #1d4ed8);
+    --_color-sobre-primario: var(--lr-color-sobre-primario, #ffffff);
+    --_color-texto: var(--lr-color-texto, #111827);
+    --_color-texto-suave: var(--lr-color-texto-suave, #6b7280);
+    --_color-fondo: var(--lr-color-fondo, #ffffff);
+    --_color-borde: var(--lr-color-borde, #e5e7eb);
+    --_radio: var(--lr-radio, 0.75rem);
+    --_espacio: var(--lr-espacio, 1rem);
+    --_fuente: var(--lr-fuente, system-ui, sans-serif);
+    --_sombra: var(--lr-sombra, 0 1px 3px rgb(0 0 0 / 0.1));
+  }
+`;
+
+/** Reinicio mínimo que comparten todos los componentes. */
+export const estilosBase = css`
+  :host {
+    box-sizing: border-box;
+    font-family: var(--_fuente);
+    color: var(--_color-texto);
+  }
+  :host([hidden]) {
+    display: none;
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+`;

package/src/eventos.ts

@@ -0,0 +1,10 @@
+/**
+ * Lanza un evento propio que atraviesa el shadow DOM, para que el sitio
+ * (Angular, WordPress, etc.) lo escuche con `addEventListener` o
+ * `(nombre-evento)="..."` en Angular.
+ */
+export function emitir<T>(origen: HTMLElement, nombre: string, detalle?: T): boolean {
+  return origen.dispatchEvent(
+    new CustomEvent<T>(nombre, { detail: detalle, bubbles: true, composed: true, cancelable: true }),
+  );
+}

package/src/formato.ts

@@ -0,0 +1,4 @@
+/** Formatea una cantidad como precio, por omisión en pesos mexicanos. */
+export function formatearPrecio(cantidad: number, moneda = 'MXN', idioma = 'es-MX'): string {
+  return new Intl.NumberFormat(idioma, { style: 'currency', currency: moneda }).format(cantidad);
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { tokens, estilosBase } from './estilos.js';
+export { formatearPrecio } from './formato.js';
+export { emitir } from './eventos.js';