material-plus-ui 0.0.1 → 1.1.0

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/rating/MPRating.d.ts

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { type MPMessages } from '../../internal/i18n';
+import type { MPColor, MPSize } from '../../types';
+/** The words the control says on its own behalf. */
+export type MPRatingLabels = MPMessages['rating'];
+export interface MPRatingProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** The score. Use with `onValueChange` for a controlled rating. */
+    value?: number;
+    /**
+     * Where an uncontrolled rating starts.
+     * @default 0
+     */
+    defaultValue?: number;
+    /** Called with the new score. `0` is what a cleared rating reports. */
+    onValueChange?: (value: number) => void;
+    /**
+     * How many stars there are, and therefore the highest score.
+     * @default 5
+     */
+    count?: number;
+    /**
+     * The smallest step that can be *chosen*, as a fraction of one star — `0.5`
+     * gives half stars, `1` whole ones. Anything outside `0 < precision <= 1`
+     * falls back to `1`.
+     *
+     * It bounds what a reader can pick and nothing else. A `value` of `4.3` is
+     * drawn as four stars and a third at every precision, because an average is
+     * not a choice and rounding it to the nearest half would be reporting a
+     * different number from the one the component was handed.
+     * @default 1
+     */
+    precision?: number;
+    /** The glyph a filled star is drawn with. */
+    icon?: React.ReactNode;
+    /** And the one an empty star is drawn with. It has to be the same shape. */
+    emptyIcon?: React.ReactNode;
+    /**
+     * Choosing the score that is already chosen clears it back to `0`.
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Shows the score without letting it be changed — a product's average, a
+     * rating somebody else left.
+     *
+     * **This is the one `readOnly` in the library that does not drain the
+     * saturation.** It is not a control being held still: there are no inputs at
+     * all, and what is left is a picture of a number. A row of grey stars would
+     * say the score itself was unavailable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /** Unavailable. Drops the accent for the specification's disabled ink. */
+    disabled?: boolean;
+    /** Identifies the value when a form is submitted. */
+    name?: string;
+    /** A form will not submit until a star has been chosen. */
+    required?: boolean;
+    /**
+     * One star's height, on the glyph ladder. `md` is 24dp.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the filled stars read.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * Which language the spoken names are written in — a BCP 47 tag such as `ko`,
+     * `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     */
+    locale?: string;
+    /** Overrides for the words themselves. They win over the translation. */
+    labels?: Partial<MPRatingLabels>;
+    /**
+     * Publishes the score as schema.org `Rating` microdata, which is what a search
+     * engine reads to draw stars beside a result.
+     *
+     * `readOnly` only, and that is the whole of the rule: a score somebody is
+     * still choosing is not a fact about anything, and marking up an empty control
+     * as a rating of nought is telling a crawler something untrue about the page.
+     *
+     * ## It has to be placed inside what it rates
+     *
+     * Microdata is nesting, and this component cannot know what it is nested in —
+     * only the page does. So it emits the `Rating` and its three values, and the
+     * `itemProp` naming the relationship is yours to pass:
+     *
+     * ```tsx
+     * <div itemScope itemType="https://schema.org/Product">
+     *   <h2 itemProp="name">A kettle</h2>
+     *   <MPRating readOnly value={4.3} structuredData itemProp="aggregateRating" />
+     * </div>
+     * ```
+     *
+     * `aggregateRating` also wants a `ratingCount` or a `reviewCount` beside it
+     * before a search engine will draw anything, and that number is the page's
+     * rather than this control's.
+     * @default false
+     */
+    structuredData?: boolean;
+}
+/**
+ * A score out of five, as a row of stars.
+ *
+ * Underneath an interactive rating is a radio group of real `<input>`s, one per
+ * choosable score, each visually hidden under the half of a star it stands for.
+ * That is the whole accessibility argument: a rating *is* "exactly one of
+ * these", so it gets one tab stop for the row, the arrow keys within it,
+ * `aria-checked` on the one that is taken and a value in a form submission —
+ * none of which a row of `<button>`s or a `<div>` with a click handler would
+ * have, and all of which the browser gives for free.
+ *
+ * The fraction is drawn by laying the filled star over the empty one and
+ * clipping it to a percentage of the width. Nothing is transformed and no glyph
+ * is scaled, so a half star is the left half of exactly the star beside it. The
+ * clip runs from the inline start, so it fills from the right under RTL with
+ * nothing being told to.
+ *
+ * `readOnly` is a different component in the same clothes: no inputs, no radio
+ * group, and one `role="img"` carrying the score as a sentence. A star display
+ * that kept twenty focusable radios would be twenty tab stops on a page that was
+ * only reporting a number.
+ *
+ * ## Why the stars are not amber
+ *
+ * Because there is no amber in this library's colour system. MD3 defines four
+ * accent families — `primary`, `secondary`, `tertiary` and `error` — and a fifth
+ * colour hardcoded here would be one the token sheet has no name for and a theme
+ * has no way to change. A product whose stars must be gold sets
+ * `--mp-sys-color-tertiary` to gold and asks for `color="tertiary"`, which is the
+ * same answer this library gives everywhere else.
+ */
+export declare const MPRating: React.ForwardRefExoticComponent<MPRatingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/rating/MPRating.js

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

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

@@ -0,0 +1,2 @@
+export { MPRating } from './MPRating';
+export type { MPRatingLabels, MPRatingProps } from './MPRating';

package/dist/components/rating/index.js

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

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,103 @@
+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.
+     *
+     * With a floating label it is held back until the label has risen out of its
+     * way, which is the moment the select is focused or opened. Two greyed strings
+     * in one box is not a hint, it is a collision.
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * Label for the select, drawn in the outline's notch and — while nothing is
+     * chosen, the popup is shut and there is no `startIcon` — resting on the
+     * trigger's own line where the placeholder would be. See `floatingLabel`.
+     */
+    label?: React.ReactNode;
+    /**
+     * Whether the label rests on the trigger's line while there is nothing to make
+     * room for, and rises into the notch on focus or on the first choice.
+     *
+     * `false` pins it in the notch, which is the one thing a floating label costs:
+     * a select with a label and one without no longer sit at the same height in a
+     * form until both are answered. A `startIcon` holds the label up regardless —
+     * the icon is already standing where the resting label would be.
+     * @default true
+     */
+    floatingLabel?: boolean;
+    /** 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. Generated when it is
+     * left out.
+     */
+    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 d,useFloatingLabel as c}from"../../internal/FieldOutline";import{MPSupportingText as m}from"../../internal/SupportingText";import{CONTROL_ICON as p,PROSE_TEXT as u,hasContent as h}from"../../internal/scale";const f={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:g,value:x,defaultValue:v,onValueChange:b,placeholder:N,label:j,floatingLabel:w=!0,description:I,errorMessage:y,startIcon:z,size:S="md",fullWidth:P=!1,required:k=!1,disabled:M=!1,readOnly:O=!1,name:V,id:q},T){const _=h(y),C=f[S],R=t.useId(),F=q??R,[L,W]=t.useState(v??null),[B,A]=t.useState(!1),D=void 0===x?L:x,{shrunk:E,focusProps:G}=c({floating:w&&h(j),filled:null!==D&&""!==D,pinned:B||!!z}),H=t.useMemo(()=>g.map(e=>({label:e.label??String(e.value),value:e.value})),[g]);return a(r.Root,{className:["mp-select group flex-col align-top",P?"flex w-full":"inline-flex w-fit"].join(" "),disabled:M,invalid:_,"data-mp-size":S,...G,children:[a(n.Root,{id:F,name:V,items:H,value:x,defaultValue:v,onValueChange:e=>{W(e??null),b?.(e??null)},onOpenChange:A,disabled:M,readOnly:O,required:k,children:[a("div",{className:"relative w-full",children:[a(n.Trigger,{ref:T,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",C.padding,C.height,u[S],M?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(O?"cursor-default":"cursor-pointer")].join(" "),children:[z?e("span",{className:["flex shrink-0 items-center",M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:z}):null,e(n.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",M?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:E?N:void 0}),e(n.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(i,{icon:o,size:p[S]})})]}),e(d,{label:j,required:k,notched:E}),h(j)?e(s,{size:S,label:j,required:k,htmlFor:F,shrunk:E}):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",u[S]].join(" "),children:e(n.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:g.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(m,{description:I,errorMessage:y,className:C.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";