@eduardoalvarez/arrecife 0.6.0 → 0.8.0

package/dist/icons/index.cjs

@@ -0,0 +1,149 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/cn.ts
+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/`.
+   */
+  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 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/0.6.md` § 22.
+   */
+  iconSm: 32
+};
+var spacing = {
+  stepXs: 8,
+  stepSm: 12,
+  stepMd: 16,
+  stepLg: 26,
+  stepXl: 40,
+  section: 96
+};
+
+// src/lib/cn.ts
+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 = tailwindMerge.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.clsx(inputs));
+}
+var ICON_WEIGHT = "regular";
+var TONE_WEIGHT = {
+  action: ICON_WEIGHT,
+  current: "fill",
+  quiet: "light"
+};
+function Icon({ as: Glyph, tone = "action", label, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Glyph,
+    {
+      size: "1em",
+      weight: TONE_WEIGHT[tone],
+      "aria-hidden": label ? void 0 : true,
+      "aria-label": label,
+      role: label ? "img" : void 0,
+      focusable: "false",
+      className: cn("shrink-0", className),
+      ...props
+    }
+  );
+}
+
+exports.ICON_WEIGHT = ICON_WEIGHT;
+exports.Icon = Icon;
+exports.TONE_WEIGHT = TONE_WEIGHT;

package/dist/icons/index.d.cts

@@ -0,0 +1,94 @@
+import * as react from 'react';
+import { IconWeight, IconProps as IconProps$1, Icon as Icon$1 } from '@phosphor-icons/react';
+
+/**
+ * The system adopts `@phosphor-icons/react`, and this is the whole of what
+ * «adopts» means: an optional peer dependency, and one place that fixes what a
+ * call site was getting wrong on its own.
+ *
+ * WHY IT IS HERE AT ALL. The position used to be that the system has no icons.
+ * That was right for what the library was — five reading sites, where
+ * `lib/glyphs.tsx` covers everything a primitive needs — and it stopped being
+ * right when an admin panel arrived. Measured across the four consumers, the one
+ * admin app imports 89 distinct icons in 229 places and the other three import
+ * 9, 0 and 0. Seventy-seven of the 89 are domain icons for a course admin —
+ * `GraduationCap`, `TicketPercent`, `Webhook` — and no design system was ever
+ * going to ship them. The set is not the problem.
+ *
+ * WHAT WAS ACTUALLY BROKEN is that nobody said how they should be DRAWN, so they
+ * were sized by hand in five different ways — `size-4` twenty-six times, then
+ * `size-3.5`, `size-3`, `size-6`, `size-7` — with no rule behind any of them.
+ *
+ * WHY PHOSPHOR AND NOT A STROKE-WIDTH SET. Phosphor bakes the weight into the
+ * path instead of exposing `strokeWidth`, and its `regular` lands almost exactly
+ * on the one stroke the identity document names. Measured on `Minus`, whose
+ * regular path is a bar of radius 8 on a 256 grid:
+ *
+ *   phosphor regular   16/256  = 0.0625em
+ *   the document       1.6/24  = 0.0667em   «funcionales en trazo 1.6»
+ *
+ * Six per cent apart, which is no pixel on any screen. Nothing has to be derived
+ * and no number has to be invented: `regular` IS the system's line.
+ *
+ * THE SIZE IS 1em, which is Phosphor's own default and also the rule every icon
+ * in this library already follows. An icon beside `text-label` is 13px and
+ * beside `text-ui` is 15px, and nobody picks a number.
+ *
+ * THE WEIGHT IS AN AXIS, AND IT IS THE ONLY ONE AN ICON HAS. There are three
+ * roles and `tone` is how you name them; the weights themselves are not a prop,
+ * because Phosphor's other three — `thin`, `bold`, `duotone` — say nothing this
+ * system means. See `TONE_WEIGHT` below and `docs/decisions/0.7.md` § 35.
+ *
+ * `lib/glyphs.tsx` is the outlier and it is NOT reconciled here: it draws at
+ * 1.75 on a 16 grid, which is 0.109em — three quarters heavier than both the
+ * document and this. Aligning it restyles every primitive in the library and is
+ * its own change. See `docs/decisions/0.7.md` § 29.
+ *
+ * IN NEXT, IMPORT FROM `@phosphor-icons/react/ssr` inside a Server Component.
+ * Phosphor's default build reads `IconContext` through `useContext`, and a hook
+ * in a Server Component throws — it ships no `"use client"` to stop you. The
+ * `/ssr` entry is the same icons without the context read. This wrapper works
+ * with either.
+ */
+type IconTone = 'action' | 'current' | 'quiet';
+type IconProps = Omit<IconProps$1, 'size' | 'weight' | 'ref'> & {
+    /** The Phosphor icon itself, passed as a component: `<Icon as={Books} />`. */
+    as: Icon$1;
+    /**
+     * WHAT THE ICON IS DOING, which is what picks the weight. Three values, and
+     * there is no fourth: `action` is the default and the system's line, `current`
+     * is the one of a set you are on, `quiet` is furniture that is not a control.
+     * `weight` is deliberately not a prop — see `TONE_WEIGHT`.
+     */
+    tone?: IconTone | undefined;
+    /**
+     * The accessible name. WITHOUT it the icon is decorative and gets
+     * `aria-hidden`, which is the right default: most icons sit beside their own
+     * label and announcing them twice is noise.
+     *
+     * If the icon is inside a button with no text, the name belongs on the BUTTON
+     * and not here — that is what `Button size="icon"` asks for.
+     */
+    label?: string | undefined;
+};
+/** Phosphor's own name for the system's line. It is what `tone="action"` resolves to. */
+declare const ICON_WEIGHT: IconWeight;
+/**
+ * The three roles, and the weight each one is drawn at. This is the whole of the
+ * weight axis: Phosphor ships six and this system reads three, because the other
+ * three — `thin`, `bold`, `duotone` — have no role behind them here.
+ *
+ * `current` is the one that earns the axis. A sidebar's active item already
+ * carries `aria-current="page"` and paints itself biolume, and colour alone is
+ * the one channel WCAG 1.4.1 says may not carry meaning by itself. A filled
+ * glyph is the second channel, and it survives a forced-colours mode where the
+ * biolume does not.
+ *
+ * `quiet` is for the icon that is not a control and not a state — a marker in a
+ * metadata row, a bullet that happens to be a shape. At `regular` it competes
+ * with the text it is annotating; at `light` it sits under it.
+ */
+declare const TONE_WEIGHT: Record<IconTone, IconWeight>;
+declare function Icon({ as: Glyph, tone, label, className, ...props }: IconProps): react.JSX.Element;
+
+export { ICON_WEIGHT, Icon, type IconProps, type IconTone, TONE_WEIGHT };

package/dist/icons/index.d.ts

@@ -0,0 +1,94 @@
+import * as react from 'react';
+import { IconWeight, IconProps as IconProps$1, Icon as Icon$1 } from '@phosphor-icons/react';
+
+/**
+ * The system adopts `@phosphor-icons/react`, and this is the whole of what
+ * «adopts» means: an optional peer dependency, and one place that fixes what a
+ * call site was getting wrong on its own.
+ *
+ * WHY IT IS HERE AT ALL. The position used to be that the system has no icons.
+ * That was right for what the library was — five reading sites, where
+ * `lib/glyphs.tsx` covers everything a primitive needs — and it stopped being
+ * right when an admin panel arrived. Measured across the four consumers, the one
+ * admin app imports 89 distinct icons in 229 places and the other three import
+ * 9, 0 and 0. Seventy-seven of the 89 are domain icons for a course admin —
+ * `GraduationCap`, `TicketPercent`, `Webhook` — and no design system was ever
+ * going to ship them. The set is not the problem.
+ *
+ * WHAT WAS ACTUALLY BROKEN is that nobody said how they should be DRAWN, so they
+ * were sized by hand in five different ways — `size-4` twenty-six times, then
+ * `size-3.5`, `size-3`, `size-6`, `size-7` — with no rule behind any of them.
+ *
+ * WHY PHOSPHOR AND NOT A STROKE-WIDTH SET. Phosphor bakes the weight into the
+ * path instead of exposing `strokeWidth`, and its `regular` lands almost exactly
+ * on the one stroke the identity document names. Measured on `Minus`, whose
+ * regular path is a bar of radius 8 on a 256 grid:
+ *
+ *   phosphor regular   16/256  = 0.0625em
+ *   the document       1.6/24  = 0.0667em   «funcionales en trazo 1.6»
+ *
+ * Six per cent apart, which is no pixel on any screen. Nothing has to be derived
+ * and no number has to be invented: `regular` IS the system's line.
+ *
+ * THE SIZE IS 1em, which is Phosphor's own default and also the rule every icon
+ * in this library already follows. An icon beside `text-label` is 13px and
+ * beside `text-ui` is 15px, and nobody picks a number.
+ *
+ * THE WEIGHT IS AN AXIS, AND IT IS THE ONLY ONE AN ICON HAS. There are three
+ * roles and `tone` is how you name them; the weights themselves are not a prop,
+ * because Phosphor's other three — `thin`, `bold`, `duotone` — say nothing this
+ * system means. See `TONE_WEIGHT` below and `docs/decisions/0.7.md` § 35.
+ *
+ * `lib/glyphs.tsx` is the outlier and it is NOT reconciled here: it draws at
+ * 1.75 on a 16 grid, which is 0.109em — three quarters heavier than both the
+ * document and this. Aligning it restyles every primitive in the library and is
+ * its own change. See `docs/decisions/0.7.md` § 29.
+ *
+ * IN NEXT, IMPORT FROM `@phosphor-icons/react/ssr` inside a Server Component.
+ * Phosphor's default build reads `IconContext` through `useContext`, and a hook
+ * in a Server Component throws — it ships no `"use client"` to stop you. The
+ * `/ssr` entry is the same icons without the context read. This wrapper works
+ * with either.
+ */
+type IconTone = 'action' | 'current' | 'quiet';
+type IconProps = Omit<IconProps$1, 'size' | 'weight' | 'ref'> & {
+    /** The Phosphor icon itself, passed as a component: `<Icon as={Books} />`. */
+    as: Icon$1;
+    /**
+     * WHAT THE ICON IS DOING, which is what picks the weight. Three values, and
+     * there is no fourth: `action` is the default and the system's line, `current`
+     * is the one of a set you are on, `quiet` is furniture that is not a control.
+     * `weight` is deliberately not a prop — see `TONE_WEIGHT`.
+     */
+    tone?: IconTone | undefined;
+    /**
+     * The accessible name. WITHOUT it the icon is decorative and gets
+     * `aria-hidden`, which is the right default: most icons sit beside their own
+     * label and announcing them twice is noise.
+     *
+     * If the icon is inside a button with no text, the name belongs on the BUTTON
+     * and not here — that is what `Button size="icon"` asks for.
+     */
+    label?: string | undefined;
+};
+/** Phosphor's own name for the system's line. It is what `tone="action"` resolves to. */
+declare const ICON_WEIGHT: IconWeight;
+/**
+ * The three roles, and the weight each one is drawn at. This is the whole of the
+ * weight axis: Phosphor ships six and this system reads three, because the other
+ * three — `thin`, `bold`, `duotone` — have no role behind them here.
+ *
+ * `current` is the one that earns the axis. A sidebar's active item already
+ * carries `aria-current="page"` and paints itself biolume, and colour alone is
+ * the one channel WCAG 1.4.1 says may not carry meaning by itself. A filled
+ * glyph is the second channel, and it survives a forced-colours mode where the
+ * biolume does not.
+ *
+ * `quiet` is for the icon that is not a control and not a state — a marker in a
+ * metadata row, a bullet that happens to be a shape. At `regular` it competes
+ * with the text it is annotating; at `light` it sits under it.
+ */
+declare const TONE_WEIGHT: Record<IconTone, IconWeight>;
+declare function Icon({ as: Glyph, tone, label, className, ...props }: IconProps): react.JSX.Element;
+
+export { ICON_WEIGHT, Icon, type IconProps, type IconTone, TONE_WEIGHT };

package/dist/icons/index.js

@@ -0,0 +1,28 @@
+import { cn } from '../chunk-FAAGZG7A.js';
+import '../chunk-FGFNK72B.js';
+import '../chunk-MLKGABMK.js';
+import { jsx } from 'react/jsx-runtime';
+
+var ICON_WEIGHT = "regular";
+var TONE_WEIGHT = {
+  action: ICON_WEIGHT,
+  current: "fill",
+  quiet: "light"
+};
+function Icon({ as: Glyph, tone = "action", label, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Glyph,
+    {
+      size: "1em",
+      weight: TONE_WEIGHT[tone],
+      "aria-hidden": label ? void 0 : true,
+      "aria-label": label,
+      role: label ? "img" : void 0,
+      focusable: "false",
+      className: cn("shrink-0", className),
+      ...props
+    }
+  );
+}
+
+export { ICON_WEIGHT, Icon, TONE_WEIGHT };

package/dist/index-BbRplw_B.d.cts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+/**
+ * What every icon in this catalogue accepts, and it is exported for one concrete
+ * reason: the grouped form exists so a project can ITERATE the catalogue, and
+ * typing `Record<string, ComponentType<…>>` needs a name for the element.
+ *
+ * There is no `GitHubProps`: ten identical signatures under ten names inform
+ * nobody, and the generator would print the same row ten times.
+ */
+type SocialIconProps = SVGProps<SVGSVGElement>;
+declare const GitHub: (props: SocialIconProps) => react.JSX.Element;
+declare const LinkedIn: (props: SocialIconProps) => react.JSX.Element;
+declare const X: (props: SocialIconProps) => react.JSX.Element;
+declare const Instagram: (props: SocialIconProps) => react.JSX.Element;
+declare const Discord: (props: SocialIconProps) => react.JSX.Element;
+declare const YouTube: (props: SocialIconProps) => react.JSX.Element;
+declare const Rss: (props: SocialIconProps) => react.JSX.Element;
+declare const Email: (props: SocialIconProps) => react.JSX.Element;
+/**
+ * The newsletter. It plays the same role as `Rss` — a way to follow, not a
+ * social network — which is why it belongs in this catalogue and does not open
+ * the door to an icon library.
+ *
+ * It is named for what it means and not for what it draws, like everything else
+ * in the system: it is a bell, and it is called `Newsletter`. `eduardoalvarez.dev`
+ * had it drawn in the project, following the contract by hand so it would not
+ * clash while it waited.
+ */
+declare const Newsletter: (props: SocialIconProps) => react.JSX.Element;
+/**
+ * «My other site»: the personal domain in a footer full of social networks.
+ *
+ * The tenth, and it got in by the same test as `Newsletter` rather than by being
+ * useful: it is a way to reach the author, it is not a network, and every one of
+ * the five projects has more than one domain. What it replaces is Phosphor's
+ * `Globe` in the footer of `cursos` — a correct globe drawn with another set's
+ * pen, in a row where the other six come from here.
+ */
+declare const Website: (props: SocialIconProps) => react.JSX.Element;
+
+declare const index_Discord: typeof Discord;
+declare const index_Email: typeof Email;
+declare const index_GitHub: typeof GitHub;
+declare const index_Instagram: typeof Instagram;
+declare const index_LinkedIn: typeof LinkedIn;
+declare const index_Newsletter: typeof Newsletter;
+declare const index_Rss: typeof Rss;
+type index_SocialIconProps = SocialIconProps;
+declare const index_Website: typeof Website;
+declare const index_X: typeof X;
+declare const index_YouTube: typeof YouTube;
+declare namespace index {
+  export { index_Discord as Discord, index_Email as Email, index_GitHub as GitHub, index_Instagram as Instagram, index_LinkedIn as LinkedIn, index_Newsletter as Newsletter, index_Rss as Rss, type index_SocialIconProps as SocialIconProps, index_Website as Website, index_X as X, index_YouTube as YouTube };
+}
+
+export { Discord as D, Email as E, GitHub as G, Instagram as I, LinkedIn as L, Newsletter as N, Rss as R, type SocialIconProps as S, Website as W, X, YouTube as Y, index as i };

package/dist/index-BbRplw_B.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+/**
+ * What every icon in this catalogue accepts, and it is exported for one concrete
+ * reason: the grouped form exists so a project can ITERATE the catalogue, and
+ * typing `Record<string, ComponentType<…>>` needs a name for the element.
+ *
+ * There is no `GitHubProps`: ten identical signatures under ten names inform
+ * nobody, and the generator would print the same row ten times.
+ */
+type SocialIconProps = SVGProps<SVGSVGElement>;
+declare const GitHub: (props: SocialIconProps) => react.JSX.Element;
+declare const LinkedIn: (props: SocialIconProps) => react.JSX.Element;
+declare const X: (props: SocialIconProps) => react.JSX.Element;
+declare const Instagram: (props: SocialIconProps) => react.JSX.Element;
+declare const Discord: (props: SocialIconProps) => react.JSX.Element;
+declare const YouTube: (props: SocialIconProps) => react.JSX.Element;
+declare const Rss: (props: SocialIconProps) => react.JSX.Element;
+declare const Email: (props: SocialIconProps) => react.JSX.Element;
+/**
+ * The newsletter. It plays the same role as `Rss` — a way to follow, not a
+ * social network — which is why it belongs in this catalogue and does not open
+ * the door to an icon library.
+ *
+ * It is named for what it means and not for what it draws, like everything else
+ * in the system: it is a bell, and it is called `Newsletter`. `eduardoalvarez.dev`
+ * had it drawn in the project, following the contract by hand so it would not
+ * clash while it waited.
+ */
+declare const Newsletter: (props: SocialIconProps) => react.JSX.Element;
+/**
+ * «My other site»: the personal domain in a footer full of social networks.
+ *
+ * The tenth, and it got in by the same test as `Newsletter` rather than by being
+ * useful: it is a way to reach the author, it is not a network, and every one of
+ * the five projects has more than one domain. What it replaces is Phosphor's
+ * `Globe` in the footer of `cursos` — a correct globe drawn with another set's
+ * pen, in a row where the other six come from here.
+ */
+declare const Website: (props: SocialIconProps) => react.JSX.Element;
+
+declare const index_Discord: typeof Discord;
+declare const index_Email: typeof Email;
+declare const index_GitHub: typeof GitHub;
+declare const index_Instagram: typeof Instagram;
+declare const index_LinkedIn: typeof LinkedIn;
+declare const index_Newsletter: typeof Newsletter;
+declare const index_Rss: typeof Rss;
+type index_SocialIconProps = SocialIconProps;
+declare const index_Website: typeof Website;
+declare const index_X: typeof X;
+declare const index_YouTube: typeof YouTube;
+declare namespace index {
+  export { index_Discord as Discord, index_Email as Email, index_GitHub as GitHub, index_Instagram as Instagram, index_LinkedIn as LinkedIn, index_Newsletter as Newsletter, index_Rss as Rss, type index_SocialIconProps as SocialIconProps, index_Website as Website, index_X as X, index_YouTube as YouTube };
+}
+
+export { Discord as D, Email as E, GitHub as G, Instagram as I, LinkedIn as L, Newsletter as N, Rss as R, type SocialIconProps as S, Website as W, X, YouTube as Y, index as i };