neba 1.11.0 → 1.12.0

package/README.md

@@ -180,17 +180,17 @@ Placement props are logical, not physical — `start`/`end` rather than `left`/`
 
 **Surfaces** — Box, Card, Accordion, Collapsible, Tabs, Carousel, Toolbar, Pill, Spoiler, HowToSteps, ChatBubble, Drawer, Popover, Mockup, WindowPane, HoverCard
 
-**Display** — Typography, TextLink, Blockquote, Highlight, Divider, Chip, Badge, Avatar, AvatarGroup, AppLogo, Icon, Image, Shortcut, List, DataList, Table, DataTable, CodeBlock, Timeline, Breadcrumb, Anchor, TreeView, VisuallyHidden
+**Display** — Typography, TextLink, Blockquote, Highlight, Divider, Chip, Badge, Avatar, AppLogo, Icon, Image, Gallery, Shortcut, List, DataList, Table, DataTable, CodeBlock, Timeline, Breadcrumb, Anchor, TreeView, VisuallyHidden
 
 **Charts** — Statistic, Sparkline, LineChart, AreaChart, BarChart, PieChart, ScatterChart, TimelineChart, HeatmapChart, GaugeChart
 
 **Feedback** — Alert, Dialog, Confirm, Popconfirm, Toast, Tooltip, Overlay, Skeleton, Empty, ProgressLinear, ProgressCircular, ProgressBox, Meter, Tour
 
-**Layout** — PageLayout (with Header, Footer and Sidebar), Container, Grid (with GridContainer), Panes, AspectRatio, Portal, ScrollZone, ScrollArea
+**Layout** — PageLayout (with Header, Footer and Sidebar), Container, Grid (with GridContainer), Flex, Panes, Stack, Show, AspectRatio, Portal, ScrollZone, ScrollArea
 
-**Transitions** — AnimateFade, AnimateGrow, AnimateZoom, AnimateSlide, AnimateRotate, AnimateBlink, AnimateAppear, AnimateTyping, AnimateLighting, AnimateMarquee, AnimateHeadline
+**Transitions** — AnimateFade, AnimateGrow, AnimateZoom, AnimateSlide, AnimateRotate, AnimateBlink, AnimateReveal, AnimateFloat, AnimateShake, AnimateAppear, AnimateSplit, AnimateTyping, AnimateScramble, AnimateCounter, AnimateLighting, AnimateMarquee, AnimateHeadline
 
-**Recently added** — TreeSelect, Calendar, Image, Confirm, Popconfirm, VisuallyHidden, Portal, GaugeChart, CommandPalette, Tour, Transfer, Anchor, DataList, AvatarGroup, NavigationMenu, Menubar, Form (with Fieldset), ScrollArea, HoverCard, Meter, Toggle (with ToggleGroup), CodeBlock, HowToSteps, ScrollZone, FloatingBottomNavigation, WindowPane, Collapsible, Rating, BottomNavigation, FloatingActionButton, the charts (Sparkline, LineChart, AreaChart, BarChart, PieChart, ScatterChart, TimelineChart, HeatmapChart), DataTable, Empty, Mockup, the eleven `Animate*` wrappers, ColorPicker, Drawer, Popover, Skeleton, AspectRatio
+**Recently added** — Gallery, Flex, Show, the six new `Animate*` (Reveal, Float, Shake, Split, Counter, Scramble), Stack, TreeSelect, Calendar, Image, Confirm, Popconfirm, VisuallyHidden, Portal, GaugeChart, CommandPalette, Tour, Transfer, Anchor, DataList, NavigationMenu, Menubar, Form (with Fieldset), ScrollArea, HoverCard, Meter, Toggle (with ToggleGroup), CodeBlock, HowToSteps, ScrollZone, FloatingBottomNavigation, WindowPane, Collapsible, Rating, BottomNavigation, FloatingActionButton, the charts (Sparkline, LineChart, AreaChart, BarChart, PieChart, ScatterChart, TimelineChart, HeatmapChart), DataTable, Empty, Mockup, the `Animate*` wrappers, ColorPicker, Drawer, Popover, Skeleton, AspectRatio
 
 Each one has its own page — live previews, every prop, and the variations worth seeing — under [**All components**](https://neba.cdget.com/components/).
 

package/dist/components/animate-appear/AnimateAppear.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateProps, NebaSide } from '../../types.js';
-export interface AnimateAppearProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
-    /**
-     * How long after one child the next one starts, in milliseconds. This is the
-     * whole effect — everything else is what a single child does.
-     * @default 80
-     */
-    stagger?: number;
+import type { NebaAnimateProps, NebaSide, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateAppearProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Which edge each child drifts in from.
      * @default 'bottom'
@@ -25,11 +19,6 @@ export interface AnimateAppearProps extends NebaAnimateProps, React.ComponentPro
      * @default true
      */
     fade?: boolean;
-    /**
-     * Runs the list from the last child to the first.
-     * @default false
-     */
-    reverse?: boolean;
     /** Renders something other than a `<div>`. Base UI's own escape hatch. */
     render?: useRender.RenderProp;
     /** The things that appear, one after another. */

package/dist/components/animate-appear/AnimateAppear.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as a}from"@base-ui/react/use-render";import{animBaseClass as r,animationClasses as s,animationSlots as n,isInfinite as i,slideOffsets as l,useAnimationRun as o}from"../../internal/animate.js";import{cx as m}from"../../internal/styles.js";export const AnimateAppear=/*@__PURE__*/t.forwardRef(function({duration:d=420,delay:p=0,easing:c,repeat:f=1,alternate:y,paused:u,trigger:h="mount",play:g,once:x=!0,threshold:N=.2,stagger:j=80,from:b="bottom",distance:A="0.75rem",fade:E=!0,reverse:$=!1,render:v,className:w,style:C,children:R,...V},k){const q=o({trigger:h,play:g,once:x,threshold:N,paused:u,infinite:i(f)}),{x:z,y:B}=l(b,A),D=t.Children.toArray(R),F=`${r} ${s.slide}`,G=D.map((a,r)=>{const s=$?D.length-1-r:r,i=n({duration:d,delay:p+s*j,easing:c,repeat:f,alternate:y,x:z,y:B,opacity:E?0:1});if(!t.isValidElement(a))return e("span",{className:F,style:i,children:a},r);const l=a.props;return t.cloneElement(a,{className:m(F,l.className),style:{...i,...l.style}})});return a({render:v,ref:[k,q.ref],props:{...V,className:w,style:{"--n-anim-state":q.state,...C},...q.handlers,"data-neba-animation":"appear","data-state":q.state,children:G}})});
+"use client";import*as e from"react";import{useRender as a}from"@base-ui/react/use-render";import{animBaseClass as t,animationClasses as r,isInfinite as n,slideOffsets as i,staggerChildren as s,useAnimationRun as o}from"../../internal/animate.js";export const AnimateAppear=/*@__PURE__*/e.forwardRef(function({duration:e=420,delay:d=0,easing:l,repeat:p=1,alternate:m,paused:c,trigger:g="mount",play:u,once:f=!0,threshold:y=.2,stagger:h=80,durationStep:b=0,reverse:x=!1,timeline:v,range:A,from:N="bottom",distance:S="0.75rem",fade:$=!0,render:j,className:w,style:R,children:k,...q},z){const B=o({trigger:g,play:u,once:f,threshold:y,paused:c,infinite:n(p)}),{x:C,y:D}=i(N,S),E=s(k,`${t} ${r.slide}`,{duration:e,delay:d,easing:l,repeat:p,alternate:m,x:C,y:D,opacity:$?0:1,timeline:v,range:A},{stagger:h,durationStep:b,reverse:x});return a({render:j,ref:[z,B.ref],props:{...q,className:w,style:{"--n-anim-state":B.state,...R},...B.handlers,"data-neba-animation":"appear","data-state":B.state,children:E}})});

package/dist/components/animate-blink/AnimateBlink.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateProps } from '../../types.js';
-export interface AnimateBlinkProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { NebaAnimateProps, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateBlinkProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * How faint it gets at the bottom of the cycle, between `0` and `1`. Raise it
      * for something that has to stay readable while it pulses.

package/dist/components/animate-blink/AnimateBlink.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateBlink=/*@__PURE__*/e.forwardRef(function({duration:e=900,delay:i=0,easing:s,repeat:o="infinite",alternate:l,paused:p,trigger:c="mount",play:m,once:d=!0,threshold:f=.2,min:u=0,render:y,className:g,style:h,children:N,...b},j){const k=a({effect:"blink",duration:e,delay:i,easing:s,repeat:o,alternate:l,opacity:u,trigger:c,play:m,once:d,threshold:f,paused:p,infinite:t(o)});return r({render:y,ref:[j,k.ref],props:{...b,className:n(k.className,g),style:{...k.style,...h},...k.props,children:N}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as a}from"../../internal/styles.js";export const AnimateBlink=/*@__PURE__*/e.forwardRef(function({duration:e=900,delay:i=0,easing:s,repeat:l="infinite",alternate:o,paused:d,trigger:p="mount",play:c,once:m=!0,threshold:f=.2,stagger:g=0,durationStep:u=0,reverse:y=!1,timeline:h,range:N,min:b=0,render:j,className:k,style:v,children:S,...w},x){const A=n({effect:"blink",duration:e,delay:i,easing:s,repeat:l,alternate:o,opacity:b,trigger:p,play:c,once:m,threshold:f,paused:d,infinite:t(l),timeline:h,range:N,children:S,stagger:g,durationStep:u,reverse:y});return r({render:j,ref:[x,A.ref],props:{...w,className:a(A.className,k),style:{...A.style,...v},...A.props,children:A.children}})});

package/dist/components/animate-counter/AnimateCounter.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateProps } from '../../types.js';
+export interface AnimateCounterProps extends Omit<NebaAnimateProps, 'easing' | 'repeat' | 'alternate'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Where it lands. */
+    value: number;
+    /**
+     * Where it starts.
+     * @default 0
+     */
+    from?: number;
+    /**
+     * How long the count takes, in milliseconds.
+     * @default 1200
+     */
+    duration?: number;
+    /**
+     * How the number is written — `Intl.NumberFormat` options, so a currency, a
+     * percentage or a compact `1.2M` is a prop rather than a `format` callback.
+     */
+    format?: Intl.NumberFormatOptions;
+    /** Which language it is written in. Defaults to the reader's own. */
+    locale?: string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+}
+/**
+ * A number counted up to its value.
+ *
+ * The one animation in the library whose subject is the content rather than the
+ * box around it, and the reason it is a component: a count is a value being
+ * interpolated and formatted on every frame, which is not something a
+ * `@keyframes` can do.
+ *
+ * It pairs with [Statistic](../charts/statistic) — a dashboard that draws its
+ * numbers instantly and animates everything around them has the emphasis
+ * exactly backwards.
+ *
+ * The finished number is in the document from the first frame, in a clipped box
+ * for a screen reader; what counts is a visible copy that is `aria-hidden`.
+ * A reader who cannot see the count is told the answer rather than a hundred
+ * intermediate ones, and a reader who has asked for less motion is shown the
+ * answer too.
+ */
+export declare const AnimateCounter: React.ForwardRefExoticComponent<AnimateCounterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-counter/AnimateCounter.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useRender as a}from"@base-ui/react/use-render";import{useAnimationRun as s,usePrefersReducedMotion as i}from"../../internal/animate.js";import{srOnlyClasses as o}from"../../internal/styles.js";export const AnimateCounter=/*@__PURE__*/n.forwardRef(function({value:m,from:l=0,duration:u=1200,delay:c=0,paused:d,trigger:f="mount",play:p,once:h=!0,threshold:y=.2,format:g,locale:F,render:j,className:v,style:A,...N},x){const b=s({trigger:f,play:p,once:h,threshold:y,paused:d,infinite:!1}),q=i(),[w,M]=n.useState(l),S=void 0===g?"":JSON.stringify(g),C=n.useMemo(()=>new Intl.NumberFormat(F,g),[F,S]);return n.useEffect(()=>{if(!b.started)return void M(l);if(q||u<=0)return void M(m);let e=0,r=null;const t=n=>{null===r&&(r=n);const a=n-r-c;if(a<0)return void(e=requestAnimationFrame(t));const s=Math.min(1,a/u);M(l+(m-l)*function(e){return 1-(1-e)**3}(s)),s<1&&(e=requestAnimationFrame(t))};return M(l),e=requestAnimationFrame(t),()=>cancelAnimationFrame(e)},[b.started,q,m,l,u,c]),a({render:j,ref:[x,b.ref],props:{...N,className:v,style:A,"data-neba-animation":"counter","data-state":b.state,...b.handlers,children:t(r,{children:[e("span",{className:o,children:C.format(m)}),e("span",{"aria-hidden":"true",children:C.format(w)})]})}})});

package/dist/components/animate-counter/index.d.ts

@@ -0,0 +1 @@
+export * from './AnimateCounter.js';

package/dist/components/animate-counter/index.js

@@ -0,0 +1 @@
+export*from"./AnimateCounter.js";

package/dist/components/animate-fade/AnimateFade.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateMode, NebaAnimateProps } from '../../types.js';
-export interface AnimateFadeProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { NebaAnimateMode, NebaAnimateProps, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateFadeProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content arrives or leaves.
      * @default 'in'

package/dist/components/animate-fade/AnimateFade.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateFade=/*@__PURE__*/e.forwardRef(function({duration:e=320,delay:s=0,easing:o,repeat:i=1,alternate:l,paused:d,trigger:m="mount",play:p,once:c=!0,threshold:f=.2,mode:u="in",from:y=0,render:g,className:h,style:N,children:j,...b},w){const x=a({effect:"fade",duration:e,delay:s,easing:o,repeat:i,alternate:l,mode:u,opacity:y,trigger:m,play:p,once:c,threshold:f,paused:d,infinite:t(i)});return r({render:g,ref:[w,x.ref],props:{...b,className:n(x.className,h),style:{...x.style,...N},...x.props,children:j}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateFade=/*@__PURE__*/e.forwardRef(function({duration:e=320,delay:i=0,easing:s,repeat:o=1,alternate:l,paused:d,trigger:m="mount",play:p,once:c=!0,threshold:f=.2,stagger:g=0,durationStep:u=0,reverse:y=!1,timeline:h,range:N,mode:j="in",from:v=0,render:S,className:b,style:w,children:x,...A},F){const R=a({effect:"fade",duration:e,delay:i,easing:s,repeat:o,alternate:l,mode:j,opacity:v,trigger:m,play:p,once:c,threshold:f,paused:d,infinite:t(o),timeline:h,range:N,children:x,stagger:g,durationStep:u,reverse:y});return r({render:S,ref:[F,R.ref],props:{...A,className:n(R.className,b),style:{...R.style,...w},...R.props,children:R.children}})});

package/dist/components/animate-float/AnimateFloat.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateProps, NebaSide, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateFloatProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which way it drifts.
+     * @default 'top'
+     */
+    from?: NebaSide;
+    /**
+     * How far, at the top of the drift — a CSS length, or a number in pixels.
+     * Small on purpose: this is something resting rather than something moving,
+     * and past about a centimetre it stops reading as either.
+     * @default '0.5rem'
+     */
+    distance?: number | string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A slow drift with nowhere to get to.
+ *
+ * The only effect in the set that is neither an arrival nor a state: it says
+ * *this is not fixed to the page*, which is what an illustration, a floating
+ * card or a mark above a hero wants and what nothing else in the library says.
+ * It runs for as long as the page is open and turns round at both ends, so
+ * there is never a frame where it jumps back.
+ *
+ * It is `translate` rather than a `transform`, so it composes with anything the
+ * element is already scaled or rotated by — and it is deliberately not offered
+ * on a control: a button that is never quite where it was is a button that is
+ * harder to press.
+ */
+export declare const AnimateFloat: React.ForwardRefExoticComponent<AnimateFloatProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-float/AnimateFloat.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const AnimateFloat=/*@__PURE__*/e.forwardRef(function({duration:e=3200,delay:s=0,easing:l="ease-in-out",repeat:o="infinite",alternate:m=!0,paused:d,trigger:c="mount",play:f,once:p=!0,threshold:u=.2,stagger:g=0,durationStep:y=0,reverse:h=!1,timeline:x,range:N,from:b="top",distance:j="0.5rem",render:v,className:S,style:w,children:A,...C},F){const{x:R,y:k}=a(b,j),q=n({effect:null,effectClass:"neba-anim-float",name:"float",duration:e,delay:s,easing:l,repeat:o,alternate:m,x:R,y:k,trigger:c,play:f,once:p,threshold:u,paused:d,infinite:t(o),timeline:x,range:N,children:A,stagger:g,durationStep:y,reverse:h});return r({render:v,ref:[F,q.ref],props:{...C,className:i(q.className,S),style:{...q.style,...w},...q.props,children:q.children}})});

package/dist/components/animate-float/index.d.ts

@@ -0,0 +1 @@
+export * from './AnimateFloat.js';

package/dist/components/animate-float/index.js

@@ -0,0 +1 @@
+export*from"./AnimateFloat.js";

package/dist/components/animate-grow/AnimateGrow.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateMode, NebaAnimateProps } from '../../types.js';
-export interface AnimateGrowProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { NebaAnimateMode, NebaAnimateProps, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateGrowProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content unfolds or folds away.
      * @default 'in'

package/dist/components/animate-grow/AnimateGrow.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateGrow=/*@__PURE__*/e.forwardRef(function({duration:e=340,delay:o=0,easing:s,repeat:i=1,alternate:l,paused:m,trigger:c="mount",play:d,once:p=!0,threshold:f=.2,mode:u="in",from:g=.8,origin:y="center",fade:h=!0,render:w,className:N,style:j,children:b,...x},A){const G=a({effect:"grow",duration:e,delay:o,easing:s,repeat:i,alternate:l,mode:u,scale:g,opacity:h?0:1,trigger:c,play:d,once:p,threshold:f,paused:m,infinite:t(i)});return r({render:w,ref:[A,G.ref],props:{...x,className:n(G.className,N),style:{transformOrigin:y,...G.style,...j},...G.props,children:b}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateGrow=/*@__PURE__*/e.forwardRef(function({duration:e=340,delay:i=0,easing:s,repeat:o=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,stagger:g=0,durationStep:u=0,reverse:y=!1,timeline:h,range:w,mode:N="in",from:j=.8,origin:v="center",fade:S=!0,render:b,className:x,style:A,children:G,...O},R){const k=a({effect:"grow",duration:e,delay:i,easing:s,repeat:o,alternate:l,mode:N,scale:j,opacity:S?0:1,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(o),timeline:h,range:w,children:G,stagger:g,durationStep:u,reverse:y});return r({render:b,ref:[R,k.ref],props:{...O,className:n(k.className,x),style:{transformOrigin:v,...k.style,...A},...k.props,children:k.children}})});

package/dist/components/animate-reveal/AnimateReveal.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateMode, NebaAnimateProps, NebaSide, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateRevealProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content is uncovered or covered again.
+     * @default 'in'
+     */
+    mode?: NebaAnimateMode;
+    /**
+     * The edge the wipe travels **from**. `left` uncovers left to right.
+     * @default 'left'
+     */
+    side?: NebaSide;
+    /**
+     * Fades as it wipes, from this opacity. `1` — the default — is a wipe and
+     * nothing else, which is the point of reaching for one.
+     * @default 1
+     */
+    from?: number;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content uncovered by an edge travelling across it.
+ *
+ * The one entrance in the set where the content never moves and never changes
+ * colour: it is already in place, at full size and full strength, and what
+ * changes is how much of it has been let through. That makes it the effect to
+ * reach for on a heading, a rule, a chart's own plot area — anything whose
+ * position is the information.
+ *
+ * It is `clip-path`, so there is no wrapper and no `overflow` box: the element
+ * takes exactly the room it always took, and everything around it is laid out
+ * against the finished size from the first frame.
+ *
+ * `mode="out"` runs the same edge backwards and holds it there, which covers
+ * the content up.
+ */
+export declare const AnimateReveal: React.ForwardRefExoticComponent<AnimateRevealProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-reveal/AnimateReveal.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,revealClip as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const AnimateReveal=/*@__PURE__*/e.forwardRef(function({duration:e=620,delay:s=0,easing:l,repeat:o=1,alternate:d,paused:m,trigger:p="mount",play:c,once:f=!0,threshold:g=.2,stagger:u=0,durationStep:y=0,reverse:h=!1,timeline:v,range:N,mode:j="in",side:R="left",from:S=1,render:b,className:w,style:x,children:A,...k},q){const z=n({effect:"reveal",duration:e,delay:s,easing:l,repeat:o,alternate:d,mode:j,opacity:S,clip:a(R),trigger:p,play:c,once:f,threshold:g,paused:m,infinite:t(o),timeline:v,range:N,children:A,stagger:u,durationStep:y,reverse:h});return r({render:b,ref:[q,z.ref],props:{...k,className:i(z.className,w),style:{...z.style,...x},...z.props,children:z.children}})});

package/dist/components/animate-reveal/index.d.ts

@@ -0,0 +1 @@
+export * from './AnimateReveal.js';

package/dist/components/animate-reveal/index.js

@@ -0,0 +1 @@
+export*from"./AnimateReveal.js";

package/dist/components/animate-rotate/AnimateRotate.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateMode, NebaAnimateProps } from '../../types.js';
-export interface AnimateRotateProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { NebaAnimateMode, NebaAnimateProps, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateRotateProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /** Whether the content turns into place or out of it. @default 'in' */
     mode?: NebaAnimateMode;
     /**

package/dist/components/animate-rotate/AnimateRotate.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateRotate=/*@__PURE__*/e.forwardRef(function({duration:e=460,delay:o=0,easing:i,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,mode:g="in",from:u=-180,to:y=0,origin:h="center",fade:N=!0,render:j,className:R,style:$,children:b,...w},x){const A=a({effect:"rotate",duration:e,delay:o,easing:i,repeat:s,alternate:l,mode:g,angle:`${u}deg`,angleTo:`${y}deg`,opacity:N?0:1,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(s)});return r({render:j,ref:[x,A.ref],props:{...w,className:n(A.className,R),style:{transformOrigin:h,...A.style,...$},...A.props,children:b}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateRotate=/*@__PURE__*/e.forwardRef(function({duration:e=460,delay:i=0,easing:o,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:g=!0,threshold:p=.2,stagger:f=0,durationStep:u=0,reverse:y=!1,timeline:h,range:N,mode:j="in",from:v=-180,to:R=0,origin:S="center",fade:$=!0,render:b,className:w,style:x,children:A,...O},T){const k=a({effect:"rotate",duration:e,delay:i,easing:o,repeat:s,alternate:l,mode:j,angle:`${v}deg`,angleTo:`${R}deg`,opacity:$?0:1,trigger:m,play:c,once:g,threshold:p,paused:d,infinite:t(s),timeline:h,range:N,children:A,stagger:f,durationStep:u,reverse:y});return r({render:b,ref:[T,k.ref],props:{...O,className:n(k.className,w),style:{transformOrigin:S,...k.style,...x},...k.props,children:k.children}})});

package/dist/components/animate-scramble/AnimateScramble.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateProps } from '../../types.js';
+export interface AnimateScrambleProps extends Omit<NebaAnimateProps, 'easing' | 'alternate'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** The text, when it is easier to pass than to nest. Overrides `children`. */
+    text?: string;
+    /**
+     * How fast the text settles, in characters per second.
+     * @default 18
+     */
+    speed?: number;
+    /**
+     * How often an unsettled character is redrawn, in milliseconds. Lower is
+     * busier; below about 30 it stops reading as characters at all.
+     * @default 45
+     */
+    tick?: number;
+    /**
+     * The pool an unsettled character is drawn from. Deliberately narrow — a pool
+     * with tall and short glyphs in it makes the line jump as it settles.
+     */
+    characters?: string;
+    /**
+     * Which language the text is in, for finding the character boundaries.
+     */
+    locale?: string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    /** The text to settle. Only text is settled. */
+    children?: React.ReactNode;
+}
+/**
+ * Text arriving through noise, one character at a time.
+ *
+ * `AnimateTyping`'s sibling: a typewriter reveals a string from an empty line,
+ * this one resolves it out of a line that was already the right length. That is
+ * the whole reason to choose it — the box never changes size, so nothing around
+ * it reflows and a heading does not push the page down as it lands.
+ *
+ * Whitespace is never scrambled. A space that flickers into a letter and back
+ * reads as the words having moved, which is the one thing this effect is for
+ * avoiding.
+ *
+ * The finished string is in the document from the first frame, in a clipped box
+ * for a screen reader; the noise is a visible copy that is `aria-hidden`. A
+ * reader who has asked for less motion is shown the text.
+ */
+export declare const AnimateScramble: React.ForwardRefExoticComponent<AnimateScrambleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-scramble/AnimateScramble.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useRender as s}from"@base-ui/react/use-render";import{isInfinite as n,useAnimationRun as i,usePrefersReducedMotion as o}from"../../internal/animate.js";import{graphemesOf as l,textOf as c}from"../../internal/text.js";import{srOnlyClasses as m}from"../../internal/styles.js";const d="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&$@*";export const AnimateScramble=/*@__PURE__*/a.forwardRef(function({text:u,speed:p=18,tick:h=45,characters:f=d,duration:g,delay:x=0,repeat:j=1,paused:M,trigger:y="mount",play:v,once:N=!0,threshold:b=.2,locale:I,render:T,className:w,style:R,children:S,...A},E){const F=i({trigger:y,play:v,once:N,threshold:b,paused:M,infinite:n(j)}),k=o(),B=u??c(S),C=a.useMemo(()=>l(B,I),[B,I]),D=C.length,[G,H]=a.useState(0),[,J]=a.useReducer(e=>e+1,0),K=a.useMemo(()=>void 0!==g&&D>0?Math.max(1,g/D):1e3/Math.max(1,p),[g,p,D]);a.useEffect(()=>{if(!F.started||M)return;if(k||0===D)return void H(D);let e,t=0;const r=()=>{t+=1,H(t),t<D?e=setTimeout(r,K):clearInterval(a)};H(0);const a=setInterval(J,h);return e=setTimeout(r,x+K),()=>{clearTimeout(e),clearInterval(a)}},[F.started,M,k,D,K,h,x]);const L=f.length>0?f:d,O=C.map((e,t)=>t<G||""===e.trim()?e:L[Math.floor(Math.random()*L.length)]).join("");return s({render:T,ref:[E,F.ref],props:{...A,className:w,style:R,"data-neba-animation":"scramble","data-state":F.state,...F.handlers,children:r(t,{children:[e("span",{className:m,children:B}),e("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:O})]})}})});

package/dist/components/animate-scramble/index.d.ts

@@ -0,0 +1 @@
+export * from './AnimateScramble.js';

package/dist/components/animate-scramble/index.js

@@ -0,0 +1 @@
+export*from"./AnimateScramble.js";

package/dist/components/animate-shake/AnimateShake.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateProps, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateShakeProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How far it travels at the widest point — a CSS length, or a number in
+     * pixels. Short: this is a head shaken, not a thing thrown.
+     * @default 6
+     */
+    distance?: number | string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * The one effect in the set that says *no*.
+ *
+ * A password that was wrong, a form that would not send, a row that could not
+ * be dropped where it was let go. Every other animation here is about content
+ * arriving; this one is an **answer**, and it is the only reason to reach for
+ * it — a shake that runs on mount is decoration, and decoration that moves is
+ * what a reader learns to ignore.
+ *
+ * It is therefore almost always `trigger="manual"` with `play` bound to the
+ * thing that failed, and it starts and ends exactly where the element sits, so
+ * a run that is interrupted leaves nothing off its mark.
+ *
+ * ## Why this one is allowed to move
+ *
+ * The house rule is that a control is never transformed: scaling resamples the
+ * label, and text that shifts under the cursor is what reads as cheap. That
+ * rule is about a control's **resting states** — hover, press, on, off — where
+ * the movement is a side effect of saying something colour could say better.
+ * A shake is not a state. It is a one-off reply to something the reader just
+ * did, it is over in four hundred milliseconds, and there is no colour that
+ * says "that did not work" as unmistakably. It is an exception, it is the only
+ * one, and it should never be given `repeat`.
+ */
+export declare const AnimateShake: React.ForwardRefExoticComponent<AnimateShakeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-shake/AnimateShake.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as a,lengthValue as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const AnimateShake=/*@__PURE__*/e.forwardRef(function({duration:e=420,delay:i=0,easing:l="ease-in-out",repeat:o=1,alternate:d,paused:c,trigger:m="manual",play:p,once:f=!0,threshold:u=.2,stagger:g=0,durationStep:h=0,reverse:y=!1,timeline:k,range:N,distance:S=6,render:b,className:j,style:v,children:x,...w},A){const C=n({effect:null,effectClass:"neba-anim-shake",name:"shake",duration:e,delay:i,easing:l,repeat:o,alternate:d,x:t(S),trigger:m,play:p,once:f,threshold:u,paused:c,infinite:a(o),timeline:k,range:N,children:x,stagger:g,durationStep:h,reverse:y});return r({render:b,ref:[A,C.ref],props:{...w,className:s(C.className,j),style:{...C.style,...v},...C.props,children:C.children}})});

package/dist/components/animate-shake/index.d.ts

@@ -0,0 +1 @@
+export * from './AnimateShake.js';

package/dist/components/animate-shake/index.js

@@ -0,0 +1 @@
+export*from"./AnimateShake.js";

package/dist/components/animate-slide/AnimateSlide.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateMode, NebaAnimateProps, NebaSide } from '../../types.js';
-export interface AnimateSlideProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { NebaAnimateMode, NebaAnimateProps, NebaSide, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateSlideProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content slides in or slides away. `out` leaves by the same edge
      * it would have come from.

package/dist/components/animate-slide/AnimateSlide.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const AnimateSlide=/*@__PURE__*/e.forwardRef(function({duration:e=380,delay:o=0,easing:i,repeat:l=1,alternate:d,paused:m,trigger:c="mount",play:p,once:f=!0,threshold:y=.2,mode:u="in",from:g="bottom",distance:h="100%",fade:x=!0,render:N,className:b,style:j,children:w,...A},R){const{x:S,y:k}=a(g,h),q=n({effect:"slide",duration:e,delay:o,easing:i,repeat:l,alternate:d,mode:u,x:S,y:k,opacity:x?0:1,trigger:c,play:p,once:f,threshold:y,paused:m,infinite:t(l)});return r({render:N,ref:[R,q.ref],props:{...A,className:s(q.className,b),style:{...q.style,...j},...q.props,children:w}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const AnimateSlide=/*@__PURE__*/e.forwardRef(function({duration:e=380,delay:s=0,easing:o,repeat:l=1,alternate:d,paused:m,trigger:c="mount",play:p,once:f=!0,threshold:g=.2,stagger:u=0,durationStep:y=0,reverse:h=!1,timeline:x,range:N,mode:S="in",from:b="bottom",distance:j="100%",fade:v=!0,render:w,className:A,style:R,children:k,...q},z){const{x:B,y:C}=a(b,j),D=n({effect:"slide",duration:e,delay:s,easing:o,repeat:l,alternate:d,mode:S,x:B,y:C,opacity:v?0:1,trigger:c,play:p,once:f,threshold:g,paused:m,infinite:t(l),timeline:x,range:N,children:k,stagger:u,durationStep:y,reverse:h});return r({render:w,ref:[z,D.ref],props:{...q,className:i(D.className,A),style:{...D.style,...R},...D.props,children:D.children}})});

package/dist/components/animate-split/AnimateSplit.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateProps, NebaAnimation, NebaSide, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+/** What a piece is. */
+export type NebaSplitBy = 'word' | 'character';
+export interface AnimateSplitProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** The text, when it is easier to pass than to nest. Overrides `children`. */
+    text?: string;
+    /**
+     * What one piece is. `word` is the default and the one to reach for: a
+     * heading of eight words is eight boxes, and the same heading by character is
+     * forty-six.
+     * @default 'word'
+     */
+    by?: NebaSplitBy;
+    /**
+     * Which effect each piece arrives on — the library's own vocabulary, so a
+     * split heading's fade and an `AnimateFade` are the same fade.
+     * @default 'slide'
+     */
+    effect?: NebaAnimation;
+    /** Which edge a `slide` piece comes from. @default 'bottom' */
+    from?: NebaSide;
+    /** How far a `slide` piece travels. @default '0.4em' */
+    distance?: number | string;
+    /** Where a `grow` or `zoom` piece starts, as a multiple of its final size. */
+    scale?: number;
+    /** How far a `rotate` piece turns from, in degrees. */
+    angle?: number;
+    /** Which edge a `reveal` piece is wiped from. */
+    side?: NebaSide;
+    /**
+     * Which language the text is in, for finding the word and character
+     * boundaries. A word boundary is not a space in Japanese, Thai or Chinese.
+     */
+    locale?: string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    /** The text to split. Only text is split — an element contributes its words. */
+    children?: React.ReactNode;
+}
+/**
+ * A line of text arriving a word — or a letter — at a time.
+ *
+ * `AnimateAppear` walked down a list a child at a time; this walks along a
+ * sentence. The difference is only where the pieces come from, which is why
+ * everything below the split is the same machinery: one `@keyframes` per piece,
+ * held back by its place in the line.
+ *
+ * The whole string is in the document from the first frame — in a clipped box
+ * for a screen reader, which reads it once and is not made to sit through the
+ * performance — and what animates is a visible copy that is `aria-hidden`. That
+ * is `AnimateTyping`'s arrangement and it is here for the same two reasons: the
+ * effect costs a reader who cannot see it nothing, and a find-in-page still
+ * finds the sentence rather than forty-six separate letters.
+ *
+ * Every piece is an `inline-block`, which is what lets it be moved at all — an
+ * inline box cannot be translated up. Each keeps the space that followed it, so
+ * a line still breaks between words and never inside the gap.
+ */
+export declare const AnimateSplit: React.ForwardRefExoticComponent<AnimateSplitProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-split/AnimateSplit.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useRender as n}from"@base-ui/react/use-render";import{animBaseClass as s,animationClasses as i,isInfinite as l,staggerChildren as o,transitionParts as d,useAnimationRun as m}from"../../internal/animate.js";import{graphemesOf as c,textOf as p,wordsOf as u}from"../../internal/text.js";import{cx as f,srOnlyClasses as g}from"../../internal/styles.js";export const AnimateSplit=/*@__PURE__*/r.forwardRef(function({text:h,by:y="word",effect:j="slide",duration:x=520,delay:b=0,easing:w,repeat:N=1,alternate:S,paused:v,trigger:$="mount",play:k,once:A=!0,threshold:F=.2,stagger:M=45,durationStep:R=0,reverse:q=!1,timeline:z,range:B,from:C="bottom",distance:D="0.4em",scale:E,angle:G,side:H,locale:I,render:J,className:K,style:L,children:O,...P},Q){const T=m({trigger:$,play:k,once:A,threshold:F,paused:v,infinite:l(N)}),U=h??p(O),V=r.useMemo(()=>"word"===y?u(U,I):c(U,I),[y,U,I]),W=d({type:j,duration:x,delay:b,easing:w,repeat:N,alternate:S,from:C,distance:D,scale:E,angle:G,side:H,timeline:z,range:B}),X=o(W?V.map((a,t)=>e("span",{className:"inline-block whitespace-pre",children:a},t)):null,`${s} ${i[j]}`,W?.slots??{duration:x,delay:b,repeat:N},{stagger:M,durationStep:R,reverse:q});return n({render:J,ref:[Q,T.ref],props:{...P,className:K,style:{"--n-anim-state":T.state,...L},...T.handlers,"data-neba-animation":"split","data-state":T.state,children:t(a,{children:[e("span",{className:f(g),children:U}),e("span",{"aria-hidden":"true",children:X})]})}})});

package/dist/components/animate-split/index.d.ts

@@ -0,0 +1 @@
+export * from './AnimateSplit.js';

package/dist/components/animate-split/index.js

@@ -0,0 +1 @@
+export*from"./AnimateSplit.js";

package/dist/components/animate-typing/AnimateTyping.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{isInfinite as n,useAnimationRun as a,usePrefersReducedMotion as i}from"../../internal/animate.js";import{cx as s,srOnlyClasses as u}from"../../internal/styles.js";function o(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(o).join(""):""}export const AnimateTyping=/*@__PURE__*/r.forwardRef(function({text:c,speed:m=24,hold:f=1400,erase:l=!1,eraseSpeed:d,caret:p=!0,caretChar:h="|",duration:g,delay:y=0,repeat:x=1,paused:T,trigger:j="mount",play:v,once:N=!0,threshold:S=.2,className:w,style:M,children:b,...A},I){const E=a({trigger:j,play:v,once:N,threshold:S,paused:T,infinite:n(x)}),R=i(),C=c??o(b),k=r.useMemo(()=>function(e,t){if("undefined"!=typeof Intl&&"Segmenter"in Intl)return[...new Intl.Segmenter(t,{granularity:"grapheme"}).segment(e)].map(e=>e.segment);return[...e]}(C),[C]),q=k.length,[z,B]=r.useState(0),D=r.useRef(0),F=g&&q>0?g/q:1e3/Math.max(m,1),G=1e3/Math.max(d??2*m,1);return r.useEffect(()=>{D.current=0},[q]),r.useEffect(()=>{if(R||0===q)return void B(q);if(!E.started)return D.current=0,void B(0);if(T)return;let e,t=!1,r=D.current,n=1,a=!1;const i="infinite"===x?1/0:Math.max(1,x);if(r>=q&&1===i)return;const s=()=>{if(!t){if(a)return r-=1,D.current=r,B(r),r<=0&&(a=!1,n+=1),void(e=setTimeout(s,a?G:F));if(r+=1,D.current=r,B(r),r<q)e=setTimeout(s,F);else if(!(n>=i)){if(l)return a=!0,void(e=setTimeout(s,f));n+=1,e=setTimeout(()=>{t||(r=0,D.current=0,B(0),e=setTimeout(s,F))},f)}}};return B(r),e=setTimeout(s,0===r?y:F),()=>{t=!0,clearTimeout(e)}},[E.started,T,R,q,F,G,y,f,l,x]),t("div",{ref:e=>{E.ref(e),"function"==typeof I?I(e):I&&(I.current=e)},className:w,style:M,"data-neba-animation":"typing","data-state":E.state,...E.handlers,...A,children:[e("span",{className:u,children:C}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[k.slice(0,z).join(""),p?e("span",{className:s("neba-typing-caret"),children:h}):null]})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{isInfinite as a,useAnimationRun as n,usePrefersReducedMotion as i}from"../../internal/animate.js";import{cx as s,srOnlyClasses as o}from"../../internal/styles.js";import{graphemesOf as u,textOf as c}from"../../internal/text.js";export const AnimateTyping=/*@__PURE__*/r.forwardRef(function({text:l,speed:m=24,hold:f=1400,erase:d=!1,eraseSpeed:p,caret:h=!0,caretChar:y="|",duration:x,delay:g=0,repeat:T=1,paused:j,trigger:v="mount",play:N,once:M=!0,threshold:w=.2,className:b,style:E,children:R,...S},A){const C=n({trigger:v,play:N,once:M,threshold:w,paused:j,infinite:a(T)}),k=i(),q=l??c(R),z=r.useMemo(()=>u(q),[q]),B=z.length,[D,F]=r.useState(0),G=r.useRef(0),H=x&&B>0?x/B:1e3/Math.max(m,1),I=1e3/Math.max(p??2*m,1);return r.useEffect(()=>{G.current=0},[B]),r.useEffect(()=>{if(k||0===B)return void F(B);if(!C.started)return G.current=0,void F(0);if(j)return;let e,t=!1,r=G.current,a=1,n=!1;const i="infinite"===T?1/0:Math.max(1,T);if(r>=B&&1===i)return;const s=()=>{if(!t){if(n)return r-=1,G.current=r,F(r),r<=0&&(n=!1,a+=1),void(e=setTimeout(s,n?I:H));if(r+=1,G.current=r,F(r),r<B)e=setTimeout(s,H);else if(!(a>=i)){if(d)return n=!0,void(e=setTimeout(s,f));a+=1,e=setTimeout(()=>{t||(r=0,G.current=0,F(0),e=setTimeout(s,H))},f)}}};return F(r),e=setTimeout(s,0===r?g:H),()=>{t=!0,clearTimeout(e)}},[C.started,j,k,B,H,I,g,f,d,T]),t("div",{ref:e=>{C.ref(e),"function"==typeof A?A(e):A&&(A.current=e)},className:b,style:E,"data-neba-animation":"typing","data-state":C.state,...C.handlers,...S,children:[e("span",{className:o,children:q}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[z.slice(0,D).join(""),h?e("span",{className:s("neba-typing-caret"),children:y}):null]})]})});

package/dist/components/animate-zoom/AnimateZoom.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateMode, NebaAnimateProps } from '../../types.js';
-export interface AnimateZoomProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { NebaAnimateMode, NebaAnimateProps, NebaStaggerProps, NebaTimelineProps } from '../../types.js';
+export interface AnimateZoomProps extends NebaAnimateProps, NebaStaggerProps, NebaTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content comes forward or falls away.
      * @default 'in'

package/dist/components/animate-zoom/AnimateZoom.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateZoom=/*@__PURE__*/e.forwardRef(function({duration:e=340,delay:o=0,easing:s,repeat:i=1,alternate:l,paused:m,trigger:c="mount",play:d,once:p=!0,threshold:f=.2,mode:u="in",from:y=.4,fade:g=!0,render:h,className:N,style:j,children:b,...w},x){const z=a({effect:"zoom",duration:e,delay:o,easing:s,repeat:i,alternate:l,mode:u,scale:y,opacity:g?0:1,trigger:c,play:d,once:p,threshold:f,paused:m,infinite:t(i)});return r({render:h,ref:[x,z.ref],props:{...w,className:n(z.className,N),style:{transformOrigin:"center",...z.style,...j},...z.props,children:b}})});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateZoom=/*@__PURE__*/e.forwardRef(function({duration:e=340,delay:i=0,easing:o,repeat:s=1,alternate:l,paused:m,trigger:d="mount",play:c,once:p=!0,threshold:f=.2,stagger:g=0,durationStep:u=0,reverse:y=!1,timeline:h,range:N,mode:j="in",from:v=.4,fade:S=!0,render:b,className:w,style:x,children:z,...A},O){const R=a({effect:"zoom",duration:e,delay:i,easing:o,repeat:s,alternate:l,mode:j,scale:v,opacity:S?0:1,trigger:d,play:c,once:p,threshold:f,paused:m,infinite:t(s),timeline:h,range:N,children:z,stagger:g,durationStep:u,reverse:y});return r({render:b,ref:[O,R.ref],props:{...A,className:n(R.className,w),style:{transformOrigin:"center",...R.style,...x},...R.props,children:R.children}})});

package/dist/components/avatar/Avatar.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Avatar as n}from"@base-ui/react/avatar";import{transitionProps as r}from"../../internal/animate.js";import{AvatarGroupContext as o}from"../../internal/avatar-group.js";import{initialsOf as s}from"../../internal/initials.js";import{controlHeightClasses as i,controlSlots as l,controlSquareClasses as d,cx as c,hasContent as m,srOnlyClasses as f,surfaceClasses as u,transitionClasses as v}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const p={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},h={xs:"rounded-[0.375rem]",sm:"rounded-[0.4375rem]",md:"rounded-[0.5625rem]",lg:"rounded-[0.6875rem]",xl:"rounded-[0.875rem]"},g={solid:[u,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev)]"].join(" "),outline:[u,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft-press) [box-shadow:var(--n-elev)]"},b="after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit]",j={solid:`${b} after:[box-shadow:var(--neba-plate-solid)]`,outline:`${b} after:[box-shadow:var(--neba-plate-glass)]`,text:""},w=["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle font-semibold tracking-wide whitespace-nowrap leading-none","[&_svg]:pointer-events-none [&_svg]:size-[55%]",v].join(" ");function y(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const Avatar=/*@__PURE__*/a.forwardRef(function(u,v){const{src:b,srcSet:N,alt:z,name:C,initials:S,shape:k,variant:A,size:B,color:L,elevation:M,delay:R,imageProps:Z,onLoadingStatusChange:$,transition:_,className:F,style:I,children:P,...q}=x(u,["size","variant"]),D=a.useContext(o),E=k??D?.shape??"circle",G=A??D?.variant??"text",H=B??D?.size??"md",J=L??D?.color??"primary",K=M??D?.elevation??0,O=C?s(C):"",Q=r(_),T=z??C,U=m(P)?P:(S??O)||e(y,{}),V=m(P)||Boolean(S??O),W=c(w,i[H],d[H],p[H],"circle"===E?"rounded-full":h[H],g[G],j[G],Q.className,F??"");return t(n.Root,{ref:v,className:W,style:{...l(J,K,G),...Q.style,...I},...q,children:[b?e(n.Image,{src:b,srcSet:N,alt:T??"",className:"size-full object-cover",decoding:"async",onLoadingStatusChange:$,...Z}):null,t(n.Fallback,{delay:b?R:void 0,className:"flex size-full items-center justify-center",children:[T&&V?e("span",{className:f,children:T}):null,e("span",{"aria-hidden":!(!T||!V)||void 0,className:"contents",children:U})]})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Avatar as t}from"@base-ui/react/avatar";import{transitionProps as r}from"../../internal/animate.js";import{initialsOf as i}from"../../internal/initials.js";import{controlHeightClasses as s,controlSlots as o,controlSquareClasses as l,cx as d,hasContent as c,srOnlyClasses as m,surfaceClasses as f,transitionClasses as u}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";const x={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},h={xs:"rounded-[0.375rem]",sm:"rounded-[0.4375rem]",md:"rounded-[0.5625rem]",lg:"rounded-[0.6875rem]",xl:"rounded-[0.875rem]"},p={solid:[f,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev)]"].join(" "),outline:[f,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft-press) [box-shadow:var(--n-elev)]"},b="after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit]",g={solid:`${b} after:[box-shadow:var(--neba-plate-solid)]`,outline:`${b} after:[box-shadow:var(--neba-plate-glass)]`,text:""},j=["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle font-semibold tracking-wide whitespace-nowrap leading-none","[&_svg]:pointer-events-none [&_svg]:size-[55%]",u].join(" ");function w(){return a("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const Avatar=/*@__PURE__*/n.forwardRef(function(n,f){const{src:u,srcSet:b,alt:y,name:N,initials:z,shape:_,variant:S,size:k,color:C,elevation:A,delay:B,imageProps:L,onLoadingStatusChange:M,transition:R,className:Z,style:$,children:F,...I}=v(n,["size","variant"]),P=_??"circle",q=S??"text",D=k??"md",E=C??"primary",G=A??0,H=N?i(N):"",J=r(R),K=y??N,O=c(F)?F:(z??H)||e(w,{}),Q=c(F)||Boolean(z??H),T=d(j,s[D],l[D],x[D],"circle"===P?"rounded-full":h[D],p[q],g[q],J.className,Z??"");return a(t.Root,{ref:f,className:T,style:{...o(E,G,q),...J.style,...$},...I,children:[u?e(t.Image,{src:u,srcSet:b,alt:K??"",className:"size-full object-cover [animation:neba-anim-fade_var(--neba-duration-fill)_var(--neba-ease)_both]",decoding:"async",onLoadingStatusChange:M,...L}):null,a(t.Fallback,{delay:u?B:void 0,className:"flex size-full items-center justify-center",children:[K&&Q?e("span",{className:m,children:K}):null,e("span",{"aria-hidden":!(!K||!Q)||void 0,className:"contents",children:O})]})]})});