@eduardoalvarez/arrecife 0.8.0 → 0.10.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,
@@ -476,63 +487,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`
-
-```tsx
-// ❌ does not exist: the root publishes them grouped, not loose
-import { GitHub } from '@eduardoalvarez/arrecife';
-
-// ✅ the normal form
-import { GitHub } from '@eduardoalvarez/arrecife/social';
-
-// ✅ for iterating the catalogue
-import { social } from '@eduardoalvarez/arrecife';
-<social.GitHub />
-```
-
-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.
+### The social icons are yours, and they come from Phosphor
 
-**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.
+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:
 
-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 }`.
+```tsx
+// ❌ removed in 0.10.0
+import { GitHub, LinkedIn, Website } from '@eduardoalvarez/arrecife/social';
 
-**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:
+// ✅
+import { GithubLogo, LinkedinLogo, Globe } from '@phosphor-icons/react';
+import { Icon } from '@eduardoalvarez/arrecife/icons';
 
-```astro
----
-import { socialSvg } from '@eduardoalvarez/arrecife/social/data';
----
-<Fragment set:html={socialSvg('GitHub', { class: 'size-[19px]' })} />
+<Icon as={GithubLogo} tone="current" />
 ```
 
-`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
 
@@ -771,7 +769,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"` |  |  |  |
 
@@ -1448,6 +1446,7 @@ Source: `src/components/footer/index.tsx`
 | `brand` | `ReactNode` |  |  | The brand row: the fin and the wordmark, at the very top. |
 | `columns` | `readonly FooterColumn[]` |  |  | The link columns. Mandatory: without them `full` is the default form with extra steps. |
 | `description` | `ReactNode` |  |  | One line under the brand, saying what the site is. |
+| `domain` | `string` |  |  | The domain the signature prints, defaulting to the identity's own. |
 | `linkAsChild` | `(props: { href: string; children: ReactNode; }) => ReactNode` |  |  | Renders the column links through the child, to plug in the framework's `Link`. It receives each `href` in the Slot's `props`. |
 | `signatureHref` | `string` |  |  | Makes the domain inside the signature a link, keeping the `$`, the path and the prompt's mark as text. |
 | `social` | `readonly SocialLink[]` |  |  |  |
@@ -1695,48 +1694,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 +1820,8 @@ A series over time, with the fill fading out underneath it.
 | `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`. |
 | `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. |
 
 **BarChart**
 Bars, upright or lying down.
@@ -1881,6 +1840,8 @@ Bars, upright or lying down.
 | `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`. |
 | `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. |
 
 **LineChart**
 Lines, for comparing series against each other.
@@ -1897,6 +1858,8 @@ Lines, for comparing series against each other.
 | `series` | `readonly ChartSeries[]` | yes |  |  |
 | `summary` | `ReactNode` |  |  | What the chart says, in words. It goes in a visually hidden `figcaption`. |
 | `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. |
 
 ## Exports that are not components
 
@@ -1904,28 +1867,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 |
@@ -1967,10 +1908,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 |
@@ -2052,7 +1989,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.8.0",
+  "version": "0.10.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 };