material-plus-ui 1.3.0 → 1.4.0

package/README.md

@@ -22,8 +22,9 @@ It follows the specification directly rather than wrapping somebody's implementa
 - **It coexists.** Nothing here is page-level — no reset, no provider, no global styling — and it reads the `--md-sys-color-*` tokens your page already has if they are there. A project already running Material keeps its own setup.
 - **IME-safe by construction.** Korean, Japanese and Chinese composition survives whatever your `onChange` does with the value.
 - **Bring your own icons.** `MPIcon` takes a component or an element from any set. `lucide-react` ships with the package, gathered in one readable constants file.
-- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 3.4 kB gzipped and five are 7.4 kB, against 64 kB for all ninety-four. The stylesheet splits the same way.
-- **One runtime dependency.** React 18 or 19, Node.js 18 or later.
+- **Works in a Next.js server component**, and in any bundler: the components carry `"use client"`, the barrel and the data do not, and every specifier in `dist/` names a file — so webpack, Vite, esbuild, Rollup and plain Node all resolve it.
+- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 2.9 kB gzipped and five are 7.3 kB, against 74 kB for all hundred and eleven. `npm run measure` prints those numbers off a real bundler, so they cannot quietly stop being true. The stylesheet splits the same way.
+- **One runtime dependency.** React 18 or 19, Node.js 22 or later.
 
 ## Documentation
 
@@ -73,7 +74,7 @@ If Tailwind v4 is already in your project, import the token sheet instead:
 @import 'material-plus-ui/tailwind.css';
 ```
 
-A page that renders a handful of components can take the tokens and a sheet each instead of the whole 109 kB — 3.8 kB gzipped for one component against 15.6 kB for the lot. [The guide](https://material-plus.cdget.com/guide/getting-started#if-you-only-render-a-few-components) has the numbers and where the two paths cross.
+A page that renders a handful of components can take the tokens and a sheet each instead of the whole 113 kB — 4.5 kB gzipped for one component against 16.1 kB for the lot. [The guide](https://material-plus.cdget.com/guide/getting-started#if-you-only-render-a-few-components) has the numbers and where the two paths cross.
 
 ```ts
 import 'material-plus-ui/styles/tokens.css';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPSize, MPVariant } from '../../types';
+import type { MPSize, MPVariant } from '../../types.js';
 export interface MPAccordionProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'> {
     /**
      * Whether more than one section may be open at once.

package/dist/components/accordion/MPAccordion.js

@@ -1 +1,2 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Accordion as i}from"@base-ui/react/accordion";import{MPIcon as a}from"../icon/MPIcon";import{ChevronDownIcon as r}from"../../constants/icons";import{MPStateLayer as o}from"../../internal/StateLayer";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as d,META_TEXT as c,PROSE_TEXT as m,SHEET_PAD_X as u,SHEET_PAD_Y as f,SHEET_TITLE as p}from"../../internal/scale";import{CONTAINER_SURFACE as h}from"../../internal/surface";const x=/*@__PURE__*/t.createContext({size:"md",dividers:!0}),v=["h-(--accordion-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" "),b={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPAccordion=/*@__PURE__*/t.forwardRef(function({multiple:n=!1,value:a,defaultValue:r,onValueChange:o,dividers:s=!0,disabled:l=!1,variant:d="outlined",size:c="md",hiddenUntilFound:m=!1,keepMounted:u=!1,className:f,children:p,...v},b){const N=t.useMemo(()=>({size:c,dividers:s}),[c,s]);return e(x.Provider,{value:N,children:e(i.Root,{ref:b,multiple:n,value:a,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:m,keepMounted:u,"data-mp-size":c,"data-mp-variant":d,className:["mp-accordion rounded-mp-md flex w-full flex-col",h[d],"text-mp-on-surface",s?"overflow-hidden [&>div+div]:border-mp-outline-variant [&>div+div]:border-t":"p-1",f??""].filter(Boolean).join(" "),...v,children:p})})});export const MPAccordionItem=/*@__PURE__*/t.forwardRef(function({value:h,title:N,subtitle:g,startIcon:j,action:w,disabled:y=!1,className:z,children:M,...k},P){const{size:C,dividers:I}=t.useContext(x),V=u[C],B=f[C];return n(i.Item,{ref:P,value:h,disabled:y,className:["mp-accordion__item flex flex-col",z??""].filter(Boolean).join(" "),...k,children:[n(i.Header,{className:"m-0 flex w-full items-center font-[inherit]",children:[n(i.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",V,B,s[C],I?"":"rounded-mp-sm","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].filter(Boolean).join(" "),children:[e(o,{}),d(j)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:j}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(N)?e("span",{className:`truncate ${p[C]}`,children:N}):null,d(g)?e("span",{className:`text-mp-on-surface-variant truncate ${c}`,children:g}):null]}),e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(a,{icon:r,size:l[C]})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${V}`,children:w}):null]}),e(i.Panel,{className:v,children:e("div",{className:["min-w-0",m[C],"text-mp-on-surface-variant",V,b[C]].join(" "),children:M})})]})});
+"use client";
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Accordion as i}from"@base-ui/react/accordion";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as d,META_TEXT as c,PROSE_TEXT as m,SHEET_PAD_X as u,SHEET_PAD_Y as f,SHEET_TITLE as p}from"../../internal/scale.js";import{CONTAINER_SURFACE as h}from"../../internal/surface.js";const x=/*@__PURE__*/t.createContext({size:"md",dividers:!0}),v=/*@__PURE__*/["h-(--accordion-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" "),b={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPAccordion=/*@__PURE__*/t.forwardRef(function({multiple:n=!1,value:a,defaultValue:r,onValueChange:o,dividers:s=!0,disabled:l=!1,variant:d="outlined",size:c="md",hiddenUntilFound:m=!1,keepMounted:u=!1,className:f,children:p,...v},b){const j=t.useMemo(()=>({size:c,dividers:s}),[c,s]);return e(x.Provider,{value:j,children:e(i.Root,{ref:b,multiple:n,value:a,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:m,keepMounted:u,"data-mp-size":c,"data-mp-variant":d,className:["mp-accordion rounded-mp-md flex w-full flex-col",h[d],"text-mp-on-surface",s?"overflow-hidden [&>div+div]:border-mp-outline-variant [&>div+div]:border-t":"p-1",f??""].filter(Boolean).join(" "),...v,children:p})})});export const MPAccordionItem=/*@__PURE__*/t.forwardRef(function({value:h,title:j,subtitle:N,startIcon:g,action:w,disabled:y=!1,className:z,children:M,...k},P){const{size:C,dividers:I}=t.useContext(x),V=u[C],B=f[C];return n(i.Item,{ref:P,value:h,disabled:y,className:["mp-accordion__item flex flex-col",z??""].filter(Boolean).join(" "),...k,children:[n(i.Header,{className:"m-0 flex w-full items-center font-[inherit]",children:[n(i.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",V,B,s[C],I?"":"rounded-mp-sm","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].filter(Boolean).join(" "),children:[e(o,{}),d(g)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:g}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(j)?e("span",{className:`truncate ${p[C]}`,children:j}):null,d(N)?e("span",{className:`text-mp-on-surface-variant truncate ${c}`,children:N}):null]}),e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(a,{icon:r,size:l[C]})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${V}`,children:w}):null]}),e(i.Panel,{className:v,children:e("div",{className:["min-w-0",m[C],"text-mp-on-surface-variant",V,b[C]].join(" "),children:M})})]})});

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

@@ -1,2 +1,2 @@
-export { MPAccordion, MPAccordionItem } from './MPAccordion';
-export type { MPAccordionItemProps, MPAccordionProps } from './MPAccordion';
+export { MPAccordion, MPAccordionItem } from './MPAccordion.js';
+export type { MPAccordionItemProps, MPAccordionProps } from './MPAccordion.js';

package/dist/components/accordion/index.js

@@ -1 +1 @@
-export{MPAccordion,MPAccordionItem}from"./MPAccordion";
+export{MPAccordion,MPAccordionItem}from"./MPAccordion.js";

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

@@ -1,5 +1,20 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types';
+import type { MPColor, MPSize, MPVariant } from '../../types.js';
+/**
+ * How loudly an alert announces itself.
+ *
+ * - `assertive` — interrupts whatever a screen reader is in the middle of
+ *   saying. `role="alert"`.
+ * - `polite` — waits for a pause. `role="status"`.
+ * - `off` — announces nothing, and is read only by somebody who walks into it.
+ *
+ * The third is the one worth knowing about. A live region is for content that
+ * *arrives*, and an alert that was on the page when it loaded did not arrive —
+ * it is part of the page, and interrupting to read it is interrupting to say
+ * something the reader was going to reach anyway. A form's list of errors on a
+ * server-rendered page is exactly that case.
+ */
+export type MPAlertLive = 'assertive' | 'polite' | 'off';
 export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
     /**
      * How much surface the alert paints.
@@ -50,6 +65,17 @@ export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      * `children` so it stays on the first line while the message wraps.
      */
     action?: React.ReactNode;
+    /**
+     * How loudly it announces itself.
+     *
+     * Defaults to `assertive` for the `error` family and `polite` for the other
+     * three, which is the right split for a message that *appeared*. Reach for
+     * `off` when the alert was on the page before the reader was: an error summary
+     * rendered by the server is not news, and a screen reader interrupting itself
+     * to read it is interrupting to say something the reader was about to reach on
+     * their own.
+     */
+    live?: MPAlertLive;
     /** Passing it is what makes the dismiss button appear. */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**

package/dist/components/alert/MPAlert.js

@@ -1 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as r}from"../icon/MPIcon";import{CloseIcon as a,ErrorIcon as l,InfoIcon as o}from"../../constants/icons";import{accentSlots as i}from"../../internal/accent";import{useMPLocale as s,useMPMessages as c}from"../../internal/locale";import{MPStateLayer as m}from"../../internal/StateLayer";import{CONTROL_ICON as d,hasContent as f,PROSE_TEXT as p,SHEET_GAP as u,SHEET_PAD as x,SHEET_TITLE as h,STACK_GAP as v}from"../../internal/scale";const b={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline border bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"},y={filled:"",tonal:"",elevated:"text-(--_mp-accent)",outlined:"text-(--_mp-accent)",text:"text-(--_mp-accent)"},N={filled:"",tonal:"",elevated:"text-mp-on-surface-variant",outlined:"text-mp-on-surface-variant",text:"text-mp-on-surface-variant"},j={primary:"status",secondary:"status",tertiary:"status",error:"alert"};export const MPAlert=/*@__PURE__*/n.forwardRef(function({variant:n="tonal",color:g="primary",size:_="md",title:w,icon:z,action:k,onClose:B,closeLabel:C,locale:L,className:M,style:P,children:A,...I},R){const S=s(L),$=c("alert",S),q=y[n],D=f(w),E=void 0===z?e(r,{icon:"error"===g?l:o,size:d[_]}):z;return t("div",{ref:R,role:j[g],"data-mp-size":_,"data-mp-variant":n,className:["mp-alert rounded-mp-md flex w-full items-start","box-border",x[_],u[_],p[_],b[n],M??""].filter(Boolean).join(" "),style:{...i(g),...P},...I,children:[f(E)?e("span",{className:["flex h-[1lh] shrink-0 items-center",q].filter(Boolean).join(" "),children:E}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${v[_]}`,children:[D?e("div",{className:[h[_],q].filter(Boolean).join(" "),children:w}):null,f(A)?e("div",{className:D?N[n]:void 0,children:A}):null]}),f(k)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:k}):null,B?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:t("button",{type:"button","aria-label":C??$.dismiss,onClick:B,className:["group rounded-mp-full relative -m-1 flex size-8 cursor-pointer items-center","justify-center bg-transparent text-inherit","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(m,{}),e(r,{icon:a,size:d[_]})]})}):null]})});
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as l,ErrorIcon as i,InfoIcon as o}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{useMPLocale as s,useMPMessages as c}from"../../internal/locale.js";import{ALERT as m}from"../../internal/messages/alert.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{CONTROL_ICON as f,hasContent as d,PROSE_TEXT as u,SHEET_GAP as x,SHEET_PAD as v,SHEET_TITLE as h,STACK_GAP as b}from"../../internal/scale.js";const j={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline border bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"},y={filled:"",tonal:"",elevated:"text-(--_mp-accent)",outlined:"text-(--_mp-accent)",text:"text-(--_mp-accent)"},N={filled:"",tonal:"",elevated:"text-mp-on-surface-variant",outlined:"text-mp-on-surface-variant",text:"text-mp-on-surface-variant"},g={primary:"polite",secondary:"polite",tertiary:"polite",error:"assertive"},_={assertive:"alert",polite:"status",off:void 0};export const MPAlert=/*@__PURE__*/n.forwardRef(function({variant:n="tonal",color:w="primary",size:z="md",title:k,icon:B,action:C,live:L,onClose:M,closeLabel:P,locale:A,className:I,style:R,children:S,...$},q){const D=s(A),E=c(m,D),F=y[n],G=d(k),H=void 0===B?e(r,{icon:"error"===w?i:o,size:f[z]}):B;return t("div",{ref:q,role:_[L??g[w]],"data-mp-size":z,"data-mp-variant":n,className:["mp-alert rounded-mp-md flex w-full items-start","box-border",v[z],x[z],u[z],j[n],I??""].filter(Boolean).join(" "),style:{...a(w),...R},...$,children:[d(H)?e("span",{className:["flex h-[1lh] shrink-0 items-center",F].filter(Boolean).join(" "),children:H}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${b[z]}`,children:[G?e("div",{className:[h[z],F].filter(Boolean).join(" "),children:k}):null,d(S)?e("div",{className:G?N[n]:void 0,children:S}):null]}),d(C)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:C}):null,M?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:t("button",{type:"button","aria-label":P??E.dismiss,onClick:M,className:["group rounded-mp-full relative -m-1 flex size-8 cursor-pointer items-center","justify-center bg-transparent text-inherit","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(p,{}),e(r,{icon:l,size:f[z]})]})}):null]})});

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

@@ -1,2 +1,2 @@
-export { MPAlert } from './MPAlert';
-export type { MPAlertProps } from './MPAlert';
+export { MPAlert } from './MPAlert.js';
+export type { MPAlertLive, MPAlertProps } from './MPAlert.js';

package/dist/components/alert/index.js

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateProps, MPSide } from '../../types';
+import type { MPAnimateProps, MPSide } from '../../types.js';
 export interface MPAnimateAppearProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * How long after one child the next one starts, in milliseconds. This is the

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

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

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

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

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

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

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

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

package/dist/components/animate-blink/MPAnimateBlink.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";export const MPAnimateBlink=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:i,repeat:o="infinite",alternate:s,paused:l,trigger:p="mount",play:c,once:d=!0,threshold:f=.2,min:m=0,render:u,className:y,style:g,children:h,...N},b){const k=a({effect:"blink",duration:e,delay:n,easing:i,repeat:o,alternate:s,opacity:m,trigger:p,play:c,once:d,threshold:f,paused:l,infinite:t(o)});return r({render:u,ref:[b,k.ref],props:{...N,className:[k.className,y].filter(Boolean).join(" "),style:{...k.style,...g},...k.props,children:h}})});
+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";export const MPAnimateBlink=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:i,repeat:o="infinite",alternate:s,paused:l,trigger:p="mount",play:c,once:d=!0,threshold:f=.2,min:m=0,render:u,className:y,style:g,children:h,...N},b){const j=a({effect:"blink",duration:e,delay:n,easing:i,repeat:o,alternate:s,opacity:m,trigger:p,play:c,once:d,threshold:f,paused:l,infinite:t(o)});return r({render:u,ref:[b,j.ref],props:{...N,className:[j.className,y].filter(Boolean).join(" "),style:{...j.style,...g},...j.props,children:h}})});

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

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateMode, MPAnimateProps } from '../../types';
+import type { MPAnimateMode, MPAnimateProps } from '../../types.js';
 export interface MPAnimateFadeProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content arrives or leaves. An exit is quicker than an entrance

package/dist/components/animate-fade/MPAnimateFade.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";export const MPAnimateFade=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:o,repeat:i=1,alternate:s,paused:l,trigger:d="mount",play:m,once:p=!0,threshold:c=.2,mode:f="in",from:u=0,render:y,className:g,style:h,children:N,...b},j){const w=t({effect:"fade",duration:e,delay:n,easing:o,repeat:i,alternate:s,mode:f,opacity:u,trigger:d,play:m,once:p,threshold:c,paused:l,infinite:a(i)});return r({render:y,ref:[j,w.ref],props:{...b,className:[w.className,g].filter(Boolean).join(" "),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 a,useAnimateElement as t}from"../../internal/animate.js";export const MPAnimateFade=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:o,repeat:i=1,alternate:s,paused:l,trigger:d="mount",play:m,once:p=!0,threshold:c=.2,mode:f="in",from:u=0,render:y,className:g,style:h,children:N,...j},b){const w=t({effect:"fade",duration:e,delay:n,easing:o,repeat:i,alternate:s,mode:f,opacity:u,trigger:d,play:m,once:p,threshold:c,paused:l,infinite:a(i)});return r({render:y,ref:[b,w.ref],props:{...j,className:[w.className,g].filter(Boolean).join(" "),style:{...w.style,...h},...w.props,children:N}})});

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

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateMode, MPAnimateProps } from '../../types';
+import type { MPAnimateMode, MPAnimateProps } from '../../types.js';
 export interface MPAnimateGrowProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content unfolds or folds away. An exit is quicker than an

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPAnimateProps } from '../../types';
+import type { MPAnimateProps } from '../../types.js';
 export interface MPAnimateHeadlineProps extends Omit<MPAnimateProps, 'alternate'>, React.ComponentPropsWithoutRef<'div'> {
     /**
      * How long each line is held before the next one comes up, in milliseconds.

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateProps, MPColor, MPSize } from '../../types';
+import type { MPAnimateProps, MPColor, MPSize } from '../../types.js';
 export interface MPAnimateLightingProps extends Omit<MPAnimateProps, 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
     /**
      * Which accent family the light is drawn in. Not an arbitrary colour, for the

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

@@ -1 +1 @@
-import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as a}from"../../internal/accent";import{isInfinite as n,repeatValue as t,useAnimationRun as m}from"../../internal/animate";const i={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-lg",xl:"rounded-mp-xl"};export const MPAnimateLighting=/*@__PURE__*/e.forwardRef(function({duration:e=3e3,delay:o=0,repeat:d="infinite",alternate:p,paused:s,trigger:l="mount",play:c,once:g=!0,threshold:u=.2,color:f="primary",size:h="md",spread:_=3,arc:x=50,blur:y=4,reverse:w=!1,render:$,className:b,style:v,children:z,...N},j){const A=m({trigger:l,play:c,once:g,threshold:u,paused:s,infinite:n(d)});return r({render:$,ref:[j,A.ref],props:{...N,"data-mp-size":h,className:["mp-anim-lighting",i[h],b].filter(Boolean).join(" "),style:{...a(f),"--_mp-anim-duration":`${e}ms`,"--_mp-anim-delay":`${o}ms`,"--_mp-anim-repeat":t(d),"--_mp-anim-direction":w?p?"alternate-reverse":"reverse":p?"alternate":"normal","--_mp-anim-state":A.state,"--_mp-anim-glow-width":`${_}px`,"--_mp-anim-glow-arc":`${x}deg`,"--_mp-anim-glow-blur":`${y}px`,...v},...A.handlers,"data-mp-animation":"lighting","data-mp-state":A.state,children:z}})});
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as a}from"../../internal/accent.js";import{isInfinite as n,repeatValue as t,useAnimationRun as m}from"../../internal/animate.js";const i={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-lg",xl:"rounded-mp-xl"};export const MPAnimateLighting=/*@__PURE__*/e.forwardRef(function({duration:e=3e3,delay:o=0,repeat:s="infinite",alternate:d,paused:p,trigger:l="mount",play:c,once:g=!0,threshold:u=.2,color:f="primary",size:h="md",spread:_=3,arc:x=50,blur:y=4,reverse:w=!1,render:$,className:b,style:j,children:v,...z},N){const A=m({trigger:l,play:c,once:g,threshold:u,paused:p,infinite:n(s)});return r({render:$,ref:[N,A.ref],props:{...z,"data-mp-size":h,className:["mp-anim-lighting",i[h],b].filter(Boolean).join(" "),style:{...a(f),"--_mp-anim-duration":`${e}ms`,"--_mp-anim-delay":`${o}ms`,"--_mp-anim-repeat":t(s),"--_mp-anim-direction":w?d?"alternate-reverse":"reverse":d?"alternate":"normal","--_mp-anim-state":A.state,"--_mp-anim-glow-width":`${_}px`,"--_mp-anim-glow-arc":`${x}deg`,"--_mp-anim-glow-blur":`${y}px`,...j},...A.handlers,"data-mp-animation":"lighting","data-mp-state":A.state,children:v}})});

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateMode, MPAnimateProps } from '../../types';
+import type { MPAnimateMode, MPAnimateProps } from '../../types.js';
 export interface MPAnimateRotateProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content turns into place or out of it.

package/dist/components/animate-rotate/MPAnimateRotate.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";export const MPAnimateRotate=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:o,repeat:i=1,alternate:s,paused:l,trigger:d="mount",play:m,once:c=!0,threshold:f=.2,mode:p="in",from:g=-180,to:u=0,origin:y="center",fade:h=!0,render:N,className:R,style:$,children:b,...j},w){const x=a({effect:"rotate",duration:e,delay:n,easing:o,repeat:i,alternate:s,mode:p,angle:`${g}deg`,angleTo:`${u}deg`,opacity:h?0:1,trigger:d,play:m,once:c,threshold:f,paused:l,infinite:t(i)});return r({render:N,ref:[w,x.ref],props:{...j,className:[x.className,R].filter(Boolean).join(" "),style:{transformOrigin:y,...x.style,...$},...x.props,children:b}})});
+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";export const MPAnimateRotate=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:o,repeat:i=1,alternate:s,paused:l,trigger:d="mount",play:m,once:c=!0,threshold:f=.2,mode:p="in",from:g=-180,to:u=0,origin:y="center",fade:h=!0,render:N,className:j,style:R,children:$,...b},w){const x=a({effect:"rotate",duration:e,delay:n,easing:o,repeat:i,alternate:s,mode:p,angle:`${g}deg`,angleTo:`${u}deg`,opacity:h?0:1,trigger:d,play:m,once:c,threshold:f,paused:l,infinite:t(i)});return r({render:N,ref:[w,x.ref],props:{...b,className:[x.className,j].filter(Boolean).join(" "),style:{transformOrigin:y,...x.style,...R},...x.props,children:$}})});

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

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

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

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

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

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

package/dist/components/animate-slide/MPAnimateSlide.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";export const MPAnimateSlide=/*@__PURE__*/e.forwardRef(function({duration:e,delay:o=0,easing:i,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,mode:y="in",from:u="bottom",distance:g="100%",fade:h=!0,render:x,className:N,style:b,children:j,...w},A){const{x:B,y:M}=a(u,g),P=n({effect:"slide",duration:e,delay:o,easing:i,repeat:s,alternate:l,mode:y,x:B,y:M,opacity:h?0:1,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(s)});return r({render:x,ref:[A,P.ref],props:{...w,className:[P.className,N].filter(Boolean).join(" "),style:{...P.style,...b},...P.props,children:j}})});
+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";export const MPAnimateSlide=/*@__PURE__*/e.forwardRef(function({duration:e,delay:o=0,easing:i,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,mode:y="in",from:u="bottom",distance:g="100%",fade:h=!0,render:x,className:N,style:b,children:j,...w},A){const{x:B,y:M}=a(u,g),P=n({effect:"slide",duration:e,delay:o,easing:i,repeat:s,alternate:l,mode:y,x:B,y:M,opacity:h?0:1,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(s)});return r({render:x,ref:[A,P.ref],props:{...w,className:[P.className,N].filter(Boolean).join(" "),style:{...P.style,...b},...P.props,children:j}})});

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateMode, MPAnimateProps } from '../../types';
+import type { MPAnimateMode, MPAnimateProps } from '../../types.js';
 export interface MPAnimateZoomProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content comes forward or falls away. An exit is quicker than an

package/dist/components/animate-zoom/MPAnimateZoom.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";export const MPAnimateZoom=/*@__PURE__*/e.forwardRef(function({duration:e,delay:o=0,easing:n,repeat:i=1,alternate:s,paused:l,trigger:m="mount",play:d,once:c=!0,threshold:f=.2,mode:p="in",from:u=.4,fade:y=!0,render:g,className:h,style:N,children:b,...j},w){const x=t({effect:"zoom",duration:e,delay:o,easing:n,repeat:i,alternate:s,mode:p,scale:u,opacity:y?0:1,trigger:m,play:d,once:c,threshold:f,paused:l,infinite:a(i)});return r({render:g,ref:[w,x.ref],props:{...j,className:[x.className,h].filter(Boolean).join(" "),style:{transformOrigin:"center",...x.style,...N},...x.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";export const MPAnimateZoom=/*@__PURE__*/e.forwardRef(function({duration:e,delay:o=0,easing:n,repeat:i=1,alternate:s,paused:l,trigger:m="mount",play:d,once:c=!0,threshold:f=.2,mode:p="in",from:u=.4,fade:y=!0,render:g,className:h,style:N,children:j,...b},w){const x=t({effect:"zoom",duration:e,delay:o,easing:n,repeat:i,alternate:s,mode:p,scale:u,opacity:y?0:1,trigger:m,play:d,once:c,threshold:f,paused:l,infinite:a(i)});return r({render:g,ref:[w,x.ref],props:{...b,className:[x.className,h].filter(Boolean).join(" "),style:{transformOrigin:"center",...x.style,...N},...x.props,children:j}})});

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

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

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

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

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

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

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

@@ -1 +1 @@
-import*as e from"react";import{useRender as o}from"@base-ui/react/use-render";const i={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-xl"},t=["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={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 MPAspectRatio=/*@__PURE__*/e.forwardRef(function({ratio:e=1,fit:c="cover",rounded:l=!1,size:n="md",render:s,className:d,style:m,children:a,...u},f){const p=["mp-aspect-ratio relative block w-full overflow-hidden",t,r[c],l?i[n]:"",d??""].filter(Boolean).join(" ");return o({render:s,ref:f,props:{"data-mp-size":n,className:p,style:{aspectRatio:e,...m},children:a,...u}})});
+import*as e from"react";import{useRender as o}from"@base-ui/react/use-render";const i={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-xl"},t=/*@__PURE__*/["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={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 MPAspectRatio=/*@__PURE__*/e.forwardRef(function({ratio:e=1,fit:c="cover",rounded:l=!1,size:n="md",render:s,className:d,style:m,children:a,...u},f){const p=["mp-aspect-ratio relative block w-full overflow-hidden",t,r[c],l?i[n]:"",d??""].filter(Boolean).join(" ");return o({render:s,ref:f,props:{"data-mp-size":n,className:p,style:{aspectRatio:e,...m},children:a,...u}})});

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

@@ -1,2 +1,2 @@
-export { MPAspectRatio } from './MPAspectRatio';
-export type { MPAspectFit, MPAspectRatioProps } from './MPAspectRatio';
+export { MPAspectRatio } from './MPAspectRatio.js';
+export type { MPAspectFit, MPAspectRatioProps } from './MPAspectRatio.js';

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types';
+import type { MPColor, MPSize, MPVariant } from '../../types.js';
 /** What Base UI reports about the picture as it loads. */
 export type MPAvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 /**

package/dist/components/avatar/MPAvatar.js

@@ -1 +1,2 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent";import{CONTROL_SQUARE as l,hasContent as i}from"../../internal/scale";import{VISUALLY_HIDDEN as o}from"../../internal/visually-hidden";const m={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},s={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},c={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};function d(){return a("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",className:"size-[60%]",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 MPAvatar=/*@__PURE__*/t.forwardRef(function({src:t,srcSet:p,alt:u,name:f,initials:h,shape:x="circle",variant:g="tonal",size:v="md",color:b="primary",delay:y,imageProps:N,onLoadingStatusChange:j,className:w,style:z,children:_,...C},A){const B=f?function(e){const a=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===a.length?"":((Array.from(a[0])[0]??"")+(a.length>1?Array.from(a[a.length-1])[0]??"":"")).toLocaleUpperCase()}(f):"",S=u??f,L=i(_)?_:(h??B)||e(d,{}),M=i(_)||Boolean(h??B),k=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",l[v],m[v],"circle"===x?"rounded-mp-full":s[v],c[g],w??""].filter(Boolean).join(" ");return a(n.Root,{ref:A,"data-mp-size":v,"data-mp-variant":g,className:k,style:{...r(b),...z},...C,children:[t?e(n.Image,{src:t,srcSet:p,alt:S??"",onLoadingStatusChange:j,...N,className:"size-full object-cover"}):null,a(n.Fallback,{delay:t?y:void 0,className:"flex size-full items-center justify-center",children:[S&&M?e("span",{className:o,children:S}):null,e("span",{"aria-hidden":!(!S||!M)||void 0,className:"contents",children:L})]})]})});
+"use client";
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent.js";import{MPAvatarGroupContext as l}from"../../internal/avatar-group.js";import{CONTROL_SQUARE as i,hasContent as o}from"../../internal/scale.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";const m={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},c={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},d={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};function p(){return a("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",className:"size-[60%]",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 MPAvatar=/*@__PURE__*/t.forwardRef(function({src:u,srcSet:f,alt:h,name:x,initials:g,shape:v,variant:b,size:j,color:y,delay:N,imageProps:w,onLoadingStatusChange:z,className:C,style:_,children:A,...B},S){const L=t.useContext(l),M=v??L?.shape??"circle",k=b??L?.variant??"tonal",F=j??L?.size??"md",P=y??L?.color??"primary",R=x?function(e){const a=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===a.length?"":((Array.from(a[0])[0]??"")+(a.length>1?Array.from(a[a.length-1])[0]??"":"")).toLocaleUpperCase()}(x):"",Z=h??x,I=o(A)?A:(g??R)||e(p,{}),U=o(A)||Boolean(g??R),q=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",i[F],m[F],"circle"===M?"rounded-mp-full":c[F],d[k],C??""].filter(Boolean).join(" ");return a(n.Root,{ref:S,"data-mp-size":F,"data-mp-variant":k,className:q,style:{...r(P),..._},...B,children:[u?e(n.Image,{src:u,srcSet:f,alt:Z??"",onLoadingStatusChange:z,...w,className:"size-full object-cover"}):null,a(n.Fallback,{delay:u?N:void 0,className:"flex size-full items-center justify-center",children:[Z&&U?e("span",{className:s,children:Z}):null,e("span",{"aria-hidden":!(!Z||!U)||void 0,className:"contents",children:I})]})]})});

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

@@ -1,2 +1,2 @@
-export { MPAvatar } from './MPAvatar';
-export type { MPAvatarLoadingStatus, MPAvatarProps, MPAvatarShape } from './MPAvatar';
+export { MPAvatar } from './MPAvatar.js';
+export type { MPAvatarLoadingStatus, MPAvatarProps, MPAvatarShape } from './MPAvatar.js';

package/dist/components/avatar/index.js

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