neba 1.10.0 → 1.12.0

package/README.md

@@ -125,6 +125,36 @@ A registered language costs about 1.9 kB gzipped and you pay only for the ones y
 
 Anything the platform already knows — month names, weekday names, AM/PM, number and date formats — comes from `Intl` and needs no registration. And every string a component invents also has a prop that overrides it, so a language Neba does not carry is never a dead end.
 
+### One place for your defaults
+
+```tsx
+import { NebaProvider } from 'neba';
+
+<NebaProvider
+  defaults={{ size: 'sm', density: 'compact', locale: 'ko' }}
+  defaultColorScheme="system"
+>
+  <App />
+</NebaProvider>;
+```
+
+Optional, and every component works without it. It fills in `size`, `density`, `variant` and `locale` where a call site left them out — the call site always wins — owns the colour scheme (`useColorScheme()`, plus a `colorSchemeScript()` for the first-paint flash), and sets the writing direction. `color` and `elevation` are deliberately not defaultable; [the guide](https://neba.cdget.com/guide/provider) says why.
+
+### Hooks
+
+The hooks the components already run on, from `neba/hooks` (or from the package root):
+
+```tsx
+import { useDisclosure, useBreakpoint, useShortcut } from 'neba/hooks';
+
+const { open, onOpen, setOpen } = useDisclosure();
+const desktop = useBreakpoint('lg');
+
+useShortcut('Mod+K', onOpen);
+```
+
+`useDisclosure`, `useMediaQuery`, `useBreakpoint`, `usePrefersReducedMotion`, `useElementSize`, `useOnScreen`, `useShortcut`. Everything here is machinery the library needed for itself — there is no general-purpose hook collection, and there is not going to be one. Full notes in [the hooks guide](https://neba.cdget.com/guide/hooks).
+
 ### The shared prop vocabulary
 
 The reason a Neba screen looks composed rather than assembled is that the props mean one thing across the library. They live in [`src/types.ts`](src/types.ts) and every component draws from the same list:
@@ -146,21 +176,21 @@ Placement props are logical, not physical — `start`/`end` rather than `left`/`
 
 ### Components
 
-**Inputs** — Button, IconButton, ButtonGroup, SegmentedButton, Toggle, ToggleGroup, Form, Fieldset, FloatingActionButton (with FloatingAction), TextField, NumberField, OtpField, Select, Combobox, Checkbox, RadioGroup, Switch, Slider, Rating, Menu (with submenus, checkbox and radio items), ContextMenu, Menubar, NavigationMenu, CommandPalette, FilePicker, Transfer, Pagination, BottomNavigation, FloatingBottomNavigation, ColorPicker, DatePicker, TimePicker, DateTimePicker, DateRangePicker
+**Inputs** — Button, IconButton, ButtonGroup, SegmentedButton, Toggle, ToggleGroup, Form, Fieldset, FloatingActionButton (with FloatingAction), TextField, NumberField, OtpField, Select, Combobox, TreeSelect, Checkbox, RadioGroup, Switch, Slider, Rating, Menu (with submenus, checkbox and radio items), ContextMenu, Menubar, NavigationMenu, CommandPalette, FilePicker, Transfer, Pagination, BottomNavigation, FloatingBottomNavigation, ColorPicker, Calendar, DatePicker, TimePicker, DateTimePicker, DateRangePicker
 
 **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, Shortcut, List, DataList, Table, DataTable, CodeBlock, Timeline, Breadcrumb, Anchor, TreeView
+**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, Toast, Tooltip, Overlay, Skeleton, Empty, ProgressLinear, ProgressCircular, ProgressBox, Meter, Tour
+**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, 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** — 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/accordion/Accordion.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Accordion as t}from"@base-ui/react/accordion";import{boxPaddingXClasses as l,boxPaddingYClasses as r}from"../box/Box.js";import{ChevronIcon as s}from"../../internal/icons.js";import{cx as i,focusRingClasses as o,gapClasses as d,hasContent as c,iconClasses as m,metaTextClasses as u,radiusClasses as f,sheetBodyClasses as h,sheetHeaderGapClasses as b,sheetTitleClasses as x,surfaceClasses as p,surfaceSlots as v,transitionClasses as g}from"../../internal/styles.js";const N=/*@__PURE__*/a.createContext({size:"md",density:"default",dividers:!0}),j={solid:[p,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[p,"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-transparent"},w={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const Accordion=/*@__PURE__*/a.forwardRef(function({variant:n="outline",size:l="md",color:r="primary",density:s="default",elevation:o=0,multiple:d=!1,value:c,defaultValue:m,onValueChange:u,dividers:h=!0,disabled:b=!1,hiddenUntilFound:x=!1,keepMounted:p=!1,className:w,style:y,children:k,...z},C){const V=a.useMemo(()=>({size:l,density:s,dividers:h}),[l,s,h]),$=i("flex flex-col",f[l],j[n],g,h?"overflow-hidden [&>div+div]:border-t [&>div+div]:[border-color:var(--n-line)]":"p-1",w??"");return e(N.Provider,{value:V,children:e(t.Root,{ref:C,multiple:d,value:c,defaultValue:m,onValueChange:e=>u?.(e),disabled:b,hiddenUntilFound:x,keepMounted:p,className:$,style:{...v(r,o),...y},...z,children:k})})});export const AccordionItem=/*@__PURE__*/a.forwardRef(function({value:f,title:p,subtitle:v,startIcon:j,action:y,disabled:k=!1,className:z,children:C,...V},$){const{size:_,density:A,dividers:I}=a.useContext(N),M=l[A][_],R=r[A][_];return n(t.Item,{ref:$,value:f,disabled:k,className:i("flex flex-col",z??""),...V,children:[n(t.Header,{className:"m-0 flex w-full items-center [font:inherit]",children:[n(t.Trigger,{className:i("flex min-w-0 flex-1 cursor-pointer items-center text-start",M,R,d[_],g,m,o,I?"":w[_],"hover:bg-(--n-soft)","data-[panel-open]:text-(--n-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"),children:[c(j)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:j}):null,n("span",{className:`flex min-w-0 flex-1 flex-col ${b[_]}`,children:[c(p)?e("span",{className:`truncate font-semibold ${x[_]}`,children:p}):null,c(v)?e("span",{className:`truncate text-(--neba-muted-fg) ${u[_]}`,children:v}):null]}),e("span",{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[panel-open]:rotate-180"].join(" "),children:e(s,{})})]}),c(y)?e("span",{className:`flex shrink-0 items-center ${M}`,children:y}):null]}),e(t.Panel,{className:["h-(--accordion-panel-height) overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),children:e("div",{className:["text-(--neba-muted-fg)",h[_],M,"compact"===A?"pb-2":"pb-4"].join(" "),children:C})})]})});
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Accordion as t}from"@base-ui/react/accordion";import{boxPaddingXClasses as l,boxPaddingYClasses as r}from"../box/Box.js";import{ChevronIcon as i}from"../../internal/icons.js";import{cx as s,focusRingClasses as o,gapClasses as d,hasContent as c,iconClasses as m,metaTextClasses as f,radiusClasses as u,sheetBodyClasses as h,sheetHeaderGapClasses as b,sheetTitleClasses as x,surfaceClasses as p,surfaceSlots as v,transitionClasses as g}from"../../internal/styles.js";import{useStyleDefaults as N}from"../../internal/defaults.js";const j=/*@__PURE__*/a.createContext({size:"md",density:"default",dividers:!0}),y={solid:[p,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[p,"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-transparent"},w={xs:u.xs,sm:u.xs,md:u.sm,lg:u.sm,xl:u.md};export const Accordion=/*@__PURE__*/a.forwardRef(function(n,l){const{variant:r="outline",size:i="md",color:o="primary",density:d="default",elevation:c=0,multiple:m=!1,value:f,defaultValue:h,onValueChange:b,dividers:x=!0,disabled:p=!1,hiddenUntilFound:w=!1,keepMounted:k=!1,className:z,style:C,children:V,...$}=N(n,["size","density","variant"]),_=a.useMemo(()=>({size:i,density:d,dividers:x}),[i,d,x]),A=s("flex flex-col",u[i],y[r],g,x?"overflow-hidden [&>div+div]:border-t [&>div+div]:[border-color:var(--n-line)]":"p-1",z??"");return e(j.Provider,{value:_,children:e(t.Root,{ref:l,multiple:m,value:f,defaultValue:h,onValueChange:e=>b?.(e),disabled:p,hiddenUntilFound:w,keepMounted:k,className:A,style:{...v(o,c),...C},...$,children:V})})});export const AccordionItem=/*@__PURE__*/a.forwardRef(function({value:u,title:p,subtitle:v,startIcon:N,action:y,disabled:k=!1,className:z,children:C,...V},$){const{size:_,density:A,dividers:I}=a.useContext(j),M=l[A][_],R=r[A][_];return n(t.Item,{ref:$,value:u,disabled:k,className:s("flex flex-col",z??""),...V,children:[n(t.Header,{className:"m-0 flex w-full items-center [font:inherit]",children:[n(t.Trigger,{className:s("flex min-w-0 flex-1 cursor-pointer items-center text-start",M,R,d[_],g,m,o,I?"":w[_],"hover:bg-(--n-soft)","data-[panel-open]:text-(--n-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"),children:[c(N)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:N}):null,n("span",{className:`flex min-w-0 flex-1 flex-col ${b[_]}`,children:[c(p)?e("span",{className:`truncate font-semibold ${x[_]}`,children:p}):null,c(v)?e("span",{className:`truncate text-(--neba-muted-fg) ${f[_]}`,children:v}):null]}),e("span",{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[panel-open]:rotate-180"].join(" "),children:e(i,{})})]}),c(y)?e("span",{className:`flex shrink-0 items-center ${M}`,children:y}):null]}),e(t.Panel,{className:["h-(--accordion-panel-height) overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),children:e("div",{className:["text-(--neba-muted-fg)",h[_],M,"compact"===A?"pb-2":"pb-4"].join(" "),children:C})})]})});

package/dist/components/alert/Alert.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{boxPaddingClasses as l}from"../box/Box.js";import{actionMessages as i,useMessages as s}from"../../internal/i18n.js";import{CloseIcon as a,severityIcon as o}from"../../internal/icons.js";import{transitionProps as r}from"../../internal/animate.js";import{controlSlots as c,cx as d,hasContent as m,iconClasses as f,radiusClasses as u,sheetBodyClasses as x,sheetHeaderGapClasses as b,sheetSectionGapClasses as v,sheetTitleClasses as h,surfaceClasses as p,transitionClasses as y}from"../../internal/styles.js";const j={solid:[p,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[p,"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)"},g={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"},N={solid:"",outline:"text-(--neba-muted-fg)",text:"text-(--neba-muted-fg)"},w={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const Alert=/*@__PURE__*/n.forwardRef(function({variant:n="outline",size:p="md",color:k="info",density:$="default",elevation:_=0,title:z,icon:C,action:A,onClose:B,locale:L,closeLabel:R,transition:q,className:D,style:E,children:F,...G},H){const I=s(i,L),J=void 0===C?o(k):C,K=g[n],M=m(z),O=r(q);return t("div",{ref:H,role:w[k],className:d("flex w-full items-start",l[$][p],u[p],v[p],x[p],y,j[n],f,O.className,D??""),style:{...c(k,_,n),...O.style,...E},...G,children:[m(J)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${K}`,children:J}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${b[p]}`,children:[M?e("div",{className:`neba-title font-semibold ${h[p]} ${K}`,children:z}):null,m(F)?e("div",{className:M?N[n]:void 0,children:F}):null]}),m(A)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:A}):null,B?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e("button",{type:"button","aria-label":R??I.dismiss,onClick:B,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(a,{})})}):null]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{boxPaddingClasses as i}from"../box/Box.js";import{actionMessages as l,useMessages as s}from"../../internal/i18n.js";import{CloseIcon as a,severityIcon as o}from"../../internal/icons.js";import{transitionProps as r}from"../../internal/animate.js";import{controlSlots as c,cx as d,hasContent as m,iconClasses as f,radiusClasses as u,sheetBodyClasses as x,sheetHeaderGapClasses as b,sheetSectionGapClasses as v,sheetTitleClasses as p,surfaceClasses as h,transitionClasses as y}from"../../internal/styles.js";import{useStyleDefaults as j}from"../../internal/defaults.js";const g={solid:[h,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[h,"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)"},N={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"},w={solid:"",outline:"text-(--neba-muted-fg)",text:"text-(--neba-muted-fg)"},k={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const Alert=/*@__PURE__*/n.forwardRef(function(n,h){const{variant:$="outline",size:_="md",color:z="info",density:C="default",elevation:A=0,title:B,icon:L,action:R,onClose:q,locale:D,closeLabel:E,transition:F,className:G,style:H,children:I,...J}=j(n,["size","density","variant","locale"]),K=s(l,D),M=void 0===L?o(z):L,O=N[$],P=m(B),Q=r(F);return t("div",{ref:h,role:k[z],className:d("flex w-full items-start",i[C][_],u[_],v[_],x[_],y,g[$],f,Q.className,G??""),style:{...c(z,A,$),...Q.style,...H},...J,children:[m(M)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${O}`,children:M}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${b[_]}`,children:[P?e("div",{className:`neba-title font-semibold ${p[_]} ${O}`,children:B}):null,m(I)?e("div",{className:P?w[$]:void 0,children:I}):null]}),m(R)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:R}):null,q?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e("button",{type:"button","aria-label":E??K.dismiss,onClick:q,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(a,{})})}):null]})});

package/dist/components/anchor/Anchor.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{anchorMessages as r,useMessages as t}from"../../internal/i18n.js";import{controlTextLeadingClasses as o,cx as a,focusRingClasses as l,transitionClasses as i}from"../../internal/styles.js";const c={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-1.5",xl:"py-2"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1"}},s={xs:8,sm:10,md:12,lg:14,xl:16},m=["block min-w-0 truncate no-underline","text-(--neba-muted-fg)",i,l,"hover:text-(--neba-fg)","aria-[current=location]:font-medium aria-[current=location]:text-(--n-accent)"].join(" "),d=["border-s [border-color:transparent]","[transition:border-color_var(--neba-duration)_var(--neba-ease)]","aria-[current=location]:[border-color:var(--n-accent)]"].join(" ");export const Anchor=/*@__PURE__*/n.forwardRef(function({items:l,activeHref:i,onActiveChange:u,offset:f=0,container:p,rail:h=!0,size:g="md",color:v="primary",density:b="default",locale:y,label:x,className:w,style:j,...E},H){const N=t(r,y),[R,A]=n.useState(null),L=void 0!==i,z=L?i:R,B=n.useRef(u);B.current=u;const C=n.useRef(l);C.current=l;const $=l.map(e=>e.href).join("\0");return n.useEffect(()=>{if(L)return;const e=p?.current??window;let n=0,r=null;const t=()=>{n=0;const e=function(e,n,r){const t=(r?r.getBoundingClientRect().top:0)+n+1;let o=null;for(const n of e){const e=document.getElementById(n.href.replace(/^#/,""));e&&e.getBoundingClientRect().top<=t&&(o=n.href)}return(r?r.scrollTop+r.clientHeight>=r.scrollHeight-2:window.innerHeight+window.scrollY>=document.documentElement.scrollHeight-2)&&e.length>0?e[e.length-1].href:o}(C.current,f,p?.current??null);e!==r&&(r=e,A(e),B.current?.(e))},o=()=>{0===n&&(n=requestAnimationFrame(t))};return t(),e.addEventListener("scroll",o,{passive:!0}),window.addEventListener("resize",o,{passive:!0}),()=>{0!==n&&cancelAnimationFrame(n),e.removeEventListener("scroll",o),window.removeEventListener("resize",o)}},[$,f,p,L]),e("nav",{ref:H,"aria-label":x??N.label,className:a("min-w-0",w??""),style:{"--n-accent":`var(--neba-${v}-accent)`,"--n-ring":`var(--neba-${v}-ring)`,...j},...E,children:e("ul",{className:a("m-0 flex list-none flex-col p-0",h?"border-s [border-color:var(--neba-border)]":""),children:l.map(n=>e("li",{className:h?"[margin-inline-start:-1px]":"",children:e("a",{href:n.href,"aria-current":z===n.href?"location":void 0,className:a(m,o[g],c[b][g],h?`${d} ps-3`:""),style:{marginInlineStart:n.depth?n.depth*s[g]:void 0},children:n.label})},n.href))})})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{anchorMessages as r,useMessages as t}from"../../internal/i18n.js";import{controlTextLeadingClasses as o,cx as a,focusRingClasses as l,transitionClasses as i}from"../../internal/styles.js";import{useStyleDefaults as c}from"../../internal/defaults.js";const s={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-1.5",xl:"py-2"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1"}},m={xs:8,sm:10,md:12,lg:14,xl:16},d=["block min-w-0 truncate no-underline","text-(--neba-muted-fg)",i,l,"hover:text-(--neba-fg)","aria-[current=location]:font-medium aria-[current=location]:text-(--n-accent)"].join(" "),u=["border-s [border-color:transparent]","[transition:border-color_var(--neba-duration)_var(--neba-ease)]","aria-[current=location]:[border-color:var(--n-accent)]"].join(" ");export const Anchor=/*@__PURE__*/n.forwardRef(function(l,i){const{items:f,activeHref:p,onActiveChange:h,offset:g=0,container:v,rail:b=!0,size:y="md",color:x="primary",density:w="default",locale:j,label:E,className:H,style:N,...R}=c(l,["size","density","locale"]),z=t(r,j),[A,L]=n.useState(null),B=void 0!==p,C=B?p:A,$=n.useRef(h);$.current=h;const F=n.useRef(f);F.current=f;const I=f.map(e=>e.href).join("\0");return n.useEffect(()=>{if(B)return;const e=v?.current??window;let n=0,r=null;const t=()=>{n=0;const e=function(e,n,r){const t=(r?r.getBoundingClientRect().top:0)+n+1;let o=null;for(const n of e){const e=document.getElementById(n.href.replace(/^#/,""));e&&e.getBoundingClientRect().top<=t&&(o=n.href)}return(r?r.scrollTop+r.clientHeight>=r.scrollHeight-2:window.innerHeight+window.scrollY>=document.documentElement.scrollHeight-2)&&e.length>0?e[e.length-1].href:o}(F.current,g,v?.current??null);e!==r&&(r=e,L(e),$.current?.(e))},o=()=>{0===n&&(n=requestAnimationFrame(t))};return t(),e.addEventListener("scroll",o,{passive:!0}),window.addEventListener("resize",o,{passive:!0}),()=>{0!==n&&cancelAnimationFrame(n),e.removeEventListener("scroll",o),window.removeEventListener("resize",o)}},[I,g,v,B]),e("nav",{ref:i,"aria-label":E??z.label,className:a("min-w-0",H??""),style:{"--n-accent":`var(--neba-${x}-accent)`,"--n-ring":`var(--neba-${x}-ring)`,...N},...R,children:e("ul",{className:a("m-0 flex list-none flex-col p-0",b?"border-s [border-color:var(--neba-border)]":""),children:f.map(n=>e("li",{className:b?"[margin-inline-start:-1px]":"",children:e("a",{href:n.href,"aria-current":C===n.href?"location":void 0,className:a(d,o[y],s[w][y],b?`${u} ps-3`:""),style:{marginInlineStart:n.depth?n.depth*m[y]:void 0},children:n.label})},n.href))})})});

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-lighting/AnimateLighting.js

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

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}})});