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

package/src/__generated__/textarea.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,25 +387,99 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
-  autoCapitalize: { required: false, control: "text", type: "string" },
-  autoComplete: { required: false, control: "text", type: "string" },
+  autoCapitalize: {
+    required: false,
+    control: "text",
+    type: "string",
+    description:
+      "Sets whether input is automatically capitalized when entered by user.",
+  },
+  autoComplete: {
+    required: false,
+    control: "text",
+    type: "string",
+    description:
+      "Indicates whether controls in this form can by default have their valuesautomatically completed by the browser.",
+  },
   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" },
-  cols: { required: false, control: "number", type: "number" },
-  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.",
+  },
+  cols: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "Defines the number of columns in a textarea.",
+  },
+  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" },
+  dir: {
+    required: false,
+    control: "text",
+    type: "string",
+    description:
+      "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)",
+  },
   dirName: { required: false, control: "text", type: "string" },
-  disabled: { required: false, control: "boolean", type: "boolean" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  form: { required: false, control: "text", type: "string" },
-  hidden: { required: false, control: "boolean", type: "boolean" },
-  id: { required: false, control: "text", type: "string" },
+  disabled: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether the user can interact with the element.",
+  },
+  draggable: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Defines whether the element can be dragged.",
+  },
+  form: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Indicates the form that is the owner of the element.",
+  },
+  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",
@@ -430,26 +509,93 @@ 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" },
-  maxLength: { required: false, control: "number", type: "number" },
-  minLength: { required: false, control: "number", type: "number" },
-  name: { required: false, control: "text", type: "string" },
+  lang: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the language used in the element.",
+  },
+  maxLength: {
+    required: false,
+    control: "number",
+    type: "number",
+    description:
+      "Defines the maximum number of characters allowed in the element.",
+  },
+  minLength: {
+    required: false,
+    control: "number",
+    type: "number",
+    description:
+      "Defines the minimum number of characters allowed in the element.",
+  },
+  name: {
+    required: false,
+    control: "text",
+    type: "string",
+    description:
+      "This name is important when submitting form data to the server, as it identifies the data associated with the input. When multiple inputs share the same name attribute, they are treated as part of the same group (e.g., radio buttons or checkboxes).",
+  },
   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" },
-  readOnly: { required: false, control: "boolean", type: "boolean" },
-  rel: { required: false, control: "text", type: "string" },
-  required: { required: false, control: "boolean", type: "boolean" },
+  readOnly: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether the element can be edited.",
+  },
+  rel: {
+    required: false,
+    control: "text",
+    type: "string",
+    description:
+      "Specifies the relationship of the target object to the link object.",
+  },
+  required: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description:
+      "Indicates whether this form element must be filled before the form can be submitted.",
+  },
   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" },
-  rows: { required: false, control: "number", type: "number" },
+  role: {
+    required: false,
+    control: "text",
+    type: "string",
+    description:
+      "Defines an explicit role for an element for use by assistive technologies.",
+  },
+  rows: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "Defines the number of rows in a text area.",
+  },
   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",
@@ -460,13 +606,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: {
@@ -476,5 +636,10 @@ export const props: Record<string, PropMeta> = {
     options: ["on", "off"],
   },
   vocab: { required: false, control: "text", type: "string" },
-  wrap: { required: false, control: "text", type: "string" },
+  wrap: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Indicates whether the text should be wrapped.",
+  },
 };

package/src/__generated__/tooltip.props.ts

@@ -3,31 +3,49 @@ import type { PropMeta } from "@webstudio-is/generate-arg-types";
 export const propsTooltip: Record<string, PropMeta> = {
   delayDuration: {
     description:
-      "The duration from when the pointer enters the trigger until the tooltip gets opened. This will\noverride the prop with the same name passed to Provider.\n@defaultValue 700",
+      "The delay before the Tooltip shows after the Trigger is hovered, in milliseconds. If no value is specified, the default is 700ms",
     required: false,
     control: "number",
     type: "number",
   },
   disableHoverableContent: {
     description:
-      "When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.\n@defaultValue false",
+      "When toggled, prevents the Tooltip content from showing when the Trigger is hovered.",
     required: false,
     control: "boolean",
     type: "boolean",
   },
-  open: { required: false, control: "boolean", type: "boolean" },
+  open: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description:
+      "Show or hide the content of this component on the canvas. This will not affect the initial state of the component.",
+  },
 };
 export const propsTooltipTrigger: Record<string, PropMeta> = {};
 export const propsTooltipContent: 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.",
+  },
   align: {
     required: false,
     control: "radio",
     type: "string",
     options: ["center", "start", "end"],
+    description: "Specifies the horizontal alignment of the element.",
+  },
+  alignOffset: {
+    required: false,
+    control: "number",
+    type: "number",
+    description:
+      "The offset in pixels from the “start“ or “end“ alignment options.",
   },
-  alignOffset: { required: false, control: "number", type: "number" },
   "aria-activedescendant": {
     description:
       "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
@@ -207,7 +225,8 @@ export const propsTooltipContent: Record<string, PropMeta> = {
     type: "string",
   },
   "aria-label": {
-    description: "A more descriptive label for accessibility purpose",
+    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",
@@ -407,26 +426,79 @@ export const propsTooltipContent: Record<string, PropMeta> = {
     type: "string",
   },
   arrowPadding: { required: false, control: "number", type: "number" },
-  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" },
   avoidCollisions: { required: false, control: "boolean", type: "boolean" },
   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" },
-  dir: { required: false, control: "text", type: "string" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  hidden: { required: false, control: "boolean", type: "boolean" },
+  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.",
+  },
   hideWhenDetached: {
     required: false,
     control: "boolean",
     type: "boolean",
     defaultValue: true,
   },
-  id: { required: false, control: "text", type: "string" },
+  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",
@@ -456,32 +528,68 @@ export const propsTooltipContent: 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" },
   side: {
     required: false,
     control: "select",
     type: "string",
     options: ["top", "right", "bottom", "left"],
+    description:
+      "The preferred alignment against the Trigger. May change when collisions occur.",
   },
   sideOffset: {
     required: false,
     control: "number",
     type: "number",
     defaultValue: 4,
+    description: "The distance in pixels between the Content and the Trigger.",
+  },
+  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.",
   },
-  slot: { required: false, control: "text", type: "string" },
-  spellCheck: { required: false, control: "boolean", type: "boolean" },
   sticky: {
     required: false,
     control: "radio",
@@ -498,13 +606,27 @@ export const propsTooltipContent: 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/accordion.ws.ts

@@ -124,6 +124,8 @@ export const metaAccordion: WsComponentMeta = {
   type: "container",
   icon: AccordionIcon,
   presetStyle,
+  description:
+    "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
   template: [
     {
       type: "instance",

package/src/checkbox.ws.ts

@@ -21,6 +21,8 @@ export const metaCheckbox: WsComponentMeta = {
   order: 101,
   type: "container",
   icon: CheckboxCheckedIcon,
+  description:
+    "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
   states: [
     ...defaultStates,
     {
@@ -134,6 +136,7 @@ export const metaCheckbox: WsComponentMeta = {
 export const metaCheckboxIndicator: WsComponentMeta = {
   category: "hidden",
   type: "container",
+  detachable: false,
   icon: TriggerIcon,
   states: defaultStates,
   presetStyle: {

package/src/collapsible.ws.ts

@@ -26,6 +26,8 @@ export const metaCollapsible: WsComponentMeta = {
   type: "container",
   presetStyle,
   icon: CollapsibleIcon,
+  description:
+    "An interactive component which expands and collapses some content, triggered by a button.",
   template: [
     {
       type: "instance",

package/src/dialog.ws.tsx

@@ -102,6 +102,8 @@ export const metaDialog: WsComponentMeta = {
   type: "container",
   icon: DialogIcon,
   stylable: false,
+  description:
+    "Displays content with an overlay that covers the window, triggered by a button. Clicking the overlay will close the dialog.",
   template: [
     {
       type: "instance",

package/src/label.ws.ts

@@ -20,6 +20,8 @@ export const meta: WsComponentMeta = {
   icon: LabelIcon,
   presetStyle,
   states: defaultStates,
+  description:
+    "An accessible label to describe the purpose of an input. Match the “For” property on the label with the “ID” of the input to connect them.",
   template: [
     {
       type: "instance",

package/src/navigation-menu.ws.ts

@@ -306,6 +306,7 @@ export const metaNavigationMenu: WsComponentMeta = {
   category: "radix",
   order: 2,
   type: "container",
+  description: "A collection of links for navigating websites.",
   icon: NavigationMenuIcon,
   presetStyle,
 

package/src/popover.ws.tsx

@@ -48,6 +48,7 @@ export const metaPopover: WsComponentMeta = {
   type: "container",
   icon: PopoverIcon,
   stylable: false,
+  description: "Displays rich content in a portal, triggered by a button.",
   template: [
     {
       type: "instance",

package/src/props-descriptions.ts

@@ -0,0 +1,43 @@
+const open =
+  "Show or hide the content of this component on the canvas. This will not affect the initial state of the component.";
+
+const alignOffset =
+  "The offset in pixels from the “start“ or “end“ alignment options.";
+
+const sideOffset =
+  "The distance in pixels between the Content and the Trigger.";
+
+const side =
+  "The preferred alignment against the Trigger. May change when collisions occur.";
+
+export const propsDescriptions = {
+  Dialog: {
+    open,
+  },
+  Sheet: {
+    open,
+  },
+  Collapsible: {
+    open,
+  },
+  Popover: {
+    open,
+  },
+  PopoverContent: {
+    alignOffset,
+    sideOffset,
+    side,
+  },
+  Tooltip: {
+    open,
+    delayDuration:
+      "The delay before the Tooltip shows after the Trigger is hovered, in milliseconds. If no value is specified, the default is 700ms",
+    disableHoverableContent:
+      "When toggled, prevents the Tooltip content from showing when the Trigger is hovered.",
+  },
+  TooltipContent: {
+    alignOffset,
+    sideOffset,
+    side,
+  },
+};