@eduardoalvarez/arrecife 0.5.1 → 0.7.0

package/dist/chunk-UOWIDFCB.js

@@ -1,81 +0,0 @@
-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/tema/index.cjs

@@ -1,94 +0,0 @@
-'use strict';
-
-// 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");
-
-exports.TEMA_ATRIBUTO = TEMA_ATRIBUTO;
-exports.TEMA_CLAVE = TEMA_CLAVE;
-exports.TEMA_EVENTO = TEMA_EVENTO;
-exports.alternarTema = alternarTema;
-exports.aplicarTema = aplicarTema;
-exports.escucharTema = escucharTema;
-exports.scriptTema = scriptTema;
-exports.temaActual = temaActual;
-exports.temaGuardado = temaGuardado;
-exports.temaPreferido = temaPreferido;

package/dist/tema/index.d.cts

@@ -1,110 +0,0 @@
-/**
- * El tema, sin React.
- *
- * La librería define TODO el sistema de temas —`@custom-variant light`, los
- * bloques `[data-theme]`, la paleta de los dos modos— y hasta ahora no exponía
- * lo que lo cambia. `eduardoalvarez.dev` y `links` lo reimplementaban por
- * separado, cada uno con su `localStorage` y su `astro:after-swap`.
- *
- * Este subpaquete no importa React a propósito, igual que `./tokens`, `./og` y
- * `./shiki`: los dos proyectos que más lo necesitan son Astro y uno de ellos no
- * envía JavaScript de framework. Lo que se publica aquí es lo difícil del
- * componente —evitar el parpadeo de la primera pintura y que la elección
- * sobreviva a la navegación—, no el botón. El botón es `ThemeToggle`, vive en la
- * raíz y usa esto por dentro.
- *
- * `check-package-exports.mjs` verifica que `./tema` no arrastra React en el
- * `dist/` publicado, igual que las otras tres subrutas portables.
- */
-/** Los dos modos. El oscuro es el primario y es el default del sistema. */
-type Tema = 'dark' | 'light';
-/**
- * La clave de `localStorage`.
- *
- * Va con el nombre de la librería porque el `localStorage` es del origen, no
- * del proyecto: un `theme` a secas colisiona con el de cualquier otra cosa que
- * viva en el mismo dominio.
- */
-declare const TEMA_CLAVE = "arrecife-tema";
-/** El atributo que leen los bloques `[data-theme]` de `theme.css`. */
-declare const TEMA_ATRIBUTO = "data-theme";
-/**
- * El evento que se emite cuando el tema cambia.
- *
- * Existe porque `storage` solo avisa a las OTRAS pestañas: en la que hizo el
- * cambio, nada notifica, y un sitio con dos controles de tema —la cabecera y el
- * pie— se quedaría con uno de los dos mostrando el icono equivocado.
- */
-declare const TEMA_EVENTO = "arrecife:tema";
-/**
- * El tema que hay puesto ahora mismo, leído del DOM.
- *
- * Del DOM y no de `localStorage` a propósito: el script de la cabecera ya
- * resolvió la preferencia guardada contra la del sistema, y volver a resolverla
- * aquí es la forma de que las dos respuestas se separen.
- */
-declare function temaActual(): Tema;
-/**
- * La preferencia guardada, si la hay. `null` significa «nadie ha elegido», que
- * no es lo mismo que «eligió oscuro»: sin elección manda el sistema.
- */
-declare function temaGuardado(): Tema | null;
-/**
- * El tema que corresponde: lo elegido, y si no hay elección, lo que pida el
- * sistema. Sin `prefers-color-scheme` declarado, oscuro, que es el primario.
- */
-declare function temaPreferido(): Tema;
-/**
- * Pone el tema en el `<html>` y lo persiste.
- *
- * Escribe el atributo SIEMPRE, también cuando es `dark`. El default del sistema
- * no necesita el atributo, pero dejarlo explícito es lo que permite que un
- * subárbol declare el modo contrario —el bloque de código va sobre casco en los
- * dos temas— sin que herede de un `<html>` sin marcar.
- */
-declare function aplicarTema(tema: Tema, persistir?: boolean): void;
-/** Cambia al contrario y devuelve el que quedó. */
-declare function alternarTema(): Tema;
-/**
- * Se suscribe a los cambios de tema y devuelve la función que cancela.
- *
- * Escucha las dos fuentes: el evento propio —el control de esta pestaña— y
- * `storage`, que es el cambio hecho en otra. Sin la segunda, dos pestañas
- * abiertas se quedan con temas distintos hasta que se recarga una.
- */
-declare function escucharTema(alCambiar: (tema: Tema) => void): () => void;
-/**
- * El script que va INLINE en el `<head>`, antes de cualquier hoja de estilo.
- *
- * Es la parte difícil y es la que se reescribía en cada proyecto. Sin él, la
- * primera pintura sale con el tema por defecto y el correcto entra un frame
- * después: en un sitio oscuro que el usuario dejó en claro, eso es un
- * fogonazo blanco en cada carga.
- *
- * Tiene que ser una cadena y tiene que ir en línea. Un `<script src>`, aunque
- * sea síncrono, se descarga: el parpadeo vuelve. Por eso esto no es un módulo
- * que se importa, es texto que se inyecta:
- *
- * ```astro
- * ---
- * import { scriptTema } from '@eduardoalvarez/arrecife/tema';
- * ---
- * <head>
- *   <script is:inline set:html={scriptTema} />
- * </head>
- * ```
- *
- * ```tsx
- * // Next, en el layout raíz.
- * <head>
- *   <script dangerouslySetInnerHTML={{ __html: scriptTema }} />
- * </head>
- * ```
- *
- * Reengancha en `astro:after-swap` porque las transiciones de vista de Astro
- * reemplazan el `<html>` entero: sin esa línea, el tema se pierde al navegar y
- * vuelve el fogonazo, esta vez a mitad de sesión.
- */
-declare const scriptTema: string;
-
-export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, type Tema, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido };

package/dist/tema/index.d.ts

@@ -1,110 +0,0 @@
-/**
- * El tema, sin React.
- *
- * La librería define TODO el sistema de temas —`@custom-variant light`, los
- * bloques `[data-theme]`, la paleta de los dos modos— y hasta ahora no exponía
- * lo que lo cambia. `eduardoalvarez.dev` y `links` lo reimplementaban por
- * separado, cada uno con su `localStorage` y su `astro:after-swap`.
- *
- * Este subpaquete no importa React a propósito, igual que `./tokens`, `./og` y
- * `./shiki`: los dos proyectos que más lo necesitan son Astro y uno de ellos no
- * envía JavaScript de framework. Lo que se publica aquí es lo difícil del
- * componente —evitar el parpadeo de la primera pintura y que la elección
- * sobreviva a la navegación—, no el botón. El botón es `ThemeToggle`, vive en la
- * raíz y usa esto por dentro.
- *
- * `check-package-exports.mjs` verifica que `./tema` no arrastra React en el
- * `dist/` publicado, igual que las otras tres subrutas portables.
- */
-/** Los dos modos. El oscuro es el primario y es el default del sistema. */
-type Tema = 'dark' | 'light';
-/**
- * La clave de `localStorage`.
- *
- * Va con el nombre de la librería porque el `localStorage` es del origen, no
- * del proyecto: un `theme` a secas colisiona con el de cualquier otra cosa que
- * viva en el mismo dominio.
- */
-declare const TEMA_CLAVE = "arrecife-tema";
-/** El atributo que leen los bloques `[data-theme]` de `theme.css`. */
-declare const TEMA_ATRIBUTO = "data-theme";
-/**
- * El evento que se emite cuando el tema cambia.
- *
- * Existe porque `storage` solo avisa a las OTRAS pestañas: en la que hizo el
- * cambio, nada notifica, y un sitio con dos controles de tema —la cabecera y el
- * pie— se quedaría con uno de los dos mostrando el icono equivocado.
- */
-declare const TEMA_EVENTO = "arrecife:tema";
-/**
- * El tema que hay puesto ahora mismo, leído del DOM.
- *
- * Del DOM y no de `localStorage` a propósito: el script de la cabecera ya
- * resolvió la preferencia guardada contra la del sistema, y volver a resolverla
- * aquí es la forma de que las dos respuestas se separen.
- */
-declare function temaActual(): Tema;
-/**
- * La preferencia guardada, si la hay. `null` significa «nadie ha elegido», que
- * no es lo mismo que «eligió oscuro»: sin elección manda el sistema.
- */
-declare function temaGuardado(): Tema | null;
-/**
- * El tema que corresponde: lo elegido, y si no hay elección, lo que pida el
- * sistema. Sin `prefers-color-scheme` declarado, oscuro, que es el primario.
- */
-declare function temaPreferido(): Tema;
-/**
- * Pone el tema en el `<html>` y lo persiste.
- *
- * Escribe el atributo SIEMPRE, también cuando es `dark`. El default del sistema
- * no necesita el atributo, pero dejarlo explícito es lo que permite que un
- * subárbol declare el modo contrario —el bloque de código va sobre casco en los
- * dos temas— sin que herede de un `<html>` sin marcar.
- */
-declare function aplicarTema(tema: Tema, persistir?: boolean): void;
-/** Cambia al contrario y devuelve el que quedó. */
-declare function alternarTema(): Tema;
-/**
- * Se suscribe a los cambios de tema y devuelve la función que cancela.
- *
- * Escucha las dos fuentes: el evento propio —el control de esta pestaña— y
- * `storage`, que es el cambio hecho en otra. Sin la segunda, dos pestañas
- * abiertas se quedan con temas distintos hasta que se recarga una.
- */
-declare function escucharTema(alCambiar: (tema: Tema) => void): () => void;
-/**
- * El script que va INLINE en el `<head>`, antes de cualquier hoja de estilo.
- *
- * Es la parte difícil y es la que se reescribía en cada proyecto. Sin él, la
- * primera pintura sale con el tema por defecto y el correcto entra un frame
- * después: en un sitio oscuro que el usuario dejó en claro, eso es un
- * fogonazo blanco en cada carga.
- *
- * Tiene que ser una cadena y tiene que ir en línea. Un `<script src>`, aunque
- * sea síncrono, se descarga: el parpadeo vuelve. Por eso esto no es un módulo
- * que se importa, es texto que se inyecta:
- *
- * ```astro
- * ---
- * import { scriptTema } from '@eduardoalvarez/arrecife/tema';
- * ---
- * <head>
- *   <script is:inline set:html={scriptTema} />
- * </head>
- * ```
- *
- * ```tsx
- * // Next, en el layout raíz.
- * <head>
- *   <script dangerouslySetInnerHTML={{ __html: scriptTema }} />
- * </head>
- * ```
- *
- * Reengancha en `astro:after-swap` porque las transiciones de vista de Astro
- * reemplazan el `<html>` entero: sin esa línea, el tema se pierde al navegar y
- * vuelve el fogonazo, esta vez a mitad de sesión.
- */
-declare const scriptTema: string;
-
-export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, type Tema, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido };

package/dist/tema/index.js

@@ -1,2 +0,0 @@
-export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido } from '../chunk-KPZNNMV5.js';
-import '../chunk-MLKGABMK.js';