material-plus-ui 0.0.1 → 1.0.0

package/dist/components/switch/MPSwitch.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import type { MPColor, MPSize } from '../../types';
+/** Which side of the track the label sits on. */
+export type MPSwitchLabelPlacement = 'start' | 'end';
+export interface MPSwitchProps {
+    /** Whether the switch is on. Use with `onCheckedChange` for a controlled one. */
+    checked?: boolean;
+    /** Whether it starts on, for an uncontrolled one. */
+    defaultChecked?: boolean;
+    /** Called with the new state — a boolean, not an event. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** The text beside the track, wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** The line under the label. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /** The message under the label, which also turns the switch over. */
+    errorMessage?: React.ReactNode;
+    /**
+     * Draws a tick in the thumb when it is on and a cross when it is off.
+     *
+     * Off by default, and worth turning on wherever the two states are not
+     * obviously different in context: the thumb's position and the track's colour
+     * are otherwise the only signals, and one of those is a hue.
+     * @default false
+     */
+    icons?: boolean;
+    /**
+     * Which side the label sits on. `end` reads as a caption for the control;
+     * `start` is for a settings list, where the labels form a column and every
+     * switch lines up on the right.
+     * @default 'end'
+     */
+    labelPlacement?: MPSwitchLabelPlacement;
+    /**
+     * The track's size and the label's type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the track takes when it is on.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Marks the switch required. */
+    required?: boolean;
+    /** Greys the switch out and stops it taking input. */
+    disabled?: boolean;
+    /** Shows the state without allowing it to be changed. */
+    readOnly?: boolean;
+    /** Name of the form control. */
+    name?: string;
+    /**
+     * The id put on the control and pointed at by the label. Derived from `name`
+     * when omitted, and generated when there is no name either.
+     */
+    id?: string;
+    /**
+     * Stretches the row, so a `start` label takes the slack and the track sits
+     * against the far edge. This is what makes a column of settings line up.
+     */
+    fullWidth?: boolean;
+}
+/**
+ * A Material Design switch.
+ *
+ * The difference from a checkbox is not visual, it is temporal: a checkbox is a
+ * value that gets submitted with a form, a switch takes effect the moment it
+ * moves. If there is a Save button underneath, it should have been a checkbox.
+ *
+ * The thumb is the one thing in this library that actually travels, so this is
+ * also the only place the spec's `standard` easing is read — quick to leave, slow
+ * to arrive, which is what makes a 200ms move read as something being pushed
+ * rather than as something being teleported and then apologised for.
+ */
+export declare const MPSwitch: React.ForwardRefExoticComponent<MPSwitchProps & React.RefAttributes<HTMLElement>>;

package/dist/components/switch/MPSwitch.js

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

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

@@ -0,0 +1,2 @@
+export { MPSwitch } from './MPSwitch';
+export type { MPSwitchLabelPlacement, MPSwitchProps } from './MPSwitch';

package/dist/components/switch/index.js

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

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

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import type { MPAlign, MPColor, MPSize, MPVariant } from '../../types';
+/** Which edge the text in a column lines up against. */
+export type MPTableAlign = MPAlign;
+/**
+ * A column: its heading, its default width, and how to get a cell out of a row.
+ *
+ * This is the whole reason the component takes data rather than markup. A `<td>`
+ * written out per row can silently disagree with the `<th>` above it about how
+ * many there are or what order they come in; a column list cannot.
+ */
+export interface MPTableColumn<Row> {
+    /**
+     * Identifies the column, and — unless `render` says otherwise — names the
+     * property to read off each row.
+     */
+    key: string;
+    /** The heading. Defaults to the `key`, which is usually not what you want. */
+    label?: React.ReactNode;
+    /**
+     * The column's default width. A number is pixels; a string is any CSS length.
+     *
+     * "Default" is meant: the table still balances the columns to fill its width,
+     * so this is a starting proportion rather than a guarantee.
+     */
+    width?: number | string;
+    /**
+     * Text alignment. Numbers usually want `end` so their digits line up in a
+     * column; everything else wants `start`.
+     * @default 'start'
+     */
+    align?: MPTableAlign;
+    /**
+     * Renders the cell. Without it the cell is `row[key]` rendered as-is, which
+     * covers strings and numbers and nothing else.
+     */
+    render?: (row: Row, index: number) => React.ReactNode;
+}
+export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /** The columns, in the order they appear. */
+    headers: readonly MPTableColumn<Row>[];
+    /** The rows. */
+    items: readonly Row[];
+    /**
+     * A stable key per row. Defaults to the row's index, which is fine for a
+     * static table and wrong for one that sorts or filters.
+     */
+    getRowKey?: (row: Row, index: number) => React.Key;
+    /** Shown above the table, and read out as its accessible name. */
+    caption?: React.ReactNode;
+    /**
+     * What to show instead of rows when `items` is empty.
+     * @default 'No data'
+     */
+    empty?: React.ReactNode;
+    /**
+     * Tints every other row. Useful for a wide table where the eye has to track
+     * across; noise on a narrow one.
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Lights the row under the pointer.
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * Pins the header while the body scrolls. Only does anything if something
+     * around the table actually constrains its height.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /** Makes rows activatable. Also turns on the hover treatment. */
+    onRowClick?: (row: Row, index: number) => void;
+    /**
+     * How much surface the sheet around the table paints.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family a hovered or pressed row reads. The cells themselves
+     * stay neutral.
+     * @default 'primary'
+     */
+    color?: MPColor;
+}
+/**
+ * A grid of data.
+ *
+ * The sheet takes the same `variant`, `size` and `color` as everything it might
+ * sit next to. What the table adds is the part that is genuinely tabular: the
+ * columns, the rows, and the fact that the two cannot drift apart.
+ *
+ * ## Why it is not `React.forwardRef`
+ *
+ * It is generic in `Row`, and a `forwardRef` component's type erases that: the
+ * wrapper is typed as one component rather than as a function with a type
+ * parameter, so `headers` and `items` would stop checking against each other and
+ * `column.render` would hand back `unknown`. Losing that check would cost more
+ * than a ref on the scroll container is worth — and a caller who needs one can
+ * put it on a `<div>` of their own around this.
+ */
+export declare function MPTable<Row>({ headers, items, getRowKey, caption, empty, striped, hoverable, stickyHeader, onRowClick, variant, size, color, className, style, ...props }: MPTableProps<Row>): React.JSX.Element;

package/dist/components/table/MPTable.js

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

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

@@ -0,0 +1,2 @@
+export { MPTable } from './MPTable';
+export type { MPTableAlign, MPTableColumn, MPTableProps } from './MPTable';

package/dist/components/table/index.js

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

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import type { MPStyleProps } from '../../types';
 /** The input modes this field is built for. */
 export type MPTextFieldType = 'email' | 'password' | 'text';
-export interface MPTextFieldProps {
+export interface MPTextFieldProps extends MPStyleProps {
     /**
      * The field's text. This is a controlled component: what is shown is what is
      * passed, except during composition — see `onChange`.
@@ -20,28 +21,21 @@ export interface MPTextFieldProps {
     /** Native `autocomplete` token — `'email'`, `'current-password'`, `'off'`. */
     autoComplete?: string;
     /**
-     * Label above the field. Always drawn shrunk and notched rather than floating
-     * over the placeholder, so a field with a label and a field without one sit
-     * at the same height in a form.
+     * Label above the field. Always drawn in the outline's notch rather than
+     * floating over the placeholder, so a field with a label and a field without
+     * one sit at the same height in a form.
      */
     label?: string;
     /** Marks the field required, both to assistive technology and to the label. */
     required?: boolean;
     /** Greys the field out and stops it taking input. */
     disabled?: boolean;
-    /**
-     * Draws the field at MUI's `medium` size instead of `small`.
-     * @default false
-     */
-    large?: boolean;
     /**
      * Focuses the field on mount — except on a small screen, where it would
      * summon the on-screen keyboard over the page the reader has just arrived at.
      * @default false
      */
     autoFocus?: boolean;
-    /** Stretches the field to the width of its container. */
-    fullWidth?: boolean;
     /**
      * Shows the value without allowing edits. Unlike `disabled` the text stays
      * selectable and the field stays in the tab order, which is what you want for
@@ -97,14 +91,19 @@ export interface MPTextFieldProps {
     onFormReset?: () => void;
 }
 /**
- * A Material UI text field that survives an IME.
+ * A Material Design text field that survives an IME.
+ *
+ * The control is an outlined text field, drawn from Material Design 3's own
+ * component tokens: `outline` at rest, `primary` and a 2px stroke on focus,
+ * `error` when there is a message, and the spec's disabled opacities. Behaviour
+ * that a field needs but has nothing to do with looks — the label association,
+ * the validity plumbing, the `aria-describedby` onto the supporting text —
+ * comes from Base UI's `Field`.
  *
- * The field is `@mui/material`'s `OutlinedInput`, and everything MUI decides
- * about how a field looks — the notched outline, the sizes, the palette, the
- * error colour — it still decides here. What this component adds is the
- * handling around a controlled input that a language with an input method
- * exposes, plus the parts of a field that are always assembled by hand
- * anyway: the label, the helper text, the adornments and the password toggle.
+ * What this component adds is the handling around a controlled input that a
+ * language with an input method exposes, plus the parts of a field that are
+ * always assembled by hand anyway: the notch, the adornments and the password
+ * toggle.
  *
  * ## The composition problem
  *

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import r from"@mui/material/FormControl";import n from"@mui/material/FormHelperText";import i from"@mui/material/IconButton";import a from"@mui/material/InputAdornment";import l from"@mui/material/InputLabel";import s from"@mui/material/OutlinedInput";import m from"@mui/material/useMediaQuery";import{useTheme as u}from"@mui/material/styles";import{MPIcon as d}from"../icon/MPIcon";import{VisibilityIcon as p,VisibilityOffIcon as c}from"../../constants/icons";export const MPTextField=o.forwardRef(function({value:f,name:h,type:x="text",placeholder:y,autoComplete:b,label:g,onChange:v,onFormReset:C,onSubmit:w,errorMessage:I="",required:F=!1,fullWidth:M=!1,readOnly:k=!1,autoFocus:z=!1,large:E=!1,disabled:S=!1,disableEnterKey:D=!1,rows:R,maxLength:j,startIcon:A,resizable:L=!1,id:O},P){const q=o.useRef(null),K=u(),T=m(K.breakpoints.down("sm")),[U,W]=o.useState(!1),[B,H]=o.useState(!1),[Q,$]=o.useState(f),G=o.useId(),J=O??`mp-text-field-${h??G}`,N=!!R,V=o.useCallback(e=>{q.current=e,"function"==typeof P?P(e):P&&(P.current=e)},[P]),X=e=>{e.preventDefault()};return o.useEffect(()=>{B||$(f)},[f,B]),o.useEffect(()=>{z&&!T&&q.current?.focus()},[]),t(r,{required:F,fullWidth:M,error:I.length>0,children:[g&&e(l,{size:"small",color:"secondary",shrink:!0,htmlFor:J,children:g}),e(s,{id:J,autoComplete:b,inputRef:V,type:U?"text":x,label:g,notched:!!g,rows:R,multiline:N,color:k?"secondary":void 0,readOnly:k,placeholder:y,startAdornment:A?e(a,{position:"start",children:A}):null,inputProps:j?{maxLength:j}:void 0,endAdornment:"password"===x?e(a,{position:"end",children:e(i,{"aria-label":U?"hide the password":"display the password",onClick:()=>W(e=>!e),onMouseDown:X,onMouseUp:X,edge:"end",disabled:S,children:e(d,{icon:U?p:c,size:E?22:20})})}):null,size:E?"medium":"small",sx:L&&N?{"& textarea":{resize:"vertical"}}:void 0,name:h,disabled:S,value:B?Q:f,onChange:e=>{C?.();const t=e.target.value;B&&$(t),v?.(t)},onCompositionStart:()=>{H(!0),$(f)},onCompositionUpdate:e=>{$(e.target.value)},onCompositionEnd:e=>{H(!1);const t=e.target.value;v?.(t),$(t)},onKeyDown:e=>{"Enter"===e.key&&(w?.(),N&&!D||e.preventDefault())}}),I.length>0&&e(n,{error:!0,children:I})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as a}from"@base-ui/react/field";import{MPIcon as n}from"../icon/MPIcon";import{MPFieldLabel as r,MPFieldOutline as l}from"../../internal/FieldOutline";import{VisibilityIcon as i,VisibilityOffIcon as s}from"../../constants/icons";const d={xs:{padding:"px-2",control:"py-1.5",text:"text-mp-body-medium",icon:16},sm:{padding:"px-3",control:"py-2.5",text:"text-mp-body-medium",icon:18},md:{padding:"px-4",control:"py-4",text:"text-mp-body-large",icon:20},lg:{padding:"px-4",control:"py-5",text:"text-mp-body-large",icon:22},xl:{padding:"px-5",control:"py-6",text:"text-mp-body-large",icon:24}};export const MPTextField=o.forwardRef(function({value:p,name:c,type:m="text",placeholder:u,autoComplete:f,label:x,onChange:b,onFormReset:y,onSubmit:g,errorMessage:h="",required:v=!1,fullWidth:w=!1,readOnly:C=!1,autoFocus:j=!1,size:k="md",disabled:z=!1,disableEnterKey:E=!1,rows:M,maxLength:N,startIcon:F,resizable:S=!1,id:q},D){const R=o.useRef(null),[I,O]=o.useState(!1),[B,K]=o.useState(!1),[L,P]=o.useState(p),U=o.useId(),$=q??`mp-text-field-${c??U}`,_=!!M,T=h.length>0,W=d[k],A=o.useCallback(e=>{R.current=e,"function"==typeof D?D(e):D&&(D.current=e)},[D]),G=e=>{e.preventDefault()};return o.useEffect(()=>{B||P(p)},[p,B]),o.useEffect(()=>{j&&!window.matchMedia("(max-width: 599.95px)").matches&&R.current?.focus()},[]),t(a.Root,{className:["mp-text-field group relative",w?"w-full":"inline-block","align-top"].join(" "),disabled:z,invalid:T,"data-mp-size":k,children:[t("div",{className:["relative flex w-full items-center gap-2",W.padding,_?"py-2":""].filter(Boolean).join(" "),children:[e(l,{label:x,required:v}),F?e("span",{className:"text-mp-on-surface-variant group-data-disabled:text-mp-on-surface/38 flex shrink-0 items-center",children:F}):null,e(a.Control,{render:_?e("textarea",{rows:M}):e("input",{}),id:$,name:c,type:_?void 0:I?"text":m,required:v,readOnly:C,disabled:z,autoComplete:f,placeholder:u,maxLength:N,value:B?L:p,ref:A,className:[`${W.text} text-mp-on-surface w-full min-w-0 flex-1`,"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary",W.control,_?"py-0":"",_&&S?"resize-y":"resize-none","group-data-disabled:text-mp-on-surface/38","placeholder:text-mp-on-surface-variant group-data-disabled:placeholder:text-mp-on-surface/38"].filter(Boolean).join(" "),onChange:e=>{y?.();const t=e.target.value;B&&P(t),b?.(t)},onCompositionStart:()=>{K(!0),P(p)},onCompositionUpdate:e=>{P(e.target.value)},onCompositionEnd:e=>{K(!1);const t=e.target.value;y?.(),b?.(t),P(t)},onKeyDown:e=>{"Enter"===e.key&&(g?.(),_&&!E||e.preventDefault())}}),"password"!==m||_?null:e("button",{type:"button","aria-label":I?"hide the password":"display the password",onClick:()=>O(e=>!e),onMouseDown:G,onMouseUp:G,disabled:z,className:["text-mp-on-surface-variant -mr-1 flex shrink-0 items-center justify-center","cursor-pointer appearance-none border-0 bg-transparent p-1 font-[inherit]","rounded-full outline-none","hover:text-mp-on-surface focus-visible:text-mp-primary","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:e(n,{icon:I?i:s,size:W.icon})})]}),x?e(r,{size:k,label:x,required:v,htmlFor:$}):null,T?e(a.Error,{match:!0,className:["mp-text-field__support text-mp-body-small text-mp-error mt-1 block",W.padding,"group-data-disabled:text-mp-on-surface/38"].join(" "),children:h}):null]})});

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

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPColor, MPSize } from '../../types';
+/**
+ * When the line under a link is drawn.
+ *
+ * `always` is the default, and the reason is `color`: an `MPTextLink` takes no
+ * accent family unless one is asked for, so with the line off there would be
+ * nothing at all distinguishing a link from the sentence it sits in. That is
+ * also why this is not a boolean — "no underline" is a real choice for a link in
+ * a nav bar or a footer, where position already says what it is, and it should
+ * have to be spelled out rather than fallen into.
+ */
+export type MPTextLinkUnderline = 'always' | 'hover' | 'none';
+export interface MPTextLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color'> {
+    /** Where the link goes. */
+    href: string;
+    /**
+     * When the underline is drawn.
+     * @default 'always'
+     */
+    underline?: MPTextLinkUnderline;
+    /**
+     * Which accent family the link reads. Like `MPTypography` and unlike every
+     * control in the library this has **no default** — a link in a paragraph is
+     * usually the paragraph's own colour with a line under it, and a component
+     * that arrived pre-dyed is one a page has to undo.
+     */
+    color?: MPColor;
+    /**
+     * The type scale. Also no default: a link inside a sentence is the size of the
+     * sentence. Set it for a link that stands on its own.
+     */
+    size?: MPSize;
+    /**
+     * Opens the link in a new tab, with the `rel` that keeps the new page from
+     * reaching back into this one.
+     *
+     * A window changing under the reader is the one thing about a link that cannot
+     * be seen before it happens, so this also turns `icon` on by default and adds
+     * a line for a screen reader — see `newTabLabel`.
+     * @default false
+     */
+    newTab?: boolean;
+    /**
+     * The mark after the label. `true` draws the arrow leaving its box when
+     * `newTab` is on and the chain otherwise, `false` draws nothing, and a node of
+     * your own replaces the glyph.
+     *
+     * Left out, it follows `newTab`.
+     */
+    icon?: React.ReactNode | boolean;
+    /**
+     * What a screen reader hears after the label when `newTab` is on. A link
+     * without it says nothing of its own, so this changes nothing there.
+     * @default 'Opens in a new tab'
+     */
+    newTabLabel?: string;
+    /**
+     * Renders something other than an `<a>` — the `Link` a router brings, most of
+     * the time. `href` still goes through, so `render={<NextLink href="…" />}`
+     * needs it written once, on the `MPTextLink`.
+     */
+    render?: useRender.RenderProp;
+    /** The label. */
+    children?: React.ReactNode;
+}
+/**
+ * A link, in a sentence or on its own.
+ *
+ * Everything about it is deliberately smaller than a button. It has no surface,
+ * no height of its own and no colour unless asked — what it has is a line under
+ * it, which is the one mark a reader already knows means "this goes somewhere".
+ *
+ * The three things it does that a bare `<a>` does not: it draws that line on a
+ * schedule (`always`, or only under the pointer), it marks a link that opens a
+ * new tab both visibly and for a screen reader, and it takes `render`, so the
+ * `Link` a router brings can wear all of it.
+ *
+ * ## Why this is not a button with an `href`
+ *
+ * `MPButton` deliberately has no `href`, and this is the other half of that
+ * decision. A link is announced as a link, opens in a new tab on the middle
+ * mouse button, and shows its destination in the status bar; a button does none
+ * of those and should not pretend to. Two components, because they are two
+ * things.
+ */
+export declare const MPTextLink: React.ForwardRefExoticComponent<MPTextLinkProps & React.RefAttributes<HTMLAnchorElement>>;

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

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

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

@@ -0,0 +1,2 @@
+export { MPTextLink } from './MPTextLink';
+export type { MPTextLinkProps, MPTextLinkUnderline } from './MPTextLink';

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

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

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

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { type MPPickerLabels } from '../../internal/Calendar';
+import { type MPPickerShellProps } from '../../internal/Picker';
+import { type MPTimeUnit } from '../../internal/date';
+/**
+ * Which column of the clock a row belongs to.
+ *
+ * Re-exported so a caller writing a `shouldDisableTime` rule can name the
+ * argument it is handed.
+ */
+export type { MPTimeUnit };
+export interface MPTimePickerProps extends MPPickerShellProps {
+    /**
+     * The chosen time. A `Date`, so it carries a day as well — see
+     * `referenceDate`.
+     */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The day a chosen time is written onto while there is no value yet.
+     * @default today
+     */
+    referenceDate?: Date;
+    /** The earliest time of day that may be chosen. Only the clock is read. */
+    minTime?: Date | null;
+    /** The latest time of day that may be chosen. */
+    maxTime?: Date | null;
+    /**
+     * Blocks individual rows. Called once per row per column with the instant that
+     * row would produce and the column it is in, so a rule may be as coarse as
+     * "no afternoons" or as fine as one minute.
+     */
+    shouldDisableTime?: (value: Date, unit: MPTimeUnit) => boolean;
+    /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
+    hour12?: boolean;
+    /**
+     * Adds the seconds column.
+     * @default false
+     */
+    showSeconds?: boolean;
+    /**
+     * How far apart the rows of each column are.
+     * @default 1
+     */
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+    /**
+     * A BCP 47 tag deciding whether the clock is 12- or 24-hour, what AM and PM
+     * are called, and how the trigger writes the time. Falls back to the nearest
+     * `MPLocaleProvider`, then to the platform's own.
+     */
+    locale?: string;
+    /**
+     * How the trigger writes the chosen time. Passed straight to `Intl`.
+     * @default { hour: 'numeric', minute: '2-digit' }, plus seconds when shown
+     */
+    format?: Intl.DateTimeFormatOptions;
+    placeholder?: React.ReactNode;
+    clearable?: boolean;
+    /**
+     * Offers the shortcut to the current time in the footer.
+     * @default true
+     */
+    showNowButton?: boolean;
+    /**
+     * Closes the popup as soon as any column is touched.
+     *
+     * `false` by default, and unlike `MPDatePicker`: a time is two answers, and
+     * closing after the first one would make choosing 9:30 a matter of opening the
+     * popup twice.
+     * @default false
+     */
+    closeOnSelect?: boolean;
+    labels?: Partial<MPPickerLabels>;
+    /** Identifies the field when a form is submitted, as `HH:MM` (`HH:MM:SS`). */
+    name?: string;
+}
+/**
+ * A time of day, chosen from columns.
+ *
+ * The bounds are checked at the granularity of the column being drawn, which is
+ * the detail that separates a working time picker from a frustrating one. With a
+ * `minTime` of 09:30, the hour `9` stays available — the hour *contains* allowed
+ * minutes — and it is the minute column that greys out `00` through `25`. The
+ * naive check compares the whole candidate instant, hides the 9 entirely, and
+ * makes half past nine unreachable.
+ *
+ * The value is a `Date` rather than a string or a number of minutes, because
+ * everything else in this library that carries a moment is one, and because a
+ * time on its own has nowhere to record which day it is on — which is what
+ * decides whether it crossed a daylight-saving boundary. `referenceDate` is the
+ * day a bare time is written onto.
+ *
+ * ## Columns, not MD3's dial
+ *
+ * This is the one place the library knowingly draws something the specification
+ * draws differently, and the reason is in `internal/Calendar.tsx` next to the
+ * grid itself: a dial is a pointer control, MD3 ships a second "time input" mode
+ * precisely because a dial cannot serve a keyboard, and a component with two
+ * implementations of one question has the accessible one hidden behind a toggle.
+ * Columns answer both readers at once, in the library's own shapes.
+ */
+export declare const MPTimePicker: React.ForwardRefExoticComponent<MPTimePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/time-picker/MPTimePicker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as n from"react";import{MPButton as l}from"../button/MPButton";import{MPIcon as r}from"../icon/MPIcon";import{ClockIcon as t}from"../../constants/icons";import{MPTimeGrid as a}from"../../internal/Calendar";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c}from"../../internal/Picker";import{useMPLocale as u,useMPMessages as m}from"../../internal/locale";import{CONTROL_ICON as d}from"../../internal/scale";import{displaySamples as p,formatDate as h,isHour12 as f,isValidDate as g,secondsOfDay as S,timeUnitSpan as b,toISOTime as v,withPlaceholder as C,withTime as x}from"../../internal/date";export const MPTimePicker=n.forwardRef(function({value:k,defaultValue:w,onValueChange:z,open:D,defaultOpen:O,onOpenChange:y,referenceDate:M,minTime:P,maxTime:T,shouldDisableTime:j,hour12:I,showSeconds:V=!1,hourStep:B=1,minuteStep:N=1,secondStep:R=1,locale:F,format:H,placeholder:q,clearable:A=!1,showNowButton:E=!0,closeOnSelect:G=!1,labels:J,name:K,size:L="md",color:Q="primary",readOnly:U=!1,disabled:W=!1,startIcon:X,...Y},Z){const $=u(F),_=m("picker",$,J),ee=I??f($),[oe,ne]=n.useState(w??null),le=void 0!==k?k:oe,[re,te]=n.useState(O??!1),ae=D??re,[ie]=n.useState(()=>M??new Date),se=e=>{e&&(U||W)||(void 0===D&&te(e),y?.(e))},ce=e=>{void 0===k&&ne(e),z?.(e)},ue=n.useCallback((e,o)=>{const[n,l]=b(o,e);return!!(g(P)&&l<S(P))||(!!(g(T)&&n>S(T))||(j?.(e,o)??!1))},[P,T,j]),me=H??{hour:"numeric",minute:"2-digit",hour12:ee,...V?{second:"2-digit"}:{}},de=new Date,pe=x(M??ie,{hours:de.getHours(),minutes:de.getMinutes(),seconds:V?de.getSeconds():0}),he=E||A||!G,fe=n.useMemo(()=>C(p($,me),q),[$,me,q]);return e(c,{...Y,slug:"time-picker",size:L,color:Q,readOnly:U,disabled:W,name:K,triggerRef:Z,startIcon:X??e(r,{icon:t,size:d[L]}),display:g(le)?h(le,$,me):q??"",samples:fe,empty:!g(le),clearable:A,onClear:()=>ce(null),open:ae,onOpenChange:se,labels:_,hiddenValues:K?[{name:K,value:g(le)?v(le,V):""}]:void 0,children:o("div",{className:"flex flex-col "+(he?"gap-1.5":""),children:[e(a,{size:L,locale:$,value:g(le)?le:null,referenceDate:M??ie,onChange:e=>{ce(e),G&&se(!1)},hour12:ee,showSeconds:V,hourStep:B,minuteStep:N,secondStep:R,shouldDisableTime:ue,labels:_,autoFocus:!0}),he?o(s,{children:[A?e(l,{variant:"text",size:i[L],color:Q,onClick:()=>{ce(null),se(!1)},children:_.clear}):null,E?e(l,{variant:"text",size:i[L],color:Q,disabled:ue(pe,"second"),onClick:()=>{ce(pe),se(!1)},children:_.now}):null,G?null:e(l,{variant:"filled",size:i[L],color:Q,onClick:()=>se(!1),children:_.done})]}):null]})})});

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

@@ -0,0 +1,2 @@
+export { MPTimePicker } from './MPTimePicker';
+export type { MPTimePickerProps, MPTimeUnit } from './MPTimePicker';

package/dist/components/time-picker/index.js

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

package/dist/components/timeline/MPTimeline.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPColor, MPOrientation, MPSize } from '../../types';
+/**
+ * How far along one item is.
+ *
+ * Three states rather than two, because "the one you are on" is not the same
+ * claim as "done", and a sequence that cannot say which step is current is a
+ * list. Each gets its own axis — a filled bullet, a filled bullet with a halo
+ * around it, an empty one — rather than three shades of the same thing.
+ */
+export type MPTimelineStatus = 'complete' | 'current' | 'upcoming';
+/** How the line between two items is drawn. `none` leaves the gap open. */
+export type MPTimelineConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+export interface MPTimelineProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
+    /**
+     * How far the sequence has got: the index of the item being worked on now.
+     * Everything before it is complete, everything after it is still to come.
+     *
+     * An index rather than a value, because a timeline has no selection — nothing
+     * here is chosen, and the only question is how far down the list reality has
+     * reached. Omit it and every item is `upcoming` unless it says otherwise; pass
+     * the item count to mark the whole sequence done.
+     */
+    active?: number;
+    /** @default 'md' */
+    size?: MPSize;
+    /** @default 'primary' */
+    color?: MPColor;
+    /**
+     * Which way the sequence runs. `vertical` is the default and the one that
+     * takes an arbitrary number of steps with an arbitrary amount to say about
+     * each; `horizontal` is the stepper across the top of a checkout, and it is
+     * only honest while every label is short.
+     * @default 'vertical'
+     */
+    orientation?: MPOrientation;
+    /** Renders something other than an `<ol>` — Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+export interface MPTimelineItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'title'> {
+    /** The heading of this step. */
+    title?: React.ReactNode;
+    /**
+     * When it happened — a date, a duration, a name. Set beside the title on a
+     * wide item and under it on a narrow one.
+     */
+    meta?: React.ReactNode;
+    /**
+     * What goes inside the bullet: a number, an icon, an avatar. Omit it and the
+     * bullet is a plain disc, which is what a step with nothing to say about
+     * itself should be.
+     */
+    bullet?: React.ReactNode;
+    /**
+     * Overrides what the timeline's `active` would have computed for this item — a
+     * step that failed and stopped the sequence, a step that was skipped.
+     */
+    status?: MPTimelineStatus;
+    /** Overrides the timeline's accent family for this item alone. */
+    color?: MPColor;
+    /**
+     * How the line to the next item is drawn.
+     * @default 'solid'
+     */
+    connector?: MPTimelineConnector;
+    /** The body of the step. */
+    children?: React.ReactNode;
+}
+/**
+ * One step.
+ *
+ * Its index is not a prop and cannot be: an item that had to be told where it
+ * was in the list would be an item every caller could put in the wrong place,
+ * and `active={2}` would stop meaning anything. The timeline numbers its
+ * children as it walks them and hands each one its index through a context.
+ */
+export declare const MPTimelineItem: React.ForwardRefExoticComponent<MPTimelineItemProps & React.RefAttributes<HTMLLIElement>>;
+/**
+ * A sequence of steps, in the order they happen in.
+ *
+ * There is no Base UI primitive under this and there should not be: a timeline
+ * has no selection, no roving focus and no keyboard contract — it is a list, and
+ * reaching for a composite primitive to draw one would hand every consumer's
+ * record of events the semantics of a widget.
+ *
+ * It is an `<ol>` for the reason it exists at all: the order *is* the content. A
+ * screen reader announcing "list of 5 items" over an unordered list would be
+ * describing something else.
+ *
+ * The children are numbered here rather than by a prop on each item, so `active`
+ * has something to count against and inserting a step in the middle does not
+ * mean renumbering the ones after it.
+ */
+export declare const MPTimeline: React.ForwardRefExoticComponent<MPTimelineProps & React.RefAttributes<HTMLOListElement>>;

package/dist/components/timeline/MPTimeline.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useRender as n}from"@base-ui/react/use-render";import{accentSlots as l}from"../../internal/accent";import{hasContent as a,META_TEXT as o,PROSE_TEXT as i,SHEET_TITLE as s}from"../../internal/scale";const c=r.createContext(null),m=r.createContext({index:0,last:!1}),p={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"},d={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},u={xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},x={xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},f={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""},b={complete:"bg-(--_mp-accent) text-(--_mp-on-accent)",current:"bg-(--_mp-accent) text-(--_mp-on-accent) shadow-[0_0_0_0.25rem_var(--_mp-accent-container)]",upcoming:"border-mp-outline text-mp-on-surface-variant border-2 bg-transparent"},v={complete:"border-(--_mp-accent)",current:"border-mp-outline-variant",upcoming:"border-mp-outline-variant"},h={complete:"text-mp-on-surface",current:"text-(--_mp-accent)",upcoming:"text-mp-on-surface-variant"};export const MPTimelineItem=r.forwardRef(function({title:n,meta:g,bullet:_,status:N,color:y,connector:z="solid",className:j,style:w,children:$,...C},P){const B=r.useContext(c),{index:M,last:k}=r.useContext(m),R=B?.size??"md",T=B?.orientation??"vertical",A=y??B?.color??"primary",I=B?.active??null,q=N??(null===I?"upcoming":M<I?"complete":M===I?"current":"upcoming"),D="horizontal"===T,E="none"!==z&&!k,F=e("span",{"aria-hidden":"true",className:["rounded-mp-full relative z-10 flex shrink-0 items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",b[q],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)"].join(" "),children:_}),G=E?e("span",{"aria-hidden":"true",className:["pointer-events-none absolute",D?"start-(--_mp-bullet) top-[calc(var(--_mp-bullet)/2_-_1px)] end-0 border-t-2":"top-(--_mp-bullet) start-[calc(var(--_mp-bullet)/2_-_1px)] bottom-0 border-s-2",f[z],v[q]].filter(Boolean).join(" ")}):null,H=t("div",{className:"flex min-w-0 flex-col gap-0.5 "+(D?"mt-2":""),children:[a(n)||a(g)?t("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[a(n)?e("span",{className:`${s[R]} ${h[q]}`,children:n}):null,a(g)?e("span",{className:`text-mp-on-surface-variant ${o}`,children:g}):null]}):null,a($)?e("div",{className:`text-mp-on-surface-variant ${i[R]}`,children:$}):null]});return t("li",{ref:P,"aria-current":"current"===q?"step":void 0,"data-status":q,className:["relative",D?`flex min-w-0 flex-1 flex-col ${k?"":x[R]}`:`flex ${d[R]} ${k?"":u[R]}`,j??""].filter(Boolean).join(" "),style:{"--_mp-bullet":p[R],...l(A),...w},...C,children:[G,F,H]})});export const MPTimeline=r.forwardRef(function({active:t,size:l="md",color:a="primary",orientation:o="vertical",render:i,className:s,style:p,children:d,...u},x){const f=r.Children.toArray(d),b=f.length,v=r.useMemo(()=>({size:l,orientation:o,color:a,active:t??null}),[l,o,a,t]),h=n({render:i??e("ol",{}),ref:x,props:{role:"list","data-mp-size":l,className:["mp-timeline flex","horizontal"===o?"flex-row":"flex-col",s??""].filter(Boolean).join(" "),style:p,children:f.map((t,r)=>e(m.Provider,{value:{index:r,last:r===b-1},children:t},r)),...u}});return e(c.Provider,{value:v,children:h})});