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

package/lib/cjs/textarea.ws.js

@@ -41,6 +41,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: import_svg.FormTextAreaIcon,
   presetStyle,
   order: 4,

package/lib/cjs/vimeo.ws.js

@@ -34,6 +34,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: import_svg.VimeoIcon,
   states: import_react_sdk.defaultStates,

package/lib/code-text.js

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

package/lib/code-text.ws.js

@@ -3,18 +3,17 @@ 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" }]
-      }
+      value: { type: "keyword", value: "block" }
+    },
+    {
+      property: "whiteSpace",
+      value: { type: "keyword", value: "pre-wrap" }
     },
     {
       property: "paddingLeft",
@@ -34,7 +33,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: CodeTextIcon,
+  invalidAncestors: ["CodeText"],
   states: defaultStates,
   presetStyle,
   template: [
@@ -48,7 +49,7 @@ const meta = {
 };
 const propsMeta = {
   props,
-  initialProps: ["id", "inline", "lang", "meta"]
+  initialProps: ["id", "lang"]
 };
 export {
   meta,

package/lib/form.ws.js

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

package/lib/heading.ws.js

@@ -16,7 +16,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: HeadingIcon,
+  invalidAncestors: ["Heading"],
   states: defaultStates,
   presetStyle,
   template: [

package/lib/html-embed.ws.js

@@ -4,6 +4,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: EmbedIcon,
   stylable: false,
   order: 7

package/lib/image.ws.js

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

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/code-text.d.ts

@@ -1,9 +1,3 @@
-import { type ComponentProps } from "react";
+/// <reference types="react" />
 export declare const defaultTag = "code";
-export declare const displayVarNamespace: "--code-display-w7ovd";
-type Props = Omit<ComponentProps<typeof defaultTag>, "inline"> & {
-    inline?: boolean;
-    meta?: string;
-};
-export declare const CodeText: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLElement>>;
-export {};
+export declare const CodeText: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;

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,7 +1,8 @@
 import { type ComponentProps } from "react";
 export declare const defaultTag = "div";
 type Props = ComponentProps<typeof defaultTag> & {
-    tag?: "div" | "span" | "figcaption";
+    /** 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>>;
 export {};

package/lib/types/vimeo-preview-image.d.ts

@@ -272,12 +272,12 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     height?: string | number | undefined;
     width?: string | number | undefined;
-    alt?: string | undefined;
     src?: string | undefined;
-    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+    alt?: string | undefined;
     referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     quality?: number | undefined;
     sizes?: string | undefined;
+    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     decoding?: "auto" | "async" | "sync" | undefined;
     loading?: "eager" | "lazy" | undefined;
     srcSet?: string | undefined;

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.87.1",
+  "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.87.1",
-    "@webstudio-is/generate-arg-types": "^0.87.1",
-    "@webstudio-is/icons": "^0.87.1",
-    "@webstudio-is/image": "^0.87.1",
-    "@webstudio-is/react-sdk": "^0.87.1"
+    "@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: {