@webstudio-is/sdk-components-react 0.220.0 → 0.222.0

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

@@ -1,47 +1,43 @@
 export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponent<Omit<{
+    slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
-    id?: string | undefined | undefined;
-    width?: number | string | undefined | undefined;
-    height?: number | string | undefined | undefined;
-    children?: import("react").ReactNode;
     title?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
-    src?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
     accessKey?: string | undefined | undefined;
     autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined | undefined;
+    id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
     prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
     rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
     rev?: string | undefined | undefined;
     typeof?: string | undefined | undefined;
     vocab?: string | undefined | undefined;
     autoCapitalize?: string | undefined | undefined;
     autoCorrect?: string | undefined | undefined;
     autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
     itemProp?: string | undefined | undefined;
     itemScope?: boolean | undefined | undefined;
     itemType?: string | undefined | undefined;
@@ -105,6 +101,7 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     "aria-valuemin"?: number | undefined | undefined;
     "aria-valuenow"?: number | undefined | undefined;
     "aria-valuetext"?: string | undefined | undefined;
+    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined | undefined;
@@ -268,17 +265,20 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    quality?: number | undefined;
-    sizes?: string | undefined | undefined;
-    optimize?: boolean | undefined;
+    height?: number | string | undefined | undefined;
+    width?: number | string | undefined | undefined;
+    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+    useMap?: string | undefined | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
+    alt?: string | undefined | undefined;
+    src?: string | undefined | undefined;
     loading?: "eager" | "lazy" | undefined | undefined;
     decoding?: "async" | "auto" | "sync" | undefined | undefined;
-    alt?: string | undefined | undefined;
-    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     fetchPriority?: "high" | "low" | "auto" | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
+    sizes?: string | undefined | undefined;
     srcSet?: string | undefined | undefined;
-    useMap?: string | undefined | undefined;
+    quality?: number | undefined;
+    optimize?: boolean | undefined;
 } & {
     $webstudio$canvasOnly$assetId?: string | undefined;
 } & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;

package/lib/types/vimeo-spinner.ws.d.ts

@@ -1,2 +1,2 @@
-import { type WsComponentMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;

package/lib/types/vimeo.ws.d.ts

@@ -1,2 +1,2 @@
-import { type WsComponentMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;

package/lib/types/youtube.ws.d.ts

@@ -1,2 +1,2 @@
-import { type WsComponentMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;

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

@@ -1,20 +1,18 @@
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { ButtonElementIcon as o } from "@webstudio-is/icons/svg";
-import { button as e } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/vimeo-play-button.props.js";
-const m = {
+import { ButtonElementIcon as t } from "@webstudio-is/icons/svg";
+import { button as o } from "@webstudio-is/sdk/normalize.css";
+import { props as e } from "./__generated__/vimeo-play-button.props.js";
+const c = {
   category: "hidden",
   label: "Play Button",
-  icon: o,
-  states: t,
+  icon: t,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: { button: e },
+  presetStyle: { button: o },
   initialProps: ["id", "class"],
-  props: n
+  props: e
 };
 export {
-  m as meta
+  c as meta
 };

package/lib/vimeo-spinner.ws.js

@@ -1,20 +1,18 @@
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { div as o } from "@webstudio-is/sdk/normalize.css";
 import { BoxIcon as e } from "@webstudio-is/icons/svg";
-import { props as r } from "./__generated__/vimeo-spinner.props.js";
-const s = {
+import { props as n } from "./__generated__/vimeo-spinner.props.js";
+const c = {
   icon: e,
-  states: o,
   category: "hidden",
   label: "Spinner",
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: { div: t },
+  presetStyle: { div: o },
   initialProps: ["id", "class"],
-  props: r
+  props: n
 };
 export {
-  s as meta
+  c as meta
 };

package/lib/vimeo.template.js

@@ -1,23 +1,23 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { SpinnerIcon as r, PlayIcon as n } from "@webstudio-is/icons/svg";
-import { $ as e, css as o } from "@webstudio-is/template";
-const p = {
+import { $ as t, css as i, ws as a } from "@webstudio-is/template";
+const d = {
   category: "media",
   order: 1,
   description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
-  template: /* @__PURE__ */ i(
-    e.Vimeo,
+  template: /* @__PURE__ */ o(
+    t.Vimeo,
     {
-      "ws:style": o`
+      "ws:style": i`
         position: relative;
         aspect-ratio: 640/360;
         width: 100%;
       `,
       children: [
-        /* @__PURE__ */ t(
-          e.VimeoPreviewImage,
+        /* @__PURE__ */ e(
+          t.VimeoPreviewImage,
           {
-            "ws:style": o`
+            "ws:style": i`
           position: absolute;
           object-fit: cover;
           object-position: center;
@@ -30,11 +30,11 @@ const p = {
             optimize: !0
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoSpinner,
+        /* @__PURE__ */ e(
+          t.VimeoSpinner,
           {
             "ws:label": "Spinner",
-            "ws:style": o`
+            "ws:style": i`
           position: absolute;
           top: 50%;
           left: 50%;
@@ -43,13 +43,13 @@ const p = {
           margin-top: -35px;
           margin-left: -35px;
         `,
-            children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+            children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoPlayButton,
+        /* @__PURE__ */ e(
+          t.VimeoPlayButton,
           {
-            "ws:style": o`
+            "ws:style": i`
           position: absolute;
           width: 140px;
           height: 80px;
@@ -70,16 +70,17 @@ const p = {
           }
         `,
             "aria-label": "Play button",
-            children: /* @__PURE__ */ t(
-              e.Box,
+            children: /* @__PURE__ */ e(
+              a.element,
               {
+                "ws:tag": "div",
                 "ws:label": "Play Icon",
-                "ws:style": o`
+                "ws:style": i`
             width: 60px;
             height: 60px;
           `,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: n })
+                children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Play SVG", code: n })
               }
             )
           }
@@ -89,5 +90,5 @@ const p = {
   )
 };
 export {
-  p as meta
+  d as meta
 };

package/lib/vimeo.ws.js

@@ -1,8 +1,7 @@
 import { VimeoIcon as o } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
 import { div as e } from "@webstudio-is/sdk/normalize.css";
-import { props as i } from "./__generated__/vimeo.props.js";
-const r = [
+import { props as t } from "./__generated__/vimeo.props.js";
+const i = [
   "id",
   "className",
   "url",
@@ -20,18 +19,17 @@ const r = [
   "showControls",
   "controlsColor",
   "playsinline"
-], m = {
+], s = {
   icon: o,
-  states: t,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
   },
   presetStyle: { div: e },
-  initialProps: r,
-  props: i
+  initialProps: i,
+  props: t
 };
 export {
-  m as meta
+  s as meta
 };

package/lib/webhook-form.template.js

@@ -1,43 +1,82 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { $ as e, ActionValue as s, PlaceholderValue as o, Variable as i, expression as a } from "@webstudio-is/template";
-const n = new i("formState", "initial"), w = {
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { $ as r, ActionValue as i, ws as e, PlaceholderValue as a, css as n, Variable as w, expression as l } from "@webstudio-is/template";
+const s = new w("formState", "initial"), d = {
   category: "data",
   order: 1,
   description: "Collect user data and send it to any webhook.",
-  template: /* @__PURE__ */ r(
-    e.Form,
+  template: /* @__PURE__ */ o(
+    r.Form,
     {
-      state: a`${n}`,
-      onStateChange: new s(["state"], a`${n} = state`),
+      state: l`${s}`,
+      onStateChange: new i(["state"], l`${s} = state`),
       children: [
-        /* @__PURE__ */ r(
-          e.Box,
+        /* @__PURE__ */ o(
+          e.element,
           {
+            "ws:tag": "div",
             "ws:label": "Form Content",
-            "ws:show": a`${n} === 'initial' || ${n} === 'error'`,
+            "ws:show": l`${s} === 'initial' || ${s} === 'error'`,
             children: [
-              /* @__PURE__ */ t(e.Label, { children: new o("Name") }),
-              /* @__PURE__ */ t(e.Input, { name: "name" }),
-              /* @__PURE__ */ t(e.Label, { children: new o("Email") }),
-              /* @__PURE__ */ t(e.Input, { name: "email" }),
-              /* @__PURE__ */ t(e.Button, { children: new o("Submit") })
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "label",
+                  "ws:style": n`
+            display: block;
+          `,
+                  children: new a("Name")
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "input",
+                  "ws:style": n`
+            display: block;
+          `,
+                  name: "name"
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "label",
+                  "ws:style": n`
+            display: block;
+          `,
+                  children: new a("Email")
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "input",
+                  "ws:style": n`
+            display: block;
+          `,
+                  name: "email"
+                }
+              ),
+              /* @__PURE__ */ t(e.element, { "ws:tag": "button", children: new a("Submit") })
             ]
           }
         ),
         /* @__PURE__ */ t(
-          e.Box,
+          e.element,
           {
+            "ws:tag": "div",
             "ws:label": "Success Message",
-            "ws:show": a`${n} === 'success'`,
-            children: new o("Thank you for getting in touch!")
+            "ws:show": l`${s} === 'success'`,
+            children: new a("Thank you for getting in touch!")
           }
         ),
         /* @__PURE__ */ t(
-          e.Box,
+          e.element,
           {
+            "ws:tag": "div",
             "ws:label": "Error Message",
-            "ws:show": a`${n} === 'error'`,
-            children: new o("Sorry, something went wrong.")
+            "ws:show": l`${s} === 'error'`,
+            children: new a("Sorry, something went wrong.")
           }
         )
       ]
@@ -45,5 +84,5 @@ const n = new i("formState", "initial"), w = {
   )
 };
 export {
-  w as meta
+  d as meta
 };

package/lib/youtube.template.js

@@ -1,13 +1,13 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { SpinnerIcon as r, PlayIcon as l } from "@webstudio-is/icons/svg";
-import { $ as e, css as o } from "@webstudio-is/template";
-const p = {
+import { $ as t, css as o, ws as a } from "@webstudio-is/template";
+const d = {
   label: "YouTube",
   category: "media",
   order: 1,
   description: "Add a video to your page that is hosted on YouTube. Paste a YouTube URL and configure the video in the Settings tab.",
   template: /* @__PURE__ */ i(
-    e.YouTube,
+    t.YouTube,
     {
       "ws:label": "YouTube",
       "ws:style": o`
@@ -16,8 +16,8 @@ const p = {
         width: 100%;
       `,
       children: [
-        /* @__PURE__ */ t(
-          e.VimeoPreviewImage,
+        /* @__PURE__ */ e(
+          t.VimeoPreviewImage,
           {
             "ws:label": "Preview Image",
             "ws:style": o`
@@ -33,8 +33,8 @@ const p = {
             optimize: !0
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoSpinner,
+        /* @__PURE__ */ e(
+          t.VimeoSpinner,
           {
             "ws:label": "Spinner",
             "ws:style": o`
@@ -46,11 +46,11 @@ const p = {
           margin-top: -35px;
           margin-left: -35px;
         `,
-            children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+            children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoPlayButton,
+        /* @__PURE__ */ e(
+          t.VimeoPlayButton,
           {
             "ws:label": "Play Button",
             "ws:style": o`
@@ -74,16 +74,17 @@ const p = {
           }
         `,
             "aria-label": "Play button",
-            children: /* @__PURE__ */ t(
-              e.Box,
+            children: /* @__PURE__ */ e(
+              a.element,
               {
+                "ws:tag": "div",
                 "ws:label": "Play Icon",
                 "ws:style": o`
             width: 60px;
             height: 60px;
           `,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: l })
+                children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Play SVG", code: l })
               }
             )
           }
@@ -93,5 +94,5 @@ const p = {
   )
 };
 export {
-  p as meta
+  d as meta
 };

package/lib/youtube.ws.js

@@ -1,6 +1,5 @@
 import { YoutubeIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { div as o } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/youtube.props.js";
 const n = [
   "id",
@@ -30,18 +29,17 @@ const n = [
   "language",
   "color",
   "playlist"
-], d = {
+], s = {
   icon: e,
-  states: o,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
   },
-  presetStyle: { div: t },
+  presetStyle: { div: o },
   initialProps: n,
   props: i
 };
 export {
-  d as meta
+  s as meta
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.220.0",
+  "version": "0.222.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.220.0",
-    "@webstudio-is/image": "0.220.0",
-    "@webstudio-is/react-sdk": "0.220.0",
-    "@webstudio-is/sdk": "0.220.0"
+    "@webstudio-is/image": "0.222.0",
+    "@webstudio-is/icons": "0.222.0",
+    "@webstudio-is/react-sdk": "0.222.0",
+    "@webstudio-is/sdk": "0.222.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -58,9 +58,9 @@
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^3.1.2",
-    "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/sdk-cli": "0.94.0",
-    "@webstudio-is/template": "0.220.0",
+    "@webstudio-is/template": "0.222.0",
+    "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/lib/blockquote.template.js

@@ -1,11 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { $ as e } from "@webstudio-is/template";
-const a = {
-  category: "typography",
-  description: "Use to style a quote from an external source like an article or book.",
-  order: 3,
-  template: /* @__PURE__ */ o(e.Blockquote, {})
-};
-export {
-  a as meta
-};

package/lib/button.template.js

@@ -1,11 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { $ as o, PlaceholderValue as e } from "@webstudio-is/template";
-const n = {
-  category: "forms",
-  order: 2,
-  description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that’s what a link is used for.",
-  template: /* @__PURE__ */ t(o.Button, { children: new e("Button text you can edit") })
-};
-export {
-  n as meta
-};

package/lib/checkbox.template.js

@@ -1,14 +0,0 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { $ as e, PlaceholderValue as c } from "@webstudio-is/template";
-const l = {
-  category: "forms",
-  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.",
-  order: 6,
-  template: /* @__PURE__ */ r(e.Label, { "ws:label": "Checkbox Field", children: [
-    /* @__PURE__ */ o(e.Checkbox, {}),
-    /* @__PURE__ */ o(e.Text, { "ws:label": "Checkbox Label", "ws:tag": "span", children: new c("Checkbox") })
-  ] })
-};
-export {
-  l as meta
-};

package/lib/heading.template.js

@@ -1,11 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { $ as t } from "@webstudio-is/template";
-const n = {
-  category: "typography",
-  description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
-  order: 1,
-  template: /* @__PURE__ */ e(t.Heading, {})
-};
-export {
-  n as meta
-};

package/lib/label.template.js

@@ -1,10 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { $ as r, PlaceholderValue as o } from "@webstudio-is/template";
-const a = {
-  category: "forms",
-  order: 2,
-  template: /* @__PURE__ */ e(r.Label, { children: new o("Form Label") })
-};
-export {
-  a as meta
-};

package/lib/link.template.js

@@ -1,11 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { $ as o } from "@webstudio-is/template";
-const n = {
-  category: "general",
-  description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
-  order: 1,
-  template: /* @__PURE__ */ e(o.Link, {})
-};
-export {
-  n as meta
-};

package/lib/list-item.template.js

@@ -1,11 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { $ as e } from "@webstudio-is/template";
-const i = {
-  category: "typography",
-  description: "Adds a new item to an existing list.",
-  order: 5,
-  template: /* @__PURE__ */ t(e.ListItem, {})
-};
-export {
-  i as meta
-};

package/lib/list.template.js

@@ -1,15 +0,0 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { $ as e, PlaceholderValue as i } from "@webstudio-is/template";
-const s = {
-  category: "typography",
-  description: "Groups content, like links in a menu or steps in a recipe.",
-  order: 4,
-  template: /* @__PURE__ */ n(e.List, { children: [
-    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") }),
-    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") }),
-    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") })
-  ] })
-};
-export {
-  s as meta
-};