material-plus-ui 1.3.1 → 1.4.0

package/dist/components/sidebar/MPSidebarTrigger.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { type MPIconButtonProps } from '../icon-button/MPIconButton.js';
+import { type MPPageCollapse, type MPSidebarSide } from '../../internal/page-layout.js';
+export interface MPSidebarTriggerProps extends Omit<MPIconButtonProps, 'icon' | 'label'> {
+    /**
+     * Which of the layout's two sidebars it opens.
+     * @default 'start'
+     */
+    side?: MPSidebarSide;
+    /**
+     * The width below which the button appears — the same one the sidebar
+     * collapses at, since the button exists exactly while the column does not.
+     * Inherited from the [MPPageLayout](./page-layout), which is where it should
+     * be set.
+     */
+    collapseBelow?: MPPageCollapse;
+    /** The glyph. Three lines, unless something else is given. */
+    icon?: React.ReactNode;
+    /**
+     * What it does, in words. Defaults to "Open sidebar" / "Close sidebar" in
+     * `locale`, and it changes with the state because the button does.
+     */
+    label?: string;
+    /** Which language that word is in. Inherited from the layout. */
+    locale?: string;
+}
+/**
+ * The button that brings back an [MPSidebar](#mpsidebar) the window has become
+ * too narrow to hold.
+ *
+ * It is drawn only while that is true, and the "while" is a **media query**
+ * rather than a piece of state: the button carries a class that hides it from
+ * the breakpoint up. That matters more than it looks — a trigger whose presence
+ * depended on `matchMedia` would be missing from the markup a server sends and
+ * would pop into the header a moment after the page arrived, on every phone,
+ * every time.
+ *
+ * Put it in an [MPHeader](./header)'s `brand` slot, ahead of the mark, which is
+ * where thirty years of hamburgers have taught readers to look for it.
+ *
+ * It has to be inside an [MPPageLayout](./page-layout) to have something to
+ * open: outside one there is no sidebar it could be talking about, and it
+ * renders nothing at all rather than a button that does nothing.
+ */
+export declare const MPSidebarTrigger: React.ForwardRefExoticComponent<MPSidebarTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/sidebar/MPSidebarTrigger.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as o}from"react/jsx-runtime";import*as e from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MenuIcon as t}from"../../constants/icons.js";import{useMPLocale as a,useMPMessages as i}from"../../internal/locale.js";import{LAYOUT as s}from"../../internal/messages/layout.js";import{COLLAPSED_ONLY as l,MPPageLayoutContext as c}from"../../internal/page-layout.js";export const MPSidebarTrigger=/*@__PURE__*/e.forwardRef(function({side:m="start",collapseBelow:p,icon:f,label:u,locale:j,className:d,onClick:b,...g},x){const B=e.useContext(c),w=a(j??B.locale),C=i(s,w);if(!B.present)return null;const M=p??B.collapseBelow,P=B.open[m];return o(n,{ref:x,icon:f??o(r,{icon:t}),label:u??(P?C.closeSidebar:C.openSidebar),"aria-expanded":P,className:["mp-sidebar-trigger",l[M],d??""].filter(Boolean).join(" "),onClick:o=>{B.setOpen(m,!P),b?.(o)},...g})});

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

@@ -0,0 +1,4 @@
+export { MPSidebar } from './MPSidebar.js';
+export type { MPSidebarProps, MPSidebarSide } from './MPSidebar.js';
+export { MPSidebarTrigger } from './MPSidebarTrigger.js';
+export type { MPSidebarTriggerProps } from './MPSidebarTrigger.js';

package/dist/components/sidebar/index.js

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

package/dist/components/skeleton/MPSkeleton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{CONTROL_SQUARE as o}from"../../internal/scale.js";const a={xs:"h-3",sm:"h-3.5",md:"h-4",lg:"h-4",xl:"h-5.5"},n={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-1.5"},i={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},s="overflow-hidden bg-(--_mp-placeholder)";function t(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const MPSkeleton=/*@__PURE__*/r.forwardRef(function({shape:r="line",lines:m=1,size:d="md",color:p,width:c,height:h,animated:f=!0,label:u,render:x,className:g,style:w,...v},b){const j=f?"animate-pulse motion-reduce:animate-none":"",y="circle"===r?`rounded-mp-full shrink-0 ${o[d]}`:"rect"===r?`rounded-mp-md w-full ${void 0===h?i[d]:""}`:`rounded-mp-xs w-full ${a[d]}`,$=u?{role:"status","aria-busy":!0,"aria-label":u}:{"aria-hidden":!0},k="line"===r&&m>1;return l({render:x,ref:b,props:{"data-mp-size":d,className:(k?["mp-skeleton flex w-full flex-col",n[d],g??""]:["mp-skeleton",s,j,y,g??""]).filter(Boolean).join(" "),style:{"--_mp-placeholder":p?`var(--_mp-color-${p}-container)`:"var(--_mp-color-surface-container-highest)",width:t(c),height:k?void 0:t(h),...w},...$,...k?{children:Array.from({length:m},(r,l)=>e("div",{className:[s,j,"rounded-mp-xs",a[d],l===m-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...v}})});
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{CONTROL_SQUARE as o}from"../../internal/scale.js";import{cssLength as a}from"../../internal/length.js";const n={xs:"h-3",sm:"h-3.5",md:"h-4",lg:"h-4",xl:"h-5.5"},s={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-1.5"},i={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},t="overflow-hidden bg-(--_mp-placeholder)";export const MPSkeleton=/*@__PURE__*/r.forwardRef(function({shape:r="line",lines:m=1,size:d="md",color:p,width:h,height:c,animated:f=!0,label:u,render:g,className:x,style:w,...j},v){const b=f?"animate-pulse motion-reduce:animate-none":"",k="circle"===r?`rounded-mp-full shrink-0 ${o[d]}`:"rect"===r?`rounded-mp-md w-full ${void 0===c?i[d]:""}`:`rounded-mp-xs w-full ${n[d]}`,y=u?{role:"status","aria-busy":!0,"aria-label":u}:{"aria-hidden":!0},$="line"===r&&m>1;return l({render:g,ref:v,props:{"data-mp-size":d,className:($?["mp-skeleton flex w-full flex-col",s[d],x??""]:["mp-skeleton",t,b,k,x??""]).filter(Boolean).join(" "),style:{"--_mp-placeholder":p?`var(--_mp-color-${p}-container)`:"var(--_mp-color-surface-container-highest)",width:a(h),height:$?void 0:a(c),...w},...y,...$?{children:Array.from({length:m},(r,l)=>e("div",{className:[t,b,"rounded-mp-xs",n[d],l===m-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...j}})});

package/dist/components/slider/MPSlider.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{Slider as a}from"@base-ui/react/slider";import{accentSlots as t}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{META_TEXT as i,hasContent as o}from"../../internal/scale.js";const l={xs:{thickness:"h-0.5",cross:"w-0.5",handle:"size-3.5",strip:"h-8",stripCross:"w-8"},sm:{thickness:"h-[3px]",cross:"w-[3px]",handle:"size-4",strip:"h-9",stripCross:"w-9"},md:{thickness:"h-1",cross:"w-1",handle:"size-5",strip:"h-10",stripCross:"w-10"},lg:{thickness:"h-1.5",cross:"w-1.5",handle:"size-6",strip:"h-11",stripCross:"w-11"},xl:{thickness:"h-2",cross:"w-2",handle:"size-7",strip:"h-12",stripCross:"w-12"}},c=/*@__PURE__*/["duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),m={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=/*@__PURE__*/s.forwardRef(function({value:s,defaultValue:u,onValueChange:p,onValueCommitted:d,min:f=0,max:h=100,step:g=1,label:x,description:b,showValue:w=!1,format:j,orientation:y="horizontal",size:z="md",color:v="primary",disabled:C=!1,name:N,"aria-label":_},k){const V="vertical"===y,$=l[z],A=s??u,B=Array.isArray(A)?A.length:1;return r(a.Root,{ref:k,value:s,defaultValue:u,onValueChange:e=>p?.(e),onValueCommitted:e=>d?.(e),min:f,max:h,step:g,disabled:C,orientation:y,format:j,name:N,"data-mp-size":z,className:["mp-slider flex",V?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",C?"cursor-default":""].filter(Boolean).join(" "),style:t(v),children:[o(x)||w?r("div",{className:["flex w-full items-baseline gap-2",i].join(" "),children:[o(x)?e(a.Label,{className:C?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:x}):null,w?e(a.Value,{className:["ms-auto tabular-nums",C?"text-mp-on-surface/38":"text-mp-on-surface"].join(" ")}):null]}):null,e(a.Control,{className:["mp-slider__control group/rail flex touch-none items-center justify-center select-none",V?`${$.stripCross} h-40 flex-col`:`w-full ${$.strip}`,C?"":"cursor-pointer"].filter(Boolean).join(" "),children:r(a.Track,{className:["mp-slider__track rounded-mp-full relative",V?`${$.cross} h-full`:`${$.thickness} w-full`,C?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(a.Indicator,{className:["rounded-mp-full","[transition-property:inset-inline-start,width,bottom,height]",c,"group-data-dragging/rail:transition-none",C?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),Array.from({length:B},(r,s)=>e(a.Thumb,{index:s,"aria-label":o(x)?void 0:_,className:["mp-slider__handle group rounded-mp-full relative outline-none","[transition-property:inset-inline-start,bottom]",c,"data-dragging:transition-none",$.handle,C?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:C?null:e(n,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",m[z],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},s))]})}),o(b)?e("div",{className:[i,C?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:b}):null]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{Slider as a}from"@base-ui/react/slider";import{accentSlots as t}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{META_TEXT as i,hasContent as o}from"../../internal/scale.js";const l={xs:{thickness:"h-0.5",cross:"w-0.5",handle:"size-3.5",strip:"h-8",stripCross:"w-8"},sm:{thickness:"h-[3px]",cross:"w-[3px]",handle:"size-4",strip:"h-9",stripCross:"w-9"},md:{thickness:"h-1",cross:"w-1",handle:"size-5",strip:"h-10",stripCross:"w-10"},lg:{thickness:"h-1.5",cross:"w-1.5",handle:"size-6",strip:"h-11",stripCross:"w-11"},xl:{thickness:"h-2",cross:"w-2",handle:"size-7",strip:"h-12",stripCross:"w-12"}},c=/*@__PURE__*/["duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),m={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=/*@__PURE__*/s.forwardRef(function({value:d,defaultValue:u,onValueChange:p,onValueCommitted:f,min:h=0,max:g=100,step:x=1,label:b,description:w,showValue:j=!1,format:y,orientation:z="horizontal",size:v="md",color:C="primary",disabled:N=!1,name:_,"aria-label":k},V){const $="vertical"===z,A=l[v],B=s.useId(),I=d??u,L=Array.isArray(I)?I.length:1;return r(a.Root,{ref:V,value:d,defaultValue:u,onValueChange:e=>p?.(e),onValueCommitted:e=>f?.(e),min:h,max:g,step:x,disabled:N,orientation:z,format:y,name:_,"data-mp-size":v,className:["mp-slider flex",$?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",N?"cursor-default":""].filter(Boolean).join(" "),style:t(C),children:[o(b)||j?r("div",{className:["flex w-full items-baseline gap-2",i].join(" "),children:[o(b)?e(a.Label,{className:N?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:b}):null,j?e(a.Value,{className:["ms-auto tabular-nums",N?"text-mp-on-surface/38":"text-mp-on-surface"].join(" ")}):null]}):null,e(a.Control,{className:["mp-slider__control group/rail flex touch-none items-center justify-center select-none",$?`${A.stripCross} h-40 flex-col`:`w-full ${A.strip}`,N?"":"cursor-pointer"].filter(Boolean).join(" "),children:r(a.Track,{className:["mp-slider__track rounded-mp-full relative",$?`${A.cross} h-full`:`${A.thickness} w-full`,N?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(a.Indicator,{className:["rounded-mp-full","[transition-property:inset-inline-start,width,bottom,height]",c,"group-data-dragging/rail:transition-none",N?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),Array.from({length:L},(r,s)=>e(a.Thumb,{index:s,"aria-label":o(b)?void 0:k,"aria-describedby":o(w)?B:void 0,className:["mp-slider__handle group rounded-mp-full relative outline-none","[transition-property:inset-inline-start,bottom]",c,"data-dragging:transition-none",A.handle,N?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:N?null:e(n,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",m[v],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},s))]})}),o(w)?e("div",{id:B,className:[i,N?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:w}):null]})});

package/dist/components/snackbar/MPSnackbar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{MPIcon as i}from"../icon/MPIcon.js";import{CloseIcon as n}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{PORTAL_LAYER as p}from"../../internal/surface.js";const d={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},u=/*@__PURE__*/["transition-[opacity,translate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),f={top:"motion-safe:data-starting-style:-translate-y-full motion-safe:data-ending-style:-translate-y-full",bottom:"motion-safe:data-starting-style:translate-y-full motion-safe:data-ending-style:translate-y-full"},x={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},b={xs:"min-h-9 gap-1.5 py-1.5 ps-3 pe-1.5",sm:"min-h-10 gap-2 py-2 ps-3.5 pe-2",md:"min-h-12 gap-2 py-2.5 ps-4 pe-2",lg:"min-h-14 gap-3 py-3 ps-5 pe-2.5",xl:"min-h-16 gap-3 py-3.5 pe-3 ps-6"},y={xs:16,sm:18,md:20,lg:22,xl:24};function h(e){const{color:t,icon:o,message:s,actionLabel:i,onAction:n,...r}=e;return{...r,title:s,data:{color:t,icon:o},actionProps:void 0===i?void 0:{children:i,onClick:n}}}export function useMPSnackbar(){const e=s.useToastManager();return o.useMemo(()=>({add:t=>e.add(h(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,h(o)),promise:(t,o)=>e.promise(t,{loading:h(o.loading),success:e=>h("function"==typeof o.success?o.success(e):o.success),error:e=>h("function"==typeof o.error?o.error(e):o.error)}),snackbars:e.toasts}),[e])}function g({toast:o,color:a,size:l,showClose:m,closeLabel:p,swipeDirection:d,edge:h}){const g=o.data?.color??a,v=o.data?.icon,j={"--_mp-plate":g?`var(--_mp-color-${g}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":g?`var(--_mp-color-on-${g}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":g?`var(--_mp-color-${g})`:"var(--_mp-color-inverse-primary)",...g?r(g):null};return t(s.Root,{toast:o,swipeDirection:d,"data-mp-size":l,className:["mp-snackbar rounded-mp-xs shadow-mp-3 pointer-events-auto flex w-full items-center","bg-(--_mp-plate) text-(--_mp-on-plate) outline-none",b[l],x[l],u,f[h],"data-limited:hidden"].join(" "),style:j,children:[v?e("span",{className:"flex shrink-0 items-center",children:v}):null,e(s.Title,{render:e("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),e(s.Action,{className:["text-mp-label-large flex shrink-0 cursor-pointer items-center","rounded-mp-full h-8 px-3 text-(--_mp-plate-action)","transition-colors duration-(--mp-sys-motion-duration-short4)","hover:bg-(--_mp-plate-action)/8 focus-visible:bg-(--_mp-plate-action)/10","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ")}),m?t(s.Close,{"aria-label":p,className:["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer","items-center justify-center text-(--_mp-on-plate)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(c,{}),e(i,{icon:n,size:y[l]})]}):null]})}function v({position:t,width:o,...i}){const{toasts:n}=s.useToastManager(),r=t.startsWith("top")?"top":"bottom",a=["top"===r?"up":"down","left","right"];return e(s.Portal,{children:e(s.Viewport,{className:[p,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",d[t]].join(" "),children:n.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof o?`${o}px`:o},children:e(g,{toast:t,swipeDirection:a,edge:r,...i})},t.id))})})}export function MPSnackbarProvider({color:o,position:i="bottom-start",timeout:n=5e3,limit:r=3,width:c=600,size:p="md",showClose:d=!0,closeLabel:u,locale:f,children:x}){const b=a(f),y=l(m,b);return t(s.Provider,{timeout:n,limit:r,children:[x,e(v,{position:i,width:c,color:o,size:p,showClose:d,closeLabel:u??y.close})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{MPIcon as i}from"../icon/MPIcon.js";import{CloseIcon as n}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{cssLength as p}from"../../internal/length.js";import{PORTAL_LAYER as d}from"../../internal/surface.js";const u={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},f=/*@__PURE__*/["transition-[opacity,translate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),x={top:"motion-safe:data-starting-style:-translate-y-full motion-safe:data-ending-style:-translate-y-full",bottom:"motion-safe:data-starting-style:translate-y-full motion-safe:data-ending-style:translate-y-full"},b={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},y={xs:"min-h-9 gap-1.5 py-1.5 ps-3 pe-1.5",sm:"min-h-10 gap-2 py-2 ps-3.5 pe-2",md:"min-h-12 gap-2 py-2.5 ps-4 pe-2",lg:"min-h-14 gap-3 py-3 ps-5 pe-2.5",xl:"min-h-16 gap-3 py-3.5 pe-3 ps-6"},h={xs:16,sm:18,md:20,lg:22,xl:24};function g(e){const{color:t,icon:o,message:s,actionLabel:i,onAction:n,...r}=e;return{...r,title:s,data:{color:t,icon:o},actionProps:void 0===i?void 0:{children:i,onClick:n}}}export function useMPSnackbar(){const e=s.useToastManager();return o.useMemo(()=>({add:t=>e.add(g(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,g(o)),promise:(t,o)=>e.promise(t,{loading:g(o.loading),success:e=>g("function"==typeof o.success?o.success(e):o.success),error:e=>g("function"==typeof o.error?o.error(e):o.error)}),snackbars:e.toasts}),[e])}function v({toast:o,color:a,size:l,showClose:m,closeLabel:p,swipeDirection:d,edge:u}){const g=o.data?.color??a,v=o.data?.icon,j={"--_mp-plate":g?`var(--_mp-color-${g}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":g?`var(--_mp-color-on-${g}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":g?`var(--_mp-color-${g})`:"var(--_mp-color-inverse-primary)",...g?r(g):null};return t(s.Root,{toast:o,swipeDirection:d,"data-mp-size":l,className:["mp-snackbar rounded-mp-xs shadow-mp-3 pointer-events-auto flex w-full items-center","bg-(--_mp-plate) text-(--_mp-on-plate) outline-none",y[l],b[l],f,x[u],"data-limited:hidden"].join(" "),style:j,children:[v?e("span",{className:"flex shrink-0 items-center",children:v}):null,e(s.Title,{render:e("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),e(s.Action,{className:["text-mp-label-large flex shrink-0 cursor-pointer items-center","rounded-mp-full h-8 px-3 text-(--_mp-plate-action)","transition-colors duration-(--mp-sys-motion-duration-short4)","hover:bg-(--_mp-plate-action)/8 focus-visible:bg-(--_mp-plate-action)/10","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ")}),m?t(s.Close,{"aria-label":p,className:["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer","items-center justify-center text-(--_mp-on-plate)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(c,{}),e(i,{icon:n,size:h[l]})]}):null]})}function j({position:t,width:o,...i}){const{toasts:n}=s.useToastManager(),r=t.startsWith("top")?"top":"bottom",a=["top"===r?"up":"down","left","right"];return e(s.Portal,{children:e(s.Viewport,{className:[d,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",u[t]].join(" "),children:n.map(t=>e("div",{className:"w-full",style:{maxWidth:p(o)},children:e(v,{toast:t,swipeDirection:a,edge:r,...i})},t.id))})})}export function MPSnackbarProvider({color:o,position:i="bottom-start",timeout:n=5e3,limit:r=3,width:c=600,size:p="md",showClose:d=!0,closeLabel:u,locale:f,children:x}){const b=a(f),y=l(m,b);return t(s.Provider,{timeout:n,limit:r,children:[x,e(j,{position:i,width:c,color:o,size:p,showClose:d,closeLabel:u??y.close})]})}

package/dist/components/switch/MPSwitch.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Switch as n}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{MPIcon as s}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as c}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";const u={xs:{track:"h-5 w-8",thumb:"left-[5px] size-2.5 data-checked:left-[15px] data-checked:size-3.5",halo:"size-8",glyph:8},sm:{track:"h-6 w-10",thumb:"left-1.5 size-3 data-checked:left-[19px] data-checked:size-[18px]",halo:"size-9",glyph:10},md:{track:"h-8 w-13",thumb:"left-2 size-4 data-checked:left-6 data-checked:size-6",halo:"size-10",glyph:14},lg:{track:"h-9 w-15",thumb:"left-[9px] size-[18px] data-checked:left-7 data-checked:size-7",halo:"size-11",glyph:16},xl:{track:"h-10 w-17",thumb:"left-2.5 size-5 data-checked:left-[33px] data-checked:size-[30px]",halo:"size-12",glyph:18}};export const MPSwitch=/*@__PURE__*/r.forwardRef(function({checked:f,defaultChecked:g,onCheckedChange:k,label:b,description:x,errorMessage:y,icons:j=!1,labelPlacement:z="end",size:w="md",color:N="primary",required:_=!1,disabled:C=!1,readOnly:M=!1,name:v,id:P,fullWidth:R=!1},S){const W=p(y),q=W?"error":N,F=u[w],I=r.useId(),L=P??I,O=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:S,id:L,name:v,checked:f,defaultChecked:g,required:_,disabled:C,readOnly:M,onCheckedChange:e=>k?.(e),className:["mp-switch__track group relative box-border inline-flex shrink-0 p-0","rounded-mp-full appearance-none font-[inherit] outline-none","transition-[background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",F.track,C?["bg-mp-surface-container-highest inset-ring-2 inset-ring-mp-on-surface/12","cursor-default","data-checked:bg-mp-on-surface/12 data-checked:inset-ring-0"].join(" "):[M?"cursor-default":"cursor-pointer","bg-mp-surface-container-highest inset-ring-2",W?"inset-ring-mp-error":"inset-ring-mp-outline","data-checked:inset-ring-0 data-checked:bg-(--_mp-accent)"].join(" ")].join(" "),children:a(n.Thumb,{className:["mp-switch__thumb absolute top-1/2 flex -translate-y-1/2 items-center justify-center","rounded-full","transition-[left,width,height,background-color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",F.thumb,C?"bg-mp-on-surface/38 data-checked:bg-mp-surface-container-highest":[W?"bg-mp-error":"bg-mp-outline","data-checked:bg-(--_mp-on-accent)"].join(" ")].join(" "),children:[C?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",F.halo,"bg-mp-on-surface group-data-checked:bg-(--_mp-accent)"].join(" ")}),j?a(t,{children:[e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard opacity-0 group-data-checked:opacity-100",C?"text-mp-surface-container-highest":"text-(--_mp-accent)"].join(" "),children:e(s,{icon:o,size:F.glyph,strokeWidth:3})}),e("span",{className:["absolute inset-0 flex items-center justify-center","text-mp-surface-container-highest","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-checked:opacity-0"].join(" "),children:e(s,{icon:c,size:F.glyph,strokeWidth:3})})]}):null]})})}),T=p(b)||p(x)||W?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===z?"flex-1":""].filter(Boolean).join(" "),children:[p(b)?a(i.Label,{htmlFor:L,className:["leading-[1.4]",C?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[b,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(h,{description:x,errorMessage:y})]}):null;return e(i.Root,{className:["mp-switch align-top",R?"flex w-full":"inline-flex"].join(" "),disabled:C,invalid:W,"data-mp-size":w,style:l(q),children:e("div",{className:["flex w-full items-start gap-3",m[w]].join(" "),children:a(t,"start"===z?{children:[T,O]}:{children:[O,T]})})})});
+import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Switch as n}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{MPIcon as s}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as c}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";const u={xs:{track:"h-5 w-8",thumb:"start-[5px] size-2.5 data-checked:start-[15px] data-checked:size-3.5",halo:"size-8",glyph:8},sm:{track:"h-6 w-10",thumb:"start-1.5 size-3 data-checked:start-[19px] data-checked:size-[18px]",halo:"size-9",glyph:10},md:{track:"h-8 w-13",thumb:"start-2 size-4 data-checked:start-6 data-checked:size-6",halo:"size-10",glyph:14},lg:{track:"h-9 w-15",thumb:"start-[9px] size-[18px] data-checked:start-7 data-checked:size-7",halo:"size-11",glyph:16},xl:{track:"h-10 w-17",thumb:"start-2.5 size-5 data-checked:start-[33px] data-checked:size-[30px]",halo:"size-12",glyph:18}};export const MPSwitch=/*@__PURE__*/r.forwardRef(function({checked:f,defaultChecked:g,onCheckedChange:k,label:b,description:x,errorMessage:y,icons:j=!1,labelPlacement:z="end",size:w="md",color:N="primary",required:_=!1,disabled:C=!1,readOnly:M=!1,name:v,id:P,fullWidth:R=!1},S){const W=p(y),q=W?"error":N,F=u[w],I=r.useId(),L=P??I,O=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:S,id:L,name:v,checked:f,defaultChecked:g,required:_,disabled:C,readOnly:M,onCheckedChange:e=>k?.(e),className:["mp-switch__track group relative box-border inline-flex shrink-0 p-0","rounded-mp-full appearance-none font-[inherit] outline-none","transition-[background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",F.track,C?["bg-mp-surface-container-highest inset-ring-2 inset-ring-mp-on-surface/12","cursor-default","data-checked:bg-mp-on-surface/12 data-checked:inset-ring-0"].join(" "):[M?"cursor-default":"cursor-pointer","bg-mp-surface-container-highest inset-ring-2",W?"inset-ring-mp-error":"inset-ring-mp-outline","data-checked:inset-ring-0 data-checked:bg-(--_mp-accent)"].join(" ")].join(" "),children:a(n.Thumb,{className:["mp-switch__thumb absolute top-1/2 flex -translate-y-1/2 items-center justify-center","rounded-full","transition-[inset-inline-start,width,height,background-color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",F.thumb,C?"bg-mp-on-surface/38 data-checked:bg-mp-surface-container-highest":[W?"bg-mp-error":"bg-mp-outline","data-checked:bg-(--_mp-on-accent)"].join(" ")].join(" "),children:[C?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",F.halo,"bg-mp-on-surface group-data-checked:bg-(--_mp-accent)"].join(" ")}),j?a(t,{children:[e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard opacity-0 group-data-checked:opacity-100",C?"text-mp-surface-container-highest":"text-(--_mp-accent)"].join(" "),children:e(s,{icon:o,size:F.glyph,strokeWidth:3})}),e("span",{className:["absolute inset-0 flex items-center justify-center","text-mp-surface-container-highest","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-checked:opacity-0"].join(" "),children:e(s,{icon:c,size:F.glyph,strokeWidth:3})})]}):null]})})}),T=p(b)||p(x)||W?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===z?"flex-1":""].filter(Boolean).join(" "),children:[p(b)?a(i.Label,{htmlFor:L,className:["leading-[1.4]",C?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[b,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(h,{description:x,errorMessage:y})]}):null;return e(i.Root,{className:["mp-switch align-top",R?"flex w-full":"inline-flex"].join(" "),disabled:C,invalid:W,"data-mp-size":w,style:l(q),children:e("div",{className:["flex w-full items-start gap-3",m[w]].join(" "),children:a(t,"start"===z?{children:[T,O]}:{children:[O,T]})})})});

package/dist/components/table/MPTable.d.ts

@@ -32,14 +32,31 @@ export interface MPTableColumn<Row> {
     align?: MPTableAlign;
     /**
      * Renders the cell. Without it the cell is `row[key]` rendered as-is, which
-     * covers strings and numbers and nothing else.
+     * covers strings, numbers and elements.
+     *
+     * Anything else — a `Date`, a nested object, an array — draws an empty cell
+     * rather than being handed to React, which would throw. Reach for this the
+     * moment a column holds something that is not already text.
      */
     render?: (row: Row, index: number) => React.ReactNode;
 }
 export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
     /** The columns, in the order they appear. */
     headers: readonly MPTableColumn<Row>[];
-    /** The rows. */
+    /**
+     * The rows.   *
+     * ## How long a list this holds
+     *
+     * Every row is rendered, and there is no windowing. That is the right default
+     * — windowing costs a measured container, a scroll listener and a row height
+     * the component would have to decide for the caller — and it has a ceiling: a
+     * few hundred rows is nothing, a few thousand is a visible pause when the list
+     * opens, and past that the answer is a narrower list rather than a faster one.
+     *
+     * A list somebody has to scroll ten thousand rows of is a list that wanted a
+     * filter. Where it genuinely is that long, window it yourself and pass the
+     * slice.
+     */
     items: readonly Row[];
     /**
      * A stable key per row. Defaults to the row's index, which is fine for a
@@ -49,10 +66,15 @@ export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'
     /** Shown above the table, and read out as its accessible name. */
     caption?: React.ReactNode;
     /**
-     * What to show instead of rows when `items` is empty.
-     * @default 'No data'
+     * What to show instead of rows when `items` is empty. Defaults to the wording
+     * in `locale`.
      */
     empty?: React.ReactNode;
+    /**
+     * Which language that line is written in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /**
      * Tints every other row. Useful for a wide table where the eye has to track
      * across; noise on a narrow one.
@@ -117,4 +139,4 @@ export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'
  * than a ref on the scroll container is worth — and a caller who needs one can
  * put it on a `<div>` of their own around this.
  */
-export declare function MPTable<Row>({ headers, items, getRowKey, caption, empty, striped, hoverable, stickyHeader, onRowClick, variant, size, color, className, style, ...props }: MPTableProps<Row>): React.JSX.Element;
+export declare function MPTable<Row>({ headers, items, getRowKey, caption, empty, locale: localeProp, striped, hoverable, stickyHeader, onRowClick, variant, size, color, className, style, ...props }: MPTableProps<Row>): React.JSX.Element;

package/dist/components/table/MPTable.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{accentSlots as r}from"../../internal/accent.js";import{META_TEXT as o}from"../../internal/scale.js";import{CONTAINER_SURFACE as l}from"../../internal/surface.js";const a={xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},n={xs:"0.375rem",sm:"0.625rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},i={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},m={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},s=/*@__PURE__*/["[--_mp-row:transparent]","transition-[background-color] duration-(--mp-sys-motion-duration-short4)"].join(" ");export function MPTable({headers:c,items:d,getRowKey:p,caption:u,empty:x="No data",striped:y=!1,hoverable:f=!1,stickyHeader:v=!1,onRowClick:h,variant:b="outlined",size:g="md",color:w="primary",className:k,style:j,...N}){const _=a[g],$=n[g],C=Boolean(h),A=f||C,B={padding:`${$} ${_}`},z={...B,backgroundColor:"var(--_mp-color-surface-container)"},T={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"};return e("div",{"data-mp-size":g,"data-mp-variant":b,className:["mp-table rounded-mp-md overflow-x-auto",l[b],k??""].filter(Boolean).join(" "),style:{...r(w),...j},...N,children:t("table",{className:`text-mp-on-surface w-full text-start ${i[g]}`,style:{borderCollapse:"collapse"},children:[u?e("caption",{className:`text-mp-on-surface-variant ${o}`,style:{...B,textAlign:"start"},children:u}):null,e("colgroup",{children:c.map(t=>{return e("col",{style:void 0===t.width?void 0:{width:(r=t.width,"number"==typeof r?`${r}px`:r)}},t.key);var r})}),e("thead",{children:e("tr",{children:c.map(t=>e("th",{scope:"col",className:["text-mp-on-surface-variant whitespace-nowrap",m[g],v?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...z,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===d.length?e("tr",{className:s,style:T,children:e("td",{colSpan:c.length,className:"text-mp-on-surface-variant",style:{padding:`2rem ${_}`,textAlign:"center"},children:x})}):d.map((t,r)=>e("tr",{className:[s,y&&r%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",A?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",C?["cursor-pointer","outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" "),style:T,tabIndex:C?0:void 0,onClick:h?()=>h(t,r):void 0,onKeyDown:h?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),h(t,r))}:void 0,children:c.map(o=>e("td",{style:{...B,textAlign:o.align??"start"},children:o.render?o.render(t,r):t[o.key]},o.key))},p?p(t,r):r))})]})})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as o,useMPMessages as a}from"../../internal/locale.js";import{TABLE as n}from"../../internal/messages/table.js";import{cssLength as i}from"../../internal/length.js";import{META_TEXT as m}from"../../internal/scale.js";import{CONTAINER_SURFACE as s}from"../../internal/surface.js";const c={xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},d={xs:"0.375rem",sm:"0.625rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},p={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},u={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},x=/*@__PURE__*/["[--_mp-row:transparent]","transition-[background-color] duration-(--mp-sys-motion-duration-short4)"].join(" ");function y(e){if(null==e)return null;const t=typeof e;return"string"===t||"number"===t||"bigint"===t||"boolean"===t||r.isValidElement(e)?e:null}export function MPTable({headers:r,items:f,getRowKey:b,caption:g,empty:h,locale:v,striped:w=!1,hoverable:j=!1,stickyHeader:k=!1,onRowClick:N,variant:_="outlined",size:C="md",color:$="primary",className:A,style:B,...z}){const T=a(n,o(v)),D=c[C],E=d[C],K=Boolean(N),R=j||K,H={padding:`${E} ${D}`},I={...H,backgroundColor:"var(--_mp-color-surface-container)"},M={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"};return e("div",{"data-mp-size":C,"data-mp-variant":_,className:["mp-table rounded-mp-md overflow-x-auto",s[_],A??""].filter(Boolean).join(" "),style:{...l($),...B},...z,children:t("table",{className:`text-mp-on-surface w-full text-start ${p[C]}`,style:{borderCollapse:"collapse"},children:[g?e("caption",{className:`text-mp-on-surface-variant ${m}`,style:{...H,textAlign:"start"},children:g}):null,e("colgroup",{children:r.map(t=>e("col",{style:void 0===t.width?void 0:{width:i(t.width)}},t.key))}),e("thead",{children:e("tr",{children:r.map(t=>e("th",{scope:"col",className:["text-mp-on-surface-variant whitespace-nowrap",u[C],k?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...I,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===f.length?e("tr",{className:x,style:M,children:e("td",{colSpan:r.length,className:"text-mp-on-surface-variant",style:{padding:`2rem ${D}`,textAlign:"center"},children:h??T.empty})}):f.map((t,l)=>e("tr",{className:[x,w&&l%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",R?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",K?["cursor-pointer","outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" "),style:M,tabIndex:K?0:void 0,onClick:N?()=>N(t,l):void 0,onKeyDown:N?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),N(t,l))}:void 0,children:r.map(r=>e("td",{style:{...H,textAlign:r.align??"start"},children:r.render?r.render(t,l):y(t[r.key])},r.key))},b?b(t,l):l))})]})})}

package/dist/components/text-field/MPTextField.d.ts

@@ -110,8 +110,19 @@ export interface MPTextFieldProps extends MPStyleProps {
      */
     onChange?: (value: string) => void;
     /**
-     * Called when Enter is pressed. On a single-line field Enter is then
-     * swallowed, so a form is submitted once rather than also natively.
+     * Called when Enter is pressed.
+     *
+     * On a single-line field the key is then swallowed, so a surrounding form is
+     * submitted once rather than also natively.
+     *
+     * On a **multiline** field it is not, and both things happen: this fires *and*
+     * a newline is inserted. That is deliberate — the prop reports the keystroke
+     * rather than deciding what the field does with it — but it is worth knowing
+     * before wiring it to something that sends. `disableEnterKey` is what makes
+     * Enter a submission there and nothing else.
+     *
+     * Never called for the Enter that commits an IME composition: that keystroke
+     * belongs to the input method, not to the form.
      */
     onSubmit?: () => void;
     /**

package/dist/components/text-field/MPTextField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{MPIcon as a}from"../icon/MPIcon.js";import{MPFieldLabel as r,MPFieldOutline as l,useFloatingLabel as i}from"../../internal/FieldOutline.js";import{VisibilityIcon as s,VisibilityOffIcon as d}from"../../constants/icons.js";import{useMPLocale as p,useMPMessages as c}from"../../internal/locale.js";import{TEXT_FIELD as m}from"../../internal/messages/text-field.js";const u={xs:{padding:"px-2",control:"py-1.5",text:"text-mp-body-medium",icon:16},sm:{padding:"px-3",control:"py-2.5",text:"text-mp-body-medium",icon:18},md:{padding:"px-4",control:"py-4",text:"text-mp-body-large",icon:20},lg:{padding:"px-4",control:"py-5",text:"text-mp-body-large",icon:22},xl:{padding:"px-5",control:"py-6",text:"text-mp-body-large",icon:24}};export const MPTextField=/*@__PURE__*/o.forwardRef(function({value:f,name:x,type:b="text",placeholder:g,autoComplete:y,label:h,floatingLabel:v=!0,onChange:w,onFormReset:j,onSubmit:C,errorMessage:k="",required:z=!1,fullWidth:E=!1,readOnly:M=!1,autoFocus:N=!1,size:F="md",disabled:P=!1,disableEnterKey:S=!1,rows:q,maxLength:D,startIcon:L,resizable:R=!1,id:I,locale:O,passwordLabels:B},K){const U=p(O),_=c(m,U,B),T=o.useRef(null),[W,$]=o.useState(!1),[A,G]=o.useState(!1),[H,J]=o.useState(f),Q=o.useId(),V=I??Q,X=!!q,Y=k.length>0,Z=u[F],ee=A?H:f,{shrunk:te,focusProps:oe}=i({floating:v&&!!h,filled:ee.length>0,pinned:!!L}),ne=o.useCallback(e=>{T.current=e,"function"==typeof K?K(e):K&&(K.current=e)},[K]),ae=e=>{e.preventDefault()};return o.useEffect(()=>{A||J(f)},[f,A]),o.useEffect(()=>{N&&!window.matchMedia("(max-width: 599.95px)").matches&&T.current?.focus()},[]),t(n.Root,{className:["mp-text-field group relative",E?"w-full":"inline-block","align-top"].join(" "),disabled:P,invalid:Y,"data-mp-size":F,...oe,children:[t("div",{className:["relative flex w-full items-center gap-2",Z.padding,X?"py-2":""].filter(Boolean).join(" "),children:[e(l,{label:h,required:z,notched:te}),L?e("span",{className:"text-mp-on-surface-variant group-data-disabled:text-mp-on-surface/38 flex shrink-0 items-center",children:L}):null,e(n.Control,{render:X?e("textarea",{rows:q}):e("input",{}),id:V,name:x,type:X?void 0:W?"text":b,required:z,readOnly:M,disabled:P,autoComplete:y,placeholder:te?g:void 0,maxLength:D,value:ee,ref:ne,className:[`${Z.text} text-mp-on-surface w-full min-w-0 flex-1`,"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary",Z.control,X?"py-0":"",X&&R?"resize-y":"resize-none","group-data-disabled:text-mp-on-surface/38","placeholder:text-mp-on-surface-variant group-data-disabled:placeholder:text-mp-on-surface/38"].filter(Boolean).join(" "),onChange:e=>{j?.();const t=e.target.value;A&&J(t),w?.(t)},onCompositionStart:()=>{G(!0),J(f)},onCompositionUpdate:e=>{J(e.target.value)},onCompositionEnd:e=>{G(!1);const t=e.target.value;j?.(),w?.(t),J(t)},onKeyDown:e=>{if("Enter"===e.key){if(function(e){const t=e.nativeEvent;return t.isComposing||229===t.keyCode}(e))return;C?.(),X&&!S||e.preventDefault()}}}),"password"!==b||X?null:e("button",{type:"button","aria-label":W?_.hidePassword:_.showPassword,onClick:()=>$(e=>!e),onMouseDown:ae,onMouseUp:ae,disabled:P,className:["text-mp-on-surface-variant -mr-1 flex shrink-0 items-center justify-center","cursor-pointer appearance-none border-0 bg-transparent p-1 font-[inherit]","rounded-full outline-none","hover:text-mp-on-surface focus-visible:text-mp-primary","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:e(a,{icon:W?s:d,size:Z.icon})}),h?e(r,{size:F,label:h,required:z,htmlFor:V,shrunk:te,multiline:X}):null]}),Y?e(n.Error,{match:!0,className:["mp-text-field__support text-mp-body-small text-mp-error mt-1 block",Z.padding,"group-data-disabled:text-mp-on-surface/38"].join(" "),children:k}):null]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{MPIcon as r}from"../icon/MPIcon.js";import{MPFieldLabel as a,MPFieldOutline as i,useFloatingLabel as l}from"../../internal/FieldOutline.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{VisibilityIcon as d,VisibilityOffIcon as p}from"../../constants/icons.js";import{useMPLocale as u,useMPMessages as c}from"../../internal/locale.js";import{TEXT_FIELD as m}from"../../internal/messages/text-field.js";const f={xs:{padding:"px-2",control:"py-1.5",text:"text-mp-body-medium",icon:16},sm:{padding:"px-3",control:"py-2.5",text:"text-mp-body-medium",icon:18},md:{padding:"px-4",control:"py-4",text:"text-mp-body-large",icon:20},lg:{padding:"px-4",control:"py-5",text:"text-mp-body-large",icon:22},xl:{padding:"px-5",control:"py-6",text:"text-mp-body-large",icon:24}};export const MPTextField=/*@__PURE__*/o.forwardRef(function({value:x,name:b,type:g="text",placeholder:y,autoComplete:h,label:v,floatingLabel:w=!0,onChange:j,onFormReset:C,onSubmit:k,errorMessage:z="",required:M=!1,fullWidth:E=!1,readOnly:N=!1,autoFocus:S=!1,size:F="md",disabled:P=!1,disableEnterKey:q=!1,rows:D,maxLength:L,startIcon:R,resizable:I=!1,id:O,locale:B,passwordLabels:K},T){const U=u(B),$=c(m,U,K),_=o.useRef(null),[W,A]=o.useState(!1),[G,H]=o.useState(!1),[J,Q]=o.useState(x),V=o.useId(),X=O??V,Y=!!D,Z=z.length>0,ee=f[F],te=G?J:x,{shrunk:oe,focusProps:ne}=l({floating:w&&!!v,filled:te.length>0,pinned:!!R}),re=o.useCallback(e=>{_.current=e,"function"==typeof T?T(e):T&&(T.current=e)},[T]),ae=e=>{e.preventDefault()};return o.useEffect(()=>{G||Q(x)},[x,G]),o.useEffect(()=>{S&&!window.matchMedia("(max-width: 599.95px)").matches&&_.current?.focus()},[]),t(n.Root,{className:["mp-text-field group relative",E?"w-full":"inline-block","align-top"].join(" "),disabled:P,invalid:Z,"data-mp-size":F,...ne,children:[t("div",{className:["relative flex w-full items-center gap-2",ee.padding,Y?"py-2":""].filter(Boolean).join(" "),children:[e(i,{label:v,required:M,notched:oe}),R?e("span",{className:"text-mp-on-surface-variant group-data-disabled:text-mp-on-surface/38 flex shrink-0 items-center",children:R}):null,e(n.Control,{render:Y?e("textarea",{rows:D}):e("input",{}),id:X,name:b,type:Y?void 0:W?"text":g,required:M,readOnly:N,disabled:P,autoComplete:h,placeholder:oe?y:void 0,maxLength:L,value:te,ref:re,className:[`${ee.text} text-mp-on-surface w-full min-w-0 flex-1`,"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary",ee.control,Y?"py-0":"",Y&&I?"resize-y":"resize-none","group-data-disabled:text-mp-on-surface/38","placeholder:text-mp-on-surface-variant group-data-disabled:placeholder:text-mp-on-surface/38"].filter(Boolean).join(" "),onChange:e=>{C?.();const t=e.target.value;G&&Q(t),j?.(t)},onCompositionStart:()=>{H(!0),Q(x)},onCompositionUpdate:e=>{Q(e.target.value)},onCompositionEnd:e=>{H(!1);const t=e.target.value;C?.(),j?.(t),Q(t)},onKeyDown:e=>{if("Enter"===e.key){if(function(e){const t=e.nativeEvent;return t.isComposing||229===t.keyCode}(e))return;k?.(),Y&&!q||e.preventDefault()}}}),"password"!==g||Y?null:e("button",{type:"button","aria-label":W?$.hidePassword:$.showPassword,onClick:()=>A(e=>!e),onMouseDown:ae,onMouseUp:ae,disabled:P,className:["text-mp-on-surface-variant -me-1 flex shrink-0 items-center justify-center","cursor-pointer appearance-none border-0 bg-transparent p-1 font-[inherit]","rounded-full","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","hover:text-mp-on-surface focus-visible:text-mp-primary","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:e(r,{icon:W?d:p,size:ee.icon})}),v?e(a,{size:F,label:v,required:M,htmlFor:X,shrunk:oe,multiline:Y}):null]}),e(s,{errorMessage:z,className:`mp-text-field__support mt-1 ${ee.padding}`})]})});

package/dist/components/text-link/MPTextLink.d.ts

@@ -53,9 +53,15 @@ export interface MPTextLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'
     /**
      * What a screen reader hears after the label when `newTab` is on. A link
      * without it says nothing of its own, so this changes nothing there.
-     * @default 'Opens in a new tab'
+     *
+     * Defaults to the wording in `locale`.
      */
     newTabLabel?: string;
+    /**
+     * Which language that wording is in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /**
      * Renders something other than an `<a>` — the `Link` a router brings, most of
      * the time. `href` still goes through, so `render={<NextLink href="…" />}`

package/dist/components/text-link/MPTextLink.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as n,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{useRender as i}from"@base-ui/react/use-render";import{MPIcon as t}from"../icon/MPIcon.js";import{ExternalLinkIcon as l,LinkIcon as s}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{PROSE_TEXT as c}from"../../internal/scale.js";import{VISUALLY_HIDDEN as m}from"../../internal/visually-hidden.js";const p={always:"[&.mp-link]:underline",hover:"[&.mp-link]:no-underline [&.mp-link]:hover:underline",none:"[&.mp-link]:no-underline"},d=/*@__PURE__*/["[&.mp-link]:[text-underline-offset:0.2em]","[&.mp-link]:[text-decoration-thickness:0.08em]","[&.mp-link]:[text-decoration-color:color-mix(in_oklab,currentColor_45%,transparent)]","[&.mp-link]:hover:[text-decoration-color:currentColor]"].join(" ");export const MPTextLink=/*@__PURE__*/r.forwardRef(function({href:r,underline:u="always",color:f,size:k,newTab:h=!1,icon:x,newTabLabel:b="Opens in a new tab",render:j,className:v,style:y,children:w,..._},g){const N=h?"_blank":_.target,T="_blank"===N,z=x??T,C=!0===z?e(t,{icon:T?l:s,size:"0.95em"}):z,L=["mp-link cursor-pointer","transition-[color,text-decoration-color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid focus-visible:rounded-mp-xs outline-none",k?c[k]:"",p[u],d,f?"[&.mp-link]:text-(--_mp-accent)":"[&.mp-link]:text-inherit",v??""].filter(Boolean).join(" ");return i({render:j??e("a",{}),ref:g,props:{href:r,target:N,rel:T?"noopener noreferrer":void 0,className:L,style:f?{...a(f),...y}:y,children:o(n,{children:[w,C?e("span",{className:"ms-[0.25em] inline-flex align-baseline",children:C}):null,T?o(n,{children:[" ",e("span",{className:m,children:b})]}):null]}),..._}})});
+import{jsx as e,Fragment as n,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{useRender as i}from"@base-ui/react/use-render";import{MPIcon as l}from"../icon/MPIcon.js";import{ExternalLinkIcon as t,LinkIcon as s}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{linkRel as m}from"../../internal/link.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{TEXT_LINK as u}from"../../internal/messages/text-link.js";import{PROSE_TEXT as d}from"../../internal/scale.js";import{VISUALLY_HIDDEN as f}from"../../internal/visually-hidden.js";const k={always:"[&.mp-link]:underline",hover:"[&.mp-link]:no-underline [&.mp-link]:hover:underline",none:"[&.mp-link]:no-underline"},x=/*@__PURE__*/["[&.mp-link]:[text-underline-offset:0.2em]","[&.mp-link]:[text-decoration-thickness:0.08em]","[&.mp-link]:[text-decoration-color:color-mix(in_oklab,currentColor_45%,transparent)]","[&.mp-link]:hover:[text-decoration-color:currentColor]"].join(" ");export const MPTextLink=/*@__PURE__*/o.forwardRef(function({href:o,underline:h="always",color:b,size:j,newTab:v=!1,icon:y,newTabLabel:w,locale:g,render:_,className:N,style:T,children:z,...C},L){const M=p(u,c(g)),P=v?"_blank":C.target,B="_blank"===P,F=y??B,I=!0===F?e(l,{icon:B?t:s,size:"0.95em"}):F,R=["mp-link cursor-pointer","transition-[color,text-decoration-color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid focus-visible:rounded-mp-xs outline-none",j?d[j]:"",k[h],x,b?"[&.mp-link]:text-(--_mp-accent)":"[&.mp-link]:text-inherit",N??""].filter(Boolean).join(" ");return i({render:_??e("a",{}),ref:L,props:{href:o,target:P,rel:m(P,C.rel),className:R,style:b?{...a(b),...T}:T,children:r(n,{children:[z,I?e("span",{className:"ms-[0.25em] inline-flex align-baseline",children:I}):null,B?r(n,{children:[" ",e("span",{className:f,children:w??M.newTab})]}):null]}),...C}})});

package/dist/components/time-picker/MPTimePicker.d.ts

@@ -44,6 +44,10 @@ export interface MPTimePickerProps extends MPPickerShellProps {
     showSeconds?: boolean;
     /**
      * How far apart the rows of each column are.
+     *
+     * Rounded, and held between 1 and the column's own span: a step of nought has
+     * no number of rows at all, and one wider than the column leaves the single
+     * row it can offer.
      * @default 1
      */
     hourStep?: number;

package/dist/components/toggle/MPToggle.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import type { MPColor, MPStyleProps, MPVariant } from '../../types.js';
+export interface MPToggleProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color' | 'value'> {
+    /**
+     * How much surface the toggle paints while it is **off**. On is always the
+     * accent asserting itself, whichever weight was asked for.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * Which accent family it turns on in. Not an arbitrary colour: to change what
+     * `primary` *is*, set the token.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Whether it is on. Use with `onPressedChange` for a controlled toggle. */
+    pressed?: boolean;
+    /**
+     * Whether it starts on, for an uncontrolled one.
+     * @default false
+     */
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** Identifies the toggle inside an [MPToggleGroup](./toggle#mptogglegroup). */
+    value?: string;
+    /** A glyph before the label. */
+    startIcon?: React.ReactNode;
+    /** A glyph after it. */
+    endIcon?: React.ReactNode;
+    /**
+     * The label. Left out, the toggle goes square around whatever glyph it was
+     * given — which is what a toolbar toggle is, and what MD3 calls a *toggle icon
+     * button*. An icon-only toggle still needs an `aria-label`.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A button that stays down.
+ *
+ * The difference from an [MPSwitch](./switch) is what the press *is*: a switch
+ * changes a setting, and the change is the point. A toggle changes the state of
+ * the thing beside it — bold on the selected words, the grid on the canvas, the
+ * filter on the list — and the thing beside it is what the reader is looking at.
+ *
+ * The difference from an [MPCheckbox](./checkbox) is that this is a control
+ * rather than an answer, so it never goes in a form. A checkbox's value is
+ * submitted; a toggle's state is acted on immediately.
+ *
+ * Base UI's `Toggle` is underneath, which owns `aria-pressed` and the
+ * controlled/uncontrolled pair. What is left here is the surface, and the rule
+ * that **off is neutral**.
+ *
+ * ## Why off is neutral and on is the accent
+ *
+ * Because a toggle has to be readable at a glance in a row of eight of them, and
+ * the axis a reader can actually judge in isolation is hue, not saturation. A
+ * set where off is a paler accent and on is a stronger one is a set nobody can
+ * read without comparing two of them side by side.
+ *
+ * It is also what leaves `color` meaning something. On a button the family says
+ * *what kind of action this is*; here it says what "on" looks like, and an
+ * unpressed toggle that already wore it would have spent the signal.
+ *
+ * ## Icon only
+ *
+ * With no children the toggle goes square around its glyph, exactly as
+ * [MPButton](./button) does — which for a `corner-full` control is a circle, and
+ * is MD3's own toggle icon button. There is no separate component for it, for
+ * [MPIconButton](./icon-button)'s reason inverted: the *name* is what an icon
+ * button adds, and a toggle already has to be given one.
+ */
+export declare const MPToggle: React.ForwardRefExoticComponent<MPToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/toggle/MPToggle.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Toggle as r}from"@base-ui/react/toggle";import{accentSlots as o}from"../../internal/accent.js";import{MPButtonGroupContext as a}from"../../internal/button-group.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as i,CONTROL_HEIGHT as c,CONTROL_PAD_X as l,CONTROL_SQUARE as p,CONTROL_TEXT as m,hasContent as d}from"../../internal/scale.js";const u={filled:"bg-mp-surface-container-highest text-mp-on-surface-variant",tonal:"bg-mp-surface-container text-mp-on-surface-variant",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline border bg-transparent text-mp-on-surface-variant",text:"bg-transparent text-mp-on-surface-variant"},f={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-(--_mp-accent) border bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",text:"bg-transparent text-(--_mp-accent)"},b={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 MPToggle=/*@__PURE__*/n.forwardRef(function({variant:g,size:x,color:v,disabled:h,pressed:w,defaultPressed:_,onPressedChange:j,value:y,startIcon:P,endIcon:z,fullWidth:C=!1,className:k,style:I,children:N,...B},L){const M=n.useContext(a),R=g??M?.variant??"outlined",S=x??M?.size??"md",T=v??M?.color??"primary",W=h??M?.disabled??!1,$=!d(N);return t(r,{ref:L,value:y,pressed:w,defaultPressed:_,onPressedChange:e=>j?.(e),disabled:W,"data-mp-size":S,"data-mp-variant":R,className:e=>["mp-toggle 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)",c[S],m[S],i[S],$?`${p[S]} px-0`:l[S],W?b[R]:e.pressed?f[R]:u[R],W?"cursor-default":"",C?"w-full":"",k??""].filter(Boolean).join(" "),style:{...o(T),...I},...B,children:[W?null:e(s,{}),P,N,z]})});

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

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

package/dist/components/toggle/index.js

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

package/dist/components/toggle-group/MPToggleGroup.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPStyleProps, MPVariant } from '../../types.js';
+export interface MPToggleGroupProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Passed to every toggle in the set.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /** Passed to every toggle in the set. */
+    color?: MPColor;
+    /**
+     * Which toggles are on, by their `value`.
+     *
+     * An array in both the single and the multiple case — Base UI's own shape, and
+     * the same decision [MPSegmentedButton](./segmented-button) makes: a `value`
+     * whose *type* changed with a boolean prop would be a union every caller has
+     * to narrow before they can read it.
+     */
+    value?: readonly string[];
+    /** Which start on, for an uncontrolled set. */
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Whether more than one may be on at a time. Off, turning one on turns the
+     * last one off — which is a one-of-a-set, and worth a second thought: if what
+     * is being chosen is a **value** rather than a state, that is an
+     * [MPSegmentedButton](./segmented-button) or an
+     * [MPRadioGroup](./radio-group).
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Which way the toggles run.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /** Disables every toggle in the set at once. */
+    disabled?: boolean;
+    /**
+     * Whether the arrow keys wrap around at the ends.
+     * @default true
+     */
+    loopFocus?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A run of toggles that share one state.
+ *
+ * Two things happen here and only one of them is visual. The corners that face a
+ * neighbour are cut back to `corner-small` — MD3's connected button group, the
+ * same shape an [MPButtonGroup](./button-group) draws, out of the same table.
+ *
+ * The other half is that the **set owns the value**: the toggles report into one
+ * array, `multiple` decides whether more than one of them can be on, and
+ * `variant`, `size`, `color` and `disabled` are set once here rather than on
+ * every toggle. A run where the fourth toggle is a rung out is not a run.
+ *
+ * Base UI owns the roving tab index — one tab stop for the whole set, with the
+ * arrow keys moving inside it — which is what makes a toolbar of eight toggles
+ * two key presses deep instead of eight.
+ *
+ * ## When this is the wrong component
+ *
+ * When what is being chosen is a **value** rather than a state. A run of toggles
+ * with `multiple` off is a one-of-a-set, and the two components that say so
+ * properly are [MPSegmentedButton](./segmented-button) — which is MD3's own
+ * control for picking between two and five views — and
+ * [MPRadioGroup](./radio-group), which is what a form's value comes from.
+ *
+ * A toggle group is for a **toolbar**: bold, italic, underline; grid, snap,
+ * rulers. Each one is a state of the thing beside it, and they happen to sit
+ * together.
+ */
+export declare const MPToggleGroup: React.ForwardRefExoticComponent<MPToggleGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/toggle-group/MPToggleGroup.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as o from"react";import{ToggleGroup as l}from"@base-ui/react/toggle-group";import{GROUP_JOIN as a,MPButtonGroupContext as r}from"../../internal/button-group.js";export const MPToggleGroup=/*@__PURE__*/o.forwardRef(function({variant:i,size:t,color:n,value:u,defaultValue:s,onValueChange:f,multiple:c=!1,orientation:d="horizontal",disabled:m,loopFocus:p=!0,fullWidth:g=!1,className:v,children:x,...h},b){const j=o.useMemo(()=>({variant:i,size:t,color:n,disabled:m}),[i,t,n,m]);return e(r.Provider,{value:j,children:e(l,{ref:b,value:u,defaultValue:s,onValueChange:e=>f?.(e),multiple:c,orientation:d,disabled:m,loopFocus:p,"data-mp-orientation":d,className:["mp-toggle-group inline-flex gap-0.5 align-middle","vertical"===d?"flex-col":"flex-row",a[d],"[&>*]:relative [&>*:focus-visible]:z-10",g?"flex w-full [&>*]:flex-1":"",v??""].filter(Boolean).join(" "),...h,children:x})})});

package/dist/components/toggle-group/index.d.ts

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

package/dist/components/toggle-group/index.js

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

package/dist/components/tooltip/MPTooltip.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as e from"react";import{Tooltip as a}from"@base-ui/react/tooltip";import{accentSlots as i}from"../../internal/accent.js";export const MPTooltipProvider=a.Provider;const l={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},s={xs:"px-1.5",sm:"px-2",md:"px-2",lg:"px-3",xl:"px-4"},r={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-small",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},d={xs:6,sm:7,md:8,lg:9,xl:10};export function MPTooltip({content:p,children:n,size:m="sm",color:c,side:x="top",align:y="center",sideOffset:u=6,delay:h,closeDelay:f,arrow:g=!0,open:b,defaultOpen:v,onOpenChange:_,disabled:P=!1,className:j,style:O}){const w=d[m],N=e.useId(),[z,T]=e.useState(v??!1),M=b??z,B={"--_mp-tooltip":c?`var(--_mp-color-${c})`:"var(--_mp-color-inverse-surface)","--_mp-on-tooltip":c?`var(--_mp-color-on-${c})`:"var(--_mp-color-inverse-on-surface)",...c?i(c):null};return o(a.Root,{open:b,defaultOpen:v,onOpenChange:t=>{T(t),_?.(t)},children:[t(a.Trigger,{render:n,delay:h,closeDelay:f,disabled:P,"aria-describedby":M?N:void 0}),t(a.Portal,{children:t(a.Positioner,{className:"mp-portal z-50 outline-none",side:x,align:y,sideOffset:u,children:o(a.Popup,{id:N,role:"tooltip","data-mp-size":m,className:["mp-tooltip rounded-mp-xs max-w-64 outline-none","bg-(--_mp-tooltip) text-(--_mp-on-tooltip)","transition-opacity duration-(--mp-sys-motion-duration-short4)","data-starting-style:opacity-0 data-ending-style:opacity-0","data-instant:duration-0",s[m],l[m],r[m],j??""].filter(Boolean).join(" "),style:{...B,...O},children:[g?t(a.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:t("svg",{width:w,height:w/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:t("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-tooltip)"})})}):null,p]})})})]})}
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as e from"react";import{Tooltip as a}from"@base-ui/react/tooltip";import{accentSlots as i}from"../../internal/accent.js";export const MPTooltipProvider=a.Provider;const l={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},s={xs:"px-1.5",sm:"px-2",md:"px-2",lg:"px-3",xl:"px-4"},r={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-small",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},d={xs:6,sm:7,md:8,lg:9,xl:10};export function MPTooltip({content:p,children:n,size:m="sm",color:c,side:x="top",align:y="center",sideOffset:u=6,delay:h,closeDelay:f,arrow:g=!0,open:b,defaultOpen:v,onOpenChange:_,disabled:P=!1,className:j,style:O}){const w=d[m],N=e.useId(),[z,T]=e.useState(v??!1),M=b??z,B={"--_mp-tooltip":c?`var(--_mp-color-${c})`:"var(--_mp-color-inverse-surface)","--_mp-on-tooltip":c?`var(--_mp-color-on-${c})`:"var(--_mp-color-inverse-on-surface)",...c?i(c):null};return o(a.Root,{open:b,defaultOpen:v,onOpenChange:t=>{void 0===b&&T(t),_?.(t)},children:[t(a.Trigger,{render:n,delay:h,closeDelay:f,disabled:P,"aria-describedby":M?N:void 0}),t(a.Portal,{children:t(a.Positioner,{className:"mp-portal z-50 outline-none",side:x,align:y,sideOffset:u,children:o(a.Popup,{id:N,role:"tooltip","data-mp-size":m,className:["mp-tooltip rounded-mp-xs max-w-64 outline-none","bg-(--_mp-tooltip) text-(--_mp-on-tooltip)","transition-opacity duration-(--mp-sys-motion-duration-short4)","data-starting-style:opacity-0 data-ending-style:opacity-0","data-instant:duration-0",s[m],l[m],r[m],j??""].filter(Boolean).join(" "),style:{...B,...O},children:[g?t(a.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:t("svg",{width:w,height:w/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:t("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-tooltip)"})})}):null,p]})})})]})}