material-plus-ui 0.0.1 → 1.1.0

package/dist/index.d.ts

@@ -1,4 +1,77 @@
 export * from './types';
 export * from './constants/icons';
+export * from './components/accordion';
+export * from './components/alert';
+export * from './components/animate-appear';
+export * from './components/animate-blink';
+export * from './components/animate-fade';
+export * from './components/animate-grow';
+export * from './components/animate-headline';
+export * from './components/animate-lighting';
+export * from './components/animate-marquee';
+export * from './components/animate-rotate';
+export * from './components/animate-slide';
+export * from './components/animate-typing';
+export * from './components/animate-zoom';
+export * from './components/aspect-ratio';
+export * from './components/avatar';
+export * from './components/badge';
+export * from './components/blockquote';
+export * from './components/bottom-navigation';
+export * from './components/box';
+export * from './components/breadcrumb';
+export * from './components/button';
+export * from './components/button-group';
+export * from './components/card';
+export * from './components/carousel';
+export * from './components/chat-bubble';
+export * from './components/checkbox';
+export * from './components/chip';
+export * from './components/collapsible';
+export * from './components/color-picker';
+export * from './components/combobox';
+export * from './components/container';
+export * from './components/date-picker';
+export * from './components/date-range-picker';
+export * from './components/date-time-picker';
+export * from './components/dialog';
+export * from './components/divider';
+export * from './components/drawer';
+export * from './components/empty';
+export * from './components/file-picker';
+export * from './components/floating-action-button';
+export * from './components/grid';
+export * from './components/highlight';
 export * from './components/icon';
+export * from './components/icon-button';
+export * from './components/list';
+export * from './components/locale';
+export * from './components/menu';
+export * from './components/number-field';
+export * from './components/otp-field';
+export * from './components/overlay';
+export * from './components/pagination';
+export * from './components/panes';
+export * from './components/pill';
+export * from './components/popover';
+export * from './components/progress-box';
+export * from './components/progress-circular';
+export * from './components/progress-linear';
+export * from './components/radio-group';
+export * from './components/rating';
+export * from './components/segmented-button';
+export * from './components/select';
+export * from './components/shortcut';
+export * from './components/skeleton';
+export * from './components/slider';
+export * from './components/snackbar';
+export * from './components/spoiler';
+export * from './components/switch';
+export * from './components/table';
+export * from './components/tabs';
 export * from './components/text-field';
+export * from './components/text-link';
+export * from './components/time-picker';
+export * from './components/timeline';
+export * from './components/tooltip';
+export * from './components/typography';

package/dist/index.js

@@ -1 +1 @@
-export*from"./types";export*from"./constants/icons";export*from"./components/icon";export*from"./components/text-field";
+export*from"./types";export*from"./constants/icons";export*from"./components/accordion";export*from"./components/alert";export*from"./components/animate-appear";export*from"./components/animate-blink";export*from"./components/animate-fade";export*from"./components/animate-grow";export*from"./components/animate-headline";export*from"./components/animate-lighting";export*from"./components/animate-marquee";export*from"./components/animate-rotate";export*from"./components/animate-slide";export*from"./components/animate-typing";export*from"./components/animate-zoom";export*from"./components/aspect-ratio";export*from"./components/avatar";export*from"./components/badge";export*from"./components/blockquote";export*from"./components/bottom-navigation";export*from"./components/box";export*from"./components/breadcrumb";export*from"./components/button";export*from"./components/button-group";export*from"./components/card";export*from"./components/carousel";export*from"./components/chat-bubble";export*from"./components/checkbox";export*from"./components/chip";export*from"./components/collapsible";export*from"./components/color-picker";export*from"./components/combobox";export*from"./components/container";export*from"./components/date-picker";export*from"./components/date-range-picker";export*from"./components/date-time-picker";export*from"./components/dialog";export*from"./components/divider";export*from"./components/drawer";export*from"./components/empty";export*from"./components/file-picker";export*from"./components/floating-action-button";export*from"./components/grid";export*from"./components/highlight";export*from"./components/icon";export*from"./components/icon-button";export*from"./components/list";export*from"./components/locale";export*from"./components/menu";export*from"./components/number-field";export*from"./components/otp-field";export*from"./components/overlay";export*from"./components/pagination";export*from"./components/panes";export*from"./components/pill";export*from"./components/popover";export*from"./components/progress-box";export*from"./components/progress-circular";export*from"./components/progress-linear";export*from"./components/radio-group";export*from"./components/rating";export*from"./components/segmented-button";export*from"./components/select";export*from"./components/shortcut";export*from"./components/skeleton";export*from"./components/slider";export*from"./components/snackbar";export*from"./components/spoiler";export*from"./components/switch";export*from"./components/table";export*from"./components/tabs";export*from"./components/text-field";export*from"./components/text-link";export*from"./components/time-picker";export*from"./components/timeline";export*from"./components/tooltip";export*from"./components/typography";

package/dist/internal/Calendar.d.ts

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { type MPTimeUnit } from './date';
+import type { MPMessages } from './i18n';
+import type { MPColor, MPSize, MPWeekday } from '../types';
+/**
+ * The calendar grid and the clock columns, written once for the four pickers.
+ *
+ * They live in `internal/` for the reason `menu.ts` does: a date-time picker is a
+ * date picker and a time picker in one popup, and a range picker is two
+ * calendars, so three components need this and none of them should have to
+ * import another. The two things it reaches *up* for are `MPButton` and
+ * `MPIconButton` — the header's steppers are buttons, they are not a new kind of
+ * control. Nothing here is exported from `src/index.ts`.
+ *
+ * The day cells are deliberately *not* buttons in that sense. A cell has states
+ * a button has no vocabulary for — inside a range, at the end of a range, today,
+ * belonging to the month next door — and four of them have to be told apart at a
+ * glance in a grid of forty-two.
+ */
+/** The strings a picker says that `Intl` has no opinion about. */
+export type MPPickerLabels = MPMessages['picker'];
+export interface MPCalendarProps {
+    size: MPSize;
+    color: MPColor;
+    locale?: string;
+    weekStartsOn: MPWeekday;
+    /** The month on screen. Controlled, so two panels can be kept a month apart. */
+    month: Date;
+    onMonthChange: (month: Date) => void;
+    /** The days drawn filled — one for a single picker, up to two for a range. */
+    selected: readonly (Date | null | undefined)[];
+    /** The two ends the band is drawn between. Both `null` outside range mode. */
+    rangeStart?: Date | null;
+    rangeEnd?: Date | null;
+    onSelect: (date: Date) => void;
+    /** The day under the pointer, for a range that is only half chosen. */
+    onPreviewChange?: (date: Date | null) => void;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * Draws the leading and trailing days that belong to the neighbouring months.
+     *
+     * On by default, because clicking the 1st of next month from this month's
+     * panel is a real shortcut. A two-month range picker turns it *off*, and not
+     * as a matter of taste: with both panels showing six full weeks, the 1st of
+     * August appears twice — once as a trailing day of July and once as itself —
+     * and two cells with the same name in one popup is ambiguous to a pointer and
+     * outright broken to a screen reader.
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /** Takes the focus on mount — the popup has just opened. */
+    autoFocus?: boolean;
+    showPreviousButton?: boolean;
+    showNextButton?: boolean;
+    labels: MPPickerLabels;
+}
+/**
+ * One month, with a way to reach every other one.
+ *
+ * Three views on the same footprint: the days of a month, the twelve months of a
+ * year, twelve years at a time. They are deliberately the same width *and* the
+ * same height — the day view is seven rows counting its header, and the other
+ * two stretch four rows and three rows across that same height — so switching
+ * view never resizes the popup under the pointer that opened it.
+ *
+ * Arrow keys move by one cell, `PageUp`/`PageDown` by a month (a year with
+ * Shift), `Home`/`End` to the ends of the week, and running off an edge steps
+ * the calendar rather than stopping. One roving tab stop, so `Tab` leaves the
+ * grid instead of walking forty-two cells — the pattern the ARIA date-picker
+ * practice describes, and the reason none of the cells is a `disabled` button.
+ */
+export declare function MPCalendar({ size, color, locale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, showPreviousButton, showNextButton, labels }: MPCalendarProps): React.JSX.Element;
+export interface MPTimeGridProps {
+    size: MPSize;
+    locale?: string;
+    /** The time on screen, or `null` while nothing has been chosen. */
+    value: Date | null;
+    /** The day the columns write into while `value` is still `null`. */
+    referenceDate: Date;
+    onChange: (value: Date) => void;
+    /** A 12-hour dial with an AM/PM column. */
+    hour12: boolean;
+    showSeconds: boolean;
+    hourStep: number;
+    minuteStep: number;
+    secondStep: number;
+    shouldDisableTime?: (value: Date, unit: MPTimeUnit) => boolean;
+    /** Takes the focus on mount — the popup has just opened. */
+    autoFocus?: boolean;
+    labels: MPPickerLabels;
+}
+/**
+ * Hours, minutes and — when asked for — seconds, as columns you scroll.
+ *
+ * ## Why this is not MD3's dial
+ *
+ * The specification's time picker is a clock face, and this is not one. That is
+ * a deliberate departure, and the only one of its size in this library, so it is
+ * worth stating the reason plainly: a dial is a *pointer* control. Reading it
+ * takes a glance at an analogue clock, setting it takes a drag, and the
+ * keyboard and screen-reader path is a separate "time input" mode that MD3
+ * ships precisely because the dial cannot serve one. That leaves a component
+ * with two implementations of the same question, of which the accessible one is
+ * the one nobody sees.
+ *
+ * Columns answer both readers with one control. "Half past nine" is two glances,
+ * "any time at all, on the hour" is a column you never touch, and every row is a
+ * real option in a real listbox that arrow keys already reach. The library's own
+ * ladder, corners and state layers do the rest of the work of looking like
+ * Material.
+ *
+ * The chosen row in each column is scrolled into view once, on open. That is the
+ * only imperative work here and it is not optional: a column of sixty minutes
+ * that opens at `00` while the value is `45` has hidden its own answer.
+ */
+export declare function MPTimeGrid({ size, locale, value, referenceDate, onChange, hour12, showSeconds, hourStep, minuteStep, secondStep, shouldDisableTime, autoFocus, labels }: MPTimeGridProps): React.JSX.Element;

package/dist/internal/Calendar.js

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

package/dist/internal/FieldOutline.d.ts

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import type { MPSize } from '../types';
+export interface MPFieldOutlineProps {
+    /** The label, which is what cuts the notch. Without one the outline is closed. */
+    label?: React.ReactNode;
+    required?: boolean;
+    /**
+     * Whether the notch is cut. `false` closes it, for the moment the label is
+     * resting on the control's line and there is nothing on the border to make
+     * room for.
+     * @default true
+     */
+    notched?: boolean;
+}
+/**
+ * The outline itself.
+ *
+ * A `<legend>` inside a `<fieldset>` natively interrupts the top border, which
+ * is exactly the notch an outlined text field has — sized to the text, with no
+ * measuring in JavaScript. The legend is hidden with `invisible` rather than
+ * removed, because a legend with no content reserves no gap.
+ *
+ * Decorative, and hidden from the accessibility tree: the accessible name comes
+ * from the real `<label>`, and announcing a `<fieldset>` as a group around a
+ * single control is noise a screen reader does not need.
+ */
+export declare function MPFieldOutline({ label, required, notched }: MPFieldOutlineProps): React.JSX.Element;
+export interface MPFieldLabelProps extends MPFieldOutlineProps {
+    /**
+     * Which rung the control is drawn at. Read twice: for the inline offset, so
+     * the label lands over the gap the container's padding put the notch in, and
+     * for the type scale it rests at.
+     */
+    size: MPSize;
+    /** The control the label names. */
+    htmlFor?: string;
+    /**
+     * Whether the label is up in the notch. `false` rests it on the control's own
+     * line, at the control's own type scale, where it reads as the placeholder.
+     * @default true
+     */
+    shrunk?: boolean;
+    /**
+     * Whether the control is a `<textarea>`, which is the one case a resting
+     * label cannot simply be centred in. See `MULTILINE_REST`.
+     * @default false
+     */
+    multiline?: boolean;
+}
+/**
+ * The label a reader actually gets.
+ *
+ * A real `<label>`, associated with the control by Base UI, sitting on the
+ * border line where the legend cut it away. It cannot *be* the legend: the
+ * outline is `pointer-events-none` so that clicks land on the control
+ * underneath, and a label inside it would stop being clickable.
+ *
+ * Resting, it is `pointer-events-none` instead — it is lying over the text the
+ * caret goes into, and a click on it has to reach the control so the caret
+ * lands where the pointer did. A `<label for>` would only have focused the
+ * control, which puts the caret at the end of the text rather than under the
+ * pointer.
+ */
+export declare function MPFieldLabel({ size, label, required, htmlFor, shrunk, multiline }: MPFieldLabelProps): React.JSX.Element;
+export interface MPFloatingLabel {
+    /** Whether the label is up in the notch right now. */
+    shrunk: boolean;
+    /**
+     * Spread on the element the control sits inside — the `Field.Root`, or the
+     * shell `<div>` under it. Anything focusable within it counts as the field
+     * being focused, which is what a reader tabbing onto a password toggle or a
+     * stepper means by it.
+     */
+    focusProps: {
+        onFocusCapture: React.FocusEventHandler<HTMLElement>;
+        onBlurCapture: React.FocusEventHandler<HTMLElement>;
+    };
+}
+export interface MPFloatingLabelOptions {
+    /**
+     * Whether the label floats at all. `false` pins it in the notch — which is
+     * also what a control with no label wants, since there is nothing to rest.
+     */
+    floating: boolean;
+    /** Whether the control holds anything. A filled control keeps its label up. */
+    filled: boolean;
+    /**
+     * Anything else that holds the label up: a start adornment already occupying
+     * the resting label's place, or a popup the focus has moved into.
+     * @default false
+     */
+    pinned?: boolean;
+}
+/**
+ * Which of its two places the label is in, and how the field learns it moved.
+ *
+ * Focus is tracked here rather than read from Base UI's `data-focused` because
+ * the two do not agree on what a field is. `data-focused` follows the one
+ * control the `Field` owns, and half the shells here have a button beside it —
+ * a reveal toggle, a stepper, a clear × — that a reader on the keyboard is
+ * plainly still *in* the field for. `focus-within` on the shell is the honest
+ * boundary, and a capture-phase pair is how React spells it without a
+ * `:focus-within` selector, which cannot be read back as a value.
+ *
+ * The `relatedTarget` test is what keeps the label still while focus moves
+ * between two things inside the same shell. Without it, tabbing from the input
+ * to the toggle drops the label and lifts it again in the same frame.
+ */
+export declare function useFloatingLabel({ floating, filled, pinned }: MPFloatingLabelOptions): MPFloatingLabel;

package/dist/internal/FieldOutline.js

@@ -0,0 +1 @@
+import{jsx as r,Fragment as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{PROSE_TEXT as a}from"./scale";const i={xs:"left-1",sm:"left-2",md:"left-3",lg:"left-3",xl:"left-4"},s={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function d(o,n){return t(e,{children:[o,n?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:e,required:t=!1,notched:o=!0}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 -top-[5px] m-0 min-w-0 px-2 pt-0","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].join(" "),children:e?r("legend",{className:["text-mp-body-small invisible float-none block h-[11px] w-auto overflow-hidden p-0","leading-none","ease-mp-standard transition-[max-width,padding]","duration-(--mp-sys-motion-duration-short4)",o?"max-w-full px-1":"max-w-0 px-0"].join(" "),children:d(e,t)}):null})}export function MPFieldLabel({size:e,label:t,required:o=!1,htmlFor:p,shrunk:l=!0,multiline:u=!1}){return r(n.Label,{htmlFor:p,"data-mp-shrunk":l?"":void 0,className:["text-mp-on-surface-variant","ease-mp-standard transition-[color,top,font-size,max-width]","duration-(--mp-sys-motion-duration-short4)","absolute -translate-y-1/2 px-1 leading-none",i[e],l?"text-mp-body-small pointer-events-auto top-0 max-w-none":[a[e],"pointer-events-none max-w-[calc(100%-2rem)] truncate",u?s[e]:"top-1/2"].join(" "),"group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:d(t,o)})}export function useFloatingLabel({floating:r,filled:e,pinned:t=!1}){const[n,a]=o.useState(!1);return{shrunk:!r||e||n||t,focusProps:{onFocusCapture:()=>a(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||a(!1)}}}}

package/dist/internal/Picker.d.ts

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import type { MPPickerLabels } from './Calendar';
+import type { MPColor, MPSize, MPStyleProps } from '../types';
+/**
+ * The strings a trigger is held open by, kept across renders that did not
+ * change what it could say.
+ *
+ * `displaySamples` formats two dozen instants and deduplicates them, which is
+ * cheap once and not cheap sixty times a second — and sixty times a second is
+ * exactly what a range picker asks for, because moving the pointer across the
+ * calendar re-renders the whole control to redraw the band.
+ *
+ * ## Why it is keyed on the format's *contents*
+ *
+ * Because an options object is nearly always a fresh one. Three of the four
+ * pickers build theirs from a default parameter or a literal, so it is a new
+ * object on every render by construction; and a caller who writes
+ * `format={{ dateStyle: 'full' }}` inline hands over a new object too. Keyed on
+ * identity, the memo would miss every single time — which is what it was doing.
+ *
+ * Serialising instead means the memo holds for as long as the format *says* the
+ * same thing, whoever built the object. `internal/date.ts` keys its formatter
+ * cache the same way, and inherits the same harmless quirk: two objects whose
+ * keys are in a different order read as two formats. That costs one extra miss,
+ * never a wrong answer.
+ */
+export declare function useDisplaySamples(locale: string | undefined, options: Intl.DateTimeFormatOptions): string[];
+/**
+ * The props a picker takes from its shell rather than inventing.
+ *
+ * Written out here rather than left to `MPStyleProps` alone because these are
+ * the rows a reader of the docs is actually looking at — every one of the four
+ * pickers lists them, and they mean the same thing on all four.
+ */
+export interface MPPickerShellProps extends MPStyleProps {
+    /**
+     * Which accent family the popup reads: the chosen day's fill, the band across
+     * a range, today's outline, the footer's confirm button.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * Label for the picker, drawn in the outline's notch and — while nothing is
+     * chosen, the popup is shut and there is no leading glyph — resting on the
+     * trigger's own line where the placeholder would be. See `floatingLabel`.
+     */
+    label?: React.ReactNode;
+    /**
+     * Whether the label rests on the trigger's line while there is nothing to make
+     * room for, and rises into the notch on focus or on the first choice.
+     *
+     * A picker draws its own glyph before the value, and that glyph stands exactly
+     * where a resting label would — so in practice this only takes effect on a
+     * picker asked for without one, `startIcon={null}`. Two things cannot share a
+     * spot, and of the two the glyph is what says the trigger opens a calendar.
+     * @default true
+     */
+    floatingLabel?: boolean;
+    /** The line under the control. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /**
+     * The message under the control. Its presence is also what puts the picker
+     * into its error state — there is no separate `error` boolean, so there is no
+     * way to render a control that is visibly wrong with no explanation of why.
+     */
+    errorMessage?: React.ReactNode;
+    /**
+     * Content placed before the value. Defaults to the picker's own glyph, and
+     * `null` is how that glyph is asked for by name to go away.
+     */
+    startIcon?: React.ReactNode;
+    /** Marks the picker required, both to assistive technology and to the label. */
+    required?: boolean;
+    /** Greys the picker out and stops it opening. */
+    disabled?: boolean;
+    /**
+     * Shows the value without allowing it to be changed, and stays focusable.
+     *
+     * The popup does not open either. What a read-only picker holds is something
+     * to read, and a calendar whose every cell was inert would be a menu of
+     * nothing.
+     */
+    readOnly?: boolean;
+    /**
+     * The id put on the trigger and pointed at by the label. Generated when it is
+     * left out.
+     */
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface InternalShellProps extends MPPickerShellProps {
+    /** Which component this is, for the class hook and the generated id. */
+    slug: string;
+    /** What the trigger reads. A placeholder when `empty`. */
+    display: React.ReactNode;
+    /**
+     * Every string the display could hold, so the trigger stops changing width
+     * with its value. `displaySamples` in `internal/date` produces them and
+     * `MPWidthSizer` is what lays them out.
+     */
+    samples?: string[];
+    /** Nothing has been chosen yet, so the display is muted. */
+    empty: boolean;
+    /** Offers the × that empties the control. */
+    clearable?: boolean;
+    onClear: () => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    labels: MPPickerLabels;
+    /**
+     * `<input type="hidden">` rows, so the control submits with a form.
+     *
+     * Each row carries its own name, which is why the shell takes no `name` of
+     * its own: a range picker submits two of them under one name, and the id the
+     * label points at is generated rather than derived from it.
+     */
+    hiddenValues?: Array<{
+        name: string;
+        value: string;
+    }>;
+    children: React.ReactNode;
+    triggerRef?: React.Ref<HTMLButtonElement>;
+}
+/**
+ * A trigger, a label, the line of text under it, and a popup.
+ *
+ * Everything about it that is visible is a decision already made elsewhere: the
+ * notched outline, the label in the notch, the supporting text, the disabled
+ * treatment, and the popup's `surface-container` at elevation 2 — which is the
+ * same floating sheet a menu and a select's list are drawn on.
+ */
+export declare function MPPickerShell({ slug, size, color, fullWidth, label, floatingLabel, description, errorMessage, startIcon, required, disabled, readOnly, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, children, triggerRef }: InternalShellProps): React.JSX.Element;
+/**
+ * The row of shortcuts under a picker's panel.
+ *
+ * A hairline above it rather than a gap, because the actions act on the panel
+ * and a gap would read as a second popup stacked under the first.
+ */
+export declare function MPPickerFooter({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** The vertical hairline between a calendar and the clock beside it. */
+export declare function MPPickerDivider(): React.JSX.Element;
+/**
+ * What a picker's footer buttons are drawn at.
+ *
+ * The same rung the calendar's header uses, for the same reason: a `md` picker's
+ * footer sitting at the control ladder's 56px would be taller than two rows of
+ * the calendar above it.
+ */
+export declare const FOOTER_SIZE: Record<MPSize, MPSize>;
+export {};

package/dist/internal/Picker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{Field as n}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{MPIcon as o}from"../components/icon/MPIcon";import{CloseIcon as a}from"../constants/icons";import{accentSlots as l}from"./accent";import{MPFieldLabel as s,MPFieldOutline as p,useFloatingLabel as c}from"./FieldOutline";import{MPStateLayer as m}from"./StateLayer";import{MPSupportingText as d}from"./SupportingText";import{MPWidthSizer as u}from"./WidthSizer";import{displaySamples as f}from"./date";import{CONTROL_ICON as h,hasContent as g,PROSE_TEXT as x}from"./scale";import{FADE as b,PORTAL_LAYER as v}from"./surface";export function useDisplaySamples(e,r){const n=`${e??""} ${JSON.stringify(r)}`;return i.useMemo(()=>f(e,r),[n])}const y={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}},N={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function MPPickerShell({slug:f,size:j="md",color:P="primary",fullWidth:w=!1,label:O,floatingLabel:k=!0,description:M,errorMessage:S,startIcon:z,required:F=!1,disabled:B=!1,readOnly:C=!1,id:I,className:R,style:$,display:q,samples:T,empty:_,clearable:D=!1,onClear:E,open:L,onOpenChange:W,labels:J,hiddenValues:V,children:Z,triggerRef:A}){const G=g(S),H=y[j],K=i.useId(),Q=I??K,U=D&&!_&&!(B||C),{shrunk:X,focusProps:Y}=c({floating:k&&g(O),filled:!_,pinned:L||g(z)});return r(n.Root,{disabled:B,invalid:G,"data-mp-size":j,className:[`mp-${f} group flex-col align-top`,w?"flex w-full":"inline-flex w-fit",R??""].filter(Boolean).join(" "),style:{...l(P),...$},...Y,children:[r(t.Root,{open:L,onOpenChange:W,children:[r("div",{className:"relative w-full",children:[r(t.Trigger,{id:Q,ref:A,disabled:B,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",H.padding,U?"pe-10":"",H.height,x[j],B?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(C?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[z?e("span",{className:["flex shrink-0 items-center",B?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:z}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:["w-full truncate text-start",_&&!B?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:_&&!X?null:q}),e(u,{samples:T??[]})]})]}),U?r("button",{type:"button","aria-label":J.clear,onClick:E,className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(m,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(o,{icon:a,size:h[j]})]}):null,e(p,{label:O,required:F,notched:X}),g(O)?e(s,{size:j,label:O,required:F,htmlFor:Q,shrunk:X}):null]}),e(t.Portal,{children:e(t.Positioner,{className:v,sideOffset:4,align:"start",children:e(t.Popup,{initialFocus:!1,className:[`mp-${f}__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container`,"text-mp-on-surface outline-none",N[j],x[j],b].join(" "),children:Z})})})]}),e(d,{description:M,errorMessage:S,className:H.padding}),V?.map((r,i)=>e("input",{type:"hidden",name:r.name,value:r.value},i))]})}export function MPPickerFooter({children:r}){return e("div",{className:"border-mp-outline-variant flex items-center justify-end gap-1 border-t pt-1.5",children:r})}export function MPPickerDivider(){return e("div",{"aria-hidden":"true",className:"bg-mp-outline-variant w-px self-stretch"})}export const FOOTER_SIZE={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};

package/dist/internal/StateLayer.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+/**
+ * Material's state layer.
+ *
+ * MD3 does not express hover, focus and press as three more colours. It puts a
+ * translucent wash of the *content* colour over the container — 8% hovered, 10%
+ * focused or pressed — so one rule covers a filled button, an outlined one and a
+ * bare text one without any of them naming a second background.
+ *
+ * That is the whole reason this is an element rather than a `hover:bg-…` on the
+ * control itself. A background can only be replaced, and replacing it is what
+ * makes a text button's hover state opaque and an outlined button's hover state
+ * cover its own border. A layer composites instead, so whatever was underneath —
+ * a fill, a hairline, nothing at all — is still there under the wash.
+ *
+ * `bg-current` is what makes it one rule: the layer takes the colour of the
+ * label it sits behind, which is already the right ink for the surface. A caller
+ * that needs a different one sets `text-…` on the layer.
+ *
+ * ## How it is wired
+ *
+ * The control carries `group` and `relative`; this carries `group-hover:` and
+ * friends. It cannot key off its own `:hover` because it covers the control and
+ * has to be `pointer-events-none` for clicks to reach it — and an element that
+ * takes no pointer events is never hovered.
+ *
+ * `rounded-[inherit]` rather than a radius of its own: the layer is the control's
+ * shape, and a pill with a square wash in it is worse than no wash.
+ *
+ * ## `layer` replaces the appearance rather than adding to it
+ *
+ * The shape and the colour arrive as one string because a tick's layer is
+ * neither. MD3 draws it as a 40dp circle *around* an 18dp box, in `on-surface`
+ * rather than in the ink — which for a ticked checkbox is white, and a white
+ * halo is not a state. Appending those classes to the defaults would leave two
+ * `background-color` declarations of equal specificity fighting, and which one
+ * wins is decided by their order in the generated stylesheet. So the caller
+ * replaces the set rather than adding to it, and only the opacity ladder — the
+ * part that is genuinely the same everywhere — is fixed here.
+ */
+export declare function MPStateLayer({ layer, className }: {
+    /** Shape, position and colour. Replaces the defaults; it does not extend them. */
+    layer?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/internal/StateLayer.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";export function MPStateLayer({layer:t="inset-0 rounded-[inherit] bg-current",className:a}){return o("span",{"aria-hidden":"true",className:["pointer-events-none absolute opacity-0",t,"transition-opacity duration-(--mp-sys-motion-duration-short4)","group-hover:opacity-8","group-active:opacity-10","group-focus-visible:opacity-10","group-disabled:opacity-0 group-data-disabled:opacity-0",a??""].filter(Boolean).join(" ")})}

package/dist/internal/SupportingText.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+/**
+ * The line under a control.
+ *
+ * Material calls it supporting text and gives it one slot, not two — which is
+ * why this renders *either* the description or the error rather than stacking
+ * them. An error is not additional information about a field, it is the field's
+ * current problem, and pushing the description down a line to make room leaves
+ * the reader reading a sentence that has just stopped applying.
+ *
+ * Both parts come from Base UI's `Field`, so whichever one is showing is wired
+ * to the control by `aria-describedby` without anybody generating an id.
+ * `Field.Error` needs `match` because it normally waits for the browser's own
+ * validity state; here the message's presence *is* the state, which is the same
+ * bargain `MPTextField.errorMessage` makes — there is no way to render a control
+ * that is visibly wrong with no explanation of why.
+ */
+export declare function MPSupportingText({ description, errorMessage, className }: {
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    /** Whatever inset lines the text up with the control it belongs to. */
+    className?: string;
+}): React.JSX.Element | null;

package/dist/internal/SupportingText.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{Field as e}from"@base-ui/react/field";import{META_TEXT as t,hasContent as o}from"./scale";export function MPSupportingText({description:a,errorMessage:s,className:i}){const n=["mp-supporting-text block",t,"data-disabled:text-mp-on-surface/38",i??""].filter(Boolean).join(" ");return o(s)?r(e.Error,{match:!0,className:`${n} text-mp-error`,children:s}):o(a)?r(e.Description,{className:`${n} text-mp-on-surface-variant`,children:a}):null}

package/dist/internal/WidthSizer.d.ts

@@ -0,0 +1,31 @@
+import type * as React from 'react';
+/**
+ * Holds a control open at the width of the widest thing it could ever say.
+ *
+ * A control that is not `fullWidth` is sized by what it is *currently* saying,
+ * which for anything whose value changes means the box changes with it. A date
+ * picker on the 1st is a dozen pixels narrower than the same picker on the 28th,
+ * and `Sep` is wider than `May`. Either way the field moves under the pointer
+ * that just used it, and the whole row of controls beside it shuffles along.
+ *
+ * So the alternatives are laid out too, stacked in a box clipped to no height.
+ * The control's intrinsic width becomes the widest of them and stops depending
+ * on the value.
+ *
+ * Three things it deliberately is not:
+ *
+ * - **Not `hidden`, and not `display: none`.** Both take the box out of layout,
+ *   and a box that is not laid out reserves nothing.
+ * - **Not read out.** `aria-hidden`, or a screen reader would announce every
+ *   date the control might hold before the one it does.
+ * - **Not text.** A sample is drawn as generated content off a data attribute
+ *   rather than as a text node. `content: attr(…)` lays out exactly like text,
+ *   so it reserves the same width — but it leaves nothing for `getByText` or a
+ *   browser's find-in-page to trip over, so a caller's test asking for the date
+ *   they chose keeps finding one element rather than two.
+ */
+export declare function MPWidthSizer({ samples }: {
+    samples: readonly string[];
+}): React.JSX.Element | null;
+/** The props a component hands over when it wants one of these. */
+export type MPWidthSizerProps = React.ComponentProps<typeof MPWidthSizer>;

package/dist/internal/WidthSizer.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";export function MPWidthSizer({samples:a}){return 0===a.length?null:e("span",{"aria-hidden":"true",className:"invisible h-0 min-h-0 overflow-hidden",children:a.map((a,n)=>e("span",{"data-sample":a,className:"block whitespace-nowrap before:content-[attr(data-sample)]"},`${n}:${a}`))})}