material-plus-ui 1.5.0 → 1.7.0

package/dist/internal/animate-core.d.ts

@@ -0,0 +1,121 @@
+/**
+ * The values an animation comes to, and nothing that runs one.
+ *
+ * Split from `animate.ts` for the reason `density.ts` is split from `scale.ts`,
+ * with a sharper edge: the split stylesheet is cut along the import graph a file
+ * at a time, and `animate.ts` names the marquee's own class in a query selector.
+ * A component reaching in here for a single entrance was coming out with the
+ * marquee's rules and its two keyframes attached.
+ *
+ * Which is also a rule about writing in this file. A hand-written rule is
+ * attributed by looking for its class names in a component's files, and a
+ * comment is one of those files — so naming another component's class here, even
+ * in prose, would put that component's CSS into every sheet this module reaches.
+ *
+ * So this half is the tables and the arithmetic — what a duration, a curve, a
+ * repeat and an offset resolve to — and the other half is the machinery that
+ * watches a trigger and drives them. `transition.ts` reads this one; the
+ * `MPAnimate*` components read both, through the re-export next door.
+ */
+import * as React from 'react';
+import type { MPAnimateMode, MPAnimateRepeat, MPAnimateTimeline, MPAnimation, MPEasing, MPSide } from '../types.js';
+/** The class that reads the slots. Always paired with one of the below. */
+export declare const ANIM_BASE = "mp-anim";
+/**
+ * Which keyframe an effect runs.
+ *
+ * `grow` and `zoom` share one: they are the same arithmetic at two strengths,
+ * and a second identical `@keyframes` would only be a second place to fix a
+ * bug. What separates them is their defaults and their origin, which is a
+ * property rather than a keyframe.
+ */
+export declare const ANIMATION_CLASS: Record<MPAnimation, string>;
+/**
+ * The name an effect goes by, which is wider than the shared union.
+ *
+ * `float` and `shake` are not entrances and are not in `MPAnimation` — see
+ * `effectClass` below for why a shared lookup table is a thing to keep small.
+ * They still need a *name*, because `data-mp-animation` is how a test and a
+ * page's own CSS find one, and because the tables above are read by name.
+ *
+ * Neither of them reads those tables: an effect that brings its own keyframe
+ * brings its own duration and curve with it, since a six-second drift and a
+ * four-hundred-millisecond refusal are not on any Material ladder. The
+ * fallbacks in the two lookups below exist so the types do not have to lie
+ * about that, not because anything relies on them.
+ */
+export type AnimationEffect = MPAnimation | 'float' | 'shake' | 'count';
+/** A curve, as the stylesheet spells it. */
+export declare function easingValue(easing: MPEasing): string;
+/** A number is pixels; a string is already a CSS length. */
+export declare function lengthValue(value: number | string): string;
+/** `'infinite'` reaches CSS as the word; a count reaches it as the number. */
+export declare function repeatValue(repeat: MPAnimateRepeat): string;
+export declare function isInfinite(repeat: MPAnimateRepeat | undefined): boolean;
+export interface AnimationSlotOptions {
+    /** Which effect's tokens to fall back to, and which keyframe to run. */
+    effect: AnimationEffect;
+    /** Milliseconds. Unset takes the effect's Material duration token. */
+    duration?: number;
+    /** Milliseconds. */
+    delay: number;
+    /** Unset takes the effect's Material easing token. */
+    easing?: MPEasing;
+    repeat: MPAnimateRepeat;
+    alternate?: boolean;
+    mode?: MPAnimateMode;
+    /** Milliseconds added to the duration, clamped at zero. See `durationValue`. */
+    durationOffset?: number;
+    /** `view` hands the animation to the reader's scrolling instead of a clock. */
+    timeline?: MPAnimateTimeline;
+    /** Any CSS `animation-range`. Only read on `timeline: 'view'`. */
+    range?: string;
+    /** Where the animated properties start. Only the ones an effect reads. */
+    opacity?: number;
+    scale?: number;
+    x?: string;
+    y?: string;
+    angle?: string;
+    angleTo?: string;
+    clip?: string;
+    /** The two ends of a counted value. Only `MPAnimateCounter` fills these. */
+    from?: number;
+    to?: number;
+}
+/**
+ * The `--_mp-anim-*` slots, as an inline style object.
+ *
+ * Inline rather than utilities for the reason the accent slots are: these are
+ * per-instance numbers, and Tailwind cannot generate a class for a duration it
+ * has never seen written down.
+ */
+export declare function animationSlots(options: AnimationSlotOptions): React.CSSProperties;
+/**
+ * Which way a slide starts, given the edge it comes from.
+ *
+ * `MPSide` is physical everywhere in this library, and it stays physical here:
+ * something sliding in from the top of the window comes from the top in every
+ * writing direction.
+ */
+export declare function slideOffsets(from: MPSide, distance: number | string): {
+    x: string;
+    y: string;
+};
+/**
+ * The `inset()` a wipe starts from, given the edge it opens at.
+ *
+ * A reveal is one rectangle shrinking to nothing: `inset(0 100% 0 0)` is the
+ * whole element clipped away from the right, so the content is disclosed
+ * left-to-right as the inset returns to `inset(0)`. Naming the *edge it opens
+ * at* rather than the direction it travels is the same choice `MPAnimateSlide`
+ * makes, and for the same reason — a caller is pointing at a place.
+ *
+ * `inset(0)` is the to-state and needs no slot, which is the argument for a
+ * clip-path over a mask: "nothing is clipped" already has a spelling, where a
+ * gradient mask would need a second gradient per direction to say it.
+ *
+ * Physical, like `MPSide` everywhere else here. A title disclosed from the left
+ * of its box is disclosed from the left in every writing direction; what changes
+ * under RTL is which edge a caller names, and that is theirs to decide.
+ */
+export declare function revealClip(from: MPSide): string;

package/dist/internal/animate-core.js

@@ -0,0 +1 @@
+export const ANIM_BASE="mp-anim";export const ANIMATION_CLASS={fade:"mp-anim-fade",grow:"mp-anim-scale",slide:"mp-anim-slide",zoom:"mp-anim-scale",rotate:"mp-anim-rotate",blink:"mp-anim-blink",reveal:"mp-anim-reveal"};const e={fade:{in:"medium2",out:"short4"},grow:{in:"medium4",out:"short4"},slide:{in:"medium4",out:"short4"},zoom:{in:"medium4",out:"short4"},rotate:{in:"long2",out:"medium2"},blink:{in:"extra-long4",out:"extra-long4"},reveal:{in:"medium4",out:"short4"}},t={fade:"emphasized-decelerate",grow:"emphasized-decelerate",slide:"emphasized-decelerate",zoom:"emphasized-decelerate",rotate:"emphasized-decelerate",blink:"standard",reveal:"emphasized-decelerate"};export function easingValue(e){return`var(--mp-sys-motion-easing-${e})`}function n(t,n,i="in",a=0){const r=void 0!==t?`${t}ms`:`var(--mp-sys-motion-duration-${(e[n]??e.fade)[i]})`;return 0===a?r:void 0!==t?`${Math.max(0,t+a)}ms`:`max(0ms, calc(${r} + ${a}ms))`}export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}function i(e,t){return"out"===e?t?"alternate-reverse":"reverse":t?"alternate":"normal"}export function animationSlots(e){const a=e.mode??"in",r={"--_mp-anim-duration":n(e.duration,e.effect,a,e.durationOffset),"--_mp-anim-delay":`${e.delay}ms`,"--_mp-anim-ease":easingValue(e.easing??t[e.effect]??t.fade),"--_mp-anim-repeat":repeatValue(e.repeat),"--_mp-anim-direction":i(a,e.alternate)};return"view"===e.timeline&&(r["--_mp-anim-timeline"]="view()",r["--_mp-anim-range"]=e.range??"entry 0% cover 45%"),void 0!==e.opacity&&(r["--_mp-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(r["--_mp-anim-scale"]=String(e.scale)),void 0!==e.x&&(r["--_mp-anim-x"]=e.x),void 0!==e.y&&(r["--_mp-anim-y"]=e.y),void 0!==e.angle&&(r["--_mp-anim-angle"]=e.angle),void 0!==e.angleTo&&(r["--_mp-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(r["--_mp-anim-clip"]=e.clip),void 0!==e.from&&(r["--_mp-anim-from"]=String(e.from)),void 0!==e.to&&(r["--_mp-anim-to"]=String(e.to)),r}export function slideOffsets(e,t){const n=lengthValue(t),i="number"==typeof t?-t+"px":`calc(-1 * ${n})`;switch(e){case"top":return{x:"0px",y:i};case"bottom":return{x:"0px",y:n};case"left":return{x:i,y:"0px"};default:return{x:n,y:"0px"}}}export function revealClip(e){switch(e){case"top":return"inset(0 0 100% 0)";case"bottom":return"inset(100% 0 0 0)";case"right":return"inset(0 0 0 100%)";default:return"inset(0 100% 0 0)"}}

package/dist/internal/animate.d.ts

@@ -30,72 +30,66 @@
  * this library: the value a caller does not name is the *token*, so a theme can
  * still reach it.
  *
+ * ## One effect, or one effect per child
+ *
+ * `stagger` is the same six effects written onto the children instead of onto
+ * the box, and it is three props rather than an `MPAnimateStagger` component:
+ * a list settling in is not a different effect from a fade, it is the same fade
+ * told when to start. The per-child half is `staggerChildren`, which
+ * `MPAnimateAppear` was built out of first and now shares — two copies would be
+ * two answers to which child is the third one.
+ *
  * ## What is deliberately not here
  *
  * An animation that has to know what its children *are* — a marquee that
  * duplicates them, a headline that swaps between them, a typewriter that counts
  * characters — cannot be a class name and a few numbers. Those are components,
- * and their logic stays in their own files.
+ * and their logic stays in their own files. They are also the ones that cannot
+ * take a `stagger`, and for the same reason.
  */
+import { ANIM_BASE, ANIMATION_CLASS, animationSlots, easingValue, isInfinite, lengthValue, repeatValue, revealClip, slideOffsets, type AnimationEffect, type AnimationSlotOptions } from './animate-core.js';
+export { ANIM_BASE, ANIMATION_CLASS, animationSlots, easingValue, isInfinite, lengthValue, repeatValue, revealClip, slideOffsets };
+export type { AnimationEffect, AnimationSlotOptions };
 import * as React from 'react';
-import type { MPAnimateMode, MPAnimateRepeat, MPAnimateTrigger, MPAnimation, MPEasing, MPSide } from '../types.js';
-/** The class that reads the slots. Always paired with one of the below. */
-export declare const ANIM_BASE = "mp-anim";
-/**
- * Which keyframe an effect runs.
- *
- * `grow` and `zoom` share one: they are the same arithmetic at two strengths,
- * and a second identical `@keyframes` would only be a second place to fix a
- * bug. What separates them is their defaults and their origin, which is a
- * property rather than a keyframe.
- */
-export declare const ANIMATION_CLASS: Record<MPAnimation, string>;
-/** A curve, as the stylesheet spells it. */
-export declare function easingValue(easing: MPEasing): string;
-/** A number is pixels; a string is already a CSS length. */
-export declare function lengthValue(value: number | string): string;
-/** `'infinite'` reaches CSS as the word; a count reaches it as the number. */
-export declare function repeatValue(repeat: MPAnimateRepeat): string;
-export declare function isInfinite(repeat: MPAnimateRepeat | undefined): boolean;
-export interface AnimationSlotOptions {
-    /** Which effect's tokens to fall back to, and which keyframe to run. */
-    effect: MPAnimation;
-    /** Milliseconds. Unset takes the effect's Material duration token. */
-    duration?: number;
-    /** Milliseconds. */
-    delay: number;
-    /** Unset takes the effect's Material easing token. */
-    easing?: MPEasing;
-    repeat: MPAnimateRepeat;
-    alternate?: boolean;
-    mode?: MPAnimateMode;
-    /** Where the animated properties start. Only the ones an effect reads. */
-    opacity?: number;
-    scale?: number;
-    x?: string;
-    y?: string;
-    angle?: string;
-    angleTo?: string;
+import type { MPAnimateTrigger } from '../types.js';
+/** What differs between one child and the next. */
+export interface StaggerOptions {
+    /**
+     * Milliseconds added to each child's delay. The whole of the effect: at 0
+     * there is nothing per-child to do and the box animates instead.
+     */
+    stagger: number;
+    /** Milliseconds added to each child's duration. Negative is allowed. */
+    durationStep?: number;
+    /** Runs the set from the last child to the first. */
+    reverse?: boolean;
 }
 /**
- * The `--_mp-anim-*` slots, as an inline style object.
+ * The same animation on every child, held back by its position.
  *
- * Inline rather than utilities for the reason the accent slots are: these are
- * per-instance numbers, and Tailwind cannot generate a class for a duration it
- * has never seen written down.
- */
-export declare function animationSlots(options: AnimationSlotOptions): React.CSSProperties;
-/**
- * Which way a slide starts, given the edge it comes from.
+ * One implementation for all of it. `MPAnimateAppear` had this and the six
+ * single-keyframe effects did not, and writing it a second time would have left
+ * the library with two answers to "which child is the third one" — which is the
+ * kind of disagreement nobody finds until a list is reversed inside a fragment.
+ *
+ * ## The animation goes on the children, not on wrappers
+ *
+ * A row of `<li>`s stays a row of `<li>`s and a grid's cells stay its direct
+ * children, so nothing about the layout changes because the set is being
+ * animated. The cost is real and worth naming: a child has to accept
+ * `className` and `style`, which every host element and every component in this
+ * library does, and a caller's own component need not. Only a bare string has
+ * no element to write onto, and that one is wrapped in a `<span>`.
+ *
+ * ## The step is per child, which makes the grouping the caller's dial
+ *
+ * Eight children are eight steps and one child holding eight things is one
+ * step. That is also how to opt part of a set out of the sequence — group it.
  *
- * `MPSide` is physical everywhere in this library, and it stays physical here:
- * something sliding in from the top of the window comes from the top in every
- * writing direction.
+ * The caller's own `style` wins over the slots, deliberately: the slots are
+ * this library's answer and the attribute is the caller's.
  */
-export declare function slideOffsets(from: MPSide, distance: number | string): {
-    x: string;
-    y: string;
-};
+export declare function staggerChildren(children: React.ReactNode, className: string, slots: AnimationSlotOptions, { stagger, durationStep, reverse }: StaggerOptions): React.ReactNode[];
 export declare function usePrefersReducedMotion(): boolean;
 export interface AnimationRunOptions {
     trigger: MPAnimateTrigger;
@@ -136,7 +130,31 @@ export interface AnimationRun {
  * and leaves everything inside it alone.
  */
 export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite }: AnimationRunOptions): AnimationRun;
-export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions {
+export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions, Partial<StaggerOptions> {
+    /**
+     * A keyframe class the effect brings itself, instead of the one its `effect`
+     * names.
+     *
+     * `MPAnimation` and the three tables behind it are what everything with an
+     * entrance shares, and a shared lookup table is a tax on everything that
+     * imports it: a `Record<Effect, string>` is not tree-shaken key by key, so
+     * every component reading one pays for the rows it will never use. The
+     * question to ask before adding a value is whether a component that will
+     * never use it has any business paying for it.
+     *
+     * `float` and `shake` do not: neither is an arrival. A drift with no
+     * destination and a four-hundred-millisecond answer to a rejection have
+     * nothing in common with a fade beyond the machinery below, so they keep
+     * their keyframes in their own files and borrow everything else — the
+     * trigger, the rewind, the slots, the stagger.
+     *
+     * `effect` is still named, because the durations and the curves are per
+     * effect and the data attribute is how a test finds one. What this replaces
+     * is only which `@keyframes` runs.
+     */
+    effectClass?: string;
+    /** Only read when the effect is being spread across them. */
+    children?: React.ReactNode;
 }
 export interface AnimateElement {
     ref: React.RefCallback<HTMLElement>;
@@ -144,6 +162,8 @@ export interface AnimateElement {
     style: React.CSSProperties;
     /** The hover handlers and the two data attributes, ready to be spread. */
     props: React.HTMLAttributes<HTMLElement> & Record<string, unknown>;
+    /** The children, wrapped when there is a `stagger` and untouched otherwise. */
+    children: React.ReactNode;
 }
 /**
  * Everything an `MPAnimate*` root needs, in one call.

package/dist/internal/animate.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";export const ANIM_BASE="mp-anim";export const ANIMATION_CLASS={fade:"mp-anim-fade",grow:"mp-anim-scale",slide:"mp-anim-slide",zoom:"mp-anim-scale",rotate:"mp-anim-rotate",blink:"mp-anim-blink"};const n={fade:{in:"medium2",out:"short4"},grow:{in:"medium4",out:"short4"},slide:{in:"medium4",out:"short4"},zoom:{in:"medium4",out:"short4"},rotate:{in:"long2",out:"medium2"},blink:{in:"extra-long4",out:"extra-long4"}},t={fade:"emphasized-decelerate",grow:"emphasized-decelerate",slide:"emphasized-decelerate",zoom:"emphasized-decelerate",rotate:"emphasized-decelerate",blink:"standard"};export function easingValue(e){return`var(--mp-sys-motion-easing-${e})`}function i(e,t,i="in"){return void 0!==e?`${e}ms`:`var(--mp-sys-motion-duration-${n[t][i]})`}export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}function a(e,n){return"out"===e?n?"alternate-reverse":"reverse":n?"alternate":"normal"}export function animationSlots(e){const n=e.mode??"in",r={"--_mp-anim-duration":i(e.duration,e.effect,n),"--_mp-anim-delay":`${e.delay}ms`,"--_mp-anim-ease":easingValue(e.easing??t[e.effect]),"--_mp-anim-repeat":repeatValue(e.repeat),"--_mp-anim-direction":a(n,e.alternate)};return void 0!==e.opacity&&(r["--_mp-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(r["--_mp-anim-scale"]=String(e.scale)),void 0!==e.x&&(r["--_mp-anim-x"]=e.x),void 0!==e.y&&(r["--_mp-anim-y"]=e.y),void 0!==e.angle&&(r["--_mp-anim-angle"]=e.angle),void 0!==e.angleTo&&(r["--_mp-anim-angle-to"]=e.angleTo),r}export function slideOffsets(e,n){const t=lengthValue(n),i="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:i};case"bottom":return{x:"0px",y:t};case"left":return{x:i,y:"0px"};default:return{x:t,y:"0px"}}}const r="(prefers-reduced-motion: reduce)";function o(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const n=window.matchMedia(r);return n.addEventListener("change",e),()=>n.removeEventListener("change",e)}function s(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(r).matches}function m(){return!1}export function usePrefersReducedMotion(){return e.useSyncExternalStore(o,s,m)}export function useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o}){const s=e.useRef(null),[m,u]=e.useState("mount"===n),[c,d]=e.useState(0),l=e.useCallback(()=>{u(!0),d(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=s.current;if(!e||0===c)return;const n=[e,...e.querySelectorAll(".mp-anim, .mp-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[c]),e.useEffect(()=>{if("visible"!==n)return;const e=s.current;if(!e||"undefined"==typeof IntersectionObserver)return void u(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(l(),i&&t.disconnect()):i||u(!1)},{threshold:a});return t.observe(e),()=>t.disconnect()},[n,i,a,l]),e.useEffect(()=>{"manual"===n&&(t?l():u(!1))},[n,t,l]);const p=e.useCallback(()=>{o&&u(!1)},[o]),f="hover"===n?{onPointerEnter:l,onFocus:l,onPointerLeave:p,onBlur:p}:{};return{ref:e.useCallback(e=>{s.current=e},[]),state:m&&!r?"running":"paused",started:m,handlers:f}}export function useAnimateElement(e){const{trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o,...s}=e,m=useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o});return{ref:m.ref,className:`mp-anim ${ANIMATION_CLASS[s.effect]}`,style:{...animationSlots(s),"--_mp-anim-state":m.state},props:{...m.handlers,"data-mp-animation":s.effect,"data-mp-state":m.state}}}
+import{ANIM_BASE as e,ANIMATION_CLASS as t,animationSlots as n,easingValue as r,isInfinite as a,lengthValue as s,repeatValue as o,revealClip as i,slideOffsets as c}from"./animate-core.js";export{e as ANIM_BASE,t as ANIMATION_CLASS,n as animationSlots,r as easingValue,a as isInfinite,s as lengthValue,o as repeatValue,i as revealClip,c as slideOffsets};import*as u from"react";export function staggerChildren(e,t,r,{stagger:a,durationStep:s=0,reverse:o=!1}){const i=u.Children.toArray(e);return i.map((e,c)=>{const d=o?i.length-1-c:c,f=n({...r,delay:r.delay+d*a,durationOffset:(r.durationOffset??0)+d*s});if(!u.isValidElement(e))return u.createElement("span",{key:c,className:t,style:f},e);const l=e.props;return u.cloneElement(e,{className:[t,l.className].filter(Boolean).join(" "),style:{...f,...l.style}})})}const d="(prefers-reduced-motion: reduce)";function f(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const t=window.matchMedia(d);return t.addEventListener("change",e),()=>t.removeEventListener("change",e)}function l(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(d).matches}function m(){return!1}export function usePrefersReducedMotion(){return u.useSyncExternalStore(f,l,m)}export function useAnimationRun({trigger:e,play:t,once:n,threshold:r,paused:a,infinite:s}){const o=u.useRef(null),[i,c]=u.useState("mount"===e),[d,f]=u.useState(0),l=u.useCallback(()=>{c(!0),f(e=>e+1)},[]);u.useLayoutEffect(()=>{const e=o.current;if(!e||0===d)return;const t=[e,...e.querySelectorAll(".mp-anim, .mp-marquee-track")];for(const e of t)e.style.animationName="none";e.offsetWidth;for(const e of t)e.style.animationName=""},[d]),u.useEffect(()=>{if("visible"!==e)return;const t=o.current;if(!t||"undefined"==typeof IntersectionObserver)return void c(!0);const a=new IntersectionObserver(([e])=>{e.isIntersecting?(l(),n&&a.disconnect()):n||c(!1)},{threshold:r});return a.observe(t),()=>a.disconnect()},[e,n,r,l]),u.useEffect(()=>{"manual"===e&&(t?l():c(!1))},[e,t,l]);const m=u.useCallback(()=>{s&&c(!1)},[s]),p="hover"===e?{onPointerEnter:l,onFocus:l,onPointerLeave:m,onBlur:m}:{};return{ref:u.useCallback(e=>{o.current=e},[]),state:i&&!a?"running":"paused",started:i,handlers:p}}export function useAnimateElement(r){const{trigger:a,play:s,once:o,threshold:i,paused:c,infinite:u,stagger:d=0,durationStep:f,reverse:l,effectClass:m,children:p,...h}=r,g=useAnimationRun({trigger:a,play:s,once:o,threshold:i,paused:c,infinite:u}),y=`${e} ${m??t[h.effect]}`,v=function(e,t,n){return"view"!==t?e:n?"paused":"running"}(g.state,h.timeline,c);return d>0?{ref:g.ref,className:"",style:{"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:staggerChildren(p,y,h,{stagger:d,durationStep:f,reverse:l})}:{ref:g.ref,className:y,style:{...n(h),"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:p}}

package/dist/internal/bottom-navigation.d.ts

@@ -0,0 +1,58 @@
+/**
+ * What the two navigation bars share, which is everything except the sheet.
+ *
+ * `MPBottomNavigation` is the bar held against the bottom edge of the window;
+ * `MPFloatingBottomNavigation` is the same row of destinations lifted clear of
+ * it. They differ in shape, in where they sit and in how wide they are — and in
+ * nothing a destination can see. So the context an `MPBottomNavigationItem`
+ * reads lives here rather than inside either of them, and an item works in
+ * both without knowing which it is in.
+ *
+ * A file of its own rather than one bar importing the other, because that
+ * import would run the wrong way: an item belongs to whichever bar it was put
+ * in, and a floating bar that had to pull in the full-width bar's height table
+ * and position map to reach a context would carry both sheets' CSS into every
+ * page that rendered either.
+ *
+ * There are no class strings in here, which is why it costs nothing to be
+ * shared — see the note at the top of `internal/density.ts` for what happens
+ * when there are.
+ */
+import * as React from 'react';
+import type { 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 only one that works for a reader
+ *   who has not used the application before.
+ * - `selected` — only the destination the reader is on.
+ * - `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';
+/** What an `MPBottomNavigationItem` inherits from whichever bar it is in. */
+export interface MPBottomNavigationContextValue {
+    value: MPBottomNavigationValue | null;
+    change: (value: MPBottomNavigationValue) => void;
+    size: MPSize;
+    labels: MPBottomNavigationLabels;
+    disabled: boolean;
+    /**
+     * Whether the bar is the floating one.
+     *
+     * The one thing a destination does need to know, and it is about width rather
+     * than about looks: a full-width bar divides its own width between its
+     * destinations, so each is `flex-1`; a floating one is only as wide as what is
+     * in it, so each is as wide as its own contents. Stretched inside a lozenge
+     * they would each take a fifth of nothing.
+     */
+    floating: boolean;
+}
+export declare const MPBottomNavigationContext: React.Context<MPBottomNavigationContextValue>;

package/dist/internal/bottom-navigation.js

@@ -0,0 +1,2 @@
+"use client";
+import*as t from"react";export const MPBottomNavigationContext=/*@__PURE__*/t.createContext({value:null,change:()=>{},size:"md",labels:"all",disabled:!1,floating:!1});