material-plus-ui 1.12.0 → 1.14.0

package/dist/a2ui/extended/api.js

@@ -1 +1 @@
-import{z as e}from"zod";import{DataBindingSchema as t,FunctionCallSchema as a,DynamicStringSchema as o}from"@a2ui/web_core/v0_9";const i=(o,i)=>e.union([e.array(o),t,a]).describe(i),r=e.enum(["primary","secondary","tertiary","error"]).describe("Which accent role this reads, out of the page's own colour scheme. Omit it to take the next slot of the chart palette, which is what keeps a set of series distinguishable."),s={accessibility:e.object({label:o.optional().describe("A short name used by assistive technologies."),description:o.optional().describe("Additional detail about the element.")}).strict().optional(),weight:e.number().describe("The relative weight of this component within a Row or Column, like CSS 'flex-grow'. Only meaningful as a direct child of one.").optional()},n=e.object({key:e.string().describe("The property this column reads from each row. Also the column's own id."),label:o.optional().describe("The column heading. Defaults to the key itself."),align:e.enum(["start","center","end"]).describe("Where the cell's contents sit. Use 'end' for a column of numbers.").optional(),sortable:e.boolean().describe("Whether the reader may sort by this column. Defaults to true.").optional(),searchable:e.boolean().describe("Whether the search box looks in this column. Defaults to true.").optional(),width:e.number().describe("The column's width in pixels. Omit to share the room.").optional()}).strict();export const DataTableApi={name:"DataTable",schema:e.object({...s,columns:e.array(n).min(1).describe("The columns, in the order they are drawn."),rows:i(e.record(e.any()),"The rows: an array of objects keyed by the columns above, or a path to one in the data model. Bind a path when the data arrives separately from the table."),rowKey:e.string().describe("The column key whose value identifies a row, used for selection. Defaults to the row's position, which is only stable while the rows are.").optional(),caption:o.optional().describe("A description of the table, read out before its contents. Use it to say what the rows are, since column headings rarely say that on their own."),searchable:e.boolean().describe("Puts a search box above the table. Defaults to false.").optional(),sortable:e.boolean().describe("Lets the reader sort by any sortable column. Defaults to true.").optional(),paged:e.boolean().describe("Splits the rows into pages. Worth it past about twenty rows.").optional(),pageSize:e.number().int().positive().describe("Rows per page. Defaults to 10.").optional(),selection:e.enum(["none","single","multiple"]).describe("Whether the reader may pick rows, and how many. 'multiple' draws a column of checkboxes and 'single' picks the row that is pressed. Bind 'selectedKeys' to read the choice back.").optional(),selectedKeys:e.union([e.array(e.string()),t]).describe("The keys of the selected rows. Bind this to a path to be told what the reader picked.").optional(),striped:e.boolean().describe("Shades alternate rows, which helps a wide table be read across.").optional()}).strict().describe("A table of rows and columns, with sorting, searching, paging and selection. Prefer this to a Row-and-Column layout whenever the data is tabular: it is announced as a table, it can be sorted, and it stays readable on a narrow screen.")};const h=e.object({name:e.string().describe("The name of this series, in the legend and the hover panel.").optional(),data:e.array(e.number().nullable()).describe("Its values, one per category, in category order. `null` is a gap, not a zero."),color:r.optional()}).strict(),l={...s,series:i(h,"The series, in the order their colours are handed out. A literal array, or a path to one in the data model."),categories:e.union([e.array(e.string()),t]).describe("The category axis' labels, one per value in each series.").optional(),label:o.optional().describe("What the chart is of, read out before it. A chart with no label is a picture assistive technology cannot describe."),xAxisLabel:o.optional().describe("A name for what the category axis counts."),yAxisLabel:o.optional().describe("A name for what the value axis measures."),height:e.number().describe("The plot height in pixels. Defaults to a size that suits the chart.").optional(),legend:e.boolean().describe("Whether to draw the legend. Defaults to on past one series.").optional()};export const BarChartApi={name:"BarChart",schema:e.object({...l,stacked:e.boolean().describe("Stacks the series into one bar per category instead of drawing them side by side.").optional(),horizontal:e.boolean().describe("Turns the bars sideways, which is what long category names need.").optional()}).strict().describe("A bar chart, for comparing a value across categories.")};export const LineChartApi={name:"LineChart",schema:e.object({...l,curve:e.enum(["linear","smooth","step"]).describe("How a line gets from one point to the next. 'step' is for a value that holds and then changes, such as a price.").optional(),markers:e.boolean().describe("Draws a dot at each point. Defaults to on while the points are few enough.").optional()}).strict().describe("A line chart, for a value that moves over a sequence — usually time.")};export const PieChartApi={name:"PieChart",schema:e.object({...s,data:i(e.number().nullable(),"One value per slice, in the order of `categories`. A literal array, or a path to one in the data model."),categories:e.union([e.array(e.string()),t]).describe("Each slice's name, in the legend and the hover panel.").optional(),shape:e.enum(["pie","donut","semi"]).describe("The shape it is drawn as. 'donut' leaves room in the middle.").optional(),label:o.optional().describe("What the chart is of, read out before it."),height:e.number().describe("The plot height in pixels.").optional(),legend:e.boolean().describe("Whether to draw the legend. Defaults to on.").optional()}).strict().describe("A pie or donut chart, for parts of one whole. Use it only when the parts add up to something — a bar chart is easier to read for anything else, and far easier past about six slices.")};export const StatisticApi={name:"Statistic",schema:e.object({...s,value:e.union([e.string(),e.number(),t,a]).describe("The figure itself. A number is formatted in the reader's locale; a string is drawn as it is."),label:o.optional().describe("What the figure is of, drawn above it."),previousValue:e.number().describe("What the figure was, which is what turns `delta` into a change.").optional(),delta:e.enum(["percent","absolute","both","none"]).describe("How the change from `previousValue` is written. Defaults to a percentage when there is a previous value.").optional(),betterWhen:e.enum(["up","down"]).describe("Which direction is good news, which decides the colour of the change. Set it on a figure where down is better, such as a cost or a bounce rate — the default assumes up.").optional(),unit:o.optional().describe("A unit after the figure, such as `ms` or `kg`."),prefix:o.optional().describe("A symbol before the figure, such as `$`."),period:o.optional().describe("What the change is measured over, such as `vs last week`."),caption:o.optional().describe("A line under the figure."),compact:e.boolean().describe("Whether a number of five digits or more is written short: 12.4K rather than 12,400. On by default, because that is what a headline figure wants; pass false for one that has to be read exactly.").optional(),align:e.enum(["start","center","end"]).describe("Where the block sits. Defaults to the start.").optional()}).strict().describe("One figure, with what it is and how it has changed. The component to reach for when the answer is a number — a chart of one point is not a chart.")};
+import{z as e}from"zod";import{DataBindingSchema as t,DynamicStringSchema as a,FunctionCallSchema as o,WeightSchema as r,spec as i}from"@a2ui/web_core/v1_0";const s=e=>i(e,{mixins:[]}),n=e=>a.describe(`REF:#/$defs/DynamicString|${e}`),h=(a,r)=>e.union([e.array(a),t,o]).describe(r),l=e.enum(["primary","secondary","tertiary","error"]).describe("Which accent role this reads, out of the page's own colour scheme. Omit it to take the next slot of the chart palette, which is what keeps a set of series distinguishable."),c={weight:r.optional()},d=e.object({key:e.string().describe("The property this column reads from each row. Also the column's own id."),label:n("The column heading. Defaults to the key itself.").optional(),align:e.enum(["start","center","end"]).describe("Where the cell's contents sit. Use 'end' for a column of numbers.").optional(),sortable:e.boolean().describe("Whether the reader may sort by this column. Defaults to true.").optional(),searchable:e.boolean().describe("Whether the search box looks in this column. Defaults to true.").optional(),width:e.number().describe("The column's width in pixels. Omit to share the room.").optional()}).strict();export const DataTableApi={name:"DataTable",schema:s(e.object({...c,columns:e.array(d).min(1).describe("The columns, in the order they are drawn."),rows:h(e.record(e.any()),"The rows: an array of objects keyed by the columns above, or a path to one in the data model. Bind a path when the data arrives separately from the table."),rowKey:e.string().describe("The column key whose value identifies a row, used for selection. Defaults to the row's position, which is only stable while the rows are.").optional(),caption:n("A description of the table, read out before its contents. Use it to say what the rows are, since column headings rarely say that on their own.").optional(),searchable:e.boolean().describe("Puts a search box above the table. Defaults to false.").optional(),sortable:e.boolean().describe("Lets the reader sort by any sortable column. Defaults to true.").optional(),paged:e.boolean().describe("Splits the rows into pages. Worth it past about twenty rows.").optional(),pageSize:e.number().int().positive().describe("Rows per page. Defaults to 10.").optional(),selection:e.enum(["none","single","multiple"]).describe("Whether the reader may pick rows, and how many. 'multiple' draws a column of checkboxes and 'single' picks the row that is pressed. Bind 'selectedKeys' to read the choice back.").optional(),selectedKeys:e.union([e.array(e.string()),t]).describe("The keys of the selected rows. Bind this to a path to be told what the reader picked.").optional(),striped:e.boolean().describe("Shades alternate rows, which helps a wide table be read across.").optional()}).strict().describe("A table of rows and columns, with sorting, searching, paging and selection. Prefer this to a Row-and-Column layout whenever the data is tabular: it is announced as a table, it can be sorted, and it stays readable on a narrow screen."))};const b=e.object({name:e.string().describe("The name of this series, in the legend and the hover panel.").optional(),data:e.array(e.number().nullable()).describe("Its values, one per category, in category order. `null` is a gap, not a zero."),color:l.optional()}).strict(),u={...c,series:h(b,"The series, in the order their colours are handed out. A literal array, or a path to one in the data model."),categories:e.union([e.array(e.string()),t]).describe("The category axis' labels, one per value in each series.").optional(),label:n("What the chart is of, read out before it. A chart with no label is a picture assistive technology cannot describe.").optional(),xAxisLabel:n("A name for what the category axis counts.").optional(),yAxisLabel:n("A name for what the value axis measures.").optional(),height:e.number().describe("The plot height in pixels. Defaults to a size that suits the chart.").optional(),legend:e.boolean().describe("Whether to draw the legend. Defaults to on past one series.").optional()};export const BarChartApi={name:"BarChart",schema:s(e.object({...u,stacked:e.boolean().describe("Stacks the series into one bar per category instead of drawing them side by side.").optional(),horizontal:e.boolean().describe("Turns the bars sideways, which is what long category names need.").optional()}).strict().describe("A bar chart, for comparing a value across categories."))};export const LineChartApi={name:"LineChart",schema:s(e.object({...u,curve:e.enum(["linear","smooth","step"]).describe("How a line gets from one point to the next. 'step' is for a value that holds and then changes, such as a price.").optional(),markers:e.boolean().describe("Draws a dot at each point. Defaults to on while the points are few enough.").optional()}).strict().describe("A line chart, for a value that moves over a sequence — usually time."))};export const PieChartApi={name:"PieChart",schema:s(e.object({...c,data:h(e.number().nullable(),"One value per slice, in the order of `categories`. A literal array, or a path to one in the data model."),categories:e.union([e.array(e.string()),t]).describe("Each slice's name, in the legend and the hover panel.").optional(),shape:e.enum(["pie","donut","semi"]).describe("The shape it is drawn as. 'donut' leaves room in the middle.").optional(),label:n("What the chart is of, read out before it.").optional(),height:e.number().describe("The plot height in pixels.").optional(),legend:e.boolean().describe("Whether to draw the legend. Defaults to on.").optional()}).strict().describe("A pie or donut chart, for parts of one whole. Use it only when the parts add up to something — a bar chart is easier to read for anything else, and far easier past about six slices."))};export const StatisticApi={name:"Statistic",schema:s(e.object({...c,value:e.union([e.string(),e.number(),t,o]).describe("The figure itself. A number is formatted in the reader's locale; a string is drawn as it is."),label:n("What the figure is of, drawn above it.").optional(),previousValue:e.number().describe("What the figure was, which is what turns `delta` into a change.").optional(),delta:e.enum(["percent","absolute","both","none"]).describe("How the change from `previousValue` is written. Defaults to a percentage when there is a previous value.").optional(),betterWhen:e.enum(["up","down"]).describe("Which direction is good news, which decides the colour of the change. Set it on a figure where down is better, such as a cost or a bounce rate — the default assumes up.").optional(),unit:n("A unit after the figure, such as `ms` or `kg`.").optional(),prefix:n("A symbol before the figure, such as `$`.").optional(),period:n("What the change is measured over, such as `vs last week`.").optional(),caption:n("A line under the figure.").optional(),compact:e.boolean().describe("Whether a number of five digits or more is written short: 12.4K rather than 12,400. On by default, because that is what a headline figure wants; pass false for one that has to be read exactly.").optional(),align:e.enum(["start","center","end"]).describe("Where the block sits. Defaults to the start.").optional()}).strict().describe("One figure, with what it is and how it has changed. The component to reach for when the answer is a number — a chart of one point is not a chart."))};

package/dist/a2ui/index.d.ts

@@ -9,8 +9,8 @@
  * Material Plus on the other end with nothing changed at its end.
  *
  * ```tsx
- * import { A2uiSurface, type ReactComponentImplementation } from '@a2ui/react/v0_9';
- * import { MessageProcessor } from '@a2ui/web_core/v0_9';
+ * import { A2uiSurface, type ReactComponentImplementation } from '@a2ui/react';
+ * import { MessageProcessor } from '@a2ui/web_core/v1_0';
  * import { mpA2uiCatalog } from 'material-plus-ui/a2ui';
  * import 'material-plus-ui/styles.css';
  *
@@ -57,10 +57,15 @@
  * - **Text is text.** Markdown is rendered only when the application has
  *   configured a renderer through `@a2ui/react`'s Markdown context, whose contract
  *   requires it to sanitize; with none configured, an agent's string is drawn as
- *   the characters it contains. See `components/MPA2uiText.tsx`.
+ *   the characters it contains. The one exception is a text that is a single
+ *   heading line, `## Like this`, whose words are drawn as a heading, still as
+ *   text. See `components/MPA2uiText.tsx`.
  * - **URLs are the agent's.** `Image`, `Video` and `AudioPlayer` load what the
- *   payload names them, so a surface from an agent you do not control belongs
- *   behind a Content Security Policy that says where media may come from.
+ *   payload names them, once it passes the SDK's own check: an `http:` or
+ *   `https:` address, a relative path or a `data:` URL, and nothing else. Which
+ *   hosts those may be is not something a check can know, so a surface from an
+ *   agent you do not control still belongs behind a Content Security Policy
+ *   that says where media may come from. See `internal/common.ts`.
  *
  * ## Two catalogs, and where they stop
  *

package/dist/a2ui/internal/children.d.ts

@@ -15,7 +15,7 @@
  * rows is five children of the same id, and keying on the id alone would make
  * them one child that React re-mounts as the data moves.
  */
-import type { ResolvedChildRef } from '@a2ui/web_core/v0_9';
+import type { ResolvedChildRef } from '@a2ui/web_core/v1_0';
 import type * as React from 'react';
 /** What a component implementation is handed to resolve an id with. */
 export type MPA2uiBuildChild = (id: string, basePath?: string) => React.ReactNode;

package/dist/a2ui/internal/common.d.ts

@@ -12,7 +12,9 @@
  *   number in the payload and a `style` here, because no component in this
  *   library has a prop for how much of a parent's main axis it should claim —
  *   `MPFlex` distributes, and the claim belongs to the child.
- * - `accessibility` carries a label and a description for assistive technology.
+ * - `accessibility` carries a label and a description for assistive technology,
+ *   and from v1.0 whether its updates are announced and whether it is hidden
+ *   from assistive technology altogether.
  *
  * The rest of this file is the vocabulary gap. A2UI writes `spaceBetween` where
  * `MPFlex` writes `space-between`, and its date and time values are ISO 8601
@@ -23,31 +25,47 @@ import type { MPGridAlign, MPGridJustify } from '../../components/grid/MPGrid.js
 /**
  * What an agent can say about a component to a screen reader.
  *
- * `unknown` rather than `string`, and that is the SDK's type rather than a
- * looseness of ours. Its binder resolves a data binding wherever one appears,
- * however deeply — so both of these are strings by the time a component runs —
- * but the *type* it publishes only resolves the props at the top level. Anything
- * one object further in keeps the `string | DataBinding | FunctionCall` union the
- * schema declared, so what a component receives is wider than what it gets.
+ * `unknown` rather than `string`. The SDK's binder resolves a data binding
+ * wherever one appears, however deeply, and its types say the result is a
+ * string — but a binding resolves to whatever the data model holds at that
+ * path, and nothing checks that against the schema. So a label bound to a path
+ * can arrive as a number, an object or nothing at all.
  *
- * `asText` is the one place that difference is handled.
+ * `asText` and the checks in `accessibilityAttributes` are where that is
+ * handled.
  */
 export interface MPA2uiAccessibility {
     /** The accessible name. */
     label?: unknown;
     /** The longer form, for what the name cannot carry. */
     description?: unknown;
+    /** Whether a change to the element is announced, and how urgently. */
+    live?: unknown;
+    /** Whether the element and everything in it is hidden from assistive technology. */
+    hidden?: unknown;
 }
 /**
  * A resolved dynamic value, as the string it is.
  *
  * For the nested props described above: a `title`, an option's `label`, the two
- * `accessibility` entries. Anything that is not a string is dropped rather than
- * coerced, because the alternative is `String({ path: 'user.name' })` — the words
+ * `accessibility` strings. Anything that is not a string is dropped rather than
+ * coerced, because the alternative is `String({ name: 'Ada' })` — the words
  * `[object Object]` drawn in an interface, which is worse than the missing label
  * it would be standing in for.
  */
 export declare const asText: (value: unknown) => string | undefined;
+/**
+ * A URL an agent named for a picture, a video or a sound, or `undefined` for one
+ * the page should not load.
+ *
+ * The SDK's own rule, the one its reference renderer applies to the same three
+ * components: an `http:` or `https:` address, a path relative to the page, or a
+ * `data:` URL. Anything else, such as `javascript:`, `blob:` or `file:`, is
+ * dropped, and so is an address that starts `//`. The element is then drawn
+ * with no source. A Content Security Policy still decides which hosts media may
+ * come from; this decides which kinds of address get as far as asking.
+ */
+export declare const mediaUrl: (value: unknown) => string | undefined;
 /**
  * `weight` as the declaration a flex child needs.
  *
@@ -64,15 +82,15 @@ export declare const weightStyle: (weight?: number) => React.CSSProperties | und
  * screen reader in use and shows as a tooltip besides, which is the closer
  * reading of what an agent means by a description.
  *
+ * `live` is `aria-live`, left off for `off`, which is what an element without it
+ * already does, and `hidden` is `aria-hidden` only when it is `true`.
+ *
  * Spread onto the element a component owns. It is *not* spread onto a labelled
  * control — a text field, a checkbox, a slider — because those carry a `label`
  * of their own from the payload, and an `aria-label` beside it replaces the
  * label the reader can see with one they cannot.
  */
-export declare const accessibilityAttributes: (accessibility?: MPA2uiAccessibility) => {
-    'aria-label': string | undefined;
-    title: string | undefined;
-};
+export declare const accessibilityAttributes: (accessibility?: MPA2uiAccessibility) => Pick<React.HTMLAttributes<HTMLElement>, "aria-label" | "aria-live" | "aria-hidden" | "title">;
 /**
  * A2UI's main-axis words, in `MPFlex`'s spelling.
  *

package/dist/a2ui/internal/common.js

@@ -1 +1 @@
-export const asText=e=>"string"==typeof e?e:void 0;export const weightStyle=e=>{if("number"==typeof e)return{flex:String(e),minWidth:0,minHeight:0}};export const accessibilityAttributes=e=>({"aria-label":asText(e?.label),title:asText(e?.description)});export const FLEX_JUSTIFY={start:"start",center:"center",end:"end",spaceBetween:"space-between",spaceAround:"space-around",spaceEvenly:"space-evenly",stretch:"start"};export const FLEX_ALIGN={start:"start",center:"center",end:"end",stretch:"stretch"};const e=/^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?/,t=/^(\d{2}):(\d{2})(?::(\d{2}(?:\.\d+)?))?$/;export const parseIsoValue=r=>{if(!r)return null;const n=t.exec(r);if(n){const e=new Date;return new Date(e.getFullYear(),e.getMonth(),e.getDate(),Number(n[1]),Number(n[2]),Number(n[3]??0))}if(/[Z+]|\d-\d{2}:\d{2}$/.test(r.slice(10))){const e=new Date(r);return Number.isNaN(e.getTime())?null:e}const s=e.exec(r);return s?new Date(Number(s[1]),Number(s[2])-1,Number(s[3]),Number(s[4]??0),Number(s[5]??0),Number(s[6]??0)):null};const r=e=>String(e).padStart(2,"0");export const formatIsoValue=(e,{withDate:t,withTime:n})=>{if(!e||Number.isNaN(e.getTime()))return"";const s=`${e.getFullYear()}-${r(e.getMonth()+1)}-${r(e.getDate())}`,a=`${r(e.getHours())}:${r(e.getMinutes())}`;return t&&n?`${s}T${a}`:n?a:s};
+import{sanitizeMediaUrl as e}from"@a2ui/web_core/v1_0";export const asText=e=>"string"==typeof e?e:void 0;export const mediaUrl=t=>e(t);export const weightStyle=e=>{if("number"==typeof e)return{flex:String(e),minWidth:0,minHeight:0}};export const accessibilityAttributes=e=>{const t=e?.live;return{"aria-label":asText(e?.label),"aria-live":"polite"===t||"assertive"===t?t:void 0,"aria-hidden":!0===e?.hidden||void 0,title:asText(e?.description)}};export const FLEX_JUSTIFY={start:"start",center:"center",end:"end",spaceBetween:"space-between",spaceAround:"space-around",spaceEvenly:"space-evenly",stretch:"start"};export const FLEX_ALIGN={start:"start",center:"center",end:"end",stretch:"stretch"};const t=/^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?/,r=/^(\d{2}):(\d{2})(?::(\d{2}(?:\.\d+)?))?$/;export const parseIsoValue=e=>{if(!e)return null;const n=r.exec(e);if(n){const e=new Date;return new Date(e.getFullYear(),e.getMonth(),e.getDate(),Number(n[1]),Number(n[2]),Number(n[3]??0))}if(/[Z+]|\d-\d{2}:\d{2}$/.test(e.slice(10))){const t=new Date(e);return Number.isNaN(t.getTime())?null:t}const s=t.exec(e);return s?new Date(Number(s[1]),Number(s[2])-1,Number(s[3]),Number(s[4]??0),Number(s[5]??0),Number(s[6]??0)):null};const n=e=>String(e).padStart(2,"0");export const formatIsoValue=(e,{withDate:t,withTime:r})=>{if(!e||Number.isNaN(e.getTime()))return"";const s=`${e.getFullYear()}-${n(e.getMonth()+1)}-${n(e.getDate())}`,a=`${n(e.getHours())}:${n(e.getMinutes())}`;return t&&r?`${s}T${a}`:r?a:s};

package/dist/components/calendar/MPCalendar.d.ts

@@ -56,7 +56,10 @@ export interface MPCalendarProps extends Omit<React.ComponentPropsWithoutRef<'di
      * `MPLocaleProvider`, then to the platform's own.
      */
     locale?: string;
-    /** Which day the week starts on. Defaults to whatever the locale says. */
+    /**
+     * Which day the week starts on. Left out, the nearest `MPConfigProvider`'s
+     * `weekStartsOn`, then whatever the locale says.
+     */
     weekStartsOn?: MPWeekday;
     /**
      * Draws the leading and trailing days belonging to the neighbouring months.

package/dist/components/calendar/MPCalendar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Calendar as a}from"../../internal/Calendar.js";import{accentSlots as n}from"../../internal/accent.js";import{POPUP_PAD as s}from"../../internal/Picker.js";import{useMPLocale as r,useMPMessages as i}from"../../internal/locale.js";import{PICKER as l}from"../../internal/messages/picker.js";import{CONTAINER_SURFACE as m}from"../../internal/surface.js";import{TO_ISO as u,isValidDate as c,localeWeekStart as d,mergeDateAndTime as f,startOfMonth as p,startOfUnit as h,today as x}from"../../internal/date.js";import{useMPColor as j,useMPSize as v}from"../../internal/config.js";export const MPCalendar=/*@__PURE__*/o.forwardRef(function({value:D,defaultValue:w,onValueChange:y,month:g,defaultMonth:B,onMonthChange:C,precision:S="day",minDate:b,maxDate:k,shouldDisableDate:M,locale:N,weekStartsOn:O,showOutsideDays:P=!0,showPreviousButton:z=!0,showNextButton:F=!0,autoFocus:V=!1,variant:R="text",size:$,color:q,labels:A,name:E,className:G,style:H,...I},J){const K=v($),L=j(q),Q=r(N),T=i(l,Q,A),U=O??d(Q),[W,X]=o.useState(w??null),Y=void 0!==D?D:W,[Z,_]=o.useState(()=>{const e=D??w;return p(c(e)?e:B??x())}),ee=void 0!==g?p(g):Z,te=e=>{void 0===g&&_(e),C?.(e)};return t("div",{...I,ref:J,"data-mp-size":K,style:{...n(L),...H},className:["mp-calendar-root inline-flex flex-col","text"===R?"":`rounded-mp-md ${s[K]}`,m[R],"text"===R?"":"text-mp-on-surface",G??""].filter(Boolean).join(" "),children:[e(a,{size:K,color:L,locale:Q,weekStartsOn:U,month:ee,onMonthChange:te,selected:[Y],onSelect:e=>{const t=h(e,S),o=c(Y)?f(t,Y):t;void 0===D&&X(o),y?.(o),te(p(o))},minDate:b,maxDate:k,shouldDisableDate:M,showOutsideDays:P,showPreviousButton:z,showNextButton:F,precision:S,labels:T,autoFocus:V}),E?e("input",{type:"hidden",name:E,value:c(Y)?u[S](Y):""}):null]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Calendar as a}from"../../internal/Calendar.js";import{accentSlots as n}from"../../internal/accent.js";import{POPUP_PAD as s}from"../../internal/Picker.js";import{useMPLocale as r,useMPMessages as i}from"../../internal/locale.js";import{PICKER as l}from"../../internal/messages/picker.js";import{CONTAINER_SURFACE as m}from"../../internal/surface.js";import{TO_ISO as u,isValidDate as c,localeWeekStart as d,mergeDateAndTime as f,startOfMonth as p,startOfUnit as h,today as x}from"../../internal/date.js";import{useMPColor as j,useMPSize as v,useMPWeekStart as D}from"../../internal/config.js";export const MPCalendar=/*@__PURE__*/o.forwardRef(function({value:w,defaultValue:y,onValueChange:g,month:B,defaultMonth:C,onMonthChange:S,precision:b="day",minDate:k,maxDate:M,shouldDisableDate:N,locale:O,weekStartsOn:P,showOutsideDays:z=!0,showPreviousButton:F=!0,showNextButton:V=!0,autoFocus:R=!1,variant:$="text",size:q,color:A,labels:E,name:G,className:H,style:I,...J},K){const L=v(q),Q=j(A),T=r(O),U=i(l,T,E),W=D(P)??d(T),[X,Y]=o.useState(y??null),Z=void 0!==w?w:X,[_,ee]=o.useState(()=>{const e=w??y;return p(c(e)?e:C??x())}),te=void 0!==B?p(B):_,oe=e=>{void 0===B&&ee(e),S?.(e)};return t("div",{...J,ref:K,"data-mp-size":L,style:{...n(Q),...I},className:["mp-calendar-root inline-flex flex-col","text"===$?"":`rounded-mp-md ${s[L]}`,m[$],"text"===$?"":"text-mp-on-surface",H??""].filter(Boolean).join(" "),children:[e(a,{size:L,color:Q,locale:T,weekStartsOn:W,month:te,onMonthChange:oe,selected:[Z],onSelect:e=>{const t=h(e,b),o=c(Z)?f(t,Z):t;void 0===w&&Y(o),g?.(o),oe(p(o))},minDate:k,maxDate:M,shouldDisableDate:N,showOutsideDays:z,showPreviousButton:F,showNextButton:V,precision:b,labels:U,autoFocus:R}),G?e("input",{type:"hidden",name:G,value:c(Z)?u[b](Z):""}):null]})});

package/dist/components/collapsible/MPCollapsible.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Collapsible as a}from"@base-ui/react/collapsible";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{PANEL_SETTLED as r,useSettledPanel as s}from"../../internal/fold.js";import{MPStateLayer as l}from"../../internal/StateLayer.js";import{CONTROL_GAP as d,CONTROL_ICON as c,hasContent as m,META_TEXT as p,PROSE_TEXT as f,SHEET_PAD_X as u,SHEET_PAD_Y as h,SHEET_TITLE as x}from"../../internal/scale.js";import{containerSurface as b}from"../../internal/elevation.js";import{useMPSize as g}from"../../internal/config.js";const j=/*@__PURE__*/["h-(--collapsible-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" "),v={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPCollapsible=/*@__PURE__*/t.forwardRef(function({open:t,defaultOpen:N=!1,onOpenChange:w,title:y,subtitle:k,startIcon:M,action:O,trigger:T,indicator:z=!0,disabled:B=!1,padded:C=!0,variant:P="outlined",elevation:$,size:E,hiddenUntilFound:F=!1,keepMounted:I=!1,className:R,children:U,...L},S){const q=g(E),A=u[q],D=h[q],G=s();return n(a.Root,{ref:S,open:t,defaultOpen:N,onOpenChange:e=>w?.(e),disabled:B,"data-mp-size":q,"data-mp-variant":P,className:["mp-collapsible rounded-mp-md flex w-full flex-col overflow-hidden",b(P,$),"text-mp-on-surface",R??""].filter(Boolean).join(" "),...L,children:[T?e(a.Trigger,{render:T}):n("div",{className:"flex w-full items-center",children:[n(a.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",A,D,d[q],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(l,{}),m(M)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:M}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[m(y)?e("span",{className:`truncate ${x[q]}`,children:y}):null,m(k)?e("span",{className:`text-mp-on-surface-variant truncate ${p}`,children:k}):null]}),z?e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(i,{icon:o,size:c[q]})}):null]}),m(O)?e("span",{className:`flex shrink-0 items-center ${A}`,children:O}):null]}),e(a.Panel,{ref:G.attach,hiddenUntilFound:F,keepMounted:I,className:[j,G.settled?r:""].filter(Boolean).join(" "),onTransitionEnd:G.onTransitionEnd,children:e("div",{className:["min-w-0",f[q],"text-mp-on-surface-variant",C?A:"",C?T?D:v[q]:""].filter(Boolean).join(" "),children:U})})]})});
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Collapsible as i}from"@base-ui/react/collapsible";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{PANEL_SETTLED as r,useSettledPanel as s}from"../../internal/fold.js";import{MPStateLayer as l}from"../../internal/StateLayer.js";import{CONTROL_GAP as d,CONTROL_ICON as c,hasContent as m,META_TEXT as p,PROSE_TEXT as f,SHEET_PAD_X as u,SHEET_PAD_Y as h,SHEET_TITLE as x}from"../../internal/scale.js";import{containerSurface as b}from"../../internal/elevation.js";import{useMPSize as g}from"../../internal/config.js";const v=/*@__PURE__*/["h-(--collapsible-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" "),j={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPCollapsible=/*@__PURE__*/t.forwardRef(function({open:t,defaultOpen:N=!1,onOpenChange:w,title:y,subtitle:k,startIcon:M,action:O,trigger:T,indicator:z=!0,disabled:B=!1,padded:C=!0,variant:P="outlined",elevation:$,size:E,hiddenUntilFound:F=!1,keepMounted:I=!1,className:R,children:U,...L},S){const q=g(E),A=u[q],D=h[q],G=s();return n(i.Root,{ref:S,open:t,defaultOpen:N,onOpenChange:e=>w?.(e),disabled:B,"data-mp-size":q,"data-mp-variant":P,className:["mp-collapsible rounded-mp-md flex w-full flex-col",T?"":"overflow-hidden",b(P,$),"text-mp-on-surface",R??""].filter(Boolean).join(" "),...L,children:[T?e(i.Trigger,{render:T}):n("div",{className:"flex w-full items-center",children:[n(i.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",A,D,d[q],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(l,{}),m(M)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:M}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[m(y)?e("span",{className:`truncate ${x[q]}`,children:y}):null,m(k)?e("span",{className:`text-mp-on-surface-variant truncate ${p}`,children:k}):null]}),z?e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(a,{icon:o,size:c[q]})}):null]}),m(O)?e("span",{className:`flex shrink-0 items-center ${A}`,children:O}):null]}),e(i.Panel,{ref:G.attach,hiddenUntilFound:F,keepMounted:I,className:[v,G.settled?r:"",T?"rounded-b-[inherit]":""].filter(Boolean).join(" "),onTransitionEnd:G.onTransitionEnd,children:e("div",{className:["min-w-0",f[q],"text-mp-on-surface-variant",C?A:"",C?T?D:j[q]:"",!C&&T?"overflow-hidden rounded-b-[inherit]":""].filter(Boolean).join(" "),children:U})})]})});

package/dist/components/color-picker/MPColorPicker.d.ts

@@ -60,6 +60,7 @@ export interface MPColorPickerProps extends MPStyleProps {
      * rather than holding the label out of it.
      *
      * Ignored when `inline`, which has no trigger for a label to rest on.
+     * Left out, the nearest `MPConfigProvider`'s `floatingLabel` decides.
      * @default true
      */
     floatingLabel?: boolean;

package/dist/components/color-picker/MPColorPicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as n}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{MPIcon as l}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as i}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as u,useFloatingLabel as c}from"../../internal/FieldOutline.js";import{MPFieldValue as d}from"../../internal/FieldValue.js";import{useMPSize as p}from"../../internal/config.js";import{useMPLocale as h,useMPMessages as m}from"../../internal/locale.js";import{COMMON as f}from"../../internal/messages/common.js";import{COLOR_PICKER as g}from"../../internal/messages/color-picker.js";import{MPStateLayer as v}from"../../internal/StateLayer.js";import{MPSupportingText as b}from"../../internal/SupportingText.js";import{CONTROL_ICON as x,META_TEXT as y,PROSE_TEXT as w,STACK_GAP as j,hasContent as N}from"../../internal/scale.js";import{FADE as k,PORTAL_LAYER as C}from"../../internal/surface.js";import{VISUALLY_HIDDEN as _}from"../../internal/visually-hidden.js";import{CHECKER_BACKGROUND as z,DEFAULT_SWATCHES as P,clamp as $,cssColor as I,formatColor as M,parseColor as T,readableInk as q}from"../../internal/color.js";const A={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},O={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},R={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},L={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},B={xs:12,sm:14,md:16,lg:18,xl:20},D={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}},S="border-mp-outline-variant relative overflow-hidden border",F=/*@__PURE__*/["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.4)]"].join(" ");function V(e,r,a){return{x:0===e.width?0:$((r-e.left)/e.width,0,1),y:0===e.height?0:$((a-e.top)/e.height,0,1)}}function K(e){const r=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-r,y:0};case"ArrowRight":return{x:r,y:0};case"ArrowUp":return{x:0,y:r};case"ArrowDown":return{x:0,y:-r};default:return null}}function E({hsv:n,alphaValue:t,onChange:i,text:s,onTextChange:u,withAlpha:c,swatches:d,editable:p,size:h,inert:m,labels:f}){const g=B[h],v=-g/2,b=I({h:n.h,s:100,v:100}),x=I(n),w=a.useRef(null),j=a.useRef(null),N=a.useRef(0);a.useEffect(()=>()=>{N.current&&cancelAnimationFrame(N.current)},[]);const k=e=>({onPointerDown:r=>{if(m)return;const a=r.currentTarget.getBoundingClientRect();w.current=a,r.currentTarget.setPointerCapture(r.pointerId),e(V(a,r.clientX,r.clientY))},onPointerMove:r=>{const a=w.current;var n;!m&&a&&r.currentTarget.hasPointerCapture(r.pointerId)&&(n=V(a,r.clientX,r.clientY),j.current=n,N.current||(N.current=requestAnimationFrame(()=>{N.current=0;const r=j.current;j.current=null,r&&e(r)})))},onPointerUp:()=>{w.current=null},onPointerCancel:()=>{w.current=null}}),C=(e,r,a,n)=>({role:"slider",tabIndex:m?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":a,"aria-valuenow":Math.round(r),"aria-orientation":"horizontal","aria-disabled":m||void 0,onKeyDown:e=>{const r=K(e);!m&&r&&0!==r.x&&(e.preventDefault(),n(r.x))}}),_=/*@__PURE__*/["outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),P=a.useMemo(()=>d?d.map(e=>{const r=T(e);return{swatch:e,parsed:r,hex:null===r?null:M(r.hsv,r.alpha,"hex")}}):[],[d]),D=M(n,t,"hex");return r("div",{className:`mp-color-picker__panel flex flex-col ${A[h]} ${L[h]}`,children:[e("div",{...k(({x:e,y:r})=>i({hsv:{h:n.h,s:100*e,v:100*(1-r)},alpha:t})),role:"slider",tabIndex:m?-1:0,"aria-label":f.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(n.s),"aria-valuetext":`${Math.round(n.s)}%, ${Math.round(n.v)}%`,"aria-disabled":m||void 0,onKeyDown:e=>{const r=K(e);!m&&r&&(e.preventDefault(),i({hsv:{h:n.h,s:$(n.s+r.x,0,100),v:$(n.v+r.y,0,100)},alpha:t}))},className:[S,"rounded-mp-sm",O[h],_,m?"cursor-default":"cursor-crosshair touch-none"].join(" "),style:{backgroundColor:b,backgroundImage:"linear-gradient(to top, #000000, rgb(0 0 0 / 0)), linear-gradient(to right, #ffffff, rgb(255 255 255 / 0))"},children:e("span",{className:F,style:{width:g,height:g,left:`${n.s}%`,top:100-n.v+"%",marginLeft:v,marginTop:v,backgroundColor:x}})}),e("div",{...k(({x:e})=>i({hsv:{...n,h:360*e},alpha:t})),...C(f.hue,n.h,360,e=>i({hsv:{...n,h:(n.h+2*e+360)%360},alpha:t})),className:[S,"rounded-mp-full",R[h],_,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:F,style:{width:g,height:g,left:n.h/360*100+"%",top:"50%",marginLeft:v,marginTop:v,backgroundColor:b}})}),c?r("div",{...k(({x:e})=>i({hsv:n,alpha:e})),...C(f.alpha,100*t,100,e=>i({hsv:n,alpha:$(t+e/100,0,1)})),className:[S,"rounded-mp-full",R[h],_,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:z,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${I(n,0)}, ${x})`}}),e("span",{className:F,style:{width:g,height:g,left:100*t+"%",top:"50%",marginLeft:v,marginTop:v,backgroundColor:I(n,t)}})]}):null,p?r("div",{className:`flex items-center ${L[h]}`,children:[e("span",{"aria-hidden":"true",className:"border-mp-outline-variant shrink-0 rounded-full border",style:{width:g+8,height:g+8,...z},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:I(n,t)}})}),e("input",{type:"text",value:s,readOnly:m,spellCheck:!1,autoComplete:"off","aria-label":f.value,onChange:e=>u(e.target.value),className:["rounded-mp-xs border-mp-outline text-mp-on-surface min-w-0 flex-1 border","bg-transparent px-2 py-1 font-mono lowercase",y,"focus-visible:border-mp-primary outline-none"].join(" ")})]}):null,P.length>0?e("div",{role:"group","aria-label":f.swatches,className:"grid grid-cols-8 gap-1",children:P.map(({swatch:r,parsed:a,hex:n},t)=>{const s=null!==a&&n===D;return e("button",{type:"button",disabled:m,"aria-label":r,"aria-pressed":s,onClick:()=>{a&&i({hsv:a.hsv,alpha:a.alpha})},className:["border-mp-outline-variant flex aspect-square items-center justify-center","rounded-full border","transition-[box-shadow] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",_,m?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:r},children:e("span",{"aria-hidden":"true",className:["transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",s?"opacity-100":"opacity-0"].join(" "),style:a?{color:q(a.hsv)}:void 0,children:e(l,{icon:o,size:12})})},`${t}:${r}`)})}):null]})}const U={h:202,s:100,v:61};export const MPColorPicker=/*@__PURE__*/a.forwardRef(function({value:o,defaultValue:$="#00639b",onValueChange:q,format:A="hex",alpha:O=!1,swatches:R=P,inline:L=!1,editable:B=!0,label:S,floatingLabel:F=!0,description:V,errorMessage:K,required:X=!1,disabled:Y=!1,readOnly:W=!1,clearable:G=!1,name:H,open:J,defaultOpen:Q=!1,onOpenChange:Z,locale:ee,labels:re,size:ae,fullWidth:ne=!1,id:te,className:le,style:oe},ie){const se=p(ae),ue=h(ee),ce=m(g,ue,re),de=m(f,ue),pe=N(K),he=D[se],me=a.useId(),fe=te??me,[ge,ve]=a.useState($),be=o??ge,[xe,ye]=a.useState(Q),we=J??xe,[je,Ne]=a.useState(()=>T(be)??{hsv:U,alpha:1}),[ke,Ce]=a.useState(()=>be),_e=M(je.hsv,O?je.alpha:1,A),ze=""===be;a.useEffect(()=>{const e=T(be);e?M(e.hsv,O?e.alpha:1,A)!==_e&&(Ce(be),Ne(e)):Ce(be)},[be,_e,O,A]);const Pe=Y||W,$e=G&&!Pe&&!ze,{shrunk:Ie,focusProps:Me}=c({floating:F&&N(S),filled:!ze,pinned:we}),Te=(e,r)=>{Ne(e);const a=M(e.hsv,O?e.alpha:1,A);Ce(r??a),void 0===o&&ve(a),q?.(a)},qe=e(E,{hsv:je.hsv,alphaValue:je.alpha,onChange:Te,text:ke,onTextChange:e=>{Ce(e);const r=T(e);r&&Te(r,e)},withAlpha:O,swatches:R,editable:B,size:se,inert:Pe,labels:ce}),Ae=e("span",{"aria-hidden":"true",className:"border-mp-outline-variant block size-5 shrink-0 rounded-full border",style:z,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ze?"transparent":I(je.hsv,O?je.alpha:1)}})}),Oe=H?e("input",{type:"hidden",name:H,value:ze?"":_e}):null;return L?r("div",{ref:ie,"data-mp-size":se,className:["mp-color-picker flex flex-col",j[se],le??""].filter(Boolean).join(" "),style:oe,children:[N(S)?r("span",{className:[y,Y?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[S,X?e("span",{"aria-hidden":"true",children:" *"}):null,X?r("span",{className:_,children:[" ",de.required]}):null]}):null,qe,N(K)?e("span",{className:`${y} text-mp-error`,children:K}):N(V)?e("span",{className:`${y} text-mp-on-surface-variant`,children:V}):null,Oe]}):r(n.Root,{ref:ie,name:H,disabled:Y,invalid:pe,"data-mp-size":se,className:["mp-color-picker group flex-col align-top",ne?"flex w-full":"inline-flex w-fit",le??""].filter(Boolean).join(" "),style:oe,...Me,children:[r(t.Root,{open:we,onOpenChange:e=>{void 0===J&&ye(e),Z?.(e)},children:[r("div",{className:"relative w-full",children:[r(t.Trigger,{id:fe,disabled:Y,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none border-0 bg-transparent font-[inherit] outline-none",he.padding,$e?"pe-10":"",he.height,w[se],Y?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(W?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[ze&&!Ie?null:Ae,e("span",{className:["min-w-0 flex-1 truncate text-start",ze?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:ze?Ie?ce.empty:null:_e})]}),$e?r("button",{type:"button","aria-label":ce.clear,onClick:()=>{void 0===o&&ve(""),Ce(""),q?.("")},className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(v,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(l,{icon:i,size:x[se]})]}):null,e(d,{value:ze?"":_e,required:X,readOnly:W,targetId:fe}),e(u,{label:S,required:X,notched:Ie}),N(S)?e(s,{size:se,label:S,required:X,requiredLabel:de.required,htmlFor:fe,shrunk:Ie}):null]}),e(t.Portal,{children:e(t.Positioner,{className:C,sideOffset:4,align:"start",children:e(t.Popup,{className:["mp-color-picker__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container","text-mp-on-surface p-3 outline-none",w[se],k].join(" "),children:qe})})})]}),e(b,{description:V,errorMessage:K,className:he.padding}),Oe]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as n}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{MPIcon as l}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as i}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as u,useFloatingLabel as c}from"../../internal/FieldOutline.js";import{MPFieldValue as d}from"../../internal/FieldValue.js";import{useMPFloatingLabel as p,useMPSize as h}from"../../internal/config.js";import{useMPLocale as m,useMPMessages as f}from"../../internal/locale.js";import{COMMON as g}from"../../internal/messages/common.js";import{COLOR_PICKER as v}from"../../internal/messages/color-picker.js";import{MPStateLayer as b}from"../../internal/StateLayer.js";import{MPSupportingText as x}from"../../internal/SupportingText.js";import{CONTROL_ICON as y,META_TEXT as w,PROSE_TEXT as j,STACK_GAP as N,hasContent as k}from"../../internal/scale.js";import{FADE as C,PORTAL_LAYER as _}from"../../internal/surface.js";import{VISUALLY_HIDDEN as z}from"../../internal/visually-hidden.js";import{CHECKER_BACKGROUND as P,DEFAULT_SWATCHES as $,clamp as I,cssColor as M,formatColor as T,parseColor as q,readableInk as A}from"../../internal/color.js";const O={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},R={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},L={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},B={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},D={xs:12,sm:14,md:16,lg:18,xl:20},S={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}},F="border-mp-outline-variant relative overflow-hidden border",V=/*@__PURE__*/["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.4)]"].join(" ");function K(e,r,a){return{x:0===e.width?0:I((r-e.left)/e.width,0,1),y:0===e.height?0:I((a-e.top)/e.height,0,1)}}function E(e){const r=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-r,y:0};case"ArrowRight":return{x:r,y:0};case"ArrowUp":return{x:0,y:r};case"ArrowDown":return{x:0,y:-r};default:return null}}function U({hsv:n,alphaValue:t,onChange:i,text:s,onTextChange:u,withAlpha:c,swatches:d,editable:p,size:h,inert:m,labels:f}){const g=D[h],v=-g/2,b=M({h:n.h,s:100,v:100}),x=M(n),y=a.useRef(null),j=a.useRef(null),N=a.useRef(0);a.useEffect(()=>()=>{N.current&&cancelAnimationFrame(N.current)},[]);const k=e=>({onPointerDown:r=>{if(m)return;const a=r.currentTarget.getBoundingClientRect();y.current=a,r.currentTarget.setPointerCapture(r.pointerId),e(K(a,r.clientX,r.clientY))},onPointerMove:r=>{const a=y.current;var n;!m&&a&&r.currentTarget.hasPointerCapture(r.pointerId)&&(n=K(a,r.clientX,r.clientY),j.current=n,N.current||(N.current=requestAnimationFrame(()=>{N.current=0;const r=j.current;j.current=null,r&&e(r)})))},onPointerUp:()=>{y.current=null},onPointerCancel:()=>{y.current=null}}),C=(e,r,a,n)=>({role:"slider",tabIndex:m?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":a,"aria-valuenow":Math.round(r),"aria-orientation":"horizontal","aria-disabled":m||void 0,onKeyDown:e=>{const r=E(e);!m&&r&&0!==r.x&&(e.preventDefault(),n(r.x))}}),_=/*@__PURE__*/["outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),z=a.useMemo(()=>d?d.map(e=>{const r=q(e);return{swatch:e,parsed:r,hex:null===r?null:T(r.hsv,r.alpha,"hex")}}):[],[d]),$=T(n,t,"hex");return r("div",{className:`mp-color-picker__panel flex flex-col ${O[h]} ${B[h]}`,children:[e("div",{...k(({x:e,y:r})=>i({hsv:{h:n.h,s:100*e,v:100*(1-r)},alpha:t})),role:"slider",tabIndex:m?-1:0,"aria-label":f.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(n.s),"aria-valuetext":`${Math.round(n.s)}%, ${Math.round(n.v)}%`,"aria-disabled":m||void 0,onKeyDown:e=>{const r=E(e);!m&&r&&(e.preventDefault(),i({hsv:{h:n.h,s:I(n.s+r.x,0,100),v:I(n.v+r.y,0,100)},alpha:t}))},className:[F,"rounded-mp-sm",R[h],_,m?"cursor-default":"cursor-crosshair touch-none"].join(" "),style:{backgroundColor:b,backgroundImage:"linear-gradient(to top, #000000, rgb(0 0 0 / 0)), linear-gradient(to right, #ffffff, rgb(255 255 255 / 0))"},children:e("span",{className:V,style:{width:g,height:g,left:`${n.s}%`,top:100-n.v+"%",marginLeft:v,marginTop:v,backgroundColor:x}})}),e("div",{...k(({x:e})=>i({hsv:{...n,h:360*e},alpha:t})),...C(f.hue,n.h,360,e=>i({hsv:{...n,h:(n.h+2*e+360)%360},alpha:t})),className:[F,"rounded-mp-full",L[h],_,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:V,style:{width:g,height:g,left:n.h/360*100+"%",top:"50%",marginLeft:v,marginTop:v,backgroundColor:b}})}),c?r("div",{...k(({x:e})=>i({hsv:n,alpha:e})),...C(f.alpha,100*t,100,e=>i({hsv:n,alpha:I(t+e/100,0,1)})),className:[F,"rounded-mp-full",L[h],_,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:P,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${M(n,0)}, ${x})`}}),e("span",{className:V,style:{width:g,height:g,left:100*t+"%",top:"50%",marginLeft:v,marginTop:v,backgroundColor:M(n,t)}})]}):null,p?r("div",{className:`flex items-center ${B[h]}`,children:[e("span",{"aria-hidden":"true",className:"border-mp-outline-variant shrink-0 rounded-full border",style:{width:g+8,height:g+8,...P},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:M(n,t)}})}),e("input",{type:"text",value:s,readOnly:m,spellCheck:!1,autoComplete:"off","aria-label":f.value,onChange:e=>u(e.target.value),className:["rounded-mp-xs border-mp-outline text-mp-on-surface min-w-0 flex-1 border","bg-transparent px-2 py-1 font-mono lowercase",w,"focus-visible:border-mp-primary outline-none"].join(" ")})]}):null,z.length>0?e("div",{role:"group","aria-label":f.swatches,className:"grid grid-cols-8 gap-1",children:z.map(({swatch:r,parsed:a,hex:n},t)=>{const s=null!==a&&n===$;return e("button",{type:"button",disabled:m,"aria-label":r,"aria-pressed":s,onClick:()=>{a&&i({hsv:a.hsv,alpha:a.alpha})},className:["border-mp-outline-variant flex aspect-square items-center justify-center","rounded-full border","transition-[box-shadow] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",_,m?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:r},children:e("span",{"aria-hidden":"true",className:["transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",s?"opacity-100":"opacity-0"].join(" "),style:a?{color:A(a.hsv)}:void 0,children:e(l,{icon:o,size:12})})},`${t}:${r}`)})}):null]})}const X={h:202,s:100,v:61};export const MPColorPicker=/*@__PURE__*/a.forwardRef(function({value:o,defaultValue:I="#00639b",onValueChange:A,format:O="hex",alpha:R=!1,swatches:L=$,inline:B=!1,editable:D=!0,label:F,floatingLabel:V,description:K,errorMessage:E,required:Y=!1,disabled:W=!1,readOnly:G=!1,clearable:H=!1,name:J,open:Q,defaultOpen:Z=!1,onOpenChange:ee,locale:re,labels:ae,size:ne,fullWidth:te=!1,id:le,className:oe,style:ie},se){const ue=h(ne),ce=p(V),de=m(re),pe=f(v,de,ae),he=f(g,de),me=k(E),fe=S[ue],ge=a.useId(),ve=le??ge,[be,xe]=a.useState(I),ye=o??be,[we,je]=a.useState(Z),Ne=Q??we,[ke,Ce]=a.useState(()=>q(ye)??{hsv:X,alpha:1}),[_e,ze]=a.useState(()=>ye),Pe=T(ke.hsv,R?ke.alpha:1,O),$e=""===ye;a.useEffect(()=>{const e=q(ye);e?T(e.hsv,R?e.alpha:1,O)!==Pe&&(ze(ye),Ce(e)):ze(ye)},[ye,Pe,R,O]);const Ie=W||G,Me=H&&!Ie&&!$e,{shrunk:Te,hinted:qe,focusProps:Ae}=c({floating:ce&&k(F),filled:!$e,pinned:Ne}),Oe=(e,r)=>{Ce(e);const a=T(e.hsv,R?e.alpha:1,O);ze(r??a),void 0===o&&xe(a),A?.(a)},Re=e(U,{hsv:ke.hsv,alphaValue:ke.alpha,onChange:Oe,text:_e,onTextChange:e=>{ze(e);const r=q(e);r&&Oe(r,e)},withAlpha:R,swatches:L,editable:D,size:ue,inert:Ie,labels:pe}),Le=e("span",{"aria-hidden":"true",className:"border-mp-outline-variant block size-5 shrink-0 rounded-full border",style:P,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:$e?"transparent":M(ke.hsv,R?ke.alpha:1)}})}),Be=J?e("input",{type:"hidden",name:J,value:$e?"":Pe}):null;return B?r("div",{ref:se,"data-mp-size":ue,className:["mp-color-picker flex flex-col",N[ue],oe??""].filter(Boolean).join(" "),style:ie,children:[k(F)?r("span",{className:[w,W?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[F,Y?e("span",{"aria-hidden":"true",children:" *"}):null,Y?r("span",{className:z,children:[" ",he.required]}):null]}):null,Re,k(E)?e("span",{className:`${w} text-mp-error`,children:E}):k(K)?e("span",{className:`${w} text-mp-on-surface-variant`,children:K}):null,Be]}):r(n.Root,{ref:se,name:J,disabled:W,invalid:me,"data-mp-size":ue,className:["mp-color-picker group flex-col align-top",te?"flex w-full":"inline-flex w-fit",oe??""].filter(Boolean).join(" "),style:ie,...Ae,children:[r(t.Root,{open:Ne,onOpenChange:e=>{void 0===Q&&je(e),ee?.(e)},children:[r("div",{className:"relative w-full",children:[r(t.Trigger,{id:ve,disabled:W,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none border-0 bg-transparent font-[inherit] outline-none",fe.padding,Me?"pe-10":"",fe.height,j[ue],W?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(G?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[$e&&!qe?null:Le,e("span",{className:["min-w-0 flex-1 truncate text-start",$e?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:$e?qe?pe.empty:null:Pe})]}),Me?r("button",{type:"button","aria-label":pe.clear,onClick:()=>{void 0===o&&xe(""),ze(""),A?.("")},className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(b,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(l,{icon:i,size:y[ue]})]}):null,e(d,{value:$e?"":Pe,required:Y,readOnly:G,targetId:ve}),e(u,{label:F,required:Y,notched:Te}),k(F)?e(s,{size:ue,label:F,required:Y,requiredLabel:he.required,htmlFor:ve,shrunk:Te}):null]}),e(t.Portal,{children:e(t.Positioner,{className:_,sideOffset:4,align:"start",children:e(t.Popup,{className:["mp-color-picker__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container","text-mp-on-surface p-3 outline-none",j[ue],C].join(" "),children:Re})})})]}),e(x,{description:K,errorMessage:E,className:fe.padding}),Be]})});

package/dist/components/combobox/MPCombobox.d.ts

@@ -171,6 +171,7 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
      * `false` pins it in the notch, which is the one thing a floating label costs:
      * a combobox with a label and one without no longer sit at the same height in
      * a form until both are answered. A `startIcon` holds the label up regardless.
+     * Left out, the nearest `MPConfigProvider`'s `floatingLabel` decides.
      * @default true
      */
     floatingLabel?: boolean;
@@ -262,5 +263,5 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
  * navigation across both the list and the chips, and the hidden input that makes
  * the whole thing submit with a form.
  */
-export declare function MPCombobox<Multiple extends boolean | undefined = false>({ items, multiple, value, defaultValue, onValueChange, onInputValueChange, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, allowCustom, customLabel, clearable, emptyMessage, limit, filter, chipVariant, chipColor, placeholder, label, floatingLabel, description, errorMessage, startIcon, size: sizeProp, fullWidth, required, disabled, readOnly, name, open, defaultOpen, onOpenChange, clearLabel, openLabel, locale: localeProp, removeLabel, inputRef, id, classNames, className, style }: MPComboboxProps<Multiple>): React.JSX.Element;
+export declare function MPCombobox<Multiple extends boolean | undefined = false>({ items, multiple, value, defaultValue, onValueChange, onInputValueChange, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, allowCustom, customLabel, clearable, emptyMessage, limit, filter, chipVariant, chipColor, placeholder, label, floatingLabel: floatingLabelProp, description, errorMessage, startIcon, size: sizeProp, fullWidth, required, disabled, readOnly, name, open, defaultOpen, onOpenChange, clearLabel, openLabel, locale: localeProp, removeLabel, inputRef, id, classNames, className, style }: MPComboboxProps<Multiple>): React.JSX.Element;
 export {};

package/dist/components/combobox/MPCombobox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Combobox as o}from"@base-ui/react/combobox";import{Field as l}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip.js";import{MPIcon as r}from"../icon/MPIcon.js";import{AddIcon as i,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons.js";import{MPFieldLabel as p,MPFieldOutline as u,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{fillMessage as h}from"../../internal/i18n.js";import{useMPLocale as f,useMPMessages as b}from"../../internal/locale.js";import{COMBOBOX as g}from"../../internal/messages/combobox.js";import{COMMON as x}from"../../internal/messages/common.js";import{MPStateLayer as v}from"../../internal/StateLayer.js";import{MPSupportingText as y}from"../../internal/SupportingText.js";import{CONTROL_ICON as j,PROSE_TEXT as C,hasContent as w}from"../../internal/scale.js";import{MARK_MOTION_KEPT as N}from"../../internal/mark.js";import{FADE as L,PORTAL_LAYER as M}from"../../internal/surface.js";import{useMPSize as k}from"../../internal/config.js";import{occurrenceKeys as I}from"../../internal/occurrence.js";const S={xs:{padding:"ps-2 pe-1",height:"h-8"},sm:{padding:"ps-3 pe-1.5",height:"h-10"},md:{padding:"ps-4 pe-2",height:"h-14"},lg:{padding:"ps-4 pe-2",height:"h-16"},xl:{padding:"ps-5 pe-2.5",height:"h-18"}},z={xs:"min-h-8 py-1",sm:"min-h-10 py-1.5",md:"min-h-14 py-3",lg:"min-h-16 py-3",xl:"min-h-18 py-3"},V={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function O(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:P,multiple:_,value:q,defaultValue:F,onValueChange:T,onInputValueChange:$,onKeyDown:A,onKeyUp:D,onFocus:K,onBlur:R,onClick:B,onDoubleClick:E,onContextMenu:U,allowCustom:G=!0,customLabel:H,clearable:W=!1,emptyMessage:J,limit:Q,filter:X,chipVariant:Y,chipColor:Z,placeholder:ee,label:ae,floatingLabel:ne=!0,description:oe,errorMessage:le,startIcon:te,size:re,fullWidth:ie=!1,required:se=!1,disabled:me=!1,readOnly:ce=!1,name:pe,open:ue,defaultOpen:de,onOpenChange:he,clearLabel:fe,openLabel:be,locale:ge,removeLabel:xe,inputRef:ve,id:ye,classNames:je,className:Ce,style:we}){const Ne=k(re),Le=f(ge),Me=b(x,Le),ke=b(g,Le),Ie=w(le),Se=!0===_,ze=S[Ne],Ve=n.useId(),Oe=ye??Ve,Pe=n.useMemo(()=>P.map(e=>({value:e.value,label:e.label??String(e.value),content:e.content,disabled:e.disabled})),[P]),[_e,qe]=n.useState(()=>O(F)),Fe=void 0===q?_e:O(q),[Te,$e]=n.useState(""),{shrunk:Ae,focusProps:De}=d({floating:ne&&w(ae),filled:Fe.length>0||""!==Te,pinned:!!te}),Ke=n.useMemo(()=>new Map(Pe.map(e=>[e.value,e])),[Pe]),Re=n.useMemo(()=>{const e=new Set;for(const a of Pe)e.add(a.label.toLocaleLowerCase()),e.add(String(a.value).toLocaleLowerCase());return e},[Pe]),Be=n.useCallback(e=>Ke.get(e)??{value:e,label:String(e),custom:!0},[Ke]),Ee=Te.trim(),Ue=Ee.toLocaleLowerCase(),Ge=""===Ee||Re.has(Ue)||Fe.some(e=>String(e).toLocaleLowerCase()===Ue),He=!G||ce||me||Ge?null:Ee,We=n.useMemo(()=>null==X?X:(e,a)=>!0===e.custom||X(e,a),[X]),Je=n.useMemo(()=>null===He?Pe:[...Pe,{value:He,label:He,custom:!0}],[Pe,He]),Qe=n.useMemo(()=>I(Je,e=>`${e.custom?"custom:":""}${String(e.value)}`),[Je]),Xe=Se?Fe.map(Be):Fe.length>0?Be(Fe[0]):null;const Ye=/*@__PURE__*/["min-w-0 flex-1 self-stretch border-0 bg-transparent text-inherit [font:inherit] outline-none","placeholder:text-mp-on-surface-variant",me?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Ze=/*@__PURE__*/["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0","text-mp-on-surface-variant","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),ea=a=>e(o.Input,{ref:ve,id:Oe,placeholder:Ae?ee:void 0,onKeyDown:A,onKeyUp:D,onFocus:K,onBlur:R,onClick:B,onDoubleClick:E,onContextMenu:U,className:Se?`${Ye} min-w-16 ${a?"ms-1.5":""}`:Ye});return a(l.Root,{disabled:me,invalid:Ie,"data-mp-size":Ne,className:["mp-combobox group flex-col align-top",ie?"flex w-full":"inline-flex w-fit",Ce??""].filter(Boolean).join(" "),style:we,...De,children:[a(o.Root,{name:pe,items:Je,multiple:Se,value:Xe,onValueChange:e=>{!function(e){void 0===q&&qe(e),T?.(Se?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{$e(e),$?.(e)},open:ue,defaultOpen:de,onOpenChange:e=>he?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:Q,filter:We,locale:Le,disabled:me,readOnly:ce,required:se,children:[a("div",{className:"relative w-full",children:[a(o.InputGroup,{className:["relative flex w-full items-center gap-2",ze.padding,Se?z[Ne]:ze.height,C[Ne],me?"cursor-default":"cursor-text"].join(" "),children:[te?e("span",{className:["flex shrink-0 items-center",me?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:te}):null,Se?e(o.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(o.Value,{children:l=>{const i=I(l,e=>e.value);return a(n.Fragment,{children:[l.map((a,n)=>e(o.Chip,{render:e(t,{variant:Y??(Ie?"outlined":"tonal"),color:Z??(Ie?"error":"primary"),size:V[Ne],disabled:me,endIcon:ce||me?null:e(o.ChipRemove,{"aria-label":xe?xe(a.label):h(Me.removeNamed,{label:a.label}),className:"flex cursor-pointer appearance-none items-center border-0 bg-transparent p-0 text-inherit opacity-70 hover:opacity-100",children:e(r,{icon:c,size:16})})}),children:a.label},i.get(a)??n)),ea(l.length>0)]})}})}):ea(!1),W&&!ce?a(o.Clear,{"aria-label":fe??Me.clear,className:Ze,children:[e(v,{}),e(r,{icon:c,size:j[Ne]})]}):null,a(o.Trigger,{"aria-label":be??Me.open,className:Ze,children:[e(v,{}),e(o.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:m,size:j[Ne]})})]})]}),e(u,{label:ae,required:se,notched:Ae}),w(ae)?e(p,{size:Ne,label:ae,required:se,htmlFor:Oe,shrunk:Ae}):null]}),e(o.Portal,{children:e(o.Positioner,{className:M,sideOffset:4,children:a(o.Popup,{className:["mp-combobox__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface w-[var(--anchor-width)] outline-none","max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",C[Ne],L].join(" "),children:[e(o.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:J??ke.empty}),e(o.List,{children:(n,l)=>a(o.Item,{value:n,disabled:n.disabled,className:["mp-combobox__item group rounded-mp-xs relative flex cursor-pointer",je?.item??"","items-center gap-3 py-2 ps-2 pe-3 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:bg-mp-secondary-container","data-selected:text-mp-on-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(v,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:n.custom?e(r,{icon:i,size:18}):e(o.ItemIndicator,{keepMounted:!0,className:`mp-combobox__mark ${N}`,children:e(r,{icon:s,size:18})})}),e("span",{className:w(n.content)?"min-w-0 flex-1":"min-w-0 flex-1 truncate",children:n.custom?H?H(n.label):h(ke.add,{label:n.label}):n.content??n.label})]},Qe.get(n)??l)})]})})})]}),e(y,{description:oe,errorMessage:le,className:ze.padding})]})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Combobox as o}from"@base-ui/react/combobox";import{Field as l}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip.js";import{MPIcon as r}from"../icon/MPIcon.js";import{AddIcon as i,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons.js";import{MPFieldLabel as p,MPFieldOutline as u,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{fillMessage as h}from"../../internal/i18n.js";import{useMPLocale as f,useMPMessages as b}from"../../internal/locale.js";import{COMBOBOX as g}from"../../internal/messages/combobox.js";import{COMMON as x}from"../../internal/messages/common.js";import{MPStateLayer as v}from"../../internal/StateLayer.js";import{MPSupportingText as y}from"../../internal/SupportingText.js";import{CONTROL_ICON as j,PROSE_TEXT as C,hasContent as w}from"../../internal/scale.js";import{MARK_MOTION_KEPT as N}from"../../internal/mark.js";import{FADE as L,PORTAL_LAYER as M}from"../../internal/surface.js";import{useMPFloatingLabel as k,useMPSize as I}from"../../internal/config.js";import{occurrenceKeys as S}from"../../internal/occurrence.js";const z={xs:{padding:"ps-2 pe-1",height:"h-8"},sm:{padding:"ps-3 pe-1.5",height:"h-10"},md:{padding:"ps-4 pe-2",height:"h-14"},lg:{padding:"ps-4 pe-2",height:"h-16"},xl:{padding:"ps-5 pe-2.5",height:"h-18"}},V={xs:"min-h-8 py-1",sm:"min-h-10 py-1.5",md:"min-h-14 py-3",lg:"min-h-16 py-3",xl:"min-h-18 py-3"},O={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function P(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:_,multiple:q,value:F,defaultValue:T,onValueChange:$,onInputValueChange:A,onKeyDown:D,onKeyUp:K,onFocus:R,onBlur:B,onClick:E,onDoubleClick:U,onContextMenu:G,allowCustom:H=!0,customLabel:W,clearable:J=!1,emptyMessage:Q,limit:X,filter:Y,chipVariant:Z,chipColor:ee,placeholder:ae,label:ne,floatingLabel:oe,description:le,errorMessage:te,startIcon:re,size:ie,fullWidth:se=!1,required:me=!1,disabled:ce=!1,readOnly:pe=!1,name:ue,open:de,defaultOpen:he,onOpenChange:fe,clearLabel:be,openLabel:ge,locale:xe,removeLabel:ve,inputRef:ye,id:je,classNames:Ce,className:we,style:Ne}){const Le=I(ie),Me=k(oe),ke=f(xe),Ie=b(x,ke),Se=b(g,ke),ze=w(te),Ve=!0===q,Oe=z[Le],Pe=n.useId(),_e=je??Pe,qe=n.useMemo(()=>_.map(e=>({value:e.value,label:e.label??String(e.value),content:e.content,disabled:e.disabled})),[_]),[Fe,Te]=n.useState(()=>P(T)),$e=void 0===F?Fe:P(F),[Ae,De]=n.useState(""),{shrunk:Ke,hinted:Re,focusProps:Be}=d({floating:Me&&w(ne),filled:$e.length>0||""!==Ae,pinned:!!re}),Ee=n.useMemo(()=>new Map(qe.map(e=>[e.value,e])),[qe]),Ue=n.useMemo(()=>{const e=new Set;for(const a of qe)e.add(a.label.toLocaleLowerCase()),e.add(String(a.value).toLocaleLowerCase());return e},[qe]),Ge=n.useCallback(e=>Ee.get(e)??{value:e,label:String(e),custom:!0},[Ee]),He=Ae.trim(),We=He.toLocaleLowerCase(),Je=""===He||Ue.has(We)||$e.some(e=>String(e).toLocaleLowerCase()===We),Qe=!H||pe||ce||Je?null:He,Xe=n.useMemo(()=>null==Y?Y:(e,a)=>!0===e.custom||Y(e,a),[Y]),Ye=n.useMemo(()=>null===Qe?qe:[...qe,{value:Qe,label:Qe,custom:!0}],[qe,Qe]),Ze=n.useMemo(()=>S(Ye,e=>`${e.custom?"custom:":""}${String(e.value)}`),[Ye]),ea=Ve?$e.map(Ge):$e.length>0?Ge($e[0]):null;const aa=/*@__PURE__*/["min-w-0 flex-1 self-stretch border-0 bg-transparent text-inherit [font:inherit] outline-none","placeholder:text-mp-on-surface-variant",ce?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),na=/*@__PURE__*/["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0","text-mp-on-surface-variant","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),oa=a=>e(o.Input,{ref:ye,id:_e,placeholder:Re?ae:void 0,onKeyDown:D,onKeyUp:K,onFocus:R,onBlur:B,onClick:E,onDoubleClick:U,onContextMenu:G,className:Ve?`${aa} min-w-16 ${a?"ms-1.5":""}`:aa});return a(l.Root,{disabled:ce,invalid:ze,"data-mp-size":Le,className:["mp-combobox group flex-col align-top",se?"flex w-full":"inline-flex w-fit",we??""].filter(Boolean).join(" "),style:Ne,...Be,children:[a(o.Root,{name:ue,items:Ye,multiple:Ve,value:ea,onValueChange:e=>{!function(e){void 0===F&&Te(e),$?.(Ve?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{De(e),A?.(e)},open:de,defaultOpen:he,onOpenChange:e=>fe?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:X,filter:Xe,locale:ke,disabled:ce,readOnly:pe,required:me,children:[a("div",{className:"relative w-full",children:[a(o.InputGroup,{className:["relative flex w-full items-center gap-2",Oe.padding,Ve?V[Le]:Oe.height,C[Le],ce?"cursor-default":"cursor-text"].join(" "),children:[re?e("span",{className:["flex shrink-0 items-center",ce?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:re}):null,Ve?e(o.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(o.Value,{children:l=>{const i=S(l,e=>e.value);return a(n.Fragment,{children:[l.map((a,n)=>e(o.Chip,{render:e(t,{variant:Z??(ze?"outlined":"tonal"),color:ee??(ze?"error":"primary"),size:O[Le],disabled:ce,endIcon:pe||ce?null:e(o.ChipRemove,{"aria-label":ve?ve(a.label):h(Ie.removeNamed,{label:a.label}),className:"flex cursor-pointer appearance-none items-center border-0 bg-transparent p-0 text-inherit opacity-70 hover:opacity-100",children:e(r,{icon:c,size:16})})}),children:a.label},i.get(a)??n)),oa(l.length>0)]})}})}):oa(!1),J&&!pe?a(o.Clear,{"aria-label":be??Ie.clear,className:na,children:[e(v,{}),e(r,{icon:c,size:j[Le]})]}):null,a(o.Trigger,{"aria-label":ge??Ie.open,className:na,children:[e(v,{}),e(o.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:m,size:j[Le]})})]})]}),e(u,{label:ne,required:me,notched:Ke}),w(ne)?e(p,{size:Le,label:ne,required:me,htmlFor:_e,shrunk:Ke}):null]}),e(o.Portal,{children:e(o.Positioner,{className:M,sideOffset:4,children:a(o.Popup,{className:["mp-combobox__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface w-[var(--anchor-width)] outline-none","max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",C[Le],L].join(" "),children:[e(o.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:Q??Se.empty}),e(o.List,{children:(n,l)=>a(o.Item,{value:n,disabled:n.disabled,className:["mp-combobox__item group rounded-mp-xs relative flex cursor-pointer",Ce?.item??"","items-center gap-3 py-2 ps-2 pe-3 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:bg-mp-secondary-container","data-selected:text-mp-on-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(v,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:n.custom?e(r,{icon:i,size:18}):e(o.ItemIndicator,{keepMounted:!0,className:`mp-combobox__mark ${N}`,children:e(r,{icon:s,size:18})})}),e("span",{className:w(n.content)?"min-w-0 flex-1":"min-w-0 flex-1 truncate",children:n.custom?W?W(n.label):h(Se.add,{label:n.label}):n.content??n.label})]},Ze.get(n)??l)})]})})})]}),e(y,{description:le,errorMessage:te,className:Oe.padding})]})}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useMPConfig, type MPConfigValue } from '../../internal/config.js';
-import type { MPColor, MPDensity, MPSize, MPWindowClass } from '../../types.js';
+import type { MPPartialMessages } from '../../internal/i18n.js';
+import type { MPColor, MPDensity, MPSize, MPWeekday, MPWindowClass } from '../../types.js';
 export interface MPConfigProviderProps {
     /**
      * The size every control under this starts at.
@@ -63,6 +64,47 @@ export interface MPConfigProviderProps {
      * carried here so an application needs one provider rather than two.
      */
     locale?: string;
+    /**
+     * The tag dates and numbers are written in on the server and while the page
+     * hydrates, when no `locale` is known — the same value `MPLocaleProvider`
+     * takes, for the same reason `locale` is here.
+     *
+     * Ignored when this provider or one above it names a `locale`, which already
+     * agrees on both sides.
+     */
+    serverLocale?: string;
+    /**
+     * The words the library says on its own behalf, by namespace, over whatever
+     * the locale's table says: `{ common: { close: 'Dismiss' } }`.
+     *
+     * A partial. Whatever is not in it stays as the locale has it, so renaming one
+     * button does not mean supplying the other words. A component's own `labels`
+     * prop still beats it, and nested providers merge a word at a time.
+     *
+     * It is the same shape `registerMPMessages` takes, and the two are for
+     * different jobs. A registered table is a language, for the whole page and
+     * keyed by tag. This is the application's own wording, for this subtree, in
+     * whatever language is in force.
+     */
+    labels?: MPPartialMessages;
+    /**
+     * Whether every field's label rests on the field's line until there is
+     * something in it, then rises into the notch. `false` keeps all of them in the
+     * notch from the start.
+     *
+     * `true` unless set, which is each field's own default. A field's own
+     * `floatingLabel` still wins, and a `startIcon` holds a label up whatever this
+     * says.
+     */
+    floatingLabel?: boolean;
+    /**
+     * Which day the weeks start on, in every calendar and date picker under this.
+     *
+     * Left out, each one asks its locale, which is right for most applications. A
+     * product whose weeks start on Monday wherever its readers are says so here.
+     * A calendar's own `weekStartsOn` still wins.
+     */
+    weekStartsOn?: MPWeekday;
     /**
      * Which way the text runs, for everything under it.
      *
@@ -81,9 +123,20 @@ export interface MPConfigProviderProps {
      *
      * Given here, both are set: the attribute goes on a `display: contents`
      * element, which takes part in no layout at all, and the same value goes into
-     * Base UI's own `DirectionProvider`. Left out, nothing is rendered and nothing
-     * is claimed — a page that sets `dir` on `<html>` and never mounts this still
-     * gets the CSS half and not the other one.
+     * Base UI's own `DirectionProvider`.
+     *
+     * Left out, no element is rendered and the direction is **read off the
+     * document**: a page with `dir="rtl"` on `<html>` gets the Base UI half from
+     * this provider without saying so twice, and a document whose direction
+     * changes later is followed. A provider nested in one that was given a `dir`
+     * keeps that one, and a Base UI `DirectionProvider` above this that says
+     * `rtl` is kept as well. So set it only for a subtree that runs the other way
+     * from the page around it.
+     *
+     * A server has no document and renders left to right, which is what Base UI
+     * says with no provider at all. The client turns it over straight after
+     * hydration, and since this changes behaviour rather than markup, the server
+     * render and the hydration agree.
      */
     dir?: 'ltr' | 'rtl';
     /**
@@ -134,6 +187,12 @@ export interface MPConfigProviderProps {
  * 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.
  *
+ * The rest of what it carries passes the same test. `floatingLabel` and
+ * `weekStartsOn` are decisions about a product's forms and calendars rather
+ * than about one field, and neither can be a custom property. `locale`,
+ * `serverLocale` and `labels` decide which *string* is rendered, which the
+ * cascade cannot do at all.
+ *
  * ## Why `variant` is not here
  *
  * Because there is no such thing as *the* default variant. `MPAccordion` starts
@@ -165,7 +224,7 @@ export interface MPConfigProviderProps {
  * </MPConfigProvider>
  * ```
  */
-export declare function MPConfigProvider({ size, color, density, breakpoints, locale, dir, reserveSupportingText, children }: MPConfigProviderProps): React.JSX.Element;
+export declare function MPConfigProvider({ size, color, density, breakpoints, locale, serverLocale, labels, floatingLabel, weekStartsOn, dir, reserveSupportingText, 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 e from"react";import{DirectionProvider as i}from"@base-ui/react/direction-provider";import{MPConfigContext as o,useMPConfig as t}from"../../internal/config.js";import{MPLocaleContext as n,useMPLocale as s}from"../../internal/locale.js";import{WINDOW_CLASSES as p}from"../../internal/window-class.js";export function MPConfigProvider({size:a,color:c,density:d,breakpoints:l,locale:m,dir:v,reserveSupportingText:u,children:f}){const x=t(),b=s(),g=p.map(r=>l?.[r]??x.breakpoints?.[r]??"").join(","),j=e.useMemo(()=>({size:a??x.size,color:c??x.color,density:d??x.density,breakpoints:l||x.breakpoints?{...x.breakpoints,...l}:void 0,reserveSupportingText:u??x.reserveSupportingText}),[a,c,d,u,x.size,x.color,x.density,x.reserveSupportingText,g]),y=m??b,h=r(o.Provider,{value:j,children:r(n.Provider,{value:y,children:f})});return v?r(i,{direction:v,children:r("div",{dir:v,style:{display:"contents"},children:h})}):h}export{t as useMPConfig};
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{DirectionProvider as i,useDirection as o}from"@base-ui/react/direction-provider";import{MPConfigContext as t,useMPConfig as n}from"../../internal/config.js";import{useDocumentDirection as s}from"../../internal/direction.js";import{MPLocaleContext as l,useMPLocale as a,useServerLocale as d}from"../../internal/locale.js";import{WINDOW_CLASSES as c}from"../../internal/window-class.js";export function MPConfigProvider({size:p,color:f,density:m,breakpoints:v,locale:b,serverLocale:u,labels:g,floatingLabel:k,weekStartsOn:S,dir:j,reserveSupportingText:x,children:y}){const h=n(),w=a(),O=d(u),L=o(),z=j??h.dir??("rtl"===L?"rtl":void 0),P=s(void 0===z),T=void 0===g?"":JSON.stringify(g),M=r.useMemo(()=>function(e,r){if(!e||!r)return r??e;const i={...e};for(const o of Object.keys(r))i[o]={...e[o],...r[o]};return i}(h.labels,g),[h.labels,T]),C=c.map(e=>v?.[e]??h.breakpoints?.[e]??"").join(","),J=r.useMemo(()=>({size:p??h.size,color:f??h.color,density:m??h.density,breakpoints:v||h.breakpoints?{...h.breakpoints,...v}:void 0,reserveSupportingText:x??h.reserveSupportingText,floatingLabel:k??h.floatingLabel,weekStartsOn:S??h.weekStartsOn,labels:M,dir:j??h.dir}),[p,f,m,x,k,S,j,h.size,h.color,h.density,h.reserveSupportingText,h.floatingLabel,h.weekStartsOn,h.dir,M,C]),N=b??w??O,q=e(t.Provider,{value:J,children:e(l.Provider,{value:N,children:y})});return e(i,j?{direction:j,children:e("div",{dir:j,style:{display:"contents"},children:q})}:{direction:z??P,children:q})}export{n as useMPConfig};

package/dist/components/date-picker/MPDatePicker.d.ts

@@ -69,7 +69,10 @@ export interface MPDatePickerProps extends MPPickerShellProps {
      * own.
      */
     locale?: string;
-    /** Which day the week starts on. Defaults to whatever the locale says. */
+    /**
+     * Which day the week starts on. Left out, the nearest `MPConfigProvider`'s
+     * `weekStartsOn`, then whatever the locale says.
+     */
     weekStartsOn?: MPWeekday;
     /**
      * How the trigger writes the chosen date. Passed straight to `Intl`, so

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,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:V,defaultOpen:I,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(I??!1),ue=V??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===V&&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),ke=b(ce)?j[R](ce):"";return e(c,{..._,slug:"date-picker",size:ae,color:oe,name:Q,locale:te,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,formValue:ke,hiddenValues:Q?[{name:Q,value:ke}]: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,useMPWeekStart as z}from"../../internal/config.js";const M={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}};export const MPDatePicker=/*@__PURE__*/o.forwardRef(function({value:P,defaultValue:w,onValueChange:V,open:I,defaultOpen:B,onOpenChange:R,precision:E="day",defaultMonth:F,minDate:N,maxDate:T,shouldDisableDate:Y,locale:q,weekStartsOn:A,format:G,placeholder:H,clearable:J=!1,showTodayButton:K=!0,closeOnSelect:L=!0,labels:Q,name:U,size:W,color:X,readOnly:Z=!1,disabled:$=!1,startIcon:_,...ee},ae){const oe=S(W),te=O(X),ne=d(q),le=u(p,ne,Q),re=z(A)??g(ne),ie=G??M[E],[se,ce]=o.useState(w??null),me=void 0!==P?P:se,[de,ue]=o.useState(B??!1),pe=I??de,[fe,he]=o.useState(()=>x(b(me)?me:F??k()));o.useEffect(()=>{pe&&he(x(b(me)?me:F??k()))},[pe]);const ye=e=>{e&&(Z||$)||(void 0===I&&ue(e),R?.(e))},je=e=>{void 0===P&&ce(e),V?.(e)},be=e=>{const a=D(e,E),o=b(me)?v(a,me):a;je(o),he(x(o)),L&&ye(!1)},ge=k(),ve=y(ge,E,N,T)||"day"===E&&(Y?.(ge)??!1),xe="year"===E?le.thisYear:"month"===E?le.thisMonth:le.today,De=K||J,ke=C(m(ne,ie),H),Ce=b(me)?j[E](me):"";return e(c,{...ee,slug:"date-picker",size:oe,color:te,name:U,locale:ne,readOnly:Z,disabled:$,triggerRef:ae,startIcon:void 0===_?e(n,{icon:l,size:f[oe]}):_,display:b(me)?h(me,ne,ie):H??"",samples:ke,empty:!b(me),clearable:J,onClear:()=>je(null),open:pe,onOpenChange:ye,labels:le,formValue:Ce,hiddenValues:U?[{name:U,value:Ce}]:void 0,children:a("div",{className:"flex flex-col "+(De?"gap-1.5":""),children:[e(r,{size:oe,color:te,locale:ne,weekStartsOn:re,month:fe,onMonthChange:he,selected:[me],onSelect:be,minDate:N,maxDate:T,shouldDisableDate:Y,precision:E,labels:le,autoFocus:!0}),De?a(s,{children:[J?e(t,{variant:"text",size:i[oe],color:te,onClick:()=>{je(null),ye(!1)},children:le.clear}):null,K?e(t,{variant:"text",size:i[oe],color:te,disabled:ve,onClick:()=>be(ge),children:xe}):null]}):null]})})});

package/dist/components/date-range-picker/MPDateRangePicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{MPButton as a}from"../button/MPButton.js";import{MPIcon as t}from"../icon/MPIcon.js";import{ArrowRightIcon as r,CalendarIcon as s}from"../../constants/icons.js";import{Calendar as o}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as c,MPPickerShell as u,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale.js";import{PICKER as f}from"../../internal/messages/picker.js";import{MPWidthSizer as h}from"../../internal/WidthSizer.js";import{CONTROL_ICON as v,META_TEXT as x}from"../../internal/scale.js";import{addMonths as g,compareDay as j,formatDate as b,isValidDate as w,localeWeekStart as N,startOfDay as S,startOfMonth as C,toISODate as D,today as k,withPlaceholder as y}from"../../internal/date.js";import{useMPColor as O,useMPSize as P}from"../../internal/config.js";const z={start:null,end:null};export const MPDateRangePicker=/*@__PURE__*/n.forwardRef(function({value:M,defaultValue:V,onValueChange:B,open:I,defaultOpen:R,onOpenChange:$,defaultMonth:E,minDate:F,maxDate:W,shouldDisableDate:_,locale:q,weekStartsOn:A,format:G={dateStyle:"medium"},monthCount:H=2,startPlaceholder:J,endPlaceholder:K,presets:L,clearable:Q=!1,closeOnSelect:T=!0,labels:U,name:X,size:Y,color:Z,readOnly:ee=!1,disabled:le=!1,startIcon:ne,...ae},te){const re=P(Y),se=O(Z),oe=d(q),ie=p(f,oe,U),ce=A??N(oe),[ue,me]=n.useState(V??z),de=void 0!==M?M??z:ue,pe=w(de.start)?de.start:null,fe=w(de.end)?de.end:null,[he,ve]=n.useState(R??!1),xe=I??he,[ge,je]=n.useState(null),[be,we]=n.useState(null),[Ne,Se]=n.useState(()=>C(pe??E??k()));n.useEffect(()=>{xe?Se(C(pe??E??k())):(je(null),we(null))},[xe]);const Ce=e=>{e&&(ee||le)||(void 0===I&&ve(e),$?.(e))},De=e=>{void 0===M&&me(e),B?.(e)},ke=ge??pe,ye=null!==ge?be:fe,Oe=(l,n)=>w(l)?b(l,oe,G):e("span",{className:"text-mp-on-surface-variant",children:n??""}),Pe=n.useMemo(()=>g(Ne,1),[Ne]),ze=2===H,Me=m(oe,G),Ve=null!==ge?ie.end:null===pe?ie.start:null,Be={size:re,color:se,locale:oe,weekStartsOn:ce,selected:[pe,fe,ge],rangeStart:ke,rangeEnd:ye,onSelect:e=>{const l=S(e);if(null===ge)return je(l),we(l),void De({start:l,end:null});const[n,a]=j(l,ge)<0?[l,ge]:[ge,l];je(null),we(null),De({start:n,end:a}),T&&Ce(!1)},onPreviewChange:e=>{null!==ge&&we(e??ge)},minDate:F,maxDate:W,shouldDisableDate:_,showOutsideDays:!1,labels:ie};return e(u,{...ae,slug:"date-range-picker",size:re,color:se,name:X,locale:oe,readOnly:ee,disabled:le,triggerRef:te,startIcon:void 0===ne?e(t,{icon:s,size:v[re]}):ne,display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Oe(pe,J)}),e(h,{samples:y(Me,J)})]}),e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center rtl:rotate-180",children:e(t,{icon:r,size:v[re]})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Oe(fe,K)}),e(h,{samples:y(Me,K)})]})]}),empty:null===pe&&null===fe,clearable:Q,onClear:()=>De(z),open:xe,onOpenChange:Ce,labels:ie,formValue:pe&&fe?`${D(pe)}/${D(fe)}`:"",hiddenValues:X?[{name:X,value:pe?D(pe):""},{name:X,value:fe?D(fe):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:"flex items-stretch gap-2",children:[L&&L.length>0?e("div",{className:"border-mp-outline-variant flex max-h-[calc(var(--_mp-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5",children:L.map((l,n)=>e(a,{variant:"text",size:i[re],color:se,className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;je(null),we(null),De(l),w(l.start)&&Se(C(l.start)),T&&Ce(!1)})(l),children:l.label},n))}):null,e(o,{...Be,month:Ne,onMonthChange:Se,showNextButton:!ze,autoFocus:!0}),ze?e(o,{...Be,month:Pe,onMonthChange:e=>Se(g(e,-1)),showPreviousButton:!1}):null]}),Q||null!==Ve?l(c,{children:[null!==Ve?e("span",{className:`text-mp-on-surface-variant me-auto ${x}`,children:Ve}):null,Q?e(a,{variant:"text",size:i[re],color:se,onClick:()=>{je(null),we(null),De(z),Ce(!1)},children:ie.clear}):null]}):null]})})});
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{MPButton as a}from"../button/MPButton.js";import{MPIcon as t}from"../icon/MPIcon.js";import{ArrowRightIcon as r,CalendarIcon as s}from"../../constants/icons.js";import{Calendar as o}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as c,MPPickerShell as u,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale.js";import{PICKER as f}from"../../internal/messages/picker.js";import{MPWidthSizer as h}from"../../internal/WidthSizer.js";import{CONTROL_ICON as v,META_TEXT as x}from"../../internal/scale.js";import{addMonths as g,compareDay as j,formatDate as b,isValidDate as w,localeWeekStart as N,startOfDay as S,startOfMonth as C,toISODate as D,today as k,withPlaceholder as y}from"../../internal/date.js";import{useMPColor as O,useMPSize as P,useMPWeekStart as z}from"../../internal/config.js";const M={start:null,end:null};export const MPDateRangePicker=/*@__PURE__*/n.forwardRef(function({value:V,defaultValue:B,onValueChange:I,open:R,defaultOpen:$,onOpenChange:E,defaultMonth:F,minDate:W,maxDate:_,shouldDisableDate:q,locale:A,weekStartsOn:G,format:H={dateStyle:"medium"},monthCount:J=2,startPlaceholder:K,endPlaceholder:L,presets:Q,clearable:T=!1,closeOnSelect:U=!0,labels:X,name:Y,size:Z,color:ee,readOnly:le=!1,disabled:ne=!1,startIcon:ae,...te},re){const se=P(Z),oe=O(ee),ie=d(A),ce=p(f,ie,X),ue=z(G)??N(ie),[me,de]=n.useState(B??M),pe=void 0!==V?V??M:me,fe=w(pe.start)?pe.start:null,he=w(pe.end)?pe.end:null,[ve,xe]=n.useState($??!1),ge=R??ve,[je,be]=n.useState(null),[we,Ne]=n.useState(null),[Se,Ce]=n.useState(()=>C(fe??F??k()));n.useEffect(()=>{ge?Ce(C(fe??F??k())):(be(null),Ne(null))},[ge]);const De=e=>{e&&(le||ne)||(void 0===R&&xe(e),E?.(e))},ke=e=>{void 0===V&&de(e),I?.(e)},ye=je??fe,Oe=null!==je?we:he,Pe=(l,n)=>w(l)?e("bdi",{children:b(l,ie,H)}):e("span",{className:"text-mp-on-surface-variant",children:n??""}),ze=n.useMemo(()=>g(Se,1),[Se]),Me=2===J,Ve=m(ie,H),Be=null!==je?ce.end:null===fe?ce.start:null,Ie={size:se,color:oe,locale:ie,weekStartsOn:ue,selected:[fe,he,je],rangeStart:ye,rangeEnd:Oe,onSelect:e=>{const l=S(e);if(null===je)return be(l),Ne(l),void ke({start:l,end:null});const[n,a]=j(l,je)<0?[l,je]:[je,l];be(null),Ne(null),ke({start:n,end:a}),U&&De(!1)},onPreviewChange:e=>{null!==je&&Ne(e??je)},minDate:W,maxDate:_,shouldDisableDate:q,showOutsideDays:!1,labels:ce};return e(u,{...te,slug:"date-range-picker",size:se,color:oe,name:Y,locale:ie,readOnly:le,disabled:ne,triggerRef:re,startIcon:void 0===ae?e(t,{icon:s,size:v[se]}):ae,display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Pe(fe,K)}),e(h,{samples:y(Ve,K)})]}),e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center rtl:rotate-180",children:e(t,{icon:r,size:v[se]})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Pe(he,L)}),e(h,{samples:y(Ve,L)})]})]}),empty:null===fe&&null===he,clearable:T,onClear:()=>ke(M),open:ge,onOpenChange:De,labels:ce,formValue:fe&&he?`${D(fe)}/${D(he)}`:"",hiddenValues:Y?[{name:Y,value:fe?D(fe):""},{name:Y,value:he?D(he):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:"flex items-stretch gap-2",children:[Q&&Q.length>0?e("div",{className:"border-mp-outline-variant flex max-h-[calc(var(--_mp-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5",children:Q.map((l,n)=>e(a,{variant:"text",size:i[se],color:oe,className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;be(null),Ne(null),ke(l),w(l.start)&&Ce(C(l.start)),U&&De(!1)})(l),children:l.label},n))}):null,e(o,{...Ie,month:Se,onMonthChange:Ce,showNextButton:!Me,autoFocus:!0}),Me?e(o,{...Ie,month:ze,onMonthChange:e=>Ce(g(e,-1)),showPreviousButton:!1}):null]}),T||null!==Be?l(c,{children:[null!==Be?e("span",{className:`text-mp-on-surface-variant me-auto ${x}`,children:Be}):null,T?e(a,{variant:"text",size:i[se],color:oe,onClick:()=>{be(null),Ne(null),ke(M),De(!1)},children:ce.clear}):null]}):null]})})});