@flight-framework/transitions 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +52 -23
  2. package/package.json +109 -109
package/README.md CHANGED
@@ -4,13 +4,13 @@ Smooth page, layout, and component transitions for Flight Framework.
4
4
 
5
5
  ## Features
6
6
 
7
- - 🚀 **Native View Transitions API** - Uses browser-native API when available
8
- - 🎨 **20+ Built-in Presets** - Fade, slide, scale, flip, morph, and more
9
- - ⚡ **Zero Dependencies** - Core bundle ~3kb gzipped
10
- - 🎯 **Framework Agnostic** - Works with React, Vue, Svelte, Solid, and more
11
- - ♿ **Accessible** - Respects `prefers-reduced-motion` by default
12
- - 📱 **SSR Safe** - Works with server-side rendering
13
- - 🔧 **Highly Configurable** - Global config or per-page overrides
7
+ - **Native View Transitions API** - Uses browser-native API when available
8
+ - **20+ Built-in Presets** - Fade, slide, scale, flip, morph, and more
9
+ - **Zero Dependencies** - Core bundle ~3kb gzipped
10
+ - **Framework Agnostic** - Works with React, Vue, Svelte, Solid, and more
11
+ - **Accessible** - Respects `prefers-reduced-motion` by default
12
+ - **SSR Safe** - Works with server-side rendering
13
+ - **Highly Configurable** - Global config or per-page overrides
14
14
 
15
15
  ## Installation
16
16
 
@@ -20,22 +20,51 @@ npm install @flight-framework/transitions
20
20
 
21
21
  ## Quick Start
22
22
 
23
- ### Global Configuration
23
+ ### Using the View Transitions API (Recommended)
24
+
25
+ The simplest approach is to use the `startViewTransition` wrapper with CSS animations:
24
26
 
25
27
  ```typescript
26
- // flight.config.ts
27
- import { defineConfig } from '@flight-framework/core';
28
-
29
- export default defineConfig({
30
- transitions: {
31
- enabled: true,
32
- pageTransition: 'fade',
33
- duration: 200,
34
- },
35
- });
28
+ // Link.tsx
29
+ import { startViewTransition } from '@flight-framework/transitions';
30
+
31
+ function Link({ href, children }) {
32
+ const handleClick = (e) => {
33
+ e.preventDefault();
34
+ startViewTransition(() => {
35
+ window.history.pushState({}, '', href);
36
+ window.dispatchEvent(new PopStateEvent('popstate'));
37
+ });
38
+ };
39
+
40
+ return <a href={href} onClick={handleClick}>{children}</a>;
41
+ }
36
42
  ```
37
43
 
38
- ### React Usage
44
+ ```css
45
+ /* global.css - Add CSS animations */
46
+ ::view-transition-old(root) {
47
+ animation: fade-out 150ms ease-out forwards;
48
+ }
49
+
50
+ ::view-transition-new(root) {
51
+ animation: fade-in 200ms ease-out forwards;
52
+ }
53
+
54
+ @keyframes fade-out {
55
+ from { opacity: 1; }
56
+ to { opacity: 0; }
57
+ }
58
+
59
+ @keyframes fade-in {
60
+ from { opacity: 0; }
61
+ to { opacity: 1; }
62
+ }
63
+ ```
64
+
65
+ ### React Provider Approach
66
+
67
+ For more control, use the React adapter:
39
68
 
40
69
  ```tsx
41
70
  // RootLayout.tsx
@@ -223,10 +252,10 @@ For CSS-only transitions without JavaScript:
223
252
 
224
253
  | Feature | Chrome | Firefox | Safari | Edge |
225
254
  |---------|--------|---------|--------|------|
226
- | View Transitions API | 111+ | ❌ (fallback) | 18.4+ | 111+ |
227
- | CSS Fallback | ✅ | ✅ | ✅ | ✅ |
228
- | Web Animations API | ✅ | ✅ | ✅ | ✅ |
255
+ | View Transitions API | 111+ | Fallback | 18.4+ | 111+ |
256
+ | CSS Fallback | Yes | Yes | Yes | Yes |
257
+ | Web Animations API | Yes | Yes | Yes | Yes |
229
258
 
230
259
  ## License
231
260
 
232
- MIT © Flight Contributors
261
+ MIT
package/package.json CHANGED
@@ -1,110 +1,110 @@
1
- {
2
- "name": "@flight-framework/transitions",
3
- "version": "0.1.0",
4
- "description": "Smooth page, layout, and component transitions for Flight Framework",
5
- "keywords": [
6
- "flight",
7
- "transitions",
8
- "view-transitions",
9
- "animation",
10
- "page-transition",
11
- "layout-transition"
12
- ],
13
- "license": "MIT",
14
- "author": "Flight Contributors",
15
- "type": "module",
16
- "exports": {
17
- ".": {
18
- "types": "./dist/index.d.ts",
19
- "import": "./dist/index.js"
20
- },
21
- "./core": {
22
- "types": "./dist/core/index.d.ts",
23
- "import": "./dist/core/index.js"
24
- },
25
- "./page": {
26
- "types": "./dist/page/index.d.ts",
27
- "import": "./dist/page/index.js"
28
- },
29
- "./layout": {
30
- "types": "./dist/layout/index.d.ts",
31
- "import": "./dist/layout/index.js"
32
- },
33
- "./component": {
34
- "types": "./dist/component/index.d.ts",
35
- "import": "./dist/component/index.js"
36
- },
37
- "./presets": {
38
- "types": "./dist/presets/index.d.ts",
39
- "import": "./dist/presets/index.js"
40
- },
41
- "./css": "./dist/css/transitions.css",
42
- "./css/view-transitions": "./dist/css/view-transitions.css",
43
- "./react": {
44
- "types": "./dist/adapters/react/index.d.ts",
45
- "import": "./dist/adapters/react/index.js"
46
- },
47
- "./vue": {
48
- "types": "./dist/adapters/vue/index.d.ts",
49
- "import": "./dist/adapters/vue/index.js"
50
- },
51
- "./svelte": {
52
- "types": "./dist/adapters/svelte/index.d.ts",
53
- "import": "./dist/adapters/svelte/index.js"
54
- },
55
- "./solid": {
56
- "types": "./dist/adapters/solid/index.d.ts",
57
- "import": "./dist/adapters/solid/index.js"
58
- },
59
- "./router": {
60
- "types": "./dist/router/index.d.ts",
61
- "import": "./dist/router/index.js"
62
- },
63
- "./config": {
64
- "types": "./dist/config/index.d.ts",
65
- "import": "./dist/config/index.js"
66
- }
67
- },
68
- "main": "./dist/index.js",
69
- "types": "./dist/index.d.ts",
70
- "files": [
71
- "dist"
72
- ],
73
- "scripts": {
74
- "build": "tsup",
75
- "dev": "tsup --watch",
76
- "test": "vitest run",
77
- "test:watch": "vitest",
78
- "typecheck": "tsc --noEmit",
79
- "lint": "eslint src/",
80
- "clean": "rimraf dist"
81
- },
82
- "devDependencies": {
83
- "@types/node": "^22.0.0",
84
- "@types/react": "^19.0.0",
85
- "rimraf": "^6.0.0",
86
- "tsup": "^8.0.0",
87
- "typescript": "^5.7.0",
88
- "vitest": "^2.0.0"
89
- },
90
- "peerDependencies": {
91
- "react": "^18.0.0 || ^19.0.0",
92
- "vue": "^3.0.0",
93
- "svelte": "^4.0.0 || ^5.0.0",
94
- "solid-js": "^1.0.0"
95
- },
96
- "peerDependenciesMeta": {
97
- "react": {
98
- "optional": true
99
- },
100
- "vue": {
101
- "optional": true
102
- },
103
- "svelte": {
104
- "optional": true
105
- },
106
- "solid-js": {
107
- "optional": true
108
- }
109
- }
1
+ {
2
+ "name": "@flight-framework/transitions",
3
+ "version": "0.1.1",
4
+ "description": "Smooth page, layout, and component transitions for Flight Framework",
5
+ "keywords": [
6
+ "flight",
7
+ "transitions",
8
+ "view-transitions",
9
+ "animation",
10
+ "page-transition",
11
+ "layout-transition"
12
+ ],
13
+ "license": "MIT",
14
+ "author": "Flight Contributors",
15
+ "type": "module",
16
+ "exports": {
17
+ ".": {
18
+ "types": "./dist/index.d.ts",
19
+ "import": "./dist/index.js"
20
+ },
21
+ "./core": {
22
+ "types": "./dist/core/index.d.ts",
23
+ "import": "./dist/core/index.js"
24
+ },
25
+ "./page": {
26
+ "types": "./dist/page/index.d.ts",
27
+ "import": "./dist/page/index.js"
28
+ },
29
+ "./layout": {
30
+ "types": "./dist/layout/index.d.ts",
31
+ "import": "./dist/layout/index.js"
32
+ },
33
+ "./component": {
34
+ "types": "./dist/component/index.d.ts",
35
+ "import": "./dist/component/index.js"
36
+ },
37
+ "./presets": {
38
+ "types": "./dist/presets/index.d.ts",
39
+ "import": "./dist/presets/index.js"
40
+ },
41
+ "./css": "./dist/css/transitions.css",
42
+ "./css/view-transitions": "./dist/css/view-transitions.css",
43
+ "./react": {
44
+ "types": "./dist/adapters/react/index.d.ts",
45
+ "import": "./dist/adapters/react/index.js"
46
+ },
47
+ "./vue": {
48
+ "types": "./dist/adapters/vue/index.d.ts",
49
+ "import": "./dist/adapters/vue/index.js"
50
+ },
51
+ "./svelte": {
52
+ "types": "./dist/adapters/svelte/index.d.ts",
53
+ "import": "./dist/adapters/svelte/index.js"
54
+ },
55
+ "./solid": {
56
+ "types": "./dist/adapters/solid/index.d.ts",
57
+ "import": "./dist/adapters/solid/index.js"
58
+ },
59
+ "./router": {
60
+ "types": "./dist/router/index.d.ts",
61
+ "import": "./dist/router/index.js"
62
+ },
63
+ "./config": {
64
+ "types": "./dist/config/index.d.ts",
65
+ "import": "./dist/config/index.js"
66
+ }
67
+ },
68
+ "main": "./dist/index.js",
69
+ "types": "./dist/index.d.ts",
70
+ "files": [
71
+ "dist"
72
+ ],
73
+ "scripts": {
74
+ "build": "tsup",
75
+ "dev": "tsup --watch",
76
+ "test": "vitest run",
77
+ "test:watch": "vitest",
78
+ "typecheck": "tsc --noEmit",
79
+ "lint": "eslint src/",
80
+ "clean": "rimraf dist"
81
+ },
82
+ "devDependencies": {
83
+ "@types/node": "^22.0.0",
84
+ "@types/react": "^19.0.0",
85
+ "rimraf": "^6.0.0",
86
+ "tsup": "^8.0.0",
87
+ "typescript": "^5.7.0",
88
+ "vitest": "^2.0.0"
89
+ },
90
+ "peerDependencies": {
91
+ "react": "^18.0.0 || ^19.0.0",
92
+ "solid-js": "^1.0.0",
93
+ "svelte": "^4.0.0 || ^5.0.0",
94
+ "vue": "^3.0.0"
95
+ },
96
+ "peerDependenciesMeta": {
97
+ "react": {
98
+ "optional": true
99
+ },
100
+ "vue": {
101
+ "optional": true
102
+ },
103
+ "svelte": {
104
+ "optional": true
105
+ },
106
+ "solid-js": {
107
+ "optional": true
108
+ }
109
+ }
110
110
  }