material-plus-ui 0.0.1 → 1.1.0

package/dist/components/avatar/MPAvatar.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+/** What Base UI reports about the picture as it loads. */
+export type MPAvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+/**
+ * The crop.
+ *
+ * `circle` is the default and is what Material draws: MD3's avatar is a circle,
+ * and a round crop is what a portrait has been for as long as there have been
+ * portraits.
+ *
+ * `square` cuts the corners off instead, which is what a logo or a repository
+ * icon wants — those are drawn to the edges of a rectangle and a round crop eats
+ * them.
+ */
+export type MPAvatarShape = 'circle' | 'square';
+export interface MPAvatarProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * The picture. Until it loads — and forever, if it fails — the fallback is
+     * what is drawn, so an avatar is never an empty box.
+     */
+    src?: string;
+    /** Candidate images at other resolutions, as on any `<img>`. */
+    srcSet?: string;
+    /**
+     * What the picture says, for a reader who cannot see it. Defaults to `name`,
+     * and to nothing at all when there is no name — an avatar next to the person's
+     * own name in the row is decoration, and reading it out says the name twice.
+     */
+    alt?: string;
+    /**
+     * Who or what this is. One prop doing three jobs: it names the picture, the
+     * initials are derived from it, and it is the sentence a screen reader hears
+     * instead of those initials.
+     *
+     * The initials are the first character of the first word plus the first
+     * character of the last — "Jane Doe" is `JD`, "홍길동" is `홍`. That rule is
+     * wrong for some names, which is what `initials` is for.
+     */
+    name?: string;
+    /** The initials, written out, for when the rule derived the wrong ones. */
+    initials?: string;
+    /**
+     * The crop.
+     * @default 'circle'
+     */
+    shape?: MPAvatarShape;
+    /**
+     * How much surface is painted behind the fallback. Invisible once a picture
+     * has loaded, apart from the edge `outlined` keeps.
+     *
+     * `tonal` is the default because it is what MD3 draws a monogram on: the
+     * container tone of the accent family, with the matching `on-` ink. A page of
+     * `filled` avatars is a page of saturated circles nobody can read a name off.
+     * @default 'tonal'
+     */
+    variant?: MPVariant;
+    /**
+     * The box the picture is drawn in — the control heights, so an avatar and the
+     * button beside it in a toolbar are the same height.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** @default 'primary' */
+    color?: MPColor;
+    /**
+     * How long to wait before drawing the fallback, in milliseconds. Set it to
+     * roughly the time a cached image takes and the initials stop flashing up in
+     * front of a picture that was about to arrive anyway.
+     */
+    delay?: number;
+    /**
+     * Anything else the `<img>` needs — `loading`, `crossOrigin`, `referrerPolicy`.
+     *
+     * `className` is not among them, and deliberately: the picture is sized and
+     * cropped by the avatar's own box, and a class replacing that would be a
+     * picture that no longer fits the circle it is in. Style the avatar instead —
+     * `className` on the component reaches the box the picture fills.
+     */
+    imageProps?: Omit<React.ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt' | 'className'>;
+    /** Called as the picture moves between `idle`, `loading`, `loaded` and `error`. */
+    onLoadingStatusChange?: (status: MPAvatarLoadingStatus) => void;
+    /**
+     * The fallback, drawn instead of the initials. An icon, a logo, a single emoji
+     * — whatever stands in for this particular thing when there is no picture of
+     * it.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A picture of a person or a thing, at a known size, that is never an empty box.
+ *
+ * Three things can be drawn in it and exactly one of them is at a time: the
+ * picture, if `src` is given and loads; otherwise whatever stands in for it —
+ * `children`, or `initials`, or the initials derived from `name`; and failing
+ * all of those, a silhouette. Which one is showing is Base UI's `Avatar` to
+ * decide, because "has the image loaded" is a question with four answers and a
+ * race in the middle of it.
+ *
+ * It carries no status dot of its own. An avatar with a green mark on it is an
+ * `MPBadge` with an avatar in it, and inventing a second spelling for that would
+ * give the library two of them.
+ */
+export declare const MPAvatar: React.ForwardRefExoticComponent<MPAvatarProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/avatar/MPAvatar.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent";import{CONTROL_SQUARE as l,hasContent as i}from"../../internal/scale";import{VISUALLY_HIDDEN as o}from"../../internal/visually-hidden";const m={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},s={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},c={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};function d(){return a("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",className:"size-[60%]",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const MPAvatar=t.forwardRef(function({src:t,srcSet:p,alt:u,name:f,initials:h,shape:x="circle",variant:g="tonal",size:v="md",color:b="primary",delay:y,imageProps:N,onLoadingStatusChange:j,className:w,style:z,children:_,...C},A){const B=f?function(e){const a=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===a.length?"":((Array.from(a[0])[0]??"")+(a.length>1?Array.from(a[a.length-1])[0]??"":"")).toLocaleUpperCase()}(f):"",S=u??f,L=i(_)?_:(h??B)||e(d,{}),M=i(_)||Boolean(h??B),k=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",l[v],m[v],"circle"===x?"rounded-mp-full":s[v],c[g],w??""].filter(Boolean).join(" ");return a(n.Root,{ref:A,"data-mp-size":v,"data-mp-variant":g,className:k,style:{...r(b),...z},...C,children:[t?e(n.Image,{src:t,srcSet:p,alt:S??"",onLoadingStatusChange:j,...N,className:"size-full object-cover"}):null,a(n.Fallback,{delay:t?y:void 0,className:"flex size-full items-center justify-center",children:[S&&M?e("span",{className:o,children:S}):null,e("span",{"aria-hidden":!(!S||!M)||void 0,className:"contents",children:L})]})]})});

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

@@ -0,0 +1,2 @@
+export { MPAvatar } from './MPAvatar';
+export type { MPAvatarLoadingStatus, MPAvatarProps, MPAvatarShape } from './MPAvatar';

package/dist/components/avatar/index.js

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

package/dist/components/badge/MPBadge.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import type { MPColor, MPCorner, MPSize, MPVariant } from '../../types';
+export interface MPBadgeProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'content'> {
+    /**
+     * What the badge says — usually a count, sometimes a word.
+     *
+     * Omit it and the badge draws a dot instead, which is the honest thing when
+     * there is something to report but nothing to count. MD3 calls those two the
+     * large and the small badge, and they are the only two it has.
+     */
+    content?: React.ReactNode;
+    /**
+     * Caps a numeric `content` and adds a `+`. Only applies when the content is
+     * actually a number: a badge cannot know how to truncate a word.
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Draws the marker as a dot even when there is content, keeping the content
+     * for screen readers only. For the corner that has to stay quiet.
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Whether a `content` of `0` is shown. Off by default — zero unread messages
+     * is not news, and a badge that never goes away stops meaning anything.
+     * @default false
+     */
+    showZero?: boolean;
+    /**
+     * Hides the marker without unmounting the anchor. The badge keeps its place in
+     * the DOM, so showing it again does not relayout what it sits on.
+     * @default false
+     */
+    invisible?: boolean;
+    /**
+     * Which corner of the anchor it sits on.
+     * @default 'top-end'
+     */
+    placement?: MPCorner;
+    /**
+     * The shape of the thing underneath, which is what decides how far the marker
+     * tucks in: a circle's corner is further from its centre than a square's, so a
+     * badge that looks right on an avatar hangs off an icon button.
+     * @default 'square'
+     */
+    overlap?: 'square' | 'circle';
+    /**
+     * How much surface the marker paints.
+     * @default 'filled'
+     */
+    variant?: MPVariant;
+    /**
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the marker reads.
+     *
+     * **`error`, not `primary`**, and it is the one component in the library that
+     * defaults there. MD3 gives the badge exactly one colour pair — `error` under
+     * `on-error` — because a badge exists to be noticed, and the error palette is
+     * the one palette in the system that is guaranteed to be loud whatever the
+     * source colour is. A count in the brand colour on a brand-coloured app bar is
+     * a count nobody sees.
+     * @default 'error'
+     */
+    color?: MPColor;
+    /**
+     * What a screen reader hears instead of the raw content. `content={3}` on a
+     * bell is "3" to a reader and means nothing; `label="3 unread notifications"`
+     * is the sentence.
+     */
+    label?: string;
+    /**
+     * What the badge is pinned to. Without it the badge is a standalone marker
+     * that lays out inline, which is what a status pill in a table cell is.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A small mark in the corner of something else: unread mail on an inbox icon, a
+ * status dot on an avatar, a count on a tab.
+ *
+ * The shell is a `<span>` that wraps the anchor and does nothing but establish a
+ * positioning context — no width, no padding, `align-middle` — so a badged icon
+ * button still measures and lines up exactly like a bare one. With no children
+ * the marker lays out inline instead, which is what a standalone status pill is.
+ *
+ * There is no Base UI primitive under this, and there should not be: a badge has
+ * no interaction, no state and no keyboard contract. It is a mark. Wiring it to
+ * a widget primitive would hand every decorative dot a role it cannot honour.
+ *
+ * What it does owe a screen reader is a sentence rather than a number, which is
+ * what `label` is for — `content={3}` beside a bell reads out as "3".
+ *
+ * ## The one place the library draws a pill that is not a button
+ *
+ * `corner-full`, at every size. MD3 shapes a badge as a full circle or a stadium
+ * because it is a *mark laid on* a surface rather than a surface of its own, and
+ * a mark has no edge to cut. It is also the only component that overlaps its
+ * neighbour, for the same reason.
+ */
+export declare const MPBadge: React.ForwardRefExoticComponent<MPBadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/badge/MPBadge.js

@@ -0,0 +1 @@
+import{jsx as e,Fragment as t,jsxs as m}from"react/jsx-runtime";import*as n from"react";import{accentSlots as a}from"../../internal/accent";import{hasContent as l}from"../../internal/scale";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden";const i={xs:"h-3 min-w-3",sm:"h-3.5 min-w-3.5",md:"h-4 min-w-4",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},o={xs:"size-1",sm:"size-1.5",md:"size-1.5",lg:"size-2",xl:"size-2.5"},r={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-small",lg:"text-mp-label-medium",xl:"text-mp-label-medium"},d={xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},p={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},c={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},b={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},x={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-mp-surface-container text-(--_mp-accent)",text:"text-(--_mp-accent) bg-transparent"};export const MPBadge=n.forwardRef(function({variant:n="filled",size:u="md",color:g="error",content:f,max:h=99,dot:v=!1,showZero:w=!1,invisible:z=!1,placement:_="top-end",overlap:j="square",label:y,className:N,style:k,children:B,...$},q){const F=l(B),M=!l(f)||0===f&&!w,P=v||M,R=z||M&&!v,Z=["mp-badge pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","rounded-mp-full tabular-nums whitespace-nowrap",x[n],P?o[u]:[i[u],r[u],d[u]].join(" "),F?`absolute ${c[_]}`:"relative align-middle",F?P?p[u].dot:p[u].badge:"",F&&"circle"===j?b[_]:"",R?"invisible":"",N??""].filter(Boolean).join(" "),A=function(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(f,h),C=e("span",{ref:q,"data-mp-size":u,"data-mp-variant":n,className:Z,style:{...a(g),...k},"aria-hidden":!!R||void 0,...$,children:R?null:m(t,{children:[P||y?e("span",{className:s,children:y??A}):null,P?null:e("span",{"aria-hidden":!!y||void 0,children:A})]})});return F?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[B,C]}):C});

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

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

package/dist/components/badge/index.js

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

package/dist/components/blockquote/MPBlockquote.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+/**
+ * The props are a `<figure>`'s rather than a `<blockquote>`'s, which is a
+ * consequence of where the drawing happens: everything a caller passes lands on
+ * the wrapper, and the wrapper is a figure or a div. Both are `HTMLElement`, so
+ * an event handler written against one works on the other.
+ */
+export interface MPBlockquoteProps extends Omit<React.ComponentPropsWithoutRef<'figure'>, 'color'> {
+    /**
+     * How much surface the quote paints behind the words.
+     * @default 'text'
+     */
+    variant?: MPVariant;
+    /**
+     * The type scale of the quote and the room around it.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the rule down the leading edge is drawn in — and, on
+     * `filled` and `tonal`, the surface behind the words.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * Who said it. Its presence is what turns the quote into a `<figure>` with a
+     * `<figcaption>`, which is the markup the HTML specification asks for: an
+     * attribution is *about* the quote and is not part of what was said.
+     */
+    author?: React.ReactNode;
+    /**
+     * Where it is from — a book, a talk, a page. Rendered inside a `<cite>`, which
+     * is the element for the title of a work and, per the specification, never for
+     * the name of a person. That is what `author` is.
+     */
+    source?: React.ReactNode;
+    /**
+     * URL of the document the quote was taken from. Lands on the `<blockquote>`'s
+     * own `cite` attribute, which is machine-readable and shown to nobody — use
+     * `source` for the part a reader should see.
+     */
+    cite?: string;
+    /**
+     * The mark drawn before the quote. Omit it for the house glyph, pass a node to
+     * replace it, pass `false` to take it away.
+     */
+    icon?: React.ReactNode | false;
+    /** What was said. */
+    children?: React.ReactNode;
+}
+/**
+ * Somebody else's words, set apart from your own.
+ *
+ * There is no Base UI primitive under this and there should not be: a quote has
+ * no state, no keyboard contract and nothing to interact with. What it has is
+ * markup that is easy to get wrong, and getting it right is most of the point.
+ *
+ * **Nothing is drawn on the `<blockquote>` itself.** The surface, the rule and
+ * the padding all belong to the element around it, and that is not tidiness —
+ * `blockquote` is one of the handful of tags a host stylesheet still styles by
+ * name. VitePress's `.vp-doc blockquote` sets a grey `border-left`, a
+ * `padding-left` and a `color`, all at a specificity a one-class utility cannot
+ * outrank, so a rule drawn on the quote itself would silently come out grey and
+ * a pixel too thin.
+ *
+ * The wrapper is a `<figure>` when there is an attribution and a `<div>` when
+ * there is not, because the HTML specification is explicit that the attribution
+ * goes *outside* the blockquote — a name inside it claims the speaker said their
+ * own name — and a `<figure>` with no `<figcaption>` in it is a figure of
+ * nothing.
+ */
+export declare const MPBlockquote: React.ForwardRefExoticComponent<MPBlockquoteProps & React.RefAttributes<HTMLElement>>;

package/dist/components/blockquote/MPBlockquote.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{accentSlots as r}from"../../internal/accent";import{hasContent as n,META_TEXT as i,SHEET_PAD as l}from"../../internal/scale";const o={xs:"text-mp-body-medium",sm:"text-mp-body-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},c="border-s-2 [border-inline-start-color:var(--_mp-accent)]",s={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline-variant border border-s-2 bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"};function m(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const MPBlockquote=a.forwardRef(function({variant:a="text",size:d="md",color:p="primary",author:u,source:f,cite:x,icon:h,className:b,style:g,children:v,...y},N){const j=n(u)||n(f),w=void 0===h?e(m,{}):h,z="text"!==a,_=["mp-blockquote flex flex-col",o[d],c,z?"rounded-mp-md rounded-s-none":"",s[a],z?l[d]:"ps-4",b??""].filter(Boolean).join(" "),k=t("blockquote",{cite:x,children:[n(w)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] opacity-38",children:w}):null,v]}),q={...r(p),...g};return j?t("figure",{ref:N,"data-mp-size":d,"data-mp-variant":a,className:_,style:q,...y,children:[k,t("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5",z?"opacity-80":"text-mp-on-surface-variant",i].join(" "),children:[n(u)?t("span",{className:"font-medium",children:[e("span",{"aria-hidden":"true",children:"— "}),u]}):null,n(f)?e("cite",{className:"not-italic",children:f}):null]})]}):e("div",{ref:N,"data-mp-size":d,"data-mp-variant":a,className:_,style:q,...y,children:k})});

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

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

package/dist/components/blockquote/index.js

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

package/dist/components/bottom-navigation/MPBottomNavigation.d.ts

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPPosition, MPSize } from '../../types';
+/** A destination's value. The same restraint `MPTabs` puts on a tab's. */
+export type MPBottomNavigationValue = string | number;
+/**
+ * Which names are drawn.
+ *
+ * MD3's three label behaviours, and the order they lose information in:
+ *
+ * - `all` — every destination is named. The default, and the only one that works
+ *   for a reader who has not used the application before.
+ * - `selected` — only the destination the reader is on. The bar keeps its height
+ *   either way.
+ * - `none` — glyphs only.
+ *
+ * Undrawn is never unsaid: in both of the last two the names stay in the
+ * document for a screen reader, because a glyph on its own has no accessible
+ * name at all.
+ */
+export type MPBottomNavigationLabels = 'all' | 'selected' | 'none';
+export interface MPBottomNavigationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'defaultValue' | 'onChange'> {
+    /** The destination the reader is on. Use with `onValueChange` for a controlled bar. */
+    value?: MPBottomNavigationValue | null;
+    /** Which starts current, for an uncontrolled bar. */
+    defaultValue?: MPBottomNavigationValue | null;
+    /** Called with the value of the destination that was pressed. */
+    onValueChange?: (value: MPBottomNavigationValue) => void;
+    /**
+     * How the bar sits in the page's scroll. `fixed` — the default, against the
+     * `static` everything else in this library defaults to — is what a bottom
+     * navigation bar is: held against the bottom edge of the window whatever the
+     * page under it does.
+     * @default 'fixed'
+     */
+    position?: MPPosition;
+    /**
+     * Which names are drawn.
+     * @default 'all'
+     */
+    labels?: MPBottomNavigationLabels;
+    /**
+     * The bar's height and type scale. `md` is MD3's own 80dp.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * A hairline along the top edge.
+     *
+     * Off by default, because MD3 separates the bar from the page by *tone* — the
+     * container is `surface-container` against the page's `surface` — rather than
+     * by a rule. Turn it on when the page behind it is the same tone, which is
+     * where the tonal difference stops being visible.
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * Keeps the destinations clear of a phone's home indicator by adding
+     * `env(safe-area-inset-bottom)` under them. The container still reaches the
+     * bottom of the screen — only the row moves up, so the surface runs under the
+     * indicator rather than stopping in a stripe above it.
+     * @default true
+     */
+    safeArea?: boolean;
+    /** Every destination stops answering. */
+    disabled?: boolean;
+    /**
+     * The name the bar is announced by — "Main", "Sections". A landmark with no
+     * name is a landmark a screen reader lists as "navigation".
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<nav>`. Base UI's own escape hatch, and
+     * rarely what you want here: a row of destinations is navigation.
+     */
+    render?: useRender.RenderProp;
+    /** The `MPBottomNavigationItem`s — three to five of them. */
+    children?: React.ReactNode;
+}
+export interface MPBottomNavigationItemProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {
+    /** Identifies the destination. What `onValueChange` reports. */
+    value: MPBottomNavigationValue;
+    /** The glyph, drawn inside the active indicator. */
+    icon?: React.ReactNode;
+    /**
+     * A second glyph for while this is the destination the reader is on — MD3
+     * fills the selected icon and outlines the rest, which is a signal that
+     * survives being seen out of the corner of an eye. Falls back to `icon`.
+     */
+    activeIcon?: React.ReactNode;
+    /**
+     * Renders the destination as a real link.
+     *
+     * Worth reaching for: a long press then offers "open in a new tab", the
+     * address shows in the status bar, and a crawler can follow it — none of which
+     * a `<button>` that calls `router.push` can do. `onValueChange` still fires.
+     */
+    href?: string;
+    /** Unavailable, but still part of the set. */
+    disabled?: boolean;
+    /** The destination's name. Read out even when `labels` keeps it undrawn. */
+    children?: React.ReactNode;
+}
+/**
+ * A row of destinations held against the bottom edge of the window.
+ *
+ * **MD3 calls this the navigation bar**; the name here is the one the pattern is
+ * still known by, and the two are the same component. What is drawn is the
+ * specification's: a `surface-container` bar 80dp tall, with the destination the
+ * reader is on marked by a 64×32dp `secondary-container` pill behind its glyph.
+ *
+ * ## Why it is a `<nav>` and not a tab list
+ *
+ * It is a deliberate choice about what is being promised. A tab list owes a
+ * keyboard reader one tab stop for the whole set and arrow keys within it, and
+ * owes a screen reader a panel per tab; a navigation bar switches what the
+ * *page* is, not which panel of one is showing. Claiming the role without the
+ * behaviour is worse for a keyboard reader than never claiming it.
+ *
+ * What is claimed instead is `aria-current="page"`, which is the honest
+ * statement: this is the destination you are on. Every item is an ordinary
+ * button or link, in the tab order, doing what buttons and links do.
+ *
+ * For dividing one screen into panels, that genuinely is [MPTabs](./tabs).
+ *
+ * ## Why it takes no `color`
+ *
+ * The active indicator is `secondary-container` because MD3 says it is, and for
+ * the reason [MPSegmentedButton](../inputs/segmented-button) gives: a mark
+ * saying *where you are* is not an accent statement. `primary` is what a screen
+ * reserves for the action it is about, and a navigation bar does nothing.
+ */
+export declare const MPBottomNavigation: React.ForwardRefExoticComponent<MPBottomNavigationProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One destination.
+ *
+ * It has no `size` and no colour of its own: both belong to the bar, which is
+ * the only place they can be set once and mean the same thing for every item. A
+ * bar whose third destination is a rung out is not a bar.
+ *
+ * With an `href` it is a real `<a>`; without one it is a `<button>`, because a
+ * `<div>` carrying a click handler is invisible to a keyboard.
+ */
+export declare const MPBottomNavigationItem: React.ForwardRefExoticComponent<MPBottomNavigationItemProps & React.RefAttributes<HTMLElement>>;

package/dist/components/bottom-navigation/MPBottomNavigation.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a,Fragment as l}from"react/jsx-runtime";import*as t from"react";import{useRender as n}from"@base-ui/react/use-render";import{MPStateLayer as i}from"../../internal/StateLayer";import{hasContent as o}from"../../internal/scale";import{VISUALLY_HIDDEN as r}from"../../internal/visually-hidden";const s=t.createContext({value:null,change:()=>{},size:"md",labels:"all",disabled:!1}),c={xs:"h-14",sm:"h-16",md:"h-20",lg:"h-22",xl:"h-24"},m={xs:"h-6 w-12",sm:"h-7 w-14",md:"h-8 w-16",lg:"h-9 w-18",xl:"h-10 w-20"},d={xs:20,sm:22,md:24,lg:26,xl:28},u={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-medium",xl:"text-mp-label-large"},f={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"},p={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPBottomNavigation=t.forwardRef(function({value:a,defaultValue:l=null,onValueChange:i,position:o="fixed",labels:r="all",size:m="md",divider:d=!1,safeArea:u=!0,disabled:f=!1,label:b,render:x,className:h,children:v,...g},w){const[y,z]=t.useState(l),N=void 0!==a,j=N?a:y,k=t.useCallback(e=>{N||z(e),i?.(e)},[N,i]),C=t.useMemo(()=>({value:j??null,change:k,size:m,labels:r,disabled:f}),[j,k,m,r,f]);return n({render:x??e("nav",{}),ref:w,props:{"aria-label":b,"data-mp-size":m,className:["mp-bottom-navigation bg-mp-surface-container text-mp-on-surface box-border w-full",d?"border-mp-outline-variant border-t":"",p[o],u?"pb-[env(safe-area-inset-bottom)]":"",h??""].filter(Boolean).join(" "),children:e(s.Provider,{value:C,children:e("div",{className:`flex w-full items-stretch ${c[m]}`,children:v})}),...g}})});export const MPBottomNavigationItem=t.forwardRef(function({value:n,icon:c,activeIcon:p,href:b,disabled:x=!1,className:h,children:v,onClick:g,...w},y){const z=t.useContext(s),N=x||z.disabled,j=null!==z.value&&z.value===n,k="all"===z.labels||"selected"===z.labels&&j,C=["mp-bottom-navigation__item group flex min-w-0 flex-1 flex-col items-center justify-center","box-border appearance-none bg-transparent px-1 font-[inherit] no-underline select-none",f[z.size],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",N?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface cursor-pointer":"text-mp-on-surface-variant cursor-pointer",h??""].filter(Boolean).join(" "),B=a(l,{children:[o(c)||o(p)?a("span",{className:["relative flex shrink-0 items-center justify-center overflow-hidden","rounded-mp-full","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",m[z.size],j&&!N?"bg-mp-secondary-container text-mp-on-secondary-container":""].filter(Boolean).join(" "),children:[N?null:e(i,{}),e("span",{className:"relative flex items-center justify-center",style:{width:d[z.size],height:d[z.size]},children:j?p??c:c})]}):null,o(v)?e("span",{className:k?`max-w-full truncate ${u[z.size]}`:r,children:v}):null]}),M=e=>{N?e.preventDefault():(z.change(n),g?.(e))};return b?e("a",{ref:y,href:N?void 0:b,"aria-current":j?"page":void 0,"aria-disabled":N||void 0,className:C,onClick:M,...w,children:B}):e("button",{ref:y,type:"button",disabled:N,"aria-current":j?"page":void 0,className:C,onClick:M,...w,children:B})});

package/dist/components/bottom-navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { MPBottomNavigation, MPBottomNavigationItem } from './MPBottomNavigation';
+export type { MPBottomNavigationItemProps, MPBottomNavigationLabels, MPBottomNavigationProps, MPBottomNavigationValue } from './MPBottomNavigation';

package/dist/components/bottom-navigation/index.js

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

package/dist/components/box/MPBox.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPSize, MPVariant } from '../../types';
+export interface MPBoxProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How much surface the sheet paints.
+     *
+     * A container's ladder, so `filled` is MD3's own filled-card surface —
+     * `surface-container-highest` — and not the accent. See the note on the
+     * component below for why a box is never dyed.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The room inside.
+     *
+     * **This is the one component where `size` sets no height and no type scale.**
+     * A box is as tall as what it holds, and its children bring their own
+     * typography — a container that reset the type scale would make the same
+     * paragraph render at two sizes depending on what it happened to be wrapped
+     * in. So here the rung is the padding, and nothing else.
+     *
+     * The *corner* is not on the ladder either, which is where this library and
+     * most others part company. A radius in Material is a statement about what
+     * kind of object something is rather than a size to taste, and a box is a
+     * sheet: `corner-medium` at every rung, exactly as MD3 draws a card.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Inner padding. Turn it off for full-bleed content — a picture, a table, a
+     * list that draws its own rows.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<li />}`, or a function for full control. Base UI's own escape
+     * hatch, so it behaves here exactly as it does on every Base UI primitive.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A sheet with content on it. The plainest surface in the library: it groups
+ * things, and that is all it does.
+ *
+ * Everything structural — a heading, a footer, dividers, a picture across the
+ * top — belongs to [MPCard](./card), which is exactly this box with those
+ * sections laid out on it.
+ *
+ * ## Why a box is never dyed, and takes no `color`
+ *
+ * Because what it holds is somebody else's content, and that content arrives
+ * with its own colours: body text, links, buttons, fields. On an accent fill
+ * every one of them would need an on-accent treatment of its own, which is the
+ * opposite of what a container is for.
+ *
+ * So the ladder runs up the **neutral** surface roles. `filled` is
+ * `surface-container-highest`, which is MD3's own filled card; `elevated` and
+ * `outlined` are the specification's other two card variants to the letter. What
+ * separates them is how much light the sheet holds and whether it carries a
+ * hairline — never which family it reads.
+ *
+ * A component that *is* the thing being coloured says so by taking `color`:
+ * that is [MPAlert](../feedback/alert) for a message, [MPChip](../display/chip)
+ * for a token, [MPButton](../inputs/button) for an action.
+ *
+ * ## Why there is no `elevation`
+ *
+ * There is no `elevation` prop anywhere in this library, and a box is where the
+ * absence is most tempting to fix. It stays absent because MD3 does not treat
+ * height as a free axis: an elevated surface is `surface-container-low` under a
+ * level-1 shadow, and the tone and the shadow are one decision. A prop that
+ * raised a `filled` box would produce a surface the specification has no name
+ * for. `variant="elevated"` is that decision, made once.
+ */
+export declare const MPBox: React.ForwardRefExoticComponent<MPBoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/box/MPBox.js

@@ -0,0 +1 @@
+import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{SHEET_PAD as a}from"../../internal/scale";import{CONTAINER_SURFACE as o}from"../../internal/surface";export const MPBox=r.forwardRef(function({variant:r="outlined",size:n="md",padded:t=!0,render:d,className:i,children:m,...s},p){return e({render:d,ref:p,props:{"data-mp-size":n,"data-mp-variant":r,className:["mp-box rounded-mp-md block","box-border",t?a[n]:"",o[r],"text-mp-on-surface",i??""].filter(Boolean).join(" "),children:m,...s}})});

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

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

package/dist/components/box/index.js

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