@eduardoalvarez/arrecife 0.1.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 (44) hide show
  1. package/CHANGELOG.md +55 -0
  2. package/LICENSE +21 -0
  3. package/README.md +520 -0
  4. package/assets/brand/face-annoyed.png +0 -0
  5. package/assets/brand/face-confused.png +0 -0
  6. package/assets/brand/face-hearts.png +0 -0
  7. package/assets/brand/face-laughing.png +0 -0
  8. package/assets/brand/face-shades.png +0 -0
  9. package/assets/brand/face-waiting.png +0 -0
  10. package/assets/brand/face-wink.png +0 -0
  11. package/assets/brand/fin-foam.png +0 -0
  12. package/assets/brand/fin.png +0 -0
  13. package/assets/brand/pose-desk.png +0 -0
  14. package/assets/brand/pose-laptop-coffee.png +0 -0
  15. package/assets/brand/pose-peek.png +0 -0
  16. package/assets/brand/pose-surf.png +0 -0
  17. package/dist/brand/index.cjs +228 -0
  18. package/dist/brand/index.d.cts +63 -0
  19. package/dist/brand/index.d.ts +63 -0
  20. package/dist/brand/index.js +3 -0
  21. package/dist/catalogo-Du5ID-Hi.d.cts +77 -0
  22. package/dist/catalogo-Du5ID-Hi.d.ts +77 -0
  23. package/dist/chunk-22OXRTAL.js +22 -0
  24. package/dist/chunk-DHF63QNM.js +231 -0
  25. package/dist/chunk-E3OMP2DL.js +36 -0
  26. package/dist/chunk-ZL5X6XO7.js +102 -0
  27. package/dist/index.cjs +3191 -0
  28. package/dist/index.d.cts +1024 -0
  29. package/dist/index.d.ts +1024 -0
  30. package/dist/index.js +2624 -0
  31. package/dist/og/index.cjs +322 -0
  32. package/dist/og/index.d.cts +164 -0
  33. package/dist/og/index.d.ts +164 -0
  34. package/dist/og/index.js +242 -0
  35. package/dist/shiki/index.cjs +127 -0
  36. package/dist/shiki/index.d.cts +16 -0
  37. package/dist/shiki/index.d.ts +16 -0
  38. package/dist/shiki/index.js +95 -0
  39. package/dist/tokens/index.cjs +263 -0
  40. package/dist/tokens/index.d.cts +623 -0
  41. package/dist/tokens/index.d.ts +623 -0
  42. package/dist/tokens/index.js +2 -0
  43. package/dist/tokens/theme.css +266 -0
  44. package/package.json +128 -0
package/dist/tokens/theme.css ADDED
@@ -0,0 +1,266 @@
1
+ /*
2
+ * GENERADO por scripts/build-tokens.mjs desde src/tokens/tokens.ts.
3
+ * No lo edites a mano: se regenera en cada build.
4
+ *
5
+ * Uso en un proyecto Tailwind v4:
6
+ * @import "tailwindcss";
7
+ * @import "@eduardoalvarez/arrecife/tokens/theme.css";
8
+ *
9
+ * El modo oscuro es el primario y es el default. Un proyecto en modo claro
10
+ * declara data-theme="light" en <html>.
11
+ *
12
+ * Las familias tipográficas se declaran por nombre: el proyecto carga
13
+ * Bricolage Grotesque, Geist y JetBrains Mono como prefiera.
14
+ */
15
+
16
+ /* El modo se elige con data-theme. El oscuro es el primario, así que es el
17
+ default: un proyecto claro declara data-theme="light" en <html>. */
18
+ @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
19
+ @custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
20
+
21
+ @theme {
22
+ /* --- color · modo oscuro (default) ------------------------------------ */
23
+ --color-background: #091319;
24
+ --color-surface: #10202B;
25
+ --color-surface-raised: #17303E;
26
+ --color-border: #22414F;
27
+ --color-hairline: #1E3441;
28
+ --color-hairline-hover: #2C4D5D;
29
+ --color-text-primary: #EDF4F3;
30
+ --color-text-secondary: #A7BCC4;
31
+ --color-text-muted: #71919C;
32
+ --color-accent: #35D6C0;
33
+ --color-accent-hover: #5FE3D1;
34
+ --color-accent-on: #06171A;
35
+ --color-warm: #F2A65A;
36
+ --color-warm-hover: #F7BB7D;
37
+ --color-warm-on: #2A1605;
38
+ --color-success: #4FB477;
39
+ --color-warning: #E8A33D;
40
+ --color-error: #E15757;
41
+
42
+ /* --- marca · iguales en los dos modos ---------------------------------- */
43
+ --color-brand-body: #3E7CB1;
44
+ --color-brand-spots: #C2D7E7;
45
+ --color-brand-hull: #0B1524;
46
+
47
+ /* --- tipografía --------------------------------------------------------- */
48
+ --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
49
+ --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
50
+ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
51
+
52
+ --text-display: 76px;
53
+ --text-display--line-height: 0.96;
54
+ --text-display--font-weight: 800;
55
+ --text-display--letter-spacing: -0.035em;
56
+ --text-stat: 46px;
57
+ --text-stat--line-height: 1;
58
+ --text-stat--font-weight: 800;
59
+ --text-stat--letter-spacing: -0.035em;
60
+ --text-h1: 44px;
61
+ --text-h1--line-height: 1.05;
62
+ --text-h1--font-weight: 700;
63
+ --text-h1--letter-spacing: -0.03em;
64
+ --text-h2: 30px;
65
+ --text-h2--line-height: 1.1;
66
+ --text-h2--font-weight: 600;
67
+ --text-h2--letter-spacing: -0.02em;
68
+ --text-h3: 25px;
69
+ --text-h3--line-height: 1.15;
70
+ --text-h3--font-weight: 600;
71
+ --text-h3--letter-spacing: -0.02em;
72
+ --text-body: 18px;
73
+ --text-body--line-height: 1.75;
74
+ --text-body--font-weight: 400;
75
+ --text-lead: 17px;
76
+ --text-lead--line-height: 1.5;
77
+ --text-lead--font-weight: 400;
78
+ --text-ui: 15px;
79
+ --text-ui--line-height: 1.6;
80
+ --text-ui--font-weight: 400;
81
+ --text-label: 13px;
82
+ --text-label--line-height: 1.5;
83
+ --text-label--font-weight: 500;
84
+ --text-tag: 12.5px;
85
+ --text-tag--line-height: 1.4;
86
+ --text-tag--font-weight: 500;
87
+ --text-chip: 11.5px;
88
+ --text-chip--line-height: 1.4;
89
+ --text-chip--font-weight: 400;
90
+ --text-meta: 13px;
91
+ --text-meta--line-height: 1.6;
92
+ --text-meta--font-weight: 400;
93
+ --text-eyebrow: 12px;
94
+ --text-eyebrow--letter-spacing: 0.12em;
95
+
96
+ /* --- forma y ritmo ------------------------------------------------------ */
97
+ --radius-chip: 6px;
98
+ --radius-control: 10px;
99
+ --radius-card: 14px;
100
+ --radius-panel: 16px;
101
+ --radius-pill: 999px;
102
+
103
+ --spacing-xs: 8px;
104
+ --spacing-sm: 12px;
105
+ --spacing-md: 16px;
106
+ --spacing-lg: 26px;
107
+ --spacing-xl: 40px;
108
+ --spacing-section: 96px;
109
+
110
+ --spacing-control-sm: 14px;
111
+ --spacing-control-md: 22px;
112
+ --spacing-control-lg: 30px;
113
+ --spacing-control-icon: 42px;
114
+
115
+ --spacing-nav: 64px;
116
+ --container-content: 760px;
117
+ --container-wide: 1180px;
118
+ --container-measure: 68ch;
119
+
120
+ --shadow-standard: 0 1px 2px rgba(0, 0, 0, 0.35);
121
+
122
+ --duration-standard: 150ms;
123
+ --ease-standard: ease-out;
124
+
125
+ /* --- degradados · modo oscuro (default) --------------------------------- */
126
+ --gradient-hero: linear-gradient(160deg, #091319 60%, #0D2129 100%);
127
+ --gradient-seccion: linear-gradient(150deg, #10202B 0%, #0D2129 100%);
128
+ --gradient-og: linear-gradient(145deg, #091319 55%, #0D2129 100%);
129
+ }
130
+
131
+ /* --- color por modo, anidable ---------------------------------------------
132
+ Los dos modos se emiten como bloques propios, no solo el claro. Así un
133
+ subárbol puede declarar el modo contrario al de la página y todo lo de dentro
134
+ lo respeta: es lo que necesita un bloque de código, que va sobre casco en los
135
+ dos temas y por tanto siempre lleva tinta clara encima. */
136
+ [data-theme='dark'] {
137
+ --color-background: #091319;
138
+ --color-surface: #10202B;
139
+ --color-surface-raised: #17303E;
140
+ --color-border: #22414F;
141
+ --color-hairline: #1E3441;
142
+ --color-hairline-hover: #2C4D5D;
143
+ --color-text-primary: #EDF4F3;
144
+ --color-text-secondary: #A7BCC4;
145
+ --color-text-muted: #71919C;
146
+ --color-accent: #35D6C0;
147
+ --color-accent-hover: #5FE3D1;
148
+ --color-accent-on: #06171A;
149
+ --color-warm: #F2A65A;
150
+ --color-warm-hover: #F7BB7D;
151
+ --color-warm-on: #2A1605;
152
+ --color-success: #4FB477;
153
+ --color-warning: #E8A33D;
154
+ --color-error: #E15757;
155
+
156
+ --gradient-hero: linear-gradient(160deg, #091319 60%, #0D2129 100%);
157
+ --gradient-seccion: linear-gradient(150deg, #10202B 0%, #0D2129 100%);
158
+ --gradient-og: linear-gradient(145deg, #091319 55%, #0D2129 100%);
159
+ }
160
+
161
+ [data-theme='light'] {
162
+ --color-background: #F6F2EA;
163
+ --color-surface: #FFFFFF;
164
+ --color-surface-raised: #EFE9DE;
165
+ --color-border: #E6DFD2;
166
+ --color-hairline: #EBE6DC;
167
+ --color-hairline-hover: #D3C8B2;
168
+ --color-text-primary: #0B1524;
169
+ --color-text-secondary: #3D4B58;
170
+ --color-text-muted: #626A75;
171
+ --color-accent: #0D7C6F;
172
+ --color-accent-hover: #0C7466;
173
+ --color-accent-on: #FFFFFF;
174
+ --color-warm: #A65B27;
175
+ --color-warm-hover: #96511F;
176
+ --color-warm-on: #FFF7EE;
177
+ --color-success: #0F6B52;
178
+ --color-warning: #8D6111;
179
+ --color-error: #C0392B;
180
+
181
+ --gradient-hero: linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%);
182
+ --gradient-seccion: linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%);
183
+ --gradient-og: linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%);
184
+ }
185
+
186
+ /* --- los dos degradados del sistema, como utilidad --------------------------
187
+ Son los dos únicos bloques con degradado: el hero y el panel de sección. Que
188
+ sean utilidades y no clases arbitrarias es lo que impide que cada proyecto
189
+ escriba su propio ángulo. Siguen el modo porque leen la custom property. */
190
+ @utility degradado-hero {
191
+ background-image: var(--gradient-hero);
192
+ }
193
+ @utility degradado-seccion {
194
+ background-image: var(--gradient-seccion);
195
+ }
196
+
197
+ /* --- la tercera excepción de movimiento: el shimmer del skeleton ------------
198
+ El sistema no anima, y esta es la tercera y última salvedad, junto al spinner
199
+ del botón y el panel lateral. Todas son realimentación de PROGRESO, no de
200
+ estado: un bloque quieto y un bloque que nunca va a cargar se ven igual.
201
+
202
+ 1.4s lineal, del documento. Va detrás de motion-safe en el componente. */
203
+ @keyframes arrecife-shimmer {
204
+ from { background-position: 200% 0; }
205
+ to { background-position: -200% 0; }
206
+ }
207
+
208
+ @utility shimmer {
209
+ background-image: linear-gradient(
210
+ 90deg,
211
+ transparent 0%,
212
+ var(--color-hairline-hover) 50%,
213
+ transparent 100%
214
+ );
215
+ background-size: 200% 100%;
216
+ animation: arrecife-shimmer 1.4s linear infinite;
217
+ }
218
+
219
+ /* --- la excepción del panel lateral -----------------------------------------
220
+ Un panel que entra desde un borde se desliza por definición: quieto sería un
221
+ modal descentrado. Es la segunda y última excepción a "nada de
222
+ desplazamiento", y se aprobó a sabiendas.
223
+
224
+ Dura lo que dura todo lo demás y usa la misma curva, así que no introduce un
225
+ tiempo nuevo. En el componente va detrás de motion-safe. */
226
+ @keyframes arrecife-entra-derecha { from { translate: 100% 0; } }
227
+ @keyframes arrecife-sale-derecha { to { translate: 100% 0; } }
228
+ @keyframes arrecife-entra-izquierda { from { translate: -100% 0; } }
229
+ @keyframes arrecife-sale-izquierda { to { translate: -100% 0; } }
230
+ @keyframes arrecife-entra-arriba { from { translate: 0 -100%; } }
231
+ @keyframes arrecife-sale-arriba { to { translate: 0 -100%; } }
232
+ @keyframes arrecife-entra-abajo { from { translate: 0 100%; } }
233
+ @keyframes arrecife-sale-abajo { to { translate: 0 100%; } }
234
+
235
+ @utility deslizar-entra-derecha {
236
+ animation: arrecife-entra-derecha var(--duration-standard) var(--ease-standard);
237
+ }
238
+ @utility deslizar-sale-derecha {
239
+ animation: arrecife-sale-derecha var(--duration-standard) var(--ease-standard);
240
+ }
241
+ @utility deslizar-entra-izquierda {
242
+ animation: arrecife-entra-izquierda var(--duration-standard) var(--ease-standard);
243
+ }
244
+ @utility deslizar-sale-izquierda {
245
+ animation: arrecife-sale-izquierda var(--duration-standard) var(--ease-standard);
246
+ }
247
+ @utility deslizar-entra-arriba {
248
+ animation: arrecife-entra-arriba var(--duration-standard) var(--ease-standard);
249
+ }
250
+ @utility deslizar-sale-arriba {
251
+ animation: arrecife-sale-arriba var(--duration-standard) var(--ease-standard);
252
+ }
253
+ @utility deslizar-entra-abajo {
254
+ animation: arrecife-entra-abajo var(--duration-standard) var(--ease-standard);
255
+ }
256
+ @utility deslizar-sale-abajo {
257
+ animation: arrecife-sale-abajo var(--duration-standard) var(--ease-standard);
258
+ }
259
+
260
+ /* La única transición del sistema, como utilidad. Los estados se comunican con
261
+ borde y color, no con movimiento: esta clase no puede animar otra cosa. */
262
+ @utility transition-standard {
263
+ transition-property: color, background-color, border-color, fill, stroke;
264
+ transition-duration: var(--duration-standard);
265
+ transition-timing-function: var(--ease-standard);
266
+ }
package/package.json ADDED
@@ -0,0 +1,128 @@
1
+ {
2
+ "name": "@eduardoalvarez/arrecife",
3
+ "version": "0.1.0",
4
+ "description": "Librería de componentes de la identidad visual de Eduardo Álvarez",
5
+ "license": "MIT",
6
+ "author": "Eduardo Esteban Álvarez Castañeda <soy@eduardoalvarez.dev>",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/Proskynete/arrecife.git"
10
+ },
11
+ "type": "module",
12
+ "sideEffects": [
13
+ "**/*.css"
14
+ ],
15
+ "files": [
16
+ "dist",
17
+ "assets",
18
+ "CHANGELOG.md"
19
+ ],
20
+ "exports": {
21
+ ".": {
22
+ "types": "./dist/index.d.ts",
23
+ "import": "./dist/index.js",
24
+ "require": "./dist/index.cjs"
25
+ },
26
+ "./tokens": {
27
+ "types": "./dist/tokens/index.d.ts",
28
+ "import": "./dist/tokens/index.js",
29
+ "require": "./dist/tokens/index.cjs"
30
+ },
31
+ "./tokens/theme.css": "./dist/tokens/theme.css",
32
+ "./brand": {
33
+ "types": "./dist/brand/index.d.ts",
34
+ "import": "./dist/brand/index.js",
35
+ "require": "./dist/brand/index.cjs"
36
+ },
37
+ "./og": {
38
+ "types": "./dist/og/index.d.ts",
39
+ "import": "./dist/og/index.js",
40
+ "require": "./dist/og/index.cjs"
41
+ },
42
+ "./shiki": {
43
+ "types": "./dist/shiki/index.d.ts",
44
+ "import": "./dist/shiki/index.js",
45
+ "require": "./dist/shiki/index.cjs"
46
+ },
47
+ "./assets/*": "./assets/*",
48
+ "./package.json": "./package.json"
49
+ },
50
+ "main": "./dist/index.cjs",
51
+ "module": "./dist/index.js",
52
+ "types": "./dist/index.d.ts",
53
+ "scripts": {
54
+ "build": "pnpm check:tokens && tsup && pnpm build:tokens",
55
+ "build:tokens": "node scripts/build-tokens.mjs",
56
+ "check:tokens": "node scripts/check-tokens-purity.mjs",
57
+ "check:exports": "node scripts/check-package-exports.mjs",
58
+ "typecheck": "tsc --noEmit",
59
+ "lint": "eslint .",
60
+ "test": "pnpm test:oscuro && pnpm test:claro",
61
+ "test:watch": "vitest --project storybook",
62
+ "storybook": "pnpm build:tokens && storybook dev -p 6006",
63
+ "build-storybook": "pnpm build:tokens && storybook build",
64
+ "prepublishOnly": "pnpm build",
65
+ "test:oscuro": "vitest run --project storybook",
66
+ "test:claro": "STORYBOOK_THEME=claro vitest run --project storybook"
67
+ },
68
+ "peerDependencies": {
69
+ "react": "^19.0.0",
70
+ "react-dom": "^19.0.0"
71
+ },
72
+ "devDependencies": {
73
+ "@eslint/js": "^9.39.0",
74
+ "@storybook/addon-a11y": "^10.5.10",
75
+ "@storybook/addon-docs": "^10.5.10",
76
+ "@storybook/addon-themes": "^10.5.10",
77
+ "@storybook/addon-vitest": "^10.5.10",
78
+ "@storybook/react-vite": "^10.5.10",
79
+ "@tailwindcss/vite": "^4.3.3",
80
+ "@types/react": "^19.2.0",
81
+ "@types/react-dom": "^19.2.0",
82
+ "@vitest/browser": "^4.1.11",
83
+ "@vitest/browser-playwright": "^4.1.11",
84
+ "eslint": "^9.39.0",
85
+ "eslint-plugin-react-hooks": "^7.0.0",
86
+ "globals": "^17.11.0",
87
+ "playwright": "^1.62.1",
88
+ "react": "^19.2.0",
89
+ "react-dom": "^19.2.0",
90
+ "storybook": "^10.5.10",
91
+ "storybook-addon-pseudo-states": "^10.5.10",
92
+ "tailwindcss": "^4.3.3",
93
+ "tsup": "^8.5.1",
94
+ "typescript": "^5.3.0",
95
+ "typescript-eslint": "^8.48.0",
96
+ "vite": "^7.2.0",
97
+ "vitest": "^4.1.11"
98
+ },
99
+ "packageManager": "pnpm@11.20.0",
100
+ "engines": {
101
+ "node": ">=22.18.0"
102
+ },
103
+ "publishConfig": {
104
+ "access": "public"
105
+ },
106
+ "dependencies": {
107
+ "@radix-ui/react-avatar": "^1.2.6",
108
+ "@radix-ui/react-checkbox": "^1.3.11",
109
+ "@radix-ui/react-dialog": "^1.1.23",
110
+ "@radix-ui/react-dropdown-menu": "^2.1.24",
111
+ "@radix-ui/react-label": "^2.1.15",
112
+ "@radix-ui/react-popover": "^1.1.23",
113
+ "@radix-ui/react-progress": "^1.1.16",
114
+ "@radix-ui/react-radio-group": "^1.4.7",
115
+ "@radix-ui/react-select": "^2.3.7",
116
+ "@radix-ui/react-separator": "^1.1.15",
117
+ "@radix-ui/react-slot": "^1.3.3",
118
+ "@radix-ui/react-switch": "^1.3.7",
119
+ "@radix-ui/react-tabs": "^1.1.21",
120
+ "@radix-ui/react-toast": "^1.2.23",
121
+ "@radix-ui/react-tooltip": "^1.2.16",
122
+ "class-variance-authority": "^0.7.1",
123
+ "clsx": "^2.1.1",
124
+ "date-fns": "^4.4.0",
125
+ "react-day-picker": "^10.0.1",
126
+ "tailwind-merge": "^3.6.0"
127
+ }
128
+ }