@weaverse/react 0.7.53 → 0.7.55

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import * as React$1 from 'react';
 import React__default, { HTMLAttributes, ReactElement, ReactNode, CSSProperties } from 'react';
 import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
 import { DialogContentProps, DialogProps, DialogTitleProps, DialogCloseProps } from '@radix-ui/react-dialog';
+import { KeenSliderInstance } from 'keen-slider';
 
 declare let createRootContext: (configs: WeaverseType) => Weaverse;
 declare let WeaverseContext: React$1.Context<Weaverse>;
@@ -54,6 +55,15 @@ interface WeaverseIconProps extends HTMLAttributes<SVGElement> {
 interface TooltipProps {
     children: React.ReactNode;
 }
+interface SliderProps {
+    children: React.ReactNode;
+    className?: string;
+}
+interface SliderArrowsProps {
+    currentSlide: number;
+    instanceRef: React.MutableRefObject<KeenSliderInstance | null>;
+    className?: string;
+}
 
 interface WeaverseElementProps extends Partial<ReactElement> {
     css?: ElementCSS;
@@ -201,11 +211,14 @@ declare function Icon({ name, className, ...props }: WeaverseIconProps): JSX.Ele
 
 declare function Tooltip({ children }: TooltipProps): JSX.Element;
 
+declare function Slider({ children, className }: SliderProps): JSX.Element;
+
 declare let Components: {
     Placeholder: React$1.ForwardRefExoticComponent<PlaceholderProps & React$1.RefAttributes<HTMLDivElement>>;
     Spinner: typeof Spinner;
     ModalComponents: typeof ModalComponents;
     Icon: typeof Icon;
+    Slider: typeof Slider;
     Tooltip: typeof Tooltip;
 };
 
@@ -213,4 +226,4 @@ declare const Elements: Record<string, WeaverseElement>;
 
 declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element | null;
 
-export { ButtonElementProps, Components, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, Elements, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutBackgroundProps, LayoutElementProps, MapElementProps, ModalContentProps, PlaceholderProps, TextElementProps, TimerBlockProps, TooltipProps, VideoCommonProps, VideoElementProps, VimeoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseIcon, WeaverseIconProps, WeaverseRoot, WeaverseRootPropsType, YoutubeElementProps, createRootContext };
+export { ButtonElementProps, Components, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, Elements, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutBackgroundProps, LayoutElementProps, MapElementProps, ModalContentProps, PlaceholderProps, SliderArrowsProps, SliderProps, TextElementProps, TimerBlockProps, TooltipProps, VideoCommonProps, VideoElementProps, VimeoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseIcon, WeaverseIconProps, WeaverseRoot, WeaverseRootPropsType, YoutubeElementProps, createRootContext };

package/dist/index.js

@@ -40,7 +40,7 @@ __reExport(src_exports, require("@weaverse/core"), module.exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react23 = require("react");
+var import_react26 = require("react");
 
 // src/elements/Button.tsx
 var React = __toESM(require("react"));
@@ -122,15 +122,15 @@ var INSTAGRAM_API = "https://graph.instagram.com";
 
 // src/utils/css.ts
 var import_clsx = __toESM(require("clsx"));
-function formatCSS(css9) {
+function formatCSS(css10) {
   return {
-    "@desktop": css9["@desktop"],
-    "@mobile": css9["@mobile"]
+    "@desktop": css10["@desktop"],
+    "@mobile": css10["@mobile"]
   };
 }
 var permanentClasses = {};
 function generateItemClassName(instance, stitchesInstance) {
-  let { css: css9, type, className: cls = "" } = instance.data;
+  let { css: css10, type, className: cls = "" } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = instance.Element?.permanentCss;
@@ -144,8 +144,8 @@ function generateItemClassName(instance, stitchesInstance) {
     }
   }
   className = permanentClass;
-  if (css9) {
-    let formattedCss = formatCSS(css9);
+  if (css10) {
+    let formattedCss = formatCSS(css10);
     let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
     let { stitchesClass } = instance;
     let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
@@ -690,7 +690,7 @@ Video.defaultProps = {
 var Video_default = Video;
 
 // src/elements/Instagram.tsx
-var import_react22 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 
 // src/components/Placeholder.tsx
 var import_react14 = __toESM(require("react"));
@@ -992,7 +992,7 @@ var StyledOverlay = (0, import_react17.styled)(import_react_dialog.Overlay, {
   display: "block !important",
   backgroundColor: "rgba(0, 0, 0, .3)",
   position: "fixed",
-  zIndex: 9999,
+  zIndex: 99999,
   inset: 0,
   animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
 });
@@ -1015,7 +1015,7 @@ var StyledContent = (0, import_react17.styled)(import_react_dialog.Content, {
   transform: "translate(-50%, -50%)",
   padding: 24,
   animation: `${contentShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
-  zIndex: 9999,
+  zIndex: 99999,
   maxWidth: "90vw",
   width: "auto",
   "*": {
@@ -1041,8 +1041,8 @@ var StyledCloseIcon = (0, import_react17.styled)("button", {
   cursor: "pointer",
   fontFamily: "inherit",
   borderRadius: "100%",
-  height: 25,
-  width: 25,
+  height: 32,
+  width: 32,
   padding: 4,
   display: "inline-flex",
   alignItems: "center",
@@ -1055,8 +1055,8 @@ var StyledCloseIcon = (0, import_react17.styled)("button", {
     backgroundColor: "rgba(112, 112, 112, .1)"
   },
   svg: {
-    width: 20,
-    height: 20
+    width: 24,
+    height: 24
   }
 });
 
@@ -1064,20 +1064,23 @@ var StyledCloseIcon = (0, import_react17.styled)("button", {
 var import_react18 = require("react");
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
+  let rootCtx = (0, import_react18.useContext)(WeaverseContext);
+  let toggleRootzIndex = (open2) => {
+    let { contentRootElement } = rootCtx;
+    if (contentRootElement) {
+      if (open2) {
+        contentRootElement.classList.add("modal-open");
+      } else {
+        contentRootElement.classList.remove("modal-open");
+      }
+    }
+  };
   (0, import_react18.useEffect)(() => {
     let isOpen = open || defaultOpen;
-    if (isOpen) {
-      document.body.classList.add("wv-modal-open");
-    } else {
-      document.body.classList.remove("wv-modal-open");
-    }
+    toggleRootzIndex(isOpen);
   }, [open, defaultOpen]);
   let handleOpenChange = (open2) => {
-    if (open2) {
-      document.body.classList.add("wv-modal-open");
-    } else {
-      document.body.classList.remove("wv-modal-open");
-    }
+    toggleRootzIndex(open2);
     onOpenChange?.(open2);
   };
   return handleOpenChange;
@@ -1160,22 +1163,167 @@ function Tooltip({ children }) {
   }, children);
 }
 
+// src/components/Slider/index.tsx
+var import_clsx4 = __toESM(require("clsx"));
+var import_react23 = require("keen-slider/react");
+var import_react24 = __toESM(require("react"));
+
+// src/components/Slider/Arrows.tsx
+var import_clsx3 = __toESM(require("clsx"));
+var import_react22 = __toESM(require("react"));
+function Arrows(props) {
+  let { currentSlide, instanceRef, className } = props;
+  let { stitchesInstance } = (0, import_react22.useContext)(WeaverseContext);
+  let { className: cssClass } = stitchesInstance.css(css9)();
+  let isFirstSlide = currentSlide === 0;
+  let isLastSlide = false;
+  if (instanceRef.current) {
+    isLastSlide = currentSlide === instanceRef?.current?.track?.details?.maxIdx;
+  }
+  let _className = (0, import_clsx3.default)(className, cssClass);
+  let arrowLeftClass = (0, import_clsx3.default)(
+    "wv-slider-arrow arrow--left",
+    isFirstSlide && "arrow--disabled"
+  );
+  let arrowRightClass = (0, import_clsx3.default)(
+    "wv-slider-arrow arrow--right",
+    isLastSlide && "arrow--disabled"
+  );
+  return /* @__PURE__ */ import_react22.default.createElement("div", {
+    className: _className
+  }, /* @__PURE__ */ import_react22.default.createElement("button", {
+    type: "button",
+    className: arrowLeftClass,
+    onClick: (e) => {
+      e.stopPropagation();
+      instanceRef?.current?.prev();
+    }
+  }, /* @__PURE__ */ import_react22.default.createElement(Icon, {
+    name: "ArrowLeft"
+  })), /* @__PURE__ */ import_react22.default.createElement("button", {
+    type: "button",
+    className: arrowRightClass,
+    onClick: (e) => {
+      e.stopPropagation();
+      instanceRef?.current?.next();
+    }
+  }, /* @__PURE__ */ import_react22.default.createElement(Icon, {
+    name: "ArrowRight"
+  })));
+}
+var css9 = {
+  "@desktop": {
+    ".wv-slider-arrow": {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      width: "44px",
+      height: "44px",
+      padding: "8px",
+      color: "#191919",
+      backgroundColor: "#f2f2f2",
+      textAlign: "center",
+      transition: "all 0.2s ease-in-out",
+      borderRadius: "4px",
+      border: "none",
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: "#191919",
+        color: "#f2f2f2"
+      },
+      svg: {
+        verticalAlign: "middle",
+        width: "22px",
+        height: "22px"
+      },
+      "&.arrow--left": {
+        left: "-80px"
+      },
+      "&.arrow--right": {
+        right: "-80px"
+      },
+      "&.arrow--disabled": {
+        opacity: 0.5
+      }
+    }
+  },
+  "@mobile": {
+    ".wv-slider-arrow": {
+      display: "none"
+    }
+  }
+};
+
+// src/components/Slider/ResizePlugin.ts
+var ResizePlugin = (slider) => {
+  let observer = new ResizeObserver(() => slider.update());
+  slider.on("created", () => {
+    observer.observe(slider.container);
+  });
+  slider.on("destroyed", () => {
+    observer.unobserve(slider.container);
+  });
+};
+
+// src/components/Slider/index.tsx
+function Slider({ children, className }) {
+  let [currentSlide, setCurrentSlide] = (0, import_react24.useState)(0);
+  let [created, setCreated] = (0, import_react24.useState)(false);
+  let [ref, instanceRef] = (0, import_react23.useKeenSlider)(
+    {
+      slides: { perView: 4, spacing: 16 },
+      breakpoints: {
+        "(max-width: 1024px)": {
+          slides: { perView: 3, spacing: 16 }
+        },
+        "(max-width: 768px)": {
+          slides: {
+            perView: 1,
+            spacing: 32
+          }
+        }
+      },
+      created: () => {
+        setCreated(true);
+      },
+      slideChanged: (slider) => {
+        setCurrentSlide(slider.track.details.rel);
+      }
+    },
+    [ResizePlugin]
+  );
+  let _className = (0, import_clsx4.default)("keen-slider", className);
+  let arrowsClass = (0, import_clsx4.default)(className && `${className}-arrows`);
+  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, /* @__PURE__ */ import_react24.default.createElement("div", {
+    ref,
+    className: _className
+  }, /* @__PURE__ */ import_react24.default.createElement("link", {
+    rel: "stylesheet",
+    href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
+  }), children), created && instanceRef?.current && /* @__PURE__ */ import_react24.default.createElement(Arrows, {
+    currentSlide,
+    instanceRef,
+    className: arrowsClass
+  }));
+}
+
 // src/components/index.ts
 var Components = {
   Placeholder: Placeholder_default,
   Spinner,
   ModalComponents: Modal_exports,
   Icon,
+  Slider,
   Tooltip
 };
 
 // src/elements/Instagram.tsx
-var Instagram = (0, import_react22.forwardRef)(
+var Instagram = (0, import_react25.forwardRef)(
   (props, ref) => {
     let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = (0, import_react22.useState)([]);
-    let [error, setError] = (0, import_react22.useState)(null);
-    (0, import_react22.useEffect)(() => {
+    let [media, setMedia] = (0, import_react25.useState)([]);
+    let [error, setError] = (0, import_react25.useState)(null);
+    (0, import_react25.useEffect)(() => {
       if (token) {
         let params = new URLSearchParams({
           access_token: token,
@@ -1192,10 +1340,10 @@ var Instagram = (0, import_react22.forwardRef)(
       }
     }, [token]);
     if (!token || error) {
-      return /* @__PURE__ */ import_react22.default.createElement("div", {
+      return /* @__PURE__ */ import_react25.default.createElement("div", {
         ref,
         ...rest
-      }, /* @__PURE__ */ import_react22.default.createElement(Components.Placeholder, {
+      }, /* @__PURE__ */ import_react25.default.createElement(Components.Placeholder, {
         element: "Instagram"
       }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
     }
@@ -1203,11 +1351,11 @@ var Instagram = (0, import_react22.forwardRef)(
       "--wv-ig-images-per-row": imagesPerRow,
       "--wv-ig-images-gap": gap + "px"
     };
-    return /* @__PURE__ */ import_react22.default.createElement("div", {
+    return /* @__PURE__ */ import_react25.default.createElement("div", {
       ref,
       ...rest,
       style
-    }, /* @__PURE__ */ import_react22.default.createElement("div", {
+    }, /* @__PURE__ */ import_react25.default.createElement("div", {
       className: "wv-ig-media-container"
     }, media.slice(0, numberOfImages).map((item) => {
       let {
@@ -1219,21 +1367,21 @@ var Instagram = (0, import_react22.forwardRef)(
         thumbnail_url
       } = item;
       if (media_type === "VIDEO") {
-        return /* @__PURE__ */ import_react22.default.createElement("video", {
+        return /* @__PURE__ */ import_react25.default.createElement("video", {
           key: id,
           controls: true,
           poster: thumbnail_url
-        }, /* @__PURE__ */ import_react22.default.createElement("source", {
+        }, /* @__PURE__ */ import_react25.default.createElement("source", {
           src: media_url,
           type: "video/mp4"
         }));
       }
-      return /* @__PURE__ */ import_react22.default.createElement("a", {
+      return /* @__PURE__ */ import_react25.default.createElement("a", {
         key: id,
         href: permalink,
         target: "_blank",
         rel: "noreferrer"
-      }, /* @__PURE__ */ import_react22.default.createElement("img", {
+      }, /* @__PURE__ */ import_react25.default.createElement("img", {
         alt: caption,
         src: media_url
       }));
@@ -1300,18 +1448,18 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react23.createContext)({});
+var WeaverseContext = (0, import_react26.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react24 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = (0, import_react24.useState)(context.projectData);
-  let rootRef = (0, import_react24.useRef)();
+  let [, setData] = (0, import_react27.useState)(context.projectData);
+  let rootRef = (0, import_react27.useRef)();
   let renderRoot = () => setData({});
-  (0, import_react24.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -1321,23 +1469,23 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.projectData?.rootId) {
-    return /* @__PURE__ */ import_react24.default.createElement("div", {
+    return /* @__PURE__ */ import_react27.default.createElement("div", {
       className: `weaverse-content-root ${themeClass}`,
       ...eventHandlers,
       ref: rootRef
-    }, /* @__PURE__ */ import_react24.default.createElement(WeaverseContextProvider, {
+    }, /* @__PURE__ */ import_react27.default.createElement(WeaverseContextProvider, {
       value: context
-    }, /* @__PURE__ */ import_react24.default.createElement(ItemInstance, {
+    }, /* @__PURE__ */ import_react27.default.createElement(ItemInstance, {
       id: context.projectData.rootId
     })));
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react24.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react24.useState)(instance.data);
-  let { id, type, childIds = [], css: css9, className, ...rest } = data;
-  (0, import_react24.useEffect)(() => {
+  let { stitchesInstance, elementInstances } = (0, import_react27.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react27.useState)(instance.data);
+  let { id, type, childIds = [], css: css10, className, ...rest } = data;
+  (0, import_react27.useEffect)(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (import_core2.isBrowser && !instance.ref.current) {
@@ -1353,13 +1501,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react24.default.createElement(Component, {
+    return /* @__PURE__ */ import_react27.default.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClassName(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ import_react24.default.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ import_react27.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1369,15 +1517,15 @@ var ItemComponent = ({ instance }) => {
   }
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react24.useContext)(WeaverseContext);
+  let context = (0, import_react27.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react24.default.createElement("div", {
+    return /* @__PURE__ */ import_react27.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react24.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react27.default.createElement(ItemComponent, {
     key: id,
     instance
   });

package/dist/index.mjs

@@ -91,15 +91,15 @@ var INSTAGRAM_API = "https://graph.instagram.com";
 
 // src/utils/css.ts
 import clsx from "clsx";
-function formatCSS(css9) {
+function formatCSS(css10) {
   return {
-    "@desktop": css9["@desktop"],
-    "@mobile": css9["@mobile"]
+    "@desktop": css10["@desktop"],
+    "@mobile": css10["@mobile"]
   };
 }
 var permanentClasses = {};
 function generateItemClassName(instance, stitchesInstance) {
-  let { css: css9, type, className: cls = "" } = instance.data;
+  let { css: css10, type, className: cls = "" } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = instance.Element?.permanentCss;
@@ -113,8 +113,8 @@ function generateItemClassName(instance, stitchesInstance) {
     }
   }
   className = permanentClass;
-  if (css9) {
-    let formattedCss = formatCSS(css9);
+  if (css10) {
+    let formattedCss = formatCSS(css10);
     let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
     let { stitchesClass } = instance;
     let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
@@ -659,7 +659,7 @@ Video.defaultProps = {
 var Video_default = Video;
 
 // src/elements/Instagram.tsx
-import React21, { forwardRef as forwardRef10, useEffect as useEffect4, useState } from "react";
+import React23, { forwardRef as forwardRef10, useEffect as useEffect4, useState as useState2 } from "react";
 
 // src/components/Placeholder.tsx
 import React15, { forwardRef as forwardRef8 } from "react";
@@ -961,7 +961,7 @@ var StyledOverlay = styled(Overlay2, {
   display: "block !important",
   backgroundColor: "rgba(0, 0, 0, .3)",
   position: "fixed",
-  zIndex: 9999,
+  zIndex: 99999,
   inset: 0,
   animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
 });
@@ -984,7 +984,7 @@ var StyledContent = styled(Content, {
   transform: "translate(-50%, -50%)",
   padding: 24,
   animation: `${contentShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
-  zIndex: 9999,
+  zIndex: 99999,
   maxWidth: "90vw",
   width: "auto",
   "*": {
@@ -1010,8 +1010,8 @@ var StyledCloseIcon = styled("button", {
   cursor: "pointer",
   fontFamily: "inherit",
   borderRadius: "100%",
-  height: 25,
-  width: 25,
+  height: 32,
+  width: 32,
   padding: 4,
   display: "inline-flex",
   alignItems: "center",
@@ -1024,29 +1024,32 @@ var StyledCloseIcon = styled("button", {
     backgroundColor: "rgba(112, 112, 112, .1)"
   },
   svg: {
-    width: 20,
-    height: 20
+    width: 24,
+    height: 24
   }
 });
 
 // src/components/Modal/useOpenChangeEffect.ts
-import { useEffect as useEffect2 } from "react";
+import { useContext as useContext4, useEffect as useEffect2 } from "react";
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
+  let rootCtx = useContext4(WeaverseContext);
+  let toggleRootzIndex = (open2) => {
+    let { contentRootElement } = rootCtx;
+    if (contentRootElement) {
+      if (open2) {
+        contentRootElement.classList.add("modal-open");
+      } else {
+        contentRootElement.classList.remove("modal-open");
+      }
+    }
+  };
   useEffect2(() => {
     let isOpen = open || defaultOpen;
-    if (isOpen) {
-      document.body.classList.add("wv-modal-open");
-    } else {
-      document.body.classList.remove("wv-modal-open");
-    }
+    toggleRootzIndex(isOpen);
   }, [open, defaultOpen]);
   let handleOpenChange = (open2) => {
-    if (open2) {
-      document.body.classList.add("wv-modal-open");
-    } else {
-      document.body.classList.remove("wv-modal-open");
-    }
+    toggleRootzIndex(open2);
     onOpenChange?.(open2);
   };
   return handleOpenChange;
@@ -1129,12 +1132,157 @@ function Tooltip({ children }) {
   }, children);
 }
 
+// src/components/Slider/index.tsx
+import clsx4 from "clsx";
+import { useKeenSlider } from "keen-slider/react";
+import React22, { useState } from "react";
+
+// src/components/Slider/Arrows.tsx
+import clsx3 from "clsx";
+import React21, { useContext as useContext5 } from "react";
+function Arrows(props) {
+  let { currentSlide, instanceRef, className } = props;
+  let { stitchesInstance } = useContext5(WeaverseContext);
+  let { className: cssClass } = stitchesInstance.css(css9)();
+  let isFirstSlide = currentSlide === 0;
+  let isLastSlide = false;
+  if (instanceRef.current) {
+    isLastSlide = currentSlide === instanceRef?.current?.track?.details?.maxIdx;
+  }
+  let _className = clsx3(className, cssClass);
+  let arrowLeftClass = clsx3(
+    "wv-slider-arrow arrow--left",
+    isFirstSlide && "arrow--disabled"
+  );
+  let arrowRightClass = clsx3(
+    "wv-slider-arrow arrow--right",
+    isLastSlide && "arrow--disabled"
+  );
+  return /* @__PURE__ */ React21.createElement("div", {
+    className: _className
+  }, /* @__PURE__ */ React21.createElement("button", {
+    type: "button",
+    className: arrowLeftClass,
+    onClick: (e) => {
+      e.stopPropagation();
+      instanceRef?.current?.prev();
+    }
+  }, /* @__PURE__ */ React21.createElement(Icon, {
+    name: "ArrowLeft"
+  })), /* @__PURE__ */ React21.createElement("button", {
+    type: "button",
+    className: arrowRightClass,
+    onClick: (e) => {
+      e.stopPropagation();
+      instanceRef?.current?.next();
+    }
+  }, /* @__PURE__ */ React21.createElement(Icon, {
+    name: "ArrowRight"
+  })));
+}
+var css9 = {
+  "@desktop": {
+    ".wv-slider-arrow": {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      width: "44px",
+      height: "44px",
+      padding: "8px",
+      color: "#191919",
+      backgroundColor: "#f2f2f2",
+      textAlign: "center",
+      transition: "all 0.2s ease-in-out",
+      borderRadius: "4px",
+      border: "none",
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: "#191919",
+        color: "#f2f2f2"
+      },
+      svg: {
+        verticalAlign: "middle",
+        width: "22px",
+        height: "22px"
+      },
+      "&.arrow--left": {
+        left: "-80px"
+      },
+      "&.arrow--right": {
+        right: "-80px"
+      },
+      "&.arrow--disabled": {
+        opacity: 0.5
+      }
+    }
+  },
+  "@mobile": {
+    ".wv-slider-arrow": {
+      display: "none"
+    }
+  }
+};
+
+// src/components/Slider/ResizePlugin.ts
+var ResizePlugin = (slider) => {
+  let observer = new ResizeObserver(() => slider.update());
+  slider.on("created", () => {
+    observer.observe(slider.container);
+  });
+  slider.on("destroyed", () => {
+    observer.unobserve(slider.container);
+  });
+};
+
+// src/components/Slider/index.tsx
+function Slider({ children, className }) {
+  let [currentSlide, setCurrentSlide] = useState(0);
+  let [created, setCreated] = useState(false);
+  let [ref, instanceRef] = useKeenSlider(
+    {
+      slides: { perView: 4, spacing: 16 },
+      breakpoints: {
+        "(max-width: 1024px)": {
+          slides: { perView: 3, spacing: 16 }
+        },
+        "(max-width: 768px)": {
+          slides: {
+            perView: 1,
+            spacing: 32
+          }
+        }
+      },
+      created: () => {
+        setCreated(true);
+      },
+      slideChanged: (slider) => {
+        setCurrentSlide(slider.track.details.rel);
+      }
+    },
+    [ResizePlugin]
+  );
+  let _className = clsx4("keen-slider", className);
+  let arrowsClass = clsx4(className && `${className}-arrows`);
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("div", {
+    ref,
+    className: _className
+  }, /* @__PURE__ */ React22.createElement("link", {
+    rel: "stylesheet",
+    href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
+  }), children), created && instanceRef?.current && /* @__PURE__ */ React22.createElement(Arrows, {
+    currentSlide,
+    instanceRef,
+    className: arrowsClass
+  }));
+}
+
 // src/components/index.ts
 var Components = {
   Placeholder: Placeholder_default,
   Spinner,
   ModalComponents: Modal_exports,
   Icon,
+  Slider,
   Tooltip
 };
 
@@ -1142,8 +1290,8 @@ var Components = {
 var Instagram = forwardRef10(
   (props, ref) => {
     let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = useState([]);
-    let [error, setError] = useState(null);
+    let [media, setMedia] = useState2([]);
+    let [error, setError] = useState2(null);
     useEffect4(() => {
       if (token) {
         let params = new URLSearchParams({
@@ -1161,10 +1309,10 @@ var Instagram = forwardRef10(
       }
     }, [token]);
     if (!token || error) {
-      return /* @__PURE__ */ React21.createElement("div", {
+      return /* @__PURE__ */ React23.createElement("div", {
         ref,
         ...rest
-      }, /* @__PURE__ */ React21.createElement(Components.Placeholder, {
+      }, /* @__PURE__ */ React23.createElement(Components.Placeholder, {
         element: "Instagram"
       }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
     }
@@ -1172,11 +1320,11 @@ var Instagram = forwardRef10(
       "--wv-ig-images-per-row": imagesPerRow,
       "--wv-ig-images-gap": gap + "px"
     };
-    return /* @__PURE__ */ React21.createElement("div", {
+    return /* @__PURE__ */ React23.createElement("div", {
       ref,
       ...rest,
       style
-    }, /* @__PURE__ */ React21.createElement("div", {
+    }, /* @__PURE__ */ React23.createElement("div", {
       className: "wv-ig-media-container"
     }, media.slice(0, numberOfImages).map((item) => {
       let {
@@ -1188,21 +1336,21 @@ var Instagram = forwardRef10(
         thumbnail_url
       } = item;
       if (media_type === "VIDEO") {
-        return /* @__PURE__ */ React21.createElement("video", {
+        return /* @__PURE__ */ React23.createElement("video", {
           key: id,
           controls: true,
           poster: thumbnail_url
-        }, /* @__PURE__ */ React21.createElement("source", {
+        }, /* @__PURE__ */ React23.createElement("source", {
           src: media_url,
           type: "video/mp4"
         }));
       }
-      return /* @__PURE__ */ React21.createElement("a", {
+      return /* @__PURE__ */ React23.createElement("a", {
         key: id,
         href: permalink,
         target: "_blank",
         rel: "noreferrer"
-      }, /* @__PURE__ */ React21.createElement("img", {
+      }, /* @__PURE__ */ React23.createElement("img", {
         alt: caption,
         src: media_url
       }));
@@ -1275,9 +1423,9 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React22, { useContext as useContext4, useEffect as useEffect5, useRef, useState as useState2 } from "react";
+import React24, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState3 } from "react";
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = useState2(context.projectData);
+  let [, setData] = useState3(context.projectData);
   let rootRef = useRef();
   let renderRoot = () => setData({});
   useEffect5(() => {
@@ -1290,22 +1438,22 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.projectData?.rootId) {
-    return /* @__PURE__ */ React22.createElement("div", {
+    return /* @__PURE__ */ React24.createElement("div", {
       className: `weaverse-content-root ${themeClass}`,
       ...eventHandlers,
       ref: rootRef
-    }, /* @__PURE__ */ React22.createElement(WeaverseContextProvider, {
+    }, /* @__PURE__ */ React24.createElement(WeaverseContextProvider, {
       value: context
-    }, /* @__PURE__ */ React22.createElement(ItemInstance, {
+    }, /* @__PURE__ */ React24.createElement(ItemInstance, {
       id: context.projectData.rootId
     })));
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext4(WeaverseContext);
-  let [data, setData] = useState2(instance.data);
-  let { id, type, childIds = [], css: css9, className, ...rest } = data;
+  let { stitchesInstance, elementInstances } = useContext6(WeaverseContext);
+  let [data, setData] = useState3(instance.data);
+  let { id, type, childIds = [], css: css10, className, ...rest } = data;
   useEffect5(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
@@ -1322,13 +1470,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React22.createElement(Component, {
+    return /* @__PURE__ */ React24.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClassName(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ React22.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ React24.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1338,15 +1486,15 @@ var ItemComponent = ({ instance }) => {
   }
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext4(WeaverseContext);
+  let context = useContext6(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React22.createElement("div", {
+    return /* @__PURE__ */ React24.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React22.createElement(ItemComponent, {
+  return /* @__PURE__ */ React24.createElement(ItemComponent, {
     key: id,
     instance
   });

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.53",
+  "version": "0.7.55",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,7 +34,8 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.2",
     "@stitches/react": "^1.2.8",
-    "@weaverse/core": "0.7.53",
-    "clsx": "^1.2.1"
+    "@weaverse/core": "0.7.55",
+    "clsx": "^1.2.1",
+    "keen-slider": "^6.8.5"
   }
 }