@se-studio/core-ui 1.0.28 → 1.0.29
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.
|
@@ -13,7 +13,9 @@ import type { IVisualProps } from './Visual';
|
|
|
13
13
|
* which enables currentColor support for theming.
|
|
14
14
|
*
|
|
15
15
|
* When a mask is set on the visual, the component wraps the content in a
|
|
16
|
-
* container with
|
|
16
|
+
* container with the mask applied. Masks can be:
|
|
17
|
+
* - URL-based (starts with '/' or 'http'): Uses CSS mask-image
|
|
18
|
+
* - Class-based (Tailwind classes): Applied directly to the container
|
|
17
19
|
*
|
|
18
20
|
* @param visual - Visual data containing image, video, or animation
|
|
19
21
|
* @param muted - Whether video should be muted (default: false)
|
|
@@ -59,13 +61,21 @@ import type { IVisualProps } from './Visual';
|
|
|
59
61
|
* />
|
|
60
62
|
* ```
|
|
61
63
|
*
|
|
62
|
-
* @example Image with mask
|
|
64
|
+
* @example Image with URL-based mask (CSS mask-image)
|
|
63
65
|
* ```tsx
|
|
64
66
|
* <Visual
|
|
65
67
|
* visual={{ ...imageVisual, mask: '/assets/masks/circle.svg' }}
|
|
66
68
|
* className="w-64"
|
|
67
69
|
* />
|
|
68
70
|
* ```
|
|
71
|
+
*
|
|
72
|
+
* @example Image with class-based mask (Tailwind classes)
|
|
73
|
+
* ```tsx
|
|
74
|
+
* <Visual
|
|
75
|
+
* visual={{ ...imageVisual, mask: 'aspect-square rounded-full' }}
|
|
76
|
+
* className="w-64"
|
|
77
|
+
* />
|
|
78
|
+
* ```
|
|
69
79
|
*/
|
|
70
80
|
export declare const Visual: React.FC<{
|
|
71
81
|
visual: IVisual;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VisualComponent.d.ts","sourceRoot":"","sources":["../../src/components/VisualComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"VisualComponent.d.ts","sourceRoot":"","sources":["../../src/components/VisualComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAU7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAgG/D,CAAC"}
|
|
@@ -4,6 +4,13 @@ import { UnsupportedWarning } from '../utils/UnsupportedWarning';
|
|
|
4
4
|
import AnimationServer from './AnimationServer';
|
|
5
5
|
import ImageComponent from './ImageComponent';
|
|
6
6
|
import VideoComponent from './VideoComponent';
|
|
7
|
+
/**
|
|
8
|
+
* Determines if a mask value is a URL (for CSS mask-image) or Tailwind classes.
|
|
9
|
+
* URLs start with '/' or 'http', everything else is treated as Tailwind classes.
|
|
10
|
+
*/
|
|
11
|
+
function isMaskUrl(mask) {
|
|
12
|
+
return mask.startsWith('/') || mask.startsWith('http');
|
|
13
|
+
}
|
|
7
14
|
/**
|
|
8
15
|
* Visual component for rendering images, videos, and animations.
|
|
9
16
|
*
|
|
@@ -16,7 +23,9 @@ import VideoComponent from './VideoComponent';
|
|
|
16
23
|
* which enables currentColor support for theming.
|
|
17
24
|
*
|
|
18
25
|
* When a mask is set on the visual, the component wraps the content in a
|
|
19
|
-
* container with
|
|
26
|
+
* container with the mask applied. Masks can be:
|
|
27
|
+
* - URL-based (starts with '/' or 'http'): Uses CSS mask-image
|
|
28
|
+
* - Class-based (Tailwind classes): Applied directly to the container
|
|
20
29
|
*
|
|
21
30
|
* @param visual - Visual data containing image, video, or animation
|
|
22
31
|
* @param muted - Whether video should be muted (default: false)
|
|
@@ -62,13 +71,21 @@ import VideoComponent from './VideoComponent';
|
|
|
62
71
|
* />
|
|
63
72
|
* ```
|
|
64
73
|
*
|
|
65
|
-
* @example Image with mask
|
|
74
|
+
* @example Image with URL-based mask (CSS mask-image)
|
|
66
75
|
* ```tsx
|
|
67
76
|
* <Visual
|
|
68
77
|
* visual={{ ...imageVisual, mask: '/assets/masks/circle.svg' }}
|
|
69
78
|
* className="w-64"
|
|
70
79
|
* />
|
|
71
80
|
* ```
|
|
81
|
+
*
|
|
82
|
+
* @example Image with class-based mask (Tailwind classes)
|
|
83
|
+
* ```tsx
|
|
84
|
+
* <Visual
|
|
85
|
+
* visual={{ ...imageVisual, mask: 'aspect-square rounded-full' }}
|
|
86
|
+
* className="w-64"
|
|
87
|
+
* />
|
|
88
|
+
* ```
|
|
72
89
|
*/
|
|
73
90
|
export const Visual = ({ visual, muted, controls, autoPlay, visualSizes, fullPlayer, loop, loopDelay, analyticsContext, componentLabel, className, style, ...props }) => {
|
|
74
91
|
const { animation, image, video, mask } = visual;
|
|
@@ -88,8 +105,13 @@ export const Visual = ({ visual, muted, controls, autoPlay, visualSizes, fullPla
|
|
|
88
105
|
}
|
|
89
106
|
// If mask is set, wrap in a container with mask applied
|
|
90
107
|
if (mask) {
|
|
91
|
-
|
|
92
|
-
|
|
108
|
+
if (isMaskUrl(mask)) {
|
|
109
|
+
// URL-based mask: use CSS mask-image with 1:1 aspect ratio
|
|
110
|
+
const maskStyle = { '--mask-url': `url(${mask})`, ...style };
|
|
111
|
+
return (_jsx("div", { className: cn('aspect-square overflow-hidden', 'mask-[image:var(--mask-url)] mask-[size:100%_100%] mask-no-repeat mask-center', className), style: maskStyle, children: content }));
|
|
112
|
+
}
|
|
113
|
+
// Class-based mask: apply Tailwind classes directly
|
|
114
|
+
return (_jsx("div", { className: cn('overflow-hidden', mask, className), style: style, children: content }));
|
|
93
115
|
}
|
|
94
116
|
return content;
|
|
95
117
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VisualComponent.js","sourceRoot":"","sources":["../../src/components/VisualComponent.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAG9C
|
|
1
|
+
{"version":3,"file":"VisualComponent.js","sourceRoot":"","sources":["../../src/components/VisualComponent.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@se-studio/core-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.29",
|
|
4
4
|
"description": "Shared React UI component library with Tailwind CSS v4 for SE Studio applications",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -56,8 +56,8 @@
|
|
|
56
56
|
"clsx": "^2.1.1",
|
|
57
57
|
"html-entities": "^2.6.0",
|
|
58
58
|
"tailwind-merge": "^3.4.0",
|
|
59
|
-
"@se-studio/contentful-rest-api": "1.0.
|
|
60
|
-
"@se-studio/core-data-types": "1.0.
|
|
59
|
+
"@se-studio/contentful-rest-api": "1.0.29",
|
|
60
|
+
"@se-studio/core-data-types": "1.0.29"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@biomejs/biome": "^2.3.8",
|