material-plus-ui 1.5.0 → 1.7.0

package/dist/components/toggle/MPToggle.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Toggle as r}from"@base-ui/react/toggle";import{accentSlots as o}from"../../internal/accent.js";import{MPButtonGroupContext as a}from"../../internal/button-group.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as i,CONTROL_HEIGHT as c,CONTROL_PAD_X as l,CONTROL_SQUARE as p,CONTROL_TEXT as m,hasContent as d}from"../../internal/scale.js";const u={filled:"bg-mp-surface-container-highest text-mp-on-surface-variant",tonal:"bg-mp-surface-container text-mp-on-surface-variant",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline border bg-transparent text-mp-on-surface-variant",text:"bg-transparent text-mp-on-surface-variant"},f={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-(--_mp-accent) border bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",text:"bg-transparent text-(--_mp-accent)"},b={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 MPToggle=/*@__PURE__*/n.forwardRef(function({variant:g,size:x,color:v,disabled:h,pressed:w,defaultPressed:_,onPressedChange:j,value:y,startIcon:P,endIcon:z,fullWidth:C=!1,className:k,style:I,children:N,...B},L){const M=n.useContext(a),R=g??M?.variant??"outlined",S=x??M?.size??"md",T=v??M?.color??"primary",W=h??M?.disabled??!1,$=!d(N);return t(r,{ref:L,value:y,pressed:w,defaultPressed:_,onPressedChange:e=>j?.(e),disabled:W,"data-mp-size":S,"data-mp-variant":R,className:e=>["mp-toggle 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)",c[S],m[S],i[S],$?`${p[S]} px-0`:l[S],W?b[R]:e.pressed?f[R]:u[R],W?"cursor-default":"",C?"w-full":"",k??""].filter(Boolean).join(" "),style:{...o(T),...I},...B,children:[W?null:e(s,{}),P,N,z]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Toggle as r}from"@base-ui/react/toggle";import{accentSlots as o}from"../../internal/accent.js";import{MPButtonGroupContext as a}from"../../internal/button-group.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as i,CONTROL_HEIGHT as c,CONTROL_PAD_X as l,CONTROL_SQUARE as p,CONTROL_TEXT as m,hasContent as d}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={filled:"bg-mp-surface-container-highest text-mp-on-surface-variant",tonal:"bg-mp-surface-container text-mp-on-surface-variant",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline border bg-transparent text-mp-on-surface-variant",text:"bg-transparent text-mp-on-surface-variant"},g={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-(--_mp-accent) border bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",text:"bg-transparent text-(--_mp-accent)"},x={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 MPToggle=/*@__PURE__*/n.forwardRef(function({variant:v,size:h,color:j,disabled:w,pressed:_,defaultPressed:y,onPressedChange:P,value:z,startIcon:C,endIcon:k,fullWidth:I=!1,className:N,style:B,children:L,...M},R){const S=n.useContext(a),T=v??S?.variant??"outlined",W=f(h??S?.size),$=u(j??S?.color),q=w??S?.disabled??!1,A=!d(L);return t(r,{ref:R,value:z,pressed:_,defaultPressed:y,onPressedChange:e=>P?.(e),disabled:q,"data-mp-size":W,"data-mp-variant":T,className:e=>["mp-toggle 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)",c[W],m[W],i[W],A?`${p[W]} px-0`:l[W],q?x[T]:e.pressed?g[T]:b[T],q?"cursor-default":"",I?"w-full":"",N??""].filter(Boolean).join(" "),style:{...o($),...B},...M,children:[q?null:e(s,{}),C,L,k]})});

package/dist/components/toolbar/MPToolbar.d.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPDensity, MPElevation, MPPosition, MPSize, MPVariant } from '../../types.js';
+/** Which edge a pinned bar is held against. */
+export type MPToolbarSide = 'top' | 'bottom';
+export interface MPToolbarProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How much surface the bar paints.
+     *
+     * A container's ladder, so the bar is never dyed — exactly as on `MPBox`. A
+     * toolbar holds other people's controls, and those controls arrive with
+     * colours of their own.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * How far off the page it is lifted, on MD3's five levels.
+     *
+     * Left unset the bar is flat even when it is pinned, and that is deliberate: a
+     * shadow under a header is a way of saying "there is content beneath this",
+     * which is only true once the page has been scrolled. Raise it yourself, or
+     * leave it flat and turn on `divider`.
+     */
+    elevation?: MPElevation;
+    /**
+     * The room inside. As on `MPBox`, `size` sets padding here and neither a
+     * height nor a type scale: a toolbar is as tall as the controls in it.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** Takes room out of that padding, two pixels a face per step. @default 0 */
+    density?: MPDensity;
+    /**
+     * How the bar sits in the page's scroll.
+     *
+     * - `static` — in the flow, scrolling away with the content.
+     * - `sticky` — in the flow until it reaches the edge, then held there. What an
+     *   application header usually wants: it takes up its own room, so nothing
+     *   underneath has to be padded around it.
+     * - `fixed` — out of the flow entirely. The page needs padding of its own, or
+     *   the first screenful sits behind the bar.
+     * - `absolute` — pinned to the nearest positioned ancestor rather than to the
+     *   window. For a bar along the edge of a panel.
+     * @default 'static'
+     */
+    position?: MPPosition;
+    /** Which edge it is held against when `position` is not `static`. @default 'top' */
+    side?: MPToolbarSide;
+    /**
+     * Draws a hairline along the edge that faces the content — under a `top` bar,
+     * over a `bottom` one.
+     * @default false
+     */
+    divider?: boolean;
+    /** Pinned to the start of the bar: a logo, a title, a back button. */
+    start?: React.ReactNode;
+    /** Pinned to the end: the actions. */
+    end?: React.ReactNode;
+    /**
+     * Renders something other than a `<div>`. Worth reaching for here more than
+     * anywhere else: a page's header should be a `<header>`.
+     */
+    render?: useRender.RenderProp;
+    /** The middle. Takes whatever width `start` and `end` leave. */
+    children?: React.ReactNode;
+}
+/**
+ * A bar of controls: an application header, a page's action row, the strip along
+ * the bottom of an editor.
+ *
+ * ```tsx
+ * <MPToolbar render={<header />} position="sticky" divider start={<MPAppLogo name="Acme" />}>
+ *   <MPTextField placeholder="Search" />
+ * </MPToolbar>
+ * ```
+ *
+ * Three slots and a row. `start` and `end` are pinned to their ends and
+ * `children` takes what is left, which is the arrangement every toolbar has ever
+ * had — so it is laid out here rather than left to a caller and the spacer
+ * `<div>` they have to remember.
+ *
+ * ## It takes no height
+ *
+ * A toolbar is as tall as the controls in it plus its padding, and that padding
+ * is the `size`/`density` pair every other surface uses. So `density={-2}` gives
+ * the dense bar without a second prop that means the same thing, and without the
+ * type scale moving.
+ *
+ * ## It has no `role="toolbar"`, deliberately
+ *
+ * That role is a promise about keyboard behaviour — one tab stop for the whole
+ * bar, arrow keys between the controls inside it — and a bar that claims it
+ * without implementing it is worse for a keyboard reader than one that claimed
+ * nothing at all.
+ *
+ * What a page header wants is `render={<header />}`, which is a landmark and is
+ * true. What a genuine roving-focus toolbar wants is `MPButtonGroup`, which is
+ * one.
+ *
+ * ## What it is not
+ *
+ * Not `MPHeader`, which is `MPPageLayout`'s own slot and knows about the
+ * sidebar, the skip link and the drawer. This is a bar you can put anywhere,
+ * including inside a card.
+ */
+export declare const MPToolbar: React.ForwardRefExoticComponent<MPToolbarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/toolbar/MPToolbar.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{useRender as r}from"@base-ui/react/use-render";import{sheetPadX as i,sheetPadY as n}from"../../internal/density.js";import{containerSurface as s}from"../../internal/elevation.js";import{SHEET_GAP as a,hasContent as m}from"../../internal/scale.js";import{useMPDensity as l,useMPSize as d}from"../../internal/config.js";const p={static:{top:"",bottom:""},absolute:{top:"absolute inset-x-0 top-0 z-20",bottom:"absolute inset-x-0 bottom-0 z-20"},sticky:{top:"sticky top-0 z-20",bottom:"sticky bottom-0 z-20"},fixed:{top:"fixed inset-x-0 top-0 z-30",bottom:"fixed inset-x-0 bottom-0 z-30"}},c={top:"border-mp-outline-variant border-b",bottom:"border-mp-outline-variant border-t"};export const MPToolbar=/*@__PURE__*/o.forwardRef(function({variant:b="outlined",elevation:f,size:x,density:u,position:v="static",side:h="top",divider:j=!1,start:z,end:y,render:w,className:_,style:g,children:k,...N},B){const F=d(x),M=l(u);return r({render:w,ref:B,props:{"data-mp-size":F,"data-mp-variant":b,className:["mp-toolbar box-border flex w-full min-w-0 items-center",i(F,M),n(F,M),a[F],"static"===v?"rounded-mp-md":"",s(b,f),"text-mp-on-surface",j?c[h]:"",p[v][h],_??""].filter(Boolean).join(" "),style:g,children:e(o.Fragment,{children:[m(z)?t("div",{className:"mp-toolbar__start flex min-w-0 shrink-0 items-center gap-2",children:z}):null,t("div",{className:"mp-toolbar__main flex min-w-0 flex-1 items-center gap-2",children:k}),m(y)?t("div",{className:"mp-toolbar__end flex min-w-0 shrink-0 items-center gap-2",children:y}):null]}),...N}})});

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

@@ -0,0 +1,2 @@
+export { MPToolbar } from './MPToolbar.js';
+export type { MPToolbarProps, MPToolbarSide } from './MPToolbar.js';

package/dist/components/toolbar/index.js

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

package/dist/components/tour/MPTour.d.ts

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import type { MPAlign, MPColor, MPSide, MPSize, MPSlots } from '../../types.js';
+/** One stop on the tour. */
+export interface MPTourStep {
+    /**
+     * A CSS selector for what this step is about.
+     *
+     * Left out, the card is centred over the page with nothing cut out of the
+     * dimming — which is what a welcome step and a closing step are.
+     */
+    target?: string;
+    /** The step's heading. */
+    title?: React.ReactNode;
+    /** What it says. */
+    content?: React.ReactNode;
+    /** Which edge of the target the card sits on. @default 'bottom' */
+    side?: MPSide;
+    /** Where along that edge. @default 'center' */
+    align?: MPAlign;
+    /**
+     * How far the hole is inflated past the target, in pixels. A control with a
+     * focus ring wants a couple; a whole panel wants none.
+     * @default 6
+     */
+    padding?: number;
+}
+/**
+ * The parts an `MPTour` draws around its card.
+ *
+ * `className` is the card — the sheet the steps are written on — and `scrim` is
+ * the dimming behind it, which is a sibling of the card rather than a descendant
+ * and so has no other way in.
+ */
+export type MPTourSlot = 'scrim' | 'title' | 'content' | 'close' | 'footer';
+export interface MPTourProps {
+    /** The stops, in order. */
+    steps: readonly MPTourStep[];
+    /** Whether the tour is running. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /** Whether it starts running, for an uncontrolled one. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which stop, from `0`. Use with `onStepChange` for a controlled one. */
+    step?: number;
+    /** Which one it starts on. @default 0 */
+    defaultStep?: number;
+    onStepChange?: (step: number) => void;
+    /** Called when the last step's button is pressed, before the tour closes. */
+    onFinish?: () => void;
+    /**
+     * Dims the page and cuts the target out of the dimming. Off, the card is the
+     * only thing the tour draws.
+     * @default true
+     */
+    scrim?: boolean;
+    /** Offers the Skip button beside the counter. @default true */
+    skippable?: boolean;
+    /** Whether Escape and the × end the tour. @default true */
+    dismissible?: boolean;
+    /** Scrolls each target into view as the tour reaches it. @default true */
+    scrollIntoView?: boolean;
+    /**
+     * Which language the buttons and the counter are written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** Individual overrides for the five words the tour says on its own behalf. */
+    labels?: Partial<{
+        previous: string;
+        next: string;
+        done: string;
+        skip: string;
+        position: string;
+    }>;
+    /** @default 'md' */
+    size?: MPSize;
+    /** Which accent family the buttons read. @default 'primary' */
+    color?: MPColor;
+    /** Class names for the card. */
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * Class names for the parts around it. `className` is the card, so the dimming
+     * behind it is `classNames.scrim`.
+     */
+    classNames?: MPSlots<MPTourSlot>;
+}
+/**
+ * A guided walk over a page that already exists.
+ *
+ * ```tsx
+ * <MPTour
+ *   defaultOpen
+ *   steps={[{ target: '#search', title: 'Find anything', content: 'Press ⌘K.' }]}
+ * />
+ * ```
+ *
+ * It is [MPStepper](../display/stepper) turned inside out. That component puts
+ * the instructions *in* the page and the reader follows them; this one leaves
+ * the page exactly as it is and stands over it. The steps are therefore given by
+ * selector rather than as content: what a tour is about is already on screen,
+ * and describing it a second time inside the card would be two copies to keep in
+ * step.
+ *
+ * ## The dimming never takes the pointer
+ *
+ * A reader can use the control being pointed at while the card is up, and that
+ * is the difference between a tour and a sequence of dialogs. Nothing outside
+ * the card is blocked, no focus is trapped, and neither a press outside nor the
+ * focus leaving ends the tour — only Escape, the ×, and the card's own buttons
+ * do.
+ *
+ * ## What it is not
+ *
+ * It is not documentation, and it is not a place to put anything a reader will
+ * need twice. A tour is shown once, to somebody who has not asked for it, over
+ * a page they are trying to get on with — so three or four steps is the shape,
+ * and anything that has to be found again belongs on the page.
+ */
+export declare function MPTour({ steps, open: openProp, defaultOpen, onOpenChange, step: stepProp, defaultStep, onStepChange, onFinish, scrim, skippable, dismissible, scrollIntoView, locale: localeProp, labels, size: sizeProp, color: colorProp, className, style, classNames }: MPTourProps): React.JSX.Element | null;

package/dist/components/tour/MPTour.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Popover as o}from"@base-ui/react/popover";import{MPButton as i}from"../button/MPButton.js";import{MPIcon as s}from"../icon/MPIcon.js";import{CloseIcon as r}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPColor as a,useMPSize as c}from"../../internal/config.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as p,useMPMessages as u}from"../../internal/locale.js";import{COMMON as d}from"../../internal/messages/common.js";import{TOUR as f}from"../../internal/messages/tour.js";import{CONTROL_ICON as h,META_TEXT as g,PROSE_TEXT as x,SHEET_GAP as v,SHEET_PAD as b,SHEET_TITLE as j,hasContent as w}from"../../internal/scale.js";import{MPStateLayer as N}from"../../internal/StateLayer.js";import{FADE as y,PORTAL_LAYER as k}from"../../internal/surface.js";const _={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-md"},B={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};function S({spot:t,className:n}){return e("div",null===t?{"aria-hidden":"true",className:["mp-tour__scrim bg-mp-scrim/32 pointer-events-none fixed inset-0 z-40",n??""].filter(Boolean).join(" ")}:{"aria-hidden":"true",className:["mp-tour__scrim rounded-mp-xs pointer-events-none fixed z-40","shadow-[0_0_0_9999px_color-mix(in_oklab,var(--_mp-color-scrim)_32%,transparent)]","transition-[top,left,width,height] duration-(--mp-sys-motion-duration-medium1)","ease-mp-standard motion-reduce:transition-none",n??""].filter(Boolean).join(" "),style:{top:t.top,left:t.left,width:t.width,height:t.height}})}export function MPTour({steps:z,open:C,defaultOpen:M=!1,onOpenChange:P,step:O,defaultStep:$=0,onStepChange:R,onFinish:q,scrim:F=!0,skippable:I=!0,dismissible:T=!0,scrollIntoView:A=!0,locale:D,labels:E,size:H,color:L,className:V,style:W,classNames:G}){const J=c(H),K=a(L),Q=p(D),U=u(f,Q,E),X=u(d,Q),[Y,Z]=n.useState(M),[ee,te]=n.useState($),ne=C??Y,oe=Math.min(O??ee,Math.max(0,z.length-1)),ie=z[oe],[se,re]=n.useState(null),le=e=>{void 0===C&&Z(e),P?.(e)},ae=e=>{void 0===O&&te(e),R?.(e)},ce=ie?.target,me=ie?.padding??6;if(n.useEffect(()=>{if(!ne||!ce)return;const e=document.querySelector(ce);if(!(e instanceof HTMLElement))return;A&&e.scrollIntoView({block:"center",inline:"nearest",behavior:"smooth"});let t=0,n="";const o=()=>{const i=e.getBoundingClientRect(),s=`${i.top} ${i.left} ${i.width} ${i.height}`;s!==n&&(n=s,re({selector:ce,spot:{top:i.top-me,left:i.left-me,width:i.width+2*me,height:i.height+2*me}})),t=requestAnimationFrame(o)};return o(),()=>cancelAnimationFrame(t)},[ne,ce,me,A]),0===z.length)return null;const pe=ne&&ce&&se?.selector===ce?se.spot:null,ue=0===oe,de=oe===z.length-1,fe=B[J],he=w(ie?.title)||w(ie?.content);return t(o.Root,{open:ne,onOpenChange:(e,t)=>{e?le(!0):"outside-press"===t.reason||"focus-out"===t.reason||"escape-key"===t.reason&&!T?t.cancel():le(!1)},children:[ne&&F?e(S,{spot:pe,className:G?.scrim}):null,e(o.Portal,{children:e(o.Positioner,{className:k,side:ie?.side??"bottom",align:ie?.align??"center",sideOffset:ce?10:0,collisionPadding:12,anchor:()=>ce?document.querySelector(ce):{getBoundingClientRect:()=>new DOMRect(window.innerWidth/2,window.innerHeight/2,0,0)},children:t(o.Popup,{"data-mp-size":J,className:["mp-tour rounded-mp-md relative box-border flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-3",b[J],v[J],x[J],_[J],y,V??""].filter(Boolean).join(" "),style:{...l(K),...W},children:[he?t("div",{className:"flex items-start gap-3",children:[t("div",{className:"flex min-w-0 flex-1 flex-col gap-1",children:[w(ie?.title)?e(o.Title,{className:["text-mp-on-surface m-0 font-medium",j[J],G?.title??""].filter(Boolean).join(" "),children:ie?.title}):null,w(ie?.content)?e(o.Description,{className:["text-mp-on-surface-variant m-0 min-w-0",G?.content??""].filter(Boolean).join(" "),children:ie?.content}):null]}),T?t("button",{type:"button","aria-label":X.close,onClick:()=>le(!1),className:["group/close rounded-mp-full text-mp-on-surface-variant relative -me-1 -mt-1","flex size-8 shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none",G?.close??""].filter(Boolean).join(" "),children:[e(N,{className:"group-hover/close:opacity-8 group-focus-visible/close:opacity-10"}),e(s,{icon:r,size:h[J]})]}):null]}):null,t("div",{className:["flex items-center gap-2",G?.footer??""].filter(Boolean).join(" "),children:[e("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${g}`,children:m(U.position,{index:String(oe+1),total:String(z.length)})}),t("div",{className:"ms-auto flex items-center gap-1",children:[I&&!de?e(i,{size:fe,variant:"text",color:"secondary",onClick:()=>le(!1),children:U.skip}):null,ue?null:e(i,{size:fe,variant:"outlined",color:K,onClick:()=>ae(oe-1),children:U.previous}),e(i,{size:fe,color:K,onClick:()=>de?(q?.(),void le(!1)):ae(oe+1),children:de?U.done:U.next})]})]})]})})})]})}

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

@@ -0,0 +1,2 @@
+export { MPTour } from './MPTour.js';
+export type { MPTourProps, MPTourSlot, MPTourStep } from './MPTour.js';

package/dist/components/tour/index.js

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

package/dist/components/transfer/MPTransfer.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{MPBox as l}from"../box/MPBox.js";import{MPCheckbox as s}from"../checkbox/MPCheckbox.js";import{MPIcon as r}from"../icon/MPIcon.js";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MPTextField as i}from"../text-field/MPTextField.js";import{ArrowRightIcon as o}from"../../constants/icons.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{cssLength as d}from"../../internal/length.js";import{TRANSFER as h}from"../../internal/messages/transfer.js";import{hasContent as f,META_TEXT as u,SHEET_PAD_X as p}from"../../internal/scale.js";const v={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},b={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"};function g({title:t,rows:r,total:n,ticked:o,onTick:c,onTickAll:m,search:d,onSearch:h,searchable:f,disabled:g,height:x,messages:w,variant:k,size:j,color:y}){const S=r.filter(e=>!e.disabled),N=S.filter(e=>o.has(e.value)),z=S.length>0&&N.length===S.length,C=N.length>0&&!z,T=p[j];return a(l,{variant:k,size:j,padded:!1,className:"mp-transfer__panel flex min-w-0 flex-col overflow-hidden",children:[a("div",{className:["mp-transfer__heading border-mp-outline-variant flex items-center gap-2 border-b",T,v[j]].join(" "),children:[e("div",{className:"min-w-0 flex-1",children:e(s,{size:j,color:y,checked:z,indeterminate:C,disabled:g||0===S.length,label:e("span",{className:"block truncate font-medium",children:t}),onCheckedChange:e=>m(e)})}),a("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${u}`,children:[N.length,"/",n]})]}),f?e("div",{className:`${T} ${v[j]}`,children:e(i,{size:j,fullWidth:!0,disabled:g,placeholder:w.search,"aria-label":w.search,value:d,onChange:h})}):null,e("div",{className:`mp-transfer__list flex flex-col overflow-y-auto overscroll-contain ${T} ${v[j]}`,style:{height:x},children:0===r.length?e("span",{className:`text-mp-on-surface-variant ${u} ${b[j]}`,children:w.empty}):r.map((a,t)=>e("div",{className:b[j],children:e(s,{size:j,color:y,label:a.label,checked:o.has(a.value),disabled:g||a.disabled,onCheckedChange:e=>c(a.value,e)})},`${t}:${a.value}`))})]})}function x(e,a){return""===a||("string"!=typeof e.label||e.label.toLowerCase().includes(a.toLowerCase()))}export const MPTransfer=/*@__PURE__*/t.forwardRef(function({items:l,value:s,defaultValue:i,onValueChange:u,sourceLabel:p,targetLabel:v,searchable:b=!1,height:w=220,disabled:k=!1,variant:j="outlined",size:y="md",color:S="primary",locale:N,labels:z,className:C,...T},$){const _=c(N),M=m(h,_,z),[P,L]=t.useState(i??[]),A=s??P,[B,I]=t.useState(()=>new Set),[V,E]=t.useState(""),[F,R]=t.useState(""),W=t.useMemo(()=>new Set(A),[A]),q=l.filter(e=>!W.has(e.value)),D=l.filter(e=>W.has(e.value));t.useEffect(()=>{const e=new Set(l.map(e=>e.value));I(a=>{const t=[...a].filter(a=>e.has(a));return t.length===a.size?a:new Set(t)})},[l]);const G=(e,a)=>{I(t=>{const l=new Set(t);return a?l.add(e):l.delete(e),l})},H=(e,a)=>{I(t=>{const l=new Set(t);for(const t of e)t.disabled||(a?l.add(t.value):l.delete(t.value));return l})},J=(e,a)=>{const t=e.filter(e=>!e.disabled&&B.has(e.value));if(0===t.length)return;const r=new Set(t.map(e=>e.value)),n=a?l.filter(e=>W.has(e.value)||r.has(e.value)).map(e=>e.value):A.filter(e=>!r.has(e));I(e=>new Set([...e].filter(e=>!r.has(e)))),(e=>{void 0===s&&L(e),u?.(e)})(n)},K=q.filter(e=>x(e,V)),O=D.filter(e=>x(e,F)),Q=K.some(e=>!e.disabled&&B.has(e.value)),U=O.some(e=>!e.disabled&&B.has(e.value)),X=d(w),Y={ticked:B,disabled:k,height:X,messages:M,variant:j,size:y,color:S,searchable:b};return a("div",{ref:$,"data-mp-size":y,className:["mp-transfer grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)]","min-[600px]:[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",C??""].filter(Boolean).join(" "),...T,children:[e(g,{...Y,title:f(p)?p:M.source,rows:K,total:q.length,onTick:G,onTickAll:e=>H(K,e),search:V,onSearch:E}),a("div",{className:"flex flex-row justify-center gap-2 min-[600px]:flex-col",children:[e(n,{size:y,color:S,variant:"text"===j?"text":"outlined",label:M.toTarget,disabled:k||!Q,onClick:()=>J(K,!0),icon:e(r,{icon:o,className:"rotate-90 min-[600px]:rotate-0"})}),e(n,{size:y,color:S,variant:"text"===j?"text":"outlined",label:M.toSource,disabled:k||!U,onClick:()=>J(O,!1),icon:e(r,{icon:o,className:"-rotate-90 min-[600px]:rotate-180"})})]}),e(g,{...Y,title:f(v)?v:M.target,rows:O,total:D.length,onTick:G,onTickAll:e=>H(O,e),search:F,onSearch:R})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{MPBox as l}from"../box/MPBox.js";import{MPCheckbox as r}from"../checkbox/MPCheckbox.js";import{MPIcon as s}from"../icon/MPIcon.js";import{MPIconButton as i}from"../icon-button/MPIconButton.js";import{MPTextField as n}from"../text-field/MPTextField.js";import{ArrowRightIcon as o}from"../../constants/icons.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{cssLength as d}from"../../internal/length.js";import{TRANSFER as u}from"../../internal/messages/transfer.js";import{useMPColor as h,useMPSize as f}from"../../internal/config.js";import{hasContent as p,META_TEXT as v,SHEET_PAD_X as g}from"../../internal/scale.js";const b={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},x={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},w=new Set;function S({title:t,rows:s,total:i,ticked:o,arrived:c,onTick:m,onTickAll:d,search:u,onSearch:h,searchable:f,disabled:p,height:w,messages:S,variant:j,size:k,color:y}){const N=s.filter(e=>!e.disabled),T=N.filter(e=>o.has(e.value)),z=N.length>0&&T.length===N.length,C=T.length>0&&!z,$=g[k];return a(l,{variant:j,size:k,padded:!1,className:"mp-transfer__panel flex min-w-0 flex-col overflow-hidden",children:[a("div",{className:["mp-transfer__heading border-mp-outline-variant flex items-center gap-2 border-b",$,b[k]].join(" "),children:[e("div",{className:"min-w-0 flex-1",children:e(r,{size:k,color:y,checked:z,indeterminate:C,disabled:p||0===N.length,label:e("span",{className:"block truncate font-medium",children:t}),onCheckedChange:e=>d(e)})}),a("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${v}`,children:[T.length,"/",i]})]}),f?e("div",{className:`${$} ${b[k]}`,children:e(n,{size:k,fullWidth:!0,disabled:p,placeholder:S.search,"aria-label":S.search,value:u,onChange:h})}):null,e("div",{className:`mp-transfer__list flex flex-col overflow-y-auto overscroll-contain ${$} ${b[k]}`,style:{height:w},children:0===s.length?e("span",{className:`text-mp-on-surface-variant ${v} ${x[k]}`,children:S.empty}):s.map((a,t)=>e("div",{className:[x[k],c.has(a.value)?"mp-row-arrive":""].filter(Boolean).join(" "),children:e(r,{size:k,color:y,label:a.label,checked:o.has(a.value),disabled:p||a.disabled,onCheckedChange:e=>m(a.value,e)})},`${t}:${a.value}`))})]})}function j(e,a){return""===a||("string"!=typeof e.label||e.label.toLowerCase().includes(a.toLowerCase()))}export const MPTransfer=/*@__PURE__*/t.forwardRef(function({items:l,value:r,defaultValue:n,onValueChange:v,sourceLabel:g,targetLabel:b,searchable:x=!1,height:k=220,disabled:y=!1,variant:N="outlined",size:T,color:z,locale:C,labels:$,className:_,...M},P){const B=f(T),L=h(z),A=c(C),I=m(u,A,$),[V,E]=t.useState(n??[]),F=r??V,[R,W]=t.useState(()=>new Set),[q,D]=t.useState(()=>({values:new Set,toTarget:!0})),[G,H]=t.useState(""),[J,K]=t.useState(""),O=t.useMemo(()=>new Set(F),[F]),Q=l.filter(e=>!O.has(e.value)),U=l.filter(e=>O.has(e.value));t.useEffect(()=>{const e=new Set(l.map(e=>e.value));W(a=>{const t=[...a].filter(a=>e.has(a));return t.length===a.size?a:new Set(t)})},[l]);const X=(e,a)=>{W(t=>{const l=new Set(t);return a?l.add(e):l.delete(e),l})},Y=(e,a)=>{W(t=>{const l=new Set(t);for(const t of e)t.disabled||(a?l.add(t.value):l.delete(t.value));return l})},Z=(e,a)=>{const t=e.filter(e=>!e.disabled&&R.has(e.value));if(0===t.length)return;const s=new Set(t.map(e=>e.value)),i=a?l.filter(e=>O.has(e.value)||s.has(e.value)).map(e=>e.value):F.filter(e=>!s.has(e));W(e=>new Set([...e].filter(e=>!s.has(e)))),D({values:s,toTarget:a}),(e=>{void 0===r&&E(e),v?.(e)})(i)},ee=Q.filter(e=>j(e,G)),ae=U.filter(e=>j(e,J)),te=ee.some(e=>!e.disabled&&R.has(e.value)),le=ae.some(e=>!e.disabled&&R.has(e.value)),re=d(k),se={ticked:R,disabled:y,height:re,messages:I,variant:N,size:B,color:L,searchable:x};return a("div",{ref:P,"data-mp-size":B,className:["mp-transfer grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)]","mp-medium:[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",_??""].filter(Boolean).join(" "),...M,children:[e(S,{...se,title:p(g)?g:I.source,rows:ee,total:Q.length,arrived:q.toTarget?w:q.values,onTick:X,onTickAll:e=>Y(ee,e),search:G,onSearch:H}),a("div",{className:"flex flex-row justify-center gap-2 mp-medium:flex-col",children:[e(i,{size:B,color:L,variant:"text"===N?"text":"outlined",label:I.toTarget,disabled:y||!te,onClick:()=>Z(ee,!0),icon:e(s,{icon:o,className:"rotate-90 mp-medium:rotate-0"})}),e(i,{size:B,color:L,variant:"text"===N?"text":"outlined",label:I.toSource,disabled:y||!le,onClick:()=>Z(ae,!1),icon:e(s,{icon:o,className:"-rotate-90 mp-medium:rotate-180"})})]}),e(S,{...se,title:p(b)?b:I.target,rows:ae,total:U.length,arrived:q.toTarget?q.values:w,onTick:X,onTickAll:e=>Y(ae,e),search:J,onSearch:K})]})});

package/dist/components/tree-select/MPTreeSelect.d.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { type MPTreeViewValue } from '../tree-view/MPTreeView.js';
+import { type MPPickerShellProps } from '../../internal/Picker.js';
+import type { MPPickerLabels } from '../../internal/Calendar.js';
+import type { MPSlots } from '../../types.js';
+/** One node of the tree the reader is choosing from. */
+export interface MPTreeSelectItem {
+    /** What is stored when this node is chosen. Unique across the whole tree. */
+    value: MPTreeViewValue;
+    label: React.ReactNode;
+    /** What a search matches against. Falls back to `label` when it is a string. */
+    searchLabel?: string;
+    startIcon?: React.ReactNode;
+    disabled?: boolean;
+    /**
+     * Whether this node may itself be chosen.
+     *
+     * `false` makes it a heading with children under it — a "Europe" that groups
+     * countries without being one. Defaults to `true` for a leaf and follows
+     * `selectableBranches` for a node that has children.
+     */
+    selectable?: boolean;
+    children?: MPTreeSelectItem[];
+}
+/** The parts an `MPTreeSelect` draws that a `className` cannot reach. */
+export type MPTreeSelectSlot = 'popup' | 'tree' | 'item' | 'empty';
+export interface MPTreeSelectProps extends MPPickerShellProps {
+    /** The tree, as nested items. */
+    items?: MPTreeSelectItem[];
+    /** The chosen value, or values when `multiple`. */
+    value?: MPTreeViewValue | MPTreeViewValue[] | null;
+    defaultValue?: MPTreeViewValue | MPTreeViewValue[] | null;
+    onValueChange?: (value: MPTreeViewValue[]) => void;
+    /** Whether more than one node may be held. @default false */
+    multiple?: boolean;
+    /**
+     * Whether a node that has children may itself be chosen.
+     *
+     * Off by default, which is the shape most of these trees have: the branches
+     * are the taxonomy and the leaves are the answers, and a "Europe" that can be
+     * chosen alongside "France" is usually a data model nobody meant. An item's
+     * own `selectable` overrides it either way.
+     * @default false
+     */
+    selectableBranches?: boolean;
+    /** Which branches start open. */
+    defaultExpanded?: MPTreeViewValue[];
+    expanded?: MPTreeViewValue[];
+    onExpandedChange?: (expanded: MPTreeViewValue[]) => void;
+    /** Whether the popup is open. Use with `onOpenChange` to control it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Shown in the trigger while nothing is chosen. */
+    placeholder?: React.ReactNode;
+    /** Offers the × that empties the control. @default false */
+    clearable?: boolean;
+    /** Closes the popup as soon as a node is chosen. @default !multiple */
+    closeOnSelect?: boolean;
+    /**
+     * Offers a field above the tree that filters it.
+     *
+     * A match keeps its ancestors, because a node with its parents cut away is a
+     * node the reader cannot place — "Seoul" under nothing at all.
+     * @default false
+     */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /**
+     * Which language this draws its own strings in — the search field's
+     * placeholder, the line an empty tree shows, the × that empties the control.
+     */
+    locale?: string;
+    /** How the trigger writes what is held. Defaults to the labels, comma-joined. */
+    format?: (chosen: MPTreeSelectItem[]) => React.ReactNode;
+    labels?: Partial<MPPickerLabels>;
+    /** Identifies the field when a form is submitted. One input per value. */
+    name?: string;
+    classNames?: MPSlots<MPTreeSelectSlot>;
+}
+/**
+ * A value chosen from a tree rather than from a list.
+ *
+ * ```tsx
+ * <MPTreeSelect label="Category" items={categories} searchable />
+ * ```
+ *
+ * The gap between `MPSelect` and `MPTreeView`: the first is a flat list behind
+ * a field, the second is a hierarchy that shows what it holds but has no field.
+ * A category, a folder, an org-chart node and a region are all chosen from a
+ * shape a flat list flattens away.
+ *
+ * ## Branches are not answers by default
+ *
+ * `selectableBranches` is off, because that is the shape most of these trees
+ * have: the branches are the taxonomy and the leaves are the answers, and a
+ * "Europe" that can be chosen alongside "France" is usually a data model
+ * nobody meant. An item's own `selectable` overrides it either way, which is how
+ * a tree with one selectable branch says so.
+ *
+ * A branch that cannot be chosen still opens and shuts, and still looks like
+ * every other row — it is not the answer, which is not the same as being
+ * unavailable. Its press is answered here rather than by the tree, so that a
+ * press on "Europe" leaves the "France" underneath it alone.
+ *
+ * ## A search keeps the ancestors
+ *
+ * Filtered to bare matches, a tree is a list — and a list of leaves is exactly
+ * what a tree was chosen over. So a match brings its parents with it, and every
+ * branch the filter kept is opened: a match folded inside a shut parent is a
+ * match the reader was not shown.
+ */
+export declare const MPTreeSelect: React.ForwardRefExoticComponent<MPTreeSelectProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/tree-select/MPTreeSelect.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{MPTreeItem as n,MPTreeView as r}from"../tree-view/MPTreeView.js";import{MPPickerShell as t}from"../../internal/Picker.js";import{useMPLocale as o,useMPMessages as i}from"../../internal/locale.js";import{COMBOBOX as s}from"../../internal/messages/combobox.js";import{TRANSFER as c}from"../../internal/messages/transfer.js";import{PICKER as d}from"../../internal/messages/picker.js";import{META_TEXT as p}from"../../internal/scale.js";import{useMPColor as m,useMPSize as u}from"../../internal/config.js";function h(e,l=new Map){for(const a of e)l.set(a.value,a),a.children&&h(a.children,l);return l}const f=e=>e.trim().toLocaleLowerCase();function v(e){return f(e.searchLabel??("string"==typeof e.label?e.label:String(e.value)))}function g(e,l){if(""===l)return e;const a=[];for(const n of e){const e=n.children?g(n.children,l):void 0,r=v(n).includes(l);(r||e&&e.length>0)&&a.push({...n,children:r?n.children:e})}return a}function b(e,l=[]){for(const a of e)a.children&&a.children.length>0&&(l.push(a.value),b(a.children,l));return l}export const MPTreeSelect=/*@__PURE__*/a.forwardRef(function({items:v=[],value:x,defaultValue:j,onValueChange:y,multiple:C=!1,selectableBranches:S=!1,defaultExpanded:w,expanded:N,onExpandedChange:M,open:O,defaultOpen:_,onOpenChange:k,placeholder:P,clearable:V=!1,closeOnSelect:z,searchable:B=!1,searchPlaceholder:E,locale:L,format:T,labels:A,name:I,size:R,color:D,readOnly:q=!1,disabled:F=!1,classNames:G,...H},J){const K=u(R),Q=m(D),U=o(L),W=i(s,U),X=i(d,U,A),Y=i(c,U),Z=e=>null==e?[]:Array.isArray(e)?e:[e],[$,ee]=a.useState(()=>Z(j)),le=void 0!==x?Z(x):$,[ae,ne]=a.useState(_??!1),re=O??ae,[te,oe]=a.useState(""),ie=a.useMemo(()=>h(v),[v]),se=f(te),ce=a.useMemo(()=>g(v,se),[v,se]),de=a.useMemo(()=>""===se?void 0:b(ce),[se,ce]),[pe,me]=a.useState(()=>w??[]),ue=de??N??pe,he=e=>{de||(void 0===N&&me(e),M?.(e))},fe=e=>{e&&(q||F)||(void 0===O&&ne(e),e||oe(""),k?.(e))},ve=e=>{void 0===x&&ee(e),y?.(e)},ge=e=>e.selectable??(!(e.children&&e.children.length>0)||S),be=e=>l=>{l.preventDefault(),e.children&&e.children.length>0&&he(ue.includes(e.value)?ue.filter(l=>l!==e.value):[...ue,e.value])},xe=le.map(e=>ie.get(e)).filter(e=>void 0!==e),je=0===xe.length?P??"":T?T(xe):xe.map(e=>e.label).reduce((e,l,a)=>0===a?[l]:[...e,", ",l],[]),ye=l=>l.map(l=>e(n,{value:l.value,label:l.label,startIcon:l.startIcon,disabled:l.disabled,onClick:ge(l)?void 0:be(l),className:G?.item,children:l.children?ye(l.children):null},l.value));return e(t,{...H,slug:"tree-select",size:K,color:Q,readOnly:q,disabled:F,triggerRef:J,display:je,empty:0===xe.length,clearable:V,onClear:()=>ve([]),open:re,onOpenChange:fe,labels:X,hiddenValues:I?le.map(e=>({name:I,value:String(e)})):void 0,children:l("div",{className:["mp-tree-select__popup flex max-h-80 w-64 flex-col gap-2",G?.popup??""].filter(Boolean).join(" "),children:[B?e("input",{type:"text",value:te,placeholder:E??Y.search,"aria-label":E??Y.search,onChange:e=>oe(e.currentTarget.value),className:["mp-tree-select__search text-mp-on-surface w-full shrink-0 bg-transparent","placeholder:text-mp-on-surface-variant px-1 py-1 [font:inherit] outline-none"].join(" ")}):null,e("div",{className:"min-h-0 flex-1 overflow-auto",children:0===ce.length?e("p",{className:["mp-tree-select__empty text-mp-on-surface-variant m-0 px-1 py-2",p,G?.empty??""].filter(Boolean).join(" "),children:W.empty}):e(r,{size:K,variant:"text",multiple:C,selected:le,onSelectedChange:e=>{const l=e.filter(e=>ie.has(e));ve(C?l:l.slice(-1)),(z??!C)&&fe(!1)},expanded:ue,onExpandedChange:he,className:G?.tree,children:ye(ce)})})]})})});

package/dist/components/tree-select/index.d.ts

@@ -0,0 +1,2 @@
+export { MPTreeSelect } from './MPTreeSelect.js';
+export type { MPTreeSelectItem, MPTreeSelectProps, MPTreeSelectSlot } from './MPTreeSelect.js';

package/dist/components/tree-select/index.js

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

package/dist/components/tree-view/MPTreeView.d.ts

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import type { MPDensity, MPElevation, MPSize, MPVariant } from '../../types.js';
+/**
+ * How the hierarchy is drawn between the rows.
+ *
+ * - `none` — indentation only. The quietest, and usually right for a navigation
+ *   sidebar, where the tree is two levels deep and the labels say what the
+ *   structure is.
+ * - `simple` — one hairline rail per level, running the full height of the
+ *   group. Enough to follow a column of rows back to the branch it belongs to.
+ * - `folder` — the rail plus an elbow into every row, with the rail under a
+ *   last child stopping at that row. The file-manager drawing, and the one to
+ *   reach for when the tree is deep.
+ */
+export type MPTreeViewLines = 'none' | 'simple' | 'folder';
+/** A row's identity, and what `expanded` and `selected` are lists of. */
+export type MPTreeViewValue = string | number;
+export interface MPTreeViewProps extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'defaultValue' | 'onSelect'> {
+    /**
+     * How much surface the sheet paints.
+     *
+     * A container's ladder, so the sheet is never dyed — a tree holds other
+     * people's labels, and those arrive with colours of their own. `text` is the
+     * one to reach for in a sidebar: the sidebar is already a surface, and a
+     * second bordered rectangle inside it is a second rectangle.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /** How far off the page the sheet is lifted, on MD3's five levels. */
+    elevation?: MPElevation;
+    /** The row height and the type the labels are set in. @default 'md' */
+    size?: MPSize;
+    /** Takes room out of that row height, four pixels a step. @default 0 */
+    density?: MPDensity;
+    /**
+     * How the hierarchy is drawn between the rows.
+     * @default 'simple'
+     */
+    lines?: MPTreeViewLines;
+    /** Which branches are open. Use with `onExpandedChange` for a controlled tree. */
+    expanded?: MPTreeViewValue[];
+    /** Which start open, for an uncontrolled one. */
+    defaultExpanded?: MPTreeViewValue[];
+    onExpandedChange?: (expanded: MPTreeViewValue[]) => void;
+    /**
+     * Which rows are chosen. An array even when only one row may be chosen at a
+     * time — the same shape `MPAccordion`'s value takes, so turning `multiple` on
+     * does not also change the type of the value.
+     */
+    selected?: MPTreeViewValue[];
+    /** Which start chosen, for an uncontrolled one. */
+    defaultSelected?: MPTreeViewValue[];
+    onSelectedChange?: (selected: MPTreeViewValue[]) => void;
+    /**
+     * Whether more than one row may be chosen at a time.
+     * @default false
+     */
+    multiple?: boolean;
+    /** Every row stops answering. */
+    disabled?: boolean;
+    /** The name the tree is announced by. */
+    label?: string;
+    /** The top-level `MPTreeItem`s. */
+    children?: React.ReactNode;
+}
+export interface MPTreeItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'onClick'> {
+    /**
+     * Identifies the row to `expanded` and `selected`. One is generated when it is
+     * left out, which is fine for a tree nobody drives from code.
+     */
+    value?: MPTreeViewValue;
+    /**
+     * The row's text. Its own prop rather than `children`, because in a tree the
+     * children are the rows underneath it.
+     */
+    label?: React.ReactNode;
+    /** Content before the label — a folder glyph, a file type, a status dot. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, inside the pressable area — a count, a badge. */
+    endIcon?: React.ReactNode;
+    /**
+     * A control pinned to the end of the row, deliberately outside the pressable
+     * area — the same shape `MPListItem` uses. A row that both opens and holds a
+     * menu button has two things to press.
+     */
+    action?: React.ReactNode;
+    /** Renders the row as a link, for a tree that is navigation. */
+    href?: string;
+    /** Fires when the row is pressed, before it opens or is chosen. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * Forces the disclosure arrow onto a row with no children yet — the branch
+     * that is fetched the first time it is opened.
+     */
+    expandable?: boolean;
+    /** Unavailable. Its branch, if it is open, keeps working. */
+    disabled?: boolean;
+    /** The rows underneath this one. */
+    children?: React.ReactNode;
+}
+/**
+ * A tree of rows that open and shut.
+ *
+ * ```tsx
+ * <MPTreeView label="Files" defaultExpanded={['src']}>
+ *   <MPTreeItem value="src" label="src">
+ *     <MPTreeItem value="index" label="index.ts" />
+ *   </MPTreeItem>
+ * </MPTreeView>
+ * ```
+ *
+ * There is no Base UI primitive under this — the library has no tree — and the
+ * three things a tree owes are most of the component: the
+ * `tree`/`treeitem`/`group` roles, one tab stop for the whole widget, and the
+ * arrow keys that walk it.
+ *
+ * ## The keyboard is handled once, at the top
+ *
+ * A tree's arrow keys are questions about the **tree** — what is the next
+ * visible row, where is my parent — and the only element that can answer them
+ * is the one holding all of them. The rows a query returns are in document
+ * order, which is reading order, because a shut branch is unmounted rather than
+ * hidden.
+ *
+ * | | |
+ * | --- | --- |
+ * | Up, Down | The previous and next visible row |
+ * | Home, End | The first and last |
+ * | Right | Opens a shut branch; steps into an open one |
+ * | Left | Shuts an open branch; steps out of a leaf |
+ * | Enter, Space | Presses the row, which chooses it and opens it |
+ *
+ * Right and Left swap under RTL, read off the element rather than off a prop: a
+ * caller may have set `dir` three ancestors up, and ArrowRight has to mean
+ * "further in" either way.
+ *
+ * ## Why the arrow is not a button
+ *
+ * The `<li>` is the `treeitem` and it is what takes focus, which is the ARIA
+ * pattern. A button inside it would be a second tab stop in a widget that is
+ * supposed to have exactly one — and the keyboard already opens a branch with
+ * ArrowRight. So the disclosure arrow is a plain span with a click handler: a
+ * pointer target, and nothing a keyboard has to walk past.
+ */
+export declare const MPTreeView: React.ForwardRefExoticComponent<MPTreeViewProps & React.RefAttributes<HTMLUListElement>>;
+/**
+ * One row, and everything under it.
+ *
+ * The `<li>` is the `treeitem` and it is what takes focus, which is the ARIA
+ * pattern — see the note on `MPTreeView` for why that makes the disclosure
+ * arrow a span rather than a button.
+ */
+export declare const MPTreeItem: React.ForwardRefExoticComponent<MPTreeItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/tree-view/MPTreeView.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{MPIcon as n}from"../icon/MPIcon.js";import{ChevronDownIcon as a}from"../../constants/icons.js";import{containerSurface as o}from"../../internal/elevation.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,PROSE_TEXT as c,hasContent as u}from"../../internal/scale.js";import{useMPDensity as d,useMPSize as m}from"../../internal/config.js";const p=/*@__PURE__*/r.createContext({size:"md",density:0,disabled:!1,expandedKeys:new Set,selectedKeys:new Set,activeKey:null,toggle:()=>{},select:()=>{},activate:()=>{},register:()=>()=>{}}),f=/*@__PURE__*/r.createContext(!1),g={xs:28,sm:32,md:40,lg:48,xl:56},x={xs:14,sm:16,md:20,lg:24,xl:28},v={xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"},h="rounded-mp-full",b={none:"",simple:"mp-tree--simple",folder:"mp-tree--folder"};function y(e,t){return Math.max(24,g[e]+4*t)}function w(e){return Array.from(e.querySelectorAll('[role="treeitem"]')).filter(e=>null===e.closest("[data-mp-closing]"))}const k=e=>String(e);export const MPTreeView=/*@__PURE__*/r.forwardRef(function({variant:t="outlined",elevation:n,size:a,density:i,lines:s="simple",expanded:l,defaultExpanded:c,onExpandedChange:u,selected:f,defaultSelected:g,onSelectedChange:v,multiple:h=!1,disabled:C=!1,label:j,className:N,style:S,children:_,onKeyDown:A,...K},D){const P=m(a),E=d(i),[R,M]=r.useState(c??[]),[I,z]=r.useState(g??[]),[B,F]=r.useState(null),T=l??R,V=f??I,L=r.useRef(null),$=r.useCallback(e=>{L.current=e,"function"==typeof D?D(e):D&&(D.current=e)},[D]),q=r.useCallback(e=>{const t=k(e),r=l??R,n=r.some(e=>k(e)===t)?r.filter(e=>k(e)!==t):[...r,e];void 0===l&&M(n),u?.(n)},[l,R,u]),H=r.useCallback(e=>{const t=k(e),r=f??I,n=r.some(e=>k(e)===t),a=h?n?r.filter(e=>k(e)!==t):[...r,e]:[e];void 0===f&&z(a),v?.(a)},[h,f,I,v]),O=r.useRef(new Map),U=r.useCallback((e,t)=>(O.current.set(e,t),()=>{O.current.delete(e)}),[]),G=r.useMemo(()=>T.map(k).join("\0"),[T]),J=r.useMemo(()=>V.map(k).join("\0"),[V]),Q=r.useMemo(()=>({size:P,density:E,disabled:C,expandedKeys:new Set(T.map(k)),selectedKeys:new Set(V.map(k)),activeKey:B,toggle:q,select:H,activate:F,register:U}),[P,E,C,G,J,B,q,H,U]);return r.useEffect(()=>{if(null!==B&&O.current.has(B))return;const e=L.current;if(!e)return;const t=w(e);t.length>0&&F(t[0].dataset.mpValue??null)}),e(p.Provider,{value:Q,children:e("ul",{ref:$,role:"tree","aria-label":j,"aria-multiselectable":h||void 0,"data-mp-size":P,"data-mp-variant":t,className:["mp-tree rounded-mp-md m-0 box-border flex list-none flex-col p-1",o(t,n),"text-mp-on-surface",b[s],N??""].filter(Boolean).join(" "),style:{"--_mp-tree-indent":`${x[P]}px`,"--_mp-tree-row":`${y(P,E)}px`,...S},onKeyDown:function(e){if(A?.(e),e.defaultPrevented)return;const t=L.current,r=e.target?.closest?.('[role="treeitem"]');if(!t||!r||!t.contains(r))return;const n=w(t),a=n.indexOf(r);if(-1===a)return;const o=t=>{t&&(e.preventDefault(),F(t.dataset.mpValue??null),t.focus())},i=e=>{const t=e.dataset.mpValue;t&&O.current.get(t)?.toggle()},s="rtl"===getComputedStyle(t).direction,l=s?"ArrowLeft":"ArrowRight",c=s?"ArrowRight":"ArrowLeft",u=r.getAttribute("aria-expanded");switch(e.key){case"ArrowDown":o(n[a+1]);break;case"ArrowUp":o(n[a-1]);break;case"Home":o(n[0]);break;case"End":o(n[n.length-1]);break;case l:"false"===u?(e.preventDefault(),i(r)):"true"===u&&o(n[a+1]);break;case c:"true"===u?(e.preventDefault(),i(r)):o(r.parentElement?.closest('[role="treeitem"]'));break;case"Enter":case" ":e.preventDefault(),r.click()}},...K,children:_})})});export const MPTreeItem=/*@__PURE__*/r.forwardRef(function({value:o,label:d,startIcon:m,endIcon:g,action:x,href:b,expandable:y,disabled:w=!1,className:C,children:j,onClick:N,...S},_){const{size:A,disabled:K,expandedKeys:D,selectedKeys:P,activeKey:E,toggle:R,select:M,activate:I,register:z}=r.useContext(p),B=r.useId(),F=o??B,T=k(F),V=r.useRef(null),L=r.useCallback(e=>{V.current=e,"function"==typeof _?_(e):_&&(_.current=e)},[_]),$=r.Children.toArray(j),q=y??$.length>0,H=q&&D.has(T),O=P.has(T),U=w||K,G=r.useRef({toggle:()=>{}});G.current.toggle=()=>{!U&&q&&R(F)};const J=r.useContext(f);r.useEffect(()=>J?void 0:z(T,G.current),[J,T,z]);const[Q,W]=r.useState(H),[X,Y]=r.useState(H),Z=r.useRef(null);r.useEffect(()=>{if(H){W(!0);const e=requestAnimationFrame(()=>Y(!0));return()=>cancelAnimationFrame(e)}Y(!1);const e=Z.current;(null===e||getComputedStyle(e).transitionDuration.split(",").every(e=>0===Number.parseFloat(e)))&&W(!1)},[H]);const ee=["mp-tree__row group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","h-(--_mp-tree-row) no-underline",v[A],h,s[A],c[A],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-focus-visible/tree-item:outline-mp-secondary","group-focus-visible/tree-item:outline-2 group-focus-visible/tree-item:-outline-offset-2","group-focus-visible/tree-item:outline-solid",U?"text-mp-on-surface/38 cursor-default":O?"bg-mp-secondary-container text-mp-on-secondary-container cursor-pointer":"text-mp-on-surface cursor-pointer"].filter(Boolean).join(" "),te=t(r.Fragment,{children:[U?null:e(i,{}),e("span",{"aria-hidden":"true",onClick:e=>{!U&&q&&(e.stopPropagation(),e.preventDefault(),V.current?.focus(),I(T),R(F))},className:["mp-tree__arrow relative flex h-[1lh] w-[1.15em] shrink-0 items-center justify-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none",q?"text-mp-on-surface-variant":"",H?"rotate-0":"-rotate-90 rtl:rotate-90"].filter(Boolean).join(" "),children:q?e(n,{icon:a,size:l[A]-6}):null}),u(m)?e("span",{className:"text-mp-on-surface-variant relative flex h-[1lh] shrink-0 items-center",children:m}):null,e("span",{className:"relative min-w-0 flex-1 truncate",children:d}),u(g)?e("span",{className:"text-mp-on-surface-variant relative flex h-[1lh] shrink-0 items-center",children:g}):null]});return t("li",{ref:L,role:"treeitem","aria-expanded":q?H:void 0,"aria-selected":!!O||void 0,"aria-disabled":U||void 0,"data-mp-value":T,tabIndex:E===T?0:-1,className:["mp-tree__item group/tree-item relative block",C??""].filter(Boolean).join(" "),style:{outline:"none"},onClick:function(e){e.stopPropagation(),U?e.preventDefault():(V.current?.focus(),I(T),N?.(e),e.defaultPrevented||(q&&R(F),M(F)))},...S,children:[t("div",{className:"flex w-full items-center",children:[b&&!U?e("a",{href:b,tabIndex:-1,className:ee,"aria-current":O?"page":void 0,children:te}):e("div",{className:ee,children:te}),u(x)?e("span",{className:`mp-tree__action flex shrink-0 items-center ${v[A]}`,onClick:e=>e.stopPropagation(),children:x}):null]}),q&&Q&&$.length>0?e("div",{ref:Z,"data-mp-closing":H?void 0:"",className:["mp-tree__branch grid","transition-[grid-template-rows] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none",X?"grid-rows-[1fr]":"pointer-events-none grid-rows-[0fr]"].join(" "),onTransitionEnd:e=>{e.target!==e.currentTarget||"grid-template-rows"!==e.propertyName||H||W(!1)},children:e("ul",{role:"group",className:"m-0 min-h-0 list-none overflow-hidden ps-(--_mp-tree-indent)",children:e(f.Provider,{value:J||!H,children:j})})}):null]})});

package/dist/components/tree-view/index.d.ts

@@ -0,0 +1,2 @@
+export { MPTreeItem, MPTreeView } from './MPTreeView.js';
+export type { MPTreeItemProps, MPTreeViewLines, MPTreeViewProps, MPTreeViewValue } from './MPTreeView.js';

package/dist/components/tree-view/index.js

@@ -0,0 +1 @@
+export{MPTreeItem,MPTreeView}from"./MPTreeView.js";