neba 1.11.0 → 1.12.0

package/dist/tailwind.css

@@ -1391,7 +1391,57 @@
 }
 
 /* ---------------------------------------------------------------------------
- * Grid
+ * Breakpoints
+ *
+ * The five widths the whole library branches on, taken from Tailwind's theme
+ * rather than written out — `theme()` resolves at build time, in whichever
+ * Tailwind build compiles this file, so a consumer who redeclares
+ * `--breakpoint-md` in their own `@theme` moves the media queries below, the
+ * `md:` variants the components spell out, and the JavaScript that reads the
+ * tokens here, all at once. That is the whole mechanism: a breakpoint is a
+ * build-time decision, because `@media` cannot read a custom property and no
+ * amount of runtime configuration can change that.
+ *
+ * `xs` has no token because its floor is `0`: it is the value with no media
+ * query around it, and there is nothing for JavaScript to look up.
+ *
+ * Tailwind does not emit `--breakpoint-*` into `:root` — they are compile-time
+ * values to it — so the four are copied under a name of the library's own,
+ * which is what `internal/media.ts` reads to build its `matchMedia` queries.
+ * Declared once, on `:root` alone: a width is not a theme-dependent value, so
+ * the rule about repeating derived tokens per theme root does not apply.
+ * ------------------------------------------------------------------------- */
+
+:root {
+  --neba-breakpoint-sm: theme(--breakpoint-sm);
+  --neba-breakpoint-md: theme(--breakpoint-md);
+  --neba-breakpoint-lg: theme(--breakpoint-lg);
+  --neba-breakpoint-xl: theme(--breakpoint-xl);
+}
+
+/* ---------------------------------------------------------------------------
+ * Responsive slots
+ *
+ * Every value in the library that changes at a breakpoint resolves here: one
+ * cascade per slot name, each breakpoint falling back through the ones below
+ * it, so `span={{ md: 6 }}` sets one custom property and not five. A media
+ * query can change an inherited custom property without React hearing about
+ * it, which is the whole reason this is CSS — the alternative is re-rendering
+ * the tree at every breakpoint to say the same thing.
+ *
+ * Nothing here *applies* a value except the grid's own width arithmetic. The
+ * components read the resolved slot through an ordinary Tailwind utility —
+ * `gap-x-(--n-gap-x)`, `max-w-(--n-max-w)` — so a caller's own class fights
+ * that utility on equal terms, exactly as it did before the value was
+ * responsive. A real declaration in this file would win that fight, because
+ * this sheet is loaded after the utilities.
+ *
+ * The chains get long at `xl`; that is the cost of keeping the DOM lean, and it
+ * is paid once here rather than on every grid item in a consumer's app. It is
+ * also why the list of responsive axes is deliberately short — four media
+ * blocks per slot cannot be generated, so each new one is a decision.
+ *
+ * The grid ------------------------------------------------------------------
  *
  * A column is `(100% + gap) * span / columns - gap` wide, and an offset shifts
  * it by `(100% + gap) * offset / columns`. Both are exact rather than
@@ -1409,21 +1459,45 @@
  * `min(span, columns)` is the clamp: a `span={99}` fills its row instead of
  * overflowing the page, which is what the caller meant.
  *
- * Every slot cascades upward — each breakpoint falls back through the ones
- * below it — so `span={{ md: 6 }}` sets one custom property and not five. The
- * chains get long at `xl`; that is the cost of keeping the DOM lean, and it is
- * paid once here rather than on every grid item in a consumer's app.
- *
- * The widths are Tailwind's own breakpoints, so a Neba grid and a `md:` utility
- * change at the same moment.
+ * The widths are read from Tailwind's theme, so a Neba grid and a `md:` utility
+ * change at the same moment — including when a consumer has moved them.
  * ------------------------------------------------------------------------- */
 
-.neba-grid {
-  --n-cols: var(--n-cols-xs, 12);
+/* The two gutters, shared: a GridContainer and a Flex ask the same question
+   and `spacing` has to mean the same number on both.
+
+   `--n-cols` is shared with a Gallery one rule down for that same reason: how
+   many columns a row is cut into is one question, and a second cascade for it
+   would be four more media blocks saying the thing this one already says. The
+   `12` fallback is a grid's; a Gallery always emits its own `xs`, so it never
+   reaches. */
+.neba-grid,
+.neba-flex {
   --n-gap-x: var(--n-gap-x-xs, 0px);
   --n-gap-y: var(--n-gap-y-xs, 0px);
 }
 
+.neba-grid,
+.neba-gallery {
+  --n-cols: var(--n-cols-xs, 12);
+}
+
+/* A Flex, whose other responsive value is which way the row runs. `row` is the
+   fallback so a `<Flex>` with no direction at all is still a row. */
+.neba-flex {
+  --n-flex-dir: var(--n-flex-dir-xs, row);
+}
+
+/* A Container, a Header and a Footer, whose one responsive value is how wide
+   the content on them is allowed to get. The slot is applied by a
+   `max-w-(--n-max-w)` utility on the component rather than by a rule here, so
+   the component's measure stays exactly as overridable by a caller's own
+   `max-w-*` as it was when it was a `max-w-[48rem]` — a custom property is
+   invisible to that fight, and a real class in this file would have won it. */
+.neba-measure {
+  --n-max-w: var(--n-max-w-xs, none);
+}
+
 .neba-grid-item {
   --n-span: var(--n-span-xs, var(--n-cols, 12));
   --n-offset: var(--n-offset-xs, 0);
@@ -1442,39 +1516,81 @@
   margin-inline-start: calc(var(--n-track) * min(var(--n-offset), var(--n-cols, 12)));
 }
 
-@media (width >= 40rem) {
-  .neba-grid {
-    --n-cols: var(--n-cols-sm, var(--n-cols-xs, 12));
+@media (width >= theme(--breakpoint-sm)) {
+  .neba-measure {
+    --n-max-w: var(--n-max-w-sm, var(--n-max-w-xs, none));
+  }
+
+  .neba-grid,
+  .neba-flex {
     --n-gap-x: var(--n-gap-x-sm, var(--n-gap-x-xs, 0px));
     --n-gap-y: var(--n-gap-y-sm, var(--n-gap-y-xs, 0px));
   }
 
+  .neba-grid,
+  .neba-gallery {
+    --n-cols: var(--n-cols-sm, var(--n-cols-xs, 12));
+  }
+
+  .neba-flex {
+    --n-flex-dir: var(--n-flex-dir-sm, var(--n-flex-dir-xs, row));
+  }
+
   .neba-grid-item {
     --n-span: var(--n-span-sm, var(--n-span-xs, var(--n-cols, 12)));
     --n-offset: var(--n-offset-sm, var(--n-offset-xs, 0));
   }
 }
 
-@media (width >= 48rem) {
-  .neba-grid {
-    --n-cols: var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12)));
+@media (width >= theme(--breakpoint-md)) {
+  .neba-measure {
+    --n-max-w: var(--n-max-w-md, var(--n-max-w-sm, var(--n-max-w-xs, none)));
+  }
+
+  .neba-grid,
+  .neba-flex {
     --n-gap-x: var(--n-gap-x-md, var(--n-gap-x-sm, var(--n-gap-x-xs, 0px)));
     --n-gap-y: var(--n-gap-y-md, var(--n-gap-y-sm, var(--n-gap-y-xs, 0px)));
   }
 
+  .neba-grid,
+  .neba-gallery {
+    --n-cols: var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12)));
+  }
+
+  .neba-flex {
+    --n-flex-dir: var(--n-flex-dir-md, var(--n-flex-dir-sm, var(--n-flex-dir-xs, row)));
+  }
+
   .neba-grid-item {
     --n-span: var(--n-span-md, var(--n-span-sm, var(--n-span-xs, var(--n-cols, 12))));
     --n-offset: var(--n-offset-md, var(--n-offset-sm, var(--n-offset-xs, 0)));
   }
 }
 
-@media (width >= 64rem) {
-  .neba-grid {
-    --n-cols: var(--n-cols-lg, var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12))));
+@media (width >= theme(--breakpoint-lg)) {
+  .neba-measure {
+    --n-max-w: var(--n-max-w-lg, var(--n-max-w-md, var(--n-max-w-sm, var(--n-max-w-xs, none))));
+  }
+
+  .neba-grid,
+  .neba-flex {
     --n-gap-x: var(--n-gap-x-lg, var(--n-gap-x-md, var(--n-gap-x-sm, var(--n-gap-x-xs, 0px))));
     --n-gap-y: var(--n-gap-y-lg, var(--n-gap-y-md, var(--n-gap-y-sm, var(--n-gap-y-xs, 0px))));
   }
 
+  .neba-grid,
+  .neba-gallery {
+    --n-cols: var(--n-cols-lg, var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12))));
+  }
+
+  .neba-flex {
+    --n-flex-dir: var(
+      --n-flex-dir-lg,
+      var(--n-flex-dir-md, var(--n-flex-dir-sm, var(--n-flex-dir-xs, row)))
+    );
+  }
+
   .neba-grid-item {
     --n-span: var(
       --n-span-lg,
@@ -1484,12 +1600,16 @@
   }
 }
 
-@media (width >= 80rem) {
-  .neba-grid {
-    --n-cols: var(
-      --n-cols-xl,
-      var(--n-cols-lg, var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12))))
+@media (width >= theme(--breakpoint-xl)) {
+  .neba-measure {
+    --n-max-w: var(
+      --n-max-w-xl,
+      var(--n-max-w-lg, var(--n-max-w-md, var(--n-max-w-sm, var(--n-max-w-xs, none))))
     );
+  }
+
+  .neba-grid,
+  .neba-flex {
     --n-gap-x: var(
       --n-gap-x-xl,
       var(--n-gap-x-lg, var(--n-gap-x-md, var(--n-gap-x-sm, var(--n-gap-x-xs, 0px))))
@@ -1500,6 +1620,21 @@
     );
   }
 
+  .neba-grid,
+  .neba-gallery {
+    --n-cols: var(
+      --n-cols-xl,
+      var(--n-cols-lg, var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12))))
+    );
+  }
+
+  .neba-flex {
+    --n-flex-dir: var(
+      --n-flex-dir-xl,
+      var(--n-flex-dir-lg, var(--n-flex-dir-md, var(--n-flex-dir-sm, var(--n-flex-dir-xs, row))))
+    );
+  }
+
   .neba-grid-item {
     --n-span: var(
       --n-span-xl,
@@ -1512,6 +1647,31 @@
   }
 }
 
+/* ---------------------------------------------------------------------------
+ * A justified gallery's last row
+ *
+ * `layout="justified"` is a wrapping flex row where every tile grows in
+ * proportion to its own aspect ratio, which is what makes each row fill the
+ * width exactly and every tile in it come out the same height. The arithmetic
+ * is the browser's; nothing is measured and nothing re-renders on a resize.
+ *
+ * The one thing it gets wrong on its own is the last row, which has fewer tiles
+ * to share the same width and blows them up to fill it — five photographs
+ * ending in one the size of a poster. A generated box with an absurd
+ * `flex-grow` takes that leftover instead, so the last row keeps the height the
+ * rows above it have.
+ *
+ * It is `::after` rather than an element because the gallery is a `<ul>`, and a
+ * spacer `<span>` between the `<li>`s is markup that says a list item is
+ * something it is not.
+ * ------------------------------------------------------------------------- */
+
+.neba-gallery-justified::after {
+  content: '';
+  flex-grow: 1000000000;
+  min-inline-size: 0;
+}
+
 /* ---------------------------------------------------------------------------
  * Tree guides
  *
@@ -1858,6 +2018,27 @@
   animation-play-state: var(--n-anim-state, running);
 }
 
+/*
+ * The same eleven effects, driven by where the element is rather than by when.
+ *
+ * Two declarations and nothing else, which is the whole reason this is a prop
+ * and not a component: every keyframe already runs from a start state to the
+ * element's own, so pointing it at a scroll timeline instead of the clock needs
+ * no new keyframe and no JavaScript. A `timeline` of `view` fills the slot; the
+ * default `auto` is the clock, and the three declarations above go on meaning
+ * what they meant.
+ *
+ * Guarded, because a browser without `animation-timeline` must not be handed an
+ * animation with no clock to run on: unsupported, the whole block is skipped and
+ * the effect plays once on the timeline it always had. Degraded, never blank.
+ */
+@supports (animation-timeline: view()) {
+  .neba-anim {
+    animation-timeline: var(--n-anim-timeline, auto);
+    animation-range: var(--n-anim-range, normal);
+  }
+}
+
 @keyframes neba-anim-fade {
   from {
     opacity: var(--n-anim-opacity, 0);
@@ -1936,6 +2117,81 @@
   animation-name: neba-anim-blink;
 }
 
+/*
+ * Reveal: an edge travelling across something that is already there.
+ *
+ * `clip-path` rather than a mask, and rather than a wrapper with `overflow`.
+ * A mask would need a gradient whose direction is a fourth thing to keep in
+ * step with the side; a wrapper would be an element in the layout that the
+ * effect had no other reason to add. An inset is one property, it is animatable,
+ * and `inset(0)` — the resting state — is exactly "nothing clipped".
+ *
+ * The opacity slot defaults to `1` here rather than to `0`: a reveal is not a
+ * fade, and something wiped in while also fading has had the wipe wasted on it.
+ * Pass `fade` and it is both.
+ */
+@keyframes neba-anim-reveal {
+  from {
+    opacity: var(--n-anim-opacity, 1);
+    clip-path: var(--n-anim-clip, inset(0 100% 0 0));
+  }
+  to {
+    opacity: 1;
+    clip-path: inset(0);
+  }
+}
+
+.neba-anim-reveal {
+  animation-name: neba-anim-reveal;
+}
+
+/* Float: a slow drift with nowhere to get to. Asymmetric on purpose — it starts
+   where the element sits, so an element whose animation is interrupted is left
+   where the layout put it rather than half a centimetre above it. */
+@keyframes neba-anim-float {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: var(--n-anim-x, 0px) var(--n-anim-y, -0.5rem);
+  }
+}
+
+.neba-anim-float {
+  animation-name: neba-anim-float;
+}
+
+/*
+ * Shake: the one effect in the set that says *no*.
+ *
+ * Five stops rather than two, and the last two are smaller than the first two,
+ * because a shake that ends as hard as it began reads as a loop that was cut
+ * off. It starts and ends at zero for the reason `blink` is symmetric: an
+ * interrupted run must not leave the element off its own mark.
+ */
+@keyframes neba-anim-shake {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+  20% {
+    translate: calc(var(--n-anim-x, 6px) * -1) 0;
+  }
+  40% {
+    translate: var(--n-anim-x, 6px) 0;
+  }
+  60% {
+    translate: calc(var(--n-anim-x, 6px) * -0.55) 0;
+  }
+  80% {
+    translate: calc(var(--n-anim-x, 6px) * 0.55) 0;
+  }
+}
+
+.neba-anim-shake {
+  animation-name: neba-anim-shake;
+}
+
 /*
  * Lighting: a light travelling around the outside of something.
  *

package/dist/types.d.ts

@@ -101,6 +101,23 @@ export type NebaDateGranularity = 'day' | 'month' | 'year';
  * `xs` is 0: it is the value with no media query around it.
  */
 export type NebaBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * How wide content is allowed to get.
+ *
+ * A step of the measure ladder — `xs` 30rem, `sm` 40rem, `md` 48rem, `lg`
+ * 64rem, `xl` 80rem — `none` for no limit, or any CSS length the caller writes:
+ * `'60ch'`, `'min(90vw, 72rem)'`, or a number, which is pixels.
+ *
+ * The ladder shares its five names with `NebaBreakpoint` and four of its five
+ * values, which is deliberate: `maxWidth="md"` holds the content to the width
+ * at which a `md:` variant starts, so the two ladders line up where a layout
+ * needs them to. `xs` is the one step that is not a breakpoint floor, because a
+ * measure of zero is not a thing.
+ *
+ * The `string & {}` is what keeps the five names in a caller's autocomplete: a
+ * bare `| string` would swallow the literals and offer nothing.
+ */
+export type NebaMeasure = NebaSize | 'none' | number | (string & {});
 /**
  * A value that may differ per breakpoint.
  *
@@ -145,19 +162,43 @@ export type NebaVariant = 'solid' | 'outline' | 'text';
  */
 export type NebaElevation = 0 | 1 | 2 | 3;
 /**
- * The six effects the `Animate*` components are built out of, and the six
- * values the `transition` prop takes.
+ * The seven effects the `transition` prop takes, which is the **entrance**
+ * vocabulary: everything a component can be given to arrive on.
  *
  * They are named after what a reader sees rather than after the CSS property
  * underneath: `zoom` and `grow` are both a change of scale, and they are two
  * words because they are two *gestures* — one arrives from the middle of where
  * it will end up, the other unfolds from nothing.
  *
- * Everything past these six is a component rather than a value. Typing, a
- * marquee and a headline reel need to know what their children *are*, and a
- * prop that only sets class names cannot.
+ * Two `Animate*` components are deliberately **not** in it, and not only
+ * because neither is an entrance. This union is two `Record`s in
+ * `internal/animate.tsx`, an object literal cannot be tree-shaken per key, and
+ * those two tables are a fixed cost on every component that offers a
+ * `transition` — so `AnimateFloat`'s drift, which has no arrival in it, and
+ * `AnimateShake`'s reply to a failed form would be paid for by every Chip on
+ * every page that draws one. They bring their own keyframe instead.
+ *
+ * Everything past a keyframe is a component rather than a value. A typewriter,
+ * a marquee, a headline reel, a split line, a settling scramble and a counted
+ * number all need to know what their children *are*, and a prop that only sets
+ * class names cannot.
+ */
+export type NebaAnimation = 'fade' | 'grow' | 'slide' | 'zoom' | 'rotate' | 'blink' | 'reveal';
+/**
+ * What drives an animation's progress.
+ *
+ * - `time` — the clock. The default, and what every other prop on an animation
+ *   is written against.
+ * - `view` — how far the element has travelled through the viewport. The
+ *   animation has no duration of its own any more: scrolling forwards plays it
+ *   forwards, scrolling back plays it back, and stopping halfway holds it
+ *   halfway. `duration`, `delay`, `repeat` and every `trigger` are ignored,
+ *   because the scroll position *is* the trigger.
+ *
+ * Where `animation-timeline` is not supported the effect falls back to `time`
+ * and runs on mount, which is the same content delivered a plainer way.
  */
-export type NebaAnimation = 'fade' | 'grow' | 'slide' | 'zoom' | 'rotate' | 'blink';
+export type NebaAnimateTimeline = 'time' | 'view';
 /**
  * What makes an animation run.
  *
@@ -187,6 +228,43 @@ export type NebaAnimateRepeat = number | 'infinite';
  * whose type is `string` invites `'0.4s'`, and then two components in the same
  * screen are written in two units.
  */
+/**
+ * The three props that turn one effect on a box into the same effect on the
+ * things inside it, one after another.
+ *
+ * They are their own bundle rather than part of `NebaAnimateProps` because only
+ * some of the eleven can take them. An effect that already has to understand its
+ * children — a marquee that duplicates them, a headline that swaps between them,
+ * a typewriter that counts characters — has no second axis to spend on order.
+ *
+ * `delay` and `duration` stay what they were: what *every* child gets. These
+ * three are the difference between them.
+ */
+export interface NebaStaggerProps {
+    /**
+     * How long after one child the next one starts, in milliseconds.
+     *
+     * `0` — the default everywhere but `AnimateAppear` — animates the box itself
+     * and leaves the children alone, which is the plain single-element effect.
+     * Anything above it moves the animation onto each child in turn.
+     * @default 0
+     */
+    stagger?: number;
+    /**
+     * How much longer each successive child takes than the one before it, in
+     * milliseconds. Negative to speed them up down the list.
+     *
+     * A duration never goes below zero however far the list runs.
+     * @default 0
+     */
+    durationStep?: number;
+    /**
+     * Runs the children from the last to the first. Only the *order* reverses —
+     * each child still plays forwards.
+     * @default false
+     */
+    reverse?: boolean;
+}
 export interface NebaAnimateProps {
     /** How long one run takes, in milliseconds. */
     duration?: number;
@@ -217,6 +295,35 @@ export interface NebaAnimateProps {
      */
     threshold?: number;
 }
+/**
+ * The two props that swap the clock for the scrollbar.
+ *
+ * Their own bundle rather than part of `NebaAnimateProps`, for the reason
+ * `NebaStaggerProps` is: only the effects whose motion is one `@keyframes` on
+ * the element itself can be pointed at another timeline. A marquee that measures
+ * its own track, a typewriter counting characters and a light travelling round a
+ * pseudo-element are motion written in other places, and offering them a prop
+ * that quietly did nothing would be worse than not offering it.
+ */
+export interface NebaTimelineProps {
+    /**
+     * What drives the progress: the clock, or how far the element has travelled
+     * through the viewport.
+     *
+     * `view` costs `duration`, `delay`, `repeat` and `trigger` — a scroll-driven
+     * animation has no time in it, and the scroll position is what starts it. It
+     * falls back to `time` where the browser has no `animation-timeline`, which
+     * plays the effect once on mount.
+     * @default 'time'
+     */
+    timeline?: NebaAnimateTimeline;
+    /**
+     * The scroll range a `view` timeline is mapped over, written the way CSS
+     * `animation-range` is: `entry 0% cover 45%` is the default, which plays the
+     * effect out over the first part of the element's journey up the screen.
+     */
+    range?: string;
+}
 /** The options a `transition` prop takes when a bare effect name is not enough. */
 export interface NebaTransitionOptions {
     /** Which effect. */
@@ -239,6 +346,12 @@ export interface NebaTransitionOptions {
     scale?: number;
     /** How far a `rotate` turns from, in degrees. */
     angle?: number;
+    /** Which edge a `reveal` is wiped from. @default 'left' */
+    side?: NebaSide;
+    /** What drives the progress. @default 'time' */
+    timeline?: NebaAnimateTimeline;
+    /** The scroll range a `view` timeline is mapped over, as CSS writes it. */
+    range?: string;
 }
 /**
  * An entrance animation on a component that displays something.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neba",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "A comprehensive React UI component library — buttons, fields, menus, dialogs, tables and much more — accessible and themeable, sharing one prop vocabulary and a translucent acrylic design language. ESM only, types included, dark mode built in.",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -18,7 +18,8 @@
     "url": "https://github.com/jooy2/neba/issues"
   },
   "scripts": {
-    "build": "npm run format:fix && tsc --project tsconfig.prod.json && node scripts/annotate-pure.mjs && npm run minify && node scripts/build-styles.mjs",
+    "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "npm run clean && npm run format:fix && tsc --project tsconfig.prod.json && node scripts/annotate-pure.mjs && npm run minify && node scripts/build-styles.mjs",
     "lint": "eslint . --report-unused-disable-directives",
     "lint:fix": "eslint . --report-unused-disable-directives --fix",
     "minify": "terser-glob 'dist/**/*.js' --config-file terser.config.json",
@@ -29,9 +30,9 @@
     "format:fix": "prettier . --write",
     "docs:changelog": "node scripts/copy-changelog.mjs",
     "docs:dev": "npm run docs:changelog && vitepress dev docs",
-    "docs:build": "npm run docs:changelog && vitepress build docs",
+    "docs:build": "npm run docs:changelog && node --max-old-space-size=8192 ./node_modules/vitepress/bin/vitepress.js build docs",
     "docs:serve": "npm run docs:build && vitepress serve docs",
-    "test": "vitest run",
+    "test": "node scripts/run-tests.mjs",
     "test:watch": "vitest",
     "typecheck": "tsc --project tsconfig.prod.json --noEmit && tsc --project test/tsconfig.json && tsc --project docs/tsconfig.json"
   },
@@ -138,21 +139,21 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.4.0",
+    "@types/node": "^26.4.1",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "@typescript-eslint/parser": "^8.68.0",
+    "@types/react-dom": "^19.2.7",
+    "@typescript-eslint/parser": "^8.69.0",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/browser": "^4.1.11",
-    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/browser": "^5.0.0",
+    "@vitest/browser-playwright": "^5.0.0",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-n": "^18.3.0",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "globals": "^17.11.0",
+    "globals": "^17.12.0",
     "jiti": "^2.7.0",
-    "playwright": "^1.62.1",
-    "postcss": "^8.5.26",
+    "playwright": "^1.63.0",
+    "postcss": "^8.5.28",
     "prettier": "^3.9.6",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "react": "^19.2.8",
@@ -161,16 +162,16 @@
     "terser-glob": "^1.2.1",
     "tsx": "^4.23.13",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.68.0",
+    "typescript-eslint": "^8.69.0",
     "vite": "^8.2.2",
     "vitepress": "^1.6.4",
     "vitepress-i18n": "^1.4.0",
-    "vitepress-sidebar": "^1.39.0",
-    "vitest": "^4.1.11",
-    "vitest-browser-react": "^2.2.0"
+    "vitepress-sidebar": "^1.40.0",
+    "vitest": "^5.0.0",
+    "vitest-browser-react": "^2.3.0"
   },
   "dependencies": {
-    "@base-ui/react": "^1.7.0",
+    "@base-ui/react": "^1.8.0",
     "highlight.js": "^11.12.0"
   },
   "peerDependencies": {

package/dist/components/avatar-group/AvatarGroup.d.ts

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { type AvatarShape } from '../avatar/Avatar.js';
-import type { NebaColor, NebaElevation, NebaSize, NebaVariant } from '../../types.js';
-export interface AvatarGroupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
-    /**
-     * How many avatars are drawn before the rest become a count. Left out, every
-     * one of them is drawn.
-     */
-    max?: number;
-    /**
-     * How many there are altogether, when the group was handed only the first
-     * few. Without it the count is worked out from the children, which is right
-     * only when all of them were passed.
-     */
-    total?: number;
-    /**
-     * How far each avatar sits under the one before it — a CSS length, or a
-     * number of pixels. Left out it is a fraction of `size`, which keeps the
-     * overlap looking the same at every step.
-     */
-    overlap?: number | string;
-    /** Passed to every avatar in the group. @default 'md' */
-    size?: NebaSize;
-    /** Passed to every avatar in the group. @default 'circle' */
-    shape?: AvatarShape;
-    /** Passed to every avatar in the group. @default 'text' */
-    variant?: NebaVariant;
-    /** Passed to every avatar in the group. @default 'primary' */
-    color?: NebaColor;
-    /** Passed to every avatar in the group. @default 0 */
-    elevation?: NebaElevation;
-    /** The avatars. */
-    children?: React.ReactNode;
-}
-/**
- * A stack of avatars, overlapping, with the ones that did not fit as a count.
- *
- * `size`, `shape`, `variant`, `color` and `elevation` are set once here rather
- * than on every avatar — a stack whose fourth face is a size out is not a stack
- * — and an avatar's own prop still wins, which is what lets one of them be
- * marked out from the rest.
- *
- * The order is the DOM order, and the first avatar is on top: a stack read
- * left to right is read front to back, so the one the group is *about* comes
- * first rather than last.
- */
-export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;