material-plus-ui 1.4.0 → 1.6.0

package/dist/components/navigation-menu/MPNavigationMenu.d.ts

@@ -89,6 +89,13 @@ export interface MPNavigationMenuItemProps {
     columns?: number;
     /** The panel's contents — usually `MPNavigationMenuLink`s. */
     children?: React.ReactNode;
+    /**
+     * Added to the word in the row — the link, or the trigger that opens the panel
+     * — rather than to the panel. The panel is portalled out of this element and
+     * carries `mp-navigation-menu__panel`.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 export interface MPNavigationMenuLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color' | 'title'> {
     /** Where it goes. */
@@ -117,7 +124,7 @@ export declare const MPNavigationMenuLink: React.ForwardRefExoticComponent<MPNav
  * is a link — and the difference is not cosmetic. The second is announced as a
  * destination and the first as something that expands.
  */
-export declare function MPNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, columns, children }: MPNavigationMenuItemProps): React.JSX.Element;
+export declare function MPNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, columns, children, className, style }: MPNavigationMenuItemProps): React.JSX.Element;
 /**
  * A site's navigation: a row of destinations, some of which open a panel of more
  * of them.

package/dist/components/navigation-menu/MPNavigationMenu.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as p,CONTROL_ICON as d,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as x}from"../../internal/surface.js";const v=/*@__PURE__*/t.createContext({size:"md"}),N=/*@__PURE__*/["mp-navigation-menu__popup rounded-mp-xs shadow-mp-2","bg-mp-surface-container text-mp-on-surface box-border overflow-hidden outline-none","transition-[opacity,width,height] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),y={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const MPNavigationMenuLink=/*@__PURE__*/t.forwardRef(function({href:a,title:r,description:o,startIcon:s,target:p,rel:d,className:x,children:N,...y},j){const{size:b}=t.useContext(v);return n(i.Link,{ref:j,href:a,target:p,rel:l(p,d),className:["mp-navigation-menu__link group text-mp-on-surface rounded-mp-xs relative flex","min-w-0 cursor-pointer items-start bg-transparent py-2 no-underline outline-none",m[b],u[b],x??""].filter(Boolean).join(" "),...y,children:[e(c,{}),h(s)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"relative flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${f[b]}`,children:r}),h(o)?e("span",{className:`text-mp-on-surface-variant ${g}`,children:o}):null,N]})]})});export function MPNavigationMenuItem({label:s,href:g,target:x,rel:N,startIcon:j,value:b,disabled:w=!1,columns:M=1,children:P}){const{size:_}=t.useContext(v),z=void 0!==g&&!h(P),k=Number.isFinite(M)?Math.max(1,Math.round(M)):1,C=/*@__PURE__*/["mp-navigation-menu__item group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-full cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap no-underline select-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",p[_],f[_],m[_],u[_]].join(" ");return e(i.Item,{value:b,children:z?n(i.Link,{href:g,target:x,rel:l(x,N),className:C,children:[e(c,{}),h(j)?e("span",{className:"relative flex",children:j}):null,e("span",{className:"relative",children:s})]}):n(a,{children:[n(i.Trigger,{disabled:w,className:C,children:[w?null:e(c,{className:"group-data-popup-open:opacity-8"}),h(j)?e("span",{className:"relative flex",children:j}):null,e("span",{className:"relative",children:s}),e(i.Icon,{className:["relative flex items-center transition-transform","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:o,size:d[_]})})]}),e(i.Content,{className:`mp-navigation-menu__panel grid gap-1 ${y[_]}`,style:k>1?{gridTemplateColumns:`repeat(${k}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const MPNavigationMenu=/*@__PURE__*/t.forwardRef(function({orientation:a="horizontal",value:r,defaultValue:o,onValueChange:l,delay:c,closeDelay:p,sideOffset:d=8,size:u="md",color:f="primary",className:h,style:g,children:y,...j},b){const w=t.useMemo(()=>({size:u}),[u]);return e(v.Provider,{value:w,children:n(i.Root,{ref:b,orientation:a,value:r,defaultValue:o,onValueChange:e=>l?.(e),delay:c,closeDelay:p,"data-mp-size":u,className:["mp-navigation-menu",h??""].filter(Boolean).join(" "),style:{...s(f),...g},...j,children:[e(i.List,{className:["flex items-center","vertical"===a?"flex-col items-stretch":"flex-row",m[u]].join(" "),children:y}),e(i.Portal,{children:e(i.Positioner,{className:x,sideOffset:d,collisionPadding:12,style:s(f),children:e(i.Popup,{className:N,children:e(i.Viewport,{})})})})]})})});
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as p,CONTROL_ICON as d,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as x}from"../../internal/surface.js";import{useMPColor as v,useMPSize as N}from"../../internal/config.js";const y=/*@__PURE__*/a.createContext({size:"md"}),j=/*@__PURE__*/["mp-navigation-menu__popup rounded-mp-xs shadow-mp-2","bg-mp-surface-container text-mp-on-surface box-border overflow-hidden outline-none","transition-[opacity,width,height] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),b={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const MPNavigationMenuLink=/*@__PURE__*/a.forwardRef(function({href:t,title:r,description:o,startIcon:s,target:p,rel:d,className:x,children:v,...N},j){const{size:b}=a.useContext(y);return n(i.Link,{ref:j,href:t,target:p,rel:l(p,d),className:["mp-navigation-menu__link group text-mp-on-surface rounded-mp-xs relative flex","min-w-0 cursor-pointer items-start bg-transparent py-2 no-underline outline-none",m[b],u[b],x??""].filter(Boolean).join(" "),...N,children:[e(c,{}),h(s)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"relative flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${f[b]}`,children:r}),h(o)?e("span",{className:`text-mp-on-surface-variant ${g}`,children:o}):null,v]})]})});export function MPNavigationMenuItem({label:s,href:g,target:x,rel:v,startIcon:N,value:j,disabled:w=!1,columns:M=1,children:P,className:_,style:z}){const{size:k}=a.useContext(y),C=void 0!==g&&!h(P),I=Number.isFinite(M)?Math.max(1,Math.round(M)):1,L=["mp-navigation-menu__item group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-full cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap no-underline select-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",p[k],f[k],m[k],u[k],_??""].filter(Boolean).join(" ");return e(i.Item,{value:j,children:C?n(i.Link,{href:g,target:x,rel:l(x,v),className:L,style:z,children:[e(c,{}),h(N)?e("span",{className:"relative flex",children:N}):null,e("span",{className:"relative",children:s})]}):n(t,{children:[n(i.Trigger,{disabled:w,className:L,style:z,children:[w?null:e(c,{className:"group-data-popup-open:opacity-8"}),h(N)?e("span",{className:"relative flex",children:N}):null,e("span",{className:"relative",children:s}),e(i.Icon,{className:["relative flex items-center transition-transform","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:o,size:d[k]})})]}),e(i.Content,{className:`mp-navigation-menu__panel grid gap-1 ${b[k]}`,style:I>1?{gridTemplateColumns:`repeat(${I}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const MPNavigationMenu=/*@__PURE__*/a.forwardRef(function({orientation:t="horizontal",value:r,defaultValue:o,onValueChange:l,delay:c,closeDelay:p,sideOffset:d=8,size:u,color:f,className:h,style:g,children:b,...w},M){const P=N(u),_=v(f),z=a.useMemo(()=>({size:P}),[P]);return e(y.Provider,{value:z,children:n(i.Root,{ref:M,orientation:t,value:r,defaultValue:o,onValueChange:e=>l?.(e),delay:c,closeDelay:p,"data-mp-size":P,className:["mp-navigation-menu",h??""].filter(Boolean).join(" "),style:{...s(_),...g},...w,children:[e(i.List,{className:["flex items-center","vertical"===t?"flex-col items-stretch":"flex-row",m[P]].join(" "),children:b}),e(i.Portal,{children:e(i.Positioner,{className:x,sideOffset:d,collisionPadding:12,style:s(_),children:e(i.Popup,{className:j,children:e(i.Viewport,{})})})})]})})});

package/dist/components/number-field/MPNumberField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPStyleProps } from '../../types.js';
+import type { MPControlEventProps, MPStyleProps } from '../../types.js';
 /**
  * Where the two steppers sit.
  *
@@ -14,7 +14,7 @@ import type { MPStyleProps } from '../../types.js';
  * nobody hits.
  */
 export type MPNumberFieldSteppers = 'end' | 'split' | 'none';
-export interface MPNumberFieldProps extends MPStyleProps {
+export interface MPNumberFieldProps extends MPStyleProps, MPControlEventProps<HTMLInputElement> {
     /** The number. Use with `onValueChange` for a controlled field. */
     value?: number | null;
     /** The starting number, for an uncontrolled field. */
@@ -107,6 +107,12 @@ export interface MPNumberFieldProps extends MPStyleProps {
     name?: string;
     /** The id put on the control and pointed at by the label. */
     id?: string;
+    /**
+     * Added to the field's outermost element — the box around the control, its
+     * steppers and its supporting line, rather than to the `<input>` itself.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * A Material Design field that only holds a number.
@@ -123,4 +129,4 @@ export interface MPNumberFieldProps extends MPStyleProps {
  * owns the parsing against the locale, the clamping, the press-and-hold repeat on
  * the steppers, and the hidden input that submits with a form.
  */
-export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size, fullWidth, required, disabled, readOnly, name, id }: MPNumberFieldProps): React.JSX.Element;
+export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size: sizeProp, fullWidth, required, disabled, readOnly, name, id, className, style }: MPNumberFieldProps): React.JSX.Element;

package/dist/components/number-field/MPNumberField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{NumberField as r}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon.js";import{AddIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{MPFieldLabel as o,MPFieldOutline as p,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{useMPLocale as m,useMPMessages as c}from"../../internal/locale.js";import{NUMBER_FIELD as u}from"../../internal/messages/number-field.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{CONTROL_ICON as g,PROSE_TEXT as x,hasContent as b}from"../../internal/scale.js";const j={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:v,defaultValue:N,onValueChange:y,onValueCommitted:z,min:S,max:w,step:V,largeStep:k,smallStep:I,allowWheelScrub:q=!1,format:C,locale:L,steppers:M="end",incrementLabel:F,decrementLabel:O,label:P,floatingLabel:W=!0,description:R,errorMessage:_,placeholder:B,startIcon:D,size:G="md",fullWidth:T=!1,required:$=!1,disabled:A=!1,readOnly:E=!1,name:H,id:J}){const K=c(u,m("string"==typeof L?L:void 0)),Q=b(_),U=j[G],X=l.useId(),Y=J??X,Z="none"!==M&&!E&&!A,[ee,ae]=l.useState(N??null),le=void 0===v?ee:v,{shrunk:re,focusProps:ne}=d({floating:W&&b(P),filled:null!==le,pinned:!!D||Z&&"split"===M}),te=/*@__PURE__*/["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",U.stepper].join(" "),ie=a(r.Decrement,{"aria-label":O??K.decrease,className:te,children:[e(f,{}),e(t,{icon:s,size:g[G]})]}),se=a(r.Increment,{"aria-label":F??K.increase,className:te,children:[e(f,{}),e(t,{icon:i,size:g[G]})]});return a(n.Root,{className:["mp-number-field group flex-col align-top",T?"flex w-full":"inline-flex w-fit"].join(" "),disabled:A,invalid:Q,"data-mp-size":G,...ne,children:[e(r.Root,{id:Y,name:H,className:"contents",value:v,defaultValue:N,onValueChange:e=>{ae(e),y?.(e)},onValueCommitted:e=>z?.(e),min:S,max:w,step:V,largeStep:k,smallStep:I,allowWheelScrub:q,format:C,locale:L,disabled:A,readOnly:E,required:$,children:a("div",{className:"relative w-full",children:[a(r.Group,{className:["flex w-full items-center gap-2",U.height,Z&&"end"===M?`${U.padding} pe-1`:Z&&"split"===M?"px-1":U.padding].join(" "),children:[Z&&"split"===M?ie:null,D?e("span",{className:["flex shrink-0 items-center",A?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:D}):null,e(r.Input,{placeholder:re?B:void 0,className:["w-full min-w-0 flex-1 tabular-nums",x[G],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",Z&&"split"===M?"text-center":""].filter(Boolean).join(" ")}),Z&&"end"===M?a("span",{className:"flex shrink-0 items-center",children:[ie,se]}):null,Z&&"split"===M?se:null]}),e(p,{label:P,required:$,notched:re}),b(P)?e(o,{size:G,label:P,required:$,htmlFor:Y,shrunk:re}):null]})}),e(h,{description:R,errorMessage:_,className:U.padding})]})}
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{NumberField as a}from"@base-ui/react/number-field";import{Field as r}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon.js";import{AddIcon as i,RemoveIcon as o}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as p,useFloatingLabel as m}from"../../internal/FieldOutline.js";import{useMPLocale as d,useMPMessages as c}from"../../internal/locale.js";import{NUMBER_FIELD as u}from"../../internal/messages/number-field.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{CONTROL_ICON as x,PROSE_TEXT as g,hasContent as b}from"../../internal/scale.js";import{useMPSize as j}from"../../internal/config.js";const y={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:v,defaultValue:N,onValueChange:w,onValueCommitted:z,onKeyDown:C,onKeyUp:k,onFocus:S,onBlur:M,onClick:V,onDoubleClick:D,onContextMenu:F,min:I,max:q,step:B,largeStep:K,smallStep:L,allowWheelScrub:O=!1,format:P,locale:W,steppers:R="end",incrementLabel:U,decrementLabel:_,label:G,floatingLabel:T=!0,description:$,errorMessage:A,placeholder:E,startIcon:H,size:J,fullWidth:Q=!1,required:X=!1,disabled:Y=!1,readOnly:Z=!1,name:ee,id:ne,className:le,style:ae}){const re=j(J),te=c(u,d("string"==typeof W?W:void 0)),ie=b(A),oe=y[re],se=l.useId(),pe=ne??se,me="none"!==R&&!Z&&!Y,[de,ce]=l.useState(N??null),ue=void 0===v?de:v,{shrunk:fe,focusProps:he}=m({floating:T&&b(G),filled:null!==ue,pinned:!!H||me&&"split"===R}),xe=/*@__PURE__*/["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",oe.stepper].join(" "),ge=n(a.Decrement,{"aria-label":_??te.decrease,className:xe,children:[e(f,{}),e(t,{icon:o,size:x[re]})]}),be=n(a.Increment,{"aria-label":U??te.increase,className:xe,children:[e(f,{}),e(t,{icon:i,size:x[re]})]});return n(r.Root,{className:["mp-number-field group flex-col align-top",Q?"flex w-full":"inline-flex w-fit",le??""].filter(Boolean).join(" "),style:ae,disabled:Y,invalid:ie,"data-mp-size":re,...he,children:[e(a.Root,{id:pe,name:ee,className:"contents",value:v,defaultValue:N,onValueChange:e=>{ce(e),w?.(e)},onValueCommitted:e=>z?.(e),min:I,max:q,step:B,largeStep:K,smallStep:L,allowWheelScrub:O,format:P,locale:W,disabled:Y,readOnly:Z,required:X,children:n("div",{className:"relative w-full",children:[n(a.Group,{className:["flex w-full items-center gap-2",oe.height,me&&"end"===R?`${oe.padding} pe-1`:me&&"split"===R?"px-1":oe.padding].join(" "),children:[me&&"split"===R?ge:null,H?e("span",{className:["flex shrink-0 items-center",Y?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:H}):null,e(a.Input,{placeholder:fe?E:void 0,onKeyDown:C,onKeyUp:k,onFocus:S,onBlur:M,onClick:V,onDoubleClick:D,onContextMenu:F,className:["w-full min-w-0 flex-1 tabular-nums",g[re],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",me&&"split"===R?"text-center":""].filter(Boolean).join(" ")}),me&&"end"===R?n("span",{className:"flex shrink-0 items-center",children:[ge,be]}):null,me&&"split"===R?be:null]}),e(p,{label:G,required:X,notched:fe}),b(G)?e(s,{size:re,label:G,required:X,htmlFor:pe,shrunk:fe}):null]})}),e(h,{description:$,errorMessage:A,className:oe.padding})]})}

package/dist/components/otp-field/MPOtpField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{MPSupportingText as n}from"../../internal/SupportingText.js";import{META_TEXT as l,STACK_GAP as i,hasContent as m}from"../../internal/scale.js";const s={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},u={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},p={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=/*@__PURE__*/a.forwardRef(function({size:c="md",fullWidth:f=!1,length:h=6,charset:x="numeric",mask:b=!1,groupSize:g,separator:v="–",value:y,defaultValue:w,onValueChange:j,onComplete:M,onValueInvalid:V,autoSubmit:N=!1,label:C,description:F,errorMessage:S,name:z,required:I=!1,disabled:O=!1,readOnly:R=!1,autoFocus:$=!1,className:k,style:q},T){const A=Math.min(12,Math.max(2,Math.round(h))),B=m(S),L=g&&g>0?Math.round(g):0,P=/*@__PURE__*/["rounded-mp-xs border bg-transparent text-center font-[inherit]",s[c],d[c],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-2 focus:border-mp-primary focus:outline-none",O?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":B?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":R?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:O,invalid:B,"data-mp-size":c,className:["mp-otp-field flex-col align-top",i[c],f?"flex w-full":"inline-flex w-fit",k??""].filter(Boolean).join(" "),style:q,children:[m(C)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[C,I?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(o.Root,{ref:T,length:A,validationType:p[x],mask:b,name:z,required:I,disabled:O,readOnly:R,autoSubmit:N,value:y,defaultValue:w,onValueChange:e=>j?.(e),onValueComplete:e=>M?.(e),onValueInvalid:e=>V?.(e),className:`flex items-center ${u[c]}`,children:Array.from({length:A},(t,n)=>r(a.Fragment,{children:[L>0&&n>0&&n%L===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[c]}`,children:v}):null,e(o.Input,{className:P,autoFocus:$&&0===n})]},n))}),e(n,{description:F,errorMessage:S})]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{MPSupportingText as n}from"../../internal/SupportingText.js";import{META_TEXT as l,STACK_GAP as i,hasContent as m}from"../../internal/scale.js";import{useMPSize as s}from"../../internal/config.js";const u={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},p={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},c={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=/*@__PURE__*/a.forwardRef(function({size:f,fullWidth:h=!1,length:x=6,charset:g="numeric",mask:b=!1,groupSize:v,separator:y="–",value:j,defaultValue:w,onValueChange:M,onComplete:V,onValueInvalid:N,autoSubmit:C=!1,label:F,description:S,errorMessage:z,name:I,required:O=!1,disabled:R=!1,readOnly:$=!1,autoFocus:k=!1,className:q,style:T},A){const B=s(f),L=Math.min(12,Math.max(2,Math.round(x))),P=m(z),W=v&&v>0?Math.round(v):0,D=/*@__PURE__*/["rounded-mp-xs border bg-transparent text-center font-[inherit]",u[B],d[B],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-2 focus:border-mp-primary focus:outline-none",R?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":P?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":$?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:R,invalid:P,"data-mp-size":B,className:["mp-otp-field flex-col align-top",i[B],h?"flex w-full":"inline-flex w-fit",q??""].filter(Boolean).join(" "),style:T,children:[m(F)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[F,O?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(o.Root,{ref:A,length:L,validationType:c[g],mask:b,name:I,required:O,disabled:R,readOnly:$,autoSubmit:C,value:j,defaultValue:w,onValueChange:e=>M?.(e),onValueComplete:e=>V?.(e),onValueInvalid:e=>N?.(e),className:`flex items-center ${p[B]}`,children:Array.from({length:L},(t,n)=>r(a.Fragment,{children:[W>0&&n>0&&n%W===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[B]}`,children:y}):null,e(o.Input,{className:D,autoFocus:k&&0===n})]},n))}),e(n,{description:S,errorMessage:z})]})});

package/dist/components/overlay/MPOverlay.d.ts

@@ -99,4 +99,4 @@ export interface MPOverlayProps {
  * else Base UI owns: the portal, the scroll lock, the focus held inside, the page
  * behind going inert, and focus returning to wherever it came from on close.
  */
-export declare function MPOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, label, locale: localeProp, className, style, children }: MPOverlayProps): React.JSX.Element;
+export declare function MPOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size: sizeProp, label, locale: localeProp, className, style, children }: MPOverlayProps): React.JSX.Element;

package/dist/components/overlay/MPOverlay.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{OVERLAY as t}from"../../internal/messages/overlay.js";import{FADE as n,PORTAL_LAYER as i,SCRIM as o}from"../../internal/surface.js";import{SHEET_PAD as m}from"../../internal/scale.js";const c={scrim:o,blur:"bg-mp-scrim/20 [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-mp-surface",clear:""},p={start:"items-start",center:"items-center",end:"items-end"};export function MPOverlay({open:o,defaultOpen:f,onOpenChange:d,tone:u="scrim",dismissible:x=!1,modal:b=!0,align:j="center",size:h="md",label:y,locale:g,className:O,style:N,children:P}){const k=s(t,l(g));return e(r.Root,{open:o,defaultOpen:f,modal:b,disablePointerDismissal:!x,onOpenChange:(e,a)=>{x||e||"escape-key"!==a.reason?d?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`${i} fixed inset-0 ${n} ${c[u]}`}),e(r.Viewport,{className:[i,"fixed inset-0 flex justify-center",p[j],m[h]].join(" "),children:e(r.Popup,{"aria-label":y??k.label,"data-mp-size":h,className:["mp-overlay flex max-h-full max-w-full flex-col items-center justify-center","text-mp-on-surface outline-none",n,O??""].filter(Boolean).join(" "),style:N,children:P})})]})})}
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Dialog as a}from"@base-ui/react/dialog";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{OVERLAY as t}from"../../internal/messages/overlay.js";import{FADE as n,PORTAL_LAYER as i,SCRIM as o}from"../../internal/surface.js";import{SHEET_PAD as m}from"../../internal/scale.js";import{useMPSize as c}from"../../internal/config.js";const p={scrim:o,blur:"bg-mp-scrim/20 [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-mp-surface",clear:""},f={start:"items-start",center:"items-center",end:"items-end"};export function MPOverlay({open:o,defaultOpen:d,onOpenChange:u,tone:x="scrim",dismissible:j=!1,modal:b=!0,align:g="center",size:h,label:y,locale:O,className:N,style:P,children:k}){const v=c(h),$=s(t,l(O));return e(a.Root,{open:o,defaultOpen:d,modal:b,disablePointerDismissal:!j,onOpenChange:(e,r)=>{j||e||"escape-key"!==r.reason?u?.(e):r.cancel()},children:r(a.Portal,{children:[e(a.Backdrop,{className:`${i} fixed inset-0 ${n} ${p[x]}`}),e(a.Viewport,{className:[i,"fixed inset-0 flex justify-center",f[g],m[v]].join(" "),children:e(a.Popup,{"aria-label":y??$.label,"data-mp-size":v,className:["mp-overlay flex max-h-full max-w-full flex-col items-center justify-center","text-mp-on-surface outline-none",n,N??""].filter(Boolean).join(" "),style:P,children:k})})]})})}

package/dist/components/pagination/MPPagination.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronLeftIcon as i,ChevronRightIcon as r,ChevronsLeftIcon as l,ChevronsRightIcon as s}from"../../constants/icons.js";import{accentSlots as o}from"../../internal/accent.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{PAGINATION as u}from"../../internal/messages/pagination.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as d,CONTROL_TEXT as h}from"../../internal/scale.js";import{VISUALLY_HIDDEN as g}from"../../internal/visually-hidden.js";const x={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},b={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function j(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=/*@__PURE__*/t.forwardRef(function({count:y,page:v,defaultPage:M=1,onPageChange:w,siblingCount:N=1,boundaryCount:P=1,showEdges:C=!1,showArrows:S=!0,size:K="md",color:_="primary",fullWidth:k=!1,disabled:z=!1,getPageHref:$,locale:A,labels:B,className:D,style:E,...H},I){const L=c(A),R=p(u,L,B),[W,q]=t.useState(M),F=void 0!==v,G=Math.min(Math.max(v??W,1),Math.max(y,1));if(y<2)return null;const J=function(e,n,t,a){const i=j(1,Math.min(a,e)),r=j(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),s=Math.min(Math.max(n+t,a+2*t+2),r.length>0?r[0]-2:e-1);return[...i,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...j(l,s),...s<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...r]}(y,G,N,P),O=G<=1,Q=G>=y,T=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||$&&!w||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),y);n!==G&&(F||q(n),w?.(n))})(n))},U=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",x[K],h[K],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),V=(t,a,i,r,l,s,o)=>e("li",{className:"flex",children:!$||i||r?n("button",{type:"button",disabled:i,"aria-label":l,"aria-current":r?"page":void 0,className:U(r,i),onClick:e=>T(e,a),children:[i?null:e(f,{}),e("span",{className:"relative",children:s})]}):n("a",{href:$(a),rel:o,"aria-label":l,className:U(!1,!1),onClick:e=>T(e,a),children:[e(f,{}),e("span",{className:"relative",children:s})]})},t),X=n=>e(a,{icon:n,size:d[K],className:"rtl:rotate-180"});return n("nav",{ref:I,"aria-label":R.label,"data-mp-size":K,className:["mp-pagination flex",k?"w-full justify-center":"",D??""].filter(Boolean).join(" "),style:{...o(_),...E},...H,children:[n("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${b[K]}`,children:[C?V("first",1,z||O,!1,R.first,X(l)):null,S?V("previous",G-1,z||O,!1,R.previous,X(i),"prev"):null,J.map((n,t)=>"number"==typeof n?V(`slot-${t}`,n,z,n===G,m(R.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",x[K],h[K]].join(" "),children:"…"},`slot-${t}`)),S?V("next",G+1,z||Q,!1,R.next,X(r),"next"):null,C?V("last",y,z||Q,!1,R.last,X(s)):null]}),e("span",{className:g,"aria-live":"polite",children:m(R.status,{page:String(G),total:String(y)})})]})});
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronLeftIcon as i,ChevronRightIcon as r,ChevronsLeftIcon as l,ChevronsRightIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{PAGINATION as u}from"../../internal/messages/pagination.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as d,CONTROL_TEXT as h}from"../../internal/scale.js";import{VISUALLY_HIDDEN as g}from"../../internal/visually-hidden.js";import{useMPColor as x,useMPSize as b}from"../../internal/config.js";const j={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},v={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function y(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=/*@__PURE__*/t.forwardRef(function({count:M,page:w,defaultPage:N=1,onPageChange:P,siblingCount:C=1,boundaryCount:S=1,showEdges:K=!1,showArrows:_=!0,size:k,color:z,fullWidth:$=!1,disabled:A=!1,getPageHref:B,locale:D,labels:E,className:H,style:I,...L},R){const W=b(k),q=x(z),F=c(D),G=p(u,F,E),[J,O]=t.useState(N),Q=void 0!==w,T=Math.min(Math.max(w??J,1),Math.max(M,1));if(M<2)return null;const U=function(e,n,t,a){const i=y(1,Math.min(a,e)),r=y(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),o=Math.min(Math.max(n+t,a+2*t+2),r.length>0?r[0]-2:e-1);return[...i,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...y(l,o),...o<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...r]}(M,T,C,S),V=T<=1,X=T>=M,Y=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||B&&!P||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),M);n!==T&&(Q||O(n),P?.(n))})(n))},Z=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",j[W],h[W],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),ee=(t,a,i,r,l,o,s)=>e("li",{className:"flex",children:!B||i||r?n("button",{type:"button",disabled:i,"aria-label":l,"aria-current":r?"page":void 0,className:Z(r,i),onClick:e=>Y(e,a),children:[i?null:e(f,{}),e("span",{className:"relative",children:o})]}):n("a",{href:B(a),rel:s,"aria-label":l,className:Z(!1,!1),onClick:e=>Y(e,a),children:[e(f,{}),e("span",{className:"relative",children:o})]})},t),ne=n=>e(a,{icon:n,size:d[W],className:"rtl:rotate-180"});return n("nav",{ref:R,"aria-label":G.label,"data-mp-size":W,className:["mp-pagination flex",$?"w-full justify-center":"",H??""].filter(Boolean).join(" "),style:{...s(q),...I},...L,children:[n("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${v[W]}`,children:[K?ee("first",1,A||V,!1,G.first,ne(l)):null,_?ee("previous",T-1,A||V,!1,G.previous,ne(i),"prev"):null,U.map((n,t)=>"number"==typeof n?ee(`slot-${t}`,n,A,n===T,m(G.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",j[W],h[W]].join(" "),children:"…"},`slot-${t}`)),_?ee("next",T+1,A||X,!1,G.next,ne(r),"next"):null,K?ee("last",M,A||X,!1,G.last,ne(o)):null]}),e("span",{className:g,"aria-live":"polite",children:m(G.status,{page:String(T),total:String(M)})})]})});

package/dist/components/panes/MPPanes.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent.js";import{pixelsIn as o}from"../../internal/length.js";const i=/*@__PURE__*/n.createContext({basis:null,id:null}),a={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},s={xs:4,sm:6,md:8,lg:10,xl:12};function l(e,t,n){if(null!=e)return"number"==typeof e?t*e/100:o(e,t,n)}export const MPPanes=/*@__PURE__*/n.forwardRef(function({orientation:o="horizontal",resizable:c=!0,color:u="primary",size:d="md",onResize:m,onResizeEnd:f,className:p,style:h,children:g,...v},y){const x=n.Children.toArray(g).filter(n.isValidElement),b=x.length,w=n.useId(),z=n.useRef(null),S=n.useCallback(e=>{z.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),j=n.useRef([]),E=x.map(e=>e.props),[R,M]=n.useState(null),k=R&&R.length===b?R:null,C=n.useRef(null);n.useLayoutEffect(()=>{j.current=E,C.current=k});const L=n.useRef(null);n.useEffect(()=>()=>{null!==L.current&&(document.body.style.userSelect=L.current,L.current=null)},[]);const P="horizontal"===o,$=s[d]*Math.max(0,b-1);function _(e){const t=z.current,n=C.current;if(!c||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(P?r.width:r.height)-$;if(o<=0)return null;const i=j.current[e],a=j.current[e+1],s=n[e]*o,u=s+n[e+1]*o,d=Math.max(l(i?.minSize,o,t)??0,u-(l(a?.maxSize,o,t)??u)),f=Math.min(l(i?.maxSize,o,t)??u,u-(l(a?.minSize,o,t)??0));return f<d?null:{root:t,current:n,lower:d,upper:f,start:s,resize(t){const r=Math.min(f,Math.max(d,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(u-r)/o,M(i),m?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=z.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(P?t.width:t.height)-$;n<=0||M(t=>t&&t.length===b?t:function(e,t,n){const r=e.map(e=>l(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??a)),c=s.reduce((e,t)=>e+t,0);return c<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/c)}(j.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[b,P,$]);const B=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",a[d],"transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none",c?[P?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:S,"data-mp-size":d,className:["mp-panes flex h-full w-full",P?"flex-row":"flex-col","min-h-0 min-w-0",p??""].filter(Boolean).join(" "),style:{...r(u),...h},...v,children:x.map((r,o)=>t(n.Fragment,{children:[o>0?e("div",{role:"separator","aria-orientation":P?"vertical":"horizontal","aria-valuenow":k?Math.round(100*k[o-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!c||void 0,"aria-controls":`${w}-${o-1}`,tabIndex:c?0:-1,className:B,onPointerDown:e=>{0===e.button&&function(e,t){const n=_(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;L.current=o,document.body.style.userSelect="none";const i=P?t.clientX:t.clientY,a=P&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=P?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,L.current=null,f?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(o-1,e)},onKeyDown:e=>{const t=P?"ArrowLeft":"ArrowUp",n=P?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n){e.preventDefault();const t=P&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1;return void function(e,t){const n=_(e);if(!n)return;const r=n.resize(t);f?.(r.map(e=>100*e))}(o-1,(e.key===n?16:-16)*t)}"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=_(e);if(!n)return;const r=n.resize(n[t]-n.start);f?.(r.map(e=>100*e))}(o-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",P?"h-full w-px":"h-px w-full",c?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(i.Provider,{value:{basis:k?`calc((100% - ${$}px) * ${k[o].toFixed(6)})`:null,id:`${w}-${o}`},children:r})]},r.key??o))})});export const MPPane=/*@__PURE__*/n.forwardRef(function({defaultSize:t,minSize:r,maxSize:o,className:a,style:s,children:l,...c},u){const{basis:d,id:m}=n.useContext(i);return e("div",{ref:u,id:m??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",a??""].filter(Boolean).join(" "),style:{flex:d?`0 0 ${d}`:"1 1 0%",...s},...c,children:l})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent.js";import{pixelsIn as o}from"../../internal/length.js";import{useMPColor as i,useMPSize as a}from"../../internal/config.js";const s=/*@__PURE__*/n.createContext({basis:null,id:null}),l={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},c={xs:4,sm:6,md:8,lg:10,xl:12};function u(e,t,n){if(null!=e)return"number"==typeof e?t*e/100:o(e,t,n)}export const MPPanes=/*@__PURE__*/n.forwardRef(function({orientation:o="horizontal",resizable:d=!0,color:m,size:f,onResize:p,onResizeEnd:h,className:g,style:v,children:x,...y},b){const w=i(m),z=a(f),S=n.Children.toArray(x).filter(n.isValidElement),j=S.length,E=n.useId(),R=n.useRef(null),M=n.useCallback(e=>{R.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),k=n.useRef([]),C=S.map(e=>e.props),[L,P]=n.useState(null),$=L&&L.length===j?L:null,_=n.useRef(null);n.useLayoutEffect(()=>{k.current=C,_.current=$});const B=n.useRef(null);n.useEffect(()=>()=>{null!==B.current&&(document.body.style.userSelect=B.current,B.current=null)},[]);const N="horizontal"===o,A=c[z]*Math.max(0,j-1);function D(e){const t=R.current,n=_.current;if(!d||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(N?r.width:r.height)-A;if(o<=0)return null;const i=k.current[e],a=k.current[e+1],s=n[e]*o,l=s+n[e+1]*o,c=Math.max(u(i?.minSize,o,t)??0,l-(u(a?.maxSize,o,t)??l)),m=Math.min(u(i?.maxSize,o,t)??l,l-(u(a?.minSize,o,t)??0));return m<c?null:{root:t,current:n,lower:c,upper:m,start:s,resize(t){const r=Math.min(m,Math.max(c,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(l-r)/o,P(i),p?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=R.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(N?t.width:t.height)-A;n<=0||P(t=>t&&t.length===j?t:function(e,t,n){const r=e.map(e=>u(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??a)),l=s.reduce((e,t)=>e+t,0);return l<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/l)}(k.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[j,N,A]);const I=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",l[z],"transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none",d?[N?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:M,"data-mp-size":z,className:["mp-panes flex h-full w-full",N?"flex-row":"flex-col","min-h-0 min-w-0",g??""].filter(Boolean).join(" "),style:{...r(w),...v},...y,children:S.map((r,o)=>t(n.Fragment,{children:[o>0?e("div",{role:"separator","aria-orientation":N?"vertical":"horizontal","aria-valuenow":$?Math.round(100*$[o-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!d||void 0,"aria-controls":`${E}-${o-1}`,tabIndex:d?0:-1,className:I,onPointerDown:e=>{0===e.button&&function(e,t){const n=D(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;B.current=o,document.body.style.userSelect="none";const i=N?t.clientX:t.clientY,a=N&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=N?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,B.current=null,h?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(o-1,e)},onKeyDown:e=>{const t=N?"ArrowLeft":"ArrowUp",n=N?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n){e.preventDefault();const t=N&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1;return void function(e,t){const n=D(e);if(!n)return;const r=n.resize(t);h?.(r.map(e=>100*e))}(o-1,(e.key===n?16:-16)*t)}"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=D(e);if(!n)return;const r=n.resize(n[t]-n.start);h?.(r.map(e=>100*e))}(o-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",N?"h-full w-px":"h-px w-full",d?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(s.Provider,{value:{basis:$?`calc((100% - ${A}px) * ${$[o].toFixed(6)})`:null,id:`${E}-${o}`},children:r})]},r.key??o))})});export const MPPane=/*@__PURE__*/n.forwardRef(function({defaultSize:t,minSize:r,maxSize:o,className:i,style:a,children:l,...c},u){const{basis:d,id:m}=n.useContext(s);return e("div",{ref:u,id:m??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",i??""].filter(Boolean).join(" "),style:{flex:d?`0 0 ${d}`:"1 1 0%",...a},...c,children:l})});

package/dist/components/pill/MPPill.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale.js";const f={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},h={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},x={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},b={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=/*@__PURE__*/o.forwardRef(function({startIcon:w,endIcon:v,title:g,description:y,details:j,expanded:N=!1,position:k="static",side:_="top",onClick:z,variant:B="filled",size:C="md",color:I="secondary",className:R,style:$,children:H,...P},S){const E=o.useRef(null),F=o.useId(),[L,M]=o.useState(0);o.useEffect(()=>{const e=E.current;if(!e)return;const t=new ResizeObserver(()=>M(e.scrollHeight));return t.observe(e),M(e.scrollHeight),()=>t.disconnect()},[j]);const O=Boolean(z),q=u[C],A=t(n,{children:[m(w)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[C],height:l[C]},children:w}):null,m(g)||m(y)||m(H)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",h[C]].join(" "),children:[m(g)?e("span",{className:"max-w-full truncate",children:g}):null,m(y)?e("span",{className:`max-w-full truncate font-normal ${d} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:y}):null,H]}):null]});return t("div",{ref:S,"data-mp-size":C,"data-mp-variant":B,"data-mp-expanded":N||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",N?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",c[C],x[B],b[k][_],R??""].filter(Boolean).join(" "),style:{...i(I),...$},...P,children:[t("div",{className:["flex shrink-0 items-center py-1",f[C],a[C],O?"ps-0":q,m(v)?"pe-1":O?"pe-0":""].filter(Boolean).join(" "),children:[O?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent font-[inherit] text-inherit","rounded-[inherit]",a[C],q,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(j)?N:void 0,"aria-controls":m(j)?F:void 0,onClick:z,children:[e(s,{}),A]}):A,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(j)?e("div",{id:F,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:N?L:0},...r(!N),children:e("div",{ref:E,className:`${q} pb-2 whitespace-normal ${p[C]}`,children:j})}):null]})});
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale.js";import{useMPSize as f}from"../../internal/config.js";const h={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},x={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},b={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},w={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=/*@__PURE__*/o.forwardRef(function({startIcon:g,endIcon:v,title:j,description:y,details:N,expanded:k=!1,position:_="static",side:z="top",onClick:B,variant:C="filled",size:I,color:R="secondary",className:$,style:H,children:P,...S},E){const F=f(I),L=o.useRef(null),M=o.useId(),[O,q]=o.useState(0);o.useEffect(()=>{const e=L.current;if(!e)return;const t=new ResizeObserver(()=>q(e.scrollHeight));return t.observe(e),q(e.scrollHeight),()=>t.disconnect()},[N]);const A=Boolean(B),D=u[F],G=t(n,{children:[m(g)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[F],height:l[F]},children:g}):null,m(j)||m(y)||m(P)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",x[F]].join(" "),children:[m(j)?e("span",{className:"max-w-full truncate",children:j}):null,m(y)?e("span",{className:`max-w-full truncate font-normal ${d} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:y}):null,P]}):null]});return t("div",{ref:E,"data-mp-size":F,"data-mp-variant":C,"data-mp-expanded":k||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",k?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",c[F],b[C],w[_][z],$??""].filter(Boolean).join(" "),style:{...i(R),...H},...S,children:[t("div",{className:["flex shrink-0 items-center py-1",h[F],a[F],A?"ps-0":D,m(v)?"pe-1":A?"pe-0":""].filter(Boolean).join(" "),children:[A?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent font-[inherit] text-inherit","rounded-[inherit]",a[F],D,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(N)?k:void 0,"aria-controls":m(N)?M:void 0,onClick:B,children:[e(s,{}),G]}):G,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(N)?e("div",{id:M,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:k?O:0},...r(!k),children:e("div",{ref:L,className:`${D} pb-2 whitespace-normal ${p[F]}`,children:N})}):null]})});

package/dist/components/popconfirm/MPPopconfirm.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { MPAlign, MPColor, MPSide, MPSize } from '../../types.js';
+export interface MPPopconfirmProps {
+    /**
+     * The control that asks, and that the question hangs off. Exactly one element,
+     * and it must accept a ref and spread props — every Material Plus component
+     * does.
+     */
+    trigger: React.ReactElement;
+    /** The question, as the popup's heading. */
+    title?: React.ReactNode;
+    /** A line under it — what happens, and to what. */
+    description?: React.ReactNode;
+    /** Anything else the popup should hold. */
+    children?: React.ReactNode;
+    /**
+     * Called when the reader says yes.
+     *
+     * A callback rather than a promise, and that is the whole difference from
+     * [`useMPConfirm`](../feedback/confirm): this one is written where the button
+     * is, so there is already a handler there to put it in.
+     */
+    onConfirm?: () => void;
+    /** Called when they say no. Dismissing counts — see `onOpenChange`. */
+    onCancel?: () => void;
+    /** What the yes button says. @default the translation of `Confirm` */
+    confirmLabel?: React.ReactNode;
+    /** What the no button says. @default the translation of `Cancel` */
+    cancelLabel?: React.ReactNode;
+    /**
+     * The accent the yes button is drawn in. `'error'` is what a destructive
+     * question wants, and it is not the default for the reason `useMPConfirm`
+     * gives: a red button on every confirmation stops being a warning.
+     */
+    color?: MPColor;
+    /** Which edge of the trigger the question appears on. @default 'top' */
+    side?: MPSide;
+    /** @default 'center' */
+    align?: MPAlign;
+    /** @default true */
+    arrow?: boolean;
+    size?: MPSize;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/**
+ * A confirmation that stays where the control is.
+ *
+ * ```tsx
+ * <MPPopconfirm
+ *   trigger={<MPButton color="error">Delete</MPButton>}
+ *   title="Delete this row?"
+ *   confirmLabel="Delete"
+ *   color="error"
+ *   onConfirm={() => remove(id)}
+ * />
+ * ```
+ *
+ * ## When this rather than `useMPConfirm`
+ *
+ * They ask the same question and the difference is **where the reader's eye
+ * is**, which is a real difference and not a stylistic one:
+ *
+ * | | `MPPopconfirm` | [`useMPConfirm`](../feedback/confirm) |
+ * | --- | --- | --- |
+ * | Appears | at the control | in the middle of the screen |
+ * | The page behind | stays put | goes under a scrim |
+ * | Costs | one element | a provider |
+ * | Answers with | a callback | a promise |
+ *
+ * A row of twelve delete buttons is the case for this one: a modal that covered
+ * the table would take away the row the reader was pointing at, and having to
+ * re-find it afterwards is how the wrong row gets deleted. A confirmation about
+ * the *page* — leaving with unsaved changes, an irreversible account action —
+ * wants the modal, because it is not about a thing on the page at all.
+ *
+ * ## Every other way out is *no*
+ *
+ * Escape, a press outside and the cancel button all close it without confirming,
+ * and `onCancel` is called for all three. That is the same rule `useMPConfirm`
+ * follows and for the same reason: the safe answer to "are you sure" is no.
+ *
+ * ## It is a popover, not a dialog
+ *
+ * So it does not trap the focus and the page behind it stays live. That is the
+ * point of the shape — but it also means a reader can walk away from the
+ * question with Tab, which a modal would not allow. Use the modal where the
+ * answer genuinely has to be given.
+ */
+export declare function MPPopconfirm({ trigger, title, description, children, onConfirm, onCancel, confirmLabel, cancelLabel, color: colorProp, side, align, arrow, size: sizeProp, open: openProp, defaultOpen, onOpenChange, className }: MPPopconfirmProps): React.JSX.Element;

package/dist/components/popconfirm/MPPopconfirm.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{MPButton as n}from"../button/MPButton.js";import{MPPopover as i}from"../popover/MPPopover.js";import{useMPLocale as t,useMPMessages as a}from"../../internal/locale.js";import{CONFIRM as s}from"../../internal/messages/confirm.js";import{useMPColor as c,useMPSize as l}from"../../internal/config.js";export function MPPopconfirm({trigger:m,title:p,description:f,children:d,onConfirm:g,onCancel:j,confirmLabel:u,cancelLabel:h,color:x,side:v="top",align:C="center",arrow:P=!0,size:z,open:b,defaultOpen:M,onOpenChange:N,className:O}){const k=l(z),w=c(x),L=a(s,t()),[y,B]=o.useState(M??!1),S=e=>{void 0===b&&B(e),N?.(e)},q=e=>{S(!1),e?g?.():j?.()};return r(i,{trigger:m,title:p,description:f,side:v,align:C,arrow:P,size:k,open:b??y,onOpenChange:e=>{e?S(!0):q(!1)},className:O,children:[d,r("div",{className:"mt-3 flex justify-end gap-1",children:[e(n,{variant:"text",size:"sm",onClick:()=>q(!1),children:h??L.cancel}),e(n,{variant:"text",size:"sm",color:w,onClick:()=>q(!0),children:u??L.confirm})]})]})}

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

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

package/dist/components/popconfirm/index.js

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

package/dist/components/popover/MPPopover.d.ts

@@ -140,4 +140,4 @@ export declare const MPPopoverClose: React.ForwardRefExoticComponent<Omit<import
  * dialog's `surface-container-high` at elevation 3, because a popover has not
  * taken the page and should not sit above the menus that did not either.
  */
-export declare function MPPopover({ trigger, title, description, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, locale: localeProp, width, size, className, style, children }: MPPopoverProps): React.JSX.Element;
+export declare function MPPopover({ trigger, title, description, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, locale: localeProp, width, size: sizeProp, className, style, children }: MPPopoverProps): React.JSX.Element;

package/dist/components/popover/MPPopover.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as s}from"@base-ui/react/popover";import{MPIcon as t}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{cssLength as r}from"../../internal/length.js";import{COMMON as n}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{hasContent as c,META_TEXT as d,PROSE_TEXT as p,SHEET_GAP as f,SHEET_PAD as u,SHEET_TITLE as h}from"../../internal/scale.js";import{FADE as x,PORTAL_LAYER as g}from"../../internal/surface.js";const v={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},b={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=s.Close;export function MPPopover({trigger:j,title:w,description:N,side:O="bottom",align:P="center",sideOffset:y=8,alignOffset:C=0,arrow:z=!1,open:k,defaultOpen:M,onOpenChange:L,modal:B=!1,dismissible:T=!0,showClose:$=!1,closeLabel:A,locale:D,width:I,size:R="md",className:S,style:W,children:_}){const q=a(D),E=l(n,q),F=c(w)||c(N),G=b[R];return o(s.Root,{open:k,defaultOpen:M,modal:B,onOpenChange:(e,o)=>{T||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?L?.(e):o.cancel()},children:[j?e(s.Trigger,{render:j}):null,e(s.Portal,{children:e(s.Positioner,{className:g,side:O,align:P,sideOffset:y,alignOffset:C,children:o(s.Popup,{"data-mp-size":R,className:["mp-popover rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",u[R],f[R],p[R],void 0===I?v[R]:"",x,S??""].filter(Boolean).join(" "),style:{...void 0===I?null:{maxWidth:r(I)},...W},children:[z?e(s.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:e("svg",{width:G,height:G/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-color-surface-container)"})})}):null,F||$?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[c(w)?e(s.Title,{className:`m-0 ${h[R]}`,children:w}):null,c(N)?e(s.Description,{className:`text-mp-on-surface-variant m-0 ${d}`,children:N}):null]}),$?o(s.Close,{"aria-label":A??E.close,className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","rounded-mp-full -m-1 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(m,{}),e(t,{icon:i,size:18})]}):null]}):null,c(_)?e("div",{className:"min-w-0",children:_}):null]})})})]})}
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as i}from"@base-ui/react/popover";import{MPIcon as s}from"../icon/MPIcon.js";import{CloseIcon as t}from"../../constants/icons.js";import{useMPLocale as r,useMPMessages as a}from"../../internal/locale.js";import{cssLength as l}from"../../internal/length.js";import{COMMON as n}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{hasContent as c,META_TEXT as d,PROSE_TEXT as p,SHEET_GAP as f,SHEET_PAD as u,SHEET_TITLE as h}from"../../internal/scale.js";import{FADE as x,PORTAL_LAYER as g}from"../../internal/surface.js";import{useMPSize as v}from"../../internal/config.js";const b={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},j={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=i.Close;export function MPPopover({trigger:w,title:N,description:O,side:P="bottom",align:y="center",sideOffset:C=8,alignOffset:z=0,arrow:k=!1,open:M,defaultOpen:L,onOpenChange:B,modal:T=!1,dismissible:$=!0,showClose:A=!1,closeLabel:D,locale:I,width:R,size:S,className:W,style:_,children:q}){const E=v(S),F=r(I),G=a(n,F),H=c(N)||c(O),J=j[E];return o(i.Root,{open:M,defaultOpen:L,modal:T,onOpenChange:(e,o)=>{$||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?B?.(e):o.cancel()},children:[w?e(i.Trigger,{render:w}):null,e(i.Portal,{children:e(i.Positioner,{className:g,side:P,align:y,sideOffset:C,alignOffset:z,children:o(i.Popup,{"data-mp-size":E,className:["mp-popover rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",u[E],f[E],p[E],void 0===R?b[E]:"",x,W??""].filter(Boolean).join(" "),style:{...void 0===R?null:{maxWidth:l(R)},..._},children:[k?e(i.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:e("svg",{width:J,height:J/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-color-surface-container)"})})}):null,H||A?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[c(N)?e(i.Title,{className:`m-0 ${h[E]}`,children:N}):null,c(O)?e(i.Description,{className:`text-mp-on-surface-variant m-0 ${d}`,children:O}):null]}),A?o(i.Close,{"aria-label":D??G.close,className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","rounded-mp-full -m-1 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(m,{}),e(s,{icon:t,size:18})]}):null]}):null,c(q)?e("div",{className:"min-w-0",children:q}):null]})})})]})}

package/dist/components/progress-box/MPProgressBox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as l}from"../../internal/accent.js";import{META_TEXT as t,STACK_GAP as n}from"../../internal/scale.js";import{SEGMENT_GAP as o,SEGMENT_RADIUS as i,SEGMENT_SIZE as m,progressAriaText as c,progressFraction as u,progressText as f}from"../../internal/progress.js";export const MPProgressBox=/*@__PURE__*/r.forwardRef(function({size:r="md",color:p="primary",count:d=4,value:x=null,min:h=0,max:g=100,label:b,showValue:j=!1,format:y,className:v,style:w},N){const M=u(x,h,g),B=null===M,V=void 0!==y,_=Math.max(1,Math.floor(d));return a(s.Root,{ref:N,value:null===M?null:x??null,min:h,max:g,format:y,getAriaValueText:c(M,V),"data-mp-size":r,className:["mp-progress-box inline-flex flex-col",n[r],v??""].filter(Boolean).join(" "),style:{...l(p),...w},children:[b||j?a("div",{className:["flex items-baseline gap-2",b?"justify-between":"justify-end",t].join(" "),children:[b?e(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:b}):null,j?e(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>f(M,e,V)}):null]}):null,e(s.Track,{className:`flex ${o[r]}`,children:Array.from({length:_},(a,s)=>e("span",{className:["bg-mp-on-surface/12 relative overflow-hidden",m[r],i[r],B?"mp-progress-segment-wave bg-(--_mp-accent)":""].filter(Boolean).join(" "),style:B?{"--_mp-index":s}:void 0,children:B?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--_mp-accent) transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",style:{width:`${Math.min(100,Math.max(0,100*(M*_-s)))}%`}})},s))})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as n}from"@base-ui/react/progress";import{accentSlots as r}from"../../internal/accent.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{META_TEXT as t,STACK_GAP as o}from"../../internal/scale.js";import{SEGMENT_GAP as i,SEGMENT_RADIUS as m,SEGMENT_SIZE as c,progressAriaText as u,progressFraction as f,progressText as p}from"../../internal/progress.js";import{useMPColor as d,useMPSize as h}from"../../internal/config.js";export const MPProgressBox=/*@__PURE__*/l.forwardRef(function({size:l,color:x,count:b=4,value:g=null,min:j=0,max:v=100,label:y,hideLabel:N=!1,showValue:w=!1,format:M,className:B,style:L},V){const _=h(l),k=d(x),z=f(g,j,v),A=null===z,P=void 0!==M,R=N?null:y,T=Math.max(1,Math.floor(b));return a(n.Root,{ref:V,value:null===z?null:g??null,min:j,max:v,format:M,getAriaValueText:u(z,P),"data-mp-size":_,className:["mp-progress-box inline-flex flex-col",o[_],B??""].filter(Boolean).join(" "),style:{...r(k),...L},children:[N&&y?e(n.Label,{className:s,children:y}):null,R||w?a("div",{className:["flex items-baseline gap-2",R?"justify-between":"justify-end",t].join(" "),children:[R?e(n.Label,{className:"text-mp-on-surface min-w-0 truncate",children:R}):null,w?e(n.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>p(z,e,P)}):null]}):null,e(n.Track,{className:`flex ${i[_]}`,children:Array.from({length:T},(a,l)=>e("span",{className:["bg-mp-on-surface/12 relative overflow-hidden",c[_],m[_],A?"mp-progress-segment-wave bg-(--_mp-accent)":""].filter(Boolean).join(" "),style:A?{"--_mp-index":l}:void 0,children:A?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--_mp-accent) transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",style:{width:`${Math.min(100,Math.max(0,100*(z*T-l)))}%`}})},l))})]})});

package/dist/components/progress-circular/MPProgressCircular.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as t}from"../../internal/accent.js";import{CONTROL_GAP as o,META_TEXT as n}from"../../internal/scale.js";import{RING_DIAMETER as l,RING_STROKE as i,progressAriaText as c,progressFraction as m,progressText as u}from"../../internal/progress.js";export const MPProgressCircular=/*@__PURE__*/a.forwardRef(function({size:a="md",color:p="primary",value:f=null,min:h=0,max:d=100,label:x,showValue:k=!1,format:g,className:v,style:y},j){const N=m(f,h,d),w=null===N,b=void 0!==g,$=l[a],L=i[a],V=$/2,z=V-L/2;return e(s.Root,{ref:j,value:null===N?null:f??null,min:h,max:d,format:g,getAriaValueText:c(N,b),"data-mp-size":a,className:["mp-progress-circular inline-flex items-center",o[a],n,v??""].filter(Boolean).join(" "),style:{...t(p),...y},children:[e("svg",{className:w?"mp-progress-circular-turn shrink-0":"shrink-0",width:$,height:$,viewBox:`0 0 ${$} ${$}`,fill:"none","aria-hidden":"true",children:[r("circle",{cx:V,cy:V,r:z,stroke:"var(--_mp-color-on-surface)",strokeOpacity:.12,strokeWidth:L}),r("circle",{cx:V,cy:V,r:z,pathLength:100,stroke:"var(--_mp-accent)",strokeWidth:L,strokeLinecap:"round",className:w?"mp-progress-circular-arc":"transition-[stroke-dashoffset] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",transform:`rotate(-90 ${V} ${V})`,...w?null:{strokeDasharray:100,strokeDashoffset:100*(1-N)}})]}),x?r(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:x}):null,k?r(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:r=>u(N,r,b)}):null]})});
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as t}from"../../internal/accent.js";import{VISUALLY_HIDDEN as o}from"../../internal/visually-hidden.js";import{CONTROL_GAP as l,META_TEXT as n}from"../../internal/scale.js";import{RING_DIAMETER as i,RING_STROKE as c,progressAriaText as m,progressFraction as u,progressText as p}from"../../internal/progress.js";import{useMPColor as f,useMPSize as h}from"../../internal/config.js";export const MPProgressCircular=/*@__PURE__*/a.forwardRef(function({size:a,color:d,value:x=null,min:k=0,max:g=100,label:j,hideLabel:v=!1,showValue:y=!1,format:N,className:b,style:w},L){const $=h(a),V=f(d),z=u(x,k,g),B=null===z,D=void 0!==N,P=i[$],R=c[$],W=P/2,_=W-R/2;return e(s.Root,{ref:L,value:null===z?null:x??null,min:k,max:g,format:N,getAriaValueText:m(z,D),"data-mp-size":$,className:["mp-progress-circular inline-flex items-center",l[$],n,b??""].filter(Boolean).join(" "),style:{...t(V),...w},children:[e("svg",{className:B?"mp-progress-circular-turn shrink-0":"shrink-0",width:P,height:P,viewBox:`0 0 ${P} ${P}`,fill:"none","aria-hidden":"true",children:[r("circle",{cx:W,cy:W,r:_,stroke:"var(--_mp-color-on-surface)",strokeOpacity:.12,strokeWidth:R}),r("circle",{cx:W,cy:W,r:_,pathLength:100,stroke:"var(--_mp-accent)",strokeWidth:R,strokeLinecap:"round",className:B?"mp-progress-circular-arc":"transition-[stroke-dashoffset] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",transform:`rotate(-90 ${W} ${W})`,...B?null:{strokeDasharray:100,strokeDashoffset:100*(1-z)}})]}),v?j?r(s.Label,{className:o,children:j}):null:j?r(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:j}):null,y?r(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:r=>p(z,r,D)}):null]})});

package/dist/components/progress-linear/MPProgressLinear.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Progress as l}from"@base-ui/react/progress";import{accentSlots as s}from"../../internal/accent.js";import{META_TEXT as n,STACK_GAP as t}from"../../internal/scale.js";import{BAR_THICKNESS as i,progressAriaText as o,progressFraction as m,progressText as c}from"../../internal/progress.js";export const MPProgressLinear=/*@__PURE__*/r.forwardRef(function({size:u="md",color:p="primary",value:f=null,min:d=0,max:x=100,label:g,showValue:h=!1,format:j,className:b,style:N},w){const v=m(f,d,x),y=null===v,V=void 0!==j,$="absolute inset-y-0 rounded-mp-full bg-(--_mp-accent)";return a(l.Root,{ref:w,value:null===v?null:f??null,min:d,max:x,format:j,getAriaValueText:o(v,V),"data-mp-size":u,className:["mp-progress-linear flex w-full flex-col",t[u],b??""].filter(Boolean).join(" "),style:{...s(p),...N},children:[g||h?a("div",{className:["flex items-baseline gap-2",g?"justify-between":"justify-end",n].join(" "),children:[g?e(l.Label,{className:"text-mp-on-surface min-w-0 truncate",children:g}):null,h?e(l.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>c(v,e,V)}):null]}):null,e(l.Track,{className:["rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",i[u]].join(" "),children:y?a(r.Fragment,{children:[e("span",{className:`${$} mp-progress-linear-lead`}),e("span",{className:`${$} mp-progress-linear-trail`})]}):e(l.Indicator,{className:`${$} start-0 transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard`})})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as r}from"@base-ui/react/progress";import{accentSlots as s}from"../../internal/accent.js";import{VISUALLY_HIDDEN as n}from"../../internal/visually-hidden.js";import{META_TEXT as t,STACK_GAP as i}from"../../internal/scale.js";import{BAR_THICKNESS as o,progressAriaText as m,progressFraction as c,progressText as u}from"../../internal/progress.js";import{useMPColor as f,useMPSize as p}from"../../internal/config.js";export const MPProgressLinear=/*@__PURE__*/l.forwardRef(function({size:d,color:h,value:j=null,min:g=0,max:x=100,label:b,hideLabel:N=!1,showValue:v=!1,format:w,className:y,style:L},V){const $=p(d),k=f(h),z=c(j,g,x),P=null===z,R=N?null:b,T=void 0!==w,A="absolute inset-y-0 rounded-mp-full bg-(--_mp-accent)";return a(r.Root,{ref:V,value:null===z?null:j??null,min:g,max:x,format:w,getAriaValueText:m(z,T),"data-mp-size":$,className:["mp-progress-linear flex w-full flex-col",i[$],y??""].filter(Boolean).join(" "),style:{...s(k),...L},children:[N&&b?e(r.Label,{className:n,children:b}):null,R||v?a("div",{className:["flex items-baseline gap-2",R?"justify-between":"justify-end",t].join(" "),children:[R?e(r.Label,{className:"text-mp-on-surface min-w-0 truncate",children:R}):null,v?e(r.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>u(z,e,T)}):null]}):null,e(r.Track,{className:["rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",o[$]].join(" "),children:P?a(l.Fragment,{children:[e("span",{className:`${A} mp-progress-linear-lead`}),e("span",{className:`${A} mp-progress-linear-trail`})]}):e(r.Indicator,{className:`${A} start-0 transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard`})})]})});

package/dist/components/radio-group/MPRadioGroup.d.ts

@@ -11,6 +11,12 @@ export interface MPRadioProps {
     disabled?: boolean;
     /** The id put on the control and pointed at by the label. */
     id?: string;
+    /**
+     * Added to the option's outermost element — the box around the dot, its label
+     * and its description, rather than to the dot itself.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * One option in an `MPRadioGroup`.
@@ -64,6 +70,12 @@ export interface MPRadioGroupProps {
     name?: string;
     /** The `MPRadio`s. */
     children?: React.ReactNode;
+    /**
+     * Added to the group's outermost element — the box around the set's label, the
+     * options and the supporting line, rather than to the run of options.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * A Material Design radio group: a set of options where exactly one is chosen.

package/dist/components/radio-group/MPRadioGroup.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as n}from"@base-ui/react/radio-group";import{Field as l}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{MPStateLayer as t}from"../../internal/StateLayer.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale.js";const u={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[9px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-[11px]",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},m=/*@__PURE__*/r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/r.forwardRef(function({value:n,label:o,description:s,disabled:f=!1,id:x},g){const h=r.useContext(m),b=u[h.size],y=r.useId(),z=x??y;return e(l.Root,{className:"mp-radio inline-block align-top",disabled:f,"data-mp-value":n,children:a("div",{className:["flex items-start gap-3",c[h.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(i.Root,{ref:g,id:z,value:n,disabled:f,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",b.ring,f?"border-mp-on-surface/38 cursor-default":[h.readOnly?"cursor-default":"cursor-pointer",h.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[f?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",b.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",b.fill,"transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-0 data-starting-style:opacity-0","data-ending-style:scale-0 data-ending-style:opacity-0",f?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(s)?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(l.Label,{htmlFor:z,className:["leading-[1.4]",f?"text-mp-on-surface/38 cursor-default":h.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(s)?e(l.Description,{className:`${d} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:s}):null]}):null]})})});export const MPRadioGroup=/*@__PURE__*/r.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:u,description:f,errorMessage:x,orientation:g="vertical",size:h="md",color:b="primary",required:y=!1,disabled:z=!1,readOnly:v=!1,name:j,children:N},R){const O=p(x),k=O?"error":b,w=r.useId(),M=r.useMemo(()=>({size:h,readOnly:v,invalid:O}),[h,v,O]);return e(m.Provider,{value:M,children:a(l.Root,{className:"mp-radio-group flex flex-col gap-2",disabled:z,invalid:O,"data-mp-size":h,"data-mp-orientation":g,style:o(k),children:[p(u)?a("span",{id:w,className:[d,z?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[u,y?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(n,{ref:R,"aria-labelledby":p(u)?w:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:z,readOnly:v,required:y,name:j,className:["flex","horizontal"===g?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:N}),e(s,{description:f,errorMessage:x})]})})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as n}from"@base-ui/react/radio-group";import{Field as l}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{MPStateLayer as t}from"../../internal/StateLayer.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale.js";import{useMPColor as m,useMPSize as u}from"../../internal/config.js";const f={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[9px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-[11px]",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},g=/*@__PURE__*/r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/r.forwardRef(function({value:n,label:o,description:s,disabled:m=!1,id:u,className:x,style:h},b){const y=r.useContext(g),z=f[y.size],j=r.useId(),v=u??j;return e(l.Root,{className:["mp-radio inline-block align-top",x??""].filter(Boolean).join(" "),style:h,disabled:m,"data-mp-value":n,children:a("div",{className:["flex items-start gap-3",c[y.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(i.Root,{ref:b,id:v,value:n,disabled:m,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",z.ring,m?"border-mp-on-surface/38 cursor-default":[y.readOnly?"cursor-default":"cursor-pointer",y.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[m?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",z.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",z.fill,"transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-0 data-starting-style:opacity-0","data-ending-style:scale-0 data-ending-style:opacity-0",m?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(s)?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(l.Label,{htmlFor:v,className:["leading-[1.4]",m?"text-mp-on-surface/38 cursor-default":y.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(s)?e(l.Description,{className:`${d} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:s}):null]}):null]})})});export const MPRadioGroup=/*@__PURE__*/r.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:f,description:x,errorMessage:h,orientation:b="vertical",size:y,color:z,required:j=!1,disabled:v=!1,readOnly:N=!1,name:R,children:O,className:k,style:w},M){const _=u(y),C=m(z),V=p(h),I=V?"error":C,P=r.useId(),S=r.useMemo(()=>({size:_,readOnly:N,invalid:V}),[_,N,V]);return e(g.Provider,{value:S,children:a(l.Root,{className:["mp-radio-group flex flex-col gap-2",k??""].filter(Boolean).join(" "),disabled:v,invalid:V,"data-mp-size":_,"data-mp-orientation":b,style:{...o(I),...w},children:[p(f)?a("span",{id:P,className:[d,v?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[f,j?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(n,{ref:M,"aria-labelledby":p(f)?P:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:v,readOnly:N,required:j,name:R,className:["flex","horizontal"===b?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:O}),e(s,{description:x,errorMessage:h})]})})});

package/dist/components/rating/MPRating.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{MPIcon as i}from"../icon/MPIcon.js";import{StarIcon as n}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{fillMessage as o}from"../../internal/i18n.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{RATING as m}from"../../internal/messages/rating.js";import{VISUALLY_HIDDEN as c}from"../../internal/visually-hidden.js";const d={xs:16,sm:20,md:24,lg:30,xl:36},u={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const MPRating=/*@__PURE__*/a.forwardRef(function({value:p,defaultValue:h=0,onValueChange:f,count:g=5,precision:x=1,icon:y,emptyIcon:v,clearable:j=!0,readOnly:b=!1,disabled:M=!1,name:N,required:P=!1,size:w="md",color:S="primary",locale:R,labels:_,structuredData:z=!1,className:I,style:k,onPointerLeave:q,...C},L){const V=s(R),A=l(m,V,_),B=a.useId(),F=N??B,[D,E]=a.useState(h),O=void 0!==p,T=O?p:D,[G,H]=a.useState(null),J=Math.max(1,Math.floor(g)),K=x>0&&x<=1?x:1,Q=Math.round(1/K),U=Math.max(0,Math.min(J,G??T)),W=e=>e<=0?A.empty:o(A.value,{value:String(e),max:String(J)}),X=e=>{O||E(e),f?.(e)},Y=t=>{const a=e(i,{icon:n,size:d[w],className:t?"[&>svg]:fill-current":""});return(t?y:v)??a},Z=Array.from({length:J},(a,i)=>{const n=Math.max(0,Math.min(1,U-i));return t("span",{className:["mp-rating__star relative inline-flex shrink-0","rounded-mp-xs",b||M?"":["outline-mp-secondary has-[:focus-visible]:outline-2","has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-solid"].join(" ")].filter(Boolean).join(" "),style:{width:d[w],height:d[w]},children:[e("span",{className:["flex items-center justify-center",M?"text-mp-on-surface/38":"text-mp-outline"].join(" "),style:{width:d[w],height:d[w]},children:Y(!1)}),e("span",{"aria-hidden":"true",className:"mp-rating__fill pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*n+"%"},children:e("span",{className:["flex items-center justify-center","transition-colors duration-(--mp-sys-motion-duration-short4)",M?"text-mp-on-surface/38":"text-(--_mp-accent)"].join(" "),style:{width:d[w],height:d[w]},children:Y(!0)})}),b?null:Array.from({length:Q},(t,a)=>{const n=Number((i+(a+1)*K).toFixed(4));return e("label",{className:["absolute inset-y-0",M?"":"cursor-pointer"].join(" "),style:{insetInlineStart:100*a/Q+"%",width:100/Q+"%"},onPointerEnter:()=>{M||H(n)},children:e("input",{type:"radio",className:c,name:F,value:n,checked:T===n,disabled:M,required:P,"aria-label":W(n),onChange:()=>X(n),onClick:()=>{j&&T===n&&X(0)}})},n)})]},i)}),$=["mp-rating inline-flex items-center align-middle",u[w],I??""].filter(Boolean).join(" "),ee={...r(S),...k};if(b){const i=Math.max(0,Math.min(J,T));return t("div",{ref:L,role:"img","data-mp-size":w,"aria-label":W(i),itemScope:z||void 0,itemType:z?"https://schema.org/Rating":void 0,className:$,style:ee,onPointerLeave:q,...C,children:[z?t(a.Fragment,{children:[e("meta",{itemProp:"ratingValue",content:String(i)}),e("meta",{itemProp:"bestRating",content:String(J)}),e("meta",{itemProp:"worstRating",content:"0"})]}):null,Z]})}return e("div",{ref:L,role:"radiogroup","data-mp-size":w,"aria-label":A.label,"aria-disabled":M||void 0,"aria-required":P||void 0,className:$,style:ee,onPointerLeave:e=>{H(null),q?.(e)},...C,children:Z})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as i}from"../icon/MPIcon.js";import{StarIcon as a}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{fillMessage as o}from"../../internal/i18n.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{RATING as m}from"../../internal/messages/rating.js";import{VISUALLY_HIDDEN as c}from"../../internal/visually-hidden.js";import{useMPColor as d,useMPSize as u}from"../../internal/config.js";const p={xs:16,sm:20,md:24,lg:30,xl:36},h={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const MPRating=/*@__PURE__*/n.forwardRef(function({value:f,defaultValue:g=0,onValueChange:x,count:v=5,precision:y=1,icon:j,emptyIcon:b,clearable:M=!0,readOnly:N=!1,disabled:P=!1,name:w,required:S=!1,size:R,color:_,locale:z,labels:I,structuredData:k=!1,className:q,style:C,onPointerLeave:L,...V},A){const B=u(R),F=d(_),D=s(z),E=l(m,D,I),O=n.useId(),T=w??O,[G,H]=n.useState(g),J=void 0!==f,K=J?f:G,[Q,U]=n.useState(null),W=Math.max(1,Math.floor(v)),X=y>0&&y<=1?y:1,Y=Math.round(1/X),Z=Math.max(0,Math.min(W,Q??K)),$=e=>e<=0?E.empty:o(E.value,{value:String(e),max:String(W)}),ee=e=>{J||H(e),x?.(e)},te=t=>{const n=e(i,{icon:a,size:p[B],className:t?"[&>svg]:fill-current":""});return(t?j:b)??n},ne=Array.from({length:W},(n,i)=>{const a=Math.max(0,Math.min(1,Z-i));return t("span",{className:["mp-rating__star relative inline-flex shrink-0","rounded-mp-xs",N||P?"":["outline-mp-secondary has-[:focus-visible]:outline-2","has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-solid"].join(" ")].filter(Boolean).join(" "),style:{width:p[B],height:p[B]},children:[e("span",{className:["flex items-center justify-center",P?"text-mp-on-surface/38":"text-mp-outline"].join(" "),style:{width:p[B],height:p[B]},children:te(!1)}),e("span",{"aria-hidden":"true",className:"mp-rating__fill pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*a+"%"},children:e("span",{className:["flex items-center justify-center","transition-colors duration-(--mp-sys-motion-duration-short4)",P?"text-mp-on-surface/38":"text-(--_mp-accent)"].join(" "),style:{width:p[B],height:p[B]},children:te(!0)})}),N?null:Array.from({length:Y},(t,n)=>{const a=Number((i+(n+1)*X).toFixed(4));return e("label",{className:["absolute inset-y-0",P?"":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/Y+"%",width:100/Y+"%"},onPointerEnter:()=>{P||U(a)},children:e("input",{type:"radio",className:c,name:T,value:a,checked:K===a,disabled:P,required:S,"aria-label":$(a),onChange:()=>ee(a),onClick:()=>{M&&K===a&&ee(0)}})},a)})]},i)}),ie=["mp-rating inline-flex items-center align-middle",h[B],q??""].filter(Boolean).join(" "),ae={...r(F),...C};if(N){const i=Math.max(0,Math.min(W,K));return t("div",{ref:A,role:"img","data-mp-size":B,"aria-label":$(i),itemScope:k||void 0,itemType:k?"https://schema.org/Rating":void 0,className:ie,style:ae,onPointerLeave:L,...V,children:[k?t(n.Fragment,{children:[e("meta",{itemProp:"ratingValue",content:String(i)}),e("meta",{itemProp:"bestRating",content:String(W)}),e("meta",{itemProp:"worstRating",content:"0"})]}):null,ne]})}return e("div",{ref:A,role:"radiogroup","data-mp-size":B,"aria-label":E.label,"aria-disabled":P||void 0,"aria-required":S||void 0,className:ie,style:ae,onPointerLeave:e=>{U(null),L?.(e)},...V,children:ne})});

package/dist/components/segmented-button/MPSegmentedButton.d.ts

@@ -50,6 +50,13 @@ export interface MPSegmentedButtonProps extends MPStyleProps {
     disabled?: boolean;
     /** The accessible name of the set. */
     'aria-label'?: string;
+    /**
+     * Added to the set rather than to a segment. A segment carries
+     * `mp-segmented-button__segment`, which is what a descendant selector reaches
+     * one by.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * A Material Design segmented button: two to five choices in one pill.

package/dist/components/segmented-button/MPSegmentedButton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{Toggle as n}from"@base-ui/react/toggle";import{ToggleGroup as o}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as i}from"../../constants/icons.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as u,CONTROL_TEXT as m}from"../../internal/scale.js";export const MPSegmentedButton=/*@__PURE__*/r.forwardRef(function({items:r,value:p,defaultValue:f,onValueChange:b,multiple:h=!1,showCheck:g=!0,size:j="md",fullWidth:x=!1,disabled:y=!1,"aria-label":v},w){return e(o,{ref:w,"aria-label":v,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:y,"data-mp-size":j,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",y?"border-mp-on-surface/12":"border-mp-outline",x?"flex w-full":"inline-flex w-fit",d[j]].join(" "),children:r.map((r,o)=>{const d=y||r.disabled;return t(n,{value:r.value,disabled:r.disabled,className:["mp-segmented-button__segment group relative flex h-full items-center","box-border justify-center bg-transparent font-[inherit] whitespace-nowrap","select-none","appearance-none overflow-hidden outline-none","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",m[j],l[j],u[j],0===o?"":"border-s",d?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":["border-mp-outline cursor-pointer","text-mp-on-surface","data-pressed:bg-mp-secondary-container","data-pressed:text-mp-on-secondary-container"].join(" "),x?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(s,{}),g||r.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[j],height:c[j]},children:[g?e("span",{className:["absolute inset-0 flex items-center justify-center opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-pressed:opacity-100"].join(" "),children:e(a,{icon:i,size:c[j]})}):null,r.icon?e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",g?"group-data-pressed:opacity-0":""].filter(Boolean).join(" "),children:r.icon}):null]}):null,e("span",{className:"truncate",children:r.label})]},`${o}:${r.value}`)})})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Toggle as o}from"@base-ui/react/toggle";import{ToggleGroup as r}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as s}from"../../constants/icons.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as c,CONTROL_ICON as d,CONTROL_PAD_X as m,CONTROL_TEXT as u}from"../../internal/scale.js";import{useMPSize as p}from"../../internal/config.js";export const MPSegmentedButton=/*@__PURE__*/n.forwardRef(function({items:n,value:f,defaultValue:b,onValueChange:h,multiple:g=!1,showCheck:y=!0,size:j,fullWidth:x=!1,disabled:v=!1,"aria-label":w,className:N,style:B},V){const k=p(j);return e(r,{ref:V,"aria-label":w,value:f,defaultValue:b,onValueChange:e=>h?.(e),multiple:g,disabled:v,"data-mp-size":k,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",v?"border-mp-on-surface/12":"border-mp-outline",x?"flex w-full":"inline-flex w-fit",c[k],N??""].filter(Boolean).join(" "),style:B,children:n.map((n,r)=>{const c=v||n.disabled;return t(o,{value:n.value,disabled:n.disabled,className:["mp-segmented-button__segment group relative flex h-full items-center","box-border justify-center bg-transparent font-[inherit] whitespace-nowrap","select-none","appearance-none overflow-hidden outline-none","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",u[k],l[k],m[k],0===r?"":"border-s",c?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":["border-mp-outline cursor-pointer","text-mp-on-surface","data-pressed:bg-mp-secondary-container","data-pressed:text-mp-on-secondary-container"].join(" "),x?"flex-1":""].filter(Boolean).join(" "),children:[c?null:e(i,{}),y||n.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:d[k],height:d[k]},children:[y?e("span",{className:["absolute inset-0 flex items-center justify-center opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-pressed:opacity-100"].join(" "),children:e(a,{icon:s,size:d[k]})}):null,n.icon?e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",y?"group-data-pressed:opacity-0":""].filter(Boolean).join(" "),children:n.icon}):null]}):null,e("span",{className:"truncate",children:n.label})]},`${r}:${n.value}`)})})});