@pathscale/ui 0.0.106 → 0.0.107

package/dist/index.d.ts

@@ -90,4 +90,5 @@ export { default as Toggle } from "./components/toggle";
 export { default as Tooltip } from "./components/tooltip";
 export { default as WindowMockup, type WindowMockupProps, } from "./components/windowmockup";
 export * from "./stores";
+export * from "./motion";
 export { default } from "./components/connectionstatus";

package/dist/index.js

@@ -269,19 +269,19 @@ function twJoin() {
     let resolvedValue;
     let string = '';
     while(index < arguments.length)if (argument = arguments[index++]) {
-        if (resolvedValue = toValue(argument)) {
+        if (resolvedValue = bundle_mjs_toValue(argument)) {
             string && (string += ' ');
             string += resolvedValue;
         }
     }
     return string;
 }
-const toValue = (mix)=>{
+const bundle_mjs_toValue = (mix)=>{
     if ('string' == typeof mix) return mix;
     let resolvedValue;
     let string = '';
     for(let k = 0; k < mix.length; k++)if (mix[k]) {
-        if (resolvedValue = toValue(mix[k])) {
+        if (resolvedValue = bundle_mjs_toValue(mix[k])) {
             string && (string += ' ');
             string += resolvedValue;
         }
@@ -12923,4 +12923,491 @@ const WindowMockup = (props)=>{
     })();
 };
 const windowmockup_WindowMockup = WindowMockup;
-export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, EnhancedTable, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, showcase_section_ShowcaseSection as ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, createStreamingTableStore, connectionstatus_ConnectionStatus as default, toastStore, useDesktop, useFormValidation };
+const easeOutCubic = (t)=>1 - Math.pow(1 - t, 3);
+const easeInCubic = (t)=>t * t * t;
+const easeInOutCubic = (t)=>t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+const resolveEase = (easing)=>{
+    if ("function" == typeof easing) return easing;
+    switch(easing){
+        case "ease-in":
+            return easeInCubic;
+        case "ease-in-out":
+            return easeInOutCubic;
+        case "linear":
+            return (t)=>t;
+        case "ease-out":
+        default:
+            return easeOutCubic;
+    }
+};
+const immediateDriver = ({ to, onUpdate, onComplete })=>{
+    onUpdate(to);
+    onComplete?.();
+    return {
+        stop: ()=>{}
+    };
+};
+let activeDriver = immediateDriver;
+const setMotionDriver = (driver)=>{
+    activeDriver = driver;
+};
+const getMotionDriver = ()=>activeDriver;
+const resolveDuration = (transition)=>Math.max(0, (transition?.duration ?? 0) * 1000);
+const resolveDelay = (transition)=>Math.max(0, (transition?.delay ?? 0) * 1000);
+const readOpacity = (el)=>{
+    const value = Number.parseFloat(getComputedStyle(el).opacity);
+    return Number.isFinite(value) ? value : 1;
+};
+const runMotion = (el, from, to, transition, onComplete)=>{
+    const duration = resolveDuration(transition);
+    const delay = resolveDelay(transition);
+    const ease = resolveEase(transition?.easing);
+    const driver = getMotionDriver();
+    const controls = [];
+    const shouldTransform = void 0 !== from.x || void 0 !== from.y || void 0 !== from.scale || void 0 !== to.x || void 0 !== to.y || void 0 !== to.scale;
+    const transformState = {
+        x: from.x ?? 0,
+        y: from.y ?? 0,
+        scale: from.scale ?? 1
+    };
+    const applyTransform = ()=>{
+        if (!shouldTransform) return;
+        el.style.transform = `translate3d(${transformState.x}px, ${transformState.y}px, 0) scale(${transformState.scale})`;
+    };
+    if (void 0 !== from.opacity) el.style.opacity = String(from.opacity);
+    applyTransform();
+    const animationTargets = Object.keys(to);
+    if (0 === animationTargets.length) {
+        onComplete?.();
+        return {
+            stop: ()=>{}
+        };
+    }
+    let remaining = animationTargets.length;
+    const handleComplete = ()=>{
+        remaining -= 1;
+        if (remaining <= 0) onComplete?.();
+    };
+    const start = ()=>{
+        animationTargets.forEach((key)=>{
+            if ("opacity" === key) {
+                const fromValue = from.opacity ?? (void 0 !== to.opacity ? readOpacity(el) : 1);
+                const control = driver({
+                    from: fromValue,
+                    to: to.opacity ?? fromValue,
+                    duration,
+                    ease,
+                    onUpdate: (latest)=>{
+                        el.style.opacity = String(latest);
+                    },
+                    onComplete: handleComplete
+                });
+                controls.push(control);
+                return;
+            }
+            const fromValue = "scale" === key ? from.scale ?? 1 : "x" === key ? from.x ?? 0 : from.y ?? 0;
+            const toValue = to[key] ?? fromValue;
+            const control = driver({
+                from: fromValue,
+                to: toValue,
+                duration,
+                ease,
+                onUpdate: (latest)=>{
+                    if (!shouldTransform) return;
+                    if ("x" === key) transformState.x = latest;
+                    if ("y" === key) transformState.y = latest;
+                    if ("scale" === key) transformState.scale = latest;
+                    applyTransform();
+                },
+                onComplete: handleComplete
+            });
+            controls.push(control);
+        });
+    };
+    let timeoutId = null;
+    if (delay > 0) timeoutId = window.setTimeout(start, delay);
+    else start();
+    return {
+        stop: ()=>{
+            if (null !== timeoutId) clearTimeout(timeoutId);
+            controls.forEach((control)=>control.stop());
+        }
+    };
+};
+const prefersReducedMotion = ()=>globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
+const motionDurations = {
+    route: 0.18,
+    routeAuth: 0.35,
+    fast: 0.2,
+    base: 0.3,
+    slow: 0.45
+};
+const motionEasings = {
+    out: "ease-out",
+    inOut: "ease-in-out"
+};
+const motionDistances = {
+    sm: 6,
+    md: 12,
+    lg: 20,
+    slideIn: 40
+};
+const defaultMotionTokens = {
+    durations: {
+        ...motionDurations
+    },
+    easings: {
+        ...motionEasings
+    },
+    distances: {
+        ...motionDistances
+    }
+};
+const mergeDefined = (base, overrides)=>{
+    const next = {
+        ...base
+    };
+    if (!overrides) return next;
+    for (const [key, value] of Object.entries(overrides))if (void 0 !== value) next[key] = value;
+    return next;
+};
+const mergeMotionTokens = (base, overrides)=>({
+        durations: mergeDefined(base.durations, overrides?.durations),
+        easings: mergeDefined(base.easings, overrides?.easings),
+        distances: mergeDefined(base.distances, overrides?.distances)
+    });
+const createMotionPresets = (tokens)=>{
+    const durations = tokens.durations;
+    const easings = tokens.easings;
+    const distances = tokens.distances;
+    return {
+        route: {
+            initial: {
+                opacity: 0
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0
+            },
+            transition: {
+                duration: durations.route,
+                easing: easings.out
+            }
+        },
+        routeAuth: {
+            initial: {
+                opacity: 0,
+                x: distances.slideIn
+            },
+            animate: {
+                opacity: 1,
+                x: 0
+            },
+            exit: {
+                opacity: 0,
+                x: -distances.slideIn
+            },
+            transition: {
+                duration: durations.routeAuth,
+                easing: easings.inOut
+            }
+        },
+        routeAuthBack: {
+            initial: {
+                opacity: 0,
+                x: -distances.slideIn
+            },
+            animate: {
+                opacity: 1,
+                x: 0
+            },
+            exit: {
+                opacity: 0,
+                x: distances.slideIn
+            },
+            transition: {
+                duration: durations.routeAuth,
+                easing: easings.inOut
+            }
+        },
+        authSwap: {
+            initial: {
+                opacity: 0.92
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0.92
+            },
+            transition: {
+                duration: durations.fast,
+                easing: easings.out
+            }
+        },
+        fade: {
+            initial: {
+                opacity: 0
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0
+            },
+            transition: {
+                duration: durations.base,
+                easing: easings.out,
+                delay: 0.08
+            }
+        },
+        fadeUp: {
+            initial: {
+                opacity: 0,
+                y: distances.sm
+            },
+            animate: {
+                opacity: 1,
+                y: 0
+            },
+            exit: {
+                opacity: 0,
+                y: -distances.sm
+            },
+            transition: {
+                duration: durations.base,
+                easing: easings.out,
+                delay: 0.08
+            }
+        },
+        scaleIn: {
+            initial: {
+                opacity: 0,
+                scale: 0.96
+            },
+            animate: {
+                opacity: 1,
+                scale: 1
+            },
+            exit: {
+                opacity: 0,
+                scale: 0.96
+            },
+            transition: {
+                duration: durations.fast,
+                easing: easings.out,
+                delay: 0.08
+            }
+        },
+        routeDashboard: {
+            initial: {
+                opacity: 0,
+                y: distances.md,
+                scale: 0.985
+            },
+            animate: {
+                opacity: 1,
+                y: 0,
+                scale: 1
+            },
+            exit: {
+                opacity: 0,
+                y: -distances.sm,
+                scale: 0.985
+            },
+            transition: {
+                duration: durations.route,
+                easing: easings.out
+            }
+        }
+    };
+};
+const motionPresets = createMotionPresets(defaultMotionTokens);
+const routeTransition = motionPresets.route;
+const noMotion = {
+    initial: {
+        opacity: 1,
+        y: 0,
+        x: 0,
+        scale: 1
+    },
+    animate: {
+        opacity: 1,
+        y: 0,
+        x: 0,
+        scale: 1
+    },
+    exit: {
+        opacity: 1,
+        y: 0,
+        x: 0,
+        scale: 1
+    },
+    transition: {
+        duration: 0
+    }
+};
+const presets_getPreset = (name)=>motionPresets[name];
+const presets_registerPreset = (name, preset)=>{
+    motionPresets[name] = preset;
+};
+const presets_resolvePreset = (name, options)=>{
+    const reduce = options?.reduceMotion ?? prefersReducedMotion();
+    if (reduce) return noMotion;
+    return motionPresets[name] ?? noMotion;
+};
+var MotionDiv_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const MotionDiv_MotionDiv = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "initial",
+        "animate",
+        "exit",
+        "transition",
+        "isExiting",
+        "onExitComplete",
+        "animateKey",
+        "children",
+        "ref"
+    ]);
+    const [elementRef, setElementRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
+    let activeControl = null;
+    let lastTrigger;
+    let lastIsExiting = false;
+    let hasAnimated = false;
+    const stopActive = ()=>{
+        activeControl?.stop();
+        activeControl = null;
+    };
+    const runEnter = (target, from, to, transition)=>{
+        if (!to) return;
+        stopActive();
+        activeControl = runMotion(target, from ?? {}, to ?? {}, transition);
+    };
+    const runExit = (target, from, to, transition, onComplete)=>{
+        if (!to) return void onComplete?.();
+        stopActive();
+        activeControl = runMotion(target, from ?? {}, to ?? {}, transition, onComplete);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const target = elementRef();
+        if (!target) return;
+        const isExiting = Boolean(local.isExiting);
+        const trigger = local.animateKey;
+        const initial = local.initial;
+        const animate = local.animate;
+        const exit = local.exit;
+        const transition = local.transition;
+        const onComplete = local.onExitComplete;
+        if (isExiting) {
+            if (!lastIsExiting) {
+                lastIsExiting = true;
+                hasAnimated = false;
+                runExit(target, animate ?? initial, exit, transition, onComplete);
+            }
+            return;
+        }
+        lastIsExiting = false;
+        if (!hasAnimated || trigger !== lastTrigger) {
+            lastTrigger = trigger;
+            hasAnimated = true;
+            runEnter(target, initial, animate, transition);
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        stopActive();
+    });
+    return (()=>{
+        var _el$ = MotionDiv_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
+            setElementRef(el);
+            if ("function" == typeof local.ref) local.ref(el);
+        }, _el$);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, rest, false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const MotionDiv = MotionDiv_MotionDiv;
+const createPopmotionDriver = (animate)=>(options)=>animate(options);
+const enablePopmotion = (animate)=>{
+    setMotionDriver(createPopmotionDriver(animate));
+};
+const createMotionSystem = (config)=>{
+    let tokens = mergeMotionTokens(defaultMotionTokens, config?.tokens);
+    let customPresets = {
+        ...config?.presets ?? {}
+    };
+    let basePresets = createMotionPresets(tokens);
+    let presets = {
+        ...basePresets,
+        ...customPresets
+    };
+    const reduceMotion = config?.reduceMotion ?? prefersReducedMotion;
+    let noMotionPreset = config?.noMotionPreset ?? noMotion;
+    const rebuildPresets = ()=>{
+        basePresets = createMotionPresets(tokens);
+        presets = {
+            ...basePresets,
+            ...customPresets
+        };
+    };
+    const getTokens = ()=>tokens;
+    const getPresets = ()=>presets;
+    const getPreset = (name)=>presets[name];
+    const registerPreset = (name, preset)=>{
+        customPresets = {
+            ...customPresets,
+            [name]: preset
+        };
+        presets = {
+            ...basePresets,
+            ...customPresets
+        };
+    };
+    const overrideTokens = (overrides)=>{
+        tokens = mergeMotionTokens(tokens, overrides);
+        rebuildPresets();
+        return tokens;
+    };
+    const resolvePreset = (name, options)=>{
+        const reduce = options?.reduceMotion ?? reduceMotion();
+        if (reduce) return noMotionPreset;
+        return presets[name] ?? noMotionPreset;
+    };
+    const setNoMotionPreset = (preset)=>{
+        noMotionPreset = preset;
+    };
+    return {
+        getTokens,
+        getPresets,
+        getPreset,
+        registerPreset,
+        overrideTokens,
+        resolvePreset,
+        setNoMotionPreset
+    };
+};
+const createRouteTransitionResolver = (options)=>{
+    const resolvePreset = options.resolvePreset ?? ((name)=>motionPresets[name]);
+    const reduceMotion = options.reduceMotion ?? prefersReducedMotion;
+    const fallback = options.fallback ?? routeTransition;
+    const reduceMotionPreset = options.reduceMotionPreset ?? noMotion;
+    return (from, to)=>{
+        if (reduceMotion()) return reduceMotionPreset;
+        for (const rule of options.rules){
+            const result = rule(from, to);
+            if (result) {
+                if ("string" == typeof result) {
+                    const resolved = resolvePreset(result);
+                    if (resolved) return resolved;
+                    continue;
+                }
+                return result;
+            }
+        }
+        return fallback ?? noMotion;
+    };
+};
+export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, EnhancedTable, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, MotionDiv, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, showcase_section_ShowcaseSection as ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, createMotionPresets, createMotionSystem, createPopmotionDriver, createRouteTransitionResolver, createStreamingTableStore, connectionstatus_ConnectionStatus as default, defaultMotionTokens, enablePopmotion, getMotionDriver, presets_getPreset as getPreset, immediateDriver, mergeMotionTokens, motionDistances, motionDurations, motionEasings, motionPresets, noMotion, prefersReducedMotion, presets_registerPreset as registerPreset, resolveEase, presets_resolvePreset as resolvePreset, routeTransition, runMotion, setMotionDriver, toastStore, useDesktop, useFormValidation };

package/dist/motion/driver.d.ts

@@ -0,0 +1,5 @@
+import type { MotionDriver } from "./types";
+declare const immediateDriver: MotionDriver;
+export declare const setMotionDriver: (driver: MotionDriver) => void;
+export declare const getMotionDriver: () => MotionDriver;
+export { immediateDriver };

package/dist/motion/easing.d.ts

@@ -0,0 +1,2 @@
+import type { MotionEasing } from "./types";
+export declare const resolveEase: (easing?: MotionEasing) => (t: number) => number;

package/dist/motion/engine.d.ts

@@ -0,0 +1,4 @@
+import type { MotionState, MotionTransition } from "./types";
+export declare const runMotion: (el: HTMLElement, from: MotionState, to: MotionState, transition?: MotionTransition, onComplete?: () => void) => {
+    stop: () => void;
+};

package/dist/motion/index.d.ts

@@ -0,0 +1,11 @@
+export type { MotionDriver, MotionDriverOptions, MotionEasing, MotionPreset, MotionState, MotionTransition, MotionTokenOverrides, MotionTokens, } from "./types";
+export { resolveEase } from "./easing";
+export { getMotionDriver, setMotionDriver, immediateDriver } from "./driver";
+export { runMotion } from "./engine";
+export { prefersReducedMotion } from "./reduced-motion";
+export { defaultMotionTokens, mergeMotionTokens, motionDurations, motionDistances, motionEasings, } from "./tokens";
+export { getPreset, createMotionPresets, motionPresets, noMotion, registerPreset, resolvePreset, routeTransition, } from "./presets";
+export { MotionDiv, type MotionDivProps } from "./solid";
+export { createPopmotionDriver, enablePopmotion, type PopmotionAnimate, } from "./popmotion";
+export { createMotionSystem, type MotionSystemConfig } from "./system";
+export { createRouteTransitionResolver, type RouteTransitionRule, type RouteTransitionRuleResult, type RouteTransitionResolverOptions, } from "./route";

package/dist/motion/popmotion.d.ts

@@ -0,0 +1,6 @@
+import type { MotionDriver, MotionDriverOptions } from "./types";
+export type PopmotionAnimate = (options: MotionDriverOptions) => {
+    stop: () => void;
+};
+export declare const createPopmotionDriver: (animate: PopmotionAnimate) => MotionDriver;
+export declare const enablePopmotion: (animate: PopmotionAnimate) => void;

package/dist/motion/presets.d.ts

@@ -0,0 +1,10 @@
+import type { MotionPreset, MotionTokens } from "./types";
+export declare const createMotionPresets: (tokens: MotionTokens) => Record<string, MotionPreset>;
+export declare const motionPresets: Record<string, MotionPreset>;
+export declare const routeTransition: MotionPreset;
+export declare const noMotion: MotionPreset;
+export declare const getPreset: (name: string) => MotionPreset;
+export declare const registerPreset: (name: string, preset: MotionPreset) => void;
+export declare const resolvePreset: (name: string, options?: {
+    reduceMotion?: boolean;
+}) => MotionPreset;

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

@@ -0,0 +1 @@
+export declare const prefersReducedMotion: () => boolean;

package/dist/motion/route.d.ts

@@ -0,0 +1,11 @@
+import type { MotionPreset } from "./types";
+export type RouteTransitionRuleResult = MotionPreset | string | null | undefined;
+export type RouteTransitionRule = (from: string, to: string) => RouteTransitionRuleResult;
+export type RouteTransitionResolverOptions = {
+    rules: RouteTransitionRule[];
+    fallback?: MotionPreset;
+    resolvePreset?: (name: string) => MotionPreset | undefined;
+    reduceMotion?: () => boolean;
+    reduceMotionPreset?: MotionPreset;
+};
+export declare const createRouteTransitionResolver: (options: RouteTransitionResolverOptions) => (from: string, to: string) => MotionPreset;

package/dist/motion/solid/MotionDiv.d.ts

@@ -0,0 +1,13 @@
+import { type Component, type JSX } from "solid-js";
+import type { MotionState, MotionTransition } from "../types";
+export interface MotionDivProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    initial?: MotionState;
+    animate?: MotionState;
+    exit?: MotionState;
+    transition?: MotionTransition;
+    isExiting?: boolean;
+    onExitComplete?: () => void;
+    animateKey?: unknown;
+}
+export declare const MotionDiv: Component<MotionDivProps>;
+export default MotionDiv;

package/dist/motion/solid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MotionDiv } from "./MotionDiv";
+export type { MotionDivProps } from "./MotionDiv";

package/dist/motion/system.d.ts

@@ -0,0 +1,20 @@
+import type { MotionPreset, MotionTokenOverrides, MotionTokens } from "./types";
+export type MotionSystemConfig = {
+    tokens?: MotionTokenOverrides;
+    presets?: Record<string, MotionPreset>;
+    reduceMotion?: () => boolean;
+    noMotionPreset?: MotionPreset;
+};
+export declare const createMotionSystem: (config?: MotionSystemConfig) => {
+    getTokens: () => MotionTokens;
+    getPresets: () => {
+        [x: string]: MotionPreset;
+    };
+    getPreset: (name: string) => MotionPreset;
+    registerPreset: (name: string, preset: MotionPreset) => void;
+    overrideTokens: (overrides: MotionTokenOverrides) => MotionTokens;
+    resolvePreset: (name: string, options?: {
+        reduceMotion?: boolean;
+    }) => MotionPreset;
+    setNoMotionPreset: (preset: MotionPreset) => void;
+};

package/dist/motion/tokens.d.ts

@@ -0,0 +1,6 @@
+import type { MotionEasing, MotionTokens, MotionTokenOverrides } from "./types";
+export declare const motionDurations: Record<string, number>;
+export declare const motionEasings: Record<string, MotionEasing>;
+export declare const motionDistances: Record<string, number>;
+export declare const defaultMotionTokens: MotionTokens;
+export declare const mergeMotionTokens: (base: MotionTokens, overrides?: MotionTokenOverrides) => MotionTokens;

package/dist/motion/types.d.ts

@@ -0,0 +1,39 @@
+export type MotionState = {
+    opacity?: number;
+    x?: number;
+    y?: number;
+    scale?: number;
+};
+export type MotionEasing = "ease-in" | "ease-out" | "ease-in-out" | "linear" | ((t: number) => number);
+export type MotionTransition = {
+    duration?: number;
+    easing?: MotionEasing;
+    delay?: number;
+};
+export type MotionPreset = {
+    initial: MotionState;
+    animate: MotionState;
+    exit: MotionState;
+    transition?: MotionTransition;
+};
+export type MotionTokens = {
+    durations: Record<string, number>;
+    easings: Record<string, MotionEasing>;
+    distances: Record<string, number>;
+};
+export type MotionTokenOverrides = {
+    durations?: Partial<Record<string, number>>;
+    easings?: Partial<Record<string, MotionEasing>>;
+    distances?: Partial<Record<string, number>>;
+};
+export type MotionDriverOptions = {
+    from: number;
+    to: number;
+    duration: number;
+    ease: (t: number) => number;
+    onUpdate: (value: number) => void;
+    onComplete?: () => void;
+};
+export type MotionDriver = (options: MotionDriverOptions) => {
+    stop: () => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.106",
+  "version": "0.0.107",
   "author": "pathscale",
   "repository": {
     "type": "git",
@@ -64,8 +64,14 @@
     "@felte/validator-zod": "^1.0.0",
     "@tanstack/solid-table": "^8.0.0",
     "solid-js": "^1.9",
+    "popmotion": "^11.0.5",
     "zod": "^3.22.0"
   },
+  "peerDependenciesMeta": {
+    "popmotion": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "rslib build && bun scripts/copy-css.js",
     "build:watch": "rslib build --watch",