@vamos-ui/react 0.2.0 → 0.4.0

package/dist/locales/tr.d.ts

@@ -717,6 +717,7 @@ export declare const tr: {
         thumbs: string;
         empty: string;
         loading: string;
+        marqueePause: string;
     };
     savedViews: {
         label: string;

package/dist/locales/tr.js

@@ -717,6 +717,7 @@ export const tr = {
         thumbs: "Slayt küçük resimleri",
         empty: "Henüz gösterilecek bir şey yok",
         loading: "Slaytlar yükleniyor",
+        marqueePause: "Kaydırmayı duraklat",
     },
     savedViews: {
         label: "Görünümler",

package/dist/media/gallery.js

@@ -81,7 +81,9 @@ export function Gallery({ items, layout = "grid", columns = DEFAULT_COLUMNS, asp
     /* --- edit mode ---------------------------------------------------- */
     if (editable) {
         const addTile = onAdd ? (_jsxs("button", { type: "button", "data-slot": "gallery-add", onClick: onAdd, className: cn("vui-gallery-add focus-ring group/add flex w-full flex-col items-center justify-center gap-1.5 border border-dashed border-field-border bg-surface-2 text-center transition-colors hover:border-field-border-hover hover:bg-hover", items.length === 0 ? "min-h-56 rounded-ui-lg p-8" : "mt-(--gallery-gap) min-h-14 rounded-ui px-4 py-3 sm:flex-row sm:gap-2.5"), children: [_jsx(ImagePlus, { "aria-hidden": true, className: cn("text-fg-muted transition-colors group-hover/add:text-fg", items.length === 0 ? "size-7" : "size-[18px]"), strokeWidth: 1.6 }), _jsx("span", { className: "text-sm font-medium text-fg", children: t("add") }), items.length === 0 ? _jsx("span", { className: "text-[13px] text-fg-muted", children: t("addHint") }) : null] })) : null;
-        return (_jsxs("div", { ...rootProps, children: [items.length ? (_jsx(SortableGrid, { "aria-label": listLabel, items: sources, getId: (s) => s.id, getLabel: (s) => s.alt || s.caption || filenameOf(items, s.id) || s.id, onReorder: (next) => onReorder?.(next.map((s) => s.id)), disabled: !onReorder, handle: true, minItemWidth: "10rem", className: "gap-(--gallery-gap)", itemClassName: "overflow-hidden", renderActions: onRemove
+        return (_jsxs("div", { ...rootProps, children: [items.length ? (_jsx(SortableGrid, { "aria-label": listLabel, items: sources, getId: (s) => s.id, getLabel: (s) => s.alt || s.caption || filenameOf(items, s.id) || s.id, onReorder: (next) => onReorder?.(next.map((s) => s.id)), disabled: !onReorder, handle: true, 
+                    // Honour `columns` while editing too: a fixed 10rem minimum fell back to one column on phones.
+                    minItemWidth: `calc((100% - ${(Math.max(1, cols) - 1) * gapPx}px) / ${Math.max(1, cols)} - 0.5px)`, className: "gap-(--gallery-gap)", itemClassName: "overflow-hidden", renderActions: onRemove
                         ? (s) => (_jsx(IconButton, { label: t("remove", { name: s.alt || filenameOf(items, s.id) || s.id }), size: "xs", variant: "ghost", className: "bg-popover text-fg-muted shadow-sm hover:text-danger", onClick: () => onRemove(s.id), children: _jsx(Trash2, {}) }))
                         : undefined, renderItem: (s) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(Image, { src: assetOf(items, s.id) ?? s.src, alt: s.alt, aspect: aspect, sizes: "12rem", widths: [320, 480] }), onCaptionChange ? (_jsx("input", { type: "text", defaultValue: s.caption ?? "", "aria-label": t("caption", { name: s.alt || filenameOf(items, s.id) || s.id }), placeholder: t("captionPlaceholder"), onPointerDown: (e) => e.stopPropagation(), onKeyDown: (e) => {
                                     e.stopPropagation();

package/dist/media/media-library.js

@@ -717,7 +717,7 @@ export const MediaLibrary = React.forwardRef(function MediaLibrary({ adapter: ad
         const isSel = selected.includes(a.id);
         const disabled = isDisabled(a);
         const missing = isAltMissing(a);
-        return (_jsxs("div", { role: "gridcell", "data-tile": index, "data-slot": "media-tile", "data-selected": isSel ? "" : undefined, "data-active": activeId === a.id ? "" : undefined, "aria-selected": selection === "none" ? undefined : isSel, "aria-disabled": disabled || undefined, "aria-label": [a.filename, missing ? t("missingAlt") : null, a.status === "processing" ? t("processing") : a.status === "failed" ? t("failed") : null].filter(Boolean).join(", "), tabIndex: index === focusIndex ? 0 : -1, onClick: (e) => onTileClick(e, index), onDoubleClick: () => detailsPanel && openDetails(a), onFocus: () => setFocusIndex(index), className: cn("vui-media-tile group/tile focus-ring relative grid min-w-0 cursor-pointer gap-1.5 rounded-ui outline-none", disabled && "cursor-not-allowed opacity-45"), children: [_jsxs("div", { className: "vui-media-tile-frame relative overflow-hidden rounded-ui bg-surface-2", children: [_jsx(MediaThumb, { asset: a, rounded: "none" }), a.kind === "video" && a.duration ? _jsx("span", { className: "tabular absolute end-1.5 bottom-1.5 rounded-sm bg-[color-mix(in_srgb,var(--scene)_82%,transparent)] px-1.5 py-0.5 text-[10.5px] font-medium text-fg", children: f.duration(a.duration) }) : null, a.status === "failed" ? _jsx(Badge, { tone: "danger", className: "absolute start-1.5 top-1.5", children: t("failed") }) : null, missing ? _jsx("span", { "aria-hidden": true, title: t("missingAlt"), className: "vui-media-alt-dot absolute end-2 top-2 size-2 rounded-full bg-warning" }) : null, selection !== "none" ? (_jsx("span", { "aria-hidden": true, "data-slot": "media-tile-check", className: cn("vui-media-check absolute start-1.5 top-1.5 flex size-5 items-center justify-center rounded-full", isSel ? "bg-accent text-accent-fg" : "border border-[color-mix(in_srgb,var(--fg)_30%,transparent)] bg-[color-mix(in_srgb,var(--scene)_70%,transparent)] text-transparent"), children: _jsx(Check, { className: "size-3", strokeWidth: 3 }) })) : null] }), _jsx("span", { className: cn("truncate px-0.5 text-[12px] leading-tight", isSel ? "text-fg" : "text-fg-muted"), children: a.filename })] }, a.id));
+        return (_jsxs("div", { role: "gridcell", "data-tile": index, "data-slot": "media-tile", "data-selected": isSel ? "" : undefined, "data-active": activeId === a.id ? "" : undefined, "aria-selected": selection === "none" ? undefined : isSel, "aria-disabled": disabled || undefined, "aria-label": [a.filename, a.kind === "video" && a.duration ? f.duration(a.duration) : null, missing ? t("missingAlt") : null, a.status === "processing" ? t("processing") : a.status === "failed" ? t("failed") : null].filter(Boolean).join(", "), tabIndex: index === focusIndex ? 0 : -1, onClick: (e) => onTileClick(e, index), onDoubleClick: () => detailsPanel && openDetails(a), onFocus: () => setFocusIndex(index), className: cn("vui-media-tile group/tile focus-ring relative grid min-w-0 cursor-pointer gap-1.5 rounded-ui outline-none", disabled && "cursor-not-allowed opacity-45"), children: [_jsxs("div", { className: "vui-media-tile-frame relative overflow-hidden rounded-ui bg-surface-2", children: [_jsx(MediaThumb, { asset: a, rounded: "none" }), a.kind === "video" && a.duration ? _jsx("span", { "aria-hidden": true, className: "tabular absolute end-1.5 bottom-1.5 rounded-sm bg-[color-mix(in_srgb,var(--scene)_82%,transparent)] px-1.5 py-0.5 text-[10.5px] font-medium text-fg", children: f.duration(a.duration) }) : null, a.status === "failed" ? _jsx(Badge, { "aria-hidden": true, tone: "danger", className: "absolute start-1.5 top-1.5", children: t("failed") }) : null, missing ? _jsx("span", { "aria-hidden": true, title: t("missingAlt"), className: "vui-media-alt-dot absolute end-2 top-2 size-2 rounded-full bg-warning" }) : null, selection !== "none" ? (_jsx("span", { "aria-hidden": true, "data-slot": "media-tile-check", className: cn("vui-media-check absolute start-1.5 top-1.5 flex size-5 items-center justify-center rounded-full", isSel ? "bg-accent text-accent-fg" : "border border-[color-mix(in_srgb,var(--fg)_30%,transparent)] bg-[color-mix(in_srgb,var(--scene)_70%,transparent)] text-transparent"), children: _jsx(Check, { className: "size-3", strokeWidth: 3 }) })) : null] }), _jsx("span", { className: cn("truncate px-0.5 text-[12px] leading-tight", isSel ? "text-fg" : "text-fg-muted"), children: a.filename })] }, a.id));
     };
     const gridStyle = { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`, gap: GRID_GAP };
     const gridEl = (_jsx("div", { ref: gridRef, role: "grid", "aria-label": t("files"), "aria-multiselectable": selection === "multiple" || undefined, "aria-rowcount": virtual ? rows.length : undefined, "aria-describedby": liveId, "data-slot": "media-grid", onKeyDown: onGridKeyDown, className: "relative", style: virtual ? { height: virtualizer.getTotalSize() } : undefined, children: virtual

package/dist/motion/core.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Motion core: level lookup, a shared IntersectionObserver pool and timing helpers.
+ * No React in here — every primitive in this folder builds on these.
+ */
+export type MotionLevel = "full" | "subtle" | "off";
+/** `true` when the OS asks for reduced motion. `false` on the server. */
+export declare function prefersReducedMotion(): boolean;
+/**
+ * The motion level that applies to an element: `data-motion="off"` on `<html>` always wins,
+ * then the closest `[data-motion]` ancestor (SiteShell sets one), then `"subtle"`.
+ * Reduced motion turns every level into `"off"`.
+ */
+export declare function motionLevel(el?: Element | null): MotionLevel;
+/** Shorthand: may this element animate at all? */
+export declare const motionAllowed: (el?: Element | null) => boolean;
+type Handler = (entry: IntersectionObserverEntry) => void;
+export declare const ioSupported: () => boolean;
+/**
+ * Observe an element with a pooled IntersectionObserver. Returns the unobserve function.
+ * Without IntersectionObserver the handler is never called — callers fall back themselves.
+ */
+export declare function observe(el: Element, handler: Handler, { rootMargin, threshold }?: {
+    rootMargin?: string;
+    threshold?: number;
+}): () => void;
+/** Is the element's box (at least partly) inside the viewport right now? */
+export declare function inViewport(el: Element): boolean;
+/** Longest `duration + delay` (ms) among the element's transitions — or its children's, for staggers. */
+export declare function transitionEnd(el: Element, children?: boolean): number;
+/** Easing used by the JS-driven primitives (count-up): ease-out quint. */
+export declare const easeOutQuint: (t: number) => number;
+export {};

package/dist/motion/core.js

@@ -0,0 +1,77 @@
+/**
+ * Motion core: level lookup, a shared IntersectionObserver pool and timing helpers.
+ * No React in here — every primitive in this folder builds on these.
+ */
+const REDUCE = "(prefers-reduced-motion: reduce)";
+/** `true` when the OS asks for reduced motion. `false` on the server. */
+export function prefersReducedMotion() {
+    return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCE).matches;
+}
+/**
+ * The motion level that applies to an element: `data-motion="off"` on `<html>` always wins,
+ * then the closest `[data-motion]` ancestor (SiteShell sets one), then `"subtle"`.
+ * Reduced motion turns every level into `"off"`.
+ */
+export function motionLevel(el) {
+    if (typeof document === "undefined" || prefersReducedMotion())
+        return "off";
+    if (document.documentElement.getAttribute("data-motion") === "off")
+        return "off";
+    const v = el?.closest("[data-motion]")?.getAttribute("data-motion");
+    return v === "off" || v === "full" ? v : "subtle";
+}
+/** Shorthand: may this element animate at all? */
+export const motionAllowed = (el) => motionLevel(el) !== "off";
+const pools = new Map();
+export const ioSupported = () => typeof window !== "undefined" && typeof window.IntersectionObserver === "function";
+/**
+ * Observe an element with a pooled IntersectionObserver. Returns the unobserve function.
+ * Without IntersectionObserver the handler is never called — callers fall back themselves.
+ */
+export function observe(el, handler, { rootMargin = "0px 0px -8% 0px", threshold = 0 } = {}) {
+    if (!ioSupported())
+        return () => { };
+    const key = `${rootMargin}|${threshold}`;
+    let pool = pools.get(key);
+    if (!pool) {
+        const handlers = new Map();
+        const io = new IntersectionObserver((entries) => entries.forEach((e) => handlers.get(e.target)?.(e)), { rootMargin, threshold });
+        pool = { io, handlers };
+        pools.set(key, pool);
+    }
+    const p = pool;
+    p.handlers.set(el, handler);
+    p.io.observe(el);
+    return () => {
+        p.handlers.delete(el);
+        p.io.unobserve(el);
+    };
+}
+/** Is the element's box (at least partly) inside the viewport right now? */
+export function inViewport(el) {
+    if (typeof window === "undefined")
+        return false;
+    const r = el.getBoundingClientRect();
+    const h = window.innerHeight || document.documentElement.clientHeight;
+    const w = window.innerWidth || document.documentElement.clientWidth;
+    return r.bottom > 0 && r.top < h && r.right > 0 && r.left < w;
+}
+/** Longest `duration + delay` (ms) among the element's transitions — or its children's, for staggers. */
+export function transitionEnd(el, children = false) {
+    if (typeof window === "undefined")
+        return 0;
+    const ms = (v) => v.split(",").map((s) => (s.trim().endsWith("ms") ? parseFloat(s) : parseFloat(s) * 1000) || 0);
+    const longest = (node) => {
+        const cs = window.getComputedStyle(node);
+        const d = ms(cs.transitionDuration);
+        const de = ms(cs.transitionDelay);
+        return d.reduce((m, v, i) => Math.max(m, v + (de[i] ?? de[0] ?? 0)), 0);
+    };
+    let max = longest(el);
+    if (children)
+        for (const c of Array.from(el.children))
+            max = Math.max(max, longest(c));
+    return max;
+}
+/** Easing used by the JS-driven primitives (count-up): ease-out quint. */
+export const easeOutQuint = (t) => 1 - Math.pow(1 - t, 5);

package/dist/motion/count-up.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+export interface CountUpProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** The final number. This is what the server renders and what screen readers always hear. */
+    value: number;
+    /** Where the count starts. Default 0. */
+    from?: number;
+    /** Animation length in ms. Default 1400 (subtle) / 1800 (full). */
+    duration?: number;
+    /** Delay after it becomes visible, in ms. */
+    delay?: number;
+    /** BCP 47 locale. Default: the surrounding LocaleProvider (`en-US`). */
+    locale?: string;
+    /**
+     * Intl.NumberFormat options. Default: as many fraction digits as `value` has (max 2),
+     * so `4.8` counts as 0.0 → 4.8 and `1240` as 0 → 1,240.
+     */
+    format?: Intl.NumberFormatOptions;
+}
+/**
+ * A number that counts up to its value when it scrolls into view. Tabular figures and a hidden
+ * copy of the final value reserve the width, so nothing around it moves. Screen readers read the
+ * final value only; reduced motion, `data-motion="off"` and server-rendered numbers already on
+ * screen show the final value at once.
+ *
+ * ```tsx
+ * <CountUp value={1240} /> reviews · <CountUp value={4.8} locale="tr-TR" />
+ * ```
+ */
+export declare const CountUp: React.ForwardRefExoticComponent<CountUpProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/motion/count-up.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useLocale } from "../lib/locale.js";
+import { easeOutQuint, inViewport, ioSupported, motionLevel, observe } from "./core.js";
+import { useFreshMount, useIsoLayoutEffect } from "./reveal.js";
+function decimalsOf(v) {
+    return Math.min(2, (String(v).split(".")[1] ?? "").length);
+}
+/**
+ * A number that counts up to its value when it scrolls into view. Tabular figures and a hidden
+ * copy of the final value reserve the width, so nothing around it moves. Screen readers read the
+ * final value only; reduced motion, `data-motion="off"` and server-rendered numbers already on
+ * screen show the final value at once.
+ *
+ * ```tsx
+ * <CountUp value={1240} /> reviews · <CountUp value={4.8} locale="tr-TR" />
+ * ```
+ */
+export const CountUp = React.forwardRef(function CountUp({ value, from = 0, duration, delay = 0, locale: localeProp, format, className, ...props }, ref) {
+    const ctx = useLocale();
+    const locale = localeProp ?? ctx?.locale ?? "en-US";
+    const fmt = React.useMemo(() => {
+        const d = decimalsOf(value);
+        return new Intl.NumberFormat(locale, format ?? { minimumFractionDigits: d, maximumFractionDigits: d });
+    }, [locale, format, value]);
+    const finalText = fmt.format(value);
+    const fresh = useFreshMount();
+    // Fresh mounts start at `from` (they are not on screen yet); hydrated ones at the final value.
+    const [display, setDisplay] = React.useState(() => (fresh ? fmt.format(from) : finalText));
+    const [running, setRunning] = React.useState(fresh);
+    const inner = React.useRef(null);
+    useIsoLayoutEffect(() => {
+        const el = inner.current;
+        if (!el)
+            return;
+        let raf = 0;
+        let timer;
+        const finish = () => {
+            setDisplay(finalText);
+            setRunning(false);
+        };
+        const level = motionLevel(el);
+        if (level === "off" || !ioSupported() || value === from) {
+            finish();
+            return;
+        }
+        // Hydrated and already on screen: animate only if the page has just loaded (nobody has
+        // read the number yet); otherwise leave it alone.
+        if (!fresh && inViewport(el) && performance.now() > 1500) {
+            finish();
+            return;
+        }
+        const ms = duration ?? (level === "full" ? 1800 : 1400);
+        setDisplay(fmt.format(from));
+        setRunning(true);
+        const run = () => {
+            const start = performance.now();
+            const tick = (now) => {
+                const t = Math.min(1, (now - start) / ms);
+                const v = from + (value - from) * easeOutQuint(t);
+                if (t >= 1)
+                    return finish();
+                setDisplay(fmt.format(v));
+                raf = requestAnimationFrame(tick);
+            };
+            raf = requestAnimationFrame(tick);
+        };
+        const stop = observe(el, (entry) => {
+            if (!entry.isIntersecting)
+                return;
+            stop();
+            timer = setTimeout(run, delay);
+        });
+        return () => {
+            stop();
+            cancelAnimationFrame(raf);
+            clearTimeout(timer);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, from, finalText]);
+    // The widest of start and end reserves the box (generated content: not read, not selectable).
+    const ghost = fmt.format(from).length > finalText.length ? fmt.format(from) : finalText;
+    return (_jsx("span", { ref: (node) => {
+            inner.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, "data-count-up": "", "data-ghost": ghost, "data-running": running ? "" : undefined, className: cn("vm-count tabular", className), ...props, children: running ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: display }), _jsx("span", { className: "sr-only", children: finalText })] })) : (_jsx("span", { children: finalText })) }));
+});

package/dist/motion/index.d.ts

@@ -0,0 +1,11 @@
+export { motionLevel, motionAllowed, prefersReducedMotion, type MotionLevel } from "./core.js";
+export { MotionScope, type MotionScopeProps } from "./motion-scope.js";
+export { Reveal, Stagger, useReveal, useFreshMount, type RevealProps, type StaggerProps, type RevealEffect, type UseRevealOptions } from "./reveal.js";
+export { CountUp, type CountUpProps } from "./count-up.js";
+export { Ticker, type TickerProps } from "./ticker.js";
+export { Parallax, ScrollProgress, type ParallaxProps, type ScrollProgressProps } from "./parallax.js";
+export { TextReveal, type TextRevealProps } from "./text-reveal.js";
+export { Tilt, Magnetic, type TiltProps, type MagneticProps } from "./pointer.js";
+export { PageTransition, startPageTransition, viewTransitionsSupported, type PageTransitionProps, type StartPageTransitionOptions } from "./page-transition.js";
+export { SkeletonSwap, type SkeletonSwapProps } from "./skeleton-swap.js";
+export { useScrollShrink, type UseScrollShrinkOptions } from "./scroll-shrink.js";

package/dist/motion/index.js

@@ -0,0 +1,13 @@
+// @vamos-ui/react/motion — CSS-first motion primitives. Styles live in styles/motion.css
+// (already part of @vamos-ui/react/styles.css).
+export { motionLevel, motionAllowed, prefersReducedMotion } from "./core.js";
+export { MotionScope } from "./motion-scope.js";
+export { Reveal, Stagger, useReveal, useFreshMount } from "./reveal.js";
+export { CountUp } from "./count-up.js";
+export { Ticker } from "./ticker.js";
+export { Parallax, ScrollProgress } from "./parallax.js";
+export { TextReveal } from "./text-reveal.js";
+export { Tilt, Magnetic } from "./pointer.js";
+export { PageTransition, startPageTransition, viewTransitionsSupported } from "./page-transition.js";
+export { SkeletonSwap } from "./skeleton-swap.js";
+export { useScrollShrink } from "./scroll-shrink.js";

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { MotionLevel } from "./core.js";
+export interface MotionScopeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** full: longer, wider, word-by-word · subtle: short fades and small rises (default) · off: final state, no animation. */
+    level: MotionLevel;
+    asChild?: boolean;
+}
+/**
+ * Sets the motion level for everything inside (`data-motion`). SiteShell does this for a site
+ * via its `motion` prop; use MotionScope for any other subtree. `data-motion="off"` on `<html>`
+ * overrides every scope, and so does the reduced-motion setting.
+ *
+ * ```tsx
+ * <MotionScope level="full"><Stagger>…</Stagger></MotionScope>
+ * ```
+ */
+export declare const MotionScope: React.ForwardRefExoticComponent<MotionScopeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/motion/motion-scope.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+/**
+ * Sets the motion level for everything inside (`data-motion`). SiteShell does this for a site
+ * via its `motion` prop; use MotionScope for any other subtree. `data-motion="off"` on `<html>`
+ * overrides every scope, and so does the reduced-motion setting.
+ *
+ * ```tsx
+ * <MotionScope level="full"><Stagger>…</Stagger></MotionScope>
+ * ```
+ */
+export const MotionScope = React.forwardRef(function MotionScope({ level, asChild, ...props }, ref) {
+    const Comp = asChild ? Slot.Root : "div";
+    return _jsx(Comp, { ref: ref, "data-motion": level, ...props });
+});

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+export declare const viewTransitionsSupported: () => boolean;
+export interface StartPageTransitionOptions {
+    /**
+     * The element that changes. It gets `view-transition-name: vm-page` for the length of the
+     * transition, so only it cross-fades and the rest of the page stays live underneath.
+     */
+    scope?: HTMLElement | null;
+}
+/**
+ * Run a state update as a page transition: a View Transition (cross-fade + slight rise) where
+ * the browser has the API and motion is allowed, a plain synchronous update otherwise.
+ * Returns `"view-transition"` or `"none"`, so a caller can add its own fallback fade.
+ *
+ * ```ts
+ * startPageTransition(() => setPage("pricing"), { scope: rootRef.current });
+ * ```
+ */
+export declare function startPageTransition(update: () => void, { scope }?: StartPageTransitionOptions): "view-transition" | "none";
+export interface PageTransitionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Changes when the page changes (a route, a tab id). The content fades in on every change after the first. */
+    pageKey: string;
+}
+/**
+ * Fades its content in whenever `pageKey` changes — the fallback for apps that switch content
+ * without View Transitions. Pair it with `startPageTransition` when you control the update.
+ * The first render never animates, so server-rendered content stays put.
+ *
+ * ```tsx
+ * <PageTransition pageKey={tab}>{panels[tab]}</PageTransition>
+ * ```
+ */
+export declare const PageTransition: React.ForwardRefExoticComponent<PageTransitionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/motion/page-transition.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { flushSync } from "react-dom";
+import { cn } from "../lib/cn.js";
+import { motionAllowed } from "./core.js";
+export const viewTransitionsSupported = () => typeof document !== "undefined" && typeof document.startViewTransition === "function";
+/**
+ * Run a state update as a page transition: a View Transition (cross-fade + slight rise) where
+ * the browser has the API and motion is allowed, a plain synchronous update otherwise.
+ * Returns `"view-transition"` or `"none"`, so a caller can add its own fallback fade.
+ *
+ * ```ts
+ * startPageTransition(() => setPage("pricing"), { scope: rootRef.current });
+ * ```
+ */
+export function startPageTransition(update, { scope } = {}) {
+    const doc = typeof document === "undefined" ? undefined : document;
+    if (!doc?.startViewTransition || !motionAllowed(scope ?? doc.documentElement)) {
+        update();
+        return "none";
+    }
+    if (scope)
+        scope.style.setProperty("view-transition-name", "vm-page");
+    doc.documentElement.setAttribute("data-vm-transition", "");
+    try {
+        const t = doc.startViewTransition(() => flushSync(update));
+        t.finished.finally(() => {
+            scope?.style.removeProperty("view-transition-name");
+            doc.documentElement.removeAttribute("data-vm-transition");
+        });
+    }
+    catch {
+        scope?.style.removeProperty("view-transition-name");
+        doc.documentElement.removeAttribute("data-vm-transition");
+        update();
+        return "none";
+    }
+    return "view-transition";
+}
+/**
+ * Fades its content in whenever `pageKey` changes — the fallback for apps that switch content
+ * without View Transitions. Pair it with `startPageTransition` when you control the update.
+ * The first render never animates, so server-rendered content stays put.
+ *
+ * ```tsx
+ * <PageTransition pageKey={tab}>{panels[tab]}</PageTransition>
+ * ```
+ */
+export const PageTransition = React.forwardRef(function PageTransition({ pageKey, className, children, ...props }, ref) {
+    const first = React.useRef(pageKey);
+    // Inside a View Transition the browser already cross-fades: no second fade on top.
+    const inViewTransition = typeof document !== "undefined" && document.documentElement.hasAttribute("data-vm-transition");
+    const entering = first.current !== pageKey && !inViewTransition;
+    React.useEffect(() => {
+        // From the second key on, every change animates.
+        if (first.current !== pageKey)
+            first.current = "\u0000";
+    }, [pageKey]);
+    return (_jsx("div", { ref: ref, "data-page-enter": entering ? "" : undefined, className: cn("vm-page", className), ...props, children: children }, pageKey));
+});

package/dist/motion/parallax.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export interface ParallaxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * How far the content travels each way while the frame crosses the viewport, in px.
+     * Positive moves slower than the page (depth), negative faster (foreground). Default 40.
+     */
+    shift?: number;
+    /**
+     * Clip to the frame and over-size the layer so no edge ever shows — for images. The frame
+     * needs its own size (an aspect ratio or a height). Default true.
+     */
+    clip?: boolean;
+}
+/**
+ * Scroll-linked depth. CSS `animation-timeline: view()` where supported (no JS on scroll), a
+ * passive rAF scroll listener elsewhere. Transform only; off under reduced motion and
+ * `data-motion="off"`.
+ *
+ * ```tsx
+ * <Parallax shift={48} className="aspect-[16/9] rounded-ui-lg"><img className="size-full object-cover" … /></Parallax>
+ * ```
+ */
+export declare const Parallax: React.ForwardRefExoticComponent<ParallaxProps & React.RefAttributes<HTMLDivElement>>;
+export interface ScrollProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Fixed to the top of the viewport (reading progress). With false it sits in the flow. Default true. */
+    fixed?: boolean;
+}
+/**
+ * A thin accent bar that fills as the page scrolls — `animation-timeline: scroll()` with a
+ * scroll-listener fallback. Decorative (`aria-hidden`); it follows the scroll directly, so it
+ * stays on under reduced motion.
+ *
+ * ```tsx
+ * <ScrollProgress />
+ * ```
+ */
+export declare const ScrollProgress: React.ForwardRefExoticComponent<ScrollProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/motion/parallax.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { motionAllowed } from "./core.js";
+const supports = (q) => typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports(q);
+/**
+ * Calls `onProgress(0…1)` on scroll (rAF-throttled, passive). Used as the fallback where CSS
+ * scroll-driven animations are missing. `measure` returns the progress for the current scroll.
+ */
+function useScrollFallback(enabled, ref, measure) {
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!enabled || !el)
+            return;
+        let raf = 0;
+        const update = () => {
+            raf = 0;
+            el.style.setProperty("--vm-progress", Math.min(1, Math.max(0, measure(el))).toFixed(4));
+        };
+        const onScroll = () => {
+            if (!raf)
+                raf = requestAnimationFrame(update);
+        };
+        el.setAttribute("data-js", "");
+        update();
+        window.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", onScroll, { passive: true });
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener("scroll", onScroll);
+            window.removeEventListener("resize", onScroll);
+            el.removeAttribute("data-js");
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled]);
+}
+/**
+ * Scroll-linked depth. CSS `animation-timeline: view()` where supported (no JS on scroll), a
+ * passive rAF scroll listener elsewhere. Transform only; off under reduced motion and
+ * `data-motion="off"`.
+ *
+ * ```tsx
+ * <Parallax shift={48} className="aspect-[16/9] rounded-ui-lg"><img className="size-full object-cover" … /></Parallax>
+ * ```
+ */
+export const Parallax = React.forwardRef(function Parallax({ shift = 40, clip = true, className, style, children, ...props }, ref) {
+    const inner = React.useRef(null);
+    const [fallback, setFallback] = React.useState(false);
+    React.useEffect(() => {
+        setFallback(!supports("animation-timeline: view()") && motionAllowed(inner.current));
+    }, []);
+    useScrollFallback(fallback, inner, (el) => {
+        const r = el.getBoundingClientRect();
+        const vh = window.innerHeight;
+        return (vh - r.top) / (vh + r.height);
+    });
+    return (_jsx("div", { ref: (node) => {
+            inner.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, "data-parallax": "", "data-clip": clip ? "" : undefined, className: cn("vm-parallax", className), style: { "--vm-parallax-shift": `${shift}px`, ...style }, ...props, children: _jsx("div", { className: "vm-parallax-layer", children: children }) }));
+});
+/**
+ * A thin accent bar that fills as the page scrolls — `animation-timeline: scroll()` with a
+ * scroll-listener fallback. Decorative (`aria-hidden`); it follows the scroll directly, so it
+ * stays on under reduced motion.
+ *
+ * ```tsx
+ * <ScrollProgress />
+ * ```
+ */
+export const ScrollProgress = React.forwardRef(function ScrollProgress({ fixed = true, className, ...props }, ref) {
+    const inner = React.useRef(null);
+    const [fallback, setFallback] = React.useState(false);
+    React.useEffect(() => setFallback(!supports("animation-timeline: scroll()")), []);
+    useScrollFallback(fallback, inner, () => {
+        const max = document.documentElement.scrollHeight - window.innerHeight;
+        return max > 0 ? window.scrollY / max : 0;
+    });
+    return (_jsx("div", { ref: (node) => {
+            inner.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, "aria-hidden": "true", "data-fixed": fixed ? "" : undefined, className: cn("vm-scroll-progress", className), ...props, children: _jsx("div", { className: "vm-scroll-progress-bar" }) }));
+});

package/dist/motion/pointer.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+export interface TiltProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Maximum rotation in degrees. Default 5 — enough to feel, not enough to read as a gimmick. */
+    max?: number;
+    /** A soft light that follows the pointer. Default false. */
+    glare?: boolean;
+    /** Lowest motion level that tilts. Default `"subtle"`; `"full"` keeps subtle sites flat. */
+    level?: "subtle" | "full";
+    asChild?: boolean;
+}
+/**
+ * A card that leans toward the pointer in 3D. Mouse and trackpad only (`pointer: fine`); flat
+ * on touch, under reduced motion and with `data-motion="off"`.
+ *
+ * ```tsx
+ * <Tilt max={6} glare><article className="surface rounded-ui-lg p-6">…</article></Tilt>
+ * ```
+ */
+export declare const Tilt: React.ForwardRefExoticComponent<TiltProps & React.RefAttributes<HTMLDivElement>>;
+export interface MagneticProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Share of the pointer's offset the element follows, 0–1. Default 0.3. */
+    strength?: number;
+    /** Cap on the travel, in px. Default 10. */
+    limit?: number;
+    /** Lowest motion level that pulls. Default `"full"` — a call-to-action flourish, not a default. */
+    level?: "subtle" | "full";
+    /** Pull the single child (your Button or link) instead of wrapping it in an inline-block span. */
+    asChild?: boolean;
+}
+/**
+ * Pulls a call-to-action a few pixels toward the pointer and springs back on leave. Mouse
+ * and trackpad only; still on touch, under reduced motion and below its `level`.
+ *
+ * ```tsx
+ * <Magnetic><Button variant="primary" size="xl">Book a table</Button></Magnetic>
+ * ```
+ */
+export declare const Magnetic: React.ForwardRefExoticComponent<MagneticProps & React.RefAttributes<HTMLSpanElement>>;