material-plus-ui 0.0.1 → 1.1.0

package/dist/components/file-picker/MPFilePicker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as t}from"../icon/MPIcon";import{CloseIcon as a,UploadIcon as i}from"../../constants/icons";import{fillMessage as o}from"../../internal/i18n";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale";import{MPStateLayer as c}from"../../internal/StateLayer";import{CONTROL_ICON as p,META_TEXT as m,PROSE_TEXT as u,STACK_GAP as d,hasContent as f}from"../../internal/scale";const h={xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"};export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let n=e/1e3,t=0;for(;n>=1e3&&t<r.length-1;)n/=1e3,t+=1;return`${n<10?n.toFixed(1):Math.round(n)} ${r[t]}`}function x(e,r){const n=e.name.toLowerCase(),t=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?n.endsWith(e):e.endsWith("/*")?t.startsWith(e.slice(0,-1)):t===e)}export const MPFilePicker=n.forwardRef(function({accept:b,multiple:v=!1,maxSize:g,maxFiles:y,value:N,defaultValue:j,onFilesChange:k,onReject:w,label:z,description:C,errorMessage:I,title:B,hint:D,icon:F,showList:L=!0,removeLabel:M,locale:S,size:$="md",fullWidth:T=!0,required:W=!1,disabled:_=!1,readOnly:P=!1,name:R,id:E},O){const q=l(S),A=s("common",q),V=n.useRef(null);n.useImperativeHandle(O,()=>V.current,[]);const[G,H]=n.useState(()=>[...j??[]]),Y=N?[...N]:G,J=n.useRef(0),[K,Q]=n.useState(!1),U=f(I),X=_||P,Z=n.useId(),ee=n.useId(),re=n.useCallback(e=>{N||H(e),k?.(e)},[k,N]),ne=n.useCallback(e=>{const r=[],n=[],t=v?y??Number.POSITIVE_INFINITY:1,a=v?Y.length:0;for(const i of e)b&&!x(i,b)?n.push({file:i,reason:"type"}):void 0!==g&&i.size>g?n.push({file:i,reason:"size"}):a+r.length>=t?n.push({file:i,reason:"count"}):r.push(i);return{kept:r,rejections:n}},[b,Y.length,y,g,v]),te=n.useCallback(e=>{const{kept:r,rejections:n}=ne(e);n.length>0&&w?.(n),r.length>0&&re(v?[...Y,...r]:r)},[ne,re,Y,v,w]);return r("div",{className:["mp-file-picker flex-col align-top",d[$],T?"flex w-full":"inline-flex"].join(" "),"data-mp-size":$,"data-disabled":_||void 0,"data-invalid":U||void 0,children:[f(z)?r("span",{id:ee,className:[m,_?"text-mp-on-surface/38":U?"text-mp-error":"text-mp-on-surface-variant"].join(" "),children:[z,W?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{X||(e.preventDefault(),J.current+=1,Q(!0))},onDragOver:e=>{X||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{X||(J.current=Math.max(0,J.current-1),0===J.current&&Q(!1))},onDrop:e=>{X||(e.preventDefault(),J.current=0,Q(!1),te(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:E,disabled:_,"aria-describedby":f(C)||U?Z:void 0,"aria-invalid":U||void 0,className:["mp-file-picker__zone group relative flex w-full flex-col items-center","justify-center gap-2 text-center","rounded-mp-md box-border border-2 border-dashed","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color,background-color] duration-(--mp-sys-motion-duration-short4)",h[$],u[$],_?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":[P?"cursor-default":"cursor-pointer",U?"border-mp-error":"border-mp-outline-variant","text-mp-on-surface",K?"border-mp-primary bg-mp-primary/8":""].filter(Boolean).join(" ")].filter(Boolean).join(" "),onClick:()=>{!X&&V.current&&(V.current.value="",V.current.click())},children:[X?null:e(c,{layer:"inset-0 rounded-[inherit] bg-mp-primary"}),void 0===F?e(t,{icon:i,size:1.6*p[$],className:_?"":"text-mp-primary"}):f(F)?e("span",{className:_?"":"text-mp-primary",children:F}):null,e("span",{className:"font-medium",children:B??"Drop files here, or click to browse"}),f(D)?e("span",{className:[m,_?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:D}):null]}),e("input",{ref:V,type:"file",name:R,accept:b,multiple:v,required:W&&0===Y.length,disabled:X,tabIndex:-1,"aria-labelledby":f(z)?ee:void 0,"aria-describedby":f(C)||U?Z:void 0,className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>te(Array.from(e.target.files??[]))})]}),L&&Y.length>0?e("ul",{className:["mp-file-picker__list m-0 flex w-full list-none flex-col p-0",d[$]].join(" "),children:Y.map((n,i)=>r("li",{className:["rounded-mp-xs bg-mp-surface-container-low flex w-full items-center gap-3","px-3 py-2",u[$],_?"text-mp-on-surface/38":"text-mp-on-surface"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:n.name}),e("span",{className:[m,"shrink-0 tabular-nums",_?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:formatFileSize(n.size)}),X?null:r("button",{type:"button","aria-label":M?M(n.name):o(A.removeNamed,{label:n.name}),className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","cursor-pointer appearance-none items-center justify-center rounded-full","bg-transparent p-0 font-[inherit] outline-none"].join(" "),onClick:()=>re(Y.filter((e,r)=>r!==i)),children:[e(c,{}),e(t,{icon:a,size:18})]})]},`${n.name}-${n.size}-${n.lastModified}-${i}`))}):null,U?e("span",{id:Z,className:[m,"text-mp-error"].join(" "),children:I}):f(C)?e("span",{id:Z,className:[m,_?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:C}):null]})});

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

@@ -0,0 +1,2 @@
+export { MPFilePicker, formatFileSize } from './MPFilePicker';
+export type { MPFilePickerProps, MPFileRejection, MPFileRejectionReason } from './MPFilePicker';

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

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

package/dist/components/floating-action-button/MPFloatingActionButton.d.ts

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import type { MPColor, MPCorner, MPPosition, MPSize } from '../../types';
+/**
+ * The three containers MD3 gives a floating button, and the reason there are not
+ * five of them.
+ *
+ * - `tonal` is the specification's own default: the accent *container* under its
+ *   own ink, which is `primary-container` on `on-primary-container` before any
+ *   colour is chosen.
+ * - `filled` is the accent itself, for the one screen where the button has to
+ *   carry more weight than the content behind it.
+ * - `elevated` is MD3's *surface* FAB: a neutral container with the accent as
+ *   the glyph, for a button floating over something colourful enough that a
+ *   tonal one has nothing quiet to sit on.
+ *
+ * `outlined` and `text` are absent because a floating button *is* its container.
+ * A hairline disc over a scrolling page is a shape with the page moving through
+ * it, and a text one is a glyph with nothing to press.
+ */
+export type MPFloatingActionButtonVariant = 'filled' | 'tonal' | 'elevated';
+export interface MPFloatingActionButtonProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
+    /**
+     * The glyph.
+     *
+     * Wrap it in an [MPIcon](../display/icon) when it needs a size of its own;
+     * passed bare it is drawn at the rung's own glyph size.
+     */
+    icon?: React.ReactNode;
+    /**
+     * What the button does, in words.
+     *
+     * Required, and the one prop here that is. A button whose whole label is a
+     * drawing has no accessible name at all, and "a floating button with no
+     * `aria-label`" is a defect that ships precisely because the control looks
+     * finished without one. With `extended` this is also the word written on the
+     * button, so the two can never say different things.
+     */
+    label: string;
+    /**
+     * Writes `label` beside the glyph, which turns the disc into a stadium — MD3's
+     * extended floating button, for the one action a screen is about.
+     * @default false
+     */
+    extended?: boolean;
+    /**
+     * Which container it paints.
+     * @default 'tonal'
+     */
+    variant?: MPFloatingActionButtonVariant;
+    /**
+     * Which accent family it reads. Not an arbitrary colour: to change what
+     * `primary` *is*, set the token.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * The button's size. `md` is MD3's own 56dp; `xs` and `xl` are the
+     * specification's small and large floating buttons at 40 and 96dp.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * How it sits in the page. `fixed` — the default, against the `static`
+     * everything else in this library defaults to — is what a floating button *is*:
+     * held against a corner of the window whatever the page under it does.
+     *
+     * `absolute` pins it to the nearest positioned ancestor instead, which is what
+     * a button floating over a card or a map wants. `static` puts it back in the
+     * flow — drawn as `position: relative`, because the state layer still needs
+     * something to fill.
+     * @default 'fixed'
+     */
+    position?: MPPosition;
+    /**
+     * Which corner it is pinned to. Logical, so `bottom-end` is bottom-left under
+     * RTL. No effect while `position` is `static`.
+     * @default 'bottom-end'
+     */
+    corner?: MPCorner;
+    /**
+     * How far in from both edges, as a CSS length or a number of pixels. MD3's own
+     * is 16dp.
+     * @default 16
+     */
+    offset?: number | string;
+    /** Unavailable. Keeps its place, stops answering, and stops floating. */
+    disabled?: boolean;
+    /**
+     * `button`, not `submit`. A native button defaults to submitting the form
+     * around it.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+}
+/**
+ * The one action a screen is about, floating over it.
+ *
+ * MD3's floating action button, drawn from the specification's own component
+ * tokens: the three containers, the three sizes with the corner each of them
+ * takes, level-3 elevation, the state layer, and the extended shape. The default
+ * — `tonal` on `primary` — is the specification's default FAB exactly:
+ * `primary-container` under `on-primary-container`.
+ *
+ * ## Why there is no speed dial
+ *
+ * A floating button that fans out into three or four smaller ones is a Material
+ * **2** pattern, and MD3 dropped it. It was never good: the actions are
+ * unlabelled discs in the corner of the screen, they cover the content the
+ * reader was looking at, and a fan of buttons that claims `role="menu"` without
+ * the keyboard contract of one is worse for a keyboard reader than something
+ * that never claimed anything.
+ *
+ * When there genuinely are several actions, they belong in an
+ * [MPMenu](../inputs/menu) — which *is* a menu, with the roving focus, the
+ * typeahead and the escape behaviour that word promises — opened from this
+ * button.
+ *
+ * ## Why it is `fixed` by default
+ *
+ * Because that is the component. Everything else in this library sits in the
+ * page's flow and would be wrong to take out of it; this one is defined by not
+ * being part of the page. `position="absolute"` is the escape hatch for a button
+ * that belongs to a region rather than to the window, and `static` puts it back
+ * in the flow entirely.
+ */
+export declare const MPFloatingActionButton: React.ForwardRefExoticComponent<MPFloatingActionButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/floating-action-button/MPFloatingActionButton.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Button as a}from"@base-ui/react/button";import{accentSlots as n}from"../../internal/accent";import{MPStateLayer as s}from"../../internal/StateLayer";import{hasContent as i}from"../../internal/scale";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"bg-mp-surface-container-high text-(--_mp-accent)"},l={xs:"size-10",sm:"size-12",md:"size-14",lg:"size-18",xl:"size-24"},m={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},p={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},f={xs:24,sm:24,md:24,lg:30,xl:36},d={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"},c={xs:"min-w-16 gap-1.5 px-3",sm:"min-w-18 gap-2 px-4",md:"min-w-20 gap-2 px-4",lg:"min-w-24 gap-2.5 px-5",xl:"min-w-28 gap-3 px-6"},u={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},x={"top-start":"top-(--_mp-fab-offset) start-(--_mp-fab-offset)","top-end":"top-(--_mp-fab-offset) end-(--_mp-fab-offset)","bottom-start":"bottom-(--_mp-fab-offset) start-(--_mp-fab-offset)","bottom-end":"bottom-(--_mp-fab-offset) end-(--_mp-fab-offset)"};export const MPFloatingActionButton=o.forwardRef(function({icon:o,label:b,extended:g=!1,variant:h="tonal",color:y="primary",size:_="md",position:w="fixed",corner:v="bottom-end",offset:z=16,disabled:$=!1,type:j="button",className:k,style:N,...B},A){return t(a,{ref:A,type:j,disabled:$,"aria-label":b,"data-mp-size":_,"data-mp-variant":h,className:["mp-fab group inline-flex shrink-0 items-center justify-center","box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",p[_],g?`${m[_]} ${c[_]} ${d[_]}`:l[_],$?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${r[h]} shadow-mp-3`,"static"===w?"relative":`${u[w]} ${x[v]}`,k??""].filter(Boolean).join(" "),style:{...n(y),"--_mp-fab-offset":"number"==typeof z?`${z}px`:z,...N},...B,children:[$?null:e(s,{}),i(o)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:f[_],height:f[_]},children:o}):null,g?e("span",{className:"relative truncate",children:b}):null]})});

package/dist/components/floating-action-button/index.d.ts

@@ -0,0 +1,2 @@
+export { MPFloatingActionButton } from './MPFloatingActionButton';
+export type { MPFloatingActionButtonProps, MPFloatingActionButtonVariant } from './MPFloatingActionButton';

package/dist/components/floating-action-button/index.js

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

package/dist/components/grid/MPGrid.d.ts

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPResponsive } from '../../types';
+/**
+ * How a row divides the space its items did not take.
+ *
+ * CSS's own words rather than a set of this library's, because this is CSS's own
+ * question: a grid is the one component whose props are asking the layout engine
+ * for something directly, and inventing a second spelling for `space-between`
+ * would mean a caller has to translate what they already know.
+ */
+export type MPGridJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+/** How items sit against each other across a row. */
+export type MPGridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/** The same, for one item overriding the row it is in. */
+export type MPGridAlignSelf = MPGridAlign | 'auto';
+export interface MPGridProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many columns a row is divided into. Every `span` and every `offset`
+     * inside is read against this number, so `columns={24}` makes `span={12}` a
+     * half rather than a full width.
+     *
+     * MD3's own layout grid is `{ compact: 4, medium: 12 }`.
+     * @default 12
+     */
+    columns?: MPResponsive<number>;
+    /**
+     * The gutter between items, on Tailwind's spacing scale — `spacing={4}` is
+     * `1rem`, the same length `gap-4` is. Fractions are allowed, so `1.5` is
+     * `0.375rem`.
+     *
+     * MD3's own gutter is `{ compact: 4, medium: 6 }` — 16dp on a phone, 24dp from
+     * a medium window up.
+     * @default 4
+     */
+    spacing?: MPResponsive<number>;
+    /** The gutter between rows only. Falls back to `spacing`. */
+    rowSpacing?: MPResponsive<number>;
+    /** The gutter between columns only. Falls back to `spacing`. */
+    columnSpacing?: MPResponsive<number>;
+    /** How a row distributes the width its items did not use. */
+    justifyContent?: MPGridJustify;
+    /**
+     * How items sit against each other across a row.
+     * @default 'stretch'
+     */
+    alignItems?: MPGridAlign;
+    /** Where the rows sit when the grid is shorter than the box holding it. */
+    alignContent?: MPGridJustify | 'stretch';
+    /**
+     * Whether a row that runs out of columns continues on the next one. Turned
+     * off, the grid is one row that overflows — which is what a horizontally
+     * scrolling strip wants and nothing else does.
+     * @default true
+     */
+    wrap?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<ul />}`. Base UI's own escape hatch, so it behaves here exactly as
+     * it does on every Base UI primitive.
+     */
+    render?: useRender.RenderProp;
+    /** The `MPGridItem`s. */
+    children?: React.ReactNode;
+}
+export interface MPGridItemProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many of the grid's columns the item takes. Read against the grid's
+     * `columns`, so `span={6}` is half of the default twelve and a quarter of
+     * `columns={24}`.
+     *
+     * Responsive: `span={{ compact: 12, medium: 6, expanded: 4 }}` is full width on
+     * a phone, half from 600dp and a third from 840dp. Each entry applies from its
+     * own window class up, so two of them usually describe a whole layout.
+     *
+     * A span wider than the row is clamped to the row rather than overflowing.
+     * @default the grid's full width
+     */
+    span?: MPResponsive<number>;
+    /**
+     * Columns left empty *before* the item — space pushed in ahead of it, not an
+     * absolute position in the row. First in a twelve-column row, `offset={4}` with
+     * `span={4}` is the middle third; after an item that already took four columns,
+     * the same offset skips four more and lands on the last third.
+     *
+     * Responsive in the same way `span` is.
+     * @default 0
+     */
+    offset?: MPResponsive<number>;
+    /** Overrides the row's `alignItems` for this item alone. */
+    alignSelf?: MPGridAlignSelf;
+    /**
+     * Renders something other than a `<div>`: `render={<li />}`,
+     * `render={<article />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Material's layout grid: a row divided into columns, and items that take some
+ * of them.
+ *
+ * MD3 describes a page as a number of columns with a gutter between them, and
+ * describes how that number changes with the **window size class** rather than
+ * with a pixel width — four columns in a compact window, twelve from medium up.
+ * That is what this component is, and it is why `span` and `columns` take
+ * `{ compact, medium, expanded, large, extra-large }` rather than a set of
+ * breakpoints of the library's own invention. See `MPWindowClass` for why those
+ * are not Tailwind's four.
+ *
+ * ## Why the widths are real CSS and not utilities
+ *
+ * They cannot be utilities. A column is
+ * `(100% + gutter) * span / columns - gutter`, it has to be recomputed at four
+ * widths, and it is the width of an element whose column count is declared on its
+ * *parent* — none of which Tailwind can spell, because Tailwind finds classes by
+ * scanning source text and `columns` is a number the caller picks at runtime.
+ *
+ * So the arithmetic is written once, in `src/styles.css`, and the per-instance
+ * numbers arrive as inline `--_mp-*` slots — exactly how a `color` reaches a
+ * background in this library. The count and the two gutters are declared on the
+ * grid and *inherited* by the items rather than passed through a React context,
+ * which is not a shortcut: a media query can change an inherited custom property
+ * without React hearing about it, so the column count an item lays itself out
+ * against is always the one that is actually on screen. A context would have to
+ * re-render the subtree at every window class to say the same thing.
+ *
+ * ## Why a grid paints nothing
+ *
+ * No `variant`, no `color`, no padding. A grid is not a surface — it is the
+ * arrangement of the surfaces inside it — and the moment it draws a sheet of its
+ * own it stops being usable as the outermost thing on a page. Wrap it in an
+ * [MPBox](./box) or an [MPCard](./card) when the sheet is wanted, and in an
+ * [MPContainer](./container) when what is wanted is the page margin.
+ *
+ * Nesting is an `MPGrid` inside an `MPGridItem`, not a grid that is also an item:
+ * the inner grid redeclares the column count for its own subtree while the item
+ * around it keeps the width the outer grid gave it.
+ */
+export declare const MPGrid: React.ForwardRefExoticComponent<MPGridProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One cell of an `MPGrid`.
+ *
+ * It is a width and nothing else — no surface, no padding, no typography. What
+ * goes inside brings its own, which is the whole reason a cell and an
+ * [MPBox](./box) are two components: wrapping something in a layout must not
+ * change how it looks, and a cell that drew a sheet would make `span` a visual
+ * decision.
+ *
+ * The column count it divides by is inherited from the grid as a custom
+ * property, so an item with no `MPGrid` above it falls back to twelve rather than
+ * breaking. It will still be a plain block in a plain parent, which is not a
+ * layout — always wrap.
+ */
+export declare const MPGridItem: React.ForwardRefExoticComponent<MPGridItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid/MPGrid.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const n=["compact","medium","expanded","large","extra-large"];function r(e,t,r){const a=function(e){return null==e?{}:"object"==typeof e?e:{compact:e}}(t),s={};for(const t of n){const n=a[t];void 0!==n&&(s[`--_mp-${e}-${t}`]=r(n))}return s}function a(e,t){return null==e?t:"object"==typeof e?{compact:t,...e}:e}function s(e){return String(Math.max(1,Math.round(e)))}function o(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(0,Math.round(e)))}function i(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const l={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},f={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},u={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},p={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=e.forwardRef(function({columns:e,spacing:n,rowSpacing:o,columnSpacing:c,justifyContent:p,alignItems:d,alignContent:m,wrap:y=!0,render:g,className:h,style:x,children:b,...j},w){return t({render:g,ref:w,props:{className:["mp-grid flex",y?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",p?l[p]:"",d?f[d]:"",m?u[m]:"",h??""].filter(Boolean).join(" "),style:{...r("cols",a(e,12),s),...r("gap-x",a(c??n,4),i),...r("gap-y",a(o??n,4),i),...x},children:b,...j}})});export const MPGridItem=e.forwardRef(function({span:e,offset:n,alignSelf:a,render:s,className:i,style:l,children:f,...u},d){return t({render:s,ref:d,props:{className:["mp-grid-item",a?p[a]:"",i??""].filter(Boolean).join(" "),style:{...r("span",e,o),...r("offset",n,c),...l},children:f,...u}})});

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

@@ -0,0 +1,2 @@
+export { MPGrid, MPGridItem } from './MPGrid';
+export type { MPGridAlign, MPGridAlignSelf, MPGridItemProps, MPGridJustify, MPGridProps } from './MPGrid';

package/dist/components/grid/index.js

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

package/dist/components/highlight/MPHighlight.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import type { MPTypographyWeight } from '../typography/MPTypography';
+import type { MPColor, MPVariant } from '../../types';
+/**
+ * The four weights a mark can be drawn at.
+ *
+ * `elevated` is deliberately absent, and it is the one member of `MPVariant` that
+ * could not mean anything here: elevation is a surface lifting off the page, and
+ * a mark is *inside* a line of text. A raised word would cast a shadow onto the
+ * sentence it is part of.
+ */
+export type MPHighlightVariant = Exclude<MPVariant, 'elevated'>;
+export interface MPHighlightProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * What to find.
+     *
+     * A string is one term, an array is several — the longest is tried first, so
+     * `['data', 'database']` marks the whole word rather than the first four
+     * letters of it. A `RegExp` is used as written, with the global flag forced on;
+     * `caseSensitive` and `wholeWord` are ignored for it, because a regular
+     * expression already says both of those things itself.
+     */
+    query: string | string[] | RegExp;
+    /**
+     * How much surface the mark paints.
+     *
+     * `tonal` is the default, and it is the only one of the four that is a
+     * highlighter pen: MD3's container roles are a pale wash under dark ink, which
+     * is a marked word rather than a word replaced by a block of colour. `filled`
+     * is the accent proper under its own ink — loud, and right for one match on a
+     * page. `outlined` boxes the word, `text` recolours it and draws nothing.
+     * @default 'tonal'
+     */
+    variant?: MPHighlightVariant;
+    /**
+     * Which accent family the mark reads.
+     *
+     * `tertiary` rather than `primary`, and this is the one place in the library
+     * where that is the right default. `primary` is what a page uses for the thing
+     * it wants pressed; a search match is not that, and a page whose marked words
+     * are the same colour as its buttons has two things competing to be the loudest
+     * thing on it.
+     * @default 'tertiary'
+     */
+    color?: MPColor;
+    /**
+     * Whether `a` and `A` are different letters.
+     * @default false
+     */
+    caseSensitive?: boolean;
+    /**
+     * Whether a term has to be a word on its own — `cat` marking "cat" but not
+     * "concatenate".
+     *
+     * A word here is a run of letters, digits and underscores in any script, so it
+     * means what it should for `café` and `naïve`. It means very little for Korean
+     * or Japanese, where a phrase is not delimited by spaces at all; that is a
+     * property of the writing system rather than of this prop, and is why it is off
+     * by default.
+     * @default false
+     */
+    wholeWord?: boolean;
+    /** Underlines the mark as well. Combines with every variant. */
+    underline?: boolean;
+    /**
+     * Sets the mark's weight. Omit it and the mark is the weight of the text around
+     * it — the surface is already saying "this one", and a bolded word inside a
+     * sentence changes the rhythm of the whole line.
+     */
+    weight?: MPTypographyWeight;
+    /**
+     * The text to search. Elements are walked into and left otherwise untouched, so
+     * a match inside a `<strong>` is still marked and the `<strong>` survives.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Marks the words a reader is looking for, inside text they were already reading.
+ *
+ * The component is the search, not just the styling: `query` is what a search box
+ * holds, and everything about *how* the matching is done — case, whole words, a
+ * regular expression — is a prop rather than something a caller has to
+ * pre-compute into a list of offsets.
+ *
+ * The mark is a real `<mark>`, which is the element for text of relevance to the
+ * reader and is announced as such. That has one consequence worth knowing:
+ * marking eleven words in a paragraph tells a screen reader that eleven things
+ * are important, which is a way of saying nothing. A highlight is for a handful
+ * of matches.
+ *
+ * Nothing here is stateful and nothing measures — the whole component is a pure
+ * function of `children` and `query`, so it re-marks on its own the moment the
+ * search box changes.
+ */
+export declare const MPHighlight: React.ForwardRefExoticComponent<MPHighlightProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/highlight/MPHighlight.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{accentSlots as t}from"../../internal/accent";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border border-(--_mp-accent) bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i=/[\p{L}\p{N}_]/u;function l(e){return e.replace(/[-.*+?^${}()|[\]\\]/g,"\\$&")}function a(e,n,t){const r=n>0?e[n-1]:"",o=t<e.length?e[t]:"";return!i.test(r)&&!i.test(o)}function c(e,n,t,r){n.lastIndex=0;const o=[];let i,l=0;for(;null!==(i=n.exec(e));){if(""===i[0]){n.lastIndex+=1;continue}const c=i.index,s=c+i[0].length;t&&!a(e,c,s)||(c>l&&o.push(e.slice(l,c)),o.push(r(i[0],String(c))),l=s)}return 0===o.length?e:(l<e.length&&o.push(e.slice(l)),o)}function s(e,t,r,o){if("string"==typeof e)return c(e,t,r,o);if("number"==typeof e)return c(String(e),t,r,o);if(Array.isArray(e))return n.Children.map(e,e=>s(e,t,r,o));if(n.isValidElement(e)){const i=e.props.children;return void 0===i||"function"==typeof i?e:n.cloneElement(e,void 0,s(i,t,r,o))}return e}export const MPHighlight=n.forwardRef(function({query:i,variant:a="tonal",color:c="tertiary",caseSensitive:u=!1,wholeWord:f=!1,underline:m=!1,weight:p,className:g,style:d,children:h,...x},b){const y=i instanceof RegExp?`re ${i.source} ${i.flags}`:Array.isArray(i)?`a ${i.join("\0")}`:`s ${i}`,_=n.useMemo(()=>function(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const t=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===t.length?null:new RegExp(t.map(l).join("|"),n?"gu":"giu")}(i,u),[y,u]),$=["rounded-mp-xs -mx-0.5 px-0.5","box-decoration-clone",r[a],m?"underline decoration-2 underline-offset-2":"",p?o[p]:""].filter(Boolean).join(" "),j=n.useMemo(()=>_?s(h,_,f,(n,t)=>e("mark",{className:$,children:n},t)):h,[h,_,f,$]);return e("span",{ref:b,className:["mp-highlight",g??""].filter(Boolean).join(" "),style:{...t(c),...d},...x,children:j})});

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

@@ -0,0 +1,2 @@
+export { MPHighlight } from './MPHighlight';
+export type { MPHighlightProps, MPHighlightVariant } from './MPHighlight';

package/dist/components/highlight/index.js

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

package/dist/components/icon-button/MPIconButton.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { type MPButtonProps } from '../button/MPButton';
+export interface MPIconButtonProps extends Omit<MPButtonProps, 'children' | 'startIcon' | 'endIcon' | 'fullWidth'> {
+    /**
+     * The glyph.
+     *
+     * Wrap it in an `MPIcon` when it needs a size of its own; passed bare it is
+     * laid out exactly as a button's `startIcon` is, which is what keeps an icon
+     * button and a labelled button with the same glyph drawing it at the same
+     * size.
+     */
+    icon: React.ReactNode;
+    /**
+     * What the button does, in words.
+     *
+     * Required, and the one prop here that is. A button whose whole label is a
+     * drawing has no accessible name at all, and "an icon button with no
+     * `aria-label`" is the single most common accessibility defect a component
+     * library ships. Making it required is the only fix that survives review — a
+     * default would be a name that is right for nobody, and a warning is a thing
+     * that gets filtered out of a console.
+     */
+    label: string;
+}
+/**
+ * A round button with a glyph in it and nothing else.
+ *
+ * There is almost nothing here, and that is the point: an [MPButton](./button)
+ * with an icon and no children already goes square and is already a pill, which
+ * for a square is a circle — MD3's icon button shape falls out of the button's
+ * own `corner-full` with no second table to keep in step. What this component
+ * adds is the *name*, which is the part that cannot be defaulted and is the part
+ * that is always missing.
+ *
+ * Everything else is the button's, unchanged and on purpose: the five variants,
+ * the four families, the size ladder, the state layer, `loading`, and the values
+ * a surrounding `MPButtonGroup` sets. Two components drawing the same surface
+ * from two copies of one table are two components that will eventually disagree
+ * about it.
+ *
+ * ## Why the default variant is `text` and the button's is `filled`
+ *
+ * Because MD3's default icon button is its *standard* one — a glyph with no
+ * container at all — and the specification is right about why. A labelled button
+ * is usually the one thing on a row worth pressing; an icon button is usually
+ * one of several sitting in a toolbar or a card's corner, and five filled discs
+ * in a row is a row with no emphasis left in it. Reach for `filled` when the
+ * icon button *is* the action on the screen.
+ *
+ * ## No toggle state
+ *
+ * MD3 also describes a *toggle* icon button, which swaps its container and its
+ * ink when selected. This is not that, and a `selected` prop would make it half
+ * of one: a toggle needs a pressed state that survives the press, a group that
+ * can enforce one choice, and a name that changes with the state. That is
+ * [MPSegmentedButton](./segmented-button) for a set, and a `<MPIconButton>` whose
+ * `icon` and `label` are both derived from your own state for a single one.
+ */
+export declare const MPIconButton: React.ForwardRefExoticComponent<MPIconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/icon-button/MPIconButton.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{MPButton as o}from"../button/MPButton";export const MPIconButton=r.forwardRef(function({icon:r,label:a,variant:n="text",...e},i){return t(o,{ref:i,"aria-label":a,variant:n,startIcon:r,...e})});

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

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

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

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

package/dist/components/list/MPList.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+export interface MPListProps extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'color'> {
+    /**
+     * How much surface the sheet paints behind the rows.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The row height and type scale. Each rung lands a one-line row on exactly the
+     * control height of the same name — see `PAD_Y`.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family a selected or hovered row reads. The sheet itself stays
+     * neutral whatever this is.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * Separates the rows with a hairline instead of with space.
+     *
+     * It changes more than it sounds like: with dividers the rules have to reach
+     * both edges of the sheet, so the list gives up its inner padding and the rows
+     * give up their rounded corners. A row cannot be a floating tile and a ruled
+     * line at the same time.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Renders something other than a `<ul>` — `render={<ol />}` for a list where
+     * the order is the point. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+export interface MPListItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
+    /**
+     * Passing it is what turns the row into a real `<button>`. It lands on that
+     * button rather than on the `<li>`, which is why the type is loosened from the
+     * list item the shell actually is.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Content before the label — an icon, an avatar, a status dot. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, inside the pressable area. */
+    endIcon?: React.ReactNode;
+    /**
+     * A second line under the label. MD3 calls this the supporting text, and it is
+     * one step down the type scale in `on-surface-variant`.
+     */
+    description?: React.ReactNode;
+    /**
+     * A control pinned to the end of the row — a switch, a menu button.
+     *
+     * Deliberately outside the pressable area: a row that both navigates and holds
+     * a toggle has two things to press, and nesting one button inside another is
+     * markup the browser rewrites on parse.
+     */
+    action?: React.ReactNode;
+    /** Renders the row as a link. Mutually exclusive with `onClick` in practice. */
+    href?: string;
+    /** Marks the row as the chosen one — the open page, the current filter. */
+    selected?: boolean;
+    /** Unavailable. Drops the accent family, as everywhere else in the library. */
+    disabled?: boolean;
+    /** The label. */
+    children?: React.ReactNode;
+}
+/**
+ * A stack of rows.
+ *
+ * The list is a sheet and the rows are what is on it, which is the whole reason
+ * the two are separate components: `size` and `color` are properties of the
+ * stack, not of any one line in it, and a context is what carries them down.
+ *
+ * There is no Base UI primitive under this on purpose. A list is not a composite
+ * widget — it has no roving focus, no selection model, no keyboard contract of
+ * its own. Reaching for a menu or a listbox primitive to get one would hand
+ * every consumer's plain list of links the semantics of a menu, which is the
+ * most common way a component library breaks a screen reader.
+ */
+export declare const MPList: React.ForwardRefExoticComponent<MPListProps & React.RefAttributes<HTMLUListElement>>;
+/**
+ * One row.
+ *
+ * The shell is always an `<li>`. What changes is what is inside it: a plain run
+ * of content, or — when `onClick` or `href` is given — a real `<button>` or
+ * `<a>` wrapping that content, with `action` sitting outside it as a separate
+ * control. This is the same shape `MPChip` uses, for the same two reasons: a
+ * `<span>` carrying a click handler is invisible to a keyboard, and a `<button>`
+ * inside a `<button>` is markup Chrome silently un-nests.
+ */
+export declare const MPListItem: React.ForwardRefExoticComponent<MPListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/MPList.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import*as t from"react";import{useRender as i}from"@base-ui/react/use-render";import{accentSlots as o}from"../../internal/accent";import{CONTROL_GAP as l,hasContent as s,PROSE_TEXT as a,SHEET_PAD_X as d}from"../../internal/scale";import{MPStateLayer as c}from"../../internal/StateLayer";import{CONTAINER_SURFACE as m}from"../../internal/surface";const p=t.createContext({size:"md",color:"primary",dividers:!1}),u={xs:"py-1.5",sm:"py-2.5",md:"py-4",lg:"py-5",xl:"py-6"},f={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},x={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"};export const MPList=t.forwardRef(function({variant:r="outlined",size:n="md",color:l="primary",dividers:s=!1,render:a,className:d,style:c,children:u,...f},x){const h=t.useMemo(()=>({size:n,color:l,dividers:s}),[n,l,s]),v=["mp-list rounded-mp-md flex flex-col",m[r],"text-mp-on-surface",s?"overflow-hidden [&>li+li]:border-mp-outline-variant [&>li+li]:border-t":"p-1",d??""].filter(Boolean).join(" "),b=i({render:a??e("ul",{}),ref:x,props:{role:"list","data-mp-size":n,"data-mp-variant":r,className:v,style:{...o(l),...c},children:u,...f}});return e(p.Provider,{value:h,children:b})});export const MPListItem=t.forwardRef(function({startIcon:i,endIcon:o,description:m,action:h,href:v,selected:b=!1,disabled:y=!1,className:N,children:g,onClick:j,...k},w){const{size:z,dividers:B}=t.useContext(p),C=Boolean(j||v)&&!y,I=d[z],L=["group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","font-[inherit] no-underline",I,u[z],l[z],a[z],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",B?"":x[z],y?"text-mp-on-surface/38 cursor-default":b?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":"",C?["cursor-pointer appearance-none border-0",b?"":"bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "):""].filter(Boolean).join(" "),M=r(n,{children:[C?e(c,{}):null,s(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[s(g)?e("span",{className:"truncate",children:g}):null,s(m)?e("span",{className:["truncate",f[z],b?"opacity-80":"text-mp-on-surface-variant"].join(" "),children:m}):null]}),s(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]});return r("li",{ref:w,"data-selected":b||void 0,className:["flex w-full items-center",N??""].filter(Boolean).join(" "),...k,children:[C&&v?e("a",{href:v,className:L,"aria-current":b?"page":void 0,onClick:j,children:M}):C?e("button",{type:"button",className:L,"aria-current":!!b||void 0,onClick:j,children:M}):e("div",{className:L,"aria-disabled":y||void 0,children:M}),s(h)?e("div",{className:`flex shrink-0 items-center ${I}`,children:h}):null]})});

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

@@ -0,0 +1,2 @@
+export { MPList, MPListItem } from './MPList';
+export type { MPListItemProps, MPListProps } from './MPList';

package/dist/components/list/index.js

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