material-plus-ui 1.4.0 → 1.6.0

package/dist/components/text-field/MPTextField.d.ts

@@ -1,9 +1,19 @@
 import * as React from 'react';
 import type { MPMessages } from '../../internal/i18n.js';
-import type { MPStyleProps } from '../../types.js';
-/** The input modes this field is built for. */
-export type MPTextFieldType = 'email' | 'password' | 'text';
-export interface MPTextFieldProps extends MPStyleProps {
+import type { MPControlEventProps, MPStyleProps } from '../../types.js';
+/**
+ * The input modes this field is built for.
+ *
+ * `search` is here for the keyboard it summons and the autofill it declines
+ * rather than for anything visual: iOS labels the return key "search" for it,
+ * and a browser keeps its own history of what was typed into one. The field
+ * draws exactly as `text` does — the browser's own clear button is suppressed by
+ * the same reset every other control in the library gets — because a search box
+ * that came with a second × next to `MPTextField`'s adornments would be two
+ * affordances doing one job.
+ */
+export type MPTextFieldType = 'email' | 'password' | 'search' | 'text';
+export interface MPTextFieldProps extends MPStyleProps, MPControlEventProps<HTMLInputElement | HTMLTextAreaElement> {
     /**
      * The field's text. This is a controlled component: what is shown is what is
      * passed, except during composition — see `onChange`.
@@ -63,10 +73,17 @@ export interface MPTextFieldProps extends MPStyleProps {
      */
     readOnly?: boolean;
     /**
-     * Swallows the Enter key instead of letting it insert a newline. Only
-     * meaningful with `rows`, since a single-line field has no newline to insert
-     * — there, Enter is already prevented so it cannot submit a surrounding form
-     * twice.
+     * Takes the Enter key away from whatever would otherwise have it.
+     *
+     * With `rows` that is the newline, which is the usual reason to reach for
+     * this: a multiline field wired to `onSubmit` where Enter should send rather
+     * than wrap.
+     *
+     * On a single-line field it is the *form* — Enter in an `<input>` inside a
+     * `<form>` submits it — so this is how a field opts out of a submission it
+     * has no part in. A field with an `onSubmit` already opts out, because
+     * answering the key twice is the same accident spelled differently.
+     * @default false
      */
     disableEnterKey?: boolean;
     /**
@@ -113,16 +130,23 @@ export interface MPTextFieldProps extends MPStyleProps {
      * Called when Enter is pressed.
      *
      * On a single-line field the key is then swallowed, so a surrounding form is
-     * submitted once rather than also natively.
+     * submitted once rather than also natively. **Passing this is what makes the
+     * field take the key at all**: without it Enter is left to the browser, which
+     * inside a `<form>` means the native submit an `<input>` has always done. A
+     * page that already writes `<form onSubmit>` needs nothing here.
      *
-     * On a **multiline** field it is not, and both things happen: this fires *and*
-     * a newline is inserted. That is deliberate — the prop reports the keystroke
-     * rather than deciding what the field does with it — but it is worth knowing
-     * before wiring it to something that sends. `disableEnterKey` is what makes
-     * Enter a submission there and nothing else.
+     * On a **multiline** field it is not swallowed, and both things happen: this
+     * fires *and* a newline is inserted. That is deliberate — the prop reports the
+     * keystroke rather than deciding what the field does with it — but it is worth
+     * knowing before wiring it to something that sends. `disableEnterKey` is what
+     * makes Enter a submission there and nothing else.
      *
      * Never called for the Enter that commits an IME composition: that keystroke
      * belongs to the input method, not to the form.
+     *
+     * An `onKeyDown` of your own runs before this and can take the keystroke: an
+     * `event.preventDefault()` there means no submission is reported and the
+     * field does nothing further with the key.
      */
     onSubmit?: () => void;
     /**
@@ -130,6 +154,14 @@ export interface MPTextFieldProps extends MPStyleProps {
      * form-level error that a further edit has made stale.
      */
     onFormReset?: () => void;
+    /**
+     * Added to the field's outermost element — the box around the control and its
+     * supporting line, rather than to the `<input>` itself. The control carries a
+     * type scale of its own, so a `text-*` written here does not reach it; that is
+     * what `size` is for.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * A Material Design text field that survives an IME.

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 r}from"../icon/MPIcon.js";import{MPFieldLabel as a,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:E=!1,readOnly:N=!1,autoFocus:S=!1,size:F="md",disabled:P=!1,disableEnterKey:q=!1,rows:D,maxLength:L,startIcon:R,resizable:I=!1,id:O,locale:B,passwordLabels:K},T){const U=u(B),$=c(m,U,K),_=o.useRef(null),[W,A]=o.useState(!1),[G,H]=o.useState(!1),[J,Q]=o.useState(x),V=o.useId(),X=O??V,Y=!!D,Z=z.length>0,ee=f[F],te=G?J:x,{shrunk:oe,focusProps:ne}=l({floating:w&&!!v,filled:te.length>0,pinned:!!R}),re=o.useCallback(e=>{_.current=e,"function"==typeof T?T(e):T&&(T.current=e)},[T]),ae=e=>{e.preventDefault()};return o.useEffect(()=>{G||Q(x)},[x,G]),o.useEffect(()=>{S&&!window.matchMedia("(max-width: 599.95px)").matches&&_.current?.focus()},[]),t(n.Root,{className:["mp-text-field group relative",E?"w-full":"inline-block","align-top"].join(" "),disabled:P,invalid:Z,"data-mp-size":F,...ne,children:[t("div",{className:["relative flex w-full items-center gap-2",ee.padding,Y?"py-2":""].filter(Boolean).join(" "),children:[e(i,{label:v,required:M,notched:oe}),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:Y?e("textarea",{rows:D}):e("input",{}),id:X,name:b,type:Y?void 0:W?"text":g,required:M,readOnly:N,disabled:P,autoComplete:h,placeholder:oe?y:void 0,maxLength:L,value:te,ref:re,className:[`${ee.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",ee.control,Y?"py-0":"",Y&&I?"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;G&&Q(t),j?.(t)},onCompositionStart:()=>{H(!0),Q(x)},onCompositionUpdate:e=>{Q(e.target.value)},onCompositionEnd:e=>{H(!1);const t=e.target.value;C?.(),j?.(t),Q(t)},onKeyDown:e=>{if("Enter"===e.key){if(function(e){const t=e.nativeEvent;return t.isComposing||229===t.keyCode}(e))return;k?.(),Y&&!q||e.preventDefault()}}}),"password"!==g||Y?null:e("button",{type:"button","aria-label":W?$.hidePassword:$.showPassword,onClick:()=>A(e=>!e),onMouseDown:ae,onMouseUp:ae,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(r,{icon:W?d:p,size:ee.icon})}),v?e(a,{size:F,label:v,required:M,htmlFor:X,shrunk:oe,multiline:Y}):null]}),e(s,{errorMessage:z,className:`mp-text-field__support mt-1 ${ee.padding}`})]})});
+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 r}from"../icon/MPIcon.js";import{MPFieldLabel as a,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";import{useMPSize as f}from"../../internal/config.js";const x={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:b,name:g,type:y="text",placeholder:h,autoComplete:v,label:w,floatingLabel:C=!0,onChange:j,onFormReset:k,onSubmit:M,onKeyDown:z,onKeyUp:D,onFocus:F,onBlur:N,onClick:E,onDoubleClick:P,onContextMenu:S,errorMessage:B="",required:K=!1,fullWidth:q=!1,readOnly:L=!1,autoFocus:R=!1,size:U,disabled:I=!1,disableEnterKey:O=!1,rows:T,maxLength:$,startIcon:_,resizable:W=!1,id:A,locale:G,passwordLabels:H,className:J,style:Q},V){const X=f(U),Y=u(G),Z=c(m,Y,H),ee=o.useRef(null),[te,oe]=o.useState(!1),[ne,re]=o.useState(!1),[ae,ie]=o.useState(b),le=o.useId(),se=A??le,de=!!T,pe=B.length>0,ue=x[X],ce=ne?ae:b,{shrunk:me,focusProps:fe}=l({floating:C&&!!w,filled:ce.length>0,pinned:!!_}),xe=o.useCallback(e=>{ee.current=e,"function"==typeof V?V(e):V&&(V.current=e)},[V]),be=e=>{e.preventDefault()};return o.useEffect(()=>{ne||ie(b)},[b,ne]),o.useEffect(()=>{R&&!window.matchMedia("(max-width: 599.95px)").matches&&ee.current?.focus()},[]),t(n.Root,{className:["mp-text-field group relative",q?"w-full":"inline-block","align-top",J??""].filter(Boolean).join(" "),style:Q,disabled:I,invalid:pe,"data-mp-size":X,...fe,children:[t("div",{className:["relative flex w-full items-center gap-2",ue.padding,de?"py-2":""].filter(Boolean).join(" "),children:[e(i,{label:w,required:K,notched:me}),_?e("span",{className:"text-mp-on-surface-variant group-data-disabled:text-mp-on-surface/38 flex shrink-0 items-center",children:_}):null,e(n.Control,{render:de?e("textarea",{rows:T}):e("input",{}),id:se,name:g,type:de?void 0:te?"text":y,required:K,readOnly:L,disabled:I,autoComplete:v,placeholder:me?h:void 0,maxLength:$,value:ce,ref:xe,className:[`${ue.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",ue.control,de?"py-0":"",de&&W?"resize-y":"resize-none","search"===y?"[&::-webkit-search-cancel-button]:hidden":"","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=>{k?.();const t=e.target.value;ne&&ie(t),j?.(t)},onCompositionStart:()=>{re(!0),ie(b)},onCompositionUpdate:e=>{ie(e.target.value)},onCompositionEnd:e=>{re(!1);const t=e.target.value;k?.(),j?.(t),ie(t)},onKeyUp:D,onFocus:F,onBlur:N,onClick:E,onDoubleClick:P,onContextMenu:S,onKeyDown:e=>{if(z?.(e),!e.defaultPrevented&&"Enter"===e.key){if(function(e){const t=e.nativeEvent;return t.isComposing||229===t.keyCode}(e))return;M?.(),(O||M&&!de)&&e.preventDefault()}}}),"password"!==y||de?null:e("button",{type:"button","aria-label":te?Z.hidePassword:Z.showPassword,onClick:()=>oe(e=>!e),onMouseDown:be,onMouseUp:be,disabled:I,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(r,{icon:te?d:p,size:ue.icon})}),w?e(a,{size:X,label:w,required:K,htmlFor:se,shrunk:me,multiline:de}):null]}),e(s,{errorMessage:B,className:`mp-text-field__support mt-1 ${ue.padding}`})]})});

package/dist/components/time-picker/MPTimePicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as n from"react";import{MPButton as l}from"../button/MPButton.js";import{MPIcon as r}from"../icon/MPIcon.js";import{ClockIcon as t}from"../../constants/icons.js";import{MPTimeGrid as a}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as u}from"../../internal/Picker.js";import{useMPLocale as m,useMPMessages as d}from"../../internal/locale.js";import{PICKER as p}from"../../internal/messages/picker.js";import{CONTROL_ICON as h}from"../../internal/scale.js";import{formatDate as f,isHour12 as g,isValidDate as S,secondsOfDay as b,timeUnitSpan as j,toISOTime as v,withPlaceholder as C,withTime as x}from"../../internal/date.js";export const MPTimePicker=/*@__PURE__*/n.forwardRef(function({value:k,defaultValue:w,onValueChange:z,open:D,defaultOpen:O,onOpenChange:y,referenceDate:P,minTime:T,maxTime:M,shouldDisableTime:I,hour12:V,showSeconds:B=!1,hourStep:N=1,minuteStep:R=1,secondStep:F=1,locale:H,format:q,placeholder:A,clearable:E=!1,showNowButton:G=!0,closeOnSelect:J=!1,labels:K,name:L,size:Q="md",color:U="primary",readOnly:W=!1,disabled:X=!1,startIcon:Y,...Z},$){const _=m(H),ee=d(p,_,K),oe=V??g(_),[ne,le]=n.useState(w??null),re=void 0!==k?k:ne,[te,ae]=n.useState(O??!1),ie=D??te,[se]=n.useState(()=>P??new Date),ce=e=>{e&&(W||X)||(void 0===D&&ae(e),y?.(e))},ue=e=>{void 0===k&&le(e),z?.(e)},me=n.useCallback((e,o)=>{const[n,l]=j(o,e);return!!(S(T)&&l<b(T))||(!!(S(M)&&n>b(M))||(I?.(e,o)??!1))},[T,M,I]),de=q??{hour:"numeric",minute:"2-digit",hour12:oe,...B?{second:"2-digit"}:{}},pe=new Date,he=x(P??se,{hours:pe.getHours(),minutes:pe.getMinutes(),seconds:B?pe.getSeconds():0}),fe=G||E||!J,ge=C(u(_,de),A);return e(c,{...Z,slug:"time-picker",size:Q,color:U,readOnly:W,disabled:X,triggerRef:$,startIcon:void 0===Y?e(r,{icon:t,size:h[Q]}):Y,display:S(re)?f(re,_,de):A??"",samples:ge,empty:!S(re),clearable:E,onClear:()=>ue(null),open:ie,onOpenChange:ce,labels:ee,hiddenValues:L?[{name:L,value:S(re)?v(re,B):""}]:void 0,children:o("div",{className:"flex flex-col "+(fe?"gap-1.5":""),children:[e(a,{size:Q,locale:_,value:S(re)?re:null,referenceDate:P??se,onChange:e=>{ue(e),J&&ce(!1)},hour12:oe,showSeconds:B,hourStep:N,minuteStep:R,secondStep:F,shouldDisableTime:me,labels:ee,autoFocus:!0}),fe?o(s,{children:[E?e(l,{variant:"text",size:i[Q],color:U,onClick:()=>{ue(null),ce(!1)},children:ee.clear}):null,G?e(l,{variant:"text",size:i[Q],color:U,disabled:me(he,"second"),onClick:()=>{ue(he),ce(!1)},children:ee.now}):null,J?null:e(l,{variant:"filled",size:i[Q],color:U,onClick:()=>ce(!1),children:ee.done})]}):null]})})});
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as n from"react";import{MPButton as l}from"../button/MPButton.js";import{MPIcon as r}from"../icon/MPIcon.js";import{ClockIcon as t}from"../../constants/icons.js";import{MPTimeGrid as i}from"../../internal/Calendar.js";import{FOOTER_SIZE as a,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as u}from"../../internal/Picker.js";import{useMPLocale as m,useMPMessages as d}from"../../internal/locale.js";import{PICKER as p}from"../../internal/messages/picker.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{formatDate as h,isHour12 as g,isValidDate as j,secondsOfDay as S,timeUnitSpan as b,toISOTime as v,withPlaceholder as C,withTime as x}from"../../internal/date.js";import{useMPColor as k,useMPSize as w}from"../../internal/config.js";export const MPTimePicker=/*@__PURE__*/n.forwardRef(function({value:z,defaultValue:D,onValueChange:O,open:P,defaultOpen:T,onOpenChange:y,referenceDate:M,minTime:I,maxTime:V,shouldDisableTime:B,hour12:N,showSeconds:R=!1,hourStep:F=1,minuteStep:H=1,secondStep:q=1,locale:A,format:E,placeholder:G,clearable:J=!1,showNowButton:K=!0,closeOnSelect:L=!1,labels:Q,name:U,size:W,color:X,readOnly:Y=!1,disabled:Z=!1,startIcon:$,..._},ee){const oe=w(W),ne=k(X),le=m(A),re=d(p,le,Q),te=N??g(le),[ie,ae]=n.useState(D??null),se=void 0!==z?z:ie,[ce,ue]=n.useState(T??!1),me=P??ce,[de]=n.useState(()=>M??new Date),pe=e=>{e&&(Y||Z)||(void 0===P&&ue(e),y?.(e))},fe=e=>{void 0===z&&ae(e),O?.(e)},he=n.useCallback((e,o)=>{const[n,l]=b(o,e);return!!(j(I)&&l<S(I))||(!!(j(V)&&n>S(V))||(B?.(e,o)??!1))},[I,V,B]),ge=E??{hour:"numeric",minute:"2-digit",hour12:te,...R?{second:"2-digit"}:{}},je=new Date,Se=x(M??de,{hours:je.getHours(),minutes:je.getMinutes(),seconds:R?je.getSeconds():0}),be=K||J||!L,ve=C(u(le,ge),G);return e(c,{..._,slug:"time-picker",size:oe,color:ne,readOnly:Y,disabled:Z,triggerRef:ee,startIcon:void 0===$?e(r,{icon:t,size:f[oe]}):$,display:j(se)?h(se,le,ge):G??"",samples:ve,empty:!j(se),clearable:J,onClear:()=>fe(null),open:me,onOpenChange:pe,labels:re,hiddenValues:U?[{name:U,value:j(se)?v(se,R):""}]:void 0,children:o("div",{className:"flex flex-col "+(be?"gap-1.5":""),children:[e(i,{size:oe,locale:le,value:j(se)?se:null,referenceDate:M??de,onChange:e=>{fe(e),L&&pe(!1)},hour12:te,showSeconds:R,hourStep:F,minuteStep:H,secondStep:q,shouldDisableTime:he,labels:re,autoFocus:!0}),be?o(s,{children:[J?e(l,{variant:"text",size:a[oe],color:ne,onClick:()=>{fe(null),pe(!1)},children:re.clear}):null,K?e(l,{variant:"text",size:a[oe],color:ne,disabled:he(Se,"second"),onClick:()=>{fe(Se),pe(!1)},children:re.now}):null,L?null:e(l,{variant:"filled",size:a[oe],color:ne,onClick:()=>pe(!1),children:re.done})]}):null]})})});

package/dist/components/timeline/MPTimeline.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import type { MPStepConnector, MPStepStatus } from '../../internal/step.js';
 import type { MPColor, MPOrientation, MPSize } from '../../types.js';
 /**
  * How far along one item is.
@@ -9,9 +10,16 @@ import type { MPColor, MPOrientation, MPSize } from '../../types.js';
  * list. Each gets its own axis — a filled bullet, a filled bullet with a halo
  * around it, an empty one — rather than three shades of the same thing.
  */
-export type MPTimelineStatus = 'complete' | 'current' | 'upcoming';
+/**
+ * How far a step has got.
+ *
+ * The same three `MPStepper` uses, and the same table draws them — see
+ * `internal/step.ts` for why a timeline and a stepper are one picture drawn by
+ * two components.
+ */
+export type MPTimelineStatus = MPStepStatus;
 /** How the line between two items is drawn. `none` leaves the gap open. */
-export type MPTimelineConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+export type MPTimelineConnector = MPStepConnector;
 export interface MPTimelineProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
     /**
      * How far the sequence has got: the index of the item being worked on now.

package/dist/components/timeline/MPTimeline.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{useRender as n}from"@base-ui/react/use-render";import{accentSlots as l}from"../../internal/accent.js";import{hasContent as a,META_TEXT as o,PROSE_TEXT as i,SHEET_TITLE as s}from"../../internal/scale.js";const c=/*@__PURE__*/t.createContext(null),m=/*@__PURE__*/t.createContext({index:0,last:!1}),p={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"},d={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},u={xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},x={xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},f={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""},b={complete:"bg-(--_mp-accent) text-(--_mp-on-accent)",current:"bg-(--_mp-accent) text-(--_mp-on-accent) shadow-[0_0_0_0.25rem_var(--_mp-accent-container)]",upcoming:"border-mp-outline text-mp-on-surface-variant border-2 bg-transparent"},v={complete:"border-(--_mp-accent)",current:"border-mp-outline-variant",upcoming:"border-mp-outline-variant"},h={complete:"text-mp-on-surface",current:"text-(--_mp-accent)",upcoming:"text-mp-on-surface-variant"};export const MPTimelineItem=/*@__PURE__*/t.forwardRef(function({title:n,meta:g,bullet:_,status:N,color:j,connector:y="solid",className:z,style:w,children:$,...C},M){const P=t.useContext(c),{index:B,last:k}=t.useContext(m),A=P?.size??"md",R=P?.orientation??"vertical",T=j??P?.color??"primary",I=P?.active??null,q=N??(null===I?"upcoming":B<I?"complete":B===I?"current":"upcoming"),D="horizontal"===R,E="none"!==y&&!k,F=e("span",{"aria-hidden":"true",className:["rounded-mp-full relative z-10 flex shrink-0 items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",b[q],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)"].join(" "),children:_}),G=E?e("span",{"aria-hidden":"true",className:["pointer-events-none absolute",D?"start-(--_mp-bullet) top-[calc(var(--_mp-bullet)/2_-_1px)] end-0 border-t-2":"top-(--_mp-bullet) start-[calc(var(--_mp-bullet)/2_-_1px)] bottom-0 border-s-2",f[y],v[q]].filter(Boolean).join(" ")}):null,H=r("div",{className:"flex min-w-0 flex-col gap-0.5 "+(D?"mt-2":""),children:[a(n)||a(g)?r("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[a(n)?e("span",{className:`${s[A]} ${h[q]}`,children:n}):null,a(g)?e("span",{className:`text-mp-on-surface-variant ${o}`,children:g}):null]}):null,a($)?e("div",{className:`text-mp-on-surface-variant ${i[A]}`,children:$}):null]});return r("li",{ref:M,"aria-current":"current"===q?"step":void 0,"data-status":q,className:["relative",D?`flex min-w-0 flex-1 flex-col ${k?"":x[A]}`:`flex ${d[A]} ${k?"":u[A]}`,z??""].filter(Boolean).join(" "),style:{"--_mp-bullet":p[A],...l(T),...w},...C,children:[G,F,H]})});export const MPTimeline=/*@__PURE__*/t.forwardRef(function({active:r,size:l="md",color:a="primary",orientation:o="vertical",render:i,className:s,style:p,children:d,...u},x){const f=t.Children.toArray(d),b=f.length,v=t.useMemo(()=>({size:l,orientation:o,color:a,active:r??null}),[l,o,a,r]),h=t.useMemo(()=>Array.from({length:b},(e,r)=>({index:r,last:r===b-1})),[b]),g=n({render:i??e("ol",{}),ref:x,props:{role:"list","data-mp-size":l,className:["mp-timeline flex","horizontal"===o?"flex-row":"flex-col",s??""].filter(Boolean).join(" "),style:p,children:f.map((r,t)=>e(m.Provider,{value:h[t],children:r},t)),...u}});return e(c.Provider,{value:v,children:g})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as n}from"../../internal/accent.js";import{hasContent as o,META_TEXT as a,PROSE_TEXT as i,SHEET_TITLE as s}from"../../internal/scale.js";import{useMPColor as c,useMPSize as m}from"../../internal/config.js";import{BORDER_STYLE as u,BULLET as d,BULLET_GAP as p,BULLET_SIZE as f,CONNECTOR_COLOR as x,ITEM_GAP as h,ITEM_GAP_X as v,TITLE_COLOR as b}from"../../internal/step.js";const j=/*@__PURE__*/l.createContext(null),N=/*@__PURE__*/l.createContext({index:0,last:!1});export const MPTimelineItem=/*@__PURE__*/l.forwardRef(function({title:r,meta:c,bullet:m,status:_,color:g,connector:y="solid",className:z,style:w,children:$,...C},M){const P=l.useContext(j),{index:B,last:k}=l.useContext(N),A=P?.size??"md",R=P?.orientation??"vertical",T=g??P?.color??"primary",I=P?.active??null,q=_??(null===I?"upcoming":B<I?"complete":B===I?"current":"upcoming"),D="horizontal"===R,E="none"!==y&&!k,F=e("span",{"aria-hidden":"true",className:["rounded-mp-full relative z-10 flex shrink-0 items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",d[q],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)"].join(" "),children:m}),G=E?e("span",{"aria-hidden":"true",className:["pointer-events-none absolute",D?"start-(--_mp-bullet) top-[calc(var(--_mp-bullet)/2_-_1px)] end-0 border-t-2":"top-(--_mp-bullet) start-[calc(var(--_mp-bullet)/2_-_1px)] bottom-0 border-s-2",u[y],x[q]].filter(Boolean).join(" ")}):null,H=t("div",{className:"flex min-w-0 flex-col gap-0.5 "+(D?"mt-2":""),children:[o(r)||o(c)?t("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[o(r)?e("span",{className:`${s[A]} ${b[q]}`,children:r}):null,o(c)?e("span",{className:`text-mp-on-surface-variant ${a}`,children:c}):null]}):null,o($)?e("div",{className:`text-mp-on-surface-variant ${i[A]}`,children:$}):null]});return t("li",{ref:M,"aria-current":"current"===q?"step":void 0,"data-status":q,className:["relative",D?`flex min-w-0 flex-1 flex-col ${k?"":v[A]}`:`flex ${p[A]} ${k?"":h[A]}`,z??""].filter(Boolean).join(" "),style:{"--_mp-bullet":f[A],...n(T),...w},...C,children:[G,F,H]})});export const MPTimeline=/*@__PURE__*/l.forwardRef(function({active:t,size:n,color:o,orientation:a="vertical",render:i,className:s,style:u,children:d,...p},f){const x=m(n),h=c(o),v=l.Children.toArray(d),b=v.length,_=l.useMemo(()=>({size:x,orientation:a,color:h,active:t??null}),[x,a,h,t]),g=l.useMemo(()=>Array.from({length:b},(e,t)=>({index:t,last:t===b-1})),[b]),y=r({render:i??e("ol",{}),ref:f,props:{role:"list","data-mp-size":x,className:["mp-timeline flex","horizontal"===a?"flex-row":"flex-col",s??""].filter(Boolean).join(" "),style:u,children:v.map((t,l)=>e(N.Provider,{value:g[l],children:t},l)),...p}});return e(j.Provider,{value:_,children:y})});

package/dist/components/toggle/MPToggle.js

@@ -1,2 +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]})});
+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";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={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"},g={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)"},x={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:v,size:h,color:j,disabled:w,pressed:_,defaultPressed:y,onPressedChange:P,value:z,startIcon:C,endIcon:k,fullWidth:I=!1,className:N,style:B,children:L,...M},R){const S=n.useContext(a),T=v??S?.variant??"outlined",W=f(h??S?.size),$=u(j??S?.color),q=w??S?.disabled??!1,A=!d(L);return t(r,{ref:R,value:z,pressed:_,defaultPressed:y,onPressedChange:e=>P?.(e),disabled:q,"data-mp-size":W,"data-mp-variant":T,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[W],m[W],i[W],A?`${p[W]} px-0`:l[W],q?x[T]:e.pressed?g[T]:b[T],q?"cursor-default":"",I?"w-full":"",N??""].filter(Boolean).join(" "),style:{...o($),...B},...M,children:[q?null:e(s,{}),C,L,k]})});

package/dist/components/transfer/MPTransfer.js

@@ -1,2 +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})]})});
+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{useMPColor as f,useMPSize as u}from"../../internal/config.js";import{hasContent as p,META_TEXT as v,SHEET_PAD_X as b}from"../../internal/scale.js";const g={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},x={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"};function w({title:t,rows:r,total:n,ticked:o,onTick:c,onTickAll:m,search:d,onSearch:h,searchable:f,disabled:u,height:p,messages:w,variant:k,size:j,color:S}){const y=r.filter(e=>!e.disabled),N=y.filter(e=>o.has(e.value)),z=y.length>0&&N.length===y.length,C=N.length>0&&!z,T=b[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,g[j]].join(" "),children:[e("div",{className:"min-w-0 flex-1",children:e(s,{size:j,color:S,checked:z,indeterminate:C,disabled:u||0===y.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 ${v}`,children:[N.length,"/",n]})]}),f?e("div",{className:`${T} ${g[j]}`,children:e(i,{size:j,fullWidth:!0,disabled:u,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} ${g[j]}`,style:{height:p},children:0===r.length?e("span",{className:`text-mp-on-surface-variant ${v} ${x[j]}`,children:w.empty}):r.map((a,t)=>e("div",{className:x[j],children:e(s,{size:j,color:S,label:a.label,checked:o.has(a.value),disabled:u||a.disabled,onCheckedChange:e=>c(a.value,e)})},`${t}:${a.value}`))})]})}function k(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:v,sourceLabel:b,targetLabel:g,searchable:x=!1,height:j=220,disabled:S=!1,variant:y="outlined",size:N,color:z,locale:C,labels:T,className:$,..._},M){const P=u(N),L=f(z),A=c(C),B=m(h,A,T),[I,V]=t.useState(i??[]),E=s??I,[F,R]=t.useState(()=>new Set),[W,q]=t.useState(""),[D,G]=t.useState(""),H=t.useMemo(()=>new Set(E),[E]),J=l.filter(e=>!H.has(e.value)),K=l.filter(e=>H.has(e.value));t.useEffect(()=>{const e=new Set(l.map(e=>e.value));R(a=>{const t=[...a].filter(a=>e.has(a));return t.length===a.size?a:new Set(t)})},[l]);const O=(e,a)=>{R(t=>{const l=new Set(t);return a?l.add(e):l.delete(e),l})},Q=(e,a)=>{R(t=>{const l=new Set(t);for(const t of e)t.disabled||(a?l.add(t.value):l.delete(t.value));return l})},U=(e,a)=>{const t=e.filter(e=>!e.disabled&&F.has(e.value));if(0===t.length)return;const r=new Set(t.map(e=>e.value)),n=a?l.filter(e=>H.has(e.value)||r.has(e.value)).map(e=>e.value):E.filter(e=>!r.has(e));R(e=>new Set([...e].filter(e=>!r.has(e)))),(e=>{void 0===s&&V(e),v?.(e)})(n)},X=J.filter(e=>k(e,W)),Y=K.filter(e=>k(e,D)),Z=X.some(e=>!e.disabled&&F.has(e.value)),ee=Y.some(e=>!e.disabled&&F.has(e.value)),ae=d(j),te={ticked:F,disabled:S,height:ae,messages:B,variant:y,size:P,color:L,searchable:x};return a("div",{ref:M,"data-mp-size":P,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)]",$??""].filter(Boolean).join(" "),..._,children:[e(w,{...te,title:p(b)?b:B.source,rows:X,total:J.length,onTick:O,onTickAll:e=>Q(X,e),search:W,onSearch:q}),a("div",{className:"flex flex-row justify-center gap-2 min-[600px]:flex-col",children:[e(n,{size:P,color:L,variant:"text"===y?"text":"outlined",label:B.toTarget,disabled:S||!Z,onClick:()=>U(X,!0),icon:e(r,{icon:o,className:"rotate-90 min-[600px]:rotate-0"})}),e(n,{size:P,color:L,variant:"text"===y?"text":"outlined",label:B.toSource,disabled:S||!ee,onClick:()=>U(Y,!1),icon:e(r,{icon:o,className:"-rotate-90 min-[600px]:rotate-180"})})]}),e(w,{...te,title:p(g)?g:B.target,rows:Y,total:K.length,onTick:O,onTickAll:e=>Q(Y,e),search:D,onSearch:G})]})});

package/dist/components/typography/MPTypography.d.ts

@@ -40,6 +40,13 @@ export interface MPTypographyProps extends Omit<React.ComponentPropsWithoutRef<'
      * has **no default**: prose inherits the surface's own ink unless a role is
      * asked for, because the common case for a paragraph is to look like the
      * paragraphs around it.
+     *
+     * No default means no declaration, not a quiet one. Nothing here writes a
+     * `color` until this prop is passed, so a `text-white` on the dark section
+     * above wins by simply being the only thing that spoke — and a role outside
+     * the four accents is a `className` away: `className="text-mp-on-surface-variant"`
+     * on a `caption` is the muted line this component used to hand out whether or
+     * not it was wanted.
      */
     color?: MPColor;
     /**

package/dist/components/typography/MPTypography.js

@@ -1,2 +1 @@
-"use client";
-import*as p from"react";import{useRender as t}from"@base-ui/react/use-render";import{accentSlots as e}from"../../internal/accent.js";const r={h1:"[&.mp-typography]:text-mp-display-small",h2:"[&.mp-typography]:text-mp-headline-large",h3:"[&.mp-typography]:text-mp-headline-medium",h4:"[&.mp-typography]:text-mp-headline-small",h5:"[&.mp-typography]:text-mp-title-large",h6:"[&.mp-typography]:text-mp-title-medium",lead:"[&.mp-typography]:text-mp-title-large",body:"[&.mp-typography]:text-mp-body-large",caption:"[&.mp-typography]:text-mp-body-small",overline:"[&.mp-typography]:text-mp-label-small [&.mp-typography]:tracking-[0.08em] uppercase"},a={h1:"regular",h2:"regular",h3:"regular",h4:"regular",h5:"regular",h6:"medium",lead:"regular",body:"regular",caption:"regular",overline:"medium"},m={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},o=new Set(["caption","overline"]),y={h1:"[&.mp-typography]:mb-4",h2:"[&.mp-typography]:mb-3.5",h3:"[&.mp-typography]:mb-3",h4:"[&.mp-typography]:mb-2.5",h5:"[&.mp-typography]:mb-2",h6:"[&.mp-typography]:mb-2",lead:"[&.mp-typography]:mb-4",body:"[&.mp-typography]:mb-3",caption:"[&.mp-typography]:mb-2",overline:"[&.mp-typography]:mb-2"},h="[&.mp-typography]:mt-0 [&.mp-typography]:ms-0 [&.mp-typography]:me-0",l={regular:"[&.mp-typography]:font-normal",medium:"[&.mp-typography]:font-medium",semibold:"[&.mp-typography]:font-semibold",bold:"[&.mp-typography]:font-bold"},n={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},g={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const MPTypography=/*@__PURE__*/p.forwardRef(function({level:i="body",color:c,weight:d,align:s,lines:u,gutter:b=!1,render:x,className:f,style:v,children:j,...w},N){const k=["mp-typography",r[i],l[d??a[i]],h,b?y[i]:"[&.mp-typography]:mb-0",s?n[s]:"",u?g[u]??"line-clamp-6":"",c?"[&.mp-typography]:text-(--_mp-accent)":o.has(i)?"[&.mp-typography]:text-mp-on-surface-variant":"[&.mp-typography]:text-mp-on-surface",f??""].filter(Boolean).join(" ");return t({render:x??p.createElement(m[i]),ref:N,props:{className:k,style:c?{...e(c),...v}:v,children:j,...w}})});
+import*as p from"react";import{useRender as e}from"@base-ui/react/use-render";import{accentSlots as t}from"../../internal/accent.js";const r={h1:"[&.mp-typography]:text-mp-display-small",h2:"[&.mp-typography]:text-mp-headline-large",h3:"[&.mp-typography]:text-mp-headline-medium",h4:"[&.mp-typography]:text-mp-headline-small",h5:"[&.mp-typography]:text-mp-title-large",h6:"[&.mp-typography]:text-mp-title-medium",lead:"[&.mp-typography]:text-mp-title-large",body:"[&.mp-typography]:text-mp-body-large",caption:"[&.mp-typography]:text-mp-body-small",overline:"[&.mp-typography]:text-mp-label-small [&.mp-typography]:tracking-[0.08em] uppercase"},a={h1:"regular",h2:"regular",h3:"regular",h4:"regular",h5:"regular",h6:"medium",lead:"regular",body:"regular",caption:"regular",overline:"medium"},m={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},y={h1:"[&.mp-typography]:mb-4",h2:"[&.mp-typography]:mb-3.5",h3:"[&.mp-typography]:mb-3",h4:"[&.mp-typography]:mb-2.5",h5:"[&.mp-typography]:mb-2",h6:"[&.mp-typography]:mb-2",lead:"[&.mp-typography]:mb-4",body:"[&.mp-typography]:mb-3",caption:"[&.mp-typography]:mb-2",overline:"[&.mp-typography]:mb-2"},o="[&.mp-typography]:mt-0 [&.mp-typography]:ms-0 [&.mp-typography]:me-0",l={regular:"[&.mp-typography]:font-normal",medium:"[&.mp-typography]:font-medium",semibold:"[&.mp-typography]:font-semibold",bold:"[&.mp-typography]:font-bold"},h={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},n={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const MPTypography=/*@__PURE__*/p.forwardRef(function({level:g="body",color:i,weight:d,align:c,lines:s,gutter:b=!1,render:u,className:x,style:f,children:v,...j},w){const N=["mp-typography",r[g],l[d??a[g]],o,b?y[g]:"[&.mp-typography]:mb-0",c?h[c]:"",s?n[s]??"line-clamp-6":"",i?"[&.mp-typography]:text-(--_mp-accent)":"",x??""].filter(Boolean).join(" ");return e({render:u??p.createElement(m[g]),ref:w,props:{className:N,style:i?{...t(i),...f}:f,children:v,...j}})});

package/dist/components/visually-hidden/MPVisuallyHidden.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+export interface MPVisuallyHiddenProps extends React.ComponentPropsWithoutRef<'span'> {
+    /** Renders something other than a `<span>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Text for a screen reader and nobody else.
+ *
+ * The sentence behind a bare number on a badge, the "opens in a new tab" after a
+ * link's label, the name an avatar's initials stand in for, the direction a
+ * sorted column is sorted in. In every one of those the visible mark is a
+ * shorthand a reader who can see it expands instantly and a reader who cannot
+ * gets nothing at all from.
+ *
+ * ```tsx
+ * <button>
+ *   <MPIcon icon={ICONS.close} />
+ *   <MPVisuallyHidden>Close this dialog</MPVisuallyHidden>
+ * </button>
+ * ```
+ *
+ * Nine components in this library were already drawing themselves with it —
+ * `MPPagination`'s live region, `MPRating`'s radios, `MPShortcut`'s key names,
+ * `MPCarousel`'s slide announcement — and an application putting a bare glyph in
+ * a button of its own had no way to reach the same treatment. It had the rule,
+ * not the name.
+ *
+ * ## Not `hidden`, not `display: none`, not `opacity: 0`
+ *
+ * The first two take the text off the accessibility tree along with the screen,
+ * which is the opposite of what is wanted, and the third leaves a clickable ghost
+ * the size of the words. A 1px clipped box is the one form that is invisible to
+ * a sighted reader and present to every other kind.
+ *
+ * ## Why not `sr-only`
+ *
+ * Which is Tailwind's own utility for this, and it is what the rule below is
+ * written out from. It is written out because `sr-only` is *generated*: a
+ * project running its own Tailwind build with a `prefix` configured generates it
+ * under a different name, and a component that hardcoded `sr-only` would come
+ * out visible on their page. The arbitrary properties survive any prefix.
+ *
+ * ## It stays in the layout
+ *
+ * `position: absolute`, so it takes no room — but it is still *in* the document,
+ * which is the whole point: it is read in the order it is written. Put it where
+ * the sentence belongs rather than at the end of the block.
+ *
+ * ## Sharp edges
+ *
+ * - **A focusable thing inside this stays focusable**, and a reader tabbing into
+ *   it lands somewhere they cannot see. Anything that can take focus wants
+ *   `aria-label` on the control instead.
+ * - **It is not a live region.** Text swapped inside it is not announced unless
+ *   the element also carries `aria-live` — which is exactly what the components
+ *   above pass through.
+ */
+export declare const MPVisuallyHidden: React.ForwardRefExoticComponent<MPVisuallyHiddenProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/visually-hidden/MPVisuallyHidden.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as r}from"react/jsx-runtime";import*as e from"react";import{useRender as n}from"@base-ui/react/use-render";import{VISUALLY_HIDDEN as a}from"../../internal/visually-hidden.js";export const MPVisuallyHidden=/*@__PURE__*/e.forwardRef(function({render:e,className:i,children:o,...s},t){return n({render:e??r("span",{}),ref:t,props:{...s,className:[a,i].filter(Boolean).join(" "),children:o}})});

package/dist/components/visually-hidden/index.d.ts

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

package/dist/components/visually-hidden/index.js

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

package/dist/constants/glyphs.d.ts

@@ -34,6 +34,8 @@ export declare const LinkIcon: import("react").ForwardRefExoticComponent<Omit<im
 export declare const ExternalLinkIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Copy to clipboard. */
 export declare const CopyIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** A picture that could not be fetched — `MPImage`'s own fallback. */
+export declare const BrokenImageIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Severity: something worth knowing. */
 export declare const InfoIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Severity: it worked. */

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,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;
+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 I,ChevronsRight as x,ChevronUp as i,CircleAlert as h,CircleCheck as C,Clock as a,Copy as l,Ellipsis as v,ExternalLink as f,Eye as d,ImageOff as g,EyeOff as k,Info as w,Link as m,LoaderCircle as A,Menu as L,Minus as R,Plus as S,Search as u,Star as y,TriangleAlert as U,Upload as b,X as D}from"lucide-react";export const VisibilityIcon=d;export const VisibilityOffIcon=k;export const CloseIcon=D;export const CheckIcon=r;export const ChevronDownIcon=e;export const ChevronUpIcon=i;export const ChevronLeftIcon=s;export const ChevronRightIcon=p;export const ChevronsLeftIcon=I;export const ChevronsRightIcon=x;export const SearchIcon=u;export const ArrowUpIcon=t;export const ArrowDownIcon=o;export const ArrowRightIcon=n;export const MoreIcon=v;export const LinkIcon=m;export const ExternalLinkIcon=f;export const CopyIcon=l;export const BrokenImageIcon=g;export const InfoIcon=w;export const SuccessIcon=C;export const WarningIcon=U;export const ErrorIcon=h;export const AddIcon=S;export const RemoveIcon=R;export const UploadIcon=b;export const CalendarIcon=c;export const ClockIcon=a;export const StarIcon=y;export const SpinnerIcon=A;export const MenuIcon=L;

package/dist/constants/icons.d.ts

@@ -60,6 +60,7 @@ export declare const ICONS: {
     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>>;
+    readonly 'broken-image': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly info: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly success: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly warning: 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,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};
+export*from"./glyphs.js";import{VisibilityIcon as r,VisibilityOffIcon as o,CloseIcon as e,CheckIcon as n,ChevronDownIcon as i,ChevronUpIcon as c,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 g,MenuIcon as m,LinkIcon as d,ExternalLinkIcon as w,CopyIcon as k,BrokenImageIcon as u,InfoIcon as y,SuccessIcon as b,WarningIcon as x,ErrorIcon as j,AddIcon as C,RemoveIcon as I,UploadIcon as N,CalendarIcon as O,ClockIcon as S,StarIcon as q,SpinnerIcon as z}from"./glyphs.js";export const ICONS={visibility:r,"visibility-off":o,close:e,check:n,"chevron-down":i,"chevron-up":c,"chevron-left":s,"chevron-right":h,"chevrons-left":l,"chevrons-right":t,search:a,"arrow-up":p,"arrow-down":v,"arrow-right":f,more:g,menu:m,link:d,"external-link":w,copy:k,"broken-image":u,info:y,success:b,warning:x,error:j,add:C,remove:I,upload:N,calendar:O,clock:S,star:q,spinner:z};

package/dist/hooks/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The machinery this library was already running, with a name a consumer can
+ * import.
+ *
+ * Every hook here existed in `internal/` before it existed here, and each was
+ * exported for the same reason: an application that has told the library
+ * something — or that has to answer a question the library has already answered
+ * for itself — should not have to answer it a second time, in numbers or in
+ * detection code that can drift away from what the components are using.
+ *
+ * `useMPLocale` and `useMPSnackbar` are not here. They belong to a provider and
+ * live with it, the way a hook that reads a context should.
+ *
+ * `useMPColorScheme` is the one that is more than a rename: the stylesheet
+ * had the switch and nothing to drive it with, so every application wrote the
+ * same state, the same storage round trip and the same `<head>` script.
+ */
+export { useMPColorScheme, mpColorSchemeScript } from './useMPColorScheme.js';
+export type { MPColorScheme, MPResolvedColorScheme, MPColorSchemeOptions, MPColorSchemeResult } from './useMPColorScheme.js';
+export { useMPWindowClass } from './useMPWindowClass.js';
+export { useMPReducedMotion } from './useMPReducedMotion.js';
+export { useMPShortcut, useMPPlatform } from './useMPShortcut.js';
+export type { MPShortcutOptions, MPResolvedOS } from './useMPShortcut.js';

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export{useMPColorScheme,mpColorSchemeScript}from"./useMPColorScheme.js";export{useMPWindowClass}from"./useMPWindowClass.js";export{useMPReducedMotion}from"./useMPReducedMotion.js";export{useMPShortcut,useMPPlatform}from"./useMPShortcut.js";

package/dist/hooks/useMPColorScheme.d.ts

@@ -0,0 +1,135 @@
+import { type MPColorScheme, type MPResolvedColorScheme } from '../internal/color-scheme.js';
+export type { MPColorScheme, MPResolvedColorScheme };
+export interface MPColorSchemeOptions {
+    /**
+     * Where the choice is remembered, in `localStorage`.
+     *
+     * Change it to keep two applications on one origin from sharing a theme, or
+     * to namespace it under a product. It has to match the key given to
+     * `mpColorSchemeScript`, or the page paints one scheme and then corrects
+     * itself to the other.
+     * @default 'mp-color-scheme'
+     */
+    storageKey?: string;
+}
+export interface MPColorSchemeResult {
+    /**
+     * What has been **chosen** — including `'system'`, which is the absence of a
+     * choice rather than a third scheme. This is what a settings control should be
+     * bound to: a three-way radio group is honest about the state, and a two-way
+     * toggle bound to this cannot show "follow the system" at all.
+     */
+    scheme: MPColorScheme;
+    /**
+     * What is actually **painted**, with `'system'` resolved against the operating
+     * system. This is what a page reads to draw a sun or a moon, or to pick an
+     * image.
+     */
+    resolved: MPResolvedColorScheme;
+    /** Whether the choice is `'system'`, spelled out because it reads better. */
+    isSystem: boolean;
+    /** Chooses a scheme. `'system'` gives the choice back to the operating system. */
+    setScheme: (scheme: MPColorScheme) => void;
+    /**
+     * The other one of the two.
+     *
+     * From `'system'` it goes to the opposite of whatever is currently painted,
+     * which is what a reader pressing a single button means by it — never back to
+     * the scheme they are already looking at.
+     */
+    toggle: () => void;
+}
+/**
+ * The page's colour scheme: what it is, and how to change it.
+ *
+ * The stylesheet has always had the switch — `prefers-color-scheme`, and
+ * `data-mp-scheme` for a page that drives it itself. What it did not have was
+ * anything to drive it *with*, so every application wrote the same three things:
+ * a piece of state, a `localStorage` round trip, and a script in the `<head>` to
+ * stop the first paint flashing.
+ *
+ * ```tsx
+ * const { resolved, toggle } = useMPColorScheme();
+ *
+ * <MPIconButton
+ *   icon={<MPIcon icon={resolved === 'dark' ? SunIcon : MoonIcon} />}
+ *   label="Switch theme"
+ *   onClick={toggle}
+ * />;
+ * ```
+ *
+ * ## Three states, not two
+ *
+ * `'system'` is the absence of a choice rather than a third scheme, and keeping
+ * it is the point. A reader who has never touched the toggle should follow their
+ * operating system *as it changes* — including at sunset, which is when a
+ * two-state hook stops tracking and a page goes light in a dark room.
+ *
+ * `scheme` is what was chosen and `resolved` is what is painted. Bind a settings
+ * control to the first and draw with the second.
+ *
+ * ## One page, one answer
+ *
+ * The choice lives in a module-level store rather than in each caller's state,
+ * so a header's toggle and a settings screen's radio group are looking at the
+ * same thing. Two components holding `useState` would each show what they last
+ * set and neither would hear about the other.
+ *
+ * ## What it writes
+ *
+ * `data-mp-scheme` on `<html>`, and `'system'` **removes** it rather than
+ * writing the word — that is how the media query gets its say back.
+ *
+ * It deliberately does not touch `.dark`. That class is what a project's own
+ * Tailwind keys on, and a library reaching in to toggle a class it did not put
+ * there is a library editing somebody else's markup. A page that wants both is
+ * one line of its own in an effect.
+ *
+ * ## Storage can fail, and that is fine
+ *
+ * Reading and writing `localStorage` throws in a private window in some browsers
+ * and behind some cookie policies. Both are caught: the toggle still works for
+ * the visit and the choice is simply not remembered, which is much better than a
+ * theme button that crashes the render.
+ *
+ * ## The first paint
+ *
+ * A hook cannot run before the page paints, so a remembered `dark` arrives one
+ * frame late and the reader sees white. That is what `mpColorSchemeScript` is
+ * for — see it for the two lines that go in the `<head>`.
+ */
+export declare function useMPColorScheme(options?: MPColorSchemeOptions): MPColorSchemeResult;
+/**
+ * The two lines that stop the first paint flashing, as a string to inline.
+ *
+ * A hook runs after the browser has already painted, so a reader who chose dark
+ * gets a white page for a frame and then the right one. The only thing that can
+ * run earlier is a **synchronous script in the `<head>`**, before the body is
+ * parsed, and this is that script.
+ *
+ * ```tsx
+ * // app/layout.tsx
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: mpColorSchemeScript() }} />
+ * </head>
+ * ```
+ *
+ * It reads the same key the hook does, writes the same attribute, and does
+ * nothing at all when the stored value is absent or `system` — leaving the media
+ * query to answer, which it does before the first paint anyway.
+ *
+ * Pass the same `storageKey` you pass the hook. Two different keys is a page
+ * that paints one scheme and then corrects itself to the other, which is the
+ * flash this exists to remove.
+ *
+ * The output is a JavaScript source string and contains no interpolated markup:
+ * the key is JSON-encoded, so a key with a quote in it cannot end the script
+ * early.
+ *
+ * ## It has to be inline
+ *
+ * A `<script src>` is fetched, and a fetch is exactly the delay being avoided.
+ * If the page has a Content Security Policy without `unsafe-inline`, give the
+ * tag a nonce — this returns the source, not the tag, so the tag is yours.
+ */
+export declare function mpColorSchemeScript(options?: MPColorSchemeOptions): string;

package/dist/hooks/useMPColorScheme.js

@@ -0,0 +1 @@
+import*as e from"react";import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as r,setScheme as s,useChosenScheme as o,useSystemScheme as c}from"../internal/color-scheme.js";export function useMPColorScheme(r={}){const{storageKey:m=t}=r,a=o(m),i=c(),l="system"===a?i:a,n=e.useCallback(e=>s(m,e),[m]),u=e.useCallback(()=>s(m,"dark"===l?"light":"dark"),[m,l]);return e.useMemo(()=>({scheme:a,resolved:l,isSystem:"system"===a,setScheme:n,toggle:u}),[a,l,n,u])}export function mpColorSchemeScript(e={}){const{storageKey:s=t}=e;return`try{var s=localStorage.getItem(${JSON.stringify(s)});if(s==="dark"||s==="light")document.documentElement.setAttribute(${JSON.stringify(r)},s)}catch(e){}`}

package/dist/hooks/useMPReducedMotion.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Whether the reader has asked for less motion.
+ *
+ * `prefers-reduced-motion: reduce`, which every `MPAnimate*` component in this
+ * library already consults on its own — a fade becomes an appearance, a
+ * typewriter prints its sentence, a marquee stops. This is the same answer,
+ * exported so an application's own motion can be held to the preference the
+ * library is already holding itself to, rather than each of them asking
+ * separately and one of them forgetting.
+ *
+ * ```tsx
+ * const still = useMPReducedMotion();
+ *
+ * <video autoPlay={!still} />;
+ * ```
+ *
+ * ## Why not `usePrefersReducedMotion`
+ *
+ * Which is what it is called internally, and what the ecosystem calls it. The
+ * `MP` prefix is on every name this package exports for the reason the icons
+ * carry it: a file importing from four libraries should be able to tell which
+ * one a name came from without going back to the import block.
+ *
+ * ## On a server
+ *
+ * `false` — motion allowed. A preference is a property of a reader and a server
+ * has none, and the alternative would be a first paint that suppressed animation
+ * for everybody and then started it a moment later for most of them, which is a
+ * flash rather than a preference. `useSyncExternalStore` under this hands over
+ * to the browser's real answer on hydration.
+ */
+export declare function useMPReducedMotion(): boolean;

package/dist/hooks/useMPReducedMotion.js

@@ -0,0 +1 @@
+import{usePrefersReducedMotion as e}from"../internal/animate.js";export function useMPReducedMotion(){return e()}