motion-start 0.0.1 → 0.0.3

package/{src/value/use-spring.ts → dist/value/use-spring.js}

@@ -1,84 +1,64 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { SpringOptions } from "popmotion";
-import { MotionValue } from "../value";
-
-/** 
-based on framer-motion@4.1.16,
-Copyright (c) 2018 Framer B.V.
-*/
-
-import { fixed } from '../utils/fix-process-env';
-import { getContext } from "svelte"
-import { MotionConfigContext, type MotionConfigContextObject } from "../context/MotionConfigContext"
-import { get, type Writable } from 'svelte/store';
-import { useMotionValue } from "./use-motion-value";
-import { isMotionValue } from "./utils/is-motion-value";
-import { animate } from "popmotion"
-
-/**
- * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.
- *
- * It can either work as a stand-alone `MotionValue` by initialising it with a value, or as a subscriber
- * to another `MotionValue`.
- *
- * @remarks
- *
- * ```jsx
- * const x = useSpring(0, { stiffness: 300 })
- * const y = useSpring(x, { damping: 10 })
- * ```
- *
- * @param inputValue - `MotionValue` or number. If provided a `MotionValue`, when the input `MotionValue` changes, the created `MotionValue` will spring towards that value.
- * @param springConfig - Configuration options for the spring.
- * @returns `MotionValue`
- *
- * @public
- */
-export const useSpring = (source: MotionValue | number, config: SpringOptions = {}, isCustom = false) => {
-
-    const mcc: Writable<MotionConfigContextObject> = getContext(MotionConfigContext) || MotionConfigContext(isCustom);
-
-    let activeSpringAnimation: { stop: () => void } | null = null;
-
-    let value = useMotionValue(isMotionValue(source) ? source.get() : source) as MotionValue<any> & { reset: (_: any, config: SpringOptions) => void };
-
-    let cleanup: () => void;
-    const update = (_source: typeof source, _config: typeof config) => {
-        value.attach((v, set) => {
-
-
-            const { isStatic } = get(mcc);
-
-            if (isStatic) {
-                return set(v);
-            }
-            if (activeSpringAnimation) {
-                activeSpringAnimation.stop();
-            }
-            activeSpringAnimation = animate({
-                from: value.get(),
-                to: v,
-                velocity: value.getVelocity(),
-                ..._config,
-                onUpdate: set,
-            })
-
-            return value.get();
-        })
-        cleanup?.()
-        return isMotionValue(_source) ?
-            _source.onChange(v => value.set(parseFloat(v))) :
-            undefined
-    }
-
-    update(source, config);
-
-    value.reset = update;
-    
-    return value;
-}
-
-//export { default as UseSpring } from './UseSpring.svelte';
+import { MotionValue } from ".";
+/**
+based on framer-motion@4.1.16,
+Copyright (c) 2018 Framer B.V.
+*/
+import { fixed } from '../utils/fix-process-env';
+import { getContext } from "svelte";
+import { MotionConfigContext } from "../context/MotionConfigContext";
+import { get } from 'svelte/store';
+import { useMotionValue } from "./use-motion-value";
+import { isMotionValue } from "./utils/is-motion-value";
+import { animate } from "popmotion";
+/**
+ * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.
+ *
+ * It can either work as a stand-alone `MotionValue` by initialising it with a value, or as a subscriber
+ * to another `MotionValue`.
+ *
+ * @remarks
+ *
+ * ```jsx
+ * const x = useSpring(0, { stiffness: 300 })
+ * const y = useSpring(x, { damping: 10 })
+ * ```
+ *
+ * @param inputValue - `MotionValue` or number. If provided a `MotionValue`, when the input `MotionValue` changes, the created `MotionValue` will spring towards that value.
+ * @param springConfig - Configuration options for the spring.
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+export const useSpring = (source, config = {}, isCustom = false) => {
+    const mcc = getContext(MotionConfigContext) || MotionConfigContext(isCustom);
+    let activeSpringAnimation = null;
+    let value = useMotionValue(isMotionValue(source) ? source.get() : source);
+    let cleanup;
+    const update = (_source, _config) => {
+        value.attach((v, set) => {
+            const { isStatic } = get(mcc);
+            if (isStatic) {
+                return set(v);
+            }
+            if (activeSpringAnimation) {
+                activeSpringAnimation.stop();
+            }
+            activeSpringAnimation = animate({
+                from: value.get(),
+                to: v,
+                velocity: value.getVelocity(),
+                ..._config,
+                onUpdate: set,
+            });
+            return value.get();
+        });
+        cleanup?.();
+        return isMotionValue(_source) ?
+            _source.onChange(v => value.set(parseFloat(v))) :
+            undefined;
+    };
+    update(source, config);
+    value.reset = update;
+    return value;
+};
+//export { default as UseSpring } from './UseSpring.svelte';

package/dist/value/use-transform.d.ts

@@ -0,0 +1,87 @@
+import type { TransformOptions } from '../utils/transform';
+/**
+ based on framer-motion@4.1.17,
+ Copyright (c) 2018 Framer B.V.
+ */
+import type { MotionValue } from '.';
+export type InputRange = number[];
+type SingleTransformer<I, O> = (input: I) => O;
+/**
+ * Create a `MotionValue` that transforms the output of another `MotionValue` by mapping it from one range of values into another.
+ *
+ * @remarks
+ *
+ * Given an input range of `[-200, -100, 100, 200]` and an output range of
+ * `[0, 1, 1, 0]`, the returned `MotionValue` will:
+ *
+ * - When provided a value between `-200` and `-100`, will return a value between `0` and  `1`.
+ * - When provided a value between `-100` and `100`, will return `1`.
+ * - When provided a value between `100` and `200`, will return a value between `1` and  `0`
+ *
+ *
+ * The input range must be a linear series of numbers. The output range
+ * can be any value type supported by Framer Motion: numbers, colors, shadows, etc.
+ *
+ * Every value in the output range must be of the same type and in the same format.
+ *
+ * @motion
+ *
+ * ```jsx
+ * <script>
+ *   const x = useMotionValue(0)
+ *   const xRange = [-200, -100, 100, 200]
+ *   const opacityRange = [0, 1, 1, 0]
+ *   const opacity = useTransform(x, xRange, opacityRange)
+ * </script>
+ *
+ * <Motion let:motion
+ *      animate={{ x: 200 }}
+ *      style={{ opacity, x }}
+ *  >
+ *     <div use:motion/>
+ *  </Motion>
+ * ```
+ *
+ * @param inputValue - `MotionValue`
+ * @param inputRange - A linear series of numbers (either all increasing or decreasing)
+ * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
+ * @param options -
+ *
+ *  - clamp: boolean. Clamp values to within the given range. Defaults to `true`
+ *  - ease: EasingFunction[]. Easing functions to use on the interpolations between each value in the input and output ranges. If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition between each.
+ *
+ * @returns `MotionValue & { reset: (value: MotionValue<number>, inputRange: InputRange, outputRange: O[], options?: TransformOptions<O>) => void }`
+ *
+ * @public
+ */
+export declare function useTransform<I, O>(value: MotionValue<number>, inputRange: InputRange, outputRange: O[], options?: TransformOptions<O>): MotionValue<O> & {
+    reset: (value: MotionValue<number>, inputRange: InputRange, outputRange: O[], options?: TransformOptions<O>) => void;
+};
+/**
+ * Create a `MotionValue` that transforms the output of another `MotionValue` through a function.
+ * In this example, `y` will always be double `x`.
+ *
+ * @motion
+ *
+ * ```jsx
+ * <script>
+ *   const x = useMotionValue(10)
+ *   const y = useTransform(x, value => value * 2)
+ * </script>
+ *
+ * <Motion let:motion style={{ x, y }}>
+ *   <div use:motion/>
+ * </Motion>
+ * ```
+ *
+ * @param input - A `MotionValue` that will pass its latest value through `transform` to update the returned `MotionValue`.
+ * @param transform - A function that accepts the latest value from `input` and returns a new value.
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+export declare function useTransform<I, O>(input: MotionValue<I>, transformer: SingleTransformer<I, O>): MotionValue<O> & {
+    reset: (input: MotionValue<I>, transformer: SingleTransformer<I, O>) => void;
+};
+export {};
+//# sourceMappingURL=use-transform.d.ts.map

package/dist/value/use-transform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-transform.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/value/use-transform.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D;;;GAGG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAKrC,MAAM,MAAM,UAAU,GAAG,MAAM,EAAE,CAAC;AAClC,KAAK,iBAAiB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC;AAU/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,CAAC,EAChC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,EAC1B,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,CAAC,EAAE,EAChB,OAAO,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAC3B,WAAW,CAAC,CAAC,CAAC,GAAG;IACnB,KAAK,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACrH,CAAC;AACF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,CAAC,EAChC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EACrB,WAAW,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,GAClC,WAAW,CAAC,CAAC,CAAC,GAAG;IAAE,KAAK,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAA;CAAE,CAAC"}

package/dist/value/use-transform.js

@@ -0,0 +1,77 @@
+import { transform } from '../utils/transform';
+import { useCombineMotionValues } from './use-combine-values';
+/**
+ * Pass an array of `MotionValue`s and a function to combine them. In this example, `z` will be the `x` multiplied by `y`.
+ *
+ * @motion
+ *
+ * ```jsx
+ * <script>
+ *   const x = useMotionValue(0)
+ *   const y = useMotionValue(0)
+ *   const z = useTransform([x, y], [latestX, latestY] => latestX * latestY)
+ * </script>
+ *
+ * <Motion let:motion style={{ x, y, z }}>
+ *   return <div use:motion/>
+ * </Motion>
+ * ```
+ *
+ * @param input - An array of `MotionValue`s that will pass their latest values through `transform` to update the returned `MotionValue`.
+ * @param transform - A function that accepts the latest values from `input` and returns a new value.
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+// export function useTransform<I, O>(input: MotionValue<string | number>[], transformer: MultiTransformer<I, O>):
+//     MotionValue<O> & { reset: (input: MotionValue<string | number>[], transformer: MultiTransformer<I, O>) => void };
+// export function useTransform<I, O>(
+// 	input: MotionValue<string>[] | MotionValue<number>[] | MotionValue<string | number>[],
+// 	transformer: MultiTransformer<I, O>
+// ): MotionValue<O> & { reset: (input: MotionValue<string>[] | MotionValue<number>[] | MotionValue<string | number>[], transformer: MultiTransformer<I, O>) => void };
+// export function useTransform<I, O>(transformer: () => O): MotionValue<O>;
+/**
+ * Pass an array of `MotionValue`s and a function to combine them. In this example, `z` will be the `x` multiplied by `y`.
+ *
+ * ```jsx
+ * export const MyComponent = () => {
+ *   const x = useMotionValue(0)
+ *   const y = useMotionValue(0)
+ *   const z = useTransform([x, y], ([latestX, latestY]) => latestX * latestY)
+ *
+ *   return <motion.div style={{ x, y, z }} />
+ * }
+ * ```
+ *
+ * @param input - An array of `MotionValue`s that will pass their latest values through `transform` to update the returned `MotionValue`.
+ * @param transform - A function that accepts the latest values from `input` and returns a new value.
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+export function useTransform(input, inputRangeOrTransformer, outputRange, options) {
+    let latest = [];
+    const update = (input, inputRangeOrTransformer, outputRange, options) => {
+        const transformer = typeof inputRangeOrTransformer === 'function'
+            ? inputRangeOrTransformer
+            : transform(inputRangeOrTransformer, outputRange, options);
+        const values = Array.isArray(input) ? input : [input];
+        const _transformer = Array.isArray(input) ? transformer : ([latest]) => transformer(latest);
+        return [
+            values,
+            () => {
+                latest.length = 0;
+                const numValues = values.length;
+                for (let i = 0; i < numValues; i++) {
+                    latest[i] = values[i].get();
+                }
+                return _transformer(latest);
+            },
+        ];
+    };
+    const comb = useCombineMotionValues(...update(input, inputRangeOrTransformer, outputRange, options));
+    comb.updateInner = comb.reset;
+    comb.reset = (input, inputRangeOrTransformer, outputRange, options) => comb.updateInner(...update(input, inputRangeOrTransformer, outputRange, options));
+    return comb;
+}
+// export { default as UseTransform } from './UseTransform.svelte';

package/dist/value/use-velocity.d.ts

@@ -0,0 +1,20 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import { MotionValue } from "./index.js";
+/**
+ * Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes.
+ *
+ * ```javascript
+ * const x = useMotionValue(0)
+ * const xVelocity = useVelocity(x)
+ * const xAcceleration = useVelocity(xVelocity)
+ * ```
+ *
+ * @public
+ */
+export declare const useVelocity: (value: MotionValue<number>) => MotionValue<number> & {
+    reset: (value: MotionValue<number>) => void;
+};
+//# sourceMappingURL=use-velocity.d.ts.map

package/dist/value/use-velocity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-velocity.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/value/use-velocity.ts"],"names":[],"mappings":"AACA;;;EAGE;AACF,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,UAAY,WAAW,CAAC,MAAM,CAAC;mBAI7B,WAAW,CAAC,MAAM,CAAC;CAqB5C,CAAA"}

package/{src/value/use-velocity.ts → dist/value/use-velocity.js}

@@ -1,44 +1,39 @@
-
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import { MotionValue } from "./index.js";
-import { useMotionValue } from "./use-motion-value.js"
-/**
- * Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes.
- *
- * ```javascript
- * const x = useMotionValue(0)
- * const xVelocity = useVelocity(x)
- * const xAcceleration = useVelocity(xVelocity)
- * ```
- *
- * @public
- */
-export const useVelocity = (value : MotionValue<number>) => {
-    let val = value;
-    let cleanup: () => void;
-
-    const reset = (value: MotionValue<number>) => {
-        cleanup?.();
-        val = value
-        cleanup = val.velocityUpdateSubscribers.add((newVelocity) => {
-            velocity.set(newVelocity);
-        })
-    }
-    
-    const velocity = useMotionValue(value.getVelocity(), () => {
-        cleanup?.();
-        cleanup = val.velocityUpdateSubscribers.add((newVelocity) => {
-            velocity.set(newVelocity);
-        })
-        return () => {
-            cleanup?.()     
-        }
-    }) as MotionValue<number> & { reset: typeof reset };
-
-    velocity.reset = reset;
-
-    return velocity;
-}
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import { MotionValue } from "./index.js";
+import { useMotionValue } from "./use-motion-value.js";
+/**
+ * Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes.
+ *
+ * ```javascript
+ * const x = useMotionValue(0)
+ * const xVelocity = useVelocity(x)
+ * const xAcceleration = useVelocity(xVelocity)
+ * ```
+ *
+ * @public
+ */
+export const useVelocity = (value) => {
+    let val = value;
+    let cleanup;
+    const reset = (value) => {
+        cleanup?.();
+        val = value;
+        cleanup = val.velocityUpdateSubscribers.add((newVelocity) => {
+            velocity.set(newVelocity);
+        });
+    };
+    const velocity = useMotionValue(value.getVelocity(), () => {
+        cleanup?.();
+        cleanup = val.velocityUpdateSubscribers.add((newVelocity) => {
+            velocity.set(newVelocity);
+        });
+        return () => {
+            cleanup?.();
+        };
+    });
+    velocity.reset = reset;
+    return velocity;
+};

package/dist/value/utils/is-motion-value.d.ts

@@ -0,0 +1,12 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionValue } from "..";
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+declare var isMotionValue: (value: any) => value is MotionValue;
+export { isMotionValue };
+//# sourceMappingURL=is-motion-value.d.ts.map

package/dist/value/utils/is-motion-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-motion-value.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/value/utils/is-motion-value.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEtC;;;EAGE;AACF,QAAA,IAAI,aAAa,UAAoB,GAAG,KAAG,KAAK,IAAI,WAEnD,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/value/utils/is-motion-value.js

@@ -0,0 +1,8 @@
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+var isMotionValue = function (value) {
+    return value !== null && typeof value === "object" && value.getVelocity;
+};
+export { isMotionValue };

package/dist/value/utils/resolve-motion-value.d.ts

@@ -0,0 +1,16 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import { MotionValue } from "..";
+import type { CustomValueType } from "../../types";
+/**
+ * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
+ *
+ * TODO: Remove and move to library
+ *
+ * @internal
+ */
+declare function resolveMotionValue(value?: string | number | CustomValueType | MotionValue): string | number;
+export { resolveMotionValue };
+//# sourceMappingURL=resolve-motion-value.d.ts.map

package/dist/value/utils/resolve-motion-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-motion-value.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/value/utils/resolve-motion-value.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AACjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AASnD;;;;;;GAMG;AACH,iBAAS,kBAAkB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,eAAe,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAKpG;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/{src/value/utils/resolve-motion-value.ts → dist/value/utils/resolve-motion-value.js}

@@ -1,29 +1,25 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import { MotionValue } from "..";
-import type { CustomValueType } from "../../types";
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-import { isCustomValue } from '../../utils/resolve-value.js';
-import { isMotionValue } from './is-motion-value.js';
-
-/**
- * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
- *
- * TODO: Remove and move to library
- *
- * @internal
- */
-function resolveMotionValue(value?: string | number | CustomValueType | MotionValue): string | number {
-    var unwrappedValue = isMotionValue(value) ? value.get() : value;
-    return isCustomValue(unwrappedValue)
-        ? unwrappedValue.toValue()
-        : unwrappedValue;
-}
-
-export { resolveMotionValue };
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import { MotionValue } from "..";
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { isCustomValue } from '../../utils/resolve-value.js';
+import { isMotionValue } from './is-motion-value.js';
+/**
+ * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
+ *
+ * TODO: Remove and move to library
+ *
+ * @internal
+ */
+function resolveMotionValue(value) {
+    var unwrappedValue = isMotionValue(value) ? value.get() : value;
+    return isCustomValue(unwrappedValue)
+        ? unwrappedValue.toValue()
+        : unwrappedValue;
+}
+export { resolveMotionValue };

package/package.json

@@ -1,40 +1,54 @@
 {
   "name": "motion-start",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Svelte animation library based on the React library framer-motion.",
-  "main": "src/index.ts",
+  "main": "dist/index.js",
   "files": [
-    "./src"
+    "./dist"
   ],
   "author": "JonathonRP",
   "license": "MIT",
   "dependencies": {
-    "@changesets/cli": "^2.27.8",
-    "@types/react": "^18.3.5",
     "framesync": "^6.1.2",
     "popmotion": "^11.0.5",
     "style-value-types": "5.1.2",
-    "tslib": "^2.7.0"
+    "tslib": "^2.7.0",
+    "bits-ui": "^0.21.15",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-svelte": "^0.445.0",
+    "mode-watcher": "^0.4.1",
+    "tailwind-merge": "^2.5.2",
+    "tailwind-variants": "^0.2.1"
   },
   "devDependencies": {
-    "@emotion/is-prop-valid": "^1.3.0",
+    "@changesets/cli": "^2.27.8",
+    "@biomejs/biome": "1.9.2",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@sveltejs/package": "^2.3.5",
     "@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
     "@tsconfig/svelte": "^5.0.4",
-    "@types/node": "^20.16.5",
+    "@types/node": "^20.16.9",
     "@vitest/ui": "latest",
     "csstype": "^3.1.3",
-    "publint": "^0.2.10",
-    "svelte": "5.0.0-next.252",
+    "publint": "^0.2.11",
+    "svelte": "^5.0.0-next.259",
     "typescript": "^5.6.2",
-    "vite": "^5.4.5",
-    "vitest": "latest"
+    "vite": "^5.4.8",
+    "vitest": "latest",
+    "@sveltejs/adapter-auto": "^3.2.5",
+    "@sveltejs/kit": "^2.5.28",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.0.0-alpha.25",
+    "@types/react": "^18.3.9",
+    "tailwindcss": "^4.0.0-alpha.25"
   },
   "peerDependencies": {
-    "svelte": ">=3.35.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.0"
+    "svelte": "^5.0.0 || ^5.0.0-next.0"
   },
   "type": "module",
   "engines": {
+    "bun": ">=1.0.0",
     "pnpm": ">=8.7.0",
     "node": ">=20"
   },
@@ -53,12 +67,19 @@
     "popmotion",
     "framer-motion"
   ],
+  "trustedDependencies": [
+    "@biomejs/biome"
+  ],
   "scripts": {
-    "test": "vitest --ui",
-    "test:types": "vitest --typecheck.only --ui",
-    "build": "svelte-package --input ./src && publint --strict",
-    "check": "pnpm build && svelte-check --tsconfig ./tsconfig.json",
-    "ci:version": "changeset version && pnpm -r generate:version && git add --all",
+    "dev": "vite dev",
+    "build": "vite build && bun --bun package",
+    "package": "svelte-kit sync && svelte-package --input ./src/lib/motion-start && publint --strict",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest",
+    "test:types": "vitest --typecheck.only",
+    "test:ui": "vitest --ui",
+    "test:types:ui": "vitest --ui",
     "ci:publish": "pnpm build && changeset publish"
   }
 }

package/src/animation/use-animated-state.ts

@@ -1 +0,0 @@
-export {default as UseAnimatedState} from './UseAnimatedState.svelte';