material-plus-ui 1.6.0 → 1.8.0

package/dist/components/area-chart/MPAreaChart.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/ChartFrame.js';
+import type { MPChartCurve, MPChartValueLabels } from '../../types.js';
+export interface MPAreaChartProps extends CartesianChartProps {
+    /**
+     * How the edge of the band gets from one point to the next.
+     * @default 'linear'
+     */
+    curve?: MPChartCurve;
+    /**
+     * Stacks the series on each other, so the top edge is the total and each
+     * band is one part's share of it.
+     *
+     * The value axis then measures totals, and the question the chart answers
+     * changes with it: unstacked areas are read against the axis one at a time,
+     * and a stack is read as a composition. Only the bottom band and the total
+     * are easy to read in a stack, which is the trade it makes.
+     * @default false
+     */
+    stacked?: boolean;
+    /**
+     * The dots on the joins. `auto` draws them on an unstacked chart with room
+     * for them and never on a stack, where a vertex belongs to a boundary rather
+     * than to a line.
+     * @default 'auto'
+     */
+    markers?: boolean | 'auto';
+    /**
+     * Which values are written onto the top edge.
+     * @default 'none'
+     */
+    valueLabels?: MPChartValueLabels;
+}
+/**
+ * A quantity over an ordered axis, with the room under it filled in.
+ *
+ * ```tsx
+ * <MPAreaChart
+ *   categories={['Jan', 'Feb', 'Mar', 'Apr']}
+ *   series={[{ name: 'Storage', data: [12, 19, 24, 31] }]}
+ * />
+ * ```
+ *
+ * It is a line chart that has been asked a second question. A line says where a
+ * number was; filling underneath says how much there is of it — so this is the
+ * shape for a volume, a total, a stock of something, and `stacked` is the shape
+ * for how that total is made up.
+ *
+ * ## The axis starts at zero, and on a line chart it does not
+ *
+ * That is the whole difference between the two, and it is not a preference. A
+ * filled area's **size** encodes the quantity, so the fill is only proportional
+ * to the value from a zero baseline; cropping the scale makes a band twice the
+ * height of another that is nowhere near twice its value.
+ *
+ * A line encodes **position** and claims nothing about proportion, which is why
+ * [MPLineChart](line-chart) is free to crop and this is not. If your data wants
+ * a cropped axis, it wants a line.
+ *
+ * ## Stacked bands are separated by surface, and the gap comes from above
+ *
+ * Two touching fills read as one shape, so a stack leaves two pixels of the
+ * page between neighbours. That gap is taken entirely from the band **above**
+ * the boundary: every band's top edge stays exactly where its cumulative total
+ * puts it, because that edge is the data and moving it to make room would be
+ * reporting a number the series does not have.
+ *
+ * Positives stack up and negatives stack down, so a category holding both is
+ * drawn as two runs from the baseline rather than as one band that has crossed
+ * itself.
+ *
+ * ## Only visible series are in the stack
+ *
+ * Turning a series off with the legend re-stacks the survivors rather than
+ * leaving a hole where it was. The colours do not move with them: a slot comes
+ * from a series' place in the `series` array, so what changes is the height of
+ * the stack and never which band is which.
+ */
+export declare function MPAreaChart({ curve, stacked, markers, valueLabels, ...frame }: MPAreaChartProps): React.JSX.Element;

package/dist/components/area-chart/MPAreaChart.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CartesianFrame as r}from"../../internal/ChartFrame.js";import{LINE_WIDTH as l,MARKER_RADIUS as n,MARK_GAP as a,bandPath as o,linePath as s}from"../../internal/chart.js";export function MPAreaChart({curve:u="linear",stacked:i=!1,markers:c="auto",valueLabels:h="none",...p}){return e(r,{...p,inset:!0,stacked:i,includeZero:!0,headroom:"none"===h?0:14,children:({plot:r,values:p,visible:m,colors:d,point:f,zeroPx:x,size:v,hovered:k,activeIndex:y,format:b})=>{const j=l[v],g=n[v],M=p.reduce((e,t)=>Math.max(e,t.length),0),_=M>1?r.width/(M-1):r.width,w="auto"===c?!i&&_>=6*g:c,z=p.map(()=>({top:[],base:[]}));for(let e=0;e<M;e+=1){let t=0,r=0;p.forEach((l,n)=>{const o=l[e]?.value??null;if(!m[n]||null===o)return z[n].top.push(null),void z[n].base.push(null);if(!i){const t=f(e,o);return z[n].top.push(t),void z[n].base.push({x:t.x,y:x})}const s=o>=0?t:r,u=s+o;o>=0?t=u:r=u;const c=f(e,u),h=f(e,s);z[n].top.push(c),z[n].base.push({x:h.x,y:0===s?h.y:h.y-Math.sign(o||1)*a})})}return e("g",{className:"mp-area-chart__marks",children:p.map((l,n)=>{if(!m[n])return null;const{top:a,base:c}=z[n],p=d[n];return t("g",{opacity:null!==k&&k!==n?.25:1,children:[e("path",{d:o(a,c,u),fill:p,fillOpacity:i?.85:.18,stroke:"none"}),e("path",{d:s(a,u),fill:"none",stroke:p,strokeWidth:j,strokeLinecap:"round",strokeLinejoin:"round"}),a.map((t,r)=>{if(!t)return null;const l=y===r;return w||l?e("circle",{cx:t.x,cy:t.y,r:l?g+1:g,fill:p,stroke:"var(--_mp-color-surface)",strokeWidth:2},r):null}),"none"===h?null:l.map((t,n)=>{const o=a[n];if(!o||null===t.value)return null;const s=l.filter(e=>null!==e.value),u=s.map(e=>e.value);if(!("all"===h||"last"===h&&t===s[s.length-1]||"extremes"===h&&(t.value===Math.min(...u)||t.value===Math.max(...u))))return null;const i=o.x>r.left+r.width-24?"end":o.x<r.left+24?"start":"middle";return e("text",{x:o.x,y:o.y-g-5,textAnchor:i,fill:"var(--_mp-color-on-surface)",fontSize:"xs"===v||"sm"===v?10:11,children:t.label??b(t.value)},n)})]},n)})})}})}

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

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

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

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

package/dist/components/aspect-ratio/MPAspectRatio.d.ts

@@ -8,7 +8,7 @@ import type { MPSize } from '../../types.js';
  * the same reason `MPSide` keeps `top`/`right`/`bottom`/`left`: inventing
  * `fill-the-box` would only make a reader look up which CSS it maps to.
  */
-export type MPAspectFit = 'cover' | 'contain' | 'fill' | 'none';
+export type MPAspectFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 export interface MPAspectRatioProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * The proportion the box holds, written the way CSS writes it — a number

package/dist/components/aspect-ratio/MPAspectRatio.js

@@ -1 +1,2 @@
-import*as e from"react";import{useRender as o}from"@base-ui/react/use-render";import{useMPSize as i}from"../../internal/config.js";const r={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-xl"},t=/*@__PURE__*/["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),c={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const MPAspectRatio=/*@__PURE__*/e.forwardRef(function({ratio:e=1,fit:n="cover",rounded:l=!1,size:s,render:m,className:d,style:a,children:f,...u},p){const j=i(s),b=["mp-aspect-ratio relative block w-full overflow-hidden",t,c[n],l?r[j]:"",d??""].filter(Boolean).join(" ");return o({render:m,ref:p,props:{"data-mp-size":j,className:b,style:{aspectRatio:e,...a},children:f,...u}})});
+"use client";
+import*as e from"react";import{useRender as o}from"@base-ui/react/use-render";import{useMPSize as i}from"../../internal/config.js";const c={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-xl"},t=/*@__PURE__*/["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none","scale-down":"[&>img]:object-scale-down [&>video]:object-scale-down [&>picture>img]:object-scale-down"};export const MPAspectRatio=/*@__PURE__*/e.forwardRef(function({ratio:e=1,fit:n="cover",rounded:l=!1,size:s,render:d,className:m,style:a,children:u,...f},p){const j=i(s),b=["mp-aspect-ratio relative block w-full overflow-hidden",t,r[n],l?c[j]:"",m??""].filter(Boolean).join(" ");return o({render:d,ref:p,props:{"data-mp-size":j,className:b,style:{aspectRatio:e,...a},children:u,...f}})});

package/dist/components/avatar/MPAvatar.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
+import type { MPColor, MPSize, MPTransition, MPVariant } from '../../types.js';
 /** What Base UI reports about the picture as it loads. */
 export type MPAvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 /**
@@ -86,6 +86,15 @@ export interface MPAvatarProps extends Omit<React.ComponentPropsWithoutRef<'span
      * it.
      */
     children?: React.ReactNode;
+    /**
+     * An entrance, run once as it mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     */
+    transition?: MPTransition;
 }
 /**
  * A picture of a person or a thing, at a known size, that is never an empty box.

package/dist/components/avatar/MPAvatar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent.js";import{MPAvatarGroupContext as l}from"../../internal/avatar-group.js";import{CONTROL_SQUARE as o,hasContent as i}from"../../internal/scale.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{useMPColor as m,useMPSize as c}from"../../internal/config.js";const d={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},p={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},u={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};function f(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",className:"size-[60%]",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const MPAvatar=/*@__PURE__*/a.forwardRef(function({src:h,srcSet:x,alt:g,name:v,initials:b,shape:j,variant:y,size:N,color:w,delay:z,imageProps:C,onLoadingStatusChange:_,className:A,style:B,children:S,...L},M){const k=a.useContext(l),F=j??k?.shape??"circle",P=y??k?.variant??"tonal",R=c(N??k?.size),Z=m(w??k?.color),I=v?function(e){const t=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===t.length?"":((Array.from(t[0])[0]??"")+(t.length>1?Array.from(t[t.length-1])[0]??"":"")).toLocaleUpperCase()}(v):"",U=g??v,q=i(S)?S:(b??I)||e(f,{}),D=i(S)||Boolean(b??I),E=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",o[R],d[R],"circle"===F?"rounded-mp-full":p[R],u[P],A??""].filter(Boolean).join(" ");return t(n.Root,{ref:M,"data-mp-size":R,"data-mp-variant":P,className:E,style:{...r(Z),...B},...L,children:[h?e(n.Image,{src:h,srcSet:x,alt:U??"",onLoadingStatusChange:_,...C,className:"size-full object-cover"}):null,t(n.Fallback,{delay:h?z:void 0,className:"flex size-full items-center justify-center",children:[U&&D?e("span",{className:s,children:U}):null,e("span",{"aria-hidden":!(!U||!D)||void 0,className:"contents",children:q})]})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent.js";import{transitionProps as i}from"../../internal/transition.js";import{CONTROL_SQUARE as s,hasContent as l}from"../../internal/scale.js";import{initialsOf as o}from"../../internal/initials.js";import{VISUALLY_HIDDEN as m}from"../../internal/visually-hidden.js";import{useMPColor as c,useMPSize as d}from"../../internal/config.js";const p={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},u={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},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-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};function x(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",className:"size-[60%]",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const MPAvatar=/*@__PURE__*/a.forwardRef(function({src:a,srcSet:h,alt:g,name:v,initials:j,shape:y,variant:b,size:N,color:w,delay:_,imageProps:z,onLoadingStatusChange:S,transition:B,className:C,style:M,children:$,...k},A){const L=i(B),P=y??"circle",R=b??"tonal",Z=d(N),F=c(w),I=v?o(v):"",q=g??v,D=l($)?$:(j??I)||e(x,{}),E=l($)||Boolean(j??I),G=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",s[Z],p[Z],"circle"===P?"rounded-mp-full":u[Z],f[R],C??""].filter(Boolean).join(" ");return t(n.Root,{ref:A,"data-mp-size":Z,"data-mp-variant":R,className:`${G}${L.className?` ${L.className}`:""}`,style:{...r(F),...L.style,...M},...k,children:[a?e(n.Image,{src:a,srcSet:h,alt:q??"",onLoadingStatusChange:S,...z,className:["size-full object-cover","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" ")}):null,t(n.Fallback,{delay:a?_:void 0,className:"flex size-full items-center justify-center",children:[q&&E?e("span",{className:m,children:q}):null,e("span",{"aria-hidden":!(!q||!E)||void 0,className:"contents",children:D})]})]})});

package/dist/components/bar-chart/MPBarChart.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/ChartFrame.js';
+import type { MPChartValueLabels } from '../../types.js';
+export interface MPBarChartProps extends CartesianChartProps {
+    /**
+     * Stacks the series into one bar per category instead of standing them side
+     * by side.
+     *
+     * Grouped compares the parts with each other; stacked compares the totals and
+     * shows what makes them up. Both cannot be true at once, and picking the
+     * wrong one is the most common way a bar chart answers a question nobody
+     * asked.
+     * @default false
+     */
+    stacked?: boolean;
+    /**
+     * Turns the chart on its side, so the bars run left to right.
+     *
+     * The prop that long category names want: a horizontal bar gives each name a
+     * whole row rather than a slot the width of one bar, so nothing has to be cut
+     * or turned on its side to fit. `xAxis` is still the category axis and
+     * `yAxis` is still the value axis — the orientation changes the drawing, not
+     * what the data means.
+     * @default false
+     */
+    horizontal?: boolean;
+    /**
+     * Which values are written onto the bars.
+     * @default 'none'
+     */
+    valueLabels?: MPChartValueLabels;
+}
+/**
+ * A measured length per category — how much, next to how much else.
+ *
+ * ```tsx
+ * <MPBarChart
+ *   categories={['Search', 'Direct', 'Social', 'Mail']}
+ *   series={[{ name: 'Sessions', data: [4820, 3110, 1940, 860] }]}
+ * />
+ * ```
+ *
+ * It is the shape for a magnitude compared across a handful of named things.
+ * What a bar encodes is **length**, and length is the one visual channel a
+ * reader judges accurately, which is why a bar chart beats a pie for almost
+ * every comparison somebody actually has to make.
+ *
+ * ## The axis starts at zero and there is no prop to stop it
+ *
+ * A bar's length is proportional to its value only from a zero baseline. Crop
+ * the axis and a bar twice the height of its neighbour stands for a value five
+ * percent larger — which is not a smaller lie for being a common one, and it is
+ * told in the shape a reader trusts most.
+ *
+ * `yAxis={{ min }}` still moves the scale, because a caller who has said so has
+ * said so. It is the wrong tool for a set of values that are close together;
+ * the right one is [MPLineChart](line-chart), whose marks claim nothing about
+ * proportion.
+ *
+ * ## Grouped or stacked, never both
+ *
+ * Side by side compares the parts with each other. Stacked compares the totals
+ * and shows what makes them up. A stack's inner segments sit on a wobbly floor
+ * and cannot be compared by eye, so reach for it when the total is the point
+ * and for grouping when it is not.
+ *
+ * ## Turn it sideways for long names
+ *
+ * `horizontal` gives every category a row of its own, which is what a set of
+ * names like "Onboarding flow" needs. The alternative is labels cut to a slot
+ * the width of one bar, or an axis of words rotated forty-five degrees, which
+ * is unreadable at a glance and takes a band of the plot to be unreadable in.
+ */
+export declare function MPBarChart({ stacked, horizontal, valueLabels, ...frame }: MPBarChartProps): React.JSX.Element;

package/dist/components/bar-chart/MPBarChart.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{CartesianFrame as r}from"../../internal/ChartFrame.js";import{useMPLocale as n}from"../../internal/locale.js";import{useMPSize as a}from"../../internal/config.js";import{BAR_BAND_RATIO as o,BAR_MAX_THICKNESS as i,BAR_RADIUS as u,CHART_FONT_SIZE as s,MARK_GAP as m,barPath as c,formatStatistic as h,textWidth as f,toValues as d}from"../../internal/chart.js";export function MPBarChart({stacked:x=!1,horizontal:p=!1,valueLabels:v="none",...b}){const y=a(b.size),M=n(b.locale),g=l.useMemo(()=>{const t=s[y];if("none"===v||x)return 0;if(!p)return t+8;return d(b.series).flat().reduce((e,l)=>null===l.value?e:Math.max(e,f(String(l.label??h(l.value,M,b.format,!0)),t)),0)+10},[v,x,p,y,M,b.series,b.format]);return t(r,{...b,inset:!1,stacked:x,horizontal:p,bandRatio:o,includeZero:!0,headroom:g,children:({plot:l,values:r,visible:n,colors:a,band:o,valuePx:h,categoryPx:f,zeroPx:d,hovered:b,activeIndex:M,format:g})=>{const j=r.reduce((t,e)=>Math.max(t,e.length),0),k=r.map((t,e)=>e).filter(t=>n[t]),z=x?o.band:o.band/Math.max(1,k.length),_=Math.max(1,Math.min(z-(x?0:m),i[y]));return e("g",{className:"mp-bar-chart__marks",children:[r.map((i,d)=>{if(!n[d])return null;const w=a[d],P=null!==b&&b!==d,A=k.indexOf(d);return e("g",{opacity:P?.25:1,children:[Array.from({length:j},(e,n)=>{const a=i[n]?.value??null;if(null===a)return null;let s=0,v=d;if(x){let t=0,e=0;for(const l of k){const o=r[l][n]?.value??null;null!==o&&(l===d&&(s=o>=0?t:e),o>=0?t+=o:e+=o,o>=0==a>=0&&(v=l))}}const b=h(s),y=h(a+(x?s:0)),g=x&&0!==s?b+(y>b?m:-m):b,j=Math.abs(y-g);if(j<=0||y>b!=y>g)return null;const P=(p?l.top:l.left)+f(n)-o.band/2+(x?0:A*z)+(z-_)/2,B=d!==v?"none":p?a>=0?"right":"left":a>=0?"top":"bottom",C=p?{x:Math.min(g,y),y:P,w:j,h:_}:{x:P,y:Math.min(g,y),w:_,h:j},S=M===n;return t("path",{d:c(C.x,C.y,C.w,C.h,u,B),fill:w,opacity:null===M||S?1:.55},n)}),"none"===v||x?null:i.map((e,r)=>{if(null===e.value)return null;const n=i.map(t=>t.value).filter(t=>null!==t);if(!("all"===v||"last"===v&&r===j-1||"extremes"===v&&(e.value===Math.min(...n)||e.value===Math.max(...n))))return null;const a=h(e.value),u=(p?l.top:l.left)+f(r)-o.band/2+A*z+z/2,m=e.value>=0?-6:6;return t("text",{x:p?a-m:u,y:p?u:a+m,textAnchor:p?e.value>=0?"start":"end":"middle",dominantBaseline:p?"central":"auto",fill:"var(--_mp-color-on-surface)",fontSize:s[y]-1,children:e.label??g(e.value)},r)})]},d)}),t("line",p?{x1:d,x2:d,y1:l.top,y2:l.top+l.height,stroke:"var(--_mp-color-outline)",strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:d,y2:d,stroke:"var(--_mp-color-outline)",strokeWidth:1})]})}})}

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

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

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

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

package/dist/components/blockquote/MPBlockquote.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
+import type { MPColor, MPSize, MPTransition, MPVariant } from '../../types.js';
 /**
  * The props are a `<figure>`'s rather than a `<blockquote>`'s, which is a
  * consequence of where the drawing happens: everything a caller passes lands on
@@ -48,6 +48,15 @@ export interface MPBlockquoteProps extends Omit<React.ComponentPropsWithoutRef<'
     icon?: React.ReactNode | false;
     /** What was said. */
     children?: React.ReactNode;
+    /**
+     * An entrance, run once as it mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     */
+    transition?: MPTransition;
 }
 /**
  * Somebody else's words, set apart from your own.
@@ -64,6 +73,14 @@ export interface MPBlockquoteProps extends Omit<React.ComponentPropsWithoutRef<'
  * outrank, so a rule drawn on the quote itself would silently come out grey and
  * a pixel too thin.
  *
+ * The one thing said on it is `m-0`, and that is taking something off rather
+ * than drawing: a browser gives every `<blockquote>` and every `<figure>` a
+ * margin of `1em 40px`, and a page with no reset would otherwise set the words
+ * forty pixels in from their own rule. A host that styles `blockquote` by name
+ * still outranks the zero, and that is left alone on purpose. A `.prose
+ * blockquote` margin is a page deciding how its quotes sit in its text, and a
+ * quote dropped into that text should sit the same way.
+ *
  * The wrapper is a `<figure>` when there is an attribution and a `<div>` when
  * there is not, because the HTML specification is explicit that the attribution
  * goes *outside* the blockquote — a name inside it claims the speaker said their

package/dist/components/blockquote/MPBlockquote.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{accentSlots as n}from"../../internal/accent.js";import{hasContent as r,META_TEXT as i,SHEET_PAD as l}from"../../internal/scale.js";import{useMPColor as o,useMPSize as c}from"../../internal/config.js";const s={xs:"text-mp-body-medium",sm:"text-mp-body-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},m="border-s-2 [border-inline-start-color:var(--_mp-accent)]",d={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline-variant border border-s-2 bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"};function p(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const MPBlockquote=/*@__PURE__*/a.forwardRef(function({variant:a="text",size:u,color:f,author:x,source:h,cite:b,icon:g,className:v,style:j,children:N,...y},w){const z=c(u),_=o(f),k=r(x)||r(h),q=void 0===g?e(p,{}):g,B="text"!==a,M=["mp-blockquote flex flex-col",s[z],m,B?"rounded-mp-md rounded-s-none":"",d[a],B?l[z]:"ps-4",v??""].filter(Boolean).join(" "),Z=t("blockquote",{cite:b,children:[r(q)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] opacity-38",children:q}):null,N]}),C={...n(_),...j};return k?t("figure",{ref:w,"data-mp-size":z,"data-mp-variant":a,className:M,style:C,...y,children:[Z,t("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5",B?"opacity-80":"text-mp-on-surface-variant",i].join(" "),children:[r(x)?t("span",{className:"font-medium",children:[e("span",{"aria-hidden":"true",children:"— "}),x]}):null,r(h)?e("cite",{className:"not-italic",children:h}):null]})]}):e("div",{ref:w,"data-mp-size":z,"data-mp-variant":a,className:M,style:C,...y,children:Z})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{accentSlots as n}from"../../internal/accent.js";import{transitionProps as r}from"../../internal/transition.js";import{hasContent as i,META_TEXT as l,SHEET_PAD as o}from"../../internal/scale.js";import{useMPColor as s,useMPSize as c}from"../../internal/config.js";const m={xs:"text-mp-body-medium",sm:"text-mp-body-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},d="border-s-2 [border-inline-start-color:var(--_mp-accent)]",p={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline-variant border border-s-2 bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"};function u(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const MPBlockquote=/*@__PURE__*/a.forwardRef(function({variant:a="text",size:f,color:x,author:h,source:b,cite:g,icon:v,transition:N,className:j,style:y,children:w,...z},_){const k=c(f),q=s(x),B=i(h)||i(b),M=void 0===v?e(u,{}):v,Z="text"!==a,C=r(N),P=["mp-blockquote m-0 flex flex-col",m[k],d,Z?"rounded-mp-md rounded-s-none":"",p[a],Z?o[k]:"ps-4",C.className,j??""].filter(Boolean).join(" "),R=t("blockquote",{cite:g,className:"m-0",children:[i(M)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] opacity-38",children:M}):null,w]}),A={...n(q),...C.style,...y};return B?t("figure",{ref:_,"data-mp-size":k,"data-mp-variant":a,className:P,style:A,...z,children:[R,t("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5",Z?"opacity-80":"text-mp-on-surface-variant",l].join(" "),children:[i(h)?t("span",{className:"font-medium",children:[e("span",{"aria-hidden":"true",children:"— "}),h]}):null,i(b)?e("cite",{className:"not-italic",children:b}):null]})]}):e("div",{ref:_,"data-mp-size":k,"data-mp-variant":a,className:P,style:A,...z,children:R})});

package/dist/components/bottom-navigation/MPBottomNavigation.d.ts

@@ -1,24 +1,8 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import { type MPBottomNavigationLabels, type MPBottomNavigationValue } from '../../internal/bottom-navigation.js';
 import type { MPPosition, MPSize } from '../../types.js';
-/** A destination's value. The same restraint `MPTabs` puts on a tab's. */
-export type MPBottomNavigationValue = string | number;
-/**
- * Which names are drawn.
- *
- * MD3's three label behaviours, and the order they lose information in:
- *
- * - `all` — every destination is named. The default, and the only one that works
- *   for a reader who has not used the application before.
- * - `selected` — only the destination the reader is on. The bar keeps its height
- *   either way.
- * - `none` — glyphs only.
- *
- * Undrawn is never unsaid: in both of the last two the names stay in the
- * document for a screen reader, because a glyph on its own has no accessible
- * name at all.
- */
-export type MPBottomNavigationLabels = 'all' | 'selected' | 'none';
+export type { MPBottomNavigationLabels, MPBottomNavigationValue };
 export interface MPBottomNavigationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'defaultValue' | 'onChange'> {
     /** The destination the reader is on. Use with `onValueChange` for a controlled bar. */
     value?: MPBottomNavigationValue | null;

package/dist/components/bottom-navigation/MPBottomNavigation.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{useRender as l}from"@base-ui/react/use-render";import{linkRel as r}from"../../internal/link.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{hasContent as i}from"../../internal/scale.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{useMPSize as d}from"../../internal/config.js";const m=/*@__PURE__*/n.createContext({value:null,change:()=>{},size:"md",labels:"all",disabled:!1}),u={xs:"h-14",sm:"h-16",md:"h-20",lg:"h-22",xl:"h-24"},c={xs:{box:"h-6 w-12",open:"w-12",shut:"w-6"},sm:{box:"h-7 w-14",open:"w-14",shut:"w-7"},md:{box:"h-8 w-16",open:"w-16",shut:"w-8"},lg:{box:"h-9 w-18",open:"w-18",shut:"w-9"},xl:{box:"h-10 w-20",open:"w-20",shut:"w-10"}},p={xs:20,sm:22,md:24,lg:26,xl:28},f={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-medium",xl:"text-mp-label-large"},b={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"},x={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPBottomNavigation=/*@__PURE__*/n.forwardRef(function({value:t,defaultValue:a=null,onValueChange:r,position:o="fixed",labels:i="all",size:s,divider:c=!1,safeArea:p=!0,disabled:f=!1,label:b,render:h,className:v,children:g,...w},y){const j=d(s),[z,N]=n.useState(a),k=void 0!==t,C=k?t:z,B=n.useCallback(e=>{k||N(e),r?.(e)},[k,r]),$=n.useMemo(()=>({value:C??null,change:B,size:j,labels:i,disabled:f}),[C,B,j,i,f]);return l({render:h??e("nav",{}),ref:y,props:{"aria-label":b,"data-mp-size":j,className:["mp-bottom-navigation bg-mp-surface-container text-mp-on-surface box-border w-full",c?"border-mp-outline-variant border-t":"",x[o],p?"pb-[env(safe-area-inset-bottom)]":"",v??""].filter(Boolean).join(" "),children:e(m.Provider,{value:$,children:e("div",{className:`flex w-full items-stretch ${u[j]}`,children:g})}),...w}})});export const MPBottomNavigationItem=/*@__PURE__*/n.forwardRef(function({value:l,icon:d,activeIcon:u,href:x,target:v,rel:g,render:w,disabled:y=!1,className:j,children:z,onClick:N,...k},C){const B=n.useContext(m),$=y||B.disabled,M=null!==B.value&&B.value===l,P="all"===B.labels||"selected"===B.labels&&M,I=["mp-bottom-navigation__item group flex min-w-0 flex-1 flex-col items-center justify-center","box-border appearance-none bg-transparent px-1 font-[inherit] no-underline select-none",b[B.size],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",$?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface cursor-pointer":"text-mp-on-surface-variant cursor-pointer",j??""].filter(Boolean).join(" "),R=t(a,{children:[i(d)||i(u)?t("span",{className:["relative flex shrink-0 items-center justify-center overflow-hidden","rounded-mp-full","transition-[color] duration-(--mp-sys-motion-duration-short4)",c[B.size].box,M&&!$?"text-mp-on-secondary-container":""].filter(Boolean).join(" "),children:[$?null:e("span",{"aria-hidden":"true",className:["pointer-events-none absolute inset-y-0 left-1/2 -translate-x-1/2","rounded-mp-full bg-mp-secondary-container","transition-[width,opacity] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",M?`${c[B.size].open} opacity-100`:`${c[B.size].shut} opacity-0`].join(" ")}),$?null:e(o,{}),e("span",{className:"relative flex items-center justify-center",style:{width:p[B.size],height:p[B.size]},children:M?u??d:d})]}):null,i(z)?e("span",{className:P?`max-w-full truncate ${f[B.size]}`:s,children:z}):null]}),S=e=>{$?e.preventDefault():(B.change(l),N?.(e))};return e(h,x?{render:w,props:{ref:C,href:$?void 0:x,target:v,rel:r(v,g),"aria-current":M?"page":void 0,"aria-disabled":$||void 0,className:I,onClick:S,children:R,...k}}:{render:w,props:{ref:C,type:w?void 0:"button",disabled:$,"aria-current":M?"page":void 0,className:I,onClick:S,children:R,...k}})});function h({render:t,props:a}){return l({render:t??(a.href?e("a",{}):e("button",{})),props:a})}
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as a from"react";import{useRender as o}from"@base-ui/react/use-render";import{linkRel as r}from"../../internal/link.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{hasContent as l}from"../../internal/scale.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{MPBottomNavigationContext as m}from"../../internal/bottom-navigation.js";import{useMPSize as d}from"../../internal/config.js";const u={xs:"h-14",sm:"h-16",md:"h-20",lg:"h-22",xl:"h-24"},c={xs:{box:"h-6 w-12",open:"w-12",shut:"w-6"},sm:{box:"h-7 w-14",open:"w-14",shut:"w-7"},md:{box:"h-8 w-16",open:"w-16",shut:"w-8"},lg:{box:"h-9 w-18",open:"w-18",shut:"w-9"},xl:{box:"h-10 w-20",open:"w-20",shut:"w-10"}},p={xs:20,sm:22,md:24,lg:26,xl:28},f={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-medium",xl:"text-mp-label-large"},b={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"},x={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPBottomNavigation=/*@__PURE__*/a.forwardRef(function({value:t,defaultValue:n=null,onValueChange:r,position:i="fixed",labels:l="all",size:s,divider:c=!1,safeArea:p=!0,disabled:f=!1,label:b,render:h,className:v,children:g,...w},y){const j=d(s),[z,N]=a.useState(n),k=void 0!==t,C=k?t:z,B=a.useCallback(e=>{k||N(e),r?.(e)},[k,r]),$=a.useMemo(()=>({value:C??null,change:B,size:j,labels:l,disabled:f,floating:!1}),[C,B,j,l,f]);return o({render:h??e("nav",{}),ref:y,props:{"aria-label":b,"data-mp-size":j,className:["mp-bottom-navigation bg-mp-surface-container text-mp-on-surface box-border w-full",c?"border-mp-outline-variant border-t":"",x[i],p?"pb-[env(safe-area-inset-bottom)]":"",v??""].filter(Boolean).join(" "),children:e(m.Provider,{value:$,children:e("div",{className:`flex w-full items-stretch ${u[j]}`,children:g})}),...w}})});export const MPBottomNavigationItem=/*@__PURE__*/a.forwardRef(function({value:o,icon:d,activeIcon:u,href:x,target:v,rel:g,render:w,disabled:y=!1,className:j,children:z,onClick:N,...k},C){const B=a.useContext(m),$=y||B.disabled,M=null!==B.value&&B.value===o,P="all"===B.labels||"selected"===B.labels&&M,I=["mp-bottom-navigation__item group flex min-w-0 flex-col items-center justify-center",B.floating?"shrink-0":"flex-1","box-border appearance-none border-0 bg-transparent px-1 font-[inherit] no-underline select-none",b[B.size],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",$?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface cursor-pointer":"text-mp-on-surface-variant cursor-pointer",j??""].filter(Boolean).join(" "),R=t(n,{children:[l(d)||l(u)?t("span",{className:["relative flex shrink-0 items-center justify-center overflow-hidden","rounded-mp-full","transition-[color] duration-(--mp-sys-motion-duration-short4)",c[B.size].box,M&&!$?"text-mp-on-secondary-container":""].filter(Boolean).join(" "),children:[$?null:e("span",{"aria-hidden":"true",className:["pointer-events-none absolute inset-y-0 left-1/2 -translate-x-1/2","rounded-mp-full bg-mp-secondary-container","transition-[width,opacity] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",M?`${c[B.size].open} opacity-100`:`${c[B.size].shut} opacity-0`].join(" ")}),$?null:e(i,{}),e("span",{className:"relative flex items-center justify-center",style:{width:p[B.size],height:p[B.size]},children:M?u??d:d})]}):null,l(z)?e("span",{className:P?`max-w-full truncate ${f[B.size]}`:s,children:z}):null]}),S=e=>{$?e.preventDefault():(B.change(o),N?.(e))};return e(h,x?{render:w,props:{ref:C,href:$?void 0:x,target:v,rel:r(v,g),"aria-current":M?"page":void 0,"aria-disabled":$||void 0,className:I,onClick:S,children:R,...k}}:{render:w,props:{ref:C,type:w?void 0:"button",disabled:$,"aria-current":M?"page":void 0,className:I,onClick:S,children:R,...k}})});function h({render:t,props:n}){return o({render:t??(n.href?e("a",{}):e("button",{})),props:n})}

package/dist/components/box/MPBox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPSize, MPVariant } from '../../types.js';
+import type { MPDensity, MPElevation, MPSize, MPTransition, MPVariant } from '../../types.js';
 export interface MPBoxProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How much surface the sheet paints.
@@ -11,6 +11,17 @@ export interface MPBoxProps extends React.ComponentPropsWithoutRef<'div'> {
      * @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;
     /**
      * The room inside.
      *
@@ -27,6 +38,26 @@ export interface MPBoxProps extends React.ComponentPropsWithoutRef<'div'> {
      * @default 'md'
      */
     size?: MPSize;
+    /**
+     * Takes room out of the padding `size` chose, two pixels a face per step.
+     *
+     * On a box that is the whole of what density can mean, because padding is the
+     * whole of what `size` does here. It is the axis that matters when boxes are
+     * being repeated — a grid of tiles, a column of panels — where the room around
+     * each one is multiplied by however many there are.
+     * @default 0
+     */
+    density?: MPDensity;
+    /**
+     * An entrance, run once as the box mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings, and wrapping is
+     * the right answer there.
+     */
+    transition?: MPTransition;
     /**
      * Inner padding. Turn it off for full-bleed content — a picture, a table, a
      * list that draws its own rows.
@@ -66,13 +97,17 @@ export interface MPBoxProps extends React.ComponentPropsWithoutRef<'div'> {
  * that is [MPAlert](../feedback/alert) for a message, [MPChip](../display/chip)
  * for a token, [MPButton](../inputs/button) for an action.
  *
- * ## Why there is no `elevation`
+ * ## What `elevation` does, and why it took the shape it did
+ *
+ * MD3 does not treat height as a free axis: an elevated surface is
+ * `surface-container-low` **under** a level-1 shadow, and the tone and the
+ * shadow are one decision rather than two. A prop that only cast a shadow would
+ * raise a `filled` box into a surface the specification has no name for — a
+ * lifted object that is somehow still the flattest tone in the system.
  *
- * There is no `elevation` prop anywhere in this library, and a box is where the
- * absence is most tempting to fix. It stays absent because MD3 does not treat
- * height as a free axis: an elevated surface is `surface-container-low` under a
- * level-1 shadow, and the tone and the shadow are one decision. A prop that
- * raised a `filled` box would produce a surface the specification has no name
- * for. `variant="elevated"` is that decision, made once.
+ * So a level names both, and `variant="elevated"` is that decision made once, at
+ * level 1. The variant stays because it is the answer nearly every raised sheet
+ * wants and because the vocabulary is about *emphasis*; the prop is there for
+ * the sheet that has a reason to be somewhere else on the ladder.
  */
 export declare const MPBox: React.ForwardRefExoticComponent<MPBoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/box/MPBox.js

@@ -1 +1,2 @@
-import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{SHEET_PAD as a}from"../../internal/scale.js";import{CONTAINER_SURFACE as o}from"../../internal/surface.js";export const MPBox=/*@__PURE__*/r.forwardRef(function({variant:r="outlined",size:n="md",padded:t=!0,render:d,className:i,children:m,...s},p){return e({render:d,ref:p,props:{"data-mp-size":n,"data-mp-variant":r,className:["mp-box rounded-mp-md block","box-border",t?a[n]:"",o[r],"text-mp-on-surface",i??""].filter(Boolean).join(" "),children:m,...s}})});
+"use client";
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{sheetPad as t}from"../../internal/density.js";import{containerSurface as n}from"../../internal/elevation.js";import{useMPDensity as o,useMPSize as a}from"../../internal/config.js";import{transitionProps as i}from"../../internal/transition.js";export const MPBox=/*@__PURE__*/e.forwardRef(function({variant:e="outlined",elevation:s,size:m,density:d,transition:l,padded:p=!0,render:c,className:f,style:u,children:b,...j},x){const y=a(m),v=o(d),N=i(l);return r({render:c,ref:x,props:{"data-mp-size":y,"data-mp-variant":e,className:["mp-box rounded-mp-md block","box-border",p?t(y,v):"",n(e,s),"text-mp-on-surface",N.className,f??""].filter(Boolean).join(" "),style:{...N.style,...u},children:b,...j}})});

package/dist/components/breadcrumb/MPBreadcrumb.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as r from"react";import{MPIcon as o}from"../icon/MPIcon.js";import{ArrowRightIcon as i,ChevronRightIcon as a,MoreIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{BREADCRUMB as d}from"../../internal/messages/breadcrumb.js";import{CONTROL_GAP as u,hasContent as p,PROSE_TEXT as f}from"../../internal/scale.js";import{useMPColor as h,useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/r.createContext({size:"md",last:!1,position:null}),v={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},g={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const N=["chevron","arrow","slash","dot"];export const MPBreadcrumb=/*@__PURE__*/r.forwardRef(function({size:t,color:u,separator:p="chevron",maxItems:g,itemsBeforeCollapse:j=1,itemsAfterCollapse:y=1,expandable:k=!0,label:z,expandLabel:B,locale:C,structuredData:w=!1,className:P,style:M,children:I,...L},S){const _=x(t),A=h(u),E=m(d,c(C)),[F,R]=r.useState(!1),T=r.Children.toArray(I).filter(r.isValidElement),D=T.length,V=T.some(e=>!0===e.props.current),$=!F&&!w&&void 0!==g&&D>Math.max(g,1)&&D-j-y>1?[...T.slice(0,Math.max(0,j)),null,...T.slice(D-Math.max(0,y))]:T,q="string"==typeof(G=p)&&N.includes(G)?function(n){switch(n){case"chevron":return e(o,{icon:a,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(o,{icon:i,size:"1em",className:"rtl:rotate-180"});case"slash":return e("span",{"aria-hidden":"true",children:"/"});case"dot":return e("span",{"aria-hidden":"true",children:"·"});default:return null}}(p):p;var G;const H=r.useMemo(()=>Array.from({length:$.length},(e,n)=>({size:_,last:!V&&n===$.length-1,position:w?n+1:null})),[_,V,$.length,w]),J=["rounded-mp-xs text-mp-on-surface-variant inline-flex items-center px-0.5","appearance-none border-0 bg-transparent font-[inherit]","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",k?["cursor-pointer hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" ");return e("nav",{ref:S,"aria-label":z??E.label,"data-mp-size":_,className:["mp-breadcrumb flex",f[_],P??""].filter(Boolean).join(" "),style:{...l(A),...M},...L,children:e("ol",{role:"list",itemScope:w||void 0,itemType:w?"https://schema.org/BreadcrumbList":void 0,className:`flex list-none flex-wrap items-center p-0 ${v[_]}`,children:$.map((t,i)=>n(r.Fragment,{children:[i>0?e("li",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center select-none",children:q}):null,t?e(b.Provider,{value:H[i],children:t}):e("li",{className:"flex shrink-0 items-center",children:k?e("button",{type:"button",className:J,"aria-label":B??E.expand,onClick:()=>R(!0),children:e(o,{icon:s,size:"1.1em"})}):e("span",{className:J,"aria-hidden":"true",children:e(o,{icon:s,size:"1.1em"})})})]},t?t.key??i:"fold"))})})});export const MPBreadcrumbItem=/*@__PURE__*/r.forwardRef(function({href:o,onClick:i,startIcon:a,endIcon:s,current:l,disabled:c=!1,className:m,children:d,...f},h){const{size:x,last:v,position:N}=r.useContext(b),j=l??v,y=Boolean(o||i)&&!j&&!c,k=null!==N,z=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",u[x],g[x],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",c?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface font-medium":y?["text-mp-on-surface-variant cursor-pointer","hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):"text-mp-on-surface-variant"].filter(Boolean).join(" "),B=n(t,{children:[p(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a}):null,e("span",{className:"truncate",itemProp:k?"name":void 0,children:d}),p(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]});return n("li",{ref:h,itemProp:k?"itemListElement":void 0,itemScope:k||void 0,itemType:k?"https://schema.org/ListItem":void 0,className:["flex min-w-0 items-center",m??""].filter(Boolean).join(" "),...f,children:[k?e("meta",{itemProp:"position",content:String(N)}):null,y&&o?e("a",{href:o,itemProp:k?"item":void 0,className:z,onClick:i,children:B}):y?e("button",{type:"button",className:z,onClick:i,children:B}):e("span",{className:z,"aria-current":j?"page":void 0,"aria-disabled":c||void 0,children:B})]})});
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as r from"react";import{MPIcon as o}from"../icon/MPIcon.js";import{ArrowRightIcon as i,ChevronRightIcon as a,MoreIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{BREADCRUMB as d}from"../../internal/messages/breadcrumb.js";import{CONTROL_GAP as u,hasContent as p,PROSE_TEXT as f}from"../../internal/scale.js";import{useMPColor as h,useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/r.createContext({size:"md",last:!1,position:null}),v={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},g={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const N=["chevron","arrow","slash","dot"];export const MPBreadcrumb=/*@__PURE__*/r.forwardRef(function({size:t,color:u,separator:p="chevron",maxItems:g,itemsBeforeCollapse:j=1,itemsAfterCollapse:y=1,expandable:k=!0,label:z,expandLabel:B,locale:C,structuredData:w=!1,className:P,style:M,children:I,...L},S){const _=x(t),A=h(u),E=m(d,c(C)),[F,R]=r.useState(!1),T=r.Children.toArray(I).filter(r.isValidElement),D=T.length,V=T.some(e=>!0===e.props.current),$=!F&&!w&&void 0!==g&&D>Math.max(g,1)&&D-j-y>1?[...T.slice(0,Math.max(0,j)),null,...T.slice(D-Math.max(0,y))]:T,q="string"==typeof(G=p)&&N.includes(G)?function(n){switch(n){case"chevron":return e(o,{icon:a,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(o,{icon:i,size:"1em",className:"rtl:rotate-180"});case"slash":return e("span",{"aria-hidden":"true",children:"/"});case"dot":return e("span",{"aria-hidden":"true",children:"·"});default:return null}}(p):p;var G;const H=r.useMemo(()=>Array.from({length:$.length},(e,n)=>({size:_,last:!V&&n===$.length-1,position:w?n+1:null})),[_,V,$.length,w]),J=["rounded-mp-xs text-mp-on-surface-variant inline-flex items-center px-0.5","appearance-none border-0 bg-transparent font-[inherit]","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",k?["cursor-pointer hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" ");return e("nav",{ref:S,"aria-label":z??E.label,"data-mp-size":_,className:["mp-breadcrumb flex",f[_],P??""].filter(Boolean).join(" "),style:{...l(A),...M},...L,children:e("ol",{role:"list",itemScope:w||void 0,itemType:w?"https://schema.org/BreadcrumbList":void 0,className:`m-0 flex list-none flex-wrap items-center p-0 ${v[_]}`,children:$.map((t,i)=>n(r.Fragment,{children:[i>0?e("li",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center select-none",children:q}):null,t?e(b.Provider,{value:H[i],children:t}):e("li",{className:"flex shrink-0 items-center",children:k?e("button",{type:"button",className:J,"aria-label":B??E.expand,onClick:()=>R(!0),children:e(o,{icon:s,size:"1.1em"})}):e("span",{className:J,"aria-hidden":"true",children:e(o,{icon:s,size:"1.1em"})})})]},t?t.key??i:"fold"))})})});export const MPBreadcrumbItem=/*@__PURE__*/r.forwardRef(function({href:o,onClick:i,startIcon:a,endIcon:s,current:l,disabled:c=!1,className:m,children:d,...f},h){const{size:x,last:v,position:N}=r.useContext(b),j=l??v,y=Boolean(o||i)&&!j&&!c,k=null!==N,z=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",u[x],g[x],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",c?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface font-medium":y?["text-mp-on-surface-variant cursor-pointer","hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):"text-mp-on-surface-variant"].filter(Boolean).join(" "),B=n(t,{children:[p(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a}):null,e("span",{className:"truncate",itemProp:k?"name":void 0,children:d}),p(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]});return n("li",{ref:h,itemProp:k?"itemListElement":void 0,itemScope:k||void 0,itemType:k?"https://schema.org/ListItem":void 0,className:["flex min-w-0 items-center",m??""].filter(Boolean).join(" "),...f,children:[k?e("meta",{itemProp:"position",content:String(N)}):null,y&&o?e("a",{href:o,itemProp:k?"item":void 0,className:z,onClick:i,children:B}):y?e("button",{type:"button",className:z,onClick:i,children:B}):e("span",{className:z,"aria-current":j?"page":void 0,"aria-disabled":c||void 0,children:B})]})});

package/dist/components/button/MPButton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Button as n}from"@base-ui/react/button";import{MPIcon as r}from"../icon/MPIcon.js";import{SpinnerIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{MPButtonGroupContext as s}from"../../internal/button-group.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{CONTROL_GAP as d,CONTROL_HEIGHT as u,CONTROL_ICON as f,CONTROL_PAD_X as b,CONTROL_SQUARE as g,CONTROL_TEXT as x,hasContent as v}from"../../internal/scale.js";import{useMPColor as j,useMPSize as h}from"../../internal/config.js";const w={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 hover:shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},y={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 MPButton=/*@__PURE__*/o.forwardRef(function({variant:_,size:B,color:k,disabled:z,startIcon:C,endIcon:I,loading:N=!1,loadingLabel:P,locale:L,fullWidth:M=!1,type:D="button",render:R,nativeButton:S=!0,className:W,style:$,children:q,onClick:A,...E},F){const G=l(L),H=c(m,G),J=o.useContext(s),K=_??J?.variant??"filled",O=h(B??J?.size),Q=j(k??J?.color),T=z??J?.disabled??!1,U=N||v(C),V=!(v(q)||U&&v(I));return t(n,{ref:F,render:R,nativeButton:S,type:S?D:void 0,disabled:T,"aria-busy":N||void 0,"aria-disabled":N||void 0,"data-mp-size":O,"data-mp-variant":K,"data-loading":N||void 0,className:["mp-button 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)",u[O],x[O],d[O],V?`${g[O]} px-0`:b[O],T?y[K]:w[K],T?"cursor-default":"",N?"cursor-progress":"",M?"w-full":"",W??""].filter(Boolean).join(" "),style:{...i(Q),...$},onClick:e=>{if(N)return e.preventDefault(),void e.stopPropagation();A?.(e)},...E,children:[T?null:e(p,{}),N?e(r,{icon:a,size:f[O],label:P??H.loading,className:"animate-spin"}):C,q,I]})});
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{Button as r}from"@base-ui/react/button";import{MPIcon as n}from"../icon/MPIcon.js";import{SpinnerIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{MPButtonGroupContext as s}from"../../internal/button-group.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{COMMON as d}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{CONTROL_GAP as p,CONTROL_HEIGHT as u,CONTROL_ICON as f,CONTROL_PAD_X as b,CONTROL_SQUARE as g,CONTROL_TEXT as x,hasContent as v}from"../../internal/scale.js";import{useMPColor as j,useMPSize as h}from"../../internal/config.js";const w={filled:"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 hover:shadow-mp-2 border-0 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"border-0 bg-transparent text-(--_mp-accent)"},y={filled:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"border-0 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:"border-0 bg-transparent text-mp-on-surface/38"};export const MPButton=/*@__PURE__*/t.forwardRef(function({variant:_,size:B,color:k,disabled:z,startIcon:C,endIcon:I,loading:N=!1,loadingLabel:P,locale:L,fullWidth:M=!1,type:D="button",render:R,nativeButton:S=!0,className:W,style:$,children:q,onClick:A,...E},F){const G=l(L),H=c(d,G),J=t.useContext(s),K=_??J?.variant??"filled",O=h(B??J?.size),Q=j(k??J?.color),T=z??J?.disabled??!1,U=N||v(C),V=!(v(q)||U&&v(I));return o(r,{ref:F,render:R,nativeButton:S,type:S?D:void 0,disabled:T,"aria-busy":N||void 0,"aria-disabled":N||void 0,"data-mp-size":O,"data-mp-variant":K,"data-loading":N||void 0,className:["mp-button 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)",u[O],x[O],p[O],V?`${g[O]} px-0`:b[O],T?y[K]:w[K],T?"cursor-default":"",N?"cursor-progress":"",M?"w-full":"",W??""].filter(Boolean).join(" "),style:{...i(Q),...$},onClick:e=>{if(N)return e.preventDefault(),void e.stopPropagation();A?.(e)},...E,children:[T?null:e(m,{}),N?e(n,{icon:a,size:f[O],label:P??H.loading,className:"animate-spin"}):C,q,I]})});

package/dist/components/calendar/MPCalendar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Calendar as a}from"../../internal/Calendar.js";import{accentSlots as n}from"../../internal/accent.js";import{POPUP_PAD as s}from"../../internal/Picker.js";import{useMPLocale as r,useMPMessages as i}from"../../internal/locale.js";import{PICKER as l}from"../../internal/messages/picker.js";import{CONTAINER_SURFACE as m}from"../../internal/surface.js";import{isValidDate as u,localeWeekStart as c,mergeDateAndTime as d,startOfMonth as f,startOfUnit as p,toISODate as h,toISOMonth as x,toISOYear as j,today as v}from"../../internal/date.js";import{useMPColor as D,useMPSize as w}from"../../internal/config.js";const y={day:h,month:x,year:j};export const MPCalendar=/*@__PURE__*/o.forwardRef(function({value:h,defaultValue:x,onValueChange:j,month:g,defaultMonth:B,onMonthChange:C,precision:S="day",minDate:b,maxDate:k,shouldDisableDate:M,locale:N,weekStartsOn:O,showOutsideDays:P=!0,showPreviousButton:z=!0,showNextButton:F=!0,autoFocus:V=!1,variant:R="text",size:$,color:q,labels:A,name:E,className:G,style:H,...I},J){const K=w($),L=D(q),Q=r(N),T=i(l,Q,A),U=O??c(Q),[W,X]=o.useState(x??null),Y=void 0!==h?h:W,[Z,_]=o.useState(()=>{const e=h??x;return f(u(e)?e:B??v())}),ee=void 0!==g?f(g):Z,te=e=>{void 0===g&&_(e),C?.(e)};return t("div",{...I,ref:J,"data-mp-size":K,style:{...n(L),...H},className:["mp-calendar-root inline-flex flex-col","text"===R?"":`rounded-mp-md ${s[K]}`,m[R],"text"===R?"":"text-mp-on-surface",G??""].filter(Boolean).join(" "),children:[e(a,{size:K,color:L,locale:Q,weekStartsOn:U,month:ee,onMonthChange:te,selected:[Y],onSelect:e=>{const t=p(e,S),o=u(Y)?d(t,Y):t;void 0===h&&X(o),j?.(o),te(f(o))},minDate:b,maxDate:k,shouldDisableDate:M,showOutsideDays:P,showPreviousButton:z,showNextButton:F,precision:S,labels:T,autoFocus:V}),E?e("input",{type:"hidden",name:E,value:u(Y)?y[S](Y):""}):null]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Calendar as a}from"../../internal/Calendar.js";import{accentSlots as n}from"../../internal/accent.js";import{POPUP_PAD as s}from"../../internal/Picker.js";import{useMPLocale as r,useMPMessages as i}from"../../internal/locale.js";import{PICKER as l}from"../../internal/messages/picker.js";import{CONTAINER_SURFACE as m}from"../../internal/surface.js";import{TO_ISO as u,isValidDate as c,localeWeekStart as d,mergeDateAndTime as f,startOfMonth as p,startOfUnit as h,today as x}from"../../internal/date.js";import{useMPColor as j,useMPSize as v}from"../../internal/config.js";export const MPCalendar=/*@__PURE__*/o.forwardRef(function({value:D,defaultValue:w,onValueChange:y,month:g,defaultMonth:B,onMonthChange:C,precision:S="day",minDate:b,maxDate:k,shouldDisableDate:M,locale:N,weekStartsOn:O,showOutsideDays:P=!0,showPreviousButton:z=!0,showNextButton:F=!0,autoFocus:V=!1,variant:R="text",size:$,color:q,labels:A,name:E,className:G,style:H,...I},J){const K=v($),L=j(q),Q=r(N),T=i(l,Q,A),U=O??d(Q),[W,X]=o.useState(w??null),Y=void 0!==D?D:W,[Z,_]=o.useState(()=>{const e=D??w;return p(c(e)?e:B??x())}),ee=void 0!==g?p(g):Z,te=e=>{void 0===g&&_(e),C?.(e)};return t("div",{...I,ref:J,"data-mp-size":K,style:{...n(L),...H},className:["mp-calendar-root inline-flex flex-col","text"===R?"":`rounded-mp-md ${s[K]}`,m[R],"text"===R?"":"text-mp-on-surface",G??""].filter(Boolean).join(" "),children:[e(a,{size:K,color:L,locale:Q,weekStartsOn:U,month:ee,onMonthChange:te,selected:[Y],onSelect:e=>{const t=h(e,S),o=c(Y)?f(t,Y):t;void 0===D&&X(o),y?.(o),te(p(o))},minDate:b,maxDate:k,shouldDisableDate:M,showOutsideDays:P,showPreviousButton:z,showNextButton:F,precision:S,labels:T,autoFocus:V}),E?e("input",{type:"hidden",name:E,value:c(Y)?u[S](Y):""}):null]})});

package/dist/components/card/MPCard.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l,Fragment as a}from"react/jsx-runtime";import*as r from"react";import{MPBox as n}from"../box/MPBox.js";import{hasContent as i,META_TEXT as o,PROSE_TEXT as t,SHEET_GAP as s,SHEET_PAD_X as c,SHEET_PAD_Y as m,SHEET_TITLE as d}from"../../internal/scale.js";import{useMPSize as f}from"../../internal/config.js";export const MPCard=/*@__PURE__*/r.forwardRef(function({size:r,title:p,subtitle:u,headerAction:x,media:h,footer:_,dividers:v=!1,className:N,children:j,...w},b){const g=f(r),k=c[g],$=m[g],y=v?`${k} ${$}`:k,B=i(p)||i(u)||i(x),z=i(h),M=[B?{key:"header",className:"mp-card__header flex items-start gap-3",content:l(a,{children:[i(p)||i(u)?l("div",{className:"flex min-w-0 flex-1 flex-col",children:[i(p)?e("div",{className:`mp-card__title ${d[g]}`,children:p}):null,i(u)?e("div",{className:`text-mp-on-surface-variant ${o}`,children:u}):null]}):null,i(x)?e("div",{className:"ms-auto shrink-0",children:x}):null]})}:null,i(j)?{key:"content",className:`mp-card__body min-w-0 ${t[g]}`,content:j}:null,i(_)?{key:"footer",className:"mp-card__footer flex flex-wrap items-center gap-2",content:_}:null].filter(e=>null!==e);return l(n,{ref:b,size:g,padded:!1,className:["mp-card flex flex-col",z?"overflow-hidden":"",N??""].filter(Boolean).join(" "),...w,children:[z?e("div",{className:"mp-card__media [&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:h}):null,M.length>0?e("div",{className:["flex min-w-0 flex-col",v?"":`${$} ${s[g]}`].filter(Boolean).join(" "),children:M.map((l,a)=>e("div",{className:[y,l.className,v&&a>0?"border-mp-outline-variant border-t":""].filter(Boolean).join(" "),children:l.content},l.key))}):null]})});
+import{jsx as e,jsxs as l,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{MPBox as r}from"../box/MPBox.js";import{hasContent as i,META_TEXT as t,PROSE_TEXT as o,SHEET_GAP as s,SHEET_TITLE as c}from"../../internal/scale.js";import{sheetPadX as m,sheetPadY as d}from"../../internal/density.js";import{useMPDensity as f,useMPSize as p}from"../../internal/config.js";export const MPCard=/*@__PURE__*/n.forwardRef(function({size:n,density:u,title:x,subtitle:h,headerAction:_,media:v,footer:N,dividers:j=!1,className:w,children:y,...b},g){const k=p(n),$=f(u),B=m(k,$),z=d(k,$),M=j?`${B} ${z}`:B,P=i(x)||i(h)||i(_),A=i(v),C=[P?{key:"header",className:"mp-card__header flex items-start gap-3",content:l(a,{children:[i(x)||i(h)?l("div",{className:"flex min-w-0 flex-1 flex-col",children:[i(x)?e("div",{className:`mp-card__title ${c[k]}`,children:x}):null,i(h)?e("div",{className:`text-mp-on-surface-variant ${t}`,children:h}):null]}):null,i(_)?e("div",{className:"ms-auto shrink-0",children:_}):null]})}:null,i(y)?{key:"content",className:`mp-card__body min-w-0 ${o[k]}`,content:y}:null,i(N)?{key:"footer",className:"mp-card__footer flex flex-wrap items-center gap-2",content:N}:null].filter(e=>null!==e);return l(r,{ref:g,size:k,density:$,padded:!1,className:["mp-card flex flex-col",A?"overflow-hidden":"",w??""].filter(Boolean).join(" "),...b,children:[A?e("div",{className:"mp-card__media [&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:v}):null,C.length>0?e("div",{className:["flex min-w-0 flex-col",j?"":`${z} ${s[k]}`].filter(Boolean).join(" "),children:C.map((l,a)=>e("div",{className:[M,l.className,j&&a>0?"border-mp-outline-variant border-t":""].filter(Boolean).join(" "),children:l.content},l.key))}):null]})});

package/dist/components/carousel/MPCarousel.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronLeftIcon as a,ChevronRightIcon as i}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{fillMessage as l}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as u}from"../../internal/locale.js";import{CAROUSEL as d}from"../../internal/messages/carousel.js";import{CONTROL_ICON as m}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";import{useMPColor as h,useMPSize as b}from"../../internal/config.js";const v={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},w={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const MPCarousel=/*@__PURE__*/t.forwardRef(function({value:g,defaultValue:x=0,onValueChange:j,loop:N=!0,autoPlay:y=!1,interval:M=5e3,arrows:k=!0,indicators:R=!0,variant:C="outlined",size:z,color:I,label:P,previousLabel:S,nextLabel:L,slideLabel:E,locale:T,className:$,style:A,children:B,...F},V){const W=b(z),q=h(I),_=u(d,c(T)),D=P??_.label,G=E??((e,r)=>l(_.slide,{index:String(e),total:String(r)})),H=t.Children.toArray(B),J=H.length,[K,O]=t.useState(x),Q=Math.min(Math.max(g??K,0),Math.max(J-1,0)),U=t.useRef(null),X=t.useRef([]),Y=t.useRef(!1),Z=t.useRef(!1),ee=t.useRef(!1),[re,te]=t.useState(!1),[ne,oe]=t.useState(!1),ae=re||ne,ie=t.useRef(Q),se=t.useRef(j);ie.current=Q,se.current=j;const le=t.useCallback((e,r=!1)=>{if(0===J)return;const t=N?(e%J+J)%J:Math.min(Math.max(e,0),J-1);Y.current=r,void 0===g&&O(t),t!==ie.current&&se.current?.(t)},[J,N,g]);t.useEffect(()=>{if(Y.current)return void(Y.current=!1);if(!Z.current)return void(Z.current=!0);X.current[Q]?.scrollIntoView({block:"nearest",inline:"start"}),ee.current=!0;const e=window.setTimeout(()=>{ee.current=!1},700);return()=>window.clearTimeout(e)},[Q]),t.useEffect(()=>{if(!y||ae||J<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||le(ie.current+1)},M);return()=>window.clearInterval(e)},[y,ae,J,M,le]);const ce=t.useRef(0);t.useEffect(()=>()=>cancelAnimationFrame(ce.current),[]);const ue=Q<=0,de=Q>=J-1;return r("div",{ref:V,role:"region","aria-roledescription":"carousel","aria-label":D,"data-mp-size":W,"data-mp-variant":C,className:["mp-carousel flex w-full flex-col",$??""].filter(Boolean).join(" "),style:{...s(q),...A},onPointerEnter:()=>te(!0),onPointerLeave:()=>te(!1),onFocus:()=>oe(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||oe(!1)},...F,children:[r("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",f[C],"text-mp-on-surface"].join(" "),children:[e("div",{ref:U,tabIndex:0,role:"group","aria-label":D,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{ce.current||(ce.current=requestAnimationFrame(()=>{ce.current=0;const e=U.current;if(!e||0===e.clientWidth||ee.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==ie.current&&r>=0&&r<J&&le(r,!0)}))},children:H.map((r,t)=>e("div",{ref:e=>{X.current[t]=e,X.current.length=J},role:"group","aria-roledescription":"slide","aria-label":G(t+1,J),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),k&&J>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${v[W]}`,children:[e(n,{variant:"filled",size:W,color:q,label:S??_.previous,disabled:!N&&ue,className:"pointer-events-auto",icon:e(o,{icon:a,size:m[W],className:"rtl:rotate-180"}),onClick:()=>le(Q-1)}),e("span",{className:"flex-1"}),e(n,{variant:"filled",size:W,color:q,label:L??_.next,disabled:!N&&de,className:"pointer-events-auto",icon:e(o,{icon:i,size:m[W],className:"rtl:rotate-180"}),onClick:()=>le(Q+1)})]}):null]}),R&&J>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${w[W].gap}`,children:H.map((r,t)=>e("button",{type:"button","aria-label":G(t+1,J),"aria-current":t===Q?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",t===Q?`${w[W].current} bg-(--_mp-accent)`:`${w[W].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>le(t)},t))}):null,e("span",{className:p,"aria-live":y?"off":"polite",children:J>0?G(Q+1,J):""})]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronLeftIcon as a,ChevronRightIcon as i}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{fillMessage as l}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as u}from"../../internal/locale.js";import{CAROUSEL as d}from"../../internal/messages/carousel.js";import{CONTROL_ICON as m}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";import{useMPColor as b,useMPSize as h}from"../../internal/config.js";const v=/*@__PURE__*/["pointer-events-auto","not-disabled:bg-(--_mp-accent)/85","not-disabled:hover:bg-(--_mp-accent)","not-disabled:focus-visible:bg-(--_mp-accent)","not-disabled:active:bg-(--_mp-accent)","transition-[background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none"].join(" "),g={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},w={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const MPCarousel=/*@__PURE__*/t.forwardRef(function({value:x,defaultValue:j=0,onValueChange:N,loop:y=!0,autoPlay:M=!1,interval:k=5e3,arrows:R=!0,indicators:C=!0,variant:z="outlined",size:I,color:P,label:S,previousLabel:L,nextLabel:_,slideLabel:E,locale:T,className:$,style:A,children:B,...F},V){const W=h(I),q=b(P),D=u(d,c(T)),G=S??D.label,H=E??((e,r)=>l(D.slide,{index:String(e),total:String(r)})),J=t.Children.toArray(B),K=J.length,[O,Q]=t.useState(j),U=Math.min(Math.max(x??O,0),Math.max(K-1,0)),X=t.useRef(null),Y=t.useRef([]),Z=t.useRef(!1),ee=t.useRef(!1),re=t.useRef(!1),[te,ne]=t.useState(!1),[oe,ae]=t.useState(!1),ie=te||oe,se=t.useRef(U),le=t.useRef(N);se.current=U,le.current=N;const ce=t.useCallback((e,r=!1)=>{if(0===K)return;const t=y?(e%K+K)%K:Math.min(Math.max(e,0),K-1);Z.current=r,void 0===x&&Q(t),t!==se.current&&le.current?.(t)},[K,y,x]);t.useEffect(()=>{if(Z.current)return void(Z.current=!1);if(!ee.current)return void(ee.current=!0);Y.current[U]?.scrollIntoView({block:"nearest",inline:"start"}),re.current=!0;const e=window.setTimeout(()=>{re.current=!1},700);return()=>window.clearTimeout(e)},[U]),t.useEffect(()=>{if(!M||ie||K<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||ce(se.current+1)},k);return()=>window.clearInterval(e)},[M,ie,K,k,ce]);const ue=t.useRef(0);t.useEffect(()=>()=>cancelAnimationFrame(ue.current),[]);const de=U<=0,me=U>=K-1;return r("div",{ref:V,role:"region","aria-roledescription":"carousel","aria-label":G,"data-mp-size":W,"data-mp-variant":z,className:["mp-carousel flex w-full flex-col",$??""].filter(Boolean).join(" "),style:{...s(q),...A},onPointerEnter:()=>ne(!0),onPointerLeave:()=>ne(!1),onFocus:()=>ae(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||ae(!1)},...F,children:[r("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",f[z],"text-mp-on-surface"].join(" "),children:[e("div",{ref:X,tabIndex:0,role:"group","aria-label":G,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{ue.current||(ue.current=requestAnimationFrame(()=>{ue.current=0;const e=X.current;if(!e||0===e.clientWidth||re.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==se.current&&r>=0&&r<K&&ce(r,!0)}))},children:J.map((r,t)=>e("div",{ref:e=>{Y.current[t]=e,Y.current.length=K},role:"group","aria-roledescription":"slide","aria-label":H(t+1,K),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),R&&K>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${g[W]}`,children:[e(n,{variant:"filled",size:W,color:q,label:L??D.previous,disabled:!y&&de,className:v,icon:e(o,{icon:a,size:m[W],className:"rtl:rotate-180"}),onClick:()=>ce(U-1)}),e("span",{className:"flex-1"}),e(n,{variant:"filled",size:W,color:q,label:_??D.next,disabled:!y&&me,className:v,icon:e(o,{icon:i,size:m[W],className:"rtl:rotate-180"}),onClick:()=>ce(U+1)})]}):null]}),C&&K>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${w[W].gap}`,children:J.map((r,t)=>e("button",{type:"button","aria-label":H(t+1,K),"aria-current":t===U?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",t===U?`${w[W].current} bg-(--_mp-accent)`:`${w[W].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>ce(t)},t))}):null,e("span",{className:p,"aria-live":M?"off":"polite",children:K>0?H(U+1,K):""})]})});