neba 1.5.0 → 1.7.0

package/README.md

@@ -21,7 +21,7 @@ You install one package, add one line to your CSS, and import components. There
 - **Accessible by construction** — real roles, labels, focus management and keyboard support, not `div`s with click handlers.
 - **Dark mode with no work** — follows the system, and can be forced either way per subtree.
 - **A design language, not a theme file** — a translucent acrylic surface with a hairline edge, one deliberate motion signature, and shadows that are opt-in.
-- **ESM only**, TypeScript declarations included, tree-shakeable — every component compiles to its own module.
+- **ESM only**, TypeScript declarations included, and genuinely tree-shakeable — every component compiles to its own module, and importing one costs about what one costs. A `Button` is ~5 kB gzipped including its Base UI parts, a `Chip` is ~3 kB, and a twelve-component app is ~67 kB; the whole library, all one hundred and seventeen exports at once, is ~207 kB.
 - **One runtime dependency.** React 18 or 19, Node.js 18 or later.
 
 ## Documentation
@@ -88,6 +88,37 @@ export default function SignIn() {
 
 A few components provide context and are mounted once, near the root, only if you use them — `ToastProvider` (paired with the `useToast()` hook) and `TooltipProvider`.
 
+Every component is also its own entry point, named after its folder:
+
+```tsx
+import { Button } from 'neba/button';
+import { TextField } from 'neba/text-field';
+```
+
+Both forms produce the same bundle. The root barrel is the one to reach for; the subpath is there for a build that would rather not parse a hundred and ninety-eight modules to keep five, and as an escape hatch for a bundler that does not honour `sideEffects`.
+
+### Languages
+
+Neba writes very little text of its own — a Button says what you hand it — but a few components have to invent a string: the label on a Dialog's close button, the word under a chat message that says it was read, the sentence a screen reader hears after a link that opens a new tab.
+
+Those ship in English. Eighteen other languages are included in the package and none of them is in your bundle until you say so:
+
+```tsx
+import { registerMessages, ko } from 'neba/locales';
+
+registerMessages('ko', ko);
+```
+
+Call it once, at module scope, before your first render. Then a `locale` prop translates:
+
+```tsx
+<Dialog locale="ko" title="설정" showClose />
+```
+
+A registered language costs about 1.7 kB gzipped and you pay only for the ones you name. Tags are matched by script, then by region, then by language — registering `ko` answers `ko-KR`, and `zhHans` registered as `zh-hans` answers `zh-CN` and a bare `zh`. Available: `ko`, `ja`, `zhHans`, `zhHant`, `es`, `pt`, `fr`, `de`, `it`, `nl`, `pl`, `ru`, `tr`, `ar`, `hi`, `id`, `vi`, `th`, each also its own entry point (`neba/locales/ko`).
+
+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.
+
 ### 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:
@@ -109,9 +140,9 @@ Placement props are logical, not physical — `start`/`end` rather than `left`/`
 
 ### Components
 
-**Inputs** — Button, IconButton, ButtonGroup, SegmentedButton, FloatingActionButton (with FloatingAction), TextField, NumberField, OtpField, Select, Combobox, Checkbox, RadioGroup, Switch, Slider, Rating, Menu (with submenus, checkbox and radio items), ContextMenu, FilePicker, Pagination, BottomNavigation, ColorPicker, DatePicker, TimePicker, DateTimePicker, DateRangePicker
+**Inputs** — Button, IconButton, ButtonGroup, SegmentedButton, FloatingActionButton (with FloatingAction), TextField, NumberField, OtpField, Select, Combobox, Checkbox, RadioGroup, Switch, Slider, Rating, Menu (with submenus, checkbox and radio items), ContextMenu, FilePicker, Pagination, BottomNavigation, FloatingBottomNavigation, ColorPicker, DatePicker, TimePicker, DateTimePicker, DateRangePicker
 
-**Surfaces** — Box, Card, Accordion, Collapsible, Tabs, Carousel, Toolbar, Pill, Spoiler, ChatBubble, Drawer, Popover, Mockup
+**Surfaces** — Box, Card, Accordion, Collapsible, Tabs, Carousel, Toolbar, Pill, Spoiler, ChatBubble, Drawer, Popover, Mockup, WindowPane
 
 **Display** — Typography, TextLink, Blockquote, Highlight, Divider, Chip, Badge, Avatar, Icon, Shortcut, List, Table, DataTable, Timeline, Breadcrumb, TreeView
 
@@ -119,11 +150,11 @@ Placement props are logical, not physical — `start`/`end` rather than `left`/`
 
 **Feedback** — Alert, Dialog, Toast, Tooltip, Overlay, Skeleton, Empty, ProgressLinear, ProgressCircular, ProgressBox
 
-**Layout** — Container, Grid (with GridContainer), Panes, AspectRatio
+**Layout** — Container, Grid (with GridContainer), Panes, AspectRatio, ScrollZone
 
 **Transitions** — AnimateFade, AnimateGrow, AnimateZoom, AnimateSlide, AnimateRotate, AnimateBlink, AnimateAppear, AnimateTyping, AnimateLighting, AnimateMarquee, AnimateHeadline
 
-**Recently added** — 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** — 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
 
 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.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types';
+import type { NebaElevation, NebaStyleProps } from '../../types.js';
 export interface AccordionProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
     /**
      * Drop shadow depth. `0` (the default) is flat.

package/dist/components/accordion/Accordion.js

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

package/dist/components/accordion/index.d.ts

@@ -1,2 +1,2 @@
-export { Accordion, AccordionItem } from './Accordion';
-export type { AccordionItemProps, AccordionProps } from './Accordion';
+export { Accordion, AccordionItem } from './Accordion.js';
+export type { AccordionItemProps, AccordionProps } from './Accordion.js';

package/dist/components/accordion/index.js

@@ -1 +1 @@
-export{Accordion,AccordionItem}from"./Accordion";
+export{Accordion,AccordionItem}from"./Accordion.js";

package/dist/components/alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps, NebaTransition } from '../../types';
+import type { NebaElevation, NebaStyleProps, NebaTransition } from '../../types.js';
 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

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

@@ -1,2 +1,2 @@
-export { Alert } from './Alert';
-export type { AlertProps } from './Alert';
+export { Alert } from './Alert.js';
+export type { AlertProps } from './Alert.js';

package/dist/components/alert/index.js

@@ -1 +1 @@
-export{Alert}from"./Alert";
+export{Alert}from"./Alert.js";

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateProps, NebaSide } from '../../types';
+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

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

@@ -1 +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}})});
+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 s,animationSlots as n,isInfinite as i,slideOffsets as o,useAnimationRun as l}from"../../internal/animate.js";import{cx as m}from"../../internal/styles.js";export const AnimateAppear=/*@__PURE__*/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: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=l({trigger:h,play:g,once:x,threshold:N,paused:u,infinite:i(f)}),{x:z,y:B}=o(b,A),D=a.Children.toArray(R),F=`${r} ${s.slide}`,G=D.map((t,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(!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

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateProps } from '../../types';
+import type { NebaAnimateProps } from '../../types.js';
 export interface AnimateBlinkProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * How faint it gets at the bottom of the cycle, between `0` and `1`. Raise it

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

@@ -1 +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}})});
+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:m="mount",play:c,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:m,play:c,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}})});

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

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

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

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

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

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

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

@@ -1 +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}})});
+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.js";import{cx as n}from"../../internal/styles.js";export const AnimateFade=/*@__PURE__*/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:j,...b},w){const x=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:[w,x.ref],props:{...b,className:n(x.className,h),style:{...x.style,...N},...x.props,children:j}})});

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

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

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

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

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

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

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

@@ -1 +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}})});
+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: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:j,children:b,...x},A){const G=a({effect:"grow",duration:e,delay:o,easing:s,repeat:i,alternate:l,mode:g,scale:u,opacity:h?0:1,trigger:d,play:c,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}})});

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

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

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaAnimateProps } from '../../types';
+import type { NebaAnimateProps } from '../../types.js';
 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.

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

@@ -1 +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})})})});
+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.js";import{cx as s}from"../../internal/styles.js";export const AnimateHeadline=/*@__PURE__*/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:j,children:T,...C},R){const k=r({trigger:d,play:f,once:h,threshold:p,paused:m,infinite:n(c)}),A=i(),I=t.Children.toArray(T),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 R?R(e):R&&(R.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,...j},"data-neba-animation":"headline","data-state":k.state,...k.handlers,...C,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

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateProps, NebaColor, NebaSize } from '../../types';
+import type { NebaAnimateProps, NebaColor, NebaSize } from '../../types.js';
 export interface AnimateLightingProps extends NebaAnimateProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
     /**
      * Which family the light is drawn in.

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

@@ -1 +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}})});
+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: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: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:g,once:c,threshold:f,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-${u}-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}})});

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

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

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaAnimateProps, NebaOrientation } from '../../types';
+import type { NebaAnimateProps, NebaOrientation } from '../../types.js';
 export interface AnimateMarqueeProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Which way the strip runs.

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

@@ -1 +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))})});
+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.js";import{cx as i}from"../../internal/styles.js";export const AnimateMarquee=/*@__PURE__*/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:j,style:x,children:w,...z},M){const N=a({trigger:c,play:d,once:f,threshold:p,paused:l,infinite:r(m)}),O=t.useRef(null),S=t.useRef(null),[A,G]=t.useState(0),H="vertical"===v;t.useEffect(()=>{const e=O.current,t=S.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,w]);const $=s??(A>0?A/y*1e3:12e3);return e("div",{ref:e=>{O.current=e,N.ref(e),"function"==typeof M?M(e):M&&(M.current=e)},className:i("neba-marquee",H&&"neba-marquee-vertical",j),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":N.state,...x},"data-neba-animation":"marquee","data-state":N.state,"data-pause-on-hover":R?"":void 0,...N.handlers,...z,children:Array.from({length:Math.max(1,q)},(t,r)=>(t=>e("div",{ref:0===t?S:void 0,className:"neba-marquee-track","aria-hidden":0===t?void 0:"true",children:w},t))(r))})});

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

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaAnimateMode, NebaAnimateProps } from '../../types';
+import type { NebaAnimateMode, NebaAnimateProps } from '../../types.js';
 export interface AnimateRotateProps extends NebaAnimateProps, 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 @@
-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}})});
+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:p,once:c=!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:p,once:c,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}})});

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/animate-typing/AnimateTyping.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaAnimateProps } from '../../types';
+import type { NebaAnimateProps } from '../../types.js';
 export interface AnimateTypingProps extends Omit<NebaAnimateProps, 'alternate' | 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
     /**
      * The text, when it is easier to pass than to nest. Overrides `children`.

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

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

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

@@ -1,2 +1,2 @@
-export { AnimateTyping } from './AnimateTyping';
-export type { AnimateTypingProps } from './AnimateTyping';
+export { AnimateTyping } from './AnimateTyping.js';
+export type { AnimateTypingProps } from './AnimateTyping.js';

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

@@ -1 +1 @@
-export{AnimateTyping}from"./AnimateTyping";
+export{AnimateTyping}from"./AnimateTyping.js";

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

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

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

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

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

@@ -1,2 +1,2 @@
-export { AnimateZoom } from './AnimateZoom';
-export type { AnimateZoomProps } from './AnimateZoom';
+export { AnimateZoom } from './AnimateZoom.js';
+export type { AnimateZoomProps } from './AnimateZoom.js';

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

@@ -1 +1 @@
-export{AnimateZoom}from"./AnimateZoom";
+export{AnimateZoom}from"./AnimateZoom.js";

package/dist/components/area-chart/AreaChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type CartesianChartProps } from '../../internal/chart-frame';
-import { type ChartMarkers } from '../../internal/chart-line';
-import type { NebaChartCurve, NebaChartValueLabels } from '../../types';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import { type ChartMarkers } from '../../internal/chart-line.js';
+import type { NebaChartCurve, NebaChartValueLabels } from '../../types.js';
 export interface AreaChartProps extends CartesianChartProps {
     /**
      * How the edge of the band gets from one point to the next. The same three

package/dist/components/area-chart/AreaChart.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as a}from"../../internal/chart-frame";import{LineSeries as t}from"../../internal/chart-line";import{toValues as n}from"../../internal/chart";export function AreaChart({curve:o="linear",stacked:l=!1,markers:i="none",valueLabels:c="none",connectNulls:s=!1,series:m,yAxis:u,format:f,...d}){const x=r.useId().replace(/:/g,""),p="full"===l,h=r.useMemo(()=>{if(!p)return m;const e=n(m),r=[];for(const a of e)a.forEach((e,a)=>{r[a]=(r[a]??0)+Math.abs(e.value??0)});return m.map((a,t)=>({...a,data:e[t].map((e,a)=>{if(null===e.value)return null;const t=r[a];return{x:e.x,y:0===t?0:e.value/t*100,color:e.color,label:e.label??String(e.value)}})}))},[m,p]);return e(a,{...d,series:h,format:f,yAxis:p?{min:0,max:100,tickFormat:e=>`${e}%`,...u}:u,stacked:!1!==l,inset:!0,includeZero:!0,headroom:"none"===c?0:10,children:r=>e(t,{context:r,curve:o,filled:!0,stacked:!1!==l,markers:i,valueLabels:c,connectNulls:s,gradient:!1,idPrefix:x})})}
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as a}from"../../internal/chart-frame.js";import{LineSeries as t}from"../../internal/chart-line.js";import{toValues as n}from"../../internal/chart.js";export function AreaChart({curve:o="linear",stacked:l=!1,markers:s="none",valueLabels:i="none",connectNulls:c=!1,series:m,yAxis:u,format:f,...d}){const x=r.useId().replace(/:/g,""),p="full"===l,h=r.useMemo(()=>{if(!p)return m;const e=n(m),r=[];for(const a of e)a.forEach((e,a)=>{r[a]=(r[a]??0)+Math.abs(e.value??0)});return m.map((a,t)=>({...a,data:e[t].map((e,a)=>{if(null===e.value)return null;const t=r[a];return{x:e.x,y:0===t?0:e.value/t*100,color:e.color,label:e.label??String(e.value)}})}))},[m,p]);return e(a,{...d,series:h,format:f,yAxis:p?{min:0,max:100,tickFormat:e=>`${e}%`,...u}:u,stacked:!1!==l,inset:!0,includeZero:!0,headroom:"none"===i?0:10,children:r=>e(t,{context:r,curve:o,filled:!0,stacked:!1!==l,markers:s,valueLabels:i,connectNulls:c,gradient:!1,idPrefix:x})})}

package/dist/components/area-chart/index.d.ts

@@ -1,2 +1,2 @@
-export { AreaChart } from './AreaChart';
-export type { AreaChartProps } from './AreaChart';
+export { AreaChart } from './AreaChart.js';
+export type { AreaChartProps } from './AreaChart.js';

package/dist/components/area-chart/index.js

@@ -1 +1 @@
-export{AreaChart}from"./AreaChart";
+export{AreaChart}from"./AreaChart.js";

package/dist/components/aspect-ratio/AspectRatio.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaSize } from '../../types';
+import type { NebaSize } from '../../types.js';
 /**
  * How the media inside is fitted to the box, spelled the way CSS spells it.
  *

package/dist/components/aspect-ratio/AspectRatio.js

@@ -1 +1 @@
-import*as e from"react";import{useRender as i}from"@base-ui/react/use-render";import{radiusClasses as o}from"../../internal/styles";const t=["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),c={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const AspectRatio=e.forwardRef(function({ratio:e=1,fit:r="cover",rounded:l=!1,size:n="md",render:s,className:a,style:f,children:m,...u},d){const b=["relative block w-full overflow-hidden",t,c[r],l?o[n]:"",a??""].filter(Boolean).join(" ");return i({render:s,ref:d,props:{className:b,style:{aspectRatio:e,...f},children:m,...u}})});
+import*as e from"react";import{useRender as i}from"@base-ui/react/use-render";import{radiusClasses as o}from"../../internal/styles.js";const t=["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),c={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const AspectRatio=/*@__PURE__*/e.forwardRef(function({ratio:e=1,fit:r="cover",rounded:l=!1,size:n="md",render:s,className:a,style:f,children:m,...u},d){const j=["relative block w-full overflow-hidden",t,c[r],l?o[n]:"",a??""].filter(Boolean).join(" ");return i({render:s,ref:d,props:{className:j,style:{aspectRatio:e,...f},children:m,...u}})});

package/dist/components/aspect-ratio/index.d.ts

@@ -1,2 +1,2 @@
-export { AspectRatio } from './AspectRatio';
-export type { AspectRatioProps, NebaAspectFit } from './AspectRatio';
+export { AspectRatio } from './AspectRatio.js';
+export type { AspectRatioProps, NebaAspectFit } from './AspectRatio.js';

package/dist/components/aspect-ratio/index.js

@@ -1 +1 @@
-export{AspectRatio}from"./AspectRatio";
+export{AspectRatio}from"./AspectRatio.js";

package/dist/components/avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaColor, NebaElevation, NebaSize, NebaTransition, NebaVariant } from '../../types';
+import type { NebaColor, NebaElevation, NebaSize, NebaTransition, NebaVariant } from '../../types.js';
 /** What Base UI reports about the picture as it loads. */
 export type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 /**

package/dist/components/avatar/Avatar.js

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

package/dist/components/avatar/index.d.ts

@@ -1,2 +1,2 @@
-export { Avatar } from './Avatar';
-export type { AvatarLoadingStatus, AvatarProps, AvatarShape } from './Avatar';
+export { Avatar } from './Avatar.js';
+export type { AvatarLoadingStatus, AvatarProps, AvatarShape } from './Avatar.js';