material-plus-ui 1.3.1 → 1.5.0

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

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPSize } from '../../types.js';
+export interface MPNavigationMenuProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Which way the row runs. `vertical` is a rail whose panels open beside it
+     * rather than under it; the arrow keys follow either way.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /** Which item's panel is open, by its `value`. Nullish is closed. */
+    value?: string | null;
+    /** Which starts open, for an uncontrolled menu. */
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    /**
+     * How long the pointer rests on an item before its panel opens, in
+     * milliseconds.
+     */
+    delay?: number;
+    /** And how long a panel stays after the pointer leaves. */
+    closeDelay?: number;
+    /**
+     * Distance from the row, in pixels.
+     * @default 8
+     */
+    sideOffset?: number;
+    /**
+     * The row's height and type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family an open item's label reads. The panel itself stays
+     * neutral, as MD3's menu surface does.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * The name the `<nav>` is announced by, through `aria-label` in the rest
+     * props.
+     *
+     * There is deliberately no default. A generic one would say nothing a screen
+     * reader was not already saying — it announces an unnamed `<nav>` as
+     * "navigation" on its own — so a name is only worth having when it
+     * distinguishes this bar from another region on the page.
+     *
+     * Which is exactly when it becomes necessary: a page with a main bar, a
+     * footer's links and a table of contents offers three regions called
+     * "navigation" and no way to tell them apart. Name them the moment there is
+     * more than one.
+     */
+    children?: React.ReactNode;
+}
+export interface MPNavigationMenuItemProps {
+    /** The word in the row. */
+    label: React.ReactNode;
+    /**
+     * Makes the item a plain link rather than something that opens a panel.
+     *
+     * An item with an `href` and no children is a **destination**, and it is
+     * announced as one — which is the whole reason a site's navigation is not an
+     * [MPMenu](../inputs/menu).
+     */
+    href?: string;
+    /** Where the link opens. Ignored without `href`. */
+    target?: string;
+    /**
+     * The link's relationship to the page. Ignored without `href`.
+     *
+     * Left unset, a `target="_blank"` destination gets `noopener noreferrer` —
+     * the pair that stops the opened page reaching back through `window.opener`.
+     * Setting it replaces that rather than adding to it, so a destination that
+     * also needs `nofollow` should say `rel="noopener noreferrer nofollow"`.
+     */
+    rel?: string;
+    /** A glyph before the label. */
+    startIcon?: React.ReactNode;
+    /**
+     * Identifies the item, for a controlled menu. Base UI gives each item an
+     * identity of its own, so an uncontrolled menu needs none.
+     */
+    value?: string;
+    /** Unavailable. The word stays in the row and opens nothing. */
+    disabled?: boolean;
+    /**
+     * How many columns the panel lays its links out in.
+     * @default 1
+     */
+    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. */
+    href: string;
+    /** The row's name. */
+    title: React.ReactNode;
+    /** A second line under it, one step down the scale and muted. */
+    description?: React.ReactNode;
+    /** A glyph before the title. */
+    startIcon?: React.ReactNode;
+}
+/**
+ * One row inside a panel: where it goes, what it is called, and a line saying
+ * what is there.
+ *
+ * A real `<a>`, which is the point of the whole component — a site's navigation
+ * is a list of destinations, and a destination that is a `<div>` with a click
+ * handler is not in the link list, not on the status bar and not in a crawler's
+ * index.
+ */
+export declare const MPNavigationMenuLink: React.ForwardRefExoticComponent<MPNavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * One word in the row, and what opens under it.
+ *
+ * With children it is a trigger and a panel; with an `href` and nothing else it
+ * 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, className, style }: MPNavigationMenuItemProps): React.JSX.Element;
+/**
+ * A site's navigation: a row of destinations, some of which open a panel of more
+ * of them.
+ *
+ * ## Why this is not an MPMenu
+ *
+ * Because of what the rows **are**.
+ *
+ * An [MPMenu](../inputs/menu) holds actions, so its rows are `menuitem`s and the
+ * whole thing is a widget that takes the arrow keys. This holds links, so it is
+ * a `<nav>` full of real `<a>`s — which is what puts each destination in a
+ * screen reader's link list, on the browser's status bar, on the middle-click
+ * menu and in a crawler's index.
+ *
+ * The rule is short: reach for a menu when the row **does** something, and for
+ * this when the row **goes** somewhere.
+ *
+ * ## One panel, resized
+ *
+ * One panel is open at a time and it resizes between items rather than closing
+ * and reopening, which is Base UI's doing. It is also why the popup animates its
+ * width and height as well as its opacity: crossing the row should read as one
+ * surface following the pointer, not as three sheets flashing.
+ *
+ * ## Where it goes
+ *
+ * In an [MPHeader](../layout/header)'s middle slot, which is what that slot is
+ * for. Down the side of a page it is `orientation="vertical"`, which is a rail
+ * whose panels open beside it.
+ */
+export declare const MPNavigationMenu: React.ForwardRefExoticComponent<MPNavigationMenuProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +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"}),y=/*@__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(" "),N={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:y,...N},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(" "),...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,y]})]})});export function MPNavigationMenuItem({label:s,href:g,target:x,rel:y,startIcon:j,value:b,disabled:w=!1,columns:M=1,children:P,className:_,style:z}){const{size:k}=t.useContext(v),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:b,children:C?n(i.Link,{href:g,target:x,rel:l(x,y),className:L,style:z,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:L,style:z,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[k]})})]}),e(i.Content,{className:`mp-navigation-menu__panel grid gap-1 ${N[k]}`,style:I>1?{gridTemplateColumns:`repeat(${I}, 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:N,...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:N}),e(i.Portal,{children:e(i.Positioner,{className:x,sideOffset:d,collisionPadding:12,style:s(f),children:e(i.Popup,{className:y,children:e(i.Viewport,{})})})})]})})});

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

@@ -0,0 +1,2 @@
+export { MPNavigationMenu, MPNavigationMenuItem, MPNavigationMenuLink } from './MPNavigationMenu.js';
+export type { MPNavigationMenuItemProps, MPNavigationMenuLinkProps, MPNavigationMenuProps } from './MPNavigationMenu.js';

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

@@ -0,0 +1 @@
+export{MPNavigationMenu,MPNavigationMenuItem,MPNavigationMenuLink}from"./MPNavigationMenu.js";

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

@@ -49,16 +49,25 @@ export interface MPNumberFieldProps extends MPStyleProps {
      * report `1240`.
      */
     format?: Intl.NumberFormatOptions;
-    /** Which locale the number is written and parsed in. Defaults to the runtime's. */
+    /**
+     * Which locale the number is written and parsed in. Defaults to the runtime's.
+     *
+     * A plain BCP 47 string also names the language the two steppers are announced
+     * in; anything wider falls back to the nearest `MPLocaleProvider`, then to
+     * English.
+     */
     locale?: Intl.LocalesArgument;
     /**
      * Where the steppers sit, or `none` for a field without them.
      * @default 'end'
      */
     steppers?: MPNumberFieldSteppers;
-    /** The accessible name of the increment button. @default 'Increase' */
+    /**
+     * The accessible name of the increment button. Defaults to the word for it in
+     * `locale`.
+     */
     incrementLabel?: string;
-    /** The accessible name of the decrement button. @default 'Decrease' */
+    /** The same for the decrement button. */
     decrementLabel?: string;
     /**
      * Label for the field, drawn in the outline's notch and — while the field is
@@ -98,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.
@@ -114,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, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size, 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 n}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 s}from"../../constants/icons.js";import{MPFieldLabel as o,MPFieldOutline as p,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{MPSupportingText as c}from"../../internal/SupportingText.js";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale.js";const x={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:g,defaultValue:b,onValueChange:j,onValueCommitted:v,min:N,max:z,step:y,largeStep:S,smallStep:w,allowWheelScrub:I=!1,format:V,locale:k,steppers:q="end",incrementLabel:C="Increase",decrementLabel:L="Decrease",label:M,floatingLabel:F=!0,description:O,errorMessage:P,placeholder:W,startIcon:D,size:R="md",fullWidth:_=!1,required:B=!1,disabled:G=!1,readOnly:T=!1,name:$,id:A}){const E=h(P),H=x[R],J=l.useId(),K=A??J,Q="none"!==q&&!T&&!G,[U,X]=l.useState(b??null),Y=void 0===g?U:g,{shrunk:Z,focusProps:ee}=d({floating:F&&h(M),filled:null!==Y,pinned:!!D||Q&&"split"===q}),ae=/*@__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",H.stepper].join(" "),le=a(n.Decrement,{"aria-label":L,className:ae,children:[e(m,{}),e(t,{icon:s,size:u[R]})]}),ne=a(n.Increment,{"aria-label":C,className:ae,children:[e(m,{}),e(t,{icon:i,size:u[R]})]});return a(r.Root,{className:["mp-number-field group flex-col align-top",_?"flex w-full":"inline-flex w-fit"].join(" "),disabled:G,invalid:E,"data-mp-size":R,...ee,children:[e(n.Root,{id:K,name:$,className:"contents",value:g,defaultValue:b,onValueChange:e=>{X(e),j?.(e)},onValueCommitted:e=>v?.(e),min:N,max:z,step:y,largeStep:S,smallStep:w,allowWheelScrub:I,format:V,locale:k,disabled:G,readOnly:T,required:B,children:a("div",{className:"relative w-full",children:[a(n.Group,{className:["flex w-full items-center gap-2",H.height,Q&&"end"===q?`${H.padding} pe-1`:Q&&"split"===q?"px-1":H.padding].join(" "),children:[Q&&"split"===q?le:null,D?e("span",{className:["flex shrink-0 items-center",G?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:D}):null,e(n.Input,{placeholder:Z?W:void 0,className:["w-full min-w-0 flex-1 tabular-nums",f[R],"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",Q&&"split"===q?"text-center":""].filter(Boolean).join(" ")}),Q&&"end"===q?a("span",{className:"flex shrink-0 items-center",children:[le,ne]}):null,Q&&"split"===q?ne:null]}),e(p,{label:M,required:B,notched:Z}),h(M)?e(o,{size:R,label:M,required:B,htmlFor:K,shrunk:Z}):null]})}),e(c,{description:O,errorMessage:P,className:H.padding})]})}
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a 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 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 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:y,onValueChange:N,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:B,errorMessage:R,placeholder:_,startIcon:D,size:G="md",fullWidth:T=!1,required:$=!1,disabled:A=!1,readOnly:E=!1,name:H,id:J,className:K,style:Q}){const U=c(u,d("string"==typeof L?L:void 0)),X=b(R),Y=j[G],Z=a.useId(),ee=J??Z,le="none"!==M&&!E&&!A,[ae,re]=a.useState(y??null),ne=void 0===v?ae:v,{shrunk:te,focusProps:ie}=m({floating:W&&b(P),filled:null!==ne,pinned:!!D||le&&"split"===M}),se=/*@__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",Y.stepper].join(" "),oe=l(r.Decrement,{"aria-label":O??U.decrease,className:se,children:[e(f,{}),e(t,{icon:s,size:g[G]})]}),pe=l(r.Increment,{"aria-label":F??U.increase,className:se,children:[e(f,{}),e(t,{icon:i,size:g[G]})]});return l(n.Root,{className:["mp-number-field group flex-col align-top",T?"flex w-full":"inline-flex w-fit",K??""].filter(Boolean).join(" "),style:Q,disabled:A,invalid:X,"data-mp-size":G,...ie,children:[e(r.Root,{id:ee,name:H,className:"contents",value:v,defaultValue:y,onValueChange:e=>{re(e),N?.(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:l("div",{className:"relative w-full",children:[l(r.Group,{className:["flex w-full items-center gap-2",Y.height,le&&"end"===M?`${Y.padding} pe-1`:le&&"split"===M?"px-1":Y.padding].join(" "),children:[le&&"split"===M?oe: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:te?_: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",le&&"split"===M?"text-center":""].filter(Boolean).join(" ")}),le&&"end"===M?l("span",{className:"flex shrink-0 items-center",children:[oe,pe]}):null,le&&"split"===M?pe:null]}),e(p,{label:P,required:$,notched:te}),b(P)?e(o,{size:G,label:P,required:$,htmlFor:ee,shrunk:te}):null]})}),e(h,{description:B,errorMessage:R,className:Y.padding})]})}

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

@@ -73,9 +73,15 @@ export interface MPOverlayProps {
      * this library does: an overlay that holds nothing readable — a bare spinner, a
      * `clear` sheet — still has to say what it is, and the alternative is a modal
      * region a screen reader announces as nothing at all.
-     * @default 'Overlay'
+     *
+     * Defaults to the word for it in `locale`.
      */
     label?: string;
+    /**
+     * Which language that default is written in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /** What sits on top — a spinner, a line of text, a small card. */
     children?: React.ReactNode;
     className?: string;
@@ -93,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, className, style, children }: MPOverlayProps): React.JSX.Element;
+export declare function MPOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, 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{FADE as s,PORTAL_LAYER as l,SCRIM as t}from"../../internal/surface.js";import{SHEET_PAD as i}from"../../internal/scale.js";const n={scrim:t,blur:"bg-mp-scrim/20 [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-mp-surface",clear:""},o={start:"items-start",center:"items-center",end:"items-end"};export function MPOverlay({open:t,defaultOpen:c,onOpenChange:m,tone:p="scrim",dismissible:d=!1,modal:f=!0,align:u="center",size:x="md",label:b="Overlay",className:j,style:h,children:y}){return e(r.Root,{open:t,defaultOpen:c,modal:f,disablePointerDismissal:!d,onOpenChange:(e,a)=>{d||e||"escape-key"!==a.reason?m?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`${l} fixed inset-0 ${s} ${n[p]}`}),e(r.Viewport,{className:[l,"fixed inset-0 flex justify-center",o[u],i[x]].join(" "),children:e(r.Popup,{"aria-label":b,"data-mp-size":x,className:["mp-overlay flex max-h-full max-w-full flex-col items-center justify-center","text-mp-on-surface outline-none",s,j??""].filter(Boolean).join(" "),style:h,children:y})})]})})}
+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})})]})})}

package/dist/components/page-layout/MPPageLayout.d.ts

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { type MPPageCollapse, type MPPageScroll, type MPPageSpan } from '../../internal/page-layout.js';
+export type { MPPageCollapse, MPPageScroll, MPPageSpan, MPSidebarSide } from '../../internal/page-layout.js';
+export interface MPPageLayoutProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** The bar across the top. An [MPHeader](./header), usually. */
+    header?: React.ReactNode;
+    /** The sheet at the end. An [MPFooter](./footer), usually. */
+    footer?: React.ReactNode;
+    /**
+     * The leading column — the left of an English page, the right of an Arabic
+     * one. An [MPSidebar](./sidebar), which is told which end it is on and needs
+     * no `side` of its own here.
+     */
+    sidebar?: React.ReactNode;
+    /**
+     * The trailing column, for the layouts that have two: navigation down one
+     * side and a table of contents, an inspector or a filter panel down the
+     * other. Each is a sidebar with its own width, its own drawer and its own
+     * trigger.
+     */
+    endSidebar?: React.ReactNode;
+    /**
+     * Which of the header and the sidebars takes the top corner.
+     * @default 'full'
+     */
+    headerSpan?: MPPageSpan;
+    /**
+     * The same question for the footer, and worth answering separately: a
+     * dashboard with a full-height navigation drawer still usually wants its
+     * copyright line under the content rather than under the drawer.
+     * @default 'full'
+     */
+    footerSpan?: MPPageSpan;
+    /**
+     * What scrolls: the document, or only the region between the bars.
+     * @default 'page'
+     */
+    scroll?: MPPageScroll;
+    /**
+     * How tall the layout is.
+     *
+     * - `viewport` — the window's, which is what a page wants: a short page still
+     *   pushes its footer to the bottom of the screen, and with `scroll="content"`
+     *   the layout is exactly one screen tall. The default.
+     * - `auto` — its parent's, for a layout that is not the page: a shell inside a
+     *   preview, a pane of a larger tool.
+     * - a length — a number in pixels, or any CSS length.
+     *
+     * It sets a floor while the page scrolls and an exact height while only the
+     * content does, which is the same difference `scroll` makes everywhere else.
+     * @default 'viewport'
+     */
+    height?: 'viewport' | 'auto' | number | string;
+    /**
+     * The window size class below which the sidebars stop being columns and
+     * become drawers, opened by an [MPSidebarTrigger](./sidebar#mpsidebartrigger).
+     * `none` keeps them columns at every width.
+     *
+     * `expanded` is the default because it is MD3's own answer: the specification
+     * gives a standard navigation drawer to an expanded window and puts the same
+     * destinations behind a modal drawer below one.
+     * @default 'expanded'
+     */
+    collapseBelow?: MPPageCollapse;
+    /**
+     * Whether the leading sidebar's drawer is open. Use with
+     * `onSidebarOpenChange` for a controlled layout — a route change that should
+     * close the drawer behind it, a state the application already holds.
+     */
+    sidebarOpen?: boolean;
+    /**
+     * Which state it starts in.
+     * @default false
+     */
+    defaultSidebarOpen?: boolean;
+    onSidebarOpenChange?: (open: boolean) => void;
+    /** The same three for the trailing sidebar. */
+    endSidebarOpen?: boolean;
+    /** @default false */
+    defaultEndSidebarOpen?: boolean;
+    onEndSidebarOpenChange?: (open: boolean) => void;
+    /**
+     * Puts a "Skip to content" link first in the document, drawn only while it
+     * holds the focus.
+     *
+     * On by default, and the one thing here that is not a style decision. A
+     * keyboard reader arriving on a page whose navigation holds forty links has to
+     * walk past all forty on every page before reaching the article; this is the
+     * one link that spares them, and it costs a sighted reader nothing because it
+     * is invisible until it is tabbed to.
+     * @default true
+     */
+    skipLink?: boolean;
+    /** What that link says. Defaults to the word for it in `locale`. */
+    skipLabel?: string;
+    /**
+     * The `id` the skip link jumps to, put on the `<main>`.
+     * @default 'main'
+     */
+    mainId?: string;
+    /** Anything else the `<main>` needs — a `className`, an `aria-label`. */
+    mainProps?: Omit<React.ComponentPropsWithoutRef<'main'>, 'id' | 'children'>;
+    /**
+     * Which language the layout's own words are in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English. Inherited by every sidebar and trigger
+     * inside it, so it is written once per page.
+     */
+    locale?: string;
+    /** The page. Rendered inside the `<main>`. */
+    children?: React.ReactNode;
+}
+/**
+ * The skeleton a page is hung on: a header, a footer, one sidebar or two, and
+ * the content between them.
+ *
+ * What it is really for is the **landmarks**. A page assembled out of divs is a
+ * page a screen reader offers as one undifferentiated region and a crawler reads
+ * as one undifferentiated blob; the same page built out of `<header>`, `<nav>`,
+ * `<aside>`, `<main>` and `<footer>` has a table of contents. Those tags come
+ * from the components this one arranges — it contributes exactly one element of
+ * its own, plus the `<main>` and the link that jumps to it.
+ *
+ * ## The arrangement is CSS, and that is the design
+ *
+ * Everything that decides where a column goes is flexbox and a media query, so
+ * the layout is right in the first frame the browser paints and right on a page
+ * whose JavaScript never arrives. The only things measured are the header's and
+ * the footer's heights, and only because a column that holds its place has to
+ * start below a bar whose height nobody but the bar knows.
+ *
+ * ## Why it draws no gutter and no measure
+ *
+ * That is [MPContainer](./container)'s job, and a layout that also did it would
+ * be a second spelling of one idea. Put a container inside the `<main>`, where a
+ * page can hold a full-width dashboard on one route and a 600dp article on the
+ * next.
+ *
+ * ## Why it takes no surface
+ *
+ * No `variant`, no `color`, no shadow, for [MPContainer](./container)'s reason:
+ * the outermost element on a page is the one thing that must not decide what the
+ * page looks like. The bars and the columns paint themselves; between them is
+ * whatever the application's own background is.
+ */
+export declare const MPPageLayout: React.ForwardRefExoticComponent<MPPageLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/page-layout/MPPageLayout.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useMPLocale as t,useMPMessages as n}from"../../internal/locale.js";import{LAYOUT as r}from"../../internal/messages/layout.js";import{MPPageLayoutContext as a,MPSidebarSideContext as i}from"../../internal/page-layout.js";import{hasContent as s}from"../../internal/scale.js";import{cssLength as u}from"../../internal/length.js";const p=["header","footer"];export const MPPageLayout=/*@__PURE__*/o.forwardRef(function({header:c,footer:f,sidebar:d,endSidebar:m,headerSpan:h="full",footerSpan:v="full",scroll:y="page",height:x="viewport",collapseBelow:b="expanded",sidebarOpen:g,defaultSidebarOpen:w=!1,onSidebarOpenChange:j,endSidebarOpen:_,defaultEndSidebarOpen:k=!1,onEndSidebarOpenChange:S,skipLink:P=!0,skipLabel:C,mainId:O="main",mainProps:N,locale:B,className:$,style:R,children:z,...E},I){const L=t(B),M=n(r,L),[H,T]=o.useState(w),[q,A]=o.useState(k),D=o.useMemo(()=>({start:g??H,end:_??q}),[g,H,_,q]),F=o.useCallback((e,l)=>{if("start"===e)return void 0===g&&T(l),void j?.(l);void 0===_&&A(l),S?.(l)},[g,_,j,S]),G=o.useRef(null),J=o.useCallback(e=>{G.current=e,"function"==typeof I?I(e):I&&(I.current=e)},[I]),K=o.useRef({header:null,footer:null}),Q=o.useRef(null),U=o.useCallback(()=>{const e=G.current;if(e)for(const l of p){const o=K.current[l],t="header"===l?h:v;if(!o){e.style.setProperty(`--_mp-layout-${l}`,"0px"),e.style.setProperty(`--_mp-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,a="sticky"===n||"fixed"===n;e.style.setProperty(`--_mp-layout-${l}`,a&&"full"===t?r:"0px"),e.style.setProperty(`--_mp-layout-${l}-inset`,"fixed"===n?r:"0px")}},[h,v]),V=o.useCallback(()=>{const e=Q.current;if(e){e.disconnect();for(const l of p){const o=K.current[l];o&&e.observe(o)}}U()},[U]);o.useEffect(()=>(Q.current=new ResizeObserver(()=>U()),V(),()=>{Q.current?.disconnect(),Q.current=null}),[U,V]);const W=o.useCallback((e,l)=>{K.current[e]=l,V()},[V]),X=o.useMemo(()=>({present:!0,register:W,collapseBelow:b,open:D,setOpen:F,scroll:y,locale:L}),[W,b,D,F,y,L]),Y="content"===y,Z=u("viewport"===x||"auto"===x?void 0:x),ee=void 0!==Z?"":"auto"===x?Y?"h-full":"min-h-full":Y?"h-dvh":"min-h-dvh",le=s(c)?c:null,oe=s(f)?f:null;return e(a.Provider,{value:X,children:l("div",{ref:J,"data-mp-scroll":y,className:["mp-page-layout relative flex w-full flex-col",Y?"overflow-hidden":"",ee,"full"===h?"[padding-top:var(--_mp-layout-header-inset,0px)]":"","full"===v?"[padding-bottom:var(--_mp-layout-footer-inset,0px)]":"",$??""].filter(Boolean).join(" "),style:void 0===Z?R:{...Y?{height:Z}:{minHeight:Z},...R},...E,children:[P?e("a",{href:`#${O}`,className:["mp-page-layout__skip absolute start-3 top-3 z-50 size-px overflow-hidden","whitespace-nowrap [clip-path:inset(50%)]","focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:bg-mp-primary focus:text-mp-on-primary focus:rounded-mp-full","focus:shadow-mp-2 focus:text-mp-label-large focus:px-4 focus:py-2.5","focus:no-underline focus:outline-none"].join(" "),children:C??M.skipToContent}):null,"full"===h?le:null,l("div",{className:["flex w-full flex-1",Y?"min-h-0":""].filter(Boolean).join(" "),children:[s(d)?e(i.Provider,{value:"start",children:d}):null,l("div",{className:["flex min-w-0 flex-1 flex-col",Y?"min-h-0":"","content"===h?"[padding-top:var(--_mp-layout-header-inset,0px)]":"","content"===v?"[padding-bottom:var(--_mp-layout-footer-inset,0px)]":""].filter(Boolean).join(" "),children:["content"===h?le:null,e("main",{...N,id:O,tabIndex:N?.tabIndex??-1,className:["mp-page-layout__main min-w-0 flex-1",Y?"min-h-0 overflow-y-auto":"",N?.className??""].filter(Boolean).join(" "),children:z}),"content"===v?oe:null]}),s(m)?e(i.Provider,{value:"end",children:m}):null]}),"full"===v?oe:null]})})});

package/dist/components/page-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { MPPageLayout } from './MPPageLayout.js';
+export type { MPPageCollapse, MPPageLayoutProps, MPPageScroll, MPPageSpan, MPSidebarSide } from './MPPageLayout.js';

package/dist/components/page-layout/index.js

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

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";const o=/*@__PURE__*/n.createContext({basis:null,id:null}),i={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},a={xs:4,sm:6,md:8,lg:10,xl:12};function s(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const o=Number(r[1]);if(!Number.isNaN(o))switch(r[2]){case"px":return o;case"%":return t*o/100;case"rem":return o*Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return o*Number.parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const MPPanes=/*@__PURE__*/n.forwardRef(function({orientation:l="horizontal",resizable:u=!0,color:c="primary",size:m="md",onResize:d,onResizeEnd:f,className:p,style:h,children:g,...v},b){const x=n.Children.toArray(g).filter(n.isValidElement),y=x.length,z=n.useId(),w=n.useRef(null),S=n.useCallback(e=>{w.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),E=n.useRef([]),N=x.map(e=>e.props),[R,j]=n.useState(null),M=R&&R.length===y?R:null,C=n.useRef(null);n.useLayoutEffect(()=>{E.current=N,C.current=M});const k=n.useRef(null);n.useEffect(()=>()=>{null!==k.current&&(document.body.style.userSelect=k.current,k.current=null)},[]);const L="horizontal"===l,$=a[m]*Math.max(0,y-1);function P(e){const t=w.current,n=C.current;if(!u||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(L?r.width:r.height)-$;if(o<=0)return null;const i=E.current[e],a=E.current[e+1],l=n[e]*o,c=l+n[e+1]*o,m=Math.max(s(i?.minSize,o,t)??0,c-(s(a?.maxSize,o,t)??c)),f=Math.min(s(i?.maxSize,o,t)??c,c-(s(a?.minSize,o,t)??0));return f<m?null:{root:t,current:n,lower:m,upper:f,start:l,resize(t){const r=Math.min(f,Math.max(m,l+t)),i=[...n];return i[e]=r/o,i[e+1]=(c-r)/o,j(i),d?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=w.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(L?t.width:t.height)-$;n<=0||j(t=>t&&t.length===y?t:function(e,t,n){const r=e.map(e=>s(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,l=r.map(e=>Math.max(0,e??a)),u=l.reduce((e,t)=>e+t,0);return u<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/u)}(E.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[y,L,$]);const _=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",i[m],"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",u?[L?"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":m,className:["mp-panes flex h-full w-full",L?"flex-row":"flex-col","min-h-0 min-w-0",p??""].filter(Boolean).join(" "),style:{...r(c),...h},...v,children:x.map((r,i)=>t(n.Fragment,{children:[i>0?e("div",{role:"separator","aria-orientation":L?"vertical":"horizontal","aria-valuenow":M?Math.round(100*M[i-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!u||void 0,"aria-controls":`${z}-${i-1}`,tabIndex:u?0:-1,className:_,onPointerDown:e=>{0===e.button&&function(e,t){const n=P(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;k.current=o,document.body.style.userSelect="none";const i=L?t.clientX:t.clientY,a=L&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=L?e.clientX:e.clientY;s=n.resize((t-i)*a)},u=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",u),r.removeEventListener("pointercancel",u),delete r.dataset.dragging,document.body.style.userSelect=o,k.current=null,f?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",u),r.addEventListener("pointercancel",u)}(i-1,e)},onKeyDown:e=>{const t=L?"ArrowLeft":"ArrowUp",n=L?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n)return e.preventDefault(),void function(e,t){const n=P(e);if(!n)return;const r=n.resize(t);f?.(r.map(e=>100*e))}(i-1,e.key===n?16:-16);"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=P(e);if(!n)return;const r=n.resize(n[t]-n.start);f?.(r.map(e=>100*e))}(i-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)",L?"h-full w-px":"h-px w-full",u?["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(o.Provider,{value:{basis:M?`calc((100% - ${$}px) * ${M[i].toFixed(6)})`:null,id:`${z}-${i}`},children:r})]},r.key??i))})});export const MPPane=/*@__PURE__*/n.forwardRef(function({defaultSize:t,minSize:r,maxSize:i,className:a,style:s,children:l,...u},c){const{basis:m,id:d}=n.useContext(o);return e("div",{ref:c,id:d??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",a??""].filter(Boolean).join(" "),style:{flex:m?`0 0 ${m}`:"1 1 0%",...s},...u,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";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})});

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{COMMON as r}from"../../internal/messages/common.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{hasContent as m,META_TEXT as c,PROSE_TEXT as d,SHEET_GAP as p,SHEET_PAD as f,SHEET_TITLE as u}from"../../internal/scale.js";import{FADE as x,PORTAL_LAYER as h}from"../../internal/surface.js";const g={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},v={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=s.Close;export function MPPopover({trigger:b,title:j,description:w,side:N="bottom",align:O="center",sideOffset:P=8,alignOffset:y=0,arrow:C=!1,open:z,defaultOpen:k,onOpenChange:M,modal:L=!1,dismissible:$=!0,showClose:B=!1,closeLabel:T,locale:A,width:D,size:I="md",className:R,style:S,children:W}){const _=a(A),q=l(r,_),E=m(j)||m(w),F=v[I];return o(s.Root,{open:z,defaultOpen:k,modal:L,onOpenChange:(e,o)=>{$||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?M?.(e):o.cancel()},children:[b?e(s.Trigger,{render:b}):null,e(s.Portal,{children:e(s.Positioner,{className:h,side:N,align:O,sideOffset:P,alignOffset:y,children:o(s.Popup,{"data-mp-size":I,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",f[I],p[I],d[I],void 0===D?g[I]:"",x,R??""].filter(Boolean).join(" "),style:{...void 0===D?null:{maxWidth:"number"==typeof D?`${D}px`:D},...S},children:[C?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:F,height:F/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,E||B?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[m(j)?e(s.Title,{className:`m-0 ${u[I]}`,children:j}):null,m(w)?e(s.Description,{className:`text-mp-on-surface-variant m-0 ${c}`,children:w}):null]}),B?o(s.Close,{"aria-label":T??q.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(n,{}),e(t,{icon:i,size:18})]}):null]}):null,m(W)?e("div",{className:"min-w-0",children:W}):null]})})})]})}
+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]})})})]})}

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 t}from"../../internal/accent.js";import{META_TEXT as n,STACK_GAP as l}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:x??null,min:h,max:g,format:y,getAriaValueText:c(M,V),"data-mp-size":r,className:["mp-progress-box inline-flex flex-col",l[r],v??""].filter(Boolean).join(" "),style:{...t(p),...w},children:[b||j?a("div",{className:["flex items-baseline gap-2",b?"justify-between":"justify-end",n].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 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))})]})});

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 i,RING_STROKE as l,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,$=i[a],L=l[a],V=$/2,z=V-L/2;return e(s.Root,{ref:j,value: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{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]})});

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 s}from"@base-ui/react/progress";import{accentSlots as l}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(s.Root,{ref:w,value: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:{...l(p),...N},children:[g||h?a("div",{className:["flex items-baseline gap-2",g?"justify-between":"justify-end",n].join(" "),children:[g?e(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:g}):null,h?e(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>c(v,e,V)}):null]}):null,e(s.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(s.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 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`})})]})});

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 m={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"}},u=/*@__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(u),b=m[h.size],y=r.useId(),z=x??`mp-radio-${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:m,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(u.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(m)?a("span",{id:w,className:[d,z?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[m,y?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(n,{ref:R,"aria-labelledby":p(m)?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 l}from"@base-ui/react/radio-group";import{Field as n}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 m={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"}},u=/*@__PURE__*/r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/r.forwardRef(function({value:l,label:o,description:s,disabled:f=!1,id:x,className:g,style:h},b){const y=r.useContext(u),z=m[y.size],j=r.useId(),v=x??j;return e(n.Root,{className:["mp-radio inline-block align-top",g??""].filter(Boolean).join(" "),style:h,disabled:f,"data-mp-value":l,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:l,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)",z.ring,f?"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:[f?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",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(n.Label,{htmlFor:v,className:["leading-[1.4]",f?"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(n.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:m,description:f,errorMessage:x,orientation:g="vertical",size:h="md",color:b="primary",required:y=!1,disabled:z=!1,readOnly:j=!1,name:v,children:N,className:R,style:O},k){const w=p(x),M=w?"error":b,_=r.useId(),C=r.useMemo(()=>({size:h,readOnly:j,invalid:w}),[h,j,w]);return e(u.Provider,{value:C,children:a(n.Root,{className:["mp-radio-group flex flex-col gap-2",R??""].filter(Boolean).join(" "),disabled:z,invalid:w,"data-mp-size":h,"data-mp-orientation":g,style:{...o(M),...O},children:[p(m)?a("span",{id:_,className:[d,z?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[m,y?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{ref:k,"aria-labelledby":p(m)?_:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:z,readOnly:j,required:y,name:v,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})]})})});