material-plus-ui 0.0.1 → 1.1.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. Generated when it is
+     * left out.
+     */
+    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??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,120 @@
+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.
+     *
+     * A row that answers a press has to answer a keyboard too, so each one joins
+     * the tab order and takes Enter and Space. That is the honest minimum for a
+     * `<tr>` — a row cannot be wrapped in a `<button>` the way an
+     * [MPListItem](../layout/list) is, because a `<button>` is not something a
+     * `<tbody>` may contain.
+     *
+     * It is also worth knowing what it costs: a table of two hundred rows becomes
+     * two hundred tab stops. When the row's job is to *navigate*, put a link in
+     * the first cell instead — one tab stop per row that is already announced as
+     * a link and can be opened in a new tab.
+     */
+    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 o}from"../../internal/scale";import{CONTAINER_SURFACE as l}from"../../internal/surface";const a={xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},n={xs:"0.375rem",sm:"0.625rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},i={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"},m={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:u,empty:x="No data",striped:y=!1,hoverable:f=!1,stickyHeader:v=!1,onRowClick:h,variant:b="outlined",size:g="md",color:w="primary",className:k,style:N,...j}){const _=a[g],$=n[g],C=Boolean(h),A=f||C,B={padding:`${$} ${_}`},z={...B,backgroundColor:"var(--_mp-color-surface-container)"},T={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"};return e("div",{"data-mp-size":g,"data-mp-variant":b,className:["mp-table rounded-mp-md overflow-x-auto",l[b],k??""].filter(Boolean).join(" "),style:{...r(w),...N},...j,children:t("table",{className:`text-mp-on-surface w-full text-start ${i[g]}`,style:{borderCollapse:"collapse"},children:[u?e("caption",{className:`text-mp-on-surface-variant ${o}`,style:{...B,textAlign:"start"},children:u}):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",m[g],v?"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:T,children:e("td",{colSpan:c.length,className:"text-mp-on-surface-variant",style:{padding:`2rem ${_}`,textAlign:"center"},children:x})}):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","outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" "),style:T,tabIndex:C?0:void 0,onClick:h?()=>h(t,r):void 0,onKeyDown:h?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),h(t,r))}:void 0,children:c.map(o=>e("td",{style:{...B,textAlign:o.align??"start"},children:o.render?o.render(t,r):t[o.key]},o.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/tabs/MPTabs.d.ts

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import type { MPColor, MPStyleProps } from '../../types';
+/**
+ * MD3's two kinds of tab.
+ *
+ * They are not two levels of emphasis, they are two *depths*: primary tabs are
+ * the top level of a screen, and secondary tabs divide the content inside one of
+ * them. The specification draws that difference three ways — the indicator is
+ * 3dp and rounded against 2dp and square, it hugs the label rather than filling
+ * the tab, and the chosen label takes the accent rather than the plain ink — and
+ * all three are here.
+ *
+ * There is deliberately no third value. A `variant` ladder like the buttons' one
+ * would be an emphasis axis, and a tab bar has nothing to be emphatic about: it
+ * is the map of a screen, not an action on it.
+ */
+export type MPTabsVariant = 'primary' | 'secondary';
+/** Where the glyph sits relative to the label. */
+export type MPTabIconPosition = 'top' | 'start';
+/**
+ * A tab's value. The same restraint `MPSelect` puts on its own — an identifier,
+ * not an arbitrary object, because it is also what picks out the panel.
+ */
+export type MPTabValue = string | number;
+export interface MPTabsProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Which of MD3's two kinds of tab bar this is: `primary` for the top level of
+     * a screen, `secondary` for a division inside one of its panels.
+     * @default 'primary'
+     */
+    variant?: MPTabsVariant;
+    /**
+     * Which accent family the chosen tab and the indicator read.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** The chosen tab. Use with `onValueChange` for a controlled set. */
+    value?: MPTabValue | null;
+    /** Which starts chosen, for an uncontrolled set. */
+    defaultValue?: MPTabValue | null;
+    /** Called with the chosen tab's value. */
+    onValueChange?: (value: MPTabValue | null) => void;
+    /**
+     * Where a tab's glyph sits. Defaults to what the variant does in the
+     * specification: above the label on a primary tab, before it on a secondary
+     * one.
+     */
+    iconPosition?: MPTabIconPosition;
+    /**
+     * Whether moving the arrow keys also chooses the tab they land on.
+     *
+     * `false` by default. Automatic activation is only kind when every panel is
+     * already on the page; the moment one of them fetches, walking past four tabs
+     * fires four requests.
+     * @default false
+     */
+    activateOnFocus?: boolean;
+    /**
+     * Whether the arrow keys wrap from the last tab back to the first.
+     * @default true
+     */
+    loopFocus?: boolean;
+    /**
+     * The hairline under the bar, which is MD3's own divider between a tab bar and
+     * the content it is about. Turn it off inside a card that already has an edge.
+     * @default true
+     */
+    divider?: boolean;
+    /** The tabs share the bar's full width, each taking an equal part of it. */
+    fullWidth?: boolean;
+    /** The accessible name of the bar. */
+    'aria-label'?: string;
+    /** The `MPTab`s and the `MPTabPanel`s. */
+    children?: React.ReactNode;
+}
+export interface MPTabProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'color'> {
+    /** Identifies the tab, and picks out the panel with the same value. */
+    value: MPTabValue;
+    /**
+     * The glyph. Drawn above or before the label depending on the bar's
+     * `iconPosition`, and sized by the bar's rung.
+     */
+    icon?: React.ReactNode;
+    /** Unavailable, but still listed. */
+    disabled?: boolean;
+    /** The tab's label. */
+    children?: React.ReactNode;
+}
+export interface MPTabPanelProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Which tab shows this panel. */
+    value: MPTabValue;
+    /**
+     * Keeps the panel in the DOM while it is hidden — for a panel that is
+     * expensive to build, or that holds form state which should survive being
+     * switched away from.
+     * @default false
+     */
+    keepMounted?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * One set of panels, one of which is shown.
+ *
+ * Base UI owns everything that makes a tab bar a tab bar rather than a row of
+ * buttons: roving focus so the whole bar is one tab stop, the arrow keys, Home
+ * and End, the `tab`/`tabpanel` roles and the `aria-controls` wiring between
+ * them, and the measurement that puts the indicator under the chosen tab. What
+ * is here is the Material surface and the ladders.
+ *
+ * The tabs and the panels are composed rather than passed as data, unlike
+ * [MPSelect](../inputs/select) — a panel is a subtree, and there is no useful
+ * shape for "an array of arbitrary React trees" that is not just children. They
+ * are sorted into the bar and the body here rather than made the caller's
+ * problem with a wrapper element they have to remember.
+ *
+ * ## Horizontal only
+ *
+ * There is no `orientation`, and the omission is the specification's. MD3 has no
+ * vertical tabs: a column of destinations down the side of a screen is a
+ * **navigation rail**, which is a different component with different behaviour —
+ * it switches what the *screen* is rather than which panel of one is showing,
+ * and it is not one tab stop with arrow keys inside it. A tab bar turned on its
+ * side would claim the tab contract while looking like the other thing.
+ *
+ * A bar with more tabs than room scrolls rather than wrapping, which is MD3's
+ * scrollable tabs: a tab bar on two lines has stopped being a bar, and the
+ * indicator has nowhere sensible to sit.
+ */
+export declare const MPTabs: React.ForwardRefExoticComponent<MPTabsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One tab.
+ *
+ * It has no `size`, no `color` and no `variant` of its own: all three belong to
+ * the bar, which is the only place they can be set once and mean the same thing
+ * for every tab. A bar whose third tab is a rung out is not a bar.
+ */
+export declare const MPTab: React.ForwardRefExoticComponent<MPTabProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * The content behind one tab.
+ *
+ * Unmounted while it is hidden unless `keepMounted` says otherwise, which is the
+ * right default for the common case — four panels of which one is on screen —
+ * and the wrong one for a panel holding a half-filled form.
+ */
+export declare const MPTabPanel: React.ForwardRefExoticComponent<MPTabPanelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tabs/MPTabs.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{accentSlots as n}from"../../internal/accent";import{MPStateLayer as o}from"../../internal/StateLayer";import{CONTROL_GAP as l,hasContent as r,SHEET_GAP as s}from"../../internal/scale";const c=a.createContext({variant:"primary",size:"md",iconPosition:"top",fullWidth:!1}),m={xs:"h-8",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},u={xs:"h-11",sm:"h-13",md:"h-16",lg:"h-18",xl:"h-20"},p={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},d={xs:"px-3",sm:"px-3.5",md:"px-4",lg:"px-5",xl:"px-6"},f={xs:12,sm:14,md:16,lg:20,xl:24},h={xs:18,sm:20,md:24,lg:24,xl:28};function x(e,t,i,n=""){a.Children.toArray(e).forEach(e=>{if(!a.isValidElement(e))return void(r(e)&&t.push(e));if(e.type===a.Fragment)return void x(e.props.children,t,i,`${n}${String(e.key)}/`);const o=n?a.cloneElement(e,{key:`${n}${String(e.key)}`}):e;e.type===MPTabPanel?i.push(o):t.push(o)})}export const MPTabs=a.forwardRef(function({variant:o="primary",color:l="primary",size:r="md",value:m,defaultValue:u,onValueChange:p,iconPosition:d,activateOnFocus:h=!1,loopFocus:v=!0,divider:b=!0,fullWidth:y=!1,className:_,style:w,children:g,"aria-label":j,...P},N){const k=d??("primary"===o?"top":"start"),M=a.useMemo(()=>({variant:o,size:r,iconPosition:k,fullWidth:y}),[o,r,k,y]),$=[],z=[];return x(g,$,z),e(c.Provider,{value:M,children:t(i.Root,{ref:N,value:m,defaultValue:u,onValueChange:e=>p?.(e),"data-mp-size":r,"data-mp-variant":o,className:["mp-tabs flex min-w-0 flex-col",s[r],_??""].filter(Boolean).join(" "),style:{...n(l),"--_mp-tab-inset":`${f[r]}px`,...w},...P,children:[t(i.List,{"aria-label":j,activateOnFocus:h,loopFocus:v,className:["mp-tabs__list relative flex shrink-0",b?"border-mp-outline-variant border-b":"",y?"w-full":"","overflow-x-auto overflow-y-hidden"].filter(Boolean).join(" "),children:[$,e(i.Indicator,{className:["mp-tabs__indicator pointer-events-none absolute bottom-0","bg-(--_mp-accent)","primary"===o?["h-0.75 rounded-t-full","left-[calc(var(--active-tab-left)_+_var(--_mp-tab-inset))]","w-[calc(var(--active-tab-width)_-_2_*_var(--_mp-tab-inset))]"].join(" "):"left-(--active-tab-left) h-0.5 w-(--active-tab-width)","[transition-property:left,width]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" ")})]}),z]})})});export const MPTab=a.forwardRef(function({value:n,icon:s,disabled:f=!1,className:x,children:v,...b},y){const{variant:_,size:w,iconPosition:g,fullWidth:j}=a.useContext(c),P="top"===g&&r(s);return t(i.Tab,{ref:y,value:n,disabled:f,className:["mp-tabs__tab group relative flex shrink-0 items-center justify-center","box-border appearance-none bg-transparent font-[inherit] whitespace-nowrap select-none","overflow-hidden outline-none","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",P?`flex-col gap-1 ${u[w]}`:`flex-row ${m[w]}`,P?"":l[w],p[w],d[w],f?"text-mp-on-surface/38 cursor-default":["text-mp-on-surface-variant cursor-pointer","primary"===_?"data-active:text-(--_mp-accent)":"data-active:text-mp-on-surface"].join(" "),"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid",j?"flex-1":"",x??""].filter(Boolean).join(" "),...b,children:[f?null:e(o,{}),r(s)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:h[w],height:h[w]},children:s}):null,r(v)?e("span",{className:"relative truncate",children:v}):null]})});export const MPTabPanel=a.forwardRef(function({value:t,keepMounted:a=!1,className:n,children:o,...l},r){return e(i.Panel,{ref:r,value:t,keepMounted:a,className:["mp-tabs__panel text-mp-on-surface min-w-0 flex-1","rounded-mp-xs outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",n??""].filter(Boolean).join(" "),...l,children:o})});

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

@@ -0,0 +1,2 @@
+export { MPTab, MPTabPanel, MPTabs } from './MPTabs';
+export type { MPTabIconPosition, MPTabPanelProps, MPTabProps, MPTabsProps, MPTabsVariant, MPTabValue } from './MPTabs';

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export{MPTab,MPTabPanel,MPTabs}from"./MPTabs";

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

@@ -1,7 +1,9 @@
 import * as React from 'react';
+import type { MPMessages } from '../../internal/i18n';
+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`.
@@ -15,33 +17,45 @@ export interface MPTextFieldProps {
      * @default 'text'
      */
     type?: MPTextFieldType;
-    /** Placeholder shown while the field is empty. */
+    /**
+     * Placeholder shown while the field is empty.
+     *
+     * With a floating label it is held back until the label has risen out of its
+     * way, which is the moment the field is focused. Two greyed strings in one box
+     * is not a hint, it is a collision.
+     */
     placeholder?: string;
     /** 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 for the field, drawn in the outline's notch and — while the field is
+     * empty, unfocused and has no `startIcon` — resting on the field's own line
+     * where a placeholder would be. See `floatingLabel`.
      */
     label?: string;
+    /**
+     * Whether the label rests on the field's line while there is nothing to make
+     * room for, and rises into the notch on focus or on the first character.
+     *
+     * `false` pins it in the notch, which is the one thing a floating label costs:
+     * a field with a label and a field without one no longer sit at the same
+     * height in a form until both are filled.
+     *
+     * A `startIcon` holds the label up regardless. The icon is already standing
+     * where the resting label would be, and the two cannot share the spot.
+     * @default true
+     */
+    floatingLabel?: boolean;
     /** 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
@@ -73,11 +87,21 @@ export interface MPTextFieldProps {
      */
     resizable?: boolean;
     /**
-     * The id put on the control and pointed at by the label. Derived from `name`
-     * when omitted, which is enough as long as no two fields on a page share a
-     * name.
+     * The id put on the control and pointed at by the label. Generated when it is
+     * left out.
      */
     id?: string;
+    /**
+     * Which language the reveal toggle's name is written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     *
+     * It is the only text a text field invents — everything else in it is yours —
+     * and until it was in the table it was the one string in the library with no
+     * way at all to change it.
+     */
+    locale?: string;
+    /** Overrides the two words the reveal toggle is announced by. */
+    passwordLabels?: Partial<MPMessages['textField']>;
     /**
      * Called with the field's text on every change, including each keystroke of
      * an in-progress composition. The field shows what was actually typed until
@@ -97,14 +121,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 n}from"@base-ui/react/field";import{MPIcon as a}from"../icon/MPIcon";import{MPFieldLabel as r,MPFieldOutline as l,useFloatingLabel as i}from"../../internal/FieldOutline";import{VisibilityIcon as s,VisibilityOffIcon as d}from"../../constants/icons";import{useMPLocale as p,useMPMessages as c}from"../../internal/locale";const u={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:m,name:f,type:x="text",placeholder:b,autoComplete:g,label:y,floatingLabel:h=!0,onChange:v,onFormReset:w,onSubmit:C,errorMessage:k="",required:j=!1,fullWidth:z=!1,readOnly:E=!1,autoFocus:F=!1,size:M="md",disabled:N=!1,disableEnterKey:P=!1,rows:S,maxLength:q,startIcon:D,resizable:L=!1,id:R,locale:I,passwordLabels:O},B){const K=p(I),U=c("textField",K,O),_=o.useRef(null),[T,W]=o.useState(!1),[$,A]=o.useState(!1),[G,H]=o.useState(m),J=o.useId(),Q=R??J,V=!!S,X=k.length>0,Y=u[M],Z=$?G:m,{shrunk:ee,focusProps:te}=i({floating:h&&!!y,filled:Z.length>0,pinned:!!D}),oe=o.useCallback(e=>{_.current=e,"function"==typeof B?B(e):B&&(B.current=e)},[B]),ne=e=>{e.preventDefault()};return o.useEffect(()=>{$||H(m)},[m,$]),o.useEffect(()=>{F&&!window.matchMedia("(max-width: 599.95px)").matches&&_.current?.focus()},[]),t(n.Root,{className:["mp-text-field group relative",z?"w-full":"inline-block","align-top"].join(" "),disabled:N,invalid:X,"data-mp-size":M,...te,children:[t("div",{className:["relative flex w-full items-center gap-2",Y.padding,V?"py-2":""].filter(Boolean).join(" "),children:[e(l,{label:y,required:j,notched:ee}),D?e("span",{className:"text-mp-on-surface-variant group-data-disabled:text-mp-on-surface/38 flex shrink-0 items-center",children:D}):null,e(n.Control,{render:V?e("textarea",{rows:S}):e("input",{}),id:Q,name:f,type:V?void 0:T?"text":x,required:j,readOnly:E,disabled:N,autoComplete:g,placeholder:ee?b:void 0,maxLength:q,value:Z,ref:oe,className:[`${Y.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",Y.control,V?"py-0":"",V&&L?"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=>{w?.();const t=e.target.value;$&&H(t),v?.(t)},onCompositionStart:()=>{A(!0),H(m)},onCompositionUpdate:e=>{H(e.target.value)},onCompositionEnd:e=>{A(!1);const t=e.target.value;w?.(),v?.(t),H(t)},onKeyDown:e=>{if("Enter"===e.key){if(function(e){const t=e.nativeEvent;return t.isComposing||229===t.keyCode}(e))return;C?.(),V&&!P||e.preventDefault()}}}),"password"!==x||V?null:e("button",{type:"button","aria-label":T?U.hidePassword:U.showPassword,onClick:()=>W(e=>!e),onMouseDown:ne,onMouseUp:ne,disabled:N,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(a,{icon:T?s:d,size:Y.icon})}),y?e(r,{size:M,label:y,required:j,htmlFor:Q,shrunk:ee,multiline:V}):null]}),X?e(n.Error,{match:!0,className:["mp-text-field__support text-mp-body-small text-mp-error mt-1 block",Y.padding,"group-data-disabled:text-mp-on-surface/38"].join(" "),children:k}):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:k,newTab:h=!1,icon:x,newTabLabel:b="Opens in a new tab",render:v,className:y,style:w,children:j,..._},g){const N=h?"_blank":_.target,T="_blank"===N,z=x??T,C=!0===z?e(t,{icon:T?l:s,size:"0.95em"}):z,L=["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",k?c[k]:"",p[u],d,f?"[&.mp-link]:text-(--_mp-accent)":"[&.mp-link]:text-inherit",y??""].filter(Boolean).join(" ");return i({render:v??e("a",{}),ref:g,props:{href:r,target:N,rel:T?"noopener noreferrer":void 0,className:L,style:f?{...a(f),...w}:w,children:o(n,{children:[j,C?e("span",{className:"ms-[0.25em] inline-flex align-baseline",children:C}):null,T?o(n,{children:[" ",e("span",{className:m,children:b})]}):null]}),..._}})});

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";