neba 1.2.0 → 1.3.0

package/README.md

@@ -111,17 +111,19 @@ Placement props are logical, not physical — `start`/`end` rather than `left`/`
 
 ### Components
 
-**Inputs** — Button, IconButton, ButtonGroup, SegmentedButton, TextField, NumberField, OtpField, Select, Combobox, Checkbox, RadioGroup, Switch, Slider, Menu (with submenus, checkbox and radio items), ContextMenu, FilePicker, Pagination, DatePicker, TimePicker, DateTimePicker, DateRangePicker
+**Inputs** — Button, IconButton, ButtonGroup, SegmentedButton, TextField, NumberField, OtpField, Select, Combobox, Checkbox, RadioGroup, Switch, Slider, Menu (with submenus, checkbox and radio items), ContextMenu, FilePicker, Pagination, ColorPicker, DatePicker, TimePicker, DateTimePicker, DateRangePicker
 
-**Surfaces** — Box, Card, Accordion, Tabs, Carousel, Toolbar, Pill, Spoiler, ChatBubble
+**Surfaces** — Box, Card, Accordion, Tabs, Carousel, Toolbar, Pill, Spoiler, ChatBubble, Drawer, Popover
 
 **Display** — Typography, TextLink, Blockquote, Highlight, Divider, Chip, Badge, Avatar, Icon, Shortcut, Statistic, List, Table, Timeline, Breadcrumb, TreeView
 
-**Feedback** — Alert, Dialog, Toast, Tooltip, Overlay, ProgressLinear, ProgressCircular, ProgressBox
+**Feedback** — Alert, Dialog, Toast, Tooltip, Overlay, Skeleton, ProgressLinear, ProgressCircular, ProgressBox
 
-**Layout** — Container, Grid (with GridContainer), Panes
+**Layout** — Container, Grid (with GridContainer), Panes, AspectRatio
 
-Recent additions: **ChatBubble** (one message in a conversation, where the avatar, the time, the delivery mark, the media and the link card are each drawn only when given something), **Spoiler** (content covered by a blur rather than hidden, so a reader can see there is something there without reading it by accident), **TextLink** (a link with no surface of its own, and a mark for the ones that take over the window), **Avatar** (falls back to initials, a glyph or a silhouette, so it is never an empty box), **TreeView**, **Breadcrumb**, **Panes** (regions with a draggable bar between each pair) and **OtpField**; before those, **Blockquote**, **Shortcut**, **Highlight**, **SegmentedButton** and **Timeline**, and the four pickers — **DatePicker**, **TimePicker**, **DateTimePicker** and **DateRangePicker** — which take and return a plain `Date` and add no date library to your bundle.
+**Transitions** — AnimateFade, AnimateGrow, AnimateZoom, AnimateSlide, AnimateRotate, AnimateBlink, AnimateAppear, AnimateTyping, AnimateLighting, AnimateMarquee, AnimateHeadline
+
+Recent additions: the **Animate** family — eleven wrappers that make anything move (**AnimateFade**, **AnimateGrow**, **AnimateZoom**, **AnimateSlide**, **AnimateRotate**, **AnimateBlink**, plus **AnimateAppear**, **AnimateTyping**, **AnimateLighting**, **AnimateMarquee** and **AnimateHeadline** for the effects that have to know what their children are), each taking the same settings for duration, delay, repeat and what triggers it; the six named effects are also a `transition` prop on the components that display something, and every one of them is switched off entirely by a reduced-motion preference. Alongside them, **ColorPicker** — a saturation square, a hue rail, an optional opacity rail and a grid of swatches, reading and writing hex, `rgb()` and `hsl()` with no colour library underneath. Before those, **Drawer** (a panel on one edge of the window, either floating over the page or fixed in the layout — one component, one `mode` prop apart), **Popover** (a sheet anchored to the control that opened it, holding content that can actually be clicked and typed into), **Skeleton** (the shape of something that has not loaded yet, so the page does not reflow when it arrives) and **AspectRatio** (a box that keeps a proportion whatever width it is given); before those, **ChatBubble** (one message in a conversation, where the avatar, the time, the delivery mark, the media and the link card are each drawn only when given something), **Spoiler** (content covered by a blur rather than hidden, so a reader can see there is something there without reading it by accident), **TextLink** (a link with no surface of its own, and a mark for the ones that take over the window), **Avatar** (falls back to initials, a glyph or a silhouette, so it is never an empty box), **TreeView**, **Breadcrumb**, **Panes** (regions with a draggable bar between each pair) and **OtpField**; before those, **Blockquote**, **Shortcut**, **Highlight**, **SegmentedButton** and **Timeline**, and the four pickers — **DatePicker**, **TimePicker**, **DateTimePicker** and **DateRangePicker** — which take and return a plain `Date` and add no date library to your bundle.
 
 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/alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types';
+import type { NebaElevation, NebaStyleProps, NebaTransition } from '../../types';
 export interface AlertProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
     /**
      * Drop shadow depth. `0` (the default) is flat. An alert belongs to the flow
@@ -7,6 +7,12 @@ export interface AlertProps extends NebaStyleProps, Omit<React.ComponentPropsWit
      * @default 0
      */
     elevation?: NebaElevation;
+    /**
+     * An entrance animation, run once on mount: `transition="slide"` for a banner
+     * arriving, `transition="fade"` for one appearing in place. For a trigger or
+     * a replay, wrap it in an `Animate*` component instead.
+     */
+    transition?: NebaTransition;
     /**
      * The heading line. With it the alert is two-part — a headline and the detail
      * under it; without it the whole thing is one line.

package/dist/components/alert/Alert.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{boxPaddingClasses as l}from"../box/Box";import{CloseIcon as i,severityIcons as s}from"../../internal/icons";import{controlSlots as a,hasContent as o,iconClasses as r,radiusClasses as c,sheetBodyClasses as d,sheetHeaderGapClasses as f,sheetSectionGapClasses as m,sheetTitleClasses as u,surfaceClasses as x,transitionClasses as b}from"../../internal/styles";const v={solid:[x,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[x,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-(--n-soft)"},h={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"},p={solid:"",outline:"text-(--neba-muted-fg)",text:"text-(--neba-muted-fg)"},y={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const Alert=n.forwardRef(function({variant:n="outline",size:x="md",color:g="info",density:N="default",elevation:j=0,title:w,icon:k,action:$,onClose:_,closeLabel:z="Dismiss",className:B,style:C,children:A,...D},L){const R=void 0===k?s[g]:k,q=h[n],E=o(w);return t("div",{ref:L,role:y[g],className:["flex w-full items-start",l[N][x],c[x],m[x],d[x],b,v[n],r,B??""].filter(Boolean).join(" "),style:{...a(g,j,n),...C},...D,children:[o(R)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${q}`,children:R}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${f[x]}`,children:[E?e("div",{className:`neba-title font-semibold ${u[x]} ${q}`,children:w}):null,o(A)?e("div",{className:E?p[n]:void 0,children:A}):null]}),o($)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:$}):null,_?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e("button",{type:"button","aria-label":z,onClick:_,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(i,{})})}):null]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{boxPaddingClasses as l}from"../box/Box";import{CloseIcon as i,severityIcons as s}from"../../internal/icons";import{transitionProps as a}from"../../internal/animate";import{controlSlots as o,hasContent as r,iconClasses as c,radiusClasses as d,sheetBodyClasses as f,sheetHeaderGapClasses as m,sheetSectionGapClasses as u,sheetTitleClasses as x,surfaceClasses as b,transitionClasses as v}from"../../internal/styles";const h={solid:[b,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[b,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-(--n-soft)"},p={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"},y={solid:"",outline:"text-(--neba-muted-fg)",text:"text-(--neba-muted-fg)"},g={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const Alert=n.forwardRef(function({variant:n="outline",size:b="md",color:N="info",density:j="default",elevation:w=0,title:k,icon:$,action:_,onClose:z,closeLabel:B="Dismiss",transition:C,className:A,style:D,children:L,...R},q){const E=void 0===$?s[N]:$,F=p[n],G=r(k),H=a(C);return t("div",{ref:q,role:g[N],className:["flex w-full items-start",l[j][b],d[b],u[b],f[b],v,h[n],c,H.className,A??""].filter(Boolean).join(" "),style:{...o(N,w,n),...H.style,...D},...R,children:[r(E)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${F}`,children:E}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${m[b]}`,children:[G?e("div",{className:`neba-title font-semibold ${x[b]} ${F}`,children:k}):null,r(L)?e("div",{className:G?y[n]:void 0,children:L}):null]}),r(_)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:_}):null,z?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e("button",{type:"button","aria-label":B,onClick:z,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(i,{})})}):null]})});

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateProps, NebaSide } from '../../types';
+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;
+    /**
+     * Which edge each child drifts in from.
+     * @default 'bottom'
+     */
+    from?: NebaSide;
+    /**
+     * How far each child travels. Short on purpose: this is a settling, not an
+     * entrance from off screen, and a long travel on a list of eight turns the
+     * whole block into something moving.
+     * @default '0.75rem'
+     */
+    distance?: number | string;
+    /**
+     * Fades each child in as it settles.
+     * @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. */
+    children?: React.ReactNode;
+}
+/**
+ * A list of things settling into place one after another.
+ *
+ * Each child gets the same short fade and drift, held back by its position — so
+ * the effect belongs to the *set* rather than to any one item, and a reader's
+ * eye is walked down the list in the order it should be read.
+ *
+ * The animation is written onto the children themselves rather than onto
+ * wrappers around them. A row of `<li>`s stays a row of `<li>`s, a grid's cells
+ * stay its direct children, and nothing about the layout changes because the
+ * list is being animated. Only a bare string has no element to write onto, so
+ * that one is wrapped in a `<span>`.
+ *
+ * The stagger is per *child*, which means what you pass matters: eight children
+ * are eight steps, and one child holding eight things is one step. That is also
+ * how to opt part of a list out — group it.
+ */
+export declare const AnimateAppear: React.ForwardRefExoticComponent<AnimateAppearProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as a from"react";import{useRender as t}from"@base-ui/react/use-render";import{animBaseClass as r,animationClasses as n,animationSlots as s,isInfinite as i,slideOffsets as o,useAnimationRun as l}from"../../internal/animate";import{cx as m}from"../../internal/styles";export const AnimateAppear=a.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:b=80,from:A="bottom",distance:j="0.75rem",fade:E=!0,reverse:$=!1,render:v,className:w,style:C,children:R,...V},k){const q=l({trigger:h,play:g,once:x,threshold:N,paused:u,infinite:i(f)}),{x:z,y:B}=o(A,j),D=a.Children.toArray(R),F=`${r} ${n.slide}`,G=D.map((t,r)=>{const n=$?D.length-1-r:r,i=s({duration:d,delay:p+n*b,easing:c,repeat:f,alternate:y,x:z,y:B,opacity:E?0:1});if(!a.isValidElement(t))return e("span",{className:F,style:i,children:t},r);const o=t.props;return a.cloneElement(t,{className:m(F,o.className),style:{...i,...o.style}})});return t({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}})});

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

@@ -0,0 +1,2 @@
+export { AnimateAppear } from './AnimateAppear';
+export type { AnimateAppearProps } from './AnimateAppear';

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

@@ -0,0 +1 @@
+export{AnimateAppear}from"./AnimateAppear";

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateProps } from '../../types';
+export interface AnimateBlinkProps extends NebaAnimateProps, 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.
+     * @default 0
+     */
+    min?: number;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content pulsing between full opacity and a floor.
+ *
+ * The cycle is symmetric — full, faint, full — so however many times it runs it
+ * ends where it started. A blink that finished halfway would leave the element
+ * permanently half drawn, which reads as a rendering fault rather than as an
+ * effect that ended.
+ *
+ * It repeats forever unless told otherwise, because a single blink is a flicker
+ * and nobody asks for a flicker. Two things worth saying about using it at all:
+ * something that never stops moving in the corner of a page being read is the
+ * one kind of motion this library otherwise refuses, and a reader with a
+ * reduced-motion preference will see none of it — so `min` is a dimming, never
+ * the only thing carrying the message. If it is urgent, say so in words as
+ * well.
+ */
+export declare const AnimateBlink: React.ForwardRefExoticComponent<AnimateBlinkProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+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";import{cx as n}from"../../internal/styles";export const AnimateBlink=e.forwardRef(function({duration:e=900,delay:i=0,easing:s,repeat:o="infinite",alternate:l,paused:p,trigger:m="mount",play:c,once:d=!0,threshold:f=.2,min:u=0,render:y,className:g,style:h,children:N,...b},k){const w=a({effect:"blink",duration:e,delay:i,easing:s,repeat:o,alternate:l,opacity:u,trigger:m,play:c,once:d,threshold:f,paused:p,infinite:t(o)});return r({render:y,ref:[k,w.ref],props:{...b,className:n(w.className,g),style:{...w.style,...h},...w.props,children:N}})});

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

@@ -0,0 +1,2 @@
+export { AnimateBlink } from './AnimateBlink';
+export type { AnimateBlinkProps } from './AnimateBlink';

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

@@ -0,0 +1 @@
+export{AnimateBlink}from"./AnimateBlink";

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateMode, NebaAnimateProps } from '../../types';
+export interface AnimateFadeProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content arrives or leaves.
+     * @default 'in'
+     */
+    mode?: NebaAnimateMode;
+    /**
+     * The opacity it starts from, between `0` and `1`. Raise it for content that
+     * should never be completely gone.
+     * @default 0
+     */
+    from?: number;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content arriving or leaving on opacity alone.
+ *
+ * The plainest effect in the set, and the one to reach for first: nothing
+ * moves, so nothing reflows and nothing is resampled. A fade is the only
+ * entrance that is safe on a block of text at any size.
+ *
+ * `mode="out"` is the same animation run backwards, and it is held at the end —
+ * a faded-out element stays faded out rather than snapping back into view when
+ * the animation finishes.
+ */
+export declare const AnimateFade: React.ForwardRefExoticComponent<AnimateFadeProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as a,useAnimateElement as t}from"../../internal/animate";import{cx as n}from"../../internal/styles";export const AnimateFade=e.forwardRef(function({duration:e=320,delay:o=0,easing:s,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:b,...w},x){const A=t({effect:"fade",duration:e,delay:o,easing:s,repeat:i,alternate:l,mode:u,opacity:y,trigger:m,play:p,once:c,threshold:f,paused:d,infinite:a(i)});return r({render:g,ref:[x,A.ref],props:{...w,className:n(A.className,h),style:{...A.style,...N},...A.props,children:b}})});

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

@@ -0,0 +1,2 @@
+export { AnimateFade } from './AnimateFade';
+export type { AnimateFadeProps } from './AnimateFade';

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

@@ -0,0 +1 @@
+export{AnimateFade}from"./AnimateFade";

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateMode, NebaAnimateProps } from '../../types';
+export interface AnimateGrowProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content unfolds or folds away.
+     * @default 'in'
+     */
+    mode?: NebaAnimateMode;
+    /**
+     * The scale it starts from, as a multiple of its final size. Above `1` it
+     * settles down onto the page instead of up out of it.
+     * @default 0.8
+     */
+    from?: number;
+    /**
+     * Which point stays put while the rest moves — any CSS `transform-origin`.
+     * `'top'` unfolds downwards, `'bottom left'` out of a corner.
+     * @default 'center'
+     */
+    origin?: string;
+    /**
+     * Fades in as it grows. Turn it off for something already on the page that is
+     * only changing size.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content unfolding from a point.
+ *
+ * The difference from Zoom is `origin` and how far it travels: a Grow starts
+ * close to its final size and can be anchored to an edge, so it reads as
+ * something opening out of the thing next to it — a panel out of a toolbar, a
+ * card out of the row it belongs to. Zoom starts much smaller and always from
+ * the middle.
+ */
+export declare const AnimateGrow: React.ForwardRefExoticComponent<AnimateGrowProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+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";import{cx as n}from"../../internal/styles";export const AnimateGrow=e.forwardRef(function({duration:e=340,delay:o=0,easing:i,repeat:s=1,alternate:l,paused:m,trigger:d="mount",play:c,once:p=!0,threshold:f=.2,mode:g="in",from:u=.8,origin:y="center",fade:h=!0,render:w,className:N,style:b,children:x,...A},G){const O=a({effect:"grow",duration:e,delay:o,easing:i,repeat:s,alternate:l,mode:g,scale:u,opacity:h?0:1,trigger:d,play:c,once:p,threshold:f,paused:m,infinite:t(s)});return r({render:w,ref:[G,O.ref],props:{...A,className:n(O.className,N),style:{transformOrigin:y,...O.style,...b},...O.props,children:x}})});

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

@@ -0,0 +1,2 @@
+export { AnimateGrow } from './AnimateGrow';
+export type { AnimateGrowProps } from './AnimateGrow';

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

@@ -0,0 +1 @@
+export{AnimateGrow}from"./AnimateGrow";

package/dist/components/animate-headline/AnimateHeadline.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { NebaAnimateProps } from '../../types';
+export interface AnimateHeadlineProps extends Omit<NebaAnimateProps, 'alternate' | 'mode'>, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How long each line is held before the next one comes up, in milliseconds.
+     * Counted from the moment a line arrives, so it is reading time rather than a
+     * cycle length.
+     * @default 2600
+     */
+    interval?: number;
+    /**
+     * Which line is showing. Pass it to drive the reel yourself — from a step in
+     * a form, a tab, or a timer of your own.
+     */
+    index?: number;
+    /** Where an uncontrolled reel starts. @default 0 */
+    defaultIndex?: number;
+    /** Called with the line that has just come up. */
+    onIndexChange?: (index: number) => void;
+    /**
+     * Starts again after the last line. Off, the reel stops on the last one and
+     * stays there.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * How far a line travels as it comes up or leaves — a CSS length, or a number
+     * in pixels. `'100%'` is one line's own height.
+     * @default '100%'
+     */
+    rise?: number | string;
+    /** The lines, in the order they should be read. */
+    children?: React.ReactNode;
+}
+/**
+ * One line replacing the one above it, on a timer.
+ *
+ * Every line sits in the same grid cell, so the box is as tall as the longest
+ * of them from the first frame and never resizes as the reel turns — which is
+ * the whole difficulty with this effect, and the reason the lines that are not
+ * showing keep their space with `visibility` rather than being taken out of the
+ * layout.
+ *
+ * It is deliberately not a ticker. A line comes up, it stops, and it is held
+ * long enough to read; `interval` is counted from the moment it arrives rather
+ * than from the start of the cycle, so raising `duration` does not quietly eat
+ * the reading time.
+ *
+ * Use it for a set of phrases where any one of them would have done — three
+ * ways of saying what a product is, a rotating set of customer names. What it
+ * is not for is content a reader has to see, because there is no guarantee they
+ * are looking during the two seconds it is up, and a screen reader is given the
+ * line that happens to be showing rather than the set.
+ */
+export declare const AnimateHeadline: React.ForwardRefExoticComponent<AnimateHeadlineProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-headline/AnimateHeadline.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{isInfinite as n,lengthValue as a,useAnimationRun as r,usePrefersReducedMotion as i}from"../../internal/animate";import{cx as s}from"../../internal/styles";export const AnimateHeadline=t.forwardRef(function({duration:l=480,delay:o=0,easing:u,repeat:c="infinite",paused:m,trigger:d="mount",play:f,once:h=!0,threshold:p=.2,interval:g=2600,index:v,defaultIndex:y=0,onIndexChange:x,loop:b=!0,rise:E="100%",className:N,style:T,children:C,...R},j){const k=r({trigger:d,play:f,once:h,threshold:p,paused:m,infinite:n(c)}),A=i(),I=t.Children.toArray(C),M=I.length,[S,w]=t.useState(y),H=Math.min(v??S,Math.max(M-1,0)),[V,$]=t.useState(null),q=t.useRef(H);t.useEffect(()=>{q.current!==H&&($(q.current),q.current=H)},[H]),t.useEffect(()=>{if(null===V)return;const e=setTimeout(()=>$(null),l);return()=>clearTimeout(e)},[V,l]);const z=t.useCallback(()=>{const e=H+1;if(e>=M){if(!b)return;return void 0===v&&w(0),void x?.(0)}void 0===v&&w(e),x?.(e)},[H,M,b,v,x]),B=t.useRef(!1);return t.useEffect(()=>{if(void 0!==v||M<2||"running"!==k.state)return;if(!b&&H===M-1)return;const e=setTimeout(()=>{B.current=!0,z()},g+(B.current?0:o));return()=>clearTimeout(e)},[v,M,k.state,g,o,z,b,H]),e("div",{ref:e=>{k.ref(e),"function"==typeof j?j(e):j&&(j.current=e)},className:s("neba-headline",N),style:{"--n-anim-duration":`${l}ms`,"--n-anim-rise":a(E),...u?{"--n-anim-ease":u}:{},"--n-anim-state":k.state,...T},"data-neba-animation":"headline","data-state":k.state,...k.handlers,...R,children:I.map((n,a)=>{const r=a===H?"active":a!==V||A?void 0:"leaving";if(!t.isValidElement(n))return e("span",{className:"neba-headline-item","data-state":r,children:n},a);const i=n.props;return t.cloneElement(n,{key:a,className:s("neba-headline-item",i.className),"data-state":r})})})});

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

@@ -0,0 +1,2 @@
+export { AnimateHeadline } from './AnimateHeadline';
+export type { AnimateHeadlineProps } from './AnimateHeadline';

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

@@ -0,0 +1 @@
+export{AnimateHeadline}from"./AnimateHeadline";

package/dist/components/animate-lighting/AnimateLighting.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateProps, NebaColor, NebaSize } from '../../types';
+export interface AnimateLightingProps extends NebaAnimateProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which family the light is drawn in.
+     * @default 'primary'
+     */
+    color?: NebaColor;
+    /**
+     * A CSS colour, when a semantic family is not what is wanted. Overrides
+     * `color`.
+     */
+    glow?: string;
+    /**
+     * The radius the light follows, on the shared ladder. It has to match what is
+     * inside, or the glow will cut a corner the content has rounded off.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /**
+     * How far past the content the light reaches, in pixels.
+     * @default 3
+     */
+    spread?: number;
+    /**
+     * How much of the outline is lit at once, in degrees. Small is a travelling
+     * spark; large is a sweep.
+     * @default 50
+     */
+    arc?: number;
+    /**
+     * How soft the light is, in pixels. At `0` it is a hard-edged wedge, which
+     * reads as a graphic rather than as light.
+     * @default 4
+     */
+    blur?: number;
+    /** Runs the light the other way round. @default false */
+    reverse?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A light travelling around the outside of something.
+ *
+ * The light is behind the content rather than on it, so what a reader sees is a
+ * glow escaping from under the edges — which is why it works on a Card or a
+ * Button without touching anything about how they are drawn. Nothing inside is
+ * altered, nothing is overlaid, and the content stays exactly as legible as it
+ * was.
+ *
+ * Use it to mark the one thing on a screen that is currently live: the row that
+ * is processing, the field that is being checked, the plan being recommended.
+ * It draws attention with light rather than by moving anything, which is the
+ * only way this library has of saying "here" without also saying "and it moved".
+ *
+ * `size` has to agree with the radius of what is inside it. The glow follows
+ * the wrapper's own corners, so a `lg` card in an `xs` Lighting will show light
+ * poking out of four corners the card has already rounded away.
+ */
+export declare const AnimateLighting: React.ForwardRefExoticComponent<AnimateLightingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-lighting/AnimateLighting.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as n,useAnimateElement as a}from"../../internal/animate";import{cx as t,radiusClasses as i}from"../../internal/styles";export const AnimateLighting=e.forwardRef(function({duration:e=3e3,delay:o=0,easing:l,repeat:s="infinite",alternate:m,paused:d,trigger:p="mount",play:g,once:c=!0,threshold:f=.2,color:u="primary",glow:h,size:y="md",spread:w=3,arc:b=50,blur:$=4,reverse:x=!1,render:v,className:N,style:z,children:A,...L},R){const j=a({effect:null,duration:e,delay:o,easing:l,repeat:s,alternate:m,mode:x?"out":"in",trigger:p,play:g,once:c,threshold:f,paused:d,infinite:n(s)});return r({render:v,ref:[R,j.ref],props:{...L,className:t("neba-anim-lighting",i[y],N),style:{...j.style,"--n-anim-glow":h??`var(--neba-${u}-accent)`,"--n-anim-glow-width":`${w}px`,"--n-anim-glow-arc":`${b}deg`,"--n-anim-glow-blur":`${$}px`,...z},...j.props,"data-neba-animation":"lighting",children:A}})});

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

@@ -0,0 +1,2 @@
+export { AnimateLighting } from './AnimateLighting';
+export type { AnimateLightingProps } from './AnimateLighting';

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

@@ -0,0 +1 @@
+export{AnimateLighting}from"./AnimateLighting";

package/dist/components/animate-marquee/AnimateMarquee.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import type { NebaAnimateProps, NebaOrientation } from '../../types';
+export interface AnimateMarqueeProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which way the strip runs.
+     * @default 'horizontal'
+     */
+    orientation?: NebaOrientation;
+    /**
+     * Runs it the other way — left to right, or bottom to top.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * How fast the content travels, in pixels per second. A speed rather than a
+     * duration, so a strip of four logos and a strip of forty move at the same
+     * pace instead of the long one becoming a blur.
+     * @default 60
+     */
+    speed?: number;
+    /**
+     * The gap between items, and between the last item and the first of the next
+     * pass — a CSS length, or a number in pixels.
+     * @default '2rem'
+     */
+    gap?: number | string;
+    /**
+     * How many copies of the content are laid end to end. Two is enough for
+     * anything at least as wide as its container; raise it when the content is
+     * short enough to leave a hole behind itself.
+     * @default 2
+     */
+    copies?: number;
+    /**
+     * Stops while the pointer is on it, so something scrolling past can actually
+     * be read or clicked.
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /** The things that scroll past. */
+    children?: React.ReactNode;
+}
+/**
+ * Content scrolling steadily past, forever.
+ *
+ * The content is laid down twice, and each copy travels exactly its own length
+ * plus the gap — so the moment the first copy has left, the second is standing
+ * precisely where it began. There is no seam, no jump and no frame where the
+ * strip is empty, and none of that depends on measuring anything.
+ *
+ * What *is* measured is only the speed. A duration would mean a strip of four
+ * logos and a strip of forty crossing the same box in the same time, with the
+ * long one becoming unreadable; `speed` is pixels per second, so both move at
+ * the pace of a reader instead. The strip is re-measured whenever it changes
+ * size.
+ *
+ * `pauseOnHover` is on by default and is not decoration: content moving past a
+ * pointer cannot be clicked reliably, and a link inside a marquee that never
+ * stops is a link nobody can follow.
+ *
+ * Only the first copy is read out. The rest carry `aria-hidden`, or a screen
+ * reader would announce everything on the strip as many times as it was laid
+ * down.
+ */
+export declare const AnimateMarquee: React.ForwardRefExoticComponent<AnimateMarqueeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-marquee/AnimateMarquee.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{isInfinite as r,lengthValue as n,useAnimationRun as a}from"../../internal/animate";import{cx as i}from"../../internal/styles";export const AnimateMarquee=t.forwardRef(function({duration:s,delay:o=0,repeat:m="infinite",alternate:u,paused:l,trigger:c="mount",play:d,once:f=!0,threshold:p=.2,easing:h,orientation:v="horizontal",reverse:g=!1,speed:y=60,gap:b="2rem",copies:q=2,pauseOnHover:R=!0,className:x,style:w,children:z,...M},N){const O=a({trigger:c,play:d,once:f,threshold:p,paused:l,infinite:r(m)}),S=t.useRef(null),j=t.useRef(null),[A,G]=t.useState(0),H="vertical"===v;t.useEffect(()=>{const e=S.current,t=j.current;if(!e||!t)return;const r=()=>{const r=getComputedStyle(e),n=parseFloat(H?r.rowGap:r.columnGap)||0,a=H?t.offsetHeight:t.offsetWidth;G(a+n)};if(r(),"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(r);return n.observe(t),n.observe(e),()=>n.disconnect()},[H,z]);const $=s??(A>0?A/y*1e3:12e3);return e("div",{ref:e=>{S.current=e,O.ref(e),"function"==typeof N?N(e):N&&(N.current=e)},className:i("neba-marquee",H&&"neba-marquee-vertical",x),style:{"--n-anim-gap":n(b),...h?{"--n-anim-ease":h}:{},"--n-anim-duration":`${Math.round($)}ms`,"--n-anim-delay":`${o}ms`,"--n-anim-repeat":"infinite"===m?"infinite":String(m),"--n-anim-direction":g?u?"alternate-reverse":"reverse":u?"alternate":"normal","--n-anim-state":O.state,...w},"data-neba-animation":"marquee","data-state":O.state,"data-pause-on-hover":R?"":void 0,...O.handlers,...M,children:Array.from({length:Math.max(1,q)},(t,r)=>(t=>e("div",{ref:0===t?j:void 0,className:"neba-marquee-track","aria-hidden":0===t?void 0:"true",children:z},t))(r))})});

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

@@ -0,0 +1,2 @@
+export { AnimateMarquee } from './AnimateMarquee';
+export type { AnimateMarqueeProps } from './AnimateMarquee';

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

@@ -0,0 +1 @@
+export{AnimateMarquee}from"./AnimateMarquee";

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateMode, NebaAnimateProps } from '../../types';
+export interface AnimateRotateProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /** Whether the content turns into place or out of it. @default 'in' */
+    mode?: NebaAnimateMode;
+    /**
+     * The angle it starts at, in degrees. Negative is anticlockwise.
+     * @default -180
+     */
+    from?: number;
+    /**
+     * The angle it ends at, in degrees. Together with `from` this is what makes
+     * one component cover both a quarter turn into place and an endless spin:
+     * `from={0} to={360} repeat="infinite"`.
+     * @default 0
+     */
+    to?: number;
+    /**
+     * Which point it turns about — any CSS `transform-origin`.
+     * @default 'center'
+     */
+    origin?: string;
+    /**
+     * Fades in as it turns. Turn it off for a continuous spin, where a repeating
+     * fade would read as flickering.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content turning about a point.
+ *
+ * Two angles rather than one, which is what lets this be both effects a
+ * rotation is ever used for. `from` alone is an arrival — something swinging
+ * into place and stopping. `from` and `to` together with `repeat="infinite"`
+ * and `easing="linear"` is a spin that never lands, which is what a badge, a
+ * loading mark or a decorative glyph wants.
+ *
+ * Rotation is the one movement the design language allows on a glyph without
+ * argument — a chevron is turned rather than redrawn all over the library. What
+ * it is not for is text: a rotated word is resampled along its whole length,
+ * which is precisely the effect the no-transform rule exists to prevent.
+ */
+export declare const AnimateRotate: React.ForwardRefExoticComponent<AnimateRotateProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+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";import{cx as n}from"../../internal/styles";export const AnimateRotate=e.forwardRef(function({duration:e=460,delay:o=0,easing:i,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:p,once:c=!0,threshold:f=.2,mode:g="in",from:u=-180,to:y=0,origin:h="center",fade:N=!0,render:R,className:$,style:b,children:w,...x},A){const O=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:p,once:c,threshold:f,paused:d,infinite:t(s)});return r({render:R,ref:[A,O.ref],props:{...x,className:n(O.className,$),style:{transformOrigin:h,...O.style,...b},...O.props,children:w}})});

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

@@ -0,0 +1,2 @@
+export { AnimateRotate } from './AnimateRotate';
+export type { AnimateRotateProps } from './AnimateRotate';

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

@@ -0,0 +1 @@
+export{AnimateRotate}from"./AnimateRotate";

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateMode, NebaAnimateProps, NebaSide } from '../../types';
+export interface AnimateSlideProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content slides in or slides away. `out` leaves by the same edge
+     * it would have come from.
+     * @default 'in'
+     */
+    mode?: NebaAnimateMode;
+    /**
+     * Which edge it travels from. Physical, as `NebaSide` is everywhere — a panel
+     * sliding down from the top comes from the top in every writing direction.
+     * @default 'bottom'
+     */
+    from?: NebaSide;
+    /**
+     * How far it travels — a CSS length, or a number in pixels. `'100%'` is the
+     * element's own width or height, which is what makes it appear from behind
+     * its own edge.
+     * @default '100%'
+     */
+    distance?: number | string;
+    /**
+     * Fades in as it slides.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content travelling in from one edge.
+ *
+ * The default distance is the element's own size, so it starts exactly out of
+ * frame and arrives without ever having been half drawn somewhere it does not
+ * belong. Put it in a box with `overflow: hidden` and the effect is a panel
+ * appearing from behind that box's edge.
+ *
+ * A slide moves the element, so what is *around* it does not move: this is a
+ * `translate`, not a change of layout, and nothing on the page reflows while it
+ * runs. For a much shorter travel over a list of things, one after another, use
+ * AnimateAppear.
+ */
+export declare const AnimateSlide: React.ForwardRefExoticComponent<AnimateSlideProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+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";import{cx as o}from"../../internal/styles";export const AnimateSlide=e.forwardRef(function({duration:e=380,delay:i=0,easing:s,repeat:l=1,alternate:d,paused:m,trigger:p="mount",play:c,once:f=!0,threshold:y=.2,mode:u="in",from:g="bottom",distance:h="100%",fade:x=!0,render:N,className:b,style:w,children:A,...R},S){const{x:j,y:k}=a(g,h),q=n({effect:"slide",duration:e,delay:i,easing:s,repeat:l,alternate:d,mode:u,x:j,y:k,opacity:x?0:1,trigger:p,play:c,once:f,threshold:y,paused:m,infinite:t(l)});return r({render:N,ref:[S,q.ref],props:{...R,className:o(q.className,b),style:{...q.style,...w},...q.props,children:A}})});

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

@@ -0,0 +1,2 @@
+export { AnimateSlide } from './AnimateSlide';
+export type { AnimateSlideProps } from './AnimateSlide';

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

@@ -0,0 +1 @@
+export{AnimateSlide}from"./AnimateSlide";