@cntrl-site/components 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/Components/Lightbox/Lightbox.d.ts

@@ -5,8 +5,9 @@ type LightboxGalleryProps = {
     styles: LightboxStyles;
     portalId: string;
     activeEvent: 'close' | 'open';
+    isEditor?: boolean;
 };
-export declare function LightboxGallery({ settings, content, styles, portalId, activeEvent }: LightboxGalleryProps): JSX.Element;
+export declare function LightboxGallery({ settings, content, styles, portalId, activeEvent, isEditor }: LightboxGalleryProps): JSX.Element;
 type LightboxImage = {
     image: {
         url: string;

package/dist/index.js

@@ -1535,7 +1535,7 @@ const getPositionStyles = (position, offset) => {
   }
   return styles2;
 };
-function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent }) {
+function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent, isEditor = true }) {
   const [open, setOpen] = React.useState(false);
   const { url } = settings.thumbnailBlock.cover;
   React.useEffect(() => {
@@ -1556,10 +1556,10 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, portalId })
+    /* @__PURE__ */ jsxRuntime.jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, portalId, isEditor })
   ] });
 }
-const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId }) => {
+const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId, isEditor }) => {
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const lightboxRef = React.useRef(null);
   const resizeObserverRef = React.useRef(null);
@@ -1670,17 +1670,28 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
   };
   const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
+  const backdropDurationMs = appear.type === "fade in" || appear.type === "mix" ? Math.floor(appearDurationMs * 0.7) : appearDurationMs;
   const appearClass = (() => {
     if (appear.type === "fade in") return styles.fadeIn;
-    if (appear.type === "slide in") {
-      return "";
+    if (appear.type === "slide in" || appear.type === "mix") {
+      switch (appear.direction) {
+        case "left":
+          return styles.slideInLeft;
+        case "right":
+          return styles.slideInRight;
+        case "top":
+          return styles.slideInTop;
+        case "bottom":
+          return styles.slideInBottom;
+        default:
+          return styles.slideInRight;
+      }
     }
-    if (appear.type === "mix") return styles.fadeIn;
     return styles.fadeIn;
   })();
   const backdropAppearClass = (() => {
-    if (appear.type === "fade in") return styles.fadeIn;
-    if (appear.type === "slide in" || appear.type === "mix") {
+    if (appear.type === "fade in" || appear.type === "mix") return styles.fadeIn;
+    if (appear.type === "slide in") {
       switch (appear.direction) {
         case "left":
           return styles.slideInLeft;
@@ -1701,8 +1712,8 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn(styles.backdropStyle, backdropAppearClass),
-        style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
+        className: cn(styles.backdropStyle, backdropAppearClass, { [styles.editor]: isEditor }),
+        style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${backdropDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
         onClick: handleBackdropClick,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -1713,7 +1724,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
               animationDuration: `${appearDurationMs}ms`,
               animationTimingFunction: "ease",
               animationFillMode: "both",
-              ...appear.type === "mix" && { animationDelay: "0.5s" },
+              ...appear.type === "mix" && { animationDelay: `${backdropDurationMs}ms` },
               "--splide-speed": triggers.duration || "500ms"
             },
             children: [
@@ -1753,6 +1764,9 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                       {
                         className: styles.imgWrapper,
                         onClick: handleImageWrapperClick,
+                        style: {
+                          padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`
+                        },
                         children: /* @__PURE__ */ jsxRuntime.jsx(
                           "img",
                           {
@@ -1929,7 +1943,7 @@ const LightboxComponent = {
   name: "Lightbox",
   preview: {
     type: "video",
-    url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7EQ4ME6CP4KX7TJ4HPAXFEW.mp4"
+    url: "https://cdn.cntrl.site/projects/01GJ2SPDSH73MC92WW7ZA2CWBY/articles-assets/01KA24CHYZXJBZ0Q714B05A7VD.mp4"
   },
   defaultSize: {
     width: 400,

package/dist/index.mjs

@@ -1533,7 +1533,7 @@ const getPositionStyles = (position, offset) => {
   }
   return styles2;
 };
-function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent }) {
+function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent, isEditor = true }) {
   const [open, setOpen] = React.useState(false);
   const { url } = settings.thumbnailBlock.cover;
   useEffect(() => {
@@ -1554,10 +1554,10 @@ function LightboxGallery({ settings, content, styles: styles2, portalId, activeE
         onClick: () => setOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, portalId })
+    /* @__PURE__ */ jsx(Lightbox, { isOpen: open, onClose: () => setOpen(false), content, settings, portalId, isEditor })
   ] });
 }
-const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId }) => {
+const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId, isEditor }) => {
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const lightboxRef = useRef(null);
   const resizeObserverRef = useRef(null);
@@ -1668,17 +1668,28 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
   };
   const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
+  const backdropDurationMs = appear.type === "fade in" || appear.type === "mix" ? Math.floor(appearDurationMs * 0.7) : appearDurationMs;
   const appearClass = (() => {
     if (appear.type === "fade in") return styles.fadeIn;
-    if (appear.type === "slide in") {
-      return "";
+    if (appear.type === "slide in" || appear.type === "mix") {
+      switch (appear.direction) {
+        case "left":
+          return styles.slideInLeft;
+        case "right":
+          return styles.slideInRight;
+        case "top":
+          return styles.slideInTop;
+        case "bottom":
+          return styles.slideInBottom;
+        default:
+          return styles.slideInRight;
+      }
     }
-    if (appear.type === "mix") return styles.fadeIn;
     return styles.fadeIn;
   })();
   const backdropAppearClass = (() => {
-    if (appear.type === "fade in") return styles.fadeIn;
-    if (appear.type === "slide in" || appear.type === "mix") {
+    if (appear.type === "fade in" || appear.type === "mix") return styles.fadeIn;
+    if (appear.type === "slide in") {
       switch (appear.direction) {
         case "left":
           return styles.slideInLeft;
@@ -1699,8 +1710,8 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn(styles.backdropStyle, backdropAppearClass),
-        style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
+        className: cn(styles.backdropStyle, backdropAppearClass, { [styles.editor]: isEditor }),
+        style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${backdropDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
         onClick: handleBackdropClick,
         children: /* @__PURE__ */ jsxs(
           "div",
@@ -1711,7 +1722,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
               animationDuration: `${appearDurationMs}ms`,
               animationTimingFunction: "ease",
               animationFillMode: "both",
-              ...appear.type === "mix" && { animationDelay: "0.5s" },
+              ...appear.type === "mix" && { animationDelay: `${backdropDurationMs}ms` },
               "--splide-speed": triggers.duration || "500ms"
             },
             children: [
@@ -1751,6 +1762,9 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
                       {
                         className: styles.imgWrapper,
                         onClick: handleImageWrapperClick,
+                        style: {
+                          padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`
+                        },
                         children: /* @__PURE__ */ jsx(
                           "img",
                           {
@@ -1927,7 +1941,7 @@ const LightboxComponent = {
   name: "Lightbox",
   preview: {
     type: "video",
-    url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7EQ4ME6CP4KX7TJ4HPAXFEW.mp4"
+    url: "https://cdn.cntrl.site/projects/01GJ2SPDSH73MC92WW7ZA2CWBY/articles-assets/01KA24CHYZXJBZ0Q714B05A7VD.mp4"
   },
   defaultSize: {
     width: 400,

package/package.json

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