material-plus-ui 0.0.1 → 1.1.0

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

@@ -0,0 +1,127 @@
+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;
+    /**
+     * Publishes the trail as schema.org `BreadcrumbList` microdata, which is what
+     * a search engine reads to draw the trail under a result instead of the bare
+     * URL.
+     *
+     * Off by default, and that is not timidity: a page may only claim one
+     * breadcrumb trail, so a component that emitted this unasked would collide
+     * with the JSON-LD a site already has in its `<head>` — and two trails is
+     * worse than none. Turn it on when this component *is* the page's trail.
+     *
+     * What it adds is attributes and `<meta>`; nothing about the drawing, the
+     * layout or the accessibility tree changes.
+     *
+     * ## It does not survive a fold
+     *
+     * `BreadcrumbList` positions have to run 1, 2, 3 with nothing missing, and a
+     * folded trail does not render the steps behind its `…` — so publishing one
+     * would describe a trail that skips from 2 to 6. Turning this on therefore
+     * turns `maxItems` off. A trail worth publishing is a trail worth showing.
+     * @default false
+     */
+    structuredData?: boolean;
+    /** 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 t}from"react/jsx-runtime";import*as r from"react";import{MPIcon as o}from"../icon/MPIcon";import{ArrowRightIcon as i,ChevronRightIcon as a,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=r.createContext({size:"md",last:!1,position:null}),p={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},h={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const f=["chevron","arrow","slash","dot"];export const MPBreadcrumb=r.forwardRef(function({size:t="md",color:c="primary",separator:m="chevron",maxItems:h,itemsBeforeCollapse:x=1,itemsAfterCollapse:b=1,expandable:v=!0,label:g="Breadcrumb",expandLabel:N="Show hidden steps",structuredData:y=!1,className:k,style:B,children:j,...w},z){const[C,P]=r.useState(!1),M=r.Children.toArray(j).filter(r.isValidElement),I=M.length,S=M.some(e=>!0===e.props.current),L=!C&&!y&&void 0!==h&&I>Math.max(h,1)&&I-x-b>1?[...M.slice(0,Math.max(0,x)),null,...M.slice(I-Math.max(0,b))]:M,_="string"==typeof(A=m)&&f.includes(A)?function(n){switch(n){case"chevron":return e(o,{icon:a,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(o,{icon:i,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 A;const E=r.useMemo(()=>Array.from({length:L.length},(e,n)=>({size:t,last:!S&&n===L.length-1,position:y?n+1:null})),[t,S,L.length,y]),F=["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":t,className:["mp-breadcrumb flex",d[t],k??""].filter(Boolean).join(" "),style:{...l(c),...B},...w,children:e("ol",{role:"list",itemScope:y||void 0,itemType:y?"https://schema.org/BreadcrumbList":void 0,className:`flex list-none flex-wrap items-center p-0 ${p[t]}`,children:L.map((t,i)=>n(r.Fragment,{children:[i>0?e("li",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center select-none",children:_}):null,t?e(u.Provider,{value:E[i],children:t}):e("li",{className:"flex shrink-0 items-center",children:v?e("button",{type:"button",className:F,"aria-label":N,onClick:()=>P(!0),children:e(o,{icon:s,size:"1.1em"})}):e("span",{className:F,"aria-hidden":"true",children:e(o,{icon:s,size:"1.1em"})})})]},t?t.key??i:"fold"))})})});export const MPBreadcrumbItem=r.forwardRef(function({href:o,onClick:i,startIcon:a,endIcon:s,current:l,disabled:d=!1,className:p,children:f,...x},b){const{size:v,last:g,position:N}=r.useContext(u),y=l??g,k=Boolean(o||i)&&!y&&!d,B=null!==N,j=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",c[v],h[v],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",d?"text-mp-on-surface/38 cursor-default":y?"text-mp-on-surface font-medium":k?["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(" "),w=n(t,{children:[m(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a}):null,e("span",{className:"truncate",itemProp:B?"name":void 0,children:f}),m(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]});return n("li",{ref:b,itemProp:B?"itemListElement":void 0,itemScope:B||void 0,itemType:B?"https://schema.org/ListItem":void 0,className:["flex min-w-0 items-center",p??""].filter(Boolean).join(" "),...x,children:[B?e("meta",{itemProp:"position",content:String(N)}):null,k&&o?e("a",{href:o,itemProp:B?"item":void 0,className:j,onClick:i,children:w}):k?e("button",{type:"button",className:j,onClick:i,children:w}):e("span",{className:j,"aria-current":y?"page":void 0,"aria-disabled":d||void 0,children:w})]})});

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,75 @@
+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`. Defaults to
+     * the word for "loading" in `locale`.
+     */
+    loadingLabel?: string;
+    /**
+     * Which language the spinner's default name is written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: 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 o}from"react/jsx-runtime";import*as t 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{useMPLocale as l,useMPMessages as c}from"../../internal/locale";import{MPStateLayer as m}from"../../internal/StateLayer";import{CONTROL_GAP as p,CONTROL_HEIGHT as d,CONTROL_ICON as u,CONTROL_PAD_X as f,CONTROL_SQUARE as b,CONTROL_TEXT as x,hasContent as g}from"../../internal/scale";const v={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)"},h={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=t.forwardRef(function({variant:w,size:y,color:_,disabled:j,startIcon:k,endIcon:z,loading:B=!1,loadingLabel:C,locale:I,fullWidth:N=!1,type:P="button",className:L,style:M,children:D,onClick:R,...S},W){const $=l(I),q=c("common",$),A=t.useContext(s),E=w??A?.variant??"filled",F=y??A?.size??"md",G=_??A?.color??"primary",H=j??A?.disabled??!1,J=!g(D);return o(n,{ref:W,type:P,disabled:H,"aria-busy":B||void 0,"aria-disabled":B||void 0,"data-mp-size":F,"data-mp-variant":E,"data-loading":B||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)",d[F],x[F],p[F],J?`${b[F]} px-0`:f[F],H?h[E]:v[E],H?"cursor-default":"",B?"cursor-progress":"",N?"w-full":"",L??""].filter(Boolean).join(" "),style:{...i(G),...M},onClick:e=>{if(B)return e.preventDefault(),void e.stopPropagation();R?.(e)},...S,children:[H?null:e(m,{}),B?e(r,{icon:a,size:u[F],label:C??q.loading,className:"animate-spin"}):k,D,z]})});

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

package/dist/components/carousel/MPCarousel.d.ts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+export interface MPCarouselProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** Which slide is showing, counted from 0. Use with `onValueChange`. */
+    value?: number;
+    /**
+     * Which starts showing, for an uncontrolled carousel.
+     * @default 0
+     */
+    defaultValue?: number;
+    onValueChange?: (index: number) => void;
+    /**
+     * Whether the arrows wrap from the last slide back to the first.
+     *
+     * With it off they go `disabled` at the ends instead, which is the honest
+     * thing for a set that has a beginning and an end — a gallery of three
+     * photographs does, a rotating banner does not.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Advances on its own.
+     *
+     * Off by default and deliberately so: a carousel that moves while it is being
+     * read is the most complained-about pattern on the web. It pauses on hover, on
+     * focus anywhere inside it, while the tab is in the background, and it does not
+     * start at all for a reader who has asked for reduced motion.
+     * @default false
+     */
+    autoPlay?: boolean;
+    /**
+     * How long each slide is held, in milliseconds.
+     * @default 5000
+     */
+    interval?: number;
+    /**
+     * The previous/next buttons.
+     * @default true
+     */
+    arrows?: boolean;
+    /**
+     * The row of position marks under the frame.
+     * @default true
+     */
+    indicators?: boolean;
+    /**
+     * How much surface the frame paints behind the slides.
+     *
+     * `text` is the one to reach for when the pictures already have edges of their
+     * own — it draws no frame at all, and the slides are the whole component.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The size of the arrows and the marks, and how far the arrows sit in from the
+     * frame's edge. Not the size of a slide, which is whatever the frame is.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the current mark and the arrows read.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * The carousel's accessible name.
+     * @default 'Carousel'
+     */
+    label?: string;
+    /** @default 'Previous slide' */
+    previousLabel?: string;
+    /** @default 'Next slide' */
+    nextLabel?: string;
+    /**
+     * How one slide is named to a screen reader, and how its mark is labelled.
+     * @default (index, count) => `Slide ${index} of ${count}`
+     */
+    slideLabel?: (index: number, count: number) => string;
+    /** The slides. Every top-level child becomes one. */
+    children?: React.ReactNode;
+}
+/**
+ * A strip of slides, one of which is in view.
+ *
+ * The mechanism is a scroll container with CSS scroll snapping, and nearly
+ * everything good about this component follows from that one choice. Swiping on
+ * a phone and two-finger dragging on a trackpad both work, because they are the
+ * browser's own scrolling rather than a gesture handler pretending to be it. The
+ * strip runs the other way under RTL without being told, because scrolling is
+ * directional and `translate` is not. And nothing is transformed, so the house
+ * rule against moving a surface holds here for free — a translated track would
+ * have had to argue for an exception.
+ *
+ * The motion is `scroll-behavior: smooth`, which means a reader who has asked for
+ * reduced motion gets an instant cut out of the same code path rather than out of
+ * a second one written to remember them.
+ *
+ * ## Why every child is a slide
+ *
+ * There is no `MPCarouselSlide`. `<MPCarousel><img /><img /></MPCarousel>` is the
+ * whole API, and the wrapper this component puts around each child is what
+ * carries the snap point, the width and the `role="group"` /
+ * `aria-roledescription="slide"` pair a screen reader needs — none of which a
+ * caller should have to remember to put on a photograph.
+ *
+ * ## What this is, in MD3's terms
+ *
+ * The specification describes four carousel layouts, three of which — hero,
+ * multi-browse and uncontained — resize their items as they travel past the
+ * frame's edge. This is the fourth: one item to a view, snapping. The other three
+ * are a per-item transform driven by scroll position, which is a different
+ * component and not one this library ships yet; what is here is drawn out of the
+ * specification's own parts — a filled icon button either side, a selected
+ * indicator that is a bar rather than a bigger dot.
+ */
+export declare const MPCarousel: React.ForwardRefExoticComponent<MPCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/carousel/MPCarousel.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{MPIconButton as n}from"../icon-button/MPIconButton";import{MPIcon as o}from"../icon/MPIcon";import{ChevronLeftIcon as a,ChevronRightIcon as i}from"../../constants/icons";import{accentSlots as l}from"../../internal/accent";import{CONTROL_ICON as s}from"../../internal/scale";import{CONTAINER_SURFACE as c}from"../../internal/surface";import{VISUALLY_HIDDEN as u}from"../../internal/visually-hidden";const d={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},m={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}},f=(e,r)=>`Slide ${e} of ${r}`;export const MPCarousel=t.forwardRef(function({value:p,defaultValue:h=0,onValueChange:b,loop:v=!0,autoPlay:w=!1,interval:g=5e3,arrows:x=!0,indicators:N=!0,variant:y="outlined",size:M="md",color:k="primary",label:R="Carousel",previousLabel:j="Previous slide",nextLabel:C="Next slide",slideLabel:P=f,className:z,style:I,children:$,...L},E){const S=t.Children.toArray($),T=S.length,[A,B]=t.useState(h),F=Math.min(Math.max(p??A,0),Math.max(T-1,0)),V=t.useRef(null),W=t.useRef([]),q=t.useRef(!1),_=t.useRef(!1),D=t.useRef(!1),[G,H]=t.useState(!1),J=t.useRef(F),K=t.useRef(b);J.current=F,K.current=b;const O=t.useCallback((e,r=!1)=>{if(0===T)return;const t=v?(e%T+T)%T:Math.min(Math.max(e,0),T-1);q.current=r,void 0===p&&B(t),t!==J.current&&K.current?.(t)},[T,v,p]);t.useEffect(()=>{if(q.current)return void(q.current=!1);if(!_.current)return void(_.current=!0);W.current[F]?.scrollIntoView({block:"nearest",inline:"start"}),D.current=!0;const e=window.setTimeout(()=>{D.current=!1},700);return()=>window.clearTimeout(e)},[F]),t.useEffect(()=>{if(!w||G||T<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||O(J.current+1)},g);return()=>window.clearInterval(e)},[w,G,T,g,O]);const Q=t.useRef(0);t.useEffect(()=>()=>cancelAnimationFrame(Q.current),[]);const U=F<=0,X=F>=T-1;return r("div",{ref:E,role:"region","aria-roledescription":"carousel","aria-label":R,"data-mp-size":M,"data-mp-variant":y,className:["mp-carousel flex w-full flex-col",z??""].filter(Boolean).join(" "),style:{...l(k),...I},onPointerEnter:()=>H(!0),onPointerLeave:()=>H(!1),onFocus:()=>H(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||H(!1)},...L,children:[r("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",c[y],"text-mp-on-surface"].join(" "),children:[e("div",{ref:V,tabIndex:0,role:"group","aria-label":R,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{Q.current||(Q.current=requestAnimationFrame(()=>{Q.current=0;const e=V.current;if(!e||0===e.clientWidth||D.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==J.current&&r>=0&&r<T&&O(r,!0)}))},children:S.map((r,t)=>e("div",{ref:e=>{W.current[t]=e,W.current.length=T},role:"group","aria-roledescription":"slide","aria-label":P(t+1,T),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),x&&T>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${d[M]}`,children:[e(n,{variant:"filled",size:M,color:k,label:j,disabled:!v&&U,className:"pointer-events-auto",icon:e(o,{icon:a,size:s[M],className:"rtl:rotate-180"}),onClick:()=>O(F-1)}),e("span",{className:"flex-1"}),e(n,{variant:"filled",size:M,color:k,label:C,disabled:!v&&X,className:"pointer-events-auto",icon:e(o,{icon:i,size:s[M],className:"rtl:rotate-180"}),onClick:()=>O(F+1)})]}):null]}),N&&T>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${m[M].gap}`,children:S.map((r,t)=>e("button",{type:"button","aria-label":P(t+1,T),"aria-current":t===F?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",t===F?`${m[M].current} bg-(--_mp-accent)`:`${m[M].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>O(t)},t))}):null,e("span",{className:u,"aria-live":w?"off":"polite",children:T>0?P(F+1,T):""})]})});

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

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

package/dist/components/carousel/index.js

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

package/dist/components/chat-bubble/MPChatBubble.d.ts

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+/**
+ * Whose message this is.
+ *
+ * `start` and `end` rather than `them`/`me` or `left`/`right`: a thread runs the
+ * way the language does, and the same two words already mean this everywhere
+ * else in the library. `start` is the default because a message from somebody
+ * else is the one you have no other way of knowing about.
+ */
+export type MPChatBubbleSide = 'start' | 'end';
+/**
+ * How far a message has got.
+ *
+ * The first four are a ladder and the fifth is not on it: `failed` is the
+ * message that did not go, which is why it is the only one drawn in another
+ * colour family.
+ */
+export type MPChatBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+/** What a link inside a message unfurls to. */
+export interface MPChatBubblePreview {
+    /** Where the card goes. */
+    url: string;
+    /** The page's title. */
+    title?: React.ReactNode;
+    /** Its summary, clamped to two lines. */
+    description?: React.ReactNode;
+    /** The share image, drawn across the top of the card. */
+    image?: string;
+    /** Who published it — a domain, a site name. */
+    site?: React.ReactNode;
+    /**
+     * Opens the card in a new tab.
+     * @default false
+     */
+    newTab?: boolean;
+}
+export interface MPChatBubbleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * Whose message this is.
+     * @default 'start'
+     */
+    side?: MPChatBubbleSide;
+    /** Who sent it, above the bubble. */
+    name?: React.ReactNode;
+    /** When it was sent, beside the name. */
+    time?: React.ReactNode;
+    /**
+     * The sender's picture — an [MPAvatar](../display/avatar), at the size the
+     * thread uses. Left out, the bubble takes the whole row.
+     */
+    avatar?: React.ReactNode;
+    /**
+     * How far the message has got, drawn as a mark under the bubble. Left out,
+     * nothing is drawn — a received message has no delivery state worth showing.
+     */
+    status?: MPChatBubbleStatus;
+    /** Overrides the word the mark is read out as. */
+    statusLabel?: string;
+    /**
+     * Draws the three dots instead of the message. Whatever is in `children` is
+     * left alone, so the same bubble can go back to it when the message arrives.
+     * @default false
+     */
+    typing?: boolean;
+    /**
+     * A picture, a video, a map — drawn edge to edge above the text, so the
+     * bubble's own corners crop it.
+     */
+    media?: React.ReactNode;
+    /** A link in the message, unfurled into a card under the text. */
+    preview?: MPChatBubblePreview;
+    /**
+     * The message's own actions — an [MPMenu](../inputs/menu) trigger, most of the
+     * time. Sits beside the bubble and stays out of the way until the row is
+     * hovered or something in it takes focus.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Which language the marks are read out in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /**
+     * How much surface the bubble paints.
+     *
+     * A bubble *is* the thing being coloured, unlike a card — so this is the
+     * control ladder rather than the container one, and `filled` floods it with
+     * the accent. That is what tells your own messages from everyone else's at a
+     * glance rather than one line at a time.
+     *
+     * `side` deliberately does not decide it: which end of the thread is filled is
+     * a decision about the product, not about the component, and a thread that
+     * fills neither is a perfectly good thread.
+     * @default 'tonal'
+     */
+    variant?: MPVariant;
+    /**
+     * The type scale of the message, and the room inside the bubble.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** The message. */
+    children?: React.ReactNode;
+}
+/**
+ * One message in a conversation.
+ *
+ * MD3 does not describe a chat bubble — this is the library's own shape, in the
+ * sense [MPProgressBox](../feedback/progress-box) is — but every part of it is
+ * drawn out of the specification's own roles, so a thread of these sits in a
+ * Material page without announcing that it is extra.
+ *
+ * Everything around the bubble is optional and nothing about it is fixed by
+ * `side`: the avatar, the sender's name, the time, the delivery mark, the media
+ * above the text and the link card below it are each drawn only when they are
+ * given something. What `side` decides is which way the row runs and which
+ * corner of the bubble is cut short.
+ *
+ * ## Why `variant` is not tied to `side`
+ *
+ * Filling the reading-end column is a convention, not a law. It is also a
+ * decision about the product — some threads fill neither end, and a support
+ * inbox may want the *agent's* messages filled rather than the reader's. So
+ * `side` decides the geometry and `variant` decides the emphasis, and a caller
+ * who wants the usual arrangement writes it once.
+ */
+export declare const MPChatBubble: React.ForwardRefExoticComponent<MPChatBubbleProps & React.RefAttributes<HTMLDivElement>>;