@webstudio-is/sdk-components-react 0.0.0-588fe22 → 0.0.0-a5970cb

package/lib/html-embed.ws.js

@@ -1,25 +1,29 @@
 import { EmbedIcon as t } from "@webstudio-is/icons/svg";
+import { descendantComponent as n } from "@webstudio-is/sdk";
 import { props as e } from "./__generated__/html-embed.props.js";
-const i = {
-  div: [
-    {
-      property: "display",
-      value: { type: "keyword", value: "contents" }
-    },
-    {
-      property: "whiteSpaceCollapse",
-      value: { type: "keyword", value: "collapse" }
-    }
-  ]
-}, a = {
+const a = {
   category: "general",
-  type: "embed",
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: t,
-  presetStyle: i,
-  order: 2
-}, r = {
+  order: 2,
+  contentModel: {
+    category: "instance",
+    children: [n]
+  },
+  presetStyle: {
+    div: [
+      {
+        property: "display",
+        value: { type: "keyword", value: "contents" }
+      },
+      {
+        property: "white-space-collapse",
+        value: { type: "keyword", value: "collapse" }
+      }
+    ]
+  },
+  initialProps: ["class", "clientOnly", "executeScriptOnCanvas"],
   props: {
     ...e,
     clientOnly: {
@@ -37,10 +41,8 @@ const i = {
       language: "html",
       type: "string"
     }
-  },
-  initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
+  }
 };
 export {
-  a as meta,
-  r as propsMeta
+  a as meta
 };

package/lib/image.ws.js

@@ -1,13 +1,11 @@
-import { ImageIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { img as o } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/image.props.js";
-const a = {
+import { img as e } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/image.props.js";
+const o = {
   img: [
-    ...o,
+    ...e,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
     {
-      property: "maxWidth",
+      property: "max-width",
       value: { type: "unit", unit: "%", value: 100 }
     },
     // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
@@ -24,37 +22,32 @@ const a = {
       value: { type: "keyword", value: "auto" }
     }
   ]
-}, l = {
+}, i = {
   category: "media",
-  type: "embed",
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
-  icon: e,
-  states: t,
-  presetStyle: a,
-  order: 0
-}, d = {
-  props: {
-    ...r,
-    // Automatically generated props don't have the right control.
-    src: {
-      type: "string",
-      control: "file",
-      label: "Source",
-      required: !1
-    }
-  },
+  presetStyle: o,
+  order: 0,
   initialProps: [
     "id",
-    "className",
+    "class",
     "src",
     "width",
     "height",
     "alt",
     "loading",
     "optimize"
-  ]
+  ],
+  props: {
+    ...t,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: !1
+    }
+  }
 };
 export {
-  l as meta,
-  d as propsMeta
+  i as meta
 };

package/lib/input.js

@@ -1,17 +1,21 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-const a = n(
-  ({ children: d, type: t = "text", value: r, defaultValue: e, ...o }, p) => /* @__PURE__ */ i(
-    "input",
-    {
-      ...o,
-      defaultValue: r ?? e,
-      type: t,
-      ref: p
-    }
-  )
+import { forwardRef as m, useContext as s, createElement as c } from "react";
+import { ReactSdkContext as d } from "@webstudio-is/react-sdk/runtime";
+const f = m(
+  ({ value: t, defaultValue: r, checked: n, defaultChecked: e, ...o }, i) => {
+    const { renderer: p } = s(d), a = p === "canvas" ? String(t ?? r) + String(n ?? e) : void 0;
+    return /* @__PURE__ */ c(
+      "input",
+      {
+        ...o,
+        key: a,
+        defaultValue: t ?? r,
+        defaultChecked: n ?? e,
+        ref: i
+      }
+    );
+  }
 );
-a.displayName = "Input";
+f.displayName = "Input";
 export {
-  a as Input
+  f as Input
 };

package/lib/input.ws.js

@@ -1,54 +1,28 @@
-import { FormTextFieldIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { input as o } from "@webstudio-is/sdk/normalize.css";
-import { props as l } from "./__generated__/input.props.js";
-const r = {
+import { input as e } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/input.props.js";
+const p = {
   input: [
-    ...o,
+    ...e,
     {
       property: "display",
       value: { type: "keyword", value: "block" }
     }
   ]
-}, p = {
-  category: "forms",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  type: "control",
+}, l = {
   label: "Text Input",
-  description: "A single-line text input for collecting string data from your users.",
-  icon: e,
-  presetStyle: r,
-  order: 3,
-  states: [
-    ...t,
-    { selector: "::placeholder", label: "Placeholder" },
-    { selector: ":valid", label: "Valid" },
-    { selector: ":invalid", label: "Invalid" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" }
-    // Additional states will go into submenu
-    //{ selector: ":disabled", label: "Disabled" },
-    //{ selector: ":enabled", label: "Enabled" },
-    //{ selector: ":read-only", label: "Read Only" },
-    //{ selector: ":read-write", label: "Read Write" },
-  ]
-}, c = {
-  props: l,
+  presetStyle: p,
   initialProps: [
     "id",
-    "className",
+    "class",
     "name",
     "value",
     "type",
     "placeholder",
     "required",
-    "autoFocus"
-  ]
+    "autofocus"
+  ],
+  props: t
 };
 export {
-  p as meta,
-  c as propsMeta
+  l as meta
 };

package/lib/italic.ws.js

@@ -1,26 +1,11 @@
-import { TextItalicIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { i as o } from "@webstudio-is/sdk/normalize.css";
+import { i as t } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/italic.props.js";
-const r = {
-  i: [
-    ...o,
-    {
-      property: "fontStyle",
-      value: { type: "keyword", value: "italic" }
-    }
-  ]
-}, c = {
-  type: "rich-text-child",
+const e = {
   label: "Italic Text",
-  icon: t,
-  states: e,
-  presetStyle: r
-}, m = {
-  props: i,
-  initialProps: ["id", "className"]
+  presetStyle: { i: t },
+  initialProps: ["id", "class"],
+  props: i
 };
 export {
-  c as meta,
-  m as propsMeta
+  e as meta
 };

package/lib/label.ws.js

@@ -1,27 +1,16 @@
-import { LabelIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
 import { label as e } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/label.props.js";
-const a = {
+import { props as l } from "./__generated__/label.props.js";
+const o = {
   label: [
     ...e,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, i = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  type: "container",
+}, t = {
   label: "Input Label",
-  icon: t,
-  states: o,
-  presetStyle: a
-}, m = {
-  props: r,
-  initialProps: ["id", "className", "htmlFor"]
+  presetStyle: o,
+  initialProps: ["id", "class", "for"],
+  props: l
 };
 export {
-  i as meta,
-  m as propsMeta
+  t as meta
 };

package/lib/link.ws.js

@@ -1,47 +1,26 @@
-import { LinkIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { a as r } from "@webstudio-is/sdk/normalize.css";
-import { props as o } from "./__generated__/link.props.js";
-const a = {
+import { a as e } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/link.props.js";
+const t = {
   a: [
-    ...r,
+    ...e,
     {
       property: "display",
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, l = {
-  type: "container",
-  icon: e,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  presetStyle: a,
-  states: [
-    ...t,
-    {
-      selector: ":visited",
-      label: "Visited"
-    },
-    {
-      category: "component-states",
-      selector: "[aria-current=page]",
-      label: "Current page"
-    }
-  ]
-}, c = {
+}, p = {
+  presetStyle: t,
+  states: [{ label: "Current page", selector: "[aria-current=page]" }],
+  initialProps: ["id", "class", "href", "target", "prefetch", "download"],
   props: {
-    ...o,
+    ...r,
     href: {
       type: "string",
       control: "url",
       required: !1
     }
-  },
-  initialProps: ["id", "className", "href", "target", "prefetch", "download"]
+  }
 };
 export {
-  l as meta,
-  c as propsMeta
+  p as meta
 };

package/lib/list-item.ws.js

@@ -1,26 +1,10 @@
-import { ListItemIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { li as e } from "@webstudio-is/sdk/normalize.css";
+import { li as o } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/list-item.props.js";
-const s = {
-  li: e
-}, m = {
-  type: "container",
-  constraints: {
-    // cannot use parent relation here
-    // because list item can be put inside of collection or slot
-    // perhaps can be eventually fixed with tag matchers
-    relation: "ancestor",
-    component: { $eq: "List" }
-  },
-  icon: t,
-  states: o,
-  presetStyle: s
-}, c = {
-  props: r,
-  initialProps: ["id", "className"]
+const p = {
+  presetStyle: { li: o },
+  initialProps: ["id", "class"],
+  props: r
 };
 export {
-  m as meta,
-  c as propsMeta
+  p as meta
 };

package/lib/list.ws.js

@@ -1,48 +1,41 @@
-import { ListIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as r } from "@webstudio-is/sdk";
-import { ol as t, ul as o } from "@webstudio-is/sdk/normalize.css";
+import { ul as e, ol as r } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/list.props.js";
-const a = {
+const t = {
   ol: [
-    ...t,
+    ...r,
     {
-      property: "marginTop",
+      property: "margin-top",
       value: { type: "keyword", value: "0" }
     },
     {
-      property: "marginBottom",
+      property: "margin-bottom",
       value: { type: "keyword", value: "10px" }
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "keyword", value: "40px" }
     }
   ],
   ul: [
-    ...o,
+    ...e,
     {
-      property: "marginTop",
+      property: "margin-top",
       value: { type: "keyword", value: "0" }
     },
     {
-      property: "marginBottom",
+      property: "margin-bottom",
       value: { type: "keyword", value: "10px" }
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "keyword", value: "40px" }
     }
   ]
-}, d = {
-  type: "container",
-  icon: e,
-  states: r,
-  presetStyle: a
-}, s = {
-  props: p,
-  initialProps: ["id", "className", "ordered", "start", "reversed"]
+}, l = {
+  presetStyle: t,
+  initialProps: ["id", "class", "ordered", "start", "reversed"],
+  props: p
 };
 export {
-  d as meta,
-  s as propsMeta
+  l as meta
 };

package/lib/markdown-embed.js

@@ -1,14 +1,14 @@
 import { jsx as n } from "react/jsx-runtime";
 import { micromark as s } from "micromark";
-import { gfmTable as l, gfmTableHtml as i } from "micromark-extension-gfm-table";
+import { gfmTableHtml as l, gfmTable as i } from "micromark-extension-gfm-table";
 import { forwardRef as a, useMemo as f } from "react";
 const h = /* @__PURE__ */ a((r, e) => {
   const { code: o, children: c, ...t } = r, m = f(
     // support data uri protocol in images
     () => s(o ?? "", {
       allowDangerousProtocol: !0,
-      extensions: [l()],
-      htmlExtensions: [i()]
+      extensions: [i()],
+      htmlExtensions: [l()]
     }),
     [o]
   );

package/lib/markdown-embed.ws.js

@@ -1,8 +1,12 @@
 import { MarkdownEmbedIcon as e } from "@webstudio-is/icons/svg";
-import { props as o } from "./__generated__/markdown-embed.props.js";
-const t = {
-  type: "embed",
+import { descendantComponent as o } from "@webstudio-is/sdk";
+import { props as r } from "./__generated__/markdown-embed.props.js";
+const a = {
   icon: e,
+  contentModel: {
+    category: "instance",
+    children: [o]
+  },
   presetStyle: {
     div: [
       {
@@ -10,24 +14,22 @@ const t = {
         value: { type: "keyword", value: "contents" }
       },
       {
-        property: "whiteSpaceCollapse",
+        property: "white-space-collapse",
         value: { type: "keyword", value: "collapse" }
       }
     ]
-  }
-}, a = {
+  },
+  initialProps: ["class"],
   props: {
-    ...o,
+    ...r,
     code: {
       required: !0,
       control: "code",
       language: "markdown",
       type: "string"
     }
-  },
-  initialProps: ["className"]
+  }
 };
 export {
-  t as meta,
-  a as propsMeta
+  a as meta
 };

package/lib/metas.js

@@ -3,7 +3,7 @@ import { meta as m } from "./fragment.ws.js";
 import { meta as p } from "./html-embed.ws.js";
 import { meta as s } from "./markdown-embed.ws.js";
 import { meta as i } from "./body.ws.js";
-import { meta as d } from "./box.ws.js";
+import { meta as n } from "./box.ws.js";
 import { meta as u } from "./text.ws.js";
 import { meta as T } from "./heading.ws.js";
 import { meta as B } from "./paragraph.ws.js";
@@ -30,7 +30,7 @@ import { meta as me } from "./radio-button.ws.js";
 import { meta as pe } from "./checkbox.ws.js";
 import { meta as se } from "./vimeo.ws.js";
 import { meta as ie } from "./youtube.ws.js";
-import { meta as de } from "./vimeo-preview-image.ws.js";
+import { meta as ne } from "./vimeo-preview-image.ws.js";
 import { meta as ue } from "./vimeo-play-button.ws.js";
 import { meta as Te } from "./vimeo-spinner.ws.js";
 import { meta as Be } from "./xml-node.ws.js";
@@ -42,11 +42,12 @@ import { meta as Pe } from "./head-slot.ws.js";
 import { meta as we } from "./head-link.ws.js";
 import { meta as Ce } from "./head-meta.ws.js";
 import { meta as Me } from "./head-title.ws.js";
+import { meta as qe } from "./video.ws.js";
 export {
   D as Blockquote,
   i as Body,
   h as Bold,
-  d as Box,
+  n as Box,
   M as Button,
   pe as Checkbox,
   _ as CodeText,
@@ -80,9 +81,10 @@ export {
   u as Text,
   oe as Textarea,
   Le as Time,
+  qe as Video,
   se as Vimeo,
   ue as VimeoPlayButton,
-  de as VimeoPreviewImage,
+  ne as VimeoPreviewImage,
   Te as VimeoSpinner,
   Be as XmlNode,
   ke as XmlTime,

package/lib/option.js

@@ -1,6 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
-const i = t((o, p) => /* @__PURE__ */ r("option", { ...o, ref: p }));
+const i = t(
+  (o, p) => /* @__PURE__ */ r("option", { ...o, ref: p })
+);
 i.displayName = "Option";
 export {
   i as Option

package/lib/option.ws.js

@@ -1,9 +1,8 @@
-import { ItemIcon as e } from "@webstudio-is/icons/svg";
-import { props as t } from "./__generated__/option.props.js";
-const o = {
+import { props as e } from "./__generated__/option.props.js";
+const l = {
   option: [
     {
-      property: "backgroundColor",
+      property: "background-color",
       state: ":checked",
       value: {
         type: "rgb",
@@ -14,16 +13,10 @@ const o = {
       }
     }
   ]
-}, r = {
+}, a = {
   category: "hidden",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "Select" }
-  },
-  type: "control",
   description: "An item within a drop-down menu that users can select as their chosen value.",
-  icon: e,
-  presetStyle: o,
+  presetStyle: l,
   states: [
     // Applies when option is being activated (clicked)
     { selector: ":active", label: "Active" },
@@ -33,12 +26,10 @@ const o = {
     { selector: ":default", label: "Default" },
     { selector: ":hover", label: "Hover" },
     { selector: ":disabled", label: "Disabled" }
-  ]
-}, c = {
-  props: t,
-  initialProps: ["label", "selected", "value", "label", "disabled"]
+  ],
+  initialProps: ["label", "value", "label", "disabled"],
+  props: e
 };
 export {
-  r as meta,
-  c as propsMeta
+  a as meta
 };

package/lib/paragraph.ws.js

@@ -1,23 +1,10 @@
-import { TextAlignLeftIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { p as r } from "@webstudio-is/sdk/normalize.css";
-import { props as e } from "./__generated__/paragraph.props.js";
-const n = {
-  p: r
-}, m = {
-  type: "container",
-  icon: t,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "Paragraph" }
-  },
-  states: o,
-  presetStyle: n
-}, c = {
-  props: e,
-  initialProps: ["id", "className"]
+import { p as o } from "@webstudio-is/sdk/normalize.css";
+import { props as p } from "./__generated__/paragraph.props.js";
+const i = {
+  presetStyle: { p: o },
+  initialProps: ["id", "class"],
+  props: p
 };
 export {
-  m as meta,
-  c as propsMeta
+  i as meta
 };