material-plus-ui 0.0.1 → 1.0.0

package/dist/components/number-field/MPNumberField.d.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import type { MPStyleProps } from '../../types';
+/**
+ * Where the two steppers sit.
+ *
+ * - `end` — both at the trailing edge, the way a spinner has always looked.
+ * - `split` — minus at the start, plus at the end, with the number between them.
+ *   For a quantity that is nudged rather than typed.
+ * - `none` — no buttons. It is still a number field: the arrow keys, the
+ *   clamping and the formatting all stay.
+ *
+ * There is deliberately no stacked pair of half-height chevrons. At `xs` each
+ * arrow would be under three pixels tall, and a target that small is a target
+ * nobody hits.
+ */
+export type MPNumberFieldSteppers = 'end' | 'split' | 'none';
+export interface MPNumberFieldProps extends MPStyleProps {
+    /** The number. Use with `onValueChange` for a controlled field. */
+    value?: number | null;
+    /** The starting number, for an uncontrolled field. */
+    defaultValue?: number;
+    /** Called on every change — typing, stepping, the wheel. */
+    onValueChange?: (value: number | null) => void;
+    /**
+     * Called when the value settles: on blur after typing, on pointer release
+     * after a press, and together with `onValueChange` for the keyboard.
+     */
+    onValueCommitted?: (value: number | null) => void;
+    /** The bottom of the range. Stepping stops here. */
+    min?: number;
+    /** The top of the range. */
+    max?: number;
+    /** How far one step goes. @default 1 */
+    step?: number;
+    /** The step taken while Shift is held. @default 10 */
+    largeStep?: number;
+    /** The step taken while Alt is held. @default 0.1 */
+    smallStep?: number;
+    /**
+     * Whether the wheel changes the value while the field is focused and hovered.
+     * Off by default: a page that scrolls under the pointer and a field that
+     * changes under it are the same gesture, and only one of them was meant.
+     * @default false
+     */
+    allowWheelScrub?: boolean;
+    /**
+     * How the number is written — currency, percent, decimal places. Passed
+     * straight to `Intl.NumberFormat`, so the field can show `$1,240.00` and still
+     * report `1240`.
+     */
+    format?: Intl.NumberFormatOptions;
+    /** Which locale the number is written and parsed in. Defaults to the runtime's. */
+    locale?: Intl.LocalesArgument;
+    /**
+     * Where the steppers sit, or `none` for a field without them.
+     * @default 'end'
+     */
+    steppers?: MPNumberFieldSteppers;
+    /** The accessible name of the increment button. @default 'Increase' */
+    incrementLabel?: string;
+    /** The accessible name of the decrement button. @default 'Decrease' */
+    decrementLabel?: string;
+    /** Label in the outline's notch. */
+    label?: React.ReactNode;
+    /** The line under the control. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /** The message under the control, which also turns the field over. */
+    errorMessage?: React.ReactNode;
+    /** Placeholder shown while the field is empty. */
+    placeholder?: string;
+    /** Content placed before the number — a currency mark, a unit, an icon. */
+    startIcon?: React.ReactNode;
+    /** Marks the field required. */
+    required?: boolean;
+    /** Greys the field out and stops it taking input. */
+    disabled?: boolean;
+    /** Shows the number without allowing edits, and drops the steppers. */
+    readOnly?: boolean;
+    /** Name of the form control. */
+    name?: string;
+    /** The id put on the control and pointed at by the label. */
+    id?: string;
+}
+/**
+ * A Material Design field that only holds a number.
+ *
+ * The shell is `MPTextField`'s, to the pixel — the same notched outline, the same
+ * label in the notch, the same supporting text — because a form where the
+ * quantity box is a different height or radius from the boxes around it is a form
+ * that looks assembled rather than designed.
+ *
+ * What is added on top is a real numeric control rather than
+ * `<input type="number">`, which is worth being explicit about: the native one
+ * silently accepts text in some browsers, has a spinner nobody can style, scrubs
+ * on scroll by default, and reports `''` for anything it cannot parse. Base UI's
+ * owns the parsing against the locale, the clamping, the press-and-hold repeat on
+ * the steppers, and the hidden input that submits with a form.
+ */
+export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, errorMessage, placeholder, startIcon, size, fullWidth, required, disabled, readOnly, name, id }: MPNumberFieldProps): React.JSX.Element;

package/dist/components/number-field/MPNumberField.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{NumberField as l}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon";import{AddIcon as i,RemoveIcon as s}from"../../constants/icons";import{MPFieldLabel as o,MPFieldOutline as p}from"../../internal/FieldOutline";import{MPStateLayer as m}from"../../internal/StateLayer";import{MPSupportingText as d}from"../../internal/SupportingText";import{CONTROL_ICON as c,PROSE_TEXT as u,hasContent as f}from"../../internal/scale";const h={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:x,defaultValue:g,onValueChange:b,onValueCommitted:N,min:v,max:z,step:j,largeStep:y,smallStep:w,allowWheelScrub:S=!1,format:I,locale:V,steppers:q="end",incrementLabel:C="Increase",decrementLabel:M="Decrease",label:k,description:F,errorMessage:L,placeholder:O,startIcon:W,size:D="md",fullWidth:P=!1,required:R=!1,disabled:$=!1,readOnly:_=!1,name:B,id:G}){const T=f(L),A=h[D],E=r.useId(),H=G??`mp-number-field-${B??E}`,J="none"!==q&&!_&&!$,K=["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",A.stepper].join(" "),Q=a(l.Decrement,{"aria-label":M,className:K,children:[e(m,{}),e(t,{icon:s,size:c[D]})]}),U=a(l.Increment,{"aria-label":C,className:K,children:[e(m,{}),e(t,{icon:i,size:c[D]})]});return a(n.Root,{className:["mp-number-field group flex-col align-top",P?"flex w-full":"inline-flex w-fit"].join(" "),disabled:$,invalid:T,"data-mp-size":D,children:[e(l.Root,{id:H,name:B,className:"contents",value:x,defaultValue:g,onValueChange:e=>b?.(e),onValueCommitted:e=>N?.(e),min:v,max:z,step:j,largeStep:y,smallStep:w,allowWheelScrub:S,format:I,locale:V,disabled:$,readOnly:_,required:R,children:a("div",{className:"relative w-full",children:[a(l.Group,{className:["flex w-full items-center gap-2",A.height,J&&"end"===q?`${A.padding} pe-1`:J&&"split"===q?"px-1":A.padding].join(" "),children:[J&&"split"===q?Q:null,W?e("span",{className:["flex shrink-0 items-center",$?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:W}):null,e(l.Input,{placeholder:O,className:["w-full min-w-0 flex-1 tabular-nums",u[D],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",J&&"split"===q?"text-center":""].filter(Boolean).join(" ")}),J&&"end"===q?a("span",{className:"flex shrink-0 items-center",children:[Q,U]}):null,J&&"split"===q?U:null]}),e(p,{label:k,required:R}),f(k)?e(o,{size:D,label:k,required:R,htmlFor:H}):null]})}),e(d,{description:F,errorMessage:L,className:A.padding})]})}

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,2 @@
+export { MPNumberField } from './MPNumberField';
+export type { MPNumberFieldProps, MPNumberFieldSteppers } from './MPNumberField';

package/dist/components/number-field/index.js

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

package/dist/components/otp-field/MPOtpField.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import type { MPStyleProps } from '../../types';
+/**
+ * What may be typed into a slot.
+ *
+ * `numeric` is the default because that is what a texted code is, and it is also
+ * what puts a number pad in front of a phone. `any` accepts whatever the keyboard
+ * produces — for a licence key with punctuation in it.
+ */
+export type MPOtpFieldCharset = 'numeric' | 'alpha' | 'alphanumeric' | 'any';
+export interface MPOtpFieldProps extends MPStyleProps {
+    /**
+     * How many characters the code has. Clamped to 2–12: a single box is an
+     * `MPTextField`, and past twelve the row stops fitting a phone.
+     * @default 6
+     */
+    length?: number;
+    /**
+     * What may be typed. Anything rejected is dropped rather than shown, and
+     * `onValueInvalid` reports it.
+     * @default 'numeric'
+     */
+    charset?: MPOtpFieldCharset;
+    /** Hides the characters, the way a password field does. @default false */
+    mask?: boolean;
+    /**
+     * Splits the row every `groupSize` slots with a separator. `3` on a six-digit
+     * code gives the familiar two blocks of three.
+     */
+    groupSize?: number;
+    /** What is drawn between two groups. @default '–' */
+    separator?: React.ReactNode;
+    /** The code. Use with `onValueChange` for a controlled field. */
+    value?: string;
+    /** What it starts as, for an uncontrolled one. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fires once every slot is filled — the moment to verify the code. */
+    onComplete?: (value: string) => void;
+    /** Fires when typed or pasted text held characters the charset rejects. */
+    onValueInvalid?: (value: string) => void;
+    /** Submits the owning form as soon as the code is complete. @default false */
+    autoSubmit?: boolean;
+    /**
+     * The label above the row.
+     *
+     * Above it rather than in a notch, which is the one place this control departs
+     * from `MPTextField`'s shell. A notched label belongs to *one* outlined box; a
+     * code is six of them, and cutting the notch into the first would name the
+     * first digit rather than the field.
+     */
+    label?: React.ReactNode;
+    /** The line under the row. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /**
+     * The message under the row. Its presence is also what puts the field into its
+     * error state — there is no separate boolean, so there is no way to render a
+     * control that is visibly wrong with no explanation of why.
+     */
+    errorMessage?: React.ReactNode;
+    /** Name of the form control. */
+    name?: string;
+    /** The form must have a complete code before it submits. @default false */
+    required?: boolean;
+    /** Greys every slot out and stops them taking input. */
+    disabled?: boolean;
+    /** Readable and copyable, but not typeable. @default false */
+    readOnly?: boolean;
+    /** Puts the caret in the first slot on mount. @default false */
+    autoFocus?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A row of one-character slots: a PIN, a texted verification code, an invite key.
+ *
+ * Base UI owns everything that makes this harder than it looks — one hidden value
+ * behind however many inputs, paste spread across the slots from wherever the
+ * caret was, backspace stepping back a box, a click landing on the first empty
+ * slot rather than the one under the pointer, and the autofill hook that lets a
+ * phone offer the code straight from the message.
+ *
+ * What is here is the box a slot is drawn in, and it is Material's outlined text
+ * field cut down to one character: the same `corner-extra-small`, the same
+ * hairline in `outline`, the same two-pixel `primary` ring on focus. A form
+ * holding a text field and a code should not look like two form kits stacked on
+ * each other.
+ */
+export declare const MPOtpField: React.ForwardRefExoticComponent<MPOtpFieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/otp-field/MPOtpField.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{MPSupportingText as n}from"../../internal/SupportingText";import{META_TEXT as l,STACK_GAP as i,hasContent as m}from"../../internal/scale";const s={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},u={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},p={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=a.forwardRef(function({size:c="md",fullWidth:f=!1,length:h=6,charset:x="numeric",mask:b=!1,groupSize:g,separator:v="–",value:y,defaultValue:w,onValueChange:M,onComplete:V,onValueInvalid:N,autoSubmit:j=!1,label:C,description:F,errorMessage:S,name:z,required:I=!1,disabled:O=!1,readOnly:R=!1,autoFocus:$=!1,className:k,style:q},T){const A=Math.min(12,Math.max(2,Math.round(h))),B=m(S),L=g&&g>0?Math.round(g):0,P=["rounded-mp-xs border bg-transparent text-center font-[inherit]",s[c],d[c],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-2 focus:border-mp-primary focus:outline-none",O?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":B?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":R?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:O,invalid:B,"data-mp-size":c,className:["mp-otp-field flex-col align-top",i[c],f?"flex w-full":"inline-flex w-fit",k??""].filter(Boolean).join(" "),style:q,children:[m(C)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[C,I?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(o.Root,{ref:T,length:A,validationType:p[x],mask:b,name:z,required:I,disabled:O,readOnly:R,autoSubmit:j,value:y,defaultValue:w,onValueChange:e=>M?.(e),onValueComplete:e=>V?.(e),onValueInvalid:e=>N?.(e),className:`flex items-center ${u[c]}`,children:Array.from({length:A},(t,n)=>r(a.Fragment,{children:[L>0&&n>0&&n%L===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[c]}`,children:v}):null,e(o.Input,{className:P,autoFocus:$&&0===n})]},n))}),e(n,{description:F,errorMessage:S})]})});

package/dist/components/otp-field/index.d.ts

@@ -0,0 +1,2 @@
+export { MPOtpField } from './MPOtpField';
+export type { MPOtpFieldCharset, MPOtpFieldProps } from './MPOtpField';

package/dist/components/otp-field/index.js

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

package/dist/components/overlay/MPOverlay.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import type { MPAlign, MPSize } from '../../types';
+/**
+ * How much of the page the overlay takes away.
+ *
+ * One axis, four steps — how legible is what is behind — and they are tuned with
+ * the blur radius as much as with the alpha, because past about 16px a backdrop
+ * smears into flat colour and the sheet reads opaque however low its alpha goes.
+ *
+ * - `scrim` — MD3's own scrim, and exactly what `MPDialog` puts behind itself.
+ *   The page is still there and still readable; it has only stopped being
+ *   reachable.
+ * - `blur` — frosted. A lighter dim over a real blur, so the page is present as
+ *   shape and colour but not as words. For "this is being replaced".
+ * - `solid` — the page's own `surface`, opaque. For a screen that is genuinely
+ *   gone.
+ * - `clear` — nothing drawn at all. Still blocks the pointer, which is the whole
+ *   reason to reach for it: an invisible sheet that catches a click.
+ */
+export type MPOverlayTone = 'scrim' | 'blur' | 'solid' | 'clear';
+/**
+ * An overlay takes `size`, `align` and `tone` and stops there.
+ *
+ * There is no `variant` — the five weights answer "how much of a surface does
+ * this paint", and an overlay has taken the page. There is no `color` either: an
+ * accent is what a control uses to say which of several things it is, and there
+ * is only ever one overlay.
+ */
+export interface MPOverlayProps {
+    /** The overlay is shown. Use with `onOpenChange` for a controlled overlay. */
+    open?: boolean;
+    /** Whether the overlay starts shown, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * How much of the page is taken away.
+     * @default 'scrim'
+     */
+    tone?: MPOverlayTone;
+    /**
+     * Whether clicking the overlay or pressing Escape closes it.
+     *
+     * Off by default, which is the other way round from `MPDialog`. A dialog asks a
+     * question and Escape is the universal "no"; an overlay is not asking anything
+     * — it is saying *wait* — and a save that can be dismissed by a stray click is
+     * a save the reader will believe finished. Turn it on for the overlay whose job
+     * is to catch a click outside something.
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Whether the page behind is taken away for the keyboard too. `'trap-focus'`
+     * leaves the page scrollable and clickable while still holding focus inside,
+     * which is usually what a `clear` overlay wants.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Where the content sits down the viewport.
+     * @default 'center'
+     */
+    align?: MPAlign;
+    /**
+     * The room between the content and the edge of the viewport. The one thing
+     * `size` decides here — an overlay has no surface of its own to scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * The accessible name of the overlay.
+     *
+     * It has a default rather than being optional, which almost nothing else in
+     * this library does: an overlay that holds nothing readable — a bare spinner, a
+     * `clear` sheet — still has to say what it is, and the alternative is a modal
+     * region a screen reader announces as nothing at all.
+     * @default 'Overlay'
+     */
+    label?: string;
+    /** What sits on top — a spinner, a line of text, a small card. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A sheet over the whole page that stops it being used.
+ *
+ * What separates this from `MPDialog` is what is *not* here: no surface, no
+ * outline, no title, no actions. An overlay is the scrim on its own, with
+ * whatever the caller puts on top of it — most often an `MPProgressCircular` and
+ * a line saying what is being waited for.
+ *
+ * `dismissible` is the one prop worth reading twice, and it is off. Everything
+ * else Base UI owns: the portal, the scroll lock, the focus held inside, the page
+ * behind going inert, and focus returning to wherever it came from on close.
+ */
+export declare function MPOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, label, className, style, children }: MPOverlayProps): React.JSX.Element;

package/dist/components/overlay/MPOverlay.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{FADE as l,PORTAL_LAYER as s,SCRIM as t}from"../../internal/surface";import{SHEET_PAD as i}from"../../internal/scale";const n={scrim:t,blur:"bg-mp-scrim/20 [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-mp-surface",clear:""},o={start:"items-start",center:"items-center",end:"items-end"};export function MPOverlay({open:t,defaultOpen:c,onOpenChange:m,tone:p="scrim",dismissible:d=!1,modal:f=!0,align:u="center",size:x="md",label:b="Overlay",className:h,style:y,children:j}){return e(r.Root,{open:t,defaultOpen:c,modal:f,disablePointerDismissal:!d,onOpenChange:(e,a)=>{d||e||"escape-key"!==a.reason?m?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`${s} fixed inset-0 ${l} ${n[p]}`}),e(r.Viewport,{className:[s,"fixed inset-0 flex justify-center",o[u],i[x]].join(" "),children:e(r.Popup,{"aria-label":b,"data-mp-size":x,className:["mp-overlay flex max-h-full max-w-full flex-col items-center justify-center","text-mp-on-surface outline-none",l,h??""].filter(Boolean).join(" "),style:y,children:j})})]})})}

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

@@ -0,0 +1,2 @@
+export { MPOverlay } from './MPOverlay';
+export type { MPOverlayProps, MPOverlayTone } from './MPOverlay';

package/dist/components/overlay/index.js

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

package/dist/components/panes/MPPanes.d.ts

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPSize } from '../../types';
+/**
+ * A pane's share of the split, as a percentage of the container or as a CSS
+ * length.
+ *
+ * A bare number is a percentage — that is what a split is usually described in,
+ * and a percentage keeps its meaning when the window changes size. A string is
+ * an absolute length (`'240px'`, `'15rem'`, `'20%'`), which is what a sidebar
+ * with a minimum actually needs: "at least 200 pixels" does not survive being
+ * written down as a percentage of a width nobody knows yet.
+ */
+export type MPPaneSize = number | string;
+export interface MPPanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the panes run. `horizontal` puts them side by side with upright
+     * handles between them; `vertical` stacks them.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /**
+     * Whether the handles between the panes can be dragged. Turn it off for a
+     * split that is a layout rather than a control.
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * Which accent family the handles light up in.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * How thick a handle is, and how far it reaches.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** Fires with every pane's share, in percent, while a handle is dragged. */
+    onResize?: (sizes: number[]) => void;
+    /** Fires once, with the same shape, when the handle is let go. */
+    onResizeEnd?: (sizes: number[]) => void;
+    /** The panes. Anything that is not an `MPPane` is laid out but has no size. */
+    children?: React.ReactNode;
+}
+export interface MPPaneProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The share this pane starts with. Panes with no `defaultSize` split whatever
+     * is left over equally.
+     */
+    defaultSize?: MPPaneSize;
+    /**
+     * How small it may be dragged.
+     * @default 0
+     */
+    minSize?: MPPaneSize;
+    /** How large it may be dragged. Unbounded when left out. */
+    maxSize?: MPPaneSize;
+    /** What is inside the pane. */
+    children?: React.ReactNode;
+}
+/**
+ * A set of panes with draggable handles between them.
+ *
+ * The panes are sized in **fractions**, written out as
+ * `flex-basis: calc((100% - gutters) * fraction)`. That is the one decision the
+ * rest of this file follows from: a split described in percentages survives the
+ * window being resized without a single line of JavaScript running, so the
+ * component measures itself only twice — once on mount, to turn a `'240px'`
+ * default into a fraction, and once at the start of each drag, to know what a
+ * pixel of pointer movement is worth.
+ *
+ * The handles are interleaved here rather than written by the caller, so the
+ * children of an `MPPanes` are just panes. That does mean the direct children
+ * have to *be* panes: the constraints are read off their props, and an `MPPane`
+ * wrapped in something else is a pane with no minimum.
+ *
+ * ## Why there is no Base UI primitive under this
+ *
+ * There is nothing to delegate. A splitter's behaviour is a pointer capture and
+ * a clamp, and its accessibility is one ARIA role — `separator` with a value,
+ * which is the window-splitter pattern — carried by an element the component has
+ * to own anyway because it draws it. What Base UI is here for is the things that
+ * are genuinely hard and invisible when they work: a focus trap, a positioner, a
+ * typeahead. A rail between two boxes is not one of them.
+ *
+ * ## What it does not draw
+ *
+ * No surface, on either half. A split is layout, and the moment a pane drew a
+ * sheet it would stop being usable as the thing a table, a card or an editor is
+ * put *inside*. The family reaches exactly three places — the hairline, the wash
+ * under a hovered handle, and the focus ring — because those are the only marks
+ * this component makes.
+ */
+export declare const MPPanes: React.ForwardRefExoticComponent<MPPanesProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One region of a split.
+ *
+ * `defaultSize`, `minSize` and `maxSize` are read by the `MPPanes` around it
+ * rather than used here — a pane cannot know what "half" is, only the split can.
+ */
+export declare const MPPane: React.ForwardRefExoticComponent<MPPaneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/panes/MPPanes.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent";const o=n.createContext({basis:null}),i={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},a={xs:4,sm:6,md:8,lg:10,xl:12};function s(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const o=Number(r[1]);if(!Number.isNaN(o))switch(r[2]){case"px":return o;case"%":return t*o/100;case"rem":return o*Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return o*Number.parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const MPPanes=n.forwardRef(function({orientation:l="horizontal",resizable:c=!0,color:u="primary",size:m="md",onResize:d,onResizeEnd:p,className:f,style:h,children:g,...v},x){const b=n.Children.toArray(g).filter(n.isValidElement),y=b.length,z=n.useRef(null),w=n.useCallback(e=>{z.current=e,"function"==typeof x?x(e):x&&(x.current=e)},[x]),S=n.useRef([]);S.current=b.map(e=>e.props);const[N,M]=n.useState(null),R=N&&N.length===y?N:null,j=n.useRef(null);j.current=R;const C="horizontal"===l,E=a[m]*Math.max(0,y-1);function L(e){const t=z.current,n=j.current;if(!c||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(C?r.width:r.height)-E;if(o<=0)return null;const i=S.current[e],a=S.current[e+1],l=n[e]*o,u=l+n[e+1]*o,m=Math.max(s(i?.minSize,o,t)??0,u-(s(a?.maxSize,o,t)??u)),p=Math.min(s(i?.maxSize,o,t)??u,u-(s(a?.minSize,o,t)??0));return p<m?null:{root:t,current:n,resize(t){const r=Math.min(p,Math.max(m,l+t)),i=[...n];return i[e]=r/o,i[e+1]=(u-r)/o,M(i),d?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=z.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(C?t.width:t.height)-E;n<=0||M(t=>t&&t.length===y?t:function(e,t,n){const r=e.map(e=>s(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,l=r.map(e=>Math.max(0,e??a)),c=l.reduce((e,t)=>e+t,0);return c<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/c)}(S.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[y,C,E]);const P=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",i[m],"transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none",c?[C?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:w,"data-mp-size":m,className:["mp-panes flex h-full w-full",C?"flex-row":"flex-col","min-h-0 min-w-0",f??""].filter(Boolean).join(" "),style:{...r(u),...h},...v,children:b.map((r,i)=>t(n.Fragment,{children:[i>0?e("div",{role:"separator","aria-orientation":C?"vertical":"horizontal","aria-valuenow":R?Math.round(100*R[i-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!c||void 0,tabIndex:c?0:-1,className:P,onPointerDown:e=>{0===e.button&&function(e,t){const n=L(e);if(!n)return;const r=t.currentTarget;r.setPointerCapture(t.pointerId),r.dataset.dragging="true";const o=document.body.style.userSelect;document.body.style.userSelect="none";const i=C?t.clientX:t.clientY,a=C&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=C?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,p?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(i-1,e)},onKeyDown:e=>{const t=C?"ArrowLeft":"ArrowUp",n=C?"ArrowRight":"ArrowDown";e.key!==t&&e.key!==n||(e.preventDefault(),function(e,t){const n=L(e);if(!n)return;const r=n.resize(t);p?.(r.map(e=>100*e))}(i-1,e.key===n?16:-16))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",C?"h-full w-px":"h-px w-full",c?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(o.Provider,{value:{basis:R?`calc((100% - ${E}px) * ${R[i].toFixed(6)})`:null},children:r})]},r.key??i))})});export const MPPane=n.forwardRef(function({defaultSize:t,minSize:r,maxSize:i,className:a,style:s,children:l,...c},u){const{basis:m}=n.useContext(o);return e("div",{ref:u,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",a??""].filter(Boolean).join(" "),style:{flex:m?`0 0 ${m}`:"1 1 0%",...s},...c,children:l})});

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

@@ -0,0 +1,2 @@
+export { MPPane, MPPanes } from './MPPanes';
+export type { MPPaneProps, MPPanesProps, MPPaneSize } from './MPPanes';

package/dist/components/panes/index.js

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

package/dist/components/pill/MPPill.d.ts

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+/**
+ * How the lozenge sits in the page's scroll.
+ *
+ * Local to this component rather than in `src/types.ts`, which is the rule that
+ * file states: an axis joins the shared vocabulary when a **second** component
+ * needs it, not in anticipation of one. Nothing else in the library pins itself
+ * to the viewport.
+ */
+export type MPPillPosition = 'static' | 'sticky' | 'fixed';
+export interface MPPillProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onClick' | 'title'> {
+    /**
+     * The leading slot — a glyph, an avatar, a status dot, a photograph.
+     *
+     * It is given a square box of its own and clipped to a circle, so an `<img>`
+     * lands in it as readily as an icon does: the picture fills the box and is
+     * cropped rather than letterboxed, which is what a 20px avatar wants.
+     */
+    startIcon?: React.ReactNode;
+    /** The trailing slot. Outside the pressable area, so it can be a control. */
+    endIcon?: React.ReactNode;
+    /**
+     * The headline in the middle — what the pill is currently about.
+     *
+     * A prop rather than something to compose, for the reason a card's title is
+     * one: the arrangement is fixed. Almost every pill is a line of text with an
+     * optional second line under it, and spelling that as children means every
+     * caller inventing their own centring and type scale.
+     */
+    title?: React.ReactNode;
+    /** The second line, under the title. One step down and quieter. */
+    description?: React.ReactNode;
+    /**
+     * The second half, revealed when `expanded`.
+     *
+     * The pill grows downward into it rather than swapping to a different shape:
+     * one object saying more, which is the whole idea behind this component.
+     */
+    details?: React.ReactNode;
+    /**
+     * Whether `details` is showing.
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * How it sits in the page's scroll. `fixed` pins it against the viewport and
+     * centres it, which is the arrangement this shape exists for.
+     * @default 'static'
+     */
+    position?: MPPillPosition;
+    /**
+     * Which edge it is held against when `position` is not `static`.
+     * @default 'top'
+     */
+    side?: 'top' | 'bottom';
+    /** Passing it makes the middle a real button. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * How much surface the lozenge paints.
+     *
+     * The **control** ladder rather than the container one: a pill is the thing
+     * being coloured, so `filled` takes the accent under its own ink.
+     * @default 'filled'
+     */
+    variant?: MPVariant;
+    /**
+     * The row's minimum height and the type scale in it. The same numbers a button
+     * is drawn at, so a collapsed pill lines up with one beside it.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * @default 'secondary'
+     */
+    color?: MPColor;
+    /**
+     * Anything the middle needs that `title` and `description` cannot say — a pair
+     * of small readouts, a live counter, a progress indicator. Rendered under
+     * them, in the same centred column.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A floating lozenge holding a small amount of live information.
+ *
+ * MD3 does not describe this shape, and the library ships it for the reason it
+ * ships [MPProgressBox](../feedback/progress-box): there is a real thing here
+ * that the specification's own parts can draw, and no component in the set draws
+ * it. What it is *for* is the state a page has that is not about any one control
+ * — a call in progress, an upload that is still going, a recording, a train two
+ * minutes away.
+ *
+ * ## The shape, and the one house rule it bends
+ *
+ * A collapsed pill is a stadium: `corner-full`, which every other **sheet** in
+ * this library is held back from. That is allowed here for the same reason the
+ * rule exists — a radius says what kind of object something is, and this is not
+ * a sheet lying on the page. It is an object hovering over it, and an object
+ * hovering over the page should not look like it was cut from the same material.
+ *
+ * Opening `details` moves the corner to `corner-extra-large`, and the move is
+ * transitioned. That is not decoration: `corner-full` on a box that has grown to
+ * six lines is a corner a third of its height, which eats the first two words of
+ * every line. The pill morphs from a lozenge into a rounded rectangle with the
+ * loudest corner the sheet ladder has, which is the shape it should have been
+ * all along at that size.
+ *
+ * ## What is measured, and why
+ *
+ * `details` is revealed by animating a **measured** height, exactly as an
+ * accordion panel is — but the measurement is a `ResizeObserver` rather than
+ * Base UI's one-shot one, because live information is the kind of content that
+ * changes while it is on screen. A pill whose details grew after they opened
+ * would otherwise be clipped at the height they had when they arrived.
+ */
+export declare const MPPill: React.ForwardRefExoticComponent<MPPillProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/pill/MPPill.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent";import{MPStateLayer as r}from"../../internal/StateLayer";import{CONTROL_GAP as s,CONTROL_ICON as l,CONTROL_TEXT as a,hasContent as c,META_TEXT as m,PROSE_TEXT as d,SHEET_PAD_X as p}from"../../internal/scale";const u={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},f={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},h={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},x={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=o.forwardRef(function({startIcon:b,endIcon:w,title:g,description:v,details:y,expanded:j=!1,position:N="static",side:k="top",onClick:_,variant:z="filled",size:B="md",color:C="secondary",className:R,style:$,children:H,...I},P){const S=o.useRef(null),[E,F]=o.useState(0);o.useEffect(()=>{const e=S.current;if(!e)return;const t=new ResizeObserver(()=>F(e.scrollHeight));return t.observe(e),F(e.scrollHeight),()=>t.disconnect()},[y]);const L=Boolean(_),M=p[B],O=t(n,{children:[c(b)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[B],height:l[B]},children:b}):null,c(g)||c(v)||c(H)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",f[B]].join(" "),children:[c(g)?e("span",{className:"max-w-full truncate",children:g}):null,c(v)?e("span",{className:`max-w-full truncate font-normal ${m} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:v}):null,H]}):null]});return t("div",{ref:P,"data-mp-size":B,"data-mp-variant":z,"data-mp-expanded":j||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",j?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",a[B],h[z],x[N][k],R??""].filter(Boolean).join(" "),style:{...i(C),...$},...I,children:[t("div",{className:["flex shrink-0 items-center py-1",u[B],s[B],L?"ps-0":M,c(w)?"pe-1":L?"pe-0":""].filter(Boolean).join(" "),children:[L?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent font-[inherit] text-inherit","rounded-[inherit]",s[B],M,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onClick:_,children:[e(r,{}),O]}):O,c(w)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:w}):null]}),c(y)?e("div",{className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:j?E:0},inert:!j,children:e("div",{ref:S,className:`${M} pb-2 whitespace-normal ${d[B]}`,children:y})}):null]})});

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

@@ -0,0 +1,2 @@
+export { MPPill } from './MPPill';
+export type { MPPillPosition, MPPillProps } from './MPPill';

package/dist/components/pill/index.js

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