Move: Make motion!

.changeset/loud-kings-hope.md

@@ -0,0 +1,5 @@
+---
+"@vortexjs/move": minor
+---
+
+Add springs

packages/example/package.json

@@ -1,27 +1,28 @@
 {
-    "name": "@vortexjs/bun-example",
-    "version": "1.5.9",
-    "private": true,
-    "type": "module",
-    "license": "MIT-0",
-    "main": "src/index.ts",
-    "repository": {
-        "url": "https://github.com/rectangle-run/vortex"
-    },
-    "module": "src/index.ts",
-    "scripts": {
-        "dev": "bun --hot src/index.ts",
-        "build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='BUN_PUBLIC_*'",
-        "start": "NODE_ENV=production bun src/index.ts"
-    },
-    "dependencies": {
-        "@vortexjs/core": "workspace:*",
-        "@vortexjs/dom": "workspace:*"
-    },
-    "devDependencies": {
-        "@types/bun": "catalog:"
-    },
-    "peerDependencies": {
-        "typescript": "catalog:"
-    }
+	"name": "@vortexjs/bun-example",
+	"version": "1.5.9",
+	"private": true,
+	"type": "module",
+	"license": "MIT-0",
+	"main": "src/index.ts",
+	"repository": {
+		"url": "https://github.com/rectangle-run/vortex"
+	},
+	"module": "src/index.ts",
+	"scripts": {
+		"dev": "bun --hot src/index.ts",
+		"build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='BUN_PUBLIC_*'",
+		"start": "NODE_ENV=production bun src/index.ts"
+	},
+	"dependencies": {
+		"@vortexjs/core": "workspace:*",
+		"@vortexjs/dom": "workspace:*",
+		"@vortexjs/move": "workspace:*"
+	},
+	"devDependencies": {
+		"@types/bun": "catalog:"
+	},
+	"peerDependencies": {
+		"typescript": "catalog:"
+	}
 }

packages/example/src/client.tsx

@@ -8,6 +8,7 @@ import {
 	when,
 } from "@vortexjs/core";
 import { html } from "@vortexjs/dom";
+import { useSpring } from "@vortexjs/move";
 
 const TestingContext = createContext<string>("TestingContext");
 
@@ -17,6 +18,30 @@ function TestingComponent() {
 	return <p>This is a testing component. Context data: {ctxData}</p>;
 }
 
+function SpringSliders() {
+	const targetValue = useState(0);
+	const spring = useSpring(targetValue);
+	const height = useDerived((get) => `${get(spring.signal)}px`);
+	const width = useDerived((get) => `${10000 / get(spring.signal)}px`);
+
+	return (
+		<>
+			<input type="range" min="25" max="125" bind:value={targetValue} />
+			<div
+				style={{
+					backgroundColor: "red",
+					width,
+					height,
+					position: "fixed",
+					left: "50vw",
+					top: "50vh",
+					transform: "translate(-50%, -50%)",
+				}}
+			/>
+		</>
+	);
+}
+
 function App() {
 	const counter = useState(0);
 	const name = useState("multiverse");
@@ -60,6 +85,8 @@ function App() {
 					{number} is a number from 1 to {counter}
 				</p>
 			))}
+
+			<SpringSliders />
 		</>
 	);
 }

packages/vortex-move/.gitignore

@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

packages/vortex-move/.npmignore

@@ -0,0 +1,33 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

packages/vortex-move/README.md

@@ -0,0 +1,13 @@
+# `@vortexjs/prime`
+
+Vortex Prime is the official library for building accessible component libraries with Vortex.
+
+## What is Prime?
+
+Vortex Prime does not come with styles, it only provides helpers you can use to build your own components. If you want a component library, look elsewhere. If you want to build your own component library, this is the place to start.
+
+## Installation
+
+```bash
+bun add @vortexjs/prime
+```