@eduardoalvarez/arrecife 0.9.0 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +42 -0
- package/README.md +99 -69
- package/dist/brand/index.js +2 -3
- package/dist/chart/index.js +0 -1
- package/dist/chunk-ZSCSKCTY.js +26 -0
- package/dist/form/index.js +0 -1
- package/dist/icons/index.d.cts +19 -10
- package/dist/icons/index.d.ts +19 -10
- package/dist/icons/index.js +2 -27
- package/dist/index.cjs +205 -381
- package/dist/index.d.cts +48 -9
- package/dist/index.d.ts +48 -9
- package/dist/index.js +148 -186
- package/dist/og/index.js +0 -1
- package/dist/shiki/index.js +0 -1
- package/dist/theme/index.js +0 -1
- package/dist/tokens/index.js +0 -1
- package/dist/tokens/theme.css +21 -1
- package/dist/variants/index.js +0 -1
- package/llms.txt +63 -134
- package/package.json +18 -30
- package/dist/chunk-HOADZ6GS.js +0 -72
- package/dist/chunk-LXRGQKMG.js +0 -145
- package/dist/chunk-MLKGABMK.js +0 -7
- package/dist/index-BbRplw_B.d.cts +0 -58
- package/dist/index-BbRplw_B.d.ts +0 -58
- package/dist/social/data.cjs +0 -161
- package/dist/social/data.d.cts +0 -161
- package/dist/social/data.d.ts +0 -161
- package/dist/social/data.js +0 -2
- package/dist/social/index.cjs +0 -153
- package/dist/social/index.d.cts +0 -2
- package/dist/social/index.d.ts +0 -2
- package/dist/social/index.js +0 -3
- package/dist/{chunk-MPZBF2TZ.js → chunk-IIT3YLYN.js} +1 -1
package/dist/tokens/index.js
CHANGED
package/dist/tokens/theme.css
CHANGED
|
@@ -379,7 +379,22 @@
|
|
|
379
379
|
focus-ring-warm exists for the ONE control the ring cannot be biolume on:
|
|
380
380
|
the conversion button is the system's only sand fill, and a biolume ring
|
|
381
381
|
around it puts both of the brand's accents in the same three pixels. It sets
|
|
382
|
-
only the color, so the width and the offset stay in one place.
|
|
382
|
+
only the color, so the width and the offset stay in one place.
|
|
383
|
+
|
|
384
|
+
focus-ring-inset flips the OFFSET, and only the offset, for the same reason
|
|
385
|
+
and by the same rule: an element that is focusable but sits inside a clipped
|
|
386
|
+
container cannot wear a ring drawn 3px outside itself, because the container
|
|
387
|
+
paints it away. CodeBlock is the case — its root carries overflow-hidden so
|
|
388
|
+
its rounded corners hold, and its pre scrolls, so the pre has to be focusable.
|
|
389
|
+
With the outward ring, three of its four sides were clipped and what was left
|
|
390
|
+
read as a stray line under the header: a focus indicator that is present in
|
|
391
|
+
the CSS and invisible on screen, which is WCAG 2.4.7 failing while looking
|
|
392
|
+
fixed.
|
|
393
|
+
|
|
394
|
+
It is -3px and not 0: at 0 the ring sits exactly on the border box and reads
|
|
395
|
+
as a change of border rather than as a ring. The padding it eats into is
|
|
396
|
+
p-step-md, so it never touches the text. Reach for it ONLY when a clipping
|
|
397
|
+
ancestor is the reason — not because the outward ring looks too loud. */
|
|
383
398
|
@utility focus-ring {
|
|
384
399
|
&:focus-visible {
|
|
385
400
|
outline: 2px solid var(--color-accent);
|
|
@@ -391,6 +406,11 @@
|
|
|
391
406
|
outline-color: var(--color-warm);
|
|
392
407
|
}
|
|
393
408
|
}
|
|
409
|
+
@utility focus-ring-inset {
|
|
410
|
+
&:focus-visible {
|
|
411
|
+
outline-offset: -3px;
|
|
412
|
+
}
|
|
413
|
+
}
|
|
394
414
|
|
|
395
415
|
/* The system's only transition, as a utility. States are communicated with
|
|
396
416
|
border and color, not with movement: this class cannot animate anything else. */
|
package/dist/variants/index.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
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';
|
|
2
2
|
export { text as textVariants } from '../chunk-ODBFN44D.js';
|
|
3
|
-
import '../chunk-MLKGABMK.js';
|
package/llms.txt
CHANGED
|
@@ -34,6 +34,7 @@ Requirements, and they are not optional:
|
|
|
34
34
|
| | |
|
|
35
35
|
| --- | --- |
|
|
36
36
|
| React | `^19.0.0` and `react-dom` `^19.0.0`, as peer dependencies |
|
|
37
|
+
| Phosphor | `@phosphor-icons/react` `^2.1.0`, as a peer dependency. **Required since 0.10.0**: every icon the library draws comes from it |
|
|
37
38
|
| Tailwind | v4. **There is no v3 preset**: the output is `@theme`, which v3 does not understand |
|
|
38
39
|
| Node | `>=22.18.0` for the subpaths that run at build time (`./og`, `./tokens`) |
|
|
39
40
|
|
|
@@ -41,8 +42,15 @@ Radix, `clsx`, `tailwind-merge`, `class-variance-authority`, `date-fns` and
|
|
|
41
42
|
`react-day-picker` come as dependencies of the library. You do not need to
|
|
42
43
|
install or declare them.
|
|
43
44
|
|
|
44
|
-
**It ships no icon
|
|
45
|
-
|
|
45
|
+
**It ships no icon INVENTORY, and it does ship the drawing.** Until 0.10.0 the
|
|
46
|
+
components carried a hand-drawn set of their own; they now draw every glyph from
|
|
47
|
+
`@phosphor-icons/react` through `Icon`, which fixes the size at 1em and takes the
|
|
48
|
+
weight from `tone`. Which icons your project uses is still your project's
|
|
49
|
+
decision — what stopped being the project's is the line they are drawn with.
|
|
50
|
+
|
|
51
|
+
That is why Phosphor is a required peer dependency rather than an optional one:
|
|
52
|
+
the `Alert`, the `Select` and the `Button` you import already draw with it,
|
|
53
|
+
whether or not you draw an icon yourself.
|
|
46
54
|
|
|
47
55
|
## Tailwind configuration
|
|
48
56
|
|
|
@@ -116,8 +124,7 @@ that only whoever uses them installs.
|
|
|
116
124
|
| `@eduardoalvarez/arrecife/og` | **no** | — | The Open Graph templates for Satori |
|
|
117
125
|
| `@eduardoalvarez/arrecife/shiki` | **no** | — | The syntax highlighting theme |
|
|
118
126
|
| `@eduardoalvarez/arrecife/brand` | yes | — | Logo, isotype and mascot as components |
|
|
119
|
-
| `@eduardoalvarez/arrecife/
|
|
120
|
-
| `@eduardoalvarez/arrecife/social/data` | **no** | — | The same ten as shapes, plus `socialSvg`. For a template that mounts no React |
|
|
127
|
+
| `@eduardoalvarez/arrecife/icons` | yes, on the server only | `@phosphor-icons/react` | `Icon`, the wrapper that fixes size and weight. No `"use client"` |
|
|
121
128
|
| `@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 |
|
|
122
129
|
| `@eduardoalvarez/arrecife/form` | yes | `react-hook-form` | The form layer: labels, errors and `aria-*` |
|
|
123
130
|
| `@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
|
|
|
148
155
|
needed it.
|
|
149
156
|
|
|
150
157
|
The six portable subpaths do NOT carry the directive, and that is the half that
|
|
151
|
-
matters in a Server Component: `./tokens`, `./theme`, `./variants`,
|
|
152
|
-
`./og` and `./shiki` stay on the server. Neither does `./
|
|
153
|
-
case: it renders React — it is
|
|
154
|
-
holds no state and nothing about it needs a client boundary. It is
|
|
155
|
-
|
|
156
|
-
below says
|
|
158
|
+
matters in a Server Component: `./tokens`, `./theme`, `./variants`,
|
|
159
|
+
`./og` and `./shiki` stay on the server. Neither does `./icons`, which is a third
|
|
160
|
+
case: it renders React — it is one `<svg>` — so it can never be portable, but it
|
|
161
|
+
holds no state and nothing about it needs a client boundary. It is how you put an
|
|
162
|
+
icon in a Server Component, and § «The social icons are yours, and they come from
|
|
163
|
+
Phosphor» below says which Phosphor entry to pair it with there. If all you need are classes — for a `<div>`, an
|
|
157
164
|
`<a>` or an Astro island you do not want to hydrate — import them from
|
|
158
165
|
`./variants` and nothing crosses to the client:
|
|
159
166
|
|
|
@@ -373,8 +380,9 @@ component's.
|
|
|
373
380
|
<EmptyState variant="inline" expression="waiting" title="…" />
|
|
374
381
|
```
|
|
375
382
|
|
|
376
|
-
`inline` takes an optional `icon` — a `ReactNode` the project passes
|
|
377
|
-
|
|
383
|
+
`inline` takes an optional `icon` — a `ReactNode` the project passes, normally
|
|
384
|
+
`<Icon as={…} />` from `./icons`, which is already 1em and `currentColor`. The
|
|
385
|
+
library ships no icon inventory: which glyph goes there is your decision.
|
|
378
386
|
|
|
379
387
|
Do not reach for `page` inside a table because the face is «nicer»: an admin
|
|
380
388
|
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.
|
|
|
383
391
|
### The two shapes of `Footer`
|
|
384
392
|
|
|
385
393
|
```tsx
|
|
386
|
-
// The default. Stacked rows, signature level with the first one
|
|
394
|
+
// The default. Stacked rows, signature level with the first one — and stacked
|
|
395
|
+
// and CENTRED below `sm`, which is what a phone gets.
|
|
396
|
+
// SOCIAL is the project's own array: `{ label, href, icon }`, the icon drawn
|
|
397
|
+
// with `<Icon as={GithubLogo} tone="current" />`.
|
|
387
398
|
<Footer brand={<Logo />} social={SOCIAL} />
|
|
388
399
|
|
|
389
400
|
// `full`. Brand and description on the left, link columns on the right,
|
|
@@ -476,63 +487,50 @@ COMPARE rather than add up, the type is `LineChart`.
|
|
|
476
487
|
Anything that is not a series over a category axis has no type and is not missing
|
|
477
488
|
one. A doughnut is `ChartContainer` plus Recharts' `Pie` with `SERIES_COLORS`.
|
|
478
489
|
|
|
479
|
-
### The social icons come from
|
|
480
|
-
|
|
481
|
-
```tsx
|
|
482
|
-
// ❌ does not exist: the root publishes them grouped, not loose
|
|
483
|
-
import { GitHub } from '@eduardoalvarez/arrecife';
|
|
484
|
-
|
|
485
|
-
// ✅ the normal form
|
|
486
|
-
import { GitHub } from '@eduardoalvarez/arrecife/social';
|
|
487
|
-
|
|
488
|
-
// ✅ for iterating the catalogue
|
|
489
|
-
import { social } from '@eduardoalvarez/arrecife';
|
|
490
|
-
<social.GitHub />
|
|
491
|
-
```
|
|
492
|
-
|
|
493
|
-
All ten: `GitHub`, `LinkedIn`, `X`, `Instagram`, `Discord`, `YouTube`, `Rss`,
|
|
494
|
-
`Email`, `Newsletter`, `Website`. `Newsletter` is the bell: a way to follow, like
|
|
495
|
-
`Rss`, named for what it means. `Website` is «my other site» — the personal
|
|
496
|
-
domain in a footer full of networks — and it is what replaces borrowing a globe
|
|
497
|
-
from an icon set, which brings its own stroke weight and its own margins.
|
|
498
|
-
|
|
499
|
-
Six are brands and go SOLID, four are functional and use a 1.6 stroke. A row that
|
|
500
|
-
mixes the two pens is the normal case, not a defect: a brand is somebody else's
|
|
501
|
-
silhouette and cannot be outlined, and a symbol the system draws itself has no
|
|
502
|
-
owner to be faithful to.
|
|
490
|
+
### The social icons are yours, and they come from Phosphor
|
|
503
491
|
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
prerender. `./social` carries no directive: it renders on the server and ships no
|
|
509
|
-
client JS. Use `social` only when mapping a list of names onto icons.
|
|
492
|
+
Until 0.10.0 the library shipped ten of them at `./social` — `GitHub`,
|
|
493
|
+
`LinkedIn`, `X`, `Instagram`, `Discord`, `YouTube`, `Rss`, `Email`,
|
|
494
|
+
`Newsletter`, `Website` — drawn by hand. That subpath is gone. Phosphor has all
|
|
495
|
+
ten and the migration is one import per call site:
|
|
510
496
|
|
|
511
|
-
|
|
512
|
-
|
|
497
|
+
```tsx
|
|
498
|
+
// ❌ removed in 0.10.0
|
|
499
|
+
import { GitHub, LinkedIn, Website } from '@eduardoalvarez/arrecife/social';
|
|
513
500
|
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
501
|
+
// ✅
|
|
502
|
+
import { GithubLogo, LinkedinLogo, Globe } from '@phosphor-icons/react';
|
|
503
|
+
import { Icon } from '@eduardoalvarez/arrecife/icons';
|
|
517
504
|
|
|
518
|
-
|
|
519
|
-
---
|
|
520
|
-
import { socialSvg } from '@eduardoalvarez/arrecife/social/data';
|
|
521
|
-
---
|
|
522
|
-
<Fragment set:html={socialSvg('GitHub', { class: 'size-[19px]' })} />
|
|
505
|
+
<Icon as={GithubLogo} tone="current" />
|
|
523
506
|
```
|
|
524
507
|
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
`
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
508
|
+
| Removed | Phosphor | `tone` |
|
|
509
|
+
| --- | --- | --- |
|
|
510
|
+
| `GitHub` | `GithubLogo` | `current` |
|
|
511
|
+
| `LinkedIn` | `LinkedinLogo` | `current` |
|
|
512
|
+
| `X` | `XLogo` | `current` |
|
|
513
|
+
| `Instagram` | `InstagramLogo` | `current` |
|
|
514
|
+
| `Discord` | `DiscordLogo` | `current` |
|
|
515
|
+
| `YouTube` | `YoutubeLogo` | `current` |
|
|
516
|
+
| `Rss` | `Rss` | `action` |
|
|
517
|
+
| `Email` | `Envelope` | `action` |
|
|
518
|
+
| `Newsletter` | `BellSimple` | `action` |
|
|
519
|
+
| `Website` | `Globe` | `action` |
|
|
520
|
+
|
|
521
|
+
The `tone` column IS the old drawing rule, written on the axis `Icon` already
|
|
522
|
+
has. Six are brands and go SOLID, which is `tone="current"` — Phosphor's `fill`.
|
|
523
|
+
Four are functional and keep the default `action`, which is the system's line. A
|
|
524
|
+
row that mixes the two pens is the normal case, not a defect: a brand is somebody
|
|
525
|
+
else's silhouette and cannot be outlined, and a symbol has no owner to be
|
|
526
|
+
faithful to.
|
|
527
|
+
|
|
528
|
+
**In a Server Component import `Icon` from `./icons` and the glyph from
|
|
529
|
+
`@phosphor-icons/react/ssr`.** The root of this library carries `"use client"`;
|
|
530
|
+
`./icons` deliberately does not, so an icon renders on the server and ships no
|
|
531
|
+
client JS. Phosphor's default build reads `IconContext` through `useContext`,
|
|
532
|
+
which throws in a Server Component — the `/ssr` entry is the same icons without
|
|
533
|
+
that read.
|
|
536
534
|
|
|
537
535
|
## Tokens
|
|
538
536
|
|
|
@@ -771,7 +769,7 @@ Source: `src/primitives/alert.tsx`
|
|
|
771
769
|
| prop | type | req. | default | what it does |
|
|
772
770
|
| --- | --- | --- | --- | --- |
|
|
773
771
|
| `emphasis` | `"subtle" \| "strong"` | | | |
|
|
774
|
-
| `icon` | `ReactNode` | | | Replaces the variant's
|
|
772
|
+
| `icon` | `ReactNode` | | | Replaces the variant's glyph. Never an emoji: if you need something else, it is `<Icon as={…} />` from `@eduardoalvarez/arrecife/icons`. |
|
|
775
773
|
| `title` | `ReactNode` | | | |
|
|
776
774
|
| `variant` | `"accent" \| "success" \| "warning" \| "error"` | | | |
|
|
777
775
|
|
|
@@ -1696,48 +1694,6 @@ Tiburoncín's head, with an expression.
|
|
|
1696
1694
|
| `basePath` | `string` | | `ASSETS_PATH` | |
|
|
1697
1695
|
| `expression` | `"annoyed" \| "confused" \| "hearts" \| "laughing" \| "shades" \| "waiting" \| "wink"` | yes | | |
|
|
1698
1696
|
|
|
1699
|
-
## Social icons
|
|
1700
|
-
|
|
1701
|
-
Imported from `@eduardoalvarez/arrecife/social` · or grouped as `social` from the root. 10 exports.
|
|
1702
|
-
|
|
1703
|
-
### GitHub, LinkedIn, X, Instagram, Discord, YouTube, Rss, Email, Newsletter, Website
|
|
1704
|
-
|
|
1705
|
-
Source: `src/social/index.tsx`
|
|
1706
|
-
|
|
1707
|
-
**GitHub**
|
|
1708
|
-
- No own props: it passes through those of the element or primitive it wraps.
|
|
1709
|
-
|
|
1710
|
-
**LinkedIn**
|
|
1711
|
-
- No own props: it passes through those of the element or primitive it wraps.
|
|
1712
|
-
|
|
1713
|
-
**X**
|
|
1714
|
-
- No own props: it passes through those of the element or primitive it wraps.
|
|
1715
|
-
|
|
1716
|
-
**Instagram**
|
|
1717
|
-
- No own props: it passes through those of the element or primitive it wraps.
|
|
1718
|
-
|
|
1719
|
-
**Discord**
|
|
1720
|
-
- No own props: it passes through those of the element or primitive it wraps.
|
|
1721
|
-
|
|
1722
|
-
**YouTube**
|
|
1723
|
-
- No own props: it passes through those of the element or primitive it wraps.
|
|
1724
|
-
|
|
1725
|
-
**Rss**
|
|
1726
|
-
- No own props: it passes through those of the element or primitive it wraps.
|
|
1727
|
-
|
|
1728
|
-
**Email**
|
|
1729
|
-
- No own props: it passes through those of the element or primitive it wraps.
|
|
1730
|
-
|
|
1731
|
-
**Newsletter**
|
|
1732
|
-
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.
|
|
1733
|
-
|
|
1734
|
-
- No own props: it passes through those of the element or primitive it wraps.
|
|
1735
|
-
|
|
1736
|
-
**Website**
|
|
1737
|
-
«My other site»: the personal domain in a footer full of social networks.
|
|
1738
|
-
|
|
1739
|
-
- No own props: it passes through those of the element or primitive it wraps.
|
|
1740
|
-
|
|
1741
1697
|
## Icons
|
|
1742
1698
|
|
|
1743
1699
|
Imported from `@eduardoalvarez/arrecife/icons` · requires `@phosphor-icons/react`. 1 exports.
|
|
@@ -1911,28 +1867,6 @@ The root re-exports everything from `./tokens` and `./brand` for convenience.
|
|
|
1911
1867
|
Each one appears exactly once, under the most specific subpath that publishes
|
|
1912
1868
|
it: if the code does not mount React, that subpath is the one to import.
|
|
1913
1869
|
|
|
1914
|
-
### `@eduardoalvarez/arrecife/social/data`
|
|
1915
|
-
|
|
1916
|
-
| export | type | what it is |
|
|
1917
|
-
| --- | --- | --- |
|
|
1918
|
-
| `discordGlyph` | `SocialGlyph` | Discord's mark. Brand, so it is a solid silhouette. |
|
|
1919
|
-
| `emailGlyph` | `SocialGlyph` | The envelope. Functional, so it is a 1.6 stroke. |
|
|
1920
|
-
| `gitHubGlyph` | `SocialGlyph` | GitHub's mark. Brand, so it is a solid silhouette. |
|
|
1921
|
-
| `instagramGlyph` | `SocialGlyph` | Instagram's mark. Brand, so it is a solid silhouette. |
|
|
1922
|
-
| `linkedInGlyph` | `SocialGlyph` | LinkedIn's mark. Brand, so it is a solid silhouette. |
|
|
1923
|
-
| `newsletterGlyph` | `SocialGlyph` | |
|
|
1924
|
-
| `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. |
|
|
1925
|
-
| `SOCIAL_STROKE_WIDTH` | `1.6` | The stroke width of a functional glyph, from the document. |
|
|
1926
|
-
| `SOCIAL_VIEW_BOX` | `"0 0 24 24"` | The grid every glyph is drawn on. |
|
|
1927
|
-
| `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`. |
|
|
1928
|
-
| `socialNames` | `readonly ("Discord" \| "Email" \| "GitHub" \| "Instagram" \| "LinkedIn" \| "Newsletter" \| "Rss" \| "Website" \| "X" \| "YouTube")[]` | The ten names, in the order the catalogue declares them. |
|
|
1929
|
-
| `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. |
|
|
1930
|
-
| `websiteGlyph` | `SocialGlyph` | «My other site», and the reason it is here rather than borrowed. |
|
|
1931
|
-
| `xGlyph` | `SocialGlyph` | X's mark. Brand, so it is a solid silhouette. |
|
|
1932
|
-
| `youTubeGlyph` | `SocialGlyph` | YouTube's mark. Brand, so it is a solid silhouette. |
|
|
1933
|
-
|
|
1934
|
-
Types (3): `SocialGlyph`, `SocialGlyphShape`, `SocialName`.
|
|
1935
|
-
|
|
1936
1870
|
### `@eduardoalvarez/arrecife/variants`
|
|
1937
1871
|
|
|
1938
1872
|
| export | type | what it is |
|
|
@@ -1974,10 +1908,6 @@ Types (3): `SocialGlyph`, `SocialGlyphShape`, `SocialName`.
|
|
|
1974
1908
|
|
|
1975
1909
|
Types (13): `BrandToken`, `ColorMode`, `ColorToken`, `ControlToken`, `FontToken`, `GradientToken`, `RadiusToken`, `SeriesToken`, `SizeToken`, `SpacingToken`, `SyntaxToken`, `Tokens`, `TypeScaleToken`.
|
|
1976
1910
|
|
|
1977
|
-
### `@eduardoalvarez/arrecife/social`
|
|
1978
|
-
|
|
1979
|
-
Types (1): `SocialIconProps`.
|
|
1980
|
-
|
|
1981
1911
|
### `@eduardoalvarez/arrecife/theme`
|
|
1982
1912
|
|
|
1983
1913
|
| export | type | what it is |
|
|
@@ -2059,7 +1989,6 @@ Types (6): `ArticleData`, `BaseData`, `CourseData`, `DefaultData`, `SatoriNode`,
|
|
|
2059
1989
|
| export | type | what it is |
|
|
2060
1990
|
| --- | --- | --- |
|
|
2061
1991
|
| `cn` | `(...inputs: ClassValue[]): string` | |
|
|
2062
|
-
| `social` | `typeof import("src/social/index")` | |
|
|
2063
1992
|
| `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. |
|
|
2064
1993
|
| `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. |
|
|
2065
1994
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eduardoalvarez/arrecife",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "The component library of Eduardo Álvarez’s visual identity",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Eduardo Esteban Álvarez Castañeda <soy@eduardoalvarez.dev>",
|
|
@@ -49,16 +49,6 @@
|
|
|
49
49
|
"import": "./dist/brand/index.js",
|
|
50
50
|
"require": "./dist/brand/index.cjs"
|
|
51
51
|
},
|
|
52
|
-
"./social": {
|
|
53
|
-
"types": "./dist/social/index.d.ts",
|
|
54
|
-
"import": "./dist/social/index.js",
|
|
55
|
-
"require": "./dist/social/index.cjs"
|
|
56
|
-
},
|
|
57
|
-
"./social/data": {
|
|
58
|
-
"types": "./dist/social/data.d.ts",
|
|
59
|
-
"import": "./dist/social/data.js",
|
|
60
|
-
"require": "./dist/social/data.cjs"
|
|
61
|
-
},
|
|
62
52
|
"./icons": {
|
|
63
53
|
"types": "./dist/icons/index.d.ts",
|
|
64
54
|
"import": "./dist/icons/index.js",
|
|
@@ -126,9 +116,6 @@
|
|
|
126
116
|
"recharts": "^3.0.0"
|
|
127
117
|
},
|
|
128
118
|
"peerDependenciesMeta": {
|
|
129
|
-
"@phosphor-icons/react": {
|
|
130
|
-
"optional": true
|
|
131
|
-
},
|
|
132
119
|
"react-hook-form": {
|
|
133
120
|
"optional": true
|
|
134
121
|
},
|
|
@@ -139,32 +126,33 @@
|
|
|
139
126
|
"devDependencies": {
|
|
140
127
|
"@eslint/js": "^10.0.1",
|
|
141
128
|
"@phosphor-icons/react": "^2.1.10",
|
|
142
|
-
"@storybook/addon-a11y": "^10.
|
|
143
|
-
"@storybook/addon-docs": "^10.
|
|
144
|
-
"@storybook/addon-themes": "^10.
|
|
145
|
-
"@storybook/addon-vitest": "^10.
|
|
146
|
-
"@storybook/react-vite": "^10.
|
|
129
|
+
"@storybook/addon-a11y": "^10.6.0",
|
|
130
|
+
"@storybook/addon-docs": "^10.6.0",
|
|
131
|
+
"@storybook/addon-themes": "^10.6.0",
|
|
132
|
+
"@storybook/addon-vitest": "^10.6.0",
|
|
133
|
+
"@storybook/react-vite": "^10.6.0",
|
|
147
134
|
"@tailwindcss/vite": "^4.3.3",
|
|
148
135
|
"@types/react": "^19.2.0",
|
|
149
|
-
"@types/react-dom": "^19.2.
|
|
150
|
-
"@vitest/browser": "^
|
|
151
|
-
"@vitest/browser-playwright": "^
|
|
152
|
-
"eslint": "^10.
|
|
136
|
+
"@types/react-dom": "^19.2.7",
|
|
137
|
+
"@vitest/browser": "^5.0.0",
|
|
138
|
+
"@vitest/browser-playwright": "^5.0.0",
|
|
139
|
+
"eslint": "^10.10.0",
|
|
153
140
|
"eslint-plugin-react-hooks": "^7.0.0",
|
|
154
|
-
"globals": "^17.
|
|
155
|
-
"playwright": "^1.
|
|
141
|
+
"globals": "^17.12.0",
|
|
142
|
+
"playwright": "^1.63.0",
|
|
156
143
|
"react": "^19.2.0",
|
|
157
144
|
"react-dom": "^19.2.0",
|
|
158
145
|
"react-hook-form": "^7.87.0",
|
|
159
146
|
"recharts": "^3.10.1",
|
|
160
|
-
"storybook": "^10.
|
|
161
|
-
"storybook-addon-pseudo-states": "^10.
|
|
147
|
+
"storybook": "^10.6.0",
|
|
148
|
+
"storybook-addon-pseudo-states": "^10.6.0",
|
|
162
149
|
"tailwindcss": "^4.3.3",
|
|
163
150
|
"tsup": "^8.5.1",
|
|
164
|
-
"typescript": "^
|
|
165
|
-
"typescript-eslint": "^8.
|
|
151
|
+
"typescript": "^6.0.3",
|
|
152
|
+
"typescript-eslint": "^8.69.0",
|
|
166
153
|
"vite": "^8.2.2",
|
|
167
|
-
"vitest": "^
|
|
154
|
+
"vitest": "^5.0.0",
|
|
155
|
+
"eslint-plugin-storybook": "10.6.0"
|
|
168
156
|
},
|
|
169
157
|
"packageManager": "pnpm@11.20.0",
|
|
170
158
|
"engines": {
|
package/dist/chunk-HOADZ6GS.js
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { gitHubGlyph, linkedInGlyph, xGlyph, instagramGlyph, discordGlyph, youTubeGlyph, rssGlyph, emailGlyph, newsletterGlyph, websiteGlyph, SOCIAL_STROKE_WIDTH, SOCIAL_VIEW_BOX } from './chunk-LXRGQKMG.js';
|
|
2
|
-
import { __export } from './chunk-MLKGABMK.js';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
|
|
5
|
-
// src/social/index.tsx
|
|
6
|
-
var social_exports = {};
|
|
7
|
-
__export(social_exports, {
|
|
8
|
-
Discord: () => Discord,
|
|
9
|
-
Email: () => Email,
|
|
10
|
-
GitHub: () => GitHub,
|
|
11
|
-
Instagram: () => Instagram,
|
|
12
|
-
LinkedIn: () => LinkedIn,
|
|
13
|
-
Newsletter: () => Newsletter,
|
|
14
|
-
Rss: () => Rss,
|
|
15
|
-
Website: () => Website,
|
|
16
|
-
X: () => X,
|
|
17
|
-
YouTube: () => YouTube
|
|
18
|
-
});
|
|
19
|
-
var SOLID = { fill: "currentColor", stroke: "none" };
|
|
20
|
-
function drawShape(shape, index) {
|
|
21
|
-
if (shape.tag === "path") {
|
|
22
|
-
return /* @__PURE__ */ jsx("path", { d: shape.d, ...shape.solid ? SOLID : {} }, index);
|
|
23
|
-
}
|
|
24
|
-
if (shape.tag === "circle") {
|
|
25
|
-
return /* @__PURE__ */ jsx("circle", { cx: shape.cx, cy: shape.cy, r: shape.r, ...shape.solid ? SOLID : {} }, index);
|
|
26
|
-
}
|
|
27
|
-
return /* @__PURE__ */ jsx(
|
|
28
|
-
"rect",
|
|
29
|
-
{
|
|
30
|
-
x: shape.x,
|
|
31
|
-
y: shape.y,
|
|
32
|
-
width: shape.width,
|
|
33
|
-
height: shape.height,
|
|
34
|
-
rx: shape.rx
|
|
35
|
-
},
|
|
36
|
-
index
|
|
37
|
-
);
|
|
38
|
-
}
|
|
39
|
-
function Glyph({ glyph, ...props }) {
|
|
40
|
-
const brand = glyph.kind === "brand";
|
|
41
|
-
return /* @__PURE__ */ jsx(
|
|
42
|
-
"svg",
|
|
43
|
-
{
|
|
44
|
-
viewBox: SOCIAL_VIEW_BOX,
|
|
45
|
-
width: "1em",
|
|
46
|
-
height: "1em",
|
|
47
|
-
fill: brand ? "currentColor" : "none",
|
|
48
|
-
...brand ? {} : {
|
|
49
|
-
stroke: "currentColor",
|
|
50
|
-
strokeWidth: SOCIAL_STROKE_WIDTH,
|
|
51
|
-
strokeLinecap: "round",
|
|
52
|
-
strokeLinejoin: "round"
|
|
53
|
-
},
|
|
54
|
-
"aria-hidden": "true",
|
|
55
|
-
focusable: "false",
|
|
56
|
-
...props,
|
|
57
|
-
children: glyph.shapes.map(drawShape)
|
|
58
|
-
}
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
var GitHub = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: gitHubGlyph, ...props });
|
|
62
|
-
var LinkedIn = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: linkedInGlyph, ...props });
|
|
63
|
-
var X = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: xGlyph, ...props });
|
|
64
|
-
var Instagram = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: instagramGlyph, ...props });
|
|
65
|
-
var Discord = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: discordGlyph, ...props });
|
|
66
|
-
var YouTube = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: youTubeGlyph, ...props });
|
|
67
|
-
var Rss = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: rssGlyph, ...props });
|
|
68
|
-
var Email = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: emailGlyph, ...props });
|
|
69
|
-
var Newsletter = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: newsletterGlyph, ...props });
|
|
70
|
-
var Website = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: websiteGlyph, ...props });
|
|
71
|
-
|
|
72
|
-
export { Discord, Email, GitHub, Instagram, LinkedIn, Newsletter, Rss, Website, X, YouTube, social_exports };
|
package/dist/chunk-LXRGQKMG.js
DELETED
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
// src/social/data.ts
|
|
2
|
-
var SOCIAL_STROKE_WIDTH = 1.6;
|
|
3
|
-
var SOCIAL_VIEW_BOX = "0 0 24 24";
|
|
4
|
-
var gitHubGlyph = {
|
|
5
|
-
kind: "brand",
|
|
6
|
-
shapes: [
|
|
7
|
-
{
|
|
8
|
-
tag: "path",
|
|
9
|
-
d: "M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.86 10.91c.58.1.79-.25.79-.55 0-.27-.01-1.18-.02-2.14-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.8 1.18 1.83 1.18 3.09 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14 0 1.55-.01 2.79-.01 3.17 0 .3.2.66.79.55A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z"
|
|
10
|
-
}
|
|
11
|
-
]
|
|
12
|
-
};
|
|
13
|
-
var linkedInGlyph = {
|
|
14
|
-
kind: "brand",
|
|
15
|
-
shapes: [
|
|
16
|
-
{
|
|
17
|
-
tag: "path",
|
|
18
|
-
d: "M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.71h.05a4.17 4.17 0 0 1 3.75-2.06c4.01 0 4.75 2.64 4.75 6.07V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.08 1.4-2.08 2.85V21h-3.97V9Z"
|
|
19
|
-
}
|
|
20
|
-
]
|
|
21
|
-
};
|
|
22
|
-
var xGlyph = {
|
|
23
|
-
kind: "brand",
|
|
24
|
-
shapes: [
|
|
25
|
-
{
|
|
26
|
-
tag: "path",
|
|
27
|
-
d: "M17.53 3h3.06l-6.69 7.64L21.75 21h-6.16l-4.83-6.3L5.25 21H2.19l7.15-8.17L2.5 3h6.32l4.36 5.77L17.53 3Zm-1.07 16.17h1.7L7.62 4.74H5.8l10.66 14.43Z"
|
|
28
|
-
}
|
|
29
|
-
]
|
|
30
|
-
};
|
|
31
|
-
var instagramGlyph = {
|
|
32
|
-
kind: "brand",
|
|
33
|
-
shapes: [
|
|
34
|
-
{
|
|
35
|
-
tag: "path",
|
|
36
|
-
d: "M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 3.68a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32Zm0 10.16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm7.85-10.4a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0Z"
|
|
37
|
-
}
|
|
38
|
-
]
|
|
39
|
-
};
|
|
40
|
-
var discordGlyph = {
|
|
41
|
-
kind: "brand",
|
|
42
|
-
shapes: [
|
|
43
|
-
{
|
|
44
|
-
tag: "path",
|
|
45
|
-
d: "M20.32 5.56A18.5 18.5 0 0 0 15.7 4.1a.07.07 0 0 0-.07.04c-.2.36-.42.82-.58 1.19a17 17 0 0 0-5.1 0c-.16-.38-.39-.83-.59-1.19a.07.07 0 0 0-.07-.04c-1.6.28-3.15.77-4.62 1.46a.06.06 0 0 0-.03.03C1.66 10 .9 14.28 1.28 18.5a.08.08 0 0 0 .03.05 18.6 18.6 0 0 0 5.6 2.84.07.07 0 0 0 .08-.03c.43-.59.81-1.21 1.14-1.86a.07.07 0 0 0-.04-.1c-.6-.23-1.18-.51-1.74-.83a.07.07 0 0 1-.01-.12l.35-.27a.07.07 0 0 1 .07-.01 13.3 13.3 0 0 0 11.3 0 .07.07 0 0 1 .08.01l.34.27c.04.04.04.1-.01.12-.55.33-1.13.6-1.74.83a.07.07 0 0 0-.04.1c.34.65.72 1.27 1.14 1.86a.07.07 0 0 0 .08.03 18.5 18.5 0 0 0 5.6-2.84.07.07 0 0 0 .04-.05c.45-4.88-.75-9.12-3.18-12.88a.06.06 0 0 0-.03-.03ZM8.4 15.93c-1.1 0-2.01-1.01-2.01-2.25 0-1.24.89-2.25 2.01-2.25 1.13 0 2.03 1.02 2.02 2.25 0 1.24-.9 2.25-2.02 2.25Zm7.22 0c-1.1 0-2.01-1.01-2.01-2.25 0-1.24.89-2.25 2.01-2.25 1.13 0 2.03 1.02 2.02 2.25 0 1.24-.89 2.25-2.02 2.25Z"
|
|
46
|
-
}
|
|
47
|
-
]
|
|
48
|
-
};
|
|
49
|
-
var youTubeGlyph = {
|
|
50
|
-
kind: "brand",
|
|
51
|
-
shapes: [
|
|
52
|
-
{
|
|
53
|
-
tag: "path",
|
|
54
|
-
d: "M23.5 6.9a3 3 0 0 0-2.12-2.12C19.5 4.27 12 4.27 12 4.27s-7.5 0-9.38.51A3 3 0 0 0 .5 6.9 31.3 31.3 0 0 0 0 12a31.3 31.3 0 0 0 .5 5.1 3 3 0 0 0 2.12 2.12c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3 3 0 0 0 2.12-2.12A31.3 31.3 0 0 0 24 12a31.3 31.3 0 0 0-.5-5.1ZM9.6 15.6V8.4l6.24 3.6-6.24 3.6Z"
|
|
55
|
-
}
|
|
56
|
-
]
|
|
57
|
-
};
|
|
58
|
-
var rssGlyph = {
|
|
59
|
-
kind: "functional",
|
|
60
|
-
shapes: [
|
|
61
|
-
{ tag: "path", d: "M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16" },
|
|
62
|
-
{ tag: "circle", cx: 5, cy: 19, r: 1.6, solid: true }
|
|
63
|
-
]
|
|
64
|
-
};
|
|
65
|
-
var emailGlyph = {
|
|
66
|
-
kind: "functional",
|
|
67
|
-
shapes: [
|
|
68
|
-
{ tag: "rect", x: 2.75, y: 4.75, width: 18.5, height: 14.5, rx: 2 },
|
|
69
|
-
{ tag: "path", d: "m3.5 7.5 7.4 5.2a2 2 0 0 0 2.2 0l7.4-5.2" }
|
|
70
|
-
]
|
|
71
|
-
};
|
|
72
|
-
var newsletterGlyph = {
|
|
73
|
-
kind: "functional",
|
|
74
|
-
shapes: [
|
|
75
|
-
{ tag: "path", d: "M18 8.5a6 6 0 1 0-12 0c0 5-2 6.5-2 6.5h16s-2-1.5-2-6.5" },
|
|
76
|
-
{ tag: "path", d: "M13.7 19a2 2 0 0 1-3.4 0" }
|
|
77
|
-
]
|
|
78
|
-
};
|
|
79
|
-
var websiteGlyph = {
|
|
80
|
-
kind: "functional",
|
|
81
|
-
shapes: [
|
|
82
|
-
{ tag: "circle", cx: 12, cy: 12, r: 9.25 },
|
|
83
|
-
{ tag: "path", d: "M2.75 12h18.5" },
|
|
84
|
-
{ tag: "path", d: "M12 2.75a14 14 0 0 1 0 18.5a14 14 0 0 1 0-18.5" }
|
|
85
|
-
]
|
|
86
|
-
};
|
|
87
|
-
var socialGlyphs = {
|
|
88
|
-
Discord: discordGlyph,
|
|
89
|
-
Email: emailGlyph,
|
|
90
|
-
GitHub: gitHubGlyph,
|
|
91
|
-
Instagram: instagramGlyph,
|
|
92
|
-
LinkedIn: linkedInGlyph,
|
|
93
|
-
Newsletter: newsletterGlyph,
|
|
94
|
-
Rss: rssGlyph,
|
|
95
|
-
Website: websiteGlyph,
|
|
96
|
-
X: xGlyph,
|
|
97
|
-
YouTube: youTubeGlyph
|
|
98
|
-
};
|
|
99
|
-
var socialNames = Object.keys(socialGlyphs);
|
|
100
|
-
var escape = (value) => value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
101
|
-
var attributes = (pairs) => Object.entries(pairs).map(([key, value]) => ` ${key}="${escape(String(value))}"`).join("");
|
|
102
|
-
var shapeMarkup = (shape) => {
|
|
103
|
-
const solid = { fill: "currentColor", stroke: "none" };
|
|
104
|
-
if (shape.tag === "path") {
|
|
105
|
-
return `<path${attributes({ d: shape.d, ...shape.solid ? solid : {} })}/>`;
|
|
106
|
-
}
|
|
107
|
-
if (shape.tag === "circle") {
|
|
108
|
-
return `<circle${attributes({
|
|
109
|
-
cx: shape.cx,
|
|
110
|
-
cy: shape.cy,
|
|
111
|
-
r: shape.r,
|
|
112
|
-
...shape.solid ? solid : {}
|
|
113
|
-
})}/>`;
|
|
114
|
-
}
|
|
115
|
-
return `<rect${attributes({
|
|
116
|
-
x: shape.x,
|
|
117
|
-
y: shape.y,
|
|
118
|
-
width: shape.width,
|
|
119
|
-
height: shape.height,
|
|
120
|
-
rx: shape.rx
|
|
121
|
-
})}/>`;
|
|
122
|
-
};
|
|
123
|
-
function socialSvg(name, extra = {}) {
|
|
124
|
-
const glyph = socialGlyphs[name];
|
|
125
|
-
const base = glyph.kind === "brand" ? { fill: "currentColor" } : {
|
|
126
|
-
fill: "none",
|
|
127
|
-
stroke: "currentColor",
|
|
128
|
-
"stroke-width": SOCIAL_STROKE_WIDTH,
|
|
129
|
-
"stroke-linecap": "round",
|
|
130
|
-
"stroke-linejoin": "round"
|
|
131
|
-
};
|
|
132
|
-
const open = attributes({
|
|
133
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
134
|
-
viewBox: SOCIAL_VIEW_BOX,
|
|
135
|
-
width: "1em",
|
|
136
|
-
height: "1em",
|
|
137
|
-
...base,
|
|
138
|
-
"aria-hidden": "true",
|
|
139
|
-
focusable: "false",
|
|
140
|
-
...extra
|
|
141
|
-
});
|
|
142
|
-
return `<svg${open}>${glyph.shapes.map(shapeMarkup).join("")}</svg>`;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
export { SOCIAL_STROKE_WIDTH, SOCIAL_VIEW_BOX, discordGlyph, emailGlyph, gitHubGlyph, instagramGlyph, linkedInGlyph, newsletterGlyph, rssGlyph, socialGlyphs, socialNames, socialSvg, websiteGlyph, xGlyph, youTubeGlyph };
|