@webstudio-is/sdk-components-react 0.87.1 → 0.89.0

package/lib/cjs/__generated__/vimeo-spinner.props.js

@@ -23,7 +23,12 @@ __export(vimeo_spinner_props_exports, {
 module.exports = __toCommonJS(vimeo_spinner_props_exports);
 const props = {
   about: { required: false, control: "text", type: "string" },
-  accessKey: { required: false, control: "text", type: "string" },
+  accessKey: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Keyboard shortcut to activate or add focus to the element."
+  },
   "aria-activedescendant": {
     description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
     required: false,
@@ -179,7 +184,7 @@ const props = {
     type: "string"
   },
   "aria-label": {
-    description: "Defines a string value that labels the current element.\n@see aria-labelledby.",
+    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
     required: false,
     control: "text",
     type: "string"
@@ -355,20 +360,65 @@ const props = {
     control: "text",
     type: "string"
   },
-  autoCapitalize: { required: false, control: "text", type: "string" },
+  autoCapitalize: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Sets whether input is automatically capitalized when entered by user."
+  },
   autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: { required: false, control: "boolean", type: "boolean" },
+  autoFocus: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
+  },
   autoSave: { required: false, control: "text", type: "string" },
   className: { required: false, control: "text", type: "string" },
-  color: { required: false, control: "color", type: "string" },
-  content: { required: false, control: "text", type: "string" },
-  contextMenu: { required: false, control: "text", type: "string" },
+  color: {
+    required: false,
+    control: "color",
+    type: "string",
+    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
+  },
+  content: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "A value associated with http-equiv orname depending on the context."
+  },
+  contextMenu: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the ID of a menu element which willserve as the element's context menu."
+  },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  dir: { required: false, control: "text", type: "string" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  hidden: { required: false, control: "boolean", type: "boolean" },
-  id: { required: false, control: "text", type: "string" },
+  dir: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
+  },
+  draggable: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Defines whether the element can be dragged."
+  },
+  hidden: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
+  },
+  id: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
+  },
   inputMode: {
     description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
     required: false,
@@ -396,20 +446,50 @@ const props = {
   itemRef: { required: false, control: "text", type: "string" },
   itemScope: { required: false, control: "boolean", type: "boolean" },
   itemType: { required: false, control: "text", type: "string" },
-  lang: { required: false, control: "text", type: "string" },
+  lang: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the language used in the element."
+  },
   nonce: { required: false, control: "text", type: "string" },
-  placeholder: { required: false, control: "text", type: "string" },
+  placeholder: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Provides a hint to the user of what can be entered in the field."
+  },
   prefix: { required: false, control: "text", type: "string" },
   property: { required: false, control: "text", type: "string" },
   radioGroup: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
+  rel: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Specifies the relationship of the target object to the link object."
+  },
   resource: { required: false, control: "text", type: "string" },
   results: { required: false, control: "number", type: "number" },
   rev: { required: false, control: "text", type: "string" },
-  role: { required: false, control: "text", type: "string" },
+  role: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines an explicit role for an element for use by assistive technologies."
+  },
   security: { required: false, control: "text", type: "string" },
-  slot: { required: false, control: "text", type: "string" },
-  spellCheck: { required: false, control: "boolean", type: "boolean" },
+  slot: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Assigns a slot in a shadow DOM shadow tree to an element."
+  },
+  spellCheck: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether spell checking is allowed for the element."
+  },
   suppressContentEditableWarning: {
     required: false,
     control: "boolean",
@@ -420,13 +500,24 @@ const props = {
     control: "boolean",
     type: "boolean"
   },
-  tabIndex: { required: false, control: "number", type: "number" },
-  title: { required: false, control: "text", type: "string" },
+  tabIndex: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "Overrides the browser's default tab order and follows the one specified instead."
+  },
+  title: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Text to be displayed in a tooltip when hovering over the element."
+  },
   translate: {
     required: false,
     control: "radio",
     type: "string",
-    options: ["yes", "no"]
+    options: ["yes", "no"],
+    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
   },
   typeof: { required: false, control: "text", type: "string" },
   unselectable: {

package/lib/cjs/__generated__/vimeo.props.js

@@ -23,7 +23,12 @@ __export(vimeo_props_exports, {
 module.exports = __toCommonJS(vimeo_props_exports);
 const props = {
   about: { required: false, control: "text", type: "string" },
-  accessKey: { required: false, control: "text", type: "string" },
+  accessKey: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Keyboard shortcut to activate or add focus to the element."
+  },
   "aria-activedescendant": {
     description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
     required: false,
@@ -179,7 +184,7 @@ const props = {
     type: "string"
   },
   "aria-label": {
-    description: "Defines a string value that labels the current element.\n@see aria-labelledby.",
+    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
     required: false,
     control: "text",
     type: "string"
@@ -355,9 +360,19 @@ const props = {
     control: "text",
     type: "string"
   },
-  autoCapitalize: { required: false, control: "text", type: "string" },
+  autoCapitalize: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Sets whether input is automatically capitalized when entered by user."
+  },
   autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: { required: false, control: "boolean", type: "boolean" },
+  autoFocus: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
+  },
   autopause: {
     description: "Whether to pause the current video when another Vimeo video on the same page starts to play. Set this value to false to permit simultaneous playback of all the videos on the page. This option has no effect if you've disabled cookies in your browser, either through browser settings or with an extension or plugin.",
     required: false,
@@ -387,9 +402,24 @@ const props = {
     defaultValue: false
   },
   className: { required: false, control: "text", type: "string" },
-  color: { required: false, control: "color", type: "string" },
-  content: { required: false, control: "text", type: "string" },
-  contextMenu: { required: false, control: "text", type: "string" },
+  color: {
+    required: false,
+    control: "color",
+    type: "string",
+    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
+  },
+  content: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "A value associated with http-equiv orname depending on the context."
+  },
+  contextMenu: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the ID of a menu element which willserve as the element's context menu."
+  },
   controlsColor: {
     description: "A color value of the playback controls, which is normally #00ADEF. The embed settings of the video might override this value.",
     required: false,
@@ -398,7 +428,12 @@ const props = {
   },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  dir: { required: false, control: "text", type: "string" },
+  dir: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
+  },
   doNotTrack: {
     description: "Whether to prevent the player from tracking session data, including cookies. Keep in mind that setting this argument to true also blocks video stats.",
     required: false,
@@ -406,9 +441,24 @@ const props = {
     type: "boolean",
     defaultValue: false
   },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  hidden: { required: false, control: "boolean", type: "boolean" },
-  id: { required: false, control: "text", type: "string" },
+  draggable: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Defines whether the element can be dragged."
+  },
+  hidden: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
+  },
+  id: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
+  },
   inputMode: {
     description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
     required: false,
@@ -449,7 +499,12 @@ const props = {
     type: "boolean",
     defaultValue: true
   },
-  lang: { required: false, control: "text", type: "string" },
+  lang: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the language used in the element."
+  },
   loop: {
     description: "Whether to restart the video automatically after reaching the end.",
     required: false,
@@ -472,7 +527,12 @@ const props = {
     type: "boolean",
     defaultValue: false
   },
-  placeholder: { required: false, control: "text", type: "string" },
+  placeholder: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Provides a hint to the user of what can be entered in the field."
+  },
   playsinline: {
     description: "Whether the video plays inline on supported mobile devices. To force the device to play the video in fullscreen mode instead, set this value to false.",
     required: false,
@@ -491,7 +551,12 @@ const props = {
     options: ["auto", "360p", "540p", "720p", "1080p", "2k", "4k"]
   },
   radioGroup: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
+  rel: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Specifies the relationship of the target object to the link object."
+  },
   resource: { required: false, control: "text", type: "string" },
   responsive: {
     description: "Whether to return a responsive embed code, or one that provides intelligent adjustments based on viewing conditions. We recommend this option for mobile-optimized sites.",
@@ -502,7 +567,12 @@ const props = {
   },
   results: { required: false, control: "number", type: "number" },
   rev: { required: false, control: "text", type: "string" },
-  role: { required: false, control: "text", type: "string" },
+  role: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines an explicit role for an element for use by assistive technologies."
+  },
   security: { required: false, control: "text", type: "string" },
   showByline: {
     description: "Whether to display the video owner's name.",
@@ -539,7 +609,12 @@ const props = {
     type: "boolean",
     defaultValue: false
   },
-  slot: { required: false, control: "text", type: "string" },
+  slot: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Assigns a slot in a shadow DOM shadow tree to an element."
+  },
   speed: {
     description: "Whether the player displays speed controls in the preferences menu and enables the playback rate API.",
     required: false,
@@ -547,7 +622,12 @@ const props = {
     type: "boolean",
     defaultValue: false
   },
-  spellCheck: { required: false, control: "boolean", type: "boolean" },
+  spellCheck: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether spell checking is allowed for the element."
+  },
   suppressContentEditableWarning: {
     required: false,
     control: "boolean",
@@ -558,19 +638,30 @@ const props = {
     control: "boolean",
     type: "boolean"
   },
-  tabIndex: { required: false, control: "number", type: "number" },
+  tabIndex: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "Overrides the browser's default tab order and follows the one specified instead."
+  },
   texttrack: {
     description: "The text track to display with the video. Specify the text track by its language code (en), the language code and locale (en-US), or the language code and kind (en.captions). For this argument to work, the video must already have a text track of the given type; see our Help Center or Working with Text Track Uploads for more information.\nTo enable automatically generated closed captions instead, provide the value en-x-autogen. Please note that, at the present time, automatic captions are always in English.",
     required: false,
     control: "text",
     type: "string"
   },
-  title: { required: false, control: "text", type: "string" },
+  title: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Text to be displayed in a tooltip when hovering over the element."
+  },
   translate: {
     required: false,
     control: "radio",
     type: "string",
-    options: ["yes", "no"]
+    options: ["yes", "no"],
+    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
   },
   transparent: {
     description: "Whether the responsive player and transparent background are enabled.",
@@ -587,7 +678,7 @@ const props = {
     options: ["on", "off"]
   },
   url: {
-    description: "The ID or the URL of the video on Vimeo. You must supply one of these values to identify the video. When the video's privacy setting is Private, you must use the URL, and the URL must include the h parameter. For more information, see our introductory guide.",
+    description: "The ID or the URL of the video on Vimeo. You must supply one of these values to identify the video. When the video's privacy setting is Private, you must use the URL, and the URL must include the h parameter. For more information, see Vimeo\u2019s introductory guide.",
     required: false,
     control: "text",
     type: "string"

package/lib/cjs/blockquote.ws.js

@@ -77,6 +77,7 @@ const meta = {
   category: "text",
   type: "container",
   label: "Blockquote",
+  description: "Use to style a quote from an external source like an article or book.",
   icon: import_svg.BlockquoteIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,
@@ -91,5 +92,5 @@ const meta = {
 };
 const propsMeta = {
   props: import_blockquote.props,
-  initialProps: ["id"]
+  initialProps: ["id", "cite"]
 };

package/lib/cjs/box.ws.js

@@ -42,6 +42,7 @@ const meta = {
   category: "general",
   type: "container",
   label: "Box",
+  description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
   icon: import_svg.BoxIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,

package/lib/cjs/button.ws.js

@@ -34,6 +34,7 @@ const meta = {
   type: "container",
   invalidAncestors: ["Button"],
   label: "Button",
+  description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that\u2019s what a link is used for.",
   icon: import_svg.ButtonElementIcon,
   presetStyle,
   states: [

package/lib/cjs/checkbox.ws.js

@@ -40,6 +40,7 @@ const meta = {
   invalidAncestors: ["Button"],
   type: "control",
   label: "Checkbox",
+  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their \u201CName\u201D properties. Unlike radios, any number of checkboxes in a group can be checked.",
   icon: import_svg.CheckboxCheckedIcon,
   presetStyle,
   order: 6,

package/lib/cjs/code-text.js

@@ -19,21 +19,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var code_text_exports = {};
 __export(code_text_exports, {
   CodeText: () => CodeText,
-  defaultTag: () => defaultTag,
-  displayVarNamespace: () => displayVarNamespace
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(code_text_exports);
 var import_react = require("react");
-var import_css_vars = require("@webstudio-is/css-vars");
 const defaultTag = "code";
-const displayVarNamespace = import_css_vars.cssVars.define("code-display");
-const blockStyle = {
-  [import_css_vars.cssVars.define(displayVarNamespace)]: "block"
-};
-const CodeText = (0, import_react.forwardRef)(
-  ({ inline = false, ...props }, ref) => {
-    const style = inline ? void 0 : blockStyle;
-    return (0, import_react.createElement)(defaultTag, { ...props, style, ref });
-  }
-);
+const CodeText = (0, import_react.forwardRef)((props, ref) => {
+  return (0, import_react.createElement)(defaultTag, { ...props, ref });
+});
 CodeText.displayName = "CodeText";

package/lib/cjs/code-text.ws.js

@@ -25,18 +25,17 @@ module.exports = __toCommonJS(code_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_code_text = require("./code-text");
-var import_code_text2 = require("./__generated__/code-text.props");
+var import_code_text = require("./__generated__/code-text.props");
 const presetStyle = {
   code: [
     ...import_css_normalize.code,
     {
       property: "display",
-      value: {
-        type: "var",
-        value: import_code_text.displayVarNamespace,
-        fallbacks: [{ type: "keyword", value: "inline-block" }]
-      }
+      value: { type: "keyword", value: "block" }
+    },
+    {
+      property: "whiteSpace",
+      value: { type: "keyword", value: "pre-wrap" }
     },
     {
       property: "paddingLeft",
@@ -56,7 +55,9 @@ const meta = {
   category: "general",
   type: "container",
   label: "Code Text",
+  description: "Use this component when you want to display code as text on the page.",
   icon: import_svg.CodeTextIcon,
+  invalidAncestors: ["CodeText"],
   states: import_react_sdk.defaultStates,
   presetStyle,
   template: [
@@ -69,6 +70,6 @@ const meta = {
   order: 8
 };
 const propsMeta = {
-  props: import_code_text2.props,
-  initialProps: ["id", "inline", "lang", "meta"]
+  props: import_code_text.props,
+  initialProps: ["id", "lang"]
 };

package/lib/cjs/form.ws.js

@@ -37,6 +37,7 @@ const meta = {
   type: "container",
   invalidAncestors: ["Form"],
   label: "Form",
+  description: "Collect information from your users using validation rules.",
   icon: import_svg.FormIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,

package/lib/cjs/heading.ws.js

@@ -38,7 +38,9 @@ const meta = {
   category: "text",
   type: "container",
   label: "Heading",
+  description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
   icon: import_svg.HeadingIcon,
+  invalidAncestors: ["Heading"],
   states: import_react_sdk.defaultStates,
   presetStyle,
   template: [

package/lib/cjs/html-embed.ws.js

@@ -28,6 +28,7 @@ const meta = {
   category: "general",
   type: "embed",
   label: "HTML Embed",
+  description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: import_svg.EmbedIcon,
   stylable: false,
   order: 7

package/lib/cjs/image.ws.js

@@ -47,6 +47,7 @@ const meta = {
   category: "media",
   type: "embed",
   label: "Image",
+  description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
   icon: import_svg.ImageIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,

package/lib/cjs/input.ws.js

@@ -40,6 +40,7 @@ const meta = {
   invalidAncestors: ["Button"],
   type: "control",
   label: "Text Input",
+  description: "A single-line text input for collecting string data from your users.",
   icon: import_svg.FormTextFieldIcon,
   presetStyle,
   order: 3,

package/lib/cjs/label.ws.js

@@ -34,7 +34,7 @@ const presetStyle = {
 };
 const meta = {
   category: "forms",
-  invalidAncestors: ["Button"],
+  invalidAncestors: ["Button", "Label"],
   type: "container",
   label: "Input Label",
   icon: import_svg.LabelIcon,

package/lib/cjs/link.ws.js

@@ -43,7 +43,9 @@ const meta = {
   category: "general",
   type: "container",
   label: "Link",
+  description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
   icon: import_svg.LinkIcon,
+  invalidAncestors: ["Link"],
   presetStyle,
   order: 1,
   states: [

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

@@ -34,6 +34,7 @@ const meta = {
   type: "container",
   requiredAncestors: ["List"],
   label: "List Item",
+  description: "Adds a new item to an existing list.",
   icon: import_svg.ListItemIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,

package/lib/cjs/list.ws.js

@@ -62,6 +62,7 @@ const meta = {
   category: "general",
   type: "container",
   label: "List",
+  description: "Groups content, like links in a menu or steps in a recipe.",
   icon: import_svg.ListIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,

package/lib/cjs/paragraph.ws.js

@@ -33,7 +33,9 @@ const meta = {
   category: "text",
   type: "container",
   label: "Paragraph",
+  description: "A container for multi-line text.",
   icon: import_svg.TextAlignLeftIcon,
+  invalidAncestors: ["Paragraph"],
   states: import_react_sdk.defaultStates,
   presetStyle,
   template: [

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

@@ -40,6 +40,7 @@ const meta = {
   invalidAncestors: ["Button"],
   type: "control",
   label: "Radio",
+  description: "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their \u201CName\u201D properties.",
   icon: import_svg.RadioCheckedIcon,
   presetStyle,
   order: 5,

package/lib/cjs/separator.ws.js

@@ -59,6 +59,7 @@ const meta = {
   category: "general",
   type: "embed",
   label: "Separator",
+  description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: import_svg.DashIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,

package/lib/cjs/text.ws.js

@@ -39,6 +39,7 @@ const meta = {
   category: "text",
   type: "container",
   label: "Text",
+  description: "A generic container for any text content that is not a heading or a link.",
   icon: import_svg.TextIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,