material-plus-ui 1.3.0 → 1.4.0

package/dist/components/timeline/MPTimeline.js

@@ -1 +1,2 @@
-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";import{hasContent as a,META_TEXT as o,PROSE_TEXT as i,SHEET_TITLE as s}from"../../internal/scale";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:y,connector:z="solid",className:j,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=y??P?.color??"primary",I=P?.active??null,q=N??(null===I?"upcoming":B<I?"complete":B===I?"current":"upcoming"),D="horizontal"===R,E="none"!==z&&!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[z],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]}`,j??""].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})});
+"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})});

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

@@ -1,2 +1,2 @@
-export { MPTimeline, MPTimelineItem } from './MPTimeline';
-export type { MPTimelineConnector, MPTimelineItemProps, MPTimelineProps, MPTimelineStatus } from './MPTimeline';
+export { MPTimeline, MPTimelineItem } from './MPTimeline.js';
+export type { MPTimelineConnector, MPTimelineItemProps, MPTimelineProps, MPTimelineStatus } from './MPTimeline.js';

package/dist/components/timeline/index.js

@@ -1 +1 @@
-export{MPTimeline,MPTimelineItem}from"./MPTimeline";
+export{MPTimeline,MPTimelineItem}from"./MPTimeline.js";

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

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

package/dist/components/toggle/MPToggle.js

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

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

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

package/dist/components/toggle/index.js

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

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

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

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

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

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

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

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

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

package/dist/components/tooltip/MPTooltip.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip as BaseUITooltip } from '@base-ui/react/tooltip';
-import type { MPAlign, MPColor, MPSide, MPSize } from '../../types';
+import type { MPAlign, MPColor, MPSide, MPSize } from '../../types.js';
 export interface MPTooltipProps {
     /**
      * What the tooltip says.

package/dist/components/tooltip/MPTooltip.js

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

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

@@ -1,2 +1,2 @@
-export { MPTooltip, MPTooltipProvider } from './MPTooltip';
-export type { MPTooltipProps, MPTooltipProviderProps } from './MPTooltip';
+export { MPTooltip, MPTooltipProvider } from './MPTooltip.js';
+export type { MPTooltipProps, MPTooltipProviderProps } from './MPTooltip.js';

package/dist/components/tooltip/index.js

@@ -1 +1 @@
-export{MPTooltip,MPTooltipProvider}from"./MPTooltip";
+export{MPTooltip,MPTooltipProvider}from"./MPTooltip.js";

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

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

package/dist/components/transfer/MPTransfer.js

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

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

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

package/dist/components/transfer/index.js

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPColor } from '../../types';
+import type { MPColor } from '../../types.js';
 /**
  * What a piece of text *is*, which decides both its type scale and the element
  * it renders as.

package/dist/components/typography/MPTypography.js

@@ -1 +1,2 @@
-import*as p from"react";import{useRender as t}from"@base-ui/react/use-render";import{accentSlots as e}from"../../internal/accent";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}})});
+"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}})});

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

@@ -1,2 +1,2 @@
-export { MPTypography } from './MPTypography';
-export type { MPTypographyAlign, MPTypographyLevel, MPTypographyProps, MPTypographyWeight } from './MPTypography';
+export { MPTypography } from './MPTypography.js';
+export type { MPTypographyAlign, MPTypographyLevel, MPTypographyProps, MPTypographyWeight } from './MPTypography.js';

package/dist/components/typography/index.js

@@ -1 +1 @@
-export{MPTypography}from"./MPTypography";
+export{MPTypography}from"./MPTypography.js";

package/dist/constants/glyphs.d.ts

@@ -0,0 +1,72 @@
+/** The glyph a password field shows while the password is legible. */
+export declare const VisibilityIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** The glyph a password field shows while the password is masked. */
+export declare const VisibilityOffIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Dismiss: a chip, a dialog, an alert. */
+export declare const CloseIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** A ticked option, a completed step. */
+export declare const CheckIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Disclosure, pointing down. */
+export declare const ChevronDownIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Disclosure, pointing up. */
+export declare const ChevronUpIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Previous, in a pager or a carousel. */
+export declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Next, in a pager or a carousel. */
+export declare const ChevronRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** First, in a pager: the stepper that jumps to an end rather than by one. */
+export declare const ChevronsLeftIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** And last. */
+export declare const ChevronsRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Search, for a field's leading adornment. */
+export declare const SearchIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Sorted ascending: the arrow a table's sorted column carries. */
+export declare const ArrowUpIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Sorted descending. */
+export declare const ArrowDownIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** And then: the mark a breadcrumb can put between two steps. */
+export declare const ArrowRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** The trail a breadcrumb hides behind, and any other "there is more here". */
+export declare const MoreIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** A link that goes somewhere on this site. */
+export declare const LinkIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** A link that takes over the window. */
+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>>;
+/** Severity: something worth knowing. */
+export declare const InfoIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Severity: it worked. */
+export declare const SuccessIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Severity: proceed carefully. */
+export declare const WarningIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Severity: it did not work. */
+export declare const ErrorIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** One step up: a number field's increment. */
+export declare const AddIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** One step down: a number field's decrement, and a half-ticked checkbox. */
+export declare const RemoveIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Send a file the other way. A file picker's dropzone. */
+export declare const UploadIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** A day on a calendar: what a date picker's trigger wears. */
+export declare const CalendarIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** A time of day: what a time picker's trigger wears. */
+export declare const ClockIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * A score. Drawn as an outline, and filled by whatever is scoring with it —
+ * lucide draws it `fill="none"`, and `MPRating` overlays a copy in `fill-current`
+ * rather than shipping a second glyph.
+ */
+export declare const StarIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Work in progress, spun by whatever is waiting on it. */
+export declare const SpinnerIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * Three lines: the navigation a window has become too narrow to show.
+ *
+ * The one glyph in the set that is a picture of a *menu* rather than a picture
+ * of what pressing it does, and it is here anyway. Thirty years of it have made
+ * it the one shape a reader recognises with no word beside it, which is the only
+ * argument that ever justifies a symbol — and `MPSidebarTrigger` gives it a
+ * name for the readers it still says nothing to.
+ */
+export declare const MenuIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/constants/glyphs.js

@@ -0,0 +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;

package/dist/constants/icons.d.ts

@@ -1,65 +1,36 @@
-/** The glyph a password field shows while the password is legible. */
-export declare const VisibilityIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** The glyph a password field shows while the password is masked. */
-export declare const VisibilityOffIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Dismiss: a chip, a dialog, an alert. */
-export declare const CloseIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** A ticked option, a completed step. */
-export declare const CheckIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Disclosure, pointing down. */
-export declare const ChevronDownIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Disclosure, pointing up. */
-export declare const ChevronUpIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Previous, in a pager or a carousel. */
-export declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Next, in a pager or a carousel. */
-export declare const ChevronRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** First, in a pager: the stepper that jumps to an end rather than by one. */
-export declare const ChevronsLeftIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** And last. */
-export declare const ChevronsRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Search, for a field's leading adornment. */
-export declare const SearchIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Sorted ascending: the arrow a table's sorted column carries. */
-export declare const ArrowUpIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Sorted descending. */
-export declare const ArrowDownIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** And then: the mark a breadcrumb can put between two steps. */
-export declare const ArrowRightIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** The trail a breadcrumb hides behind, and any other "there is more here". */
-export declare const MoreIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** A link that goes somewhere on this site. */
-export declare const LinkIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** A link that takes over the window. */
-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>>;
-/** Severity: something worth knowing. */
-export declare const InfoIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Severity: it worked. */
-export declare const SuccessIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Severity: proceed carefully. */
-export declare const WarningIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Severity: it did not work. */
-export declare const ErrorIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** One step up: a number field's increment. */
-export declare const AddIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** One step down: a number field's decrement, and a half-ticked checkbox. */
-export declare const RemoveIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Send a file the other way. A file picker's dropzone. */
-export declare const UploadIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** A day on a calendar: what a date picker's trigger wears. */
-export declare const CalendarIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** A time of day: what a time picker's trigger wears. */
-export declare const ClockIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /**
- * A score. Drawn as an outline, and filled by whatever is scoring with it —
- * lucide draws it `fill="none"`, and `MPRating` overlays a copy in `fill-current`
- * rather than shipping a second glyph.
+ * The glyphs, and the table that names them.
+ *
+ * The glyphs themselves are `constants/glyphs.ts` and are re-exported from here
+ * unchanged — this is the file everything imports, components included, and
+ * `material-plus-ui/constants/icons` is still the path a caller writes.
+ *
+ * ## Two ways out of this file, and why
+ *
+ * - **The named exports** (`VisibilityIcon`, …) are what the library's own
+ *   components import. A named import of one export lets a bundler drop every
+ *   other binding, so a project that only uses `MPTextField` ships two glyphs
+ *   rather than all of them.
+ * - **`ICONS`** is the same set as a lookup table, for an application that wants
+ *   a name-keyed registry of its own — `<MPIcon icon={ICONS.close} />`. An
+ *   object literal cannot be tree-shaken property by property, so importing it
+ *   pulls in every glyph listed below. That is the trade it exists to make, and
+ *   it is why the components never reach for it.
+ *
+ * ## Why the table is here and the glyphs are next door
+ *
+ * Because this module has to stay server-side and that one cannot. `ICONS` is
+ * read with a property access — `ICONS.check` — and a server component cannot
+ * read a property off a client module's namespace; it gets `undefined` and
+ * React reports an invalid element type. Held here, in a module with no
+ * directive on it, the table is a plain object whose values are the client
+ * references `constants/glyphs.ts` produces: a server component reads one out
+ * and passes it to `MPIcon` exactly as it would pass `CheckIcon`.
+ *
+ * Both halves therefore work from a server component, which is not something
+ * either arrangement managed on its own. See `scripts/mark-client.mjs`.
  */
-export declare const StarIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Work in progress, spun by whatever is waiting on it. */
-export declare const SpinnerIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export * from './glyphs.js';
 /**
  * The same glyphs, keyed by role.
  *
@@ -85,6 +56,7 @@ export declare const ICONS: {
     readonly 'arrow-down': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly 'arrow-right': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly more: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly menu: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly link: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly 'external-link': import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly copy: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/constants/icons.js

@@ -1 +1 @@
-import{ArrowDown as o,ArrowRight as n,ArrowUp as c,CalendarDays as r,Check as t,ChevronDown as e,ChevronLeft as I,ChevronRight as s,ChevronsLeft as i,ChevronsRight as p,ChevronUp as h,CircleAlert as x,CircleCheck as a,Clock as l,Copy as v,Ellipsis as C,ExternalLink as f,Eye as w,EyeOff as d,Info as g,Link as k,LoaderCircle as y,Minus as S,Plus as A,Search as L,Star as R,TriangleAlert as u,Upload as b,X as m}from"lucide-react";export const VisibilityIcon=w;export const VisibilityOffIcon=d;export const CloseIcon=m;export const CheckIcon=t;export const ChevronDownIcon=e;export const ChevronUpIcon=h;export const ChevronLeftIcon=I;export const ChevronRightIcon=s;export const ChevronsLeftIcon=i;export const ChevronsRightIcon=p;export const SearchIcon=L;export const ArrowUpIcon=c;export const ArrowDownIcon=o;export const ArrowRightIcon=n;export const MoreIcon=C;export const LinkIcon=k;export const ExternalLinkIcon=f;export const CopyIcon=v;export const InfoIcon=g;export const SuccessIcon=a;export const WarningIcon=u;export const ErrorIcon=x;export const AddIcon=A;export const RemoveIcon=S;export const UploadIcon=b;export const CalendarIcon=r;export const ClockIcon=l;export const StarIcon=R;export const SpinnerIcon=y;export const ICONS={visibility:VisibilityIcon,"visibility-off":VisibilityOffIcon,close:CloseIcon,check:CheckIcon,"chevron-down":ChevronDownIcon,"chevron-up":ChevronUpIcon,"chevron-left":ChevronLeftIcon,"chevron-right":ChevronRightIcon,"chevrons-left":ChevronsLeftIcon,"chevrons-right":ChevronsRightIcon,search:SearchIcon,"arrow-up":ArrowUpIcon,"arrow-down":ArrowDownIcon,"arrow-right":ArrowRightIcon,more:MoreIcon,link:LinkIcon,"external-link":ExternalLinkIcon,copy:CopyIcon,info:InfoIcon,success:SuccessIcon,warning:WarningIcon,error:ErrorIcon,add:AddIcon,remove:RemoveIcon,upload:UploadIcon,calendar:CalendarIcon,clock:ClockIcon,star:StarIcon,spinner:SpinnerIcon};
+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};