@eduardoalvarez/arrecife 0.2.0 → 0.3.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 (18) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +36 -1
  3. package/dist/brand/index.cjs +9 -8
  4. package/dist/brand/index.js +2 -2
  5. package/dist/{chunk-DHF63QNM.js → chunk-I7GYZD2A.js} +5 -5
  6. package/dist/{chunk-ZL5X6XO7.js → chunk-ND45OQOC.js} +5 -4
  7. package/dist/{chunk-22OXRTAL.js → chunk-VSMW2CT4.js} +1 -1
  8. package/dist/index.cjs +122 -121
  9. package/dist/index.js +118 -118
  10. package/dist/og/index.js +1 -1
  11. package/dist/shiki/index.js +1 -1
  12. package/dist/tokens/index.cjs +5 -5
  13. package/dist/tokens/index.d.cts +32 -10
  14. package/dist/tokens/index.d.ts +32 -10
  15. package/dist/tokens/index.js +2 -2
  16. package/dist/tokens/theme.css +5 -5
  17. package/llms.txt +27 -2
  18. package/package.json +5 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.3.0](https://github.com/Proskynete/arrecife/compare/v0.2.0...v0.3.0) (2026-08-31)
4
+
5
+
6
+ ### ⚠ BREAKING CHANGES
7
+
8
+ * **tokens:** los cinco escalones de espaciado se renombran. Los valores no cambian ni un píxel.
9
+
10
+ ### 🚀 Novedades
11
+
12
+ * **tokens:** el ritmo de página lleva step, para no comerse max-w-* ([1f8b79d](https://github.com/Proskynete/arrecife/commit/1f8b79d74b6e56b9c716ce2a1fdcee06042d78a0))
13
+
14
+
15
+ ### 📚 Documentación
16
+
17
+ * **agents:** cómo se sube la versión, para no editar el CHANGELOG a mano ([b6e3997](https://github.com/Proskynete/arrecife/commit/b6e3997cd8ab20e7e8e28383c1995dd449919cf8))
18
+ * del footer BREAKING CHANGE solo llega el primer párrafo ([807d891](https://github.com/Proskynete/arrecife/commit/807d891d018245a1050d135eb1688449d8ef2c2e))
19
+
3
20
  ## [0.2.0](https://github.com/Proskynete/arrecife/compare/v0.1.1...v0.2.0) (2026-08-27)
4
21
 
5
22
 
package/README.md CHANGED
@@ -64,9 +64,43 @@ mismo objeto `tokens`: la fuente no cambia.
64
64
  El modo oscuro es el primario y es el default. Un proyecto en modo claro declara
65
65
  `data-theme="light"` en `<html>`; uno oscuro no necesita declarar nada.
66
66
 
67
+ > **Vienes de la 0.2.0 o anterior.** Los cinco escalones de espaciado se
68
+ > renombraron: `p-md` es ahora `p-step-md`, `gap-sm` es `gap-step-sm`. Es un
69
+ > cambio incompatible, y si tu proyecto usa `max-w-sm`, `max-w-md` o `max-w-lg`,
70
+ > además te estaban valiendo 12, 16 y 26px sin que nada lo dijera. El porqué, el
71
+ > patrón de migración y qué revisar después están en
72
+ > [`docs/migracion-0.3.md`](docs/migracion-0.3.md).
73
+
67
74
  Las familias tipográficas se declaran por nombre. Cada proyecto carga Bricolage
68
75
  Grotesque, Geist y JetBrains Mono como prefiera: la librería no impone cómo.
69
76
 
77
+ **Los nombres tienen que coincidir EXACTAMENTE**, y esto ya ha mordido dos veces.
78
+ Los tokens declaran las familias así:
79
+
80
+ | Token | `font-family` que declara | Utilidad |
81
+ | --- | --- | --- |
82
+ | `fonts.display` | `"Bricolage Grotesque"` | `font-display` |
83
+ | `fonts.sans` | `"Geist"` | `font-sans` |
84
+ | `fonts.mono` | `"JetBrains Mono"` | `font-mono` |
85
+
86
+ Un proyecto que registre su `@font-face` como `"Bricolage Grotesque Variable"` o
87
+ `"Geist Variable"` —el nombre con el que las publican varios paquetes de fuentes—
88
+ **no** está cargando lo que los tokens piden: la display y la mono caen a la
89
+ fuente del sistema, en silencio y sin un aviso en consola. Es exactamente lo que
90
+ pasó en dos de los cinco proyectos.
91
+
92
+ El `family` del `@font-face` es un alias que elige el proyecto, así que la
93
+ solución es declararlo con el nombre que pide el token:
94
+
95
+ ```css
96
+ @font-face {
97
+ font-family: "Bricolage Grotesque"; /* NO "Bricolage Grotesque Variable" */
98
+ src: url("/fuentes/bricolage-grotesque.woff2") format("woff2-variations");
99
+ font-weight: 200 800;
100
+ font-display: swap;
101
+ }
102
+ ```
103
+
70
104
  ### Mapa de tokens a utilidades
71
105
 
72
106
  | Token | Custom property | Utilidad |
@@ -76,7 +110,8 @@ Grotesque, Geist y JetBrains Mono como prefiera: la librería no impone cómo.
76
110
  | `typeScale.h1` | `--text-h1` | `text-h1` (arrastra line-height, weight y tracking) |
77
111
  | `fonts.display` | `--font-display` | `font-display` |
78
112
  | `radius.card` | `--radius-card` | `rounded-card` |
79
- | `spacing.lg` | `--spacing-lg` | `p-lg`, `gap-lg`, `mb-lg` |
113
+ | `spacing.stepLg` | `--spacing-step-lg` | `p-step-lg`, `gap-step-lg`, `mb-step-lg` |
114
+ | `spacing.section` | `--spacing-section` | `py-section`, `mb-section` |
80
115
  | `control.md` | `--spacing-control-md` | `px-control-md` (padding de botón) |
81
116
  | `control.icon` | `--spacing-control-icon` | `size-control-icon` (botón de icono 42×42) |
82
117
  | `gradient[modo].hero` | `--gradient-hero` | `degradado-hero` (utilidad, sigue el modo) |
package/dist/brand/index.cjs CHANGED
@@ -109,21 +109,22 @@ var control = {
109
109
  icon: 42
110
110
  };
111
111
  var spacing = {
112
- xs: 8,
113
- sm: 12,
114
- md: 16,
115
- lg: 26,
116
- xl: 40,
112
+ stepXs: 8,
113
+ stepSm: 12,
114
+ stepMd: 16,
115
+ stepLg: 26,
116
+ stepXl: 40,
117
117
  section: 96
118
118
  };
119
119
  var naming = {
120
120
  wordmark: "Eduardo \xC1lvarez"};
121
121
 
122
122
  // src/lib/cn.ts
123
+ var kebab = (nombre) => nombre.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
123
124
  var escalas = Object.keys(typeScale);
124
125
  var radios = Object.keys(radius);
125
- var espacios = Object.keys(spacing);
126
- var controles = Object.keys(control).map((nombre) => `control-${nombre}`);
126
+ var espacios = Object.keys(spacing).map(kebab);
127
+ var controles = Object.keys(control).map((nombre) => `control-${kebab(nombre)}`);
127
128
  var twMerge = tailwindMerge.extendTailwindMerge({
128
129
  extend: {
129
130
  classGroups: {
@@ -167,7 +168,7 @@ function Logo({
167
168
  className,
168
169
  ...props
169
170
  }) {
170
- return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("gap-xs inline-flex items-center", className), ...props, children: [
171
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: [
171
172
  /* @__PURE__ */ jsxRuntime.jsx(
172
173
  Isotipo,
173
174
  {
package/dist/brand/index.js CHANGED
@@ -1,3 +1,3 @@
1
- export { CaraDeMascota, Isotipo, Logo, Mascota } from '../chunk-ZL5X6XO7.js';
1
+ export { CaraDeMascota, Isotipo, Logo, Mascota } from '../chunk-ND45OQOC.js';
2
2
  export { RUTA_ASSETS, aletas, caras, listaCaras, listaPoses, poses, usoDeCara } from '../chunk-E3OMP2DL.js';
3
- import '../chunk-DHF63QNM.js';
3
+ import '../chunk-I7GYZD2A.js';
package/dist/{chunk-DHF63QNM.js → chunk-I7GYZD2A.js} RENAMED
@@ -162,11 +162,11 @@ var control = {
162
162
  icon: 42
163
163
  };
164
164
  var spacing = {
165
- xs: 8,
166
- sm: 12,
167
- md: 16,
168
- lg: 26,
169
- xl: 40,
165
+ stepXs: 8,
166
+ stepSm: 12,
167
+ stepMd: 16,
168
+ stepLg: 26,
169
+ stepXl: 40,
170
170
  section: 96
171
171
  };
172
172
  var size = {
package/dist/{chunk-ZL5X6XO7.js → chunk-ND45OQOC.js} RENAMED
@@ -1,13 +1,14 @@
1
1
  import { aletas, RUTA_ASSETS, poses, caras } from './chunk-E3OMP2DL.js';
2
- import { control, spacing, radius, typeScale, naming } from './chunk-DHF63QNM.js';
2
+ import { spacing, control, radius, typeScale, naming } from './chunk-I7GYZD2A.js';
3
3
  import { clsx } from 'clsx';
4
4
  import { extendTailwindMerge } from 'tailwind-merge';
5
5
  import { jsx, jsxs } from 'react/jsx-runtime';
6
6
 
7
+ var kebab = (nombre) => nombre.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
7
8
  var escalas = Object.keys(typeScale);
8
9
  var radios = Object.keys(radius);
9
- var espacios = Object.keys(spacing);
10
- var controles = Object.keys(control).map((nombre) => `control-${nombre}`);
10
+ var espacios = Object.keys(spacing).map(kebab);
11
+ var controles = Object.keys(control).map((nombre) => `control-${kebab(nombre)}`);
11
12
  var twMerge = extendTailwindMerge({
12
13
  extend: {
13
14
  classGroups: {
@@ -51,7 +52,7 @@ function Logo({
51
52
  className,
52
53
  ...props
53
54
  }) {
54
- return /* @__PURE__ */ jsxs("span", { className: cn("gap-xs inline-flex items-center", className), ...props, children: [
55
+ return /* @__PURE__ */ jsxs("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: [
55
56
  /* @__PURE__ */ jsx(
56
57
  Isotipo,
57
58
  {
package/dist/{chunk-22OXRTAL.js → chunk-VSMW2CT4.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { naming, tagline, motion, shadow, sintaxis, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-DHF63QNM.js';
1
+ import { naming, tagline, motion, shadow, sintaxis, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-I7GYZD2A.js';
2
2
 
3
3
  // src/tokens/index.ts
4
4
  var tokens = {