@cntrl-site/components 0.1.0-4 → 0.1.0-5

package/dist/index.js

@@ -1483,14 +1483,29 @@ const styles = {
 };
 function LightboxGallery({ settings, content, styles: styles2, portalId }) {
   const [open, setOpen] = React.useState(false);
+  const [wrapperRef, setWrapperRef] = React.useState(null);
+  const [coverDimensions, setCoverDimensions] = React.useState(void 0);
   const { url: coverUrl } = settings.cover;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  React.useEffect(() => {
+    if (!wrapperRef) return;
+    const observer = new ResizeObserver((entries) => {
+      if (!wrapperRef) return;
+      const [wrapper2] = entries;
+      setCoverDimensions({
+        width: Math.round(wrapper2.contentRect.width),
+        height: Math.round(wrapper2.contentRect.height)
+      });
+    });
+    observer.observe(wrapperRef);
+    return () => observer.unobserve(wrapperRef);
+  }, [wrapperRef]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setWrapperRef, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
         src: coverUrl,
         alt: "Cover",
-        style: { width: "100%", height: "100%", cursor: "pointer" },
+        style: { width: (coverDimensions == null ? void 0 : coverDimensions.width) ? coverDimensions.width : "100%", height: (coverDimensions == null ? void 0 : coverDimensions.height) ? coverDimensions.height : "100%", cursor: "pointer" },
         onClick: () => setOpen(true)
       }
     ),
@@ -1902,7 +1917,7 @@ const LightboxComponent = {
                 type: "string",
                 title: "Align",
                 display: {
-                  type: "ratio-group"
+                  type: "align-grid"
                 },
                 enum: ["top", "center", "bottom"]
               },

package/dist/index.mjs

@@ -1480,15 +1480,30 @@ const styles = {
   slideInBottom
 };
 function LightboxGallery({ settings, content, styles: styles2, portalId }) {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
+  const [wrapperRef, setWrapperRef] = useState(null);
+  const [coverDimensions, setCoverDimensions] = useState(void 0);
   const { url: coverUrl } = settings.cover;
-  return /* @__PURE__ */ jsxs("div", { children: [
+  useEffect(() => {
+    if (!wrapperRef) return;
+    const observer = new ResizeObserver((entries) => {
+      if (!wrapperRef) return;
+      const [wrapper2] = entries;
+      setCoverDimensions({
+        width: Math.round(wrapper2.contentRect.width),
+        height: Math.round(wrapper2.contentRect.height)
+      });
+    });
+    observer.observe(wrapperRef);
+    return () => observer.unobserve(wrapperRef);
+  }, [wrapperRef]);
+  return /* @__PURE__ */ jsxs("div", { ref: setWrapperRef, children: [
     /* @__PURE__ */ jsx(
       "img",
       {
         src: coverUrl,
         alt: "Cover",
-        style: { width: "100%", height: "100%", cursor: "pointer" },
+        style: { width: (coverDimensions == null ? void 0 : coverDimensions.width) ? coverDimensions.width : "100%", height: (coverDimensions == null ? void 0 : coverDimensions.height) ? coverDimensions.height : "100%", cursor: "pointer" },
         onClick: () => setOpen(true)
       }
     ),
@@ -1900,7 +1915,7 @@ const LightboxComponent = {
                 type: "string",
                 title: "Align",
                 display: {
-                  type: "ratio-group"
+                  type: "align-grid"
                 },
                 enum: ["top", "center", "bottom"]
               },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/components",
-  "version": "0.1.0-4",
+  "version": "0.1.0-5",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",