@lit-roa/base 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +30 -30
  2. package/dist/estilos.js +27 -27
  3. package/dist/iconos.d.ts +19 -0
  4. package/dist/iconos.d.ts.map +1 -0
  5. package/dist/iconos.js +21 -0
  6. package/dist/iconos.js.map +1 -0
  7. package/dist/index.d.ts +1 -0
  8. package/dist/index.d.ts.map +1 -1
  9. package/dist/index.js +1 -0
  10. package/dist/index.js.map +1 -1
  11. package/package.json +29 -26
  12. package/src/estilos.ts +38 -38
  13. package/src/eventos.ts +10 -10
  14. package/src/formato.ts +4 -4
  15. package/src/iconos.ts +21 -0
  16. package/src/index.ts +4 -3
package/README.md CHANGED
@@ -1,30 +1,30 @@
1
- # @lit-roa/base
2
-
3
- Tokens de diseño, estilos y utilidades que comparten todos los componentes.
4
- Normalmente no se instala directo: llega como dependencia de cada componente.
5
-
6
- ## Personalizar el diseño en un sitio
7
-
8
- Define las variables en el CSS global del sitio:
9
-
10
- ```css
11
- :root {
12
- --lr-color-primario: #0f766e;
13
- --lr-color-sobre-primario: #ffffff;
14
- --lr-radio: 0.25rem;
15
- --lr-fuente: 'Inter', sans-serif;
16
- }
17
- ```
18
-
19
- | Variable | Uso |
20
- | --- | --- |
21
- | `--lr-color-primario` | Botones y acentos |
22
- | `--lr-color-sobre-primario` | Texto sobre el color primario |
23
- | `--lr-color-texto` | Texto principal |
24
- | `--lr-color-texto-suave` | Texto secundario |
25
- | `--lr-color-fondo` | Fondo de tarjetas |
26
- | `--lr-color-borde` | Bordes |
27
- | `--lr-radio` | Redondeo de esquinas |
28
- | `--lr-espacio` | Espaciado base |
29
- | `--lr-fuente` | Tipografía |
30
- | `--lr-sombra` | Sombra de tarjetas |
1
+ # @lit-roa/base
2
+
3
+ Tokens de diseño, estilos y utilidades que comparten todos los componentes.
4
+ Normalmente no se instala directo: llega como dependencia de cada componente.
5
+
6
+ ## Personalizar el diseño en un sitio
7
+
8
+ Define las variables en el CSS global del sitio:
9
+
10
+ ```css
11
+ :root {
12
+ --lr-color-primario: #0f766e;
13
+ --lr-color-sobre-primario: #ffffff;
14
+ --lr-radio: 0.25rem;
15
+ --lr-fuente: 'Inter', sans-serif;
16
+ }
17
+ ```
18
+
19
+ | Variable | Uso |
20
+ | --- | --- |
21
+ | `--lr-color-primario` | Botones y acentos |
22
+ | `--lr-color-sobre-primario` | Texto sobre el color primario |
23
+ | `--lr-color-texto` | Texto principal |
24
+ | `--lr-color-texto-suave` | Texto secundario |
25
+ | `--lr-color-fondo` | Fondo de tarjetas |
26
+ | `--lr-color-borde` | Bordes |
27
+ | `--lr-radio` | Redondeo de esquinas |
28
+ | `--lr-espacio` | Espaciado base |
29
+ | `--lr-fuente` | Tipografía |
30
+ | `--lr-sombra` | Sombra de tarjetas |
package/dist/estilos.js CHANGED
@@ -4,34 +4,34 @@ import { css } from 'lit';
4
4
  * `--lr-*` en su CSS global (por ejemplo en `:root`), sin tocar los
5
5
  * componentes. Los valores de aquí son solo el respaldo.
6
6
  */
7
- export const tokens = css `
8
- :host {
9
- --_color-primario: var(--lr-color-primario, #1d4ed8);
10
- --_color-sobre-primario: var(--lr-color-sobre-primario, #ffffff);
11
- --_color-texto: var(--lr-color-texto, #111827);
12
- --_color-texto-suave: var(--lr-color-texto-suave, #6b7280);
13
- --_color-fondo: var(--lr-color-fondo, #ffffff);
14
- --_color-borde: var(--lr-color-borde, #e5e7eb);
15
- --_radio: var(--lr-radio, 0.75rem);
16
- --_espacio: var(--lr-espacio, 1rem);
17
- --_fuente: var(--lr-fuente, system-ui, sans-serif);
18
- --_sombra: var(--lr-sombra, 0 1px 3px rgb(0 0 0 / 0.1));
19
- }
7
+ export const tokens = css `
8
+ :host {
9
+ --_color-primario: var(--lr-color-primario, #1d4ed8);
10
+ --_color-sobre-primario: var(--lr-color-sobre-primario, #ffffff);
11
+ --_color-texto: var(--lr-color-texto, #111827);
12
+ --_color-texto-suave: var(--lr-color-texto-suave, #6b7280);
13
+ --_color-fondo: var(--lr-color-fondo, #ffffff);
14
+ --_color-borde: var(--lr-color-borde, #e5e7eb);
15
+ --_radio: var(--lr-radio, 0.75rem);
16
+ --_espacio: var(--lr-espacio, 1rem);
17
+ --_fuente: var(--lr-fuente, system-ui, sans-serif);
18
+ --_sombra: var(--lr-sombra, 0 1px 3px rgb(0 0 0 / 0.1));
19
+ }
20
20
  `;
21
21
  /** Reinicio mínimo que comparten todos los componentes. */
22
- export const estilosBase = css `
23
- :host {
24
- box-sizing: border-box;
25
- font-family: var(--_fuente);
26
- color: var(--_color-texto);
27
- }
28
- :host([hidden]) {
29
- display: none;
30
- }
31
- *,
32
- *::before,
33
- *::after {
34
- box-sizing: inherit;
35
- }
22
+ export const estilosBase = css `
23
+ :host {
24
+ box-sizing: border-box;
25
+ font-family: var(--_fuente);
26
+ color: var(--_color-texto);
27
+ }
28
+ :host([hidden]) {
29
+ display: none;
30
+ }
31
+ *,
32
+ *::before,
33
+ *::after {
34
+ box-sizing: inherit;
35
+ }
36
36
  `;
37
37
  //# sourceMappingURL=estilos.js.map
package/dist/iconos.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ export declare const iconoBrandFacebook: import("lit-html").TemplateResult<1>;
2
+ export declare const iconoBrandInstagram: import("lit-html").TemplateResult<1>;
3
+ export declare const iconoBrandLinkedin: import("lit-html").TemplateResult<1>;
4
+ export declare const iconoBrandPinterest: import("lit-html").TemplateResult<1>;
5
+ export declare const iconoBrandTelegram: import("lit-html").TemplateResult<1>;
6
+ export declare const iconoBrandTiktok: import("lit-html").TemplateResult<1>;
7
+ export declare const iconoBrandWhatsapp: import("lit-html").TemplateResult<1>;
8
+ export declare const iconoBrandX: import("lit-html").TemplateResult<1>;
9
+ export declare const iconoBrandYoutube: import("lit-html").TemplateResult<1>;
10
+ export declare const iconoChevronDown: import("lit-html").TemplateResult<1>;
11
+ export declare const iconoClock: import("lit-html").TemplateResult<1>;
12
+ export declare const iconoMail: import("lit-html").TemplateResult<1>;
13
+ export declare const iconoMapPin: import("lit-html").TemplateResult<1>;
14
+ export declare const iconoMenu2: import("lit-html").TemplateResult<1>;
15
+ export declare const iconoPhone: import("lit-html").TemplateResult<1>;
16
+ export declare const iconoShoppingCart: import("lit-html").TemplateResult<1>;
17
+ export declare const iconoUser: import("lit-html").TemplateResult<1>;
18
+ export declare const iconoX: import("lit-html").TemplateResult<1>;
19
+ //# sourceMappingURL=iconos.d.ts.map
package/dist/iconos.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"iconos.d.ts","sourceRoot":"","sources":["../src/iconos.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,sCAAkW,CAAC;AAClY,eAAO,MAAM,mBAAmB,sCAAyb,CAAC;AAC1d,eAAO,MAAM,kBAAkB,sCAA8c,CAAC;AAC9e,eAAO,MAAM,mBAAmB,sCAAkb,CAAC;AACnd,eAAO,MAAM,kBAAkB,sCAAkU,CAAC;AAClW,eAAO,MAAM,gBAAgB,sCAAma,CAAC;AACjc,eAAO,MAAM,kBAAkB,sCAAgb,CAAC;AAChd,eAAO,MAAM,WAAW,sCAA0X,CAAC;AACnZ,eAAO,MAAM,iBAAiB,sCAAsY,CAAC;AACra,eAAO,MAAM,gBAAgB,sCAAuS,CAAC;AACrU,eAAO,MAAM,UAAU,sCAAsV,CAAC;AAC9W,eAAO,MAAM,SAAS,sCAAkY,CAAC;AACzZ,eAAO,MAAM,WAAW,sCAAwZ,CAAC;AACjb,eAAO,MAAM,UAAU,sCAAiV,CAAC;AACzW,eAAO,MAAM,UAAU,sCAA8X,CAAC;AACtZ,eAAO,MAAM,iBAAiB,sCAAya,CAAC;AACxc,eAAO,MAAM,SAAS,sCAAiX,CAAC;AACxY,eAAO,MAAM,MAAM,sCAA6T,CAAC"}
package/dist/iconos.js ADDED
@@ -0,0 +1,21 @@
1
+ // Archivo generado por scripts/iconos.mjs a partir de @tabler/icons (MIT). No editar a mano.
2
+ import { html } from 'lit';
3
+ export const iconoBrandFacebook = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg>`;
4
+ export const iconoBrandInstagram = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10" /><path d="M8.5 12a3.5 3.5 0 1 0 7 0a3.5 3.5 0 0 0 -7 0" /><path d="M17 7v.01" /></svg>`;
5
+ export const iconoBrandLinkedin = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M8 11v5" /><path d="M8 8v.01" /><path d="M12 16v-5" /><path d="M16 16v-3a2 2 0 1 0 -4 0" /><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10" /></svg>`;
6
+ export const iconoBrandPinterest = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M8 20l4 -9" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg>`;
7
+ export const iconoBrandTelegram = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" /></svg>`;
8
+ export const iconoBrandTiktok = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M21 7.917v4.034a9.948 9.948 0 0 1 -5 -1.951v4.5a6.5 6.5 0 1 1 -8 -6.326v4.326a2.5 2.5 0 1 0 4 2v-11.5h4.083a6.005 6.005 0 0 0 4.917 4.917" /></svg>`;
9
+ export const iconoBrandWhatsapp = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></svg>`;
10
+ export const iconoBrandX = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 4l11.733 16h4.267l-11.733 -16l-4.267 0" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg>`;
11
+ export const iconoBrandYoutube = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8" /><path d="M10 9l5 3l-5 3l0 -6" /></svg>`;
12
+ export const iconoChevronDown = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 9l6 6l6 -6" /></svg>`;
13
+ export const iconoClock = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 7v5l3 3" /></svg>`;
14
+ export const iconoMail = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 7l9 6l9 -6" /></svg>`;
15
+ export const iconoMapPin = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0" /></svg>`;
16
+ export const iconoMenu2 = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 6l16 0" /><path d="M4 12l16 0" /><path d="M4 18l16 0" /></svg>`;
17
+ export const iconoPhone = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>`;
18
+ export const iconoShoppingCart = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M15 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M17 17h-11v-14h-2" /><path d="M6 5l14 1l-1 7h-13" /></svg>`;
19
+ export const iconoUser = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>`;
20
+ export const iconoX = html `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>`;
21
+ //# sourceMappingURL=iconos.js.map
package/dist/iconos.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"iconos.js","sourceRoot":"","sources":["../src/iconos.ts"],"names":[],"mappings":"AAAA,6FAA6F;AAC7F,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAA,2VAA2V,CAAC;AAClY,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,CAAA,kbAAkb,CAAC;AAC1d,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAA,ucAAuc,CAAC;AAC9e,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,CAAA,2aAA2a,CAAC;AACnd,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAA,2TAA2T,CAAC;AAClW,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAA,4ZAA4Z,CAAC;AACjc,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAA,yaAAya,CAAC;AAChd,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAA,mXAAmX,CAAC;AACnZ,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAA,+XAA+X,CAAC;AACra,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAA,gSAAgS,CAAC;AACrU,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAA,+UAA+U,CAAC;AAC9W,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA,2XAA2X,CAAC;AACzZ,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAA,iZAAiZ,CAAC;AACjb,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAA,0UAA0U,CAAC;AACzW,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAA,uXAAuX,CAAC;AACtZ,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAA,kaAAka,CAAC;AACxc,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA,0WAA0W,CAAC;AACxY,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,CAAA,sTAAsT,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { tokens, estilosBase } from './estilos.js';
2
2
  export { formatearPrecio } from './formato.js';
3
3
  export { emitir } from './eventos.js';
4
+ export * from './iconos.js';
4
5
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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;AACtC,cAAc,aAAa,CAAC"}
package/dist/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { tokens, estilosBase } from './estilos.js';
2
2
  export { formatearPrecio } from './formato.js';
3
3
  export { emitir } from './eventos.js';
4
+ export * from './iconos.js';
4
5
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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"}
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;AACtC,cAAc,aAAa,CAAC"}
package/package.json CHANGED
@@ -1,26 +1,29 @@
1
- {
2
- "name": "@lit-roa/base",
3
- "version": "0.1.0",
4
- "description": "Tokens de diseño, estilos y utilidades compartidas por los componentes.",
5
- "type": "module",
6
- "main": "./dist/index.js",
7
- "types": "./dist/index.d.ts",
8
- "exports": {
9
- ".": {
10
- "types": "./dist/index.d.ts",
11
- "default": "./dist/index.js"
12
- }
13
- },
14
- "files": [
15
- "dist",
16
- "src"
17
- ],
18
- "sideEffects": false,
19
- "scripts": {
20
- "build": "tsc -b"
21
- },
22
- "dependencies": {
23
- "lit": "^3.3.3"
24
- },
25
- "license": "MIT"
26
- }
1
+ {
2
+ "name": "@lit-roa/base",
3
+ "version": "0.2.0",
4
+ "description": "Tokens de diseño, estilos y utilidades compartidas por los componentes.",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "types": "./dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "default": "./dist/index.js"
12
+ }
13
+ },
14
+ "files": [
15
+ "dist",
16
+ "src"
17
+ ],
18
+ "sideEffects": false,
19
+ "scripts": {
20
+ "build": "tsc -b"
21
+ },
22
+ "dependencies": {
23
+ "lit": "^3.3.3"
24
+ },
25
+ "license": "MIT",
26
+ "devDependencies": {
27
+ "@tabler/icons": "^3.50.0"
28
+ }
29
+ }
package/src/estilos.ts CHANGED
@@ -1,38 +1,38 @@
1
- import { css } from 'lit';
2
-
3
- /**
4
- * Tokens de diseño. Cada sitio los cambia definiendo las variables
5
- * `--lr-*` en su CSS global (por ejemplo en `:root`), sin tocar los
6
- * componentes. Los valores de aquí son solo el respaldo.
7
- */
8
- export const tokens = css`
9
- :host {
10
- --_color-primario: var(--lr-color-primario, #1d4ed8);
11
- --_color-sobre-primario: var(--lr-color-sobre-primario, #ffffff);
12
- --_color-texto: var(--lr-color-texto, #111827);
13
- --_color-texto-suave: var(--lr-color-texto-suave, #6b7280);
14
- --_color-fondo: var(--lr-color-fondo, #ffffff);
15
- --_color-borde: var(--lr-color-borde, #e5e7eb);
16
- --_radio: var(--lr-radio, 0.75rem);
17
- --_espacio: var(--lr-espacio, 1rem);
18
- --_fuente: var(--lr-fuente, system-ui, sans-serif);
19
- --_sombra: var(--lr-sombra, 0 1px 3px rgb(0 0 0 / 0.1));
20
- }
21
- `;
22
-
23
- /** Reinicio mínimo que comparten todos los componentes. */
24
- export const estilosBase = css`
25
- :host {
26
- box-sizing: border-box;
27
- font-family: var(--_fuente);
28
- color: var(--_color-texto);
29
- }
30
- :host([hidden]) {
31
- display: none;
32
- }
33
- *,
34
- *::before,
35
- *::after {
36
- box-sizing: inherit;
37
- }
38
- `;
1
+ import { css } from 'lit';
2
+
3
+ /**
4
+ * Tokens de diseño. Cada sitio los cambia definiendo las variables
5
+ * `--lr-*` en su CSS global (por ejemplo en `:root`), sin tocar los
6
+ * componentes. Los valores de aquí son solo el respaldo.
7
+ */
8
+ export const tokens = css`
9
+ :host {
10
+ --_color-primario: var(--lr-color-primario, #1d4ed8);
11
+ --_color-sobre-primario: var(--lr-color-sobre-primario, #ffffff);
12
+ --_color-texto: var(--lr-color-texto, #111827);
13
+ --_color-texto-suave: var(--lr-color-texto-suave, #6b7280);
14
+ --_color-fondo: var(--lr-color-fondo, #ffffff);
15
+ --_color-borde: var(--lr-color-borde, #e5e7eb);
16
+ --_radio: var(--lr-radio, 0.75rem);
17
+ --_espacio: var(--lr-espacio, 1rem);
18
+ --_fuente: var(--lr-fuente, system-ui, sans-serif);
19
+ --_sombra: var(--lr-sombra, 0 1px 3px rgb(0 0 0 / 0.1));
20
+ }
21
+ `;
22
+
23
+ /** Reinicio mínimo que comparten todos los componentes. */
24
+ export const estilosBase = css`
25
+ :host {
26
+ box-sizing: border-box;
27
+ font-family: var(--_fuente);
28
+ color: var(--_color-texto);
29
+ }
30
+ :host([hidden]) {
31
+ display: none;
32
+ }
33
+ *,
34
+ *::before,
35
+ *::after {
36
+ box-sizing: inherit;
37
+ }
38
+ `;
package/src/eventos.ts CHANGED
@@ -1,10 +1,10 @@
1
- /**
2
- * Lanza un evento propio que atraviesa el shadow DOM, para que el sitio
3
- * (Angular, WordPress, etc.) lo escuche con `addEventListener` o
4
- * `(nombre-evento)="..."` en Angular.
5
- */
6
- export function emitir<T>(origen: HTMLElement, nombre: string, detalle?: T): boolean {
7
- return origen.dispatchEvent(
8
- new CustomEvent<T>(nombre, { detail: detalle, bubbles: true, composed: true, cancelable: true }),
9
- );
10
- }
1
+ /**
2
+ * Lanza un evento propio que atraviesa el shadow DOM, para que el sitio
3
+ * (Angular, WordPress, etc.) lo escuche con `addEventListener` o
4
+ * `(nombre-evento)="..."` en Angular.
5
+ */
6
+ export function emitir<T>(origen: HTMLElement, nombre: string, detalle?: T): boolean {
7
+ return origen.dispatchEvent(
8
+ new CustomEvent<T>(nombre, { detail: detalle, bubbles: true, composed: true, cancelable: true }),
9
+ );
10
+ }
package/src/formato.ts CHANGED
@@ -1,4 +1,4 @@
1
- /** Formatea una cantidad como precio, por omisión en pesos mexicanos. */
2
- export function formatearPrecio(cantidad: number, moneda = 'MXN', idioma = 'es-MX'): string {
3
- return new Intl.NumberFormat(idioma, { style: 'currency', currency: moneda }).format(cantidad);
4
- }
1
+ /** Formatea una cantidad como precio, por omisión en pesos mexicanos. */
2
+ export function formatearPrecio(cantidad: number, moneda = 'MXN', idioma = 'es-MX'): string {
3
+ return new Intl.NumberFormat(idioma, { style: 'currency', currency: moneda }).format(cantidad);
4
+ }
package/src/iconos.ts ADDED
@@ -0,0 +1,21 @@
1
+ // Archivo generado por scripts/iconos.mjs a partir de @tabler/icons (MIT). No editar a mano.
2
+ import { html } from 'lit';
3
+
4
+ export const iconoBrandFacebook = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg>`;
5
+ export const iconoBrandInstagram = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10" /><path d="M8.5 12a3.5 3.5 0 1 0 7 0a3.5 3.5 0 0 0 -7 0" /><path d="M17 7v.01" /></svg>`;
6
+ export const iconoBrandLinkedin = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M8 11v5" /><path d="M8 8v.01" /><path d="M12 16v-5" /><path d="M16 16v-3a2 2 0 1 0 -4 0" /><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10" /></svg>`;
7
+ export const iconoBrandPinterest = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M8 20l4 -9" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg>`;
8
+ export const iconoBrandTelegram = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" /></svg>`;
9
+ export const iconoBrandTiktok = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M21 7.917v4.034a9.948 9.948 0 0 1 -5 -1.951v4.5a6.5 6.5 0 1 1 -8 -6.326v4.326a2.5 2.5 0 1 0 4 2v-11.5h4.083a6.005 6.005 0 0 0 4.917 4.917" /></svg>`;
10
+ export const iconoBrandWhatsapp = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></svg>`;
11
+ export const iconoBrandX = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 4l11.733 16h4.267l-11.733 -16l-4.267 0" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg>`;
12
+ export const iconoBrandYoutube = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8" /><path d="M10 9l5 3l-5 3l0 -6" /></svg>`;
13
+ export const iconoChevronDown = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 9l6 6l6 -6" /></svg>`;
14
+ export const iconoClock = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 7v5l3 3" /></svg>`;
15
+ export const iconoMail = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 7l9 6l9 -6" /></svg>`;
16
+ export const iconoMapPin = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0" /></svg>`;
17
+ export const iconoMenu2 = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 6l16 0" /><path d="M4 12l16 0" /><path d="M4 18l16 0" /></svg>`;
18
+ export const iconoPhone = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>`;
19
+ export const iconoShoppingCart = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M15 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M17 17h-11v-14h-2" /><path d="M6 5l14 1l-1 7h-13" /></svg>`;
20
+ export const iconoUser = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>`;
21
+ export const iconoX = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>`;
package/src/index.ts CHANGED
@@ -1,3 +1,4 @@
1
- export { tokens, estilosBase } from './estilos.js';
2
- export { formatearPrecio } from './formato.js';
3
- export { emitir } from './eventos.js';
1
+ export { tokens, estilosBase } from './estilos.js';
2
+ export { formatearPrecio } from './formato.js';
3
+ export { emitir } from './eventos.js';
4
+ export * from './iconos.js';