material-plus-ui 0.0.1 → 1.1.0

package/dist/components/locale/MPLocaleProvider.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { useMPLocale } from '../../internal/locale';
+export interface MPLocaleProviderProps {
+    /**
+     * A BCP 47 tag — `ko`, `ja`, `pt-BR`, `zh-Hant`.
+     *
+     * It reaches two different systems and they degrade differently, which is
+     * worth knowing before choosing one:
+     *
+     * - **`Intl` formats the dates and the numbers**, and speaks every language
+     *   the platform does. A tag with no entry in this library's own table still
+     *   gets month names, weekday names, AM/PM and the right date order.
+     * - **This library's table supplies the words `Intl` has no opinion about** —
+     *   "Previous month", "Today", "Hour". Those fall back to English for a tag it
+     *   does not carry, and a `labels` prop on the component fills the gap.
+     *
+     * Left `undefined` the platform's own default is used for the first and
+     * English for the second, which is exactly what a component with no provider
+     * over it does.
+     */
+    locale?: string;
+    children?: React.ReactNode;
+}
+/**
+ * The language the components speak, set once for everything under it.
+ *
+ * Wrap the application. Every component in this library that writes a word or
+ * formats a date takes a `locale` prop of its own, and this is where that prop
+ * gets its default — so a form of four pickers is one decision rather than four.
+ *
+ * ```tsx
+ * <MPLocaleProvider locale="ko">
+ *   <App />
+ * </MPLocaleProvider>
+ * ```
+ *
+ * ## Why it is not a whole theme object
+ *
+ * Everything else a provider might carry here is already a CSS custom property:
+ * the colour roles, the type scale, the corners, the motion durations. Those
+ * reach a component through the cascade, which means a section of a page can
+ * differ from the rest of it without a second provider and without a re-render.
+ * A locale cannot travel that way — it decides which *string* is rendered, not
+ * how one is painted — so it is the one thing left that needs context, and this
+ * provider carries that and nothing else.
+ *
+ * ## Nesting
+ *
+ * Providers nest, and the nearest one wins. A page in Korean with one section
+ * showing a Japanese listing's dates is two providers, and the inner one does
+ * not have to restate anything: there is only the one value.
+ */
+export declare function MPLocaleProvider({ locale, children }: MPLocaleProviderProps): React.JSX.Element;
+/**
+ * The locale in force at this point in the tree.
+ *
+ * Exported because an application that has told this library its language should
+ * not have to tell itself the same thing twice — the same tag is what its own
+ * `Intl.NumberFormat` calls want. Passing an argument makes it the
+ * prop-beats-provider resolution the components themselves use, which is what a
+ * wrapper component around one of them wants.
+ */
+export { useMPLocale };

package/dist/components/locale/MPLocaleProvider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{MPLocaleContext as e,useMPLocale as o}from"../../internal/locale";export function MPLocaleProvider({locale:o,children:i}){return r(e.Provider,{value:o,children:i})}export{o as useMPLocale};

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

@@ -0,0 +1,2 @@
+export { MPLocaleProvider, useMPLocale } from './MPLocaleProvider';
+export type { MPLocaleProviderProps } from './MPLocaleProvider';

package/dist/components/locale/index.js

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

package/dist/components/menu/MPMenu.d.ts

@@ -0,0 +1,232 @@
+import * as React from 'react';
+import type { MPAlign, MPColor, MPSide, MPSize } from '../../types';
+/**
+ * A menu takes `size` and `color` and stops there.
+ *
+ * There is no `variant`, for the reason `MPDialog` has none: the five weights
+ * answer "how much of a surface does this paint", and a popup that has taken the
+ * pointer has already answered it. There is no `elevation` either — MD3 puts a
+ * menu at level 2 and nowhere else, and a menu that could be told to sit flat
+ * would be a list.
+ */
+interface MPMenuSurfaceProps {
+    /**
+     * The row height and type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family a ticked or chosen row reads. The popup itself stays
+     * neutral, as MD3's does.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MPMenuProps extends MPMenuSurfaceProps {
+    /**
+     * The element that opens the menu, wired up by Base UI. Optional — a controlled
+     * menu opened from elsewhere needs no trigger of its own.
+     */
+    trigger?: React.ReactElement;
+    /** Whether the menu is open. Use with `onOpenChange` for a controlled menu. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which edge of the trigger it hangs off. @default 'bottom' */
+    side?: MPSide;
+    /** Where it sits along that edge. @default 'start' */
+    align?: MPAlign;
+    /** Distance from the trigger, in pixels. @default 4 */
+    sideOffset?: number;
+    /** Whether the page behind is taken away while the menu is open. @default true */
+    modal?: boolean;
+    /**
+     * Opens on hover as well as on click. For a menu bar, where crossing the row
+     * with one menu open should walk through the others rather than close them.
+     * @default false
+     */
+    openOnHover?: boolean;
+    /** Whether the arrow keys wrap from the last row back to the first. @default true */
+    loopFocus?: boolean;
+    /** Unavailable. The trigger stops opening anything. */
+    disabled?: boolean;
+    /** The rows. */
+    children?: React.ReactNode;
+}
+export interface MPContextMenuProps extends MPMenuSurfaceProps {
+    /** The rows, exactly as they are written inside an `MPMenu`. */
+    content: React.ReactNode;
+    /**
+     * The area that answers a right-click or a long press. Rendered inside a
+     * `<div>` of Base UI's, which is what listens for the gesture.
+     */
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** @default true */
+    loopFocus?: boolean;
+    disabled?: boolean;
+}
+export interface MPMenuItemProps {
+    /** What the row does. Not given, and not a link, the row is a label. */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Renders the row as a real `<a>`. A menu of links has to be links. */
+    href?: string;
+    /** Where the link opens — `_blank` and the rest. Ignored without `href`. */
+    target?: string;
+    /**
+     * The link's relationship to the page. Ignored without `href`.
+     *
+     * Left unset, a `target="_blank"` row gets `noopener noreferrer` — the pair
+     * that stops the opened page reaching back through `window.opener`. Setting
+     * it replaces that rather than adding to it, so a row that needs `nofollow`
+     * should say `rel="noopener noreferrer nofollow"`.
+     */
+    rel?: string;
+    /** Content before the label — an icon, a swatch, an avatar. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, before any `shortcut`. */
+    endIcon?: React.ReactNode;
+    /**
+     * The keystroke that does the same thing, set at the end of the row and muted.
+     * Text only — the row does not bind it, the application does.
+     */
+    shortcut?: React.ReactNode;
+    /** A second line under the label, one step down the type scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * Re-points the row's family — `error` for the one that deletes. Defaults to
+     * the menu's own.
+     */
+    color?: MPColor;
+    /** Whether picking the row closes the menu. @default true */
+    closeOnClick?: boolean;
+    /** Unavailable. Still listed, and still found by typeahead. */
+    disabled?: boolean;
+    /** What typeahead matches against, when the label is not a plain string. */
+    label?: string;
+    /** The label. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MPMenuSubmenuProps {
+    /** The label on the row that opens it. */
+    label?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    disabled?: boolean;
+    /** Which edge of the parent row it opens against. @default 'right' */
+    side?: MPSide;
+    /** Distance from the parent menu, in pixels. @default 0 */
+    sideOffset?: number;
+    /** The nested rows. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MPMenuGroupProps {
+    /** The heading over the group. Wired to it by Base UI. */
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface MPMenuCheckboxItemProps extends Omit<MPMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether ticking the row closes the menu. `false` here rather than the `true`
+     * a plain row takes: a list of things to tick is a list you tick more than one
+     * of.
+     * @default false
+     */
+    closeOnClick?: boolean;
+}
+export interface MPMenuRadioGroupProps {
+    value?: string | number;
+    defaultValue?: string | number;
+    onValueChange?: (value: string | number) => void;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface MPMenuRadioItemProps extends Omit<MPMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+    /** What this row sets the group to. */
+    value: string | number;
+    /** @default false */
+    closeOnClick?: boolean;
+}
+export type MPMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
+/**
+ * One row of a menu.
+ *
+ * Renders a real `<a>` when it is given an `href` and Base UI's own item
+ * otherwise. A menu of links that are not links cannot be opened in a new tab,
+ * cannot be copied, and tells a screen reader the wrong thing about every one of
+ * them.
+ */
+export declare function MPMenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuItemProps): React.JSX.Element;
+/** A row that ticks. The tick lands in the column a `startIcon` would. */
+export declare function MPMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuCheckboxItemProps): React.JSX.Element;
+/** One choice out of a set. Wraps the rows that make up the set. */
+export declare function MPMenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className }: MPMenuRadioGroupProps): React.JSX.Element;
+/**
+ * A row inside an `MPMenuRadioGroup`.
+ *
+ * Marked with a filled dot rather than a tick, which is the same distinction
+ * `MPCheckbox` and `MPRadio` make everywhere else: a tick says "and", a dot says
+ * "instead of".
+ */
+export declare function MPMenuRadioItem({ value, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuRadioItemProps): React.JSX.Element;
+/** A named run of rows. The label is a heading, not a row — it cannot be picked. */
+export declare function MPMenuGroup({ label, children, className }: MPMenuGroupProps): React.JSX.Element;
+/** The hairline between two runs of rows. `outline-variant`, as MD3 draws it. */
+export declare function MPMenuSeparator({ className, ...props }: MPMenuSeparatorProps): React.JSX.Element;
+/**
+ * A menu inside a menu.
+ *
+ * The row that opens it is the same row every other item is, wearing a chevron —
+ * and it opens on hover, on Enter and on the arrow key that points at it, all of
+ * which is Base UI's. What is here is the surface and the glyph.
+ *
+ * Nesting is unlimited: a submenu renders its children inside a popup that is
+ * itself a menu, so a submenu of a submenu needs no different component.
+ */
+export declare function MPMenuSubmenu({ label, startIcon, disabled, side, sideOffset, children, className, style }: MPMenuSubmenuProps): React.JSX.Element;
+/**
+ * A list of actions that appears when something is pressed.
+ *
+ * Everything that makes a menu a menu rather than a floating list of divs is Base
+ * UI's: roving focus with the arrow keys, Home and End, typeahead, Escape,
+ * closing on an outside click, restoring focus to the trigger, submenus opening
+ * on hover with the safe triangle so a diagonal reach does not close them, and
+ * the `menu` / `menuitem` roles that make any of it mean something to a screen
+ * reader. What is here is the surface, the ladders and the row layout.
+ *
+ * ## Why the rows are composed and a select's options are data
+ *
+ * The opposite of `MPSelect`, and deliberately. A select's options are values out
+ * of a list a caller already has, and its trigger has to be able to name the
+ * chosen one before the popup has ever been mounted. A menu's rows are *code* —
+ * each one a different handler, a different icon, sometimes a submenu — and
+ * nothing has to know about them until the menu opens. Data would mean an `items`
+ * type with a variant for every shape a row can take, which is a component tree
+ * spelled as a discriminated union.
+ */
+export declare function MPMenu({ size, color, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: MPMenuProps): React.JSX.Element;
+/**
+ * The same menu, opened by a right-click or a long press instead of by a button.
+ *
+ * It takes the rows as `content` and the area as `children`, which is
+ * `MPTooltip`'s shape rather than `MPMenu`'s — because here the trigger is not
+ * one element handed over, it is a region of the page, and the region is the
+ * thing being wrapped. Base UI positions the popup at the pointer rather than
+ * against an anchor, and the long press is what makes it reachable on a touch
+ * screen at all.
+ */
+export declare function MPContextMenu({ size, color, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: MPContextMenuProps): React.JSX.Element;
+export {};

package/dist/components/menu/MPMenu.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as l}from"@base-ui/react/context-menu";import{MPIcon as r}from"../icon/MPIcon";import{CheckIcon as o,ChevronRightIcon as s}from"../../constants/icons";import{MPMenuContext as i}from"../../internal/menu";import{accentSlots as c}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{CONTROL_ICON as m,META_TEXT as u,hasContent as p}from"../../internal/scale";import{FADE as h,PORTAL_LAYER as f}from"../../internal/surface";const x=["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",h].join(" "),b={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},g={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},N={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},v={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};function C(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",b[e],g[e],N[e],v[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function y(){return e(d,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const k="relative flex shrink-0 items-center justify-center";function M({children:t,description:a}){return p(a)?n("span",{className:"relative flex min-w-0 flex-1 flex-col py-1.5 text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`text-mp-on-surface-variant truncate ${u}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function O({shortcut:n}){return p(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${u}`,children:n}):null}export function MPMenuItem({onClick:l,href:r,target:o,rel:s,startIcon:c,endIcon:d,shortcut:m,description:u,color:h,closeOnClick:f=!0,disabled:x=!1,label:b,children:g,className:N,style:v}){const{size:P}=t.useContext(i),I=n(t.Fragment,{children:[e(y,{}),p(c)?e("span",{className:`${k} text-mp-on-surface-variant`,children:c}):null,e(M,{description:u,children:g}),p(d)?e("span",{className:`${k} text-mp-on-surface-variant`,children:d}):null,e(O,{shortcut:m})]}),$=h?{"--_mp-accent":`var(--_mp-color-${h})`}:void 0,z=$||v?{...$,...v}:void 0;return void 0===r||x?e(a.Item,{disabled:x,label:b,closeOnClick:f,onClick:l,className:C(P,Boolean(h),N),style:z,children:I}):e(a.LinkItem,{href:r,target:o,rel:s??("_blank"===o?"noopener noreferrer":void 0),label:b,closeOnClick:f,onClick:l,className:C(P,Boolean(h),N),style:z,children:I})}export function MPMenuCheckboxItem({checked:l,defaultChecked:s,onCheckedChange:c,endIcon:d,shortcut:u,description:h,color:f,closeOnClick:x=!1,disabled:b=!1,label:g,children:N,className:v,style:P}){const{size:I}=t.useContext(i),$=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:s,onCheckedChange:e=>c?.(e),disabled:b,label:g,closeOnClick:x,className:C(I,Boolean(f),v),style:$||P?{...$,...P}:void 0,children:[e(y,{}),e("span",{className:`${k} text-(--_mp-accent)`,style:{width:m[I]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:o,size:m[I]})})}),e(M,{description:h,children:N}),p(d)?e("span",{className:`${k} text-mp-on-surface-variant`,children:d}):null,e(O,{shortcut:u})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:o,className:s}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:s,children:o})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:o,description:s,color:c,closeOnClick:d=!1,disabled:u=!1,label:h,children:f,className:x,style:b}){const{size:g}=t.useContext(i),N=c?{"--_mp-accent":`var(--_mp-color-${c})`}:void 0;return n(a.RadioItem,{value:l,disabled:u,label:h,closeOnClick:d,className:C(g,Boolean(c),x),style:N||b?{...N,...b}:void 0,children:[e(y,{}),e("span",{className:`${k} text-(--_mp-accent)`,style:{width:m[g]},children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e(M,{description:s,children:f}),p(r)?e("span",{className:`${k} text-mp-on-surface-variant`,children:r}):null,e(O,{shortcut:o})]})}export function MPMenuGroup({label:l,children:r,className:o}){const{size:s}=t.useContext(i);return n(a.Group,{className:o,children:[p(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${g[s]} ${u}`,children:l}):null,r]})}export function MPMenuSeparator({className:n,...t}){return e(a.Separator,{className:["bg-mp-outline-variant my-2 h-px",n??""].filter(Boolean).join(" "),...t})}export function MPMenuSubmenu({label:l,startIcon:o,disabled:d=!1,side:u="right",sideOffset:h=0,children:b,className:g,style:N}){const{size:v,color:M}=t.useContext(i);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:d,className:C(v,!1),children:[e(y,{}),p(o)?e("span",{className:`${k} text-mp-on-surface-variant`,children:o}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${k} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:s,size:m[v]})})]}),e(a.Portal,{children:e(a.Positioner,{className:f,side:u,sideOffset:h,align:"start",children:e(a.Popup,{className:[x,g??""].filter(Boolean).join(" "),style:{...c(M),...N},children:b})})})]})}export function MPMenu({size:l="md",color:r="primary",trigger:o,open:s,defaultOpen:d,onOpenChange:m,side:u="bottom",align:p="start",sideOffset:h=4,modal:b=!0,openOnHover:g=!1,loopFocus:N=!0,disabled:v=!1,className:C,style:y,children:k}){const M=t.useMemo(()=>({size:l,color:r}),[l,r]);return e(i.Provider,{value:M,children:n(a.Root,{open:s,defaultOpen:d,onOpenChange:e=>m?.(e),modal:b,loopFocus:N,disabled:v,children:[o?e(a.Trigger,{render:o,openOnHover:g,disabled:v}):null,e(a.Portal,{children:e(a.Positioner,{className:f,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":l,className:[x,C??""].filter(Boolean).join(" "),style:{...c(r),...y},children:k})})})]})})}export function MPContextMenu({size:a="md",color:r="primary",content:o,children:s,open:d,defaultOpen:m,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:b,style:g}){const N=t.useMemo(()=>({size:a,color:r}),[a,r]);return e(i.Provider,{value:N,children:n(l.Root,{open:d,defaultOpen:m,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:s}),e(l.Portal,{children:e(l.Positioner,{className:f,children:e(l.Popup,{"data-mp-size":a,className:[x,b??""].filter(Boolean).join(" "),style:{...c(r),...g},children:o})})})]})})}

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

@@ -0,0 +1,2 @@
+export { MPContextMenu, MPMenu, MPMenuCheckboxItem, MPMenuGroup, MPMenuItem, MPMenuRadioGroup, MPMenuRadioItem, MPMenuSeparator, MPMenuSubmenu } from './MPMenu';
+export type { MPContextMenuProps, MPMenuCheckboxItemProps, MPMenuGroupProps, MPMenuItemProps, MPMenuProps, MPMenuRadioGroupProps, MPMenuRadioItemProps, MPMenuSeparatorProps, MPMenuSubmenuProps } from './MPMenu';

package/dist/components/menu/index.js

@@ -0,0 +1 @@
+export{MPContextMenu,MPMenu,MPMenuCheckboxItem,MPMenuGroup,MPMenuItem,MPMenuRadioGroup,MPMenuRadioItem,MPMenuSeparator,MPMenuSubmenu}from"./MPMenu";

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

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import type { MPStyleProps } from '../../types';
+/**
+ * Where the two steppers sit.
+ *
+ * - `end` — both at the trailing edge, the way a spinner has always looked.
+ * - `split` — minus at the start, plus at the end, with the number between them.
+ *   For a quantity that is nudged rather than typed.
+ * - `none` — no buttons. It is still a number field: the arrow keys, the
+ *   clamping and the formatting all stay.
+ *
+ * There is deliberately no stacked pair of half-height chevrons. At `xs` each
+ * arrow would be under three pixels tall, and a target that small is a target
+ * nobody hits.
+ */
+export type MPNumberFieldSteppers = 'end' | 'split' | 'none';
+export interface MPNumberFieldProps extends MPStyleProps {
+    /** The number. Use with `onValueChange` for a controlled field. */
+    value?: number | null;
+    /** The starting number, for an uncontrolled field. */
+    defaultValue?: number;
+    /** Called on every change — typing, stepping, the wheel. */
+    onValueChange?: (value: number | null) => void;
+    /**
+     * Called when the value settles: on blur after typing, on pointer release
+     * after a press, and together with `onValueChange` for the keyboard.
+     */
+    onValueCommitted?: (value: number | null) => void;
+    /** The bottom of the range. Stepping stops here. */
+    min?: number;
+    /** The top of the range. */
+    max?: number;
+    /** How far one step goes. @default 1 */
+    step?: number;
+    /** The step taken while Shift is held. @default 10 */
+    largeStep?: number;
+    /** The step taken while Alt is held. @default 0.1 */
+    smallStep?: number;
+    /**
+     * Whether the wheel changes the value while the field is focused and hovered.
+     * Off by default: a page that scrolls under the pointer and a field that
+     * changes under it are the same gesture, and only one of them was meant.
+     * @default false
+     */
+    allowWheelScrub?: boolean;
+    /**
+     * How the number is written — currency, percent, decimal places. Passed
+     * straight to `Intl.NumberFormat`, so the field can show `$1,240.00` and still
+     * report `1240`.
+     */
+    format?: Intl.NumberFormatOptions;
+    /** Which locale the number is written and parsed in. Defaults to the runtime's. */
+    locale?: Intl.LocalesArgument;
+    /**
+     * Where the steppers sit, or `none` for a field without them.
+     * @default 'end'
+     */
+    steppers?: MPNumberFieldSteppers;
+    /** The accessible name of the increment button. @default 'Increase' */
+    incrementLabel?: string;
+    /** The accessible name of the decrement button. @default 'Decrease' */
+    decrementLabel?: string;
+    /**
+     * Label for the field, drawn in the outline's notch and — while the field is
+     * empty, unfocused and has nothing standing at its start — resting on the
+     * field's own line where a placeholder would be. See `floatingLabel`.
+     */
+    label?: React.ReactNode;
+    /**
+     * 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 digit.
+     *
+     * `false` pins it in the notch, which is the one thing a floating label costs:
+     * a field with a label and one without no longer sit at the same height in a
+     * form until both are filled. A `startIcon` — or `steppers="split"`, whose
+     * minus sits in the same place — holds the label up regardless.
+     * @default true
+     */
+    floatingLabel?: boolean;
+    /** The line under the control. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /** The message under the control, which also turns the field over. */
+    errorMessage?: React.ReactNode;
+    /**
+     * Placeholder shown while the field is empty. With a floating label it is held
+     * back until the label has risen out of its way.
+     */
+    placeholder?: string;
+    /** Content placed before the number — a currency mark, a unit, an icon. */
+    startIcon?: React.ReactNode;
+    /** Marks the field required. */
+    required?: boolean;
+    /** Greys the field out and stops it taking input. */
+    disabled?: boolean;
+    /** Shows the number without allowing edits, and drops the steppers. */
+    readOnly?: boolean;
+    /** Name of the form control. */
+    name?: string;
+    /** The id put on the control and pointed at by the label. */
+    id?: string;
+}
+/**
+ * A Material Design field that only holds a number.
+ *
+ * The shell is `MPTextField`'s, to the pixel — the same notched outline, the same
+ * label in the notch, the same supporting text — because a form where the
+ * quantity box is a different height or radius from the boxes around it is a form
+ * that looks assembled rather than designed.
+ *
+ * What is added on top is a real numeric control rather than
+ * `<input type="number">`, which is worth being explicit about: the native one
+ * silently accepts text in some browsers, has a spinner nobody can style, scrubs
+ * on scroll by default, and reports `''` for anything it cannot parse. Base UI's
+ * owns the parsing against the locale, the clamping, the press-and-hold repeat on
+ * the steppers, and the hidden input that submits with a form.
+ */
+export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size, fullWidth, required, disabled, readOnly, name, id }: MPNumberFieldProps): React.JSX.Element;

package/dist/components/number-field/MPNumberField.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{NumberField as n}from"@base-ui/react/number-field";import{Field as r}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon";import{AddIcon as i,RemoveIcon as s}from"../../constants/icons";import{MPFieldLabel as o,MPFieldOutline as p,useFloatingLabel as d}from"../../internal/FieldOutline";import{MPStateLayer as m}from"../../internal/StateLayer";import{MPSupportingText as c}from"../../internal/SupportingText";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale";const x={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:g,defaultValue:b,onValueChange:v,onValueCommitted:N,min:z,max:j,step:y,largeStep:S,smallStep:w,allowWheelScrub:I=!1,format:V,locale:k,steppers:q="end",incrementLabel:C="Increase",decrementLabel:L="Decrease",label:M,floatingLabel:F=!0,description:O,errorMessage:P,placeholder:W,startIcon:D,size:R="md",fullWidth:_=!1,required:B=!1,disabled:G=!1,readOnly:T=!1,name:$,id:A}){const E=h(P),H=x[R],J=l.useId(),K=A??J,Q="none"!==q&&!T&&!G,[U,X]=l.useState(b??null),Y=void 0===g?U:g,{shrunk:Z,focusProps:ee}=d({floating:F&&h(M),filled:null!==Y,pinned:!!D||Q&&"split"===q}),ae=["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",H.stepper].join(" "),le=a(n.Decrement,{"aria-label":L,className:ae,children:[e(m,{}),e(t,{icon:s,size:u[R]})]}),ne=a(n.Increment,{"aria-label":C,className:ae,children:[e(m,{}),e(t,{icon:i,size:u[R]})]});return a(r.Root,{className:["mp-number-field group flex-col align-top",_?"flex w-full":"inline-flex w-fit"].join(" "),disabled:G,invalid:E,"data-mp-size":R,...ee,children:[e(n.Root,{id:K,name:$,className:"contents",value:g,defaultValue:b,onValueChange:e=>{X(e),v?.(e)},onValueCommitted:e=>N?.(e),min:z,max:j,step:y,largeStep:S,smallStep:w,allowWheelScrub:I,format:V,locale:k,disabled:G,readOnly:T,required:B,children:a("div",{className:"relative w-full",children:[a(n.Group,{className:["flex w-full items-center gap-2",H.height,Q&&"end"===q?`${H.padding} pe-1`:Q&&"split"===q?"px-1":H.padding].join(" "),children:[Q&&"split"===q?le:null,D?e("span",{className:["flex shrink-0 items-center",G?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:D}):null,e(n.Input,{placeholder:Z?W:void 0,className:["w-full min-w-0 flex-1 tabular-nums",f[R],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",Q&&"split"===q?"text-center":""].filter(Boolean).join(" ")}),Q&&"end"===q?a("span",{className:"flex shrink-0 items-center",children:[le,ne]}):null,Q&&"split"===q?ne:null]}),e(p,{label:M,required:B,notched:Z}),h(M)?e(o,{size:R,label:M,required:B,htmlFor:K,shrunk:Z}):null]})}),e(c,{description:O,errorMessage:P,className:H.padding})]})}

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

@@ -0,0 +1,2 @@
+export { MPNumberField } from './MPNumberField';
+export type { MPNumberFieldProps, MPNumberFieldSteppers } from './MPNumberField';

package/dist/components/number-field/index.js

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

package/dist/components/otp-field/MPOtpField.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import type { MPStyleProps } from '../../types';
+/**
+ * What may be typed into a slot.
+ *
+ * `numeric` is the default because that is what a texted code is, and it is also
+ * what puts a number pad in front of a phone. `any` accepts whatever the keyboard
+ * produces — for a licence key with punctuation in it.
+ */
+export type MPOtpFieldCharset = 'numeric' | 'alpha' | 'alphanumeric' | 'any';
+export interface MPOtpFieldProps extends MPStyleProps {
+    /**
+     * How many characters the code has. Clamped to 2–12: a single box is an
+     * `MPTextField`, and past twelve the row stops fitting a phone.
+     * @default 6
+     */
+    length?: number;
+    /**
+     * What may be typed. Anything rejected is dropped rather than shown, and
+     * `onValueInvalid` reports it.
+     * @default 'numeric'
+     */
+    charset?: MPOtpFieldCharset;
+    /** Hides the characters, the way a password field does. @default false */
+    mask?: boolean;
+    /**
+     * Splits the row every `groupSize` slots with a separator. `3` on a six-digit
+     * code gives the familiar two blocks of three.
+     */
+    groupSize?: number;
+    /** What is drawn between two groups. @default '–' */
+    separator?: React.ReactNode;
+    /** The code. Use with `onValueChange` for a controlled field. */
+    value?: string;
+    /** What it starts as, for an uncontrolled one. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fires once every slot is filled — the moment to verify the code. */
+    onComplete?: (value: string) => void;
+    /** Fires when typed or pasted text held characters the charset rejects. */
+    onValueInvalid?: (value: string) => void;
+    /** Submits the owning form as soon as the code is complete. @default false */
+    autoSubmit?: boolean;
+    /**
+     * The label above the row.
+     *
+     * Above it rather than in a notch, which is the one place this control departs
+     * from `MPTextField`'s shell. A notched label belongs to *one* outlined box; a
+     * code is six of them, and cutting the notch into the first would name the
+     * first digit rather than the field.
+     */
+    label?: React.ReactNode;
+    /** The line under the row. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /**
+     * The message under the row. Its presence is also what puts the field into its
+     * error state — there is no separate boolean, so there is no way to render a
+     * control that is visibly wrong with no explanation of why.
+     */
+    errorMessage?: React.ReactNode;
+    /** Name of the form control. */
+    name?: string;
+    /** The form must have a complete code before it submits. @default false */
+    required?: boolean;
+    /** Greys every slot out and stops them taking input. */
+    disabled?: boolean;
+    /** Readable and copyable, but not typeable. @default false */
+    readOnly?: boolean;
+    /** Puts the caret in the first slot on mount. @default false */
+    autoFocus?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A row of one-character slots: a PIN, a texted verification code, an invite key.
+ *
+ * Base UI owns everything that makes this harder than it looks — one hidden value
+ * behind however many inputs, paste spread across the slots from wherever the
+ * caret was, backspace stepping back a box, a click landing on the first empty
+ * slot rather than the one under the pointer, and the autofill hook that lets a
+ * phone offer the code straight from the message.
+ *
+ * What is here is the box a slot is drawn in, and it is Material's outlined text
+ * field cut down to one character: the same `corner-extra-small`, the same
+ * hairline in `outline`, the same two-pixel `primary` ring on focus. A form
+ * holding a text field and a code should not look like two form kits stacked on
+ * each other.
+ */
+export declare const MPOtpField: React.ForwardRefExoticComponent<MPOtpFieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/otp-field/MPOtpField.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{MPSupportingText as n}from"../../internal/SupportingText";import{META_TEXT as l,STACK_GAP as i,hasContent as m}from"../../internal/scale";const s={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},u={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},p={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=a.forwardRef(function({size:c="md",fullWidth:f=!1,length:h=6,charset:x="numeric",mask:b=!1,groupSize:g,separator:v="–",value:y,defaultValue:w,onValueChange:M,onComplete:V,onValueInvalid:N,autoSubmit:j=!1,label:C,description:F,errorMessage:S,name:z,required:I=!1,disabled:O=!1,readOnly:R=!1,autoFocus:$=!1,className:k,style:q},T){const A=Math.min(12,Math.max(2,Math.round(h))),B=m(S),L=g&&g>0?Math.round(g):0,P=["rounded-mp-xs border bg-transparent text-center font-[inherit]",s[c],d[c],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-2 focus:border-mp-primary focus:outline-none",O?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":B?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":R?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:O,invalid:B,"data-mp-size":c,className:["mp-otp-field flex-col align-top",i[c],f?"flex w-full":"inline-flex w-fit",k??""].filter(Boolean).join(" "),style:q,children:[m(C)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[C,I?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(o.Root,{ref:T,length:A,validationType:p[x],mask:b,name:z,required:I,disabled:O,readOnly:R,autoSubmit:j,value:y,defaultValue:w,onValueChange:e=>M?.(e),onValueComplete:e=>V?.(e),onValueInvalid:e=>N?.(e),className:`flex items-center ${u[c]}`,children:Array.from({length:A},(t,n)=>r(a.Fragment,{children:[L>0&&n>0&&n%L===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[c]}`,children:v}):null,e(o.Input,{className:P,autoFocus:$&&0===n})]},n))}),e(n,{description:F,errorMessage:S})]})});

package/dist/components/otp-field/index.d.ts

@@ -0,0 +1,2 @@
+export { MPOtpField } from './MPOtpField';
+export type { MPOtpFieldCharset, MPOtpFieldProps } from './MPOtpField';

package/dist/components/otp-field/index.js

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