@webstudio-is/react-sdk 0.60.0 → 0.62.0

package/lib/cjs/components/label.ws.js

@@ -0,0 +1,54 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var label_ws_exports = {};
+__export(label_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(label_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_label = require("./__generated__/label.props");
+var import_normalize = require("../css/normalize");
+const presetStyle = {
+  label: [
+    ...import_normalize.label,
+    { property: "display", value: { type: "keyword", value: "block" } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "rich-text",
+  label: "Input Label",
+  Icon: import_icons.TextBlockIcon,
+  presetStyle,
+  children: [{ type: "text", value: "Form Label" }]
+};
+const propsMeta = {
+  props: {
+    ...import_label.props,
+    htmlFor: {
+      required: false,
+      control: "text",
+      type: "string",
+      rows: 0,
+      label: "For"
+    }
+  },
+  initialProps: ["htmlFor"]
+};

package/lib/cjs/components/link-block.ws.js

@@ -27,19 +27,19 @@ var import_link_block = require("./__generated__/link-block.props");
 var import_link = require("./link.ws");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
-  a: {
+  a: [
     ...import_normalize.a,
-    display: {
-      type: "keyword",
-      value: "inline-block"
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",
   type: "container",
   label: "Link Block",
-  Icon: import_icons.BoxLinkIcon,
+  Icon: import_icons.LinkBlockIcon,
   states: import_link.meta.states,
   presetStyle
 };

package/lib/cjs/components/link.ws.js

@@ -26,18 +26,17 @@ var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
 var import_link = require("./__generated__/link.props");
 const presetStyle = {
-  a: {
+  a: [
     ...import_normalize.a,
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
     },
-    display: {
-      type: "keyword",
-      value: "inline-block"
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",
@@ -46,7 +45,7 @@ const meta = {
   Icon: import_icons.LinkIcon,
   presetStyle,
   states: [{ selector: "[aria-current=page]", label: "Current page" }],
-  children: ["Link text you can edit"]
+  children: [{ type: "text", value: "Link text you can edit" }]
 };
 const propsMeta = {
   props: {

package/lib/cjs/components/list-item.ws.js

@@ -31,9 +31,10 @@ const presetStyle = {
 const meta = {
   category: "typography",
   type: "rich-text",
+  acceptedParents: ["List"],
   label: "List Item",
   Icon: import_icons.ListItemIcon,
-  children: ["List Item you can edit"],
+  children: [{ type: "text", value: "List Item you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/cjs/components/list.ws.js

@@ -26,36 +26,36 @@ var import_icons = require("@webstudio-is/icons");
 var import_list = require("./__generated__/list.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
-  ol: {
+  ol: [
     ...import_normalize.ol,
-    marginTop: {
-      type: "keyword",
-      value: "0"
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
     },
-    marginBottom: {
-      type: "keyword",
-      value: "10px"
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
     },
-    paddingLeft: {
-      type: "keyword",
-      value: "40px"
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
     }
-  },
-  ul: {
+  ],
+  ul: [
     ...import_normalize.ul,
-    marginTop: {
-      type: "keyword",
-      value: "0"
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
     },
-    marginBottom: {
-      type: "keyword",
-      value: "10px"
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
     },
-    paddingLeft: {
-      type: "keyword",
-      value: "40px"
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",

package/lib/cjs/components/paragraph.ws.js

@@ -33,7 +33,7 @@ const meta = {
   type: "rich-text",
   label: "Paragraph",
   Icon: import_icons.TextAlignLeftIcon,
-  children: ["Pragraph you can edit"],
+  children: [{ type: "text", value: "Pragraph you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/cjs/components/radio-button-field.js

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radio_button_field_exports = {};
+__export(radio_button_field_exports, {
+  RadioButtonField: () => RadioButtonField,
+  defaultTag: () => defaultTag
+});
+module.exports = __toCommonJS(radio_button_field_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const defaultTag = "label";
+const RadioButtonField = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...props, ref }));
+RadioButtonField.displayName = "RadioButtonField";

package/lib/cjs/components/radio-button-field.ws.js

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radio_button_field_ws_exports = {};
+__export(radio_button_field_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(radio_button_field_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_radio_button_field = require("./__generated__/radio-button-field.props");
+var import_normalize = require("../css/normalize");
+const presetStyle = {
+  label: [
+    ...import_normalize.label,
+    { property: "display", value: { type: "keyword", value: "flex" } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "container",
+  label: "Radio Button Field",
+  Icon: import_icons.RadioCheckedIcon,
+  presetStyle,
+  children: [
+    { type: "instance", component: "RadioButton", props: [], children: [] },
+    {
+      type: "instance",
+      component: "TextBlock",
+      props: [],
+      children: [{ type: "text", value: "Radio" }]
+    }
+  ]
+};
+const propsMeta = {
+  props: import_radio_button_field.props,
+  initialProps: []
+};

package/lib/cjs/components/radio-button.js

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radio_button_exports = {};
+__export(radio_button_exports, {
+  RadioButton: () => RadioButton,
+  defaultTag: () => defaultTag
+});
+module.exports = __toCommonJS(radio_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const defaultTag = "input";
+const RadioButton = (0, import_react.forwardRef)(({ children: _children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...props, type: "radio", ref }));
+RadioButton.displayName = "RadioButton";

package/lib/cjs/components/radio-button.ws.js

@@ -0,0 +1,55 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radio_button_ws_exports = {};
+__export(radio_button_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(radio_button_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
+var import_radio_button = require("./__generated__/radio-button.props");
+const presetStyle = {
+  input: [
+    ...import_normalize.input,
+    {
+      property: "marginRight",
+      value: { type: "unit", unit: "em", value: 0.5 }
+    }
+  ]
+};
+const meta = {
+  type: "control",
+  label: "Radio Button",
+  Icon: import_icons.RadioCheckedIcon,
+  presetStyle,
+  states: [
+    { selector: ":checked", label: "Checked" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" }
+  ]
+};
+const propsMeta = {
+  props: import_radio_button.props,
+  initialProps: ["name"]
+};

package/lib/cjs/components/separator.ws.js

@@ -26,33 +26,33 @@ var import_icons = require("@webstudio-is/icons");
 var import_separator = require("./__generated__/separator.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
-  hr: {
+  hr: [
     ...import_normalize.hr,
-    height: {
-      type: "keyword",
-      value: "1px"
+    {
+      property: "height",
+      value: { type: "keyword", value: "1px" }
     },
-    backgroundColor: {
-      type: "keyword",
-      value: "gray"
+    {
+      property: "backgroundColor",
+      value: { type: "keyword", value: "gray" }
     },
-    borderTopStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderRightStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderLeftStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderBottomStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "none" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",

package/lib/cjs/components/success-message.js

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var success_message_exports = {};
+__export(success_message_exports, {
+  SuccessMessage: () => SuccessMessage,
+  defaultTag: () => defaultTag
+});
+module.exports = __toCommonJS(success_message_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const defaultTag = "div";
+const SuccessMessage = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref }));
+SuccessMessage.displayName = "SuccessMessage";

package/lib/cjs/components/success-message.ws.js

@@ -0,0 +1,40 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var success_message_ws_exports = {};
+__export(success_message_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(success_message_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_success_message = require("./__generated__/success-message.props");
+var import_normalize = require("../css/normalize");
+const presetStyle = {
+  div: import_normalize.div
+};
+const meta = {
+  type: "container",
+  label: "Success Message",
+  Icon: import_icons.BoxIcon,
+  presetStyle
+};
+const propsMeta = {
+  props: import_success_message.props,
+  initialProps: []
+};

package/lib/cjs/components/text-block.ws.js

@@ -26,14 +26,13 @@ var import_icons = require("@webstudio-is/icons");
 var import_text_block = require("./__generated__/text-block.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
-  div: {
+  div: [
     ...import_normalize.div,
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",
@@ -41,7 +40,7 @@ const meta = {
   label: "Text Block",
   Icon: import_icons.TextBlockIcon,
   presetStyle,
-  children: ["Block of text you can edit"]
+  children: [{ type: "text", value: "Block of text you can edit" }]
 };
 const propsMeta = {
   props: import_text_block.props

package/lib/cjs/components/textarea.js

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var textarea_exports = {};
+__export(textarea_exports, {
+  Textarea: () => Textarea,
+  defaultTag: () => defaultTag
+});
+module.exports = __toCommonJS(textarea_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const defaultTag = "textarea";
+const Textarea = (0, import_react.forwardRef)(({ children: _children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { ...props, ref }));
+Textarea.displayName = "Textarea";

package/lib/cjs/components/textarea.ws.js

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var textarea_ws_exports = {};
+__export(textarea_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(textarea_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
+var import_textarea = require("./__generated__/textarea.props");
+const presetStyle = {
+  textarea: [
+    ...import_normalize.textarea,
+    // resize doesn't work well while on canvas
+    { property: "resize", value: { type: "keyword", value: "none" } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "control",
+  label: "Text Area",
+  Icon: import_icons.FormTextAreaIcon,
+  presetStyle,
+  states: [
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" }
+  ]
+};
+const propsMeta = {
+  props: import_textarea.props,
+  initialProps: ["name", "placeholder", "required", "autoFocus"]
+};

package/lib/cjs/css/css.js

@@ -64,15 +64,12 @@ const generateCssText = (data, options) => {
   for (const component of (0, import_components_utils.getComponentNames)()) {
     const meta = (0, import_components.getComponentMeta)(component);
     const presetStyle = meta?.presetStyle;
-    if (presetStyle !== void 0) {
-      for (const [tag, style] of Object.entries(presetStyle)) {
-        engine.addStyleRule(
-          `${tag}:where([${import_tree.componentAttribute}=${component}])`,
-          {
-            style
-          }
-        );
-      }
+    if (presetStyle === void 0) {
+      continue;
+    }
+    const rules = (0, import_style_rules.getPresetStyleRules)(component, presetStyle);
+    for (const [selector, style] of rules) {
+      engine.addStyleRule(selector, { style });
     }
   }
   const styleRules = (0, import_style_rules.getStyleRules)(styles, styleSourceSelections);