material-plus-ui 1.5.0 → 1.6.0

package/dist/components/accordion/MPAccordion.js

@@ -1,2 +1,2 @@
 "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})})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Accordion as a}from"@base-ui/react/accordion";import{MPIcon as i}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 p,SHEET_TITLE as f}from"../../internal/scale.js";import{CONTAINER_SURFACE as h}from"../../internal/surface.js";import{useMPSize as v}from"../../internal/config.js";const x=/*@__PURE__*/n.createContext({size:"md",dividers:!0}),b=/*@__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(" ");const g={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPAccordion=/*@__PURE__*/n.forwardRef(function({multiple:t=!1,value:i,defaultValue:r,onValueChange:o,dividers:s=!0,disabled:l=!1,variant:d="outlined",size:c,hiddenUntilFound:m=!1,keepMounted:u=!1,className:p,children:f,...b},g){const j=v(c),N=n.useMemo(()=>({size:j,dividers:s}),[j,s]);return e(x.Provider,{value:N,children:e(a.Root,{ref:g,multiple:t,value:i,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:m,keepMounted:u,"data-mp-size":j,"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",p??""].filter(Boolean).join(" "),...b,children:f})})});export const MPAccordionItem=/*@__PURE__*/n.forwardRef(function({value:h,title:v,subtitle:j,startIcon:N,action:w,disabled:y=!1,className:_,children:k,...z},C){const{size:M,dividers:A}=n.useContext(x),P=u[M],B=p[M],I=n.useRef(null),[R,V]=n.useState(!1),F=n.useCallback(e=>{var t;I.current=e,e&&V(e.hasAttribute("data-open")&&!((t=e).hasAttribute("data-starting-style")&&parseFloat(getComputedStyle(t).transitionDuration)>0))},[]);return t(a.Item,{ref:C,value:h,disabled:y,className:["mp-accordion__item flex flex-col",_??""].filter(Boolean).join(" "),...z,children:[t(a.Header,{className:"m-0 flex w-full items-center font-[inherit]",children:[t(a.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",P,B,s[M],A?"":"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(N)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:N}):null,t("span",{className:"mp-accordion__text flex min-w-0 flex-1 flex-col",children:[d(v)?e("span",{className:`mp-accordion__title truncate ${f[M]}`,children:v}):null,d(j)?e("span",{className:`mp-accordion__subtitle text-mp-on-surface-variant truncate ${c}`,children:j}):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(i,{icon:r,size:l[M]})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${P}`,children:w}):null]}),e(a.Panel,{ref:F,className:[b,R?"data-open:overflow-visible":""].filter(Boolean).join(" "),onTransitionEnd:e=>{e.target===I.current&&"height"===e.propertyName&&V(I.current.hasAttribute("data-open"))},children:e("div",{className:["min-w-0",m[M],"text-mp-on-surface-variant",P,g[M]].join(" "),children:k})})]})});

package/dist/components/alert/MPAlert.js

@@ -1,2 +1,2 @@
 "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]})});
+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 o,ErrorIcon as i,InfoIcon as l}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 f}from"../../internal/StateLayer.js";import{CONTROL_ICON as p,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";import{useMPColor as j,useMPSize as g}from"../../internal/config.js";const y={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"},N={filled:"",tonal:"",elevated:"text-(--_mp-accent)",outlined:"text-(--_mp-accent)",text:"text-(--_mp-accent)"},_={filled:"",tonal:"",elevated:"text-mp-on-surface-variant",outlined:"text-mp-on-surface-variant",text:"text-mp-on-surface-variant"},w={primary:"polite",secondary:"polite",tertiary:"polite",error:"assertive"},z={assertive:"alert",polite:"status",off:void 0};export const MPAlert=/*@__PURE__*/n.forwardRef(function({variant:n="tonal",color:k,size:B,title:C,icon:L,action:M,live:P,onClose:A,closeLabel:I,locale:R,className:S,style:$,children:q,...D},E){const F=j(k),G=g(B),H=s(R),J=c(m,H),K=N[n],O=d(C),Q=void 0===L?e(r,{icon:"error"===F?i:l,size:p[G]}):L;return t("div",{ref:E,role:z[P??w[F]],"data-mp-size":G,"data-mp-variant":n,className:["mp-alert rounded-mp-md flex w-full items-start","box-border",v[G],x[G],u[G],y[n],S??""].filter(Boolean).join(" "),style:{...a(F),...$},...D,children:[d(Q)?e("span",{className:["flex h-[1lh] shrink-0 items-center",K].filter(Boolean).join(" "),children:Q}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${b[G]}`,children:[O?e("div",{className:[h[G],K].filter(Boolean).join(" "),children:C}):null,d(q)?e("div",{className:O?_[n]:void 0,children:q}):null]}),d(M)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:M}):null,A?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:t("button",{type:"button","aria-label":I??J.dismiss,onClick:A,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(f,{}),e(r,{icon:o,size:p[G]})]})}):null]})});

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.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}})});
+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 i}from"../../internal/animate.js";import{useMPColor as m,useMPSize as o}from"../../internal/config.js";const s={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:d=0,repeat:l="infinite",alternate:p,paused:c,trigger:g="mount",play:u,once:f=!0,threshold:h=.2,color:_,size:x,spread:y=3,arc:w=50,blur:$=4,reverse:j=!1,render:b,className:v,style:z,children:N,...A},B){const L=m(_),M=o(x),P=i({trigger:g,play:u,once:f,threshold:h,paused:c,infinite:n(l)});return r({render:b,ref:[B,P.ref],props:{...A,"data-mp-size":M,className:["mp-anim-lighting",s[M],v].filter(Boolean).join(" "),style:{...a(L),"--_mp-anim-duration":`${e}ms`,"--_mp-anim-delay":`${d}ms`,"--_mp-anim-repeat":t(l),"--_mp-anim-direction":j?p?"alternate-reverse":"reverse":p?"alternate":"normal","--_mp-anim-state":P.state,"--_mp-anim-glow-width":`${y}px`,"--_mp-anim-glow-arc":`${w}deg`,"--_mp-anim-glow-blur":`${$}px`,...z},...P.handlers,"data-mp-animation":"lighting","data-mp-state":P.state,children:N}})});

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

package/dist/components/avatar/MPAvatar.js

@@ -1,2 +1,2 @@
 "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})]})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent.js";import{MPAvatarGroupContext as l}from"../../internal/avatar-group.js";import{CONTROL_SQUARE as o,hasContent as i}from"../../internal/scale.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{useMPColor as m,useMPSize as c}from"../../internal/config.js";const d={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"},p={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},u={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 f(){return t("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__*/a.forwardRef(function({src:h,srcSet:x,alt:g,name:v,initials:b,shape:j,variant:y,size:N,color:w,delay:z,imageProps:C,onLoadingStatusChange:_,className:A,style:B,children:S,...L},M){const k=a.useContext(l),F=j??k?.shape??"circle",P=y??k?.variant??"tonal",R=c(N??k?.size),Z=m(w??k?.color),I=v?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()}(v):"",U=g??v,q=i(S)?S:(b??I)||e(f,{}),D=i(S)||Boolean(b??I),E=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",o[R],d[R],"circle"===F?"rounded-mp-full":p[R],u[P],A??""].filter(Boolean).join(" ");return t(n.Root,{ref:M,"data-mp-size":R,"data-mp-variant":P,className:E,style:{...r(Z),...B},...L,children:[h?e(n.Image,{src:h,srcSet:x,alt:U??"",onLoadingStatusChange:_,...C,className:"size-full object-cover"}):null,t(n.Fallback,{delay:h?z:void 0,className:"flex size-full items-center justify-center",children:[U&&D?e("span",{className:s,children:U}):null,e("span",{"aria-hidden":!(!U||!D)||void 0,className:"contents",children:q})]})]})});

package/dist/components/avatar-group/MPAvatarGroup.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{MPAvatar as t}from"../avatar/MPAvatar.js";import{MPAvatarGroupContext as i}from"../../internal/avatar-group.js";const o={xs:"0.625rem",sm:"0.75rem",md:"1.125rem",lg:"1.25rem",xl:"1.5rem"};export const MPAvatarGroup=/*@__PURE__*/e.forwardRef(function({max:l,total:m,overlap:n,size:s="md",shape:c="circle",variant:p="tonal",color:v="primary",className:d,style:f,children:h,...u},x){const g=e.useMemo(()=>({size:s,shape:c,variant:p,color:v}),[s,c,p,v]),j=e.Children.toArray(h),y=void 0===l?j:j.slice(0,Math.max(0,l)),M=m??j.length,z=Math.max(0,M-y.length);return r(i.Provider,{value:g,children:a("div",{ref:x,"data-mp-size":s,className:["mp-avatar-group isolate inline-flex items-center align-middle","[&>*:not(:first-child)]:[margin-inline-start:calc(var(--_mp-avatar-overlap)*-1)]","ring-mp-surface [&>*]:ring-2",d??""].filter(Boolean).join(" "),style:{"--_mp-avatar-overlap":void 0===n?o[s]:"number"==typeof n?`${n}px`:n,...f},...u,children:[y,z>0?r(t,{initials:`+${z}`}):null]})})});
+import{jsx as r,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{MPAvatar as t}from"../avatar/MPAvatar.js";import{MPAvatarGroupContext as i}from"../../internal/avatar-group.js";import{useMPColor as o,useMPSize as l}from"../../internal/config.js";const n={xs:"0.625rem",sm:"0.75rem",md:"1.125rem",lg:"1.25rem",xl:"1.5rem"};export const MPAvatarGroup=/*@__PURE__*/e.forwardRef(function({max:s,total:m,overlap:c,size:p,shape:v="circle",variant:f="tonal",color:d,className:h,style:u,children:x,...g},j){const M=l(p),y=o(d),z=e.useMemo(()=>({size:M,shape:v,variant:f,color:y}),[M,v,f,y]),A=e.Children.toArray(x),P=void 0===s?A:A.slice(0,Math.max(0,s)),N=m??A.length,$=Math.max(0,N-P.length);return r(i.Provider,{value:z,children:a("div",{ref:j,"data-mp-size":M,className:["mp-avatar-group isolate inline-flex items-center align-middle","[&>*:not(:first-child)]:[margin-inline-start:calc(var(--_mp-avatar-overlap)*-1)]","ring-mp-surface [&>*]:ring-2",h??""].filter(Boolean).join(" "),style:{"--_mp-avatar-overlap":void 0===c?n[M]:"number"==typeof c?`${c}px`:c,...u},...g,children:[P,$>0?r(t,{initials:`+${$}`}):null]})})});

package/dist/components/badge/MPBadge.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as m}from"react/jsx-runtime";import*as a from"react";import{accentSlots as n}from"../../internal/accent.js";import{hasContent as s}from"../../internal/scale.js";import{VISUALLY_HIDDEN as i}from"../../internal/visually-hidden.js";const l={xs:"h-3 min-w-3",sm:"h-3.5 min-w-3.5",md:"h-4 min-w-4",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},o={xs:"size-1",sm:"size-1.5",md:"size-1.5",lg:"size-2",xl:"size-2.5"},r={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-small",lg:"text-mp-label-medium",xl:"text-mp-label-medium"},d={xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},p={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},c={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},b={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},x={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-mp-surface-container text-(--_mp-accent)",text:"text-(--_mp-accent) bg-transparent"};export const MPBadge=/*@__PURE__*/a.forwardRef(function({variant:a="filled",size:u="md",color:g="error",content:f,max:h=99,dot:v=!1,showZero:w=!1,invisible:j=!1,placement:y="top-end",overlap:z="square",label:_,className:N,style:k,children:B,...$},q){const F=s(B),M=!s(f)||0===f&&!w,P=v||M,R=j||M&&!v,Z=["mp-badge pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","rounded-mp-full tabular-nums whitespace-nowrap",x[a],P?o[u]:[l[u],r[u],d[u]].join(" "),F?`absolute ${c[y]}`:"relative align-middle",F?P?p[u].dot:p[u].badge:"",F&&"circle"===z?b[y]:"","transition-[opacity,scale,visibility] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",R?"invisible scale-0 opacity-0":"",N??""].filter(Boolean).join(" "),A=function(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(f,h),C=e("span",{ref:q,"data-mp-size":u,"data-mp-variant":a,className:Z,style:{...n(g),...k},"aria-hidden":!!R||void 0,...$,children:M&&!v?null:m(t,{children:[P||_?e("span",{className:i,children:_??A}):null,P?null:e("span",{"aria-hidden":!!_||void 0,children:A})]})});return F?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[B,C]}):C});
+import{jsx as e,Fragment as t,jsxs as m}from"react/jsx-runtime";import*as n from"react";import{accentSlots as a}from"../../internal/accent.js";import{hasContent as s}from"../../internal/scale.js";import{VISUALLY_HIDDEN as i}from"../../internal/visually-hidden.js";import{useMPSize as l}from"../../internal/config.js";const o={xs:"h-3 min-w-3",sm:"h-3.5 min-w-3.5",md:"h-4 min-w-4",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},r={xs:"size-1",sm:"size-1.5",md:"size-1.5",lg:"size-2",xl:"size-2.5"},d={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-small",lg:"text-mp-label-medium",xl:"text-mp-label-medium"},p={xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},c={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},b={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},x={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},u={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-mp-surface-container text-(--_mp-accent)",text:"text-(--_mp-accent) bg-transparent"};export const MPBadge=/*@__PURE__*/n.forwardRef(function({variant:n="filled",size:f,color:g="error",content:h,max:v=99,dot:w=!1,showZero:j=!1,invisible:y=!1,placement:z="top-end",overlap:_="square",label:N,className:k,style:B,children:$,...q},F){const M=l(f),P=s($),R=!s(h)||0===h&&!j,Z=w||R,A=y||R&&!w,C=["mp-badge pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","rounded-mp-full tabular-nums whitespace-nowrap",u[n],Z?r[M]:[o[M],d[M],p[M]].join(" "),P?`absolute ${b[z]}`:"relative align-middle",P?Z?c[M].dot:c[M].badge:"",P&&"circle"===_?x[z]:"","transition-[opacity,scale,visibility] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",A?"invisible scale-0 opacity-0":"",k??""].filter(Boolean).join(" "),D=function(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(h,v),E=e("span",{ref:F,"data-mp-size":M,"data-mp-variant":n,className:C,style:{...a(g),...B},"aria-hidden":!!A||void 0,...q,children:R&&!w?null:m(t,{children:[Z||N?e("span",{className:i,children:N??D}):null,Z?null:e("span",{"aria-hidden":!!N||void 0,children:D})]})});return P?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[$,E]}):E});

package/dist/components/blockquote/MPBlockquote.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{accentSlots as r}from"../../internal/accent.js";import{hasContent as n,META_TEXT as i,SHEET_PAD as l}from"../../internal/scale.js";const o={xs:"text-mp-body-medium",sm:"text-mp-body-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},c="border-s-2 [border-inline-start-color:var(--_mp-accent)]",s={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-variant border border-s-2 bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"};function m(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const MPBlockquote=/*@__PURE__*/a.forwardRef(function({variant:a="text",size:d="md",color:p="primary",author:u,source:f,cite:x,icon:h,className:b,style:g,children:v,...y},N){const j=n(u)||n(f),w=void 0===h?e(m,{}):h,z="text"!==a,_=["mp-blockquote flex flex-col",o[d],c,z?"rounded-mp-md rounded-s-none":"",s[a],z?l[d]:"ps-4",b??""].filter(Boolean).join(" "),k=t("blockquote",{cite:x,children:[n(w)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] opacity-38",children:w}):null,v]}),q={...r(p),...g};return j?t("figure",{ref:N,"data-mp-size":d,"data-mp-variant":a,className:_,style:q,...y,children:[k,t("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5",z?"opacity-80":"text-mp-on-surface-variant",i].join(" "),children:[n(u)?t("span",{className:"font-medium",children:[e("span",{"aria-hidden":"true",children:"— "}),u]}):null,n(f)?e("cite",{className:"not-italic",children:f}):null]})]}):e("div",{ref:N,"data-mp-size":d,"data-mp-variant":a,className:_,style:q,...y,children:k})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{accentSlots as n}from"../../internal/accent.js";import{hasContent as r,META_TEXT as i,SHEET_PAD as l}from"../../internal/scale.js";import{useMPColor as o,useMPSize as c}from"../../internal/config.js";const s={xs:"text-mp-body-medium",sm:"text-mp-body-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},m="border-s-2 [border-inline-start-color:var(--_mp-accent)]",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-on-surface",outlined:"border-mp-outline-variant border border-s-2 bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"};function p(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const MPBlockquote=/*@__PURE__*/a.forwardRef(function({variant:a="text",size:u,color:f,author:x,source:h,cite:b,icon:g,className:v,style:j,children:N,...y},w){const z=c(u),_=o(f),k=r(x)||r(h),q=void 0===g?e(p,{}):g,B="text"!==a,M=["mp-blockquote flex flex-col",s[z],m,B?"rounded-mp-md rounded-s-none":"",d[a],B?l[z]:"ps-4",v??""].filter(Boolean).join(" "),Z=t("blockquote",{cite:b,children:[r(q)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] opacity-38",children:q}):null,N]}),C={...n(_),...j};return k?t("figure",{ref:w,"data-mp-size":z,"data-mp-variant":a,className:M,style:C,...y,children:[Z,t("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5",B?"opacity-80":"text-mp-on-surface-variant",i].join(" "),children:[r(x)?t("span",{className:"font-medium",children:[e("span",{"aria-hidden":"true",children:"— "}),x]}):null,r(h)?e("cite",{className:"not-italic",children:h}):null]})]}):e("div",{ref:w,"data-mp-size":z,"data-mp-variant":a,className:M,style:C,...y,children:Z})});

package/dist/components/bottom-navigation/MPBottomNavigation.d.ts

@@ -96,6 +96,23 @@ export interface MPBottomNavigationItemProps extends Omit<React.ComponentPropsWi
      * a `<button>` that calls `router.push` can do. `onValueChange` still fires.
      */
     href?: string;
+    /** Where that link opens. `rel` follows on its own for `_blank` — see `rel`. */
+    target?: string;
+    /**
+     * Overrides the `rel` a `_blank` destination would otherwise get, which is
+     * `noopener noreferrer`. Writing one **replaces** it rather than adding to it.
+     */
+    rel?: string;
+    /**
+     * Renders the destination as something else — a router's `Link`, so tapping it
+     * is a client-side navigation rather than a full page load. `href`, `target`
+     * and everything the bar decides still go through, so `render={<NextLink />}`
+     * needs the URL written once, here.
+     *
+     * With no `href` this replaces the `<button>` instead, which is the same
+     * element in the same place — the bar's own `onValueChange` fires either way.
+     */
+    render?: useRender.RenderProp;
     /** Unavailable, but still part of the set. */
     disabled?: boolean;
     /** The destination's name. Read out even when `labels` keeps it undrawn. */

package/dist/components/bottom-navigation/MPBottomNavigation.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as l from"react";import{useRender as n}from"@base-ui/react/use-render";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{hasContent as s}from"../../internal/scale.js";import{VISUALLY_HIDDEN as i}from"../../internal/visually-hidden.js";const r=/*@__PURE__*/l.createContext({value:null,change:()=>{},size:"md",labels:"all",disabled:!1}),m={xs:"h-14",sm:"h-16",md:"h-20",lg:"h-22",xl:"h-24"},d={xs:{box:"h-6 w-12",open:"w-12",shut:"w-6"},sm:{box:"h-7 w-14",open:"w-14",shut:"w-7"},md:{box:"h-8 w-16",open:"w-16",shut:"w-8"},lg:{box:"h-9 w-18",open:"w-18",shut:"w-9"},xl:{box:"h-10 w-20",open:"w-20",shut:"w-10"}},u={xs:20,sm:22,md:24,lg:26,xl:28},c={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-medium",xl:"text-mp-label-large"},p={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"},f={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPBottomNavigation=/*@__PURE__*/l.forwardRef(function({value:t,defaultValue:a=null,onValueChange:o,position:s="fixed",labels:i="all",size:d="md",divider:u=!1,safeArea:c=!0,disabled:p=!1,label:b,render:x,className:h,children:v,...g},w){const[y,z]=l.useState(a),j=void 0!==t,N=j?t:y,k=l.useCallback(e=>{j||z(e),o?.(e)},[j,o]),C=l.useMemo(()=>({value:N??null,change:k,size:d,labels:i,disabled:p}),[N,k,d,i,p]);return n({render:x??e("nav",{}),ref:w,props:{"aria-label":b,"data-mp-size":d,className:["mp-bottom-navigation bg-mp-surface-container text-mp-on-surface box-border w-full",u?"border-mp-outline-variant border-t":"",f[s],c?"pb-[env(safe-area-inset-bottom)]":"",h??""].filter(Boolean).join(" "),children:e(r.Provider,{value:C,children:e("div",{className:`flex w-full items-stretch ${m[d]}`,children:v})}),...g}})});export const MPBottomNavigationItem=/*@__PURE__*/l.forwardRef(function({value:n,icon:m,activeIcon:f,href:b,disabled:x=!1,className:h,children:v,onClick:g,...w},y){const z=l.useContext(r),j=x||z.disabled,N=null!==z.value&&z.value===n,k="all"===z.labels||"selected"===z.labels&&N,C=["mp-bottom-navigation__item group flex min-w-0 flex-1 flex-col items-center justify-center","box-border appearance-none bg-transparent px-1 font-[inherit] no-underline select-none",p[z.size],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",j?"text-mp-on-surface/38 cursor-default":N?"text-mp-on-surface cursor-pointer":"text-mp-on-surface-variant cursor-pointer",h??""].filter(Boolean).join(" "),B=t(a,{children:[s(m)||s(f)?t("span",{className:["relative flex shrink-0 items-center justify-center overflow-hidden","rounded-mp-full","transition-[color] duration-(--mp-sys-motion-duration-short4)",d[z.size].box,N&&!j?"text-mp-on-secondary-container":""].filter(Boolean).join(" "),children:[j?null:e("span",{"aria-hidden":"true",className:["pointer-events-none absolute inset-y-0 left-1/2 -translate-x-1/2","rounded-mp-full bg-mp-secondary-container","transition-[width,opacity] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",N?`${d[z.size].open} opacity-100`:`${d[z.size].shut} opacity-0`].join(" ")}),j?null:e(o,{}),e("span",{className:"relative flex items-center justify-center",style:{width:u[z.size],height:u[z.size]},children:N?f??m:m})]}):null,s(v)?e("span",{className:k?`max-w-full truncate ${c[z.size]}`:i,children:v}):null]}),$=e=>{j?e.preventDefault():(z.change(n),g?.(e))};return b?e("a",{ref:y,href:j?void 0:b,"aria-current":N?"page":void 0,"aria-disabled":j||void 0,className:C,onClick:$,...w,children:B}):e("button",{ref:y,type:"button",disabled:j,"aria-current":N?"page":void 0,className:C,onClick:$,...w,children:B})});
+import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{useRender as l}from"@base-ui/react/use-render";import{linkRel as r}from"../../internal/link.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{hasContent as i}from"../../internal/scale.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{useMPSize as d}from"../../internal/config.js";const m=/*@__PURE__*/n.createContext({value:null,change:()=>{},size:"md",labels:"all",disabled:!1}),u={xs:"h-14",sm:"h-16",md:"h-20",lg:"h-22",xl:"h-24"},c={xs:{box:"h-6 w-12",open:"w-12",shut:"w-6"},sm:{box:"h-7 w-14",open:"w-14",shut:"w-7"},md:{box:"h-8 w-16",open:"w-16",shut:"w-8"},lg:{box:"h-9 w-18",open:"w-18",shut:"w-9"},xl:{box:"h-10 w-20",open:"w-20",shut:"w-10"}},p={xs:20,sm:22,md:24,lg:26,xl:28},f={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-medium",xl:"text-mp-label-large"},b={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"},x={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPBottomNavigation=/*@__PURE__*/n.forwardRef(function({value:t,defaultValue:a=null,onValueChange:r,position:o="fixed",labels:i="all",size:s,divider:c=!1,safeArea:p=!0,disabled:f=!1,label:b,render:h,className:v,children:g,...w},y){const j=d(s),[z,N]=n.useState(a),k=void 0!==t,C=k?t:z,B=n.useCallback(e=>{k||N(e),r?.(e)},[k,r]),$=n.useMemo(()=>({value:C??null,change:B,size:j,labels:i,disabled:f}),[C,B,j,i,f]);return l({render:h??e("nav",{}),ref:y,props:{"aria-label":b,"data-mp-size":j,className:["mp-bottom-navigation bg-mp-surface-container text-mp-on-surface box-border w-full",c?"border-mp-outline-variant border-t":"",x[o],p?"pb-[env(safe-area-inset-bottom)]":"",v??""].filter(Boolean).join(" "),children:e(m.Provider,{value:$,children:e("div",{className:`flex w-full items-stretch ${u[j]}`,children:g})}),...w}})});export const MPBottomNavigationItem=/*@__PURE__*/n.forwardRef(function({value:l,icon:d,activeIcon:u,href:x,target:v,rel:g,render:w,disabled:y=!1,className:j,children:z,onClick:N,...k},C){const B=n.useContext(m),$=y||B.disabled,M=null!==B.value&&B.value===l,P="all"===B.labels||"selected"===B.labels&&M,I=["mp-bottom-navigation__item group flex min-w-0 flex-1 flex-col items-center justify-center","box-border appearance-none bg-transparent px-1 font-[inherit] no-underline select-none",b[B.size],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",$?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface cursor-pointer":"text-mp-on-surface-variant cursor-pointer",j??""].filter(Boolean).join(" "),R=t(a,{children:[i(d)||i(u)?t("span",{className:["relative flex shrink-0 items-center justify-center overflow-hidden","rounded-mp-full","transition-[color] duration-(--mp-sys-motion-duration-short4)",c[B.size].box,M&&!$?"text-mp-on-secondary-container":""].filter(Boolean).join(" "),children:[$?null:e("span",{"aria-hidden":"true",className:["pointer-events-none absolute inset-y-0 left-1/2 -translate-x-1/2","rounded-mp-full bg-mp-secondary-container","transition-[width,opacity] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",M?`${c[B.size].open} opacity-100`:`${c[B.size].shut} opacity-0`].join(" ")}),$?null:e(o,{}),e("span",{className:"relative flex items-center justify-center",style:{width:p[B.size],height:p[B.size]},children:M?u??d:d})]}):null,i(z)?e("span",{className:P?`max-w-full truncate ${f[B.size]}`:s,children:z}):null]}),S=e=>{$?e.preventDefault():(B.change(l),N?.(e))};return e(h,x?{render:w,props:{ref:C,href:$?void 0:x,target:v,rel:r(v,g),"aria-current":M?"page":void 0,"aria-disabled":$||void 0,className:I,onClick:S,children:R,...k}}:{render:w,props:{ref:C,type:w?void 0:"button",disabled:$,"aria-current":M?"page":void 0,className:I,onClick:S,children:R,...k}})});function h({render:t,props:a}){return l({render:t??(a.href?e("a",{}):e("button",{})),props:a})}

package/dist/components/breadcrumb/MPBreadcrumb.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as r from"react";import{MPIcon as o}from"../icon/MPIcon.js";import{ArrowRightIcon as i,ChevronRightIcon as a,MoreIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{BREADCRUMB as d}from"../../internal/messages/breadcrumb.js";import{CONTROL_GAP as u,hasContent as p,PROSE_TEXT as h}from"../../internal/scale.js";const f=/*@__PURE__*/r.createContext({size:"md",last:!1,position:null}),x={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},b={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const v=["chevron","arrow","slash","dot"];export const MPBreadcrumb=/*@__PURE__*/r.forwardRef(function({size:t="md",color:u="primary",separator:p="chevron",maxItems:b,itemsBeforeCollapse:g=1,itemsAfterCollapse:N=1,expandable:j=!0,label:y,expandLabel:k,locale:z,structuredData:B=!1,className:C,style:w,children:P,...M},I){const L=m(d,c(z)),[S,_]=r.useState(!1),A=r.Children.toArray(P).filter(r.isValidElement),E=A.length,F=A.some(e=>!0===e.props.current),R=!S&&!B&&void 0!==b&&E>Math.max(b,1)&&E-g-N>1?[...A.slice(0,Math.max(0,g)),null,...A.slice(E-Math.max(0,N))]:A,T="string"==typeof(D=p)&&v.includes(D)?function(n){switch(n){case"chevron":return e(o,{icon:a,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(o,{icon:i,size:"1em",className:"rtl:rotate-180"});case"slash":return e("span",{"aria-hidden":"true",children:"/"});case"dot":return e("span",{"aria-hidden":"true",children:"·"});default:return null}}(p):p;var D;const V=r.useMemo(()=>Array.from({length:R.length},(e,n)=>({size:t,last:!F&&n===R.length-1,position:B?n+1:null})),[t,F,R.length,B]),$=["rounded-mp-xs text-mp-on-surface-variant inline-flex items-center px-0.5","appearance-none border-0 bg-transparent font-[inherit]","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",j?["cursor-pointer hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" ");return e("nav",{ref:I,"aria-label":y??L.label,"data-mp-size":t,className:["mp-breadcrumb flex",h[t],C??""].filter(Boolean).join(" "),style:{...l(u),...w},...M,children:e("ol",{role:"list",itemScope:B||void 0,itemType:B?"https://schema.org/BreadcrumbList":void 0,className:`flex list-none flex-wrap items-center p-0 ${x[t]}`,children:R.map((t,i)=>n(r.Fragment,{children:[i>0?e("li",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center select-none",children:T}):null,t?e(f.Provider,{value:V[i],children:t}):e("li",{className:"flex shrink-0 items-center",children:j?e("button",{type:"button",className:$,"aria-label":k??L.expand,onClick:()=>_(!0),children:e(o,{icon:s,size:"1.1em"})}):e("span",{className:$,"aria-hidden":"true",children:e(o,{icon:s,size:"1.1em"})})})]},t?t.key??i:"fold"))})})});export const MPBreadcrumbItem=/*@__PURE__*/r.forwardRef(function({href:o,onClick:i,startIcon:a,endIcon:s,current:l,disabled:c=!1,className:m,children:d,...h},x){const{size:v,last:g,position:N}=r.useContext(f),j=l??g,y=Boolean(o||i)&&!j&&!c,k=null!==N,z=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",u[v],b[v],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",c?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface font-medium":y?["text-mp-on-surface-variant cursor-pointer","hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):"text-mp-on-surface-variant"].filter(Boolean).join(" "),B=n(t,{children:[p(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a}):null,e("span",{className:"truncate",itemProp:k?"name":void 0,children:d}),p(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]});return n("li",{ref:x,itemProp:k?"itemListElement":void 0,itemScope:k||void 0,itemType:k?"https://schema.org/ListItem":void 0,className:["flex min-w-0 items-center",m??""].filter(Boolean).join(" "),...h,children:[k?e("meta",{itemProp:"position",content:String(N)}):null,y&&o?e("a",{href:o,itemProp:k?"item":void 0,className:z,onClick:i,children:B}):y?e("button",{type:"button",className:z,onClick:i,children:B}):e("span",{className:z,"aria-current":j?"page":void 0,"aria-disabled":c||void 0,children:B})]})});
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as r from"react";import{MPIcon as o}from"../icon/MPIcon.js";import{ArrowRightIcon as i,ChevronRightIcon as a,MoreIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{BREADCRUMB as d}from"../../internal/messages/breadcrumb.js";import{CONTROL_GAP as u,hasContent as p,PROSE_TEXT as f}from"../../internal/scale.js";import{useMPColor as h,useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/r.createContext({size:"md",last:!1,position:null}),v={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},g={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const N=["chevron","arrow","slash","dot"];export const MPBreadcrumb=/*@__PURE__*/r.forwardRef(function({size:t,color:u,separator:p="chevron",maxItems:g,itemsBeforeCollapse:j=1,itemsAfterCollapse:y=1,expandable:k=!0,label:z,expandLabel:B,locale:C,structuredData:w=!1,className:P,style:M,children:I,...L},S){const _=x(t),A=h(u),E=m(d,c(C)),[F,R]=r.useState(!1),T=r.Children.toArray(I).filter(r.isValidElement),D=T.length,V=T.some(e=>!0===e.props.current),$=!F&&!w&&void 0!==g&&D>Math.max(g,1)&&D-j-y>1?[...T.slice(0,Math.max(0,j)),null,...T.slice(D-Math.max(0,y))]:T,q="string"==typeof(G=p)&&N.includes(G)?function(n){switch(n){case"chevron":return e(o,{icon:a,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(o,{icon:i,size:"1em",className:"rtl:rotate-180"});case"slash":return e("span",{"aria-hidden":"true",children:"/"});case"dot":return e("span",{"aria-hidden":"true",children:"·"});default:return null}}(p):p;var G;const H=r.useMemo(()=>Array.from({length:$.length},(e,n)=>({size:_,last:!V&&n===$.length-1,position:w?n+1:null})),[_,V,$.length,w]),J=["rounded-mp-xs text-mp-on-surface-variant inline-flex items-center px-0.5","appearance-none border-0 bg-transparent font-[inherit]","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",k?["cursor-pointer hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" ");return e("nav",{ref:S,"aria-label":z??E.label,"data-mp-size":_,className:["mp-breadcrumb flex",f[_],P??""].filter(Boolean).join(" "),style:{...l(A),...M},...L,children:e("ol",{role:"list",itemScope:w||void 0,itemType:w?"https://schema.org/BreadcrumbList":void 0,className:`flex list-none flex-wrap items-center p-0 ${v[_]}`,children:$.map((t,i)=>n(r.Fragment,{children:[i>0?e("li",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center select-none",children:q}):null,t?e(b.Provider,{value:H[i],children:t}):e("li",{className:"flex shrink-0 items-center",children:k?e("button",{type:"button",className:J,"aria-label":B??E.expand,onClick:()=>R(!0),children:e(o,{icon:s,size:"1.1em"})}):e("span",{className:J,"aria-hidden":"true",children:e(o,{icon:s,size:"1.1em"})})})]},t?t.key??i:"fold"))})})});export const MPBreadcrumbItem=/*@__PURE__*/r.forwardRef(function({href:o,onClick:i,startIcon:a,endIcon:s,current:l,disabled:c=!1,className:m,children:d,...f},h){const{size:x,last:v,position:N}=r.useContext(b),j=l??v,y=Boolean(o||i)&&!j&&!c,k=null!==N,z=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",u[x],g[x],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",c?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface font-medium":y?["text-mp-on-surface-variant cursor-pointer","hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):"text-mp-on-surface-variant"].filter(Boolean).join(" "),B=n(t,{children:[p(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a}):null,e("span",{className:"truncate",itemProp:k?"name":void 0,children:d}),p(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]});return n("li",{ref:h,itemProp:k?"itemListElement":void 0,itemScope:k||void 0,itemType:k?"https://schema.org/ListItem":void 0,className:["flex min-w-0 items-center",m??""].filter(Boolean).join(" "),...f,children:[k?e("meta",{itemProp:"position",content:String(N)}):null,y&&o?e("a",{href:o,itemProp:k?"item":void 0,className:z,onClick:i,children:B}):y?e("button",{type:"button",className:z,onClick:i,children:B}):e("span",{className:z,"aria-current":j?"page":void 0,"aria-disabled":c||void 0,children:B})]})});

package/dist/components/button/MPButton.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type ButtonProps as BaseUIButtonProps } from '@base-ui/react/button';
 import type { MPColor, MPStyleProps, MPVariant } from '../../types.js';
 export interface MPButtonProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
     /**
@@ -44,6 +45,43 @@ export interface MPButtonProps extends MPStyleProps, Omit<React.ComponentPropsWi
      * @default 'button'
      */
     type?: 'button' | 'submit' | 'reset';
+    /**
+     * Renders something other than a `<button>` while keeping every part of the
+     * surface. Base UI's own escape hatch, so it behaves here exactly as it does
+     * on every Base UI primitive.
+     *
+     * **A link wearing a button is the reason this exists**, and it is three props
+     * rather than one:
+     *
+     * ```tsx
+     * <MPButton render={<a href="/pricing" />} nativeButton={false} role="link">
+     *   Pricing
+     * </MPButton>
+     * ```
+     *
+     * `nativeButton={false}` tells Base UI the element is not a `<button>`, and
+     * `role` puts back the one thing it then assumes — see `nativeButton`. Without
+     * the `role` the anchor is announced as a button, which is exactly the lie the
+     * "no `href`" rule below exists to prevent.
+     */
+    render?: BaseUIButtonProps['render'];
+    /**
+     * Whether `render` produces a real `<button>`.
+     *
+     * Only meaningful alongside `render`, and then it is not optional: an `<a>` has
+     * no `disabled`, is not in a form's submit chain, and is activated by Enter but
+     * not by Space, so Base UI has to be told which set of behaviours to supply. It
+     * says so in the console when the two disagree, in either direction.
+     *
+     * What it also does is assume the element is *acting* as a button, and give it
+     * `role="button"` and a tab stop to say so. For an anchor that is one assumption
+     * too many — a link announced as a button is a link a reader will not expect to
+     * open in a new tab — so pass `role="link"` alongside it. Anything else that is
+     * genuinely a button (a `<div>`, a `<span>`) wants the role Base UI supplies and
+     * should leave it alone.
+     * @default true
+     */
+    nativeButton?: boolean;
     children?: React.ReactNode;
 }
 /**
@@ -64,9 +102,17 @@ export interface MPButtonProps extends MPStyleProps, Omit<React.ComponentPropsWi
  *
  * **No `href`.** A button that navigates is a link, and the difference is not
  * cosmetic: a link is announced as one, opens in a new tab on the middle button,
- * and shows its destination in the status bar. Wrap an `<a>` in the styling, or
- * pass `render={<a href="…" />}` — Base UI's own escape hatch — rather than
- * teaching the button to lie about what it is.
+ * and shows its destination in the status bar. So a link that looks like a button
+ * is written as a link:
+ *
+ * ```tsx
+ * <MPButton render={<a href="/pricing" />} nativeButton={false} role="link">
+ *   Pricing
+ * </MPButton>
+ * ```
+ *
+ * All three parts matter, and `render`'s own note says why. Teaching the button
+ * to take an `href` instead would be teaching it to lie about what it is.
  *
  * **No ripple.** MD3 dropped it: the state layer below is what replaced it, and
  * it says the same thing without an animation that has to finish before the

package/dist/components/button/MPButton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{Button as n}from"@base-ui/react/button";import{MPIcon as r}from"../icon/MPIcon.js";import{SpinnerIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{MPButtonGroupContext as s}from"../../internal/button-group.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{CONTROL_GAP as d,CONTROL_HEIGHT as u,CONTROL_ICON as f,CONTROL_PAD_X as b,CONTROL_SQUARE as g,CONTROL_TEXT as x,hasContent as v}from"../../internal/scale.js";const h={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 hover:shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},j={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 border bg-transparent text-mp-on-surface/38",text:"bg-transparent text-mp-on-surface/38"};export const MPButton=/*@__PURE__*/t.forwardRef(function({variant:w,size:y,color:_,disabled:k,startIcon:z,endIcon:B,loading:C=!1,loadingLabel:I,locale:N,fullWidth:P=!1,type:L="button",className:M,style:D,children:R,onClick:S,...W},$){const q=l(N),A=c(m,q),E=t.useContext(s),F=w??E?.variant??"filled",G=y??E?.size??"md",H=_??E?.color??"primary",J=k??E?.disabled??!1,K=C||v(z),O=!(v(R)||K&&v(B));return o(n,{ref:$,type:L,disabled:J,"aria-busy":C||void 0,"aria-disabled":C||void 0,"data-mp-size":G,"data-mp-variant":F,"data-loading":C||void 0,className:["mp-button group relative inline-flex shrink-0 items-center justify-center","rounded-mp-full box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",u[G],x[G],d[G],O?`${g[G]} px-0`:b[G],J?j[F]:h[F],J?"cursor-default":"",C?"cursor-progress":"",P?"w-full":"",M??""].filter(Boolean).join(" "),style:{...i(H),...D},onClick:e=>{if(C)return e.preventDefault(),void e.stopPropagation();S?.(e)},...W,children:[J?null:e(p,{}),C?e(r,{icon:a,size:f[G],label:I??A.loading,className:"animate-spin"}):z,R,B]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Button as n}from"@base-ui/react/button";import{MPIcon as r}from"../icon/MPIcon.js";import{SpinnerIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{MPButtonGroupContext as s}from"../../internal/button-group.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{CONTROL_GAP as d,CONTROL_HEIGHT as u,CONTROL_ICON as f,CONTROL_PAD_X as b,CONTROL_SQUARE as g,CONTROL_TEXT as x,hasContent as v}from"../../internal/scale.js";import{useMPColor as j,useMPSize as h}from"../../internal/config.js";const w={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 hover:shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},y={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 border bg-transparent text-mp-on-surface/38",text:"bg-transparent text-mp-on-surface/38"};export const MPButton=/*@__PURE__*/o.forwardRef(function({variant:_,size:B,color:k,disabled:z,startIcon:C,endIcon:I,loading:N=!1,loadingLabel:P,locale:L,fullWidth:M=!1,type:D="button",render:R,nativeButton:S=!0,className:W,style:$,children:q,onClick:A,...E},F){const G=l(L),H=c(m,G),J=o.useContext(s),K=_??J?.variant??"filled",O=h(B??J?.size),Q=j(k??J?.color),T=z??J?.disabled??!1,U=N||v(C),V=!(v(q)||U&&v(I));return t(n,{ref:F,render:R,nativeButton:S,type:S?D:void 0,disabled:T,"aria-busy":N||void 0,"aria-disabled":N||void 0,"data-mp-size":O,"data-mp-variant":K,"data-loading":N||void 0,className:["mp-button group relative inline-flex shrink-0 items-center justify-center","rounded-mp-full box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",u[O],x[O],d[O],V?`${g[O]} px-0`:b[O],T?y[K]:w[K],T?"cursor-default":"",N?"cursor-progress":"",M?"w-full":"",W??""].filter(Boolean).join(" "),style:{...i(Q),...$},onClick:e=>{if(N)return e.preventDefault(),void e.stopPropagation();A?.(e)},...E,children:[T?null:e(p,{}),N?e(r,{icon:a,size:f[O],label:P??H.loading,className:"animate-spin"}):C,q,I]})});

package/dist/components/calendar/MPCalendar.d.ts

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { type MPDatePrecision } from '../../internal/date.js';
+import type { MPPickerLabels } from '../../internal/Calendar.js';
+import type { MPColor, MPSize, MPVariant, MPWeekday } from '../../types.js';
+export type { MPDatePrecision };
+export interface MPCalendarProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect' | 'defaultValue' | 'color'> {
+    /** The chosen day. Use with `onValueChange` for a controlled calendar. */
+    value?: Date | null;
+    /** The day the calendar starts on, for an uncontrolled one. */
+    defaultValue?: Date | null;
+    /**
+     * Called with the newly chosen day — a `Date`, not an event.
+     *
+     * Never `null`, unlike `MPDatePicker`'s: there is no × on a calendar and
+     * pressing the chosen day again does not unchoose it. A control that emptied
+     * itself on a second press would lose a value to a double-click.
+     */
+    onValueChange?: (value: Date) => void;
+    /**
+     * The month on screen. Use with `onMonthChange` to drive the header yourself —
+     * two calendars kept a month apart, a "jump to December" button of your own.
+     */
+    month?: Date;
+    /**
+     * Which month it opens on.
+     * @default the month of `value`, or this month
+     */
+    defaultMonth?: Date;
+    /** Called when the header steps, or when choosing a month or a year moves it. */
+    onMonthChange?: (month: Date) => void;
+    /**
+     * Which unit the calendar stops at, and therefore what a press answers with.
+     *
+     * `'month'` never draws a day grid and answers with the 1st of the month
+     * pressed; `'year'` stops at the grid of years and answers with 1 January. The
+     * finer views are absent rather than refused — there is no way through a month
+     * calendar to a day.
+     * @default 'day'
+     */
+    precision?: MPDatePrecision;
+    /** The earliest day that may be chosen. Day-granular — the time is ignored. */
+    minDate?: Date | null;
+    /** The latest day that may be chosen. */
+    maxDate?: Date | null;
+    /**
+     * Blocks individual days that are inside the range but still not available —
+     * weekends, holidays, a room already booked. A blocked day is still drawn.
+     *
+     * Asked about days and only about days, so a calendar whose `precision` is a
+     * month or a year never consults it.
+     */
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * A BCP 47 tag deciding the month and weekday names, the order of the header's
+     * two buttons, and which day the week starts on. Falls back to the nearest
+     * `MPLocaleProvider`, then to the platform's own.
+     */
+    locale?: string;
+    /** Which day the week starts on. Defaults to whatever the locale says. */
+    weekStartsOn?: MPWeekday;
+    /**
+     * Draws the leading and trailing days belonging to the neighbouring months.
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /**
+     * Whether the header offers its two steppers.
+     * @default true
+     */
+    showPreviousButton?: boolean;
+    /** @default true */
+    showNextButton?: boolean;
+    /**
+     * Takes the focus on mount.
+     *
+     * `false` here and `true` inside a picker, which is the whole difference
+     * between the two: a popup that has just opened is the reader's current
+     * business, and a calendar sitting in a page is not. One that grabbed the
+     * focus on mount would move the caret out of whatever was being typed above
+     * it.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * How much surface the calendar paints under itself.
+     *
+     * `'text'` — nothing — is the default, and it is the one that makes the
+     * component droppable. A standalone calendar almost always lands somewhere
+     * that is already a surface: an `MPCard`, a panel, a popover of your own. A
+     * default that painted a second one would be a box inside a box in the common
+     * case, and the only way out of a painted surface is an override.
+     * @default 'text'
+     */
+    variant?: MPVariant;
+    /**
+     * The cell size and the type scale. The same ladder every control is on, so a
+     * calendar beside a `size="sm"` form is drawn at the same weight.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** Which accent family the chosen day is painted in. @default 'primary' */
+    color?: MPColor;
+    /**
+     * Overrides for the words the calendar says on its own behalf — "Previous
+     * month", "Choose a year". Whatever is not given falls back to the translation
+     * for `locale`, and then to English.
+     */
+    labels?: Partial<MPPickerLabels>;
+    /**
+     * Identifies the value when a form is submitted, as `YYYY-MM-DD` — or as
+     * `YYYY-MM` or `YYYY` when `precision` asks for less.
+     */
+    name?: string;
+}
+/**
+ * A month on the page, rather than in a popup.
+ *
+ * The same grid `MPDatePicker` opens, and it was always the larger half of that
+ * component: three views on one footprint, a roving tab stop, arrow keys that
+ * step the month when they run off an edge, and a header where the month name
+ * and the year are each a button into a grid of their own. What it did not have
+ * was a way to be used without a trigger in front of it.
+ *
+ * Which is a real shape. A booking page shows the month it is talking about
+ * rather than asking the reader to open something to see it; a dashboard puts
+ * the calendar beside the list it filters; a form with room for it has no reason
+ * to hide it behind a field. In every one of those the popup is the part that is
+ * in the way.
+ *
+ * ```tsx
+ * const [day, setDay] = useState(new Date());
+ *
+ * <MPCalendar value={day} onValueChange={setDay} />;
+ * ```
+ *
+ * ## It paints nothing by default
+ *
+ * `variant` is `'text'`, so what arrives is the grid and the header and no
+ * surface under them — see the prop for why. Give it `'outlined'` or
+ * `'elevated'` to have it stand on its own.
+ *
+ * ## The month on screen is its own state
+ *
+ * And it stays where the reader left it. `MPDatePicker` puts the calendar back
+ * on the chosen day every time the popup opens, because opening is an event that
+ * says "start again"; a calendar that is always on screen has no such moment,
+ * and one that snapped back to July while somebody was reading September would
+ * be undoing a navigation they meant.
+ *
+ * `month` and `onMonthChange` are there for the cases that do want to drive it.
+ *
+ * ## What it is not
+ *
+ * Not a range calendar — two ends is `MPDateRangePicker`'s question, and the
+ * band it draws between them needs a preview of the half-chosen range that a
+ * single value has no room for. Not an event calendar either: there is no
+ * per-cell rendering hook, because a cell that could hold arbitrary content
+ * stops being a 40dp target and starts being a layout.
+ */
+export declare const MPCalendar: React.ForwardRefExoticComponent<MPCalendarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/calendar/MPCalendar.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Calendar as a}from"../../internal/Calendar.js";import{accentSlots as n}from"../../internal/accent.js";import{POPUP_PAD as s}from"../../internal/Picker.js";import{useMPLocale as r,useMPMessages as i}from"../../internal/locale.js";import{PICKER as l}from"../../internal/messages/picker.js";import{CONTAINER_SURFACE as m}from"../../internal/surface.js";import{isValidDate as u,localeWeekStart as c,mergeDateAndTime as d,startOfMonth as f,startOfUnit as p,toISODate as h,toISOMonth as x,toISOYear as j,today as v}from"../../internal/date.js";import{useMPColor as D,useMPSize as w}from"../../internal/config.js";const y={day:h,month:x,year:j};export const MPCalendar=/*@__PURE__*/o.forwardRef(function({value:h,defaultValue:x,onValueChange:j,month:g,defaultMonth:B,onMonthChange:C,precision:S="day",minDate:b,maxDate:k,shouldDisableDate:M,locale:N,weekStartsOn:O,showOutsideDays:P=!0,showPreviousButton:z=!0,showNextButton:F=!0,autoFocus:V=!1,variant:R="text",size:$,color:q,labels:A,name:E,className:G,style:H,...I},J){const K=w($),L=D(q),Q=r(N),T=i(l,Q,A),U=O??c(Q),[W,X]=o.useState(x??null),Y=void 0!==h?h:W,[Z,_]=o.useState(()=>{const e=h??x;return f(u(e)?e:B??v())}),ee=void 0!==g?f(g):Z,te=e=>{void 0===g&&_(e),C?.(e)};return t("div",{...I,ref:J,"data-mp-size":K,style:{...n(L),...H},className:["mp-calendar-root inline-flex flex-col","text"===R?"":`rounded-mp-md ${s[K]}`,m[R],"text"===R?"":"text-mp-on-surface",G??""].filter(Boolean).join(" "),children:[e(a,{size:K,color:L,locale:Q,weekStartsOn:U,month:ee,onMonthChange:te,selected:[Y],onSelect:e=>{const t=p(e,S),o=u(Y)?d(t,Y):t;void 0===h&&X(o),j?.(o),te(f(o))},minDate:b,maxDate:k,shouldDisableDate:M,showOutsideDays:P,showPreviousButton:z,showNextButton:F,precision:S,labels:T,autoFocus:V}),E?e("input",{type:"hidden",name:E,value:u(Y)?y[S](Y):""}):null]})});

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

@@ -0,0 +1,2 @@
+export { MPCalendar } from './MPCalendar.js';
+export type { MPCalendarProps } from './MPCalendar.js';

package/dist/components/calendar/index.js

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

package/dist/components/card/MPCard.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l,Fragment as a}from"react/jsx-runtime";import*as r from"react";import{MPBox as n}from"../box/MPBox.js";import{hasContent as i,META_TEXT as o,PROSE_TEXT as t,SHEET_GAP as s,SHEET_PAD_X as c,SHEET_PAD_Y as d,SHEET_TITLE as m}from"../../internal/scale.js";export const MPCard=/*@__PURE__*/r.forwardRef(function({size:r="md",title:f,subtitle:u,headerAction:p,media:x,footer:h,dividers:_=!1,className:v,children:N,...j},w){const b=c[r],k=d[r],$=_?`${b} ${k}`:b,g=i(f)||i(u)||i(p),y=i(x),B=[g?{key:"header",className:"mp-card__header flex items-start gap-3",content:l(a,{children:[i(f)||i(u)?l("div",{className:"flex min-w-0 flex-1 flex-col",children:[i(f)?e("div",{className:`mp-card__title ${m[r]}`,children:f}):null,i(u)?e("div",{className:`text-mp-on-surface-variant ${o}`,children:u}):null]}):null,i(p)?e("div",{className:"ms-auto shrink-0",children:p}):null]})}:null,i(N)?{key:"content",className:`mp-card__body min-w-0 ${t[r]}`,content:N}:null,i(h)?{key:"footer",className:"mp-card__footer flex flex-wrap items-center gap-2",content:h}:null].filter(e=>null!==e);return l(n,{ref:w,size:r,padded:!1,className:["mp-card flex flex-col",y?"overflow-hidden":"",v??""].filter(Boolean).join(" "),...j,children:[y?e("div",{className:"mp-card__media [&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:x}):null,B.length>0?e("div",{className:["flex min-w-0 flex-col",_?"":`${k} ${s[r]}`].filter(Boolean).join(" "),children:B.map((l,a)=>e("div",{className:[$,l.className,_&&a>0?"border-mp-outline-variant border-t":""].filter(Boolean).join(" "),children:l.content},l.key))}):null]})});
+import{jsx as e,jsxs as l,Fragment as a}from"react/jsx-runtime";import*as r from"react";import{MPBox as n}from"../box/MPBox.js";import{hasContent as i,META_TEXT as o,PROSE_TEXT as t,SHEET_GAP as s,SHEET_PAD_X as c,SHEET_PAD_Y as m,SHEET_TITLE as d}from"../../internal/scale.js";import{useMPSize as f}from"../../internal/config.js";export const MPCard=/*@__PURE__*/r.forwardRef(function({size:r,title:p,subtitle:u,headerAction:x,media:h,footer:_,dividers:v=!1,className:N,children:j,...w},b){const g=f(r),k=c[g],$=m[g],y=v?`${k} ${$}`:k,B=i(p)||i(u)||i(x),z=i(h),M=[B?{key:"header",className:"mp-card__header flex items-start gap-3",content:l(a,{children:[i(p)||i(u)?l("div",{className:"flex min-w-0 flex-1 flex-col",children:[i(p)?e("div",{className:`mp-card__title ${d[g]}`,children:p}):null,i(u)?e("div",{className:`text-mp-on-surface-variant ${o}`,children:u}):null]}):null,i(x)?e("div",{className:"ms-auto shrink-0",children:x}):null]})}:null,i(j)?{key:"content",className:`mp-card__body min-w-0 ${t[g]}`,content:j}:null,i(_)?{key:"footer",className:"mp-card__footer flex flex-wrap items-center gap-2",content:_}:null].filter(e=>null!==e);return l(n,{ref:b,size:g,padded:!1,className:["mp-card flex flex-col",z?"overflow-hidden":"",N??""].filter(Boolean).join(" "),...w,children:[z?e("div",{className:"mp-card__media [&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:h}):null,M.length>0?e("div",{className:["flex min-w-0 flex-col",v?"":`${$} ${s[g]}`].filter(Boolean).join(" "),children:M.map((l,a)=>e("div",{className:[y,l.className,v&&a>0?"border-mp-outline-variant border-t":""].filter(Boolean).join(" "),children:l.content},l.key))}):null]})});

package/dist/components/carousel/MPCarousel.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronLeftIcon as a,ChevronRightIcon as i}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{fillMessage as l}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as u}from"../../internal/locale.js";import{CAROUSEL as d}from"../../internal/messages/carousel.js";import{CONTROL_ICON as m}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";const h={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},b={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const MPCarousel=/*@__PURE__*/t.forwardRef(function({value:v,defaultValue:w=0,onValueChange:g,loop:x=!0,autoPlay:j=!1,interval:N=5e3,arrows:y=!0,indicators:M=!0,variant:k="outlined",size:R="md",color:C="primary",label:z,previousLabel:I,nextLabel:P,slideLabel:S,locale:L,className:E,style:T,children:$,...A},B){const F=u(d,c(L)),V=z??F.label,W=S??((e,r)=>l(F.slide,{index:String(e),total:String(r)})),q=t.Children.toArray($),_=q.length,[D,G]=t.useState(w),H=Math.min(Math.max(v??D,0),Math.max(_-1,0)),J=t.useRef(null),K=t.useRef([]),O=t.useRef(!1),Q=t.useRef(!1),U=t.useRef(!1),[X,Y]=t.useState(!1),[Z,ee]=t.useState(!1),re=X||Z,te=t.useRef(H),ne=t.useRef(g);te.current=H,ne.current=g;const oe=t.useCallback((e,r=!1)=>{if(0===_)return;const t=x?(e%_+_)%_:Math.min(Math.max(e,0),_-1);O.current=r,void 0===v&&G(t),t!==te.current&&ne.current?.(t)},[_,x,v]);t.useEffect(()=>{if(O.current)return void(O.current=!1);if(!Q.current)return void(Q.current=!0);K.current[H]?.scrollIntoView({block:"nearest",inline:"start"}),U.current=!0;const e=window.setTimeout(()=>{U.current=!1},700);return()=>window.clearTimeout(e)},[H]),t.useEffect(()=>{if(!j||re||_<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||oe(te.current+1)},N);return()=>window.clearInterval(e)},[j,re,_,N,oe]);const ae=t.useRef(0);t.useEffect(()=>()=>cancelAnimationFrame(ae.current),[]);const ie=H<=0,se=H>=_-1;return r("div",{ref:B,role:"region","aria-roledescription":"carousel","aria-label":V,"data-mp-size":R,"data-mp-variant":k,className:["mp-carousel flex w-full flex-col",E??""].filter(Boolean).join(" "),style:{...s(C),...T},onPointerEnter:()=>Y(!0),onPointerLeave:()=>Y(!1),onFocus:()=>ee(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||ee(!1)},...A,children:[r("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",f[k],"text-mp-on-surface"].join(" "),children:[e("div",{ref:J,tabIndex:0,role:"group","aria-label":V,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{ae.current||(ae.current=requestAnimationFrame(()=>{ae.current=0;const e=J.current;if(!e||0===e.clientWidth||U.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==te.current&&r>=0&&r<_&&oe(r,!0)}))},children:q.map((r,t)=>e("div",{ref:e=>{K.current[t]=e,K.current.length=_},role:"group","aria-roledescription":"slide","aria-label":W(t+1,_),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),y&&_>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${h[R]}`,children:[e(n,{variant:"filled",size:R,color:C,label:I??F.previous,disabled:!x&&ie,className:"pointer-events-auto",icon:e(o,{icon:a,size:m[R],className:"rtl:rotate-180"}),onClick:()=>oe(H-1)}),e("span",{className:"flex-1"}),e(n,{variant:"filled",size:R,color:C,label:P??F.next,disabled:!x&&se,className:"pointer-events-auto",icon:e(o,{icon:i,size:m[R],className:"rtl:rotate-180"}),onClick:()=>oe(H+1)})]}):null]}),M&&_>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${b[R].gap}`,children:q.map((r,t)=>e("button",{type:"button","aria-label":W(t+1,_),"aria-current":t===H?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",t===H?`${b[R].current} bg-(--_mp-accent)`:`${b[R].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>oe(t)},t))}):null,e("span",{className:p,"aria-live":j?"off":"polite",children:_>0?W(H+1,_):""})]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronLeftIcon as a,ChevronRightIcon as i}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{fillMessage as l}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as u}from"../../internal/locale.js";import{CAROUSEL as d}from"../../internal/messages/carousel.js";import{CONTROL_ICON as m}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";import{useMPColor as h,useMPSize as b}from"../../internal/config.js";const v={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},w={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const MPCarousel=/*@__PURE__*/t.forwardRef(function({value:g,defaultValue:x=0,onValueChange:j,loop:N=!0,autoPlay:y=!1,interval:M=5e3,arrows:k=!0,indicators:R=!0,variant:C="outlined",size:z,color:I,label:P,previousLabel:S,nextLabel:L,slideLabel:E,locale:T,className:$,style:A,children:B,...F},V){const W=b(z),q=h(I),_=u(d,c(T)),D=P??_.label,G=E??((e,r)=>l(_.slide,{index:String(e),total:String(r)})),H=t.Children.toArray(B),J=H.length,[K,O]=t.useState(x),Q=Math.min(Math.max(g??K,0),Math.max(J-1,0)),U=t.useRef(null),X=t.useRef([]),Y=t.useRef(!1),Z=t.useRef(!1),ee=t.useRef(!1),[re,te]=t.useState(!1),[ne,oe]=t.useState(!1),ae=re||ne,ie=t.useRef(Q),se=t.useRef(j);ie.current=Q,se.current=j;const le=t.useCallback((e,r=!1)=>{if(0===J)return;const t=N?(e%J+J)%J:Math.min(Math.max(e,0),J-1);Y.current=r,void 0===g&&O(t),t!==ie.current&&se.current?.(t)},[J,N,g]);t.useEffect(()=>{if(Y.current)return void(Y.current=!1);if(!Z.current)return void(Z.current=!0);X.current[Q]?.scrollIntoView({block:"nearest",inline:"start"}),ee.current=!0;const e=window.setTimeout(()=>{ee.current=!1},700);return()=>window.clearTimeout(e)},[Q]),t.useEffect(()=>{if(!y||ae||J<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||le(ie.current+1)},M);return()=>window.clearInterval(e)},[y,ae,J,M,le]);const ce=t.useRef(0);t.useEffect(()=>()=>cancelAnimationFrame(ce.current),[]);const ue=Q<=0,de=Q>=J-1;return r("div",{ref:V,role:"region","aria-roledescription":"carousel","aria-label":D,"data-mp-size":W,"data-mp-variant":C,className:["mp-carousel flex w-full flex-col",$??""].filter(Boolean).join(" "),style:{...s(q),...A},onPointerEnter:()=>te(!0),onPointerLeave:()=>te(!1),onFocus:()=>oe(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||oe(!1)},...F,children:[r("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",f[C],"text-mp-on-surface"].join(" "),children:[e("div",{ref:U,tabIndex:0,role:"group","aria-label":D,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{ce.current||(ce.current=requestAnimationFrame(()=>{ce.current=0;const e=U.current;if(!e||0===e.clientWidth||ee.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==ie.current&&r>=0&&r<J&&le(r,!0)}))},children:H.map((r,t)=>e("div",{ref:e=>{X.current[t]=e,X.current.length=J},role:"group","aria-roledescription":"slide","aria-label":G(t+1,J),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),k&&J>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${v[W]}`,children:[e(n,{variant:"filled",size:W,color:q,label:S??_.previous,disabled:!N&&ue,className:"pointer-events-auto",icon:e(o,{icon:a,size:m[W],className:"rtl:rotate-180"}),onClick:()=>le(Q-1)}),e("span",{className:"flex-1"}),e(n,{variant:"filled",size:W,color:q,label:L??_.next,disabled:!N&&de,className:"pointer-events-auto",icon:e(o,{icon:i,size:m[W],className:"rtl:rotate-180"}),onClick:()=>le(Q+1)})]}):null]}),R&&J>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${w[W].gap}`,children:H.map((r,t)=>e("button",{type:"button","aria-label":G(t+1,J),"aria-current":t===Q?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",t===Q?`${w[W].current} bg-(--_mp-accent)`:`${w[W].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>le(t)},t))}):null,e("span",{className:p,"aria-live":y?"off":"polite",children:J>0?G(Q+1,J):""})]})});