@weaverse/react 0.7.2 → 0.7.6

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, CSSProperties } from 'react';
 import { WeaverseType, Weaverse, ElementCSS, WeaverseItemStore } from '@weaverse/core';
 export * from '@weaverse/core';
 
@@ -23,6 +23,7 @@ declare type ItemComponentProps = {
 interface PlaceholderProps {
     element: string;
     children: ReactElement | ReactElement[] | ReactNode | ReactNode[];
+    style?: CSSProperties;
 }
 interface ButtonElementProps extends WeaverseElementProps {
     value: string;
@@ -42,13 +43,15 @@ interface ImageElementProps extends WeaverseElementProps {
     linkTo?: string;
     openLinkInNewTab?: boolean;
 }
-interface LayoutElementProps extends WeaverseElementProps {
-    gridSize: number;
+interface GridContentElementProps extends WeaverseElementProps {
     rows: number;
     columns: number;
     gap: number;
     rowSize: number;
 }
+interface LayoutElementProps extends GridContentElementProps {
+    gridSize: number;
+}
 interface MapElementProps extends WeaverseElementProps {
     place: string;
     zoom: number;
@@ -66,8 +69,9 @@ interface VideoElementProps extends WeaverseElementProps {
     muted: boolean;
 }
 declare type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
+declare type CountdownTimerType = 'fixed-time' | 'evergreen';
 interface CountdownElementProps extends WeaverseElementProps {
-    timerType: 'fixed-time' | 'evergreen';
+    timerType: CountdownTimerType;
     startTime: number;
     endTime: number;
     periods: number;
@@ -97,4 +101,4 @@ declare type InstagramMedia = {
 
 declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element | null;
 
-export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutElementProps, MapElementProps, PlaceholderProps, TextElementProps, TimerBlockProps, VideoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };
+export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutElementProps, MapElementProps, PlaceholderProps, TextElementProps, TimerBlockProps, VideoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };

package/dist/index.js

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react16 = require("react");
+var import_react19 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -257,7 +257,7 @@ var Image = import_react4.default.forwardRef(
   }
 );
 Image.defaultProps = {
-  src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
+  src: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/",
   alt: "Image alt text",
   objectFit: "cover",
   objectPosition: "center",
@@ -426,20 +426,26 @@ var import_react9 = __toESM(require("react"));
 var import_react8 = __toESM(require("react"));
 var Placeholder = (0, import_react8.forwardRef)(
   (props, ref) => {
-    let { element, children, ...rest } = props;
-    let style = {
+    let { element, children, style: newStyle, ...rest } = props;
+    let defaultStyle = {
       position: "absolute",
-      height: "100%",
-      width: "100%",
+      height: "calc(100% - 20px)",
+      width: "calc(100% - 20px)",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
-      color: "#374151",
       pointerEvents: "none",
-      zIndex: 1
+      zIndex: 1,
+      color: "#374151",
+      backgroundColor: "#F9FAFB",
+      border: "1px dashed #0F71FF",
+      borderRadius: 4,
+      margin: 10
     };
+    const style = { ...defaultStyle, ...newStyle };
     return /* @__PURE__ */ import_react8.default.createElement("div", {
+      "data-wv-type": "placeholder",
       style,
       ref,
       ...rest
@@ -559,17 +565,6 @@ var Accordion = (0, import_react10.forwardRef)(
   }
 );
 Accordion.defaultProps = {
-  items: [
-    {
-      id: 1,
-      headerText: "Header 1",
-      childrenId: true
-    },
-    {
-      id: 2,
-      headerText: "Header 2"
-    }
-  ],
   css: {
     "@desktop": {
       display: "flex",
@@ -595,7 +590,7 @@ var accordion_default = Accordion;
 // src/elements/accordion/AccordionWrapper.tsx
 var import_react11 = __toESM(require("react"));
 var AccordionWrapper = (0, import_react11.forwardRef)((props, ref) => {
-  const { ["data-wv-id"]: wvId, headerText, children, ...rest } = props;
+  const { ["data-wv-id"]: wvId, name, children, ...rest } = props;
   const { active, setActive } = (0, import_react11.useContext)(AccordionContext);
   return /* @__PURE__ */ import_react11.default.createElement("div", {
     ref,
@@ -603,10 +598,10 @@ var AccordionWrapper = (0, import_react11.forwardRef)((props, ref) => {
   }, /* @__PURE__ */ import_react11.default.createElement("div", {
     onClick: () => setActive(wvId),
     className: `wv-accordion-header ${active === wvId ? "active" : ""}`
-  }, headerText), children);
+  }, name), children);
 });
 AccordionWrapper.defaultProps = {
-  headerText: "Header text",
+  name: "Accordion item",
   css: {
     "@desktop": {
       maxHeight: "100%"
@@ -617,24 +612,26 @@ var AccordionWrapper_default = AccordionWrapper;
 
 // src/elements/accordion/AccordionContent.tsx
 var import_react12 = __toESM(require("react"));
-var AccordionContent = (0, import_react12.forwardRef)((props, ref) => {
-  const { rows, columns, gap, rowSize, children, ...rest } = props;
-  let style = {
-    "--rows": rows,
-    "--columns": columns,
-    "--gap": gap + "px",
-    "--row-size": rowSize + "px",
-    "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
-    "--max-height": rows * rowSize + gap * (rowSize - 1) + "px"
-  };
-  return /* @__PURE__ */ import_react12.default.createElement("div", {
-    ref,
-    ...rest,
-    style
-  }, import_react12.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react12.default.createElement(Placeholder_default, {
-    element: "Accordion"
-  }, "Item Content"));
-});
+var AccordionContent = (0, import_react12.forwardRef)(
+  (props, ref) => {
+    const { rows, columns, gap, rowSize, children, ...rest } = props;
+    let style = {
+      "--rows": rows,
+      "--columns": columns,
+      "--gap": gap + "px",
+      "--row-size": rowSize + "px",
+      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
+      "--max-height": rows * rowSize + gap * (rowSize - 1) + "px"
+    };
+    return /* @__PURE__ */ import_react12.default.createElement("div", {
+      ref,
+      ...rest,
+      style
+    }, import_react12.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react12.default.createElement(Placeholder_default, {
+      element: "Accordion Content"
+    }, "Please drag and drop an element here"));
+  }
+);
 AccordionContent.defaultProps = {
   rows: 2,
   columns: 12,
@@ -672,11 +669,10 @@ function TabHeader(props) {
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
   }, []);
-  const text = data.headerText;
   return /* @__PURE__ */ import_react13.default.createElement("div", {
     onClick: () => setActive(wvId),
     className: `wv-tab-header${active === wvId ? " active" : ""}`
-  }, text);
+  }, data.name);
 }
 function TabHeaderWrapper(props) {
   const { itemInstances } = (0, import_react13.useContext)(WeaverseContext);
@@ -684,7 +680,7 @@ function TabHeaderWrapper(props) {
   const data = instance.data;
   const childIds = data.childIds;
   return /* @__PURE__ */ import_react13.default.createElement("div", {
-    className: "wv-tab-headerWrapper"
+    className: "wv-tab-header-wrapper"
   }, childIds.map((id) => /* @__PURE__ */ import_react13.default.createElement(TabHeader, {
     key: id,
     wvId: id
@@ -700,13 +696,11 @@ var TabContext = (0, import_react14.createContext)({
 var Tab = (0, import_react14.forwardRef)((props, ref) => {
   var _a, _b, _c;
   const wvId = props["data-wv-id"];
-  const { items, children, ...rest } = props;
+  const { children, ...rest } = props;
   const defaultActive = (_c = (_b = (_a = import_react14.default.Children.toArray(children)) == null ? void 0 : _a[0]) == null ? void 0 : _b.props) == null ? void 0 : _c.id;
   const [active, setActive] = (0, import_react14.useState)(defaultActive);
   const setOpenTab = (id) => {
-    if (id === active) {
-      setActive(null);
-    } else {
+    if (id !== active) {
       setActive(id);
     }
   };
@@ -720,34 +714,23 @@ var Tab = (0, import_react14.forwardRef)((props, ref) => {
   }), children));
 });
 Tab.defaultProps = {
-  items: [
-    {
-      headerText: "Header 1"
-    },
-    {
-      headerText: "Header 2"
-    },
-    {
-      headerText: "Header 2"
-    }
-  ],
   css: {
     "@desktop": {
       display: "flex",
       flexDirection: "column",
       gap: 4,
-      "& .wv-tab-headerWrapper": {
+      "& .wv-tab-header-wrapper": {
         width: "100%",
         display: "flex",
         marginBottom: 10
       },
       "& .wv-tab-header": {
-        backgroundColor: "#f0f2f3",
-        padding: "10px 16px",
+        backgroundColor: "#fff",
+        padding: "15px 24px",
+        border: "1px solid #E4E7EB",
         cursor: "pointer",
         "&.active": {
-          backgroundColor: "#0F71FF",
-          color: "#fff"
+          backgroundColor: "#E4E7EB"
         }
       }
     }
@@ -776,8 +759,8 @@ var TabContent = (0, import_react15.forwardRef)(
       ...rest,
       style
     }, import_react15.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react15.default.createElement(Placeholder_default, {
-      element: "Tab"
-    }, "Item Content"));
+      element: "Tab Content"
+    }, "Please drag and drop an element here"));
   }
 );
 TabContent.defaultProps = {
@@ -785,6 +768,7 @@ TabContent.defaultProps = {
   columns: 12,
   gap: 4,
   rowSize: 48,
+  name: "Tab header",
   css: {
     "@desktop": {
       width: "100%",
@@ -799,8 +783,178 @@ TabContent.defaultProps = {
 };
 var TabContent_default = TabContent;
 
+// src/elements/slider/index.tsx
+var import_react16 = __toESM(require("react"));
+var import_nuka_carousel = __toESM(require("nuka-carousel"));
+var Carousel = import_nuka_carousel.default.default;
+var Slider = (0, import_react16.forwardRef)((props, ref) => {
+  const { isDesignMode } = (0, import_react16.useContext)(WeaverseContext);
+  const { autoplay, delay, children, ...rest } = props;
+  return /* @__PURE__ */ import_react16.default.createElement("div", {
+    ...rest,
+    ref
+  }, /* @__PURE__ */ import_react16.default.createElement(Carousel, {
+    dragging: false,
+    renderCenterLeftControls: (props2) => /* @__PURE__ */ import_react16.default.createElement("button", {
+      className: "wv-slider-btn",
+      onClick: props2.previousSlide,
+      disabled: (isDesignMode || !autoplay) && props2.currentSlide === 0
+    }, /* @__PURE__ */ import_react16.default.createElement("i", {
+      className: "wv-slider-arrow wv-slider-arrow-left"
+    })),
+    renderCenterRightControls: (props2) => /* @__PURE__ */ import_react16.default.createElement("button", {
+      className: "wv-slider-btn",
+      onClick: props2.nextSlide,
+      disabled: (isDesignMode || !autoplay) && props2.slideCount === props2.currentSlide
+    }, /* @__PURE__ */ import_react16.default.createElement("i", {
+      className: "wv-slider-arrow wv-slider-arrow-right"
+    })),
+    wrapAround: !isDesignMode,
+    autoplay: !isDesignMode && autoplay,
+    autoplayInterval: delay * 1e3
+  }, children));
+});
+Slider.defaultProps = {
+  fullWidth: true,
+  autoplay: true,
+  delay: 3,
+  css: {
+    "@desktop": {
+      "& .wv-slider-btn": {
+        borderRadius: "100%",
+        width: 40,
+        height: 40,
+        background: "#fff",
+        border: "none",
+        cursor: "pointer",
+        "&[disabled]": {
+          cursor: "not-allowed"
+        },
+        "&:hover .wv-slider-arrow": {
+          borderColor: "#999"
+        },
+        "& .wv-slider-arrow": {
+          border: "solid black",
+          borderWidth: "0 1px 1px 0",
+          display: "inline-block",
+          padding: 5
+        },
+        "& .wv-slider-arrow-right": {
+          transform: "rotate(-45deg)",
+          marginRight: 5
+        },
+        "& .wv-slider-arrow-left": {
+          transform: "rotate(135deg)",
+          marginLeft: 5
+        }
+      }
+    }
+  }
+};
+var slider_default = Slider;
+
+// src/elements/slider/SliderContent.tsx
+var import_react17 = __toESM(require("react"));
+var SliderContent = (0, import_react17.forwardRef)(
+  (props, ref) => {
+    const { isDesignMode } = (0, import_react17.useContext)(WeaverseContext);
+    const {
+      mediaUrl,
+      targetLink,
+      openInNewTab,
+      rows,
+      columns,
+      gap,
+      rowSize,
+      children,
+      ...rest
+    } = props;
+    let style = {
+      "--rows": rows,
+      "--columns": columns,
+      "--gap": gap + "px",
+      "--row-size": rowSize + "px",
+      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
+      "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
+      "--background-url": `url(${mediaUrl}`
+    };
+    const handleClick = () => {
+      if (!isDesignMode && targetLink) {
+        window.open(targetLink, openInNewTab ? "_blank" : "_self");
+      }
+    };
+    return /* @__PURE__ */ import_react17.default.createElement("div", {
+      ...rest,
+      style,
+      onClick: handleClick
+    }, import_react17.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react17.default.createElement(Placeholder_default, {
+      element: "Slider Content"
+    }, "Please drag and drop an element here"));
+  }
+);
+SliderContent.defaultProps = {
+  name: "Slider",
+  mediaUrl: "",
+  openInNewTab: false,
+  targetLink: "https://myshop.com",
+  rows: 4,
+  columns: 12,
+  gap: 4,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      width: "100%",
+      maxWidth: "var(--grid-size)",
+      display: "grid",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gap: "var(--gap)",
+      borderRadius: 4,
+      backgroundImage: "var(--background-url, none)"
+    }
+  }
+};
+var SliderContent_default = SliderContent;
+
+// src/elements/custom-html.tsx
+var import_react18 = __toESM(require("react"));
+var CustomHTML = (0, import_react18.forwardRef)(
+  (props, ref) => {
+    const { content, children, ...rest } = props;
+    const { isDesignMode } = (0, import_react18.useContext)(WeaverseContext);
+    const style = {
+      "--pointer-events": isDesignMode ? "none" : "auto"
+    };
+    if (!content)
+      return /* @__PURE__ */ import_react18.default.createElement("div", {
+        ref,
+        ...rest
+      }, /* @__PURE__ */ import_react18.default.createElement(Placeholder_default, {
+        element: "Custom HTML"
+      }, "Please add your custom HTML codes."));
+    return /* @__PURE__ */ import_react18.default.createElement("div", {
+      ref,
+      ...rest,
+      style,
+      dangerouslySetInnerHTML: { __html: content }
+    });
+  }
+);
+CustomHTML.defaultProps = {
+  content: "",
+  type: "custom.html",
+  css: {
+    "@desktop": {
+      "& > *": {
+        pointerEvents: "var(--pointer-events, unset)"
+      }
+    }
+  }
+};
+var custom_html_default = CustomHTML;
+
 // src/elements/index.ts
-var elements = {
+var Elements = {
   Countdown: {
     Component: countdown_default,
     type: "countdown"
@@ -856,33 +1010,44 @@ var elements = {
   TabContent: {
     Component: TabContent_default,
     type: "tab.content"
+  },
+  Slider: {
+    Component: slider_default,
+    type: "slider"
+  },
+  SliderContent: {
+    Component: SliderContent_default,
+    type: "slider.content"
+  },
+  CustomHTML: {
+    Component: custom_html_default,
+    type: "custom.html"
   }
 };
-var elements_default = elements;
 
 // src/context.ts
 var createRootContext = (configs) => {
   let rootContext = new import_core.Weaverse(configs);
-  Object.keys(elements_default).forEach((key) => {
-    rootContext.registerElement(elements_default[key]);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react16.createContext)({});
+var WeaverseContext = (0, import_react19.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react17 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // src/utils/index.ts
-var shortCssObject = (css) => {
+function shortCssObject(css) {
   return {
     "@desktop": css["@desktop"],
     "@mobile": css["@mobile"]
   };
-};
+}
 function generateItemClass(instance, stitchesInstance) {
   var _a, _b, _c, _d;
   let { css, className: cls = "" } = instance.data;
@@ -902,10 +1067,10 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a, _b;
-  let [, setData] = (0, import_react17.useState)(context.projectData);
-  let rootRef = (0, import_react17.useRef)();
+  let [, setData] = (0, import_react20.useState)(context.projectData);
+  let rootRef = (0, import_react20.useRef)();
   let update = () => setData({});
-  (0, import_react17.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     context.subscribe(update);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -914,21 +1079,21 @@ var WeaverseRoot = ({ context }) => {
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react17.default.createElement("div", {
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react20.default.createElement("div", {
     className: `weaverse-content-root ${themeClass}`,
     ...eventHandlers,
     ref: rootRef
-  }, /* @__PURE__ */ import_react17.default.createElement(WeaverseContextProvider, {
+  }, /* @__PURE__ */ import_react20.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react20.default.createElement(ItemInstance, {
     id: context.projectData.rootId
   }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react17.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react17.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react20.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react20.useState)(instance.data);
   let { id, type, childIds = [], css, className, ...rest } = data;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     var _a;
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
@@ -948,13 +1113,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react17.default.createElement(Component, {
+    return /* @__PURE__ */ import_react20.default.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ import_react20.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -962,15 +1127,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react17.useContext)(WeaverseContext);
+  let context = (0, import_react20.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react17.default.createElement("div", {
+    return /* @__PURE__ */ import_react20.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react17.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react20.default.createElement(ItemComponent, {
     instance
   });
 };

package/dist/index.mjs

@@ -220,7 +220,7 @@ var Image = React5.forwardRef(
   }
 );
 Image.defaultProps = {
-  src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
+  src: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/",
   alt: "Image alt text",
   objectFit: "cover",
   objectPosition: "center",
@@ -389,20 +389,26 @@ import React11, { forwardRef as forwardRef9, useEffect as useEffect2, useState }
 import React10, { forwardRef as forwardRef8 } from "react";
 var Placeholder = forwardRef8(
   (props, ref) => {
-    let { element, children, ...rest } = props;
-    let style = {
+    let { element, children, style: newStyle, ...rest } = props;
+    let defaultStyle = {
       position: "absolute",
-      height: "100%",
-      width: "100%",
+      height: "calc(100% - 20px)",
+      width: "calc(100% - 20px)",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
-      color: "#374151",
       pointerEvents: "none",
-      zIndex: 1
+      zIndex: 1,
+      color: "#374151",
+      backgroundColor: "#F9FAFB",
+      border: "1px dashed #0F71FF",
+      borderRadius: 4,
+      margin: 10
     };
+    const style = { ...defaultStyle, ...newStyle };
     return /* @__PURE__ */ React10.createElement("div", {
+      "data-wv-type": "placeholder",
       style,
       ref,
       ...rest
@@ -522,17 +528,6 @@ var Accordion = forwardRef10(
   }
 );
 Accordion.defaultProps = {
-  items: [
-    {
-      id: 1,
-      headerText: "Header 1",
-      childrenId: true
-    },
-    {
-      id: 2,
-      headerText: "Header 2"
-    }
-  ],
   css: {
     "@desktop": {
       display: "flex",
@@ -558,7 +553,7 @@ var accordion_default = Accordion;
 // src/elements/accordion/AccordionWrapper.tsx
 import React13, { forwardRef as forwardRef11, useContext as useContext4 } from "react";
 var AccordionWrapper = forwardRef11((props, ref) => {
-  const { ["data-wv-id"]: wvId, headerText, children, ...rest } = props;
+  const { ["data-wv-id"]: wvId, name, children, ...rest } = props;
   const { active, setActive } = useContext4(AccordionContext);
   return /* @__PURE__ */ React13.createElement("div", {
     ref,
@@ -566,10 +561,10 @@ var AccordionWrapper = forwardRef11((props, ref) => {
   }, /* @__PURE__ */ React13.createElement("div", {
     onClick: () => setActive(wvId),
     className: `wv-accordion-header ${active === wvId ? "active" : ""}`
-  }, headerText), children);
+  }, name), children);
 });
 AccordionWrapper.defaultProps = {
-  headerText: "Header text",
+  name: "Accordion item",
   css: {
     "@desktop": {
       maxHeight: "100%"
@@ -580,24 +575,26 @@ var AccordionWrapper_default = AccordionWrapper;
 
 // src/elements/accordion/AccordionContent.tsx
 import React14, { forwardRef as forwardRef12 } from "react";
-var AccordionContent = forwardRef12((props, ref) => {
-  const { rows, columns, gap, rowSize, children, ...rest } = props;
-  let style = {
-    "--rows": rows,
-    "--columns": columns,
-    "--gap": gap + "px",
-    "--row-size": rowSize + "px",
-    "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
-    "--max-height": rows * rowSize + gap * (rowSize - 1) + "px"
-  };
-  return /* @__PURE__ */ React14.createElement("div", {
-    ref,
-    ...rest,
-    style
-  }, React14.Children.count(children) > 0 ? children : /* @__PURE__ */ React14.createElement(Placeholder_default, {
-    element: "Accordion"
-  }, "Item Content"));
-});
+var AccordionContent = forwardRef12(
+  (props, ref) => {
+    const { rows, columns, gap, rowSize, children, ...rest } = props;
+    let style = {
+      "--rows": rows,
+      "--columns": columns,
+      "--gap": gap + "px",
+      "--row-size": rowSize + "px",
+      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
+      "--max-height": rows * rowSize + gap * (rowSize - 1) + "px"
+    };
+    return /* @__PURE__ */ React14.createElement("div", {
+      ref,
+      ...rest,
+      style
+    }, React14.Children.count(children) > 0 ? children : /* @__PURE__ */ React14.createElement(Placeholder_default, {
+      element: "Accordion Content"
+    }, "Please drag and drop an element here"));
+  }
+);
 AccordionContent.defaultProps = {
   rows: 2,
   columns: 12,
@@ -635,11 +632,10 @@ function TabHeader(props) {
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
   }, []);
-  const text = data.headerText;
   return /* @__PURE__ */ React15.createElement("div", {
     onClick: () => setActive(wvId),
     className: `wv-tab-header${active === wvId ? " active" : ""}`
-  }, text);
+  }, data.name);
 }
 function TabHeaderWrapper(props) {
   const { itemInstances } = useContext5(WeaverseContext);
@@ -647,7 +643,7 @@ function TabHeaderWrapper(props) {
   const data = instance.data;
   const childIds = data.childIds;
   return /* @__PURE__ */ React15.createElement("div", {
-    className: "wv-tab-headerWrapper"
+    className: "wv-tab-header-wrapper"
   }, childIds.map((id) => /* @__PURE__ */ React15.createElement(TabHeader, {
     key: id,
     wvId: id
@@ -663,13 +659,11 @@ var TabContext = createContext2({
 var Tab = forwardRef13((props, ref) => {
   var _a, _b, _c;
   const wvId = props["data-wv-id"];
-  const { items, children, ...rest } = props;
+  const { children, ...rest } = props;
   const defaultActive = (_c = (_b = (_a = React16.Children.toArray(children)) == null ? void 0 : _a[0]) == null ? void 0 : _b.props) == null ? void 0 : _c.id;
   const [active, setActive] = useState4(defaultActive);
   const setOpenTab = (id) => {
-    if (id === active) {
-      setActive(null);
-    } else {
+    if (id !== active) {
       setActive(id);
     }
   };
@@ -683,34 +677,23 @@ var Tab = forwardRef13((props, ref) => {
   }), children));
 });
 Tab.defaultProps = {
-  items: [
-    {
-      headerText: "Header 1"
-    },
-    {
-      headerText: "Header 2"
-    },
-    {
-      headerText: "Header 2"
-    }
-  ],
   css: {
     "@desktop": {
       display: "flex",
       flexDirection: "column",
       gap: 4,
-      "& .wv-tab-headerWrapper": {
+      "& .wv-tab-header-wrapper": {
         width: "100%",
         display: "flex",
         marginBottom: 10
       },
       "& .wv-tab-header": {
-        backgroundColor: "#f0f2f3",
-        padding: "10px 16px",
+        backgroundColor: "#fff",
+        padding: "15px 24px",
+        border: "1px solid #E4E7EB",
         cursor: "pointer",
         "&.active": {
-          backgroundColor: "#0F71FF",
-          color: "#fff"
+          backgroundColor: "#E4E7EB"
         }
       }
     }
@@ -739,8 +722,8 @@ var TabContent = forwardRef14(
       ...rest,
       style
     }, React17.Children.count(children) > 0 ? children : /* @__PURE__ */ React17.createElement(Placeholder_default, {
-      element: "Tab"
-    }, "Item Content"));
+      element: "Tab Content"
+    }, "Please drag and drop an element here"));
   }
 );
 TabContent.defaultProps = {
@@ -748,6 +731,7 @@ TabContent.defaultProps = {
   columns: 12,
   gap: 4,
   rowSize: 48,
+  name: "Tab header",
   css: {
     "@desktop": {
       width: "100%",
@@ -762,8 +746,178 @@ TabContent.defaultProps = {
 };
 var TabContent_default = TabContent;
 
+// src/elements/slider/index.tsx
+import React18, { forwardRef as forwardRef15, useContext as useContext7 } from "react";
+import C from "nuka-carousel";
+var Carousel = C.default;
+var Slider = forwardRef15((props, ref) => {
+  const { isDesignMode } = useContext7(WeaverseContext);
+  const { autoplay, delay, children, ...rest } = props;
+  return /* @__PURE__ */ React18.createElement("div", {
+    ...rest,
+    ref
+  }, /* @__PURE__ */ React18.createElement(Carousel, {
+    dragging: false,
+    renderCenterLeftControls: (props2) => /* @__PURE__ */ React18.createElement("button", {
+      className: "wv-slider-btn",
+      onClick: props2.previousSlide,
+      disabled: (isDesignMode || !autoplay) && props2.currentSlide === 0
+    }, /* @__PURE__ */ React18.createElement("i", {
+      className: "wv-slider-arrow wv-slider-arrow-left"
+    })),
+    renderCenterRightControls: (props2) => /* @__PURE__ */ React18.createElement("button", {
+      className: "wv-slider-btn",
+      onClick: props2.nextSlide,
+      disabled: (isDesignMode || !autoplay) && props2.slideCount === props2.currentSlide
+    }, /* @__PURE__ */ React18.createElement("i", {
+      className: "wv-slider-arrow wv-slider-arrow-right"
+    })),
+    wrapAround: !isDesignMode,
+    autoplay: !isDesignMode && autoplay,
+    autoplayInterval: delay * 1e3
+  }, children));
+});
+Slider.defaultProps = {
+  fullWidth: true,
+  autoplay: true,
+  delay: 3,
+  css: {
+    "@desktop": {
+      "& .wv-slider-btn": {
+        borderRadius: "100%",
+        width: 40,
+        height: 40,
+        background: "#fff",
+        border: "none",
+        cursor: "pointer",
+        "&[disabled]": {
+          cursor: "not-allowed"
+        },
+        "&:hover .wv-slider-arrow": {
+          borderColor: "#999"
+        },
+        "& .wv-slider-arrow": {
+          border: "solid black",
+          borderWidth: "0 1px 1px 0",
+          display: "inline-block",
+          padding: 5
+        },
+        "& .wv-slider-arrow-right": {
+          transform: "rotate(-45deg)",
+          marginRight: 5
+        },
+        "& .wv-slider-arrow-left": {
+          transform: "rotate(135deg)",
+          marginLeft: 5
+        }
+      }
+    }
+  }
+};
+var slider_default = Slider;
+
+// src/elements/slider/SliderContent.tsx
+import React19, { forwardRef as forwardRef16, useContext as useContext8 } from "react";
+var SliderContent = forwardRef16(
+  (props, ref) => {
+    const { isDesignMode } = useContext8(WeaverseContext);
+    const {
+      mediaUrl,
+      targetLink,
+      openInNewTab,
+      rows,
+      columns,
+      gap,
+      rowSize,
+      children,
+      ...rest
+    } = props;
+    let style = {
+      "--rows": rows,
+      "--columns": columns,
+      "--gap": gap + "px",
+      "--row-size": rowSize + "px",
+      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
+      "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
+      "--background-url": `url(${mediaUrl}`
+    };
+    const handleClick = () => {
+      if (!isDesignMode && targetLink) {
+        window.open(targetLink, openInNewTab ? "_blank" : "_self");
+      }
+    };
+    return /* @__PURE__ */ React19.createElement("div", {
+      ...rest,
+      style,
+      onClick: handleClick
+    }, React19.Children.count(children) > 0 ? children : /* @__PURE__ */ React19.createElement(Placeholder_default, {
+      element: "Slider Content"
+    }, "Please drag and drop an element here"));
+  }
+);
+SliderContent.defaultProps = {
+  name: "Slider",
+  mediaUrl: "",
+  openInNewTab: false,
+  targetLink: "https://myshop.com",
+  rows: 4,
+  columns: 12,
+  gap: 4,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      width: "100%",
+      maxWidth: "var(--grid-size)",
+      display: "grid",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gap: "var(--gap)",
+      borderRadius: 4,
+      backgroundImage: "var(--background-url, none)"
+    }
+  }
+};
+var SliderContent_default = SliderContent;
+
+// src/elements/custom-html.tsx
+import React20, { forwardRef as forwardRef17, useContext as useContext9 } from "react";
+var CustomHTML = forwardRef17(
+  (props, ref) => {
+    const { content, children, ...rest } = props;
+    const { isDesignMode } = useContext9(WeaverseContext);
+    const style = {
+      "--pointer-events": isDesignMode ? "none" : "auto"
+    };
+    if (!content)
+      return /* @__PURE__ */ React20.createElement("div", {
+        ref,
+        ...rest
+      }, /* @__PURE__ */ React20.createElement(Placeholder_default, {
+        element: "Custom HTML"
+      }, "Please add your custom HTML codes."));
+    return /* @__PURE__ */ React20.createElement("div", {
+      ref,
+      ...rest,
+      style,
+      dangerouslySetInnerHTML: { __html: content }
+    });
+  }
+);
+CustomHTML.defaultProps = {
+  content: "",
+  type: "custom.html",
+  css: {
+    "@desktop": {
+      "& > *": {
+        pointerEvents: "var(--pointer-events, unset)"
+      }
+    }
+  }
+};
+var custom_html_default = CustomHTML;
+
 // src/elements/index.ts
-var elements = {
+var Elements = {
   Countdown: {
     Component: countdown_default,
     type: "countdown"
@@ -819,15 +973,26 @@ var elements = {
   TabContent: {
     Component: TabContent_default,
     type: "tab.content"
+  },
+  Slider: {
+    Component: slider_default,
+    type: "slider"
+  },
+  SliderContent: {
+    Component: SliderContent_default,
+    type: "slider.content"
+  },
+  CustomHTML: {
+    Component: custom_html_default,
+    type: "custom.html"
   }
 };
-var elements_default = elements;
 
 // src/context.ts
 var createRootContext = (configs) => {
   let rootContext = new Weaverse(configs);
-  Object.keys(elements_default).forEach((key) => {
-    rootContext.registerElement(elements_default[key]);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
   });
   return rootContext;
 };
@@ -837,15 +1002,15 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React18, { useContext as useContext7, useEffect as useEffect4, useRef, useState as useState5 } from "react";
+import React21, { useContext as useContext10, useEffect as useEffect4, useRef, useState as useState5 } from "react";
 
 // src/utils/index.ts
-var shortCssObject = (css) => {
+function shortCssObject(css) {
   return {
     "@desktop": css["@desktop"],
     "@mobile": css["@mobile"]
   };
-};
+}
 function generateItemClass(instance, stitchesInstance) {
   var _a, _b, _c, _d;
   let { css, className: cls = "" } = instance.data;
@@ -877,18 +1042,18 @@ var WeaverseRoot = ({ context }) => {
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ React18.createElement("div", {
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ React21.createElement("div", {
     className: `weaverse-content-root ${themeClass}`,
     ...eventHandlers,
     ref: rootRef
-  }, /* @__PURE__ */ React18.createElement(WeaverseContextProvider, {
+  }, /* @__PURE__ */ React21.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React18.createElement(ItemInstance, {
+  }, /* @__PURE__ */ React21.createElement(ItemInstance, {
     id: context.projectData.rootId
   }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext7(WeaverseContext);
+  let { stitchesInstance, elementInstances } = useContext10(WeaverseContext);
   let [data, setData] = useState5(instance.data);
   let { id, type, childIds = [], css, className, ...rest } = data;
   useEffect4(() => {
@@ -911,13 +1076,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React18.createElement(Component, {
+    return /* @__PURE__ */ React21.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ React18.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ React21.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -925,15 +1090,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext7(WeaverseContext);
+  let context = useContext10(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React18.createElement("div", {
+    return /* @__PURE__ */ React21.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React18.createElement(ItemComponent, {
+  return /* @__PURE__ */ React21.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.2",
+  "version": "0.7.6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,6 +31,7 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "0.7.2"
+    "@weaverse/core": "0.7.6",
+    "nuka-carousel": "^5.2.0"
   }
 }