@webstudio-is/sdk-components-react 0.264.0 → 0.266.0

package/lib/image.ws.js

@@ -1,6 +1,6 @@
 import { img as e } from "@webstudio-is/sdk/normalize.css";
 import { props as t } from "./__generated__/image.props.js";
-const o = {
+const r = {
   img: [
     ...e,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -25,7 +25,7 @@ const o = {
 }, i = {
   category: "media",
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
-  presetStyle: o,
+  presetStyle: r,
   order: 0,
   initialProps: [
     "id",
@@ -45,7 +45,26 @@ const o = {
       control: "file",
       label: "Source",
       required: !1,
-      accept: "image/*"
+      accept: "image/*",
+      contentMode: !0
+    },
+    width: {
+      type: "number",
+      control: "number",
+      required: !1,
+      contentMode: !0
+    },
+    height: {
+      type: "number",
+      control: "number",
+      required: !1,
+      contentMode: !0
+    },
+    alt: {
+      type: "string",
+      control: "text",
+      required: !1,
+      contentMode: !0
     }
   }
 };

package/lib/link.ws.js

@@ -17,7 +17,8 @@ const t = {
     href: {
       type: "string",
       control: "url",
-      required: !1
+      required: !1,
+      contentMode: !0
     }
   }
 };

package/lib/markdown-embed.ws.js

@@ -1,6 +1,6 @@
 import { MarkdownEmbedIcon as e } from "@webstudio-is/icons/svg";
 import { descendantComponent as o } from "@webstudio-is/sdk";
-import { props as r } from "./__generated__/markdown-embed.props.js";
+import { props as t } from "./__generated__/markdown-embed.props.js";
 const a = {
   icon: e,
   contentModel: {
@@ -21,12 +21,13 @@ const a = {
   },
   initialProps: ["class"],
   props: {
-    ...r,
+    ...t,
     code: {
       required: !0,
       control: "code",
       language: "markdown",
-      type: "string"
+      type: "string",
+      contentMode: !0
     }
   }
 };

package/lib/time.js

@@ -291,9 +291,9 @@ const N = [
   if (Number.isNaN(e.getTime()) === !1)
     return e;
 }, Y = (t, e, n = "en-US") => {
-  const s = (r, o = 2) => String(r).padStart(o, "0"), D = new Intl.DateTimeFormat(n, {
+  const s = (r, o = 2) => String(r).padStart(o, "0"), T = new Intl.DateTimeFormat(n, {
     weekday: "long"
-  }).format(t), T = new Intl.DateTimeFormat(n, {
+  }).format(t), D = new Intl.DateTimeFormat(n, {
     weekday: "short"
   }).format(t), l = new Intl.DateTimeFormat(n, {
     month: "long"
@@ -306,8 +306,8 @@ const N = [
     MMM: M,
     MM: s(t.getMonth() + 1),
     M: t.getMonth() + 1,
-    DDDD: D,
-    DDD: T,
+    DDDD: T,
+    DDD: D,
     DD: s(t.getDate()),
     D: t.getDate(),
     HH: s(t.getHours()),
@@ -324,9 +324,8 @@ const N = [
     country: e = u,
     dateStyle: n = G,
     timeStyle: s = I,
-    format: D,
-    // native html attribute in react style
-    dateTime: T = f,
+    format: T,
+    datetime: D = f,
     ...l
   }, M) => {
     const m = `${L(t)}-${h(
@@ -334,12 +333,12 @@ const N = [
     )}`, a = {
       dateStyle: B(n),
       timeStyle: R(s)
-    }, i = T === null ? E : T.toString(), r = U(i);
+    }, i = D === null ? E : D.toString(), r = U(i);
     let o = i;
     if (r)
-      if (D)
+      if (T)
         try {
-          o = Y(r, D, m);
+          o = Y(r, T, m);
         } catch {
         }
       else

package/lib/time.ws.js

@@ -1,5 +1,5 @@
-import { time as t } from "@webstudio-is/sdk/normalize.css";
-import { props as e } from "./__generated__/time.props.js";
+import { time as e } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/time.props.js";
 const r = {
   category: "localization",
   description: "Converts machine-readable date and time to a human-readable format.",
@@ -8,7 +8,7 @@ const r = {
     children: []
   },
   presetStyle: {
-    time: t
+    time: e
   },
   initialProps: [
     "datetime",
@@ -18,7 +18,35 @@ const r = {
     "timeStyle",
     "format"
   ],
-  props: e
+  props: {
+    ...t,
+    datetime: {
+      type: "string",
+      control: "text",
+      required: !1,
+      contentMode: !0
+    },
+    language: {
+      ...t.language,
+      contentMode: !0
+    },
+    country: {
+      ...t.country,
+      contentMode: !0
+    },
+    dateStyle: {
+      ...t.dateStyle,
+      contentMode: !0
+    },
+    timeStyle: {
+      ...t.timeStyle,
+      contentMode: !0
+    },
+    format: {
+      ...t.format,
+      contentMode: !0
+    }
+  }
 };
 export {
   r as meta

package/lib/types/time.d.ts

@@ -1,10 +1,13 @@
+import { type ComponentProps } from "react";
 declare const languages: readonly ["af", "am", "ar", "az", "be", "bg", "bn", "bs", "ca", "cs", "cy", "da", "de", "el", "en", "es", "et", "eu", "fa", "fi", "fr", "ga", "gl", "gu", "he", "hi", "hr", "hu", "hy", "id", "is", "it", "ja", "ka", "kk", "km", "kn", "ko", "ky", "lb", "lt", "lv", "mk", "ml", "mn", "mr", "ms", "mt", "nb", "nl", "nn", "pl", "pt", "ro", "ru", "si", "sk", "sl", "sq", "sr", "sv", "sw", "ta", "te", "th", "tr", "uk", "ur", "uz", "vi", "zh"];
 declare const countries: readonly ["AF", "AL", "DZ", "AS", "AD", "AO", "AI", "AQ", "AG", "AR", "AM", "AW", "AU", "AT", "AZ", "BS", "BH", "BD", "BB", "BY", "BE", "BZ", "BJ", "BM", "BT", "BO", "BA", "BW", "BR", "BN", "BG", "BF", "BI", "CV", "KH", "CM", "CA", "KY", "CF", "TD", "CL", "CN", "CO", "KM", "CG", "CD", "CR", "HR", "CU", "CY", "CZ", "DK", "DJ", "DM", "DO", "EC", "EG", "SV", "GQ", "ER", "EE", "SZ", "ET", "FJ", "FI", "FR", "GA", "GM", "GE", "DE", "GH", "GR", "GD", "GT", "GN", "GW", "GY", "HT", "HN", "HU", "IS", "IN", "ID", "IR", "IQ", "IE", "IL", "IT", "JM", "JP", "JO", "KZ", "KE", "KI", "KP", "KR", "KW", "KG", "LA", "LV", "LB", "LS", "LR", "LY", "LI", "LT", "LU", "MG", "MW", "MY", "MV", "ML", "MT", "MH", "MR", "MU", "MX", "FM", "MD", "MC", "MN", "ME", "MA", "MZ", "MM", "NA", "NR", "NP", "NL", "NZ", "NI", "NE", "NG", "NO", "OM", "PK", "PW", "PA", "PG", "PY", "PE", "PH", "PL", "PT", "QA", "RO", "RU", "RW", "KN", "LC", "VC", "WS", "SM", "ST", "SA", "SN", "RS", "SC", "SL", "SG", "SK", "SI", "SB", "SO", "ZA", "SS", "ES", "LK", "SD", "SR", "SE", "CH", "SY", "TW", "TJ", "TZ", "TH", "TL", "TG", "TO", "TT", "TN", "TR", "TM", "TV", "UG", "UA", "AE", "GB", "US", "UY", "UZ", "VU", "VA", "VE", "VN", "YE", "ZM", "ZW"];
 type Language = (typeof languages)[number];
 type Country = (typeof countries)[number];
 type DateStyle = Intl.DateTimeFormatOptions["dateStyle"] | "none";
 type TimeStyle = Intl.DateTimeFormatOptions["timeStyle"] | "none";
-export declare const Time: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>, "dateTime"> & {
+type TimeDateTime = ComponentProps<"time">["dateTime"];
+type TimeProps = {
+    datetime?: TimeDateTime;
     language?: Language;
     country?: Country;
     dateStyle?: DateStyle;
@@ -22,7 +25,8 @@ export declare const Time: import("react").ForwardRefExoticComponent<Pick<import
      * Day and month names use the selected language.
      */
     format?: string;
-} & import("react").RefAttributes<HTMLTimeElement>>;
+};
+export declare const Time: import("react").ForwardRefExoticComponent<TimeProps & import("react").RefAttributes<HTMLTimeElement>>;
 export declare const __testing__: {
     parseDate: (datetimeString: string) => Date | undefined;
     formatDate: (date: Date, template: string, locale?: string) => string;

package/lib/video.ws.js

@@ -1,6 +1,6 @@
 import { VideoIcon as e } from "@webstudio-is/icons/svg";
-import { props as o } from "./__generated__/video.props.js";
-const i = {
+import { props as t } from "./__generated__/video.props.js";
+const n = {
   icon: e,
   contentModel: {
     category: "instance",
@@ -28,17 +28,30 @@ const i = {
     "playsInline"
   ],
   props: {
-    ...o,
+    ...t,
     // Automatically generated props don't have the right control.
     src: {
       type: "string",
       control: "file",
       label: "Source",
       required: !1,
-      accept: ".mp4,.webm,.mpg,.mpeg,.mov"
+      accept: ".mp4,.webm,.mpg,.mpeg,.mov",
+      contentMode: !0
+    },
+    width: {
+      type: "number",
+      control: "number",
+      required: !1,
+      contentMode: !0
+    },
+    height: {
+      type: "number",
+      control: "number",
+      required: !1,
+      contentMode: !0
     }
   }
 };
 export {
-  i as meta
+  n as meta
 };

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

@@ -1,5 +1,5 @@
 import { meta as e } from "./image.ws.js";
-import { props as r } from "./__generated__/vimeo-preview-image.props.js";
+import { props as o } from "./__generated__/vimeo-preview-image.props.js";
 const i = {
   ...e,
   category: "hidden",
@@ -10,13 +10,14 @@ const i = {
   },
   initialProps: e.initialProps,
   props: {
-    ...r,
+    ...o,
     // Automatically generated props don't have the right control.
     src: {
       type: "string",
       control: "file",
       label: "Source",
-      required: !1
+      required: !1,
+      contentMode: !0
     }
   }
 };

package/lib/vimeo.ws.js

@@ -1,6 +1,6 @@
-import { VimeoIcon as o } from "@webstudio-is/icons/svg";
-import { div as e } from "@webstudio-is/sdk/normalize.css";
-import { props as t } from "./__generated__/vimeo.props.js";
+import { VimeoIcon as e } from "@webstudio-is/icons/svg";
+import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/vimeo.props.js";
 const i = [
   "id",
   "className",
@@ -20,15 +20,21 @@ const i = [
   "controlsColor",
   "playsinline"
 ], s = {
-  icon: o,
+  icon: e,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
   },
-  presetStyle: { div: e },
+  presetStyle: { div: t },
   initialProps: i,
-  props: t
+  props: {
+    ...o,
+    url: {
+      ...o.url,
+      contentMode: !0
+    }
+  }
 };
 export {
   s as meta

package/lib/youtube.ws.js

@@ -1,7 +1,7 @@
-import { YoutubeIcon as e } from "@webstudio-is/icons/svg";
-import { div as o } from "@webstudio-is/sdk/normalize.css";
-import { props as i } from "./__generated__/youtube.props.js";
-const n = [
+import { YoutubeIcon as o } from "@webstudio-is/icons/svg";
+import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { props as e } from "./__generated__/youtube.props.js";
+const i = [
   "id",
   "className",
   "url",
@@ -29,17 +29,23 @@ const n = [
   "language",
   "color",
   "playlist"
-], s = {
-  icon: e,
+], l = {
+  icon: o,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
   },
-  presetStyle: { div: o },
-  initialProps: n,
-  props: i
+  presetStyle: { div: t },
+  initialProps: i,
+  props: {
+    ...e,
+    url: {
+      ...e.url,
+      contentMode: !0
+    }
+  }
 };
 export {
-  s as meta
+  l as meta
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.264.0",
+  "version": "0.266.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -44,10 +44,10 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.2",
     "micromark-extension-gfm-table": "^2.1.1",
-    "@webstudio-is/icons": "0.264.0",
-    "@webstudio-is/image": "0.264.0",
-    "@webstudio-is/react-sdk": "0.264.0",
-    "@webstudio-is/sdk": "0.264.0"
+    "@webstudio-is/icons": "0.266.0",
+    "@webstudio-is/sdk": "0.266.0",
+    "@webstudio-is/image": "0.266.0",
+    "@webstudio-is/react-sdk": "0.266.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -61,8 +61,8 @@
     "@webstudio-is/design-system": "0.0.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/sdk-cli": "0.94.0",
-    "@webstudio-is/template": "0.264.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/template": "0.266.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",