material-plus-ui 1.6.0 → 1.7.0

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

package/dist/components/typography/MPTypography.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPColor } from '../../types.js';
+import type { MPColor, MPTransition } from '../../types.js';
 /**
  * What a piece of text *is*, which decides both its type scale and the element
  * it renders as.
@@ -77,6 +77,15 @@ export interface MPTypographyProps extends Omit<React.ComponentPropsWithoutRef<'
      */
     render?: useRender.RenderProp;
     children?: React.ReactNode;
+    /**
+     * An entrance, run once as it mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     */
+    transition?: MPTransition;
 }
 /**
  * Text at one of Material's type roles.

package/dist/components/typography/MPTypography.js

@@ -1 +1,2 @@
-import*as p from"react";import{useRender as e}from"@base-ui/react/use-render";import{accentSlots as t}from"../../internal/accent.js";const r={h1:"[&.mp-typography]:text-mp-display-small",h2:"[&.mp-typography]:text-mp-headline-large",h3:"[&.mp-typography]:text-mp-headline-medium",h4:"[&.mp-typography]:text-mp-headline-small",h5:"[&.mp-typography]:text-mp-title-large",h6:"[&.mp-typography]:text-mp-title-medium",lead:"[&.mp-typography]:text-mp-title-large",body:"[&.mp-typography]:text-mp-body-large",caption:"[&.mp-typography]:text-mp-body-small",overline:"[&.mp-typography]:text-mp-label-small [&.mp-typography]:tracking-[0.08em] uppercase"},a={h1:"regular",h2:"regular",h3:"regular",h4:"regular",h5:"regular",h6:"medium",lead:"regular",body:"regular",caption:"regular",overline:"medium"},m={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},y={h1:"[&.mp-typography]:mb-4",h2:"[&.mp-typography]:mb-3.5",h3:"[&.mp-typography]:mb-3",h4:"[&.mp-typography]:mb-2.5",h5:"[&.mp-typography]:mb-2",h6:"[&.mp-typography]:mb-2",lead:"[&.mp-typography]:mb-4",body:"[&.mp-typography]:mb-3",caption:"[&.mp-typography]:mb-2",overline:"[&.mp-typography]:mb-2"},o="[&.mp-typography]:mt-0 [&.mp-typography]:ms-0 [&.mp-typography]:me-0",l={regular:"[&.mp-typography]:font-normal",medium:"[&.mp-typography]:font-medium",semibold:"[&.mp-typography]:font-semibold",bold:"[&.mp-typography]:font-bold"},h={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},n={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const MPTypography=/*@__PURE__*/p.forwardRef(function({level:g="body",color:i,weight:d,align:c,lines:s,gutter:b=!1,render:u,className:x,style:f,children:v,...j},w){const N=["mp-typography",r[g],l[d??a[g]],o,b?y[g]:"[&.mp-typography]:mb-0",c?h[c]:"",s?n[s]??"line-clamp-6":"",i?"[&.mp-typography]:text-(--_mp-accent)":"",x??""].filter(Boolean).join(" ");return e({render:u??p.createElement(m[g]),ref:w,props:{className:N,style:i?{...t(i),...f}:f,children:v,...j}})});
+"use client";
+import*as p from"react";import{useRender as t}from"@base-ui/react/use-render";import{accentSlots as e}from"../../internal/accent.js";import{transitionProps as r}from"../../internal/transition.js";const a={h1:"[&.mp-typography]:text-mp-display-small",h2:"[&.mp-typography]:text-mp-headline-large",h3:"[&.mp-typography]:text-mp-headline-medium",h4:"[&.mp-typography]:text-mp-headline-small",h5:"[&.mp-typography]:text-mp-title-large",h6:"[&.mp-typography]:text-mp-title-medium",lead:"[&.mp-typography]:text-mp-title-large",body:"[&.mp-typography]:text-mp-body-large",caption:"[&.mp-typography]:text-mp-body-small",overline:"[&.mp-typography]:text-mp-label-small [&.mp-typography]:tracking-[0.08em] uppercase"},m={h1:"regular",h2:"regular",h3:"regular",h4:"regular",h5:"regular",h6:"medium",lead:"regular",body:"regular",caption:"regular",overline:"medium"},o={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},y={h1:"[&.mp-typography]:mb-4",h2:"[&.mp-typography]:mb-3.5",h3:"[&.mp-typography]:mb-3",h4:"[&.mp-typography]:mb-2.5",h5:"[&.mp-typography]:mb-2",h6:"[&.mp-typography]:mb-2",lead:"[&.mp-typography]:mb-4",body:"[&.mp-typography]:mb-3",caption:"[&.mp-typography]:mb-2",overline:"[&.mp-typography]:mb-2"},l="[&.mp-typography]:mt-0 [&.mp-typography]:ms-0 [&.mp-typography]:me-0",h={regular:"[&.mp-typography]:font-normal",medium:"[&.mp-typography]:font-medium",semibold:"[&.mp-typography]:font-semibold",bold:"[&.mp-typography]:font-bold"},n={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},i={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const MPTypography=/*@__PURE__*/p.forwardRef(function({level:g="body",color:s,weight:c,align:d,lines:b,gutter:u=!1,render:x,transition:f,className:j,style:v,children:N,...$},w){const k=r(f),B=["mp-typography",a[g],h[c??m[g]],l,u?y[g]:"[&.mp-typography]:mb-0",d?n[d]:"",b?i[b]??"line-clamp-6":"",s?"[&.mp-typography]:text-(--_mp-accent)":"",j??""].filter(Boolean).join(" ");return t({render:x??p.createElement(o[g]),ref:w,props:{className:`${B}${k.className?` ${k.className}`:""}`,style:s?{...e(s),...k.style,...v}:{...k.style,...v},children:N,...$}})});

package/dist/constants/glyphs.d.ts

@@ -34,6 +34,8 @@ export declare const LinkIcon: import("react").ForwardRefExoticComponent<Omit<im
 export declare const ExternalLinkIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Copy to clipboard. */
 export declare const CopyIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Source as it was written — `MPCodeBlock`'s toggle out of the colouring. */
+export declare const CodeIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** A picture that could not be fetched — `MPImage`'s own fallback. */
 export declare const BrokenImageIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Severity: something worth knowing. */

package/dist/constants/glyphs.js

@@ -1,2 +1,2 @@
 "use client";
-import{ArrowDown as o,ArrowRight as n,ArrowUp as t,CalendarDays as c,Check as r,ChevronDown as e,ChevronLeft as s,ChevronRight as p,ChevronsLeft as I,ChevronsRight as x,ChevronUp as i,CircleAlert as h,CircleCheck as C,Clock as a,Copy as l,Ellipsis as v,ExternalLink as f,Eye as d,ImageOff as g,EyeOff as k,Info as w,Link as m,LoaderCircle as A,Menu as L,Minus as R,Plus as S,Search as u,Star as y,TriangleAlert as U,Upload as b,X as D}from"lucide-react";export const VisibilityIcon=d;export const VisibilityOffIcon=k;export const CloseIcon=D;export const CheckIcon=r;export const ChevronDownIcon=e;export const ChevronUpIcon=i;export const ChevronLeftIcon=s;export const ChevronRightIcon=p;export const ChevronsLeftIcon=I;export const ChevronsRightIcon=x;export const SearchIcon=u;export const ArrowUpIcon=t;export const ArrowDownIcon=o;export const ArrowRightIcon=n;export const MoreIcon=v;export const LinkIcon=m;export const ExternalLinkIcon=f;export const CopyIcon=l;export const BrokenImageIcon=g;export const InfoIcon=w;export const SuccessIcon=C;export const WarningIcon=U;export const ErrorIcon=h;export const AddIcon=S;export const RemoveIcon=R;export const UploadIcon=b;export const CalendarIcon=c;export const ClockIcon=a;export const StarIcon=y;export const SpinnerIcon=A;export const MenuIcon=L;
+import{ArrowDown as o,ArrowRight as n,ArrowUp as t,CalendarDays as c,Check as r,ChevronDown as e,ChevronLeft as s,ChevronRight as p,ChevronsLeft as I,ChevronsRight as x,ChevronUp as i,CircleAlert as C,CircleCheck as h,Clock as a,Code as l,Copy as v,Ellipsis as d,ExternalLink as f,Eye as g,ImageOff as k,EyeOff as w,Info as m,Link as A,LoaderCircle as L,Menu as R,Minus as S,Plus as u,Search as y,Star as U,TriangleAlert as b,Upload as D,X as E}from"lucide-react";export const VisibilityIcon=g;export const VisibilityOffIcon=w;export const CloseIcon=E;export const CheckIcon=r;export const ChevronDownIcon=e;export const ChevronUpIcon=i;export const ChevronLeftIcon=s;export const ChevronRightIcon=p;export const ChevronsLeftIcon=I;export const ChevronsRightIcon=x;export const SearchIcon=y;export const ArrowUpIcon=t;export const ArrowDownIcon=o;export const ArrowRightIcon=n;export const MoreIcon=d;export const LinkIcon=A;export const ExternalLinkIcon=f;export const CopyIcon=v;export const CodeIcon=l;export const BrokenImageIcon=k;export const InfoIcon=m;export const SuccessIcon=h;export const WarningIcon=b;export const ErrorIcon=C;export const AddIcon=u;export const RemoveIcon=S;export const UploadIcon=D;export const CalendarIcon=c;export const ClockIcon=a;export const StarIcon=U;export const SpinnerIcon=L;export const MenuIcon=R;

package/dist/constants/icons.d.ts

@@ -60,6 +60,7 @@ export declare const ICONS: {
     readonly link: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly 'external-link': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly copy: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly code: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly 'broken-image': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly info: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly success: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/constants/icons.js

@@ -1 +1 @@
-export*from"./glyphs.js";import{VisibilityIcon as r,VisibilityOffIcon as o,CloseIcon as e,CheckIcon as n,ChevronDownIcon as i,ChevronUpIcon as c,ChevronLeftIcon as s,ChevronRightIcon as h,ChevronsLeftIcon as l,ChevronsRightIcon as t,SearchIcon as a,ArrowUpIcon as p,ArrowDownIcon as v,ArrowRightIcon as f,MoreIcon as g,MenuIcon as m,LinkIcon as d,ExternalLinkIcon as w,CopyIcon as k,BrokenImageIcon as u,InfoIcon as y,SuccessIcon as b,WarningIcon as x,ErrorIcon as j,AddIcon as C,RemoveIcon as I,UploadIcon as N,CalendarIcon as O,ClockIcon as S,StarIcon as q,SpinnerIcon as z}from"./glyphs.js";export const ICONS={visibility:r,"visibility-off":o,close:e,check:n,"chevron-down":i,"chevron-up":c,"chevron-left":s,"chevron-right":h,"chevrons-left":l,"chevrons-right":t,search:a,"arrow-up":p,"arrow-down":v,"arrow-right":f,more:g,menu:m,link:d,"external-link":w,copy:k,"broken-image":u,info:y,success:b,warning:x,error:j,add:C,remove:I,upload:N,calendar:O,clock:S,star:q,spinner:z};
+export*from"./glyphs.js";import{VisibilityIcon as r,VisibilityOffIcon as o,CloseIcon as e,CheckIcon as n,ChevronDownIcon as c,ChevronUpIcon as i,ChevronLeftIcon as s,ChevronRightIcon as h,ChevronsLeftIcon as l,ChevronsRightIcon as t,SearchIcon as a,ArrowUpIcon as p,ArrowDownIcon as v,ArrowRightIcon as d,MoreIcon as f,MenuIcon as g,LinkIcon as m,ExternalLinkIcon as w,CopyIcon as k,CodeIcon as u,BrokenImageIcon as y,InfoIcon as b,SuccessIcon as x,WarningIcon as j,ErrorIcon as C,AddIcon as I,RemoveIcon as N,UploadIcon as O,CalendarIcon as S,ClockIcon as q,StarIcon as z,SpinnerIcon as A}from"./glyphs.js";export const ICONS={visibility:r,"visibility-off":o,close:e,check:n,"chevron-down":c,"chevron-up":i,"chevron-left":s,"chevron-right":h,"chevrons-left":l,"chevrons-right":t,search:a,"arrow-up":p,"arrow-down":v,"arrow-right":d,more:f,menu:g,link:m,"external-link":w,copy:k,code:u,"broken-image":y,info:b,success:x,warning:j,error:C,add:I,remove:N,upload:O,calendar:S,clock:q,star:z,spinner:A};

package/dist/hooks/index.d.ts

@@ -2,11 +2,21 @@
  * The machinery this library was already running, with a name a consumer can
  * import.
  *
- * Every hook here existed in `internal/` before it existed here, and each was
- * exported for the same reason: an application that has told the library
- * something — or that has to answer a question the library has already answered
- * for itself — should not have to answer it a second time, in numbers or in
- * detection code that can drift away from what the components are using.
+ * Two kinds live here, and both are the same argument.
+ *
+ * The first existed in `internal/` before it existed here, and was exported
+ * because an application that has told the library something — or that has to
+ * answer a question the library has already answered for itself — should not
+ * have to answer it a second time, in numbers or in detection code that can
+ * drift away from what the components are using.
+ *
+ * The second is the general form of something the library does several times
+ * over and could not export as it stood. `useMPWindowClass` watches four media
+ * queries; `useMPMediaQuery` is one. `MPTabs` measures its own bar;
+ * `useMPElementSize` is that measurement. `trigger="visible"` watches an
+ * element cross the viewport; `useMPOnScreen` is the watching without the
+ * animation. And `useMPDisclosure` is the six lines every page writes to open a
+ * dialog, with the two details a version written in a hurry leaves out.
  *
  * `useMPLocale` and `useMPSnackbar` are not here. They belong to a provider and
  * live with it, the way a hook that reads a context should.
@@ -20,4 +30,11 @@ export type { MPColorScheme, MPResolvedColorScheme, MPColorSchemeOptions, MPColo
 export { useMPWindowClass } from './useMPWindowClass.js';
 export { useMPReducedMotion } from './useMPReducedMotion.js';
 export { useMPShortcut, useMPPlatform } from './useMPShortcut.js';
+export { useMPMediaQuery } from './useMPMediaQuery.js';
+export { useMPElementSize } from './useMPElementSize.js';
+export type { MPElementSize } from './useMPElementSize.js';
+export { useMPOnScreen } from './useMPOnScreen.js';
+export type { MPOnScreenOptions } from './useMPOnScreen.js';
+export { useMPDisclosure } from './useMPDisclosure.js';
+export type { MPDisclosure } from './useMPDisclosure.js';
 export type { MPShortcutOptions, MPResolvedOS } from './useMPShortcut.js';

package/dist/hooks/index.js

@@ -1 +1 @@
-export{useMPColorScheme,mpColorSchemeScript}from"./useMPColorScheme.js";export{useMPWindowClass}from"./useMPWindowClass.js";export{useMPReducedMotion}from"./useMPReducedMotion.js";export{useMPShortcut,useMPPlatform}from"./useMPShortcut.js";
+export{useMPColorScheme,mpColorSchemeScript}from"./useMPColorScheme.js";export{useMPWindowClass}from"./useMPWindowClass.js";export{useMPReducedMotion}from"./useMPReducedMotion.js";export{useMPShortcut,useMPPlatform}from"./useMPShortcut.js";export{useMPMediaQuery}from"./useMPMediaQuery.js";export{useMPElementSize}from"./useMPElementSize.js";export{useMPOnScreen}from"./useMPOnScreen.js";export{useMPDisclosure}from"./useMPDisclosure.js";

package/dist/hooks/useMPColorScheme.js

@@ -1 +1,2 @@
+"use client";
 import*as e from"react";import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as r,setScheme as s,useChosenScheme as o,useSystemScheme as c}from"../internal/color-scheme.js";export function useMPColorScheme(r={}){const{storageKey:m=t}=r,a=o(m),i=c(),l="system"===a?i:a,n=e.useCallback(e=>s(m,e),[m]),u=e.useCallback(()=>s(m,"dark"===l?"light":"dark"),[m,l]);return e.useMemo(()=>({scheme:a,resolved:l,isSystem:"system"===a,setScheme:n,toggle:u}),[a,l,n,u])}export function mpColorSchemeScript(e={}){const{storageKey:s=t}=e;return`try{var s=localStorage.getItem(${JSON.stringify(s)});if(s==="dark"||s==="light")document.documentElement.setAttribute(${JSON.stringify(r)},s)}catch(e){}`}

package/dist/hooks/useMPDisclosure.d.ts

@@ -0,0 +1,58 @@
+/** Whether something is open, and the three ways to change that. */
+export interface MPDisclosure {
+    open: boolean;
+    /** Opens it. Already open, nothing happens and nothing re-renders. */
+    onOpen: () => void;
+    /** Closes it. */
+    onClose: () => void;
+    /** The other one, whichever that is. */
+    onToggle: () => void;
+    /**
+     * Sets it outright, which is what a controlled prop wants: pass this straight
+     * to an `onOpenChange`.
+     */
+    setOpen: (open: boolean) => void;
+}
+/**
+ * Open, and the three ways to change it.
+ *
+ * The most-written six lines in any application using this library. A dialog, a
+ * drawer, a popover, a menu and a command palette are all controlled the same
+ * way — `open` and `onOpenChange` — and every page that mounts one writes the
+ * same `useState` and the same three callbacks, usually as inline arrows that
+ * are a new function on every render.
+ *
+ * ```tsx
+ * const dialog = useMPDisclosure();
+ *
+ * <MPButton onClick={dialog.onOpen}>Delete</MPButton>
+ * <MPDialog open={dialog.open} onOpenChange={dialog.setOpen} title="Delete?">
+ *   <MPButton onClick={dialog.onClose}>Cancel</MPButton>
+ * </MPDialog>;
+ * ```
+ *
+ * ## Why the library ships one at all
+ *
+ * Because the alternative is not "no hook", it is a hook per application, and
+ * the two things this gets right are the two that get left out of one written in
+ * a hurry.
+ *
+ * Every callback is stable for the life of the component. An inline
+ * `onClick={() => setOpen(true)}` is a new function on every render, which
+ * re-renders a memoised trigger for no reason and defeats the `React.memo` a
+ * page put there on purpose.
+ *
+ * And `onOpen` on something already open is not a state change. React bails out
+ * of a `useState` set to the value it already holds, so the three callbacks here
+ * cost nothing when they are asked for what is already true — which matters
+ * because a close handler is often wired to three things at once: a button, an
+ * `onOpenChange`, and an Escape the component also handles.
+ *
+ * ## It is not a controlled/uncontrolled helper
+ *
+ * It holds state, so it makes a thing controlled. A component that should
+ * manage its own open state takes `defaultOpen` and needs none of this.
+ *
+ * @param defaultOpen what it starts as. @default false
+ */
+export declare function useMPDisclosure(defaultOpen?: boolean): MPDisclosure;

package/dist/hooks/useMPDisclosure.js

@@ -0,0 +1,2 @@
+"use client";
+import*as e from"react";export function useMPDisclosure(o=!1){const[s,n]=e.useState(o),a=e.useCallback(()=>n(!0),[]),l=e.useCallback(()=>n(!1),[]),t=e.useCallback(()=>n(e=>!e),[]);return e.useMemo(()=>({open:s,onOpen:a,onClose:l,onToggle:t,setOpen:n}),[s,a,l,t])}