@weaverse/react 1.0.22 → 1.0.24

package/dist/index.d.ts

@@ -158,9 +158,11 @@ declare function Dots(props: SliderDotsProps): JSX.Element;
 
 declare function AutoplayPlugin(changeSlidesEvery: number): KeenSliderPlugin;
 
-declare function NoHydrate({ getHTML, ...rest }: {
+type NoHydrateProps = {
+    id: string;
     getHTML?: () => string;
-} & JSX.IntrinsicElements['div']): JSX.Element;
+} & JSX.IntrinsicElements['div'];
+declare function NoHydrate({ id, getHTML, ...rest }: NoHydrateProps): JSX.Element;
 
 declare let Components: {
     Background: typeof Background;
@@ -176,7 +178,7 @@ declare let Components: {
 declare let SliderComponents: {
     Arrows: typeof Arrows;
     Dots: typeof Dots;
-    ResizePlugin: keen_slider_react.KeenSliderPlugin<{}, {}, keen_slider_react.KeenSliderHooks>;
+    ResizePlugin: keen_slider_react.KeenSliderPlugin;
     AutoplayPlugin: typeof AutoplayPlugin;
 };
 

package/dist/index.js

@@ -70,16 +70,16 @@ var Button = React.forwardRef((props, ref) => {
 });
 Button.defaultProps = {
   type: "button",
-  text: "Button",
+  text: "BUTTON",
   clickAction: "none",
   linkTo: "",
   openInNewTab: false
 };
 var css = {
   "@desktop": {
-    borderRadius: "8px",
+    borderRadius: "4px",
     border: "none",
-    backgroundColor: "#393e46",
+    backgroundColor: "#3E3F40",
     color: "#fff",
     fontSize: "14px",
     lineHeight: "1.5",
@@ -90,8 +90,8 @@ var css = {
     minWidth: "120px",
     textDecoration: "none",
     textAlign: "center",
-    ":hover": {
-      backgroundColor: "#222831"
+    "&:hover": {
+      backgroundColor: "#1A1B1B"
     }
   }
 };
@@ -111,7 +111,12 @@ var css2 = {
     alignItems: "flex-start",
     justifyContent: "flex-start",
     gridArea: "1 / 1 / 3 / 6",
-    overflow: "hidden"
+    overflow: "hidden",
+    // minWidth: '300px',
+    minHeight: "100px"
+  },
+  "@mobile": {
+    minHeight: "100px"
   }
 };
 Container.defaultProps = {};
@@ -426,8 +431,8 @@ var css5 = {
   "@desktop": {
     position: "relative",
     "> [data-layout-content]": {
-      paddingTop: "var(--gap)",
-      paddingBottom: "var(--gap)",
+      // paddingTop: 'var(--gap)',
+      // paddingBottom: 'var(--gap)',
       margin: "0 auto",
       display: "grid",
       gridTemplateRows: "repeat(var(--rows), var(--row-size))",
@@ -1938,11 +1943,7 @@ var placeholder_default = Placeholder;
 
 // src/components/no-hydrate.tsx
 var import_react30 = __toESM(require("react"));
-function NoHydrate({
-  getHTML,
-  ...rest
-}) {
-  let id = (0, import_react30.useId)();
+function NoHydrate({ id, getHTML, ...rest }) {
   let [html] = (0, import_react30.useState)(() => {
     if (typeof document === "undefined") {
       return getHTML?.() ?? "";
@@ -2100,7 +2101,7 @@ function formatCSS(css13) {
 }
 var permanentClasses = {};
 function generateItemClassName(instance, stitchesInstance) {
-  let { css: css13, type, className: cls = "" } = instance.data;
+  let { css: css13, type, className: cls = "", tailwindClasses } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = instance.Element?.permanentCss;
@@ -2119,7 +2120,13 @@ function generateItemClassName(instance, stitchesInstance) {
     let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
     let { stitchesClass } = instance;
     let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
-    className = (0, import_clsx5.default)(permanentClass, cls, newStitchesClass, otherClass);
+    className = (0, import_clsx5.default)(
+      permanentClass,
+      cls,
+      tailwindClasses,
+      newStitchesClass,
+      otherClass
+    );
     instance.stitchesClass = newStitchesClass;
   }
   return className;
@@ -2577,9 +2584,23 @@ var WeaverseRoot = ({ context }) => {
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react38.useContext)(WeaverseContext);
+  let context = (0, import_react38.useContext)(WeaverseContext);
+  let { stitchesInstance, elementInstances } = context;
   let [data, setData] = (0, import_react38.useState)(instance.data);
-  let { id, type, childIds = [], css: css13, className, ...rest } = data;
+  let {
+    id,
+    type,
+    childIds = [],
+    children = [],
+    parentId,
+    createdAt,
+    updatedAt,
+    deletedAt,
+    tailwindClasses,
+    css: css13,
+    className,
+    ...rest
+  } = data;
   (0, import_react38.useEffect)(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
@@ -2605,7 +2626,8 @@ var ItemComponent = ({ instance }) => {
         className: generateItemClassName(instance, stitchesInstance),
         ...rest
       },
-      childIds.map((id2) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { key: id2, id: id2 }))
+      childIds.map((cid) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { key: cid, id: cid })),
+      children.map((item) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { key: item.id, id: item.id }))
     );
   } else {
     console.log(`Unknown element: ${type}`);

package/dist/index.mjs

@@ -34,16 +34,16 @@ var Button = React.forwardRef((props, ref) => {
 });
 Button.defaultProps = {
   type: "button",
-  text: "Button",
+  text: "BUTTON",
   clickAction: "none",
   linkTo: "",
   openInNewTab: false
 };
 var css = {
   "@desktop": {
-    borderRadius: "8px",
+    borderRadius: "4px",
     border: "none",
-    backgroundColor: "#393e46",
+    backgroundColor: "#3E3F40",
     color: "#fff",
     fontSize: "14px",
     lineHeight: "1.5",
@@ -54,8 +54,8 @@ var css = {
     minWidth: "120px",
     textDecoration: "none",
     textAlign: "center",
-    ":hover": {
-      backgroundColor: "#222831"
+    "&:hover": {
+      backgroundColor: "#1A1B1B"
     }
   }
 };
@@ -75,7 +75,12 @@ var css2 = {
     alignItems: "flex-start",
     justifyContent: "flex-start",
     gridArea: "1 / 1 / 3 / 6",
-    overflow: "hidden"
+    overflow: "hidden",
+    // minWidth: '300px',
+    minHeight: "100px"
+  },
+  "@mobile": {
+    minHeight: "100px"
   }
 };
 Container.defaultProps = {};
@@ -390,8 +395,8 @@ var css5 = {
   "@desktop": {
     position: "relative",
     "> [data-layout-content]": {
-      paddingTop: "var(--gap)",
-      paddingBottom: "var(--gap)",
+      // paddingTop: 'var(--gap)',
+      // paddingBottom: 'var(--gap)',
       margin: "0 auto",
       display: "grid",
       gridTemplateRows: "repeat(var(--rows), var(--row-size))",
@@ -1901,12 +1906,8 @@ var Placeholder = forwardRef9(
 var placeholder_default = Placeholder;
 
 // src/components/no-hydrate.tsx
-import React25, { useId, useState as useState3 } from "react";
-function NoHydrate({
-  getHTML,
-  ...rest
-}) {
-  let id = useId();
+import React25, { useState as useState3 } from "react";
+function NoHydrate({ id, getHTML, ...rest }) {
   let [html] = useState3(() => {
     if (typeof document === "undefined") {
       return getHTML?.() ?? "";
@@ -2064,7 +2065,7 @@ function formatCSS(css13) {
 }
 var permanentClasses = {};
 function generateItemClassName(instance, stitchesInstance) {
-  let { css: css13, type, className: cls = "" } = instance.data;
+  let { css: css13, type, className: cls = "", tailwindClasses } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = instance.Element?.permanentCss;
@@ -2083,7 +2084,13 @@ function generateItemClassName(instance, stitchesInstance) {
     let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
     let { stitchesClass } = instance;
     let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
-    className = clsx5(permanentClass, cls, newStitchesClass, otherClass);
+    className = clsx5(
+      permanentClass,
+      cls,
+      tailwindClasses,
+      newStitchesClass,
+      otherClass
+    );
     instance.stitchesClass = newStitchesClass;
   }
   return className;
@@ -2541,9 +2548,23 @@ var WeaverseRoot = ({ context }) => {
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext6(WeaverseContext);
+  let context = useContext6(WeaverseContext);
+  let { stitchesInstance, elementInstances } = context;
   let [data, setData] = useState6(instance.data);
-  let { id, type, childIds = [], css: css13, className, ...rest } = data;
+  let {
+    id,
+    type,
+    childIds = [],
+    children = [],
+    parentId,
+    createdAt,
+    updatedAt,
+    deletedAt,
+    tailwindClasses,
+    css: css13,
+    className,
+    ...rest
+  } = data;
   useEffect5(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
@@ -2569,7 +2590,8 @@ var ItemComponent = ({ instance }) => {
         className: generateItemClassName(instance, stitchesInstance),
         ...rest
       },
-      childIds.map((id2) => /* @__PURE__ */ React30.createElement(ItemInstance, { key: id2, id: id2 }))
+      childIds.map((cid) => /* @__PURE__ */ React30.createElement(ItemInstance, { key: cid, id: cid })),
+      children.map((item) => /* @__PURE__ */ React30.createElement(ItemInstance, { key: item.id, id: item.id }))
     );
   } else {
     console.log(`Unknown element: ${type}`);

package/package.json

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