@glyphui/ui 0.4.0 → 0.5.0

package/dist/internal/dev.js

@@ -0,0 +1,12 @@
+"use client";
+//#region src/internal/dev.ts
+const warned = /* @__PURE__ */ new Set();
+/** Logs a console warning once per key, in development only. */
+function warnOnce(key, message) {
+	if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+	if (warned.has(key)) return;
+	warned.add(key);
+	console.warn(`[glyph] ${message}`);
+}
+//#endregion
+export { warnOnce };

package/dist/internal/icons.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/internal/icons.tsx
+function Icon({ children, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+}
+const CheckIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+const MinusIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+});
+const ChevronDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+});
+const ChevronLeftIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+});
+const ChevronRightIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+const ArrowUpIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7M12 19V5" })
+});
+const ArrowDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" })
+});
+const ChevronsUpDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })
+});
+const XIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+});
+const MenuIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" })
+});
+const PanelLeftIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: "18",
+		height: "18",
+		x: "3",
+		y: "3",
+		rx: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M9 3v18" })]
+});
+const SearchIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "11",
+		cy: "11",
+		r: "7"
+	}), /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })]
+});
+const InboxIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }), /* @__PURE__ */ jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })]
+});
+const AlertIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), /* @__PURE__ */ jsx("path", { d: "M12 8v4M12 16h.01" })]
+});
+//#endregion
+export { AlertIcon, ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsUpDownIcon, InboxIcon, MenuIcon, MinusIcon, PanelLeftIcon, SearchIcon, XIcon };

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

@@ -0,0 +1,12 @@
+//#region src/motion/active-indicator.d.ts
+interface ActiveIndicatorProps {
+  /** Shared by every indicator in one group, so the active one slides between items. */
+  layoutId: string;
+  className?: string | undefined;
+}
+/**
+ * The highlight behind (or under) the active item of Tabs, SegmentedControl, Sidebar and
+ * similar. Rendered only inside the active item; `motion` animates it from the previous one.
+ */
+export declare function ActiveIndicator({ layoutId, className }: ActiveIndicatorProps): import("react").JSX.Element;
+//#endregion

package/dist/motion/active-indicator.js

@@ -0,0 +1,26 @@
+"use client";
+import { useMotionSettings } from "./use-motion-settings.js";
+import { jsx } from "react/jsx-runtime";
+import { m } from "motion/react";
+//#region src/motion/active-indicator.tsx
+/**
+* The highlight behind (or under) the active item of Tabs, SegmentedControl, Sidebar and
+* similar. Rendered only inside the active item; `motion` animates it from the previous one.
+*/
+function ActiveIndicator({ layoutId, className }) {
+	const { animate } = useMotionSettings();
+	if (!animate) return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "indicator",
+		className
+	});
+	return /* @__PURE__ */ jsx(m.span, {
+		"aria-hidden": "true",
+		"data-slot": "indicator",
+		layoutId,
+		initial: false,
+		className
+	});
+}
+//#endregion
+export { ActiveIndicator };

package/dist/motion/animated-number.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps } from "react";
+//#region src/motion/animated-number.d.ts
+export interface AnimatedNumberProps extends Omit<ComponentProps<'span'>, 'children'> {
+  value: number;
+  /** Intl number formatting, e.g. `{ style: 'currency', currency: 'USD' }`. */
+  format?: Intl.NumberFormatOptions;
+  locale?: string;
+  /** Full control over the text, e.g. your own price formatter. Overrides `format`. */
+  formatValue?: (value: number) => string;
+  /**
+   * Where the first count starts. Defaults to 0, counting up once the number scrolls into
+   * view. Set it to `value` to skip the first count.
+   */
+  from?: number;
+}
+/**
+ * A number that springs to each new value: stats, prices, counters. Screen readers get the
+ * final value once, not every frame. Shows the final value immediately when motion is off.
+ */
+export declare function AnimatedNumber({ value, format, locale, formatValue, from, className, ref, ...props }: AnimatedNumberProps): import("react").JSX.Element;
+//#endregion

package/dist/motion/animated-number.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { useMotionSettings } from "./use-motion-settings.js";
+import { springEasing, springPosition } from "@glyphui/tokens";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/motion/animated-number.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/**
+* A number that springs to each new value: stats, prices, counters. Screen readers get the
+* final value once, not every frame. Shows the final value immediately when motion is off.
+*/
+function AnimatedNumber({ value, format, locale, formatValue, from = 0, className, ref, ...props }) {
+	const { animate, spring } = useMotionSettings();
+	const formatter = useMemo(() => new Intl.NumberFormat(locale, format), [locale, format]);
+	const text = (n) => formatValue ? formatValue(n) : formatter.format(n);
+	const [shown, setShown] = useState(value);
+	const current = useRef(value);
+	const el = useRef(null);
+	const [armed, setArmed] = useState(false);
+	const [inView, setInView] = useState(false);
+	useIsomorphicLayoutEffect(() => {
+		const node = el.current;
+		if (!node || !animate || typeof IntersectionObserver === "undefined") return;
+		current.current = from;
+		setShown(from);
+		setArmed(true);
+		const observer = new IntersectionObserver(([entry]) => {
+			if (entry?.isIntersecting) {
+				setInView(true);
+				observer.disconnect();
+			}
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [animate]);
+	useEffect(() => {
+		if (!animate || !armed) {
+			current.current = value;
+			setShown(value);
+			return;
+		}
+		if (!inView) return;
+		const start = current.current;
+		if (start === value) return;
+		const { duration } = springEasing(spring);
+		const begin = performance.now();
+		let frame = 0;
+		const tick = (now) => {
+			const elapsed = Math.min(now - begin, duration);
+			const next = start + (value - start) * springPosition(spring, elapsed / 1e3);
+			current.current = next;
+			setShown(next);
+			if (elapsed < duration) frame = requestAnimationFrame(tick);
+			else {
+				current.current = value;
+				setShown(value);
+			}
+		};
+		frame = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(frame);
+	}, [
+		value,
+		animate,
+		armed,
+		inView,
+		spring
+	]);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "animated-number",
+		ref: (node) => {
+			el.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		className: cn("tabular-nums", className),
+		...props,
+		children: shown === value ? text(value) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: text(shown)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: text(value)
+		})] })
+	});
+}
+//#endregion
+export { AnimatedNumber };

package/dist/motion/features.js

@@ -0,0 +1,10 @@
+"use client";
+import { domMax } from "motion/react";
+//#region src/motion/features.ts
+/**
+* Animation features, loaded on demand by `LazyMotion` so they stay out of the initial
+* bundle. `domMax` because shared `layoutId` indicators need layout animations.
+*/
+var features_default = domMax;
+//#endregion
+export { features_default as default };

package/dist/motion/index.d.ts

@@ -0,0 +1,10 @@
+import { ActiveIndicator } from "./active-indicator.js";
+import { AnimatedNumber, AnimatedNumberProps } from "./animated-number.js";
+import { PageTransition, PageTransitionProps } from "./page-transition.js";
+import { Presence, PresenceProps } from "./presence.js";
+import { RevealOptions } from "./use-reveal.js";
+import { Reveal, RevealProps } from "./reveal.js";
+import { Stagger, StaggerItem, StaggerItemProps, StaggerProps } from "./stagger.js";
+import { MotionSettings, useMotionSettings } from "./use-motion-settings.js";
+import { m as m$1 } from "motion/react";
+export { ActiveIndicator, AnimatedNumber, type AnimatedNumberProps, type MotionSettings, PageTransition, type PageTransitionProps, Presence, type PresenceProps, Reveal, type RevealOptions, type RevealProps, Stagger, StaggerItem, type StaggerItemProps, type StaggerProps, m$1 as m, useMotionSettings };

package/dist/motion/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { useMotionSettings } from "./use-motion-settings.js";
+import { ActiveIndicator } from "./active-indicator.js";
+import { AnimatedNumber } from "./animated-number.js";
+import { PageTransition } from "./page-transition.js";
+import { Presence } from "./presence.js";
+import { Reveal } from "./reveal.js";
+import { Stagger, StaggerItem } from "./stagger.js";
+import { m as m$1 } from "motion/react";
+export { ActiveIndicator, AnimatedNumber, PageTransition, Presence, Reveal, Stagger, StaggerItem, m$1 as m, useMotionSettings };

package/dist/motion/motion-root.js

@@ -0,0 +1,48 @@
+"use client";
+import { useMotionSettings } from "./use-motion-settings.js";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { LazyMotion, MotionConfig } from "motion/react";
+//#region src/motion/motion-root.tsx
+const loadFeatures = () => import("./features.js").then((mod) => mod.default);
+const instant = { duration: 0 };
+/**
+* Connects the `motion` library to the theme: one lazily loaded feature bundle, the theme's
+* spring as the default transition, and instant transitions when motion is off.
+*/
+function MotionScope({ children }) {
+	const { animate, spring } = useMotionSettings();
+	return /* @__PURE__ */ jsx(LazyMotion, {
+		features: loadFeatures,
+		children: /* @__PURE__ */ jsx(MotionConfig, {
+			reducedMotion: "user",
+			transition: animate ? spring : instant,
+			children
+		})
+	});
+}
+/** Mirrors the effective motion level onto `<html data-motion>` so CSS animations follow it. */
+function MotionRootAttribute() {
+	const { level } = useMotionSettings();
+	useEffect(() => {
+		const root = document.documentElement;
+		const previous = root.getAttribute("data-motion");
+		root.setAttribute("data-motion", level);
+		return () => {
+			if (previous === null) root.removeAttribute("data-motion");
+			else root.setAttribute("data-motion", previous);
+		};
+	}, [level]);
+	return null;
+}
+/** Inside a `ThemeScope`: `motion` transitions use that theme's spring and level. */
+function ScopedMotionConfig({ children }) {
+	const { animate, spring } = useMotionSettings();
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		transition: animate ? spring : instant,
+		children
+	});
+}
+//#endregion
+export { MotionRootAttribute, MotionScope, ScopedMotionConfig };

package/dist/motion/page-transition.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+//#region src/motion/page-transition.d.ts
+export interface PageTransitionProps extends ComponentProps<'div'> {
+  /**
+   * Changes when the page changes, e.g. `location.pathname`. Each new value replays the
+   * entrance; the first page renders without one.
+   */
+  transitionKey: string;
+}
+/**
+ * Fades and lifts each new page in on route changes. Wrap your router outlet:
+ * `<PageTransition transitionKey={useLocation().pathname}><Outlet /></PageTransition>`.
+ * Enter-only by design: the old page leaves immediately, so nothing ever overlaps or flickers.
+ */
+export declare function PageTransition({ transitionKey, className, ...props }: PageTransitionProps): import("react").JSX.Element;
+//#endregion

package/dist/motion/page-transition.js

@@ -0,0 +1,23 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/motion/page-transition.tsx
+/**
+* Fades and lifts each new page in on route changes. Wrap your router outlet:
+* `<PageTransition transitionKey={useLocation().pathname}><Outlet /></PageTransition>`.
+* Enter-only by design: the old page leaves immediately, so nothing ever overlaps or flickers.
+*/
+function PageTransition({ transitionKey, className, ...props }) {
+	const mounted = useRef(false);
+	useEffect(() => {
+		mounted.current = true;
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "page-transition",
+		className: cn(mounted.current && "animate-page-in", className),
+		...props
+	}, transitionKey);
+}
+//#endregion
+export { PageTransition };

package/dist/motion/presence-list.js

@@ -0,0 +1,46 @@
+"use client";
+import { useMotionSettings } from "./use-motion-settings.js";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, m } from "motion/react";
+//#region src/motion/presence-list.tsx
+/**
+* Animates items of a list in and out, and slides the rest into place. Children must be
+* keyed `PresenceItem`s. Renders the list statically when motion is off.
+*/
+function PresenceList({ children }) {
+	const { animate } = useMotionSettings();
+	if (!animate) return children;
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children
+	});
+}
+const enter = {
+	opacity: 0,
+	scale: .96
+};
+const shown = {
+	opacity: 1,
+	scale: 1
+};
+const leave = {
+	opacity: 0,
+	scale: .96,
+	transition: { duration: .12 }
+};
+/** One item of a `PresenceList`: fades and scales in, out, and between positions. */
+function PresenceItem({ as, ...props }) {
+	const { animate } = useMotionSettings();
+	const tag = as ?? "li";
+	if (!animate) return /* @__PURE__ */ jsx(tag, { ...props });
+	const Animated = tag === "li" ? m.li : m.span;
+	return /* @__PURE__ */ jsx(Animated, {
+		layout: "position",
+		initial: enter,
+		animate: shown,
+		exit: leave,
+		...props
+	});
+}
+//#endregion
+export { PresenceItem, PresenceList };

package/dist/motion/presence.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+import { AnimatePresence } from "motion/react";
+//#region src/motion/presence.d.ts
+export type PresenceProps = ComponentProps<typeof AnimatePresence>;
+/**
+ * `motion`'s AnimatePresence with Glyph's defaults: children already on screen when the
+ * page loads don't animate in (`initial={false}`). Use it with `m.*` elements for custom
+ * enter and exit animations; transitions follow the theme's spring.
+ */
+export declare function Presence({ initial, ...props }: PresenceProps): import("react").JSX.Element;
+//#endregion

package/dist/motion/presence.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence } from "motion/react";
+//#region src/motion/presence.tsx
+/**
+* `motion`'s AnimatePresence with Glyph's defaults: children already on screen when the
+* page loads don't animate in (`initial={false}`). Use it with `m.*` elements for custom
+* enter and exit animations; transitions follow the theme's spring.
+*/
+function Presence({ initial = false, ...props }) {
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial,
+		...props
+	});
+}
+//#endregion
+export { Presence };

package/dist/motion/reveal.d.ts

@@ -0,0 +1,18 @@
+import { RevealOptions } from "./use-reveal.js";
+import { ComponentProps } from "react";
+//#region src/motion/reveal.d.ts
+export interface RevealProps extends ComponentProps<'div'>, RevealOptions {
+  /** Delay before the entrance starts, in milliseconds. */
+  delay?: number;
+  /** Distance it rises from, in px or any CSS length. Defaults to the motion level's. */
+  y?: number | string;
+  /** Start slightly smaller, for cards and media. */
+  scale?: boolean;
+  asChild?: boolean;
+}
+/**
+ * Fades and rises its content in when it scrolls into view. Uses the theme's spring, follows
+ * the motion level, and leaves content visible when motion is off or JavaScript hasn't run.
+ */
+export declare function Reveal({ delay, y, scale, once, amount, enabled, asChild, style, ref, ...props }: RevealProps): import("react").JSX.Element;
+//#endregion

package/dist/motion/reveal.js

@@ -0,0 +1,37 @@
+"use client";
+import { composeRefs } from "../utils/compose-refs.js";
+import { useReveal } from "./use-reveal.js";
+import { Slot } from "radix-ui";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/motion/reveal.tsx
+const length = (value) => typeof value === "number" ? `${value}px` : value;
+/**
+* Fades and rises its content in when it scrolls into view. Uses the theme's spring, follows
+* the motion level, and leaves content visible when motion is off or JavaScript hasn't run.
+*/
+function Reveal({ delay, y, scale, once, amount, enabled, asChild, style, ref, ...props }) {
+	const local = useRef(null);
+	useReveal(local, "reveal", {
+		once,
+		amount,
+		enabled
+	});
+	const Comp = asChild ? Slot.Root : "div";
+	const vars = {
+		...delay !== void 0 && { "--glyph-reveal-delay": `${delay}ms` },
+		...y !== void 0 && { "--glyph-reveal-y": length(y) },
+		...scale && { "--glyph-reveal-scale": "var(--glyph-motion-scale)" }
+	};
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "reveal",
+		ref: composeRefs(local, ref),
+		style: {
+			...vars,
+			...style
+		},
+		...props
+	});
+}
+//#endregion
+export { Reveal };

package/dist/motion/stagger.d.ts

@@ -0,0 +1,29 @@
+import { RevealOptions } from "./use-reveal.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/motion/stagger.d.ts
+type StaggerElement = 'div' | 'ul' | 'ol' | 'dl' | 'section';
+export interface StaggerProps extends ComponentProps<'div'>, RevealOptions {
+  /** The element to render, e.g. `ul` for a list whose `li` items cascade in. Default `div`. */
+  as?: StaggerElement;
+  /** Milliseconds between one child and the next. Defaults to the motion level's step. */
+  step?: number;
+  /** Milliseconds before the first child. */
+  delay?: number;
+  asChild?: boolean;
+}
+/**
+ * Reveals its children one after another when the group scrolls into view: feature grids,
+ * pricing tiers, card lists. Each direct child becomes a `StaggerItem` without a wrapper.
+ */
+export declare function Stagger({ step, delay, once, amount, enabled, as, asChild, style, children, ref, ...props }: StaggerProps): import("react").JSX.Element;
+export interface StaggerItemProps {
+  /** Position in the cascade, starting at 0. */
+  index: number;
+  children: ReactNode;
+}
+/**
+ * One step of a `Stagger`, for children that are not direct (e.g. inside a fragment or a
+ * mapped list with wrappers). Merges onto its child; renders no element of its own.
+ */
+export declare function StaggerItem({ index, children }: StaggerItemProps): import("react").JSX.Element;
+//#endregion

package/dist/motion/stagger.js

@@ -0,0 +1,52 @@
+"use client";
+import { composeRefs } from "../utils/compose-refs.js";
+import { useReveal } from "./use-reveal.js";
+import { Slot } from "radix-ui";
+import { Children, isValidElement, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/motion/stagger.tsx
+/**
+* Reveals its children one after another when the group scrolls into view: feature grids,
+* pricing tiers, card lists. Each direct child becomes a `StaggerItem` without a wrapper.
+*/
+function Stagger({ step, delay, once, amount, enabled, as = "div", asChild, style, children, ref, ...props }) {
+	const local = useRef(null);
+	useReveal(local, "stagger", {
+		once,
+		amount,
+		enabled
+	});
+	const Comp = asChild ? Slot.Root : as;
+	const vars = {
+		...step !== void 0 && { "--glyph-stagger-step": `${step}ms` },
+		...delay !== void 0 && { "--glyph-stagger-delay": `${delay}ms` }
+	};
+	let index = 0;
+	const items = Children.map(children, (child) => isValidElement(child) ? /* @__PURE__ */ jsx(StaggerItem, {
+		index: index++,
+		children: child
+	}) : child);
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "stagger",
+		ref: composeRefs(local, ref),
+		style: {
+			...vars,
+			...style
+		},
+		...props,
+		children: asChild ? children : items
+	});
+}
+/**
+* One step of a `Stagger`, for children that are not direct (e.g. inside a fragment or a
+* mapped list with wrappers). Merges onto its child; renders no element of its own.
+*/
+function StaggerItem({ index, children }) {
+	return /* @__PURE__ */ jsx(Slot.Root, {
+		"data-stagger-item": "",
+		style: { "--glyph-stagger-index": index },
+		children
+	});
+}
+//#endregion
+export { Stagger, StaggerItem };

package/dist/motion/use-motion-settings.d.ts

@@ -0,0 +1,25 @@
+import { MotionLevel, SpringConfig } from "@glyphui/tokens";
+//#region src/motion/use-motion-settings.d.ts
+export interface MotionSettings {
+  /** The effective level: the theme's, overridden by the provider, forced to `none` by reduced motion. */
+  level: MotionLevel;
+  /** `false` when level is `none`. Components render static markup then. */
+  animate: boolean;
+  /** The theme's spring for overlays, indicators and layout animations. */
+  spring: SpringConfig & {
+    type: 'spring';
+  };
+  /** Theme durations in seconds, for tween animations. */
+  duration: {
+    fast: number;
+    base: number;
+    slow: number;
+  };
+}
+/**
+ * How Glyph components should animate right now. Every animated component reads this, so a
+ * theme's `motion.level`, the provider's `motion` prop and the visitor's reduced-motion
+ * setting control all motion in one place.
+ */
+export declare function useMotionSettings(): MotionSettings;
+//#endregion