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

package/lib/input.ws.js

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

package/lib/label.ws.js

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

package/lib/link.ws.js

@@ -21,7 +21,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: LinkIcon,
+  invalidAncestors: ["Link"],
   presetStyle,
   order: 1,
   states: [

package/lib/list-item.ws.js

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

package/lib/list.ws.js

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

package/lib/paragraph.ws.js

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

package/lib/radio-button.ws.js

@@ -18,6 +18,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: RadioCheckedIcon,
   presetStyle,
   order: 5,

package/lib/separator.ws.js

@@ -37,6 +37,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: DashIcon,
   states: defaultStates,
   presetStyle,

package/lib/text.ws.js

@@ -17,6 +17,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: TextIcon,
   states: defaultStates,
   presetStyle,

package/lib/textarea.ws.js

@@ -19,6 +19,7 @@ const meta = {
   category: "forms",
   type: "control",
   label: "Text Area",
+  description: "A multi-line text input for collecting longer string data from your users.",
   icon: FormTextAreaIcon,
   presetStyle,
   order: 4,

package/lib/types/box.d.ts

@@ -1,6 +1,7 @@
 import { type ComponentProps } from "react";
 export declare const defaultTag = "div";
 type Props = ComponentProps<typeof defaultTag> & {
+    /** Use this property to change the HTML tag of this element to semantically structure and describe the content of a webpage. This can be important for accessibility tools and search engine optimization. */
     tag?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure";
 };
 export declare const Box: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/types/heading.d.ts

@@ -1,6 +1,7 @@
 import { type ComponentProps } from "react";
 declare const defaultTag = "h1";
 type Props = ComponentProps<typeof defaultTag> & {
+    /** Use HTML heading levels (h1-h6) to structure content hierarchically, with h1 as the main title and subsequent levels representing sub-sections. Maintain a logical order and avoid skipping levels to ensure consistent and meaningful organization. */
     tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 };
 export declare const Heading: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/lib/types/list.d.ts

@@ -3,6 +3,7 @@ declare const unorderedTag = "ul";
 declare const orderedTag = "ol";
 export type ListTag = typeof unorderedTag | typeof orderedTag;
 type Props = ComponentProps<typeof unorderedTag> & ComponentProps<typeof orderedTag> & {
+    /** Shows numbers instead of bullets when toggled. See the “List Style Type” property under the “List Item” section in the Style panel for more options. */
     ordered?: boolean;
 };
 export declare const List: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLUListElement>>;

package/lib/types/text.d.ts

@@ -1,6 +1,7 @@
 import { type ComponentProps } from "react";
 export declare const defaultTag = "div";
 type Props = ComponentProps<typeof defaultTag> & {
+    /** Use this property to change the HTML tag of this element to semantically structure and describe the content of a webpage. This can be important for accessibility tools and search engine optimization. */
     tag?: "div" | "span" | "figcaption" | "cite";
 };
 export declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/types/vimeo.d.ts

@@ -8,7 +8,7 @@ type VimeoPlayerOptions = {
     interactive_params?: string;
     title?: boolean;
     portrait?: boolean;
-    /** 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. */
+    /** 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’s introductory guide. */
     url?: string;
     /** 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. */
     autopause?: boolean;

package/lib/vimeo.ws.js

@@ -12,6 +12,7 @@ const meta = {
   category: "media",
   type: "container",
   label: "Vimeo",
+  description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
   order: 1,
   icon: VimeoIcon,
   states: defaultStates,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.88.0",
+  "version": "0.89.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -40,11 +40,11 @@
     "@react-aria/utils": "^3.19.0",
     "colord": "^2.9.3",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/css-vars": "^0.88.0",
-    "@webstudio-is/generate-arg-types": "^0.88.0",
-    "@webstudio-is/icons": "^0.88.0",
-    "@webstudio-is/image": "^0.88.0",
-    "@webstudio-is/react-sdk": "^0.88.0"
+    "@webstudio-is/css-vars": "^0.89.0",
+    "@webstudio-is/generate-arg-types": "^0.89.0",
+    "@webstudio-is/icons": "^0.89.0",
+    "@webstudio-is/image": "^0.89.0",
+    "@webstudio-is/react-sdk": "^0.89.0"
   },
   "devDependencies": {
     "@storybook/react": "^7.2.1",

package/src/__generated__/blockquote.props.ts

@@ -2,7 +2,12 @@ import type { PropMeta } from "@webstudio-is/generate-arg-types";
 
 export const props: Record<string, PropMeta> = {
   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.",
@@ -183,7 +188,7 @@ export const props: Record<string, PropMeta> = {
   },
   "aria-label": {
     description:
-      "Defines a string value that labels the current element.\n@see aria-labelledby.",
+      "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",
@@ -382,21 +387,80 @@ export const props: Record<string, PropMeta> = {
     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" },
-  cite: { required: false, control: "text", type: "string" },
+  cite: {
+    required: false,
+    control: "text",
+    type: "string",
+    description:
+      "Contains a URI which points to the source of the quote or change.",
+  },
   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",
@@ -426,20 +490,53 @@ export const props: Record<string, PropMeta> = {
   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",
@@ -450,13 +547,27 @@ export const props: Record<string, PropMeta> = {
     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"],
+    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/src/__generated__/body.props.ts

@@ -2,7 +2,12 @@ import type { PropMeta } from "@webstudio-is/generate-arg-types";
 
 export const props: Record<string, PropMeta> = {
   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.",
@@ -183,7 +188,7 @@ export const props: Record<string, PropMeta> = {
   },
   "aria-label": {
     description:
-      "Defines a string value that labels the current element.\n@see aria-labelledby.",
+      "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",
@@ -382,20 +387,73 @@ export const props: Record<string, PropMeta> = {
     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",
@@ -425,20 +483,53 @@ export const props: Record<string, PropMeta> = {
   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",
@@ -449,13 +540,27 @@ export const props: Record<string, PropMeta> = {
     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"],
+    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: {