material-plus-ui 1.6.0 → 1.7.0

package/dist/hooks/useMPElementSize.d.ts

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

package/dist/hooks/useMPElementSize.js

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

package/dist/hooks/useMPMediaQuery.d.ts

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

package/dist/hooks/useMPMediaQuery.js

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

package/dist/hooks/useMPOnScreen.d.ts

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

package/dist/hooks/useMPOnScreen.js

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

package/dist/hooks/useMPReducedMotion.js

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

package/dist/hooks/useMPWindowClass.d.ts

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

package/dist/hooks/useMPWindowClass.js

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

package/dist/index.d.ts

@@ -4,21 +4,30 @@ export * from './constants/icons.js';
 export * from './hooks/index.js';
 export * from './components/accordion/index.js';
 export * from './components/alert/index.js';
+export * from './components/anchor/index.js';
+export * from './components/app-logo/index.js';
 export * from './components/animate-appear/index.js';
 export * from './components/animate-blink/index.js';
+export * from './components/animate-counter/index.js';
 export * from './components/animate-fade/index.js';
+export * from './components/animate-float/index.js';
 export * from './components/animate-grow/index.js';
 export * from './components/animate-headline/index.js';
 export * from './components/animate-lighting/index.js';
 export * from './components/animate-marquee/index.js';
+export * from './components/animate-reveal/index.js';
 export * from './components/animate-rotate/index.js';
+export * from './components/animate-scramble/index.js';
+export * from './components/animate-shake/index.js';
 export * from './components/animate-slide/index.js';
+export * from './components/animate-split/index.js';
 export * from './components/animate-typing/index.js';
 export * from './components/animate-zoom/index.js';
+export * from './components/area-chart/index.js';
 export * from './components/aspect-ratio/index.js';
 export * from './components/avatar/index.js';
-export * from './components/avatar-group/index.js';
 export * from './components/badge/index.js';
+export * from './components/bar-chart/index.js';
 export * from './components/blockquote/index.js';
 export * from './components/bottom-navigation/index.js';
 export * from './components/box/index.js';
@@ -31,6 +40,7 @@ export * from './components/carousel/index.js';
 export * from './components/chat-bubble/index.js';
 export * from './components/checkbox/index.js';
 export * from './components/chip/index.js';
+export * from './components/code-block/index.js';
 export * from './components/collapsible/index.js';
 export * from './components/config/index.js';
 export * from './components/confirm/index.js';
@@ -38,6 +48,8 @@ export * from './components/color-picker/index.js';
 export * from './components/combobox/index.js';
 export * from './components/command-palette/index.js';
 export * from './components/container/index.js';
+export * from './components/data-list/index.js';
+export * from './components/data-table/index.js';
 export * from './components/date-picker/index.js';
 export * from './components/date-range-picker/index.js';
 export * from './components/date-time-picker/index.js';
@@ -47,19 +59,27 @@ export * from './components/drawer/index.js';
 export * from './components/empty/index.js';
 export * from './components/fieldset/index.js';
 export * from './components/file-picker/index.js';
+export * from './components/flex/index.js';
 export * from './components/floating-action-button/index.js';
+export * from './components/floating-bottom-navigation/index.js';
 export * from './components/footer/index.js';
 export * from './components/form/index.js';
+export * from './components/gauge-chart/index.js';
 export * from './components/grid/index.js';
 export * from './components/header/index.js';
+export * from './components/heatmap-chart/index.js';
 export * from './components/highlight/index.js';
+export * from './components/hover-card/index.js';
 export * from './components/icon/index.js';
 export * from './components/icon-button/index.js';
 export * from './components/image/index.js';
+export * from './components/line-chart/index.js';
 export * from './components/list/index.js';
 export * from './components/locale/index.js';
 export * from './components/menu/index.js';
 export * from './components/menubar/index.js';
+export * from './components/meter/index.js';
+export * from './components/mockup/index.js';
 export * from './components/navigation-menu/index.js';
 export * from './components/number-field/index.js';
 export * from './components/otp-field/index.js';
@@ -67,22 +87,31 @@ export * from './components/overlay/index.js';
 export * from './components/page-layout/index.js';
 export * from './components/pagination/index.js';
 export * from './components/panes/index.js';
+export * from './components/pie-chart/index.js';
 export * from './components/pill/index.js';
 export * from './components/popconfirm/index.js';
 export * from './components/popover/index.js';
+export * from './components/portal/index.js';
 export * from './components/progress-box/index.js';
 export * from './components/progress-circular/index.js';
 export * from './components/progress-linear/index.js';
 export * from './components/radio-group/index.js';
 export * from './components/rating/index.js';
+export * from './components/scatter-chart/index.js';
+export * from './components/scroll-area/index.js';
+export * from './components/scroll-zone/index.js';
 export * from './components/segmented-button/index.js';
 export * from './components/select/index.js';
 export * from './components/shortcut/index.js';
+export * from './components/show/index.js';
 export * from './components/sidebar/index.js';
 export * from './components/skeleton/index.js';
 export * from './components/slider/index.js';
 export * from './components/snackbar/index.js';
 export * from './components/spoiler/index.js';
+export * from './components/sparkline/index.js';
+export * from './components/stack/index.js';
+export * from './components/statistic/index.js';
 export * from './components/stepper/index.js';
 export * from './components/switch/index.js';
 export * from './components/table/index.js';
@@ -91,9 +120,14 @@ export * from './components/text-field/index.js';
 export * from './components/text-link/index.js';
 export * from './components/time-picker/index.js';
 export * from './components/timeline/index.js';
+export * from './components/timeline-chart/index.js';
 export * from './components/toggle/index.js';
 export * from './components/toggle-group/index.js';
+export * from './components/toolbar/index.js';
 export * from './components/tooltip/index.js';
+export * from './components/tour/index.js';
 export * from './components/transfer/index.js';
+export * from './components/tree-select/index.js';
+export * from './components/tree-view/index.js';
 export * from './components/typography/index.js';
 export * from './components/visually-hidden/index.js';

package/dist/index.js

@@ -1 +1 @@
-export*from"./types.js";export{registerMPMessages}from"./internal/i18n.js";export*from"./constants/icons.js";export*from"./hooks/index.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/avatar-group/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/calendar/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/config/index.js";export*from"./components/confirm/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/command-palette/index.js";export*from"./components/container/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/dialog/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/empty/index.js";export*from"./components/fieldset/index.js";export*from"./components/file-picker/index.js";export*from"./components/floating-action-button/index.js";export*from"./components/footer/index.js";export*from"./components/form/index.js";export*from"./components/grid/index.js";export*from"./components/header/index.js";export*from"./components/highlight/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/image/index.js";export*from"./components/list/index.js";export*from"./components/locale/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/navigation-menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/page-layout/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popconfirm/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/shortcut/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/snackbar/index.js";export*from"./components/spoiler/index.js";export*from"./components/stepper/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/toggle/index.js";export*from"./components/toggle-group/index.js";export*from"./components/tooltip/index.js";export*from"./components/transfer/index.js";export*from"./components/typography/index.js";export*from"./components/visually-hidden/index.js";
+export*from"./types.js";export{registerMPMessages}from"./internal/i18n.js";export*from"./constants/icons.js";export*from"./hooks/index.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/anchor/index.js";export*from"./components/app-logo/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-counter/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-float/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-reveal/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-scramble/index.js";export*from"./components/animate-shake/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-split/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/area-chart/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/badge/index.js";export*from"./components/bar-chart/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/calendar/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/code-block/index.js";export*from"./components/collapsible/index.js";export*from"./components/config/index.js";export*from"./components/confirm/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/command-palette/index.js";export*from"./components/container/index.js";export*from"./components/data-list/index.js";export*from"./components/data-table/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/dialog/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/empty/index.js";export*from"./components/fieldset/index.js";export*from"./components/file-picker/index.js";export*from"./components/flex/index.js";export*from"./components/floating-action-button/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/footer/index.js";export*from"./components/form/index.js";export*from"./components/gauge-chart/index.js";export*from"./components/grid/index.js";export*from"./components/header/index.js";export*from"./components/heatmap-chart/index.js";export*from"./components/highlight/index.js";export*from"./components/hover-card/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/image/index.js";export*from"./components/line-chart/index.js";export*from"./components/list/index.js";export*from"./components/locale/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/meter/index.js";export*from"./components/mockup/index.js";export*from"./components/navigation-menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/page-layout/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pie-chart/index.js";export*from"./components/pill/index.js";export*from"./components/popconfirm/index.js";export*from"./components/popover/index.js";export*from"./components/portal/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scatter-chart/index.js";export*from"./components/scroll-area/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/shortcut/index.js";export*from"./components/show/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/snackbar/index.js";export*from"./components/spoiler/index.js";export*from"./components/sparkline/index.js";export*from"./components/stack/index.js";export*from"./components/statistic/index.js";export*from"./components/stepper/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/timeline-chart/index.js";export*from"./components/toggle/index.js";export*from"./components/toggle-group/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/tour/index.js";export*from"./components/transfer/index.js";export*from"./components/tree-select/index.js";export*from"./components/tree-view/index.js";export*from"./components/typography/index.js";export*from"./components/visually-hidden/index.js";

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 w,dateFormatter as x,isDayOutside as b,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:w,onViewChange:x}){const b=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:()=>w(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:()=>x("month"===d?"day":"month"),children:b},"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:()=>x("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:w=!0,autoFocus:x=!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(x),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=>b(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:w,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:b,onMoveFocus:D}){const N=E(r,l,"narrow"),_=E(r,l,"long"),C=(j=i,P(k=c)&&P(j)?w(k,j)<=0?[k,j]:[j,k]:null);var k,j;const z=A(),T=o.useMemo(()=>{const e=x(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":x(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&&w(t,C[0])>=0&&w(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:()=>b?.(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=x(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){const t=e.parentElement;if(!t)return;const n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=n.top-o.top-t.clientTop+t.scrollTop,l=r+n.height;r<t.scrollTop?t.scrollTop=r:l>t.scrollTop+t.clientHeight&&(t.scrollTop=l-t.clientHeight)}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 w=l??a,b=o.useRef(null),[D,S]=o.useMemo(()=>C(r),[r]);o.useEffect(()=>{const e=b.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(G),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?w.getHours()%12||12:w.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","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(w,"hour"===e?{hours:c?t%12+(w.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:w.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:b,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===w.getMinutes(),_),i?A("second",v.second,P,e=>e===w.getSeconds(),_):null,c?A("meridiem",v.meridiem,[0,1],e=>(w.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":x(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 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)})]})}

package/dist/internal/ChartChrome.d.ts

@@ -0,0 +1,205 @@
+import * as React from 'react';
+import { type ChartValue } from './chart.js';
+import type { MPChartCategory, MPChartLegend, MPChartTooltip, MPChartTooltipItem, MPSide, MPSize } from '../types.js';
+/**
+ * Everything a chart draws that is not the data.
+ *
+ * The legend, the hover panel, the spoken readout, the table behind the picture
+ * and the arrangement that holds them — the parts a pie chart and a line chart
+ * have in common, which is all of them except the plot.
+ *
+ * A file of its own for the reason `internal/density.ts` has one: the split
+ * stylesheet is cut along the import graph a **file** at a time, so a pie chart
+ * reaching into `ChartFrame.tsx` for a legend would carry the axes, the scales
+ * and the column hit-testing it has no use for. It arrives here instead, and
+ * the cartesian frame is one more consumer rather than the owner.
+ */
+/** What every framed chart takes, whatever it draws. */
+export interface ChartBaseProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'title'> {
+    /**
+     * How tall the drawing is. A number is pixels; a string is any CSS length.
+     * Defaults to the `size` ladder.
+     *
+     * The axis labels are drawn **inside** this rather than under it, so a card
+     * sized to the chart is a card the chart fits in.
+     */
+    height?: number | string;
+    /**
+     * How numbers are written everywhere they appear — the axis, the panel, the
+     * table. `Intl.NumberFormat` options, the same prop `MPStatistic` takes.
+     *
+     * Without it a tick is compacted past ten thousand, because four labels of
+     * seven digits is not an axis, it is a column of numbers beside a picture.
+     */
+    format?: Intl.NumberFormatOptions;
+    /** Which language the chart's own words and dates are in. */
+    locale?: string;
+    /**
+     * What the chart is a chart **of**. Read out in place of the drawing, and
+     * used as the caption of the table behind it.
+     */
+    label?: string;
+    /**
+     * The legend. Drawn from two series up and left off below that, because a
+     * legend with one swatch in it restates the title.
+     */
+    legend?: boolean | MPChartLegend;
+    /**
+     * What the pointer uncovers. On by default: a chart drawn in a browser is
+     * interactive, and a reader who wants March's number should not have to
+     * measure it against a gridline.
+     */
+    tooltip?: boolean | MPChartTooltip;
+    /** What to draw when there is nothing to draw. */
+    empty?: React.ReactNode;
+    /** @default 'md' */
+    size?: MPSize;
+}
+export interface Visibility {
+    visible: boolean[];
+    hovered: number | null;
+    toggle: (index: number) => void;
+    setHovered: (index: number | null) => void;
+}
+/**
+ * Which entries are drawn, and which one the legend is being pointed at.
+ *
+ * Keyed by an entry's place in the array as it was passed, which is what stops
+ * a hidden one renumbering those after it. Colours come off that same index, so
+ * hiding Europe leaves Asia exactly the colour it already was.
+ *
+ * It takes anything that can say whether it starts hidden rather than a series
+ * specifically, because a pie's entries are its slices.
+ */
+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
+     * entries are its slices — the entity a legend identifies is not always a
+     * series, and a legend that insisted on one would be a legend a pie has to
+     * fake a series array for.
+     */
+    names: readonly (string | undefined)[];
+    colors: readonly string[];
+    options: MPChartLegend;
+    visibility: Visibility;
+    size: MPSize;
+    values?: readonly (string | undefined)[];
+    swatch?: (index: number, color: string) => React.ReactNode;
+}
+/**
+ * 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.
+ *
+ * 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.
+ */
+export declare function ChartLegend({ names, colors, options, visibility, size, values, swatch }: LegendProps): React.JSX.Element;
+interface PanelProps {
+    heading?: React.ReactNode;
+    items: readonly MPChartTooltipItem[];
+    x: number;
+    y: number;
+    flip: boolean;
+    size: MPSize;
+}
+/**
+ * What the pointer uncovers, as a panel.
+ *
+ * `pointer-events-none` is the load-bearing part: a panel that could be hovered
+ * 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;
+/**
+ * The same reading, said out loud instead of drawn.
+ *
+ * It cannot be the panel above, and that is a constraint rather than a
+ * preference: the panel is drawn inside the element carrying `role="img"`, and
+ * `img` is a leaf role — everything under it is cut out of the accessibility
+ * tree, so a live region in there announces to nobody. This is a **sibling** of
+ * the picture, clipped rather than painted, and it is what makes the arrow keys
+ * mean something to a reader who is not looking at the plot.
+ *
+ * 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 }: {
+    heading?: React.ReactNode;
+    items: readonly MPChartTooltipItem[];
+}): React.JSX.Element;
+interface TableProps {
+    id: string;
+    caption: string;
+    corner: React.ReactNode;
+    categories: readonly MPChartCategory[];
+    /** One per column, beside the category's own. */
+    names: readonly (string | undefined)[];
+    values: readonly (readonly ChartValue[])[];
+    format: (value: number) => string;
+    locale: string | undefined;
+    empty: string;
+}
+/**
+ * The numbers behind the picture, as a grid.
+ *
+ * Clipped rather than drawn. Every chart here ships one and it is what
+ * `aria-describedby` points at, so a reader who cannot see the plot has the
+ * data itself rather than a summary of it — and a reader who can see the plot
+ * is not made to scroll past a table they did not ask for.
+ *
+ * Rendered rather than built on demand, because it is the description of a
+ * focusable element: an `aria-describedby` pointing at an id that does not
+ * exist yet is an `aria-describedby` pointing at nothing.
+ */
+export declare function ChartTable({ id, caption, corner, categories, names, values, format, locale, empty }: TableProps): React.JSX.Element;
+export interface ChartShellProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'color' | 'title'> {
+    size: MPSize;
+    /** The element the drawing is measured in and focused on. */
+    plotRef: React.RefObject<HTMLDivElement | null>;
+    /** Its accessible name, already resolved — never an optional prop passed straight through. */
+    name: string;
+    /** The id of the table describing it, or nothing when there is nothing to describe. */
+    describedBy?: string;
+    /** Whether there is anything here to walk. A chart with no data is not a tab stop. */
+    interactive: boolean;
+    height?: number | string;
+    /** The pointer and keyboard handlers, which are the plot's own business. */
+    plotProps?: React.HTMLAttributes<HTMLDivElement>;
+    /** The drawing: an `<svg>`, or the empty state. */
+    children: React.ReactNode;
+    /** Floated over the drawing. */
+    tooltip?: React.ReactNode;
+    legend?: React.ReactNode;
+    legendSide?: MPSide;
+    status: {
+        heading?: React.ReactNode;
+        items: readonly MPChartTooltipItem[];
+    };
+    table?: React.ReactNode;
+}
+/**
+ * The arrangement: a plot, a legend on one of its four sides, a readout beside
+ * 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.
+ */
+export declare function ChartShell({ size, plotRef, name, describedBy, interactive, height, plotProps, children, tooltip, legend, legendSide, status, table, className, ...rest }: ChartShellProps): React.JSX.Element;
+export {};