@levita-js/svelte 0.2.1 → 0.3.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 (8) hide show
  1. package/README.md +2 -2
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.d.cts +1 -1
  4. package/dist/index.d.mts +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/style.css +57 -0
  8. package/package.json +8 -5
package/README.md CHANGED
@@ -5,7 +5,7 @@
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- npm install levita-js @levita-js/svelte
8
+ npm install @levita-js/svelte
9
9
  ```
10
10
 
11
11
  ## Quick Start
@@ -13,7 +13,7 @@ npm install levita-js @levita-js/svelte
13
13
  ```svelte
14
14
  <script>
15
15
  import { tilt } from "@levita-js/svelte";
16
- import "levita-js/style.css";
16
+ import "@levita-js/svelte/style.css";
17
17
  </script>
18
18
 
19
19
  <div use:tilt={{ glare: true, shadow: true, max: 20 }}>
package/dist/index.cjs CHANGED
@@ -9,7 +9,7 @@ let levita_js = require("levita-js");
9
9
  * ```svelte
10
10
  * <script>
11
11
  * import { tilt } from '@levita-js/svelte';
12
- * import 'levita-js/style.css';
12
+ * import '@levita-js/svelte/style.css';
13
13
  * <\/script>
14
14
  *
15
15
  * <div use:tilt={{ glare: true, shadow: true }}>
package/dist/index.d.cts CHANGED
@@ -8,7 +8,7 @@ import { LevitaOptions } from "levita-js";
8
8
  * ```svelte
9
9
  * <script>
10
10
  * import { tilt } from '@levita-js/svelte';
11
- * import 'levita-js/style.css';
11
+ * import '@levita-js/svelte/style.css';
12
12
  * </script>
13
13
  *
14
14
  * <div use:tilt={{ glare: true, shadow: true }}>
package/dist/index.d.mts CHANGED
@@ -8,7 +8,7 @@ import { LevitaOptions } from "levita-js";
8
8
  * ```svelte
9
9
  * <script>
10
10
  * import { tilt } from '@levita-js/svelte';
11
- * import 'levita-js/style.css';
11
+ * import '@levita-js/svelte/style.css';
12
12
  * </script>
13
13
  *
14
14
  * <div use:tilt={{ glare: true, shadow: true }}>
package/dist/index.mjs CHANGED
@@ -8,7 +8,7 @@ import { Levita, buildOptions } from "levita-js";
8
8
  * ```svelte
9
9
  * <script>
10
10
  * import { tilt } from '@levita-js/svelte';
11
- * import 'levita-js/style.css';
11
+ * import '@levita-js/svelte/style.css';
12
12
  * <\/script>
13
13
  *
14
14
  * <div use:tilt={{ glare: true, shadow: true }}>
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { LevitaOptions } from \"levita-js\";\nimport { buildOptions, Levita } from \"levita-js\";\n\n/**\n * Svelte action that applies the Levita 3D tilt effect to an element.\n *\n * @example\n * ```svelte\n * <script>\n * import { tilt } from '@levita-js/svelte';\n * import 'levita-js/style.css';\n * </script>\n *\n * <div use:tilt={{ glare: true, shadow: true }}>\n * <h1>Hello</h1>\n * </div>\n * ```\n */\nexport function tilt(\n\tnode: HTMLElement,\n\toptions?: Partial<LevitaOptions>,\n): { update: (options?: Partial<LevitaOptions>) => void; destroy: () => void } {\n\tlet instance = new Levita(node, buildOptions(options ?? {}));\n\n\treturn {\n\t\tupdate(newOptions?: Partial<LevitaOptions>) {\n\t\t\tinstance.destroy();\n\t\t\tinstance = new Levita(node, buildOptions(newOptions ?? {}));\n\t\t},\n\t\tdestroy() {\n\t\t\tinstance.destroy();\n\t\t},\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,SAAgB,KACf,MACA,SAC8E;CAC9E,IAAI,WAAW,IAAI,OAAO,MAAM,aAAa,WAAW,EAAE,CAAC,CAAC;AAE5D,QAAO;EACN,OAAO,YAAqC;AAC3C,YAAS,SAAS;AAClB,cAAW,IAAI,OAAO,MAAM,aAAa,cAAc,EAAE,CAAC,CAAC;;EAE5D,UAAU;AACT,YAAS,SAAS;;EAEnB"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { LevitaOptions } from \"levita-js\";\nimport { buildOptions, Levita } from \"levita-js\";\n\n/**\n * Svelte action that applies the Levita 3D tilt effect to an element.\n *\n * @example\n * ```svelte\n * <script>\n * import { tilt } from '@levita-js/svelte';\n * import '@levita-js/svelte/style.css';\n * </script>\n *\n * <div use:tilt={{ glare: true, shadow: true }}>\n * <h1>Hello</h1>\n * </div>\n * ```\n */\nexport function tilt(\n\tnode: HTMLElement,\n\toptions?: Partial<LevitaOptions>,\n): { update: (options?: Partial<LevitaOptions>) => void; destroy: () => void } {\n\tlet instance = new Levita(node, buildOptions(options ?? {}));\n\n\treturn {\n\t\tupdate(newOptions?: Partial<LevitaOptions>) {\n\t\t\tinstance.destroy();\n\t\t\tinstance = new Levita(node, buildOptions(newOptions ?? {}));\n\t\t},\n\t\tdestroy() {\n\t\t\tinstance.destroy();\n\t\t},\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,SAAgB,KACf,MACA,SAC8E;CAC9E,IAAI,WAAW,IAAI,OAAO,MAAM,aAAa,WAAW,EAAE,CAAC,CAAC;AAE5D,QAAO;EACN,OAAO,YAAqC;AAC3C,YAAS,SAAS;AAClB,cAAW,IAAI,OAAO,MAAM,aAAa,cAAc,EAAE,CAAC,CAAC;;EAE5D,UAAU;AACT,YAAS,SAAS;;EAEnB"}
package/dist/style.css ADDED
@@ -0,0 +1,57 @@
1
+ .levita {
2
+ --levita-x: 0deg;
3
+ --levita-y: 0deg;
4
+ --levita-scale: 1;
5
+ --levita-perspective: 1000px;
6
+ --levita-speed: 0ms;
7
+ --levita-easing: ease-out;
8
+
9
+ transform: perspective(var(--levita-perspective)) rotateX(var(--levita-x))
10
+ rotateY(var(--levita-y)) scale3d(var(--levita-scale), var(--levita-scale), var(--levita-scale));
11
+ transform-style: preserve-3d;
12
+ transition: transform var(--levita-speed) var(--levita-easing);
13
+ will-change: transform;
14
+ touch-action: pinch-zoom;
15
+ }
16
+
17
+ /* Glare overlay */
18
+ .levita-glare {
19
+ position: absolute;
20
+ inset: 0;
21
+ overflow: hidden;
22
+ pointer-events: none;
23
+ border-radius: inherit;
24
+ }
25
+
26
+ .levita-glare-inner {
27
+ --levita-glare-opacity: 0;
28
+ --levita-glare-x: 50%;
29
+ --levita-glare-y: 50%;
30
+
31
+ position: absolute;
32
+ inset: -50%;
33
+ background: radial-gradient(
34
+ circle at var(--levita-glare-x) var(--levita-glare-y),
35
+ rgba(255, 255, 255, var(--levita-glare-opacity)),
36
+ transparent 60%
37
+ );
38
+ transition: opacity var(--levita-speed) var(--levita-easing);
39
+ }
40
+
41
+ /* Dynamic shadow */
42
+ .levita-shadow {
43
+ --levita-shadow-x: 0px;
44
+ --levita-shadow-y: 0px;
45
+
46
+ filter: drop-shadow(var(--levita-shadow-x) var(--levita-shadow-y) 20px rgba(0, 0, 0, 0.2));
47
+ }
48
+
49
+ /* Layers */
50
+ [data-levita-offset] {
51
+ --levita-offset-x: calc(var(--levita-percent-x, 0) * var(--levita-offset, 0) * 0.15px);
52
+ --levita-offset-y: calc(var(--levita-percent-y, 0) * var(--levita-offset, 0) * 0.15px);
53
+ --levita-offset-z: calc(var(--levita-offset, 0) * 1px);
54
+
55
+ transform: translate3d(var(--levita-offset-x), var(--levita-offset-y), var(--levita-offset-z));
56
+ transition: transform var(--levita-speed) var(--levita-easing);
57
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@levita-js/svelte",
3
- "version": "0.2.1",
3
+ "version": "0.3.1",
4
4
  "description": "Svelte wrapper for Levita 3D tilt & parallax",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -16,7 +16,8 @@
16
16
  "types": "./dist/index.d.cts",
17
17
  "default": "./dist/index.cjs"
18
18
  }
19
- }
19
+ },
20
+ "./style.css": "./dist/style.css"
20
21
  },
21
22
  "files": [
22
23
  "dist"
@@ -25,12 +26,14 @@
25
26
  "access": "public",
26
27
  "provenance": true
27
28
  },
28
- "sideEffects": false,
29
+ "sideEffects": [
30
+ "*.css"
31
+ ],
29
32
  "peerDependencies": {
30
33
  "svelte": ">=3"
31
34
  },
32
35
  "dependencies": {
33
- "levita-js": "0.2.1"
36
+ "levita-js": "0.3.1"
34
37
  },
35
38
  "devDependencies": {
36
39
  "svelte": "^5.53.5",
@@ -44,7 +47,7 @@
44
47
  },
45
48
  "homepage": "https://github.com/Jeromearsene/levita#readme",
46
49
  "scripts": {
47
- "build": "tsdown",
50
+ "build": "tsdown && cp ../core/src/style.css dist/style.css",
48
51
  "type-check": "tsc --noEmit"
49
52
  }
50
53
  }