@cntrl-site/sdk-nextjs 1.0.19-alpha.2 → 1.0.19-alpha.3

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 (19) hide show
  1. package/lib/components/items/CodeEmbedItem.js +0 -1
  2. package/lib/components/items/CustomItem.js +0 -1
  3. package/lib/components/items/GroupItem.js +0 -1
  4. package/lib/components/items/ImageItem.js +0 -2
  5. package/lib/components/items/RectangleItem.js +0 -1
  6. package/lib/components/items/RichTextItem.js +0 -1
  7. package/lib/components/items/VideoItem.js +0 -2
  8. package/lib/components/items/VimeoEmbed.js +0 -2
  9. package/lib/components/items/YoutubeEmbed.js +0 -2
  10. package/package.json +1 -1
  11. package/src/components/items/CodeEmbedItem.tsx +0 -1
  12. package/src/components/items/CustomItem.tsx +0 -1
  13. package/src/components/items/GroupItem.tsx +1 -2
  14. package/src/components/items/ImageItem.tsx +0 -2
  15. package/src/components/items/RectangleItem.tsx +0 -1
  16. package/src/components/items/RichTextItem.tsx +0 -1
  17. package/src/components/items/VideoItem.tsx +0 -2
  18. package/src/components/items/VimeoEmbed.tsx +0 -2
  19. package/src/components/items/YoutubeEmbed.tsx +0 -2
package/lib/components/items/CodeEmbedItem.js CHANGED
@@ -81,7 +81,6 @@ const CodeEmbedItem = ({ item, sectionId, onResize }) => {
81
81
  opacity: ${layoutParams.opacity};
82
82
  transform: rotate(${area.angle}deg);
83
83
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
84
- transition: all 0.2s ease;
85
84
  }
86
85
  .embed-${item.id} {
87
86
  width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
package/lib/components/items/CustomItem.js CHANGED
@@ -31,7 +31,6 @@ const CustomItem = ({ item, onResize, sectionId }) => {
31
31
  return (`
32
32
  .custom-component-${item.id} {
33
33
  transform: rotate(${area.angle}deg);
34
- transition: all 0.2s ease;
35
34
  height: 100%;
36
35
  width: 100%;
37
36
  position: absolute;
package/lib/components/items/GroupItem.js CHANGED
@@ -42,7 +42,6 @@ const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
42
42
  .group-${item.id} {
43
43
  opacity: ${layoutParams.opacity};
44
44
  transform: rotate(${area.angle}deg);
45
- transition: all 0.2s ease;
46
45
  }
47
46
  ${statesCSS}
48
47
  `);
package/lib/components/items/ImageItem.js CHANGED
@@ -107,13 +107,11 @@ const ImageItem = ({ item, sectionId, onResize }) => {
107
107
  opacity: ${layoutParams.opacity};
108
108
  transform: rotate(${area.angle}deg);
109
109
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
110
- transition: all 0.2s ease;
111
110
  }
112
111
  .image-${item.id} {
113
112
  border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
114
113
  border-radius: ${layoutParams.radius * 100}vw;
115
114
  border-width: ${layoutParams.strokeWidth * 100}vw;
116
- transition: all 0.2s ease;
117
115
  }
118
116
  ${wrapperStatesCSS}
119
117
  ${imgStatesCSS}
package/lib/components/items/RectangleItem.js CHANGED
@@ -53,7 +53,6 @@ const RectangleItem = ({ item, sectionId, onResize }) => {
53
53
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
54
54
  backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
55
55
  -webkit-backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
56
- transition: all 0.2s ease;
57
56
  }
58
57
  ${statesCSS}
59
58
  `);
package/lib/components/items/RichTextItem.js CHANGED
@@ -50,7 +50,6 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
50
50
  transform: rotate(${area.angle}deg);
51
51
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
52
52
  text-transform: ${layoutParams.textTransform};
53
- transition: all 0.2s ease;
54
53
  }
55
54
  @supports not (color: oklch(42% 0.3 90 / 1)) {
56
55
  .rich-text-wrapper-${item.id} {
package/lib/components/items/VideoItem.js CHANGED
@@ -73,13 +73,11 @@ const VideoItem = ({ item, sectionId, onResize }) => {
73
73
  opacity: ${layoutParams.opacity};
74
74
  transform: rotate(${area.angle}deg);
75
75
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
76
- transition: all 0.2s ease;
77
76
  }
78
77
  .video-${item.id} {
79
78
  border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
80
79
  border-radius: ${layoutParams.radius * 100}vw;
81
80
  border-width: ${layoutParams.strokeWidth * 100}vw;
82
- transition: all 0.2s ease;
83
81
  }
84
82
  ${wrapperStatesCSS}
85
83
  ${videoStatesCSS}
package/lib/components/items/VimeoEmbed.js CHANGED
@@ -105,11 +105,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
105
105
  opacity: ${layoutParams.opacity};
106
106
  transform: rotate(${area.angle}deg);
107
107
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
108
- transition: all 0.2s ease;
109
108
  }
110
109
  .embed-video-wrapper-${item.id} .embed-video {
111
110
  border-radius: ${layoutParams.radius * 100}vw;
112
- transition: all 0.2s ease;
113
111
  }
114
112
  ${wrapperStatesCSS}
115
113
  ${videoStatesCSS}
package/lib/components/items/YoutubeEmbed.js CHANGED
@@ -129,11 +129,9 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
129
129
  opacity: ${layoutParams.opacity};
130
130
  transform: rotate(${area.angle}deg);
131
131
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
132
- transition: all 0.2s ease;
133
132
  }
134
133
  .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
135
134
  border-radius: ${layoutParams.radius * 100}vw;
136
- transition: all 0.2s ease;
137
135
  }
138
136
  ${wrapperStatesCSS}
139
137
  ${embedStatesCSS}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.0.19-alpha.2",
3
+ "version": "1.0.19-alpha.3",
4
4
  "description": "SDK for Next.js",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/index.ts",
package/src/components/items/CodeEmbedItem.tsx CHANGED
@@ -104,7 +104,6 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
104
104
  opacity: ${layoutParams.opacity};
105
105
  transform: rotate(${area.angle}deg);
106
106
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
107
- transition: all 0.2s ease;
108
107
  }
109
108
  .embed-${item.id} {
110
109
  width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
package/src/components/items/CustomItem.tsx CHANGED
@@ -37,7 +37,6 @@ export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, section
37
37
  return (`
38
38
  .custom-component-${item.id} {
39
39
  transform: rotate(${area.angle}deg);
40
- transition: all 0.2s ease;
41
40
  height: 100%;
42
41
  width: 100%;
43
42
  position: absolute;
package/src/components/items/GroupItem.tsx CHANGED
@@ -21,7 +21,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
21
21
  const statesClassNames = useStatesClassNames(item.id, item.state, 'group');
22
22
  const [ref, setRef] = useState<HTMLDivElement | null>(null);
23
23
  useRegisterResize(ref, onResize);
24
- useStatesTransitions(ref!, item.state, ['opacity', 'angle'])
24
+ useStatesTransitions(ref!, item.state, ['opacity', 'angle']);
25
25
 
26
26
  return (
27
27
  <LinkWrapper url={item.link?.url} target={item.link?.target}>
@@ -57,7 +57,6 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
57
57
  .group-${item.id} {
58
58
  opacity: ${layoutParams.opacity};
59
59
  transform: rotate(${area.angle}deg);
60
- transition: all 0.2s ease;
61
60
  }
62
61
  ${statesCSS}
63
62
  `);
package/src/components/items/ImageItem.tsx CHANGED
@@ -142,13 +142,11 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
142
142
  opacity: ${layoutParams.opacity};
143
143
  transform: rotate(${area.angle}deg);
144
144
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
145
- transition: all 0.2s ease;
146
145
  }
147
146
  .image-${item.id} {
148
147
  border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
149
148
  border-radius: ${layoutParams.radius * 100}vw;
150
149
  border-width: ${layoutParams.strokeWidth * 100}vw;
151
- transition: all 0.2s ease;
152
150
  }
153
151
  ${wrapperStatesCSS}
154
152
  ${imgStatesCSS}
package/src/components/items/RectangleItem.tsx CHANGED
@@ -65,7 +65,6 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
65
65
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
66
66
  backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
67
67
  -webkit-backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
68
- transition: all 0.2s ease;
69
68
  }
70
69
  ${statesCSS}
71
70
  `);
package/src/components/items/RichTextItem.tsx CHANGED
@@ -70,7 +70,6 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
70
70
  transform: rotate(${area.angle}deg);
71
71
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
72
72
  text-transform: ${layoutParams.textTransform};
73
- transition: all 0.2s ease;
74
73
  }
75
74
  @supports not (color: oklch(42% 0.3 90 / 1)) {
76
75
  .rich-text-wrapper-${item.id} {
package/src/components/items/VideoItem.tsx CHANGED
@@ -106,13 +106,11 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
106
106
  opacity: ${layoutParams.opacity};
107
107
  transform: rotate(${area.angle}deg);
108
108
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
109
- transition: all 0.2s ease;
110
109
  }
111
110
  .video-${item.id} {
112
111
  border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
113
112
  border-radius: ${layoutParams.radius * 100}vw;
114
113
  border-width: ${layoutParams.strokeWidth * 100}vw;
115
- transition: all 0.2s ease;
116
114
  }
117
115
  ${wrapperStatesCSS}
118
116
  ${videoStatesCSS}
package/src/components/items/VimeoEmbed.tsx CHANGED
@@ -132,11 +132,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
132
132
  opacity: ${layoutParams.opacity};
133
133
  transform: rotate(${area.angle}deg);
134
134
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
135
- transition: all 0.2s ease;
136
135
  }
137
136
  .embed-video-wrapper-${item.id} .embed-video {
138
137
  border-radius: ${layoutParams.radius * 100}vw;
139
- transition: all 0.2s ease;
140
138
  }
141
139
  ${wrapperStatesCSS}
142
140
  ${videoStatesCSS}
package/src/components/items/YoutubeEmbed.tsx CHANGED
@@ -151,11 +151,9 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
151
151
  opacity: ${layoutParams.opacity};
152
152
  transform: rotate(${area.angle}deg);
153
153
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
154
- transition: all 0.2s ease;
155
154
  }
156
155
  .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
157
156
  border-radius: ${layoutParams.radius * 100}vw;
158
- transition: all 0.2s ease;
159
157
  }
160
158
  ${wrapperStatesCSS}
161
159
  ${embedStatesCSS}