@webstudio-is/sdk-components-react 0.72.0 → 0.73.0

package/lib/cjs/{text-block.ws.js → text.ws.js}

@@ -16,16 +16,16 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var text_block_ws_exports = {};
-__export(text_block_ws_exports, {
+var text_ws_exports = {};
+__export(text_ws_exports, {
   meta: () => meta,
   propsMeta: () => propsMeta
 });
-module.exports = __toCommonJS(text_block_ws_exports);
+module.exports = __toCommonJS(text_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");
+var import_text = require("./__generated__/text.props");
 const presetStyle = {
   div: [
     ...import_css_normalize.div,
@@ -37,21 +37,21 @@ const presetStyle = {
 };
 const meta = {
   category: "text",
-  type: "rich-text",
-  label: "Text Block",
-  icon: import_svg.TextBlockIcon,
+  type: "container",
+  label: "Text",
+  icon: import_svg.TextIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,
   template: [
     {
       type: "instance",
-      component: "TextBlock",
-      children: [{ type: "text", value: "Block of text you can edit" }]
+      component: "Text",
+      children: [{ type: "text", value: "The text you can edit" }]
     }
   ],
   order: 0
 };
 const propsMeta = {
-  props: import_text_block.props,
+  props: import_text.props,
   initialProps: ["tag"]
 };

package/lib/cjs/vimeo.ws.js

@@ -65,7 +65,7 @@ const meta = {
               value: { type: "keyword", value: "absolute" }
             },
             {
-              property: "objectPosition",
+              property: "objectFit",
               value: { type: "keyword", value: "cover" }
             },
             {
@@ -103,6 +103,11 @@ const meta = {
               type: "string",
               name: "alt",
               value: "Vimeo video preview image"
+            },
+            {
+              type: "string",
+              name: "sizes",
+              value: "100vw"
             }
           ]
         },

package/lib/code-text.ws.js

@@ -32,7 +32,7 @@ const presetStyle = {
 };
 const meta = {
   category: "general",
-  type: "rich-text",
+  type: "container",
   label: "Code Text",
   icon: CodeTextIcon,
   states: defaultStates,

package/lib/components.js

@@ -3,11 +3,10 @@ import { Fragment } from "./fragment";
 import { HtmlEmbed } from "./html-embed";
 import { Body } from "./body";
 import { Box } from "./box";
-import { TextBlock } from "./text-block";
+import { Text } from "./text";
 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";
@@ -27,9 +26,7 @@ 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";
 import { Vimeo } from "./vimeo";
 import { VimeoPreviewImage } from "./vimeo-preview-image";
@@ -42,7 +39,6 @@ export {
   Box,
   Button,
   Checkbox,
-  CheckboxField,
   CodeText,
   ErrorMessage,
   Form,
@@ -54,12 +50,10 @@ export {
   Italic,
   Label,
   Link,
-  LinkBlock,
   List,
   ListItem,
   Paragraph,
   RadioButton,
-  RadioButtonField,
   RichTextLink,
   Separator,
   Slot,
@@ -67,7 +61,7 @@ export {
   Subscript,
   SuccessMessage,
   Superscript,
-  TextBlock,
+  Text,
   Textarea,
   Vimeo,
   VimeoPlayButton,

package/lib/heading.ws.js

@@ -14,7 +14,7 @@ const presetStyle = {
 };
 const meta = {
   category: "text",
-  type: "rich-text",
+  type: "container",
   label: "Heading",
   icon: HeadingIcon,
   states: defaultStates,

package/lib/image.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import {
   forwardRef,
-  useMemo
+  useMemo,
+  useContext
 } from "react";
 import {
   Image as WebstudioImage,
@@ -10,7 +11,7 @@ import {
 import {
   usePropAsset,
   getInstanceIdFromComponentProps,
-  getParams
+  ReactSdkContext
 } from "@webstudio-is/react-sdk";
 const defaultTag = "img";
 const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
@@ -38,11 +39,11 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
 </svg>`)}`;
 const Image = forwardRef(
   (props, ref) => {
+    const { imageBaseUrl } = useContext(ReactSdkContext);
     const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
     const loader = useMemo(() => {
-      const params = getParams();
-      return createImageLoader({ imageBaseUrl: params.imageBaseUrl });
-    }, []);
+      return createImageLoader({ imageBaseUrl });
+    }, [imageBaseUrl]);
     const src = asset?.name ?? props.src;
     if (asset == null || loader == null) {
       return /* @__PURE__ */ jsx("img", { ...props, src: src || imagePlaceholderSvg, ref }, src);

package/lib/image.ws.js

@@ -29,7 +29,6 @@ const meta = {
   presetStyle,
   order: 0
 };
-const { loader, ...publicProps } = props;
 const propsOverrides = {
   src: {
     type: "string",
@@ -40,7 +39,7 @@ const propsOverrides = {
 };
 const propsMeta = {
   props: {
-    ...publicProps,
+    ...props,
     ...propsOverrides
   },
   initialProps: ["src", "width", "height", "alt", "loading"]

package/lib/label.ws.js

@@ -1,4 +1,4 @@
-import { TextBlockIcon } from "@webstudio-is/icons/svg";
+import { TextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "@webstudio-is/react-sdk";
@@ -12,9 +12,9 @@ const presetStyle = {
 };
 const meta = {
   category: "forms",
-  type: "rich-text",
+  type: "container",
   label: "Input Label",
-  icon: TextBlockIcon,
+  icon: TextIcon,
   states: defaultStates,
   presetStyle,
   order: 2,
@@ -30,10 +30,7 @@ const propsMeta = {
   props: {
     ...props,
     htmlFor: {
-      required: false,
-      control: "text",
-      type: "string",
-      rows: 0,
+      ...props.htmlFor,
       label: "For"
     }
   },

package/lib/link.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useContext } from "react";
 import {
   usePropUrl,
   getInstanceIdFromComponentProps,
-  getParams
+  ReactSdkContext
 } from "@webstudio-is/react-sdk";
 const defaultTag = "a";
 const Link = forwardRef((props, ref) => {
+  const { assetBaseUrl } = useContext(ReactSdkContext);
   const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-  const { assetBaseUrl } = getParams();
   let url = "#";
   switch (href?.type) {
     case "page":

package/lib/link.ws.js

@@ -19,8 +19,8 @@ const presetStyle = {
 };
 const meta = {
   category: "general",
-  type: "rich-text",
-  label: "Link Text",
+  type: "container",
+  label: "Link",
   icon: LinkIcon,
   presetStyle,
   order: 1,

package/lib/list-item.ws.js

@@ -9,7 +9,7 @@ const presetStyle = {
 };
 const meta = {
   category: "general",
-  type: "rich-text",
+  type: "container",
   requiredAncestors: ["List"],
   label: "List Item",
   icon: ListItemIcon,

package/lib/metas.js

@@ -3,74 +3,68 @@ import { meta as meta2 } from "./fragment.ws";
 import { meta as meta3 } from "./html-embed.ws";
 import { meta as meta4 } from "./body.ws";
 import { meta as meta5 } from "./box.ws";
-import { meta as meta6 } from "./text-block.ws";
+import { meta as meta6 } from "./text.ws";
 import { meta as meta7 } from "./heading.ws";
 import { meta as meta8 } from "./paragraph.ws";
 import { meta as meta9 } from "./link.ws";
-import { meta as meta10 } from "./link-block.ws";
-import { meta as meta11 } from "./rich-text-link.ws";
-import { meta as meta12 } from "./span.ws";
-import { meta as meta13 } from "./bold.ws";
-import { meta as meta14 } from "./italic.ws";
-import { meta as meta15 } from "./superscript.ws";
-import { meta as meta16 } from "./subscript.ws";
-import { meta as meta17 } from "./button.ws";
-import { meta as meta18 } from "./input.ws";
-import { meta as meta19 } from "./form.ws";
-import { meta as meta20 } from "./image.ws";
-import { meta as meta21 } from "./blockquote.ws";
-import { meta as meta22 } from "./list.ws";
-import { meta as meta23 } from "./list-item.ws";
-import { meta as meta24 } from "./separator.ws";
-import { meta as meta25 } from "./code-text.ws";
-import { meta as meta26 } from "./label.ws";
-import { meta as meta27 } from "./success-message.ws";
-import { meta as meta28 } from "./error-message.ws";
-import { meta as meta29 } from "./textarea.ws";
-import { meta as meta30 } from "./radio-button-field.ws";
-import { meta as meta31 } from "./radio-button.ws";
-import { meta as meta32 } from "./checkbox-field.ws";
-import { meta as meta33 } from "./checkbox.ws";
-import { meta as meta34 } from "./vimeo.ws";
-import { meta as meta35 } from "./vimeo-preview-image.ws";
-import { meta as meta36 } from "./vimeo-play-button.ws";
-import { meta as meta37 } from "./vimeo-spinner.ws";
+import { meta as meta10 } from "./rich-text-link.ws";
+import { meta as meta11 } from "./span.ws";
+import { meta as meta12 } from "./bold.ws";
+import { meta as meta13 } from "./italic.ws";
+import { meta as meta14 } from "./superscript.ws";
+import { meta as meta15 } from "./subscript.ws";
+import { meta as meta16 } from "./button.ws";
+import { meta as meta17 } from "./input.ws";
+import { meta as meta18 } from "./form.ws";
+import { meta as meta19 } from "./image.ws";
+import { meta as meta20 } from "./blockquote.ws";
+import { meta as meta21 } from "./list.ws";
+import { meta as meta22 } from "./list-item.ws";
+import { meta as meta23 } from "./separator.ws";
+import { meta as meta24 } from "./code-text.ws";
+import { meta as meta25 } from "./label.ws";
+import { meta as meta26 } from "./success-message.ws";
+import { meta as meta27 } from "./error-message.ws";
+import { meta as meta28 } from "./textarea.ws";
+import { meta as meta29 } from "./radio-button.ws";
+import { meta as meta30 } from "./checkbox.ws";
+import { meta as meta31 } from "./vimeo.ws";
+import { meta as meta32 } from "./vimeo-preview-image.ws";
+import { meta as meta33 } from "./vimeo-play-button.ws";
+import { meta as meta34 } from "./vimeo-spinner.ws";
 export {
-  meta21 as Blockquote,
+  meta20 as Blockquote,
   meta4 as Body,
-  meta13 as Bold,
+  meta12 as Bold,
   meta5 as Box,
-  meta17 as Button,
-  meta33 as Checkbox,
-  meta32 as CheckboxField,
-  meta25 as CodeText,
-  meta28 as ErrorMessage,
-  meta19 as Form,
+  meta16 as Button,
+  meta30 as Checkbox,
+  meta24 as CodeText,
+  meta27 as ErrorMessage,
+  meta18 as Form,
   meta2 as Fragment,
   meta7 as Heading,
   meta3 as HtmlEmbed,
-  meta20 as Image,
-  meta18 as Input,
-  meta14 as Italic,
-  meta26 as Label,
+  meta19 as Image,
+  meta17 as Input,
+  meta13 as Italic,
+  meta25 as Label,
   meta9 as Link,
-  meta10 as LinkBlock,
-  meta22 as List,
-  meta23 as ListItem,
+  meta21 as List,
+  meta22 as ListItem,
   meta8 as Paragraph,
-  meta31 as RadioButton,
-  meta30 as RadioButtonField,
-  meta11 as RichTextLink,
-  meta24 as Separator,
+  meta29 as RadioButton,
+  meta10 as RichTextLink,
+  meta23 as Separator,
   meta as Slot,
-  meta12 as Span,
-  meta16 as Subscript,
-  meta27 as SuccessMessage,
-  meta15 as Superscript,
-  meta6 as TextBlock,
-  meta29 as Textarea,
-  meta34 as Vimeo,
-  meta36 as VimeoPlayButton,
-  meta35 as VimeoPreviewImage,
-  meta37 as VimeoSpinner
+  meta11 as Span,
+  meta15 as Subscript,
+  meta26 as SuccessMessage,
+  meta14 as Superscript,
+  meta6 as Text,
+  meta28 as Textarea,
+  meta31 as Vimeo,
+  meta33 as VimeoPlayButton,
+  meta32 as VimeoPreviewImage,
+  meta34 as VimeoSpinner
 };

package/lib/paragraph.ws.js

@@ -9,7 +9,7 @@ const presetStyle = {
 };
 const meta = {
   category: "text",
-  type: "rich-text",
+  type: "container",
   label: "Paragraph",
   icon: TextAlignLeftIcon,
   states: defaultStates,
@@ -18,7 +18,7 @@ const meta = {
     {
       type: "instance",
       component: "Paragraph",
-      children: [{ type: "text", value: "Pragraph you can edit" }]
+      children: [{ type: "text", value: "Paragraph you can edit" }]
     }
   ],
   order: 2

package/lib/props.js

@@ -3,74 +3,68 @@ import { propsMeta as propsMeta2 } from "./fragment.ws";
 import { propsMeta as propsMeta3 } from "./html-embed.ws";
 import { propsMeta as propsMeta4 } from "./body.ws";
 import { propsMeta as propsMeta5 } from "./box.ws";
-import { propsMeta as propsMeta6 } from "./text-block.ws";
+import { propsMeta as propsMeta6 } from "./text.ws";
 import { propsMeta as propsMeta7 } from "./heading.ws";
 import { propsMeta as propsMeta8 } from "./paragraph.ws";
 import { propsMeta as propsMeta9 } from "./link.ws";
-import { propsMeta as propsMeta10 } from "./link-block.ws";
-import { propsMeta as propsMeta11 } from "./rich-text-link.ws";
-import { propsMeta as propsMeta12 } from "./span.ws";
-import { propsMeta as propsMeta13 } from "./bold.ws";
-import { propsMeta as propsMeta14 } from "./italic.ws";
-import { propsMeta as propsMeta15 } from "./superscript.ws";
-import { propsMeta as propsMeta16 } from "./subscript.ws";
-import { propsMeta as propsMeta17 } from "./button.ws";
-import { propsMeta as propsMeta18 } from "./input.ws";
-import { propsMeta as propsMeta19 } from "./form.ws";
-import { propsMeta as propsMeta20 } from "./image.ws";
-import { propsMeta as propsMeta21 } from "./blockquote.ws";
-import { propsMeta as propsMeta22 } from "./list.ws";
-import { propsMeta as propsMeta23 } from "./list-item.ws";
-import { propsMeta as propsMeta24 } from "./separator.ws";
-import { propsMeta as propsMeta25 } from "./code-text.ws";
-import { propsMeta as propsMeta26 } from "./label.ws";
-import { propsMeta as propsMeta27 } from "./success-message.ws";
-import { propsMeta as propsMeta28 } from "./error-message.ws";
-import { propsMeta as propsMeta29 } from "./textarea.ws";
-import { propsMeta as propsMeta30 } from "./radio-button-field.ws";
-import { propsMeta as propsMeta31 } from "./radio-button.ws";
-import { propsMeta as propsMeta32 } from "./checkbox-field.ws";
-import { propsMeta as propsMeta33 } from "./checkbox.ws";
-import { propsMeta as propsMeta34 } from "./vimeo.ws";
-import { propsMeta as propsMeta35 } from "./vimeo-preview-image.ws";
-import { propsMeta as propsMeta36 } from "./vimeo-play-button.ws";
-import { propsMeta as propsMeta37 } from "./vimeo-spinner.ws";
+import { propsMeta as propsMeta10 } from "./rich-text-link.ws";
+import { propsMeta as propsMeta11 } from "./span.ws";
+import { propsMeta as propsMeta12 } from "./bold.ws";
+import { propsMeta as propsMeta13 } from "./italic.ws";
+import { propsMeta as propsMeta14 } from "./superscript.ws";
+import { propsMeta as propsMeta15 } from "./subscript.ws";
+import { propsMeta as propsMeta16 } from "./button.ws";
+import { propsMeta as propsMeta17 } from "./input.ws";
+import { propsMeta as propsMeta18 } from "./form.ws";
+import { propsMeta as propsMeta19 } from "./image.ws";
+import { propsMeta as propsMeta20 } from "./blockquote.ws";
+import { propsMeta as propsMeta21 } from "./list.ws";
+import { propsMeta as propsMeta22 } from "./list-item.ws";
+import { propsMeta as propsMeta23 } from "./separator.ws";
+import { propsMeta as propsMeta24 } from "./code-text.ws";
+import { propsMeta as propsMeta25 } from "./label.ws";
+import { propsMeta as propsMeta26 } from "./success-message.ws";
+import { propsMeta as propsMeta27 } from "./error-message.ws";
+import { propsMeta as propsMeta28 } from "./textarea.ws";
+import { propsMeta as propsMeta29 } from "./radio-button.ws";
+import { propsMeta as propsMeta30 } from "./checkbox.ws";
+import { propsMeta as propsMeta31 } from "./vimeo.ws";
+import { propsMeta as propsMeta32 } from "./vimeo-preview-image.ws";
+import { propsMeta as propsMeta33 } from "./vimeo-play-button.ws";
+import { propsMeta as propsMeta34 } from "./vimeo-spinner.ws";
 export {
-  propsMeta21 as Blockquote,
+  propsMeta20 as Blockquote,
   propsMeta4 as Body,
-  propsMeta13 as Bold,
+  propsMeta12 as Bold,
   propsMeta5 as Box,
-  propsMeta17 as Button,
-  propsMeta33 as Checkbox,
-  propsMeta32 as CheckboxField,
-  propsMeta25 as CodeText,
-  propsMeta28 as ErrorMessage,
-  propsMeta19 as Form,
+  propsMeta16 as Button,
+  propsMeta30 as Checkbox,
+  propsMeta24 as CodeText,
+  propsMeta27 as ErrorMessage,
+  propsMeta18 as Form,
   propsMeta2 as Fragment,
   propsMeta7 as Heading,
   propsMeta3 as HtmlEmbed,
-  propsMeta20 as Image,
-  propsMeta18 as Input,
-  propsMeta14 as Italic,
-  propsMeta26 as Label,
+  propsMeta19 as Image,
+  propsMeta17 as Input,
+  propsMeta13 as Italic,
+  propsMeta25 as Label,
   propsMeta9 as Link,
-  propsMeta10 as LinkBlock,
-  propsMeta22 as List,
-  propsMeta23 as ListItem,
+  propsMeta21 as List,
+  propsMeta22 as ListItem,
   propsMeta8 as Paragraph,
-  propsMeta31 as RadioButton,
-  propsMeta30 as RadioButtonField,
-  propsMeta11 as RichTextLink,
-  propsMeta24 as Separator,
+  propsMeta29 as RadioButton,
+  propsMeta10 as RichTextLink,
+  propsMeta23 as Separator,
   propsMeta as Slot,
-  propsMeta12 as Span,
-  propsMeta16 as Subscript,
-  propsMeta27 as SuccessMessage,
-  propsMeta15 as Superscript,
-  propsMeta6 as TextBlock,
-  propsMeta29 as Textarea,
-  propsMeta34 as Vimeo,
-  propsMeta36 as VimeoPlayButton,
-  propsMeta35 as VimeoPreviewImage,
-  propsMeta37 as VimeoSpinner
+  propsMeta11 as Span,
+  propsMeta15 as Subscript,
+  propsMeta26 as SuccessMessage,
+  propsMeta14 as Superscript,
+  propsMeta6 as Text,
+  propsMeta28 as Textarea,
+  propsMeta31 as Vimeo,
+  propsMeta33 as VimeoPlayButton,
+  propsMeta32 as VimeoPreviewImage,
+  propsMeta34 as VimeoSpinner
 };

package/lib/radio-button.ws.js

@@ -14,8 +14,9 @@ const presetStyle = {
   ]
 };
 const meta = {
+  category: "forms",
   type: "control",
-  label: "Radio Input",
+  label: "Radio",
   icon: RadioCheckedIcon,
   presetStyle,
   order: 5,
@@ -28,6 +29,23 @@ const meta = {
     { selector: ":enabled", label: "Enabled" },
     { selector: ":read-only", label: "Read Only" },
     { selector: ":read-write", label: "Read Write" }
+  ],
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      label: "Radio Field",
+      children: [
+        { type: "instance", component: "RadioButton", props: [], children: [] },
+        {
+          type: "instance",
+          component: "Text",
+          label: "Radio Label",
+          props: [{ type: "string", name: "tag", value: "span" }],
+          children: [{ type: "text", value: "Radio" }]
+        }
+      ]
+    }
   ]
 };
 const propsMeta = {

package/lib/span.ws.js

@@ -9,7 +9,7 @@ const presetStyle = {
 };
 const meta = {
   type: "rich-text-child",
-  label: "Styled Text",
+  label: "Text",
   icon: PaintBrushIcon,
   states: defaultStates,
   presetStyle

package/lib/{text-block.js → text.js}

@@ -3,13 +3,13 @@ import {
   forwardRef
 } from "react";
 const defaultTag = "div";
-const TextBlock = forwardRef(
+const Text = forwardRef(
   ({ tag = defaultTag, ...props }, ref) => {
     return createElement(tag, { ...props, ref });
   }
 );
-TextBlock.displayName = "TextBlock";
+Text.displayName = "Text";
 export {
-  TextBlock,
+  Text,
   defaultTag
 };

package/lib/{text-block.ws.js → text.ws.js}

@@ -1,9 +1,9 @@
-import { TextBlockIcon } from "@webstudio-is/icons/svg";
+import { TextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "@webstudio-is/react-sdk";
 import { div } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/text-block.props";
+import { props } from "./__generated__/text.props";
 const presetStyle = {
   div: [
     ...div,
@@ -15,16 +15,16 @@ const presetStyle = {
 };
 const meta = {
   category: "text",
-  type: "rich-text",
-  label: "Text Block",
-  icon: TextBlockIcon,
+  type: "container",
+  label: "Text",
+  icon: TextIcon,
   states: defaultStates,
   presetStyle,
   template: [
     {
       type: "instance",
-      component: "TextBlock",
-      children: [{ type: "text", value: "Block of text you can edit" }]
+      component: "Text",
+      children: [{ type: "text", value: "The text you can edit" }]
     }
   ],
   order: 0

package/lib/types/button.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentProps } from "react";
+/// <reference types="react" />
 export declare const defaultTag = "button";
-type ButtonProps = ComponentProps<typeof defaultTag> & {
-    innerText?: string;
-};
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export {};
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;