@humanspeak/svelte-motion 0.0.3

package/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2024-2025 Humanspeak, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# @humanspeak/svelte-motion
+
+[![NPM version](https://img.shields.io/npm/v/@humanspeak/svelte-motion.svg)](https://www.npmjs.com/package/@humanspeak/svelte-motion)
+[![Build Status](https://github.com/humanspeak/svelte-motion/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/humanspeak/svelte-motion/actions/workflows/npm-publish.yml)
+[![Coverage Status](https://coveralls.io/repos/github/humanspeak/svelte-motion/badge.svg?branch=main)](https://coveralls.io/github/humanspeak/svelte-motion?branch=main)
+[![License](https://img.shields.io/npm/l/@humanspeak/svelte-motion.svg)](https://github.com/humanspeak/svelte-motion/blob/main/LICENSE)
+[![Downloads](https://img.shields.io/npm/dm/@humanspeak/svelte-motion.svg)](https://www.npmjs.com/package/@humanspeak/svelte-motion)
+[![CodeQL](https://github.com/humanspeak/svelte-motion/actions/workflows/codeql.yml/badge.svg)](https://github.com/humanspeak/svelte-motion/actions/workflows/codeql.yml)
+[![Install size](https://packagephobia.com/badge?p=@humanspeak/svelte-motion)](https://packagephobia.com/result?p=@humanspeak/svelte-motion)
+[![Code Style: Trunk](https://img.shields.io/badge/code%20style-trunk-blue.svg)](https://trunk.io)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![Types](https://img.shields.io/npm/types/@humanspeak/svelte-motion.svg)](https://www.npmjs.com/package/@humanspeak/svelte-motion)
+[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/humanspeak/svelte-motion/graphs/commit-activity)
+
+## Why are we here?
+
+Just a little wrapper for motion. I love their work!
+
+## External Dependencies
+
+This package carefully selects its dependencies to provide a robust and maintainable solution:
+
+### Core Dependencies
+
+- **motion**
+    - High-performance animation library for the web
+    - Provides smooth, hardware-accelerated animations
+    - Supports spring physics and custom easing
+    - Used for creating fluid motion and transitions
+
+## License
+
+MIT © [Humanspeak, Inc.](LICENSE)
+
+## Credits
+
+Made with ♥ by [Humanspeak](https://humanspeak.com)

package/dist/MotionContainer.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import { type Snippet } from 'svelte'
+    import type { SvelteHTMLElements } from 'svelte/elements'
+    import type { MotionInitial, MotionAnimate, MotionTransition } from './types.js'
+    import { animate } from 'motion'
+    import { isNotEmpty } from './utils/objects.js'
+
+    type Props = {
+        children?: Snippet
+        tag: keyof SvelteHTMLElements
+        initial?: MotionInitial
+        animate?: MotionAnimate
+        transition?: MotionTransition
+        style?: string
+        [key: string]: unknown
+    }
+
+    let {
+        children,
+        tag = 'div',
+        initial: initialProp,
+        animate: animateProp,
+        transition: transitionProp,
+        style: styleProp,
+        ...rest
+    }: Props = $props()
+    let element: HTMLElement | null = $state(null)
+
+    const runAnimation = () => {
+        if (!element || !animateProp) return
+        const transitionAmimate = {
+            ...(transitionProp ?? {})
+        }
+        animate(element, animateProp, transitionAmimate)
+    }
+
+    $effect(() => {
+        if (element && animateProp) {
+            if (isNotEmpty(initialProp)) {
+                animate(element, initialProp!)
+                    .then(() => {
+                        if (element && styleProp) {
+                            setTimeout(() => {
+                                element.style.cssText = styleProp
+                            }, 1)
+                        }
+                    })
+                    .then(runAnimation)
+            } else {
+                runAnimation()
+            }
+        }
+    })
+</script>
+
+<svelte:element this={tag} bind:this={element} {...rest}>
+    {@render children?.()}
+</svelte:element>

package/dist/MotionContainer.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { MotionInitial, MotionAnimate, MotionTransition } from './types.js';
+type Props = {
+    children?: Snippet;
+    tag: keyof SvelteHTMLElements;
+    initial?: MotionInitial;
+    animate?: MotionAnimate;
+    transition?: MotionTransition;
+    style?: string;
+    [key: string]: unknown;
+};
+declare const MotionContainer: import("svelte").Component<Props, {}, "">;
+type MotionContainer = ReturnType<typeof MotionContainer>;
+export default MotionContainer;

package/dist/html/Div.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import MotionContainer from '../MotionContainer.svelte'
+    import type { Snippet } from 'svelte'
+
+    type Props = {
+        children?: Snippet
+        [key: string]: unknown
+    }
+
+    let { children, ...rest }: Props = $props()
+</script>
+
+<MotionContainer tag="div" {...rest}>
+    {@render children?.()}
+</MotionContainer>

package/dist/html/Div.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Div: import("svelte").Component<Props, {}, "">;
+type Div = ReturnType<typeof Div>;
+export default Div;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import Div from './html/Div.svelte';
+type MotionComponents = {
+    div: typeof Div;
+};
+export declare const motion: MotionComponents;
+export type { MotionInitial } from './types.js';

package/dist/index.js

@@ -0,0 +1,5 @@
+// Reexport your entry components here
+import Div from './html/Div.svelte';
+export const motion = {
+    div: Div
+};

package/dist/types.d.ts

@@ -0,0 +1,4 @@
+import type { AnimationOptions, DOMKeyframesDefinition } from 'motion';
+export type MotionInitial = DOMKeyframesDefinition;
+export type MotionAnimate = DOMKeyframesDefinition;
+export type MotionTransition = AnimationOptions;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/objects.d.ts

@@ -0,0 +1,3 @@
+import type { DOMKeyframesDefinition } from 'motion';
+export declare const isEmpty: (obj: Record<string, unknown> | DOMKeyframesDefinition | undefined) => boolean;
+export declare const isNotEmpty: (obj: Record<string, unknown> | DOMKeyframesDefinition | undefined) => boolean;

package/dist/utils/objects.js

@@ -0,0 +1,10 @@
+export const isEmpty = (obj) => {
+    if (!obj)
+        return true;
+    for (const _ in obj)
+        return false;
+    return true;
+};
+export const isNotEmpty = (obj) => {
+    return !isEmpty(obj);
+};

package/package.json

@@ -0,0 +1,122 @@
+{
+    "name": "@humanspeak/svelte-motion",
+    "version": "0.0.3",
+    "description": "A lightweight animation library for Svelte 5 that provides smooth, hardware-accelerated animations. Features include spring physics, custom easing, and fluid transitions. Built on top of the motion library, it offers a simple API for creating complex animations with minimal code. Perfect for interactive UIs, micro-interactions, and engaging user experiences.",
+    "keywords": [
+        "svelte",
+        "animation",
+        "motion",
+        "transitions",
+        "spring-physics",
+        "ui-animation",
+        "svelte5",
+        "hardware-accelerated",
+        "micro-interactions",
+        "performance"
+    ],
+    "bugs": {
+        "url": "https://github.com/humanspeak/svelte-motion/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/humanspeak/svelte-motion.git"
+    },
+    "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/humanspeak"
+    },
+    "license": "MIT",
+    "author": "Humanspeak, Inc.",
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "svelte": "./dist/index.js"
+        }
+    },
+    "svelte": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist",
+        "!dist/**/*.test.*",
+        "!dist/**/*.spec.*"
+    ],
+    "scripts": {
+        "build": "vite build && npm run package",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "dev": "vite dev",
+        "format": "prettier --write .",
+        "lint": "prettier --check . && eslint .",
+        "lint:fix": "npm run format && eslint . --fix",
+        "package": "svelte-kit sync && svelte-package && publint",
+        "prepublishOnly": "npm run package",
+        "preview": "vite preview",
+        "test": "vitest run --coverage",
+        "test:all": "npm run test && npm run test:e2e",
+        "test:e2e": "playwright test",
+        "test:e2e:debug": "playwright test --debug",
+        "test:e2e:report": "playwright show-report",
+        "test:e2e:ui": "playwright test --ui",
+        "test:only": "vitest run",
+        "test:watch": "vitest"
+    },
+    "dependencies": {
+        "motion": "^12.4.7"
+    },
+    "devDependencies": {
+        "@eslint/compat": "^1.2.6",
+        "@eslint/js": "^9.20.0",
+        "@playwright/test": "^1.50.1",
+        "@sveltejs/adapter-auto": "^4.0.0",
+        "@sveltejs/kit": "^2.17.2",
+        "@sveltejs/package": "^2.3.10",
+        "@sveltejs/vite-plugin-svelte": "^5.0.3",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/svelte": "^5.2.7",
+        "@vitest/coverage-v8": "^3.0.6",
+        "eslint": "^9.20.1",
+        "eslint-config-prettier": "^10.0.1",
+        "eslint-plugin-svelte": "^2.46.1",
+        "globals": "^16.0.0",
+        "jsdom": "^26.0.0",
+        "prettier": "^3.5.1",
+        "prettier-plugin-organize-imports": "^4.1.0",
+        "prettier-plugin-svelte": "^3.3.3",
+        "publint": "^0.3.6",
+        "svelte": "^5.20.2",
+        "svelte-check": "^4.1.4",
+        "typescript": "^5.7.3",
+        "typescript-eslint": "^8.24.1",
+        "vite": "^6.1.1",
+        "vitest": "^3.0.6"
+    },
+    "peerDependencies": {
+        "svelte": "^5.0.0"
+    },
+    "volta": {
+        "node": "22.13.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "overrides": {
+        "@sveltejs/kit": {
+            "cookie": "^0.7.0"
+        }
+    },
+    "tags": [
+        "svelte",
+        "animation",
+        "motion",
+        "transitions",
+        "spring-physics",
+        "performance",
+        "ui-animation",
+        "micro-interactions",
+        "svelte5"
+    ]
+}