@eduardoalvarez/arrecife 0.9.0 → 0.11.0

package/dist/og/index.js

@@ -1,6 +1,5 @@
 import { ASSETS_PATH, faces, poses, fins } from '../chunk-CKRSQPTX.js';
 import { fonts, dark, light, naming, gradient, tagline, typeScale } from '../chunk-FGFNK72B.js';
-import '../chunk-MLKGABMK.js';
 
 // src/og/templates.ts
 var OG = {

package/dist/shiki/index.js

@@ -1,5 +1,4 @@
 import { syntax } from '../chunk-FGFNK72B.js';
-import '../chunk-MLKGABMK.js';
 
 // src/shiki/theme.ts
 var arrecife = {

package/dist/theme/index.js

@@ -1,2 +1 @@
 export { THEME_ATTRIBUTE, THEME_EVENT, THEME_KEY, applyTheme, currentTheme, preferredTheme, storedTheme, themeScript, toggleTheme, watchTheme } from '../chunk-GCRII2KQ.js';
-import '../chunk-MLKGABMK.js';

package/dist/tokens/index.js

@@ -1,3 +1,2 @@
 export { tokens } from '../chunk-5A5GH2PF.js';
 export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from '../chunk-FGFNK72B.js';
-import '../chunk-MLKGABMK.js';

package/dist/tokens/theme.css

@@ -379,7 +379,22 @@
    focus-ring-warm exists for the ONE control the ring cannot be biolume on:
    the conversion button is the system's only sand fill, and a biolume ring
    around it puts both of the brand's accents in the same three pixels. It sets
-   only the color, so the width and the offset stay in one place. */
+   only the color, so the width and the offset stay in one place.
+
+   focus-ring-inset flips the OFFSET, and only the offset, for the same reason
+   and by the same rule: an element that is focusable but sits inside a clipped
+   container cannot wear a ring drawn 3px outside itself, because the container
+   paints it away. CodeBlock is the case — its root carries overflow-hidden so
+   its rounded corners hold, and its pre scrolls, so the pre has to be focusable.
+   With the outward ring, three of its four sides were clipped and what was left
+   read as a stray line under the header: a focus indicator that is present in
+   the CSS and invisible on screen, which is WCAG 2.4.7 failing while looking
+   fixed.
+
+   It is -3px and not 0: at 0 the ring sits exactly on the border box and reads
+   as a change of border rather than as a ring. The padding it eats into is
+   p-step-md, so it never touches the text. Reach for it ONLY when a clipping
+   ancestor is the reason — not because the outward ring looks too loud. */
 @utility focus-ring {
   &:focus-visible {
     outline: 2px solid var(--color-accent);
@@ -391,6 +406,11 @@
     outline-color: var(--color-warm);
   }
 }
+@utility focus-ring-inset {
+  &:focus-visible {
+    outline-offset: -3px;
+  }
+}
 
 /* The system's only transition, as a utility. States are communicated with
    border and color, not with movement: this class cannot animate anything else. */

package/dist/variants/index.js

@@ -1,3 +1,2 @@
 export { CARD, CARD_HOVER, CARD_SURFACE, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, category as categoryBadgeVariants, metric as metricBadgeVariants } from '../chunk-XXDATT3A.js';
 export { text as textVariants } from '../chunk-ODBFN44D.js';
-import '../chunk-MLKGABMK.js';

package/llms.txt

@@ -34,6 +34,7 @@ Requirements, and they are not optional:
 | | |
 | --- | --- |
 | React | `^19.0.0` and `react-dom` `^19.0.0`, as peer dependencies |
+| Phosphor | `@phosphor-icons/react` `^2.1.0`, as a peer dependency. **Required since 0.10.0**: every icon the library draws comes from it |
 | Tailwind | v4. **There is no v3 preset**: the output is `@theme`, which v3 does not understand |
 | Node | `>=22.18.0` for the subpaths that run at build time (`./og`, `./tokens`) |
 
@@ -41,8 +42,15 @@ Radix, `clsx`, `tailwind-merge`, `class-variance-authority`, `date-fns` and
 `react-day-picker` come as dependencies of the library. You do not need to
 install or declare them.
 
-**It ships no icon set.** The glyphs the components
-need are inline, inherit `currentColor` and measure 1em.
+**It ships no icon INVENTORY, and it does ship the drawing.** Until 0.10.0 the
+components carried a hand-drawn set of their own; they now draw every glyph from
+`@phosphor-icons/react` through `Icon`, which fixes the size at 1em and takes the
+weight from `tone`. Which icons your project uses is still your project's
+decision — what stopped being the project's is the line they are drawn with.
+
+That is why Phosphor is a required peer dependency rather than an optional one:
+the `Alert`, the `Select` and the `Button` you import already draw with it,
+whether or not you draw an icon yourself.
 
 ## Tailwind configuration
 
@@ -116,8 +124,7 @@ that only whoever uses them installs.
 | `@eduardoalvarez/arrecife/og` | **no** | — | The Open Graph templates for Satori |
 | `@eduardoalvarez/arrecife/shiki` | **no** | — | The syntax highlighting theme |
 | `@eduardoalvarez/arrecife/brand` | yes | — | Logo, isotype and mascot as components |
-| `@eduardoalvarez/arrecife/social` | yes, on the server only | — | The ten social icons, loose. No `"use client"` |
-| `@eduardoalvarez/arrecife/social/data` | **no** | — | The same ten as shapes, plus `socialSvg`. For a template that mounts no React |
+| `@eduardoalvarez/arrecife/icons` | yes, on the server only | `@phosphor-icons/react` | `Icon`, the wrapper that fixes size and weight. No `"use client"` |
 | `@eduardoalvarez/arrecife/icons` | yes | `@phosphor-icons/react` | `Icon`, which draws a Phosphor icon at the system's size, and at the weight its role asks for |
 | `@eduardoalvarez/arrecife/form` | yes | `react-hook-form` | The form layer: labels, errors and `aria-*` |
 | `@eduardoalvarez/arrecife/chart` | yes | `recharts` | The chart chassis, the series palette and the three chart types |
@@ -148,12 +155,12 @@ before 0.6.0 and it pulled 272 KB of client chunk in for components that never
 needed it.
 
 The six portable subpaths do NOT carry the directive, and that is the half that
-matters in a Server Component: `./tokens`, `./theme`, `./variants`, `./social/data`,
-`./og` and `./shiki` stay on the server. Neither does `./social`, which is a third
-case: it renders React — it is ten `<svg>` — so it can never be portable, but it
-holds no state and nothing about it needs a client boundary. It is the only way to put a
-social icon in a Server Component, and § «The social icons come from `./social`»
-below says why the grouped form cannot do it. If all you need are classes — for a `<div>`, an
+matters in a Server Component: `./tokens`, `./theme`, `./variants`,
+`./og` and `./shiki` stay on the server. Neither does `./icons`, which is a third
+case: it renders React — it is one `<svg>` — so it can never be portable, but it
+holds no state and nothing about it needs a client boundary. It is how you put an
+icon in a Server Component, and § «The social icons are yours, and they come from
+Phosphor» below says which Phosphor entry to pair it with there. If all you need are classes — for a `<div>`, an
 `<a>` or an Astro island you do not want to hydrate — import them from
 `./variants` and nothing crosses to the client:
 
@@ -373,8 +380,9 @@ component's.
 <EmptyState variant="inline" expression="waiting" title="…" />
 ```
 
-`inline` takes an optional `icon` — a `ReactNode` the project passes and sizes,
-at 1em and in `currentColor`, like `Stat`'s. The library ships no icons.
+`inline` takes an optional `icon` — a `ReactNode` the project passes, normally
+`<Icon as={…} />` from `./icons`, which is already 1em and `currentColor`. The
+library ships no icon inventory: which glyph goes there is your decision.
 
 Do not reach for `page` inside a table because the face is «nicer»: an admin
 screen with a dozen empty regions gets a dozen mascots, which is what made every
@@ -383,7 +391,10 @@ consuming project write its own empty state instead of using this one.
 ### The two shapes of `Footer`
 
 ```tsx
-// The default. Stacked rows, signature level with the first one.
+// The default. Stacked rows, signature level with the first one — and stacked
+// and CENTRED below `sm`, which is what a phone gets.
+// SOCIAL is the project's own array: `{ label, href, icon }`, the icon drawn
+// with `<Icon as={GithubLogo} tone="current" />`.
 <Footer brand={<Logo />} social={SOCIAL} />
 
 // `full`. Brand and description on the left, link columns on the right,
@@ -469,6 +480,13 @@ re-exported, because they are unchanged and wrapping them buys nothing.
 down for a ranking. Recharts calls that same thing `layout="vertical"` — if you
 are porting code, the value flips.
 
+**A percentage passes `valueMax={100}`.** Without it the value axis ends at the
+largest datum, and on a horizontal ranking — whose value axis is hidden — a
+course watched to 40 % draws as a full bar when it is the highest on the list.
+The bottom is always zero, and it is a floor rather than a clip: a datum above
+`valueMax` widens the axis instead of running off the edge. It is on all three
+types. See `decisions/0.11.md` § 58.
+
 `stacked` on `AreaChart` and `BarChart` adds the series up. Without it areas
 overlap, which is honest and rarely what you want with more than one series: to
 COMPARE rather than add up, the type is `LineChart`.
@@ -476,63 +494,50 @@ COMPARE rather than add up, the type is `LineChart`.
 Anything that is not a series over a category axis has no type and is not missing
 one. A doughnut is `ChartContainer` plus Recharts' `Pie` with `SERIES_COLORS`.
 
-### The social icons come from `./social`
+### The social icons are yours, and they come from Phosphor
+
+Until 0.10.0 the library shipped ten of them at `./social` — `GitHub`,
+`LinkedIn`, `X`, `Instagram`, `Discord`, `YouTube`, `Rss`, `Email`,
+`Newsletter`, `Website` — drawn by hand. That subpath is gone. Phosphor has all
+ten and the migration is one import per call site:
 
 ```tsx
-// ❌ does not exist: the root publishes them grouped, not loose
-import { GitHub } from '@eduardoalvarez/arrecife';
+// ❌ removed in 0.10.0
+import { GitHub, LinkedIn, Website } from '@eduardoalvarez/arrecife/social';
 
-// ✅ the normal form
-import { GitHub } from '@eduardoalvarez/arrecife/social';
+// ✅
+import { GithubLogo, LinkedinLogo, Globe } from '@phosphor-icons/react';
+import { Icon } from '@eduardoalvarez/arrecife/icons';
 
-// ✅ for iterating the catalogue
-import { social } from '@eduardoalvarez/arrecife';
-<social.GitHub />
+<Icon as={GithubLogo} tone="current" />
 ```
 
-All ten: `GitHub`, `LinkedIn`, `X`, `Instagram`, `Discord`, `YouTube`, `Rss`,
-`Email`, `Newsletter`, `Website`. `Newsletter` is the bell: a way to follow, like
-`Rss`, named for what it means. `Website` is «my other site» — the personal
-domain in a footer full of networks — and it is what replaces borrowing a globe
-from an icon set, which brings its own stroke weight and its own margins.
-
-Six are brands and go SOLID, four are functional and use a 1.6 stroke. A row that
-mixes the two pens is the normal case, not a defect: a brand is somebody else's
-silhouette and cannot be outlined, and a symbol the system draws itself has no
-owner to be faithful to.
-
-**In a Server Component the subpath is mandatory, not preferred.** The root
-carries `"use client"`, and a client reference crosses the boundary per EXPORT —
-the properties of a plain object are not exports, so `social.LinkedIn` is
-`undefined` on the server and `undefined` as an element type kills the build at
-prerender. `./social` carries no directive: it renders on the server and ships no
-client JS. Use `social` only when mapping a list of names onto icons.
-
-The root keeps the group because one of them is called `X`, and loose at the root
-it collides. In the subpath, alias it: `import { X as XIcon }`.
-
-**If you mount no React, the shapes are published too.** `./social/data` imports
-nothing, so an `.astro` that ships no framework JavaScript can draw the same
-glyph instead of pasting the `<path>` into the project:
-
-```astro
----
-import { socialSvg } from '@eduardoalvarez/arrecife/social/data';
----
-<Fragment set:html={socialSvg('GitHub', { class: 'size-[19px]' })} />
-```
-
-`socialGlyphs` is the catalogue keyed by name, `socialNames` is the ten names in
-order, and every glyph is exported on its own — `gitHubGlyph`, `websiteGlyph` —
-if you want the shapes rather than the markup. The React components are drawn
-from that same file, so the two renderings cannot disagree. Reaching for
-`socialGlyphs` or `socialSvg` names all ten, which is the price of iterating a
-catalogue; `import { LinkedIn }` still costs one shape.
-
-The internal glyphs — `Close`, `ChevronDown`, `Sun` — are **not exported** and
-are not going to be: they are the primitives' minimum set. A component that needs
-an icon receives it as a prop (`Stat` has `icon`, each `SocialLink` in `Footer`
-has its own). Do not ask for them to be published: pass your own.
+| Removed | Phosphor | `tone` |
+| --- | --- | --- |
+| `GitHub` | `GithubLogo` | `current` |
+| `LinkedIn` | `LinkedinLogo` | `current` |
+| `X` | `XLogo` | `current` |
+| `Instagram` | `InstagramLogo` | `current` |
+| `Discord` | `DiscordLogo` | `current` |
+| `YouTube` | `YoutubeLogo` | `current` |
+| `Rss` | `Rss` | `action` |
+| `Email` | `Envelope` | `action` |
+| `Newsletter` | `BellSimple` | `action` |
+| `Website` | `Globe` | `action` |
+
+The `tone` column IS the old drawing rule, written on the axis `Icon` already
+has. Six are brands and go SOLID, which is `tone="current"` — Phosphor's `fill`.
+Four are functional and keep the default `action`, which is the system's line. A
+row that mixes the two pens is the normal case, not a defect: a brand is somebody
+else's silhouette and cannot be outlined, and a symbol has no owner to be
+faithful to.
+
+**In a Server Component import `Icon` from `./icons` and the glyph from
+`@phosphor-icons/react/ssr`.** The root of this library carries `"use client"`;
+`./icons` deliberately does not, so an icon renders on the server and ships no
+client JS. Phosphor's default build reads `IconContext` through `useContext`,
+which throws in a Server Component — the `/ssr` entry is the same icons without
+that read.
 
 ## Tokens
 
@@ -592,6 +597,10 @@ compiles and looks wrong, or that fails the project's accessibility audit.
    the only member of the second criterion § 23 opened for it.
 6. **Semantics and scale are independent.** An `h2` that has to look small is
    `<Text as="h2" variant="h3">`, never an `h3` that lies about the hierarchy.
+   `PageHeader` makes the same split: `as` is the level and `titleVariant` the
+   scale. An admin panel's title is `<PageHeader title="Ventas"
+   titleVariant="h3" />` — still the page's only `h1`, at 25px instead of 44. See
+   `decisions/0.11.md` § 57.
 7. **`textMuted` never goes over `surfaceRaised`**: it gives 4.07 in dark. Over a
    raised surface — menus, active tabs — the token is `textSecondary`.
 8. **A background tinted with a semantic color carries text from a text token**,
@@ -612,6 +621,11 @@ compiles and looks wrong, or that fails the project's accessibility audit.
     not the humour contract. See `decisions/0.7.md` § 27.
 12. **The fin is not a free parameter**: `foam` on a dark background, `color` on a
     light one. The components already choose it from the background.
+    **On a site that switches theme, pass `background="auto"`** to `Isotype` or
+    `Logo`: both fins are rendered and the `light:` variant shows the one that
+    reads, so no call site has to know the theme. A surface that keeps one mode
+    whatever the page does — a dark panel on a light page — is a fixed
+    background, and it still says `dark`. See `decisions/0.11.md` § 60.
 
 ## What the library does NOT do, on purpose
 
@@ -627,6 +641,12 @@ These are the confusions people run into most often when consuming it.
   provider.
 - **It ships no router.** The components with links accept `asChild` to wrap the
   framework's `Link`.
+- **It does not know your prices, ratings or images.** `CourseCard` takes
+  `media` — the cover, bleeding to the edges, with `alt=""` because the title
+  already names the card — and `footer`, the closing row where a project puts the
+  rating and the price. Both are nodes the project draws; the card keeps the
+  title, its hover and the sand progress bar. The title does not go over the
+  cover. See `decisions/0.11.md` § 59.
 - **It ships no `data-testid`.** A composed part your test suite has to reach is
   reached with a slot: `ArticleCard`'s `tagAsChild`, `Breadcrumb`'s and
   `TableOfContents`'s `linkAsChild`. They hand you the element and its
@@ -771,7 +791,7 @@ Source: `src/primitives/alert.tsx`
 | prop | type | req. | default | what it does |
 | --- | --- | --- | --- | --- |
 | `emphasis` | `"subtle" \| "strong"` |  |  |  |
-| `icon` | `ReactNode` |  |  | Replaces the variant's mono glyph. Never an emoji: if you need something else, it is an SVG from `glyphs`. |
+| `icon` | `ReactNode` |  |  | Replaces the variant's glyph. Never an emoji: if you need something else, it is `<Icon as={…} />` from `@eduardoalvarez/arrecife/icons`. |
 | `title` | `ReactNode` |  |  |  |
 | `variant` | `"accent" \| "success" \| "warning" \| "error"` |  |  |  |
 
@@ -1391,11 +1411,15 @@ Source: `src/components/code-block/index.tsx`
 
 Source: `src/components/course-card/index.tsx`
 
-- Extends: `Omit<CardShellProps, 'children' \| 'title'>`
+The course, as a card that links to it.
+
+- Extends: `Omit<CardShellProps, 'children' \| 'title' \| 'media'>`
 
 | prop | type | req. | default | what it does |
 | --- | --- | --- | --- | --- |
 | `asChild` | `boolean \| undefined` |  |  | Renders the child instead of an `<a>`. It is how Next's or Astro's `Link` plugs in without the library depending on any router. |
+| `footer` | `ReactNode` |  |  | The closing row, under `meta`: the rating, the price, whatever the project sells the course with. It sits at the bottom of the card, so the rows of a grid line up whatever the length of each summary. |
+| `media` | `ReactNode` |  |  | The cover, at the top and bleeding to the card's edges, with `alt=""`: the whole card is one link and `title` already names it. |
 | `meta` | `readonly ReactNode[]` |  |  | Level, duration, number of lessons: whatever the project wants to list. |
 | `progress` | `number` |  |  | Percentage completed. It only makes sense for someone already enrolled; when passed, the bar goes in sand, which is the color of course progress. |
 | `status` | `ReactNode` |  |  | Status label: «próximamente», «gratis», «nuevo». |
@@ -1559,6 +1583,7 @@ One header at two scales, not two components.
 | `eyebrow` | `ReactNode` |  |  | Mono, small caps, in accent. It is the section the page belongs to. |
 | `size` | `"display" \| "page"` |  | `page` |  |
 | `title` | `ReactNode` | yes |  |  |
+| `titleVariant` | `"display" \| "h1" \| "h2" \| "h3"` |  |  | The headline's scale, when the screen needs a different one from what `size` gives — `display` for `display`, `h1` for `page`. |
 
 ### ScrollingProgressBar
 
@@ -1647,12 +1672,14 @@ Imported from `@eduardoalvarez/arrecife` or `@eduardoalvarez/arrecife/brand`. 4
 
 Source: `src/brand/isotype.tsx`
 
+The fin, in the variant its background asks for.
+
 - Extends: `Omit<ComponentPropsWithoutRef<'img'>, 'src' \| 'alt'>`
 
 | prop | type | req. | default | what it does |
 | --- | --- | --- | --- | --- |
 | `alt` | `string` |  |  | Alt text. Empty when the isotype accompanies text that already names it. |
-| `background` | `"dark" \| "light"` |  | `dark` | Which background it sits on. Deciding is mandatory even though it has a default: the fin's body is nearly black, so the two-blue variant disappears over abyss. Being a prop, the rule stops being something to remember. |
+| `background` | `"dark" \| "light" \| "auto"` |  | `dark` | Which background it sits on, or `auto` on a site that switches theme: both fins are rendered and CSS shows the one that reads. Deciding is mandatory even though it has a default: the fin's body is nearly black, so the two-blue variant disappears over abyss. |
 | `basePath` | `string` |  | `ASSETS_PATH` |  |
 
 ### Logo
@@ -1665,7 +1692,7 @@ The wordmark comes from `naming.wordmark`, not from a hand-written string, and i
 
 | prop | type | req. | default | what it does |
 | --- | --- | --- | --- | --- |
-| `background` | `"dark" \| "light"` |  | `dark` |  |
+| `background` | `"dark" \| "light" \| "auto"` |  | `dark` | The background the logo sits on, handed to its fin. `auto` follows the theme — see `Isotype`. The wordmark needs no help: it is `textPrimary`, which already follows the mode. |
 | `basePath` | `string` |  | `ASSETS_PATH` |  |
 | `isotypeOnly` | `boolean \| undefined` |  | `false` | Hides the wordmark and leaves only the fin, for very narrow bars. |
 | `withTagline` | `boolean \| undefined` |  | `false` | Adds the tagline under the wordmark, separated from the fin by a divider. |
@@ -1696,48 +1723,6 @@ Tiburoncín's head, with an expression.
 | `basePath` | `string` |  | `ASSETS_PATH` |  |
 | `expression` | `"annoyed" \| "confused" \| "hearts" \| "laughing" \| "shades" \| "waiting" \| "wink"` | yes |  |  |
 
-## Social icons
-
-Imported from `@eduardoalvarez/arrecife/social` · or grouped as `social` from the root. 10 exports.
-
-### GitHub, LinkedIn, X, Instagram, Discord, YouTube, Rss, Email, Newsletter, Website
-
-Source: `src/social/index.tsx`
-
-**GitHub**
-- No own props: it passes through those of the element or primitive it wraps.
-
-**LinkedIn**
-- No own props: it passes through those of the element or primitive it wraps.
-
-**X**
-- No own props: it passes through those of the element or primitive it wraps.
-
-**Instagram**
-- No own props: it passes through those of the element or primitive it wraps.
-
-**Discord**
-- No own props: it passes through those of the element or primitive it wraps.
-
-**YouTube**
-- No own props: it passes through those of the element or primitive it wraps.
-
-**Rss**
-- No own props: it passes through those of the element or primitive it wraps.
-
-**Email**
-- No own props: it passes through those of the element or primitive it wraps.
-
-**Newsletter**
-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.
-
-- No own props: it passes through those of the element or primitive it wraps.
-
-**Website**
-«My other site»: the personal domain in a footer full of social networks.
-
-- No own props: it passes through those of the element or primitive it wraps.
-
 ## Icons
 
 Imported from `@eduardoalvarez/arrecife/icons` · requires `@phosphor-icons/react`. 1 exports.
@@ -1863,6 +1848,7 @@ A series over time, with the fill fading out underneath it.
 | `series` | `readonly ChartSeries[]` | yes |  |  |
 | `stacked` | `boolean \| undefined` |  | `false` | Adds the series up instead of overlaying them. |
 | `summary` | `ReactNode` |  |  | What the chart says, in words. It goes in a visually hidden `figcaption`. |
+| `valueMax` | `number` |  |  | The top of the value axis, when the scale has one that the data does not reach — 100 for a percentage. |
 | `xKey` | `string` | yes |  | The key on the category axis: the day, the month, the course. |
 | `xTickFormatter` | `(value: unknown) => string` |  |  | Formats the TICK on the category axis. Returns a string, because an axis tick is an SVG `<text>` and not a place a node can go. |
 | `yTickFormatter` | `(value: unknown) => string` |  |  | Formats the tick on the VALUE axis — the currency symbol, the thousands separator, the percent sign. |
@@ -1883,6 +1869,7 @@ Bars, upright or lying down.
 | `series` | `readonly ChartSeries[]` | yes |  |  |
 | `stacked` | `boolean \| undefined` |  | `false` | Stacks the series instead of putting them side by side. |
 | `summary` | `ReactNode` |  |  | What the chart says, in words. It goes in a visually hidden `figcaption`. |
+| `valueMax` | `number` |  |  | The top of the value axis, when the scale has one that the data does not reach — 100 for a percentage. |
 | `xKey` | `string` | yes |  | The key on the category axis: the day, the month, the course. |
 | `xTickFormatter` | `(value: unknown) => string` |  |  | Formats the TICK on the category axis. Returns a string, because an axis tick is an SVG `<text>` and not a place a node can go. |
 | `yTickFormatter` | `(value: unknown) => string` |  |  | Formats the tick on the VALUE axis — the currency symbol, the thousands separator, the percent sign. |
@@ -1901,6 +1888,7 @@ Lines, for comparing series against each other.
 | `legend` | `boolean \| undefined` |  |  | Shows the legend. It defaults to «only when there is more than one series»: a legend naming the one line already named by the chart's own heading is a row of pixels that says nothing. |
 | `series` | `readonly ChartSeries[]` | yes |  |  |
 | `summary` | `ReactNode` |  |  | What the chart says, in words. It goes in a visually hidden `figcaption`. |
+| `valueMax` | `number` |  |  | The top of the value axis, when the scale has one that the data does not reach — 100 for a percentage. |
 | `xKey` | `string` | yes |  | The key on the category axis: the day, the month, the course. |
 | `xTickFormatter` | `(value: unknown) => string` |  |  | Formats the TICK on the category axis. Returns a string, because an axis tick is an SVG `<text>` and not a place a node can go. |
 | `yTickFormatter` | `(value: unknown) => string` |  |  | Formats the tick on the VALUE axis — the currency symbol, the thousands separator, the percent sign. |
@@ -1911,28 +1899,6 @@ The root re-exports everything from `./tokens` and `./brand` for convenience.
 Each one appears exactly once, under the most specific subpath that publishes
 it: if the code does not mount React, that subpath is the one to import.
 
-### `@eduardoalvarez/arrecife/social/data`
-
-| export | type | what it is |
-| --- | --- | --- |
-| `discordGlyph` | `SocialGlyph` | Discord's mark. Brand, so it is a solid silhouette. |
-| `emailGlyph` | `SocialGlyph` | The envelope. Functional, so it is a 1.6 stroke. |
-| `gitHubGlyph` | `SocialGlyph` | GitHub's mark. Brand, so it is a solid silhouette. |
-| `instagramGlyph` | `SocialGlyph` | Instagram's mark. Brand, so it is a solid silhouette. |
-| `linkedInGlyph` | `SocialGlyph` | LinkedIn's mark. Brand, so it is a solid silhouette. |
-| `newsletterGlyph` | `SocialGlyph` |  |
-| `rssGlyph` | `SocialGlyph` | The feed. Functional, so it is a 1.6 stroke — with one filled dot, because a ring that small reads as a smudge. |
-| `SOCIAL_STROKE_WIDTH` | `1.6` | The stroke width of a functional glyph, from the document. |
-| `SOCIAL_VIEW_BOX` | `"0 0 24 24"` | The grid every glyph is drawn on. |
-| `socialGlyphs` | `{ Discord, Email, GitHub, Instagram, LinkedIn, Newsletter, Rss, Website, X, YouTube }` | The whole catalogue, keyed by the name each glyph is exported under in `./social`. |
-| `socialNames` | `readonly ("Discord" \| "Email" \| "GitHub" \| "Instagram" \| "LinkedIn" \| "Newsletter" \| "Rss" \| "Website" \| "X" \| "YouTube")[]` | The ten names, in the order the catalogue declares them. |
-| `socialSvg` | `(name: "Discord" \| "Email" \| "GitHub" \| "Instagram" \| "LinkedIn" \| "Newsletter" \| "Rss" \| "Website" \| "X" \| "YouTube", extra?: Readonly<Record<string, string \| number>>): string` | One glyph as a complete `<svg>` string, for a template that cannot mount React. |
-| `websiteGlyph` | `SocialGlyph` | «My other site», and the reason it is here rather than borrowed. |
-| `xGlyph` | `SocialGlyph` | X's mark. Brand, so it is a solid silhouette. |
-| `youTubeGlyph` | `SocialGlyph` | YouTube's mark. Brand, so it is a solid silhouette. |
-
-Types (3): `SocialGlyph`, `SocialGlyphShape`, `SocialName`.
-
 ### `@eduardoalvarez/arrecife/variants`
 
 | export | type | what it is |
@@ -1974,10 +1940,6 @@ Types (3): `SocialGlyph`, `SocialGlyphShape`, `SocialName`.
 
 Types (13): `BrandToken`, `ColorMode`, `ColorToken`, `ControlToken`, `FontToken`, `GradientToken`, `RadiusToken`, `SeriesToken`, `SizeToken`, `SpacingToken`, `SyntaxToken`, `Tokens`, `TypeScaleToken`.
 
-### `@eduardoalvarez/arrecife/social`
-
-Types (1): `SocialIconProps`.
-
 ### `@eduardoalvarez/arrecife/theme`
 
 | export | type | what it is |
@@ -2007,7 +1969,7 @@ Types (2): `Theme`, `ThemeOptions`.
 | `poseList` | `readonly ("desk" \| "laptop-coffee" \| "peek" \| "surf")[]` |  |
 | `poses` | `{ readonly desk: "pose-desk.png"; readonly 'laptop-coffee': "pose-laptop-coffee.png"; readonly peek: "pose-peek.png"; readonly surf: "pose-surf.png"; }` | Full-body poses. |
 
-Types (8): `Background`, `Face`, `Fin`, `IsotypeProps`, `LogoProps`, `MascotFaceProps`, `MascotProps`, `Pose`.
+Types (9): `Background`, `Face`, `Fin`, `IsotypeBackground`, `IsotypeProps`, `LogoProps`, `MascotFaceProps`, `MascotProps`, `Pose`.
 
 ### `@eduardoalvarez/arrecife/icons`
 
@@ -2059,7 +2021,6 @@ Types (6): `ArticleData`, `BaseData`, `CourseData`, `DefaultData`, `SatoriNode`,
 | export | type | what it is |
 | --- | --- | --- |
 | `cn` | `(...inputs: ClassValue[]): string` |  |
-| `social` | `typeof import("src/social/index")` |  |
 | `toast` | `(message: ReactNode, options?: ToastOptions \| undefined): string` | Fires a notice. It returns its id, which is what you keep in order to close it by hand — the «guardando…» case that gets replaced when the request finishes. |
 | `useTheme` | `(): Theme` | The theme set right now, for a project that needs to branch in React — a different logo per mode, an image with no light version. |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduardoalvarez/arrecife",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "The component library of Eduardo Álvarez’s visual identity",
   "license": "MIT",
   "author": "Eduardo Esteban Álvarez Castañeda <soy@eduardoalvarez.dev>",
@@ -49,16 +49,6 @@
       "import": "./dist/brand/index.js",
       "require": "./dist/brand/index.cjs"
     },
-    "./social": {
-      "types": "./dist/social/index.d.ts",
-      "import": "./dist/social/index.js",
-      "require": "./dist/social/index.cjs"
-    },
-    "./social/data": {
-      "types": "./dist/social/data.d.ts",
-      "import": "./dist/social/data.js",
-      "require": "./dist/social/data.cjs"
-    },
     "./icons": {
       "types": "./dist/icons/index.d.ts",
       "import": "./dist/icons/index.js",
@@ -126,9 +116,6 @@
     "recharts": "^3.0.0"
   },
   "peerDependenciesMeta": {
-    "@phosphor-icons/react": {
-      "optional": true
-    },
     "react-hook-form": {
       "optional": true
     },
@@ -139,32 +126,33 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@phosphor-icons/react": "^2.1.10",
-    "@storybook/addon-a11y": "^10.5.10",
-    "@storybook/addon-docs": "^10.5.10",
-    "@storybook/addon-themes": "^10.5.10",
-    "@storybook/addon-vitest": "^10.5.10",
-    "@storybook/react-vite": "^10.5.10",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-themes": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
     "@tailwindcss/vite": "^4.3.3",
     "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.5",
-    "@vitest/browser": "^4.1.11",
-    "@vitest/browser-playwright": "^4.1.11",
-    "eslint": "^10.9.0",
+    "@types/react-dom": "^19.2.7",
+    "@vitest/browser": "^5.0.0",
+    "@vitest/browser-playwright": "^5.0.0",
+    "eslint": "^10.10.0",
     "eslint-plugin-react-hooks": "^7.0.0",
-    "globals": "^17.11.0",
-    "playwright": "^1.62.1",
+    "globals": "^17.12.0",
+    "playwright": "^1.63.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.87.0",
     "recharts": "^3.10.1",
-    "storybook": "^10.5.10",
-    "storybook-addon-pseudo-states": "^10.5.10",
+    "storybook": "^10.6.0",
+    "storybook-addon-pseudo-states": "^10.6.0",
     "tailwindcss": "^4.3.3",
     "tsup": "^8.5.1",
-    "typescript": "^5.3.0",
-    "typescript-eslint": "^8.48.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.69.0",
     "vite": "^8.2.2",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.0",
+    "eslint-plugin-storybook": "10.6.0"
   },
   "packageManager": "pnpm@11.20.0",
   "engines": {

package/dist/chunk-HOADZ6GS.js

@@ -1,72 +0,0 @@
-import { gitHubGlyph, linkedInGlyph, xGlyph, instagramGlyph, discordGlyph, youTubeGlyph, rssGlyph, emailGlyph, newsletterGlyph, websiteGlyph, SOCIAL_STROKE_WIDTH, SOCIAL_VIEW_BOX } from './chunk-LXRGQKMG.js';
-import { __export } from './chunk-MLKGABMK.js';
-import { jsx } from 'react/jsx-runtime';
-
-// src/social/index.tsx
-var social_exports = {};
-__export(social_exports, {
-  Discord: () => Discord,
-  Email: () => Email,
-  GitHub: () => GitHub,
-  Instagram: () => Instagram,
-  LinkedIn: () => LinkedIn,
-  Newsletter: () => Newsletter,
-  Rss: () => Rss,
-  Website: () => Website,
-  X: () => X,
-  YouTube: () => YouTube
-});
-var SOLID = { fill: "currentColor", stroke: "none" };
-function drawShape(shape, index) {
-  if (shape.tag === "path") {
-    return /* @__PURE__ */ jsx("path", { d: shape.d, ...shape.solid ? SOLID : {} }, index);
-  }
-  if (shape.tag === "circle") {
-    return /* @__PURE__ */ jsx("circle", { cx: shape.cx, cy: shape.cy, r: shape.r, ...shape.solid ? SOLID : {} }, index);
-  }
-  return /* @__PURE__ */ jsx(
-    "rect",
-    {
-      x: shape.x,
-      y: shape.y,
-      width: shape.width,
-      height: shape.height,
-      rx: shape.rx
-    },
-    index
-  );
-}
-function Glyph({ glyph, ...props }) {
-  const brand = glyph.kind === "brand";
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: SOCIAL_VIEW_BOX,
-      width: "1em",
-      height: "1em",
-      fill: brand ? "currentColor" : "none",
-      ...brand ? {} : {
-        stroke: "currentColor",
-        strokeWidth: SOCIAL_STROKE_WIDTH,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      },
-      "aria-hidden": "true",
-      focusable: "false",
-      ...props,
-      children: glyph.shapes.map(drawShape)
-    }
-  );
-}
-var GitHub = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: gitHubGlyph, ...props });
-var LinkedIn = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: linkedInGlyph, ...props });
-var X = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: xGlyph, ...props });
-var Instagram = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: instagramGlyph, ...props });
-var Discord = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: discordGlyph, ...props });
-var YouTube = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: youTubeGlyph, ...props });
-var Rss = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: rssGlyph, ...props });
-var Email = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: emailGlyph, ...props });
-var Newsletter = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: newsletterGlyph, ...props });
-var Website = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: websiteGlyph, ...props });
-
-export { Discord, Email, GitHub, Instagram, LinkedIn, Newsletter, Rss, Website, X, YouTube, social_exports };