material-plus-ui 1.3.1 → 1.5.0

package/dist/components/text-field/MPTextField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{MPIcon as a}from"../icon/MPIcon.js";import{MPFieldLabel as r,MPFieldOutline as l,useFloatingLabel as i}from"../../internal/FieldOutline.js";import{VisibilityIcon as s,VisibilityOffIcon as d}from"../../constants/icons.js";import{useMPLocale as p,useMPMessages as c}from"../../internal/locale.js";import{TEXT_FIELD as m}from"../../internal/messages/text-field.js";const u={xs:{padding:"px-2",control:"py-1.5",text:"text-mp-body-medium",icon:16},sm:{padding:"px-3",control:"py-2.5",text:"text-mp-body-medium",icon:18},md:{padding:"px-4",control:"py-4",text:"text-mp-body-large",icon:20},lg:{padding:"px-4",control:"py-5",text:"text-mp-body-large",icon:22},xl:{padding:"px-5",control:"py-6",text:"text-mp-body-large",icon:24}};export const MPTextField=/*@__PURE__*/o.forwardRef(function({value:f,name:x,type:b="text",placeholder:g,autoComplete:y,label:h,floatingLabel:v=!0,onChange:w,onFormReset:j,onSubmit:C,errorMessage:k="",required:z=!1,fullWidth:E=!1,readOnly:M=!1,autoFocus:N=!1,size:F="md",disabled:P=!1,disableEnterKey:S=!1,rows:q,maxLength:D,startIcon:L,resizable:R=!1,id:I,locale:O,passwordLabels:B},K){const U=p(O),_=c(m,U,B),T=o.useRef(null),[W,$]=o.useState(!1),[A,G]=o.useState(!1),[H,J]=o.useState(f),Q=o.useId(),V=I??Q,X=!!q,Y=k.length>0,Z=u[F],ee=A?H:f,{shrunk:te,focusProps:oe}=i({floating:v&&!!h,filled:ee.length>0,pinned:!!L}),ne=o.useCallback(e=>{T.current=e,"function"==typeof K?K(e):K&&(K.current=e)},[K]),ae=e=>{e.preventDefault()};return o.useEffect(()=>{A||J(f)},[f,A]),o.useEffect(()=>{N&&!window.matchMedia("(max-width: 599.95px)").matches&&T.current?.focus()},[]),t(n.Root,{className:["mp-text-field group relative",E?"w-full":"inline-block","align-top"].join(" "),disabled:P,invalid:Y,"data-mp-size":F,...oe,children:[t("div",{className:["relative flex w-full items-center gap-2",Z.padding,X?"py-2":""].filter(Boolean).join(" "),children:[e(l,{label:h,required:z,notched:te}),L?e("span",{className:"text-mp-on-surface-variant group-data-disabled:text-mp-on-surface/38 flex shrink-0 items-center",children:L}):null,e(n.Control,{render:X?e("textarea",{rows:q}):e("input",{}),id:V,name:x,type:X?void 0:W?"text":b,required:z,readOnly:M,disabled:P,autoComplete:y,placeholder:te?g:void 0,maxLength:D,value:ee,ref:ne,className:[`${Z.text} text-mp-on-surface w-full min-w-0 flex-1`,"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary",Z.control,X?"py-0":"",X&&R?"resize-y":"resize-none","group-data-disabled:text-mp-on-surface/38","placeholder:text-mp-on-surface-variant group-data-disabled:placeholder:text-mp-on-surface/38"].filter(Boolean).join(" "),onChange:e=>{j?.();const t=e.target.value;A&&J(t),w?.(t)},onCompositionStart:()=>{G(!0),J(f)},onCompositionUpdate:e=>{J(e.target.value)},onCompositionEnd:e=>{G(!1);const t=e.target.value;j?.(),w?.(t),J(t)},onKeyDown:e=>{if("Enter"===e.key){if(function(e){const t=e.nativeEvent;return t.isComposing||229===t.keyCode}(e))return;C?.(),X&&!S||e.preventDefault()}}}),"password"!==b||X?null:e("button",{type:"button","aria-label":W?_.hidePassword:_.showPassword,onClick:()=>$(e=>!e),onMouseDown:ae,onMouseUp:ae,disabled:P,className:["text-mp-on-surface-variant -mr-1 flex shrink-0 items-center justify-center","cursor-pointer appearance-none border-0 bg-transparent p-1 font-[inherit]","rounded-full outline-none","hover:text-mp-on-surface focus-visible:text-mp-primary","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:e(a,{icon:W?s:d,size:Z.icon})}),h?e(r,{size:F,label:h,required:z,htmlFor:V,shrunk:te,multiline:X}):null]}),Y?e(n.Error,{match:!0,className:["mp-text-field__support text-mp-body-small text-mp-error mt-1 block",Z.padding,"group-data-disabled:text-mp-on-surface/38"].join(" "),children:k}):null]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{MPIcon as a}from"../icon/MPIcon.js";import{MPFieldLabel as r,MPFieldOutline as i,useFloatingLabel as l}from"../../internal/FieldOutline.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{VisibilityIcon as d,VisibilityOffIcon as p}from"../../constants/icons.js";import{useMPLocale as u,useMPMessages as c}from"../../internal/locale.js";import{TEXT_FIELD as m}from"../../internal/messages/text-field.js";const f={xs:{padding:"px-2",control:"py-1.5",text:"text-mp-body-medium",icon:16},sm:{padding:"px-3",control:"py-2.5",text:"text-mp-body-medium",icon:18},md:{padding:"px-4",control:"py-4",text:"text-mp-body-large",icon:20},lg:{padding:"px-4",control:"py-5",text:"text-mp-body-large",icon:22},xl:{padding:"px-5",control:"py-6",text:"text-mp-body-large",icon:24}};export const MPTextField=/*@__PURE__*/o.forwardRef(function({value:x,name:b,type:g="text",placeholder:y,autoComplete:h,label:v,floatingLabel:w=!0,onChange:j,onFormReset:C,onSubmit:k,errorMessage:z="",required:M=!1,fullWidth:N=!1,readOnly:E=!1,autoFocus:S=!1,size:F="md",disabled:P=!1,disableEnterKey:q=!1,rows:D,maxLength:L,startIcon:R,resizable:B=!1,id:I,locale:O,passwordLabels:K,className:T,style:U},$){const _=u(O),W=c(m,_,K),A=o.useRef(null),[G,H]=o.useState(!1),[J,Q]=o.useState(!1),[V,X]=o.useState(x),Y=o.useId(),Z=I??Y,ee=!!D,te=z.length>0,oe=f[F],ne=J?V:x,{shrunk:ae,focusProps:re}=l({floating:w&&!!v,filled:ne.length>0,pinned:!!R}),ie=o.useCallback(e=>{A.current=e,"function"==typeof $?$(e):$&&($.current=e)},[$]),le=e=>{e.preventDefault()};return o.useEffect(()=>{J||X(x)},[x,J]),o.useEffect(()=>{S&&!window.matchMedia("(max-width: 599.95px)").matches&&A.current?.focus()},[]),t(n.Root,{className:["mp-text-field group relative",N?"w-full":"inline-block","align-top",T??""].filter(Boolean).join(" "),style:U,disabled:P,invalid:te,"data-mp-size":F,...re,children:[t("div",{className:["relative flex w-full items-center gap-2",oe.padding,ee?"py-2":""].filter(Boolean).join(" "),children:[e(i,{label:v,required:M,notched:ae}),R?e("span",{className:"text-mp-on-surface-variant group-data-disabled:text-mp-on-surface/38 flex shrink-0 items-center",children:R}):null,e(n.Control,{render:ee?e("textarea",{rows:D}):e("input",{}),id:Z,name:b,type:ee?void 0:G?"text":g,required:M,readOnly:E,disabled:P,autoComplete:h,placeholder:ae?y:void 0,maxLength:L,value:ne,ref:ie,className:[`${oe.text} text-mp-on-surface w-full min-w-0 flex-1`,"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary",oe.control,ee?"py-0":"",ee&&B?"resize-y":"resize-none","group-data-disabled:text-mp-on-surface/38","placeholder:text-mp-on-surface-variant group-data-disabled:placeholder:text-mp-on-surface/38"].filter(Boolean).join(" "),onChange:e=>{C?.();const t=e.target.value;J&&X(t),j?.(t)},onCompositionStart:()=>{Q(!0),X(x)},onCompositionUpdate:e=>{X(e.target.value)},onCompositionEnd:e=>{Q(!1);const t=e.target.value;C?.(),j?.(t),X(t)},onKeyDown:e=>{if("Enter"===e.key){if(function(e){const t=e.nativeEvent;return t.isComposing||229===t.keyCode}(e))return;k?.(),ee&&!q||e.preventDefault()}}}),"password"!==g||ee?null:e("button",{type:"button","aria-label":G?W.hidePassword:W.showPassword,onClick:()=>H(e=>!e),onMouseDown:le,onMouseUp:le,disabled:P,className:["text-mp-on-surface-variant -me-1 flex shrink-0 items-center justify-center","cursor-pointer appearance-none border-0 bg-transparent p-1 font-[inherit]","rounded-full","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","hover:text-mp-on-surface focus-visible:text-mp-primary","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:e(a,{icon:G?d:p,size:oe.icon})}),v?e(r,{size:F,label:v,required:M,htmlFor:Z,shrunk:ae,multiline:ee}):null]}),e(s,{errorMessage:z,className:`mp-text-field__support mt-1 ${oe.padding}`})]})});

package/dist/components/text-link/MPTextLink.d.ts

@@ -53,9 +53,15 @@ export interface MPTextLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'
     /**
      * What a screen reader hears after the label when `newTab` is on. A link
      * without it says nothing of its own, so this changes nothing there.
-     * @default 'Opens in a new tab'
+     *
+     * Defaults to the wording in `locale`.
      */
     newTabLabel?: string;
+    /**
+     * Which language that wording is in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /**
      * Renders something other than an `<a>` — the `Link` a router brings, most of
      * the time. `href` still goes through, so `render={<NextLink href="…" />}`

package/dist/components/text-link/MPTextLink.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as n,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{useRender as i}from"@base-ui/react/use-render";import{MPIcon as t}from"../icon/MPIcon.js";import{ExternalLinkIcon as l,LinkIcon as s}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{PROSE_TEXT as c}from"../../internal/scale.js";import{VISUALLY_HIDDEN as m}from"../../internal/visually-hidden.js";const p={always:"[&.mp-link]:underline",hover:"[&.mp-link]:no-underline [&.mp-link]:hover:underline",none:"[&.mp-link]:no-underline"},d=/*@__PURE__*/["[&.mp-link]:[text-underline-offset:0.2em]","[&.mp-link]:[text-decoration-thickness:0.08em]","[&.mp-link]:[text-decoration-color:color-mix(in_oklab,currentColor_45%,transparent)]","[&.mp-link]:hover:[text-decoration-color:currentColor]"].join(" ");export const MPTextLink=/*@__PURE__*/r.forwardRef(function({href:r,underline:u="always",color:f,size:k,newTab:h=!1,icon:x,newTabLabel:b="Opens in a new tab",render:j,className:v,style:y,children:w,..._},g){const N=h?"_blank":_.target,T="_blank"===N,z=x??T,C=!0===z?e(t,{icon:T?l:s,size:"0.95em"}):z,L=["mp-link cursor-pointer","transition-[color,text-decoration-color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid focus-visible:rounded-mp-xs outline-none",k?c[k]:"",p[u],d,f?"[&.mp-link]:text-(--_mp-accent)":"[&.mp-link]:text-inherit",v??""].filter(Boolean).join(" ");return i({render:j??e("a",{}),ref:g,props:{href:r,target:N,rel:T?"noopener noreferrer":void 0,className:L,style:f?{...a(f),...y}:y,children:o(n,{children:[w,C?e("span",{className:"ms-[0.25em] inline-flex align-baseline",children:C}):null,T?o(n,{children:[" ",e("span",{className:m,children:b})]}):null]}),..._}})});
+import{jsx as e,Fragment as n,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{useRender as i}from"@base-ui/react/use-render";import{MPIcon as l}from"../icon/MPIcon.js";import{ExternalLinkIcon as t,LinkIcon as s}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{linkRel as m}from"../../internal/link.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{TEXT_LINK as u}from"../../internal/messages/text-link.js";import{PROSE_TEXT as d}from"../../internal/scale.js";import{VISUALLY_HIDDEN as f}from"../../internal/visually-hidden.js";const k={always:"[&.mp-link]:underline",hover:"[&.mp-link]:no-underline [&.mp-link]:hover:underline",none:"[&.mp-link]:no-underline"},x=/*@__PURE__*/["[&.mp-link]:[text-underline-offset:0.2em]","[&.mp-link]:[text-decoration-thickness:0.08em]","[&.mp-link]:[text-decoration-color:color-mix(in_oklab,currentColor_45%,transparent)]","[&.mp-link]:hover:[text-decoration-color:currentColor]"].join(" ");export const MPTextLink=/*@__PURE__*/o.forwardRef(function({href:o,underline:h="always",color:b,size:j,newTab:v=!1,icon:y,newTabLabel:w,locale:g,render:_,className:N,style:T,children:z,...C},L){const M=p(u,c(g)),P=v?"_blank":C.target,B="_blank"===P,F=y??B,I=!0===F?e(l,{icon:B?t:s,size:"0.95em"}):F,R=["mp-link cursor-pointer","transition-[color,text-decoration-color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid focus-visible:rounded-mp-xs outline-none",j?d[j]:"",k[h],x,b?"[&.mp-link]:text-(--_mp-accent)":"[&.mp-link]:text-inherit",N??""].filter(Boolean).join(" ");return i({render:_??e("a",{}),ref:L,props:{href:o,target:P,rel:m(P,C.rel),className:R,style:b?{...a(b),...T}:T,children:r(n,{children:[z,I?e("span",{className:"ms-[0.25em] inline-flex align-baseline",children:I}):null,B?r(n,{children:[" ",e("span",{className:f,children:w??M.newTab})]}):null]}),...C}})});

package/dist/components/time-picker/MPTimePicker.d.ts

@@ -44,6 +44,10 @@ export interface MPTimePickerProps extends MPPickerShellProps {
     showSeconds?: boolean;
     /**
      * How far apart the rows of each column are.
+     *
+     * Rounded, and held between 1 and the column's own span: a step of nought has
+     * no number of rows at all, and one wider than the column leaves the single
+     * row it can offer.
      * @default 1
      */
     hourStep?: number;

package/dist/components/toggle/MPToggle.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import type { MPColor, MPStyleProps, MPVariant } from '../../types.js';
+export interface MPToggleProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color' | 'value'> {
+    /**
+     * How much surface the toggle paints while it is **off**. On is always the
+     * accent asserting itself, whichever weight was asked for.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * Which accent family it turns on in. Not an arbitrary colour: to change what
+     * `primary` *is*, set the token.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Whether it is on. Use with `onPressedChange` for a controlled toggle. */
+    pressed?: boolean;
+    /**
+     * Whether it starts on, for an uncontrolled one.
+     * @default false
+     */
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** Identifies the toggle inside an [MPToggleGroup](./toggle#mptogglegroup). */
+    value?: string;
+    /** A glyph before the label. */
+    startIcon?: React.ReactNode;
+    /** A glyph after it. */
+    endIcon?: React.ReactNode;
+    /**
+     * The label. Left out, the toggle goes square around whatever glyph it was
+     * given — which is what a toolbar toggle is, and what MD3 calls a *toggle icon
+     * button*. An icon-only toggle still needs an `aria-label`.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A button that stays down.
+ *
+ * The difference from an [MPSwitch](./switch) is what the press *is*: a switch
+ * changes a setting, and the change is the point. A toggle changes the state of
+ * the thing beside it — bold on the selected words, the grid on the canvas, the
+ * filter on the list — and the thing beside it is what the reader is looking at.
+ *
+ * The difference from an [MPCheckbox](./checkbox) is that this is a control
+ * rather than an answer, so it never goes in a form. A checkbox's value is
+ * submitted; a toggle's state is acted on immediately.
+ *
+ * Base UI's `Toggle` is underneath, which owns `aria-pressed` and the
+ * controlled/uncontrolled pair. What is left here is the surface, and the rule
+ * that **off is neutral**.
+ *
+ * ## Why off is neutral and on is the accent
+ *
+ * Because a toggle has to be readable at a glance in a row of eight of them, and
+ * the axis a reader can actually judge in isolation is hue, not saturation. A
+ * set where off is a paler accent and on is a stronger one is a set nobody can
+ * read without comparing two of them side by side.
+ *
+ * It is also what leaves `color` meaning something. On a button the family says
+ * *what kind of action this is*; here it says what "on" looks like, and an
+ * unpressed toggle that already wore it would have spent the signal.
+ *
+ * ## Icon only
+ *
+ * With no children the toggle goes square around its glyph, exactly as
+ * [MPButton](./button) does — which for a `corner-full` control is a circle, and
+ * is MD3's own toggle icon button. There is no separate component for it, for
+ * [MPIconButton](./icon-button)'s reason inverted: the *name* is what an icon
+ * button adds, and a toggle already has to be given one.
+ */
+export declare const MPToggle: React.ForwardRefExoticComponent<MPToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/toggle/MPToggle.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Toggle as r}from"@base-ui/react/toggle";import{accentSlots as o}from"../../internal/accent.js";import{MPButtonGroupContext as a}from"../../internal/button-group.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as i,CONTROL_HEIGHT as c,CONTROL_PAD_X as l,CONTROL_SQUARE as p,CONTROL_TEXT as m,hasContent as d}from"../../internal/scale.js";const u={filled:"bg-mp-surface-container-highest text-mp-on-surface-variant",tonal:"bg-mp-surface-container text-mp-on-surface-variant",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline border bg-transparent text-mp-on-surface-variant",text:"bg-transparent text-mp-on-surface-variant"},f={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-(--_mp-accent) border bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",text:"bg-transparent text-(--_mp-accent)"},b={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 border bg-transparent text-mp-on-surface/38",text:"bg-transparent text-mp-on-surface/38"};export const MPToggle=/*@__PURE__*/n.forwardRef(function({variant:g,size:x,color:v,disabled:h,pressed:w,defaultPressed:_,onPressedChange:j,value:y,startIcon:P,endIcon:z,fullWidth:C=!1,className:k,style:I,children:N,...B},L){const M=n.useContext(a),R=g??M?.variant??"outlined",S=x??M?.size??"md",T=v??M?.color??"primary",W=h??M?.disabled??!1,$=!d(N);return t(r,{ref:L,value:y,pressed:w,defaultPressed:_,onPressedChange:e=>j?.(e),disabled:W,"data-mp-size":S,"data-mp-variant":R,className:e=>["mp-toggle group relative inline-flex shrink-0 items-center justify-center","rounded-mp-full box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",c[S],m[S],i[S],$?`${p[S]} px-0`:l[S],W?b[R]:e.pressed?f[R]:u[R],W?"cursor-default":"",C?"w-full":"",k??""].filter(Boolean).join(" "),style:{...o(T),...I},...B,children:[W?null:e(s,{}),P,N,z]})});

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

@@ -0,0 +1,2 @@
+export { MPToggle } from './MPToggle.js';
+export type { MPToggleProps } from './MPToggle.js';

package/dist/components/toggle/index.js

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

package/dist/components/toggle-group/MPToggleGroup.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPStyleProps, MPVariant } from '../../types.js';
+export interface MPToggleGroupProps extends MPStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Passed to every toggle in the set.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /** Passed to every toggle in the set. */
+    color?: MPColor;
+    /**
+     * Which toggles are on, by their `value`.
+     *
+     * An array in both the single and the multiple case — Base UI's own shape, and
+     * the same decision [MPSegmentedButton](./segmented-button) makes: a `value`
+     * whose *type* changed with a boolean prop would be a union every caller has
+     * to narrow before they can read it.
+     */
+    value?: readonly string[];
+    /** Which start on, for an uncontrolled set. */
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Whether more than one may be on at a time. Off, turning one on turns the
+     * last one off — which is a one-of-a-set, and worth a second thought: if what
+     * is being chosen is a **value** rather than a state, that is an
+     * [MPSegmentedButton](./segmented-button) or an
+     * [MPRadioGroup](./radio-group).
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Which way the toggles run.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /** Disables every toggle in the set at once. */
+    disabled?: boolean;
+    /**
+     * Whether the arrow keys wrap around at the ends.
+     * @default true
+     */
+    loopFocus?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A run of toggles that share one state.
+ *
+ * Two things happen here and only one of them is visual. The corners that face a
+ * neighbour are cut back to `corner-small` — MD3's connected button group, the
+ * same shape an [MPButtonGroup](./button-group) draws, out of the same table.
+ *
+ * The other half is that the **set owns the value**: the toggles report into one
+ * array, `multiple` decides whether more than one of them can be on, and
+ * `variant`, `size`, `color` and `disabled` are set once here rather than on
+ * every toggle. A run where the fourth toggle is a rung out is not a run.
+ *
+ * Base UI owns the roving tab index — one tab stop for the whole set, with the
+ * arrow keys moving inside it — which is what makes a toolbar of eight toggles
+ * two key presses deep instead of eight.
+ *
+ * ## When this is the wrong component
+ *
+ * When what is being chosen is a **value** rather than a state. A run of toggles
+ * with `multiple` off is a one-of-a-set, and the two components that say so
+ * properly are [MPSegmentedButton](./segmented-button) — which is MD3's own
+ * control for picking between two and five views — and
+ * [MPRadioGroup](./radio-group), which is what a form's value comes from.
+ *
+ * A toggle group is for a **toolbar**: bold, italic, underline; grid, snap,
+ * rulers. Each one is a state of the thing beside it, and they happen to sit
+ * together.
+ */
+export declare const MPToggleGroup: React.ForwardRefExoticComponent<MPToggleGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/toggle-group/MPToggleGroup.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as o from"react";import{ToggleGroup as l}from"@base-ui/react/toggle-group";import{GROUP_JOIN as a,MPButtonGroupContext as r}from"../../internal/button-group.js";export const MPToggleGroup=/*@__PURE__*/o.forwardRef(function({variant:i,size:t,color:n,value:u,defaultValue:s,onValueChange:f,multiple:c=!1,orientation:d="horizontal",disabled:m,loopFocus:p=!0,fullWidth:g=!1,className:v,children:x,...h},b){const j=o.useMemo(()=>({variant:i,size:t,color:n,disabled:m}),[i,t,n,m]);return e(r.Provider,{value:j,children:e(l,{ref:b,value:u,defaultValue:s,onValueChange:e=>f?.(e),multiple:c,orientation:d,disabled:m,loopFocus:p,"data-mp-orientation":d,className:["mp-toggle-group inline-flex gap-0.5 align-middle","vertical"===d?"flex-col":"flex-row",a[d],"[&>*]:relative [&>*:focus-visible]:z-10",g?"flex w-full [&>*]:flex-1":"",v??""].filter(Boolean).join(" "),...h,children:x})})});

package/dist/components/toggle-group/index.d.ts

@@ -0,0 +1,2 @@
+export { MPToggleGroup } from './MPToggleGroup.js';
+export type { MPToggleGroupProps } from './MPToggleGroup.js';

package/dist/components/toggle-group/index.js

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

package/dist/components/tooltip/MPTooltip.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as e from"react";import{Tooltip as a}from"@base-ui/react/tooltip";import{accentSlots as i}from"../../internal/accent.js";export const MPTooltipProvider=a.Provider;const l={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},s={xs:"px-1.5",sm:"px-2",md:"px-2",lg:"px-3",xl:"px-4"},r={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-small",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},d={xs:6,sm:7,md:8,lg:9,xl:10};export function MPTooltip({content:p,children:n,size:m="sm",color:c,side:x="top",align:y="center",sideOffset:u=6,delay:h,closeDelay:f,arrow:g=!0,open:b,defaultOpen:v,onOpenChange:_,disabled:P=!1,className:j,style:O}){const w=d[m],N=e.useId(),[z,T]=e.useState(v??!1),M=b??z,B={"--_mp-tooltip":c?`var(--_mp-color-${c})`:"var(--_mp-color-inverse-surface)","--_mp-on-tooltip":c?`var(--_mp-color-on-${c})`:"var(--_mp-color-inverse-on-surface)",...c?i(c):null};return o(a.Root,{open:b,defaultOpen:v,onOpenChange:t=>{T(t),_?.(t)},children:[t(a.Trigger,{render:n,delay:h,closeDelay:f,disabled:P,"aria-describedby":M?N:void 0}),t(a.Portal,{children:t(a.Positioner,{className:"mp-portal z-50 outline-none",side:x,align:y,sideOffset:u,children:o(a.Popup,{id:N,role:"tooltip","data-mp-size":m,className:["mp-tooltip rounded-mp-xs max-w-64 outline-none","bg-(--_mp-tooltip) text-(--_mp-on-tooltip)","transition-opacity duration-(--mp-sys-motion-duration-short4)","data-starting-style:opacity-0 data-ending-style:opacity-0","data-instant:duration-0",s[m],l[m],r[m],j??""].filter(Boolean).join(" "),style:{...B,...O},children:[g?t(a.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:t("svg",{width:w,height:w/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:t("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-tooltip)"})})}):null,p]})})})]})}
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as e from"react";import{Tooltip as a}from"@base-ui/react/tooltip";import{accentSlots as i}from"../../internal/accent.js";export const MPTooltipProvider=a.Provider;const l={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},s={xs:"px-1.5",sm:"px-2",md:"px-2",lg:"px-3",xl:"px-4"},r={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-small",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},d={xs:6,sm:7,md:8,lg:9,xl:10};export function MPTooltip({content:p,children:n,size:m="sm",color:c,side:x="top",align:y="center",sideOffset:u=6,delay:h,closeDelay:f,arrow:g=!0,open:b,defaultOpen:v,onOpenChange:_,disabled:P=!1,className:j,style:O}){const w=d[m],N=e.useId(),[z,T]=e.useState(v??!1),M=b??z,B={"--_mp-tooltip":c?`var(--_mp-color-${c})`:"var(--_mp-color-inverse-surface)","--_mp-on-tooltip":c?`var(--_mp-color-on-${c})`:"var(--_mp-color-inverse-on-surface)",...c?i(c):null};return o(a.Root,{open:b,defaultOpen:v,onOpenChange:t=>{void 0===b&&T(t),_?.(t)},children:[t(a.Trigger,{render:n,delay:h,closeDelay:f,disabled:P,"aria-describedby":M?N:void 0}),t(a.Portal,{children:t(a.Positioner,{className:"mp-portal z-50 outline-none",side:x,align:y,sideOffset:u,children:o(a.Popup,{id:N,role:"tooltip","data-mp-size":m,className:["mp-tooltip rounded-mp-xs max-w-64 outline-none","bg-(--_mp-tooltip) text-(--_mp-on-tooltip)","transition-opacity duration-(--mp-sys-motion-duration-short4)","data-starting-style:opacity-0 data-ending-style:opacity-0","data-instant:duration-0",s[m],l[m],r[m],j??""].filter(Boolean).join(" "),style:{...B,...O},children:[g?t(a.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:t("svg",{width:w,height:w/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:t("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-tooltip)"})})}):null,p]})})})]})}

package/dist/components/transfer/MPTransfer.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import type { MPMessages } from '../../internal/i18n.js';
+import type { MPColor, MPSize, MPVariant } from '../../types.js';
+/** One thing that can be on either side. */
+export interface MPTransferItem {
+    /** What identifies it, and what `value` is a list of. */
+    value: string;
+    /** What the row says. */
+    label: React.ReactNode;
+    /** In the list, but not movable. */
+    disabled?: boolean;
+}
+export interface MPTransferProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** Everything that can be on either side, in the order both lists show it. */
+    items: readonly MPTransferItem[];
+    /** What is on the trailing side. Use with `onValueChange` for a controlled pair. */
+    value?: readonly string[];
+    /** What starts there, for an uncontrolled one. */
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /** The heading over the leading list. Defaults to the word in `locale`. */
+    sourceLabel?: React.ReactNode;
+    /** And over the trailing one. */
+    targetLabel?: React.ReactNode;
+    /**
+     * Puts a filter above each list.
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * How tall each list is — a number in pixels, or any CSS length.
+     * @default 220
+     */
+    height?: number | string;
+    /** Nothing can be ticked or moved. */
+    disabled?: boolean;
+    /**
+     * How much surface each panel paints, on the **container** ladder — the panels
+     * hold rows of somebody else's labels, so they are never dyed.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The scale of the whole control: the rows, the headings, the filter and the
+     * two arrows.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the ticks and the arrows read.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * Which language the headings, the arrows and the filter are written in. Falls
+     * back to the nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** Overrides for the words themselves. They win over the translation. */
+    labels?: Partial<MPMessages['transfer']>;
+}
+/**
+ * Two lists and the arrows between them: everything that could be chosen on one
+ * side, everything that has been on the other.
+ *
+ * This is the shape for a choice that is **long** — the columns in a report, the
+ * permissions on a role, the people on a channel — where an
+ * [MPCombobox](./combobox) with forty chips in its field stops being readable
+ * and a column of forty checkboxes gives no answer at all to "what did I
+ * actually pick". Below about a dozen options, one of those two is the smaller
+ * component and the better one.
+ *
+ * ## Ticking is not choosing
+ *
+ * The two are deliberately separate, and it is the whole of the interaction.
+ * `value` is **which side a row is on**; a tick is a mark on a row saying it
+ * should move next time an arrow is pressed. So `onValueChange` fires on the
+ * arrow and never on a tick, and a caller storing `value` is storing the answer
+ * rather than the working.
+ *
+ * Moving drops the ticks on what moved and keeps the rest: a row that has
+ * arrived on the other side is not still waiting to be sent there, and a row the
+ * filter was hiding was never part of that press.
+ *
+ * ## The order never changes
+ *
+ * Both lists draw in the order of `items`, so a row sent across and back lands
+ * where it started. A component that appended to the far list instead would
+ * reorder the reader's own list every time they changed their mind.
+ *
+ * ## Why it is not one component with a `mode`
+ *
+ * Because the panels are one function called twice, which is what makes the two
+ * sides provably identical: the same heading strip, the same select-all, the
+ * same filter, the same empty line. The only thing that differs between them is
+ * which way its arrow points.
+ */
+export declare const MPTransfer: React.ForwardRefExoticComponent<MPTransferProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/transfer/MPTransfer.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{MPBox as l}from"../box/MPBox.js";import{MPCheckbox as s}from"../checkbox/MPCheckbox.js";import{MPIcon as r}from"../icon/MPIcon.js";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MPTextField as i}from"../text-field/MPTextField.js";import{ArrowRightIcon as o}from"../../constants/icons.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{cssLength as d}from"../../internal/length.js";import{TRANSFER as h}from"../../internal/messages/transfer.js";import{hasContent as f,META_TEXT as u,SHEET_PAD_X as p}from"../../internal/scale.js";const v={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},b={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"};function g({title:t,rows:r,total:n,ticked:o,onTick:c,onTickAll:m,search:d,onSearch:h,searchable:f,disabled:g,height:x,messages:w,variant:k,size:j,color:y}){const S=r.filter(e=>!e.disabled),N=S.filter(e=>o.has(e.value)),z=S.length>0&&N.length===S.length,C=N.length>0&&!z,T=p[j];return a(l,{variant:k,size:j,padded:!1,className:"mp-transfer__panel flex min-w-0 flex-col overflow-hidden",children:[a("div",{className:["mp-transfer__heading border-mp-outline-variant flex items-center gap-2 border-b",T,v[j]].join(" "),children:[e("div",{className:"min-w-0 flex-1",children:e(s,{size:j,color:y,checked:z,indeterminate:C,disabled:g||0===S.length,label:e("span",{className:"block truncate font-medium",children:t}),onCheckedChange:e=>m(e)})}),a("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${u}`,children:[N.length,"/",n]})]}),f?e("div",{className:`${T} ${v[j]}`,children:e(i,{size:j,fullWidth:!0,disabled:g,placeholder:w.search,"aria-label":w.search,value:d,onChange:h})}):null,e("div",{className:`mp-transfer__list flex flex-col overflow-y-auto overscroll-contain ${T} ${v[j]}`,style:{height:x},children:0===r.length?e("span",{className:`text-mp-on-surface-variant ${u} ${b[j]}`,children:w.empty}):r.map((a,t)=>e("div",{className:b[j],children:e(s,{size:j,color:y,label:a.label,checked:o.has(a.value),disabled:g||a.disabled,onCheckedChange:e=>c(a.value,e)})},`${t}:${a.value}`))})]})}function x(e,a){return""===a||("string"!=typeof e.label||e.label.toLowerCase().includes(a.toLowerCase()))}export const MPTransfer=/*@__PURE__*/t.forwardRef(function({items:l,value:s,defaultValue:i,onValueChange:u,sourceLabel:p,targetLabel:v,searchable:b=!1,height:w=220,disabled:k=!1,variant:j="outlined",size:y="md",color:S="primary",locale:N,labels:z,className:C,...T},$){const _=c(N),M=m(h,_,z),[P,L]=t.useState(i??[]),A=s??P,[B,I]=t.useState(()=>new Set),[V,E]=t.useState(""),[F,R]=t.useState(""),W=t.useMemo(()=>new Set(A),[A]),q=l.filter(e=>!W.has(e.value)),D=l.filter(e=>W.has(e.value));t.useEffect(()=>{const e=new Set(l.map(e=>e.value));I(a=>{const t=[...a].filter(a=>e.has(a));return t.length===a.size?a:new Set(t)})},[l]);const G=(e,a)=>{I(t=>{const l=new Set(t);return a?l.add(e):l.delete(e),l})},H=(e,a)=>{I(t=>{const l=new Set(t);for(const t of e)t.disabled||(a?l.add(t.value):l.delete(t.value));return l})},J=(e,a)=>{const t=e.filter(e=>!e.disabled&&B.has(e.value));if(0===t.length)return;const r=new Set(t.map(e=>e.value)),n=a?l.filter(e=>W.has(e.value)||r.has(e.value)).map(e=>e.value):A.filter(e=>!r.has(e));I(e=>new Set([...e].filter(e=>!r.has(e)))),(e=>{void 0===s&&L(e),u?.(e)})(n)},K=q.filter(e=>x(e,V)),O=D.filter(e=>x(e,F)),Q=K.some(e=>!e.disabled&&B.has(e.value)),U=O.some(e=>!e.disabled&&B.has(e.value)),X=d(w),Y={ticked:B,disabled:k,height:X,messages:M,variant:j,size:y,color:S,searchable:b};return a("div",{ref:$,"data-mp-size":y,className:["mp-transfer grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)]","min-[600px]:[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",C??""].filter(Boolean).join(" "),...T,children:[e(g,{...Y,title:f(p)?p:M.source,rows:K,total:q.length,onTick:G,onTickAll:e=>H(K,e),search:V,onSearch:E}),a("div",{className:"flex flex-row justify-center gap-2 min-[600px]:flex-col",children:[e(n,{size:y,color:S,variant:"text"===j?"text":"outlined",label:M.toTarget,disabled:k||!Q,onClick:()=>J(K,!0),icon:e(r,{icon:o,className:"rotate-90 min-[600px]:rotate-0"})}),e(n,{size:y,color:S,variant:"text"===j?"text":"outlined",label:M.toSource,disabled:k||!U,onClick:()=>J(O,!1),icon:e(r,{icon:o,className:"-rotate-90 min-[600px]:rotate-180"})})]}),e(g,{...Y,title:f(v)?v:M.target,rows:O,total:D.length,onTick:G,onTickAll:e=>H(O,e),search:F,onSearch:R})]})});

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

@@ -0,0 +1,2 @@
+export { MPTransfer } from './MPTransfer.js';
+export type { MPTransferItem, MPTransferProps } from './MPTransfer.js';

package/dist/components/transfer/index.js

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

package/dist/constants/glyphs.d.ts

@@ -60,3 +60,13 @@ export declare const ClockIcon: import("react").ForwardRefExoticComponent<Omit<i
 export declare const StarIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Work in progress, spun by whatever is waiting on it. */
 export declare const SpinnerIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * Three lines: the navigation a window has become too narrow to show.
+ *
+ * The one glyph in the set that is a picture of a *menu* rather than a picture
+ * of what pressing it does, and it is here anyway. Thirty years of it have made
+ * it the one shape a reader recognises with no word beside it, which is the only
+ * argument that ever justifies a symbol — and `MPSidebarTrigger` gives it a
+ * name for the readers it still says nothing to.
+ */
+export declare const MenuIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/constants/glyphs.js

@@ -1,2 +1,2 @@
 "use client";
-import{ArrowDown as o,ArrowRight as n,ArrowUp as t,CalendarDays as c,Check as r,ChevronDown as e,ChevronLeft as s,ChevronRight as p,ChevronsLeft as x,ChevronsRight as I,ChevronUp as i,CircleAlert as h,CircleCheck as C,Clock as a,Copy as l,Ellipsis as v,ExternalLink as f,Eye as d,EyeOff as w,Info as g,Link as k,LoaderCircle as A,Minus as L,Plus as R,Search as S,Star as m,TriangleAlert as y,Upload as U,X as b}from"lucide-react";export const VisibilityIcon=d;export const VisibilityOffIcon=w;export const CloseIcon=b;export const CheckIcon=r;export const ChevronDownIcon=e;export const ChevronUpIcon=i;export const ChevronLeftIcon=s;export const ChevronRightIcon=p;export const ChevronsLeftIcon=x;export const ChevronsRightIcon=I;export const SearchIcon=S;export const ArrowUpIcon=t;export const ArrowDownIcon=o;export const ArrowRightIcon=n;export const MoreIcon=v;export const LinkIcon=k;export const ExternalLinkIcon=f;export const CopyIcon=l;export const InfoIcon=g;export const SuccessIcon=C;export const WarningIcon=y;export const ErrorIcon=h;export const AddIcon=R;export const RemoveIcon=L;export const UploadIcon=U;export const CalendarIcon=c;export const ClockIcon=a;export const StarIcon=m;export const SpinnerIcon=A;
+import{ArrowDown as o,ArrowRight as n,ArrowUp as t,CalendarDays as c,Check as r,ChevronDown as e,ChevronLeft as s,ChevronRight as p,ChevronsLeft as x,ChevronsRight as I,ChevronUp as i,CircleAlert as h,CircleCheck as C,Clock as a,Copy as l,Ellipsis as v,ExternalLink as f,Eye as d,EyeOff as w,Info as g,Link as k,LoaderCircle as A,Menu as L,Minus as R,Plus as S,Search as m,Star as u,TriangleAlert as y,Upload as U,X as b}from"lucide-react";export const VisibilityIcon=d;export const VisibilityOffIcon=w;export const CloseIcon=b;export const CheckIcon=r;export const ChevronDownIcon=e;export const ChevronUpIcon=i;export const ChevronLeftIcon=s;export const ChevronRightIcon=p;export const ChevronsLeftIcon=x;export const ChevronsRightIcon=I;export const SearchIcon=m;export const ArrowUpIcon=t;export const ArrowDownIcon=o;export const ArrowRightIcon=n;export const MoreIcon=v;export const LinkIcon=k;export const ExternalLinkIcon=f;export const CopyIcon=l;export const InfoIcon=g;export const SuccessIcon=C;export const WarningIcon=y;export const ErrorIcon=h;export const AddIcon=S;export const RemoveIcon=R;export const UploadIcon=U;export const CalendarIcon=c;export const ClockIcon=a;export const StarIcon=u;export const SpinnerIcon=A;export const MenuIcon=L;

package/dist/constants/icons.d.ts

@@ -56,6 +56,7 @@ export declare const ICONS: {
     readonly 'arrow-down': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly 'arrow-right': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly more: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly menu: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly link: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly 'external-link': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly copy: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/constants/icons.js

@@ -1 +1 @@
-export*from"./glyphs.js";import{VisibilityIcon as r,VisibilityOffIcon as o,CloseIcon as e,CheckIcon as n,ChevronDownIcon as c,ChevronUpIcon as i,ChevronLeftIcon as s,ChevronRightIcon as h,ChevronsLeftIcon as l,ChevronsRightIcon as t,SearchIcon as a,ArrowUpIcon as p,ArrowDownIcon as v,ArrowRightIcon as f,MoreIcon as d,LinkIcon as g,ExternalLinkIcon as w,CopyIcon as m,InfoIcon as y,SuccessIcon as k,WarningIcon as u,ErrorIcon as x,AddIcon as b,RemoveIcon as j,UploadIcon as C,CalendarIcon as I,ClockIcon as N,StarIcon as O,SpinnerIcon as S}from"./glyphs.js";export const ICONS={visibility:r,"visibility-off":o,close:e,check:n,"chevron-down":c,"chevron-up":i,"chevron-left":s,"chevron-right":h,"chevrons-left":l,"chevrons-right":t,search:a,"arrow-up":p,"arrow-down":v,"arrow-right":f,more:d,link:g,"external-link":w,copy:m,info:y,success:k,warning:u,error:x,add:b,remove:j,upload:C,calendar:I,clock:N,star:O,spinner:S};
+export*from"./glyphs.js";import{VisibilityIcon as r,VisibilityOffIcon as o,CloseIcon as e,CheckIcon as n,ChevronDownIcon as c,ChevronUpIcon as i,ChevronLeftIcon as s,ChevronRightIcon as h,ChevronsLeftIcon as l,ChevronsRightIcon as t,SearchIcon as a,ArrowUpIcon as p,ArrowDownIcon as v,ArrowRightIcon as f,MoreIcon as d,MenuIcon as g,LinkIcon as m,ExternalLinkIcon as w,CopyIcon as u,InfoIcon as y,SuccessIcon as k,WarningIcon as x,ErrorIcon as b,AddIcon as j,RemoveIcon as C,UploadIcon as I,CalendarIcon as N,ClockIcon as O,StarIcon as S,SpinnerIcon as q}from"./glyphs.js";export const ICONS={visibility:r,"visibility-off":o,close:e,check:n,"chevron-down":c,"chevron-up":i,"chevron-left":s,"chevron-right":h,"chevrons-left":l,"chevrons-right":t,search:a,"arrow-up":p,"arrow-down":v,"arrow-right":f,more:d,menu:g,link:m,"external-link":w,copy:u,info:y,success:k,warning:x,error:b,add:j,remove:C,upload:I,calendar:N,clock:O,star:S,spinner:q};

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from './components/animate-typing/index.js';
 export * from './components/animate-zoom/index.js';
 export * from './components/aspect-ratio/index.js';
 export * from './components/avatar/index.js';
+export * from './components/avatar-group/index.js';
 export * from './components/badge/index.js';
 export * from './components/blockquote/index.js';
 export * from './components/bottom-navigation/index.js';
@@ -31,6 +32,7 @@ export * from './components/chip/index.js';
 export * from './components/collapsible/index.js';
 export * from './components/color-picker/index.js';
 export * from './components/combobox/index.js';
+export * from './components/command-palette/index.js';
 export * from './components/container/index.js';
 export * from './components/date-picker/index.js';
 export * from './components/date-range-picker/index.js';
@@ -39,18 +41,25 @@ export * from './components/dialog/index.js';
 export * from './components/divider/index.js';
 export * from './components/drawer/index.js';
 export * from './components/empty/index.js';
+export * from './components/fieldset/index.js';
 export * from './components/file-picker/index.js';
 export * from './components/floating-action-button/index.js';
+export * from './components/footer/index.js';
+export * from './components/form/index.js';
 export * from './components/grid/index.js';
+export * from './components/header/index.js';
 export * from './components/highlight/index.js';
 export * from './components/icon/index.js';
 export * from './components/icon-button/index.js';
 export * from './components/list/index.js';
 export * from './components/locale/index.js';
 export * from './components/menu/index.js';
+export * from './components/menubar/index.js';
+export * from './components/navigation-menu/index.js';
 export * from './components/number-field/index.js';
 export * from './components/otp-field/index.js';
 export * from './components/overlay/index.js';
+export * from './components/page-layout/index.js';
 export * from './components/pagination/index.js';
 export * from './components/panes/index.js';
 export * from './components/pill/index.js';
@@ -63,6 +72,7 @@ export * from './components/rating/index.js';
 export * from './components/segmented-button/index.js';
 export * from './components/select/index.js';
 export * from './components/shortcut/index.js';
+export * from './components/sidebar/index.js';
 export * from './components/skeleton/index.js';
 export * from './components/slider/index.js';
 export * from './components/snackbar/index.js';
@@ -74,5 +84,8 @@ export * from './components/text-field/index.js';
 export * from './components/text-link/index.js';
 export * from './components/time-picker/index.js';
 export * from './components/timeline/index.js';
+export * from './components/toggle/index.js';
+export * from './components/toggle-group/index.js';
 export * from './components/tooltip/index.js';
+export * from './components/transfer/index.js';
 export * from './components/typography/index.js';

package/dist/index.js

@@ -1 +1 @@
-export*from"./types.js";export{registerMPMessages}from"./internal/i18n.js";export*from"./constants/icons.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/container/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/dialog/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/empty/index.js";export*from"./components/file-picker/index.js";export*from"./components/floating-action-button/index.js";export*from"./components/grid/index.js";export*from"./components/highlight/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/list/index.js";export*from"./components/locale/index.js";export*from"./components/menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/shortcut/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/snackbar/index.js";export*from"./components/spoiler/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/tooltip/index.js";export*from"./components/typography/index.js";
+export*from"./types.js";export{registerMPMessages}from"./internal/i18n.js";export*from"./constants/icons.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/avatar-group/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/command-palette/index.js";export*from"./components/container/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/dialog/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/empty/index.js";export*from"./components/fieldset/index.js";export*from"./components/file-picker/index.js";export*from"./components/floating-action-button/index.js";export*from"./components/footer/index.js";export*from"./components/form/index.js";export*from"./components/grid/index.js";export*from"./components/header/index.js";export*from"./components/highlight/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/list/index.js";export*from"./components/locale/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/navigation-menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/page-layout/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/shortcut/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/snackbar/index.js";export*from"./components/spoiler/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/toggle/index.js";export*from"./components/toggle-group/index.js";export*from"./components/tooltip/index.js";export*from"./components/transfer/index.js";export*from"./components/typography/index.js";

package/dist/internal/Calendar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import*as n from"react";import{MPButton as r}from"../components/button/MPButton.js";import{MPIcon as l}from"../components/icon/MPIcon.js";import{MPIconButton as a}from"../components/icon-button/MPIconButton.js";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons.js";import{MPStateLayer as u}from"./StateLayer.js";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale.js";import{VISUALLY_HIDDEN as p}from"./visually-hidden.js";import{addDays as f,addMonths as g,addYears as v,calendarWeeks as y,compareDay as w,dateFormatter as x,daysInMonth as b,isDayOutside as D,isMonthBeforeYear as S,isSameDay as N,isSameMonth as M,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as j,startOfDay as k,startOfMonth as z,today as F,weekdayLabels as Y,withTime as A,YEAR_PAGE_SIZE as E,yearPageStart as B}from"./date.js";const R={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},T={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},$=/*@__PURE__*/["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none bg-transparent font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" ");function H({children:t,label:n,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return o("button",{type:"button",role:"gridcell","aria-label":n,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[$,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"cursor-default text-mp-on-surface/38":r?"bg-(--_mp-accent) text-(--_mp-on-accent)":l?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"border border-(--_mp-accent) text-(--_mp-accent)":c?"text-mp-on-surface-variant":"text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),t]})}function K({size:n,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:v,showNextButton:y,onStep:w,onViewChange:x}){const b=j(f,"long")[p.getMonth()],D=String(p.getFullYear()),N=S(f),M=T[n],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],_=(o,t)=>t?e(a,{size:M,color:u,label:P[-1===o?0:1],icon:e(l,{icon:-1===o?c:i,size:m[M],className:"rtl:rotate-180"}),onClick:()=>w(o)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),C=o=>e(l,{icon:s,size:m[M],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",o?"rotate-180":""].filter(Boolean).join(" ")}),k=e(r,{variant:"text",size:M,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:C("month"===d),onClick:()=>x("month"===d?"day":"month"),children:b},"month"),z=e(r,{variant:"text",size:M,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:C("year"===d),onClick:()=>x("year"===d?"day":"year"),children:D},"year"),F=B(p.getFullYear());return o("div",{className:"flex items-center justify-between gap-1",children:[_(-1,v),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[n]}`,children:`${F}–${F+E-1}`}):"month"===d?z:o(t,N?{children:[k,z]}:{children:[z,k]})}),_(1,y)]})}export function MPCalendar({size:t,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:y,showOutsideDays:w=!0,autoFocus:x=!1,showPreviousButton:b=!0,showNextButton:S=!0,labels:N}){const[C,j]=n.useState("day"),Y=n.useMemo(()=>i.filter(P),[i]),[A,B]=n.useState(()=>{const e=Y.find(e=>M(e,s));return e?k(e):M(F(),s)?F():z(s)}),T=n.useRef(x),$=n.useRef(null);n.useEffect(()=>{B(e=>M(e,s)?e:z(s))},[s]),n.useLayoutEffect(()=>{T.current&&(T.current=!1,$.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const H=n.useCallback(e=>D(e,p,f)||(y?.(e)??!1),[p,f,y]),q=e=>{T.current=!0,j(e)},I=e=>{T.current=!0,c(e)};return o("div",{ref:$,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":R[t]},onPointerLeave:()=>h?.(null),children:[e(K,{size:t,color:r,view:C,month:s,locale:l,labels:N,showPreviousButton:b,showNextButton:S,onStep:e=>{c("day"===C?g(s,e):v(s,"month"===C?e:e*E))},onViewChange:q}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===C?e(L,{size:t,locale:l,weekStartsOn:a,month:s,chosen:Y,rangeStart:u,rangeEnd:m,focusedDate:A,showOutsideDays:w,isDisabled:H,onSelect:e=>{B(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{T.current=!0,B(e),M(e,s)||c(z(e))}}):"month"===C?e(O,{size:t,locale:l,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(_(s.getFullYear(),e,1)),q("day")}}):e(U,{size:t,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(_(e,s.getMonth(),1)),q("month")}})})]})}function L({size:t,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:v,onPreviewChange:b,onMoveFocus:D}){const S=Y(r,l,"narrow"),_=Y(r,l,"long"),C=(k=i,P(j=c)&&P(k)?w(j,k)<=0?[j,k]:[k,j]:null);var j,k;const z=F(),A=n.useMemo(()=>{const e=x(r,{dateStyle:"full"});return y(a,l).map(o=>o.map(o=>({date:o,label:e.format(o)})))},[a,l,r]),E=n.useRef(null),B=n.useRef(a);n.useLayoutEffect(()=>{const e=E.current,o=B.current;if(B.current=a,!e||M(o,a))return;const t=o.getTime()<a.getTime(),n="rtl"===getComputedStyle(e).direction;e.style.setProperty("--_mp-calendar-from",String(t===n?-1:1)),e.dataset.mpPaged="true",e.style.animationName="none",e.offsetWidth,e.style.animationName=""},[a]);return o("div",{role:"grid","aria-label":x(r,{year:"numeric",month:"long"}).format(a),className:"flex h-full flex-col",children:[e("div",{role:"rowgroup",children:e("div",{role:"row",className:"grid grid-cols-7",children:S.map((o,t)=>e("span",{role:"columnheader","aria-label":_[t],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:o},t))})}),e("div",{ref:E,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:A.map((o,n)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(({date:o,label:n})=>{const r=!M(o,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},o.getTime());const c=s.some(e=>N(e,o)),i=null!==C&&w(o,C[0])>=0&&w(o,C[1])<=0,d=null!==C&&i&&N(o,C[0]),y=null!==C&&i&&N(o,C[1]);return e(H,{label:n,selected:c,inRange:i&&!c,rangeEdge:i?d&&y?"both":d?"start":y?"end":"middle":null,current:N(o,z)&&!c,muted:r,disabled:p(o),focused:N(o,u),className:`size-(--_mp-cell) ${h[t]}`,onClick:()=>v(o),onPointerEnter:()=>b?.(o),onKeyDown:e=>((e,o)=>{const t=(o.getDay()-l+7)%7,n={ArrowLeft:()=>f(o,-1),ArrowRight:()=>f(o,1),ArrowUp:()=>f(o,-7),ArrowDown:()=>f(o,7),Home:()=>f(o,-t),End:()=>f(o,6-t),PageUp:()=>g(o,e.shiftKey?-12:-1),PageDown:()=>g(o,e.shiftKey?12:1)}[e.key];n&&(e.preventDefault(),D(n()))})(e,o),children:o.getDate()},o.getTime())})},n))})]})}function O({size:o,locale:t,month:n,chosen:r,minDate:l,maxDate:a,onMoveCursor:s,onPick:c}){const i=j(t,"short"),u=j(t,"long"),m=n.getFullYear(),d=new Date,p=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==o&&(e.preventDefault(),s(g(z(n),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(s=>{const f=3*t+s,g=_(m,f,1),v=_(m,f,b(m,f));return e(H,{label:`${u[f]} ${m}`,selected:r.some(e=>e.getFullYear()===m&&e.getMonth()===f),current:d.getFullYear()===m&&d.getMonth()===f,disabled:P(l)&&w(v,l)<0||P(a)&&w(g,a)>0,focused:f===n.getMonth(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>c(f),onKeyDown:p,children:i[f]},f)})},t))})}function U({size:o,month:t,chosen:n,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=B(t.getFullYear()),i=(new Date).getFullYear(),u=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-E,PageDown:E}[e.key];void 0!==o&&(e.preventDefault(),a(v(z(t),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(H,{label:String(d),selected:n.some(e=>e.getFullYear()===d),current:d===i,disabled:P(r)&&d<r.getFullYear()||P(l)&&d>l.getFullYear(),focused:d===t.getFullYear(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function q(e){const o=e.parentElement;if(!o)return;const t=e.getBoundingClientRect(),n=o.getBoundingClientRect(),r=t.top-n.top-o.clientTop+o.scrollTop,l=r+t.height;r<o.scrollTop?o.scrollTop=r:l>o.scrollTop+o.clientHeight&&(o.scrollTop=l-o.clientHeight)}export function MPTimeGrid({size:t,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:v=!1,labels:y}){const w=l??a,b=n.useRef(null),[D,S]=n.useMemo(()=>C(r),[r]);n.useEffect(()=>{const e=b.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(q),v){const o=e?.querySelector('[role="listbox"]');(o?.querySelector('[data-chosen="true"]')??o?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const N=n.useMemo(()=>{const e=Math.ceil((c?12:24)/m),o=Array.from({length:e},(e,o)=>o*m);return c?o.map(e=>0===e?12:e):o},[c,m]),M=n.useMemo(()=>Array.from({length:Math.ceil(60/d)},(e,o)=>o*d),[d]),P=n.useMemo(()=>Array.from({length:Math.ceil(60/f)},(e,o)=>o*f),[f]),_=e=>String(e).padStart(2,"0"),j=c?w.getHours()%12||12:w.getHours(),k=(n,r,a,i,m)=>e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),children:a.map(r=>{const a=((e,o)=>A(w,"hour"===e?{hours:c?o%12+(w.getHours()>=12?12:0):o}:"minute"===e?{minutes:o}:"second"===e?{seconds:o}:{hours:w.getHours()%12+12*o}))(n,r),d=null!==l&&i(r),p=g?.(a,n)??!1;return o("button",{type:"button",role:"option","aria-selected":d,"aria-disabled":p||void 0,"data-chosen":d?"true":void 0,className:[$,"rounded-mp-full h-(--_mp-cell) w-full shrink-0",h[t],p?"cursor-default text-mp-on-surface/38":d?"bg-(--_mp-accent) text-(--_mp-on-accent)":"text-mp-on-surface"].join(" "),onClick:()=>{p||s(a)},children:[p?null:e(u,{}),m(r)]},r)})},n);return o("div",{ref:b,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":R[t]},children:[k("hour",y.hour,N,e=>e===j,e=>c?String(e):_(e)),k("minute",y.minute,M,e=>e===w.getMinutes(),_),i?k("second",y.second,P,e=>e===w.getSeconds(),_):null,c?k("meridiem",y.meridiem,[0,1],e=>(w.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":x(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{MPButton as r}from"../components/button/MPButton.js";import{MPIcon as l}from"../components/icon/MPIcon.js";import{MPIconButton as a}from"../components/icon-button/MPIconButton.js";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons.js";import{MPStateLayer as u}from"./StateLayer.js";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale.js";import{VISUALLY_HIDDEN as f}from"./visually-hidden.js";import{addDays as p,addMonths as g,addYears as v,calendarWeeks as y,compareDay as w,dateFormatter as x,daysInMonth as b,isDayOutside as D,isMonthBeforeYear as S,isSameDay as M,isSameMonth as N,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as k,startOfDay as j,startOfMonth as z,today as F,weekdayLabels as A,withTime as E,YEAR_PAGE_SIZE as T,yearPageStart as Y}from"./date.js";const B={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},R={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},H=/*@__PURE__*/["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none bg-transparent font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" ");function $({children:n,label:o,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:f,onKeyDown:p}){return t("button",{type:"button",role:"gridcell","aria-label":o,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[H,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"cursor-default text-mp-on-surface/38":r?"bg-(--_mp-accent) text-(--_mp-on-accent)":l?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"border border-(--_mp-accent) text-(--_mp-accent)":c?"text-mp-on-surface-variant":"text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:f,onKeyDown:p,children:[i?null:e(u,{}),n]})}function K({size:o,color:u,view:d,month:f,locale:p,labels:g,showPreviousButton:v,showNextButton:y,onStep:w,onViewChange:x}){const b=k(p,"long")[f.getMonth()],D=String(f.getFullYear()),M=S(p),N=R[o],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],_=(t,n)=>n?e(a,{size:N,color:u,label:P[-1===t?0:1],icon:e(l,{icon:-1===t?c:i,size:m[N],className:"rtl:rotate-180"}),onClick:()=>w(t)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),C=t=>e(l,{icon:s,size:m[N],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",t?"rotate-180":""].filter(Boolean).join(" ")}),j=e(r,{variant:"text",size:N,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:C("month"===d),onClick:()=>x("month"===d?"day":"month"),children:b},"month"),z=e(r,{variant:"text",size:N,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:C("year"===d),onClick:()=>x("year"===d?"day":"year"),children:D},"year"),F=Y(f.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[_(-1,v),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[o]}`,children:`${F}–${F+T-1}`}):"month"===d?z:t(n,M?{children:[j,z]}:{children:[z,j]})}),_(1,y)]})}export function MPCalendar({size:n,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:f,maxDate:p,shouldDisableDate:y,showOutsideDays:w=!0,autoFocus:x=!1,showPreviousButton:b=!0,showNextButton:S=!0,labels:M}){const[C,k]=o.useState("day"),A=o.useMemo(()=>i.filter(P),[i]),[E,Y]=o.useState(()=>{const e=A.find(e=>N(e,s));return e?j(e):N(F(),s)?F():z(s)}),R=o.useRef(x),H=o.useRef(null);o.useEffect(()=>{Y(e=>N(e,s)?e:z(s))},[s]),o.useLayoutEffect(()=>{R.current&&(R.current=!1,H.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const $=o.useCallback(e=>D(e,f,p)||(y?.(e)??!1),[f,p,y]),L=e=>{R.current=!0,k(e)},q=e=>{R.current=!0,c(e)};return t("div",{ref:H,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":B[n]},onPointerLeave:()=>h?.(null),children:[e(K,{size:n,color:r,view:C,month:s,locale:l,labels:M,showPreviousButton:b,showNextButton:S,onStep:e=>{c("day"===C?g(s,e):v(s,"month"===C?e:e*T))},onViewChange:L}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===C?e(U,{size:n,locale:l,weekStartsOn:a,month:s,chosen:A,rangeStart:u,rangeEnd:m,focusedDate:E,showOutsideDays:w,isDisabled:$,onSelect:e=>{Y(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{R.current=!0,Y(e),N(e,s)||c(z(e))}}):"month"===C?e(I,{size:n,locale:l,month:s,chosen:A,minDate:f,maxDate:p,onMoveCursor:q,onPick:e=>{c(_(s.getFullYear(),e,1)),L("day")}}):e(O,{size:n,month:s,chosen:A,minDate:f,maxDate:p,onMoveCursor:q,onPick:e=>{c(_(e,s.getMonth(),1)),L("month")}})})]})}function L(e){return"rtl"===getComputedStyle(e).direction?-1:1}function U({size:n,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:f,onSelect:v,onPreviewChange:b,onMoveFocus:D}){const S=A(r,l,"narrow"),_=A(r,l,"long"),C=(j=i,P(k=c)&&P(j)?w(k,j)<=0?[k,j]:[j,k]:null);var k,j;const z=F(),E=o.useMemo(()=>{const e=x(r,{dateStyle:"full"});return y(a,l).map(t=>t.map(t=>({date:t,label:e.format(t)})))},[a,l,r]),T=o.useRef(null),Y=o.useRef(a);o.useLayoutEffect(()=>{const e=T.current,t=Y.current;if(Y.current=a,!e||N(t,a))return;const n=t.getTime()<a.getTime(),o="rtl"===getComputedStyle(e).direction;e.style.setProperty("--_mp-calendar-from",String(n===o?-1:1)),e.dataset.mpPaged="true",e.style.animationName="none",e.offsetWidth,e.style.animationName=""},[a]);return t("div",{role:"grid","aria-label":x(r,{year:"numeric",month:"long"}).format(a),className:"flex h-full flex-col",children:[e("div",{role:"rowgroup",children:e("div",{role:"row",className:"grid grid-cols-7",children:S.map((t,n)=>e("span",{role:"columnheader","aria-label":_[n],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:t},n))})}),e("div",{ref:T,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:E.map((t,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(({date:t,label:o})=>{const r=!N(t,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},t.getTime());const c=s.some(e=>M(e,t)),i=null!==C&&w(t,C[0])>=0&&w(t,C[1])<=0,d=null!==C&&i&&M(t,C[0]),y=null!==C&&i&&M(t,C[1]);return e($,{label:o,selected:c,inRange:i&&!c,rangeEdge:i?d&&y?"both":d?"start":y?"end":"middle":null,current:M(t,z)&&!c,muted:r,disabled:f(t),focused:M(t,u),className:`size-(--_mp-cell) ${h[n]}`,onClick:()=>v(t),onPointerEnter:()=>b?.(t),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-l+7)%7,o=L(e.currentTarget),r={ArrowLeft:()=>p(t,-o),ArrowRight:()=>p(t,o),ArrowUp:()=>p(t,-7),ArrowDown:()=>p(t,7),Home:()=>p(t,-n),End:()=>p(t,6-n),PageUp:()=>g(t,e.shiftKey?-12:-1),PageDown:()=>g(t,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),D(r()))})(e,t),children:t.getDate()},t.getTime())})},o))})]})}function I({size:t,locale:n,month:o,chosen:r,minDate:l,maxDate:a,onMoveCursor:s,onPick:c}){const i=k(n,"short"),u=k(n,"long"),m=o.getFullYear(),d=new Date,f=e=>{const t=L(e.currentTarget),n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),s(g(z(o),n)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(n=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(s=>{const p=3*n+s,g=_(m,p,1),v=_(m,p,b(m,p));return e($,{label:`${u[p]} ${m}`,selected:r.some(e=>e.getFullYear()===m&&e.getMonth()===p),current:d.getFullYear()===m&&d.getMonth()===p,disabled:P(l)&&w(v,l)<0||P(a)&&w(g,a)>0,focused:p===o.getMonth(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>c(p),onKeyDown:f,children:i[p]},p)})},n))})}function O({size:t,month:n,chosen:o,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=Y(n.getFullYear()),i=(new Date).getFullYear(),u=e=>{const t=L(e.currentTarget),o={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-T,PageDown:T}[e.key];void 0!==o&&(e.preventDefault(),a(v(z(n),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e($,{label:String(d),selected:o.some(e=>e.getFullYear()===d),current:d===i,disabled:P(r)&&d<r.getFullYear()||P(l)&&d>l.getFullYear(),focused:d===n.getFullYear(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function q(e,t){return Number.isFinite(e)?Math.min(t,Math.max(1,Math.round(e))):1}function V(e){const t=e.parentElement;if(!t)return;const n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=n.top-o.top-t.clientTop+t.scrollTop,l=r+n.height;r<t.scrollTop?t.scrollTop=r:l>t.scrollTop+t.clientHeight&&(t.scrollTop=l-t.clientHeight)}export function MPTimeGrid({size:n,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:p,shouldDisableTime:g,autoFocus:v=!1,labels:y}){const w=l??a,b=o.useRef(null),[D,S]=o.useMemo(()=>C(r),[r]);o.useEffect(()=>{const e=b.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(V),v){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const M=o.useMemo(()=>{const e=c?12:24,t=q(m,e),n=Array.from({length:Math.ceil(e/t)},(e,n)=>n*t);return c?n.map(e=>0===e?12:e):n},[c,m]),N=o.useMemo(()=>{const e=q(d,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[d]),P=o.useMemo(()=>{const e=q(p,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[p]),_=e=>String(e).padStart(2,"0"),k=c?w.getHours()%12||12:w.getHours(),[j,z]=o.useState({}),F=(o,r,a,i,m)=>{const d=null===l?-1:a.findIndex(e=>i(e)),f=j[o]??(d>=0?d:0);return e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),onKeyDown:e=>{const t={ArrowDown:1,ArrowUp:-1,PageDown:5,PageUp:-5}[e.key],n=void 0!==t?(e=>{const t=[...e.children].indexOf(document.activeElement);return t>=0?t:f})(e.currentTarget)+t:"Home"===e.key?0:"End"===e.key?a.length-1:null;null!==n&&(e.preventDefault(),((e,t)=>{const n=Math.min(a.length-1,Math.max(0,e)),r=t.children[n];z(e=>({...e,[o]:n})),r instanceof HTMLElement&&(r.focus({preventScroll:!0}),V(r))})(n,e.currentTarget))},children:a.map((r,a)=>{const d=((e,t)=>E(w,"hour"===e?{hours:c?t%12+(w.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:w.getHours()%12+12*t}))(o,r),p=null!==l&&i(r),v=g?.(d,o)??!1;return t("button",{type:"button",role:"option","aria-selected":p,"aria-disabled":v||void 0,"data-chosen":p?"true":void 0,tabIndex:a===f?0:-1,className:[H,"rounded-mp-full h-(--_mp-cell) w-full shrink-0",h[n],v?"cursor-default text-mp-on-surface/38":p?"bg-(--_mp-accent) text-(--_mp-on-accent)":"text-mp-on-surface"].join(" "),onFocus:()=>z(e=>({...e,[o]:a})),onClick:()=>{v||s(d)},children:[v?null:e(u,{}),m(r)]},r)})},o)};return t("div",{ref:b,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":B[n]},children:[F("hour",y.hour,M,e=>e===k,e=>c?String(e):_(e)),F("minute",y.minute,N,e=>e===w.getMinutes(),_),i?F("second",y.second,P,e=>e===w.getSeconds(),_):null,c?F("meridiem",y.meridiem,[0,1],e=>(w.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:f,"aria-live":"polite",children:null===l?"":x(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}