material-plus-ui 0.0.1 → 1.0.0

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

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import type { MPColorFormat } from '../../internal/color';
+import type { MPStyleProps } from '../../types';
+/** The names for the parts of the picker that have no text on them. */
+export interface MPColorPickerLabels {
+    /** The saturation/brightness square. */
+    area: string;
+    /** The hue rail beside it. */
+    hue: string;
+    /** The opacity rail, when `alpha` is on. */
+    alpha: string;
+    /** The field the value can be typed into. */
+    value: string;
+    /** The grid of ready-made colours. */
+    swatches: string;
+    /** The × that empties the control. */
+    clear: string;
+    /** What the trigger reads before anything has been chosen. */
+    empty: string;
+}
+export interface MPColorPickerProps extends MPStyleProps {
+    /** The colour, as a CSS string. Pass it to drive the picker yourself. */
+    value?: string;
+    /** Where an uncontrolled picker starts. @default '#00639b' */
+    defaultValue?: string;
+    /** Called with the new colour, written in `format`. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Which notation the value is written in on the way out.
+     * @default 'hex'
+     */
+    format?: MPColorFormat;
+    /**
+     * Offers an opacity rail, and lets the value carry a fourth channel.
+     * @default false
+     */
+    alpha?: boolean;
+    /**
+     * The ready-made colours under the panel. `false` draws none; an array of CSS
+     * colour strings replaces the built-in set.
+     */
+    swatches?: readonly string[] | false;
+    /**
+     * Draws the panel in the page instead of in a popup, with no trigger.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * The field under the panel the value can be typed into.
+     * @default true
+     */
+    editable?: boolean;
+    /** Label in the outline's notch, or above the panel when `inline`. */
+    label?: React.ReactNode;
+    /** The line under the control. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /**
+     * The message under the control. Its presence is also what puts the picker into
+     * its error state.
+     */
+    errorMessage?: React.ReactNode;
+    /** Marks the control required, both to assistive technology and to the label. */
+    required?: boolean;
+    /** Greys the control out and stops it opening. */
+    disabled?: boolean;
+    /** Shows the colour without allowing it to change, and stays focusable. */
+    readOnly?: boolean;
+    /** Offers the × that empties the control. @default false */
+    clearable?: boolean;
+    /** Name of the form control. Submits the value as written in `format`. */
+    name?: string;
+    /** Whether the popup is open. Use with `onOpenChange` for a controlled popup. */
+    open?: boolean;
+    /** Whether it starts open. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Overrides for the accessible names, one at a time. */
+    labels?: Partial<MPColorPickerLabels>;
+    /**
+     * The id put on the trigger and pointed at by the label. Derived from `name`
+     * when omitted, and generated when there is no name either.
+     */
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A colour, chosen by eye.
+ *
+ * A saturation square with a hue rail beside it — the arrangement every design
+ * tool has settled on, because it is the one that puts every colour of a hue
+ * within a single movement of the pointer. `alpha` adds a third rail, `format`
+ * decides which notation comes back out, and `swatches` puts the handful of
+ * colours a product actually uses one click away.
+ *
+ * The trigger is `MPTextField`'s shell wearing a swatch, so a picker in a form is
+ * the same object as the fields around it — the same notched outline, the same
+ * label in the notch, the same supporting text underneath.
+ *
+ * ## Why the panel's state is HSV
+ *
+ * It never leaves that model, which is what keeps the hue rail still while the
+ * pointer is in the black corner: through RGB, every shade of black is the same
+ * colour and the rail would snap to red the moment the square bottomed out.
+ *
+ * ## This is not the theme
+ *
+ * A colour chosen here is *data* — a tag's colour, a calendar's, a project's. It
+ * is not `--mp-source-color`, and the picker deliberately does not offer the
+ * scheme's four families as swatches: those are roles that mean something, and
+ * they move when somebody re-themes the application.
+ */
+export declare const MPColorPicker: React.ForwardRefExoticComponent<MPColorPickerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Field as n}from"@base-ui/react/field";import{Popover as l}from"@base-ui/react/popover";import{MPIcon as t}from"../icon/MPIcon";import{CheckIcon as o,CloseIcon as i}from"../../constants/icons";import{MPFieldLabel as s,MPFieldOutline as u}from"../../internal/FieldOutline";import{MPStateLayer as c}from"../../internal/StateLayer";import{MPSupportingText as d}from"../../internal/SupportingText";import{CONTROL_ICON as p,META_TEXT as h,PROSE_TEXT as f,STACK_GAP as m,hasContent as g}from"../../internal/scale";import{FADE as v,PORTAL_LAYER as b}from"../../internal/surface";import{CHECKER_BACKGROUND as x,DEFAULT_SWATCHES as y,clamp as w,cssColor as N,formatColor as k,parseColor as C,readableInk as j}from"../../internal/color";const _={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"No colour"},z={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},$={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},M={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},P={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},T={xs:12,sm:14,md:16,lg:18,xl:20},I={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"}},O="border-mp-outline-variant relative overflow-hidden border",S=["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 A(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:w((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:w((e.clientY-a.top)/a.height,0,1)}}function B(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function D({hsv:r,alphaValue:n,onChange:l,text:i,onTextChange:s,withAlpha:u,swatches:c,editable:d,size:p,inert:f,labels:m}){const g=T[p],v=-g/2,b=N({h:r.h,s:100,v:100}),y=N(r),_=e=>({onPointerDown:a=>{f||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!f&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),I=(e,a,r,n)=>({role:"slider",tabIndex:f?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":f||void 0,onKeyDown:e=>{const a=B(e);!f&&a&&0!==a.x&&(e.preventDefault(),n(a.x))}}),D=["outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ");return a("div",{className:`mp-color-picker__panel flex flex-col ${z[p]} ${P[p]}`,children:[e("div",{..._(e=>{const{x:a,y:t}=A(e);l({hsv:{h:r.h,s:100*a,v:100*(1-t)},alpha:n})}),role:"slider",tabIndex:f?-1:0,"aria-label":m.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":f||void 0,onKeyDown:e=>{const a=B(e);!f&&a&&(e.preventDefault(),l({hsv:{h:r.h,s:w(r.s+a.x,0,100),v:w(r.v+a.y,0,100)},alpha:n}))},className:[O,"rounded-mp-sm",$[p],D,f?"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:S,style:{width:g,height:g,left:`${r.s}%`,top:100-r.v+"%",marginLeft:v,marginTop:v,backgroundColor:y}})}),e("div",{..._(e=>l({hsv:{...r,h:360*A(e).x},alpha:n})),...I(m.hue,r.h,360,e=>l({hsv:{...r,h:(r.h+2*e+360)%360},alpha:n})),className:[O,"rounded-mp-full",M[p],D,f?"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:S,style:{width:g,height:g,left:r.h/360*100+"%",top:"50%",marginLeft:v,marginTop:v,backgroundColor:b}})}),u?a("div",{..._(e=>l({hsv:r,alpha:A(e).x})),...I(m.alpha,100*n,100,e=>l({hsv:r,alpha:w(n+e/100,0,1)})),className:[O,"rounded-mp-full",M[p],D,f?"cursor-default":"cursor-pointer touch-none"].join(" "),style:x,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${N(r,0)}, ${y})`}}),e("span",{className:S,style:{width:g,height:g,left:100*n+"%",top:"50%",marginLeft:v,marginTop:v,backgroundColor:N(r,n)}})]}):null,d?a("div",{className:`flex items-center ${P[p]}`,children:[e("span",{"aria-hidden":"true",className:"border-mp-outline-variant shrink-0 rounded-full border",style:{width:g+8,height:g+8,...x},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:N(r,n)}})}),e("input",{type:"text",value:i,readOnly:f,spellCheck:!1,autoComplete:"off","aria-label":m.value,onChange:e=>s(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",h,"focus-visible:border-mp-primary outline-none"].join(" ")})]}):null,c&&c.length>0?e("div",{role:"group","aria-label":m.swatches,className:"grid grid-cols-8 gap-1",children:c.map(a=>{const i=C(a),s=null!==i&&k(i.hsv,i.alpha,"hex")===k(r,n,"hex");return e("button",{type:"button",disabled:f,"aria-label":a,"aria-pressed":s,onClick:()=>{i&&l(i)},className:["border-mp-outline-variant flex aspect-square items-center justify-center","rounded-full border",D,f?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:a},children:s&&i?e("span",{style:{color:j(i.hsv)},children:e(t,{icon:o,size:12})}):null},a)})}):null]})}const L={h:202,s:100,v:61};export const MPColorPicker=r.forwardRef(function({value:o,defaultValue:w="#00639b",onValueChange:j,format:z="hex",alpha:$=!1,swatches:M=y,inline:P=!1,editable:T=!0,label:O,description:S,errorMessage:A,required:B=!1,disabled:R=!1,readOnly:q=!1,clearable:V=!1,name:K,open:F,defaultOpen:E=!1,onOpenChange:H,labels:U,size:W="md",fullWidth:X=!1,id:Y,className:G,style:J},Q){const Z=r.useMemo(()=>({..._,...U}),[U]),ee=g(A),ae=I[W],re=r.useId(),ne=Y??`mp-color-picker-${K??re}`,[le,te]=r.useState(w),oe=o??le,[ie,se]=r.useState(E),ue=F??ie,[ce,de]=r.useState(()=>C(oe)??{hsv:L,alpha:1}),[pe,he]=r.useState(()=>oe),fe=k(ce.hsv,$?ce.alpha:1,z),me=""===oe;r.useEffect(()=>{const e=C(oe);e?k(e.hsv,$?e.alpha:1,z)!==fe&&(he(oe),de(e)):he(oe)},[oe,fe,$,z]);const ge=R||q,ve=V&&!ge&&!me,be=(e,a)=>{de(e);const r=k(e.hsv,$?e.alpha:1,z);he(a??r),void 0===o&&te(r),j?.(r)},xe=e(D,{hsv:ce.hsv,alphaValue:ce.alpha,onChange:be,text:pe,onTextChange:e=>{he(e);const a=C(e);a&&be(a,e)},withAlpha:$,swatches:M,editable:T,size:W,inert:ge,labels:Z}),ye=e("span",{"aria-hidden":"true",className:"border-mp-outline-variant block size-5 shrink-0 rounded-full border",style:x,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:me?"transparent":N(ce.hsv,$?ce.alpha:1)}})}),we=K?e("input",{type:"hidden",name:K,value:me?"":fe}):null;return P?a("div",{ref:Q,"data-mp-size":W,className:["mp-color-picker flex flex-col",m[W],G??""].filter(Boolean).join(" "),style:J,children:[g(O)?a("span",{className:[h,R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[O,B?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,xe,g(A)?e("span",{className:`${h} text-mp-error`,children:A}):g(S)?e("span",{className:`${h} text-mp-on-surface-variant`,children:S}):null,we]}):a(n.Root,{ref:Q,disabled:R,invalid:ee,"data-mp-size":W,className:["mp-color-picker group flex-col align-top",X?"flex w-full":"inline-flex w-fit",G??""].filter(Boolean).join(" "),style:J,children:[a(l.Root,{open:ue,onOpenChange:e=>{void 0===F&&se(e),H?.(e)},children:[a("div",{className:"relative w-full",children:[a(l.Trigger,{id:ne,disabled:R,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",ae.padding,ve?"pe-10":"",ae.height,f[W],R?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(q?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[ye,e("span",{className:["min-w-0 flex-1 truncate text-start",me?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:me?Z.empty:fe})]}),ve?a("button",{type:"button","aria-label":Z.clear,onClick:()=>{void 0===o&&te(""),he(""),j?.("")},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","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(c,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(t,{icon:i,size:p[W]})]}):null,e(u,{label:O,required:B}),g(O)?e(s,{size:W,label:O,required:B,htmlFor:ne}):null]}),e(l.Portal,{children:e(l.Positioner,{className:b,sideOffset:4,align:"start",children:e(l.Popup,{className:["mp-color-picker__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container","text-mp-on-surface p-3 outline-none",f[W],v].join(" "),children:xe})})})]}),e(d,{description:S,errorMessage:A,className:ae.padding}),we]})});

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

@@ -0,0 +1,2 @@
+export { MPColorPicker } from './MPColorPicker';
+export type { MPColorPickerLabels, MPColorPickerProps } from './MPColorPicker';

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

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

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

@@ -0,0 +1,147 @@
+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. */
+    placeholder?: string;
+    /**
+     * Label in the outline's notch. Always drawn there rather than floating over
+     * the placeholder, so a combobox and a text field sit at the same height in a
+     * form.
+     */
+    label?: React.ReactNode;
+    /** 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. @default 'Clear' */
+    clearLabel?: 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.
+     * @default 'Open'
+     */
+    openLabel?: string;
+    /** Accessible name of a chip's remove button. Receives the chip's label. */
+    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. Derived from `name` when
+     * omitted, and generated when there is no name either.
+     */
+    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, description, errorMessage, startIcon, size, fullWidth, required, disabled, readOnly, name, open, defaultOpen, onOpenChange, clearLabel, openLabel, 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 p}from"../../internal/FieldOutline";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as h}from"../../internal/SupportingText";import{CONTROL_ICON as f,PROSE_TEXT as b,hasContent as g}from"../../internal/scale";import{FADE as x,PORTAL_LAYER as v}from"../../internal/surface";const y={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"}},C={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"},N={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function w(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:L,multiple:j,value:I,defaultValue:S,onValueChange:z,onInputValueChange:O,allowCustom:M=!0,customLabel:V,clearable:$=!1,emptyMessage:P="No matches",limit:q,placeholder:A,label:R,description:T,errorMessage:k,startIcon:_,size:F="md",fullWidth:E=!1,required:B=!1,disabled:G=!1,readOnly:H=!1,name:W,open:D,defaultOpen:J,onOpenChange:K,clearLabel:Q="Clear",openLabel:U="Open",removeLabel:X=e=>`Remove ${e}`,inputRef:Y,id:Z,className:ee,style:ae}){const le=g(k),ie=!0===j,ne=y[F],te=l.useId(),re=Z??`mp-combobox-${W??te}`,oe=l.useMemo(()=>L.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[L]),[se,me]=l.useState(()=>w(S)),ce=void 0===I?se:w(I),[ue,pe]=l.useState(""),de=l.useCallback(e=>oe.find(a=>a.value===e)??{value:e,label:String(e),custom:!0},[oe]),he=ue.trim(),fe=he.toLocaleLowerCase(),be=""===he||oe.some(e=>e.label.toLocaleLowerCase()===fe||String(e.value).toLocaleLowerCase()===fe)||ce.some(e=>String(e).toLocaleLowerCase()===fe),ge=!M||H||G||be?null:he,xe=l.useMemo(()=>null===ge?oe:[...oe,{value:ge,label:ge,custom:!0}],[oe,ge]),ve=ie?ce.map(de):ce.length>0?de(ce[0]):null;const ye=["min-w-0 flex-1 self-stretch bg-transparent font-[inherit] text-inherit outline-none","placeholder:text-mp-on-surface-variant",G?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Ce=["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(" "),Ne=a=>e(i.Input,{ref:Y,id:re,placeholder:A,className:ie?`${ye} min-w-16 ${a?"ms-1.5":""}`:ye});return a(n.Root,{disabled:G,invalid:le,"data-mp-size":F,className:["mp-combobox group flex-col align-top",E?"flex w-full":"inline-flex w-fit",ee??""].filter(Boolean).join(" "),style:ae,children:[a(i.Root,{name:W,items:xe,multiple:ie,value:ve,onValueChange:e=>{!function(e){void 0===I&&me(e),z?.(ie?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{pe(e),O?.(e)},open:D,defaultOpen:J,onOpenChange:e=>K?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:q,disabled:G,readOnly:H,required:B,children:[a("div",{className:"relative w-full",children:[a(i.InputGroup,{className:["relative flex w-full items-center gap-2",ne.padding,ie?C[F]:ne.height,b[F],G?"cursor-default":"cursor-text"].join(" "),children:[_?e("span",{className:["flex shrink-0 items-center",G?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:_}):null,ie?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:le?"outlined":"tonal",color:le?"error":"primary",size:N[F],disabled:G,endIcon:H||G?null:e(i.ChipRemove,{"aria-label":X(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))),Ne(n.length>0)]})})}):Ne(!1),$&&!H?a(i.Clear,{"aria-label":Q,className:Ce,children:[e(d,{}),e(r,{icon:c,size:f[F]})]}):null,a(i.Trigger,{"aria-label":U,className:Ce,children:[e(d,{}),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:f[F]})})]})]}),e(p,{label:R,required:B}),g(R)?e(u,{size:F,label:R,required:B,htmlFor:re}):null]}),e(i.Portal,{children:e(i.Positioner,{className:v,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",b[F],x].join(" "),children:[e(i.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:P}),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?V?V(l.label):`Add “${l.label}”`:l.label})]},`${l.custom?"custom:":""}${String(l.value)}`)})]})})})]}),e(h,{description:T,errorMessage:k,className:ne.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/date-picker/MPDatePicker.d.ts

@@ -0,0 +1,95 @@
+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.
+     * @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}from"../../internal/Picker";import{useMPLocale as m,useMPMessages as d}from"../../internal/locale";import{CONTROL_ICON as u}from"../../internal/scale";import{displaySamples as p,formatDate as f,isDayOutside as h,isValidDate as b,localeWeekStart as x,mergeDateAndTime as v,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=d("picker",Y,G),$=E??x(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)?v(e,ae):D(e);se(a),re(g(a)),A&&ie(!1)},me=y(),de=h(me,I,V)||(B?.(me)??!1),ue=q||T,pe=l.useMemo(()=>C(p(Y,F),N),[Y,F,N]);return e(c,{...W,slug:"date-picker",size:J,color:K,readOnly:L,disabled:Q,name:H,triggerRef:X,startIcon:U??e(t,{icon:n,size:u[J]}),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:de,onClick:()=>ce(me),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}from"../../internal/Picker";import{useMPLocale as m,useMPMessages as d}from"../../internal/locale";import{MPWidthSizer as p}from"../../internal/WidthSizer";import{CONTROL_ICON as h,META_TEXT as f}from"../../internal/scale";import{addMonths as v,compareDay as x,displaySamples 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=m(W),ae=d("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=v(xe,1),De=2===q,ke=n.useMemo(()=>g(ne,_),[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]=x(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,name:Q,triggerRef:le,startIcon:Z??e(t,{icon:s,size:h[T]}),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(p,{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:h[T]})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ce(ce,G)}),e(p,{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(v(e,-1)),showPreviousButton:!1}):null]}),J||null!==Oe?l(c,{children:[null!==Oe?e("span",{className:`text-mp-on-surface-variant me-auto ${f}`,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 m,MPPickerShell as d}from"../../internal/Picker";import{useMPLocale as u,useMPMessages as h}from"../../internal/locale";import{CONTROL_ICON as p}from"../../internal/scale";import{displaySamples as f,formatDate as S,isDayOutside as b,isHour12 as g,isValidDate as D,localeWeekStart as v,mergeDateAndTime as x,startOfDay as C,startOfMonth as k,timeUnitSpan as w,toISODateTime as z,today as O,withPlaceholder as y,withTime as M}from"../../internal/date";export const MPDateTimePicker=t.forwardRef(function({value:T,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=u(A),se=h("picker",ie,$),ce=G??v(ie),me=J??g(ie),[de,ue]=t.useState(P??null),he=void 0!==T?T:de,[pe,fe]=t.useState(N??!1),Se=I??pe,[be,ge]=t.useState(()=>k(D(he)?he:B??O()));t.useEffect(()=>{Se&&ge(k(D(he)?he:B??O()))},[Se]);const De=e=>{e&&(te||le)||(void 0===I&&fe(e),V?.(e))},ve=e=>{void 0===T&&ue(e),j?.(e)},xe=t.useCallback((e,o)=>{const[t,l]=w(o,e),a=C(e).getTime();return!!(D(R)&&a+1e3*l<R.getTime())||(!!(D(E)&&a+1e3*t>E.getTime())||(q?.(e,o)??!1))},[R,E,q]),Ce=H??{dateStyle:"medium",timeStyle:"short",hour12:me},ke=new Date,we=M(ke,{seconds:K?ke.getSeconds():0}),ze=b(we,R,E)||(F?.(we)??!1)||xe(we,"second"),Oe=t.useMemo(()=>y(f(ie,Ce),W),[ie,Ce,W]);return e(d,{...ne,slug:"date-time-picker",size:ee,color:oe,readOnly:te,disabled:le,name:_,triggerRef:re,startIcon:ae??e(a,{icon:n,size:p[ee]}),display:D(he)?S(he,ie,Ce):W??"",samples:Oe,empty:!D(he),clearable:X,onClear:()=>ve(null),open:Se,onOpenChange:De,labels:se,hiddenValues:_?[{name:_,value:D(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=D(he)?x(e,he):C(e);ve(o),ge(k(o)),Z&&De(!1)},minDate:R,maxDate:E,shouldDisableDate:F,labels:se,autoFocus:!0}),e(c,{}),e(i,{size:ee,locale:ie,value:D(he)?he:null,referenceDate:D(he)?he:O(),onChange:ve,hour12:me,showSeconds:K,hourStep:L,minuteStep:Q,secondStep:U,shouldDisableTime:xe,labels:se})]}),o(m,{children:[X?e(l,{variant:"text",size:s[ee],color:oe,onClick:()=>{ve(null),De(!1)},children:se.clear}):null,Y?e(l,{variant:"text",size:s[ee],color:oe,disabled:ze,onClick:()=>{ve(we),ge(k(we))},children:se.now}):null,e(l,{variant:"filled",size:s[ee],color:oe,onClick:()=>De(!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";