@cntrl-site/sdk-nextjs 1.8.40-alpha.0 → 1.9.0

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 (5) hide show
  1. package/lib/components/items/FileItem/ImageItem.js +4 -1
  2. package/lib/components/items/FileItem/VideoItem.js +4 -1
  3. package/package.json +2 -2
  4. package/src/components/items/FileItem/ImageItem.tsx +4 -0
  5. package/src/components/items/FileItem/VideoItem.tsx +4 -0
package/lib/components/items/FileItem/ImageItem.js CHANGED
@@ -64,7 +64,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
64
64
  const stroke = strokeValue
65
65
  ? (_l = (0, getFill_1.getFill)(strokeValue)) !== null && _l !== void 0 ? _l : 'transparent'
66
66
  : 'transparent';
67
- const inlineStyles = Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_m = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
67
+ const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), { transition: (_m = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
68
68
  const isInteractive = opacity !== 0;
69
69
  (0, react_1.useEffect)(() => {
70
70
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
@@ -116,6 +116,9 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
116
116
  ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
117
117
  }
118
118
  .image-${item.id} {
119
+ border: solid;
120
+ border-color: transparent;
121
+ border-width: ${layoutParams.strokeWidth * 100}vw;
119
122
  border-radius: ${layoutParams.radius * 100}vw;
120
123
  }
121
124
  .image-border-${item.id} {
package/lib/components/items/FileItem/VideoItem.js CHANGED
@@ -73,7 +73,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
73
73
  controls: controlsValues
74
74
  }, width, height);
75
75
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
76
- const inlineStyles = Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_m = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
76
+ const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), { transition: (_m = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
77
77
  const isInteractive = opacity !== 0;
78
78
  (0, react_1.useEffect)(() => {
79
79
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
@@ -203,6 +203,9 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
203
203
  ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
204
204
  }
205
205
  .video-${item.id} {
206
+ border: solid;
207
+ border-color: transparent;
208
+ border-width: ${layoutParams.strokeWidth * 100}vw;
206
209
  border-radius: ${layoutParams.radius * 100}vw;
207
210
  }
208
211
  .video-border-${item.id} {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.8.40-alpha.0",
3
+ "version": "1.9.0",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -31,7 +31,7 @@
31
31
  "@antfu/eslint-config": "^3.8.0",
32
32
  "@cntrl-site/color": "^1.0.0",
33
33
  "@cntrl-site/effects": "^1.4.0",
34
- "@cntrl-site/sdk": "^1.23.1-alpha.1",
34
+ "@cntrl-site/sdk": "^1.24.0",
35
35
  "@types/vimeo__player": "^2.18.0",
36
36
  "@vimeo/player": "^2.25.0",
37
37
  "html-react-parser": "^3.0.1",
package/src/components/items/FileItem/ImageItem.tsx CHANGED
@@ -77,6 +77,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
77
77
  : 'transparent';
78
78
  const inlineStyles = {
79
79
  ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
80
+ ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
80
81
  transition: imgStateParams?.transition ?? 'none'
81
82
  };
82
83
  const isInteractive = opacity !== 0;
@@ -184,6 +185,9 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
184
185
  ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
185
186
  }
186
187
  .image-${item.id} {
188
+ border: solid;
189
+ border-color: transparent;
190
+ border-width: ${layoutParams.strokeWidth * 100}vw;
187
191
  border-radius: ${layoutParams.radius * 100}vw;
188
192
  }
189
193
  .image-border-${item.id} {
package/src/components/items/FileItem/VideoItem.tsx CHANGED
@@ -84,6 +84,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
84
84
  useRegisterResize(ref, onResize);
85
85
  const inlineStyles = {
86
86
  ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
87
+ ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
87
88
  transition: videoStateParams?.transition ?? 'none'
88
89
  };
89
90
  const isInteractive = opacity !== 0;
@@ -302,6 +303,9 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
302
303
  ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
303
304
  }
304
305
  .video-${item.id} {
306
+ border: solid;
307
+ border-color: transparent;
308
+ border-width: ${layoutParams.strokeWidth * 100}vw;
305
309
  border-radius: ${layoutParams.radius * 100}vw;
306
310
  }
307
311
  .video-border-${item.id} {