@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/motion/arc-swap.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Swap presets adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli, MIT License.
+ * The full license text ships in THIRD_PARTY_NOTICES.md. Internal: shared by the Arc-derived buttons to swap icons
+ * and labels in place.
+ */
+import type { TargetAndTransition, Transition } from "motion/react";
+/** Resting pose every swapped element settles into. */
+export declare const ARC_SWAP_REST: TargetAndTransition;
+/** Outgoing elements leave faster than incoming ones arrive. */
+export declare const ARC_SWAP_EXIT_TRANSITION: Transition;
+/** An incoming icon grows out of a slight blur. */
+export declare const ARC_ICON_ENTER: TargetAndTransition;
+/** An outgoing icon shrinks back into the same blur. */
+export declare const ARC_ICON_EXIT: TargetAndTransition;
+/** Scale rides the spring; opacity and blur tween so blur never overshoots below zero. */
+export declare const ARC_ICON_TRANSITION: Transition;
+/** With reduced motion, every swap is an instant fade. */
+export declare const ARC_REDUCED_TRANSITION: Transition;
+/** Reduced-motion entrance: the resting pose, only faded out. */
+export declare const ARC_REDUCED_ENTER: TargetAndTransition;
+/** Reduced-motion exit: an instant fade. */
+export declare const ARC_REDUCED_EXIT: TargetAndTransition;

package/dist/motion/arc-swap.js

@@ -0,0 +1,49 @@
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_SNAPPY } from "./arc-tokens.js";
+/** Resting pose every swapped element settles into. */
+export const ARC_SWAP_REST = {
+	opacity: 1,
+	x: 0,
+	y: 0,
+	scale: 1,
+	filter: "blur(0px)"
+};
+/** Outgoing elements leave faster than incoming ones arrive. */
+export const ARC_SWAP_EXIT_TRANSITION = {
+	duration: ARC_DURATION.fast,
+	ease: [...ARC_EASE.standard]
+};
+/** An incoming icon grows out of a slight blur. */
+export const ARC_ICON_ENTER = {
+	opacity: 0,
+	scale: .6,
+	filter: `blur(${ARC_BLUR.subtle}px)`
+};
+/** An outgoing icon shrinks back into the same blur. */
+export const ARC_ICON_EXIT = {
+	...ARC_ICON_ENTER,
+	transition: ARC_SWAP_EXIT_TRANSITION
+};
+/** Scale rides the spring; opacity and blur tween so blur never overshoots below zero. */
+export const ARC_ICON_TRANSITION = {
+	...ARC_SPRING_SNAPPY,
+	opacity: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	},
+	filter: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	}
+};
+/** With reduced motion, every swap is an instant fade. */
+export const ARC_REDUCED_TRANSITION = { duration: ARC_DURATION.instant };
+/** Reduced-motion entrance: the resting pose, only faded out. */
+export const ARC_REDUCED_ENTER = {
+	...ARC_SWAP_REST,
+	opacity: 0
+};
+/** Reduced-motion exit: an instant fade. */
+export const ARC_REDUCED_EXIT = {
+	opacity: 0,
+	transition: ARC_REDUCED_TRANSITION
+};

package/dist/motion/arc-tokens.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Motion presets adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli, MIT License.
+ * The full license text ships in THIRD_PARTY_NOTICES.md. Internal: only Arc-derived components use these.
+ */
+/** Durations in seconds, from an instant color answer to a considered layout change. */
+export declare const ARC_DURATION: {
+    readonly instant: 0.12;
+    readonly fast: 0.16;
+    readonly exit: 0.18;
+    readonly standard: 0.24;
+    readonly considered: 0.48;
+};
+/** Cubic-bezier curves: entrances, exits, color or opacity tweens, and moves of elements already on screen. */
+export declare const ARC_EASE: {
+    readonly enter: readonly [0.16, 1, 0.3, 1];
+    readonly exit: readonly [0.7, 0, 0.84, 0];
+    readonly standard: readonly [0.22, 1, 0.36, 1];
+    readonly inOut: readonly [0.65, 0, 0.35, 1];
+};
+/** Presses, toggles and small indicators: settles fast with a hint of life. */
+export declare const ARC_SPRING_SNAPPY: {
+    readonly type: "spring";
+    readonly visualDuration: 0.26;
+    readonly bounce: 0.12;
+};
+/** Panels, height changes and layout shifts: critically damped, never overshoots. */
+export declare const ARC_SPRING_SMOOTH: {
+    readonly type: "spring";
+    readonly visualDuration: 0.4;
+    readonly bounce: 0;
+};
+/** Shape morphs and width changes that follow new content. */
+export declare const ARC_SPRING_MORPH: {
+    readonly type: "spring";
+    readonly visualDuration: 0.42;
+    readonly bounce: 0.16;
+};
+/** Arc's CSS spring (`--ease-spring` over `--duration-spring`) as a Motion spring: a gentle overshoot that settles. */
+export declare const ARC_SPRING_CSS: {
+    readonly type: "spring";
+    readonly visualDuration: 0.34;
+    readonly bounce: 0.15;
+};
+/** Stagger steps in seconds; keep a whole staggered entrance under roughly 0.4s. */
+export declare const ARC_STAGGER: {
+    readonly char: 0.016;
+    readonly item: 0.035;
+};
+/** Blur radii in pixels for brief content crossfades. */
+export declare const ARC_BLUR: {
+    readonly subtle: 2;
+    readonly soft: 4;
+};

package/dist/motion/arc-tokens.js

@@ -0,0 +1,73 @@
+/**
+* Motion presets adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli, MIT License.
+* The full license text ships in THIRD_PARTY_NOTICES.md. Internal: only Arc-derived components use these.
+*/
+/** Durations in seconds, from an instant color answer to a considered layout change. */
+export const ARC_DURATION = {
+	instant: .12,
+	fast: .16,
+	exit: .18,
+	standard: .24,
+	considered: .48
+};
+/** Cubic-bezier curves: entrances, exits, color or opacity tweens, and moves of elements already on screen. */
+export const ARC_EASE = {
+	enter: [
+		.16,
+		1,
+		.3,
+		1
+	],
+	exit: [
+		.7,
+		0,
+		.84,
+		0
+	],
+	standard: [
+		.22,
+		1,
+		.36,
+		1
+	],
+	inOut: [
+		.65,
+		0,
+		.35,
+		1
+	]
+};
+/** Presses, toggles and small indicators: settles fast with a hint of life. */
+export const ARC_SPRING_SNAPPY = {
+	type: "spring",
+	visualDuration: .26,
+	bounce: .12
+};
+/** Panels, height changes and layout shifts: critically damped, never overshoots. */
+export const ARC_SPRING_SMOOTH = {
+	type: "spring",
+	visualDuration: .4,
+	bounce: 0
+};
+/** Shape morphs and width changes that follow new content. */
+export const ARC_SPRING_MORPH = {
+	type: "spring",
+	visualDuration: .42,
+	bounce: .16
+};
+/** Arc's CSS spring (`--ease-spring` over `--duration-spring`) as a Motion spring: a gentle overshoot that settles. */
+export const ARC_SPRING_CSS = {
+	type: "spring",
+	visualDuration: .34,
+	bounce: .15
+};
+/** Stagger steps in seconds; keep a whole staggered entrance under roughly 0.4s. */
+export const ARC_STAGGER = {
+	char: .016,
+	item: .035
+};
+/** Blur radii in pixels for brief content crossfades. */
+export const ARC_BLUR = {
+	subtle: 2,
+	soft: 4
+};

package/dist/motion/glide-indicator.d.ts

@@ -0,0 +1,69 @@
+import { ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "./arc-tokens.js";
+/** Which part of the active item carries the highlight that must travel. */
+type GlideSurface = "background" | "after";
+/** Describes the items of one container and how their active state is exposed. */
+export interface GlidePreset {
+    itemSelector: string;
+    /**
+     * Matches the container and any nested container of the same kind, so items that belong to a
+     * nested one (a submenu rendered inside its parent menu) are left to that container's glide.
+     */
+    containerSelector: string;
+    /** Attributes whose mutations can change which item is active. */
+    attributes: string[];
+    isActive: (item: Element) => boolean;
+    surface: (container: HTMLElement) => GlideSurface;
+    spring: typeof ARC_SPRING_MORPH | typeof ARC_SPRING_SNAPPY;
+    /**
+     * Arc's menu highlight glides between items for the pointer and jumps instantly for the
+     * keyboard, so a held arrow key never trails behind the focus.
+     */
+    instantOnKeyboard?: boolean;
+}
+export declare const GLIDE_PRESETS: {
+    tabs: {
+        itemSelector: string;
+        containerSelector: string;
+        attributes: string[];
+        isActive: (item: Element) => boolean;
+        surface: () => "background";
+        spring: {
+            readonly type: "spring";
+            readonly visualDuration: 0.42;
+            readonly bounce: 0.16;
+        };
+    };
+    pagination: {
+        itemSelector: string;
+        containerSelector: string;
+        attributes: string[];
+        isActive: (item: Element) => boolean;
+        surface: () => "background";
+        spring: {
+            readonly type: "spring";
+            readonly visualDuration: 0.42;
+            readonly bounce: 0.16;
+        };
+    };
+    menu: {
+        itemSelector: string;
+        containerSelector: string;
+        attributes: string[];
+        isActive: (item: Element) => boolean;
+        surface: () => "background";
+        spring: {
+            readonly type: "spring";
+            readonly visualDuration: 0.26;
+            readonly bounce: 0.12;
+        };
+        instantOnKeyboard: true;
+    };
+};
+export type GlidePresetName = keyof typeof GLIDE_PRESETS;
+/** Marks the item whose own highlight is hidden while the travelling copy stands in for it. */
+export declare const GLIDE_TARGET_ATTRIBUTE = "data-glide-target";
+/** Marks items whose transitions, including pseudo-element ones, are suspended during a glide. */
+export declare const GLIDE_FREEZE_ATTRIBUTE = "data-glide-freeze";
+/** Observes the container and glides the highlight whenever the active item changes. */
+export declare function attachGlideIndicator(container: HTMLElement, preset: GlidePreset): () => void;
+export {};

package/dist/motion/glide-indicator.js

@@ -0,0 +1,309 @@
+/**
+* Glides an active-item indicator between items of a container, like a shared `layoutId`,
+* without adding persistent markup: a transient copy of the target's highlight travels from the
+* previous item and is removed once it lands, leaving the item's own styles in charge again.
+*/
+import { animate } from "motion/react";
+import { GLIDE_CONTINUITY_MS } from "./tokens.js";
+import { ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "./arc-tokens.js";
+export const GLIDE_PRESETS = {
+	tabs: {
+		itemSelector: "[data-slot=\"tabs-trigger\"]",
+		containerSelector: "[role=\"tablist\"]",
+		attributes: ["data-state"],
+		isActive: (item) => item.getAttribute("data-state") === "active",
+		surface: () => "background",
+		// Arc glides the tab highlight and the current page mark with its morph spring.
+		spring: ARC_SPRING_MORPH
+	},
+	pagination: {
+		itemSelector: "[data-slot=\"pagination-link\"]",
+		containerSelector: "[data-slot=\"pagination-content\"]",
+		attributes: ["aria-current"],
+		isActive: (item) => item.getAttribute("aria-current") === "page",
+		surface: () => "background",
+		spring: ARC_SPRING_MORPH
+	},
+	menu: {
+		itemSelector: "[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]",
+		containerSelector: "[role=\"menu\"]",
+		attributes: ["data-highlighted"],
+		isActive: (item) => item.hasAttribute("data-highlighted"),
+		surface: () => "background",
+		spring: ARC_SPRING_SNAPPY,
+		instantOnKeyboard: true
+	}
+};
+/** Marks the item whose own highlight is hidden while the travelling copy stands in for it. */
+export const GLIDE_TARGET_ATTRIBUTE = "data-glide-target";
+/** Marks items whose transitions, including pseudo-element ones, are suspended during a glide. */
+export const GLIDE_FREEZE_ATTRIBUTE = "data-glide-freeze";
+/** Laid-out size of the border box, unaffected by any transform on the element or its ancestors. */
+function layoutSize(element) {
+	const style = getComputedStyle(element);
+	const width = Number.parseFloat(style.width);
+	const height = Number.parseFloat(style.height);
+	if (!Number.isFinite(width) || !Number.isFinite(height)) {
+		return {
+			width: element.offsetWidth,
+			height: element.offsetHeight
+		};
+	}
+	if (style.boxSizing === "border-box") return {
+		width,
+		height
+	};
+	const sum = (...values) => values.reduce((total, value) => total + (Number.parseFloat(value) || 0), 0);
+	return {
+		width: width + sum(style.paddingLeft, style.paddingRight, style.borderLeftWidth, style.borderRightWidth),
+		height: height + sum(style.paddingTop, style.paddingBottom, style.borderTopWidth, style.borderBottomWidth)
+	};
+}
+/**
+* Converts a viewport rectangle into the container's own scrolling coordinate space. A container
+* still scaling in (a menu or listbox entrance) paints everything inside it smaller, so painted
+* distances are divided by that scale to land where absolute positioning places the copy.
+*/
+function toContainerBox(container, rect) {
+	const origin = container.getBoundingClientRect();
+	const layout = layoutSize(container);
+	const scaleX = layout.width > 0 && origin.width > 0 ? origin.width / layout.width : 1;
+	const scaleY = layout.height > 0 && origin.height > 0 ? origin.height / layout.height : 1;
+	return {
+		left: (rect.left - origin.left) / scaleX - container.clientLeft + container.scrollLeft,
+		top: (rect.top - origin.top) / scaleY - container.clientTop + container.scrollTop,
+		width: rect.width / scaleX,
+		height: rect.height / scaleY
+	};
+}
+/** Scale and translation an item's own running entrance adds, read from its computed `matrix()`. */
+function inFlightTransform(item) {
+	const style = getComputedStyle(item);
+	const values = /^matrix\(([^)]+)\)$/.exec(style.transform);
+	const [originX = 0, originY = 0] = style.transformOrigin.split(" ").map(Number.parseFloat);
+	if (!values) return {
+		scaleX: 1,
+		scaleY: 1,
+		x: 0,
+		y: 0,
+		originX,
+		originY
+	};
+	const parts = values[1].split(",").map(Number.parseFloat);
+	return {
+		scaleX: parts[0] || 1,
+		scaleY: parts[3] || 1,
+		x: parts[4] ?? 0,
+		y: parts[5] ?? 0,
+		originX,
+		originY
+	};
+}
+/**
+* Measures the highlight in the container's coordinates: the item box, or its positioned `::after`
+* bar for line variants. An item still entering (Select options settle from a slight scale) is
+* measured where it will rest, so the highlight neither lands undersized nor jumps when it ends.
+*/
+function highlightBox(container, item, surface) {
+	const painted = toContainerBox(container, item.getBoundingClientRect());
+	const motion = inFlightTransform(item);
+	// The entrance scales around the transform origin, so the resting corner sits that far back.
+	const rect = {
+		left: painted.left - motion.x - motion.originX * (1 - motion.scaleX),
+		top: painted.top - motion.y - motion.originY * (1 - motion.scaleY),
+		width: painted.width / motion.scaleX,
+		height: painted.height / motion.scaleY
+	};
+	if (surface === "background") return rect;
+	const pseudo = getComputedStyle(item, "::after");
+	return {
+		left: rect.left + item.clientLeft + (parseFloat(pseudo.left) || 0),
+		top: rect.top + item.clientTop + (parseFloat(pseudo.top) || 0),
+		width: parseFloat(pseudo.width) || rect.width,
+		height: parseFloat(pseudo.height) || 0
+	};
+}
+/** Copies only the paint that identifies the highlight, never layout or content. */
+function highlightPaint(item, surface) {
+	const style = getComputedStyle(item, surface === "after" ? "::after" : null);
+	return {
+		backgroundColor: style.backgroundColor,
+		borderRadius: style.borderRadius,
+		boxShadow: style.boxShadow,
+		borderStyle: style.borderStyle,
+		borderWidth: style.borderWidth,
+		borderColor: style.borderColor,
+		boxSizing: "border-box"
+	};
+}
+/** Tracks overlapping freezes so the caller-owned inline transition is restored exactly once. */
+const frozenItems = new WeakMap();
+/**
+* Suppresses CSS transitions for one item, so state changes paint instantly; the returned
+* release restores them after two painted frames. Overlapping freezes are reference-counted.
+*/
+function freezeTransitions(item) {
+	const frozen = frozenItems.get(item) ?? {
+		transition: item.style.transition,
+		holds: 0
+	};
+	frozen.holds += 1;
+	frozenItems.set(item, frozen);
+	item.style.transition = "none";
+	item.setAttribute(GLIDE_FREEZE_ATTRIBUTE, "");
+	let released = false;
+	return () => {
+		if (released) return;
+		released = true;
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				frozen.holds -= 1;
+				if (frozen.holds > 0) return;
+				frozenItems.delete(item);
+				item.style.transition = frozen.transition;
+				item.removeAttribute(GLIDE_FREEZE_ATTRIBUTE);
+			});
+		});
+	};
+}
+/** Observes the container and glides the highlight whenever the active item changes. */
+export function attachGlideIndicator(container, preset) {
+	const items = () => Array.from(container.querySelectorAll(preset.itemSelector)).filter((item) => item.parentElement?.closest(preset.containerSelector) === container);
+	let lastActive = items().find(preset.isActive) ?? null;
+	let lastActiveSeenAt = Number.NEGATIVE_INFINITY;
+	let overlay = null;
+	let animation = null;
+	let releaseTarget = null;
+	const containerStyle = {
+		position: container.style.position,
+		isolation: container.style.isolation
+	};
+	// The last input decides whether a highlight change was driven by the pointer or the keyboard.
+	// Keyboard focus may live outside the container (a combobox input), so both are read from the
+	// document; the pointer only counts while it moves over this container.
+	let isPointerDriven = false;
+	const onPointerMove = () => {
+		isPointerDriven = true;
+	};
+	const onKeyDown = () => {
+		isPointerDriven = false;
+	};
+	if (preset.instantOnKeyboard) {
+		container.addEventListener("pointermove", onPointerMove);
+		container.ownerDocument.addEventListener("keydown", onKeyDown, true);
+	}
+	/** Puts the item's own highlight back and removes the travelling copy. */
+	function settle() {
+		animation?.cancel();
+		animation = null;
+		overlay?.remove();
+		overlay = null;
+		releaseTarget?.();
+		releaseTarget = null;
+		container.style.position = containerStyle.position;
+		container.style.isolation = containerStyle.isolation;
+	}
+	/** Hides the frozen target's highlight so the copy is the only one visible. */
+	function hideTarget(item, surface, thaw) {
+		item.setAttribute(GLIDE_TARGET_ATTRIBUTE, "");
+		const inline = {
+			backgroundColor: item.style.getPropertyValue("background-color"),
+			backgroundPriority: item.style.getPropertyPriority("background-color"),
+			boxShadow: item.style.getPropertyValue("box-shadow"),
+			boxShadowPriority: item.style.getPropertyPriority("box-shadow"),
+			borderColor: item.style.getPropertyValue("border-color"),
+			borderPriority: item.style.getPropertyPriority("border-color")
+		};
+		if (surface === "background") {
+			item.style.setProperty("background-color", "transparent", "important");
+			item.style.setProperty("box-shadow", "none", "important");
+			item.style.setProperty("border-color", "transparent", "important");
+		}
+		return () => {
+			item.style.setProperty("background-color", inline.backgroundColor, inline.backgroundPriority);
+			item.style.setProperty("box-shadow", inline.boxShadow, inline.boxShadowPriority);
+			item.style.setProperty("border-color", inline.borderColor, inline.borderPriority);
+			// Transitions stay frozen until the restored highlight has painted in place.
+			item.removeAttribute(GLIDE_TARGET_ATTRIBUTE);
+			thaw();
+		};
+	}
+	/** Starts, or redirects, the glide from the previous highlight to the new active item. */
+	function glide(from, to) {
+		const surface = preset.surface(container);
+		const start = overlay ? toContainerBox(container, overlay.getBoundingClientRect()) : highlightBox(container, from, surface);
+		settle();
+		// The previous item drops its highlight instantly: the copy is what leaves it.
+		freezeTransitions(from)();
+		// Read the target's settled paint before any transition has a chance to start.
+		const thawTarget = freezeTransitions(to);
+		const destination = highlightBox(container, to, surface);
+		const paint = highlightPaint(to, surface);
+		if (destination.width === 0 || destination.height === 0) {
+			thawTarget();
+			return;
+		}
+		if (getComputedStyle(container).position === "static") {
+			container.style.position = "relative";
+		}
+		// Negative z-index keeps the copy above the container background and below item content.
+		container.style.isolation = "isolate";
+		overlay = document.createElement("span");
+		overlay.setAttribute("aria-hidden", "true");
+		overlay.setAttribute("data-glide-indicator", "");
+		Object.assign(overlay.style, paint, {
+			position: "absolute",
+			pointerEvents: "none",
+			zIndex: "-1",
+			margin: "0"
+		});
+		container.prepend(overlay);
+		releaseTarget = hideTarget(to, surface, thawTarget);
+		animation = animate(overlay, {
+			left: [`${start.left}px`, `${destination.left}px`],
+			top: [`${start.top}px`, `${destination.top}px`],
+			width: [`${start.width}px`, `${destination.width}px`],
+			height: [`${start.height}px`, `${destination.height}px`]
+		}, preset.spring);
+		const current = animation;
+		void current.then(() => {
+			if (animation === current) settle();
+		});
+	}
+	const observer = new MutationObserver(() => {
+		// Items can be remounted (a button wrapped in a tooltip trigger after hydration); the
+		// highlight then belongs to the item that replaced the detached one.
+		if (lastActive && !lastActive.isConnected) {
+			lastActive = items().find(preset.isActive) ?? null;
+			lastActiveSeenAt = Number.NEGATIVE_INFINITY;
+		}
+		const active = items().find(preset.isActive) ?? null;
+		const now = performance.now();
+		if (active && active === lastActive) return;
+		if (!active) {
+			if (lastActive && lastActiveSeenAt === Number.NEGATIVE_INFINITY) {
+				lastActiveSeenAt = now;
+			}
+			settle();
+			return;
+		}
+		const previous = lastActive;
+		const isContinuous = previous !== null && previous !== active && previous.isConnected && !preset.isActive(previous) && (lastActiveSeenAt === Number.NEGATIVE_INFINITY || now - lastActiveSeenAt <= GLIDE_CONTINUITY_MS);
+		lastActive = active;
+		lastActiveSeenAt = Number.NEGATIVE_INFINITY;
+		if (isContinuous && !(preset.instantOnKeyboard && !isPointerDriven)) glide(previous, active);
+		else settle();
+	});
+	observer.observe(container, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		attributeFilter: preset.attributes
+	});
+	return () => {
+		observer.disconnect();
+		container.removeEventListener("pointermove", onPointerMove);
+		container.ownerDocument.removeEventListener("keydown", onKeyDown, true);
+		settle();
+	};
+}

package/dist/motion/glide-slot.d.ts

@@ -0,0 +1,9 @@
+/** Adds a gliding active-item indicator to the original container, without DOM wrappers. */
+import { type ComponentProps, type ReactElement } from "react";
+import { Slot } from "radix-ui";
+import { type GlidePresetName } from "./glide-indicator.js";
+/** Composes refs through Radix Slot and glides the preset's highlight between its items. */
+export declare function GlideSlot({ children, preset, ref, ...props }: Omit<ComponentProps<typeof Slot.Root>, "children"> & {
+    children: ReactElement;
+    preset: GlidePresetName;
+}): import("react").JSX.Element;

package/dist/motion/glide-slot.js

@@ -0,0 +1,71 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Adds a gliding active-item indicator to the original container, without DOM wrappers. */
+import { useLayoutEffect } from "react";
+import { Slot } from "radix-ui";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { attachGlideIndicator, GLIDE_PRESETS } from "./glide-indicator.js";
+import { useAttachedElement } from "./use-attached-element.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Composes refs through Radix Slot and glides the preset's highlight between its items. */
+export function GlideSlot(t0) {
+	const $ = _c(14);
+	let children;
+	let preset;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({children, preset, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = preset;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		children = $[1];
+		preset = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	const [element, attach] = useAttachedElement(ref);
+	const reduceMotion = usePrefersReducedMotion();
+	let t1;
+	let t2;
+	if ($[5] !== element || $[6] !== preset || $[7] !== reduceMotion) {
+		t1 = () => {
+			if (!element || reduceMotion) {
+				return;
+			}
+			return attachGlideIndicator(element, GLIDE_PRESETS[preset]);
+		};
+		t2 = [
+			element,
+			preset,
+			reduceMotion
+		];
+		$[5] = element;
+		$[6] = preset;
+		$[7] = reduceMotion;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		t1 = $[8];
+		t2 = $[9];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	if ($[10] !== attach || $[11] !== children || $[12] !== props) {
+		t3 = /* @__PURE__ */ _jsx(Slot.Root, {
+			...props,
+			ref: attach,
+			children
+		});
+		$[10] = attach;
+		$[11] = children;
+		$[12] = props;
+		$[13] = t3;
+	} else {
+		t3 = $[13];
+	}
+	return t3;
+}

package/dist/motion/motion-slot.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Animates the original primitive node with Motion, without adding DOM wrappers. Every kind plays Arc's motion
+ * (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) for the component it serves.
+ */
+import { type ReactElement, type ComponentProps } from "react";
+import { Slot } from "radix-ui";
+import { type MotionKind } from "./tokens.js";
+/** Composes refs through Radix Slot and delegates entry, exit and state playback to Motion. */
+export declare function MotionSlot({ children, kind, ref, ...props }: Omit<ComponentProps<typeof Slot.Root>, "children"> & {
+    children: ReactElement;
+    kind: MotionKind;
+}): import("react").JSX.Element;