@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/motion/motion-slot.js

@@ -0,0 +1,376 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* 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 { useLayoutEffect, useRef } from "react";
+import { Slot } from "radix-ui";
+import { animate, usePresence, frame } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { MOTION_ENTERING_ATTRIBUTE } from "../constants/motion.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE } from "./arc-tokens.js";
+import { SPRING_CHEVRON, SPRING_POP } from "./tokens.js";
+import { surfaceEnter, surfaceExit, withRestingStyle } from "./surface-keyframes.js";
+import { useAttachedElement } from "./use-attached-element.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const EASE_ENTER = [...ARC_EASE.enter];
+const SURFACE_KINDS = [
+	"dialog",
+	"sheet",
+	"overlay"
+];
+/** Inline style properties Motion playback may write; they are restored after playback. */
+const ANIMATED_PROPERTIES = [
+	"opacity",
+	"transform",
+	"filter"
+];
+/** Arc's theme switch grows the incoming icon from .7. */
+const THEME_ICON_ENTER_SCALE = .7;
+/** Arc's chosen-option check sharpens in just after its row: scale .6 and a subtle blur. */
+const ITEM_CHECK_ENTER_SCALE = .6;
+const ITEM_CHECK_DELAY_S = .04;
+/** Arc's helper and error rows rise into place by a third of a line while they sharpen. */
+const MESSAGE_RISE = "0.35em";
+/** Reads a computed `matrix()` or `matrix3d()` transform as its 2D components. */
+function matrixOf(transform) {
+	const values = /^matrix(3d)?\(([^)]+)\)$/.exec(transform);
+	if (!values) return {
+		a: 1,
+		b: 0
+	};
+	const parts = values[2].split(",").map(parseFloat);
+	return {
+		a: parts[0] ?? 1,
+		b: parts[1] ?? 0
+	};
+}
+/** Extracts the rotation, in degrees, of a computed transform. */
+function rotationOf(transform) {
+	const { a, b } = matrixOf(transform);
+	return Math.atan2(b, a) * 180 / Math.PI;
+}
+/** Composes refs through Radix Slot and delegates entry, exit and state playback to Motion. */
+export function MotionSlot(t0) {
+	const $ = _c(20);
+	let children;
+	let kind;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({children, kind, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = kind;
+		$[3] = props;
+		$[4] = ref;
+	} else {
+		children = $[1];
+		kind = $[2];
+		props = $[3];
+		ref = $[4];
+	}
+	const [element, attach] = useAttachedElement(ref);
+	const reduceMotion = usePrefersReducedMotion();
+	const [isPresent, safeToRemove] = usePresence();
+	const safeToRemoveRef = useRef(safeToRemove);
+	let t1;
+	if ($[5] !== safeToRemove) {
+		t1 = () => {
+			safeToRemoveRef.current = safeToRemove;
+		};
+		$[5] = safeToRemove;
+		$[6] = t1;
+	} else {
+		t1 = $[6];
+	}
+	useLayoutEffect(t1);
+	const interruptedRef = useRef(null);
+	let t2;
+	let t3;
+	if ($[7] !== element || $[8] !== isPresent || $[9] !== kind || $[10] !== reduceMotion) {
+		t2 = () => {
+			let active = true;
+			const safeToRemove_0 = () => safeToRemoveRef.current?.();
+			if (!element || !element.isConnected) {
+				if (!isPresent) {
+					queueMicrotask(() => {
+						if (active) {
+							safeToRemove_0();
+						}
+					});
+				}
+				return () => {
+					active = false;
+				};
+			}
+			const animations = new Map();
+			const cleanups = [];
+			const original = {
+				opacity: element.style.opacity,
+				transform: element.style.transform,
+				filter: element.style.filter
+			};
+			const restore = function restore(t4) {
+				const properties = t4 === undefined ? ANIMATED_PROPERTIES : t4;
+				properties.forEach((property) => {
+					element.style[property] = original[property];
+				});
+			};
+			const cancel = function cancel(t5) {
+				const properties_0 = t5 === undefined ? ANIMATED_PROPERTIES : t5;
+				animations.forEach((driven, animation) => {
+					if (!driven.some((property_0) => properties_0.includes(property_0))) {
+						return;
+					}
+					animation.cancel();
+					animations.delete(animation);
+				});
+			};
+			const dispose = function dispose() {
+				active = false;
+				if (animations.size) {
+					const computed = getComputedStyle(element);
+					const snapshot = {};
+					new Set([...animations.values()].flat()).forEach((property_1) => {
+						const value = computed[property_1];
+						if (value && value !== "none") {
+							snapshot[property_1] = value;
+						}
+					});
+					interruptedRef.current = {
+						element,
+						values: snapshot
+					};
+				}
+				cleanups.forEach(_temp);
+				cancel();
+				restore();
+				element.removeAttribute(MOTION_ENTERING_ATTRIBUTE);
+			};
+			const interrupted = interruptedRef.current;
+			interruptedRef.current = null;
+			if (reduceMotion) {
+				if (!isPresent) {
+					queueMicrotask(() => {
+						if (active) {
+							safeToRemove_0();
+						}
+					});
+				}
+				return dispose;
+			}
+			const play = function play(keyframes, transition, t6) {
+				const { remove: t7, onSettled } = t6 === undefined ? {} : t6;
+				const remove = t7 === undefined ? false : t7;
+				const properties_1 = ANIMATED_PROPERTIES.filter((property_2) => property_2 in keyframes);
+				const busy = new Set([...animations.values()].flat());
+				properties_1.forEach((property_3) => {
+					if (!busy.has(property_3)) {
+						original[property_3] = element.style[property_3];
+					}
+				});
+				cancel(properties_1);
+				const frames = keyframes;
+				properties_1.forEach((property_4) => {
+					const values = frames[property_4];
+					if (Array.isArray(values) && values.length > 1) {
+						element.style[property_4] = String(values[0]);
+					}
+				});
+				const animation_0 = animate(element, keyframes, transition);
+				animations.set(animation_0, properties_1);
+				animation_0.then(() => {
+					if (!animations.delete(animation_0) || !active) {
+						return;
+					}
+					if (remove) {
+						safeToRemove_0();
+						return;
+					}
+					frame.postRender(() => {
+						if (!active) {
+							return;
+						}
+						const busy_0 = new Set([...animations.values()].flat());
+						restore(ANIMATED_PROPERTIES.filter((property_5) => !busy_0.has(property_5)));
+						onSettled?.();
+					});
+				});
+			};
+			const tween = _temp2;
+			if (SURFACE_KINDS.includes(kind)) {
+				const step = isPresent ? surfaceEnter(element, kind) : surfaceExit(element, kind);
+				const computed_0 = getComputedStyle(element);
+				const keyframes_0 = withRestingStyle(step.keyframes, {
+					transform: computed_0.transform,
+					opacity: Number.parseFloat(computed_0.opacity)
+				});
+				if (interrupted?.element === element) {
+					Object.entries(interrupted.values).forEach((t8) => {
+						const [property_6, value_0] = t8;
+						const frames_0 = keyframes_0[property_6];
+						if (!Array.isArray(frames_0) || !value_0) {
+							return;
+						}
+						const start = property_6 === "opacity" ? Number.parseFloat(value_0) : value_0;
+						keyframes_0[property_6] = [start, ...frames_0.slice(1)];
+					});
+				}
+				if (isPresent) {
+					element.setAttribute(MOTION_ENTERING_ATTRIBUTE, "");
+				}
+				play(keyframes_0, step.transition, {
+					remove: !isPresent,
+					onSettled: () => element.removeAttribute(MOTION_ENTERING_ATTRIBUTE)
+				});
+				return dispose;
+			}
+			if (!isPresent) {
+				queueMicrotask(() => {
+					if (active) {
+						safeToRemove_0();
+					}
+				});
+				return dispose;
+			}
+			if (kind === "icon-swap") {
+				play({
+					opacity: [0, 1],
+					transform: [`scale(${THEME_ICON_ENTER_SCALE})`, "scale(1)"],
+					filter: [`blur(${ARC_BLUR.subtle}px)`, "blur(0px)"]
+				}, {
+					...SPRING_POP,
+					opacity: tween(ARC_DURATION.fast),
+					filter: tween(ARC_DURATION.fast)
+				});
+			} else {
+				if (kind === "item-check") {
+					play({
+						opacity: [0, 1],
+						transform: [`scale(${ITEM_CHECK_ENTER_SCALE})`, "scale(1)"],
+						filter: [`blur(${ARC_BLUR.subtle}px)`, "blur(0px)"]
+					}, {
+						...tween(ARC_DURATION.standard),
+						delay: ITEM_CHECK_DELAY_S
+					});
+				} else {
+					if (kind === "message") {
+						play({
+							opacity: [0, 1],
+							transform: [`translateY(${MESSAGE_RISE})`, "translateY(0px)"],
+							filter: [`blur(${ARC_BLUR.soft}px)`, "blur(0px)"]
+						}, tween(ARC_DURATION.standard));
+					}
+				}
+			}
+			if (kind === "rotate") {
+				const restingAngle = () => parseFloat(getComputedStyle(element).rotate) || 0;
+				let previousAngle = restingAngle();
+				const turn = () => {
+					const inFlight = rotationOf(getComputedStyle(element).transform);
+					cancel(["transform"]);
+					restore(["transform"]);
+					const nextAngle = restingAngle();
+					const delta = previousAngle + inFlight - nextAngle;
+					previousAngle = nextAngle;
+					if (Math.abs(delta) >= 1) {
+						play({ transform: [`rotate(${delta}deg)`, "rotate(0deg)"] }, SPRING_CHEVRON);
+					}
+				};
+				const observer = new MutationObserver(turn);
+				observer.observe(element, {
+					attributes: true,
+					attributeFilter: ["class"]
+				});
+				if (element.parentElement) {
+					observer.observe(element.parentElement, {
+						attributes: true,
+						attributeFilter: [
+							"aria-expanded",
+							"data-state",
+							"class"
+						]
+					});
+				}
+				cleanups.push(() => observer.disconnect());
+			}
+			if (kind === "reveal") {
+				const isLoading = () => element.hasAttribute("data-loading");
+				let wasLoading = isLoading();
+				const observer_0 = new MutationObserver(() => {
+					const loading = isLoading();
+					const loaded = wasLoading && !loading && !element.hasAttribute("data-error");
+					wasLoading = loading;
+					if (!loaded) {
+						return;
+					}
+					play({
+						opacity: [0, 1],
+						filter: [`blur(${ARC_BLUR.soft}px)`, "blur(0px)"]
+					}, tween(ARC_DURATION.standard));
+				});
+				observer_0.observe(element, {
+					attributes: true,
+					attributeFilter: ["data-loading", "data-error"]
+				});
+				cleanups.push(() => observer_0.disconnect());
+			}
+			return dispose;
+		};
+		t3 = [
+			element,
+			kind,
+			reduceMotion,
+			isPresent
+		];
+		$[7] = element;
+		$[8] = isPresent;
+		$[9] = kind;
+		$[10] = reduceMotion;
+		$[11] = t2;
+		$[12] = t3;
+	} else {
+		t2 = $[11];
+		t3 = $[12];
+	}
+	useLayoutEffect(t2, t3);
+	let t4;
+	if ($[13] !== isPresent) {
+		t4 = isPresent ? {} : {
+			inert: true,
+			"aria-hidden": true
+		};
+		$[13] = isPresent;
+		$[14] = t4;
+	} else {
+		t4 = $[14];
+	}
+	let t5;
+	if ($[15] !== attach || $[16] !== children || $[17] !== props || $[18] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(Slot.Root, {
+			...props,
+			ref: attach,
+			...t4,
+			children
+		});
+		$[15] = attach;
+		$[16] = children;
+		$[17] = props;
+		$[18] = t4;
+		$[19] = t5;
+	} else {
+		t5 = $[19];
+	}
+	return t5;
+}
+function _temp2(duration) {
+	return {
+		duration,
+		ease: EASE_ENTER
+	};
+}
+function _temp(cleanup) {
+	return cleanup();
+}

package/dist/motion/overlay-warmth.d.ts

@@ -0,0 +1,24 @@
+/** A subscribable warm flag shared by every instance of one layer family. */
+export interface OverlayWarmth {
+    subscribe: (listener: () => void) => () => void;
+    /** Whether a layer of the family is open, or closed less than the skip window ago. */
+    isWarm: () => boolean;
+    /** Server snapshot: nothing is open while rendering on the server. */
+    isWarmOnServer: () => boolean;
+    /** Marks one more layer as open and returns the call that marks it closed again. */
+    open: () => () => void;
+}
+/**
+ * Creates the warm flag of one layer family.
+ * @param skipWindowMs - Milliseconds the page stays warm after the last layer closes.
+ * @returns The store, meant for `useSyncExternalStore`.
+ */
+export declare function createOverlayWarmth(skipWindowMs: number): OverlayWarmth;
+/**
+ * Remembers whether the page was already warm when a layer opened, so its entrance picks the instant path. It is
+ * captured while rendering the open change, before the layer marks the page warm itself.
+ * @param open - Whether the layer is open.
+ * @param isWarm - The family's current warm flag, read through `useSyncExternalStore`.
+ * @returns Whether the current (or last) opening happened while warm.
+ */
+export declare function useOpenedWhileWarm(open: boolean, isWarm: boolean): boolean;

package/dist/motion/overlay-warmth.js

@@ -0,0 +1,70 @@
+/**
+* Arc's skip window for hover-driven layers (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): while any
+* layer of a family is open, and briefly after the last one closes, the page is warm and the next layer opens
+* without waiting and only fades. Each family (tooltips, hover cards) keeps its own store.
+*/
+import { useState } from "react";
+/**
+* Creates the warm flag of one layer family.
+* @param skipWindowMs - Milliseconds the page stays warm after the last layer closes.
+* @returns The store, meant for `useSyncExternalStore`.
+*/
+export function createOverlayWarmth(skipWindowMs) {
+	let warm = false;
+	let openCount = 0;
+	/** When the last layer closed, so the window also expires when its timer never runs (a frozen test clock). */
+	let closedAt = 0;
+	let coolTimer;
+	const listeners = new Set();
+	const notify = () => listeners.forEach((listener) => listener());
+	return {
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		isWarm() {
+			if (warm && !openCount && Date.now() - closedAt >= skipWindowMs) warm = false;
+			return warm;
+		},
+		isWarmOnServer: () => false,
+		open() {
+			openCount += 1;
+			clearTimeout(coolTimer);
+			if (!warm) {
+				warm = true;
+				notify();
+			}
+			let closed = false;
+			return () => {
+				if (closed) return;
+				closed = true;
+				openCount = Math.max(0, openCount - 1);
+				if (openCount) return;
+				clearTimeout(coolTimer);
+				closedAt = Date.now();
+				coolTimer = setTimeout(() => {
+					warm = false;
+					notify();
+				}, skipWindowMs);
+			};
+		}
+	};
+}
+/**
+* Remembers whether the page was already warm when a layer opened, so its entrance picks the instant path. It is
+* captured while rendering the open change, before the layer marks the page warm itself.
+* @param open - Whether the layer is open.
+* @param isWarm - The family's current warm flag, read through `useSyncExternalStore`.
+* @returns Whether the current (or last) opening happened while warm.
+*/
+export function useOpenedWhileWarm(open, isWarm) {
+	const [wasOpen, setWasOpen] = useState(open);
+	const [openedWhileWarm, setOpenedWhileWarm] = useState(open && isWarm);
+	if (open !== wasOpen) {
+		setWasOpen(open);
+		if (open) setOpenedWhileWarm(isWarm);
+	}
+	return openedWhileWarm;
+}

package/dist/motion/presence.d.ts

@@ -0,0 +1,40 @@
+/** Shares visibility with portaled content while leaving interaction ownership with Radix. */
+import { type ReactNode } from "react";
+/** Separate contexts preserve correctly nested combinations such as menus inside tooltips. */
+declare const OPEN_CONTEXTS: {
+    dialog: import("react").Context<boolean>;
+    "alert-dialog": import("react").Context<boolean>;
+    sheet: import("react").Context<boolean>;
+    "dropdown-menu": import("react").Context<boolean>;
+    popover: import("react").Context<boolean>;
+    "hover-card": import("react").Context<boolean>;
+    tooltip: import("react").Context<boolean>;
+    select: import("react").Context<boolean>;
+};
+type MotionScope = keyof typeof OPEN_CONTEXTS;
+/** Provides only the owning primitive's visibility, independently of other nested primitives. */
+export declare function MotionOpenProvider({ scope, open, children, }: {
+    scope: MotionScope;
+    open: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Reads the owning primitive's visibility, for content that Radix keeps mounted while closed and so cannot be
+ * retained by `MotionPresence`.
+ * @param scope - The primitive whose visibility is read.
+ * @returns Whether that primitive is open.
+ */
+export declare function useMotionOpen(scope: MotionScope): boolean;
+/** Preserves the primitive's controlled/uncontrolled open contract. */
+export declare function useMotionOpenState({ open, defaultOpen, onOpenChange, }: {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): readonly [boolean, (open: boolean) => void];
+/** Retains closing content until its Motion exit finishes; explicit forceMount remains caller-owned. */
+export declare function MotionPresence({ scope, children, forceMount, }: {
+    scope: MotionScope;
+    children: ReactNode;
+    forceMount?: boolean;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export {};

package/dist/motion/presence.js

@@ -0,0 +1,101 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Shares visibility with portaled content while leaving interaction ownership with Radix. */
+import { createContext, useContext, useState } from "react";
+import { AnimatePresence } from "motion/react";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Separate contexts preserve correctly nested combinations such as menus inside tooltips. */
+const OPEN_CONTEXTS = {
+	dialog: createContext(true),
+	"alert-dialog": createContext(true),
+	sheet: createContext(true),
+	"dropdown-menu": createContext(true),
+	popover: createContext(true),
+	"hover-card": createContext(true),
+	tooltip: createContext(true),
+	select: createContext(true)
+};
+/** Provides only the owning primitive's visibility, independently of other nested primitives. */
+export function MotionOpenProvider(t0) {
+	const $ = _c(4);
+	const { scope, open, children } = t0;
+	const Context = OPEN_CONTEXTS[scope];
+	let t1;
+	if ($[0] !== Context.Provider || $[1] !== children || $[2] !== open) {
+		t1 = /* @__PURE__ */ _jsx(Context.Provider, {
+			value: open,
+			children
+		});
+		$[0] = Context.Provider;
+		$[1] = children;
+		$[2] = open;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	return t1;
+}
+/**
+* Reads the owning primitive's visibility, for content that Radix keeps mounted while closed and so cannot be
+* retained by `MotionPresence`.
+* @param scope - The primitive whose visibility is read.
+* @returns Whether that primitive is open.
+*/
+export function useMotionOpen(scope) {
+	return useContext(OPEN_CONTEXTS[scope]);
+}
+/** Preserves the primitive's controlled/uncontrolled open contract. */
+export function useMotionOpenState(t0) {
+	const $ = _c(6);
+	const { open, defaultOpen: t1, onOpenChange } = t0;
+	const defaultOpen = t1 === undefined ? false : t1;
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	let t2;
+	if ($[0] !== onOpenChange || $[1] !== open) {
+		t2 = (nextOpen) => {
+			if (open === undefined) {
+				setInternalOpen(nextOpen);
+			}
+			onOpenChange?.(nextOpen);
+		};
+		$[0] = onOpenChange;
+		$[1] = open;
+		$[2] = t2;
+	} else {
+		t2 = $[2];
+	}
+	const setOpen = t2;
+	const t3 = open ?? internalOpen;
+	let t4;
+	if ($[3] !== setOpen || $[4] !== t3) {
+		t4 = [t3, setOpen];
+		$[3] = setOpen;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t4 = $[5];
+	}
+	return t4;
+}
+/** Retains closing content until its Motion exit finishes; explicit forceMount remains caller-owned. */
+export function MotionPresence(t0) {
+	const $ = _c(2);
+	const { scope, children, forceMount } = t0;
+	const open = useContext(OPEN_CONTEXTS[scope]);
+	if (forceMount) {
+		return children;
+	}
+	const t1 = open ? children : null;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t1
+		});
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	return t2;
+}

package/dist/motion/surface-keyframes.d.ts

@@ -0,0 +1,24 @@
+/** Resolves entry and exit playback of Arc's modal surfaces: dialogs, sheets and their scrims. */
+import type { AnimationOptions, DOMKeyframesDefinition } from "motion/react";
+/** Surface kinds whose presence is animated on mount and before removal. */
+export type SurfaceKind = "dialog" | "sheet" | "overlay";
+/** Keyframes plus the transition that plays them. */
+export interface MotionStep {
+    keyframes: DOMKeyframesDefinition;
+    transition: AnimationOptions;
+}
+/** Entrance playback for each surface kind, on Arc's motion presets. */
+export declare function surfaceEnter(element: Element, kind: SurfaceKind): MotionStep;
+/** Transform and opacity a surface rests at, which its caller may set through a class or style. */
+export interface RestingStyle {
+    transform: string;
+    opacity: number;
+}
+/**
+ * Composes surface playback with the surface's resting transform and opacity, so a caller-owned
+ * tilt, offset or translucency holds through the whole entrance and exit instead of being
+ * replaced by identity and full opacity, then snapping back once playback restores it.
+ */
+export declare function withRestingStyle(keyframes: DOMKeyframesDefinition, resting: RestingStyle): DOMKeyframesDefinition;
+/** Exit playback: brief and eased so dismissal never blocks the next interaction. */
+export declare function surfaceExit(element: Element, kind: SurfaceKind): MotionStep;