@eduardoalvarez/arrecife 0.1.0

package/dist/brand/index.cjs

@@ -0,0 +1,228 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/brand/catalogo.ts
+var caras = {
+  annoyed: "face-annoyed.png",
+  confused: "face-confused.png",
+  hearts: "face-hearts.png",
+  laughing: "face-laughing.png",
+  shades: "face-shades.png",
+  waiting: "face-waiting.png",
+  wink: "face-wink.png"
+};
+var poses = {
+  desk: "pose-desk.png",
+  "laptop-coffee": "pose-laptop-coffee.png",
+  peek: "pose-peek.png",
+  surf: "pose-surf.png"
+};
+var aletas = {
+  /** Dos azules. Para fondos claros. */
+  color: "fin.png",
+  /** Silueta a una tinta. Para fondos oscuros. */
+  espuma: "fin-foam.png"
+};
+var usoDeCara = {
+  wink: "Formularios, nota al pie amable",
+  waiting: "Sin resultados, estado de espera",
+  laughing: "\xC9xito, suscripci\xF3n confirmada",
+  shades: "M\xF3dulo o curso completado",
+  hearts: "Agradecimiento, OG de art\xEDculo",
+  confused: "404, p\xE1gina no encontrada",
+  annoyed: "Error del servidor, fallo de build"
+};
+var RUTA_ASSETS = "/brand";
+var listaCaras = Object.keys(caras);
+var listaPoses = Object.keys(poses);
+var typeScale = {
+  display: { family: "display", size: 76, lineHeight: 0.96, weight: 800, tracking: "-0.035em" },
+  /** Métricas grandes. Números, no prosa: interlineado 1 y sin descendentes. */
+  stat: { family: "display", size: 46, lineHeight: 1, weight: 800, tracking: "-0.035em" },
+  h1: { family: "display", size: 44, lineHeight: 1.05, weight: 700, tracking: "-0.03em" },
+  h2: { family: "display", size: 30, lineHeight: 1.1, weight: 600, tracking: "-0.02em" },
+  h3: { family: "display", size: 25, lineHeight: 1.15, weight: 600, tracking: "-0.02em" },
+  body: { family: "sans", size: 18, lineHeight: 1.75, weight: 400 },
+  /**
+   * 17px. El botón grande y la bajada de las páginas internas.
+   *
+   * Entra como escalón propio porque el documento lo usa DOS veces y en piezas
+   * distintas: «lg 15px 30px r12» con texto de 17, y «h1 44/700 · bajada 17px ·
+   * párrafo de contexto 15px». Un solo uso no habría justificado partir la
+   * distancia entre `ui` (15) y `body` (18); dos sí.
+   */
+  lead: { family: "sans", size: 17, lineHeight: 1.5, weight: 400 },
+  ui: { family: "sans", size: 15, lineHeight: 1.6, weight: 400 },
+  label: { family: "sans", size: 13, lineHeight: 1.5, weight: 500 },
+  /**
+   * La escala de las etiquetas de estado: sans 12.5/500, cuadrada.
+   *
+   * Es medio píxel por debajo de `label`, y esta vez el medio píxel sí importa:
+   * una etiqueta de estado va dentro de una tabla o al lado de un título, y a 13
+   * competía con el texto que acompaña. El documento la da en 12.5 y se ve.
+   */
+  tag: { family: "sans", size: 12.5, lineHeight: 1.4, weight: 500 },
+  /**
+   * La escala de categoría y métrica: mono 11.5.
+   *
+   * Rompe el suelo de `limits.minScreenPx`, y es a propósito. Ese suelo protege
+   * al TEXTO —lo que se lee en una frase—, y una píldora de una palabra no es
+   * texto corrido: es una marca. El contraste sigue medido y pasa AA (plancton
+   * 5.57:1 sobre abismo), que es la parte que no se negocia.
+   *
+   * A 13 las tres familias de etiqueta salían del tamaño de un botón pequeño y
+   * pesaban más que el título que acompañan. Ver `docs/decisiones.md`.
+   */
+  chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
+  /**
+   * Mono SIN transformar: fechas, rutas, versiones, nombres de archivo, la firma
+   * del footer y las métricas de etiqueta. Es la mayoría del mono del sistema.
+   *
+   * Existe porque `eyebrow` lleva `uppercase` de fábrica y no es una preferencia
+   * que se pueda apagar: es la escala del eyebrow. Un `18 ago 2026` en versalitas
+   * o un `pose-laptop-coffee.png` en mayúsculas están mal, y sin este escalón la
+   * única salida era un `normal-case` en cada sitio de uso.
+   *
+   * El documento dice 12.5. Son 13 por la misma razón por la que `textMuted` se
+   * corrigió: `limits.minScreenPx` es 13 y plancton «nunca bajo 13px». Esta
+   * escala es justo donde se escriben las metas en muted, así que ponerla en
+   * 12.5 habría dejado ilegible su uso más común por medio píxel.
+   */
+  meta: { family: "mono", size: 13, lineHeight: 1.6, weight: 400 },
+  eyebrow: { family: "mono", size: 12, tracking: "0.12em", transform: "uppercase" }
+};
+var radius = {
+  chip: 6,
+  control: 10,
+  card: 14,
+  panel: 16,
+  pill: 999
+};
+var control = {
+  sm: 14,
+  md: 22,
+  lg: 30,
+  /** Botón de icono: cuadrado, sin texto. */
+  icon: 42
+};
+var spacing = {
+  xs: 8,
+  sm: 12,
+  md: 16,
+  lg: 26,
+  xl: 40,
+  section: 96
+};
+var naming = {
+  wordmark: "Eduardo \xC1lvarez"};
+
+// src/lib/cn.ts
+var escalas = Object.keys(typeScale);
+var radios = Object.keys(radius);
+var espacios = Object.keys(spacing);
+var controles = Object.keys(control).map((nombre) => `control-${nombre}`);
+var twMerge = tailwindMerge.extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: escalas }],
+      rounded: [{ rounded: radios }],
+      p: [{ p: espacios }],
+      px: [{ px: [...espacios, ...controles] }],
+      py: [{ py: espacios }],
+      gap: [{ gap: espacios }],
+      size: [{ size: controles }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx.clsx(inputs));
+}
+function Isotipo({
+  sobre = "oscuro",
+  basePath = RUTA_ASSETS,
+  alt = "",
+  className,
+  ...props
+}) {
+  const archivo = sobre === "oscuro" ? aletas.espuma : aletas.color;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: `${basePath}/${archivo}`,
+      alt,
+      width: 147,
+      height: 111,
+      className: cn("h-8 w-auto select-none", className),
+      ...props
+    }
+  );
+}
+function Logo({
+  sobre = "oscuro",
+  basePath = RUTA_ASSETS,
+  soloIsotipo = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("gap-xs inline-flex items-center", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Isotipo,
+      {
+        sobre,
+        basePath,
+        alt: soloIsotipo ? naming.wordmark : "",
+        className: "h-7 w-auto"
+      }
+    ),
+    soloIsotipo ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui font-display text-text-primary font-bold tracking-[-0.02em]", children: naming.wordmark })
+  ] });
+}
+function Mascota({
+  pose,
+  basePath = RUTA_ASSETS,
+  alt = "",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: `${basePath}/${poses[pose]}`,
+      alt,
+      className: cn("h-auto w-full max-w-64 select-none", className),
+      ...props
+    }
+  );
+}
+function CaraDeMascota({
+  expresion,
+  basePath = RUTA_ASSETS,
+  alt = "",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: `${basePath}/${caras[expresion]}`,
+      alt,
+      className: cn("h-auto w-full max-w-24 select-none", className),
+      ...props
+    }
+  );
+}
+
+exports.CaraDeMascota = CaraDeMascota;
+exports.Isotipo = Isotipo;
+exports.Logo = Logo;
+exports.Mascota = Mascota;
+exports.RUTA_ASSETS = RUTA_ASSETS;
+exports.aletas = aletas;
+exports.caras = caras;
+exports.listaCaras = listaCaras;
+exports.listaPoses = listaPoses;
+exports.poses = poses;
+exports.usoDeCara = usoDeCara;

package/dist/brand/index.d.cts

@@ -0,0 +1,63 @@
+import { F as Fondo, C as Cara, P as Pose } from '../catalogo-Du5ID-Hi.cjs';
+export { A as Aleta, R as RUTA_ASSETS, a as aletas, c as caras, l as listaCaras, b as listaPoses, p as poses, u as usoDeCara } from '../catalogo-Du5ID-Hi.cjs';
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+type IsotipoProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'alt'> & {
+    /**
+     * Sobre qué fondo se monta. Es obligatorio decidirlo, aunque tenga default:
+     * el cuerpo de la aleta es casi negro, así que la variante de dos azules
+     * desaparece sobre abismo. Al ser una prop, la regla deja de ser algo que
+     * recordar.
+     */
+    sobre?: Fondo | undefined;
+    basePath?: string | undefined;
+    /** Texto alternativo. Vacío cuando el isotipo acompaña a un texto que ya lo nombra. */
+    alt?: string | undefined;
+};
+declare function Isotipo({ sobre, basePath, alt, className, ...props }: IsotipoProps): react.JSX.Element;
+
+type LogoProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
+    sobre?: Fondo | undefined;
+    basePath?: string | undefined;
+    /** Oculta el wordmark y deja solo la aleta, para barras muy estrechas. */
+    soloIsotipo?: boolean | undefined;
+};
+/**
+ * El wordmark sale de `naming.wordmark`, no de una cadena escrita a mano, y
+ * siempre dice «Eduardo Álvarez». La mascota se llama Tiburoncín y no aparece
+ * escrita dentro del logo: no hay ninguna prop que permita cambiar el texto.
+ *
+ * Cuando se oculta el wordmark, el nombre sigue llegando al lector de pantalla
+ * por el `alt` del isotipo. Un logo sin nombre accesible es un logo invisible.
+ */
+declare function Logo({ sobre, basePath, soloIsotipo, className, ...props }: LogoProps): react.JSX.Element;
+
+type Base = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'alt'> & {
+    basePath?: string | undefined;
+    /**
+     * Texto alternativo. Vacío por defecto: la mascota es ilustración y el texto
+     * que la acompaña ya dice lo que hay que saber. Se rellena solo cuando la
+     * imagen aporta información que no está escrita al lado.
+     */
+    alt?: string | undefined;
+};
+type MascotaProps = Base & {
+    pose: Pose;
+};
+/** Tiburoncín de cuerpo entero. */
+declare function Mascota({ pose, basePath, alt, className, ...props }: MascotaProps): react.JSX.Element;
+type CaraDeMascotaProps = Base & {
+    expresion: Cara;
+};
+/**
+ * La cabeza de Tiburoncín, con expresión.
+ *
+ * Las caras van SOLO en estados vacíos, confirmaciones, errores, progreso de
+ * curso y celebración. Nunca en hero, precios, servicios, contacto ni CV. Por
+ * eso `EmptyState` recibe una cara y `PageHeader` no: la regla no está escrita
+ * en una guía que haya que recordar, está en qué componentes la aceptan.
+ */
+declare function CaraDeMascota({ expresion, basePath, alt, className, ...props }: CaraDeMascotaProps): react.JSX.Element;
+
+export { Cara, CaraDeMascota, type CaraDeMascotaProps, Fondo, Isotipo, type IsotipoProps, Logo, type LogoProps, Mascota, type MascotaProps, Pose };

package/dist/brand/index.d.ts

@@ -0,0 +1,63 @@
+import { F as Fondo, C as Cara, P as Pose } from '../catalogo-Du5ID-Hi.js';
+export { A as Aleta, R as RUTA_ASSETS, a as aletas, c as caras, l as listaCaras, b as listaPoses, p as poses, u as usoDeCara } from '../catalogo-Du5ID-Hi.js';
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+type IsotipoProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'alt'> & {
+    /**
+     * Sobre qué fondo se monta. Es obligatorio decidirlo, aunque tenga default:
+     * el cuerpo de la aleta es casi negro, así que la variante de dos azules
+     * desaparece sobre abismo. Al ser una prop, la regla deja de ser algo que
+     * recordar.
+     */
+    sobre?: Fondo | undefined;
+    basePath?: string | undefined;
+    /** Texto alternativo. Vacío cuando el isotipo acompaña a un texto que ya lo nombra. */
+    alt?: string | undefined;
+};
+declare function Isotipo({ sobre, basePath, alt, className, ...props }: IsotipoProps): react.JSX.Element;
+
+type LogoProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
+    sobre?: Fondo | undefined;
+    basePath?: string | undefined;
+    /** Oculta el wordmark y deja solo la aleta, para barras muy estrechas. */
+    soloIsotipo?: boolean | undefined;
+};
+/**
+ * El wordmark sale de `naming.wordmark`, no de una cadena escrita a mano, y
+ * siempre dice «Eduardo Álvarez». La mascota se llama Tiburoncín y no aparece
+ * escrita dentro del logo: no hay ninguna prop que permita cambiar el texto.
+ *
+ * Cuando se oculta el wordmark, el nombre sigue llegando al lector de pantalla
+ * por el `alt` del isotipo. Un logo sin nombre accesible es un logo invisible.
+ */
+declare function Logo({ sobre, basePath, soloIsotipo, className, ...props }: LogoProps): react.JSX.Element;
+
+type Base = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'alt'> & {
+    basePath?: string | undefined;
+    /**
+     * Texto alternativo. Vacío por defecto: la mascota es ilustración y el texto
+     * que la acompaña ya dice lo que hay que saber. Se rellena solo cuando la
+     * imagen aporta información que no está escrita al lado.
+     */
+    alt?: string | undefined;
+};
+type MascotaProps = Base & {
+    pose: Pose;
+};
+/** Tiburoncín de cuerpo entero. */
+declare function Mascota({ pose, basePath, alt, className, ...props }: MascotaProps): react.JSX.Element;
+type CaraDeMascotaProps = Base & {
+    expresion: Cara;
+};
+/**
+ * La cabeza de Tiburoncín, con expresión.
+ *
+ * Las caras van SOLO en estados vacíos, confirmaciones, errores, progreso de
+ * curso y celebración. Nunca en hero, precios, servicios, contacto ni CV. Por
+ * eso `EmptyState` recibe una cara y `PageHeader` no: la regla no está escrita
+ * en una guía que haya que recordar, está en qué componentes la aceptan.
+ */
+declare function CaraDeMascota({ expresion, basePath, alt, className, ...props }: CaraDeMascotaProps): react.JSX.Element;
+
+export { Cara, CaraDeMascota, type CaraDeMascotaProps, Fondo, Isotipo, type IsotipoProps, Logo, type LogoProps, Mascota, type MascotaProps, Pose };

package/dist/brand/index.js

@@ -0,0 +1,3 @@
+export { CaraDeMascota, Isotipo, Logo, Mascota } from '../chunk-ZL5X6XO7.js';
+export { RUTA_ASSETS, aletas, caras, listaCaras, listaPoses, poses, usoDeCara } from '../chunk-E3OMP2DL.js';
+import '../chunk-DHF63QNM.js';

package/dist/catalogo-Du5ID-Hi.d.cts

@@ -0,0 +1,77 @@
+/**
+ * El catálogo de la marca: qué piezas de Tiburoncín existen y cómo se llama su
+ * archivo. Datos puros, sin React, para que también lo puedan leer las
+ * plantillas de OG y cualquier script.
+ *
+ * Añadir una pieza nueva es soltar el PNG en `assets/brand/` y añadir una línea
+ * aquí. El tipo se actualiza solo y el autocompletado la ofrece de inmediato.
+ */
+/**
+ * Las caras. Solo se usan en estados vacíos, confirmaciones, errores, progreso
+ * de curso y celebración — nunca en hero, precios, servicios, contacto ni CV.
+ * Por eso `EmptyState` recibe una cara y `PageHeader` no.
+ */
+declare const caras: {
+    readonly annoyed: "face-annoyed.png";
+    readonly confused: "face-confused.png";
+    readonly hearts: "face-hearts.png";
+    readonly laughing: "face-laughing.png";
+    readonly shades: "face-shades.png";
+    readonly waiting: "face-waiting.png";
+    readonly wink: "face-wink.png";
+};
+/** Poses de cuerpo entero. */
+declare const poses: {
+    readonly desk: "pose-desk.png";
+    readonly 'laptop-coffee': "pose-laptop-coffee.png";
+    readonly peek: "pose-peek.png";
+    readonly surf: "pose-surf.png";
+};
+/**
+ * La aleta, en sus dos variantes.
+ *
+ * El cuerpo de la aleta es casi negro, así que sobre fondo oscuro la variante de
+ * dos azules desaparece. `espuma` es la silueta a una tinta —el 94 % de sus
+ * píxeles son `#EDF4F3`, o sea el token espuma— y es la que se ve sobre abismo.
+ */
+declare const aletas: {
+    /** Dos azules. Para fondos claros. */
+    readonly color: "fin.png";
+    /** Silueta a una tinta. Para fondos oscuros. */
+    readonly espuma: "fin-foam.png";
+};
+/**
+ * El uso asignado de cada cara, del inventario del manual.
+ *
+ * No es documentación suelta: es la parte del contrato de humor que se puede
+ * escribir como dato. El manual asigna una situación a cada cara, y sin esto la
+ * elección se hacía a ojo en cada sitio de uso — que es como `annoyed` termina
+ * en una confirmación y `hearts` en un error.
+ *
+ * Falta una: el manual lista ocho caras y `head-5` (sorpresa · confirmación
+ * destructiva) no tiene PNG en `assets/brand/`. Cuando llegue, entra aquí y en
+ * `caras` a la vez.
+ */
+declare const usoDeCara: {
+    readonly wink: "Formularios, nota al pie amable";
+    readonly waiting: "Sin resultados, estado de espera";
+    readonly laughing: "Éxito, suscripción confirmada";
+    readonly shades: "Módulo o curso completado";
+    readonly hearts: "Agradecimiento, OG de artículo";
+    readonly confused: "404, página no encontrada";
+    readonly annoyed: "Error del servidor, fallo de build";
+};
+type Cara = keyof typeof caras;
+type Pose = keyof typeof poses;
+type Aleta = keyof typeof aletas;
+/** Sobre qué fondo se va a montar la pieza. Decide qué aleta se usa. */
+type Fondo = 'oscuro' | 'claro';
+/**
+ * Dónde se sirven los PNG. Por defecto `/brand`, que es donde ya viven en los
+ * cinco proyectos (`public/brand/`), así que no hay nada que configurar.
+ */
+declare const RUTA_ASSETS = "/brand";
+declare const listaCaras: readonly Cara[];
+declare const listaPoses: readonly Pose[];
+
+export { type Aleta as A, type Cara as C, type Fondo as F, type Pose as P, RUTA_ASSETS as R, aletas as a, listaPoses as b, caras as c, listaCaras as l, poses as p, usoDeCara as u };

package/dist/catalogo-Du5ID-Hi.d.ts

@@ -0,0 +1,77 @@
+/**
+ * El catálogo de la marca: qué piezas de Tiburoncín existen y cómo se llama su
+ * archivo. Datos puros, sin React, para que también lo puedan leer las
+ * plantillas de OG y cualquier script.
+ *
+ * Añadir una pieza nueva es soltar el PNG en `assets/brand/` y añadir una línea
+ * aquí. El tipo se actualiza solo y el autocompletado la ofrece de inmediato.
+ */
+/**
+ * Las caras. Solo se usan en estados vacíos, confirmaciones, errores, progreso
+ * de curso y celebración — nunca en hero, precios, servicios, contacto ni CV.
+ * Por eso `EmptyState` recibe una cara y `PageHeader` no.
+ */
+declare const caras: {
+    readonly annoyed: "face-annoyed.png";
+    readonly confused: "face-confused.png";
+    readonly hearts: "face-hearts.png";
+    readonly laughing: "face-laughing.png";
+    readonly shades: "face-shades.png";
+    readonly waiting: "face-waiting.png";
+    readonly wink: "face-wink.png";
+};
+/** Poses de cuerpo entero. */
+declare const poses: {
+    readonly desk: "pose-desk.png";
+    readonly 'laptop-coffee': "pose-laptop-coffee.png";
+    readonly peek: "pose-peek.png";
+    readonly surf: "pose-surf.png";
+};
+/**
+ * La aleta, en sus dos variantes.
+ *
+ * El cuerpo de la aleta es casi negro, así que sobre fondo oscuro la variante de
+ * dos azules desaparece. `espuma` es la silueta a una tinta —el 94 % de sus
+ * píxeles son `#EDF4F3`, o sea el token espuma— y es la que se ve sobre abismo.
+ */
+declare const aletas: {
+    /** Dos azules. Para fondos claros. */
+    readonly color: "fin.png";
+    /** Silueta a una tinta. Para fondos oscuros. */
+    readonly espuma: "fin-foam.png";
+};
+/**
+ * El uso asignado de cada cara, del inventario del manual.
+ *
+ * No es documentación suelta: es la parte del contrato de humor que se puede
+ * escribir como dato. El manual asigna una situación a cada cara, y sin esto la
+ * elección se hacía a ojo en cada sitio de uso — que es como `annoyed` termina
+ * en una confirmación y `hearts` en un error.
+ *
+ * Falta una: el manual lista ocho caras y `head-5` (sorpresa · confirmación
+ * destructiva) no tiene PNG en `assets/brand/`. Cuando llegue, entra aquí y en
+ * `caras` a la vez.
+ */
+declare const usoDeCara: {
+    readonly wink: "Formularios, nota al pie amable";
+    readonly waiting: "Sin resultados, estado de espera";
+    readonly laughing: "Éxito, suscripción confirmada";
+    readonly shades: "Módulo o curso completado";
+    readonly hearts: "Agradecimiento, OG de artículo";
+    readonly confused: "404, página no encontrada";
+    readonly annoyed: "Error del servidor, fallo de build";
+};
+type Cara = keyof typeof caras;
+type Pose = keyof typeof poses;
+type Aleta = keyof typeof aletas;
+/** Sobre qué fondo se va a montar la pieza. Decide qué aleta se usa. */
+type Fondo = 'oscuro' | 'claro';
+/**
+ * Dónde se sirven los PNG. Por defecto `/brand`, que es donde ya viven en los
+ * cinco proyectos (`public/brand/`), así que no hay nada que configurar.
+ */
+declare const RUTA_ASSETS = "/brand";
+declare const listaCaras: readonly Cara[];
+declare const listaPoses: readonly Pose[];
+
+export { type Aleta as A, type Cara as C, type Fondo as F, type Pose as P, RUTA_ASSETS as R, aletas as a, listaPoses as b, caras as c, listaCaras as l, poses as p, usoDeCara as u };

package/dist/chunk-22OXRTAL.js

@@ -0,0 +1,22 @@
+import { naming, tagline, motion, shadow, sintaxis, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-DHF63QNM.js';
+
+// src/tokens/index.ts
+var tokens = {
+  colors,
+  brand,
+  fonts,
+  typeScale,
+  limits,
+  radius,
+  control,
+  spacing,
+  size,
+  gradient,
+  sintaxis,
+  shadow,
+  motion,
+  tagline,
+  naming
+};
+
+export { tokens };