@se-studio/core-ui 1.0.26 → 1.0.27
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.
|
@@ -12,6 +12,9 @@ import type { IVisualProps } from './Visual';
|
|
|
12
12
|
* SVG images from icon fields are automatically rendered using the sprite system,
|
|
13
13
|
* which enables currentColor support for theming.
|
|
14
14
|
*
|
|
15
|
+
* When a mask is set on the visual, the component wraps the content in a
|
|
16
|
+
* container with CSS mask applied, forcing a 1:1 aspect ratio.
|
|
17
|
+
*
|
|
15
18
|
* @param visual - Visual data containing image, video, or animation
|
|
16
19
|
* @param muted - Whether video should be muted (default: false)
|
|
17
20
|
* @param controls - Whether video should show controls (default: false)
|
|
@@ -55,6 +58,14 @@ import type { IVisualProps } from './Visual';
|
|
|
55
58
|
* loopDelay={1000}
|
|
56
59
|
* />
|
|
57
60
|
* ```
|
|
61
|
+
*
|
|
62
|
+
* @example Image with mask
|
|
63
|
+
* ```tsx
|
|
64
|
+
* <Visual
|
|
65
|
+
* visual={{ ...imageVisual, mask: '/assets/masks/circle.svg' }}
|
|
66
|
+
* className="w-64"
|
|
67
|
+
* />
|
|
68
|
+
* ```
|
|
58
69
|
*/
|
|
59
70
|
export declare const Visual: React.FC<{
|
|
60
71
|
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;
|
|
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;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAuF/D,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from '../utils/cn';
|
|
2
3
|
import { UnsupportedWarning } from '../utils/UnsupportedWarning';
|
|
3
4
|
import AnimationServer from './AnimationServer';
|
|
4
5
|
import ImageComponent from './ImageComponent';
|
|
@@ -14,6 +15,9 @@ import VideoComponent from './VideoComponent';
|
|
|
14
15
|
* SVG images from icon fields are automatically rendered using the sprite system,
|
|
15
16
|
* which enables currentColor support for theming.
|
|
16
17
|
*
|
|
18
|
+
* When a mask is set on the visual, the component wraps the content in a
|
|
19
|
+
* container with CSS mask applied, forcing a 1:1 aspect ratio.
|
|
20
|
+
*
|
|
17
21
|
* @param visual - Visual data containing image, video, or animation
|
|
18
22
|
* @param muted - Whether video should be muted (default: false)
|
|
19
23
|
* @param controls - Whether video should show controls (default: false)
|
|
@@ -57,18 +61,36 @@ import VideoComponent from './VideoComponent';
|
|
|
57
61
|
* loopDelay={1000}
|
|
58
62
|
* />
|
|
59
63
|
* ```
|
|
64
|
+
*
|
|
65
|
+
* @example Image with mask
|
|
66
|
+
* ```tsx
|
|
67
|
+
* <Visual
|
|
68
|
+
* visual={{ ...imageVisual, mask: '/assets/masks/circle.svg' }}
|
|
69
|
+
* className="w-64"
|
|
70
|
+
* />
|
|
71
|
+
* ```
|
|
60
72
|
*/
|
|
61
|
-
export const Visual = ({ visual, muted, controls, autoPlay, visualSizes, fullPlayer, loop, loopDelay, analyticsContext, componentLabel, ...props }) => {
|
|
62
|
-
const { animation, image, video } = visual;
|
|
73
|
+
export const Visual = ({ visual, muted, controls, autoPlay, visualSizes, fullPlayer, loop, loopDelay, analyticsContext, componentLabel, className, style, ...props }) => {
|
|
74
|
+
const { animation, image, video, mask } = visual;
|
|
75
|
+
// Render the appropriate visual type
|
|
76
|
+
let content;
|
|
63
77
|
if (animation) {
|
|
64
|
-
|
|
78
|
+
content = (_jsx(AnimationServer, { animation: animation, autoPlay: autoPlay, loop: loop, loopDelay: loopDelay, analyticsContext: analyticsContext, componentLabel: componentLabel, className: cn(className, mask && 'size-full object-cover'), style: mask ? undefined : style, ...props }));
|
|
79
|
+
}
|
|
80
|
+
else if (video) {
|
|
81
|
+
content = (_jsx(VideoComponent, { video: video, autoPlay: autoPlay, muted: muted, controls: controls, visualSizes: visualSizes, fullPlayer: fullPlayer, loop: loop, analyticsContext: analyticsContext, componentLabel: componentLabel, className: cn(className, mask && 'size-full object-cover'), style: mask ? undefined : style, ...props }));
|
|
82
|
+
}
|
|
83
|
+
else if (image) {
|
|
84
|
+
content = (_jsx(ImageComponent, { image: image, visualSizes: visualSizes, className: cn(className, mask && 'size-full object-cover'), style: mask ? undefined : style, ...props }));
|
|
65
85
|
}
|
|
66
|
-
|
|
67
|
-
return (_jsx(
|
|
86
|
+
else {
|
|
87
|
+
return (_jsx(UnsupportedWarning, { className: className, style: style, children: "Not supporting non images yet" }));
|
|
68
88
|
}
|
|
69
|
-
|
|
70
|
-
|
|
89
|
+
// If mask is set, wrap in a container with mask applied
|
|
90
|
+
if (mask) {
|
|
91
|
+
const maskStyle = { '--mask-url': `url(${mask})`, ...style };
|
|
92
|
+
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 }));
|
|
71
93
|
}
|
|
72
|
-
return
|
|
94
|
+
return content;
|
|
73
95
|
};
|
|
74
96
|
//# sourceMappingURL=VisualComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VisualComponent.js","sourceRoot":"","sources":["../../src/components/VisualComponent.tsx"],"names":[],"mappings":";
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAiD,CAAC,EACnE,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC;IAEjD,qCAAqC;IACrC,IAAI,OAAwB,CAAC;IAE7B,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,GAAG,CACR,KAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,IAAI,wBAAwB,CAAC,EAC1D,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,KAC3B,KAAK,GACT,CACH,CAAC;IACJ,CAAC;SAAM,IAAI,KAAK,EAAE,CAAC;QACjB,OAAO,GAAG,CACR,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,IAAI,wBAAwB,CAAC,EAC1D,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,KAC3B,KAAK,GACT,CACH,CAAC;IACJ,CAAC;SAAM,IAAI,KAAK,EAAE,CAAC;QACjB,OAAO,GAAG,CACR,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,IAAI,wBAAwB,CAAC,EAC1D,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,KAC3B,KAAK,GACT,CACH,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,CACL,KAAC,kBAAkB,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,8CAEjC,CACtB,CAAC;IACJ,CAAC;IAED,wDAAwD;IACxD,IAAI,IAAI,EAAE,CAAC;QACT,MAAM,SAAS,GAAG,EAAE,YAAY,EAAE,OAAO,IAAI,GAAG,EAAE,GAAG,KAAK,EAAmB,CAAC;QAC9E,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,+BAA+B,EAC/B,+EAA+E,EAC/E,SAAS,CACV,EACD,KAAK,EAAE,SAAS,YAEf,OAAO,GACJ,CACP,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
|
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.27",
|
|
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.27",
|
|
60
|
+
"@se-studio/core-data-types": "1.0.27"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@biomejs/biome": "^2.3.8",
|