@webstudio-is/react-sdk 0.61.0 → 0.63.0

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,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_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_component_meta = require("./component-meta");
+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,
+  states: import_component_meta.defaultStates,
+  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,57 @@
+"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_component_meta = require("./component-meta");
+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: [
+    ...import_component_meta.defaultStates,
+    { 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

@@ -23,6 +23,7 @@ __export(separator_ws_exports, {
 });
 module.exports = __toCommonJS(separator_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_separator = require("./__generated__/separator.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -59,6 +60,7 @@ const meta = {
   type: "embed",
   label: "Separator",
   Icon: import_icons.DashIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: []
 };

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

@@ -24,6 +24,7 @@ __export(span_ws_exports, {
 module.exports = __toCommonJS(span_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_span = require("./__generated__/span.props");
 const presetStyle = {
   span: import_normalize.span
@@ -32,6 +33,7 @@ const meta = {
   type: "rich-text-child",
   label: "Styled Text",
   Icon: import_icons.PaintBrushIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -24,6 +24,7 @@ __export(subscript_ws_exports, {
 module.exports = __toCommonJS(subscript_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_subscript = require("./__generated__/subscript.props");
 const presetStyle = {
   sub: import_normalize.sub
@@ -32,6 +33,7 @@ const meta = {
   type: "rich-text-child",
   label: "Subscript Text",
   Icon: import_icons.SubscriptIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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/superscript.ws.js

@@ -24,6 +24,7 @@ __export(superscript_ws_exports, {
 module.exports = __toCommonJS(superscript_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_superscript = require("./__generated__/superscript.props");
 const presetStyle = {
   sup: import_normalize.sup
@@ -32,6 +33,7 @@ const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
   Icon: import_icons.SuperscriptIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -23,6 +23,7 @@ __export(text_block_ws_exports, {
 });
 module.exports = __toCommonJS(text_block_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_text_block = require("./__generated__/text-block.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -39,6 +40,7 @@ const meta = {
   type: "rich-text",
   label: "Text Block",
   Icon: import_icons.TextBlockIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Block of text you can edit" }]
 };

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,58 @@
+"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_component_meta = require("./component-meta");
+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: [
+    ...import_component_meta.defaultStates,
+    { 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/normalize.js

@@ -43,6 +43,7 @@ __export(normalize_exports, {
   img: () => img,
   input: () => input,
   kbd: () => kbd,
+  label: () => label,
   legend: () => legend,
   li: () => li,
   main: () => main,
@@ -83,6 +84,7 @@ const main = baseStyle;
 const nav = baseStyle;
 const section = baseStyle;
 const form = baseStyle;
+const label = baseStyle;
 const h1 = baseStyle;
 const h2 = baseStyle;
 const h3 = baseStyle;
@@ -91,7 +93,7 @@ const h5 = baseStyle;
 const h6 = baseStyle;
 const i = baseStyle;
 const img = baseStyle;
-const a = baseStyle;
+const a = [boxSizing, ...import_presets.borders, ...import_presets.linkColors];
 const li = baseStyle;
 const ul = baseStyle;
 const ol = baseStyle;

package/lib/cjs/css/presets.js

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var presets_exports = {};
 __export(presets_exports, {
-  borders: () => borders
+  borders: () => borders,
+  linkColors: () => linkColors
 });
 module.exports = __toCommonJS(presets_exports);
 const borders = [
@@ -39,3 +40,20 @@ const borders = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
+const linkColors = [
+  {
+    property: "color",
+    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
+  },
+  {
+    state: ":active",
+    property: "color",
+    // chrome and safari use rgb(255, 0, 0)
+    value: { type: "rgb", r: 238, g: 0, b: 0, alpha: 1 }
+  },
+  {
+    state: ":visited",
+    property: "color",
+    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 }
+  }
+];

package/lib/cjs/index.js

@@ -22,7 +22,8 @@ __export(src_exports, {
   componentCategories: () => import_component_meta.componentCategories,
   customComponentMetas: () => import_custom_components.customComponentMetas,
   customComponentPropsMetas: () => import_custom_components.customComponentPropsMetas,
-  customComponents: () => import_custom_components.customComponents
+  customComponents: () => import_custom_components.customComponents,
+  stateCategories: () => import_component_meta.stateCategories
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./css"), module.exports);