@weaverse/react 0.7.0 → 0.7.3

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_react18 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -799,6 +799,85 @@ TabContent.defaultProps = {
 };
 var TabContent_default = TabContent;
 
+// src/elements/slider/index.tsx
+var import_react16 = __toESM(require("react"));
+var Carousel = __toESM(require("nuka-carousel"));
+var SliderContext = (0, import_react16.createContext)({
+  active: null,
+  setActive: () => {
+  }
+});
+var Slider = (0, import_react16.forwardRef)((props, ref) => {
+  var _a, _b, _c;
+  const { children, ...rest } = props;
+  const defaultActive = (_c = (_b = (_a = import_react16.default.Children.toArray(children)) == null ? void 0 : _a[0]) == null ? void 0 : _b.props) == null ? void 0 : _c.id;
+  const [active, setActive] = (0, import_react16.useState)(defaultActive);
+  return /* @__PURE__ */ import_react16.default.createElement("div", {
+    ...rest,
+    ref
+  }, /* @__PURE__ */ import_react16.default.createElement(SliderContext.Provider, {
+    value: { active, setActive }
+  }, children), /* @__PURE__ */ import_react16.default.createElement(Carousel.default, null, /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: "slide"
+  }, "Hi"), /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: "slide"
+  }, "Hieee"), /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: "slide"
+  }, "Hixxx"), /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: "slide"
+  }, "Hi3")));
+});
+Slider.defaultProps = {
+  css: {
+    "@desktop": {}
+  }
+};
+var slider_default = Slider;
+
+// src/elements/slider/SliderContent.tsx
+var import_react17 = __toESM(require("react"));
+var SliderContent = (0, import_react17.forwardRef)(
+  (props, ref) => {
+    const { active } = (0, import_react17.useContext)(SliderContext);
+    const wvId = props["data-wv-id"];
+    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",
+      "--content-active": active === wvId ? "grid" : "none"
+    };
+    return /* @__PURE__ */ import_react17.default.createElement("div", {
+      ref,
+      ...rest,
+      style
+    }, import_react17.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react17.default.createElement(Placeholder_default, {
+      element: "Slider"
+    }, "Slider Content"));
+  }
+);
+SliderContent.defaultProps = {
+  rows: 2,
+  columns: 12,
+  gap: 4,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      width: "100%",
+      maxWidth: "var(--grid-size)",
+      display: "var(--content-active, none)",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gap: "var(--gap)",
+      borderRadius: 4
+    }
+  }
+};
+var SliderContent_default = SliderContent;
+
 // src/elements/index.ts
 var elements = {
   Countdown: {
@@ -856,6 +935,14 @@ var elements = {
   TabContent: {
     Component: TabContent_default,
     type: "tab.content"
+  },
+  Slider: {
+    Component: slider_default,
+    type: "slider"
+  },
+  SliderContent: {
+    Component: SliderContent_default,
+    type: "slider.content"
   }
 };
 var elements_default = elements;
@@ -868,13 +955,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react16.createContext)({});
+var WeaverseContext = (0, import_react18.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_react19 = __toESM(require("react"));
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -902,10 +989,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_react19.useState)(context.projectData);
+  let rootRef = (0, import_react19.useRef)();
   let update = () => setData({});
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     context.subscribe(update);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -914,21 +1001,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_react19.default.createElement("div", {
     className: `weaverse-content-root ${themeClass}`,
     ...eventHandlers,
     ref: rootRef
-  }, /* @__PURE__ */ import_react17.default.createElement(WeaverseContextProvider, {
+  }, /* @__PURE__ */ import_react19.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react19.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_react19.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react19.useState)(instance.data);
   let { id, type, childIds = [], css, className, ...rest } = data;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     var _a;
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
@@ -948,13 +1035,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_react19.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_react19.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -962,15 +1049,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react17.useContext)(WeaverseContext);
+  let context = (0, import_react19.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react17.default.createElement("div", {
+    return /* @__PURE__ */ import_react19.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react17.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react19.default.createElement(ItemComponent, {
     instance
   });
 };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/context.ts
 import { Weaverse } from "@weaverse/core";
-import { createContext as createContext3 } from "react";
+import { createContext as createContext4 } from "react";
 
 // src/elements/button.tsx
 import * as React from "react";
@@ -762,6 +762,89 @@ TabContent.defaultProps = {
 };
 var TabContent_default = TabContent;
 
+// src/elements/slider/index.tsx
+import React18, {
+  createContext as createContext3,
+  forwardRef as forwardRef15,
+  useState as useState5
+} from "react";
+import * as Carousel from "nuka-carousel";
+var SliderContext = createContext3({
+  active: null,
+  setActive: () => {
+  }
+});
+var Slider = forwardRef15((props, ref) => {
+  var _a, _b, _c;
+  const { children, ...rest } = props;
+  const defaultActive = (_c = (_b = (_a = React18.Children.toArray(children)) == null ? void 0 : _a[0]) == null ? void 0 : _b.props) == null ? void 0 : _c.id;
+  const [active, setActive] = useState5(defaultActive);
+  return /* @__PURE__ */ React18.createElement("div", {
+    ...rest,
+    ref
+  }, /* @__PURE__ */ React18.createElement(SliderContext.Provider, {
+    value: { active, setActive }
+  }, children), /* @__PURE__ */ React18.createElement(Carousel.default, null, /* @__PURE__ */ React18.createElement("div", {
+    className: "slide"
+  }, "Hi"), /* @__PURE__ */ React18.createElement("div", {
+    className: "slide"
+  }, "Hieee"), /* @__PURE__ */ React18.createElement("div", {
+    className: "slide"
+  }, "Hixxx"), /* @__PURE__ */ React18.createElement("div", {
+    className: "slide"
+  }, "Hi3")));
+});
+Slider.defaultProps = {
+  css: {
+    "@desktop": {}
+  }
+};
+var slider_default = Slider;
+
+// src/elements/slider/SliderContent.tsx
+import React19, { forwardRef as forwardRef16, useContext as useContext7 } from "react";
+var SliderContent = forwardRef16(
+  (props, ref) => {
+    const { active } = useContext7(SliderContext);
+    const wvId = props["data-wv-id"];
+    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",
+      "--content-active": active === wvId ? "grid" : "none"
+    };
+    return /* @__PURE__ */ React19.createElement("div", {
+      ref,
+      ...rest,
+      style
+    }, React19.Children.count(children) > 0 ? children : /* @__PURE__ */ React19.createElement(Placeholder_default, {
+      element: "Slider"
+    }, "Slider Content"));
+  }
+);
+SliderContent.defaultProps = {
+  rows: 2,
+  columns: 12,
+  gap: 4,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      width: "100%",
+      maxWidth: "var(--grid-size)",
+      display: "var(--content-active, none)",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gap: "var(--gap)",
+      borderRadius: 4
+    }
+  }
+};
+var SliderContent_default = SliderContent;
+
 // src/elements/index.ts
 var elements = {
   Countdown: {
@@ -819,6 +902,14 @@ var elements = {
   TabContent: {
     Component: TabContent_default,
     type: "tab.content"
+  },
+  Slider: {
+    Component: slider_default,
+    type: "slider"
+  },
+  SliderContent: {
+    Component: SliderContent_default,
+    type: "slider.content"
   }
 };
 var elements_default = elements;
@@ -831,13 +922,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = createContext3({});
+var WeaverseContext = createContext4({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 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 React20, { useContext as useContext8, useEffect as useEffect4, useRef, useState as useState6 } from "react";
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -865,7 +956,7 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a, _b;
-  let [, setData] = useState5(context.projectData);
+  let [, setData] = useState6(context.projectData);
   let rootRef = useRef();
   let update = () => setData({});
   useEffect4(() => {
@@ -877,19 +968,19 @@ 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__ */ React20.createElement("div", {
     className: `weaverse-content-root ${themeClass}`,
     ...eventHandlers,
     ref: rootRef
-  }, /* @__PURE__ */ React18.createElement(WeaverseContextProvider, {
+  }, /* @__PURE__ */ React20.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React18.createElement(ItemInstance, {
+  }, /* @__PURE__ */ React20.createElement(ItemInstance, {
     id: context.projectData.rootId
   }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext7(WeaverseContext);
-  let [data, setData] = useState5(instance.data);
+  let { stitchesInstance, elementInstances } = useContext8(WeaverseContext);
+  let [data, setData] = useState6(instance.data);
   let { id, type, childIds = [], css, className, ...rest } = data;
   useEffect4(() => {
     var _a;
@@ -911,13 +1002,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React18.createElement(Component, {
+    return /* @__PURE__ */ React20.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__ */ React20.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -925,15 +1016,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext7(WeaverseContext);
+  let context = useContext8(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React18.createElement("div", {
+    return /* @__PURE__ */ React20.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React18.createElement(ItemComponent, {
+  return /* @__PURE__ */ React20.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.0",
+  "version": "0.7.3",
   "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.0"
+    "@weaverse/core": "0.7.2",
+    "nuka-carousel": "^5.2.0"
   }
 }