@instruments/materia-ui 0.2.0 → 0.3.0

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

@@ -15,10 +15,12 @@ interface NumberDigitProps extends HTMLMotionProps<"span"> {
  * through every intermediate numeral in either direction, including across the
  * 9/0 wrap when `trend` asks for it. New leading digits enter with
  * `initialValue={0}` and roll up from zero; exiting digits roll to zero so
- * removal also animates. Per-digit width animates to the target glyph width so
- * proportional fonts stay aligned.
+ * removal also animates. The column's real width tweens to the target glyph
+ * width on the roll's timing, so proportional fonts stay aligned without a
+ * one-frame jump.
  *
- * Under reduced motion the FLIP is skipped: the digit snaps to its value.
+ * Under reduced motion the FLIP and the width tween are skipped: the digit
+ * snaps to its value and width.
  */
 export declare const NumberDigit: ({ value: _value, trend, ...rest }: NumberDigitProps) => import("react").JSX.Element;
 export {};

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { animate, MotionConfigContext, PresenceContext, useIsPresent, useReducedMotion, } from "motion/react";
+import { animate, MotionConfigContext, PresenceContext, useIsPresent, useMotionValue, useReducedMotion, } from "motion/react";
 import * as m from "motion/react-m";
-import { use, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { use, useEffect, useLayoutEffect, useRef } from "react";
 import { getWidthInEm } from "./get-width-in-em.js";
 import { maskHeight } from "./mask.js";
-import { targetWidths } from "./target-widths.js";
+import { targetWidths, widthTiming } from "./target-widths.js";
 const mod = (n, base) => ((n % base) + base) % base;
 /** The nine digits above and below `value`, wrapping mod 10. */
 const ABOVE_OFFSETS = [9, 8, 7, 6, 5, 4, 3, 2, 1];
@@ -24,10 +24,12 @@ const digitFillStyle = {
  * through every intermediate numeral in either direction, including across the
  * 9/0 wrap when `trend` asks for it. New leading digits enter with
  * `initialValue={0}` and roll up from zero; exiting digits roll to zero so
- * removal also animates. Per-digit width animates to the target glyph width so
- * proportional fonts stay aligned.
+ * removal also animates. The column's real width tweens to the target glyph
+ * width on the roll's timing, so proportional fonts stay aligned without a
+ * one-frame jump.
  *
- * Under reduced motion the FLIP is skipped: the digit snaps to its value.
+ * Under reduced motion the FLIP and the width tween are skipped: the digit
+ * snaps to its value and width.
  */
 export const NumberDigit = ({ value: _value, trend = 0, ...rest }) => {
     const { transition } = use(MotionConfigContext);
@@ -45,15 +47,23 @@ export const NumberDigit = ({ value: _value, trend = 0, ...rest }) => {
     // Exit isn't a normal AnimatePresence exit because it must trigger a resize.
     const isPresent = useIsPresent();
     const value = isPresent ? _value : 0;
-    // Set the width to the initial value's width immediately, so the next render
-    // animates from it.
+    // The column's real layout width, tweened to each value's glyph width so a
+    // proportional font never jumps its neighbours. Natural until mounted.
+    const width = useMotionValue("auto");
+    // Set the width to the initial value's width before paint, so the first
+    // change tweens from it.
     useLayoutEffect(() => {
         const initialEl = numberRefs.current[initialValueRef.current];
         if (!scope.current || !initialEl) {
             return;
         }
-        scope.current.style.width = getWidthInEm(initialEl);
-    }, []);
+        const initialWidth = getWidthInEm(initialEl);
+        scope.current.style.width = initialWidth;
+        width.jump(initialWidth);
+    }, [width]);
+    useEffect(() => () => {
+        width.stop();
+    }, [width]);
     // FLIP the y in a layout effect. initialY is the pixel offset from the new
     // resting position, including any in-flight offset (inner vs outer rect top)
     // so mid-roll re-targets stay continuous.
@@ -83,24 +93,37 @@ export const NumberDigit = ({ value: _value, trend = 0, ...rest }) => {
         // (equivalent to the original's cleanup, without a returned teardown).
         prevValue.current = value;
     }, [value, trend, shouldReduceMotion, transition]);
-    const [width, setWidth] = useState();
+    const sizedValue = useRef(null);
     useEffect(() => {
         const el = numberRefs.current[value];
-        if (!el) {
+        if (!el || sizedValue.current === value) {
             return;
         }
+        sizedValue.current = value;
         const w = getWidthInEm(el);
         // Store the target width immediately, so the section resize can use it.
         if (ref.current) {
             targetWidths.set(ref.current, w);
         }
-        // Trigger the layout animation by causing another render.
-        setWidth(w);
-    }, [value]);
+        if (shouldReduceMotion === true || width.get() === w) {
+            width.jump(w);
+            return;
+        }
+        // A change mid-tween retargets from the width it has reached.
+        animate(width, w, widthTiming(transition));
+    }, [value, shouldReduceMotion, transition, width]);
     const renderNumber = (digit) => (_jsx("span", { ref: (r) => {
             numberRefs.current[digit] = r;
         }, style: { display: "inline-block", padding: `calc(${maskHeight}/2) 0` }, children: digit }, digit));
-    return (_jsx(m.span, { ...rest, "data-state": isPresent ? undefined : "exiting", layout: "position", ref: ref, style: { display: "inline-flex", justifyContent: "center", width }, children: _jsxs("span", { ref: scope, style: {
+    return (_jsx(m.span, { ...rest, "data-state": isPresent ? undefined : "exiting", layout: "position", ref: ref, 
+        // Never shrinks: while the section's width tweens, the glyphs overflow
+        // it at their own widths rather than squeezing.
+        style: {
+            display: "inline-flex",
+            flexShrink: 0,
+            justifyContent: "center",
+            width,
+        }, children: _jsxs("span", { ref: scope, style: {
                 alignItems: "center",
                 display: "inline-flex",
                 flexDirection: "column",

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

@@ -12,11 +12,13 @@ interface NumberSectionProps extends HTMLMotionProps<"span"> {
 }
 /**
  * A run of digits/symbols (pre, integer, fraction, post) sharing one anchor.
- * It holds a fixed measured width so a new glyph is appended at the end before
- * the layout animation begins - making it look like it was already there - then
- * re-measures by momentarily removing exiting children and applying the digits'
- * target widths (the exact resize trick), so reflow accounts for negative
- * margins between glyphs.
+ *
+ * Its real layout width is a Motion value: when the glyphs change it measures
+ * where the width will settle (exiting glyphs removed, digits at their target
+ * widths) and tweens to it on the roll's timing, so nothing laid out around the
+ * number jumps when a digit, separator, prefix or suffix arrives or leaves. In
+ * the meantime the glyphs hold to the section's anchor edge and overflow the
+ * other, which the digit mask clips. Under reduced motion the width snaps.
  */
 export declare const NumberSection: ({ parts, justify, mode, style, name, layoutDependency, trend, ...rest }: NumberSectionProps) => import("react").JSX.Element;
 export {};

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

@@ -1,93 +1,109 @@
 "use client";
-// Port of Motion+ AnimateNumber (motion-plus 2.0.0).
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnimatePresence } from "motion/react";
+import { animate, AnimatePresence, MotionConfigContext, useMotionValue, useReducedMotion, } from "motion/react";
 import * as m from "motion/react-m";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { use, useEffect, useMemo, useRef } from "react";
 import { isDigitPart } from "./format-parts.js";
 import { getWidthInEm } from "./get-width-in-em.js";
 import { NumberDigit } from "./number-digit.js";
 import { NumberSymbol } from "./number-symbol.js";
 import { SectionContext } from "./section-context.js";
-import { targetWidths } from "./target-widths.js";
+import { targetWidths, widthTiming } from "./target-widths.js";
+/**
+ * The section's natural width once the change lands, in `em`: exiting glyphs
+ * removed and each digit at its target width, measured at `max-content` and
+ * then put back as it was, in one synchronous pass so nothing paints between.
+ */
+const measureTargetWidth = (section) => {
+    const undos = [];
+    // A static list: the loop removes children as it goes.
+    for (const child of section.querySelectorAll(":scope > *")) {
+        if (!(child instanceof HTMLElement)) {
+            continue;
+        }
+        if (child.dataset.state === "exiting") {
+            const next = child.nextSibling;
+            child.remove();
+            undos.push(() => {
+                if (next === null) {
+                    section.append(child);
+                }
+                else {
+                    next.before(child);
+                }
+            });
+            continue;
+        }
+        const target = targetWidths.get(child);
+        if (target === undefined) {
+            continue;
+        }
+        const current = child.style.width;
+        child.style.width = target;
+        undos.push(() => {
+            child.style.width = current;
+        });
+    }
+    const held = section.style.width;
+    section.style.width = "max-content";
+    const width = getWidthInEm(section);
+    section.style.width = held;
+    for (let i = undos.length - 1; i >= 0; i -= 1) {
+        undos[i]?.();
+    }
+    return width;
+};
 /**
  * A run of digits/symbols (pre, integer, fraction, post) sharing one anchor.
- * It holds a fixed measured width so a new glyph is appended at the end before
- * the layout animation begins - making it look like it was already there - then
- * re-measures by momentarily removing exiting children and applying the digits'
- * target widths (the exact resize trick), so reflow accounts for negative
- * margins between glyphs.
+ *
+ * Its real layout width is a Motion value: when the glyphs change it measures
+ * where the width will settle (exiting glyphs removed, digits at their target
+ * widths) and tweens to it on the roll's timing, so nothing laid out around the
+ * number jumps when a digit, separator, prefix or suffix arrives or leaves. In
+ * the meantime the glyphs hold to the section's anchor edge and overflow the
+ * other, which the digit mask clips. Under reduced motion the width snaps.
  */
 export const NumberSection = ({ parts, justify = "left", mode, style, name, layoutDependency, trend, ...rest }) => {
     const ref = useRef(null);
     const context = useMemo(() => ({ justify }), [justify]);
-    const measuredRef = useRef(null);
-    // A fixed width for the section so new characters are added at the end
-    // before the layout animation starts (they look like they were there).
-    const [width, setWidth] = useState();
+    const { transition } = use(MotionConfigContext);
+    const shouldReduceMotion = useReducedMotion();
+    // Natural until mounted, then always an `em` length so it can tween.
+    const width = useMotionValue("auto");
     const partsSignature = parts.map((p) => p.value).join("");
-    // On mount, fix the width to the first measured width.
     useEffect(() => {
-        const measured = measuredRef.current;
-        if (measured && ref.current) {
-            ref.current.style.width = getWidthInEm(measured);
+        if (ref.current) {
+            width.set(getWidthInEm(ref.current));
         }
-    }, []);
+        return () => {
+            width.stop();
+        };
+    }, [width]);
     const measuredSignature = useRef(partsSignature);
     useEffect(() => {
-        const measured = measuredRef.current;
-        if (!measured || measuredSignature.current === partsSignature) {
+        const section = ref.current;
+        if (!section || measuredSignature.current === partsSignature) {
             return;
         }
         measuredSignature.current = partsSignature;
-        // Find the new width by removing exiting elements, measuring, then
-        // re-adding them. We query the DOM because AnimatePresence popLayout
-        // overwrites ref props.
-        const undos = [];
-        // Snapshot the children first - we mutate the live collection below.
-        const children = [...measured.children];
-        for (const child of children) {
-            if (!(child instanceof HTMLElement)) {
-                continue;
-            }
-            if (child.dataset.state === "exiting") {
-                const next = child.nextSibling;
-                child.remove();
-                undos.push(() => {
-                    // insertBefore() appends if next is null.
-                    measuredRef.current?.insertBefore(child, next);
-                });
-                continue;
-            }
-            const newWidth = targetWidths.get(child);
-            if (newWidth === undefined) {
-                continue;
-            }
-            const oldWidth = child.style.width;
-            child.style.width = newWidth;
-            undos.push(() => {
-                child.style.width = oldWidth;
-            });
-        }
-        // Measure the resulting width, then undo immediately. This is a
-        // measure-after-render pass (DOM already committed), not a render-phase
-        // adjustment, so the section can hold a fixed width during the animation.
-        setWidth(getWidthInEm(measured));
-        for (let i = undos.length - 1; i >= 0; i -= 1) {
-            undos[i]?.();
+        const target = measureTargetWidth(section);
+        if (shouldReduceMotion === true) {
+            width.jump(target);
+            return;
         }
-    }, [partsSignature]);
-    return (_jsx(SectionContext.Provider, { value: context, children: _jsx(m.span, { layoutDependency: layoutDependency, ...rest, className: `number-section-${name}`, ref: ref, style: {
+        // A change mid-tween retargets from the width it has reached. Not stopped
+        // when the effect re-runs: a fresh transition object from the caller must
+        // not freeze the width part-way.
+        animate(width, target, widthTiming(transition));
+    }, [partsSignature, shouldReduceMotion, transition, width]);
+    return (_jsx(SectionContext.Provider, { value: context, children: _jsxs(m.span, { layoutDependency: layoutDependency, ...rest, className: `number-section-${name}`, ref: ref, style: {
                 ...style,
                 display: "inline-flex",
                 justifyContent: justify,
+                // The containing block for glyphs AnimatePresence pops out of flow.
+                position: "relative",
                 width,
-            }, children: _jsxs("span", { ref: measuredRef, style: {
-                    display: "inline-flex",
-                    justifyContent: "inherit",
-                    position: "relative",
-                }, children: ["\u200B", _jsx(AnimatePresence, { anchorX: justify, initial: false, mode: mode ?? "sync", children: parts.map((part) => isDigitPart(part) ? (_jsx(NumberDigit, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, layoutDependency: layoutDependency, trend: trend, value: part.value }, part.key)) : (_jsx(NumberSymbol, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, layoutDependency: layoutDependency, partKey: part.key, type: part.type, children: part.value }, part.type === "literal"
-                            ? `${part.key}:${part.value}`
-                            : part.key))) })] }) }) }));
+            }, children: ["\u200B", _jsx(AnimatePresence, { anchorX: justify, initial: false, mode: mode ?? "sync", children: parts.map((part) => isDigitPart(part) ? (_jsx(NumberDigit, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, layoutDependency: layoutDependency, trend: trend, value: part.value }, part.key)) : (_jsx(NumberSymbol, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, layoutDependency: layoutDependency, partKey: part.key, type: part.type, children: part.value }, part.type === "literal"
+                        ? `${part.key}:${part.value}`
+                        : part.key))) })] }) }));
 };

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

@@ -16,6 +16,8 @@ export const NumberSymbol = ({ partKey: _partKey, type: _type, children, layoutD
     const { justify } = use(SectionContext);
     return (_jsx(m.span, { ...rest, "data-state": isPresent ? undefined : "exiting", layout: "position", layoutDependency: layoutDependency, style: {
             display: "inline-flex",
+            // Holds its width while the section's width tweens past it.
+            flexShrink: 0,
             justifyContent: justify,
             padding: `calc(${maskHeight}/2) 0`,
             position: "relative",

package/dist/components/animated-number/target-widths.d.ts

@@ -1,3 +1,4 @@
+import type { Transition } from "motion/react";
 /**
  * Per-digit target widths, written by {@link NumberDigit} the instant a digit's
  * width changes and read by {@link NumberSection} when it re-measures its fixed
@@ -5,3 +6,9 @@
  * element.
  */
 export declare const targetWidths: WeakMap<Element, string>;
+/**
+ * The timing for a tweened width: the layout curve when the transition is
+ * keyed per value (the token default), otherwise the transition itself (a
+ * caller's bespoke override), so widths move in step with the roll.
+ */
+export declare const widthTiming: (transition: Transition | undefined) => Transition;

package/dist/components/animated-number/target-widths.js

@@ -1,4 +1,3 @@
-// Port of Motion+ AnimateNumber (motion-plus 2.0.0).
 /**
  * Per-digit target widths, written by {@link NumberDigit} the instant a digit's
  * width changes and read by {@link NumberSection} when it re-measures its fixed
@@ -6,3 +5,16 @@
  * element.
  */
 export const targetWidths = new WeakMap();
+/**
+ * The timing for a tweened width: the layout curve when the transition is
+ * keyed per value (the token default), otherwise the transition itself (a
+ * caller's bespoke override), so widths move in step with the roll.
+ */
+export const widthTiming = (transition) => {
+    if (transition !== undefined &&
+        "layout" in transition &&
+        transition.layout !== undefined) {
+        return transition.layout;
+    }
+    return transition ?? {};
+};

package/dist/components/segmented-control/segmented-control-indicator.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { springs } from "@instruments/materia-ui/tokens/motion";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import * as m from "motion/react-m";
-import { SEGMENTED_INDICATOR_CLASS } from "../segmented/segmented-root.js";
+import { SEGMENTED_INDICATOR_CLASS } from "../../tokens/segmented.js";
 import { useSegmentedControlContext } from "./segmented-control-context.js";
 /**
  * Animated active-segment indicator. A single instance is mounted under the

package/dist/components/segmented-control/segmented-control-item.js

@@ -5,9 +5,9 @@ import { Dot } from "@instruments/materia-ui/components/dot";
 import { Icon } from "@instruments/materia-ui/components/icon";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { getResponsiveSizeOverrides } from "../../tokens/responsive.js";
+import { SEGMENTED_TRIGGER_PADDING } from "../../tokens/segmented.js";
 import { warnMissingAriaLabel } from "../../utils/warn-missing-aria-label.js";
 import { Flex } from "../flex.js";
-import { SEGMENTED_TRIGGER_PADDING } from "../segmented/segmented-root.js";
 import { useSegmentedControlContext } from "./segmented-control-context.js";
 import { SegmentedControlIndicator } from "./segmented-control-indicator.js";
 import { segmentedControlItemVariants } from "./segmented-control-variants.js";

package/dist/components/segmented-control/segmented-control-root.js

@@ -6,8 +6,8 @@ import { ScrollFade } from "@instruments/materia-ui/components/scroll-fade";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { getResponsiveSizeOverrides, resolveResponsiveBase, } from "../../tokens/responsive.js";
+import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, } from "../../tokens/segmented.js";
 import { Flex } from "../flex.js";
-import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, } from "../segmented/segmented-root.js";
 import { SegmentedControlContext } from "./segmented-control-context.js";
 import { useSingleSelection } from "./use-single-selection.js";
 /**

package/dist/components/segmented-control/segmented-control-variants.js

@@ -2,8 +2,8 @@ import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { cva } from "class-variance-authority";
 import { DISABLED } from "../../tokens/input-shell.js";
+import { SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "../../tokens/segmented.js";
 import { typedEntries } from "../../utils/typed-entries.js";
-import { SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "../segmented/segmented-root.js";
 /**
  * Item padding lives in compound variants (mirroring `tabsTriggerVariants`) so a
  * single size dimension drives text (base `size` variant) and padding

package/dist/components/stepper/stepper-item.js

@@ -58,7 +58,11 @@ export const StepperItem = ({ value, label, disabled = false, icon = Check, clas
     const circleSize = state === "completed"
         ? CIRCLE_SIZES[baseSize].completed
         : CIRCLE_SIZES[baseSize].default;
-    return (_jsxs("div", { className: cn("relative", className), "data-slot": "stepper-item", "data-state": state, ...rest, children: [_jsx("div", { className: cn(stepperCircleContainerVariants({ size: baseSize }), getResponsiveSizeOverrides(size, STEPPER_CIRCLE_CONTAINER_SIZE_CLASSES)), children: _jsx(m.button, { "aria-current": state === "current" ? "step" : undefined, "aria-label": label !== undefined && label !== null && label !== ""
+    return (_jsxs("div", { className: cn("group/step relative", className), "data-slot": "stepper-item", "data-state": state, ...rest, children: [_jsx("div", { className: cn(stepperCircleContainerVariants({ size: baseSize }), getResponsiveSizeOverrides(size, STEPPER_CIRCLE_CONTAINER_SIZE_CLASSES)), children: _jsx(m.button, { "aria-current": state === "current" ? "step" : undefined, "aria-label": label !== undefined && label !== null && label !== ""
                         ? `Step: ${label}`
-                        : `Step ${value + 1}`, className: cn(stepperCircleVariants({ size: baseSize, state }), isInteractive && "cursor-pointer", !isInteractive && "cursor-default"), disabled: disabled, layout: true, onClick: handleClick, onKeyDown: handleKeyDown, style: { borderRadius: 9999, height: circleSize, width: circleSize }, transition: springs.standard, type: "button", children: _jsx(m.span, { className: "flex", layout: true, children: _jsx(Icon, { className: stepperIconVariants({ size: baseSize, state }), icon: icon, size: iconSize }) }) }) }), label !== undefined && label !== null && label !== "" && (_jsx("span", { className: cn(stepperLabelVariants({ size: baseSize, state }), getResponsiveSizeOverrides(size, STEPPER_LABEL_SIZE_CLASSES)), children: label }))] }));
+                        : `Step ${value + 1}`, className: cn(stepperCircleVariants({ size: baseSize, state }), isInteractive && "cursor-pointer", !isInteractive && "cursor-default"), disabled: disabled, layout: true, onClick: handleClick, onKeyDown: handleKeyDown, style: { borderRadius: 9999, height: circleSize, width: circleSize }, transition: springs.standard, type: "button", children: _jsx(m.span, { className: "flex", layout: true, children: _jsx(Icon, { className: stepperIconVariants({ size: baseSize, state }), icon: icon, size: iconSize }) }) }) }), label !== undefined && label !== null && label !== "" && (_jsx("span", { className: cn(stepperLabelVariants({
+                    edge: value === 0 ? "start" : "center",
+                    size: baseSize,
+                    state,
+                }), getResponsiveSizeOverrides(size, STEPPER_LABEL_SIZE_CLASSES)), children: label }))] }));
 };

package/dist/components/stepper/stepper-variants.d.ts

@@ -36,6 +36,7 @@ export declare const stepperIconVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Step label variants - absolutely positioned to not affect flex layout */
 export declare const stepperLabelVariants: (props?: ({
+    edge?: "center" | "start" | null | undefined;
     size?: StepperSize | null | undefined;
     state?: "completed" | "current" | "disabled" | "upcoming" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/stepper/stepper-variants.js

@@ -105,12 +105,22 @@ export const stepperIconVariants = cva("transition-colors", {
     },
 });
 /** Step label variants - absolutely positioned to not affect flex layout */
-export const stepperLabelVariants = cva("text-caption absolute left-1/2 -translate-x-1/2 text-center whitespace-nowrap", {
+// Labels centre under their circles, except at the ends: the first starts at
+// its circle's left edge and the last ends at its circle's right edge, so no
+// label hangs outside the stepper's box. The last step is found with CSS
+// (`last-child` of the root, via the item's `group/step`) so it holds on the
+// server render; the first is passed in as `edge`.
+export const stepperLabelVariants = cva("text-caption absolute whitespace-nowrap group-last/step:right-0 group-last/step:left-auto group-last/step:translate-x-0 group-last/step:text-right", {
     defaultVariants: {
+        edge: "center",
         size: "base",
         state: "upcoming",
     },
     variants: {
+        edge: {
+            center: "left-1/2 -translate-x-1/2 text-center",
+            start: "left-0 text-left",
+        },
         size: STEPPER_LABEL_SIZE_CLASSES,
         state: {
             completed: "text-foreground",

package/dist/components/tab-navigation/tab-navigation-link.js

@@ -4,9 +4,9 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { getResponsiveSizeOverrides, resolveResponsiveBase, } from "../../tokens/responsive.js";
+import { SEGMENTED_ICON_SIZE, SEGMENTED_TRIGGER_TEXT, } from "../../tokens/segmented.js";
 import { Flex } from "../flex.js";
 import { Icon } from "../icon.js";
-import { SEGMENTED_ICON_SIZE, SEGMENTED_TRIGGER_TEXT, } from "../segmented/segmented-variants.js";
 import { useTabsContext } from "../tabs/tabs-context.js";
 import { TabsIndicator } from "../tabs/tabs-indicator.js";
 import { DEFAULT_TABS_SIZE, tabsTriggerVariants } from "../tabs/tabs-variants.js";

package/dist/components/tabs/tabs-indicator.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { springs } from "@instruments/materia-ui/tokens/motion";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import * as m from "motion/react-m";
-import { SEGMENTED_INDICATOR_CLASS } from "../segmented/segmented-root.js";
+import { SEGMENTED_INDICATOR_CLASS } from "../../tokens/segmented.js";
 import { useTabsContext } from "../tabs/tabs-context.js";
 const indicatorStyles = {
     line: "absolute inset-x-0 bottom-0 h-0.5 bg-primary dark:bg-gray-100",

package/dist/components/tabs/tabs-trigger.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { getResponsiveSizeOverrides, resolveResponsiveBase, } from "../../tokens/responsive.js";
+import { SEGMENTED_DOT_SIZE, SEGMENTED_ICON_SIZE, SEGMENTED_TRIGGER_TEXT, } from "../../tokens/segmented.js";
 import { Dot } from "../dot.js";
 import { Flex } from "../flex.js";
 import { Icon } from "../icon.js";
-import { SEGMENTED_DOT_SIZE, SEGMENTED_ICON_SIZE, SEGMENTED_TRIGGER_TEXT, } from "../segmented/segmented-variants.js";
 import { useTabsContext } from "../tabs/tabs-context.js";
 import { TabsIndicator } from "../tabs/tabs-indicator.js";
 import { DEFAULT_TABS_SIZE, tabsTriggerVariants } from "../tabs/tabs-variants.js";

package/dist/components/tabs/tabs-variants.js

@@ -2,8 +2,8 @@ import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { cva } from "class-variance-authority";
 import { DISABLED } from "../../tokens/input-shell.js";
+import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "../../tokens/segmented.js";
 import { typedEntries } from "../../utils/typed-entries.js";
-import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "../segmented/segmented-root.js";
 const segmentedShellPaddingVariants = typedEntries(SEGMENTED_SHELL_PADDING).map(([size, className]) => ({
     className,
     size,

package/dist/data/docs-manifest.d.ts

@@ -72,5 +72,5 @@ export interface DocsManifest {
     storybook: DocsStorybookInventory;
 }
 /** The slug of every documented component and composition. */
-export type DocsUnitSlug = "accordion" | "alert" | "alert-dialog" | "anchor" | "animated-number" | "aspect-ratio" | "attribute-card" | "avatar" | "badge" | "border-beam" | "box" | "breadcrumb" | "button" | "button-group" | "calendar" | "card" | "card-grid" | "carousel" | "center" | "chart" | "checkbox" | "checkbox-card" | "checkbox-field" | "code" | "collapsible" | "color-palette" | "color-wheel" | "combobox" | "command" | "container" | "context-menu" | "cookie-banner" | "country-combobox" | "country-select" | "data-grid" | "data-grid-column-filter" | "data-grid-column-header" | "data-grid-column-visibility" | "data-grid-pagination" | "data-grid-table" | "delivery-banner" | "description-list" | "dialog" | "document-list" | "dot" | "dot-matrix-loader" | "drawer" | "dropdown-menu" | "easing-curve" | "editorial-card" | "empty" | "empty-state" | "error-boundary" | "error-state" | "expand-button" | "expandable-text" | "fade-overlay" | "field" | "file-upload" | "flex" | "folder-tile" | "gallery" | "grid" | "group" | "heading" | "hotspot-indicator" | "hover-card" | "icon" | "icon-box" | "icon-card" | "icon-morph" | "identified-surface" | "input" | "input-card" | "input-group" | "input-otp" | "item" | "kbd" | "label" | "loading-state" | "location-input" | "logo" | "marquee-text" | "media-frame" | "mega-menu" | "menu-item" | "menubar" | "mobile-navigation" | "month-year-picker" | "morph-dialog" | "motion-config" | "native-select" | "navigation-menu" | "page-header" | "page-toolbar" | "pagination" | "phone-input" | "pill" | "pixel-loader" | "popover" | "product-card" | "product-specifications-selector" | "progress" | "progress-dots" | "prompt-panel" | "quantity-control" | "quick-view" | "radio" | "radio-card" | "radio-group" | "requirement-item" | "resizable" | "scrim" | "scroll-area" | "scroll-fade" | "scroll-frame" | "search-input" | "section" | "section-header" | "segmented" | "segmented-control" | "select" | "separator" | "settings-card" | "sheet" | "shimmer" | "shine" | "sidebar" | "sidepanel" | "simple-grid" | "site-footer" | "skeleton" | "slider" | "social-icon" | "space" | "spinner" | "stack" | "stagger" | "stepper" | "streaming-text" | "sub-navigation" | "success-tick-ripple" | "swatch" | "swatch-fan" | "swatch-group" | "swatch-selector" | "switch" | "tab-navigation" | "table" | "tabs" | "tag" | "tag-selector" | "text" | "textarea" | "thinking-loader" | "thinking-orb" | "thinking-trace" | "time-slot-picker" | "toast" | "toggle" | "toggle-group" | "tooltip" | "variant-selector" | "verge" | "visually-hidden" | "voice";
+export type DocsUnitSlug = "accordion" | "alert" | "alert-dialog" | "anchor" | "animated-number" | "aspect-ratio" | "attribute-card" | "avatar" | "badge" | "border-beam" | "box" | "breadcrumb" | "button" | "button-group" | "calendar" | "card" | "card-grid" | "carousel" | "center" | "chart" | "checkbox" | "checkbox-card" | "checkbox-field" | "code" | "collapsible" | "color-palette" | "color-wheel" | "combobox" | "command" | "container" | "context-menu" | "cookie-banner" | "country-combobox" | "country-select" | "data-grid" | "data-grid-column-filter" | "data-grid-column-header" | "data-grid-column-visibility" | "data-grid-pagination" | "data-grid-table" | "delivery-banner" | "description-list" | "dialog" | "document-list" | "dot" | "dot-matrix-loader" | "drawer" | "dropdown-menu" | "easing-curve" | "editorial-card" | "empty" | "empty-state" | "error-boundary" | "error-state" | "expand-button" | "expandable-text" | "fade-overlay" | "field" | "file-upload" | "flex" | "folder-tile" | "gallery" | "grid" | "group" | "heading" | "hotspot-indicator" | "hover-card" | "icon" | "icon-box" | "icon-card" | "icon-morph" | "identified-surface" | "input" | "input-card" | "input-group" | "input-otp" | "item" | "kbd" | "label" | "loading-state" | "location-input" | "logo" | "marquee-text" | "media-frame" | "mega-menu" | "menu-item" | "menubar" | "mobile-navigation" | "month-year-picker" | "morph-dialog" | "motion-config" | "native-select" | "navigation-menu" | "page-header" | "page-toolbar" | "pagination" | "phone-input" | "pill" | "pixel-loader" | "popover" | "product-card" | "product-specifications-selector" | "progress" | "progress-dots" | "prompt-panel" | "quantity-control" | "quick-view" | "radio" | "radio-card" | "radio-group" | "requirement-item" | "resizable" | "scrim" | "scroll-area" | "scroll-fade" | "scroll-frame" | "search-input" | "section" | "section-header" | "segmented-control" | "select" | "separator" | "settings-card" | "sheet" | "shimmer" | "shine" | "sidebar" | "sidepanel" | "simple-grid" | "site-footer" | "skeleton" | "slider" | "social-icon" | "space" | "spinner" | "stack" | "stagger" | "stepper" | "streaming-text" | "sub-navigation" | "success-tick-ripple" | "swatch" | "swatch-fan" | "swatch-group" | "swatch-selector" | "switch" | "tab-navigation" | "table" | "tabs" | "tag" | "tag-selector" | "text" | "textarea" | "thinking-loader" | "thinking-orb" | "thinking-trace" | "time-slot-picker" | "toast" | "toggle" | "toggle-group" | "tooltip" | "variant-selector" | "verge" | "visually-hidden" | "voice";
 export declare const docsManifest: DocsManifest;

package/dist/data/docs-manifest.js

@@ -9393,51 +9393,6 @@ export const docsManifest = {
             uses: [],
             usedBy: [],
         },
-        {
-            slug: "segmented",
-            module: "components/segmented",
-            title: "Segmented",
-            category: "forms",
-            description: "Shared class-name token primitives for the segmented-control visual language.\n\nConsumed by SegmentedControl, Tabs, and TabNavigation so they render an\nidentical shell, padding, gap, and active indicator at any size.\nNot components - these are Tailwind class strings and size→class maps.",
-            exports: [
-                {
-                    name: "SEGMENTED_GAP",
-                    kind: "const",
-                    props: [],
-                },
-                {
-                    name: "SEGMENTED_INDICATOR_ACTIVE_CLASS",
-                    kind: "const",
-                    props: [],
-                },
-                {
-                    name: "SEGMENTED_INDICATOR_CLASS",
-                    kind: "const",
-                    props: [],
-                },
-                {
-                    name: "SEGMENTED_SHELL_BASE",
-                    kind: "const",
-                    props: [],
-                },
-                {
-                    name: "SEGMENTED_SHELL_PADDING",
-                    kind: "const",
-                    props: [],
-                },
-                {
-                    name: "SEGMENTED_TRIGGER_PADDING",
-                    kind: "const",
-                    props: [],
-                },
-            ],
-            bestPractices: [
-                "These are class-name strings and size→class maps, not components - apply them via `className`, never render them as JSX.",
-                'Reuse these tokens to give a custom control the segmented "pill" shell; for actual segmented UIs prefer `SegmentedControl`; `Tabs` and `TabNavigation` consume the same tokens for panel and navigation switching.',
-            ],
-            uses: [],
-            usedBy: ["segmented-control", "tab-navigation", "tabs"],
-        },
         {
             slug: "segmented-control",
             module: "components/segmented-control",
@@ -9542,7 +9497,7 @@ export const docsManifest = {
                 "Switching visible content panels is Tabs; navigating URLs is TabNavigation - SegmentedControl is an input that selects a value or mode.",
                 "Icon-only items must carry an `aria-label`.",
             ],
-            uses: ["dot", "flex", "icon", "scroll-area", "scroll-fade", "segmented"],
+            uses: ["dot", "flex", "icon", "scroll-area", "scroll-fade"],
             usedBy: ["color-palette"],
             anatomy: {
                 children: [
@@ -11941,7 +11896,7 @@ export const docsManifest = {
                 "Use `TabNavigation` when each tab is a route/URL (it renders a `<nav>` of links); for in-page panels that swap without navigating, use `Tabs`.",
                 'It shares the Tabs look via context but defaults to `variant="line"`; mark the active link yourself (e.g. router `aria-current`) - there\'s no Base UI value tracking here.',
             ],
-            uses: ["flex", "icon", "segmented", "tabs"],
+            uses: ["flex", "icon", "tabs"],
             usedBy: [],
             anatomy: {
                 children: [
@@ -12183,7 +12138,7 @@ export const docsManifest = {
                 "Reach for `Tabs` to swap in-page panels via `TabsContent`; when each tab is a route, use `TabNavigation` instead (renders links, no panels).",
                 "Compose `TabsList`/`TabsTrigger`/`TabsContent` - shared `variant`/`size`/`fullWidth` flow through context, so set them on `Tabs`, not each trigger.",
             ],
-            uses: ["dot", "flex", "icon", "scroll-area", "segmented"],
+            uses: ["dot", "flex", "icon", "scroll-area"],
             usedBy: ["tab-navigation"],
             anatomy: {
                 children: [
@@ -23055,7 +23010,7 @@ export const docsManifest = {
     storybook: {
         addons: ["@storybook/addon-docs", "@storybook/react-vite"],
         anatomyFiles: 31,
-        storyFiles: 172,
-        storiesWithPlay: 64,
+        storyFiles: 171,
+        storiesWithPlay: 63,
     },
 };

package/dist/{components/segmented/segmented-variants.d.ts → tokens/segmented.d.ts}

@@ -1,4 +1,15 @@
-import type { ComponentSize } from "../../tokens/size.js";
+/**
+ * The segmented "pill" visual language: shell, padding, gap, trigger text and
+ * active-indicator class strings, with size-to-class maps.
+ *
+ * SegmentedControl, Tabs and TabNavigation all consume these, so they render
+ * an identical shell at any size. They are class strings, not components:
+ * apply them through `className`. For an actual segmented UI, use
+ * `SegmentedControl`.
+ *
+ * @module
+ */
+import type { ComponentSize } from "./size.js";
 /**
  * Shared shell classes for segmented controls (Tabs default, ToggleGroup pill).
  *

package/dist/{components/segmented/segmented-variants.js → tokens/segmented.js}

@@ -1,3 +1,14 @@
+/**
+ * The segmented "pill" visual language: shell, padding, gap, trigger text and
+ * active-indicator class strings, with size-to-class maps.
+ *
+ * SegmentedControl, Tabs and TabNavigation all consume these, so they render
+ * an identical shell at any size. They are class strings, not components:
+ * apply them through `className`. For an actual segmented UI, use
+ * `SegmentedControl`.
+ *
+ * @module
+ */
 /**
  * Shared shell classes for segmented controls (Tabs default, ToggleGroup pill).
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instruments/materia-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Materia design system: React components, tokens and Tailwind v4 styles.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -392,10 +392,6 @@
       "types": "./dist/components/section.d.ts",
       "default": "./dist/components/section.js"
     },
-    "./components/segmented": {
-      "types": "./dist/components/segmented.d.ts",
-      "default": "./dist/components/segmented.js"
-    },
     "./components/segmented-control": {
       "types": "./dist/components/segmented-control.d.ts",
       "default": "./dist/components/segmented-control.js"
@@ -792,6 +788,10 @@
       "types": "./dist/tokens/radius-tokens.d.ts",
       "default": "./dist/tokens/radius-tokens.js"
     },
+    "./tokens/segmented": {
+      "types": "./dist/tokens/segmented.d.ts",
+      "default": "./dist/tokens/segmented.js"
+    },
     "./tokens/shadows": {
       "types": "./dist/tokens/shadows.d.ts",
       "default": "./dist/tokens/shadows.js"

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

@@ -1,12 +0,0 @@
-/**
- * Shared class-name token primitives for the segmented-control visual language.
- *
- * Consumed by SegmentedControl, Tabs, and TabNavigation so they render an
- * identical shell, padding, gap, and active indicator at any size.
- * Not components - these are Tailwind class strings and size→class maps.
- *
- * @bestPractice These are class-name strings and size→class maps, not components - apply them via `className`, never render them as JSX.
- * @bestPractice Reuse these tokens to give a custom control the segmented "pill" shell; for actual segmented UIs prefer `SegmentedControl`; `Tabs` and `TabNavigation` consume the same tokens for panel and navigation switching.
- * @category forms
- */
-export { SEGMENTED_GAP, SEGMENTED_INDICATOR_ACTIVE_CLASS, SEGMENTED_INDICATOR_CLASS, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "./segmented-variants.js";

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

@@ -1,12 +0,0 @@
-/**
- * Shared class-name token primitives for the segmented-control visual language.
- *
- * Consumed by SegmentedControl, Tabs, and TabNavigation so they render an
- * identical shell, padding, gap, and active indicator at any size.
- * Not components - these are Tailwind class strings and size→class maps.
- *
- * @bestPractice These are class-name strings and size→class maps, not components - apply them via `className`, never render them as JSX.
- * @bestPractice Reuse these tokens to give a custom control the segmented "pill" shell; for actual segmented UIs prefer `SegmentedControl`; `Tabs` and `TabNavigation` consume the same tokens for panel and navigation switching.
- * @category forms
- */
-export { SEGMENTED_GAP, SEGMENTED_INDICATOR_ACTIVE_CLASS, SEGMENTED_INDICATOR_CLASS, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "./segmented-variants.js";

package/dist/components/segmented.d.ts

@@ -1 +0,0 @@
-export { SEGMENTED_GAP, SEGMENTED_INDICATOR_ACTIVE_CLASS, SEGMENTED_INDICATOR_CLASS, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, } from "./segmented/segmented-variants.js";

package/dist/components/segmented.js

@@ -1 +0,0 @@
-export { SEGMENTED_GAP, SEGMENTED_INDICATOR_ACTIVE_CLASS, SEGMENTED_INDICATOR_CLASS, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, } from "./segmented/segmented-variants.js";