@eduardoalvarez/arrecife 0.5.1 → 0.7.0

package/dist/chunk-CKRSQPTX.js

@@ -0,0 +1,36 @@
+// src/brand/catalog.ts
+var faces = {
+  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 fins = {
+  /** Two blues. For light backgrounds. */
+  color: "fin.png",
+  /** Single-ink silhouette. For dark backgrounds. */
+  foam: "fin-foam.png"
+};
+var faceUsage = {
+  wink: "Forms, a friendly footnote",
+  waiting: "No results, waiting state",
+  laughing: "Success, subscription confirmed",
+  shades: "Module or course completed",
+  hearts: "Gratitude, article OG",
+  confused: "404, page not found",
+  annoyed: "Server error, build failure"
+};
+var ASSETS_PATH = "/brand";
+var faceList = Object.keys(faces);
+var poseList = Object.keys(poses);
+
+export { ASSETS_PATH, faceList, faceUsage, faces, fins, poseList, poses };

package/dist/chunk-E6KFUSKB.js

@@ -0,0 +1,144 @@
+import { cva } from 'class-variance-authority';
+
+// src/variants/button.ts
+var button = cva(
+  [
+    "inline-flex cursor-pointer items-center justify-center gap-step-xs whitespace-nowrap select-none",
+    "rounded-control font-sans font-medium",
+    "transition-standard",
+    "focus-ring",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-accent text-accent-on hover:bg-accent-hover",
+          "light:bg-brand-hull light:text-accent-on light:hover:bg-text-secondary"
+        ],
+        // The one control whose focus ring is not biolume. It is the system's
+        // only sand fill, and a biolume ring three pixels off a sand button puts
+        // both of the brand's accents in the same glance. See `decisions.md` § 37.
+        conversion: "bg-warm text-warm-on hover:bg-warm-hover focus-ring-warm",
+        secondary: [
+          "border-hairline-hover border bg-transparent text-text-primary",
+          "hover:border-accent hover:text-accent"
+        ],
+        tertiary: [
+          "bg-transparent font-mono font-normal text-text-secondary",
+          "hover:text-accent hover:underline hover:underline-offset-4"
+        ],
+        /** Irreversible only. Never for «cancel» on a form. */
+        destructive: "bg-danger text-danger-on hover:bg-danger-hover",
+        destructiveOutline: [
+          "border-danger text-danger border bg-transparent",
+          "hover:bg-danger hover:text-danger-on"
+        ]
+      },
+      size: {
+        sm: "h-8 px-control-sm text-label",
+        md: "h-10 px-control-md text-ui",
+        lg: "h-12 px-control-lg text-lead",
+        /** A 42×42 square, no text. `aria-label` is mandatory on it. */
+        icon: "size-control-icon p-0",
+        /** 32×32, for a table row. Same height as `sm`, and same mandatory `aria-label`. */
+        "icon-sm": "size-control-icon-sm p-0"
+      }
+    },
+    compoundVariants: [
+      /**
+       * The tertiary has no box: neither horizontal padding nor control height.
+       * It goes here rather than as `px-0` on the variant so it beats the size's
+       * `px-*` without depending on the order cva concatenates classes in.
+       */
+      { variant: "tertiary", size: ["sm", "md", "lg"], class: "h-auto px-0" }
+    ],
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+var badge = cva(
+  ["inline-flex items-center gap-step-xs", "rounded-chip px-step-xs py-0.5", "font-sans text-tag", "transition-standard"],
+  {
+    variants: {
+      variant: {
+        neutral: "bg-surface-raised text-text-secondary",
+        accent: "bg-accent/8 text-text-primary",
+        warm: "bg-warm/8 text-text-primary",
+        success: "bg-success/8 text-text-primary",
+        warning: "bg-warning/8 text-text-primary",
+        error: "bg-error/8 text-text-primary"
+      }
+    },
+    defaultVariants: { variant: "neutral" }
+  }
+);
+var category = cva(
+  [
+    "inline-flex items-center gap-step-xs",
+    "rounded-pill px-step-sm py-0.5",
+    "font-mono text-chip",
+    "border transition-standard"
+  ],
+  {
+    variants: {
+      active: {
+        false: "border-warm/28 bg-transparent text-warm",
+        true: "border-warm bg-warm text-warm-on"
+      }
+    },
+    defaultVariants: { active: false }
+  }
+);
+var metric = ["inline-flex items-center gap-step-xs", "rounded-pill", "font-mono text-chip text-text-muted"];
+var alert = cva("w-full rounded-card border p-step-md font-sans text-ui", {
+  variants: {
+    variant: {
+      accent: "text-text-secondary",
+      success: "text-text-secondary",
+      warning: "text-text-secondary",
+      error: "text-text-secondary"
+    },
+    emphasis: {
+      subtle: "",
+      strong: ""
+    }
+  },
+  compoundVariants: [
+    { variant: "accent", emphasis: "subtle", class: "border-accent/22 bg-accent/8" },
+    { variant: "success", emphasis: "subtle", class: "border-success/22 bg-success/8" },
+    { variant: "warning", emphasis: "subtle", class: "border-warning/22 bg-warning/8" },
+    { variant: "error", emphasis: "subtle", class: "border-error/22 bg-error/8" },
+    { variant: "accent", emphasis: "strong", class: "border-accent bg-accent/10" },
+    { variant: "success", emphasis: "strong", class: "border-success bg-success/10" },
+    { variant: "warning", emphasis: "strong", class: "border-warning bg-warning/10" },
+    { variant: "error", emphasis: "strong", class: "border-error bg-error/10" }
+  ],
+  defaultVariants: { variant: "accent", emphasis: "subtle" }
+});
+var avatar = cva(
+  "relative flex shrink-0 overflow-hidden rounded-pill bg-surface-raised border border-hairline",
+  {
+    variants: {
+      size: {
+        sm: "size-8",
+        md: "size-10",
+        lg: "size-14",
+        xl: "size-24"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+
+// src/variants/card.ts
+var CARD_SURFACE = "rounded-card border-hairline bg-surface border";
+var CARD_HOVER = "transition-standard hover:border-hairline-hover";
+var CARD = [
+  "group block cursor-pointer",
+  CARD_SURFACE,
+  CARD_HOVER,
+  "focus-ring"
+];
+
+export { CARD, CARD_HOVER, CARD_SURFACE, alert, avatar, badge, button, category, metric };

package/dist/chunk-GCRII2KQ.js

@@ -0,0 +1,86 @@
+// src/theme/index.ts
+var THEME_KEY = "arrecife-theme";
+var THEME_ATTRIBUTE = "data-theme";
+var THEME_EVENT = "arrecife:theme";
+var isTheme = (value) => value === "dark" || value === "light";
+function currentTheme() {
+  if (typeof document === "undefined") return "dark";
+  const set = document.documentElement.getAttribute(THEME_ATTRIBUTE);
+  return isTheme(set) ? set : "dark";
+}
+function storedTheme() {
+  if (typeof localStorage === "undefined") return null;
+  try {
+    const value = localStorage.getItem(THEME_KEY);
+    return isTheme(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+function preferredTheme({ base } = {}) {
+  const stored = storedTheme();
+  if (stored) return stored;
+  if (base) return base;
+  if (typeof matchMedia === "undefined") return "dark";
+  return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+function applyTheme(theme, persist = true) {
+  if (typeof document === "undefined") return;
+  document.documentElement.setAttribute(THEME_ATTRIBUTE, theme);
+  document.documentElement.style.colorScheme = theme;
+  if (persist) {
+    try {
+      localStorage.setItem(THEME_KEY, theme);
+    } catch {
+    }
+  }
+  dispatchEvent(new CustomEvent(THEME_EVENT, { detail: theme }));
+}
+function toggleTheme() {
+  const next = currentTheme() === "dark" ? "light" : "dark";
+  applyTheme(next);
+  return next;
+}
+function watchTheme(onChange, options = {}) {
+  if (typeof window === "undefined") return () => {
+  };
+  const own = (event) => {
+    const detail = event.detail;
+    if (isTheme(detail)) onChange(detail);
+  };
+  const otherTab = (event) => {
+    if (event.key !== THEME_KEY) return;
+    const theme = isTheme(event.newValue) ? event.newValue : preferredTheme(options);
+    applyTheme(theme, false);
+    onChange(theme);
+  };
+  addEventListener(THEME_EVENT, own);
+  addEventListener("storage", otherTab);
+  return () => {
+    removeEventListener(THEME_EVENT, own);
+    removeEventListener("storage", otherTab);
+  };
+}
+function themeScript({ base } = {}) {
+  return [
+    "(function () {",
+    "  var KEY = " + JSON.stringify(THEME_KEY) + ";",
+    "  function resolve() {",
+    "    try {",
+    "      var stored = localStorage.getItem(KEY);",
+    '      if (stored === "dark" || stored === "light") return stored;',
+    "    } catch (e) {}",
+    base ? "    return " + JSON.stringify(base) + ";" : '    return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";',
+    "  }",
+    "  function apply() {",
+    "    var theme = resolve();",
+    "    document.documentElement.setAttribute(" + JSON.stringify(THEME_ATTRIBUTE) + ", theme);",
+    "    document.documentElement.style.colorScheme = theme;",
+    "  }",
+    "  apply();",
+    '  document.addEventListener("astro:after-swap", apply);',
+    "})();"
+  ].join("\n");
+}
+
+export { THEME_ATTRIBUTE, THEME_EVENT, THEME_KEY, applyTheme, currentTheme, preferredTheme, storedTheme, themeScript, toggleTheme, watchTheme };

package/dist/{chunk-YZ2SDOVZ.js → chunk-JN3IS5OS.js}

@@ -1,20 +1,20 @@
-import { aletas, RUTA_ASSETS, poses, caras } from './chunk-E3OMP2DL.js';
-import { cn } from './chunk-NHS7ETKJ.js';
-import { naming, tagline } from './chunk-TSPJOM6K.js';
+import { cn } from './chunk-2WPWEIMD.js';
+import { fins, ASSETS_PATH, poses, faces } from './chunk-CKRSQPTX.js';
+import { naming, tagline } from './chunk-OMKSESQB.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-function Isotipo({
-  sobre = "oscuro",
-  basePath = RUTA_ASSETS,
+function Isotype({
+  background = "dark",
+  basePath = ASSETS_PATH,
   alt = "",
   className,
   ...props
 }) {
-  const archivo = sobre === "oscuro" ? aletas.espuma : aletas.color;
+  const file = background === "dark" ? fins.foam : fins.color;
   return /* @__PURE__ */ jsx(
     "img",
     {
-      src: `${basePath}/${archivo}`,
+      src: `${basePath}/${file}`,
       alt,
       width: 147,
       height: 111,
@@ -24,44 +24,44 @@ function Isotipo({
   );
 }
 function Logo({
-  sobre = "oscuro",
-  basePath = RUTA_ASSETS,
-  soloIsotipo = false,
-  conLema = false,
+  background = "dark",
+  basePath = ASSETS_PATH,
+  isotypeOnly = false,
+  withTagline = false,
   className,
   ...props
 }) {
-  const conAleta = /* @__PURE__ */ jsx(
-    Isotipo,
+  const withFin = /* @__PURE__ */ jsx(
+    Isotype,
     {
-      sobre,
+      background,
       basePath,
-      alt: soloIsotipo ? naming.wordmark : "",
-      className: conLema ? "h-9 w-auto" : "h-7 w-auto"
+      alt: isotypeOnly ? naming.wordmark : "",
+      className: withTagline ? "h-9 w-auto" : "h-7 w-auto"
     }
   );
   const wordmark = /* @__PURE__ */ jsx("span", { className: "text-ui font-display text-text-primary font-bold tracking-[-0.02em]", children: naming.wordmark });
-  if (soloIsotipo) {
-    return /* @__PURE__ */ jsx("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: conAleta });
+  if (isotypeOnly) {
+    return /* @__PURE__ */ jsx("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: withFin });
   }
-  if (conLema) {
+  if (withTagline) {
     return /* @__PURE__ */ jsxs("span", { className: cn("gap-step-sm inline-flex items-center", className), ...props, children: [
-      conAleta,
+      withFin,
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "bg-hairline h-8 w-px shrink-0" }),
       /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
         wordmark,
-        /* @__PURE__ */ jsx("span", { className: "text-eyebrow font-mono text-text-muted uppercase", children: tagline.corto })
+        /* @__PURE__ */ jsx("span", { className: "text-eyebrow font-mono text-text-muted uppercase", children: tagline.short })
       ] })
     ] });
   }
   return /* @__PURE__ */ jsxs("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: [
-    conAleta,
+    withFin,
     wordmark
   ] });
 }
-function Mascota({
+function Mascot({
   pose,
-  basePath = RUTA_ASSETS,
+  basePath = ASSETS_PATH,
   alt = "",
   className,
   ...props
@@ -76,9 +76,9 @@ function Mascota({
     }
   );
 }
-function CaraDeMascota({
-  expresion,
-  basePath = RUTA_ASSETS,
+function MascotFace({
+  expression,
+  basePath = ASSETS_PATH,
   alt = "",
   className,
   ...props
@@ -86,7 +86,7 @@ function CaraDeMascota({
   return /* @__PURE__ */ jsx(
     "img",
     {
-      src: `${basePath}/${caras[expresion]}`,
+      src: `${basePath}/${faces[expression]}`,
       alt,
       className: cn("h-auto w-full max-w-24 select-none", className),
       ...props
@@ -94,4 +94,4 @@ function CaraDeMascota({
   );
 }
 
-export { CaraDeMascota, Isotipo, Logo, Mascota };
+export { Isotype, Logo, Mascot, MascotFace };

package/dist/chunk-ODBFN44D.js

@@ -0,0 +1,45 @@
+import { cva } from 'class-variance-authority';
+
+// src/variants/typography.ts
+var text = cva("", {
+  variants: {
+    variant: {
+      display: "text-display font-display",
+      // Large metrics: 46px of display. It is the only scale designed for a
+      // number, which is why its line height is 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: the deck on interior pages and the large button.
+      lead: "text-lead font-sans",
+      ui: "text-ui font-sans",
+      label: "text-label font-sans",
+      // The two badge scales. `tag` is status (sans 12.5/500) and `chip` is
+      // category and metric (mono 11.5). Neither transforms the text.
+      tag: "text-tag font-sans",
+      chip: "text-chip font-mono",
+      // Mono with NO transform: dates, paths, versions, file names and the
+      // footer signature. It is the step that was missing, and the reason every
+      // call site ended up writing `variant="eyebrow" className="normal-case"`.
+      meta: "text-meta font-mono",
+      // `uppercase` does not fit in a size token: text-transform is not a
+      // modifier of --text-*. Which is why the variant sets it, not 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" }
+});
+
+export { text };