@weaverse/react 0.3.7 → 0.4.0

package/dist/index.js

@@ -77,9 +77,11 @@ var base_default = BaseElement;
 // src/elements/button.tsx
 var React2 = __toESM(require("react"));
 var Button = React2.forwardRef((props, ref) => {
+  const _a = props, { style } = _a, rest = __objRest(_a, ["style"]);
   return /* @__PURE__ */ React2.createElement("button", __spreadValues({
-    ref
-  }, props), props.value);
+    ref,
+    style
+  }, rest), props.value);
 });
 Button.defaultProps = {
   value: "Click me",
@@ -93,6 +95,28 @@ var schema2 = {
   title: "Button",
   type: "button",
   settings: [
+    {
+      tab: "Settings",
+      label: "Alignment",
+      inspectors: [
+        {
+          binding: "style",
+          type: "alignment"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Overlay",
+      inspectors: [
+        {
+          binding: "data",
+          key: "applyOverlay",
+          label: "Apply Overlay",
+          type: "switch"
+        }
+      ]
+    },
     {
       tab: "Settings",
       label: "Group 1",
@@ -100,12 +124,14 @@ var schema2 = {
         {
           binding: "data",
           key: "value",
-          componentType: "textarea"
+          type: "textarea",
+          label: "",
+          default: ""
         },
         {
           binding: "style",
           key: "backgroundColor",
-          componentType: "color"
+          type: "color"
         }
       ]
     },
@@ -116,11 +142,12 @@ var schema2 = {
         {
           binding: "style",
           key: "color",
-          componentType: "color"
+          type: "color"
         }
       ]
     }
-  ]
+  ],
+  toolbar: []
 };
 var button_default = Button;
 
@@ -173,6 +200,15 @@ var elements = {
 };
 var elements_default = elements;
 
+// src/utils/css.ts
+var shortCssObject = (css) => {
+  return {
+    "@desktop": css[`@desktop`],
+    "@tablet": css[`@tablet`],
+    "@mobile": css[`@mobile`]
+  };
+};
+
 // src/renderer.tsx
 var import_core = require("@weaverse/core");
 var React4 = __toESM(require("react"));
@@ -231,7 +267,8 @@ var Item = ({ itemInstance, elementInstances, context }) => {
   }, []);
   let realClassName = className;
   if (css) {
-    let selector = context.stitchesInstance.css(css)().className;
+    let formattedCss = shortCssObject(css);
+    let selector = context.stitchesInstance.css(formattedCss)().className;
     realClassName = realClassName ? `${selector} ${realClassName}` : selector;
   }
   let element = elementInstances.get(type) || elementInstances.get("base");

package/dist/index.mjs

@@ -50,9 +50,11 @@ var base_default = BaseElement;
 // src/elements/button.tsx
 import * as React2 from "react";
 var Button = React2.forwardRef((props, ref) => {
+  const _a = props, { style } = _a, rest = __objRest(_a, ["style"]);
   return /* @__PURE__ */ React2.createElement("button", __spreadValues({
-    ref
-  }, props), props.value);
+    ref,
+    style
+  }, rest), props.value);
 });
 Button.defaultProps = {
   value: "Click me",
@@ -66,6 +68,28 @@ var schema2 = {
   title: "Button",
   type: "button",
   settings: [
+    {
+      tab: "Settings",
+      label: "Alignment",
+      inspectors: [
+        {
+          binding: "style",
+          type: "alignment"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Overlay",
+      inspectors: [
+        {
+          binding: "data",
+          key: "applyOverlay",
+          label: "Apply Overlay",
+          type: "switch"
+        }
+      ]
+    },
     {
       tab: "Settings",
       label: "Group 1",
@@ -73,12 +97,14 @@ var schema2 = {
         {
           binding: "data",
           key: "value",
-          componentType: "textarea"
+          type: "textarea",
+          label: "",
+          default: ""
         },
         {
           binding: "style",
           key: "backgroundColor",
-          componentType: "color"
+          type: "color"
         }
       ]
     },
@@ -89,11 +115,12 @@ var schema2 = {
         {
           binding: "style",
           key: "color",
-          componentType: "color"
+          type: "color"
         }
       ]
     }
-  ]
+  ],
+  toolbar: []
 };
 var button_default = Button;
 
@@ -146,6 +173,15 @@ var elements = {
 };
 var elements_default = elements;
 
+// src/utils/css.ts
+var shortCssObject = (css) => {
+  return {
+    "@desktop": css[`@desktop`],
+    "@tablet": css[`@tablet`],
+    "@mobile": css[`@mobile`]
+  };
+};
+
 // src/renderer.tsx
 import {
   isBrowser,
@@ -207,7 +243,8 @@ var Item = ({ itemInstance, elementInstances, context }) => {
   }, []);
   let realClassName = className;
   if (css) {
-    let selector = context.stitchesInstance.css(css)().className;
+    let formattedCss = shortCssObject(css);
+    let selector = context.stitchesInstance.css(formattedCss)().className;
     realClassName = realClassName ? `${selector} ${realClassName}` : selector;
   }
   let element = elementInstances.get(type) || elementInstances.get("base");

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.7",
+  "version": "0.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,6 +31,6 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "^0.3.6"
+    "@weaverse/core": "^0.4.0"
   }
 }