@se-studio/core-ui 1.4.2 → 1.4.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @se-studio/core-ui
 
+## 1.4.3
+
+### Patch Changes
+
+- fix(live-preview): forward `data-contentful-*` attrs through SVG icon and SVG image components (#58, #59)
+
+  `SvgIconComponent` and `SvgImageComponent` now spread rest props onto the root `<svg>` / `Image`, so `getPreviewFieldProps` on `<Visual />` reaches the DOM for sprite icons and non-sprite SVGs.
+
 ## 1.4.2
 
 ### Patch Changes

package/dist/components/SvgIconComponent.d.ts

@@ -1,10 +1,5 @@
 import type { ISvgImage } from '@se-studio/core-data-types';
-import type { CSSProperties } from 'react';
-interface SvgIconComponentProps {
-    image: ISvgImage;
-    className?: string;
-    style?: CSSProperties;
-}
+import { type IImageProps } from './Visual';
 /**
  * Renders an SVG icon using a sprite sheet reference.
  * The icon is rendered as an SVG with a <use> element that references
@@ -18,6 +13,8 @@ interface SvgIconComponentProps {
  * @param className - Additional CSS classes
  * @param style - Additional inline styles
  */
-declare function SvgIconComponent({ image, className, style }: SvgIconComponentProps): import("react/jsx-runtime").JSX.Element;
+declare function SvgIconComponent({ image, className, style, ...rest }: {
+    image: ISvgImage;
+} & Omit<IImageProps, 'analytics' | 'componentLabel'>): import("react/jsx-runtime").JSX.Element;
 export default SvgIconComponent;
 //# sourceMappingURL=SvgIconComponent.d.ts.map

package/dist/components/SvgIconComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SvgIconComponent.d.ts","sourceRoot":"","sources":["../../src/components/SvgIconComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,UAAU,qBAAqB;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,gBAAgB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,qBAAqB,2CAkB3E;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SvgIconComponent.d.ts","sourceRoot":"","sources":["../../src/components/SvgIconComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAElE;;;;;;;;;;;;GAYG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE;IAAE,KAAK,EAAE,SAAS,CAAA;CAAE,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,gBAAgB,CAAC,2CAmB1E;AAED,eAAe,gBAAgB,CAAC"}

package/dist/components/SvgIconComponent.js

@@ -13,11 +13,11 @@ import { calculateCropDetails } from './Visual';
  * @param className - Additional CSS classes
  * @param style - Additional inline styles
  */
-function SvgIconComponent({ image, className, style }) {
+function SvgIconComponent({ image, className, style, ...rest }) {
     const { id, width, height, description, name } = image;
     const iconId = `icon-${id}`;
     const cropProperties = calculateCropDetails(image);
-    return (_jsx("svg", { width: width || undefined, height: height || undefined, fill: "none", className: className, style: { ...style, ...cropProperties }, "aria-label": description ?? name ?? undefined, role: "img", children: _jsx("use", { href: `#${iconId}` }) }));
+    return (_jsx("svg", { width: width || undefined, height: height || undefined, fill: "none", className: className, style: { ...style, ...cropProperties }, "aria-label": description ?? name ?? undefined, role: "img", ...rest, children: _jsx("use", { href: `#${iconId}` }) }));
 }
 export default SvgIconComponent;
 //# sourceMappingURL=SvgIconComponent.js.map

package/dist/components/SvgIconComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SvgIconComponent.js","sourceRoot":"","sources":["../../src/components/SvgIconComponent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAQhD;;;;;;;;;;;;GAYG;AACH,SAAS,gBAAgB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAyB;IAC1E,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvD,MAAM,MAAM,GAAG,QAAQ,EAAE,EAAE,CAAC;IAC5B,MAAM,cAAc,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEnD,OAAO,CACL,cACE,KAAK,EAAE,KAAK,IAAI,SAAS,EACzB,MAAM,EAAE,MAAM,IAAI,SAAS,EAC3B,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,cAAc,EAAE,gBAC1B,WAAW,IAAI,IAAI,IAAI,SAAS,EAC5C,IAAI,EAAC,KAAK,YAEV,cAAK,IAAI,EAAE,IAAI,MAAM,EAAE,GAAI,GACvB,CACP,CAAC;AACJ,CAAC;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SvgIconComponent.js","sourceRoot":"","sources":["../../src/components/SvgIconComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,oBAAoB,EAAoB,MAAM,UAAU,CAAC;AAElE;;;;;;;;;;;;GAYG;AACH,SAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACkE;IACzE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvD,MAAM,MAAM,GAAG,QAAQ,EAAE,EAAE,CAAC;IAC5B,MAAM,cAAc,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEnD,OAAO,CACL,cACE,KAAK,EAAE,KAAK,IAAI,SAAS,EACzB,MAAM,EAAE,MAAM,IAAI,SAAS,EAC3B,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,cAAc,EAAE,gBAC1B,WAAW,IAAI,IAAI,IAAI,SAAS,EAC5C,IAAI,EAAC,KAAK,KACN,IAAI,YAER,cAAK,IAAI,EAAE,IAAI,MAAM,EAAE,GAAI,GACvB,CACP,CAAC;AACJ,CAAC;AAED,eAAe,gBAAgB,CAAC"}

package/dist/components/SvgImageComponent.d.ts

@@ -1,6 +1,6 @@
 import type { ISvgImage } from '@se-studio/core-data-types';
 import { type IImageProps } from './Visual';
-declare function SvgImageComponent({ image, loading, fetchPriority, className, style, }: {
+declare function SvgImageComponent({ image, loading, fetchPriority, className, style, ...rest }: {
     image: ISvgImage;
 } & Omit<IImageProps, 'analytics' | 'componentLabel'>): import("react/jsx-runtime").JSX.Element;
 export default SvgImageComponent;

package/dist/components/SvgImageComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SvgImageComponent.d.ts","sourceRoot":"","sources":["../../src/components/SvgImageComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAElE,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,EACT,KAAK,GACN,EAAE;IAAE,KAAK,EAAE,SAAS,CAAA;CAAE,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,gBAAgB,CAAC,2CAiB1E;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SvgImageComponent.d.ts","sourceRoot":"","sources":["../../src/components/SvgImageComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAElE,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE;IAAE,KAAK,EAAE,SAAS,CAAA;CAAE,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,gBAAgB,CAAC,2CAkB1E;AAED,eAAe,iBAAiB,CAAC"}

package/dist/components/SvgImageComponent.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Image from 'next/image';
 import { calculateCropDetails } from './Visual';
-function SvgImageComponent({ image, loading, fetchPriority, className, style, }) {
+function SvgImageComponent({ image, loading, fetchPriority, className, style, ...rest }) {
     const { svgSrc, name, width, height, description } = image;
     const cropProperties = calculateCropDetails(image);
-    return (_jsx(Image, { src: svgSrc, alt: description ?? name, width: width, height: height, style: { ...style, ...cropProperties }, loading: loading, className: className, unoptimized: true, fetchPriority: fetchPriority }));
+    return (_jsx(Image, { src: svgSrc, alt: description ?? name, width: width, height: height, style: { ...style, ...cropProperties }, loading: loading, className: className, unoptimized: true, fetchPriority: fetchPriority, ...rest }));
 }
 export default SvgImageComponent;
 //# sourceMappingURL=SvgImageComponent.js.map

package/dist/components/SvgImageComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SvgImageComponent.js","sourceRoot":"","sources":["../../src/components/SvgImageComponent.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAoB,MAAM,UAAU,CAAC;AAElE,SAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,EACT,KAAK,GACoE;IACzE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,cAAc,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,KAAK,IACJ,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,WAAW,IAAI,IAAI,EACxB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,cAAc,EAAE,EACtC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SvgImageComponent.js","sourceRoot":"","sources":["../../src/components/SvgImageComponent.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAoB,MAAM,UAAU,CAAC;AAElE,SAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,OAAO,EACP,aAAa,EACb,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACkE;IACzE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,cAAc,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,KAAK,IACJ,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,WAAW,IAAI,IAAI,EACxB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,cAAc,EAAE,EACtC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,aAAa,KACxB,IAAI,GACR,CACH,CAAC;AACJ,CAAC;AAED,eAAe,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@se-studio/core-ui",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Shared React UI component library with Tailwind CSS v4 for SE Studio applications",
   "repository": {
     "type": "git",
@@ -75,8 +75,8 @@
     "mustache": "4.2.0",
     "server-only": "0.0.1",
     "tailwind-merge": "^3.6.0",
-    "@se-studio/core-data-types": "1.4.1",
-    "@se-studio/contentful-rest-api": "1.5.1"
+    "@se-studio/contentful-rest-api": "1.5.1",
+    "@se-studio/core-data-types": "1.4.1"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.16",