@webstudio-is/react-sdk 0.7.0 → 0.7.1

package/lib/components/bold.props.json

@@ -447,10 +447,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "yes",
-            "no"
-        ]
+        "options": ["yes", "no"]
     },
     "radioGroup": {
         "defaultValue": null,
@@ -739,6 +736,7 @@
         }
     },
     "color": {
+        "defaultValue": null,
         "description": "",
         "name": "color",
         "parent": {
@@ -943,10 +941,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "on",
-            "off"
-        ]
+        "options": ["on", "off"]
     },
     "inputMode": {
         "defaultValue": null,
@@ -1109,12 +1104,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "list",
-            "none",
-            "inline",
-            "both"
-        ]
+        "options": ["list", "none", "inline", "both"]
     },
     "aria-busy": {
         "defaultValue": null,
@@ -1378,14 +1368,7 @@
         "control": {
             "type": "select"
         },
-        "options": [
-            "link",
-            "none",
-            "copy",
-            "execute",
-            "move",
-            "popup"
-        ]
+        "options": ["link", "none", "copy", "execute", "move", "popup"]
     },
     "aria-errormessage": {
         "defaultValue": null,
@@ -1662,11 +1645,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "off",
-            "assertive",
-            "polite"
-        ]
+        "options": ["off", "assertive", "polite"]
     },
     "aria-modal": {
         "defaultValue": null,
@@ -1764,10 +1743,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "horizontal",
-            "vertical"
-        ]
+        "options": ["horizontal", "vertical"]
     },
     "aria-owns": {
         "defaultValue": null,
@@ -2136,12 +2112,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "none",
-            "ascending",
-            "descending",
-            "other"
-        ]
+        "options": ["none", "ascending", "descending", "other"]
     },
     "aria-valuemax": {
         "defaultValue": null,

package/lib/components/box.props.json

@@ -447,10 +447,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "yes",
-            "no"
-        ]
+        "options": ["yes", "no"]
     },
     "radioGroup": {
         "defaultValue": null,
@@ -739,6 +736,7 @@
         }
     },
     "color": {
+        "defaultValue": null,
         "description": "",
         "name": "color",
         "parent": {
@@ -943,10 +941,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "on",
-            "off"
-        ]
+        "options": ["on", "off"]
     },
     "inputMode": {
         "defaultValue": null,
@@ -1109,12 +1104,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "list",
-            "none",
-            "inline",
-            "both"
-        ]
+        "options": ["list", "none", "inline", "both"]
     },
     "aria-busy": {
         "defaultValue": null,
@@ -1378,14 +1368,7 @@
         "control": {
             "type": "select"
         },
-        "options": [
-            "link",
-            "none",
-            "copy",
-            "execute",
-            "move",
-            "popup"
-        ]
+        "options": ["link", "none", "copy", "execute", "move", "popup"]
     },
     "aria-errormessage": {
         "defaultValue": null,
@@ -1662,11 +1645,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "off",
-            "assertive",
-            "polite"
-        ]
+        "options": ["off", "assertive", "polite"]
     },
     "aria-modal": {
         "defaultValue": null,
@@ -1764,10 +1743,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "horizontal",
-            "vertical"
-        ]
+        "options": ["horizontal", "vertical"]
     },
     "aria-owns": {
         "defaultValue": null,
@@ -2136,12 +2112,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "none",
-            "ascending",
-            "descending",
-            "other"
-        ]
+        "options": ["none", "ascending", "descending", "other"]
     },
     "aria-valuemax": {
         "defaultValue": null,
@@ -2232,9 +2203,7 @@
         }
     },
     "tag": {
-        "defaultValue": {
-            "value": "div"
-        },
+        "defaultValue": "div",
         "description": "",
         "name": "tag",
         "declarations": [

package/lib/components/button.props.json

@@ -264,9 +264,7 @@
         }
     },
     "type": {
-        "defaultValue": {
-            "value": "submit"
-        },
+        "defaultValue": "submit",
         "description": "",
         "name": "type",
         "parent": {
@@ -298,11 +296,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "button",
-            "submit",
-            "reset"
-        ]
+        "options": ["button", "submit", "reset"]
     },
     "value": {
         "defaultValue": null,
@@ -708,10 +702,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "yes",
-            "no"
-        ]
+        "options": ["yes", "no"]
     },
     "radioGroup": {
         "defaultValue": null,
@@ -1000,6 +991,7 @@
         }
     },
     "color": {
+        "defaultValue": null,
         "description": "",
         "name": "color",
         "parent": {
@@ -1204,10 +1196,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "on",
-            "off"
-        ]
+        "options": ["on", "off"]
     },
     "inputMode": {
         "defaultValue": null,
@@ -1370,12 +1359,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "list",
-            "none",
-            "inline",
-            "both"
-        ]
+        "options": ["list", "none", "inline", "both"]
     },
     "aria-busy": {
         "defaultValue": null,
@@ -1639,14 +1623,7 @@
         "control": {
             "type": "select"
         },
-        "options": [
-            "link",
-            "none",
-            "copy",
-            "execute",
-            "move",
-            "popup"
-        ]
+        "options": ["link", "none", "copy", "execute", "move", "popup"]
     },
     "aria-errormessage": {
         "defaultValue": null,
@@ -1923,11 +1900,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "off",
-            "assertive",
-            "polite"
-        ]
+        "options": ["off", "assertive", "polite"]
     },
     "aria-modal": {
         "defaultValue": null,
@@ -2025,10 +1998,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "horizontal",
-            "vertical"
-        ]
+        "options": ["horizontal", "vertical"]
     },
     "aria-owns": {
         "defaultValue": null,
@@ -2397,12 +2367,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "none",
-            "ascending",
-            "descending",
-            "other"
-        ]
+        "options": ["none", "ascending", "descending", "other"]
     },
     "aria-valuemax": {
         "defaultValue": null,

package/lib/components/component-type.d.ts

@@ -1,7 +1,7 @@
-import type { Style } from "../css";
 import { z } from "zod";
 import React from "react";
 import { IconProps } from "@webstudio-is/icons";
+import type { Style } from "@webstudio-is/css-data";
 export declare type WsComponentMeta<ComponentType> = {
     Component: ComponentType;
     Icon: React.FunctionComponent<IconProps>;

package/lib/components/component-type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-type.d.ts","sourceRoot":"","sources":["../../src/components/component-type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,oBAAY,eAAe,CAAC,aAAa,IAAI;IAC3C,SAAS,EAAE,aAAa,CAAC;IACzB,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAG3B,iBAAiB,EAAE,OAAO,CAAC;IAE3B,YAAY,EAAE,OAAO,CAAC;IAEtB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,eAAe,6EAoCY,CAAC"}
+{"version":3,"file":"component-type.d.ts","sourceRoot":"","sources":["../../src/components/component-type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAEpD,oBAAY,eAAe,CAAC,aAAa,IAAI;IAC3C,SAAS,EAAE,aAAa,CAAC;IACzB,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAG3B,iBAAiB,EAAE,OAAO,CAAC;IAE3B,YAAY,EAAE,OAAO,CAAC;IAEtB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,eAAe,6EAoCY,CAAC"}

package/lib/components/form.props.json

@@ -623,10 +623,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "yes",
-            "no"
-        ]
+        "options": ["yes", "no"]
     },
     "radioGroup": {
         "defaultValue": null,
@@ -915,6 +912,7 @@
         }
     },
     "color": {
+        "defaultValue": null,
         "description": "",
         "name": "color",
         "parent": {
@@ -1119,10 +1117,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "on",
-            "off"
-        ]
+        "options": ["on", "off"]
     },
     "inputMode": {
         "defaultValue": null,
@@ -1285,12 +1280,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "list",
-            "none",
-            "inline",
-            "both"
-        ]
+        "options": ["list", "none", "inline", "both"]
     },
     "aria-busy": {
         "defaultValue": null,
@@ -1554,14 +1544,7 @@
         "control": {
             "type": "select"
         },
-        "options": [
-            "link",
-            "none",
-            "copy",
-            "execute",
-            "move",
-            "popup"
-        ]
+        "options": ["link", "none", "copy", "execute", "move", "popup"]
     },
     "aria-errormessage": {
         "defaultValue": null,
@@ -1838,11 +1821,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "off",
-            "assertive",
-            "polite"
-        ]
+        "options": ["off", "assertive", "polite"]
     },
     "aria-modal": {
         "defaultValue": null,
@@ -1940,10 +1919,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "horizontal",
-            "vertical"
-        ]
+        "options": ["horizontal", "vertical"]
     },
     "aria-owns": {
         "defaultValue": null,
@@ -2312,12 +2288,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "none",
-            "ascending",
-            "descending",
-            "other"
-        ]
+        "options": ["none", "ascending", "descending", "other"]
     },
     "aria-valuemax": {
         "defaultValue": null,

package/lib/components/heading.props.json

@@ -447,10 +447,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "yes",
-            "no"
-        ]
+        "options": ["yes", "no"]
     },
     "radioGroup": {
         "defaultValue": null,
@@ -739,6 +736,7 @@
         }
     },
     "color": {
+        "defaultValue": null,
         "description": "",
         "name": "color",
         "parent": {
@@ -943,10 +941,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "on",
-            "off"
-        ]
+        "options": ["on", "off"]
     },
     "inputMode": {
         "defaultValue": null,
@@ -1109,12 +1104,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "list",
-            "none",
-            "inline",
-            "both"
-        ]
+        "options": ["list", "none", "inline", "both"]
     },
     "aria-busy": {
         "defaultValue": null,
@@ -1378,14 +1368,7 @@
         "control": {
             "type": "select"
         },
-        "options": [
-            "link",
-            "none",
-            "copy",
-            "execute",
-            "move",
-            "popup"
-        ]
+        "options": ["link", "none", "copy", "execute", "move", "popup"]
     },
     "aria-errormessage": {
         "defaultValue": null,
@@ -1662,11 +1645,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "off",
-            "assertive",
-            "polite"
-        ]
+        "options": ["off", "assertive", "polite"]
     },
     "aria-modal": {
         "defaultValue": null,
@@ -1764,10 +1743,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "horizontal",
-            "vertical"
-        ]
+        "options": ["horizontal", "vertical"]
     },
     "aria-owns": {
         "defaultValue": null,
@@ -2136,12 +2112,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "none",
-            "ascending",
-            "descending",
-            "other"
-        ]
+        "options": ["none", "ascending", "descending", "other"]
     },
     "aria-valuemax": {
         "defaultValue": null,
@@ -2232,9 +2203,7 @@
         }
     },
     "tag": {
-        "defaultValue": {
-            "value": "h1"
-        },
+        "defaultValue": "h1",
         "description": "",
         "name": "tag",
         "declarations": [
@@ -2271,13 +2240,6 @@
         "control": {
             "type": "select"
         },
-        "options": [
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "h5",
-            "h6"
-        ]
+        "options": ["h1", "h2", "h3", "h4", "h5", "h6"]
     }
 }

package/lib/components/image-dev.stories.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import { type ImageLoader } from "../component-utils/image";
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & {
+    quality?: number | undefined;
+    loader?: ImageLoader | undefined;
+    optimize?: boolean | undefined;
+}, "key" | "quality" | "loader" | keyof React.ImgHTMLAttributes<HTMLImageElement> | "optimize"> & React.RefAttributes<HTMLImageElement>>>;
+export default _default;
+/**
+ * Load images depending on image width and device per pixel ratio.
+ **/
+export declare const FixedWidthImage: ComponentStory<React.FunctionComponent>;
+/**
+ * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
+ **/
+export declare const FixedWidthImageCover: ComponentStory<React.FunctionComponent>;
+/**
+ * Load images depending on the viewport width.
+ **/
+export declare const UnknownWidthImage: ComponentStory<React.FunctionComponent>;
+/**
+ * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
+ * Load images depending on the viewport width.
+ **/
+export declare const AspectRatioImage: ComponentStory<React.FunctionComponent>;
+/**
+ * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
+ **/
+export declare const FillParentImage: ComponentStory<React.FunctionComponent>;
+/**
+ * "sizes" attribute explicitly equal to 100vw allowing to skip the default behavior.
+ * See DEFAULT_SIZES in the Image component. Load images depending on the viewport width.
+ **/
+export declare const HeroImage: ComponentStory<React.FunctionComponent>;
+//# sourceMappingURL=image-dev.stories.d.ts.map

package/lib/components/image-dev.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-dev.stories.d.ts","sourceRoot":"","sources":["../../src/components/image-dev.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAItE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;;;;;;AAO5D,wBAE0C;AAgF1C;;IAEI;AACJ,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAEnE,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,oBAAoB,EAAE,cAAc,CAC/C,KAAK,CAAC,iBAAiB,CAQxB,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,iBAAiB,EAAE,cAAc,CAC5C,KAAK,CAAC,iBAAiB,CACa,CAAC;AAEvC;;;IAGI;AACJ,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAOpE,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAYnE,CAAC;AAEF;;;IAGI;AACJ,eAAO,MAAM,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAU7D,CAAC"}