@webstudio-is/sdk-components-react 0.82.0 → 0.84.0

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

@@ -43,12 +43,19 @@ const props = {
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
-  "aria-busy": {
-    description: "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.",
+  "aria-braillelabel": {
+    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
     required: false,
-    control: "boolean",
-    type: "boolean"
+    control: "text",
+    type: "string"
   },
+  "aria-brailleroledescription": {
+    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-busy": { required: false, control: "boolean", type: "boolean" },
   "aria-checked": {
     description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
     required: false,
@@ -67,6 +74,12 @@ const props = {
     control: "number",
     type: "number"
   },
+  "aria-colindextext": {
+    description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-colspan": {
     description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
     required: false,
@@ -91,6 +104,12 @@ const props = {
     control: "text",
     type: "string"
   },
+  "aria-description": {
+    description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-details": {
     description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
     required: false,
@@ -281,6 +300,12 @@ const props = {
     control: "number",
     type: "number"
   },
+  "aria-rowindextext": {
+    description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-rowspan": {
     description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
     required: false,
@@ -355,9 +380,9 @@ const props = {
     control: "select",
     type: "string",
     options: [
+      "search",
       "text",
       "none",
-      "search",
       "tel",
       "url",
       "email",

package/lib/cjs/__generated__/vimeo-play-button.props.js

@@ -43,12 +43,19 @@ const props = {
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
-  "aria-busy": {
-    description: "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.",
+  "aria-braillelabel": {
+    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
     required: false,
-    control: "boolean",
-    type: "boolean"
+    control: "text",
+    type: "string"
   },
+  "aria-brailleroledescription": {
+    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-busy": { required: false, control: "boolean", type: "boolean" },
   "aria-checked": {
     description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
     required: false,
@@ -67,6 +74,12 @@ const props = {
     control: "number",
     type: "number"
   },
+  "aria-colindextext": {
+    description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-colspan": {
     description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
     required: false,
@@ -91,6 +104,12 @@ const props = {
     control: "text",
     type: "string"
   },
+  "aria-description": {
+    description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-details": {
     description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
     required: false,
@@ -281,6 +300,12 @@ const props = {
     control: "number",
     type: "number"
   },
+  "aria-rowindextext": {
+    description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-rowspan": {
     description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
     required: false,
@@ -357,9 +382,9 @@ const props = {
     control: "select",
     type: "string",
     options: [
+      "search",
       "text",
       "none",
-      "search",
       "tel",
       "url",
       "email",

package/lib/cjs/__generated__/vimeo-preview-image.props.js

@@ -44,12 +44,19 @@ const props = {
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
-  "aria-busy": {
-    description: "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.",
+  "aria-braillelabel": {
+    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
     required: false,
-    control: "boolean",
-    type: "boolean"
+    control: "text",
+    type: "string"
   },
+  "aria-brailleroledescription": {
+    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-busy": { required: false, control: "boolean", type: "boolean" },
   "aria-checked": {
     description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
     required: false,
@@ -68,6 +75,12 @@ const props = {
     control: "number",
     type: "number"
   },
+  "aria-colindextext": {
+    description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-colspan": {
     description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
     required: false,
@@ -92,6 +105,12 @@ const props = {
     control: "text",
     type: "string"
   },
+  "aria-description": {
+    description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-details": {
     description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
     required: false,
@@ -282,6 +301,12 @@ const props = {
     control: "number",
     type: "number"
   },
+  "aria-rowindextext": {
+    description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-rowspan": {
     description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
     required: false,
@@ -364,9 +389,9 @@ const props = {
     control: "select",
     type: "string",
     options: [
+      "search",
       "text",
       "none",
-      "search",
       "tel",
       "url",
       "email",

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

@@ -43,12 +43,19 @@ const props = {
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
-  "aria-busy": {
-    description: "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.",
+  "aria-braillelabel": {
+    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
     required: false,
-    control: "boolean",
-    type: "boolean"
+    control: "text",
+    type: "string"
   },
+  "aria-brailleroledescription": {
+    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-busy": { required: false, control: "boolean", type: "boolean" },
   "aria-checked": {
     description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
     required: false,
@@ -67,6 +74,12 @@ const props = {
     control: "number",
     type: "number"
   },
+  "aria-colindextext": {
+    description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-colspan": {
     description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
     required: false,
@@ -91,6 +104,12 @@ const props = {
     control: "text",
     type: "string"
   },
+  "aria-description": {
+    description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-details": {
     description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
     required: false,
@@ -281,6 +300,12 @@ const props = {
     control: "number",
     type: "number"
   },
+  "aria-rowindextext": {
+    description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-rowspan": {
     description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
     required: false,
@@ -350,9 +375,9 @@ const props = {
     control: "select",
     type: "string",
     options: [
+      "search",
       "text",
       "none",
-      "search",
       "tel",
       "url",
       "email",

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

@@ -43,12 +43,19 @@ const props = {
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
-  "aria-busy": {
-    description: "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.",
+  "aria-braillelabel": {
+    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
     required: false,
-    control: "boolean",
-    type: "boolean"
+    control: "text",
+    type: "string"
   },
+  "aria-brailleroledescription": {
+    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
+  "aria-busy": { required: false, control: "boolean", type: "boolean" },
   "aria-checked": {
     description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
     required: false,
@@ -67,6 +74,12 @@ const props = {
     control: "number",
     type: "number"
   },
+  "aria-colindextext": {
+    description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-colspan": {
     description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
     required: false,
@@ -91,6 +104,12 @@ const props = {
     control: "text",
     type: "string"
   },
+  "aria-description": {
+    description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-details": {
     description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
     required: false,
@@ -281,6 +300,12 @@ const props = {
     control: "number",
     type: "number"
   },
+  "aria-rowindextext": {
+    description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
+    required: false,
+    control: "text",
+    type: "string"
+  },
   "aria-rowspan": {
     description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
     required: false,
@@ -390,10 +415,10 @@ const props = {
     control: "select",
     type: "string",
     options: [
+      "search",
       "text",
       "url",
       "none",
-      "search",
       "tel",
       "email",
       "numeric",

package/lib/cjs/body.ws.js

@@ -27,7 +27,17 @@ var import_react_sdk = require("@webstudio-is/react-sdk");
 var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
 var import_body = require("./__generated__/body.props");
 const presetStyle = {
-  body: import_css_normalize.body
+  body: [
+    ...import_css_normalize.body,
+    {
+      property: "WebkitFontSmoothing",
+      value: { type: "keyword", value: "antialiased" }
+    },
+    {
+      property: "MozOsxFontSmoothing",
+      value: { type: "keyword", value: "grayscale" }
+    }
+  ]
 };
 const meta = {
   type: "container",

package/lib/cjs/form.ws.js

@@ -79,5 +79,5 @@ const meta = {
 };
 const propsMeta = {
   props: import_form.props,
-  initialProps: ["id"]
+  initialProps: ["id", "action"]
 };

package/lib/cjs/label.ws.js

@@ -37,7 +37,7 @@ const meta = {
   invalidAncestors: ["Button"],
   type: "container",
   label: "Input Label",
-  icon: import_svg.TextIcon,
+  icon: import_svg.LabelIcon,
   states: import_react_sdk.defaultStates,
   presetStyle,
   order: 2,

package/lib/cjs/list.ws.js

@@ -69,5 +69,5 @@ const meta = {
 };
 const propsMeta = {
   props: import_list.props,
-  initialProps: ["id", "ordered", "type", "start", "reversed"]
+  initialProps: ["id", "ordered", "start", "reversed"]
 };

package/lib/cjs/vimeo-play-button.ws.js

@@ -26,6 +26,7 @@ var import_react_sdk = require("@webstudio-is/react-sdk");
 var import_vimeo_play_button = require("./__generated__/vimeo-play-button.props");
 var import_svg = require("@webstudio-is/icons/svg");
 var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_vimeo_play_button2 = require("./vimeo-play-button");
 const presetStyle = {
   button: import_css_normalize.button
 };

package/lib/cjs/vimeo-preview-image.ws.js

@@ -22,6 +22,7 @@ __export(vimeo_preview_image_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(vimeo_preview_image_ws_exports);
+var import_react_sdk = require("@webstudio-is/react-sdk");
 var import_image = require("./image.ws");
 var import_vimeo_preview_image = require("./__generated__/vimeo-preview-image.props");
 const meta = {

package/lib/cjs/vimeo.ws.js

@@ -26,6 +26,7 @@ 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_vimeo = require("./__generated__/vimeo.props");
+var import_vimeo2 = require("./vimeo");
 const presetStyle = {
   div: import_css_normalize.div
 };

package/lib/form.ws.js

@@ -57,7 +57,7 @@ const meta = {
 };
 const propsMeta = {
   props,
-  initialProps: ["id"]
+  initialProps: ["id", "action"]
 };
 export {
   meta,

package/lib/label.ws.js

@@ -1,4 +1,4 @@
-import { TextIcon } from "@webstudio-is/icons/svg";
+import { LabelIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "@webstudio-is/react-sdk";
@@ -15,7 +15,7 @@ const meta = {
   invalidAncestors: ["Button"],
   type: "container",
   label: "Input Label",
-  icon: TextIcon,
+  icon: LabelIcon,
   states: defaultStates,
   presetStyle,
   order: 2,

package/lib/list.ws.js

@@ -47,7 +47,7 @@ const meta = {
 };
 const propsMeta = {
   props,
-  initialProps: ["id", "ordered", "type", "start", "reversed"]
+  initialProps: ["id", "ordered", "start", "reversed"]
 };
 export {
   meta,

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

@@ -49,19 +49,23 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+    'aria-braillelabel'?: string | undefined;
+    'aria-brailleroledescription'?: string | undefined;
     'aria-busy'?: (boolean | "true" | "false") | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
+    'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
     'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
+    'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
     'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
@@ -91,6 +95,7 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
+    'aria-rowindextext'?: string | undefined;
     'aria-rowspan'?: number | undefined;
     'aria-selected'?: (boolean | "true" | "false") | undefined;
     'aria-setsize'?: number | undefined;
@@ -270,12 +275,12 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     alt?: string | undefined;
     src?: string | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    sizes?: string | undefined;
-    srcSet?: string | undefined;
-    useMap?: string | undefined;
     referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     quality?: number | undefined;
+    sizes?: string | undefined;
     decoding?: "auto" | "async" | "sync" | undefined;
     loading?: "eager" | "lazy" | undefined;
+    srcSet?: string | undefined;
+    useMap?: string | undefined;
     optimize?: boolean | undefined;
 } & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;

package/lib/vimeo-play-button.ws.js

@@ -4,6 +4,7 @@ import {
 import { props } from "./__generated__/vimeo-play-button.props";
 import { ButtonElementIcon } from "@webstudio-is/icons/svg";
 import { button } from "@webstudio-is/react-sdk/css-normalize";
+import { defaultTag } from "./vimeo-play-button";
 const presetStyle = {
   button
 };

package/lib/vimeo-preview-image.js

@@ -3,7 +3,7 @@ import {
   forwardRef,
   useContext
 } from "react";
-import { Image } from "./image";
+import { Image, defaultTag } from "./image";
 import { VimeoContext } from "./vimeo";
 const base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
 const VimeoPreviewImage = forwardRef(({ src, ...rest }, ref) => {

package/lib/vimeo-preview-image.ws.js

@@ -1,3 +1,5 @@
+import {
+} from "@webstudio-is/react-sdk";
 import {
   propsOverrides as imagePropsOverrides,
   propsMeta as imagePropsMeta,

package/lib/vimeo.ws.js

@@ -4,6 +4,7 @@ import {
 } from "@webstudio-is/react-sdk";
 import { div } from "@webstudio-is/react-sdk/css-normalize";
 import { props } from "./__generated__/vimeo.props";
+import { Vimeo } from "./vimeo";
 const presetStyle = {
   div
 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.82.0",
+  "version": "0.84.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
-  "license": "MIT",
+  "license": "AGPL-3.0-or-later",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -37,32 +37,32 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@react-aria/utils": "^3.13.3",
+    "@react-aria/utils": "^3.18.0",
     "colord": "^2.9.3",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/css-vars": "^0.82.0",
-    "@webstudio-is/generate-arg-types": "^0.82.0",
-    "@webstudio-is/icons": "^0.82.0",
-    "@webstudio-is/image": "^0.82.0",
-    "@webstudio-is/react-sdk": "^0.82.0"
+    "@webstudio-is/css-vars": "^0.84.0",
+    "@webstudio-is/generate-arg-types": "^0.84.0",
+    "@webstudio-is/icons": "^0.84.0",
+    "@webstudio-is/image": "^0.84.0",
+    "@webstudio-is/react-sdk": "^0.84.0"
   },
   "devDependencies": {
-    "@storybook/react": "^7.0.26",
-    "@types/react": "^18.0.35",
-    "@types/react-dom": "^18.0.11",
+    "@storybook/react": "^7.2.1",
+    "@types/react": "^18.2.16",
+    "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "5.1.3",
+    "typescript": "5.1.6",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.6"
+    "@webstudio-is/tsconfig": "^1.0.7"
   },
   "scripts": {
     "dev": "build-package --watch",
     "build": "build-package",
     "build:args": "generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
-    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
+    "typecheck": "tsc",
     "checks": "pnpm typecheck",
     "storybook:dev": "storybook dev -p 6006",
     "storybook:build": "storybook build"