material-plus-ui 0.0.1 → 1.1.0

package/dist/components/overlay/MPOverlay.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import type { MPAlign, MPSize } from '../../types';
+/**
+ * How much of the page the overlay takes away.
+ *
+ * One axis, four steps — how legible is what is behind — and they are tuned with
+ * the blur radius as much as with the alpha, because past about 16px a backdrop
+ * smears into flat colour and the sheet reads opaque however low its alpha goes.
+ *
+ * - `scrim` — MD3's own scrim, and exactly what `MPDialog` puts behind itself.
+ *   The page is still there and still readable; it has only stopped being
+ *   reachable.
+ * - `blur` — frosted. A lighter dim over a real blur, so the page is present as
+ *   shape and colour but not as words. For "this is being replaced".
+ * - `solid` — the page's own `surface`, opaque. For a screen that is genuinely
+ *   gone.
+ * - `clear` — nothing drawn at all. Still blocks the pointer, which is the whole
+ *   reason to reach for it: an invisible sheet that catches a click.
+ */
+export type MPOverlayTone = 'scrim' | 'blur' | 'solid' | 'clear';
+/**
+ * An overlay takes `size`, `align` and `tone` and stops there.
+ *
+ * There is no `variant` — the five weights answer "how much of a surface does
+ * this paint", and an overlay has taken the page. There is no `color` either: an
+ * accent is what a control uses to say which of several things it is, and there
+ * is only ever one overlay.
+ */
+export interface MPOverlayProps {
+    /** The overlay is shown. Use with `onOpenChange` for a controlled overlay. */
+    open?: boolean;
+    /** Whether the overlay starts shown, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * How much of the page is taken away.
+     * @default 'scrim'
+     */
+    tone?: MPOverlayTone;
+    /**
+     * Whether clicking the overlay or pressing Escape closes it.
+     *
+     * Off by default, which is the other way round from `MPDialog`. A dialog asks a
+     * question and Escape is the universal "no"; an overlay is not asking anything
+     * — it is saying *wait* — and a save that can be dismissed by a stray click is
+     * a save the reader will believe finished. Turn it on for the overlay whose job
+     * is to catch a click outside something.
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Whether the page behind is taken away for the keyboard too. `'trap-focus'`
+     * leaves the page scrollable and clickable while still holding focus inside,
+     * which is usually what a `clear` overlay wants.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Where the content sits down the viewport.
+     * @default 'center'
+     */
+    align?: MPAlign;
+    /**
+     * The room between the content and the edge of the viewport. The one thing
+     * `size` decides here — an overlay has no surface of its own to scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * The accessible name of the overlay.
+     *
+     * It has a default rather than being optional, which almost nothing else in
+     * this library does: an overlay that holds nothing readable — a bare spinner, a
+     * `clear` sheet — still has to say what it is, and the alternative is a modal
+     * region a screen reader announces as nothing at all.
+     * @default 'Overlay'
+     */
+    label?: string;
+    /** What sits on top — a spinner, a line of text, a small card. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A sheet over the whole page that stops it being used.
+ *
+ * What separates this from `MPDialog` is what is *not* here: no surface, no
+ * outline, no title, no actions. An overlay is the scrim on its own, with
+ * whatever the caller puts on top of it — most often an `MPProgressCircular` and
+ * a line saying what is being waited for.
+ *
+ * `dismissible` is the one prop worth reading twice, and it is off. Everything
+ * else Base UI owns: the portal, the scroll lock, the focus held inside, the page
+ * behind going inert, and focus returning to wherever it came from on close.
+ */
+export declare function MPOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, label, className, style, children }: MPOverlayProps): React.JSX.Element;

package/dist/components/overlay/MPOverlay.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{FADE as l,PORTAL_LAYER as s,SCRIM as t}from"../../internal/surface";import{SHEET_PAD as i}from"../../internal/scale";const n={scrim:t,blur:"bg-mp-scrim/20 [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-mp-surface",clear:""},o={start:"items-start",center:"items-center",end:"items-end"};export function MPOverlay({open:t,defaultOpen:c,onOpenChange:m,tone:p="scrim",dismissible:d=!1,modal:f=!0,align:u="center",size:x="md",label:b="Overlay",className:h,style:y,children:j}){return e(r.Root,{open:t,defaultOpen:c,modal:f,disablePointerDismissal:!d,onOpenChange:(e,a)=>{d||e||"escape-key"!==a.reason?m?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`${s} fixed inset-0 ${l} ${n[p]}`}),e(r.Viewport,{className:[s,"fixed inset-0 flex justify-center",o[u],i[x]].join(" "),children:e(r.Popup,{"aria-label":b,"data-mp-size":x,className:["mp-overlay flex max-h-full max-w-full flex-col items-center justify-center","text-mp-on-surface outline-none",l,h??""].filter(Boolean).join(" "),style:y,children:j})})]})})}

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

@@ -0,0 +1,2 @@
+export { MPOverlay } from './MPOverlay';
+export type { MPOverlayProps, MPOverlayTone } from './MPOverlay';

package/dist/components/overlay/index.js

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

package/dist/components/pagination/MPPagination.d.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { type MPMessages } from '../../internal/i18n';
+import type { MPColor, MPStyleProps } from '../../types';
+/** The words the row says on its own behalf. */
+export type MPPaginationLabels = MPMessages['pagination'];
+export interface MPPaginationProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'onChange'> {
+    /**
+     * How many pages there are. Fewer than two and the whole control renders
+     * nothing — one page is not a set of pages, and a row holding a lone disabled
+     * "1" is a control advertising that it has nothing to do.
+     */
+    count: number;
+    /** The current page, 1-based. Use with `onPageChange` for a controlled row. */
+    page?: number;
+    /**
+     * Which page starts current, for an uncontrolled row.
+     * @default 1
+     */
+    defaultPage?: number;
+    /** Called with the page that was chosen. */
+    onPageChange?: (page: number) => void;
+    /**
+     * How many pages are always shown on either side of the current one.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * How many pages are always shown at each end, whatever page is current. `0`
+     * drops the first and last page from the row, leaving only the window.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * Shows the two steppers that jump to the first and last page.
+     * @default false
+     */
+    showEdges?: boolean;
+    /**
+     * Shows the two steppers that move by one page.
+     * @default true
+     */
+    showArrows?: boolean;
+    /**
+     * Which accent family the current page is filled with.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Unavailable. Every cell in the row stops answering. */
+    disabled?: boolean;
+    /**
+     * The address of a page, which turns every number in the row into a real link.
+     *
+     * Without it the row is buttons, and a crawler cannot press one — so a paged
+     * list of articles, products or search results exists for a reader and stops
+     * at page one for everything else. With it the numbers are `<a href>`, the two
+     * steppers carry `rel="prev"` and `rel="next"`, and the browser's own
+     * behaviour comes back: open in a new tab, copy the address, see where a press
+     * is going before making it.
+     *
+     * `onPageChange` still fires and the navigation is still cancelled first, so a
+     * client-side router keeps the page it already has.
+     */
+    getPageHref?: (page: number) => string;
+    /**
+     * Which language the row names itself in — a BCP 47 tag such as `ko`, `pt-BR`
+     * or `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * Nothing here is ever drawn, so without it a Korean page reads its pages out
+     * in English.
+     */
+    locale?: string;
+    /** Overrides for the words themselves. They win over the translation. */
+    labels?: Partial<MPPaginationLabels>;
+}
+/**
+ * A row of pages, one of which is the one being read.
+ *
+ * Material has no pagination component, so what is Material here is everything
+ * *around* the decision: the cells are pills at the library's own control
+ * heights, the current one is filled with the accent under its own ink, the rest
+ * are the quiet `text` treatment, and every one of them carries the state layer
+ * the specification uses in place of a hover colour.
+ *
+ * The current page is the one thing the row has to say without being read, which
+ * is why it is the only cell that is filled. Nine filled cells in a row would say
+ * that all nine are the primary action.
+ *
+ * ## The markup, and why it is that
+ *
+ * A `<nav>` around a `<ul>`: a named landmark a screen reader can skip, holding
+ * a list whose length says how far the pages go, with `aria-current="page"`
+ * marking where the reader is. The ellipsis is a `<span>` rather than a disabled
+ * button — it is not a control that happens to be unavailable, it is
+ * punctuation — and it is `aria-hidden`, because "horizontal ellipsis" read out
+ * between two numbers is noise.
+ *
+ * ## Why it builds its own cells
+ *
+ * For the reason [MPSegmentedButton](../inputs/segmented-button) does: a page
+ * cell is square-ish and grows only for a long number, which is not a shape
+ * [MPButton](../inputs/button) has — a button is a pill with inline padding
+ * proportional to its height, and nine of those in a row is a very long row. The
+ * heights, the type scale and the state layer are the shared ones, so a `sm`
+ * pagination still lines up with a `sm` button beside it.
+ */
+export declare const MPPagination: React.ForwardRefExoticComponent<MPPaginationProps & React.RefAttributes<HTMLElement>>;

package/dist/components/pagination/MPPagination.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{MPIcon as a}from"../icon/MPIcon";import{ChevronLeftIcon as i,ChevronRightIcon as r,ChevronsLeftIcon as l,ChevronsRightIcon as o}from"../../constants/icons";import{accentSlots as s}from"../../internal/accent";import{fillMessage as m}from"../../internal/i18n";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale";import{MPStateLayer as u}from"../../internal/StateLayer";import{CONTROL_ICON as f,CONTROL_TEXT as d}from"../../internal/scale";import{VISUALLY_HIDDEN as h}from"../../internal/visually-hidden";const g={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},x={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function b(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=t.forwardRef(function({count:y,page:v,defaultPage:M=1,onPageChange:w,siblingCount:N=1,boundaryCount:j=1,showEdges:P=!1,showArrows:C=!0,size:S="md",color:K="primary",fullWidth:_=!1,disabled:k=!1,getPageHref:z,locale:$,labels:A,className:B,style:D,...E},H){const I=c($),L=p("pagination",I,A),[R,W]=t.useState(M),q=void 0!==v,F=Math.min(Math.max(v??R,1),Math.max(y,1));if(y<2)return null;const G=function(e,n,t,a){const i=b(1,Math.min(a,e)),r=b(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),o=Math.min(Math.max(n+t,a+2*t+2),r.length>0?r[0]-2:e-1);return[...i,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...b(l,o),...o<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...r]}(y,F,N,j),J=F<=1,O=F>=y,Q=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||z&&!w||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),y);n!==F&&(q||W(n),w?.(n))})(n))},T=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",g[S],d[S],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),U=(t,a,i,r,l,o,s)=>e("li",{className:"flex",children:!z||i||r?n("button",{type:"button",disabled:i,"aria-label":l,"aria-current":r?"page":void 0,className:T(r,i),onClick:e=>Q(e,a),children:[i?null:e(u,{}),e("span",{className:"relative",children:o})]}):n("a",{href:z(a),rel:s,"aria-label":l,className:T(!1,!1),onClick:e=>Q(e,a),children:[e(u,{}),e("span",{className:"relative",children:o})]})},t),V=n=>e(a,{icon:n,size:f[S],className:"rtl:rotate-180"});return n("nav",{ref:H,"aria-label":L.label,"data-mp-size":S,className:["mp-pagination flex",_?"w-full justify-center":"",B??""].filter(Boolean).join(" "),style:{...s(K),...D},...E,children:[n("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${x[S]}`,children:[P?U("first",1,k||J,!1,L.first,V(l)):null,C?U("previous",F-1,k||J,!1,L.previous,V(i),"prev"):null,G.map((n,t)=>"number"==typeof n?U(`slot-${t}`,n,k,n===F,m(L.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",g[S],d[S]].join(" "),children:"…"},`slot-${t}`)),C?U("next",F+1,k||O,!1,L.next,V(r),"next"):null,P?U("last",y,k||O,!1,L.last,V(o)):null]}),e("span",{className:h,"aria-live":"polite",children:m(L.status,{page:String(F),total:String(y)})})]})});

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

@@ -0,0 +1,2 @@
+export { MPPagination } from './MPPagination';
+export type { MPPaginationLabels, MPPaginationProps } from './MPPagination';

package/dist/components/pagination/index.js

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

package/dist/components/panes/MPPanes.d.ts

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPSize } from '../../types';
+/**
+ * A pane's share of the split, as a percentage of the container or as a CSS
+ * length.
+ *
+ * A bare number is a percentage — that is what a split is usually described in,
+ * and a percentage keeps its meaning when the window changes size. A string is
+ * an absolute length (`'240px'`, `'15rem'`, `'20%'`), which is what a sidebar
+ * with a minimum actually needs: "at least 200 pixels" does not survive being
+ * written down as a percentage of a width nobody knows yet.
+ */
+export type MPPaneSize = number | string;
+export interface MPPanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the panes run. `horizontal` puts them side by side with upright
+     * handles between them; `vertical` stacks them.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /**
+     * Whether the handles between the panes can be dragged. Turn it off for a
+     * split that is a layout rather than a control.
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * Which accent family the handles light up in.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * How thick a handle is, and how far it reaches.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** Fires with every pane's share, in percent, while a handle is dragged. */
+    onResize?: (sizes: number[]) => void;
+    /** Fires once, with the same shape, when the handle is let go. */
+    onResizeEnd?: (sizes: number[]) => void;
+    /** The panes. Anything that is not an `MPPane` is laid out but has no size. */
+    children?: React.ReactNode;
+}
+export interface MPPaneProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The share this pane starts with. Panes with no `defaultSize` split whatever
+     * is left over equally.
+     */
+    defaultSize?: MPPaneSize;
+    /**
+     * How small it may be dragged.
+     * @default 0
+     */
+    minSize?: MPPaneSize;
+    /** How large it may be dragged. Unbounded when left out. */
+    maxSize?: MPPaneSize;
+    /** What is inside the pane. */
+    children?: React.ReactNode;
+}
+/**
+ * A set of panes with draggable handles between them.
+ *
+ * The panes are sized in **fractions**, written out as
+ * `flex-basis: calc((100% - gutters) * fraction)`. That is the one decision the
+ * rest of this file follows from: a split described in percentages survives the
+ * window being resized without a single line of JavaScript running, so the
+ * component measures itself only twice — once on mount, to turn a `'240px'`
+ * default into a fraction, and once at the start of each drag, to know what a
+ * pixel of pointer movement is worth.
+ *
+ * The handles are interleaved here rather than written by the caller, so the
+ * children of an `MPPanes` are just panes. That does mean the direct children
+ * have to *be* panes: the constraints are read off their props, and an `MPPane`
+ * wrapped in something else is a pane with no minimum.
+ *
+ * ## Why there is no Base UI primitive under this
+ *
+ * There is nothing to delegate. A splitter's behaviour is a pointer capture and
+ * a clamp, and its accessibility is one ARIA role — `separator` with a value,
+ * which is the window-splitter pattern — carried by an element the component has
+ * to own anyway because it draws it. What Base UI is here for is the things that
+ * are genuinely hard and invisible when they work: a focus trap, a positioner, a
+ * typeahead. A rail between two boxes is not one of them.
+ *
+ * ## What it does not draw
+ *
+ * No surface, on either half. A split is layout, and the moment a pane drew a
+ * sheet it would stop being usable as the thing a table, a card or an editor is
+ * put *inside*. The family reaches exactly three places — the hairline, the wash
+ * under a hovered handle, and the focus ring — because those are the only marks
+ * this component makes.
+ */
+export declare const MPPanes: React.ForwardRefExoticComponent<MPPanesProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One region of a split.
+ *
+ * `defaultSize`, `minSize` and `maxSize` are read by the `MPPanes` around it
+ * rather than used here — a pane cannot know what "half" is, only the split can.
+ */
+export declare const MPPane: React.ForwardRefExoticComponent<MPPaneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/panes/MPPanes.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent";const o=n.createContext({basis:null,id:null}),i={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},a={xs:4,sm:6,md:8,lg:10,xl:12};function s(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const o=Number(r[1]);if(!Number.isNaN(o))switch(r[2]){case"px":return o;case"%":return t*o/100;case"rem":return o*Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return o*Number.parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const MPPanes=n.forwardRef(function({orientation:l="horizontal",resizable:u=!0,color:c="primary",size:m="md",onResize:d,onResizeEnd:f,className:p,style:h,children:g,...v},b){const x=n.Children.toArray(g).filter(n.isValidElement),y=x.length,z=n.useId(),w=n.useRef(null),S=n.useCallback(e=>{w.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),E=n.useRef([]),N=x.map(e=>e.props),[R,M]=n.useState(null),j=R&&R.length===y?R:null,C=n.useRef(null);n.useLayoutEffect(()=>{E.current=N,C.current=j});const k=n.useRef(null);n.useEffect(()=>()=>{null!==k.current&&(document.body.style.userSelect=k.current,k.current=null)},[]);const L="horizontal"===l,$=a[m]*Math.max(0,y-1);function P(e){const t=w.current,n=C.current;if(!u||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(L?r.width:r.height)-$;if(o<=0)return null;const i=E.current[e],a=E.current[e+1],l=n[e]*o,c=l+n[e+1]*o,m=Math.max(s(i?.minSize,o,t)??0,c-(s(a?.maxSize,o,t)??c)),f=Math.min(s(i?.maxSize,o,t)??c,c-(s(a?.minSize,o,t)??0));return f<m?null:{root:t,current:n,lower:m,upper:f,start:l,resize(t){const r=Math.min(f,Math.max(m,l+t)),i=[...n];return i[e]=r/o,i[e+1]=(c-r)/o,M(i),d?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=w.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(L?t.width:t.height)-$;n<=0||M(t=>t&&t.length===y?t:function(e,t,n){const r=e.map(e=>s(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,l=r.map(e=>Math.max(0,e??a)),u=l.reduce((e,t)=>e+t,0);return u<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/u)}(E.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[y,L,$]);const _=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",i[m],"transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none",u?[L?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:S,"data-mp-size":m,className:["mp-panes flex h-full w-full",L?"flex-row":"flex-col","min-h-0 min-w-0",p??""].filter(Boolean).join(" "),style:{...r(c),...h},...v,children:x.map((r,i)=>t(n.Fragment,{children:[i>0?e("div",{role:"separator","aria-orientation":L?"vertical":"horizontal","aria-valuenow":j?Math.round(100*j[i-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!u||void 0,"aria-controls":`${z}-${i-1}`,tabIndex:u?0:-1,className:_,onPointerDown:e=>{0===e.button&&function(e,t){const n=P(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;k.current=o,document.body.style.userSelect="none";const i=L?t.clientX:t.clientY,a=L&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=L?e.clientX:e.clientY;s=n.resize((t-i)*a)},u=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",u),r.removeEventListener("pointercancel",u),delete r.dataset.dragging,document.body.style.userSelect=o,k.current=null,f?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",u),r.addEventListener("pointercancel",u)}(i-1,e)},onKeyDown:e=>{const t=L?"ArrowLeft":"ArrowUp",n=L?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n)return e.preventDefault(),void function(e,t){const n=P(e);if(!n)return;const r=n.resize(t);f?.(r.map(e=>100*e))}(i-1,e.key===n?16:-16);"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=P(e);if(!n)return;const r=n.resize(n[t]-n.start);f?.(r.map(e=>100*e))}(i-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",L?"h-full w-px":"h-px w-full",u?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(o.Provider,{value:{basis:j?`calc((100% - ${$}px) * ${j[i].toFixed(6)})`:null,id:`${z}-${i}`},children:r})]},r.key??i))})});export const MPPane=n.forwardRef(function({defaultSize:t,minSize:r,maxSize:i,className:a,style:s,children:l,...u},c){const{basis:m,id:d}=n.useContext(o);return e("div",{ref:c,id:d??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",a??""].filter(Boolean).join(" "),style:{flex:m?`0 0 ${m}`:"1 1 0%",...s},...u,children:l})});

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

@@ -0,0 +1,2 @@
+export { MPPane, MPPanes } from './MPPanes';
+export type { MPPaneProps, MPPanesProps, MPPaneSize } from './MPPanes';

package/dist/components/panes/index.js

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

package/dist/components/pill/MPPill.d.ts

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+/**
+ * How the lozenge sits in the page's scroll.
+ *
+ * Local to this component rather than in `src/types.ts`, which is the rule that
+ * file states: an axis joins the shared vocabulary when a **second** component
+ * needs it, not in anticipation of one. Nothing else in the library pins itself
+ * to the viewport.
+ */
+export type MPPillPosition = 'static' | 'sticky' | 'fixed';
+export interface MPPillProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onClick' | 'title'> {
+    /**
+     * The leading slot — a glyph, an avatar, a status dot, a photograph.
+     *
+     * It is given a square box of its own and clipped to a circle, so an `<img>`
+     * lands in it as readily as an icon does: the picture fills the box and is
+     * cropped rather than letterboxed, which is what a 20px avatar wants.
+     */
+    startIcon?: React.ReactNode;
+    /** The trailing slot. Outside the pressable area, so it can be a control. */
+    endIcon?: React.ReactNode;
+    /**
+     * The headline in the middle — what the pill is currently about.
+     *
+     * A prop rather than something to compose, for the reason a card's title is
+     * one: the arrangement is fixed. Almost every pill is a line of text with an
+     * optional second line under it, and spelling that as children means every
+     * caller inventing their own centring and type scale.
+     */
+    title?: React.ReactNode;
+    /** The second line, under the title. One step down and quieter. */
+    description?: React.ReactNode;
+    /**
+     * The second half, revealed when `expanded`.
+     *
+     * The pill grows downward into it rather than swapping to a different shape:
+     * one object saying more, which is the whole idea behind this component.
+     */
+    details?: React.ReactNode;
+    /**
+     * Whether `details` is showing.
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * How it sits in the page's scroll. `fixed` pins it against the viewport and
+     * centres it, which is the arrangement this shape exists for.
+     * @default 'static'
+     */
+    position?: MPPillPosition;
+    /**
+     * Which edge it is held against when `position` is not `static`.
+     * @default 'top'
+     */
+    side?: 'top' | 'bottom';
+    /** Passing it makes the middle a real button. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * How much surface the lozenge paints.
+     *
+     * The **control** ladder rather than the container one: a pill is the thing
+     * being coloured, so `filled` takes the accent under its own ink.
+     * @default 'filled'
+     */
+    variant?: MPVariant;
+    /**
+     * The row's minimum height and the type scale in it. The same numbers a button
+     * is drawn at, so a collapsed pill lines up with one beside it.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * @default 'secondary'
+     */
+    color?: MPColor;
+    /**
+     * Anything the middle needs that `title` and `description` cannot say — a pair
+     * of small readouts, a live counter, a progress indicator. Rendered under
+     * them, in the same centred column.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A floating lozenge holding a small amount of live information.
+ *
+ * MD3 does not describe this shape, and the library ships it for the reason it
+ * ships [MPProgressBox](../feedback/progress-box): there is a real thing here
+ * that the specification's own parts can draw, and no component in the set draws
+ * it. What it is *for* is the state a page has that is not about any one control
+ * — a call in progress, an upload that is still going, a recording, a train two
+ * minutes away.
+ *
+ * ## The shape, and the one house rule it bends
+ *
+ * A collapsed pill is a stadium: `corner-full`, which every other **sheet** in
+ * this library is held back from. That is allowed here for the same reason the
+ * rule exists — a radius says what kind of object something is, and this is not
+ * a sheet lying on the page. It is an object hovering over it, and an object
+ * hovering over the page should not look like it was cut from the same material.
+ *
+ * Opening `details` moves the corner to `corner-extra-large`, and the move is
+ * transitioned. That is not decoration: `corner-full` on a box that has grown to
+ * six lines is a corner a third of its height, which eats the first two words of
+ * every line. The pill morphs from a lozenge into a rounded rectangle with the
+ * loudest corner the sheet ladder has, which is the shape it should have been
+ * all along at that size.
+ *
+ * ## What is measured, and why
+ *
+ * `details` is revealed by animating a **measured** height, exactly as an
+ * accordion panel is — but the measurement is a `ResizeObserver` rather than
+ * Base UI's one-shot one, because live information is the kind of content that
+ * changes while it is on screen. A pill whose details grew after they opened
+ * would otherwise be clipped at the height they had when they arrived.
+ */
+export declare const MPPill: React.ForwardRefExoticComponent<MPPillProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/pill/MPPill.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent";import{inertProps as r}from"../../internal/inert";import{MPStateLayer as s}from"../../internal/StateLayer";import{CONTROL_GAP as a,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale";const f={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},h={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},x={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},b={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=o.forwardRef(function({startIcon:w,endIcon:v,title:g,description:y,details:j,expanded:N=!1,position:k="static",side:_="top",onClick:z,variant:B="filled",size:C="md",color:I="secondary",className:R,style:$,children:H,...P},S){const E=o.useRef(null),F=o.useId(),[L,M]=o.useState(0);o.useEffect(()=>{const e=E.current;if(!e)return;const t=new ResizeObserver(()=>M(e.scrollHeight));return t.observe(e),M(e.scrollHeight),()=>t.disconnect()},[j]);const O=Boolean(z),q=u[C],A=t(n,{children:[m(w)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[C],height:l[C]},children:w}):null,m(g)||m(y)||m(H)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",h[C]].join(" "),children:[m(g)?e("span",{className:"max-w-full truncate",children:g}):null,m(y)?e("span",{className:`max-w-full truncate font-normal ${d} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:y}):null,H]}):null]});return t("div",{ref:S,"data-mp-size":C,"data-mp-variant":B,"data-mp-expanded":N||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",N?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",c[C],x[B],b[k][_],R??""].filter(Boolean).join(" "),style:{...i(I),...$},...P,children:[t("div",{className:["flex shrink-0 items-center py-1",f[C],a[C],O?"ps-0":q,m(v)?"pe-1":O?"pe-0":""].filter(Boolean).join(" "),children:[O?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent font-[inherit] text-inherit","rounded-[inherit]",a[C],q,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(j)?N:void 0,"aria-controls":m(j)?F:void 0,onClick:z,children:[e(s,{}),A]}):A,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(j)?e("div",{id:F,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:N?L:0},...r(!N),children:e("div",{ref:E,className:`${q} pb-2 whitespace-normal ${p[C]}`,children:j})}):null]})});

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

@@ -0,0 +1,2 @@
+export { MPPill } from './MPPill';
+export type { MPPillPosition, MPPillProps } from './MPPill';

package/dist/components/pill/index.js

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

package/dist/components/popover/MPPopover.d.ts

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import { Popover } from '@base-ui/react/popover';
+import type { MPAlign, MPSide, MPSize } from '../../types';
+/**
+ * A popover takes `side`, `align` and `size`, and stops there.
+ *
+ * There is no `variant` — the five weights answer "how much does this surface
+ * assert itself against the page", and a popup that had to be asked for has
+ * already been asserted. There is no `color` either: MD3's own answer for a
+ * surface that floats beside a control is `surface-container` at elevation 2,
+ * neutral, and a popover that could be dyed would dye the form somebody put in
+ * it.
+ */
+export interface MPPopoverProps {
+    /**
+     * The element the popup hangs off and that opens it. Exactly one element, and
+     * it must accept a ref and spread props — every Material Plus component does.
+     *
+     * Optional: a controlled popover anchored from elsewhere needs none, though it
+     * then has nothing to position against and will sit against the viewport.
+     */
+    trigger?: React.ReactElement;
+    /** The heading, rendered as the element that names the popup. */
+    title?: React.ReactNode;
+    /** A line under it, and the popup's accessible description. */
+    description?: React.ReactNode;
+    /**
+     * Which edge of the trigger it appears on. Flips to the opposite side when
+     * there is no room, which is Base UI's doing and is the right behaviour.
+     * @default 'bottom'
+     */
+    side?: MPSide;
+    /**
+     * Where it sits along that edge.
+     * @default 'center'
+     */
+    align?: MPAlign;
+    /**
+     * Distance from the trigger, in pixels.
+     * @default 8
+     */
+    sideOffset?: number;
+    /**
+     * Shift along that edge, in pixels.
+     * @default 0
+     */
+    alignOffset?: number;
+    /**
+     * Draws the little wedge pointing at the trigger.
+     *
+     * Off by default. MD3 draws no wedge on a menu and none on a rich tooltip: a
+     * popup eight pixels from the control that opened it does not need to say what
+     * it belongs to. Turn it on where the trigger is far enough away that it does.
+     * @default false
+     */
+    arrow?: boolean;
+    /** Whether the popover is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the page behind is taken away.
+     *
+     * `false` — the default — leaves the page scrollable and clickable, which is
+     * what separates a popover from a [dialog](./dialog): it is a detail *beside*
+     * the page, not instead of it. `'trap-focus'` holds focus inside without
+     * locking the scroll.
+     * @default false
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking outside closes the popup. Turn it off
+     * only for a popup with its own way out, because there will be no other.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Shows the × in the corner.
+     * @default false
+     */
+    showClose?: boolean;
+    /**
+     * Accessible name of the × button. Defaults to the word for "close" in
+     * `locale`.
+     */
+    closeLabel?: string;
+    /**
+     * Which language the × button's default name is written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /**
+     * A hard cap on the popup's width, overriding the one `size` implies. Numbers
+     * are pixels. For the popover whose *content* decides its width — a form, a
+     * single line of help — rather than for tuning the scale, which is `size`.
+     */
+    width?: number | string;
+    /**
+     * The room inside the popup, the type scale in it, and how wide it may get.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** The body. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type MPPopoverCloseProps = React.ComponentProps<typeof Popover.Close>;
+/**
+ * Closes the popover it is inside.
+ *
+ * Exported for `MPDialogClose`'s reason: an uncontrolled popover has no
+ * `setOpen` for its Cancel button to call, and making every popover controlled
+ * is a piece of state per popover that exists only to answer a button.
+ *
+ * `render` is Base UI's own escape hatch, so a real Material Plus button
+ * dismisses: `<MPPopoverClose render={<MPButton variant="text">Cancel</MPButton>} />`.
+ */
+export declare const MPPopoverClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A sheet that opens beside the thing that opened it.
+ *
+ * The difference from a [tooltip](./tooltip) is that this one can be *reached*:
+ * it stays up until it is dismissed, it can be entered with the pointer or the
+ * keyboard, and what is inside it can be clicked and typed into. The difference
+ * from a [dialog](./dialog) is that it does not take the page — it is anchored
+ * to a control, and the page behind goes on working.
+ *
+ * Base UI owns everything hard about it: the anchoring and the flip at the
+ * window's edge, the click outside and Escape, returning focus to the trigger,
+ * and the `aria-labelledby` / `aria-describedby` wiring. What is left here is
+ * the surface, the width ladder and the header.
+ *
+ * ## The surface
+ *
+ * `surface-container` at elevation 2 and `corner-medium`, which is what MD3
+ * gives a menu and a rich tooltip — the two things in the specification that are
+ * this: a small sheet anchored to a control. It is deliberately *not* the
+ * dialog's `surface-container-high` at elevation 3, because a popover has not
+ * taken the page and should not sit above the menus that did not either.
+ */
+export declare function MPPopover({ trigger, title, description, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, locale: localeProp, width, size, className, style, children }: MPPopoverProps): React.JSX.Element;

package/dist/components/popover/MPPopover.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as t}from"@base-ui/react/popover";import{MPIcon as i}from"../icon/MPIcon";import{CloseIcon as a}from"../../constants/icons";import{useMPLocale as l,useMPMessages as r}from"../../internal/locale";import{MPStateLayer as s}from"../../internal/StateLayer";import{hasContent as n,META_TEXT as c,PROSE_TEXT as m,SHEET_GAP as d,SHEET_PAD as p,SHEET_TITLE as f}from"../../internal/scale";import{FADE as u,PORTAL_LAYER as x}from"../../internal/surface";const h={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},g={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=t.Close;export function MPPopover({trigger:v,title:b,description:w,side:N="bottom",align:O="center",sideOffset:P=8,alignOffset:j=0,arrow:y=!1,open:C,defaultOpen:z,onOpenChange:k,modal:M=!1,dismissible:L=!0,showClose:$=!1,closeLabel:B,locale:T,width:A,size:D="md",className:I,style:R,children:S}){const W=l(T),_=r("common",W),q=n(b)||n(w),E=g[D];return o(t.Root,{open:C,defaultOpen:z,modal:M,onOpenChange:(e,o)=>{L||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?k?.(e):o.cancel()},children:[v?e(t.Trigger,{render:v}):null,e(t.Portal,{children:e(t.Positioner,{className:x,side:N,align:O,sideOffset:P,alignOffset:j,children:o(t.Popup,{"data-mp-size":D,className:["mp-popover rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",p[D],d[D],m[D],void 0===A?h[D]:"",u,I??""].filter(Boolean).join(" "),style:{...void 0===A?null:{maxWidth:"number"==typeof A?`${A}px`:A},...R},children:[y?e(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:e("svg",{width:E,height:E/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-color-surface-container)"})})}):null,q||$?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[n(b)?e(t.Title,{className:`m-0 ${f[D]}`,children:b}):null,n(w)?e(t.Description,{className:`text-mp-on-surface-variant m-0 ${c}`,children:w}):null]}),$?o(t.Close,{"aria-label":B??_.close,className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","rounded-mp-full -m-1 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(s,{}),e(i,{icon:a,size:18})]}):null]}):null,n(S)?e("div",{className:"min-w-0",children:S}):null]})})})]})}

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

@@ -0,0 +1,2 @@
+export { MPPopover, MPPopoverClose } from './MPPopover';
+export type { MPPopoverCloseProps, MPPopoverProps } from './MPPopover';

package/dist/components/popover/index.js

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