@maxigarcia/theme-transitions 0.2.0 → 0.2.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 (3) hide show
  1. package/README.md +6 -17
  2. package/dist/circular-reveal/index.js +4 -4
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -19,15 +19,15 @@ Each module has its own README with setup, API, and usage examples.
19
19
 
20
20
  ## Package exports
21
21
 
22
- | Import | Purpose |
23
- | --------------------------------------------------------- | ------------------------------------------------------------ |
24
- | `@maxigarcia/theme-transitions` | `onCircularRevealAnimation`, `onSweepRevealAnimation`, types |
25
- | `@maxigarcia/theme-transitions/circular-reveal/index.css` | Styles for circular reveal |
26
- | `@maxigarcia/theme-transitions/sweep-reveal/index.css` | Styles for sweep reveal |
22
+ | Import | Purpose |
23
+ | --------------------------------------------------- | ------------------------------------------------------------ |
24
+ | `@maxigarcia/theme-transitions` | `onCircularRevealAnimation`, `onSweepRevealAnimation`, types |
25
+ | `@maxigarcia/theme-transitions/circular-reveal.css` | Styles for circular reveal |
26
+ | `@maxigarcia/theme-transitions/sweep-reveal.css` | Styles for sweep reveal |
27
27
 
28
28
  ## Live demo
29
29
 
30
- See the [app package](../app/) in this monorepo for an interactive landing page with both techniques.
30
+ Go to the [demo](https://theme-transitions.vercel.app)
31
31
 
32
32
  ```bash
33
33
  # from monorepo root
@@ -45,17 +45,6 @@ npm run build -w @maxigarcia/theme-transitions
45
45
  npm run lint -w @maxigarcia/theme-transitions
46
46
  ```
47
47
 
48
- ### Versioning & publish (Nx Release)
49
-
50
- Use [Conventional Commits](https://www.conventionalcommits.org/) for changes under this package (`feat`, `fix`, `perf`, etc.). From the monorepo root:
51
-
52
- ```bash
53
- npm run version-packages # bump version + changelog (no publish)
54
- npm run release # publish to npm
55
- ```
56
-
57
- CI on `main` versions and tags both projects, but only publishes this package to npm. See the [root README](../../README.md#releasing).
58
-
59
48
  ## Browser support
60
49
 
61
50
  Requires [View Transitions](https://caniuse.com/view-transitions) for animated reveals. Unsupported browsers still apply the theme change without animation.
package/dist/circular-reveal/index.js CHANGED
@@ -1,5 +1,9 @@
1
1
  import { $html, $onTransitionEnd } from '../utils/index.js';
2
2
  export function onCircularRevealAnimation(apply, origin, options) {
3
+ if (!document.startViewTransition) {
4
+ apply();
5
+ return;
6
+ }
3
7
  const x = (origin.clientX / window.innerWidth) * 100;
4
8
  const y = (origin.clientY / window.innerHeight) * 100;
5
9
  const html = $html();
@@ -12,10 +16,6 @@ export function onCircularRevealAnimation(apply, origin, options) {
12
16
  }
13
17
  html.style.setProperty('--theme-reveal-x', `${x}%`);
14
18
  html.style.setProperty('--theme-reveal-y', `${y}%`);
15
- if (!document.startViewTransition) {
16
- apply();
17
- return;
18
- }
19
19
  document.startViewTransition(apply);
20
20
  const animationComplete = () => {
21
21
  html.style.removeProperty('--theme-reveal-x');
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@maxigarcia/theme-transitions",
3
3
  "type": "module",
4
- "version": "0.2.0",
4
+ "version": "0.2.1",
5
5
  "license": "ISC",
6
6
  "homepage": "https://github.com/MaxiGarcia13/js-theme-animation-monorepo/tree/main/packages/theme-transitions#readme",
7
7
  "repository": {
@@ -31,8 +31,8 @@
31
31
  "types": "./dist/index.d.ts",
32
32
  "import": "./dist/index.js"
33
33
  },
34
- "./circular-reveal/index.css": "./dist/circular-reveal/index.css",
35
- "./sweep-reveal/index.css": "./dist/sweep-reveal/index.css"
34
+ "./circular-reveal.css": "./dist/circular-reveal/index.css",
35
+ "./sweep-reveal.css": "./dist/sweep-reveal/index.css"
36
36
  },
37
37
  "main": "./dist/index.js",
38
38
  "types": "./dist/index.d.ts",