material-plus-ui 1.6.0 → 1.8.0

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

@@ -1,67 +1,69 @@
 /** The glyph a password field shows while the password is legible. */
-export declare const VisibilityIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const VisibilityIcon: import("lucide-react").LucideIcon;
 /** The glyph a password field shows while the password is masked. */
-export declare const VisibilityOffIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const VisibilityOffIcon: import("lucide-react").LucideIcon;
 /** Dismiss: a chip, a dialog, an alert. */
-export declare const CloseIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CloseIcon: import("lucide-react").LucideIcon;
 /** A ticked option, a completed step. */
-export declare const CheckIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CheckIcon: import("lucide-react").LucideIcon;
 /** Disclosure, pointing down. */
-export declare const ChevronDownIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronDownIcon: import("lucide-react").LucideIcon;
 /** Disclosure, pointing up. */
-export declare const ChevronUpIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronUpIcon: import("lucide-react").LucideIcon;
 /** Previous, in a pager or a carousel. */
-export declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronLeftIcon: import("lucide-react").LucideIcon;
 /** Next, in a pager or a carousel. */
-export declare const ChevronRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronRightIcon: import("lucide-react").LucideIcon;
 /** First, in a pager: the stepper that jumps to an end rather than by one. */
-export declare const ChevronsLeftIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronsLeftIcon: import("lucide-react").LucideIcon;
 /** And last. */
-export declare const ChevronsRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronsRightIcon: import("lucide-react").LucideIcon;
 /** Search, for a field's leading adornment. */
-export declare const SearchIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const SearchIcon: import("lucide-react").LucideIcon;
 /** Sorted ascending: the arrow a table's sorted column carries. */
-export declare const ArrowUpIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ArrowUpIcon: import("lucide-react").LucideIcon;
 /** Sorted descending. */
-export declare const ArrowDownIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ArrowDownIcon: import("lucide-react").LucideIcon;
 /** And then: the mark a breadcrumb can put between two steps. */
-export declare const ArrowRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ArrowRightIcon: import("lucide-react").LucideIcon;
 /** The trail a breadcrumb hides behind, and any other "there is more here". */
-export declare const MoreIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const MoreIcon: import("lucide-react").LucideIcon;
 /** A link that goes somewhere on this site. */
-export declare const LinkIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const LinkIcon: import("lucide-react").LucideIcon;
 /** A link that takes over the window. */
-export declare const ExternalLinkIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ExternalLinkIcon: import("lucide-react").LucideIcon;
 /** Copy to clipboard. */
-export declare const CopyIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CopyIcon: import("lucide-react").LucideIcon;
+/** Source as it was written — `MPCodeBlock`'s toggle out of the colouring. */
+export declare const CodeIcon: import("lucide-react").LucideIcon;
 /** 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>>;
+export declare const BrokenImageIcon: import("lucide-react").LucideIcon;
 /** Severity: something worth knowing. */
-export declare const InfoIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const InfoIcon: import("lucide-react").LucideIcon;
 /** Severity: it worked. */
-export declare const SuccessIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const SuccessIcon: import("lucide-react").LucideIcon;
 /** Severity: proceed carefully. */
-export declare const WarningIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const WarningIcon: import("lucide-react").LucideIcon;
 /** Severity: it did not work. */
-export declare const ErrorIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ErrorIcon: import("lucide-react").LucideIcon;
 /** One step up: a number field's increment. */
-export declare const AddIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const AddIcon: import("lucide-react").LucideIcon;
 /** One step down: a number field's decrement, and a half-ticked checkbox. */
-export declare const RemoveIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const RemoveIcon: import("lucide-react").LucideIcon;
 /** Send a file the other way. A file picker's dropzone. */
-export declare const UploadIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const UploadIcon: import("lucide-react").LucideIcon;
 /** A day on a calendar: what a date picker's trigger wears. */
-export declare const CalendarIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CalendarIcon: import("lucide-react").LucideIcon;
 /** A time of day: what a time picker's trigger wears. */
-export declare const ClockIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ClockIcon: import("lucide-react").LucideIcon;
 /**
  * A score. Drawn as an outline, and filled by whatever is scoring with it —
  * lucide draws it `fill="none"`, and `MPRating` overlays a copy in `fill-current`
  * rather than shipping a second glyph.
  */
-export declare const StarIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const StarIcon: import("lucide-react").LucideIcon;
 /** Work in progress, spun by whatever is waiting on it. */
-export declare const SpinnerIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const SpinnerIcon: import("lucide-react").LucideIcon;
 /**
  * Three lines: the navigation a window has become too narrow to show.
  *
@@ -71,4 +73,4 @@ export declare const SpinnerIcon: import("react").ForwardRefExoticComponent<Omit
  * argument that ever justifies a symbol — and `MPSidebarTrigger` gives it a
  * name for the readers it still says nothing to.
  */
-export declare const MenuIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const MenuIcon: import("lucide-react").LucideIcon;

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

@@ -41,37 +41,38 @@ export * from './glyphs.js';
  * file. Reach for the named exports when only one or two are needed.
  */
 export declare const ICONS: {
-    readonly visibility: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly 'visibility-off': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly close: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly check: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly 'chevron-down': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly 'chevron-up': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly 'chevron-left': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly 'chevron-right': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly 'chevrons-left': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly 'chevrons-right': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly search: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly 'arrow-up': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly 'arrow-down': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly 'arrow-right': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly more: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly menu: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    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 '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>>;
-    readonly warning: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly error: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly add: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly remove: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly upload: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly calendar: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly clock: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly star: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-    readonly spinner: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly visibility: import("lucide-react").LucideIcon;
+    readonly 'visibility-off': import("lucide-react").LucideIcon;
+    readonly close: import("lucide-react").LucideIcon;
+    readonly check: import("lucide-react").LucideIcon;
+    readonly 'chevron-down': import("lucide-react").LucideIcon;
+    readonly 'chevron-up': import("lucide-react").LucideIcon;
+    readonly 'chevron-left': import("lucide-react").LucideIcon;
+    readonly 'chevron-right': import("lucide-react").LucideIcon;
+    readonly 'chevrons-left': import("lucide-react").LucideIcon;
+    readonly 'chevrons-right': import("lucide-react").LucideIcon;
+    readonly search: import("lucide-react").LucideIcon;
+    readonly 'arrow-up': import("lucide-react").LucideIcon;
+    readonly 'arrow-down': import("lucide-react").LucideIcon;
+    readonly 'arrow-right': import("lucide-react").LucideIcon;
+    readonly more: import("lucide-react").LucideIcon;
+    readonly menu: import("lucide-react").LucideIcon;
+    readonly link: import("lucide-react").LucideIcon;
+    readonly 'external-link': import("lucide-react").LucideIcon;
+    readonly copy: import("lucide-react").LucideIcon;
+    readonly code: import("lucide-react").LucideIcon;
+    readonly 'broken-image': import("lucide-react").LucideIcon;
+    readonly info: import("lucide-react").LucideIcon;
+    readonly success: import("lucide-react").LucideIcon;
+    readonly warning: import("lucide-react").LucideIcon;
+    readonly error: import("lucide-react").LucideIcon;
+    readonly add: import("lucide-react").LucideIcon;
+    readonly remove: import("lucide-react").LucideIcon;
+    readonly upload: import("lucide-react").LucideIcon;
+    readonly calendar: import("lucide-react").LucideIcon;
+    readonly clock: import("lucide-react").LucideIcon;
+    readonly star: import("lucide-react").LucideIcon;
+    readonly spinner: import("lucide-react").LucideIcon;
 };
 /** Every role name `ICONS` answers to. */
 export type MPIconName = keyof typeof ICONS;

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])}

package/dist/hooks/useMPElementSize.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+/** What an element measures, in CSS pixels. */
+export interface MPElementSize {
+    width: number;
+    height: number;
+}
+/**
+ * How big an element is, kept up to date as it changes.
+ *
+ * The library measures elements in five places — a tab bar deciding whether it
+ * overflows, a field sizing its outline's notch, panes tracking a drag — and an
+ * application that wants the same answer had to write the `ResizeObserver`
+ * out again, including the two parts of it that are easy to get wrong.
+ *
+ * ```tsx
+ * const ref = React.useRef<HTMLDivElement>(null);
+ * const { width } = useMPElementSize(ref);
+ *
+ * <div ref={ref}>{width > 480 ? <Chart /> : <Figure />}</div>;
+ * ```
+ *
+ * This is the answer for **a component's own width**, which is what a container
+ * query asks and a media query cannot: a card in a sidebar and the same card in
+ * a main column are the same window and two different widths.
+ * [useMPMediaQuery](#usempmediaquery) is the other question.
+ *
+ * ## Zero until it has measured
+ *
+ * The first render has no element yet — a ref is filled in during the commit —
+ * so the first answer is `{ width: 0, height: 0 }` and the real one arrives on
+ * the render after it. Branch on a threshold rather than on the number itself,
+ * or a chart will mount, be told it is zero wide, and mount again.
+ *
+ * ## The two parts that are easy to get wrong
+ *
+ * It reads `getBoundingClientRect`, not the observer entry's `contentRect`.
+ * Those differ by the padding and the border — `contentRect` is the content box
+ * — and a caller comparing a measurement against a breakpoint means the box the
+ * element actually occupies.
+ *
+ * And it re-renders only when a number changes. A `ResizeObserver` fires for a
+ * subpixel reflow that rounds to the same integer, and a hook that set state on
+ * every callback would re-render a chart on every scroll of a page with a
+ * sticky header.
+ *
+ * ## Where there is no observer
+ *
+ * A browser without `ResizeObserver` measures once on mount and stays there,
+ * which is right more often than it is wrong: an element that never resizes is
+ * the common case, and the alternative is a `resize` listener that misses every
+ * change the window did not cause.
+ *
+ * @param ref a ref to the element to measure.
+ */
+export declare function useMPElementSize(ref: React.RefObject<Element | null>): MPElementSize;

package/dist/hooks/useMPElementSize.js

@@ -0,0 +1,2 @@
+"use client";
+import*as e from"react";export function useMPElementSize(t){const[n,i]=e.useState({width:0,height:0});return e.useEffect(()=>{const e=t.current;if(!e)return;const n=()=>{const t=e.getBoundingClientRect(),n={width:Math.round(t.width),height:Math.round(t.height)};i(e=>e.width===n.width&&e.height===n.height?e:n)};if(n(),"undefined"==typeof ResizeObserver)return;const r=new ResizeObserver(n);return r.observe(e),()=>r.disconnect()},[t]),n}

package/dist/hooks/useMPMediaQuery.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Whether a media query matches, and it re-renders when that changes.
+ *
+ * The general form of what this library already does four times over for the
+ * window size classes, and once each for `prefers-reduced-motion` and the
+ * colour scheme. A page has questions of its own — is this a coarse pointer, is
+ * the window tall enough for a two-row bar, is the reader in a high-contrast
+ * mode — and had to write the subscription out again to ask one.
+ *
+ * ```tsx
+ * const coarse = useMPMediaQuery('(pointer: coarse)');
+ *
+ * <MPTooltip disabled={coarse}>…</MPTooltip>;
+ * ```
+ *
+ * ## Reach for `useMPWindowClass` for a width
+ *
+ * A width query written here is a copy of a number the library also holds, and
+ * the two drift the moment an `MPConfigProvider` moves a boundary. Ask
+ * [useMPWindowClass](#usempwindowclass) instead — it reads the same ladder the
+ * grid and the sidebar do.
+ *
+ * ## On a server, and before hydration
+ *
+ * `onServer`, which defaults to `false`. There is no window to ask, and a
+ * default of "matches" would mean every server-rendered page claiming every
+ * preference at once.
+ *
+ * `useSyncExternalStore` is what makes the correction on hydration legitimate
+ * rather than a mismatch React warns about — but it is a second render, so
+ * anything that swaps a whole layout on this does so visibly on a first load.
+ * Where that matters the answer is CSS, which has no first render to be wrong.
+ *
+ * A browser without `matchMedia` gets the same `onServer` answer, for the same
+ * reason: there is no way to ask, and a guess is worse than the caller's own.
+ *
+ * @param query any CSS media query, without the `@media`.
+ * @param onServer what to answer where there is nothing to ask. @default false
+ */
+export declare function useMPMediaQuery(query: string, onServer?: boolean): boolean;

package/dist/hooks/useMPMediaQuery.js

@@ -0,0 +1,2 @@
+"use client";
+import*as e from"react";export function useMPMediaQuery(t,a=!1){const r=e.useMemo(()=>function(e){if("undefined"==typeof window||!window.matchMedia)return null;let t=n.get(e);t||(t=window.matchMedia(e),n.set(e,t));return t}(t),[t]),c=e.useCallback(e=>r?(r.addEventListener("change",e),()=>r.removeEventListener("change",e)):()=>{},[r]),o=e.useCallback(()=>r?r.matches:a,[r,a]),u=e.useCallback(()=>a,[a]);return e.useSyncExternalStore(c,o,u)}const n=new Map;

package/dist/hooks/useMPOnScreen.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+/** What to watch for. */
+export interface MPOnScreenOptions {
+    /**
+     * How much of the element has to be showing before it counts, from `0` to `1`.
+     *
+     * The same default the `MPAnimate*` components take, so a page's own answer
+     * and the library's arrive at the same scroll position.
+     * @default 0.2
+     */
+    threshold?: number;
+    /**
+     * Whether it stops watching the first time. Off, it reports every entrance and
+     * every exit.
+     * @default true
+     */
+    once?: boolean;
+    /**
+     * A CSS `margin`-shaped string that grows or shrinks the region the element is
+     * tested against — `'200px 0px'` reports something 200px before it arrives.
+     * For loading a picture, or starting a request, ahead of the reader.
+     */
+    rootMargin?: string;
+}
+/**
+ * Whether an element is on screen.
+ *
+ * The `MPAnimate*` components already ask this — `trigger="visible"` is exactly
+ * it — and an application asks it for other reasons: loading an image, starting
+ * a request, marking a section read, pausing something expensive that has
+ * scrolled away.
+ *
+ * ```tsx
+ * const ref = React.useRef<HTMLDivElement>(null);
+ * const seen = useMPOnScreen(ref);
+ *
+ * <div ref={ref}>{seen ? <Chart data={data} /> : <MPSkeleton height={240} />}</div>;
+ * ```
+ *
+ * ## `once` is on, and that is the common case
+ *
+ * Most reasons to ask are one-way: something loads, or is marked read, and does
+ * not unload when it scrolls off. Turn it off for the ones that are not — a
+ * video that should pause, a poll that should stop.
+ *
+ * ## Where there is no observer
+ *
+ * `true`. A browser with no `IntersectionObserver` has no way to be asked, and
+ * showing content is the answer that fails safe: the alternative is a page
+ * whose every deferred section stays a skeleton forever.
+ *
+ * The same is true before the ref is filled in, which is why this starts at
+ * `false` and not at `true` — on the first render there is no element yet, and
+ * an element that has not been observed is not the same as one that cannot be.
+ *
+ * @param ref a ref to the element to watch.
+ */
+export declare function useMPOnScreen(ref: React.RefObject<Element | null>, { threshold, once, rootMargin }?: MPOnScreenOptions): boolean;

package/dist/hooks/useMPOnScreen.js

@@ -0,0 +1,2 @@
+"use client";
+import*as e from"react";export function useMPOnScreen(r,{threshold:n=.2,once:t=!0,rootMargin:o}={}){const[s,c]=e.useState(!1);return e.useEffect(()=>{const e=r.current;if(!e)return;if("undefined"==typeof IntersectionObserver)return void c(!0);const s=new IntersectionObserver(([e])=>{e.isIntersecting?(c(!0),t&&s.disconnect()):t||c(!1)},{threshold:n,rootMargin:o});return s.observe(e),()=>s.disconnect()},[r,n,t,o]),s}

package/dist/hooks/useMPReducedMotion.js

@@ -1 +1,2 @@
+"use client";
 import{usePrefersReducedMotion as e}from"../internal/animate.js";export function useMPReducedMotion(){return e()}

package/dist/hooks/useMPWindowClass.d.ts

@@ -43,6 +43,13 @@ import type { MPWindowClass } from '../types.js';
  * responsive props and Tailwind's own variants are resolved by the browser
  * before anything paints.
  *
+ * ## Where the boundaries come from
+ *
+ * MD3's own, unless an `MPConfigProvider` above this moved them — its
+ * `breakpoints` prop is the JavaScript half of a page that has moved the
+ * stylesheet's too. See the provider for why moving one without the other is
+ * worse than moving neither.
+ *
  * @param onServer what to answer where there is no window. @default 'expanded'
  */
 export declare function useMPWindowClass(onServer?: MPWindowClass): MPWindowClass;

package/dist/hooks/useMPWindowClass.js

@@ -1 +1,2 @@
+"use client";
 import{useWindowClass as n}from"../internal/window-class.js";export function useMPWindowClass(e="expanded"){return n(e)}