material-plus-ui 0.0.1 → 1.0.0

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

package/dist/components/breadcrumb/MPBreadcrumb.d.ts

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import type { MPColor, MPSize } from '../../types';
+/**
+ * What is drawn between two steps of the trail.
+ *
+ * Four named marks rather than a free-for-all, because a separator is read
+ * hundreds of times a day and the difference between them is meaning, not
+ * decoration: a `chevron` and an `arrow` say "and then", a `slash` says "path",
+ * a `dot` says "these are peers of one thing". Anything else can still be passed
+ * as a node.
+ */
+export type MPBreadcrumbSeparator = 'chevron' | 'arrow' | 'slash' | 'dot';
+export interface MPBreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'color'> {
+    /** @default 'md' */
+    size?: MPSize;
+    /**
+     * The accent family a step picks up when it is hovered.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * The mark between two steps. One of the four names, or any node.
+     * @default 'chevron'
+     */
+    separator?: MPBreadcrumbSeparator | React.ReactNode;
+    /**
+     * How many steps to show before the middle is folded away behind a `…`. Left
+     * out, the whole trail is shown however long it gets.
+     */
+    maxItems?: number;
+    /**
+     * How many steps stay at the front of a folded trail.
+     * @default 1
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * How many stay at the end.
+     * @default 1
+     */
+    itemsAfterCollapse?: number;
+    /**
+     * Whether pressing the `…` unfolds the trail in place. Turn it off to leave
+     * the fold as a plain mark.
+     * @default true
+     */
+    expandable?: boolean;
+    /**
+     * The name the trail is announced by.
+     * @default 'Breadcrumb'
+     */
+    label?: string;
+    /**
+     * What the `…` is announced as.
+     * @default 'Show hidden steps'
+     */
+    expandLabel?: string;
+    /** The `MPBreadcrumbItem`s. */
+    children?: React.ReactNode;
+}
+export interface MPBreadcrumbItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
+    /** Renders the step as a link. */
+    href?: string;
+    /** Fires when the step is pressed. Renders it as a button when there is no `href`. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Content before the label — a home glyph, a repository avatar. */
+    startIcon?: React.ReactNode;
+    /** Content after the label. */
+    endIcon?: React.ReactNode;
+    /**
+     * Marks this step as the page you are on, which stops it being a link.
+     *
+     * The last step is the current one on its own, so this is only needed for a
+     * trail that ends somewhere the reader is not — and setting it anywhere takes
+     * the mark off the last step, because only one step in a trail can be it.
+     */
+    current?: boolean;
+    /** Unavailable. Stops answering, keeps its place in the trail. */
+    disabled?: boolean;
+    /** The step's label. */
+    children?: React.ReactNode;
+}
+/**
+ * The trail of pages above the one being read.
+ *
+ * Two things make this more than a row of links. The first is that the last step
+ * is where the reader already is, so it is not a link at all — it carries
+ * `aria-current="page"` and stops being pressable, and the component works that
+ * out rather than asking every caller to remember it. The second is the fold: a
+ * trail seven levels deep is a trail nobody reads, so the middle collapses to a
+ * `…` that puts it back when pressed.
+ *
+ * The separators are drawn by the trail rather than by the steps. A step does not
+ * know whether anything follows it, and a mark that belonged to a step would have
+ * to be taken off the last one by hand.
+ */
+export declare const MPBreadcrumb: React.ForwardRefExoticComponent<MPBreadcrumbProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One step of the trail.
+ *
+ * It renders three different things and the caller picks by what they pass: an
+ * `<a>` with an `href`, a `<button>` with an `onClick`, and a plain `<span>` with
+ * neither — which is what the last step is, because the page you are already on
+ * is not somewhere to go.
+ */
+export declare const MPBreadcrumbItem: React.ForwardRefExoticComponent<MPBreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/breadcrumb/MPBreadcrumb.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{MPIcon as a}from"../icon/MPIcon";import{ArrowRightIcon as o,ChevronRightIcon as i,MoreIcon as s}from"../../constants/icons";import{accentSlots as l}from"../../internal/accent";import{CONTROL_GAP as c,hasContent as m,PROSE_TEXT as d}from"../../internal/scale";const u=t.createContext({size:"md",last:!1}),p={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},f={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const h=["chevron","arrow","slash","dot"];export const MPBreadcrumb=t.forwardRef(function({size:r="md",color:c="primary",separator:m="chevron",maxItems:f,itemsBeforeCollapse:x=1,itemsAfterCollapse:b=1,expandable:v=!0,label:g="Breadcrumb",expandLabel:N="Show hidden steps",className:y,style:k,children:j,...w},z){const[B,C]=t.useState(!1),M=t.Children.toArray(j).filter(t.isValidElement),I=M.length,P=M.some(e=>!0===e.props.current),_=!B&&void 0!==f&&I>Math.max(f,1)&&I-x-b>1?[...M.slice(0,Math.max(0,x)),null,...M.slice(I-Math.max(0,b))]:M,A="string"==typeof(F=m)&&h.includes(F)?function(n){switch(n){case"chevron":return e(a,{icon:i,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(a,{icon:o,size:"1em",className:"rtl:rotate-180"});case"slash":return e("span",{"aria-hidden":"true",children:"/"});case"dot":return e("span",{"aria-hidden":"true",children:"·"});default:return null}}(m):m;var F;const R=["rounded-mp-xs text-mp-on-surface-variant inline-flex items-center px-0.5","appearance-none border-0 bg-transparent font-[inherit]","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",v?["cursor-pointer hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" ");return e("nav",{ref:z,"aria-label":g,"data-mp-size":r,className:["mp-breadcrumb flex",d[r],y??""].filter(Boolean).join(" "),style:{...l(c),...k},...w,children:e("ol",{role:"list",className:`flex list-none flex-wrap items-center p-0 ${p[r]}`,children:_.map((o,i)=>n(t.Fragment,{children:[i>0?e("li",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center select-none",children:A}):null,o?e(u.Provider,{value:{size:r,last:!P&&i===_.length-1},children:o}):e("li",{className:"flex shrink-0 items-center",children:v?e("button",{type:"button",className:R,"aria-label":N,onClick:()=>C(!0),children:e(a,{icon:s,size:"1.1em"})}):e("span",{className:R,"aria-hidden":"true",children:e(a,{icon:s,size:"1.1em"})})})]},o?o.key??i:"fold"))})})});export const MPBreadcrumbItem=t.forwardRef(function({href:a,onClick:o,startIcon:i,endIcon:s,current:l,disabled:d=!1,className:p,children:h,...x},b){const{size:v,last:g}=t.useContext(u),N=l??g,y=Boolean(a||o)&&!N&&!d,k=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",c[v],f[v],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",d?"text-mp-on-surface/38 cursor-default":N?"text-mp-on-surface font-medium":y?["text-mp-on-surface-variant cursor-pointer","hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):"text-mp-on-surface-variant"].filter(Boolean).join(" "),j=n(r,{children:[m(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,e("span",{className:"truncate",children:h}),m(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]});return e("li",{ref:b,className:["flex min-w-0 items-center",p??""].filter(Boolean).join(" "),...x,children:y&&a?e("a",{href:a,className:k,onClick:o,children:j}):y?e("button",{type:"button",className:k,onClick:o,children:j}):e("span",{className:k,"aria-current":N?"page":void 0,"aria-disabled":d||void 0,children:j})})});

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

@@ -0,0 +1,2 @@
+export { MPBreadcrumb, MPBreadcrumbItem } from './MPBreadcrumb';
+export type { MPBreadcrumbItemProps, MPBreadcrumbProps, MPBreadcrumbSeparator } from './MPBreadcrumb';

package/dist/components/breadcrumb/index.js

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

package/dist/components/button/MPButton.d.ts

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import type { MPColor, MPStyleProps, MPVariant } from '../../types';
+export interface MPButtonProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
+    /**
+     * How much surface the button paints.
+     * @default 'filled'
+     */
+    variant?: MPVariant;
+    /**
+     * Which accent family it reads. Not an arbitrary colour: to change what
+     * `primary` *is*, set the token.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Content placed before the label. */
+    startIcon?: React.ReactNode;
+    /** Content placed after the label. */
+    endIcon?: React.ReactNode;
+    /**
+     * Swaps `startIcon` for a spinner and stops the button firing, while leaving it
+     * focusable and otherwise unchanged.
+     *
+     * Deliberately not `disabled`. A button that vanishes from the tab order the
+     * moment it is pressed takes the keyboard focus with it, and the reader is
+     * returned to the top of the document while the request they just made is
+     * still in flight.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The accessible name of the spinner, announced while `loading`.
+     * @default 'Loading'
+     */
+    loadingLabel?: string;
+    /**
+     * `button`, not `submit`. A native button defaults to submitting the form
+     * around it, which turns every unrelated button inside a form into one that
+     * submits it.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    children?: React.ReactNode;
+}
+/**
+ * A Material Design button.
+ *
+ * Five variants, four accent families and the library's size ladder, drawn from
+ * MD3's own component tokens: the container and label colours per variant, the
+ * state layer, the spec's disabled opacities, and the shape — `corner-full`,
+ * because a Material button has been a pill since 2021 and a rounded rectangle
+ * is the single fastest way to make a screen look like it is from 2018.
+ *
+ * Base UI's `Button` is underneath, which is what makes `disabled` behave: it
+ * keeps a disabled button out of the tab order without the composition problems
+ * a plain `aria-disabled` brings, and publishes `data-pressed` so a press driven
+ * from the keyboard lights the same state layer a pointer press does.
+ *
+ * ## Two things this does not have
+ *
+ * **No `href`.** A button that navigates is a link, and the difference is not
+ * cosmetic: a link is announced as one, opens in a new tab on the middle button,
+ * and shows its destination in the status bar. Wrap an `<a>` in the styling, or
+ * pass `render={<a href="…" />}` — Base UI's own escape hatch — rather than
+ * teaching the button to lie about what it is.
+ *
+ * **No ripple.** MD3 dropped it: the state layer below is what replaced it, and
+ * it says the same thing without an animation that has to finish before the
+ * screen it triggered is allowed to change.
+ */
+export declare const MPButton: React.ForwardRefExoticComponent<MPButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/MPButton.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Button as n}from"@base-ui/react/button";import{MPIcon as r}from"../icon/MPIcon";import{SpinnerIcon as a}from"../../constants/icons";import{accentSlots as i}from"../../internal/accent";import{MPButtonGroupContext as s}from"../../internal/button-group";import{MPStateLayer as l}from"../../internal/StateLayer";import{CONTROL_GAP as c,CONTROL_HEIGHT as p,CONTROL_ICON as d,CONTROL_PAD_X as m,CONTROL_SQUARE as u,CONTROL_TEXT as f,hasContent as b}from"../../internal/scale";const x={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 hover:shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},g={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 border bg-transparent text-mp-on-surface/38",text:"bg-transparent text-mp-on-surface/38"};export const MPButton=o.forwardRef(function({variant:v,size:h,color:w,disabled:y,startIcon:_,endIcon:j,loading:k=!1,loadingLabel:z="Loading",fullWidth:B=!1,type:C="button",className:I,style:L,children:N,onClick:P,...M},D){const R=o.useContext(s),S=v??R?.variant??"filled",W=h??R?.size??"md",$=w??R?.color??"primary",q=y??R?.disabled??!1,A=!b(N);return t(n,{ref:D,type:C,disabled:q,"aria-busy":k||void 0,"aria-disabled":k||void 0,"data-mp-size":W,"data-mp-variant":S,"data-loading":k||void 0,className:["mp-button group relative inline-flex shrink-0 items-center justify-center","rounded-mp-full 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,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",p[W],f[W],c[W],A?`${u[W]} px-0`:m[W],q?g[S]:x[S],q?"cursor-default":"",k?"cursor-progress":"",B?"w-full":"",I??""].filter(Boolean).join(" "),style:{...i($),...L},onClick:e=>{if(k)return e.preventDefault(),void e.stopPropagation();P?.(e)},...M,children:[q?null:e(l,{}),k?e(r,{icon:a,size:d[W],label:z,className:"animate-spin"}):_,N,j]})});

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

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

package/dist/components/button/index.js

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

package/dist/components/button-group/MPButtonGroup.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPStyleProps, MPVariant } from '../../types';
+export interface MPButtonGroupProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the buttons run.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /** Passed to every button in the group. */
+    variant?: MPVariant;
+    /** Passed to every button in the group. */
+    color?: MPColor;
+    /** Disables every button in the group at once. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A run of buttons that belong together.
+ *
+ * Two things happen here and only one of them is visual. The corners that face a
+ * neighbour are cut back — that is the look. The other half is that `variant`,
+ * `size`, `color` and `disabled` are set once for the set rather than repeated on
+ * every button, which is the failure this exists to prevent: a group where one
+ * button is a size out is not a group.
+ *
+ * The buttons stay real `MPButton`s, and the group does not manage selection.
+ * For one-of-a-set, reach for `MPSegmentedButton` — a row of buttons that
+ * remembers which one was pressed is a radio group wearing a costume, and it
+ * announces itself to a screen reader as four unrelated actions.
+ */
+export declare const MPButtonGroup: React.ForwardRefExoticComponent<MPButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/button-group/MPButtonGroup.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import*as r from"react";import{MPButtonGroupContext as e}from"../../internal/button-group";const t={horizontal:"[&>*:not(:first-child)]:rounded-s-mp-sm [&>*:not(:last-child)]:rounded-e-mp-sm",vertical:"[&>*:not(:first-child)]:rounded-t-mp-sm [&>*:not(:last-child)]:rounded-b-mp-sm"};export const MPButtonGroup=r.forwardRef(function({variant:i,size:l,color:n,disabled:a,orientation:s="horizontal",fullWidth:d=!1,className:c,children:m,...u},f){const p=r.useMemo(()=>({variant:i,size:l,color:n,disabled:a}),[i,l,n,a]);return o(e.Provider,{value:p,children:o("div",{ref:f,role:"group","data-mp-orientation":s,className:["mp-button-group inline-flex gap-0.5 align-middle","vertical"===s?"flex-col":"flex-row",t[s],"[&>*]:relative [&>*:focus-visible]:z-10",d?"flex w-full [&>*]:flex-1":"",c??""].filter(Boolean).join(" "),...u,children:m})})});

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

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

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

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

package/dist/components/card/MPCard.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { type MPBoxProps } from '../box/MPBox';
+export interface MPCardProps extends Omit<MPBoxProps, 'title' | 'padded'> {
+    /**
+     * The card's heading.
+     *
+     * A plain string is set in the card's own title role. Pass a real heading
+     * element — `title={<h3>Totals</h3>}` — when the card should appear in the
+     * document outline: it inherits the typography rather than the browser's, so
+     * nothing about it looks different.
+     */
+    title?: React.ReactNode;
+    /** A second line under it, one step down the type scale and muted. */
+    subtitle?: React.ReactNode;
+    /**
+     * Content pinned to the end of the header row — a menu button, a status chip.
+     * It stays on the title's line while the title wraps beside it.
+     */
+    headerAction?: React.ReactNode;
+    /**
+     * A picture, a chart, a map: drawn **edge to edge** across the top, so the
+     * card's own corners crop it.
+     *
+     * MD3's own card anatomy puts the media above the headline, and it is a slot
+     * of its own rather than part of `children` because it is the one part of a
+     * card that must not be padded.
+     */
+    media?: React.ReactNode;
+    /**
+     * The bottom area. Laid out as a wrapping row, so a pair of buttons needs no
+     * wrapper of its own; anything else brings its own layout.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Draws a hairline between the sections instead of separating them with space.
+     *
+     * The rules run the full width of the sheet, so the padding moves off the card
+     * and onto each section.
+     * @default false
+     */
+    dividers?: boolean;
+    /** The card's body. */
+    children?: React.ReactNode;
+}
+/**
+ * An [MPBox](./box) with the parts a card is made of laid out on it: a picture,
+ * a heading, a subheading, a body and a footer.
+ *
+ * The sections are props rather than compound sub-components — no `<MPCard.Header>`
+ * — for the reason [MPDialog](../feedback/dialog) gives: the arrangement of a
+ * card is fixed, and what a caller wants to decide is what goes in each slot,
+ * not what order the slots come in. Every `MPBox` prop passes straight through,
+ * so a card is styled on exactly the same axes as the box it is.
+ *
+ * ## The surface is MD3's card, and so is the anatomy
+ *
+ * `corner-medium`, and three of the five variants are the specification's own
+ * card variants to the letter: `filled` is `surface-container-highest`,
+ * `elevated` is `surface-container-low` under a level-1 shadow, `outlined` is a
+ * hairline in `outline-variant`. None of them is dyed, and there is no `color`
+ * — see `MPBox` for the argument, which is the same one.
+ *
+ * ## What a card deliberately is not
+ *
+ * It is not pressable. MD3 does describe a card as a container that *may* be
+ * interactive, and a `href` or an `onClick` here would be the wrong shape for
+ * it: a card with a heading, a body and two buttons in its footer that is also
+ * one big link is a link containing links, which the HTML parser will take
+ * apart. Make the **heading** the link, or give the footer a button. What a
+ * whole-card target is for is a grid of tiles, and a tile is an
+ * [MPBox](./box) with an `<a>` in it.
+ */
+export declare const MPCard: React.ForwardRefExoticComponent<MPCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/MPCard.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as l,Fragment as a}from"react/jsx-runtime";import*as r from"react";import{MPBox as n}from"../box/MPBox";import{hasContent as i,META_TEXT as o,PROSE_TEXT as t,SHEET_GAP as c,SHEET_PAD_X as s,SHEET_PAD_Y as d,SHEET_TITLE as m}from"../../internal/scale";export const MPCard=r.forwardRef(function({size:r="md",title:f,subtitle:u,headerAction:p,media:x,footer:h,dividers:_=!1,className:v,children:N,...w},b){const k=s[r],$=d[r],g=_?`${k} ${$}`:k,j=i(f)||i(u)||i(p),y=i(x),B=[j?{key:"header",className:"mp-card__header flex items-start gap-3",content:l(a,{children:[i(f)||i(u)?l("div",{className:"flex min-w-0 flex-1 flex-col",children:[i(f)?e("div",{className:`mp-card__title ${m[r]}`,children:f}):null,i(u)?e("div",{className:`text-mp-on-surface-variant ${o}`,children:u}):null]}):null,i(p)?e("div",{className:"ms-auto shrink-0",children:p}):null]})}:null,i(N)?{key:"content",className:`mp-card__body min-w-0 ${t[r]}`,content:N}:null,i(h)?{key:"footer",className:"mp-card__footer flex flex-wrap items-center gap-2",content:h}:null].filter(e=>null!==e);return l(n,{ref:b,size:r,padded:!1,className:["mp-card flex flex-col",y?"overflow-hidden":"",v??""].filter(Boolean).join(" "),...w,children:[y?e("div",{className:"mp-card__media [&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:x}):null,B.length>0?e("div",{className:["flex min-w-0 flex-col",_?"":`${$} ${c[r]}`].filter(Boolean).join(" "),children:B.map((l,a)=>e("div",{className:[g,l.className,_&&a>0?"border-mp-outline-variant border-t":""].filter(Boolean).join(" "),children:l.content},l.key))}):null]})});

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

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

package/dist/components/card/index.js

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