material-plus-ui 1.7.0 → 1.9.0

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

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

@@ -83,7 +83,7 @@ export interface MPTypographyProps extends Omit<React.ComponentPropsWithoutRef<'
      * `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.
+     * [MPAnimateFade](../transitions/animate-fade) and its siblings.
      */
     transition?: MPTransition;
 }

package/dist/constants/glyphs.d.ts

@@ -1,69 +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("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+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.
  *
@@ -73,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/icons.d.ts

@@ -41,38 +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 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>>;
-    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/internal/Calendar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{MPButton as r}from"../components/button/MPButton.js";import{MPIcon as l}from"../components/icon/MPIcon.js";import{MPIconButton as a}from"../components/icon-button/MPIconButton.js";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons.js";import{MPStateLayer as u}from"./StateLayer.js";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale.js";import{VISUALLY_HIDDEN as p}from"./visually-hidden.js";import{addDays as f,addMonths as g,addYears as y,calendarWeeks as v,compareDay as b,dateFormatter as w,isDayOutside as x,isMonthBeforeYear as D,isSameDay as S,isSameMonth as M,isUnitOutside as N,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as k,startOfDay as j,startOfMonth as z,today as A,weekdayLabels as E,withTime as T,YEAR_PAGE_SIZE as F,yearPageStart as Y}from"./date.js";const B={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},R={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},H=/*@__PURE__*/["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" "),$={day:0,month:1,year:2};function K({children:n,label:o,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return t("button",{type:"button",role:"gridcell","aria-label":o,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[H,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"bg-transparent cursor-default text-mp-on-surface/38":r?"bg-(--_mp-accent) text-(--_mp-on-accent)":l?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"bg-transparent border border-(--_mp-accent) text-(--_mp-accent)":c?"bg-transparent text-mp-on-surface-variant":"bg-transparent text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),n]})}function L({size:o,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:y,showNextButton:v,onStep:b,onViewChange:w}){const x=k(f,"long")[p.getMonth()],S=String(p.getFullYear()),M=D(f),N=R[o],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],_=(t,n)=>n?e(a,{size:N,color:u,label:P[-1===t?0:1],icon:e(l,{icon:-1===t?c:i,size:m[N],className:"rtl:rotate-180"}),onClick:()=>b(t)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),C=t=>e(l,{icon:s,size:m[N],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",t?"rotate-180":""].filter(Boolean).join(" ")}),j=e(r,{variant:"text",size:N,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:C("month"===d),onClick:()=>w("month"===d?"day":"month"),children:x},"month"),z=e(r,{variant:"text",size:N,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:C("year"===d),onClick:()=>w("year"===d?"day":"year"),children:S},"year"),A=Y(p.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[_(-1,y),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[o]}`,children:`${A}–${A+F-1}`}):"month"===d?z:t(n,M?{children:[j,z]}:{children:[z,j]})}),_(1,v)]})}export function Calendar({size:n,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:v,showOutsideDays:b=!0,autoFocus:w=!1,showPreviousButton:D=!0,showNextButton:S=!0,precision:N="day",labels:C}){const[k,E]=o.useState(N),T=$[k]<$[N]?N:k,Y=o.useMemo(()=>i.filter(P),[i]),[R,H]=o.useState(()=>{const e=Y.find(e=>M(e,s));return e?j(e):M(A(),s)?A():z(s)}),K=o.useRef(w),U=o.useRef(null);o.useEffect(()=>{H(e=>M(e,s)?e:z(s))},[s]),o.useLayoutEffect(()=>{K.current&&(K.current=!1,U.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const V=o.useCallback(e=>x(e,p,f)||(v?.(e)??!1),[p,f,v]),G=e=>{K.current=!0,E(e)},W=e=>{K.current=!0,c(e)};return t("div",{ref:U,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":B[n]},onPointerLeave:()=>h?.(null),children:[e(L,{size:n,color:r,view:T,month:s,locale:l,labels:C,showPreviousButton:D,showNextButton:S,onStep:e=>{c("day"===T?g(s,e):y(s,"month"===T?e:e*F))},onViewChange:G}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===T?e(I,{size:n,locale:l,weekStartsOn:a,month:s,chosen:Y,rangeStart:u,rangeEnd:m,focusedDate:R,showOutsideDays:b,isDisabled:V,onSelect:e=>{H(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{K.current=!0,H(e),M(e,s)||c(z(e))}}):"month"===T?e(O,{size:n,locale:l,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:W,onPick:e=>{const t=_(s.getFullYear(),e,1);"month"!==N?(c(t),G("day")):d(t)}}):e(q,{size:n,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:W,onPick:e=>{"year"!==N?(c(_(e,s.getMonth(),1)),G("month")):d(_(e,0,1))}})})]})}function U(e){return"rtl"===getComputedStyle(e).direction?-1:1}function I({size:n,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:y,onPreviewChange:x,onMoveFocus:D}){const N=E(r,l,"narrow"),_=E(r,l,"long"),C=(j=i,P(k=c)&&P(j)?b(k,j)<=0?[k,j]:[j,k]:null);var k,j;const z=A(),T=o.useMemo(()=>{const e=w(r,{dateStyle:"full"});return v(a,l).map(t=>t.map(t=>({date:t,label:e.format(t)})))},[a,l,r]),F=o.useRef(null),Y=o.useRef(a);o.useLayoutEffect(()=>{const e=F.current,t=Y.current;if(Y.current=a,!e||M(t,a))return;const n=t.getTime()<a.getTime(),o="rtl"===getComputedStyle(e).direction;e.style.setProperty("--_mp-calendar-from",String(n===o?-1:1)),e.dataset.mpPaged="true",e.style.animationName="none",e.offsetWidth,e.style.animationName=""},[a]);return t("div",{role:"grid","aria-label":w(r,{year:"numeric",month:"long"}).format(a),className:"flex h-full flex-col",children:[e("div",{role:"rowgroup",children:e("div",{role:"row",className:"grid grid-cols-7",children:N.map((t,n)=>e("span",{role:"columnheader","aria-label":_[n],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:t},n))})}),e("div",{ref:F,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:T.map((t,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(({date:t,label:o})=>{const r=!M(t,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},t.getTime());const c=s.some(e=>S(e,t)),i=null!==C&&b(t,C[0])>=0&&b(t,C[1])<=0,d=null!==C&&i&&S(t,C[0]),v=null!==C&&i&&S(t,C[1]);return e(K,{label:o,selected:c,inRange:i&&!c,rangeEdge:i?d&&v?"both":d?"start":v?"end":"middle":null,current:S(t,z)&&!c,muted:r,disabled:p(t),focused:S(t,u),className:`size-(--_mp-cell) ${h[n]}`,onClick:()=>y(t),onPointerEnter:()=>x?.(t),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-l+7)%7,o=U(e.currentTarget),r={ArrowLeft:()=>f(t,-o),ArrowRight:()=>f(t,o),ArrowUp:()=>f(t,-7),ArrowDown:()=>f(t,7),Home:()=>f(t,-n),End:()=>f(t,6-n),PageUp:()=>g(t,e.shiftKey?-12:-1),PageDown:()=>g(t,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),D(r()))})(e,t),children:t.getDate()},t.getTime())})},o))})]})}function O({size:t,locale:n,month:r,chosen:l,minDate:a,maxDate:s,onMoveCursor:c,onPick:i}){const u=k(n,"short"),m=r.getFullYear(),d=new Date,p=o.useMemo(()=>{const e=w(n,{year:"numeric",month:"long"});return Array.from({length:12},(t,n)=>e.format(_(m,n,1)))},[n,m]),f=e=>{const t=U(e.currentTarget),n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),c(g(z(r),n)))};return e("div",{role:"grid","aria-label":String(m),className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(n=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(o=>{const c=3*n+o;return e(K,{label:p[c],selected:l.some(e=>e.getFullYear()===m&&e.getMonth()===c),current:d.getFullYear()===m&&d.getMonth()===c,disabled:N(_(m,c,1),"month",a,s),focused:c===r.getMonth(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>i(c),onKeyDown:f,children:u[c]},c)})},n))})}function q({size:t,month:n,chosen:o,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=Y(n.getFullYear()),i=(new Date).getFullYear(),u=e=>{const t=U(e.currentTarget),o={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-F,PageDown:F}[e.key];void 0!==o&&(e.preventDefault(),a(y(z(n),o)))};return e("div",{role:"grid","aria-label":`${c}–${c+F-1}`,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(K,{label:String(d),selected:o.some(e=>e.getFullYear()===d),current:d===i,disabled:N(_(d,0,1),"year",r,l),focused:d===n.getFullYear(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function V(e,t){return Number.isFinite(e)?Math.min(t,Math.max(1,Math.round(e))):1}function G(e,t="auto"){const n=e.parentElement;if(!n)return;const o=e.getBoundingClientRect(),r=n.getBoundingClientRect(),l=o.top-r.top-n.clientTop+n.scrollTop,a=l+o.height;l<n.scrollTop?n.scrollTo({top:l,behavior:t}):a>n.scrollTop+n.clientHeight&&n.scrollTo({top:a-n.clientHeight,behavior:t})}export function MPTimeGrid({size:n,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:y=!1,labels:v}){const b=l??a,x=o.useRef(null),[D,S]=o.useMemo(()=>C(r),[r]);o.useEffect(()=>{const e=x.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(e=>G(e,"instant")),y){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[y]);const M=o.useMemo(()=>{const e=c?12:24,t=V(m,e),n=Array.from({length:Math.ceil(e/t)},(e,n)=>n*t);return c?n.map(e=>0===e?12:e):n},[c,m]),N=o.useMemo(()=>{const e=V(d,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[d]),P=o.useMemo(()=>{const e=V(f,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[f]),_=e=>String(e).padStart(2,"0"),k=c?b.getHours()%12||12:b.getHours(),[j,z]=o.useState({}),A=(o,r,a,i,m)=>{const d=null===l?-1:a.findIndex(e=>i(e)),p=j[o]??(d>=0?d:0);return e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","motion-safe:scroll-smooth","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),onKeyDown:e=>{const t={ArrowDown:1,ArrowUp:-1,PageDown:5,PageUp:-5}[e.key],n=void 0!==t?(e=>{const t=[...e.children].indexOf(document.activeElement);return t>=0?t:p})(e.currentTarget)+t:"Home"===e.key?0:"End"===e.key?a.length-1:null;null!==n&&(e.preventDefault(),((e,t)=>{const n=Math.min(a.length-1,Math.max(0,e)),r=t.children[n];z(e=>({...e,[o]:n})),r instanceof HTMLElement&&(r.focus({preventScroll:!0}),G(r))})(n,e.currentTarget))},children:a.map((r,a)=>{const d=((e,t)=>T(b,"hour"===e?{hours:c?t%12+(b.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:b.getHours()%12+12*t}))(o,r),f=null!==l&&i(r),y=g?.(d,o)??!1;return t("button",{type:"button",role:"option","aria-selected":f,"aria-disabled":y||void 0,"data-chosen":f?"true":void 0,tabIndex:a===p?0:-1,className:[H,"rounded-mp-full h-(--_mp-cell) w-full shrink-0",h[n],y?"bg-transparent cursor-default text-mp-on-surface/38":f?"bg-(--_mp-accent) text-(--_mp-on-accent)":"bg-transparent text-mp-on-surface"].join(" "),onFocus:()=>z(e=>({...e,[o]:a})),onClick:()=>{y||s(d)},children:[y?null:e(u,{}),m(r)]},r)})},o)};return t("div",{ref:x,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":B[n]},children:[A("hour",v.hour,M,e=>e===k,e=>c?String(e):_(e)),A("minute",v.minute,N,e=>e===b.getMinutes(),_),i?A("second",v.second,P,e=>e===b.getSeconds(),_):null,c?A("meridiem",v.meridiem,[0,1],e=>(b.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":w(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{MPButton as r}from"../components/button/MPButton.js";import{MPIcon as l}from"../components/icon/MPIcon.js";import{MPIconButton as a}from"../components/icon-button/MPIconButton.js";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons.js";import{MPStateLayer as u}from"./StateLayer.js";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale.js";import{VISUALLY_HIDDEN as p}from"./visually-hidden.js";import{addDays as f,addMonths as g,addYears as b,calendarWeeks as y,compareDay as v,dateFormatter as w,isDayOutside as x,isMonthBeforeYear as D,isSameDay as S,isSameMonth as M,isUnitOutside as N,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as k,startOfDay as j,startOfMonth as z,today as A,weekdayLabels as E,withTime as T,YEAR_PAGE_SIZE as F,yearPageStart as Y}from"./date.js";const B={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},R={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},H=/*@__PURE__*/["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none p-0 font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" "),$={day:0,month:1,year:2};function K({children:n,label:o,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return t("button",{type:"button",role:"gridcell","aria-label":o,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[H,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"border-0 bg-transparent cursor-default text-mp-on-surface/38":r?"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)":l?"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"bg-transparent border border-(--_mp-accent) text-(--_mp-accent)":c?"border-0 bg-transparent text-mp-on-surface-variant":"border-0 bg-transparent text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),n]})}function L({size:o,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:b,showNextButton:y,onStep:v,onViewChange:w}){const x=k(f,"long")[p.getMonth()],S=String(p.getFullYear()),M=D(f),N=R[o],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],_=(t,n)=>n?e(a,{size:N,color:u,label:P[-1===t?0:1],icon:e(l,{icon:-1===t?c:i,size:m[N],className:"rtl:rotate-180"}),onClick:()=>v(t)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),C=t=>e(l,{icon:s,size:m[N],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",t?"rotate-180":""].filter(Boolean).join(" ")}),j=e(r,{variant:"text",size:N,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:C("month"===d),onClick:()=>w("month"===d?"day":"month"),children:x},"month"),z=e(r,{variant:"text",size:N,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:C("year"===d),onClick:()=>w("year"===d?"day":"year"),children:S},"year"),A=Y(p.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[_(-1,b),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[o]}`,children:`${A}–${A+F-1}`}):"month"===d?z:t(n,M?{children:[j,z]}:{children:[z,j]})}),_(1,y)]})}export function Calendar({size:n,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:y,showOutsideDays:v=!0,autoFocus:w=!1,showPreviousButton:D=!0,showNextButton:S=!0,precision:N="day",labels:C}){const[k,E]=o.useState(N),T=$[k]<$[N]?N:k,Y=o.useMemo(()=>i.filter(P),[i]),[R,H]=o.useState(()=>{const e=Y.find(e=>M(e,s));return e?j(e):M(A(),s)?A():z(s)}),K=o.useRef(w),U=o.useRef(null);o.useEffect(()=>{H(e=>M(e,s)?e:z(s))},[s]),o.useLayoutEffect(()=>{K.current&&(K.current=!1,U.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const V=o.useCallback(e=>x(e,p,f)||(y?.(e)??!1),[p,f,y]),G=e=>{K.current=!0,E(e)},W=e=>{K.current=!0,c(e)};return t("div",{ref:U,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":B[n]},onPointerLeave:()=>h?.(null),children:[e(L,{size:n,color:r,view:T,month:s,locale:l,labels:C,showPreviousButton:D,showNextButton:S,onStep:e=>{c("day"===T?g(s,e):b(s,"month"===T?e:e*F))},onViewChange:G}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===T?e(I,{size:n,locale:l,weekStartsOn:a,month:s,chosen:Y,rangeStart:u,rangeEnd:m,focusedDate:R,showOutsideDays:v,isDisabled:V,onSelect:e=>{H(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{K.current=!0,H(e),M(e,s)||c(z(e))}}):"month"===T?e(O,{size:n,locale:l,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:W,onPick:e=>{const t=_(s.getFullYear(),e,1);"month"!==N?(c(t),G("day")):d(t)}}):e(q,{size:n,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:W,onPick:e=>{"year"!==N?(c(_(e,s.getMonth(),1)),G("month")):d(_(e,0,1))}})})]})}function U(e){return"rtl"===getComputedStyle(e).direction?-1:1}function I({size:n,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:b,onPreviewChange:x,onMoveFocus:D}){const N=E(r,l,"narrow"),_=E(r,l,"long"),C=(j=i,P(k=c)&&P(j)?v(k,j)<=0?[k,j]:[j,k]:null);var k,j;const z=A(),T=o.useMemo(()=>{const e=w(r,{dateStyle:"full"});return y(a,l).map(t=>t.map(t=>({date:t,label:e.format(t)})))},[a,l,r]),F=o.useRef(null),Y=o.useRef(a);o.useLayoutEffect(()=>{const e=F.current,t=Y.current;if(Y.current=a,!e||M(t,a))return;const n=t.getTime()<a.getTime(),o="rtl"===getComputedStyle(e).direction;e.style.setProperty("--_mp-calendar-from",String(n===o?-1:1)),e.dataset.mpPaged="true",e.style.animationName="none",e.offsetWidth,e.style.animationName=""},[a]);return t("div",{role:"grid","aria-label":w(r,{year:"numeric",month:"long"}).format(a),className:"flex h-full flex-col",children:[e("div",{role:"rowgroup",children:e("div",{role:"row",className:"grid grid-cols-7",children:N.map((t,n)=>e("span",{role:"columnheader","aria-label":_[n],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:t},n))})}),e("div",{ref:F,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:T.map((t,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(({date:t,label:o})=>{const r=!M(t,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},t.getTime());const c=s.some(e=>S(e,t)),i=null!==C&&v(t,C[0])>=0&&v(t,C[1])<=0,d=null!==C&&i&&S(t,C[0]),y=null!==C&&i&&S(t,C[1]);return e(K,{label:o,selected:c,inRange:i&&!c,rangeEdge:i?d&&y?"both":d?"start":y?"end":"middle":null,current:S(t,z)&&!c,muted:r,disabled:p(t),focused:S(t,u),className:`size-(--_mp-cell) ${h[n]}`,onClick:()=>b(t),onPointerEnter:()=>x?.(t),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-l+7)%7,o=U(e.currentTarget),r={ArrowLeft:()=>f(t,-o),ArrowRight:()=>f(t,o),ArrowUp:()=>f(t,-7),ArrowDown:()=>f(t,7),Home:()=>f(t,-n),End:()=>f(t,6-n),PageUp:()=>g(t,e.shiftKey?-12:-1),PageDown:()=>g(t,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),D(r()))})(e,t),children:t.getDate()},t.getTime())})},o))})]})}function O({size:t,locale:n,month:r,chosen:l,minDate:a,maxDate:s,onMoveCursor:c,onPick:i}){const u=k(n,"short"),m=r.getFullYear(),d=new Date,p=o.useMemo(()=>{const e=w(n,{year:"numeric",month:"long"});return Array.from({length:12},(t,n)=>e.format(_(m,n,1)))},[n,m]),f=e=>{const t=U(e.currentTarget),n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),c(g(z(r),n)))};return e("div",{role:"grid","aria-label":String(m),className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(n=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(o=>{const c=3*n+o;return e(K,{label:p[c],selected:l.some(e=>e.getFullYear()===m&&e.getMonth()===c),current:d.getFullYear()===m&&d.getMonth()===c,disabled:N(_(m,c,1),"month",a,s),focused:c===r.getMonth(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>i(c),onKeyDown:f,children:u[c]},c)})},n))})}function q({size:t,month:n,chosen:o,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=Y(n.getFullYear()),i=(new Date).getFullYear(),u=e=>{const t=U(e.currentTarget),o={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-F,PageDown:F}[e.key];void 0!==o&&(e.preventDefault(),a(b(z(n),o)))};return e("div",{role:"grid","aria-label":`${c}–${c+F-1}`,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(K,{label:String(d),selected:o.some(e=>e.getFullYear()===d),current:d===i,disabled:N(_(d,0,1),"year",r,l),focused:d===n.getFullYear(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function V(e,t){return Number.isFinite(e)?Math.min(t,Math.max(1,Math.round(e))):1}function G(e,t="auto"){const n=e.parentElement;if(!n)return;const o=e.getBoundingClientRect(),r=n.getBoundingClientRect(),l=o.top-r.top-n.clientTop+n.scrollTop,a=l+o.height;l<n.scrollTop?n.scrollTo({top:l,behavior:t}):a>n.scrollTop+n.clientHeight&&n.scrollTo({top:a-n.clientHeight,behavior:t})}export function MPTimeGrid({size:n,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:b=!1,labels:y}){const v=l??a,x=o.useRef(null),[D,S]=o.useMemo(()=>C(r),[r]);o.useEffect(()=>{const e=x.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(e=>G(e,"instant")),b){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[b]);const M=o.useMemo(()=>{const e=c?12:24,t=V(m,e),n=Array.from({length:Math.ceil(e/t)},(e,n)=>n*t);return c?n.map(e=>0===e?12:e):n},[c,m]),N=o.useMemo(()=>{const e=V(d,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[d]),P=o.useMemo(()=>{const e=V(f,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[f]),_=e=>String(e).padStart(2,"0"),k=c?v.getHours()%12||12:v.getHours(),[j,z]=o.useState({}),A=(o,r,a,i,m)=>{const d=null===l?-1:a.findIndex(e=>i(e)),p=j[o]??(d>=0?d:0);return e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","motion-safe:scroll-smooth","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),onKeyDown:e=>{const t={ArrowDown:1,ArrowUp:-1,PageDown:5,PageUp:-5}[e.key],n=void 0!==t?(e=>{const t=[...e.children].indexOf(document.activeElement);return t>=0?t:p})(e.currentTarget)+t:"Home"===e.key?0:"End"===e.key?a.length-1:null;null!==n&&(e.preventDefault(),((e,t)=>{const n=Math.min(a.length-1,Math.max(0,e)),r=t.children[n];z(e=>({...e,[o]:n})),r instanceof HTMLElement&&(r.focus({preventScroll:!0}),G(r))})(n,e.currentTarget))},children:a.map((r,a)=>{const d=((e,t)=>T(v,"hour"===e?{hours:c?t%12+(v.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:v.getHours()%12+12*t}))(o,r),f=null!==l&&i(r),b=g?.(d,o)??!1;return t("button",{type:"button",role:"option","aria-selected":f,"aria-disabled":b||void 0,"data-chosen":f?"true":void 0,tabIndex:a===p?0:-1,className:[H,"rounded-mp-full h-(--_mp-cell) w-full shrink-0 border-0",h[n],b?"bg-transparent cursor-default text-mp-on-surface/38":f?"bg-(--_mp-accent) text-(--_mp-on-accent)":"bg-transparent text-mp-on-surface"].join(" "),onFocus:()=>z(e=>({...e,[o]:a})),onClick:()=>{b||s(d)},children:[b?null:e(u,{}),m(r)]},r)})},o)};return t("div",{ref:x,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":B[n]},children:[A("hour",y.hour,M,e=>e===k,e=>c?String(e):_(e)),A("minute",y.minute,N,e=>e===v.getMinutes(),_),i?A("second",y.second,P,e=>e===v.getSeconds(),_):null,c?A("meridiem",y.meridiem,[0,1],e=>(v.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":w(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}

package/dist/internal/ChartChrome.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type ChartValue } from './chart.js';
-import type { MPChartCategory, MPChartLegend, MPChartTooltip, MPChartTooltipItem, MPSide, MPSize } from '../types.js';
+import type { MPChartCategory, MPChartLabelColor, MPChartLegend, MPChartTooltip, MPChartTooltipItem, MPSide, MPSize } from '../types.js';
 /**
  * Everything a chart draws that is not the data.
  *
@@ -52,6 +52,22 @@ export interface ChartBaseProps extends Omit<React.ComponentPropsWithoutRef<'div
     tooltip?: boolean | MPChartTooltip;
     /** What to draw when there is nothing to draw. */
     empty?: React.ReactNode;
+    /**
+     * What ink the text naming a series is written in — the legend's entries, and
+     * the values written onto the marks.
+     *
+     * `'series'` matches each name to the mark it names, which is the fastest way
+     * to pair a long legend with a crowded plot. It is not the default because it
+     * is a trade: the eight chart slots are fitted to 3:1 against the surface,
+     * which is the bar for a *mark*, and small text wants 4.5:1. Reach for it on
+     * a chart whose legend is doing real work, and leave it alone where the
+     * swatch beside the name is already enough.
+     *
+     * Labels drawn **on** a fill — a pie's shares, a heatmap's cells — ignore it
+     * and keep the ink that reads against what they sit on.
+     * @default 'ink'
+     */
+    labelColor?: MPChartLabelColor;
     /** @default 'md' */
     size?: MPSize;
 }
@@ -74,12 +90,6 @@ export interface Visibility {
 export declare function useVisibility(series: readonly {
     hidden?: boolean;
 }[]): Visibility;
-export declare const LEGEND_SIDE: {
-    readonly top: "flex-col-reverse";
-    readonly bottom: "flex-col";
-    readonly left: "flex-row-reverse";
-    readonly right: "flex-row";
-};
 interface LegendProps {
     /**
      * What each entry is called. Names rather than series, because a pie's
@@ -94,24 +104,39 @@ interface LegendProps {
     size: MPSize;
     values?: readonly (string | undefined)[];
     swatch?: (index: number, color: string) => React.ReactNode;
+    /** Writes each name in its own series' colour rather than in ordinary ink. */
+    colorNames?: boolean;
 }
 /**
  * The identity channel that does not depend on being able to see a colour.
  *
- * A swatch and a word, and the swatch is the only thing on the row wearing the
- * series' colour — the name beside it stays in ordinary ink. That is the rule
- * for every piece of text in a chart: a label written in the mark's colour is a
- * label the reader has to decode before they can read it, and it fails outright
- * in forced colours.
+ * A swatch and a word. The swatch carries the series' colour and the name
+ * beside it stays in ordinary ink, because a label written in the mark's colour
+ * is one more thing between the reader and the word — `colorNames` is the
+ * caller saying they want that trade anyway, and it is off unless they do.
  *
  * Interactive by default, and each entry is a real `<button>` with
  * `aria-pressed`. A legend that filters is a control, and a control that is a
  * `<div>` with an `onClick` is one a keyboard cannot reach.
+ *
+ * ## Off and quiet are two states, and they look different
+ *
+ * A series the reader has switched off is drawn at Material's disabled
+ * opacity — swatch and name together, the same treatment a disabled control
+ * gets, because that is what it is. A series merely standing back while another
+ * is hovered is quieter than usual and no more, so the two cannot be mistaken
+ * for each other at a glance. Opacity survives greyscale and forced colours,
+ * which a change of hue would not, and `aria-pressed` carries the same fact to
+ * a reader who is not looking at all.
  */
-export declare function ChartLegend({ names, colors, options, visibility, size, values, swatch }: LegendProps): React.JSX.Element;
+export declare function ChartLegend({ names, colors, options, visibility, size, values, swatch, colorNames }: LegendProps): React.JSX.Element;
 interface PanelProps {
     heading?: React.ReactNode;
     items: readonly MPChartTooltipItem[];
+    /** What the rows add up to, where the chart is a picture of that sum. */
+    total?: string;
+    /** And what that row is called, in the chart's own language. */
+    totalLabel?: string;
     x: number;
     y: number;
     flip: boolean;
@@ -124,7 +149,7 @@ interface PanelProps {
  * would sit under the pointer, take the hover from the plot, and close itself —
  * then reopen, then close, for as long as the reader held still.
  */
-export declare function ChartTooltipPanel({ heading, items, x, y, flip, size }: PanelProps): React.JSX.Element;
+export declare function ChartTooltipPanel({ heading, items, total, totalLabel, x, y, flip, size }: PanelProps): React.JSX.Element;
 /**
  * The same reading, said out loud instead of drawn.
  *
@@ -138,9 +163,11 @@ export declare function ChartTooltipPanel({ heading, items, x, y, flip, size }:
  * Empty when nothing is active, so leaving the chart clears what was said
  * rather than leaving the last column standing in the region forever.
  */
-export declare function ChartStatus({ heading, items }: {
+export declare function ChartStatus({ heading, items, total, totalLabel }: {
     heading?: React.ReactNode;
     items: readonly MPChartTooltipItem[];
+    total?: string;
+    totalLabel?: string;
 }): React.JSX.Element;
 interface TableProps {
     id: string;
@@ -184,11 +211,22 @@ export interface ChartShellProps extends Omit<React.ComponentPropsWithoutRef<'di
     children: React.ReactNode;
     /** Floated over the drawing. */
     tooltip?: React.ReactNode;
+    /**
+     * A control over the corner of the plot — the one thing a chart has that is
+     * neither the picture nor a legend entry.
+     *
+     * A **sibling** of the plot rather than a child, for the reason the readout
+     * is one: `role="img"` is a leaf role, and a button inside it is a button no
+     * keyboard can reach and no screen reader can find.
+     */
+    overlay?: React.ReactNode;
     legend?: React.ReactNode;
     legendSide?: MPSide;
     status: {
         heading?: React.ReactNode;
         items: readonly MPChartTooltipItem[];
+        total?: string;
+        totalLabel?: string;
     };
     table?: React.ReactNode;
 }
@@ -197,9 +235,15 @@ export interface ChartShellProps extends Omit<React.ComponentPropsWithoutRef<'di
  * it and the table underneath.
  *
  * The readout is a **sibling** of the plot rather than a child, and that is a
- * constraint rather than a layout preference — see `ChartStatus`. Putting the
- * arrangement here is what keeps the two frames from disagreeing about it: the
- * one place this is easy to get wrong is the one place it must not be.
+ * constraint rather than a layout preference — see `ChartStatus`. So is
+ * anything in `overlay`, for the same reason. Putting the arrangement here is
+ * what keeps the two frames from disagreeing about it: the one place this is
+ * easy to get wrong is the one place it must not be.
+ *
+ * The plot sits in a positioning box of its own rather than directly in the
+ * row. The box is always there, zoomed or not — a wrapper that came and went
+ * would unmount the plot with it, and a plot that unmounts takes the reader's
+ * focus with it.
  */
-export declare function ChartShell({ size, plotRef, name, describedBy, interactive, height, plotProps, children, tooltip, legend, legendSide, status, table, className, ...rest }: ChartShellProps): React.JSX.Element;
+export declare function ChartShell({ size, plotRef, name, describedBy, interactive, height, plotProps, children, tooltip, overlay, legend, legendSide, status, table, className, ...rest }: ChartShellProps): React.JSX.Element;
 export {};

package/dist/internal/ChartChrome.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{VISUALLY_HIDDEN as a}from"./visually-hidden.js";import{cssLength as r}from"./length.js";import{PLOT_HEIGHT as i,formatCategory as s}from"./chart.js";export function useVisibility(e){const[t,l]=n.useState(()=>{const t=new Set;return e.forEach((e,l)=>{e.hidden&&t.add(l)}),t}),[a,r]=n.useState(null),i=n.useCallback(e=>{l(t=>{const l=new Set(t);return l.has(e)?l.delete(e):l.add(e),l})},[]);return{visible:e.map((e,l)=>!t.has(l)),hovered:a,toggle:i,setHovered:r}}export const LEGEND_SIDE={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"};const o={start:"justify-start",center:"justify-center",end:"justify-end"};export function ChartLegend({names:n,colors:a,options:r,visibility:i,size:s,values:c,swatch:m}){const d=!1!==r.interactive,u="xs"===s||"sm"===s?"text-mp-label-small":"text-mp-label-medium";return e("ul",{className:["mp-chart__legend flex flex-wrap items-center gap-x-4 gap-y-1",o[r.align??"center"],u].join(" "),children:n.map((n,r)=>{const s=i.visible[r],o=!s||null!==i.hovered&&i.hovered!==r,u=n??`${r+1}`,p=l(t,{children:[e("span",{className:"shrink-0","aria-hidden":"true",children:m?m(r,a[r]):e("span",{className:"block size-2.5 rounded-mp-full",style:{background:a[r]}})}),e("span",{className:"text-mp-on-surface-variant truncate",children:u}),c?.[r]?e("span",{className:"text-mp-on-surface tabular-nums",children:c[r]}):null]});return e("li",{className:"min-w-0",children:d?e("button",{type:"button","aria-pressed":s,onClick:()=>i.toggle(r),onPointerEnter:()=>i.setHovered(r),onPointerLeave:()=>i.setHovered(null),onFocus:()=>i.setHovered(r),onBlur:()=>i.setHovered(null),className:["flex min-w-0 cursor-pointer items-center gap-1.5 rounded-mp-xs","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2",o?"opacity-40":"",s?"":"line-through"].filter(Boolean).join(" "),children:p}):e("span",{className:"flex min-w-0 items-center gap-1.5 "+(o?"opacity-40":""),children:p})},r)})})}export function ChartTooltipPanel({heading:t,items:n,x:a,y:r,flip:i,size:s}){return l("div",{"aria-hidden":"true",className:["mp-chart__tooltip pointer-events-none absolute z-10 min-w-24 max-w-64","bg-mp-surface-container-high shadow-mp-2 rounded-mp-xs px-2.5 py-2","xs"===s||"sm"===s?"text-mp-label-small":"text-mp-label-medium"].join(" "),style:{left:a,top:r,transform:`translate(${i?"calc(-100% - 12px)":"12px"}, -50%)`},children:[null==t||""===t?null:e("div",{className:"text-mp-on-surface-variant mb-1 truncate",children:t}),e("ul",{className:"flex flex-col gap-0.5",children:n.map(t=>l("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"block size-2 shrink-0 rounded-mp-full",style:{background:t.color}}),t.name?e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:t.name}):null,e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:t.label??t.formatted})]},t.seriesIndex))})]})}export function ChartStatus({heading:r,items:i}){return e("span",{role:"status","aria-live":"polite",className:a,children:0===i.length?null:l(t,{children:[null==r||""===r?null:l(t,{children:[r,", "]}),i.map((e,t)=>l(n.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}export function ChartTable({id:t,caption:n,corner:r,categories:i,names:o,values:c,format:m,locale:d,empty:u}){return e("div",{id:t,className:a,children:l("table",{children:[e("caption",{children:n}),e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:r}),o.map((t,l)=>e("th",{scope:"col",children:t??l+1},l))]})}),e("tbody",{children:0===i.length?e("tr",{children:e("td",{colSpan:o.length+1,children:u})}):i.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:s(t,d)}),o.map((t,l)=>{const a=c[l]?.[n];return e("td",{children:a?.label??(null===a?.value||void 0===a?u:m(a.value))},l)})]},n))})]})})}export function ChartShell({size:t,plotRef:n,name:a,describedBy:s,interactive:o,height:c,plotProps:m,children:d,tooltip:u,legend:p,legendSide:h="bottom",status:f,table:x,className:v,...b}){return l("div",{"data-mp-size":t,className:["mp-chart flex min-w-0 flex-col gap-3",v??""].filter(Boolean).join(" "),...b,children:[l("div",{className:`flex min-w-0 gap-3 ${LEGEND_SIDE[h]}`,children:[l("div",{ref:n,role:"img",tabIndex:o?0:void 0,"aria-label":a,"aria-describedby":s,...m,className:["mp-chart__plot rounded-mp-xs relative min-w-0 flex-1","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),style:{height:r(c)??i[t]},children:[d,u]}),p]}),e(ChartStatus,{heading:f.heading,items:f.items}),x]})}
+import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{VISUALLY_HIDDEN as n}from"./visually-hidden.js";import{cssLength as r}from"./length.js";import{PLOT_HEIGHT as i,formatCategory as s}from"./chart.js";export function useVisibility(e){const[t,l]=a.useState(()=>{const t=new Set;return e.forEach((e,l)=>{e.hidden&&t.add(l)}),t}),[n,r]=a.useState(null),i=a.useCallback(e=>{l(t=>{const l=new Set(t);return l.has(e)?l.delete(e):l.add(e),l})},[]);return{visible:e.map((e,l)=>!t.has(l)),hovered:n,toggle:i,setHovered:r}}const o={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},c={start:"justify-start",center:"justify-center",end:"justify-end"};export function ChartLegend({names:a,colors:n,options:r,visibility:i,size:s,values:o,swatch:m,colorNames:d=!1}){const u=!1!==r.interactive,p="xs"===s||"sm"===s?"text-mp-label-small":"text-mp-label-medium";return e("ul",{className:["mp-chart__legend m-0 flex list-none flex-wrap items-center gap-x-4 gap-y-1 p-0",c[r.align??"center"],p].join(" "),children:a.map((a,r)=>{const s=i.visible[r],c=s&&null!==i.hovered&&i.hovered!==r,p=a??`${r+1}`,h=l(t,{children:[e("span",{className:"shrink-0","aria-hidden":"true",children:m?m(r,n[r]):e("span",{className:"block size-2.5 rounded-mp-full",style:{background:n[r]}})}),e("span",{className:d?"truncate":"text-mp-on-surface-variant truncate",style:d?{color:n[r]}:void 0,children:p}),o?.[r]?e("span",{className:"text-mp-on-surface tabular-nums",children:o[r]}):null]}),f=s?c?"opacity-60":"":"opacity-38";return e("li",{className:"min-w-0",children:u?e("button",{type:"button","aria-pressed":s,onClick:()=>i.toggle(r),onPointerEnter:()=>i.setHovered(r),onPointerLeave:()=>i.setHovered(null),onFocus:e=>{e.currentTarget.matches(":focus-visible")&&i.setHovered(r)},onBlur:()=>i.setHovered(null),className:["flex min-w-0 cursor-pointer items-center gap-1.5 rounded-mp-xs","appearance-none border-0 bg-transparent p-0 text-inherit [font:inherit]","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2",f].filter(Boolean).join(" "),children:h}):e("span",{className:`flex min-w-0 items-center gap-1.5 ${f}`,children:h})},r)})})}export function ChartTooltipPanel({heading:t,items:a,total:n,totalLabel:r,x:i,y:s,flip:o,size:c}){return l("div",{"aria-hidden":"true",className:["mp-chart__tooltip pointer-events-none absolute z-10 min-w-24 max-w-64","bg-mp-surface-container-high shadow-mp-2 rounded-mp-xs px-2.5 py-2","xs"===c||"sm"===c?"text-mp-label-small":"text-mp-label-medium"].join(" "),style:{left:i,top:s,transform:`translate(${o?"calc(-100% - 12px)":"12px"}, -50%)`},children:[null==t||""===t?null:e("div",{className:"text-mp-on-surface-variant mb-1 truncate",children:t}),l("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:[a.map(t=>l("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"block size-2 shrink-0 rounded-mp-full",style:{background:t.color}}),t.name?e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:t.name}):null,e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:t.label??t.formatted})]},t.seriesIndex)),void 0===n?null:l("li",{className:"border-mp-outline-variant mt-1 flex items-center gap-1.5 border-0 border-t border-solid pt-1",children:[e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:r}),e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:n})]})]})]})}export function ChartStatus({heading:r,items:i,total:s,totalLabel:o}){return e("span",{role:"status","aria-live":"polite",className:n,children:0===i.length?null:l(t,{children:[null==r||""===r?null:l(t,{children:[r,", "]}),i.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex)),void 0===s?null:`, ${o}: ${s}`]})})}export function ChartTable({id:t,caption:a,corner:r,categories:i,names:o,values:c,format:m,locale:d,empty:u}){return e("div",{id:t,className:n,children:l("table",{children:[e("caption",{children:a}),e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:r}),o.map((t,l)=>e("th",{scope:"col",children:t??l+1},l))]})}),e("tbody",{children:0===i.length?e("tr",{children:e("td",{colSpan:o.length+1,children:u})}):i.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:s(t,d)}),o.map((t,l)=>{const n=c[l]?.[a];return e("td",{children:n?.label??(null===n?.value||void 0===n?u:m(n.value))},l)})]},a))})]})})}export function ChartShell({size:t,plotRef:a,name:n,describedBy:s,interactive:c,height:m,plotProps:d,children:u,tooltip:p,overlay:h,legend:f,legendSide:x="bottom",status:b,table:v,className:g,...N}){return l("div",{"data-mp-size":t,className:["mp-chart flex min-w-0 flex-col gap-3",g??""].filter(Boolean).join(" "),...N,children:[l("div",{className:`flex min-w-0 gap-3 ${o[x]}`,children:[l("div",{className:"relative flex min-w-0 flex-1",children:[l("div",{ref:a,role:"img",tabIndex:c?0:void 0,"aria-label":n,"aria-describedby":s,...d,className:["mp-chart__plot rounded-mp-xs relative min-w-0 flex-1","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),style:{height:r(m)??i[t]},children:[u,p]}),h]}),f]}),e(ChartStatus,{heading:b.heading,items:b.items,total:b.total,totalLabel:b.totalLabel}),v]})}

package/dist/internal/ChartFrame.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type ChartBaseProps } from './ChartChrome.js';
 import { BandScale, ChartValue, PlotBox, ValueScale } from './chart.js';
-import type { MPChartAxis, MPChartCategory, MPChartSeries, MPChartTooltipItem, MPSize } from '../types.js';
+import type { MPChartAxis, MPChartCategory, MPChartSeries, MPChartStack, MPChartTooltipItem, MPChartZoom, MPSize } from '../types.js';
 /**
  * The frame a chart with two axes is drawn in.
  *
@@ -26,6 +26,15 @@ export interface CartesianChartProps extends ChartBaseProps {
     xAxis?: MPChartAxis;
     /** The value axis. */
     yAxis?: MPChartAxis;
+    /**
+     * Lets a reader drag a range out of the category axis and redraws to it.
+     *
+     * For the chart with ninety points on it, where the shape of one week is
+     * inside a picture of a quarter. Everything follows the window — the scale,
+     * the panel, the readout and the table — so what is drawn is a chart of that
+     * range rather than a magnified picture of the whole one.
+     */
+    zoom?: boolean | MPChartZoom;
 }
 /**
  * One mark on a plot whose marks are not arranged in columns.
@@ -74,6 +83,15 @@ export interface CartesianLayout {
     visible: readonly boolean[];
     /** And what colour each one is, by its original index. */
     colors: readonly string[];
+    /**
+     * What ink a value written onto one of series `index`' marks wears.
+     *
+     * Ordinary ink unless the caller asked for `labelColor="series"`. A chart
+     * whose labels sit **on** a fill rather than beside a mark ignores it: there
+     * the question is what reads against the colour underneath, which is not a
+     * question about identity at all.
+     */
+    labelInk: (series: number) => string;
     scale: ValueScale;
     band: BandScale;
     /** Bars run along the category axis rather than across it. */
@@ -102,6 +120,8 @@ export interface CartesianLayout {
     zeroPx: number;
     categories: readonly MPChartCategory[];
     format: (value: number) => string;
+    /** A fraction as the chart writes a share — whole percentages. */
+    share: (fraction: number) => string;
     size: MPSize;
 }
 /** The layout, plus everything the pointer decides. */
@@ -162,8 +182,8 @@ interface CartesianFrameProps extends CartesianChartProps {
     } | null;
     /** Bars, and only bars, run the other way. */
     horizontal?: boolean;
-    /** The value axis measures totals rather than parts. */
-    stacked?: boolean;
+    /** The value axis measures totals rather than parts, or shares of one. */
+    stacked?: MPChartStack;
     /** A line chart may leave zero out; a bar chart may not. */
     includeZero?: boolean;
     /** How much of a band the marks take. Bars need room reserved; lines do not. */
@@ -193,5 +213,5 @@ interface CartesianFrameProps extends CartesianChartProps {
 /**
  * The frame: two axes, a grid, a crosshair, a legend, a panel and the table.
  */
-export declare function CartesianFrame({ series, categories, xAxis, yAxis, horizontal, stacked, includeZero, bandRatio, inset, headroom, markInset, xScale, marks, markRadius, swatch, scale: givenScale, table: givenTable, markTooltip, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, className, style, children, ...rest }: CartesianFrameProps): React.JSX.Element;
+export declare function CartesianFrame({ series, categories, xAxis, yAxis, horizontal, zoom, stacked, includeZero, bandRatio, inset, headroom, markInset, xScale, marks, markRadius, swatch, scale: givenScale, table: givenTable, markTooltip, height, format, locale: localeProp, label, legend, tooltip, empty, labelColor, size: sizeProp, className, style, children, ...rest }: CartesianFrameProps): React.JSX.Element;
 export {};