@eduardoalvarez/arrecife 0.2.0 → 0.4.0

package/dist/chart/index.d.ts

@@ -0,0 +1,127 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Legend, Tooltip } from 'recharts';
+
+/**
+ * El chasis de las gráficas: contenedor, tooltip y leyenda con el vocabulario
+ * del sistema. Recharts pinta; esto decide cómo se ve.
+ *
+ * Se publica en `@eduardoalvarez/arrecife/chart` y NO en la raíz. Recharts pesa,
+ * y solo uno de los cinco proyectos dibuja métricas: colgarlo del índice
+ * principal obligaría a los otros cuatro a instalarlo para que su bundler
+ * resolviera un import que nunca ejecutan. Es dependencia de pares OPCIONAL, por
+ * el mismo criterio con el que `./og` y `./shiki` se mantienen sin React.
+ *
+ * Lo que esta capa aporta —y lo que se perdía copiando el `chart.tsx` de shadcn
+ * en cada proyecto— son tres cosas que se desincronizan solas:
+ *
+ *   1. La paleta de series sale de `tokens.series` y sigue el modo. Son cuatro
+ *      y se distinguen por tono, no por luminosidad.
+ *   2. La rejilla, los ejes y el cursor usan `hairline` y `textMuted`, no los
+ *      grises por defecto de Recharts, que no son de esta identidad.
+ *   3. El tooltip aparece donde va a quedarse: `isAnimationActive` apagado en
+ *      todas partes, porque el sistema no anima posición.
+ *
+ * Las piezas de datos —`BarChart`, `Line`, `XAxis`— NO se reexportan. Son la API
+ * de Recharts, el proyecto ya la conoce y envolverlas sería una capa de nombres
+ * que hay que mantener sincronizada con la versión de la librería.
+ */
+/**
+ * El color de la serie `indice`, como custom property.
+ *
+ * Devuelve `var(--color-serie-N)` y no el hexadecimal: leído en JS, el hex sería
+ * el del modo que había cuando se montó el componente y no cambiaría al alternar
+ * el tema. La variable la resuelve el navegador en cada pintura.
+ *
+ * Da la vuelta pasadas las cuatro. Que dos series compartan color es un fallo
+ * visible, y es la señal correcta: la gráfica tiene más categorías de las que
+ * esta identidad sabe distinguir, y lo que toca es agrupar en «otros».
+ */
+declare function colorDeSerie(indice: number): string;
+/** Las cuatro, en orden, para pasárselas de golpe a un `Pie` con `Cell`. */
+declare const COLORES_DE_SERIE: string[];
+type ChartContainerProps = Omit<ComponentPropsWithoutRef<'figure'>, 'title'> & {
+    /**
+     * Qué muestra la gráfica, en una frase. Obligatorio, como el `label` de
+     * `Progress`: un `<svg>` de barras sin nombre accesible no es «una gráfica sin
+     * etiqueta», es una región vacía.
+     */
+    label: string;
+    /**
+     * Lo que la gráfica dice, en palabras. Va en un `figcaption` oculto
+     * visualmente.
+     *
+     * No sustituye a la gráfica: la capa de accesibilidad de Recharts ya permite
+     * recorrer los puntos con el teclado. Es el titular —«sube de 24 a 52 con una
+     * caída en mayo»— que ningún recorrido punto a punto da.
+     */
+    summary?: ReactNode;
+    /** Alto en píxeles. Recharts necesita uno concreto para medir. */
+    height?: number;
+    children: ReactNode;
+};
+/**
+ * Envuelve la gráfica en un `<figure>` con nombre accesible y le da a Recharts
+ * el alto concreto que necesita para medirse.
+ *
+ * El `<figure>` NO lleva `role`: ya tiene el suyo implícito, y ponerle `group`
+ * encima es un rol no permitido para el elemento —axe lo señala—. Lo que sí
+ * lleva es `aria-label`, que es lo que lo nombra.
+ *
+ * Y el contenido NO va `aria-hidden`. Fue lo primero que se intentó, con el
+ * argumento de que anunciar cada tick no cuenta lo que la gráfica cuenta, y está
+ * mal por dos motivos: la capa de accesibilidad de Recharts hace la gráfica
+ * recorrible con el teclado, y esconder un subárbol que contiene elementos
+ * enfocables es una violación por sí misma —el foco entra en algo que no existe
+ * para quien escucha—. El resumen se suma a eso, no lo reemplaza.
+ */
+declare function ChartContainer({ label, summary, height, className, children, ...props }: ChartContainerProps): react.JSX.Element;
+/**
+ * El `Tooltip` de Recharts con los defectos del sistema: sin animación y con el
+ * cursor teñido de `surfaceRaised`.
+ *
+ * Se pasa `content={<ChartTooltipContent />}` para la caja.
+ */
+declare function ChartTooltip(props: ComponentPropsWithoutRef<typeof Tooltip>): react.JSX.Element;
+declare function ChartLegend(props: ComponentPropsWithoutRef<typeof Legend>): react.JSX.Element;
+/**
+ * Lo que Recharts le pasa a un `content`, declarado aquí en corto.
+ *
+ * Los tipos de Recharts para esto son abiertos y arrastran genéricos que no
+ * aportan nada al sitio de uso; `any` está prohibido en el repo, así que se
+ * declara lo que de verdad se lee y el valor se trata como `unknown`.
+ */
+type ChartPayloadItem = {
+    name?: string | number | undefined;
+    value?: unknown;
+    color?: string | undefined;
+    dataKey?: string | number | undefined;
+};
+type ChartTooltipContentProps = {
+    active?: boolean | undefined;
+    payload?: readonly ChartPayloadItem[] | undefined;
+    label?: ReactNode;
+    /** Formatea el valor. Sin ella se imprime tal cual: la librería no impone locale. */
+    formatter?: ((valor: unknown, item: ChartPayloadItem) => ReactNode) | undefined;
+    /** Oculta el encabezado, para una gráfica de una sola categoría. */
+    hideLabel?: boolean;
+    className?: string;
+};
+/**
+ * La caja del tooltip. Es una tarjeta del sistema —`surface`, borde de control,
+ * sombra estándar— y no la caja blanca de Recharts, que en modo oscuro es un
+ * rectángulo blanco encima de un panel oscuro.
+ *
+ * El punto de color es un cuadrado de 8px, no un círculo: es la misma marca que
+ * usa la leyenda, y en 8 píxeles un círculo y un cuadrado se distinguen peor
+ * entre sí que dos colores de la paleta.
+ */
+declare function ChartTooltipContent({ active, payload, label, formatter, hideLabel, className, }: ChartTooltipContentProps): react.JSX.Element | null;
+type ChartLegendContentProps = {
+    payload?: readonly ChartPayloadItem[] | undefined;
+    className?: string;
+};
+/** La leyenda con la misma marca cuadrada del tooltip y la escala `label`. */
+declare function ChartLegendContent({ payload, className }: ChartLegendContentProps): react.JSX.Element | null;
+
+export { COLORES_DE_SERIE, ChartContainer, type ChartContainerProps, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartPayloadItem, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, colorDeSerie };

package/dist/chart/index.js

@@ -0,0 +1,103 @@
+import { Text } from '../chunk-UOWIDFCB.js';
+import { cn } from '../chunk-NHS7ETKJ.js';
+import '../chunk-TSPJOM6K.js';
+import '../chunk-MLKGABMK.js';
+import { ResponsiveContainer, Tooltip, Legend } from 'recharts';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function colorDeSerie(indice) {
+  return `var(--color-serie-${Math.abs(indice) % 4 + 1})`;
+}
+var COLORES_DE_SERIE = [0, 1, 2, 3].map(colorDeSerie);
+function ChartContainer({
+  label,
+  summary,
+  height = 320,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      "aria-label": label,
+      className: cn(
+        "w-full",
+        // La rejilla y los ejes, con los tokens del sistema en vez de los grises
+        // por defecto de Recharts. Van como variantes de descendiente porque los
+        // nodos los pinta la librería y no hay dónde ponerles una clase.
+        "[&_.recharts-cartesian-grid_line]:stroke-hairline",
+        "[&_.recharts-cartesian-axis-line]:stroke-hairline",
+        "[&_.recharts-cartesian-axis-tick_text]:fill-text-muted",
+        "[&_.recharts-cartesian-axis-tick_text]:font-mono",
+        "[&_.recharts-cartesian-axis-tick_text]:text-chip",
+        "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-surface-raised",
+        "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-hairline-hover",
+        "[&_.recharts-sector]:outline-none",
+        "[&_.recharts-surface]:overflow-visible",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children }) }),
+        summary ? /* @__PURE__ */ jsx("figcaption", { className: "sr-only", children: summary }) : null
+      ]
+    }
+  );
+}
+function ChartTooltip(props) {
+  return /* @__PURE__ */ jsx(Tooltip, { isAnimationActive: false, ...props });
+}
+function ChartLegend(props) {
+  return /* @__PURE__ */ jsx(Legend, { ...props });
+}
+function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  formatter,
+  hideLabel = false,
+  className
+}) {
+  if (!active || !payload || payload.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-card border-border bg-surface shadow-standard p-step-sm gap-step-xs flex flex-col border",
+        className
+      ),
+      children: [
+        hideLabel || label === void 0 || label === null ? null : /* @__PURE__ */ jsx(Text, { as: "p", variant: "meta", tone: "muted", children: label }),
+        /* @__PURE__ */ jsx("ul", { className: "gap-step-xs flex flex-col", children: payload.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "gap-step-xs flex items-center", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "rounded-chip size-2 shrink-0",
+              style: { backgroundColor: item.color ?? colorDeSerie(i) }
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { as: "span", variant: "label", tone: "secondary", className: "font-normal", children: item.name }),
+          /* @__PURE__ */ jsx(Text, { as: "span", variant: "label", className: "ml-auto font-mono tabular-nums", children: formatter ? formatter(item.value, item) : String(item.value ?? "") })
+        ] }, `${String(item.dataKey ?? item.name ?? i)}`)) })
+      ]
+    }
+  );
+}
+function ChartLegendContent({ payload, className }) {
+  if (!payload || payload.length === 0) return null;
+  return /* @__PURE__ */ jsx("ul", { className: cn("gap-step-md pt-step-sm flex flex-wrap items-center justify-center", className), children: payload.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "gap-step-xs flex items-center", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "rounded-chip size-2 shrink-0",
+        style: { backgroundColor: item.color ?? colorDeSerie(i) }
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { as: "span", variant: "label", tone: "secondary", className: "font-normal", children: item.value })
+  ] }, `${String(item.dataKey ?? item.value ?? i)}`)) });
+}
+
+export { COLORES_DE_SERIE, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, colorDeSerie };

package/dist/chunk-KPZNNMV5.js

@@ -0,0 +1,83 @@
+// src/tema/index.ts
+var TEMA_CLAVE = "arrecife-tema";
+var TEMA_ATRIBUTO = "data-theme";
+var TEMA_EVENTO = "arrecife:tema";
+var esTema = (valor) => valor === "dark" || valor === "light";
+function temaActual() {
+  if (typeof document === "undefined") return "dark";
+  const puesto = document.documentElement.getAttribute(TEMA_ATRIBUTO);
+  return esTema(puesto) ? puesto : "dark";
+}
+function temaGuardado() {
+  if (typeof localStorage === "undefined") return null;
+  try {
+    const valor = localStorage.getItem(TEMA_CLAVE);
+    return esTema(valor) ? valor : null;
+  } catch {
+    return null;
+  }
+}
+function temaPreferido() {
+  const guardado = temaGuardado();
+  if (guardado) return guardado;
+  if (typeof matchMedia === "undefined") return "dark";
+  return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+function aplicarTema(tema, persistir = true) {
+  if (typeof document === "undefined") return;
+  document.documentElement.setAttribute(TEMA_ATRIBUTO, tema);
+  document.documentElement.style.colorScheme = tema;
+  if (persistir) {
+    try {
+      localStorage.setItem(TEMA_CLAVE, tema);
+    } catch {
+    }
+  }
+  dispatchEvent(new CustomEvent(TEMA_EVENTO, { detail: tema }));
+}
+function alternarTema() {
+  const siguiente = temaActual() === "dark" ? "light" : "dark";
+  aplicarTema(siguiente);
+  return siguiente;
+}
+function escucharTema(alCambiar) {
+  if (typeof window === "undefined") return () => {
+  };
+  const propio = (evento) => {
+    const detalle = evento.detail;
+    if (esTema(detalle)) alCambiar(detalle);
+  };
+  const otraPestana = (evento) => {
+    if (evento.key !== TEMA_CLAVE) return;
+    const tema = esTema(evento.newValue) ? evento.newValue : temaPreferido();
+    aplicarTema(tema, false);
+    alCambiar(tema);
+  };
+  addEventListener(TEMA_EVENTO, propio);
+  addEventListener("storage", otraPestana);
+  return () => {
+    removeEventListener(TEMA_EVENTO, propio);
+    removeEventListener("storage", otraPestana);
+  };
+}
+var scriptTema = [
+  "(function () {",
+  "  var CLAVE = " + JSON.stringify(TEMA_CLAVE) + ";",
+  "  function resolver() {",
+  "    try {",
+  "      var guardado = localStorage.getItem(CLAVE);",
+  '      if (guardado === "dark" || guardado === "light") return guardado;',
+  "    } catch (e) {}",
+  '    return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";',
+  "  }",
+  "  function aplicar() {",
+  "    var tema = resolver();",
+  "    document.documentElement.setAttribute(" + JSON.stringify(TEMA_ATRIBUTO) + ", tema);",
+  "    document.documentElement.style.colorScheme = tema;",
+  "  }",
+  "  aplicar();",
+  '  document.addEventListener("astro:after-swap", aplicar);',
+  "})();"
+].join("\n");
+
+export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido };

package/dist/chunk-MLKGABMK.js

@@ -0,0 +1,7 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export { __export };

package/dist/chunk-NHS7ETKJ.js

@@ -0,0 +1,27 @@
+import { spacing, control, radius, typeScale } from './chunk-TSPJOM6K.js';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+var kebab = (nombre) => nombre.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+var escalas = Object.keys(typeScale);
+var radios = Object.keys(radius);
+var espacios = Object.keys(spacing).map(kebab);
+var controles = Object.keys(control).map((nombre) => `control-${kebab(nombre)}`);
+var twMerge = 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(inputs));
+}
+
+export { cn };

package/dist/{chunk-ZL5X6XO7.js → chunk-TB3IYPOD.js}

@@ -1,29 +1,8 @@
 import { aletas, RUTA_ASSETS, poses, caras } from './chunk-E3OMP2DL.js';
-import { control, spacing, radius, typeScale, naming } from './chunk-DHF63QNM.js';
-import { clsx } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
+import { cn } from './chunk-NHS7ETKJ.js';
+import { naming } from './chunk-TSPJOM6K.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-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 = 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(inputs));
-}
 function Isotipo({
   sobre = "oscuro",
   basePath = RUTA_ASSETS,
@@ -51,7 +30,7 @@ function Logo({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("span", { className: cn("gap-xs inline-flex items-center", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: [
     /* @__PURE__ */ jsx(
       Isotipo,
       {
@@ -99,4 +78,4 @@ function CaraDeMascota({
   );
 }
 
-export { CaraDeMascota, Isotipo, Logo, Mascota, cn };
+export { CaraDeMascota, Isotipo, Logo, Mascota };

package/dist/{chunk-DHF63QNM.js → chunk-TSPJOM6K.js}

@@ -1,9 +1,3 @@
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
 // src/tokens/tokens.ts
 var dark = {
   background: "#091319",
@@ -162,11 +156,11 @@ var control = {
   icon: 42
 };
 var spacing = {
-  xs: 8,
-  sm: 12,
-  md: 16,
-  lg: 26,
-  xl: 40,
+  stepXs: 8,
+  stepSm: 12,
+  stepMd: 16,
+  stepLg: 26,
+  stepXl: 40,
   section: 96
 };
 var size = {
@@ -191,6 +185,10 @@ var sintaxis = {
   /** `markup.deleted`, `invalid`. */
   invalido: dark.error
 };
+var series = {
+  dark: [dark.accent, dark.warm, brand.body, dark.textMuted],
+  light: [light.accent, light.warm, brand.body, light.textMuted]
+};
 var profundo = "#0D2129";
 var gradient = {
   dark: {
@@ -228,4 +226,4 @@ var naming = {
   domain: "eduardoalvarez.dev"
 };
 
-export { __export, brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, shadow, sintaxis, size, spacing, tagline, typeScale };
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, sintaxis, size, spacing, tagline, typeScale };

package/dist/chunk-UOWIDFCB.js

@@ -0,0 +1,81 @@
+import { cn } from './chunk-NHS7ETKJ.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var ETIQUETA = {
+  display: "h1",
+  stat: "p",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  body: "p",
+  lead: "p",
+  ui: "p",
+  label: "span",
+  tag: "span",
+  meta: "p",
+  chip: "span",
+  eyebrow: "p"
+};
+var texto = cva("", {
+  variants: {
+    variant: {
+      display: "text-display font-display",
+      // Métricas grandes: 46px de display. Es la única escala pensada para un
+      // número, y por eso el interlineado es 1.
+      stat: "text-stat font-display",
+      h1: "text-h1 font-display",
+      h2: "text-h2 font-display",
+      h3: "text-h3 font-display",
+      body: "text-body font-sans",
+      // 17px: la bajada de las páginas internas y el botón grande.
+      lead: "text-lead font-sans",
+      ui: "text-ui font-sans",
+      label: "text-label font-sans",
+      // Las dos escalas de etiqueta. `tag` es el estado (sans 12.5/500) y `chip`
+      // la categoría y la métrica (mono 11.5). Ninguna transforma el texto.
+      tag: "text-tag font-sans",
+      chip: "text-chip font-mono",
+      // Mono SIN transformar: fechas, rutas, versiones, nombres de archivo y la
+      // firma del footer. Es el escalón que faltaba, y por el que cada sitio de
+      // uso terminaba escribiendo `variant="eyebrow" className="normal-case"`.
+      meta: "text-meta font-mono",
+      // `uppercase` no cabe en un token de tamaño: text-transform no es un
+      // modificador de --text-*. Por eso lo pone la variante y no theme.css.
+      eyebrow: "text-eyebrow font-mono uppercase"
+    },
+    tone: {
+      primary: "text-text-primary",
+      secondary: "text-text-secondary",
+      muted: "text-text-muted",
+      accent: "text-accent",
+      warm: "text-warm",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-error"
+    }
+  },
+  defaultVariants: { variant: "body", tone: "primary" }
+});
+function Text({
+  className,
+  variant,
+  tone,
+  as,
+  asChild = false,
+  measure,
+  children,
+  ...props
+}) {
+  const escala = variant ?? "body";
+  const limitar = measure ?? escala === "body";
+  const clases = cn(texto({ variant, tone }), limitar && "max-w-measure", className);
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { className: clases, ...props, children });
+  }
+  const Etiqueta = as ?? ETIQUETA[escala];
+  return /* @__PURE__ */ jsx(Etiqueta, { className: clases, ...props, children });
+}
+
+export { Text, texto };

package/dist/{chunk-22OXRTAL.js → chunk-VPT32GPG.js}

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

package/dist/chunk-ZEOQKRQ7.js

@@ -0,0 +1,19 @@
+import { cn } from './chunk-NHS7ETKJ.js';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { jsx } from 'react/jsx-runtime';
+
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      className: cn(
+        "text-label font-sans text-text-secondary select-none",
+        "peer-disabled:opacity-50 group-data-[disabled]:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Label };