@instruments/materia-ui 0.1.0

package/dist/components/alert-dialog/alert-dialog-overlay.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { OVERLAY_SCRIM_DARK } from "../../tokens/overlay-styles.js";
+/** Dimming scrim behind the dialog; rendered automatically by AlertDialogContent. */
+const AlertDialogOverlay = ({ className, ...props }) => (_jsx(AlertDialogPrimitive.Backdrop, { className: cn(OVERLAY_SCRIM_DARK, className), "data-component": "alert-dialog-overlay", "data-slot": "alert-dialog-overlay", ...props }));
+export { AlertDialogOverlay };

package/dist/components/alert-dialog/alert-dialog-portal.d.ts

@@ -0,0 +1,5 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+/** Portals the dialog into `document.body`; rendered automatically by AlertDialogContent. */
+declare const AlertDialogPortal: ({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) => React.JSX.Element;
+export { AlertDialogPortal };

package/dist/components/alert-dialog/alert-dialog-portal.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+/** Portals the dialog into `document.body`; rendered automatically by AlertDialogContent. */
+const AlertDialogPortal = ({ ...props }) => (_jsx(AlertDialogPrimitive.Portal, { "data-component": "alert-dialog-portal", "data-slot": "alert-dialog-portal", ...props }));
+export { AlertDialogPortal };

package/dist/components/alert-dialog/alert-dialog-root.d.ts

@@ -0,0 +1,15 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+/**
+ * Modal confirmation dialog that interrupts the user for a decision that can't
+ * be dismissed by clicking outside - use for destructive or irreversible
+ * actions. Open state is controlled (`open`) or uncontrolled (`defaultOpen`);
+ * compose with AlertDialogTrigger and AlertDialogContent.
+ *
+ * @bestPractice Use `AlertDialog` only for a confirm / warn / destructive decision (Cancel + Action); a general modal form or details view is a `Dialog`.
+ * @bestPractice Route every destructive confirmation here, never a plain `Dialog` - unlike `Dialog` it won't dismiss on outside-click / Esc, so the choice stays deliberate.
+ * @bestPractice Give the destructive `AlertDialogAction` `tone="danger"` and keep the safe escape as `AlertDialogCancel`.
+ * @category overlays
+ */
+declare const AlertDialog: ({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) => React.JSX.Element;
+export { AlertDialog };

package/dist/components/alert-dialog/alert-dialog-root.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+/**
+ * Modal confirmation dialog that interrupts the user for a decision that can't
+ * be dismissed by clicking outside - use for destructive or irreversible
+ * actions. Open state is controlled (`open`) or uncontrolled (`defaultOpen`);
+ * compose with AlertDialogTrigger and AlertDialogContent.
+ *
+ * @bestPractice Use `AlertDialog` only for a confirm / warn / destructive decision (Cancel + Action); a general modal form or details view is a `Dialog`.
+ * @bestPractice Route every destructive confirmation here, never a plain `Dialog` - unlike `Dialog` it won't dismiss on outside-click / Esc, so the choice stays deliberate.
+ * @bestPractice Give the destructive `AlertDialogAction` `tone="danger"` and keep the safe escape as `AlertDialogCancel`.
+ * @category overlays
+ */
+const AlertDialog = ({ ...props }) => (_jsx(AlertDialogPrimitive.Root, { "data-component": "alert-dialog", "data-slot": "alert-dialog", ...props }));
+export { AlertDialog };

package/dist/components/alert-dialog/alert-dialog-title.d.ts

@@ -0,0 +1,7 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+/** Dialog title; provides the accessible name announced when the dialog opens. */
+declare const AlertDialogTitle: ({ className, ...props }: Omit<React.ComponentProps<typeof AlertDialogPrimitive.Title>, "className"> & {
+    className?: string;
+}) => React.JSX.Element;
+export { AlertDialogTitle };

package/dist/components/alert-dialog/alert-dialog-title.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/** Dialog title; provides the accessible name announced when the dialog opens. */
+const AlertDialogTitle = ({ className, ...props }) => (_jsx(AlertDialogPrimitive.Title, { className: cn("text-paragraph-lg font-semibold text-balance", className), "data-component": "alert-dialog-title", "data-slot": "alert-dialog-title", ...props }));
+export { AlertDialogTitle };

package/dist/components/alert-dialog/alert-dialog-trigger.d.ts

@@ -0,0 +1,5 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+/** Button that opens the alert dialog; pass your own element as `render`. */
+declare const AlertDialogTrigger: ({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) => React.JSX.Element;
+export { AlertDialogTrigger };

package/dist/components/alert-dialog/alert-dialog-trigger.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+/** Button that opens the alert dialog; pass your own element as `render`. */
+const AlertDialogTrigger = ({ ...props }) => (_jsx(AlertDialogPrimitive.Trigger, { "data-component": "alert-dialog-trigger", "data-slot": "alert-dialog-trigger", ...props }));
+export { AlertDialogTrigger };

package/dist/components/alert-dialog.d.ts

@@ -0,0 +1,11 @@
+export { AlertDialogAction } from "./alert-dialog/alert-dialog-action.js";
+export { AlertDialogCancel } from "./alert-dialog/alert-dialog-cancel.js";
+export { AlertDialogContent } from "./alert-dialog/alert-dialog-content.js";
+export { AlertDialogDescription } from "./alert-dialog/alert-dialog-description.js";
+export { AlertDialogFooter } from "./alert-dialog/alert-dialog-footer.js";
+export { AlertDialogHeader } from "./alert-dialog/alert-dialog-header.js";
+export { AlertDialogOverlay } from "./alert-dialog/alert-dialog-overlay.js";
+export { AlertDialogPortal } from "./alert-dialog/alert-dialog-portal.js";
+export { AlertDialog } from "./alert-dialog/alert-dialog-root.js";
+export { AlertDialogTitle } from "./alert-dialog/alert-dialog-title.js";
+export { AlertDialogTrigger } from "./alert-dialog/alert-dialog-trigger.js";

package/dist/components/alert-dialog.js

@@ -0,0 +1,11 @@
+export { AlertDialogAction } from "./alert-dialog/alert-dialog-action.js";
+export { AlertDialogCancel } from "./alert-dialog/alert-dialog-cancel.js";
+export { AlertDialogContent } from "./alert-dialog/alert-dialog-content.js";
+export { AlertDialogDescription } from "./alert-dialog/alert-dialog-description.js";
+export { AlertDialogFooter } from "./alert-dialog/alert-dialog-footer.js";
+export { AlertDialogHeader } from "./alert-dialog/alert-dialog-header.js";
+export { AlertDialogOverlay } from "./alert-dialog/alert-dialog-overlay.js";
+export { AlertDialogPortal } from "./alert-dialog/alert-dialog-portal.js";
+export { AlertDialog } from "./alert-dialog/alert-dialog-root.js";
+export { AlertDialogTitle } from "./alert-dialog/alert-dialog-title.js";
+export { AlertDialogTrigger } from "./alert-dialog/alert-dialog-trigger.js";

package/dist/components/alert.d.ts

@@ -0,0 +1,4 @@
+export { AlertDescription } from "./alert/alert-description.js";
+export { Alert } from "./alert/alert-root.js";
+export { AlertTitle } from "./alert/alert-title.js";
+export { alertAnatomy } from "./alert/alert-anatomy.js";

package/dist/components/alert.js

@@ -0,0 +1,4 @@
+export { AlertDescription } from "./alert/alert-description.js";
+export { Alert } from "./alert/alert-root.js";
+export { AlertTitle } from "./alert/alert-title.js";
+export { alertAnatomy } from "./alert/alert-anatomy.js";

package/dist/components/anchor/anchor-root.d.ts

@@ -0,0 +1,33 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { VariantProps } from "class-variance-authority";
+import type { ReactElement } from "react";
+import type { IconComponent } from "../../tokens/icon-component.js";
+/**
+ * anchorVariants - inline text-link styling for Anchor.
+ * `muted` reads as body text until hovered, when its underline resolves to the
+ * current text colour. `plain` carries no underline until hovered, for a
+ * standalone link that is already set apart, such as a caption or an index row.
+ */
+declare const anchorVariants: (props?: ({
+    variant?: "default" | "muted" | "plain" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AnchorProps extends useRender.ComponentProps<"a">, VariantProps<typeof anchorVariants> {
+    /** Icon shown before the link text, at the `xs` icon size. Not underlined. */
+    icon?: IconComponent;
+    /** Icon shown after the link text, at the `xs` icon size. Not underlined. */
+    suffixIcon?: IconComponent;
+}
+/**
+ * Inline text link - a styled `<a>` with a token underline, an offset, and the
+ * shared focus ring. `variant="muted"` sits quietly in body copy until hovered.
+ * Pass a framework link to `render` (e.g. `next/link`) to keep client-side
+ * navigation. RSC-safe.
+ * @bestPractice Anchor is for text links, whether inside prose or standing alone (a caption, an index row, a footer link); for a button-shaped navigation action give `Button` a `render` link instead.
+ * @bestPractice Compose routers via `render` (`<Anchor render={<Link href="…" />}>…</Anchor>`) - never nest a raw `<a>` inside Anchor's own `<a>`.
+ * @bestPractice Add `icon` or `suffixIcon` (as on `Button`) for an arrow or external-link cue; the icon sits outside the underline and wraps with the text, and is decorative, so the link text must still name the destination.
+ * @bestPractice Use `variant="muted"` inside dense copy so the underline stays quiet; the default variant stands out from the surrounding text.
+ * @bestPractice Use `variant="plain"` where the link is already set apart by its position, such as a caption under a tile or a row in an index; keep an underline on links inside running text.
+ * @category navigation
+ */
+export declare const Anchor: ({ children, className, icon, ref, render, suffixIcon, variant, ...props }: AnchorProps) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { anchorVariants };

package/dist/components/anchor/anchor-root.js

@@ -0,0 +1,84 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+import { isValidElement } from "react";
+import { focusRing } from "../../tokens/focus-ring.js";
+import { Icon } from "../icon.js";
+/**
+ * anchorVariants - inline text-link styling for Anchor.
+ * `muted` reads as body text until hovered, when its underline resolves to the
+ * current text colour. `plain` carries no underline until hovered, for a
+ * standalone link that is already set apart, such as a caption or an index row.
+ */
+const anchorVariants = cva("rounded-xs underline underline-offset-4 transition-colors", {
+    defaultVariants: {
+        variant: "default",
+    },
+    variants: {
+        variant: {
+            default: "text-foreground decoration-foreground/40 hover:decoration-foreground font-medium",
+            muted: "text-muted-foreground decoration-muted-foreground/40 hover:text-foreground hover:decoration-current",
+            plain: "text-foreground decoration-foreground/40 no-underline hover:underline",
+        },
+    },
+});
+/** Decorative icon box: inline-block so the anchor's underline skips it and its margin. */
+const AnchorIcon = ({ icon, className, }) => (_jsx("span", { "aria-hidden": "true", className: cn("inline-block align-middle", className), children: _jsx(Icon, { icon: icon, size: "xs" }) }));
+/** The children a `render` element brings with it, if any. */
+const getRenderChildren = (render) => isValidElement(render) ? render.props.children : undefined;
+/**
+ * The same element type and props with its children swapped. Base UI still
+ * clones the result with its own props, so ref and event merging are unchanged.
+ */
+const withChildren = (element, children) => {
+    const Host = element.type;
+    return _jsx(Host, { ...element.props, children: children });
+};
+/** The link text wrapped with its icons. */
+const decorate = (children, icon, suffixIcon) => (_jsxs(_Fragment, { children: [icon ? _jsx(AnchorIcon, { className: "mr-1.5", icon: icon }) : null, children, suffixIcon ? _jsx(AnchorIcon, { className: "ml-1.5", icon: suffixIcon }) : null] }));
+/**
+ * Inline text link - a styled `<a>` with a token underline, an offset, and the
+ * shared focus ring. `variant="muted"` sits quietly in body copy until hovered.
+ * Pass a framework link to `render` (e.g. `next/link`) to keep client-side
+ * navigation. RSC-safe.
+ * @bestPractice Anchor is for text links, whether inside prose or standing alone (a caption, an index row, a footer link); for a button-shaped navigation action give `Button` a `render` link instead.
+ * @bestPractice Compose routers via `render` (`<Anchor render={<Link href="…" />}>…</Anchor>`) - never nest a raw `<a>` inside Anchor's own `<a>`.
+ * @bestPractice Add `icon` or `suffixIcon` (as on `Button`) for an arrow or external-link cue; the icon sits outside the underline and wraps with the text, and is decorative, so the link text must still name the destination.
+ * @bestPractice Use `variant="muted"` inside dense copy so the underline stays quiet; the default variant stands out from the surrounding text.
+ * @bestPractice Use `variant="plain"` where the link is already set apart by its position, such as a caption under a tile or a row in an index; keep an underline on links inside running text.
+ * @category navigation
+ */
+export const Anchor = ({ children, className, icon, ref, render, suffixIcon, variant, ...props }) => {
+    // Base UI merges `render.props` over the props passed here, so a `render`
+    // element's own children would replace decorated `children`. Decorate the
+    // effective children and write them back onto the element too.
+    const renderChildren = getRenderChildren(render);
+    const decorated = icon || suffixIcon
+        ? decorate(renderChildren ?? children, icon, suffixIcon)
+        : undefined;
+    const childrenProp = {};
+    if (decorated !== undefined) {
+        childrenProp.children = decorated;
+    }
+    else if (children !== undefined) {
+        childrenProp.children = children;
+    }
+    const renderElement = decorated !== undefined &&
+        renderChildren !== undefined &&
+        isValidElement(render)
+        ? withChildren(render, decorated)
+        : render;
+    return useRender({
+        defaultTagName: "a",
+        props: {
+            className: cn(anchorVariants({ variant }), focusRing(), className),
+            "data-component": "anchor",
+            ...props,
+            ...childrenProp,
+        },
+        ref,
+        render: renderElement,
+    });
+};
+export { anchorVariants };

package/dist/components/anchor.d.ts

@@ -0,0 +1 @@
+export { Anchor, type AnchorProps, anchorVariants } from "./anchor/anchor-root.js";

package/dist/components/anchor.js

@@ -0,0 +1 @@
+export { Anchor, anchorVariants } from "./anchor/anchor-root.js";

package/dist/components/animated-number/animated-number-root.d.ts

@@ -0,0 +1,92 @@
+import type { Duration, Easing } from "@instruments/materia-ui/tokens/motion";
+import type { HTMLMotionProps, Transition } from "motion/react";
+/**
+ * Intl formatting options, minus the notations the underlying motion-plus
+ * `AnimateNumber` never supported - kept identical so existing call sites
+ * type-check unchanged.
+ */
+type NumberFormat = Omit<Intl.NumberFormatOptions, "notation"> & {
+    notation?: Exclude<Intl.NumberFormatOptions["notation"], "engineering" | "scientific">;
+};
+/**
+ * Roll direction (motion-plus 3.0.0's `trend`). `1` always rolls digits up and
+ * `-1` always rolls them down, wrapping through 9/0; `0` takes the shortest
+ * numeric path. Omitted, it follows the sign of the change. (motion-plus also
+ * takes a function of the previous and next values; derive the direction at the
+ * call site instead.)
+ */
+export type AnimatedNumberTrend = -1 | 0 | 1;
+export interface AnimatedNumberProps extends Omit<HTMLMotionProps<"span">, "children"> {
+    /** The number value to display and animate */
+    value: number;
+    /** Duration token from @instruments/materia-ui/tokens/motion. Defaults to "moderate" (0.4s) */
+    duration?: Duration;
+    /** Easing token from @instruments/materia-ui/tokens/motion. Defaults to "out" */
+    easing?: Easing;
+    /**
+     * Wraps the digits in a blur-vignette mask so they fade in and out at the
+     * top/bottom (and left/right) clipping edges - softening the roll for large
+     * display numbers. Uses `--mask-height` (0.15em) and `--mask-width` (0.5em).
+     */
+    masked?: boolean;
+    /** Static text rendered before the number, e.g. "$". Layout-animated. */
+    prefix?: string;
+    /** Static text rendered after the number, e.g. "/10". Layout-animated. */
+    suffix?: string;
+    /** BCP-47 locale(s) passed to Intl.NumberFormat. */
+    locales?: Intl.LocalesArgument;
+    /** Intl.NumberFormat options (grouping, fraction digits, currency…). */
+    format?: NumberFormat;
+    /**
+     * Overrides the token-derived timing entirely, applied to the digit roll,
+     * layout and opacity. Accepts any motion `Transition` (duration, delay, ease,
+     * spring). Prefer `duration` / `easing` for the common token-based cases.
+     */
+    transition?: Transition;
+    /**
+     * Which way the digits roll. Omitted, they follow the sign of the change, so
+     * a count going up rolls up even across 9 to 0. Pass `1` or `-1` to force a
+     * direction (say, from the user's action rather than the arithmetic).
+     */
+    trend?: AnimatedNumberTrend;
+}
+/**
+ * Animated number that counts up like an odometer.
+ *
+ * A faithful port of Motion+'s `AnimateNumber`: each digit is a full 0–9 column
+ * that rolls through the intermediate numerals to its new value (a FLIP spring
+ * on `y`), the leading digit rolls up from zero as magnitude grows, and section
+ * widths animate so proportional fonts stay aligned. Formatting (grouping,
+ * fraction digits, currency, sign) comes from `Intl.NumberFormat`; the token
+ * `duration` / `easing` drive the timing, or pass `transition` for a bespoke
+ * curve/spring. Use `prefix` / `suffix` for units and currency so they align
+ * with the digits and fold into the single screen-reader announcement.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (uses default duration="moderate", easing="out")
+ * <AnimatedNumber value={42} />
+ *
+ * // Large hero number with soft edge masks
+ * <AnimatedNumber value={10234} masked className="text-7xl" />
+ *
+ * // With suffix (uses native prop for alignment)
+ * <AnimatedNumber value={3} suffix="/10" />
+ *
+ * // With prefix
+ * <AnimatedNumber value={99} prefix="$" />
+ *
+ * // Grouped thousands
+ * <AnimatedNumber value={count} format={{ useGrouping: true }} locales="en-US" />
+ *
+ * // Custom timing using tokens
+ * <AnimatedNumber value={count} duration="quick" easing="inOut" />
+ * ```
+ *
+ * @bestPractice Needs `ReducedMotionProvider` in the app tree - it supplies the LazyMotion `domMax` features the digit roll and layout animations require, and its `reducedMotion="user"` makes the number snap to its final value for users who ask for less motion.
+ * @bestPractice Use `prefix`/`suffix` for units and currency (`$`, `/10`), not sibling text nodes - they're layout-animated with the digits and folded into the one screen-reader announcement.
+ * @bestPractice Reach for the `duration`/`easing` tokens over a raw `transition` - token timing keeps it in step with the rest of the motion system; drop to `transition` only for bespoke springs.
+ * @category motion
+ */
+export declare const AnimatedNumber: ({ value, duration, easing, masked, prefix, suffix, locales, format, className, style, transition: transitionOverride, trend, ...props }: AnimatedNumberProps) => import("react").JSX.Element;
+export {};

package/dist/components/animated-number/animated-number-root.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { durations, easings } from "@instruments/materia-ui/tokens/motion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { LayoutGroup, MotionConfig } from "motion/react";
+import * as m from "motion/react-m";
+import { useMemo, useState } from "react";
+import { VisuallyHidden } from "../visually-hidden.js";
+import { formatToParts } from "./format-parts.js";
+import { Mask, maskHeight } from "./mask.js";
+import { NumberSection } from "./number-section.js";
+/** Vertical padding on the pre/post sections so they line up with the masked digits. */
+const SECTION_PADDING = { padding: `calc(${maskHeight}/2) 0` };
+/**
+ * Animated number that counts up like an odometer.
+ *
+ * A faithful port of Motion+'s `AnimateNumber`: each digit is a full 0–9 column
+ * that rolls through the intermediate numerals to its new value (a FLIP spring
+ * on `y`), the leading digit rolls up from zero as magnitude grows, and section
+ * widths animate so proportional fonts stay aligned. Formatting (grouping,
+ * fraction digits, currency, sign) comes from `Intl.NumberFormat`; the token
+ * `duration` / `easing` drive the timing, or pass `transition` for a bespoke
+ * curve/spring. Use `prefix` / `suffix` for units and currency so they align
+ * with the digits and fold into the single screen-reader announcement.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (uses default duration="moderate", easing="out")
+ * <AnimatedNumber value={42} />
+ *
+ * // Large hero number with soft edge masks
+ * <AnimatedNumber value={10234} masked className="text-7xl" />
+ *
+ * // With suffix (uses native prop for alignment)
+ * <AnimatedNumber value={3} suffix="/10" />
+ *
+ * // With prefix
+ * <AnimatedNumber value={99} prefix="$" />
+ *
+ * // Grouped thousands
+ * <AnimatedNumber value={count} format={{ useGrouping: true }} locales="en-US" />
+ *
+ * // Custom timing using tokens
+ * <AnimatedNumber value={count} duration="quick" easing="inOut" />
+ * ```
+ *
+ * @bestPractice Needs `ReducedMotionProvider` in the app tree - it supplies the LazyMotion `domMax` features the digit roll and layout animations require, and its `reducedMotion="user"` makes the number snap to its final value for users who ask for less motion.
+ * @bestPractice Use `prefix`/`suffix` for units and currency (`$`, `/10`), not sibling text nodes - they're layout-animated with the digits and folded into the one screen-reader announcement.
+ * @bestPractice Reach for the `duration`/`easing` tokens over a raw `transition` - token timing keeps it in step with the rest of the motion system; drop to `transition` only for bespoke springs.
+ * @category motion
+ */
+export const AnimatedNumber = ({ value, duration = "moderate", easing = "out", masked = false, prefix, suffix, locales, format, className, style, transition: transitionOverride, trend, ...props }) => {
+    const { pre, integer, fraction, post, formatted } = useMemo(() => formatToParts(value, { format, locales }, prefix, suffix), [value, locales, format, prefix, suffix]);
+    // Previous value, held as state adjusted during render (React's documented
+    // "store information from previous renders" pattern) so the trend resolves
+    // against the value the digits are rolling from.
+    const [values, setValues] = useState({ current: value, previous: value });
+    if (values.current !== value) {
+        setValues({ current: value, previous: values.current });
+    }
+    const previous = values.current === value ? values.previous : values.current;
+    const resolvedTrend = trend ?? Math.sign(value - previous);
+    // Token timing shaped like motion-plus' DEFAULT_TRANSITION (one curve applied
+    // to the roll, layout and opacity - equal durations keep exiting glyphs around
+    // until the layout settles). An explicit `transition` prop overrides it.
+    const transition = useMemo(() => {
+        if (transitionOverride) {
+            return transitionOverride;
+        }
+        const curve = {
+            duration: durations[duration],
+            ease: easings[easing],
+        };
+        return { layout: curve, opacity: curve, y: curve };
+    }, [transitionOverride, duration, easing]);
+    return (_jsx(LayoutGroup, { children: _jsx(MotionConfig, { transition: transition, children: _jsxs(m.span, { ...props, className: cn("tabular-nums", className), layout: true, layoutDependency: value, style: {
+                    lineHeight: 1,
+                    ...style,
+                    display: "inline-flex",
+                    isolation: "isolate",
+                    whiteSpace: "nowrap",
+                }, children: [_jsx(VisuallyHidden, { children: formatted }), _jsxs(m.span, { "aria-hidden": true, layout: true, layoutDependency: value, style: {
+                            direction: "ltr",
+                            display: "inline-flex",
+                            isolation: "isolate",
+                            position: "relative",
+                            zIndex: -1,
+                        }, children: [_jsx(NumberSection, { justify: "right", layoutDependency: value, mode: "popLayout", name: "pre", trend: resolvedTrend, parts: pre, style: SECTION_PADDING }), _jsxs(Mask, { layoutDependency: value, masked: masked, children: [_jsx(NumberSection, { justify: "right", layoutDependency: value, name: "integer", trend: resolvedTrend, parts: integer }), _jsx(NumberSection, { layout: "position", layoutDependency: value, name: "fraction", trend: resolvedTrend, parts: fraction })] }), _jsx(NumberSection, { layout: "position", layoutDependency: value, mode: "popLayout", name: "post", trend: resolvedTrend, parts: post, style: SECTION_PADDING })] })] }) }) }));
+};

package/dist/components/animated-number/format-parts.d.ts

@@ -0,0 +1,41 @@
+/** A rolling-digit part; `value` is the numeral 0–9. */
+export interface DigitPart {
+    type: "integer" | "fraction";
+    value: number;
+    key: string;
+}
+/** A static part - separators, sign, decimal point, currency, prefix/suffix. */
+export interface SymbolPart {
+    type: string;
+    value: string;
+    key: string;
+}
+export type NumberPart = DigitPart | SymbolPart;
+/** Narrow a part to a rolling digit (its `value` is a numeral). */
+export declare const isDigitPart: (part: NumberPart) => part is DigitPart;
+export interface FormattedParts {
+    /** Symbols before the number (sign, currency, prefix). */
+    pre: SymbolPart[];
+    /** Integer digits and group separators, keyed right-to-left. */
+    integer: NumberPart[];
+    /** Decimal point and fraction digits. */
+    fraction: NumberPart[];
+    /** Symbols after the number (currency, percent, suffix). */
+    post: SymbolPart[];
+    /** The fully formatted string, including prefix/suffix - the a11y label. */
+    formatted: string;
+}
+interface FormatOptions {
+    locales?: Intl.LocalesArgument | undefined;
+    format?: Intl.NumberFormatOptions | undefined;
+}
+/**
+ * Split a value into the parts the number sections render, via
+ * `Intl.NumberFormat.formatToParts`. Prefix and suffix are injected as parts so
+ * they layout-animate with the digits and fold into `formatted`. Integer parts
+ * are keyed right-to-left in a second pass so place value stays the stable
+ * identity as magnitude grows - the new leading digit mounts, the rest keep
+ * their keys.
+ */
+export declare const formatToParts: (value: number, { locales, format }: FormatOptions, prefix?: string, suffix?: string) => FormattedParts;
+export {};

package/dist/components/animated-number/format-parts.js

@@ -0,0 +1,91 @@
+import { hasText } from "../../utils/type-guards.js";
+/** Narrow a part to a rolling digit (its `value` is a numeral). */
+export const isDigitPart = (part) => typeof part.value === "number";
+/** Inject prefix and suffix as literal parts around the formatter's output. */
+const withAffixes = (parts, prefix, suffix) => {
+    if (hasText(prefix)) {
+        parts.unshift({ type: "literal", value: prefix });
+    }
+    if (hasText(suffix)) {
+        parts.push({ type: "literal", value: suffix });
+    }
+    return parts;
+};
+/** Key the integer parts right-to-left, for better layout animations. */
+const keyRightToLeft = (rawInteger, generateKey) => {
+    const integer = [];
+    for (let i = rawInteger.length - 1; i >= 0; i -= 1) {
+        const raw = rawInteger[i];
+        if (!raw) {
+            continue;
+        }
+        integer.unshift({ ...raw, key: generateKey(raw.type) });
+    }
+    return integer;
+};
+/**
+ * Split a value into the parts the number sections render, via
+ * `Intl.NumberFormat.formatToParts`. Prefix and suffix are injected as parts so
+ * they layout-animate with the digits and fold into `formatted`. Integer parts
+ * are keyed right-to-left in a second pass so place value stays the stable
+ * identity as magnitude grows - the new leading digit mounts, the rest keep
+ * their keys.
+ */
+export const formatToParts = (value, { locales, format }, prefix, suffix) => {
+    const parts = withAffixes(new Intl.NumberFormat(locales, format).formatToParts(value), prefix, suffix);
+    const pre = [];
+    // Collected without final keys first; a second pass keys them from RTL.
+    const rawInteger = [];
+    const fraction = [];
+    const post = [];
+    const counts = {};
+    const generateKey = (type) => {
+        counts[type] = (counts[type] ?? -1) + 1;
+        return `${type}:${counts[type]}`;
+    };
+    let formatted = "";
+    let seenInteger = false;
+    let seenDecimal = false;
+    for (const part of parts) {
+        formatted += part.value;
+        // Merge plus and minus into one "sign" type so the slot is stable.
+        const type = part.type === "minusSign" || part.type === "plusSign"
+            ? "sign"
+            : part.type;
+        if (type === "integer") {
+            seenInteger = true;
+            for (const d of part.value) {
+                rawInteger.push({
+                    key: "",
+                    type: "integer",
+                    value: Math.trunc(Number(d)),
+                });
+            }
+        }
+        else if (type === "group") {
+            rawInteger.push({ key: "", type: "group", value: part.value });
+        }
+        else if (type === "decimal") {
+            seenDecimal = true;
+            fraction.push({ key: generateKey(type), type, value: part.value });
+        }
+        else if (type === "fraction") {
+            for (const d of part.value) {
+                fraction.push({
+                    key: generateKey(type),
+                    type: "fraction",
+                    value: Math.trunc(Number(d)),
+                });
+            }
+        }
+        else {
+            (seenInteger || seenDecimal ? post : pre).push({
+                key: generateKey(type),
+                type,
+                value: part.value,
+            });
+        }
+    }
+    const integer = keyRightToLeft(rawInteger, generateKey);
+    return { formatted, fraction, integer, post, pre };
+};

package/dist/components/animated-number/get-width-in-em.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Measure an element's rendered width in `em`, so the fixed section widths and
+ * per-digit widths scale with font size and survive text resizing.
+ */
+export declare const getWidthInEm: (element: HTMLElement) => string;

package/dist/components/animated-number/get-width-in-em.js

@@ -0,0 +1,11 @@
+// Port of Motion+ AnimateNumber (motion-plus 2.0.0).
+/** Computed lengths resolve to `<n>px`; drop the unit to get the number. */
+const pixels = (length) => Number(length.replace(/px$/u, ""));
+/**
+ * Measure an element's rendered width in `em`, so the fixed section widths and
+ * per-digit widths scale with font size and survive text resizing.
+ */
+export const getWidthInEm = (element) => {
+    const { width, fontSize } = getComputedStyle(element);
+    return `${pixels(width) / pixels(fontSize)}em`;
+};

package/dist/components/animated-number/mask.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/** Vertical mask inset; also the digit/symbol vertical padding so heights match. */
+export declare const maskHeight = "var(--mask-height, 0.15em)";
+/**
+ * Wraps the integer + fraction sections and clips each digit column to a single
+ * row (`overflow: clip` is structural - it hides the stacked 0–9 above/below the
+ * current digit, always on). When `masked`, it additionally paints the
+ * blur-vignette so the clipped digits fade softly at the edges as they roll;
+ * unmasked, the clip is crisp. Always `aria-hidden` - the accessible label
+ * lives on the root.
+ */
+export declare const Mask: ({ children, layoutDependency, masked, }: {
+    children: ReactNode;
+    layoutDependency?: unknown;
+    masked: boolean;
+}) => import("react").JSX.Element;