material-plus-ui 0.0.1 → 1.1.0

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

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import type { MPStyleProps } from '../../types';
+/**
+ * What a combobox's value may be — the same two types `MPSelect` submits, and for
+ * the same reason: a form control's value is what a form sends, and every escape
+ * from that buys flexibility by making the common case harder to write.
+ *
+ * A value the list does not contain arrives as a `string`. It is what the reader
+ * typed.
+ */
+export type MPComboboxValue = string | number;
+export interface MPComboboxOption {
+    /** Submitted, and what `value` and `onValueChange` speak in. */
+    value: MPComboboxValue;
+    /**
+     * Shown in the list, in the input and on the chip. Defaults to the value.
+     *
+     * A `string` rather than a `ReactNode`, which is the one place this differs
+     * from `MPSelect`: the label is what the filter matches against and what is
+     * written into a text input, and neither of those can be done to an element.
+     */
+    label?: string;
+    /** Unavailable, but still listed — the option exists, it just cannot be picked. */
+    disabled?: boolean;
+}
+/** One value, or an array of them, depending on `multiple`. */
+type Selection<Multiple extends boolean | undefined> = Multiple extends true ? MPComboboxValue[] : MPComboboxValue | null;
+export interface MPComboboxProps<Multiple extends boolean | undefined = false> extends MPStyleProps {
+    /**
+     * The options, as data — the same shape `MPSelect` takes, and for the same
+     * reason: what a caller has is almost always an array already.
+     */
+    items: readonly MPComboboxOption[];
+    /**
+     * Whether more than one value may be held. The chosen ones become `MPChip`s
+     * inside the field, and the input goes on filtering after each.
+     * @default false
+     */
+    multiple?: Multiple;
+    /** The chosen value. Use with `onValueChange` for a controlled combobox. */
+    value?: Selection<Multiple> | null;
+    /** The initially chosen value, for an uncontrolled combobox. */
+    defaultValue?: Selection<Multiple> | null;
+    onValueChange?: (value: Selection<Multiple>) => void;
+    /** Called as the text in the input changes — the filter query, not the value. */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * Whether a value the list does not contain may be committed.
+     *
+     * On by default, and it is what separates this from a searchable select: the
+     * typed text is offered as its own row at the end of the list, so committing it
+     * is a choice the reader makes rather than something that happens to them on
+     * blur. Turn it off for a field whose values are a closed set.
+     * @default true
+     */
+    allowCustom?: boolean;
+    /** What that row says. Receives the trimmed query. */
+    customLabel?: (query: string) => React.ReactNode;
+    /**
+     * Shows a × that empties the field. Off by default — a field that can be
+     * cleared in one click is a field that can be emptied by accident.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Shown in the popup when nothing matches and no value may be added.
+     * @default 'No matches'
+     */
+    emptyMessage?: React.ReactNode;
+    /** The most rows the list will show at once. `-1` is all of them. @default -1 */
+    limit?: number;
+    /**
+     * Shown in the input while nothing is typed. With a floating label it is held
+     * back until the label has risen out of its way.
+     */
+    placeholder?: string;
+    /**
+     * Label for the combobox, drawn in the outline's notch and — while nothing is
+     * chosen or typed, the control is unfocused and there is no `startIcon` —
+     * resting on the input's own line. See `floatingLabel`.
+     */
+    label?: React.ReactNode;
+    /**
+     * Whether the label rests on the input's line while there is nothing to make
+     * room for, and rises into the notch on focus, on the first character or on
+     * the first chip.
+     *
+     * `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.
+     * @default true
+     */
+    floatingLabel?: boolean;
+    /** The line under the control. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /**
+     * The message under the control. Its presence is also what puts the combobox
+     * into its error state.
+     */
+    errorMessage?: React.ReactNode;
+    /** Content placed before the input — an `MPIcon`, usually. */
+    startIcon?: React.ReactNode;
+    /** Marks the combobox required, both to assistive technology and to the label. */
+    required?: boolean;
+    /** Greys the control out and stops it taking input. */
+    disabled?: boolean;
+    /** Shows the value without allowing it to be changed, and stays focusable. */
+    readOnly?: boolean;
+    /** Name of the form control. */
+    name?: string;
+    /** The popup is open. Use with `onOpenChange` for a controlled popup. */
+    open?: boolean;
+    /** Whether the popup starts open. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Accessible name of the clear button. Defaults to the word for "clear" in
+     * `locale`.
+     */
+    clearLabel?: string;
+    /**
+     * Which language the two adornments' default names are written in. Falls back
+     * to the nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /**
+     * Accessible name of the chevron that opens the list, **for a combobox with no
+     * `label`**.
+     *
+     * With a label, Base UI names the chevron after the field itself and that name
+     * wins — `aria-labelledby` outranks `aria-label` — which is the right answer:
+     * a button called "Fruit" beside a field called "Fruit" is the button that
+     * opens that field. This is the fallback for the unlabelled case, where the
+     * chevron would otherwise be a button with a glyph in it and no name at all.
+     *
+     * Defaults to the word for "open" in `locale`.
+     */
+    openLabel?: string;
+    /**
+     * Accessible name of a chip's remove button. Receives the chip's label.
+     *
+     * Left out, the chip is still named — "Remove Seoul" in `locale`'s own word
+     * order — rather than being one of five buttons all called "Remove".
+     */
+    removeLabel?: (label: string) => string;
+    /** A ref to the text input the reader types into. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * The id put on the input and pointed at by the label. Generated when it is
+     * left out.
+     */
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A field you can type into and also choose from.
+ *
+ * The shell is `MPTextField`'s wearing a chevron, exactly as `MPSelect`'s trigger
+ * is — the three have to be indistinguishable in a form, or the form looks
+ * assembled rather than designed. What is different is what the text does: it
+ * filters the list, and — unless `allowCustom` is off — it can become the value
+ * itself, offered as the last row rather than committed silently on blur.
+ *
+ * With `multiple` the chosen values become chips inside the field and the input
+ * goes on filtering after each one, so a set of tags is built without the field
+ * ever closing.
+ *
+ * Base UI owns everything hard about this: the filtering and its collator, the
+ * popup's positioning and flipping, the `combobox`/`listbox` wiring, arrow-key
+ * 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, allowCustom, customLabel, clearable, emptyMessage, limit, placeholder, label, floatingLabel, description, errorMessage, startIcon, size, fullWidth, required, disabled, readOnly, name, open, defaultOpen, onOpenChange, clearLabel, openLabel, locale: localeProp, removeLabel, inputRef, id, className, style }: MPComboboxProps<Multiple>): React.JSX.Element;
+export {};

package/dist/components/combobox/MPCombobox.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as i}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip";import{MPIcon as r}from"../icon/MPIcon";import{AddIcon as o,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons";import{MPFieldLabel as u,MPFieldOutline as d,useFloatingLabel as p}from"../../internal/FieldOutline";import{fillMessage as h}from"../../internal/i18n";import{useMPLocale as f,useMPMessages as b}from"../../internal/locale";import{MPStateLayer as g}from"../../internal/StateLayer";import{MPSupportingText as x}from"../../internal/SupportingText";import{CONTROL_ICON as v,PROSE_TEXT as y,hasContent as N}from"../../internal/scale";import{FADE as w,PORTAL_LAYER as C}from"../../internal/surface";const L={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"}},j={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"},I={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function S(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:z,multiple:M,value:O,defaultValue:V,onValueChange:P,onInputValueChange:k,allowCustom:q=!0,customLabel:A,clearable:T=!1,emptyMessage:$="No matches",limit:R,placeholder:_,label:F,floatingLabel:E=!0,description:B,errorMessage:G,startIcon:H,size:W="md",fullWidth:D=!1,required:J=!1,disabled:K=!1,readOnly:Q=!1,name:U,open:X,defaultOpen:Y,onOpenChange:Z,clearLabel:ee,openLabel:ae,locale:le,removeLabel:ie,inputRef:ne,id:te,className:re,style:oe}){const se=f(le),me=b("common",se),ce=N(G),ue=!0===M,de=L[W],pe=l.useId(),he=te??pe,fe=l.useMemo(()=>z.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[z]),[be,ge]=l.useState(()=>S(V)),xe=void 0===O?be:S(O),[ve,ye]=l.useState(""),{shrunk:Ne,focusProps:we}=p({floating:E&&N(F),filled:xe.length>0||""!==ve,pinned:!!H}),Ce=l.useCallback(e=>fe.find(a=>a.value===e)??{value:e,label:String(e),custom:!0},[fe]),Le=ve.trim(),je=Le.toLocaleLowerCase(),Ie=""===Le||fe.some(e=>e.label.toLocaleLowerCase()===je||String(e.value).toLocaleLowerCase()===je)||xe.some(e=>String(e).toLocaleLowerCase()===je),Se=!q||Q||K||Ie?null:Le,ze=l.useMemo(()=>null===Se?fe:[...fe,{value:Se,label:Se,custom:!0}],[fe,Se]),Me=ue?xe.map(Ce):xe.length>0?Ce(xe[0]):null;const Oe=["min-w-0 flex-1 self-stretch bg-transparent font-[inherit] text-inherit outline-none","placeholder:text-mp-on-surface-variant",K?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Ve=["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","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(" "),Pe=a=>e(i.Input,{ref:ne,id:he,placeholder:Ne?_:void 0,className:ue?`${Oe} min-w-16 ${a?"ms-1.5":""}`:Oe});return a(n.Root,{disabled:K,invalid:ce,"data-mp-size":W,className:["mp-combobox group flex-col align-top",D?"flex w-full":"inline-flex w-fit",re??""].filter(Boolean).join(" "),style:oe,...we,children:[a(i.Root,{name:U,items:ze,multiple:ue,value:Me,onValueChange:e=>{!function(e){void 0===O&&ge(e),P?.(ue?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{ye(e),k?.(e)},open:X,defaultOpen:Y,onOpenChange:e=>Z?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:R,disabled:K,readOnly:Q,required:J,children:[a("div",{className:"relative w-full",children:[a(i.InputGroup,{className:["relative flex w-full items-center gap-2",de.padding,ue?j[W]:de.height,y[W],K?"cursor-default":"cursor-text"].join(" "),children:[H?e("span",{className:["flex shrink-0 items-center",K?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:H}):null,ue?e(i.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(i.Value,{children:n=>a(l.Fragment,{children:[n.map(a=>e(i.Chip,{render:e(t,{variant:ce?"outlined":"tonal",color:ce?"error":"primary",size:I[W],disabled:K,endIcon:Q||K?null:e(i.ChipRemove,{"aria-label":ie?ie(a.label):h(me.removeNamed,{label:a.label}),className:"flex cursor-pointer items-center opacity-70 hover:opacity-100",children:e(r,{icon:c,size:16})})}),children:a.label},String(a.value))),Pe(n.length>0)]})})}):Pe(!1),T&&!Q?a(i.Clear,{"aria-label":ee??me.clear,className:Ve,children:[e(g,{}),e(r,{icon:c,size:v[W]})]}):null,a(i.Trigger,{"aria-label":ae??me.open,className:Ve,children:[e(g,{}),e(i.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:v[W]})})]})]}),e(d,{label:F,required:J,notched:Ne}),N(F)?e(u,{size:W,label:F,required:J,htmlFor:he,shrunk:Ne}):null]}),e(i.Portal,{children:e(i.Positioner,{className:C,sideOffset:4,children:a(i.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",y[W],w].join(" "),children:[e(i.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:$}),e(i.List,{children:l=>a(i.Item,{value:l,disabled:l.disabled,className:["mp-combobox__item rounded-mp-xs relative flex cursor-pointer items-center","gap-3 py-2 ps-2 pe-3 select-none outline-none","data-highlighted:bg-mp-on-surface/8","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("span",{className:"flex size-5 shrink-0 items-center justify-center",children:l.custom?e(r,{icon:o,size:18}):e(i.ItemIndicator,{children:e(r,{icon:s,size:18})})}),e("span",{className:"min-w-0 flex-1 truncate",children:l.custom?A?A(l.label):`Add “${l.label}”`:l.label})]},`${l.custom?"custom:":""}${String(l.value)}`)})]})})})]}),e(x,{description:B,errorMessage:G,className:de.padding})]})}

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

@@ -0,0 +1,2 @@
+export { MPCombobox } from './MPCombobox';
+export type { MPComboboxOption, MPComboboxProps, MPComboboxValue } from './MPCombobox';

package/dist/components/combobox/index.js

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

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPSize } from '../../types';
+export interface MPContainerProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How wide the content is allowed to get, on a ladder pinned to MD3's window
+     * size classes — `sm` 600dp, `md` 840dp, `lg` 1200dp, `xl` 1600dp, `xs` 480dp.
+     *
+     * `none`, the default, is no limit: a container's job is the margin, and a
+     * measure is a second decision that a page should have to ask for.
+     * @default 'none'
+     */
+    maxWidth?: MPSize | 'none';
+    /**
+     * The page margin. Turn it off to keep the centring and the measure without
+     * the gutter — a full-bleed hero, a section that pads itself.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The margin's rung. `md` is 16dp, which is MD3's own compact margin; the
+     * specification widens it to 24dp from a medium window up, which here is
+     * `size="lg"`.
+     *
+     * As on [MPBox](./box) this is the size of the *sheet* — it never touches a
+     * height or the type scale — and it is independent of `maxWidth`, which is how
+     * wide the content gets rather than how far it sits from the edge.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Centres the content once `maxWidth` is narrower than the page. No effect
+     * while `maxWidth` is `none`, because there is nothing left over to centre in.
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<main />}`,
+     * `render={<section />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * The page margin, and optionally a measure.
+ *
+ * Material describes a layout as content held off the edge of the window by a
+ * margin — 16dp in a compact window, 24dp from medium up — and this is that
+ * margin, said once, at the top of a page rather than on each of the things
+ * inside it.
+ *
+ * Nothing to do with the grid. A container holds an [MPGrid](./grid) as happily
+ * as it holds a single paragraph, and a grid needs no container around it: the
+ * two are separate because the questions are separate — how far the content sits
+ * from the edge of the window, and how the content divides itself up.
+ *
+ * ## Why it draws no surface
+ *
+ * No `variant`, no `color`, no shadow, for the same reason a grid draws none:
+ * the outermost element on a page is the one thing that must not decide what the
+ * page looks like. A container that painted `surface-container` would put a
+ * second background behind an application that already has one, and every sheet
+ * inside it would then be a sheet on a sheet.
+ *
+ * When the page genuinely is a card on a background, that is an
+ * [MPBox](./box) or an [MPCard](./card) *inside* the container.
+ *
+ * ## Why the measure is off by default
+ *
+ * Because the two decisions arrive at different times. Nearly every page wants
+ * the margin, and a good number of them — a dashboard, a table, an editor —
+ * deliberately want the full width. A container that capped the width on its own
+ * would be a component whose most common use is undoing something it did.
+ */
+export declare const MPContainer: React.ForwardRefExoticComponent<MPContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/container/MPContainer.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{SHEET_PAD_X as m}from"../../internal/scale";const a={xs:"max-w-[30rem]",sm:"max-w-[37.5rem]",md:"max-w-[52.5rem]",lg:"max-w-[75rem]",xl:"max-w-[100rem]"};export const MPContainer=e.forwardRef(function({maxWidth:e="none",padded:n=!0,size:o="md",centered:t=!0,render:d,className:i,children:s,...c},l){return r({render:d,ref:l,props:{"data-mp-size":o,className:["mp-container block w-full","box-border","none"===e?"":a[e],t?"mx-auto":"",n?m[o]:"",i??""].filter(Boolean).join(" "),children:s,...c}})});

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

@@ -0,0 +1,2 @@
+export { MPContainer } from './MPContainer';
+export type { MPContainerProps } from './MPContainer';

package/dist/components/container/index.js

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

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

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { type MPPickerLabels } from '../../internal/Calendar';
+import { type MPPickerShellProps } from '../../internal/Picker';
+import type { MPWeekday } from '../../types';
+export interface MPDatePickerProps extends MPPickerShellProps {
+    /** The chosen day. Use with `onValueChange` for a controlled picker. */
+    value?: Date | null;
+    /** The day the picker starts on, for an uncontrolled one. */
+    defaultValue?: Date | null;
+    /** Called with the newly chosen day — a `Date`, not an event. `null` when cleared. */
+    onValueChange?: (value: Date | null) => void;
+    /** Whether the calendar is open. Use with `onOpenChange` to control it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Which month the calendar opens on when there is no value.
+     * @default this month
+     */
+    defaultMonth?: Date;
+    /** The earliest day that may be chosen. Day-granular — the time is ignored. */
+    minDate?: Date | null;
+    /** The latest day that may be chosen. */
+    maxDate?: Date | null;
+    /**
+     * Blocks individual days that are inside the range but still not available —
+     * weekends, holidays, a room that is already booked.
+     */
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * A BCP 47 tag deciding the month and weekday names, the order of the header's
+     * two buttons, which day the week starts on, and how the trigger writes the
+     * date. Falls back to the nearest `MPLocaleProvider`, then to the platform's
+     * own.
+     */
+    locale?: string;
+    /** Which day the week starts on. Defaults to whatever the locale says. */
+    weekStartsOn?: MPWeekday;
+    /**
+     * How the trigger writes the chosen date. Passed straight to `Intl`, so
+     * `{ dateStyle: 'full' }` and `{ year: '2-digit', month: 'narrow' }` both work.
+     *
+     * An object written inline is fine: what the picker keeps between renders is
+     * keyed on what the format *says*, not on the object that says it.
+     * @default { dateStyle: 'medium' }
+     */
+    format?: Intl.DateTimeFormatOptions;
+    /** Shown in the trigger while nothing is chosen. */
+    placeholder?: React.ReactNode;
+    /**
+     * Offers the × that empties the control.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Offers the shortcut to today in the footer.
+     * @default true
+     */
+    showTodayButton?: boolean;
+    /**
+     * Closes the popup as soon as a day is chosen.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Overrides for the words the picker says on its own behalf. Whatever is not
+     * given falls back to the translation for `locale`, and then to English.
+     */
+    labels?: Partial<MPPickerLabels>;
+    /** Identifies the field when a form is submitted, as `YYYY-MM-DD`. */
+    name?: string;
+}
+/**
+ * One day, chosen from a calendar.
+ *
+ * The trigger is a text field's shell wearing a calendar glyph, on purpose and
+ * for the reason `MPSelect`'s is: a form where the date field is a different
+ * height, radius or outline weight from the fields around it is a form that
+ * looks assembled rather than designed.
+ *
+ * What the calendar is actually for is its header. A picker that only steps a
+ * month at a time puts a birthday thirty years back a hundred and eighty clicks
+ * away, so the month name and the year are each a button that opens a grid of
+ * its own — twelve months, then twelve years at a time. Any month of the year on
+ * screen is two clicks; any year at all is three. That is MD3's own docked date
+ * picker, and this is drawn on MD3's own numbers: a 40dp cell, a filled circle
+ * for the chosen day, an outlined one for today.
+ *
+ * ## Every string comes from the platform
+ *
+ * The month names, the weekday initials, the order of the header's two buttons
+ * and the way the trigger writes the date are all `Intl`'s answers for `locale`
+ * — not a bundled table. Which day the week starts on is `Intl`'s too. The only
+ * words this library supplies are the ones `Intl` has no opinion about
+ * ("Previous month", "Today"), and those are translated for eighteen languages
+ * and overridable with `labels`.
+ */
+export declare const MPDatePicker: React.ForwardRefExoticComponent<MPDatePickerProps & React.RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,2 @@
+export { MPDatePicker } from './MPDatePicker';
+export type { MPDatePickerProps } from './MPDatePicker';

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

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

package/dist/components/date-range-picker/MPDateRangePicker.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { type MPPickerLabels } from '../../internal/Calendar';
+import { type MPPickerShellProps } from '../../internal/Picker';
+import type { MPWeekday } from '../../types';
+/**
+ * Two ends, either of which may be missing.
+ *
+ * An object rather than a `[Date, Date]` tuple, and rather than two props. A
+ * range is one value — it is chosen in one gesture, cleared in one gesture and
+ * validated as a whole — and the two names are what stop a caller writing the
+ * end into the start. Half a range is a real state: it is what the picker holds
+ * between the first click and the second.
+ */
+export interface MPDateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/** A named range offered as a shortcut beside the calendars. */
+export interface MPDateRangePreset {
+    label: React.ReactNode;
+    /**
+     * The range it stands for. A function when it depends on today, which is
+     * almost always — "the last 7 days" computed once at module scope is a range
+     * that would be wrong for anyone who left the tab open overnight.
+     */
+    value: MPDateRange | (() => MPDateRange);
+}
+export interface MPDateRangePickerProps extends MPPickerShellProps {
+    /** The chosen range. Use with `onValueChange` for a controlled picker. */
+    value?: MPDateRange | null;
+    defaultValue?: MPDateRange | null;
+    /**
+     * Always called with an object. A cleared range is `{ start: null, end: null }`
+     * rather than `null`, so a caller never has to test two shapes for "empty".
+     */
+    onValueChange?: (value: MPDateRange) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which month the left calendar opens on when there is no value. */
+    defaultMonth?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * A BCP 47 tag deciding every name the calendars draw and how the trigger
+     * writes the two ends. Falls back to the nearest `MPLocaleProvider`, then to
+     * the platform's own.
+     */
+    locale?: string;
+    weekStartsOn?: MPWeekday;
+    /** @default { dateStyle: 'medium' } */
+    format?: Intl.DateTimeFormatOptions;
+    /**
+     * How many months are on screen at once. Two is the default because a range
+     * that crosses a month boundary is the ordinary case, not the exception.
+     * @default 2
+     */
+    monthCount?: 1 | 2;
+    /** Shown in each half of the trigger while that end is unchosen. */
+    startPlaceholder?: React.ReactNode;
+    endPlaceholder?: React.ReactNode;
+    /** Shortcuts listed beside the calendars — "Last 7 days", "This month". */
+    presets?: readonly MPDateRangePreset[];
+    clearable?: boolean;
+    /**
+     * Closes the popup once both ends are chosen.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    labels?: Partial<MPPickerLabels>;
+    /**
+     * Identifies the field when a form is submitted. Two hidden inputs of the same
+     * name, so the two ends arrive as `FormData.getAll(name)`.
+     */
+    name?: string;
+}
+/**
+ * A span between two days.
+ *
+ * Two months side by side, because a range that crosses a month boundary is the
+ * ordinary case and a one-month picker makes it a two-step navigation problem.
+ * The two panels are one calendar in two halves: the left one has no forward
+ * stepper, the right one has no back stepper, and either header's month and year
+ * buttons move both.
+ *
+ * The band between the ends is drawn as the pointer moves, before the second
+ * click lands. That preview is the whole affordance — without it the first click
+ * has no visible consequence and the control looks broken for the second or so
+ * between the two.
+ *
+ * The band itself is the accent's *container* tone under its own ink, and the
+ * two ends are the accent proper. That is the same pair MD3 uses for a selected
+ * range, and it is what keeps the ends distinguishable from the days between
+ * them: a band drawn in the accent would make a nine-day range look like nine
+ * separately chosen days.
+ */
+export declare const MPDateRangePicker: React.ForwardRefExoticComponent<MPDateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;

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

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

package/dist/components/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { MPDateRangePicker } from './MPDateRangePicker';
+export type { MPDateRange, MPDateRangePickerProps, MPDateRangePreset } from './MPDateRangePicker';

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

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

package/dist/components/date-time-picker/MPDateTimePicker.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { type MPPickerLabels } from '../../internal/Calendar';
+import { type MPPickerShellProps } from '../../internal/Picker';
+import { type MPTimeUnit } from '../../internal/date';
+import type { MPWeekday } from '../../types';
+export interface MPDateTimePickerProps extends MPPickerShellProps {
+    /** The chosen moment. Use with `onValueChange` for a controlled picker. */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which month the calendar opens on when there is no value. */
+    defaultMonth?: Date;
+    /**
+     * The earliest moment that may be chosen.
+     *
+     * Unlike `MPDatePicker`'s, this one is read at **full precision**: the day it
+     * falls on stays available in the calendar and the clock's columns block the
+     * hours before it. That is what a "not before now" rule needs, and it is what
+     * a day-granular check cannot give.
+     */
+    minDate?: Date | null;
+    /** The latest moment that may be chosen, likewise at full precision. */
+    maxDate?: Date | null;
+    shouldDisableDate?: (date: Date) => boolean;
+    shouldDisableTime?: (value: Date, unit: MPTimeUnit) => boolean;
+    /**
+     * A BCP 47 tag deciding every name and number the picker draws. Falls back to
+     * the nearest `MPLocaleProvider`, then to the platform's own.
+     */
+    locale?: string;
+    weekStartsOn?: MPWeekday;
+    /**
+     * How the trigger writes the chosen moment. Passed straight to `Intl`.
+     * @default { dateStyle: 'medium', timeStyle: 'short' }
+     */
+    format?: Intl.DateTimeFormatOptions;
+    /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
+    hour12?: boolean;
+    showSeconds?: boolean;
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+    placeholder?: React.ReactNode;
+    clearable?: boolean;
+    /**
+     * Offers the shortcut to this moment in the footer.
+     * @default true
+     */
+    showNowButton?: boolean;
+    /**
+     * Closes the popup as soon as a day is chosen.
+     *
+     * `false` here and `true` on `MPDatePicker`, because a moment is a day *and* a
+     * time and closing on the first of the two would leave the second unanswered.
+     * @default false
+     */
+    closeOnSelect?: boolean;
+    labels?: Partial<MPPickerLabels>;
+    /** Identifies the field when a form is submitted, as `YYYY-MM-DDTHH:MM`. */
+    name?: string;
+}
+/**
+ * A day and a time, in one popup.
+ *
+ * Not a date picker that grew a clock and not a time picker that grew a
+ * calendar: the two panels sit side by side at exactly the same height — seven
+ * rows of cells each, which is why the calendar's grid and the clock's columns
+ * share the `--_mp-cell` ladder — so the popup is one rectangle rather than two
+ * of different sizes pushed together.
+ *
+ * The bounds do more work here than anywhere else. `minDate` is read at full
+ * precision, so a minimum of 09:30 on the 27th leaves the 27th selectable in the
+ * calendar and greys out the morning in the clock.
+ */
+export declare const MPDateTimePicker: React.ForwardRefExoticComponent<MPDateTimePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/date-time-picker/MPDateTimePicker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{MPButton as l}from"../button/MPButton";import{MPIcon as a}from"../icon/MPIcon";import{CalendarIcon as n}from"../../constants/icons";import{MPCalendar as r,MPTimeGrid as i}from"../../internal/Calendar";import{FOOTER_SIZE as s,MPPickerDivider as c,MPPickerFooter as d,MPPickerShell as m,useDisplaySamples as u}from"../../internal/Picker";import{useMPLocale as h,useMPMessages as p}from"../../internal/locale";import{CONTROL_ICON as f}from"../../internal/scale";import{formatDate as S,isDayOutside as b,isHour12 as g,isValidDate as v,localeWeekStart as D,mergeDateAndTime as x,startOfDay as C,startOfMonth as k,timeUnitSpan as w,toISODateTime as z,today as O,withPlaceholder as y,withTime as T}from"../../internal/date";export const MPDateTimePicker=t.forwardRef(function({value:M,defaultValue:P,onValueChange:j,open:I,defaultOpen:N,onOpenChange:V,defaultMonth:B,minDate:R,maxDate:E,shouldDisableDate:F,shouldDisableTime:q,locale:A,weekStartsOn:G,format:H,hour12:J,showSeconds:K=!1,hourStep:L=1,minuteStep:Q=1,secondStep:U=1,placeholder:W,clearable:X=!1,showNowButton:Y=!0,closeOnSelect:Z=!1,labels:$,name:_,size:ee="md",color:oe="primary",readOnly:te=!1,disabled:le=!1,startIcon:ae,...ne},re){const ie=h(A),se=p("picker",ie,$),ce=G??D(ie),de=J??g(ie),[me,ue]=t.useState(P??null),he=void 0!==M?M:me,[pe,fe]=t.useState(N??!1),Se=I??pe,[be,ge]=t.useState(()=>k(v(he)?he:B??O()));t.useEffect(()=>{Se&&ge(k(v(he)?he:B??O()))},[Se]);const ve=e=>{e&&(te||le)||(void 0===I&&fe(e),V?.(e))},De=e=>{void 0===M&&ue(e),j?.(e)},xe=t.useCallback((e,o)=>{const[t,l]=w(o,e),a=C(e).getTime();return!!(v(R)&&a+1e3*l<R.getTime())||(!!(v(E)&&a+1e3*t>E.getTime())||(q?.(e,o)??!1))},[R,E,q]),Ce=H??{dateStyle:"medium",timeStyle:"short",hour12:de},ke=new Date,we=T(ke,{seconds:K?ke.getSeconds():0}),ze=b(we,R,E)||(F?.(we)??!1)||xe(we,"second"),Oe=y(u(ie,Ce),W);return e(m,{...ne,slug:"date-time-picker",size:ee,color:oe,readOnly:te,disabled:le,triggerRef:re,startIcon:void 0===ae?e(a,{icon:n,size:f[ee]}):ae,display:v(he)?S(he,ie,Ce):W??"",samples:Oe,empty:!v(he),clearable:X,onClear:()=>De(null),open:Se,onOpenChange:ve,labels:se,hiddenValues:_?[{name:_,value:v(he)?z(he,K):""}]:void 0,children:o("div",{className:"flex flex-col gap-1.5",children:[o("div",{className:"flex items-stretch gap-2",children:[e(r,{size:ee,color:oe,locale:ie,weekStartsOn:ce,month:be,onMonthChange:ge,selected:[he],onSelect:e=>{const o=v(he)?x(e,he):C(e);De(o),ge(k(o)),Z&&ve(!1)},minDate:R,maxDate:E,shouldDisableDate:F,labels:se,autoFocus:!0}),e(c,{}),e(i,{size:ee,locale:ie,value:v(he)?he:null,referenceDate:v(he)?he:O(),onChange:De,hour12:de,showSeconds:K,hourStep:L,minuteStep:Q,secondStep:U,shouldDisableTime:xe,labels:se})]}),o(d,{children:[X?e(l,{variant:"text",size:s[ee],color:oe,onClick:()=>{De(null),ve(!1)},children:se.clear}):null,Y?e(l,{variant:"text",size:s[ee],color:oe,disabled:ze,onClick:()=>{De(we),ge(k(we))},children:se.now}):null,e(l,{variant:"filled",size:s[ee],color:oe,onClick:()=>ve(!1),children:se.done})]})]})})});

package/dist/components/date-time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { MPDateTimePicker } from './MPDateTimePicker';
+export type { MPDateTimePickerProps } from './MPDateTimePicker';

package/dist/components/date-time-picker/index.js

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