@webstudio-is/sdk-components-react 0.0.0-c1d6247 → 0.0.0-ca00e2a

package/lib/input.ws.js

@@ -1,7 +1,7 @@
 import { FormTextFieldIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
+import { defaultStates as l } from "@webstudio-is/sdk";
 import { input as o } from "@webstudio-is/sdk/normalize.css";
-import { props as l } from "./__generated__/input.props.js";
+import { props as t } from "./__generated__/input.props.js";
 const r = {
   input: [
     ...o,
@@ -10,20 +10,15 @@ const r = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, p = {
+}, c = {
   category: "forms",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  type: "control",
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
   icon: e,
   presetStyle: r,
   order: 3,
   states: [
-    ...t,
+    ...l,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },
@@ -35,8 +30,8 @@ const r = {
     //{ selector: ":read-only", label: "Read Only" },
     //{ selector: ":read-write", label: "Read Write" },
   ]
-}, c = {
-  props: l,
+}, n = {
+  props: t,
   initialProps: [
     "id",
     "className",
@@ -49,6 +44,6 @@ const r = {
   ]
 };
 export {
-  p as meta,
-  c as propsMeta
+  c as meta,
+  n as propsMeta
 };

package/lib/italic.ws.js

@@ -1,26 +1,25 @@
 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 { props as i } from "./__generated__/italic.props.js";
-const r = {
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { i as e } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/italic.props.js";
+const i = {
   i: [
-    ...o,
+    ...e,
     {
-      property: "fontStyle",
+      property: "font-style",
       value: { type: "keyword", value: "italic" }
     }
   ]
-}, c = {
-  type: "rich-text-child",
+}, m = {
   label: "Italic Text",
   icon: t,
-  states: e,
-  presetStyle: r
-}, m = {
-  props: i,
+  states: o,
+  presetStyle: i
+}, c = {
+  props: r,
   initialProps: ["id", "className"]
 };
 export {
-  c as meta,
-  m as propsMeta
+  m as meta,
+  c as propsMeta
 };

package/lib/label.ws.js

@@ -1,27 +1,22 @@
 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 r = {
   label: [
     ...e,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
 }, i = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  type: "container",
   label: "Input Label",
   icon: t,
   states: o,
-  presetStyle: a
-}, m = {
-  props: r,
+  presetStyle: r
+}, c = {
+  props: l,
   initialProps: ["id", "className", "htmlFor"]
 };
 export {
   i as meta,
-  m as propsMeta
+  c as propsMeta
 };

package/lib/link.ws.js

@@ -10,13 +10,9 @@ const a = {
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, l = {
-  type: "container",
+}, n = {
+  placeholder: "Link",
   icon: e,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
   presetStyle: a,
   states: [
     ...t,
@@ -42,6 +38,6 @@ const a = {
   initialProps: ["id", "className", "href", "target", "prefetch", "download"]
 };
 export {
-  l as meta,
+  n as meta,
   c as propsMeta
 };

package/lib/list-item.ws.js

@@ -2,25 +2,18 @@ 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 { 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" }
-  },
+const a = {
+  placeholder: "List item",
   icon: t,
   states: o,
-  presetStyle: s
-}, c = {
+  presetStyle: {
+    li: e
+  }
+}, l = {
   props: r,
   initialProps: ["id", "className"]
 };
 export {
-  m as meta,
-  c as propsMeta
+  a as meta,
+  l as propsMeta
 };

package/lib/list.ws.js

@@ -1,42 +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 { defaultStates as t } from "@webstudio-is/sdk";
+import { ul as r, ol as o } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/list.props.js";
 const a = {
   ol: [
-    ...t,
+    ...o,
     {
-      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,
+    ...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" }
     }
   ]
 }, d = {
-  type: "container",
   icon: e,
-  states: r,
+  states: t,
   presetStyle: a
 }, s = {
   props: p,

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 t } from "./__generated__/markdown-embed.props.js";
+const a = {
   icon: e,
+  contentModel: {
+    category: "instance",
+    children: [o]
+  },
   presetStyle: {
     div: [
       {
@@ -10,14 +14,14 @@ const t = {
         value: { type: "keyword", value: "contents" }
       },
       {
-        property: "whiteSpaceCollapse",
+        property: "white-space-collapse",
         value: { type: "keyword", value: "collapse" }
       }
     ]
   }
-}, a = {
+}, c = {
   props: {
-    ...o,
+    ...t,
     code: {
       required: !0,
       control: "code",
@@ -28,6 +32,6 @@ const t = {
   initialProps: ["className"]
 };
 export {
-  t as meta,
-  a as propsMeta
+  a as meta,
+  c as propsMeta
 };

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.ws.js

@@ -1,9 +1,9 @@
 import { ItemIcon as e } from "@webstudio-is/icons/svg";
 import { props as t } from "./__generated__/option.props.js";
-const o = {
+const l = {
   option: [
     {
-      property: "backgroundColor",
+      property: "background-color",
       state: ":checked",
       value: {
         type: "rgb",
@@ -16,14 +16,9 @@ const o = {
   ]
 }, r = {
   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" },

package/lib/paragraph.ws.js

@@ -2,22 +2,18 @@ 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 = {
+const p = {
   p: r
-}, m = {
-  type: "container",
+}, c = {
+  placeholder: "Paragraph",
   icon: t,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "Paragraph" }
-  },
   states: o,
-  presetStyle: n
-}, c = {
+  presetStyle: p
+}, l = {
   props: e,
   initialProps: ["id", "className"]
 };
 export {
-  m as meta,
-  c as propsMeta
+  c as meta,
+  l as propsMeta
 };

package/lib/props.js

@@ -3,7 +3,7 @@ import { propsMeta as t } from "./fragment.ws.js";
 import { propsMeta as s } from "./html-embed.ws.js";
 import { propsMeta as x } from "./markdown-embed.ws.js";
 import { propsMeta as f } from "./body.ws.js";
-import { propsMeta as n } from "./box.ws.js";
+import { propsMeta as d } from "./box.ws.js";
 import { propsMeta as l } from "./text.ws.js";
 import { propsMeta as S } from "./heading.ws.js";
 import { propsMeta as c } from "./paragraph.ws.js";
@@ -42,11 +42,12 @@ import { propsMeta as Po } from "./head-slot.ws.js";
 import { propsMeta as wo } from "./head-link.ws.js";
 import { propsMeta as Co } from "./head-meta.ws.js";
 import { propsMeta as Xo } from "./head-title.ws.js";
+import { propsMeta as vo } from "./video.ws.js";
 export {
   D as Blockquote,
   f as Body,
   V as Bold,
-  n as Box,
+  d as Box,
   E as Button,
   so as Checkbox,
   _ as CodeText,
@@ -80,6 +81,7 @@ export {
   l as Text,
   po as Textarea,
   Lo as Time,
+  vo as Video,
   xo as Vimeo,
   uo as VimeoPlayButton,
   no as VimeoPreviewImage,

package/lib/radio-button.template.js

@@ -6,7 +6,7 @@ const r = {
   order: 5,
   template: /* @__PURE__ */ t(e.Label, { "ws:label": "Radio Field", children: [
     /* @__PURE__ */ o(e.RadioButton, {}),
-    /* @__PURE__ */ o(e.Text, { "ws:label": "Radio Label", tag: "span", children: new a("Radio") })
+    /* @__PURE__ */ o(e.Text, { "ws:label": "Radio Label", "ws:tag": "span", children: new a("Radio") })
   ] })
 };
 export {

package/lib/radio-button.ws.js

@@ -2,23 +2,18 @@ import { RadioCheckedIcon as e } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/sdk";
 import { radio as o } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/radio-button.props.js";
-const i = {
+const a = {
   input: [
     ...o,
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, p = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  type: "control",
+}, s = {
   label: "Radio",
   icon: e,
-  presetStyle: i,
+  presetStyle: a,
   states: [
     ...t,
     { selector: ":checked", label: "Checked" },
@@ -30,11 +25,11 @@ const i = {
     //{ selector: ":read-only", label: "Read Only" },
     //{ selector: ":read-write", label: "Read Write" },
   ]
-}, s = {
+}, m = {
   props: r,
   initialProps: ["id", "className", "name", "value", "required", "checked"]
 };
 export {
-  p as meta,
-  s as propsMeta
+  s as meta,
+  m as propsMeta
 };

package/lib/rich-text-link.ws.js

@@ -1,9 +1,6 @@
-import { meta as t, propsMeta as e } from "./link.ws.js";
-const a = {
-  ...t,
-  type: "rich-text-child"
-}, o = e;
+import { meta as t, propsMeta as a } from "./link.ws.js";
+const p = t, e = a;
 export {
-  a as meta,
-  o as propsMeta
+  p as meta,
+  e as propsMeta
 };

package/lib/select.ws.js

@@ -1,33 +1,28 @@
 import { SelectIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { select as l } from "@webstudio-is/sdk/normalize.css";
-import { props as o } from "./__generated__/select.props.js";
+import { defaultStates as l } from "@webstudio-is/sdk";
+import { select as o } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/select.props.js";
 const r = {
   select: [
-    ...l,
+    ...o,
     {
       property: "display",
       value: { type: "keyword", value: "block" }
     }
   ]
 }, c = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  type: "container",
   icon: e,
   presetStyle: r,
   states: [
-    ...t,
+    ...l,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },
     { selector: ":required", label: "Required" },
     { selector: ":optional", label: "Optional" }
   ]
-}, p = {
-  props: o,
+}, d = {
+  props: t,
   initialProps: [
     "id",
     "className",
@@ -40,5 +35,5 @@ const r = {
 };
 export {
   c as meta,
-  p as propsMeta
+  d as propsMeta
 };

package/lib/separator.ws.js

@@ -10,39 +10,38 @@ const p = {
       value: { type: "keyword", value: "1px" }
     },
     {
-      property: "backgroundColor",
+      property: "background-color",
       value: { type: "keyword", value: "gray" }
     },
     {
-      property: "borderTopStyle",
+      property: "border-top-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderRightStyle",
+      property: "border-right-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderLeftStyle",
+      property: "border-left-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderBottomStyle",
+      property: "border-bottom-style",
       value: { type: "keyword", value: "none" }
     }
   ]
 }, n = {
   category: "general",
-  type: "embed",
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: e,
   states: o,
   presetStyle: p,
   order: 3
-}, d = {
+}, s = {
   props: t,
   initialProps: ["id", "className"]
 };
 export {
   n as meta,
-  d as propsMeta
+  s as propsMeta
 };

package/lib/shared/video.js

@@ -0,0 +1,13 @@
+import { createContext as o } from "react";
+const s = (t) => {
+  const e = "ontouchstart" in window;
+  (window.matchMedia("(max-width: 1024px)").matches || e) && t.requestFullscreen();
+}, c = o({
+  onInitPlayer: () => {
+  },
+  status: "initial"
+});
+export {
+  c as VideoContext,
+  s as requestFullscreen
+};

package/lib/slot.ws.js

@@ -1,9 +1,8 @@
-import { SlotComponentIcon as t } from "@webstudio-is/icons/svg";
+import { SlotComponentIcon as o } from "@webstudio-is/icons/svg";
 const e = {
   category: "general",
-  type: "container",
   description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
-  icon: t,
+  icon: o,
   order: 5
 }, n = {
   props: {}

package/lib/span.ws.js

@@ -1,20 +1,19 @@
 import { PaintBrushIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
 import { span as r } from "@webstudio-is/sdk/normalize.css";
-import { props as e } from "./__generated__/span.props.js";
-const s = {
+import { props as s } from "./__generated__/span.props.js";
+const e = {
   span: r
-}, c = {
-  type: "rich-text-child",
+}, n = {
   label: "Text",
   icon: t,
   states: o,
-  presetStyle: s
-}, n = {
-  props: e,
+  presetStyle: e
+}, c = {
+  props: s,
   initialProps: ["id", "className"]
 };
 export {
-  c as meta,
-  n as propsMeta
+  n as meta,
+  c as propsMeta
 };