material-plus-ui 1.6.0 → 1.8.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";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]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Toggle as o}from"@base-ui/react/toggle";import{accentSlots as n}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 d,CONTROL_TEXT as p,hasContent as m}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={filled:"border-0 bg-mp-surface-container-highest text-mp-on-surface-variant",tonal:"border-0 bg-mp-surface-container text-mp-on-surface-variant",elevated:"shadow-mp-1 border-0 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline border bg-transparent text-mp-on-surface-variant",text:"border-0 bg-transparent text-mp-on-surface-variant"},g={filled:"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-(--_mp-accent) border bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",text:"border-0 bg-transparent text-(--_mp-accent)"},x={filled:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"border-0 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:"border-0 bg-transparent text-mp-on-surface/38"};export const MPToggle=/*@__PURE__*/t.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=t.useContext(a),T=v??S?.variant??"outlined",W=f(h??S?.size),$=u(j??S?.color),q=w??S?.disabled??!1,A=!m(L);return r(o,{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],p[W],i[W],A?`${d[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:{...n($),...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/tooltip/MPTooltip.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as e from"react";import{Tooltip as a}from"@base-ui/react/tooltip";import{accentSlots as i}from"../../internal/accent.js";export const MPTooltipProvider=a.Provider;const l={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},s={xs:"px-1.5",sm:"px-2",md:"px-2",lg:"px-3",xl:"px-4"},r={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-small",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},d={xs:6,sm:7,md:8,lg:9,xl:10};export function MPTooltip({content:p,children:n,size:m="sm",color:c,side:x="top",align:y="center",sideOffset:u=6,delay:h,closeDelay:f,arrow:g=!0,open:b,defaultOpen:v,onOpenChange:_,disabled:P=!1,className:j,style:O}){const w=d[m],N=e.useId(),[z,T]=e.useState(v??!1),M=b??z,B={"--_mp-tooltip":c?`var(--_mp-color-${c})`:"var(--_mp-color-inverse-surface)","--_mp-on-tooltip":c?`var(--_mp-color-on-${c})`:"var(--_mp-color-inverse-on-surface)",...c?i(c):null};return o(a.Root,{open:b,defaultOpen:v,onOpenChange:t=>{void 0===b&&T(t),_?.(t)},children:[t(a.Trigger,{render:n,delay:h,closeDelay:f,disabled:P,"aria-describedby":M?N:void 0}),t(a.Portal,{children:t(a.Positioner,{className:"mp-portal z-50 outline-none",side:x,align:y,sideOffset:u,children:o(a.Popup,{id:N,role:"tooltip","data-mp-size":m,className:["mp-tooltip rounded-mp-xs max-w-64 outline-none","bg-(--_mp-tooltip) text-(--_mp-on-tooltip)","transition-opacity duration-(--mp-sys-motion-duration-short4)","data-starting-style:opacity-0 data-ending-style:opacity-0","data-instant:duration-0",s[m],l[m],r[m],j??""].filter(Boolean).join(" "),style:{...B,...O},children:[g?t(a.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:t("svg",{width:w,height:w/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:t("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-tooltip)"})})}):null,p]})})})]})}
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import*as t from"react";import{POPUP_ARROW_TURN as l,PopupArrow as i}from"../../internal/PopupArrow.js";import{Tooltip as r}from"@base-ui/react/tooltip";import{accentSlots as a}from"../../internal/accent.js";export const MPTooltipProvider=r.Provider;const s={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},n={xs:"px-1.5",sm:"px-2",md:"px-2",lg:"px-3",xl:"px-4"},p={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-small",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},m={xs:6,sm:7,md:8,lg:9,xl:10};export function MPTooltip({content:d,children:c,size:x="sm",color:y,side:u="top",align:f="center",sideOffset:g=6,delay:b,closeDelay:v,arrow:h=!0,open:_,defaultOpen:P,onOpenChange:j,disabled:O=!1,className:w,style:z}){const N=m[x],T=t.useId(),[A,C]=t.useState(P??!1),D=_??A,M={"--_mp-tooltip":y?`var(--_mp-color-${y})`:"var(--_mp-color-inverse-surface)","--_mp-on-tooltip":y?`var(--_mp-color-on-${y})`:"var(--_mp-color-inverse-on-surface)",...y?a(y):null};return e(r.Root,{open:_,defaultOpen:P,onOpenChange:o=>{void 0===_&&C(o),j?.(o)},children:[o(r.Trigger,{render:c,delay:b,closeDelay:v,disabled:O,"aria-describedby":D?T:void 0}),o(r.Portal,{children:o(r.Positioner,{className:"mp-portal z-50 outline-none",side:u,align:f,sideOffset:g,children:e(r.Popup,{id:T,role:"tooltip","data-mp-size":x,className:["mp-tooltip rounded-mp-xs max-w-64 outline-none","bg-(--_mp-tooltip) text-(--_mp-on-tooltip)","transition-opacity duration-(--mp-sys-motion-duration-short4)","data-starting-style:opacity-0 data-ending-style:opacity-0","data-instant:duration-0",n[x],s[x],p[x],w??""].filter(Boolean).join(" "),style:{...M,...z},children:[h?o(r.Arrow,{className:l,children:o(i,{size:N,fill:"var(--_mp-tooltip)"})}):null,d]})})})]})}

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 r}from"../icon/MPIcon.js";import{CloseIcon as s}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 u,useMPMessages as p}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 j,SHEET_TITLE as b,hasContent as w}from"../../internal/scale.js";import{MPStateLayer as N}from"../../internal/StateLayer.js";import{FADE as y,PORTAL_LAYER as S}from"../../internal/surface.js";import{VISUALLY_HIDDEN as k}from"../../internal/visually-hidden.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 z({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:C,open:M,defaultOpen:P=!1,onOpenChange:$,step:O,defaultStep:R=0,onStepChange:q,onFinish:E,scrim:F=!0,skippable:I=!0,dismissible:T=!0,scrollIntoView:A=!0,locale:D,labels:H,size:L,color:V,className:W,style:G,classNames:J}){const K=c(L),Q=a(V),U=u(D),X=p(f,U,H),Y=p(d,U),[Z,ee]=n.useState(P),[te,ne]=n.useState(R),oe=M??Z,ie=Math.min(O??te,Math.max(0,C.length-1)),re=C[ie],[se,le]=n.useState(null),[ae,ce]=n.useState(""),me=n.useRef(ie);n.useEffect(()=>{if(!oe)return me.current=ie,void ce("");if(me.current===ie)return;me.current=ie;const e=m(X.position,{index:String(ie+1),total:String(C.length)}),t=C[ie]?.title;ce("string"==typeof t&&""!==t?`${e}. ${t}`:e)},[oe,ie,C,X.position]);const ue=e=>{void 0===M&&ee(e),$?.(e)},pe=e=>{void 0===O&&ne(e),q?.(e)},de=re?.target,fe=re?.padding??6;if(n.useEffect(()=>{if(!oe||!de)return;const e=document.querySelector(de);if(!(e instanceof HTMLElement))return;A&&e.scrollIntoView({block:"center",inline:"nearest",behavior:"smooth"});let t=0,n="";const o=()=>{const i=e.getBoundingClientRect(),r=`${i.top} ${i.left} ${i.width} ${i.height}`;r!==n&&(n=r,le({selector:de,spot:{top:i.top-fe,left:i.left-fe,width:i.width+2*fe,height:i.height+2*fe}})),t=requestAnimationFrame(o)};return o(),()=>cancelAnimationFrame(t)},[oe,de,fe,A]),0===C.length)return null;const he=oe&&de&&se?.selector===de?se.spot:null,ge=0===ie,xe=ie===C.length-1,ve=B[K],je=w(re?.title)||w(re?.content);return t(o.Root,{open:oe,onOpenChange:(e,t)=>{e?ue(!0):"outside-press"===t.reason||"focus-out"===t.reason||"escape-key"===t.reason&&!T?t.cancel():ue(!1)},children:[oe&&F?e(z,{spot:he,className:J?.scrim}):null,e(o.Portal,{children:e(o.Positioner,{className:S,side:re?.side??"bottom",align:re?.align??"center",sideOffset:de?10:0,collisionPadding:12,anchor:()=>de?document.querySelector(de):{getBoundingClientRect:()=>new DOMRect(window.innerWidth/2,window.innerHeight/2,0,0)},children:t(o.Popup,{"data-mp-size":K,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",j[K],v[K],x[K],_[K],y,W??""].filter(Boolean).join(" "),style:{...l(Q),...G},children:[je?t("div",{className:"flex items-start gap-3",children:[t("div",{className:"flex min-w-0 flex-1 flex-col gap-1",children:[w(re?.title)?e(o.Title,{className:["text-mp-on-surface m-0 font-medium",b[K],J?.title??""].filter(Boolean).join(" "),children:re?.title}):null,w(re?.content)?e(o.Description,{className:["text-mp-on-surface-variant m-0 min-w-0",J?.content??""].filter(Boolean).join(" "),children:re?.content}):null]}),T?t("button",{type:"button","aria-label":Y.close,onClick:()=>ue(!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",J?.close??""].filter(Boolean).join(" "),children:[e(N,{className:"group-hover/close:opacity-8 group-focus-visible/close:opacity-10"}),e(r,{icon:s,size:h[K]})]}):null]}):null,e("span",{className:k,"aria-live":"polite",children:ae}),t("div",{className:["flex items-center gap-2",J?.footer??""].filter(Boolean).join(" "),children:[e("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${g}`,children:m(X.position,{index:String(ie+1),total:String(C.length)})}),t("div",{className:"ms-auto flex items-center gap-1",children:[I&&!xe?e(i,{size:ve,variant:"text",color:"secondary",onClick:()=>ue(!1),children:X.skip}):null,ge?null:e(i,{size:ve,variant:"outlined",color:Q,onClick:()=>pe(ie-1),children:X.previous}),e(i,{size:ve,color:Q,onClick:()=>xe?(E?.(),void ue(!1)):pe(ie+1),children:xe?X.done:X.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{useMPColor as f,useMPSize as u}from"../../internal/config.js";import{hasContent as p,META_TEXT as v,SHEET_PAD_X as b}from"../../internal/scale.js";const g={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"};function w({title:t,rows:r,total:n,ticked:o,onTick:c,onTickAll:m,search:d,onSearch:h,searchable:f,disabled:u,height:p,messages:w,variant:k,size:j,color:S}){const y=r.filter(e=>!e.disabled),N=y.filter(e=>o.has(e.value)),z=y.length>0&&N.length===y.length,C=N.length>0&&!z,T=b[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,g[j]].join(" "),children:[e("div",{className:"min-w-0 flex-1",children:e(s,{size:j,color:S,checked:z,indeterminate:C,disabled:u||0===y.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 ${v}`,children:[N.length,"/",n]})]}),f?e("div",{className:`${T} ${g[j]}`,children:e(i,{size:j,fullWidth:!0,disabled:u,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} ${g[j]}`,style:{height:p},children:0===r.length?e("span",{className:`text-mp-on-surface-variant ${v} ${x[j]}`,children:w.empty}):r.map((a,t)=>e("div",{className:x[j],children:e(s,{size:j,color:S,label:a.label,checked:o.has(a.value),disabled:u||a.disabled,onCheckedChange:e=>c(a.value,e)})},`${t}:${a.value}`))})]})}function k(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:v,sourceLabel:b,targetLabel:g,searchable:x=!1,height:j=220,disabled:S=!1,variant:y="outlined",size:N,color:z,locale:C,labels:T,className:$,..._},M){const P=u(N),L=f(z),A=c(C),B=m(h,A,T),[I,V]=t.useState(i??[]),E=s??I,[F,R]=t.useState(()=>new Set),[W,q]=t.useState(""),[D,G]=t.useState(""),H=t.useMemo(()=>new Set(E),[E]),J=l.filter(e=>!H.has(e.value)),K=l.filter(e=>H.has(e.value));t.useEffect(()=>{const e=new Set(l.map(e=>e.value));R(a=>{const t=[...a].filter(a=>e.has(a));return t.length===a.size?a:new Set(t)})},[l]);const O=(e,a)=>{R(t=>{const l=new Set(t);return a?l.add(e):l.delete(e),l})},Q=(e,a)=>{R(t=>{const l=new Set(t);for(const t of e)t.disabled||(a?l.add(t.value):l.delete(t.value));return l})},U=(e,a)=>{const t=e.filter(e=>!e.disabled&&F.has(e.value));if(0===t.length)return;const r=new Set(t.map(e=>e.value)),n=a?l.filter(e=>H.has(e.value)||r.has(e.value)).map(e=>e.value):E.filter(e=>!r.has(e));R(e=>new Set([...e].filter(e=>!r.has(e)))),(e=>{void 0===s&&V(e),v?.(e)})(n)},X=J.filter(e=>k(e,W)),Y=K.filter(e=>k(e,D)),Z=X.some(e=>!e.disabled&&F.has(e.value)),ee=Y.some(e=>!e.disabled&&F.has(e.value)),ae=d(j),te={ticked:F,disabled:S,height:ae,messages:B,variant:y,size:P,color:L,searchable:x};return a("div",{ref:M,"data-mp-size":P,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)]",$??""].filter(Boolean).join(" "),..._,children:[e(w,{...te,title:p(b)?b:B.source,rows:X,total:J.length,onTick:O,onTickAll:e=>Q(X,e),search:W,onSearch:q}),a("div",{className:"flex flex-row justify-center gap-2 min-[600px]:flex-col",children:[e(n,{size:P,color:L,variant:"text"===y?"text":"outlined",label:B.toTarget,disabled:S||!Z,onClick:()=>U(X,!0),icon:e(r,{icon:o,className:"rotate-90 min-[600px]:rotate-0"})}),e(n,{size:P,color:L,variant:"text"===y?"text":"outlined",label:B.toSource,disabled:S||!ee,onClick:()=>U(Y,!1),icon:e(r,{icon:o,className:"-rotate-90 min-[600px]:rotate-180"})})]}),e(w,{...te,title:p(g)?g:B.target,rows:Y,total:K.length,onTick:O,onTickAll:e=>Q(Y,e),search:D,onSearch:G})]})});
+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{fillMessage as h}from"../../internal/i18n.js";import{VISUALLY_HIDDEN as f}from"../../internal/visually-hidden.js";import{useMPColor as p,useMPSize as v}from"../../internal/config.js";import{hasContent as g,META_TEXT as b,SHEET_PAD_X as x}from"../../internal/scale.js";const w={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},k={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},S=new Set;function j({title:s,rows:i,total:o,ticked:c,arrived:m,onTick:d,onTickAll:u,search:h,onSearch:f,searchable:p,disabled:v,height:g,messages:S,variant:j,size:y,color:N}){const T=i.filter(e=>!e.disabled),z=T.filter(e=>c.has(e.value)),C=T.length>0&&z.length===T.length,$=z.length>0&&!C,_=x[y],M=t.useId();return a(l,{variant:j,size:y,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",_,w[y]].join(" "),children:[e("div",{className:"min-w-0 flex-1",children:e(r,{size:y,color:N,checked:C,indeterminate:$,disabled:v||0===T.length,label:e("span",{id:M,className:"block truncate font-medium",children:s}),onCheckedChange:e=>u(e)})}),a("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${b}`,children:[z.length,"/",o]})]}),p?e("div",{className:`${_} ${w[y]}`,children:e(n,{size:y,fullWidth:!0,disabled:v,placeholder:S.search,"aria-label":S.search,value:h,onChange:f})}):null,e("div",{role:"group","aria-labelledby":M,className:`mp-transfer__list flex flex-col overflow-y-auto overscroll-contain ${_} ${w[y]}`,style:{height:g},children:0===i.length?e("span",{className:`text-mp-on-surface-variant ${b} ${k[y]}`,children:S.empty}):i.map((a,t)=>e("div",{className:[k[y],m.has(a.value)?"mp-row-arrive":""].filter(Boolean).join(" "),children:e(r,{size:y,color:N,label:a.label,checked:c.has(a.value),disabled:v||a.disabled,onCheckedChange:e=>d(a.value,e)})},`${t}:${a.value}`))})]})}function y(e,a){if(""===a)return e;const t=a.toLowerCase();return e.filter(e=>"string"!=typeof e.label||e.label.toLowerCase().includes(t))}export const MPTransfer=/*@__PURE__*/t.forwardRef(function({items:l,value:r,defaultValue:n,onValueChange:b,sourceLabel:x,targetLabel:w,searchable:k=!1,height:N=220,disabled:T=!1,variant:z="outlined",size:C,color:$,locale:_,labels:M,className:P,...B},L){const A=v(C),I=p($),V=c(_),E=m(u,V,M),[F,R]=t.useState(n??[]),W=r??F,[q,D]=t.useState(()=>new Set),[G,H]=t.useState(()=>({values:new Set,toTarget:!0})),[J,K]=t.useState(""),[O,Q]=t.useState(""),[U,X]=t.useState(null),Y=t.useMemo(()=>new Set(W),[W]),Z=l.filter(e=>!Y.has(e.value)),ee=l.filter(e=>Y.has(e.value));t.useEffect(()=>{const e=new Set(l.map(e=>e.value));D(a=>{const t=[...a].filter(a=>e.has(a));return t.length===a.size?a:new Set(t)})},[l]);const ae=(e,a)=>{D(t=>{const l=new Set(t);return a?l.add(e):l.delete(e),l})},te=(e,a)=>{D(t=>{const l=new Set(t);for(const t of e)t.disabled||(a?l.add(t.value):l.delete(t.value));return l})},le=(e,a)=>{const t=e.filter(e=>!e.disabled&&q.has(e.value));if(0===t.length)return;const s=new Set(t.map(e=>e.value)),i=a?l.filter(e=>Y.has(e.value)||s.has(e.value)).map(e=>e.value):W.filter(e=>!s.has(e));D(e=>new Set([...e].filter(e=>!s.has(e)))),H({values:s,toTarget:a}),X(e=>{return{tick:(e?.tick??0)+1,text:h(E.moved,{count:String(t.length),list:(l=a?w:x,r=a?E.target:E.source,"string"==typeof l&&""!==l?l:r)})};var l,r}),(e=>{void 0===r&&R(e),b?.(e)})(i)},re=y(Z,J),se=y(ee,O),ie=re.some(e=>!e.disabled&&q.has(e.value)),ne=se.some(e=>!e.disabled&&q.has(e.value)),oe=d(N),ce={ticked:q,disabled:T,height:oe,messages:E,variant:z,size:A,color:I,searchable:k};return a("div",{ref:L,"data-mp-size":A,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)]",P??""].filter(Boolean).join(" "),...B,children:[e(j,{...ce,title:g(x)?x:E.source,rows:re,total:Z.length,arrived:G.toTarget?S:G.values,onTick:ae,onTickAll:e=>te(re,e),search:J,onSearch:K}),a("div",{className:"flex flex-row justify-center gap-2 mp-medium:flex-col",children:[e(i,{size:A,color:I,variant:"text"===z?"text":"outlined",label:E.toTarget,disabled:T||!ie,onClick:()=>le(re,!0),icon:e(s,{icon:o,className:"rotate-90 mp-medium:rotate-0"})}),e(i,{size:A,color:I,variant:"text"===z?"text":"outlined",label:E.toSource,disabled:T||!ne,onClick:()=>le(se,!1),icon:e(s,{icon:o,className:"-rotate-90 mp-medium:rotate-180"})})]}),e("span",{className:f,"aria-live":"polite","aria-atomic":"true",children:U?e("span",{children:U.text},U.tick):null}),e(j,{...ce,title:g(w)?w:E.target,rows:se,total:ee.length,arrived:G.toTarget?G.values:S,onTick:ae,onTickAll:e=>te(se,e),search:O,onSearch:Q})]})});

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