@pyreon/kinetic-presets 0.11.5 → 0.11.7

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.
package/src/factories.ts CHANGED
@@ -7,29 +7,29 @@ import type {
7
7
  RotateOptions,
8
8
  ScaleOptions,
9
9
  SlideOptions,
10
- } from "./types"
10
+ } from './types'
11
11
 
12
12
  const directionToTranslate = (direction: Direction, distance: number): string => {
13
13
  switch (direction) {
14
- case "up":
14
+ case 'up':
15
15
  return `translateY(${distance}px)`
16
- case "down":
16
+ case 'down':
17
17
  return `translateY(${-distance}px)`
18
- case "left":
18
+ case 'left':
19
19
  return `translateX(${distance}px)`
20
- case "right":
20
+ case 'right':
21
21
  return `translateX(${-distance}px)`
22
22
  }
23
23
  }
24
24
 
25
25
  const directionToZero = (direction: Direction): string => {
26
26
  switch (direction) {
27
- case "up":
28
- case "down":
29
- return "translateY(0)"
30
- case "left":
31
- case "right":
32
- return "translateX(0)"
27
+ case 'up':
28
+ case 'down':
29
+ return 'translateY(0)'
30
+ case 'left':
31
+ case 'right':
32
+ return 'translateX(0)'
33
33
  }
34
34
  }
35
35
 
@@ -38,8 +38,8 @@ export const createFade = ({
38
38
  distance = 16,
39
39
  duration = 300,
40
40
  leaveDuration = 200,
41
- easing = "ease-out",
42
- leaveEasing = "ease-in",
41
+ easing = 'ease-out',
42
+ leaveEasing = 'ease-in',
43
43
  }: FadeOptions = {}): Preset => {
44
44
  if (!direction) {
45
45
  return {
@@ -64,12 +64,12 @@ export const createFade = ({
64
64
  }
65
65
 
66
66
  export const createSlide = ({
67
- direction = "up",
67
+ direction = 'up',
68
68
  distance = 16,
69
69
  duration = 300,
70
70
  leaveDuration = 200,
71
- easing = "ease-out",
72
- leaveEasing = "ease-in",
71
+ easing = 'ease-out',
72
+ leaveEasing = 'ease-in',
73
73
  }: SlideOptions = {}): Preset => {
74
74
  const translate = directionToTranslate(direction, distance)
75
75
  const zero = directionToZero(direction)
@@ -87,13 +87,13 @@ export const createScale = ({
87
87
  from = 0.9,
88
88
  duration = 300,
89
89
  leaveDuration = 200,
90
- easing = "ease-out",
91
- leaveEasing = "ease-in",
90
+ easing = 'ease-out',
91
+ leaveEasing = 'ease-in',
92
92
  }: ScaleOptions = {}): Preset => ({
93
93
  enterStyle: { opacity: 0, transform: `scale(${from})` },
94
- enterToStyle: { opacity: 1, transform: "scale(1)" },
94
+ enterToStyle: { opacity: 1, transform: 'scale(1)' },
95
95
  enterTransition: `all ${duration}ms ${easing}`,
96
- leaveStyle: { opacity: 1, transform: "scale(1)" },
96
+ leaveStyle: { opacity: 1, transform: 'scale(1)' },
97
97
  leaveToStyle: { opacity: 0, transform: `scale(${from})` },
98
98
  leaveTransition: `all ${leaveDuration}ms ${leaveEasing}`,
99
99
  })
@@ -102,13 +102,13 @@ export const createRotate = ({
102
102
  degrees = 15,
103
103
  duration = 300,
104
104
  leaveDuration = 200,
105
- easing = "ease-out",
106
- leaveEasing = "ease-in",
105
+ easing = 'ease-out',
106
+ leaveEasing = 'ease-in',
107
107
  }: RotateOptions = {}): Preset => ({
108
108
  enterStyle: { opacity: 0, transform: `rotate(${-degrees}deg)` },
109
- enterToStyle: { opacity: 1, transform: "rotate(0)" },
109
+ enterToStyle: { opacity: 1, transform: 'rotate(0)' },
110
110
  enterTransition: `all ${duration}ms ${easing}`,
111
- leaveStyle: { opacity: 1, transform: "rotate(0)" },
111
+ leaveStyle: { opacity: 1, transform: 'rotate(0)' },
112
112
  leaveToStyle: { opacity: 0, transform: `rotate(${degrees}deg)` },
113
113
  leaveTransition: `all ${leaveDuration}ms ${leaveEasing}`,
114
114
  })
@@ -118,14 +118,14 @@ export const createBlur = ({
118
118
  scale,
119
119
  duration = 300,
120
120
  leaveDuration = 200,
121
- easing = "ease-out",
122
- leaveEasing = "ease-in",
121
+ easing = 'ease-out',
122
+ leaveEasing = 'ease-in',
123
123
  }: BlurOptions = {}): Preset => {
124
124
  const hidden: CSSProperties = { opacity: 0, filter: `blur(${amount}px)` }
125
- const visible: CSSProperties = { opacity: 1, filter: "blur(0px)" }
125
+ const visible: CSSProperties = { opacity: 1, filter: 'blur(0px)' }
126
126
  if (scale !== undefined) {
127
127
  hidden.transform = `scale(${scale})`
128
- visible.transform = "scale(1)"
128
+ visible.transform = 'scale(1)'
129
129
  }
130
130
  return {
131
131
  enterStyle: hidden,
package/src/index.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { createBlur, createFade, createRotate, createScale, createSlide } from "./factories"
1
+ export { createBlur, createFade, createRotate, createScale, createSlide } from './factories'
2
2
  export {
3
3
  backInDown,
4
4
  backInLeft,
@@ -123,7 +123,7 @@ export {
123
123
  zoomOutLeft,
124
124
  zoomOutRight,
125
125
  zoomOutUp,
126
- } from "./presets"
126
+ } from './presets'
127
127
  export type {
128
128
  BlurOptions,
129
129
  CSSProperties,
@@ -133,5 +133,5 @@ export type {
133
133
  RotateOptions,
134
134
  ScaleOptions,
135
135
  SlideOptions,
136
- } from "./types"
137
- export { compose, reverse, withDelay, withDuration, withEasing } from "./utils"
136
+ } from './types'
137
+ export { compose, reverse, withDelay, withDuration, withEasing } from './utils'