material-plus-ui 0.0.1 → 1.0.0

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

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { Popover } from '@base-ui/react/popover';
+import type { MPAlign, MPSide, MPSize } from '../../types';
+/**
+ * A popover takes `side`, `align` and `size`, and stops there.
+ *
+ * There is no `variant` — the five weights answer "how much does this surface
+ * assert itself against the page", and a popup that had to be asked for has
+ * already been asserted. There is no `color` either: MD3's own answer for a
+ * surface that floats beside a control is `surface-container` at elevation 2,
+ * neutral, and a popover that could be dyed would dye the form somebody put in
+ * it.
+ */
+export interface MPPopoverProps {
+    /**
+     * The element the popup hangs off and that opens it. Exactly one element, and
+     * it must accept a ref and spread props — every Material Plus component does.
+     *
+     * Optional: a controlled popover anchored from elsewhere needs none, though it
+     * then has nothing to position against and will sit against the viewport.
+     */
+    trigger?: React.ReactElement;
+    /** The heading, rendered as the element that names the popup. */
+    title?: React.ReactNode;
+    /** A line under it, and the popup's accessible description. */
+    description?: React.ReactNode;
+    /**
+     * Which edge of the trigger it appears on. Flips to the opposite side when
+     * there is no room, which is Base UI's doing and is the right behaviour.
+     * @default 'bottom'
+     */
+    side?: MPSide;
+    /**
+     * Where it sits along that edge.
+     * @default 'center'
+     */
+    align?: MPAlign;
+    /**
+     * Distance from the trigger, in pixels.
+     * @default 8
+     */
+    sideOffset?: number;
+    /**
+     * Shift along that edge, in pixels.
+     * @default 0
+     */
+    alignOffset?: number;
+    /**
+     * Draws the little wedge pointing at the trigger.
+     *
+     * Off by default. MD3 draws no wedge on a menu and none on a rich tooltip: a
+     * popup eight pixels from the control that opened it does not need to say what
+     * it belongs to. Turn it on where the trigger is far enough away that it does.
+     * @default false
+     */
+    arrow?: boolean;
+    /** Whether the popover is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the page behind is taken away.
+     *
+     * `false` — the default — leaves the page scrollable and clickable, which is
+     * what separates a popover from a [dialog](./dialog): it is a detail *beside*
+     * the page, not instead of it. `'trap-focus'` holds focus inside without
+     * locking the scroll.
+     * @default false
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking outside closes the popup. Turn it off
+     * only for a popup with its own way out, because there will be no other.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Shows the × in the corner.
+     * @default false
+     */
+    showClose?: boolean;
+    /**
+     * Accessible name of the × button.
+     * @default 'Close'
+     */
+    closeLabel?: string;
+    /**
+     * A hard cap on the popup's width, overriding the one `size` implies. Numbers
+     * are pixels. For the popover whose *content* decides its width — a form, a
+     * single line of help — rather than for tuning the scale, which is `size`.
+     */
+    width?: number | string;
+    /**
+     * The room inside the popup, the type scale in it, and how wide it may get.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** The body. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type MPPopoverCloseProps = React.ComponentProps<typeof Popover.Close>;
+/**
+ * Closes the popover it is inside.
+ *
+ * Exported for `MPDialogClose`'s reason: an uncontrolled popover has no
+ * `setOpen` for its Cancel button to call, and making every popover controlled
+ * is a piece of state per popover that exists only to answer a button.
+ *
+ * `render` is Base UI's own escape hatch, so a real Material Plus button
+ * dismisses: `<MPPopoverClose render={<MPButton variant="text">Cancel</MPButton>} />`.
+ */
+export declare const MPPopoverClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A sheet that opens beside the thing that opened it.
+ *
+ * The difference from a [tooltip](./tooltip) is that this one can be *reached*:
+ * it stays up until it is dismissed, it can be entered with the pointer or the
+ * keyboard, and what is inside it can be clicked and typed into. The difference
+ * from a [dialog](./dialog) is that it does not take the page — it is anchored
+ * to a control, and the page behind goes on working.
+ *
+ * Base UI owns everything hard about it: the anchoring and the flip at the
+ * window's edge, the click outside and Escape, returning focus to the trigger,
+ * and the `aria-labelledby` / `aria-describedby` wiring. What is left here is
+ * the surface, the width ladder and the header.
+ *
+ * ## The surface
+ *
+ * `surface-container` at elevation 2 and `corner-medium`, which is what MD3
+ * gives a menu and a rich tooltip — the two things in the specification that are
+ * this: a small sheet anchored to a control. It is deliberately *not* the
+ * 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, width, size, className, style, children }: MPPopoverProps): React.JSX.Element;

package/dist/components/popover/MPPopover.js

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

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

@@ -0,0 +1,2 @@
+export { MPPopover, MPPopoverClose } from './MPPopover';
+export type { MPPopoverCloseProps, MPPopoverProps } from './MPPopover';

package/dist/components/popover/index.js

@@ -0,0 +1 @@
+export{MPPopover,MPPopoverClose}from"./MPPopover";

package/dist/components/progress-box/MPProgressBox.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { type MPProgressProps } from '../../internal/progress';
+import type { MPColor, MPSize } from '../../types';
+export interface MPProgressBoxProps extends MPProgressProps {
+    /** Size of one segment. @default 'md' */
+    size?: MPSize;
+    /** @default 'primary' */
+    color?: MPColor;
+    /**
+     * How many segments the row is made of.
+     *
+     * Four by default: enough that the wave reads as a wave, few enough that a
+     * determinate row can be counted at a glance rather than measured. Set it to
+     * the number of steps when the thing being waited on genuinely has steps.
+     * @default 4
+     */
+    count?: number;
+}
+/**
+ * A row of segments that light up.
+ *
+ * The third shape, and the one that answers a different question from the other
+ * two. A bar and a ring both say "this much of it is done" — a quantity a reader
+ * reads off a length. A row of four segments says "this is step three", which is
+ * a quantity they *count*, and counting is faster than measuring for any number
+ * small enough to count.
+ *
+ * That is what makes it the right indicator for work that genuinely has steps —
+ * an upload with a verify and a publish after it, a four-page form — and the
+ * wrong one for a percentage. This is not an MD3 component: the specification
+ * has a bar and a ring and stops there. It is drawn out of the spec's own parts
+ * all the same — `corner-extra-small` tiles, the accent, `on-surface` at 12% —
+ * so a row of them sits in a Material page without announcing that it is extra.
+ *
+ * It answers a value when it has one: the segments fill left to right, the
+ * leading one partially, so four segments read as a four-part bar rather than
+ * rounding 30% away to a quarter. Without a value they cycle, each held back by
+ * its own index.
+ */
+export declare const MPProgressBox: React.ForwardRefExoticComponent<MPProgressBoxProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Progress as t}from"@base-ui/react/progress";import{accentSlots as s}from"../../internal/accent";import{META_TEXT as n,STACK_GAP as l}from"../../internal/scale";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";export const MPProgressBox=r.forwardRef(function({size:r="md",color:p="primary",count:d=4,value:x=null,min:h=0,max:g=100,label:b,showValue:y=!1,format:v,className:j,style:w},N){const M=u(x,h,g),B=null===M,V=void 0!==v,_=Math.max(1,Math.floor(d));return a(t.Root,{ref:N,value:x??null,min:h,max:g,format:v,getAriaValueText:c(M,V),"data-mp-size":r,className:["mp-progress-box inline-flex flex-col",l[r],j??""].filter(Boolean).join(" "),style:{...s(p),...w},children:[b||y?a("div",{className:["flex items-baseline gap-2",b?"justify-between":"justify-end",n].join(" "),children:[b?e(t.Label,{className:"text-mp-on-surface min-w-0 truncate",children:b}):null,y?e(t.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>f(M,e,V)}):null]}):null,e(t.Track,{className:`flex ${o[r]}`,children:Array.from({length:_},(a,t)=>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":t}: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*_-t)))}%`}})},t))})]})});

package/dist/components/progress-box/index.d.ts

@@ -0,0 +1,2 @@
+export { MPProgressBox } from './MPProgressBox';
+export type { MPProgressBoxProps } from './MPProgressBox';

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

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

package/dist/components/progress-circular/MPProgressCircular.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { type MPProgressProps } from '../../internal/progress';
+import type { MPColor, MPSize } from '../../types';
+export interface MPProgressCircularProps extends MPProgressProps {
+    /**
+     * Diameter of the ring. `md` is MD3's own 48dp, and every rung sits inside the
+     * control height of the same name — so a spinner dropped into a button, a field
+     * or a table row never makes the row taller than it was.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** @default 'primary' */
+    color?: MPColor;
+}
+/**
+ * The ring that fills, and the one to reach for where there is no room for a bar
+ * — inside a button, at the end of a table row, next to a field.
+ *
+ * The value and the label sit *beside* the ring rather than inside it. A number
+ * in the middle of a dial is the picture everyone has of this component, and it
+ * only works at two of the five sizes: at `xs` the ring is twenty-four pixels
+ * across and there is nowhere for "40%" to go. Beside it, every size reads.
+ *
+ * ## `pathLength`
+ *
+ * The circle declares `pathLength={100}`, which re-scales the units
+ * `stroke-dasharray` and `stroke-dashoffset` are measured in — so an arc is
+ * written as a percentage rather than as a fraction of 2πr. That is what lets one
+ * `@keyframes` rule in the stylesheet serve all five diameters: without it, every
+ * rung would need arithmetic in a stylesheet that cannot do arithmetic.
+ */
+export declare const MPProgressCircular: React.ForwardRefExoticComponent<MPProgressCircularProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+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";import{CONTROL_GAP as o,META_TEXT as n}from"../../internal/scale";import{RING_DIAMETER as i,RING_STROKE as l,progressAriaText as c,progressFraction as m,progressText as u}from"../../internal/progress";export const MPProgressCircular=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},N){const w=m(f,h,d),b=null===w,j=void 0!==g,$=i[a],L=l[a],V=$/2,z=V-L/2;return e(s.Root,{ref:N,value:f??null,min:h,max:d,format:g,getAriaValueText:c(w,j),"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:b?"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:b?"mp-progress-circular-arc":"transition-[stroke-dashoffset] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",transform:`rotate(-90 ${V} ${V})`,...b?null:{strokeDasharray:100,strokeDashoffset:100*(1-w)}})]}),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(w,r,j)}):null]})});

package/dist/components/progress-circular/index.d.ts

@@ -0,0 +1,2 @@
+export { MPProgressCircular } from './MPProgressCircular';
+export type { MPProgressCircularProps } from './MPProgressCircular';

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

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

package/dist/components/progress-linear/MPProgressLinear.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { type MPProgressProps } from '../../internal/progress';
+import type { MPColor, MPSize } from '../../types';
+export interface MPProgressLinearProps extends MPProgressProps {
+    /**
+     * Thickness of the track. `md` is MD3's own 4dp; nothing else on a bar has a
+     * size, so this is the only thing `size` touches here.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** @default 'primary' */
+    color?: MPColor;
+}
+/**
+ * The bar that fills, and the workhorse of the three.
+ *
+ * It is the only one that can show *how much* is left at a glance, because length
+ * is the one quantity a reader compares without counting. MD3 draws it as a 4dp
+ * groove in `secondary-container` with the active indicator in `primary`; here
+ * the two are the chosen family's own container and accent, so `color="error"` is
+ * a red bar in a red groove rather than a red bar in a blue one.
+ *
+ * Both ends are fully rounded, which is MD3's own shape for it: at four pixels
+ * tall there is no flat run left to preserve, and a square-ended bar reads as a
+ * rendering fault rather than as a decision.
+ *
+ * Base UI's Progress owns the semantics — `role="progressbar"`, the value and
+ * range attributes, `aria-valuetext`, and dropping the value entirely while the
+ * bar is indeterminate — and it computes the fill width too, so the determinate
+ * case here is a class list and nothing else.
+ */
+export declare const MPProgressLinear: React.ForwardRefExoticComponent<MPProgressLinearProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+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";import{META_TEXT as n,STACK_GAP as t}from"../../internal/scale";import{BAR_THICKNESS as i,progressAriaText as o,progressFraction as m,progressText as c}from"../../internal/progress";export const MPProgressLinear=r.forwardRef(function({size:u="md",color:p="primary",value:f=null,min:d=0,max:x=100,label:g,showValue:h=!1,format:b,className:N,style:j},w){const v=m(f,d,x),y=null===v,V=void 0!==b,$="absolute inset-y-0 rounded-mp-full bg-(--_mp-accent)";return a(l.Root,{ref:w,value:f??null,min:d,max:x,format:b,getAriaValueText:o(v,V),"data-mp-size":u,className:["mp-progress-linear flex w-full flex-col",t[u],N??""].filter(Boolean).join(" "),style:{...s(p),...j},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/progress-linear/index.d.ts

@@ -0,0 +1,2 @@
+export { MPProgressLinear } from './MPProgressLinear';
+export type { MPProgressLinearProps } from './MPProgressLinear';

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

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

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

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPSize } from '../../types';
+export interface MPRadioProps {
+    /** What this option is worth. Reported by the group's `onValueChange`. */
+    value: string;
+    /** The text beside the dot, wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** The line under the label. */
+    description?: React.ReactNode;
+    /** Unavailable, but still listed — the option exists, it just cannot be taken. */
+    disabled?: boolean;
+    /** The id put on the control and pointed at by the label. */
+    id?: string;
+}
+/**
+ * One option in an `MPRadioGroup`.
+ *
+ * It has no `size` and no `color` of its own. Both come from the group, which is
+ * the only place they can be set once and mean the same thing for every option.
+ */
+export declare const MPRadio: React.ForwardRefExoticComponent<MPRadioProps & React.RefAttributes<HTMLElement>>;
+export interface MPRadioGroupProps {
+    /** The chosen value. Use with `onValueChange` for a controlled group. */
+    value?: string | null;
+    /** The value chosen at the start, for an uncontrolled group. */
+    defaultValue?: string | null;
+    /** Called with the newly chosen value — a string, not an event. */
+    onValueChange?: (value: string) => void;
+    /**
+     * The question the options answer. Rendered as the set's own label, which is
+     * what a screen reader reads before the first option.
+     */
+    label?: React.ReactNode;
+    /** The line under the label. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /**
+     * The message under the options. Its presence is also what turns the group
+     * over into its error state.
+     */
+    errorMessage?: React.ReactNode;
+    /**
+     * Which way the options stack. A column is scannable at any length; a row
+     * silently stops being readable the moment one label is longer than expected.
+     * @default 'vertical'
+     */
+    orientation?: MPOrientation;
+    /**
+     * The dots' size and the labels' type scale, for every option at once.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the chosen option is drawn in.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Marks the group required. */
+    required?: boolean;
+    /** Greys every option out and stops the set taking input. */
+    disabled?: boolean;
+    /** Shows the choice without allowing it to be changed. */
+    readOnly?: boolean;
+    /** Name of the form control, as on a set of native radios. */
+    name?: string;
+    /** The `MPRadio`s. */
+    children?: React.ReactNode;
+}
+/**
+ * A Material Design radio group: a set of options where exactly one is chosen.
+ *
+ * Base UI owns the part that makes it a group rather than a `<div>` full of
+ * inputs — the set takes **one** tab stop and the arrow keys move within it,
+ * which is what the ARIA pattern requires and what hand-rolled radio groups
+ * almost always get wrong.
+ *
+ * The options are children rather than an `items` array, unlike `MPSelect`. The
+ * difference is that a radio option is a *block* — it carries a label and a
+ * description and is laid out down the page — so what a caller wants to vary is
+ * its content, not just its text. A select's options are rows in a popup.
+ */
+export declare const MPRadioGroup: React.ForwardRefExoticComponent<MPRadioGroupProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a 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";import{MPStateLayer as t}from"../../internal/StateLayer";import{MPSupportingText as s}from"../../internal/SupportingText";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale";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=a.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=a.forwardRef(function({value:l,label:o,description:s,disabled:f=!1,id:x},h){const g=a.useContext(m),b=u[g.size],z=a.useId(),v=x??`mp-radio-${z}`;return e(n.Root,{className:"mp-radio inline-block align-top",disabled:f,"data-mp-value":l,children:r("div",{className:["flex items-start gap-3",c[g.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(i.Root,{ref:h,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)",b.ring,f?"border-mp-on-surface/38 cursor-default":[g.readOnly?"cursor-default":"cursor-pointer",g.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,f?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(s)?r("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":g.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=a.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:u,description:f,errorMessage:x,orientation:h="vertical",size:g="md",color:b="primary",required:z=!1,disabled:v=!1,readOnly:y=!1,name:j,children:N},R){const O=p(x),k=O?"error":b,w=a.useId(),M=a.useMemo(()=>({size:g,readOnly:y,invalid:O}),[g,y,O]);return e(m.Provider,{value:M,children:r(n.Root,{className:"mp-radio-group flex flex-col gap-2",disabled:v,invalid:O,"data-mp-size":g,"data-mp-orientation":h,style:o(k),children:[p(u)?r("span",{id:w,className:[d,v?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[u,z?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{ref:R,"aria-labelledby":p(u)?w:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:v,readOnly:y,required:z,name:j,className:["flex","horizontal"===h?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:N}),e(s,{description:f,errorMessage:x})]})})});

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

@@ -0,0 +1,2 @@
+export { MPRadio, MPRadioGroup } from './MPRadioGroup';
+export type { MPRadioGroupProps, MPRadioProps } from './MPRadioGroup';

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

@@ -0,0 +1 @@
+export{MPRadio,MPRadioGroup}from"./MPRadioGroup";

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import type { MPStyleProps } from '../../types';
+export interface MPSegment {
+    /** Identifies the segment. What `onValueChange` reports. */
+    value: string;
+    /** The words in the segment. */
+    label?: React.ReactNode;
+    /**
+     * A glyph before the label. Replaced by the tick while the segment is chosen,
+     * which is what MD3 does — the tick and the icon share one slot rather than
+     * both being shown, so the segment does not change width on selection.
+     */
+    icon?: React.ReactNode;
+    /** Unavailable, but still part of the set. */
+    disabled?: boolean;
+}
+export interface MPSegmentedButtonProps extends MPStyleProps {
+    /** The segments, in the order they are drawn. */
+    items: readonly MPSegment[];
+    /**
+     * Which segments are chosen. Use with `onValueChange` for a controlled set.
+     *
+     * An array in both modes, including single-select where it holds at most one
+     * entry. A segmented button is genuinely the same control either way — MD3
+     * documents one component with a multi-select option, not two — and a `value`
+     * whose *type* changed with a boolean prop would be a union every caller has
+     * to narrow before they can read it.
+     */
+    value?: readonly string[];
+    /** Which segments start chosen, for an uncontrolled set. */
+    defaultValue?: readonly string[];
+    /** Called with every chosen value, in the order the segments are drawn. */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Whether more than one segment may be chosen at a time.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Whether a chosen segment shows a tick.
+     *
+     * On by default, and the slot is reserved whether or not anything is chosen —
+     * a tick that appears from nothing would push the label sideways at the exact
+     * moment the reader is looking at it. Turn it off for a set of icon-only
+     * segments, where the fill already says which one is on.
+     * @default true
+     */
+    showCheck?: boolean;
+    /** Greys every segment out and stops the set taking input. */
+    disabled?: boolean;
+    /** The accessible name of the set. */
+    'aria-label'?: string;
+}
+/**
+ * A Material Design segmented button: two to five choices in one pill.
+ *
+ * The container is a hairline `outline` with the segments divided by more of the
+ * same, and the chosen one fills with `secondary-container` — deliberately not
+ * `primary`, which is what MD3 reserves for the action a screen is about. A
+ * segmented button changes what you are *looking at*; it does not do anything.
+ *
+ * Underneath it is Base UI's toggle group, which gives the set one tab stop with
+ * the arrow keys moving inside it, and `aria-pressed` on each segment. Built out
+ * of plain buttons instead, a four-way switch would announce itself as four
+ * unrelated actions.
+ *
+ * ## When this is the wrong component
+ *
+ * At more than five segments, use `MPSelect` — the labels stop fitting and the
+ * set starts wrapping, and a segmented button that has wrapped to two lines has
+ * lost the one thing it was for. For choosing something *in a form*, use
+ * `MPRadioGroup`: that is the control a form's value comes from, and it scales
+ * down the page rather than across it.
+ */
+export declare const MPSegmentedButton: React.ForwardRefExoticComponent<MPSegmentedButtonProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{Toggle as t}from"@base-ui/react/toggle";import{ToggleGroup as o}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon";import{CheckIcon as l}from"../../constants/icons";import{MPStateLayer as i}from"../../internal/StateLayer";import{CONTROL_GAP as s,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as m,CONTROL_TEXT as u}from"../../internal/scale";export const MPSegmentedButton=n.forwardRef(function({items:n,value:p,defaultValue:f,onValueChange:b,multiple:h=!1,showCheck:g=!0,size:x="md",fullWidth:j=!1,disabled:v=!1,"aria-label":w},y){return e(o,{ref:y,"aria-label":w,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:v,"data-mp-size":x,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",j?"flex w-full":"inline-flex w-fit",d[x]].join(" "),children:n.map((n,o)=>{const d=v||n.disabled;return r(t,{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[x],s[x],m[x],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(" "),j?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(i,{}),g||n.icon?r("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[x],height:c[x]},children:[g?e("span",{className:"hidden items-center group-data-pressed:flex",children:e(a,{icon:l,size:c[x]})}):null,n.icon?e("span",{className:["flex items-center",g?"group-data-pressed:hidden":""].filter(Boolean).join(" "),children:n.icon}):null]}):null,e("span",{className:"truncate",children:n.label})]},n.value)})})});

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

@@ -0,0 +1,2 @@
+export { MPSegmentedButton } from './MPSegmentedButton';
+export type { MPSegment, MPSegmentedButtonProps } from './MPSegmentedButton';

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

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

package/dist/components/select/MPSelect.d.ts

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import type { MPStyleProps } from '../../types';
+/**
+ * What a select's value may be.
+ *
+ * Deliberately not generic over arbitrary objects. A select is a form control,
+ * its value is what a form submits, and every escape from that — object values,
+ * a custom equality, a stringifier for the trigger — buys flexibility by making
+ * the common case harder to write. Keep the identifier here and look the object
+ * up on the other side.
+ */
+export type MPSelectValue = string | number;
+export interface MPSelectOption {
+    /** Submitted, and what `value` and `onValueChange` speak in. */
+    value: MPSelectValue;
+    /** Shown in the list and in the trigger. Defaults to the value itself. */
+    label?: React.ReactNode;
+    /** Unavailable, but still listed — the option exists, it just cannot be taken. */
+    disabled?: boolean;
+}
+export interface MPSelectProps extends MPStyleProps {
+    /**
+     * The options, as data. There is no `<MPSelect.Option>` to compose: what a
+     * caller has is almost always an array already, and the list has to be
+     * available to the trigger before the popup has ever been opened — otherwise
+     * a closed select can only show its raw value.
+     */
+    items: readonly MPSelectOption[];
+    /** The chosen value. Use with `onValueChange` for a controlled select. */
+    value?: MPSelectValue | null;
+    /** The value chosen at the start, for an uncontrolled select. */
+    defaultValue?: MPSelectValue | null;
+    /** Called with the newly chosen value — a value, not an event. */
+    onValueChange?: (value: MPSelectValue | null) => void;
+    /** Shown in the trigger while nothing is chosen. */
+    placeholder?: React.ReactNode;
+    /**
+     * Label in the outline's notch. Always drawn there rather than floating over
+     * the placeholder, so a select with a label and one without sit at the same
+     * height in a form.
+     */
+    label?: React.ReactNode;
+    /** The line under the control. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /**
+     * The message under the control. Its presence is also what puts the select
+     * into its error state.
+     */
+    errorMessage?: React.ReactNode;
+    /** Content placed before the value — an `MPIcon`, usually. */
+    startIcon?: React.ReactNode;
+    /** Marks the select required, both to assistive technology and to the label. */
+    required?: boolean;
+    /** Greys the select out and stops it opening. */
+    disabled?: boolean;
+    /** Shows the value without allowing it to be changed, and stays focusable. */
+    readOnly?: boolean;
+    /** Name of the form control. */
+    name?: string;
+    /**
+     * The id put on the trigger and pointed at by the label. Derived from `name`
+     * when omitted, and generated when there is no name either.
+     */
+    id?: string;
+}
+/**
+ * A Material Design select.
+ *
+ * The trigger is `MPTextField`'s shell wearing a chevron, and that is the point:
+ * a form where the dropdown is a different height, radius or outline weight from
+ * the fields around it is a form that looks assembled rather than designed. The
+ * notched outline, the label in the notch and the supporting text underneath are
+ * the same components the field uses.
+ *
+ * The popup is `surface-container` at elevation 2 — the one surface in this
+ * library that genuinely floats, and the only one that carries a shadow by
+ * default. A chosen row is marked with a tick rather than only with a highlight,
+ * because a highlight is also what the keyboard's cursor looks like, and a list
+ * where "selected" and "where the arrow keys are" are the same colour is a list
+ * you cannot read.
+ *
+ * Base UI owns everything hard here: positioning and flipping the popup, the
+ * focus trap, typeahead, and the hidden input that makes the whole thing submit
+ * with a form.
+ */
+export declare const MPSelect: React.ForwardRefExoticComponent<MPSelectProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/select/MPSelect.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as n}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{MPIcon as i}from"../icon/MPIcon";import{CheckIcon as l,ChevronDownIcon as o}from"../../constants/icons";import{MPFieldLabel as s,MPFieldOutline as c}from"../../internal/FieldOutline";import{MPSupportingText as d}from"../../internal/SupportingText";import{CONTROL_ICON as m,PROSE_TEXT as p,hasContent as u}from"../../internal/scale";const h={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const MPSelect=t.forwardRef(function({items:f,value:g,defaultValue:x,onValueChange:v,placeholder:b,label:N,description:j,errorMessage:w,startIcon:I,size:y="md",fullWidth:z=!1,required:M=!1,disabled:P=!1,readOnly:S=!1,name:V,id:q},O){const T=u(w),_=h[y],k=t.useId(),R=q??`mp-select-${V??k}`,C=t.useMemo(()=>f.map(e=>({label:e.label??String(e.value),value:e.value})),[f]);return a(r.Root,{className:["mp-select group flex-col align-top",z?"flex w-full":"inline-flex w-fit"].join(" "),disabled:P,invalid:T,"data-mp-size":y,children:[a(n.Root,{id:R,name:V,items:C,value:g,defaultValue:x,onValueChange:e=>v?.(e??null),disabled:P,readOnly:S,required:M,children:[a("div",{className:"relative w-full",children:[a(n.Trigger,{ref:O,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",_.padding,_.height,p[y],P?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(S?"cursor-default":"cursor-pointer")].join(" "),children:[I?e("span",{className:["flex shrink-0 items-center",P?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:I}):null,e(n.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",P?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:b}),e(n.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",P?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(i,{icon:o,size:m[y]})})]}),e(c,{label:N,required:M}),u(N)?e(s,{size:y,label:N,required:M,htmlFor:R}):null]}),e(n.Portal,{children:e(n.Positioner,{className:"z-50 outline-none",sideOffset:4,alignItemWithTrigger:!1,children:e(n.Popup,{className:["mp-select__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface min-w-[var(--anchor-width)] outline-none",p[y]].join(" "),children:e(n.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:f.map(t=>a(n.Item,{value:t.value,disabled:t.disabled,className:["mp-select__item group rounded-mp-xs relative flex cursor-pointer items-center","gap-3 py-2 pe-3 ps-2 select-none outline-none","data-highlighted:bg-mp-on-surface/8","data-selected:text-mp-on-secondary-container","data-selected:bg-mp-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:e(n.ItemIndicator,{children:e(i,{icon:l,size:18})})}),e(n.ItemText,{className:"min-w-0 flex-1 truncate",children:t.label??String(t.value)})]},String(t.value)))})})})})]}),e(d,{description:j,errorMessage:w,className:_.padding})]})});

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

@@ -0,0 +1,2 @@
+export { MPSelect } from './MPSelect';
+export type { MPSelectOption, MPSelectProps, MPSelectValue } from './MPSelect';

package/dist/components/select/index.js

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