material-plus-ui 1.6.0 → 1.8.0

package/dist/components/stack/MPStack.d.ts

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import type { MPAnimateTimeline, MPAnimateTrigger, MPAnimation, MPEasing, MPSize } from '../../types.js';
+/**
+ * Which way the pile grows.
+ *
+ * `diagonal` is a **horizontal** flow with a per-item vertical offset, not a
+ * flow of its own: see the note on `drop` for why the second axis cannot be
+ * left to the layout.
+ */
+export type MPStackDirection = 'horizontal' | 'vertical' | 'diagonal';
+/** Which end of the pile is nearest the reader. */
+export type MPStackFront = 'first' | 'last';
+export interface MPStackProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which way the pile grows.
+     * @default 'horizontal'
+     */
+    direction?: MPStackDirection;
+    /**
+     * How far each item sits under the one before it, along the axis the pile
+     * flows on — a number in pixels, or any CSS length. Left out it is a fraction
+     * of `size`.
+     */
+    overlap?: number | string;
+    /**
+     * How far each item sits below the one before it on `diagonal`, which is the
+     * axis the flow is **not** on. Defaults to `overlap`, which is a shallow fan.
+     *
+     * It is a prop rather than an angle because a true 45° would need the items'
+     * own width, and a library does not have it: the horizontal advance is
+     * `width − overlap`, and `width` is whatever the caller put in. Nothing here
+     * pretends otherwise.
+     */
+    drop?: number | string;
+    /**
+     * Sets the default `overlap`, and nothing else. It is not passed to the
+     * items — a `Stack` does not know what they are.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** How many items are drawn before the rest become an `overflow`. */
+    max?: number;
+    /**
+     * How many there are altogether, when the stack was handed only the first few.
+     * Without it the count is worked out from the children, which is right only
+     * when all of them were passed.
+     */
+    total?: number;
+    /**
+     * The last item in the pile, built from the number that did not fit.
+     *
+     * A **function** rather than a node, because the count is the whole of what
+     * that item has to say: `(hidden) => <MPAvatar initials={`+${hidden}`} />`.
+     * Left out, nothing is drawn for the remainder.
+     */
+    overflow?: (hidden: number) => React.ReactNode;
+    /**
+     * Which end of the pile is nearest the reader.
+     * @default 'first'
+     */
+    front?: MPStackFront;
+    /**
+     * What each item is scaled by relative to the one in front of it. `1` is no
+     * change; `0.94` puts the fifth card at about three quarters.
+     *
+     * It changes what is drawn and not what is measured, so the spacing of the
+     * pile is the same either way — a scaled card does not pull the ones behind
+     * it closer.
+     * @default 1
+     */
+    scaleStep?: number;
+    /**
+     * The same, for opacity. `0.85` fades a deck into the page behind it.
+     * @default 1
+     */
+    opacityStep?: number;
+    /**
+     * Draws a hairline of the page's own `surface` around each item, so two
+     * shapes of similar tone have an edge between them.
+     *
+     * On the **item** rather than on the wrapper around it, because a ring has to
+     * follow the shape it is tracing and a square ring around a circular avatar
+     * is worse than none. That is a fixed-depth selector, so it reaches a child
+     * this stack put there and not one wrapped in something else — see the
+     * component's documentation.
+     * @default false
+     */
+    ring?: boolean;
+    /**
+     * An entrance for each item, from the same six the `MPAnimate*` components
+     * run. Left out, nothing is animated.
+     */
+    transition?: MPAnimation;
+    /** How long one item's entrance takes, in milliseconds. */
+    duration?: number;
+    /** How long before the first one starts, in milliseconds. */
+    delay?: number;
+    /** Which Material easing curve the entrance runs on. */
+    easing?: MPEasing;
+    /**
+     * How long after one item the next one starts, in milliseconds.
+     * @default 60
+     */
+    stagger?: number;
+    /** How much longer each item takes than the one before it, in milliseconds. */
+    durationStep?: number;
+    /** Deals the pile from the back. */
+    reverse?: boolean;
+    /**
+     * What starts the entrance.
+     * @default 'mount'
+     */
+    trigger?: MPAnimateTrigger;
+    /** Runs it, when `trigger` is `manual`. */
+    play?: boolean;
+    /**
+     * With `trigger="visible"`, whether it runs only the first time.
+     * @default true
+     */
+    once?: boolean;
+    /**
+     * With `trigger="visible"`, how much has to be on screen to count.
+     * @default 0.2
+     */
+    threshold?: number;
+    /** Holds the entrance where it is. */
+    paused?: boolean;
+    /** Hands the entrance to the reader's scrolling. */
+    timeline?: MPAnimateTimeline;
+    /** Which part of the travel through the scrollport the entrance covers. */
+    range?: string;
+    /** The things in the pile. */
+    children?: React.ReactNode;
+}
+/**
+ * Things laid over each other in a pile.
+ *
+ * A stack of avatars, a deck of cards, a heap of documents, a run of overlapped
+ * thumbnails: one component, because "several of these, overlapping" is one
+ * idea and the things being overlapped are not this component's business.
+ *
+ * ## Why the overlap is a margin and not a `translate`
+ *
+ * This is the detail nearly every implementation of this gets wrong. Move the
+ * items with `translate` and each one still **occupies its full width**: the
+ * box stays the size of one item plus the full width of all the others, the
+ * pile is drawn outside it, and everything after the stack on the page is laid
+ * out against a measurement that is wrong. It cannot go in a sentence.
+ *
+ * A negative margin takes the space back, so the box is exactly the size of
+ * what is drawn. At 32px items with a 10px overlap, five of them come to
+ * 120×32 horizontally, 32×120 vertically and 120×72 on the diagonal — the box
+ * fits the content in all three.
+ *
+ * The margin is **logical**, so a horizontal pile overlaps the other way under
+ * RTL without being asked to.
+ *
+ * ## Why `diagonal` is a horizontal flow
+ *
+ * Because a flow only overlaps items on the axis it flows along. The other axis
+ * has to be written per item, as a margin multiplied by the item's index — a
+ * fixed `margin-block-start` in a row does not accumulate, it puts every item
+ * at the same offset and the fan does not happen.
+ *
+ * ## What it does not do
+ *
+ * It does not know what the items **are**, which is the price of being general.
+ * There is no `variant`, no `color` and no `shape` to set once for the pile:
+ * `size` here picks the default overlap and is not passed on. Set the ones your
+ * items share on [MPConfigProvider](../../guide/config), and the rest per item.
+ *
+ * ## Two layers per item, and why
+ *
+ * Each item is wrapped twice. The outer span carries the offset, the `z-index`
+ * and the entrance; the inner one carries the static `scale` and `opacity` that
+ * make depth. They are separate because the `grow` and `zoom` keyframes
+ * animate the individual `scale` property — an animation and a resting depth on
+ * the same element means the keyframe wins and the depth is gone the moment
+ * something is animated.
+ *
+ * The wrappers are also what keeps this off the children. Cloning them to add a
+ * `className` would require every child to accept one, and a face wrapped in a
+ * router's link or a tooltip trigger has no obligation to.
+ *
+ * `ring` is the one exception, and it is honest about the cost: it is a
+ * fixed-depth descendant selector, so it lands on the element this stack
+ * wrapped. A child that is itself a wrapper gets the ring on the wrapper.
+ *
+ * ## What `transition` costs
+ *
+ * 2.1 kB gzipped against the 0.9 kB the layout alone would come to, because it
+ * reads the same effect tables `MPAnimateFade` does. It is here rather than
+ * composed from outside because the items are inside wrappers this component
+ * builds and nothing outside can reach them — but a stack of four faces with no
+ * `transition` is paying for six effects it will never run, and that is written
+ * into the documentation rather than left to be found.
+ */
+export declare const MPStack: React.ForwardRefExoticComponent<MPStackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/stack/MPStack.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{ANIMATION_CLASS as a,ANIM_BASE as r,animationSlots as i,useAnimationRun as n}from"../../internal/animate.js";import{lengthValue as l}from"../../internal/animate.js";import{useMPSize as o}from"../../internal/config.js";const s={xs:"0.625rem",sm:"0.75rem",md:"1.125rem",lg:"1.25rem",xl:"1.5rem"};export const MPStack=/*@__PURE__*/t.forwardRef(function({direction:c="horizontal",overlap:m,drop:d,size:p,max:f,total:g,overflow:h,front:u="first",scaleStep:v=1,opacityStep:y=1,ring:x=!1,transition:S,duration:k,delay:j=0,easing:$,stagger:w=60,durationStep:z=0,reverse:N=!1,trigger:B="mount",play:M,once:_=!0,threshold:I=.2,paused:b,timeline:A,range:C,className:E,style:O,children:P,...R},V){const q=o(p),D=n({trigger:B,play:M,once:_,threshold:I,paused:b,infinite:!1}),F="view"===A?b?"paused":"running":D.state,G=t.Children.toArray(P),H=void 0===f?G:G.slice(0,Math.max(0,f)),J=g??G.length,K=Math.max(0,J-H.length),L=h&&K>0?h(K):null,Q=null===L?H:[...H,L],T=void 0===m?s[q]:l(m),U=void 0===d?T:l(d),W="vertical"===c?"flex-col":"flex-row",X=S?`${r} ${a[S]}`:"";return e("div",{ref:e=>{D.ref(e),"function"==typeof V?V(e):V&&(V.current=e)},"data-mp-size":q,"data-mp-direction":c,className:["mp-stack isolate inline-flex align-middle",W,"diagonal"===c?"items-start":"items-center",x?"ring-mp-surface [&>*>*>*]:ring-2":"",E??""].filter(Boolean).join(" "),style:{"--_mp-anim-state":F,...O},...D.handlers,...R,children:Q.map((a,r)=>{const n=N?Q.length-1-r:r,l="first"===u?r:Q.length-1-r;return e("span",{className:X,style:{zIndex:"first"===u?Q.length-r:r+1,...r>0&&"vertical"===c?{marginBlockStart:`calc(${T} * -1)`}:{},...r>0&&"vertical"!==c?{marginInlineStart:`calc(${T} * -1)`}:{},..."diagonal"===c?{marginBlockStart:`calc(${U} * ${r})`}:{},...S?i({effect:S,duration:k,delay:j+n*w,easing:$,repeat:1,durationOffset:n*z,timeline:A,range:C}):{}},children:e("span",{className:"mp-stack__item block",style:{scale:1===v?void 0:String(v**l),opacity:1===y?void 0:y**l},children:a})},t.isValidElement(a)?a.key??r:r)})})});

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

@@ -0,0 +1,2 @@
+export { MPStack } from './MPStack.js';
+export type { MPStackDirection, MPStackFront, MPStackProps } from './MPStack.js';

package/dist/components/stack/index.js

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

package/dist/components/statistic/MPStatistic.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import type { MPAlign, MPSize, MPSlots } from '../../types.js';
+/** How the move from `previousValue` is written. */
+export type MPStatisticDeltaFormat = 'percent' | 'absolute' | 'both' | 'none';
+/** The parts an `MPStatistic` draws that a `className` cannot reach. */
+export type MPStatisticSlot = 'label' | 'value' | 'delta' | 'caption' | 'trend';
+export interface MPStatisticProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'prefix' | 'color'> {
+    /** What the figure is. Sentence case, and no trailing colon. */
+    label?: React.ReactNode;
+    /**
+     * The figure.
+     *
+     * A number is written by `locale` and `format`; anything else is drawn as it
+     * is, for a value that is already a string — `"2h 14m"`, `"A+"` — or a piece
+     * of markup.
+     */
+    value: React.ReactNode;
+    /**
+     * How a numeric `value` is written. An `Intl.NumberFormat` options object, and
+     * giving one turns `compact` off: a caller who has asked for a currency has
+     * said what they want.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Shortens a number of five digits or more — `12.9K`, `4.2M`.
+     *
+     * Four digits stay: `1,284` is a figure anybody takes in at a glance, and
+     * `1.3K` has thrown away two of them to save two characters.
+     * @default true
+     */
+    compact?: boolean;
+    /** Which language the figure and the move are written in. */
+    locale?: string;
+    /** Placed before the figure, on the same line — a currency mark, an icon. */
+    prefix?: React.ReactNode;
+    /** Placed after it, one step smaller — a unit, a denominator. */
+    unit?: React.ReactNode;
+    /** What the figure was, so the move from it can be drawn. */
+    previousValue?: number;
+    /**
+     * How that move is written.
+     * @default 'percent'
+     */
+    delta?: MPStatisticDeltaFormat;
+    /**
+     * Which direction is the good one.
+     *
+     * It is a prop and not an assumption because half the figures on a dashboard
+     * are the other way round: churn, latency, cost and error rate are all better
+     * when they fall, and a component that painted every fall red would be lying
+     * about four tiles in eight.
+     * @default 'up'
+     */
+    betterWhen?: 'up' | 'down';
+    /** What the move is measured against — "vs last week". Read out with it. */
+    period?: React.ReactNode;
+    /** A line under the figure, for the thing that does not fit anywhere else. */
+    caption?: React.ReactNode;
+    /**
+     * Room under the figure for a picture of it — a sparkline, usually.
+     *
+     * A slot rather than a chart of its own: a statistic that owned a sparkline
+     * would be a statistic that had opinions about a second component's data
+     * shape, and the two are separable.
+     */
+    trend?: React.ReactNode;
+    /** @default 'start' */
+    align?: MPAlign;
+    /** @default 'md' */
+    size?: MPSize;
+    classNames?: MPSlots<MPStatisticSlot>;
+}
+/**
+ * One figure, said once and read from across a desk.
+ *
+ * ```tsx
+ * <MPStatistic label="Active installs" value={128400} previousValue={119200} />
+ * ```
+ *
+ * It is the chart you draw when there is nothing to plot. A single number has no
+ * shape, no order and no second dimension, and putting it on a pair of axes to
+ * make it look like data is the most common way a dashboard wastes a panel. What
+ * a reader wants from one figure is the figure, what it is, and whether it is
+ * going the right way.
+ *
+ * ## The direction is the caller's to say
+ *
+ * `betterWhen` exists because half the figures on any dashboard are the other
+ * way round — churn, latency, cost and error rate are all better when they fall.
+ * A component that painted every fall red would be wrong about four tiles in
+ * eight, and it would be wrong *confidently*, in the one colour a reader trusts
+ * without checking.
+ *
+ * Flat is a third state rather than a quiet "up". It takes the muted ink and a
+ * dash, because a figure that has not moved has not done anything good either.
+ *
+ * ## The figure does not wear the direction's colour
+ *
+ * Only the move does. The number itself is `on-surface` at every size, in every
+ * state: it is the thing being reported, and a reported value that changes
+ * colour with its own trend is a value the reader has to decode before they can
+ * read it.
+ */
+export declare function MPStatistic({ label, value, format, compact, locale: localeProp, prefix, unit, previousValue, delta, betterWhen, period, caption, trend, align, size: sizeProp, className, classNames, ...props }: MPStatisticProps): React.JSX.Element;

package/dist/components/statistic/MPStatistic.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{MPIcon as a}from"../icon/MPIcon.js";import{ArrowDownIcon as l,ArrowUpIcon as n,RemoveIcon as i}from"../../constants/icons.js";import{useMPLocale as s}from"../../internal/locale.js";import{useMPSize as r}from"../../internal/config.js";import{COMPACT_FROM as m,deltaOf as c,formatStatistic as o}from"../../internal/chart.js";import{numberFormatter as p}from"../../internal/intl.js";import{META_TEXT as u,hasContent as d}from"../../internal/scale.js";const x={xs:"text-mp-title-medium",sm:"text-mp-title-large",md:"text-mp-headline-small",lg:"text-mp-headline-medium",xl:"text-mp-display-small"},f={xs:"text-mp-label-small",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-title-small",xl:"text-mp-title-medium"},h={style:"percent",maximumFractionDigits:1,signDisplay:"exceptZero"},b={start:"items-start text-start",center:"items-center text-center",end:"items-end text-end"};export function MPStatistic({label:g,value:j,format:N,compact:v=!0,locale:_,prefix:y,unit:w,previousValue:D,delta:z="percent",betterWhen:M="up",period:k,caption:B,trend:F,align:P="start",size:Z,className:I,classNames:S,...V}){const W=r(Z),$=s(_),q="number"==typeof j?o(j,$,N,v):j,A="number"==typeof j&&"number"==typeof D&&"none"!==z?c(j,D,M):null,C=null===A?.percent||null===A?null:p($,h).format(A.percent/100),E=null===A?null:p($,{...N??{},signDisplay:"exceptZero",...N?{}:v&&Math.abs(A.absolute)>=m?{notation:"compact",maximumFractionDigits:1}:{}}).format(A.absolute),G="absolute"===z?E:"both"===z?[E,C].filter(Boolean).join(" · "):C??E,H=(...t)=>t.filter(Boolean).join(" ");return e("div",{"data-mp-size":W,className:H("mp-statistic flex min-w-0 flex-col gap-1",b[P],I),...V,children:[d(g)?t("span",{className:H("mp-statistic__label text-mp-on-surface-variant",f[W],S?.label),children:g}):null,e("span",{className:H("mp-statistic__value text-mp-on-surface flex items-baseline gap-1 font-medium",x[W],S?.value),children:[d(y)?t("span",{className:"shrink-0",children:y}):null,t("span",{className:"min-w-0 truncate",children:q}),d(w)?t("span",{className:`text-mp-on-surface-variant shrink-0 ${f[W]}`,children:w}):null]}),A&&G?e("span",{className:H("mp-statistic__delta flex items-center gap-0.5",u,0===A.direction?"text-mp-on-surface-variant":A.good?"text-mp-tertiary":"text-mp-error",S?.delta),"data-mp-direction":0===A.direction?"flat":1===A.direction?"up":"down",children:[t(a,{icon:0===A.direction?i:1===A.direction?n:l,size:14}),t("span",{children:G}),d(k)?t("span",{className:"text-mp-on-surface-variant",children:k}):null]}):null,d(B)?t("span",{className:H("mp-statistic__caption text-mp-on-surface-variant",u,S?.caption),children:B}):null,d(F)?t("div",{className:H("mp-statistic__trend w-full",S?.trend),children:F}):null]})}

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

@@ -0,0 +1,2 @@
+export { MPStatistic } from './MPStatistic.js';
+export type { MPStatisticDeltaFormat, MPStatisticProps, MPStatisticSlot } from './MPStatistic.js';

package/dist/components/statistic/index.js

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

package/dist/components/stepper/MPStepper.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CheckIcon as o,ErrorIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{hasContent as s,META_TEXT as c,SHEET_TITLE as p}from"../../internal/scale.js";import{BORDER_STYLE as m,BULLET as u,BULLET_GAP as d,BULLET_SIZE as f,CONNECTOR_COLOR as x,ITEM_GAP as h,ITEM_GAP_X as v,TITLE_COLOR as b}from"../../internal/step.js";import{useMPColor as _,useMPSize as j}from"../../internal/config.js";const N=/*@__PURE__*/n.createContext(null),g=/*@__PURE__*/n.createContext(0);export const MPStepper=/*@__PURE__*/n.forwardRef(function({active:l,defaultActive:r=0,onActiveChange:o,linear:a=!0,orientation:s="horizontal",size:c,color:p,className:m,style:u,children:d,...x},h){const v=j(c),b=_(p),[y,z]=n.useState(r),C=l??y,[S,$]=n.useState(C);C>S&&$(C);const P=n.Children.toArray(d).filter(n.isValidElement),k=P.length,M=n.useCallback(e=>{void 0===l&&z(e),o?.(e)},[l,o]),A=n.useMemo(()=>({size:v,color:b,orientation:s,active:C,onSelect:o||void 0===l?M:null,linear:a,count:k,furthest:S}),[v,b,s,C,o,l,M,a,k,S]),B="horizontal"===s;return e(N.Provider,{value:A,children:t("div",{...x,ref:h,"data-mp-size":v,className:["mp-stepper flex flex-col",m??""].filter(Boolean).join(" "),style:{...i(b),...u},children:[e("ol",{className:["mp-stepper__rail flex list-none p-0",B?"flex-row items-start":"flex-col"].join(" "),style:{"--_mp-bullet":f[v]},children:P.map((t,l)=>e(g.Provider,{value:l,children:t},l))}),e(w,{steps:P,active:C})]})})});function w({steps:t,active:l}){const n=t[l],r=n?.props.children;return s(r)?e("div",{className:"mp-stepper__panel mt-4",role:"group","aria-label":void 0,children:r}):null}export const MPStep=/*@__PURE__*/n.forwardRef(function({label:f,description:_,bullet:j,error:w=!1,optional:y,disabled:z=!1,connector:C="solid",color:S,className:$,style:P,children:k,...M},A){const B=n.useContext(N),R=n.useContext(g),E=B?.size??"md",F=B?.orientation??"horizontal",I=B?.active??0,V=B?.count??1,q=B?.furthest??0,D=B?.linear??!0,G=R<I?"complete":R===I?"current":"upcoming",H=S??(w?"error":B?.color??"primary"),J="horizontal"===F,K=R===V-1,L="none"!==C&&!K,O=!z&&(!D||R<=q),Q=null!=B?.onSelect&&O,T=j??("complete"!==G||w?w?e(r,{icon:a}):R+1:e(r,{icon:o})),U=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]",u[G],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)"].join(" "),children:T}),W=L?e("span",{"aria-hidden":"true",className:["pointer-events-none absolute",J?"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",m[C],x[G]].filter(Boolean).join(" ")}):null,X=t("span",{className:"flex min-w-0 flex-col gap-0.5 text-start "+(J?"mt-2":""),children:[s(f)?e("span",{className:`${p[E]} ${w?"text-mp-error":b[G]}`,children:f}):null,s(y)?e("span",{className:`text-mp-on-surface-variant ${c}`,children:y}):null,s(_)?e("span",{className:`text-mp-on-surface-variant ${c}`,children:_}):null]}),Y=t(l,{children:[W,t("span",{className:`flex min-w-0 ${J?"flex-col items-start":"flex-row"} ${J?"":d[E]}`,children:[U,X]})]});return e("li",{...M,ref:A,"aria-current":"current"===G?"step":void 0,className:["mp-stepper__step relative min-w-0",J?`flex-1 ${K?"":v[E]}`:K?"":h[E],$??""].filter(Boolean).join(" "),style:{...S||w?i(H):null,...P},children:Q?e("button",{type:"button",className:["group relative flex w-full min-w-0 cursor-pointer appearance-none bg-transparent p-0 text-start","outline-mp-secondary rounded-mp-xs focus-visible:outline-2 focus-visible:outline-offset-2","outline-none"].join(" "),onClick:()=>B?.onSelect?.(R),children:Y}):e("span",{className:"relative flex w-full min-w-0","aria-disabled":!(!B?.onSelect||O)||void 0,children:Y})})});
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as l}from"../icon/MPIcon.js";import{CheckIcon as o,ErrorIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{hasContent as s,META_TEXT as c,SHEET_TITLE as p}from"../../internal/scale.js";import{BORDER_STYLE as m,BULLET as d,BULLET_GAP as u,BULLET_SIZE as f,CONNECTOR_COLOR as h,ITEM_GAP as v,ITEM_GAP_X as x,STEP_MOTION as b,TITLE_COLOR as _}from"../../internal/step.js";import{useMPColor as j,useMPSize as N}from"../../internal/config.js";function g(e,t){return`${e}-label-${t}`}function w(e){return`${e}-panel`}const y=/*@__PURE__*/n.createContext(null),z=/*@__PURE__*/n.createContext(0);export const MPStepper=/*@__PURE__*/n.forwardRef(function({active:r,defaultActive:l=0,onActiveChange:o,linear:a=!0,orientation:c="horizontal",size:p,color:m,className:d,style:u,children:h,...v},x){const b=N(p),_=j(m),[g,w]=n.useState(l),C=r??g,[P,S]=n.useState(C);C>P&&S(C);const $=n.Children.toArray(h).filter(n.isValidElement),k=$.length,M=n.useId(),A=s($[C]?.props.children),I=n.useCallback(e=>{void 0===r&&w(e),o?.(e)},[r,o]),R=n.useMemo(()=>({size:b,color:_,orientation:c,active:C,onSelect:o||void 0===r?I:null,linear:a,count:k,furthest:P,idBase:M,hasPanel:A}),[b,_,c,C,o,r,I,a,k,P,M,A]),E="horizontal"===c;return e(y.Provider,{value:R,children:t("div",{...v,ref:x,"data-mp-size":b,className:["mp-stepper flex flex-col",d??""].filter(Boolean).join(" "),style:{...i(_),...u},children:[e("ol",{className:["mp-stepper__rail m-0 flex list-none p-0",E?"flex-row items-start":"flex-col"].join(" "),style:{"--_mp-bullet":f[b]},children:$.map((t,r)=>e(z.Provider,{value:r,children:t},r))}),e(B,{steps:$,active:C,idBase:M})]})})});function B({steps:t,active:r,idBase:n}){const l=t[r],o=l?.props.children;if(!s(o))return null;const a=s(l?.props.label);return e("div",{id:w(n),role:"group","aria-labelledby":a?g(n,r):void 0,className:"mp-stepper__panel mt-4",children:o})}export const MPStep=/*@__PURE__*/n.forwardRef(function({label:f,description:j,bullet:N,error:B=!1,optional:C,disabled:P=!1,connector:S="solid",color:$,className:k,style:M,children:A,...I},R){const E=n.useContext(y),F=n.useContext(z),V=E?.size??"md",q=E?.orientation??"horizontal",D=E?.active??0,G=E?.count??1,H=E?.furthest??0,J=E?.linear??!0,K=F<D?"complete":F===D?"current":"upcoming",L=$??(B?"error":E?.color??"primary"),O="horizontal"===q,Q=F===G-1,T="none"!==S&&!Q,U=!P&&(!J||F<=H),W=null!=E?.onSelect&&U,X=N??("complete"!==K||B?B?e(l,{icon:a}):F+1:e(l,{icon:o})),Y=e("span",{"aria-hidden":"true",className:["mp-stepper__bullet rounded-mp-full relative z-10 flex shrink-0","items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",d[K],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" "),children:X}),Z=T?e("span",{"aria-hidden":"true",className:["mp-stepper__connector pointer-events-none absolute",O?"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",m[S],h[K],b].filter(Boolean).join(" ")}):null,ee=t("span",{className:"flex min-w-0 flex-col gap-0.5 text-start "+(O?"mt-2":""),children:[s(f)?e("span",{id:E?g(E.idBase,F):void 0,className:["mp-stepper__label",p[V],B?"text-mp-error":_[K],b].join(" "),children:f}):null,s(C)?e("span",{className:`text-mp-on-surface-variant ${c}`,children:C}):null,s(j)?e("span",{className:`text-mp-on-surface-variant ${c}`,children:j}):null]}),te=t(r,{children:[Z,t("span",{className:`flex min-w-0 ${O?"flex-col items-start":"flex-row"} ${O?"":u[V]}`,children:[Y,ee]})]});return e("li",{...I,ref:R,"aria-current":"current"===K?"step":void 0,className:["mp-stepper__step relative min-w-0",O?`flex-1 ${Q?"":x[V]}`:Q?"":v[V],k??""].filter(Boolean).join(" "),style:{...$||B?i(L):null,...M},children:W?e("button",{type:"button","aria-controls":E?.hasPanel?w(E.idBase):void 0,"aria-expanded":E?.hasPanel?"current"===K:void 0,className:["group relative flex w-full min-w-0 cursor-pointer appearance-none border-0 bg-transparent p-0 text-start","outline-mp-secondary rounded-mp-xs focus-visible:outline-2 focus-visible:outline-offset-2","outline-none"].join(" "),onClick:()=>E?.onSelect?.(F),children:te}):e("span",{className:"relative flex w-full min-w-0","aria-disabled":!(!E?.onSelect||U)||void 0,children:te})})});

package/dist/components/table/MPTable.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPAlign, MPColor, MPSize, MPVariant } from '../../types.js';
+import type { MPAlign, MPColor, MPDensity, MPSize, MPElevation, MPVariant } from '../../types.js';
 /** Which edge the text in a column lines up against. */
 export type MPTableAlign = MPAlign;
 /**
@@ -98,7 +98,7 @@ export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'
      * A row that answers a press has to answer a keyboard too, so each one joins
      * the tab order and takes Enter and Space. That is the honest minimum for a
      * `<tr>` — a row cannot be wrapped in a `<button>` the way an
-     * [MPListItem](../layout/list) is, because a `<button>` is not something a
+     * [MPListItem](./list) is, because a `<button>` is not something a
      * `<tbody>` may contain.
      *
      * It is also worth knowing what it costs: a table of two hundred rows becomes
@@ -112,6 +112,17 @@ export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'
      * @default 'outlined'
      */
     variant?: MPVariant;
+    /**
+     * How far off the page the sheet is lifted, on MD3's own scale.
+     *
+     * It moves the **tone** as well as the shadow, because Material pairs the two:
+     * a level-2 surface is `surface-container` under a level-2 shadow, and a prop
+     * that only cast a shadow would raise this into a surface the specification
+     * has no name for. Given a level, `variant` is left holding only its hairline.
+     *
+     * Left unset, `variant` decides — and `variant="elevated"` is this at `1`.
+     */
+    elevation?: MPElevation;
     /**
      * @default 'md'
      */
@@ -122,6 +133,17 @@ export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'
      * @default 'primary'
      */
     color?: MPColor;
+    /**
+     * Takes room out of every cell without changing what it is set in.
+     *
+     * The axis a table is most often asked for: the reason to make one denser is
+     * to see more rows at once, and shrinking the type to get there makes the
+     * figures harder to read at exactly the moment there are more of them. Each
+     * step is MD3's four pixels off the row — `md` goes 52, 48, 44, 40 — and the
+     * text stays where it was.
+     * @default 0
+     */
+    density?: MPDensity;
 }
 /**
  * A grid of data.
@@ -139,4 +161,4 @@ export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'
  * than a ref on the scroll container is worth — and a caller who needs one can
  * put it on a `<div>` of their own around this.
  */
-export declare function MPTable<Row>({ headers, items, getRowKey, caption, empty, locale: localeProp, striped, hoverable, stickyHeader, onRowClick, variant, size: sizeProp, color: colorProp, className, style, ...props }: MPTableProps<Row>): React.JSX.Element;
+export declare function MPTable<Row>({ headers, items, getRowKey, caption, empty, locale: localeProp, striped, hoverable, stickyHeader, onRowClick, variant, elevation, size: sizeProp, color: colorProp, density: densityProp, className, style, ...props }: MPTableProps<Row>): React.JSX.Element;

package/dist/components/table/MPTable.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as o,useMPMessages as n}from"../../internal/locale.js";import{TABLE as a}from"../../internal/messages/table.js";import{cssLength as i}from"../../internal/length.js";import{META_TEXT as m}from"../../internal/scale.js";import{CONTAINER_SURFACE as s}from"../../internal/surface.js";import{useMPColor as c,useMPSize as d}from"../../internal/config.js";const p={xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},u={xs:"0.375rem",sm:"0.625rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},x={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},f={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},y=/*@__PURE__*/["[--_mp-row:transparent]","transition-[background-color] duration-(--mp-sys-motion-duration-short4)"].join(" ");function g(e){if(null==e)return null;const t=typeof e;return"string"===t||"number"===t||"bigint"===t||"boolean"===t||r.isValidElement(e)?e:null}export function MPTable({headers:r,items:b,getRowKey:h,caption:v,empty:j,locale:w,striped:k=!1,hoverable:N=!1,stickyHeader:_=!1,onRowClick:C,variant:$="outlined",size:A,color:B,className:z,style:T,...D}){const E=d(A),K=c(B),R=n(a,o(w)),H=p[E],I=u[E],M=Boolean(C),P=N||M,S={padding:`${I} ${H}`},V={...S,backgroundColor:"var(--_mp-color-surface-container)"},q={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"};return e("div",{"data-mp-size":E,"data-mp-variant":$,className:["mp-table rounded-mp-md overflow-x-auto",s[$],z??""].filter(Boolean).join(" "),style:{...l(K),...T},...D,children:t("table",{className:`text-mp-on-surface w-full text-start ${x[E]}`,style:{borderCollapse:"collapse"},children:[v?e("caption",{className:`text-mp-on-surface-variant ${m}`,style:{...S,textAlign:"start"},children:v}):null,e("colgroup",{children:r.map(t=>e("col",{style:void 0===t.width?void 0:{width:i(t.width)}},t.key))}),e("thead",{children:e("tr",{children:r.map(t=>e("th",{scope:"col",className:["text-mp-on-surface-variant whitespace-nowrap",f[E],_?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...V,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===b.length?e("tr",{className:y,style:q,children:e("td",{colSpan:r.length,className:"text-mp-on-surface-variant",style:{padding:`2rem ${H}`,textAlign:"center"},children:j??R.empty})}):b.map((t,l)=>e("tr",{className:[y,k&&l%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",P?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",M?["cursor-pointer","outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" "),style:q,tabIndex:M?0:void 0,onClick:C?()=>C(t,l):void 0,onKeyDown:C?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),C(t,l))}:void 0,children:r.map(r=>e("td",{style:{...S,textAlign:r.align??"start"},children:r.render?r.render(t,l):g(t[r.key])},r.key))},h?h(t,l):l))})]})})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{accentSlots as o}from"../../internal/accent.js";import{useMPLocale as r,useMPMessages as a}from"../../internal/locale.js";import{TABLE as l}from"../../internal/messages/table.js";import{cssLength as n}from"../../internal/length.js";import{META_TEXT as i}from"../../internal/scale.js";import{containerSurface as s}from"../../internal/elevation.js";import{CELL_TEXT as c,HEAD_TEXT as m,ROW as d,cellPadX as p,cellPadY as u,drawableCell as f}from"../../internal/table.js";import{useMPColor as v,useMPDensity as y,useMPSize as h}from"../../internal/config.js";export function MPTable({headers:g,items:b,getRowKey:x,caption:j,empty:w,locale:k,striped:N=!1,hoverable:_=!1,stickyHeader:C=!1,onRowClick:$,variant:A="outlined",elevation:B,size:z,color:T,density:D,className:K,style:R,...E}){const H=h(z),I=v(T),M=y(D),P=a(l,r(k)),S=p(H,M),q=u(H,M),F=Boolean($),G=_||F,J={padding:`${q} ${S}`},L={...J,backgroundColor:"var(--_mp-color-surface-container)"},O={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"};return e("div",{"data-mp-size":H,"data-mp-variant":A,className:["mp-table rounded-mp-md overflow-x-auto",s(A,B),K??""].filter(Boolean).join(" "),style:{...o(I),...R},...E,children:t("table",{className:`text-mp-on-surface w-full text-start ${c[H]}`,style:{borderCollapse:"collapse"},children:[j?e("caption",{className:`text-mp-on-surface-variant ${i}`,style:{...J,textAlign:"start"},children:j}):null,e("colgroup",{children:g.map(t=>e("col",{style:void 0===t.width?void 0:{width:n(t.width)}},t.key))}),e("thead",{children:e("tr",{children:g.map(t=>e("th",{scope:"col",className:["text-mp-on-surface-variant whitespace-nowrap",m[H],C?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...L,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===b.length?e("tr",{className:d,style:O,children:e("td",{colSpan:g.length,className:"text-mp-on-surface-variant",style:{padding:`2rem ${S}`,textAlign:"center"},children:w??P.empty})}):b.map((t,o)=>e("tr",{className:[d,N&&o%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",G?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",F?["cursor-pointer","outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" "),style:O,tabIndex:F?0:void 0,onClick:$?()=>$(t,o):void 0,onKeyDown:$?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),$(t,o))}:void 0,children:g.map(r=>e("td",{style:{...J,textAlign:r.align??"start"},children:r.render?r.render(t,o):f(t[r.key])},r.key))},x?x(t,o):o))})]})})}

package/dist/components/tabs/MPTabs.d.ts

@@ -125,6 +125,18 @@ export interface MPTabPanelProps extends React.ComponentPropsWithoutRef<'div'> {
  * A bar with more tabs than room scrolls rather than wrapping, which is MD3's
  * scrollable tabs: a tab bar on two lines has stopped being a bar, and the
  * indicator has nowhere sensible to sit.
+ *
+ * ## Saying that it scrolls
+ *
+ * It always did. What it had no way of saying was so — macOS draws an overlay
+ * scrollbar that does not exist until it is used, so a bar with four tabs off
+ * the edge and a bar with none were the same picture, and Windows drew a real
+ * one that is a signal and also fifteen pixels of furniture under the tabs.
+ *
+ * The scrollbar is hidden on both and the ends are faded instead, on the side
+ * that has more bar past it. The overflow is **measured** — it depends on the
+ * room the bar was given, which nothing here knows — and written out as
+ * `data-mp-overflow` for the stylesheet to read.
  */
 export declare const MPTabs: React.ForwardRefExoticComponent<MPTabsProps & React.RefAttributes<HTMLDivElement>>;
 /**

package/dist/components/tabs/MPTabs.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{accentSlots as o}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{CONTROL_GAP as r,hasContent as l,SHEET_GAP as s}from"../../internal/scale.js";import{useMPColor as c,useMPSize as m}from"../../internal/config.js";const u=/*@__PURE__*/a.createContext({variant:"primary",size:"md",iconPosition:"top",fullWidth:!1}),p={xs:"h-8",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},d={xs:"h-11",sm:"h-13",md:"h-16",lg:"h-18",xl:"h-20"},f={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},h={xs:"px-3",sm:"px-3.5",md:"px-4",lg:"px-5",xl:"px-6"},x={xs:12,sm:14,md:16,lg:20,xl:24},v={xs:18,sm:20,md:24,lg:24,xl:28};function b(e,t,i,o=""){a.Children.toArray(e).forEach(e=>{if(!a.isValidElement(e))return void(l(e)&&t.push(e));if(e.type===a.Fragment)return void b(e.props.children,t,i,`${o}${String(e.key)}/`);const n=o?a.cloneElement(e,{key:`${o}${String(e.key)}`}):e;e.type===MPTabPanel?i.push(n):t.push(n)})}export const MPTabs=/*@__PURE__*/a.forwardRef(function({variant:n="primary",color:r,size:l,value:p,defaultValue:d,onValueChange:f,iconPosition:h,activateOnFocus:v=!1,loopFocus:y=!0,divider:g=!0,fullWidth:_=!1,className:w,style:j,children:P,"aria-label":N,...k},M){const $=c(r),z=m(l),C=h??("primary"===n?"top":"start"),F=a.useMemo(()=>({variant:n,size:z,iconPosition:C,fullWidth:_}),[n,z,C,_]),T=[],V=[];return b(P,T,V),e(u.Provider,{value:F,children:t(i.Root,{ref:M,value:p,defaultValue:d,onValueChange:e=>f?.(e),"data-mp-size":z,"data-mp-variant":n,className:["mp-tabs flex min-w-0 flex-col",s[z],w??""].filter(Boolean).join(" "),style:{...o($),"--_mp-tab-inset":`${x[z]}px`,...j},...k,children:[t(i.List,{"aria-label":N,activateOnFocus:v,loopFocus:y,className:["mp-tabs__list relative flex shrink-0",g?"border-mp-outline-variant border-b":"",_?"w-full":"","overflow-x-auto overflow-y-hidden"].filter(Boolean).join(" "),children:[T,e(i.Indicator,{className:["mp-tabs__indicator pointer-events-none absolute bottom-0","bg-(--_mp-accent)","primary"===n?["h-0.75 rounded-t-full","left-[calc(var(--active-tab-left)_+_var(--_mp-tab-inset))]","w-[calc(var(--active-tab-width)_-_2_*_var(--_mp-tab-inset))]"].join(" "):"left-(--active-tab-left) h-0.5 w-(--active-tab-width)","[transition-property:left,width]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" ")})]}),V]})})});export const MPTab=/*@__PURE__*/a.forwardRef(function({value:o,icon:s,disabled:c=!1,className:m,children:x,...b},y){const{variant:g,size:_,iconPosition:w,fullWidth:j}=a.useContext(u),P="top"===w&&l(s);return t(i.Tab,{ref:y,value:o,disabled:c,className:["mp-tabs__tab group relative flex shrink-0 items-center justify-center","box-border appearance-none bg-transparent font-[inherit] whitespace-nowrap select-none","overflow-hidden outline-none","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",P?`flex-col gap-1 ${d[_]}`:`flex-row ${p[_]}`,P?"":r[_],f[_],h[_],c?"text-mp-on-surface/38 cursor-default":["text-mp-on-surface-variant cursor-pointer","primary"===g?"data-active:text-(--_mp-accent)":"data-active:text-mp-on-surface"].join(" "),"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid",j?"flex-1":"",m??""].filter(Boolean).join(" "),...b,children:[c?null:e(n,{}),l(s)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:v[_],height:v[_]},children:s}):null,l(x)?e("span",{className:"relative truncate",children:x}):null]})});export const MPTabPanel=/*@__PURE__*/a.forwardRef(function({value:t,keepMounted:a=!1,className:o,children:n,...r},l){return e(i.Panel,{ref:l,value:t,keepMounted:a,className:["mp-tabs__panel text-mp-on-surface min-w-0 flex-1","rounded-mp-xs outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-starting-style:opacity-0",o??""].filter(Boolean).join(" "),...r,children:n})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{accentSlots as n}from"../../internal/accent.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as r,hasContent as l,SHEET_GAP as s}from"../../internal/scale.js";import{useMPColor as c,useMPSize as u}from"../../internal/config.js";const d=/*@__PURE__*/a.createContext({variant:"primary",size:"md",iconPosition:"top",fullWidth:!1}),m={xs:"h-8",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},p={xs:"h-11",sm:"h-13",md:"h-16",lg:"h-18",xl:"h-20"},f={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},h={xs:"px-3",sm:"px-3.5",md:"px-4",lg:"px-5",xl:"px-6"},b={xs:12,sm:14,md:16,lg:20,xl:24},v={xs:18,sm:20,md:24,lg:24,xl:28};function x(e,t,i,n=""){a.Children.toArray(e).forEach(e=>{if(!a.isValidElement(e))return void(l(e)&&t.push(e));if(e.type===a.Fragment)return void x(e.props.children,t,i,`${n}${String(e.key)}/`);const o=n?a.cloneElement(e,{key:`${n}${String(e.key)}`}):e;e.type===MPTabPanel?i.push(o):t.push(o)})}export const MPTabs=/*@__PURE__*/a.forwardRef(function({variant:o="primary",color:r,size:l,value:m,defaultValue:p,onValueChange:f,iconPosition:h,activateOnFocus:v=!1,loopFocus:y=!0,divider:w=!0,fullWidth:g=!1,className:_,style:j,children:P,"aria-label":k,...N},M){const z=c(r),C=u(l),R=h??("primary"===o?"top":"start"),$=a.useMemo(()=>({variant:o,size:C,iconPosition:R,fullWidth:g}),[o,C,R,g]),S=a.useRef(null),[W,E]=a.useState(null),F=a.useCallback(()=>{const e=S.current;if(!e)return;const t=e.scrollWidth-e.clientWidth,a=Math.abs(e.scrollLeft),i=t-a,n="rtl"===getComputedStyle(e).direction,o=(n?i:a)>1,r=(n?a:i)>1;E(o&&r?"both":o?"left":r?"right":null)},[]);a.useEffect(F),a.useEffect(()=>{const e=S.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(F);return t.observe(e),()=>t.disconnect()},[F]);const T=[],V=[];return x(P,T,V),e(d.Provider,{value:$,children:t(i.Root,{ref:M,value:m,defaultValue:p,onValueChange:e=>f?.(e),"data-mp-size":C,"data-mp-variant":o,className:["mp-tabs flex min-w-0 flex-col",s[C],_??""].filter(Boolean).join(" "),style:{...n(z),"--_mp-tab-inset":`${b[C]}px`,...j},...N,children:[t(i.List,{ref:S,"aria-label":k,activateOnFocus:v,loopFocus:y,"data-mp-overflow":W??void 0,onScroll:F,className:["mp-tabs__list relative flex shrink-0",w?"border-mp-outline-variant border-b":"",g?"w-full":"","overflow-x-auto overflow-y-hidden","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"].filter(Boolean).join(" "),children:[T,e(i.Indicator,{className:["mp-tabs__indicator pointer-events-none absolute bottom-0","bg-(--_mp-accent)","primary"===o?["h-0.75 rounded-t-full","left-[calc(var(--active-tab-left)_+_var(--_mp-tab-inset))]","w-[calc(var(--active-tab-width)_-_2_*_var(--_mp-tab-inset))]"].join(" "):"left-(--active-tab-left) h-0.5 w-(--active-tab-width)","[transition-property:left,width]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" ")})]}),V]})})});export const MPTab=/*@__PURE__*/a.forwardRef(function({value:n,icon:s,disabled:c=!1,className:u,children:b,...x},y){const{variant:w,size:g,iconPosition:_,fullWidth:j}=a.useContext(d),P="top"===_&&l(s);return t(i.Tab,{ref:y,value:n,disabled:c,className:["mp-tabs__tab group relative flex shrink-0 items-center justify-center","box-border appearance-none border-0 bg-transparent font-[inherit] whitespace-nowrap select-none","overflow-hidden outline-none","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",P?`flex-col gap-1 ${p[g]}`:`flex-row ${m[g]}`,P?"":r[g],f[g],h[g],c?"text-mp-on-surface/38 cursor-default":["text-mp-on-surface-variant cursor-pointer","primary"===w?"data-active:text-(--_mp-accent)":"data-active:text-mp-on-surface"].join(" "),"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid",j?"flex-1":"",u??""].filter(Boolean).join(" "),...x,children:[c?null:e(o,{}),l(s)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:v[g],height:v[g]},children:s}):null,l(b)?e("span",{className:"relative truncate",children:b}):null]})});export const MPTabPanel=/*@__PURE__*/a.forwardRef(function({value:t,keepMounted:a=!1,className:n,children:o,...r},l){return e(i.Panel,{ref:l,value:t,keepMounted:a,className:["mp-tabs__panel text-mp-on-surface min-w-0 flex-1","rounded-mp-xs outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-starting-style:opacity-0",n??""].filter(Boolean).join(" "),...r,children:o})});

package/dist/components/timeline/MPTimeline.js

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

package/dist/components/timeline-chart/MPTimelineChart.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { type ChartBaseProps } from '../../internal/ChartChrome.js';
+import type { MPChartAxis, MPTimelineSeries } from '../../types.js';
+/** No `legend`: the rows are the axis, so there is nothing for one to identify. */
+export interface MPTimelineChartProps extends Omit<ChartBaseProps, 'legend'> {
+    /** The rows, top to bottom. Each carries its own spans. */
+    series: readonly MPTimelineSeries[];
+    /** The row axis. */
+    yAxis?: MPChartAxis;
+    /** The time axis. */
+    xAxis?: MPChartAxis;
+    /**
+     * Writes each span's label inside it, where the span is wide enough to hold
+     * the text. One that does not fit is dropped rather than clipped.
+     * @default true
+     */
+    spanLabels?: boolean;
+}
+/**
+ * What ran when, one row per thing.
+ *
+ * ```tsx
+ * <MPTimelineChart
+ *   series={[
+ *     { name: 'Build', data: [{ start: new Date('2026-03-02'), end: new Date('2026-03-05') }] },
+ *     { name: 'Test', data: [{ start: new Date('2026-03-05'), end: new Date('2026-03-09') }] }
+ *   ]}
+ * />
+ * ```
+ *
+ * A Gantt: rows down the side, time along the bottom, and a bar for every
+ * stretch. What it encodes is a **duration and its place**, which is the one
+ * question the other charts cannot be asked — every one of them has a mark at a
+ * single point on the value axis, and a span has two ends.
+ *
+ * ## The axis is a calendar, not a number line
+ *
+ * The 1-2-5-10 steps every other chart's value axis uses are exactly wrong for
+ * an instant. Run on epoch milliseconds they put a tick every 200,000,000 ms,
+ * which lands at 14:53:20 on an arbitrary Tuesday. Time is not decimal below
+ * the year — sixty, sixty, twenty-four, seven, twelve — so this axis steps in
+ * seconds, minutes, hours, days, weeks, months and years, and the ticks are
+ * walked with real calendar arithmetic: a month step lands on the first of the
+ * month whatever its length, and a day step survives the clocks going back.
+ *
+ * Ticks are also **aligned**, so a three-hour axis reads 00:00, 03:00, 06:00
+ * rather than 01:00, 04:00, 07:00. Evenly spaced ticks that land on nothing a
+ * reader recognises give up most of the value of using a calendar at all.
+ *
+ * ## There is no legend
+ *
+ * The rows **are** the category axis and they are already named down the side.
+ * A legend restating twenty row names is not a filter anybody wants, and it
+ * would be the only legend here that identified nothing new.
+ *
+ * ## The pointer is tested against the whole bar
+ *
+ * A span can be two hundred pixels of bar whose centre a pointer never goes
+ * near, so hit-testing to the centre would hand a short bar on the next row a
+ * hover the reader is plainly not making. The frame measures to the mark's
+ * **body** instead.
+ */
+export declare function MPTimelineChart({ series, yAxis, xAxis, spanLabels, ...frame }: MPTimelineChartProps): React.JSX.Element;

package/dist/components/timeline-chart/MPTimelineChart.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as a,jsxs as e}from"react/jsx-runtime";import*as t from"react";import{CartesianFrame as r}from"../../internal/ChartFrame.js";import{ChartTable as n}from"../../internal/ChartChrome.js";import{useMPLocale as o,useMPMessages as l}from"../../internal/locale.js";import{CHART as s}from"../../internal/messages/chart.js";import{TABLE as i}from"../../internal/messages/table.js";import{formatTimeTick as m,timeScale as p}from"../../internal/time-scale.js";import{BAR_RADIUS as c,CHART_FONT_SIZE as u,MARK_GAP as f,barPath as x,seriesColor as d,textWidth as h,toNumber as b}from"../../internal/chart.js";function g(a,e,t){return null!=a&&!1!==a&&""!==a&&("string"!=typeof a&&"number"!=typeof a||e>=h(String(a),t)+16)}export function MPTimelineChart({series:h,yAxis:y,xAxis:M,spanLabels:j=!0,...k}){const v=o(k.locale),$=l(s,v),C=l(i,v),P=t.useMemo(()=>h.map(a=>a.data.map(a=>{const e=b(a.start),t=b(a.end);return null===e||null===t?null:{from:Math.min(e,t),to:Math.max(e,t),span:a}}).filter(a=>null!==a)),[h]),S=P.flat(),A=S.length>0?{min:Math.min(...S.map(a=>a.from)),max:Math.max(...S.map(a=>a.to))}:null,_=p(A,{min:M?.min,max:M?.max,tickCount:M?.tickCount}),z=t.useCallback(a=>m(a,_.unit,v),[_.unit,v]),F=t.useMemo(()=>[{data:h.map(()=>0)}],[h]),N=h.map((a,e)=>a.name??String(e+1)),T=h.map((a,e)=>d(e,a.color));return a(r,{...k,series:F,categories:N,horizontal:!0,inset:!1,bandRatio:.62,scale:_,includeZero:!1,legend:!1,xAxis:y,yAxis:{...M,tickFormat:M?.tickFormat??(a=>z(Number(a)))},marks:({plot:a,band:e,valuePx:t,categoryPx:r})=>P.flatMap((n,o)=>n.map((n,l)=>{const s=t(n.from),i=t(n.to),m=a.top+r(o);return{series:o,index:l,x:(s+i)/2,y:m,r:e.band/2,rx:Math.max(1,Math.abs(i-s)/2),ry:e.band/2}})),markTooltip:a=>{const e=P[a.series]?.[a.index];return e?{heading:void 0===e.span.label||null===e.span.label?N[a.series]:`${N[a.series]} · ${String(e.span.label)}`,items:[{seriesIndex:a.series,color:e.span.color?d(0,e.span.color):T[a.series],value:e.to-e.from,formatted:`${z(e.from)} – ${z(e.to)}`}]}:null},table:e=>a(n,{id:e,caption:k.label??$.table,corner:y?.label??$.category,categories:N,names:[$.table],values:[P.map(a=>({value:a.length,label:a.map(a=>`${z(a.from)} – ${z(a.to)}`).join("; ")}))],format:a=>String(a),locale:v,empty:C.empty}),children:({plot:t,band:r,valuePx:n,categoryPx:o,activeMark:l,size:s})=>{const i=u[s]-1;return a("g",{className:"mp-timeline-chart__spans",children:P.map((s,m)=>s.map((s,p)=>{const u=n(s.from),h=n(s.to),b=Math.max(2,r.band-f),y=t.top+o(m)-b/2,M=Math.max(1,h-u),k=l?.series===m&&l?.index===p,v=s.span.color?d(0,s.span.color):T[m];return e("g",{children:[a("path",{d:x(u,y,M,b,c,"both"),fill:v,opacity:k?1:.85,stroke:k?"var(--_mp-color-on-surface)":"none",strokeWidth:k?1.5:0}),j&&g(s.span.label,M,i)?a("text",{x:u+8,y:t.top+o(m),dominantBaseline:"central",fill:"var(--_mp-color-surface)",fontSize:i,children:s.span.label}):null]},`${m}-${p}`)}))})}})}

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

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

package/dist/components/timeline-chart/index.js

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