@webstudio-is/sdk-components-react 0.70.0

package/lib/cjs/subscript.ws.js

@@ -0,0 +1,41 @@
+"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 subscript_ws_exports = {};
+__export(subscript_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(subscript_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_subscript = require("./__generated__/subscript.props");
+const presetStyle = {
+  sub: import_css_normalize.sub
+};
+const meta = {
+  type: "rich-text-child",
+  label: "Subscript Text",
+  icon: import_svg.SubscriptIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle
+};
+const propsMeta = {
+  props: import_subscript.props
+};

package/lib/cjs/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/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_svg = require("@webstudio-is/icons/svg");
+var import_success_message = require("./__generated__/success-message.props");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+const presetStyle = {
+  div: import_css_normalize.div
+};
+const meta = {
+  type: "container",
+  label: "Success Message",
+  icon: import_svg.BoxIcon,
+  presetStyle
+};
+const propsMeta = {
+  props: import_success_message.props,
+  initialProps: []
+};

package/lib/cjs/superscript.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 superscript_exports = {};
+__export(superscript_exports, {
+  Superscript: () => Superscript,
+  defaultTag: () => defaultTag
+});
+module.exports = __toCommonJS(superscript_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const defaultTag = "sup";
+const Superscript = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sup", { ...props, ref }));
+Superscript.displayName = "Bold";

package/lib/cjs/superscript.ws.js

@@ -0,0 +1,41 @@
+"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 superscript_ws_exports = {};
+__export(superscript_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(superscript_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_superscript = require("./__generated__/superscript.props");
+const presetStyle = {
+  sup: import_css_normalize.sup
+};
+const meta = {
+  type: "rich-text-child",
+  label: "Superscript Text",
+  icon: import_svg.SuperscriptIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle
+};
+const propsMeta = {
+  props: import_superscript.props
+};

package/lib/cjs/text-block.js

@@ -0,0 +1,32 @@
+"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 text_block_exports = {};
+__export(text_block_exports, {
+  TextBlock: () => TextBlock,
+  defaultTag: () => defaultTag
+});
+module.exports = __toCommonJS(text_block_exports);
+var import_react = require("react");
+const defaultTag = "div";
+const TextBlock = (0, import_react.forwardRef)(
+  ({ tag = defaultTag, ...props }, ref) => {
+    return (0, import_react.createElement)(tag, { ...props, ref });
+  }
+);
+TextBlock.displayName = "TextBlock";

package/lib/cjs/text-block.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 text_block_ws_exports = {};
+__export(text_block_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(text_block_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_text_block = require("./__generated__/text-block.props");
+const presetStyle = {
+  div: [
+    ...import_css_normalize.div,
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
+    }
+  ]
+};
+const meta = {
+  category: "text",
+  type: "rich-text",
+  label: "Text Block",
+  icon: import_svg.TextBlockIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "TextBlock",
+      children: [{ type: "text", value: "Block of text you can edit" }]
+    }
+  ],
+  order: 0
+};
+const propsMeta = {
+  props: import_text_block.props,
+  initialProps: ["tag"]
+};

package/lib/cjs/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/textarea.ws.js

@@ -0,0 +1,59 @@
+"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_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_textarea = require("./__generated__/textarea.props");
+const presetStyle = {
+  textarea: [
+    ...import_css_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_svg.FormTextAreaIcon,
+  presetStyle,
+  order: 4,
+  states: [
+    ...import_react_sdk.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/code-text.js

@@ -0,0 +1,22 @@
+import {
+  forwardRef,
+  createElement
+} from "react";
+import { cssVars } from "@webstudio-is/css-vars";
+const defaultTag = "code";
+const displayVarNamespace = cssVars.unique("code-display");
+const blockStyle = {
+  [cssVars.define(displayVarNamespace, true)]: "block"
+};
+const CodeText = forwardRef(
+  ({ inline = false, ...props }, ref) => {
+    const style = inline ? void 0 : blockStyle;
+    return createElement(defaultTag, { ...props, style, ref });
+  }
+);
+CodeText.displayName = "CodeText";
+export {
+  CodeText,
+  defaultTag,
+  displayVarNamespace
+};

package/lib/code-text.ws.js

@@ -0,0 +1,56 @@
+import { CodeTextIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { code } from "@webstudio-is/react-sdk/css-normalize";
+import { displayVarNamespace } from "./code-text";
+import { props } from "./__generated__/code-text.props";
+const presetStyle = {
+  code: [
+    ...code,
+    {
+      property: "display",
+      value: {
+        type: "var",
+        value: displayVarNamespace,
+        fallbacks: [{ type: "keyword", value: "inline-block" }]
+      }
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "unit", value: 0.2, unit: "em" }
+    },
+    {
+      property: "paddingRight",
+      value: { type: "unit", value: 0.2, unit: "em" }
+    },
+    {
+      property: "backgroundColor",
+      value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
+    }
+  ]
+};
+const meta = {
+  category: "general",
+  type: "rich-text",
+  label: "Code Text",
+  icon: CodeTextIcon,
+  states: defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "CodeText",
+      children: [{ type: "text", value: "Code you can edit" }]
+    }
+  ],
+  order: 8
+};
+const propsMeta = {
+  props,
+  initialProps: ["inline", "lang", "meta"]
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components.js

@@ -0,0 +1,68 @@
+import { Slot } from "./slot";
+import { Fragment } from "./fragment";
+import { HtmlEmbed } from "./html-embed";
+import { Body } from "./body";
+import { Box } from "./box";
+import { TextBlock } from "./text-block";
+import { Heading } from "./heading";
+import { Paragraph } from "./paragraph";
+import { Link } from "./link";
+import { LinkBlock } from "./link-block";
+import { RichTextLink } from "./rich-text-link";
+import { Span } from "./span";
+import { Bold } from "./bold";
+import { Italic } from "./italic";
+import { Superscript } from "./superscript";
+import { Subscript } from "./subscript";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Form } from "./form";
+import { Image } from "./image";
+import { Blockquote } from "./blockquote";
+import { List } from "./list";
+import { ListItem } from "./list-item";
+import { Separator } from "./separator";
+import { CodeText } from "./code-text";
+import { Label } from "./label";
+import { SuccessMessage } from "./success-message";
+import { ErrorMessage } from "./error-message";
+import { Textarea } from "./textarea";
+import { RadioButtonField } from "./radio-button-field";
+import { RadioButton } from "./radio-button";
+import { CheckboxField } from "./checkbox-field";
+import { Checkbox } from "./checkbox";
+export {
+  Blockquote,
+  Body,
+  Bold,
+  Box,
+  Button,
+  Checkbox,
+  CheckboxField,
+  CodeText,
+  ErrorMessage,
+  Form,
+  Fragment,
+  Heading,
+  HtmlEmbed,
+  Image,
+  Input,
+  Italic,
+  Label,
+  Link,
+  LinkBlock,
+  List,
+  ListItem,
+  Paragraph,
+  RadioButton,
+  RadioButtonField,
+  RichTextLink,
+  Separator,
+  Slot,
+  Span,
+  Subscript,
+  SuccessMessage,
+  Superscript,
+  TextBlock,
+  Textarea
+};

package/lib/error-message.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const defaultTag = "div";
+const ErrorMessage = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", { ...props, ref }));
+ErrorMessage.displayName = "ErrorMessage";
+export {
+  ErrorMessage,
+  defaultTag
+};

package/lib/error-message.ws.js

@@ -0,0 +1,20 @@
+import { BoxIcon } from "@webstudio-is/icons/svg";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/error-message.props";
+const presetStyle = {
+  div
+};
+const meta = {
+  type: "container",
+  label: "Error Message",
+  icon: BoxIcon,
+  presetStyle
+};
+const propsMeta = {
+  props,
+  initialProps: []
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/form.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const defaultTag = "form";
+const Form = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx("form", { ...props, ref, children }));
+Form.displayName = "Form";
+export {
+  Form,
+  defaultTag
+};

package/lib/form.ws.js

@@ -0,0 +1,64 @@
+import { FormIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { form } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/form.props";
+const presetStyle = {
+  form: [
+    ...form,
+    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "container",
+  label: "Form",
+  icon: FormIcon,
+  states: defaultStates,
+  presetStyle,
+  order: 0,
+  template: [
+    {
+      type: "instance",
+      component: "Form",
+      children: [
+        {
+          type: "instance",
+          component: "Label",
+          children: [{ type: "text", value: "Name" }]
+        },
+        {
+          type: "instance",
+          component: "Input",
+          props: [{ type: "string", name: "name", value: "name" }],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Label",
+          children: [{ type: "text", value: "Email" }]
+        },
+        {
+          type: "instance",
+          component: "Input",
+          props: [{ type: "string", name: "name", value: "email" }],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Button",
+          children: [{ type: "text", value: "Submit" }]
+        }
+      ]
+    }
+  ]
+};
+const propsMeta = {
+  props,
+  initialProps: []
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/fragment.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Fragment = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx("div", { ...props, ref, style: { display: "contents" } });
+});
+Fragment.displayName = "Fragment";
+export {
+  Fragment
+};

package/lib/fragment.ws.js

@@ -0,0 +1,13 @@
+const meta = {
+  type: "container",
+  label: "Fragment",
+  icon: "",
+  stylable: false
+};
+const propsMeta = {
+  props: {}
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/heading.js

@@ -0,0 +1,14 @@
+import {
+  forwardRef,
+  createElement
+} from "react";
+const defaultTag = "h1";
+const Heading = forwardRef(
+  ({ tag = defaultTag, ...props }, ref) => {
+    return createElement(tag, { ...props, ref });
+  }
+);
+Heading.displayName = "Heading";
+export {
+  Heading
+};