@eduardoalvarez/arrecife 0.5.0 → 0.6.0

package/dist/{chunk-YZ2SDOVZ.js → chunk-6O3KWB6P.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 { fins, ASSETS_PATH, poses, faces } from './chunk-CKRSQPTX.js';
+import { cn } from './chunk-XKYHTOUJ.js';
+import { naming, tagline } from './chunk-O4TAH7YJ.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-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-ZEOQKRQ7.js → chunk-DKCN7BAL.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-NHS7ETKJ.js';
+import { cn } from './chunk-XKYHTOUJ.js';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { jsx } from 'react/jsx-runtime';
 

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-JMOOFZ3B.js

@@ -0,0 +1,42 @@
+import { text } from './chunk-ODBFN44D.js';
+import { cn } from './chunk-XKYHTOUJ.js';
+import { Slot } from '@radix-ui/react-slot';
+import 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var LABEL = {
+  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"
+};
+function Text({
+  className,
+  variant,
+  tone,
+  as,
+  asChild = false,
+  measure,
+  children,
+  ...props
+}) {
+  const scale = variant ?? "body";
+  const clamp = measure ?? scale === "body";
+  const classes = cn(text({ variant, tone }), clamp && "max-w-measure", className);
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { className: classes, ...props, children });
+  }
+  const Label = as ?? LABEL[scale];
+  return /* @__PURE__ */ jsx(Label, { className: classes, ...props, children });
+}
+
+export { Text };

package/dist/chunk-O4TAH7YJ.js

@@ -0,0 +1,276 @@
+// src/tokens/tokens.ts
+var dark = {
+  background: "#091319",
+  //          abyss · page background
+  surface: "#10202B",
+  //             trench · cards and panels
+  surfaceRaised: "#17303E",
+  //       current · menus, active tabs
+  border: "#22414F",
+  //              control borders
+  hairline: "#1E3441",
+  //            subtle dividers
+  hairlineHover: "#2C4D5D",
+  //       hairline on card hover
+  textPrimary: "#EDF4F3",
+  //         foam              16.84:1
+  textSecondary: "#A7BCC4",
+  //       haze               9.50:1
+  textMuted: "#71919C",
+  //           plankton           5.57:1  never under 13px
+  accent: "#35D6C0",
+  //              biolume           10.31:1  interactive
+  accentHover: "#5FE3D1",
+  accentOn: "#06171A",
+  //            ink over biolume
+  warm: "#F2A65A",
+  //                sand               9.28:1  human and conversion
+  warmHover: "#F7BB7D",
+  warmOn: "#2A1605",
+  //              ink over sand
+  success: "#4FB477",
+  warning: "#E8A33D",
+  error: "#E15757",
+  //                                 4.51:1 over surface
+  /**
+   * The destructive fill. It is NOT `error`, and the difference is the role.
+   *
+   * `error` is a TEXT color: it has to read against a dark surface, so it sits
+   * mid-red. `danger` is a FILL: what has to read is the ink ON TOP of it, so it
+   * goes lighter. Same reasoning as `accent` and `accentOn` — one is measured
+   * against the page, the other against what it carries.
+   *
+   * Measured: ink 6.53:1 over the fill and 7.92:1 over the hover; the fill
+   * itself 6.71:1 over abyss, 5.94 over surface and 4.91 over surfaceRaised, so
+   * the outline variant reads as text on all three.
+   */
+  danger: "#F4736B",
+  dangerHover: "#F78D86",
+  dangerOn: "#2B0A08"
+  //             ink over danger    6.53:1
+};
+var light = {
+  background: "#F6F2EA",
+  //          paper
+  surface: "#FFFFFF",
+  surfaceRaised: "#EFE9DE",
+  border: "#E6DFD2",
+  hairline: "#EBE6DC",
+  hairlineHover: "#D3C8B2",
+  //       hairline on card hover
+  textPrimary: "#0B1524",
+  //                           16.40:1
+  textSecondary: "#3D4B58",
+  textMuted: "#626A75",
+  //                             4.53:1 over surfaceRaised
+  accent: "#0D7C6F",
+  //              dark biolume       4.55:1
+  accentHover: "#0C7466",
+  accentOn: "#FFFFFF",
+  warm: "#A65B27",
+  //                dark sand          4.54:1
+  warmHover: "#96511F",
+  warmOn: "#FFF7EE",
+  success: "#0F6B52",
+  warning: "#8D6111",
+  //                               4.51:1 over surfaceRaised
+  error: "#C0392B",
+  /**
+   * In light mode `danger` and `error` land on the same hex, and that is not an
+   * oversight: over paper a red dark enough to carry white ink is also the red
+   * that reads as text. In dark they part company because the fill has to be
+   * lighter than the text color, not darker.
+   *
+   * Measured: ink 5.11:1 over the fill and 6.61:1 over the hover; the fill
+   * itself 4.87:1 over paper, 5.44 over surface and 4.50 over surfaceRaised —
+   * the last one is exactly on the AA line, which is where every light semantic
+   * in this palette sits.
+   */
+  danger: "#C0392B",
+  dangerHover: "#A32F22",
+  dangerOn: "#FFF6F4"
+  //                              5.11:1 over danger
+};
+var colors = { dark, light };
+var brand = {
+  /** The mascot's body. 4.22:1 → FILL ONLY, NEVER text. */
+  body: "#3E7CB1",
+  /** Spot pattern. */
+  spots: "#C2D7E7",
+  /** Hull · outline, and the background of code blocks. */
+  hull: "#0B1524"
+};
+var fonts = {
+  /** Headlines and large numbers ONLY. Never body copy. */
+  display: '"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif',
+  /** Body and interface. */
+  sans: '"Geist", ui-sans-serif, system-ui, sans-serif',
+  /** Code, paths, labels, metadata, the CLI signature. */
+  mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
+};
+var typeScale = {
+  display: { family: "display", size: 76, lineHeight: 0.96, weight: 800, tracking: "-0.035em" },
+  /** Large metrics. Numbers, not prose: line height 1 and no descenders. */
+  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. The large button, and the deck on interior pages.
+   *
+   * It earns its own step because the identity document uses it TWICE, in two
+   * different pieces: «lg 15/30 r12» with 17px text, and «h1 44/700 · deck 17px
+   * · context paragraph 15px». One use would not have justified splitting the
+   * gap between `ui` (15) and `body` (18); two did.
+   */
+  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 },
+  /**
+   * The status-badge scale: sans 12.5/500, squared off.
+   *
+   * That is half a pixel below `label`, and this time the half pixel matters: a
+   * status badge sits inside a table or next to a title, and at 13 it competed
+   * with the text it accompanies. The document specifies 12.5 and it shows.
+   */
+  tag: { family: "sans", size: 12.5, lineHeight: 1.4, weight: 500 },
+  /**
+   * The category and metric scale: mono 11.5.
+   *
+   * It breaks the floor set by `limits.minScreenPx`, deliberately. That floor
+   * protects TEXT — what you read in a sentence — and a one-word pill is not
+   * running text: it is a mark. Contrast is still measured and still passes AA
+   * (plankton 5.57:1 over abyss), which is the part that is not negotiable.
+   *
+   * At 13 the three badge families grew past the size of a small button and
+   * outweighed the title they accompany. See `docs/decisions.md`.
+   */
+  chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
+  /**
+   * Mono with NO transform: dates, paths, versions, file names, the footer
+   * signature and metric labels. It is most of the mono in the system.
+   *
+   * It exists because `eyebrow` ships `uppercase` and that is not a preference
+   * you can switch off: it IS the eyebrow scale. An `18 Aug 2026` in small caps
+   * or a `pose-laptop-coffee.png` in all caps are wrong, and without this step
+   * the only way out was a `normal-case` at every call site.
+   *
+   * The document says 12.5. This is 13 for the same reason `textMuted` was
+   * corrected: `limits.minScreenPx` is 13 and plankton is «never under 13px».
+   * This scale is exactly where muted metadata gets written, so putting it at
+   * 12.5 would have made its most common use illegible by half a pixel.
+   */
+  meta: { family: "mono", size: 13, lineHeight: 1.6, weight: 400 },
+  eyebrow: { family: "mono", size: 12, tracking: "0.12em", transform: "uppercase" }
+};
+var limits = {
+  /** Absolute minimum on screen. */
+  minScreenPx: 13,
+  /** Absolute minimum in print. */
+  minPrintPt: 12,
+  /** Maximum body measure. */
+  measure: "68ch"
+};
+var radius = {
+  chip: 6,
+  control: 10,
+  card: 14,
+  panel: 16,
+  pill: 999
+};
+var control = {
+  sm: 14,
+  md: 22,
+  lg: 30,
+  /** Icon button: square, no text. */
+  icon: 42,
+  /**
+   * The dense icon button, 32×32.
+   *
+   * 42 is the right measure for a control you hit with a thumb, and the four
+   * reading sites are where that fits. `cursos` is the odd one out: it is the
+   * only admin app of the set, with three actions per table row, and at 42 the
+   * row grows with them — the original used 24 and 28.
+   *
+   * It is 32 and not 28 because 32 is `sm`'s height. A dense icon button lines
+   * up with a small text button, so a toolbar mixing the two stays on one
+   * baseline; 28 would have been a fifth height that matches nothing.
+   *
+   * It does not replace `icon`. A page's primary action stays at 42; this is for
+   * a row of a table. See `docs/decisions.md` § 22.
+   */
+  iconSm: 32
+};
+var spacing = {
+  stepXs: 8,
+  stepSm: 12,
+  stepMd: 16,
+  stepLg: 26,
+  stepXl: 40,
+  section: 96
+};
+var size = {
+  /** Navigation bar height. */
+  nav: 64,
+  /** Reading column width. */
+  content: 760,
+  /** Maximum page width. */
+  wide: 1180
+};
+var syntax = {
+  /** The hull. It is the block background in both modes. */
+  background: brand.hull,
+  /** Identifiers, functions, types, variables. */
+  identifier: dark.textPrimary,
+  /** Strings, numbers, booleans, null. */
+  literal: dark.accent,
+  /** Keywords, control flow, `import`, `this`. */
+  keyword: dark.warm,
+  /** Comments and punctuation. */
+  comment: dark.textMuted,
+  /** `markup.deleted`, `invalid`. */
+  invalid: dark.error
+};
+var series = {
+  dark: [dark.accent, dark.warm, brand.body, dark.textMuted],
+  light: [light.accent, light.warm, brand.body, light.textMuted]
+};
+var deep = "#0D2129";
+var gradient = {
+  dark: {
+    hero: `linear-gradient(160deg, ${dark.background} 60%, ${deep} 100%)`,
+    section: `linear-gradient(150deg, ${dark.surface} 0%, ${deep} 100%)`,
+    /** The one used by the article OG template. 145°, from the document. */
+    og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
+  },
+  light: {
+    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surfaceRaised} 100%)`,
+    section: `linear-gradient(150deg, ${light.surface} 0%, ${light.surfaceRaised} 100%)`,
+    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surfaceRaised} 100%)`
+  }
+};
+var shadow = {
+  standard: "0 1px 2px rgba(0, 0, 0, 0.35)"
+};
+var motion = {
+  duration: "150ms",
+  easing: "ease-out",
+  properties: "color, background-color, border-color, fill, stroke"
+};
+var tagline = {
+  /** Hero. */
+  long: "Ayudo a equipos de ingenier\xEDa a escalar con criterio",
+  /** Header, one line. */
+  short: "Ayudo a equipos a escalar con criterio",
+  /** LinkedIn. */
+  en: "Helping engineering teams scale with judgment"
+};
+var naming = {
+  wordmark: "Eduardo \xC1lvarez",
+  mascot: "Tiburonc\xEDn",
+  /** The domain, for the footer CLI signature: `$ cd ~/eduardoalvarez.dev/2026`. */
+  domain: "eduardoalvarez.dev"
+};
+
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale };

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 };

package/dist/{chunk-VPT32GPG.js → chunk-PMN7NR3G.js}

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

package/dist/chunk-XKYHTOUJ.js

@@ -0,0 +1,27 @@
+import { spacing, control, radius, typeScale } from './chunk-O4TAH7YJ.js';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+var kebab = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+var scales = Object.keys(typeScale);
+var radii = Object.keys(radius);
+var namespaces = Object.keys(spacing).map(kebab);
+var controls = Object.keys(control).map((name) => `control-${kebab(name)}`);
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: scales }],
+      rounded: [{ rounded: radii }],
+      p: [{ p: namespaces }],
+      px: [{ px: [...namespaces, ...controls] }],
+      py: [{ py: namespaces }],
+      gap: [{ gap: namespaces }],
+      size: [{ size: controls }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };