@weaverse/react 0.5.5 → 0.5.9

package/dist/index.js

@@ -79,10 +79,9 @@ var base_default = BaseElement;
 // src/elements/button.tsx
 var React2 = __toESM(require("react"));
 var Button = React2.forwardRef((props, ref) => {
-  const _a = props, { style, buttonType, css } = _a, rest = __objRest(_a, ["style", "buttonType", "css"]);
+  const _a = props, { buttonType, css } = _a, rest = __objRest(_a, ["buttonType", "css"]);
   return /* @__PURE__ */ React2.createElement("button", __spreadValues({
-    ref,
-    style
+    ref
   }, rest), props.value);
 });
 Button.defaultProps = {
@@ -102,6 +101,26 @@ var schema2 = {
         }
       ]
     },
+    {
+      tab: "Settings",
+      label: "Visibility",
+      inspectors: [
+        {
+          binding: "style",
+          type: "visibility"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Dimensions",
+      inspectors: [
+        {
+          binding: "style",
+          type: "dimensions"
+        }
+      ]
+    },
     {
       tab: "Settings",
       label: "Spacing",
@@ -184,53 +203,68 @@ var schema2 = {
 };
 var button_default = Button;
 
-// src/elements/flex.tsx
+// src/elements/container.tsx
 var import_react2 = __toESM(require("react"));
-var Flex = (0, import_react2.forwardRef)((props, ref) => {
+var Container = (0, import_react2.forwardRef)((props, ref) => {
   return /* @__PURE__ */ import_react2.default.createElement("div", __spreadValues({
     ref
   }, props));
 });
 var schema3 = {
-  title: "Flex",
-  type: "flex",
+  title: "Container",
+  type: "container",
   data: {
     css: {
       "@desktop": {
         display: "flex",
         backgroundColor: "rgba(248,203,203,0.38)",
-        gridArea: "1 / 1 / 3 / 3"
+        gridArea: "1 / 1 / 3 / 6",
+        minHeight: "96px"
+      },
+      "@mobile": {
+        display: "flex"
       }
     }
   },
   settings: [
     {
-      tab: "Layout",
-      label: "Flex",
+      tab: "Settings",
+      label: "Alignment",
       inspectors: [
         {
-          type: "flex"
+          binding: "style",
+          type: "alignment"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Visibility",
+      inspectors: [
+        {
+          binding: "style",
+          type: "visibility"
         }
       ]
     }
   ]
 };
-var flex_default = Flex;
+var container_default = Container;
 
-// src/elements/grid.tsx
+// src/elements/layout.tsx
 var import_react3 = __toESM(require("react"));
-var Grid = (0, import_react3.forwardRef)((props, ref) => {
+var Layout = (0, import_react3.forwardRef)((props, ref) => {
   return /* @__PURE__ */ import_react3.default.createElement("div", __spreadValues({
     ref
   }, props));
 });
 var schema4 = {
-  title: "Grid",
-  type: "grid",
+  title: "Layout",
+  type: "layout",
   data: {
     css: {
       "@desktop": {
-        display: "grid",
+        display: "grid !important",
         gridTemplateRows: "repeat(auto-fill, $rowSize)",
         gridTemplateColumns: "repeat($columns, 1fr)",
         gridGap: "$gap",
@@ -238,24 +272,24 @@ var schema4 = {
         backgroundColor: "#c7c7c7"
       },
       "@mobile": {
-        gridTemplateRows: "100%",
-        gridTemplateColumns: "100%"
+        display: "flex !important"
       }
     }
   },
   settings: [
     {
-      tab: "Layout",
-      label: "Grid",
+      tab: "Settings",
+      label: "Spacing",
       inspectors: [
         {
-          type: "grid"
+          binding: "style",
+          type: "spacing"
         }
       ]
     }
   ]
 };
-var grid_default = Grid;
+var layout_default = Layout;
 
 // src/elements/text.tsx
 var React5 = __toESM(require("react"));
@@ -310,12 +344,12 @@ var elements = {
     Component: text_default,
     schema: schema5
   },
-  Grid: {
-    Component: grid_default,
+  Layout: {
+    Component: layout_default,
     schema: schema4
   },
-  Flex: {
-    Component: flex_default,
+  Container: {
+    Component: container_default,
     schema: schema3
   }
 };
@@ -325,7 +359,6 @@ var elements_default = elements;
 var shortCssObject = (css) => {
   return {
     "@desktop": css[`@desktop`],
-    "@tablet": css[`@tablet`],
     "@mobile": css[`@mobile`]
   };
 };

package/dist/index.mjs

@@ -52,10 +52,9 @@ var base_default = BaseElement;
 // src/elements/button.tsx
 import * as React2 from "react";
 var Button = React2.forwardRef((props, ref) => {
-  const _a = props, { style, buttonType, css } = _a, rest = __objRest(_a, ["style", "buttonType", "css"]);
+  const _a = props, { buttonType, css } = _a, rest = __objRest(_a, ["buttonType", "css"]);
   return /* @__PURE__ */ React2.createElement("button", __spreadValues({
-    ref,
-    style
+    ref
   }, rest), props.value);
 });
 Button.defaultProps = {
@@ -75,6 +74,26 @@ var schema2 = {
         }
       ]
     },
+    {
+      tab: "Settings",
+      label: "Visibility",
+      inspectors: [
+        {
+          binding: "style",
+          type: "visibility"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Dimensions",
+      inspectors: [
+        {
+          binding: "style",
+          type: "dimensions"
+        }
+      ]
+    },
     {
       tab: "Settings",
       label: "Spacing",
@@ -157,53 +176,68 @@ var schema2 = {
 };
 var button_default = Button;
 
-// src/elements/flex.tsx
+// src/elements/container.tsx
 import React3, { forwardRef as forwardRef2 } from "react";
-var Flex = forwardRef2((props, ref) => {
+var Container = forwardRef2((props, ref) => {
   return /* @__PURE__ */ React3.createElement("div", __spreadValues({
     ref
   }, props));
 });
 var schema3 = {
-  title: "Flex",
-  type: "flex",
+  title: "Container",
+  type: "container",
   data: {
     css: {
       "@desktop": {
         display: "flex",
         backgroundColor: "rgba(248,203,203,0.38)",
-        gridArea: "1 / 1 / 3 / 3"
+        gridArea: "1 / 1 / 3 / 6",
+        minHeight: "96px"
+      },
+      "@mobile": {
+        display: "flex"
       }
     }
   },
   settings: [
     {
-      tab: "Layout",
-      label: "Flex",
+      tab: "Settings",
+      label: "Alignment",
       inspectors: [
         {
-          type: "flex"
+          binding: "style",
+          type: "alignment"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Visibility",
+      inspectors: [
+        {
+          binding: "style",
+          type: "visibility"
         }
       ]
     }
   ]
 };
-var flex_default = Flex;
+var container_default = Container;
 
-// src/elements/grid.tsx
+// src/elements/layout.tsx
 import React4, { forwardRef as forwardRef3 } from "react";
-var Grid = forwardRef3((props, ref) => {
+var Layout = forwardRef3((props, ref) => {
   return /* @__PURE__ */ React4.createElement("div", __spreadValues({
     ref
   }, props));
 });
 var schema4 = {
-  title: "Grid",
-  type: "grid",
+  title: "Layout",
+  type: "layout",
   data: {
     css: {
       "@desktop": {
-        display: "grid",
+        display: "grid !important",
         gridTemplateRows: "repeat(auto-fill, $rowSize)",
         gridTemplateColumns: "repeat($columns, 1fr)",
         gridGap: "$gap",
@@ -211,24 +245,24 @@ var schema4 = {
         backgroundColor: "#c7c7c7"
       },
       "@mobile": {
-        gridTemplateRows: "100%",
-        gridTemplateColumns: "100%"
+        display: "flex !important"
       }
     }
   },
   settings: [
     {
-      tab: "Layout",
-      label: "Grid",
+      tab: "Settings",
+      label: "Spacing",
       inspectors: [
         {
-          type: "grid"
+          binding: "style",
+          type: "spacing"
         }
       ]
     }
   ]
 };
-var grid_default = Grid;
+var layout_default = Layout;
 
 // src/elements/text.tsx
 import * as React5 from "react";
@@ -283,12 +317,12 @@ var elements = {
     Component: text_default,
     schema: schema5
   },
-  Grid: {
-    Component: grid_default,
+  Layout: {
+    Component: layout_default,
     schema: schema4
   },
-  Flex: {
-    Component: flex_default,
+  Container: {
+    Component: container_default,
     schema: schema3
   }
 };
@@ -298,7 +332,6 @@ var elements_default = elements;
 var shortCssObject = (css) => {
   return {
     "@desktop": css[`@desktop`],
-    "@tablet": css[`@tablet`],
     "@mobile": css[`@mobile`]
   };
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.5",
+  "version": "0.5.9",
   "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.5.4"
+    "@weaverse/core": "0.5.9"
   }
 }