@webstudio-is/sdk-components-react 0.210.0 → 0.212.0

package/lib/box.ws.js

@@ -1,31 +1,51 @@
 import { BoxIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/sdk";
-import { div as o, address as r, article as a, aside as i, figure as n, footer as s, header as c, main as p, nav as d, section as m } from "@webstudio-is/sdk/normalize.css";
+import { div as r, address as o, article as a, aside as i, figure as s, footer as n, header as p, main as c, nav as d, section as m } from "@webstudio-is/sdk/normalize.css";
 import { props as f } from "./__generated__/box.props.js";
-const g = {
-  div: o,
-  address: r,
-  article: a,
-  aside: i,
-  figure: n,
-  footer: s,
-  header: c,
-  main: p,
-  nav: d,
-  section: m
-}, v = {
+const v = {
   category: "general",
   type: "container",
   description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
   icon: t,
   states: e,
-  presetStyle: g,
+  presetStyle: {
+    div: r,
+    address: o,
+    article: a,
+    aside: i,
+    figure: s,
+    footer: n,
+    header: p,
+    main: c,
+    nav: d,
+    section: m
+  },
   order: 0
-}, b = {
-  props: f,
-  initialProps: ["id", "className", "tag"]
+}, y = {
+  props: {
+    ...f,
+    tag: {
+      required: !0,
+      control: "tag",
+      type: "string",
+      options: [
+        "div",
+        "header",
+        "footer",
+        "nav",
+        "main",
+        "section",
+        "article",
+        "aside",
+        "address",
+        "figure",
+        "span"
+      ]
+    }
+  },
+  initialProps: ["tag", "id", "className"]
 };
 export {
   v as meta,
-  b as propsMeta
+  y as propsMeta
 };

package/lib/checkbox.template.js

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

package/lib/components.js

@@ -10,7 +10,7 @@ import { Paragraph as c } from "./paragraph.js";
 import { Link as B, Link as L } from "./link.js";
 import { Span as g } from "./span.js";
 import { Bold as I } from "./bold.js";
-import { Italic as V } from "./italic.js";
+import { Italic as h } from "./italic.js";
 import { Superscript as R } from "./superscript.js";
 import { Subscript as y } from "./subscript.js";
 import { Button as E } from "./button.js";
@@ -36,11 +36,12 @@ import { XmlNode as co } from "./xml-node.js";
 import { XmlTime as Bo } from "./xml-time.js";
 import { Time as Ho } from "./time.js";
 import { Select as Fo } from "./select.js";
-import { Option as ho } from "./option.js";
+import { Option as Vo } from "./option.js";
 import { HeadSlot as Po } from "./head-slot.js";
 import { HeadLink as wo } from "./head-link.js";
 import { HeadMeta as Co } from "./head-meta.js";
 import { HeadTitle as Mo } from "./head-title.js";
+import { Video as qo } from "./video.js";
 export {
   z as Blockquote,
   n as Body,
@@ -59,13 +60,13 @@ export {
   x as HtmlEmbed,
   Y as Image,
   X as Input,
-  V as Italic,
+  h as Italic,
   $ as Label,
   B as Link,
   D as List,
   J as ListItem,
   a as MarkdownEmbed,
-  ho as Option,
+  Vo as Option,
   c as Paragraph,
   to as RadioButton,
   O as RemixForm,
@@ -79,6 +80,7 @@ export {
   k as Text,
   ro as Textarea,
   Ho as Time,
+  qo as Video,
   fo as Vimeo,
   ko as VimeoPlayButton,
   lo as VimeoPreviewImage,

package/lib/heading.js

@@ -1,9 +1,12 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-const d = "h1", f = n(
-  ({ tag: a = d, children: o, ...r }, t) => /* @__PURE__ */ e(a, { ...r, ref: t, children: o })
+import { forwardRef as o, createElement as g } from "react";
+import { getTagFromProps as m } from "@webstudio-is/sdk/runtime";
+const n = "h1", d = o(
+  ({ tag: e, ...t }, a) => {
+    const r = m(t) ?? e ?? n;
+    return g(r, { ...t, ref: a });
+  }
 );
-f.displayName = "Heading";
+d.displayName = "Heading";
 export {
-  f as Heading
+  d as Heading
 };

package/lib/heading.ws.js

@@ -1,25 +1,33 @@
 import { HeadingIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
-import { h1 as e, h2 as r, h3 as a, h4 as p, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
-import { props as m } from "./__generated__/heading.props.js";
-const n = {
-  h1: e,
-  h2: r,
-  h3: a,
-  h4: p,
-  h5: i,
-  h6: s
-}, f = {
+import { h1 as r, h2 as e, h3 as p, h4 as a, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
+import { props as h } from "./__generated__/heading.props.js";
+const d = {
   type: "container",
   placeholder: "Heading",
   icon: t,
   states: o,
-  presetStyle: n
+  presetStyle: {
+    h1: r,
+    h2: e,
+    h3: p,
+    h4: a,
+    h5: i,
+    h6: s
+  }
 }, g = {
-  props: m,
-  initialProps: ["id", "className", "tag"]
+  props: {
+    ...h,
+    tag: {
+      required: !0,
+      control: "tag",
+      type: "string",
+      options: ["h1", "h2", "h3", "h4", "h5", "h6"]
+    }
+  },
+  initialProps: ["tag", "id", "className"]
 };
 export {
-  f as meta,
+  d as meta,
   g 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/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/text.js

@@ -1,10 +1,12 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-const m = "div", s = f(
-  ({ tag: t = m, children: o, ...r }, a) => /* @__PURE__ */ e(t, { ...r, ref: a, children: o })
+import { forwardRef as a, createElement as m } from "react";
+import { getTagFromProps as f } from "@webstudio-is/sdk/runtime";
+const g = "div", n = a(
+  ({ tag: e, ...t }, r) => {
+    const o = f(t) ?? e ?? g;
+    return m(o, { ...t, ref: r });
+  }
 );
-s.displayName = "Text";
+n.displayName = "Text";
 export {
-  s as Text,
-  m as defaultTag
+  n as Text
 };

package/lib/text.ws.js

@@ -2,24 +2,32 @@ import { TextIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/sdk";
 import { div as o } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/text.props.js";
-const r = {
-  div: [
-    ...o,
-    {
-      property: "min-height",
-      value: { type: "unit", unit: "em", value: 1 }
-    }
-  ]
-}, n = {
+const s = {
   type: "container",
   icon: t,
   states: e,
-  presetStyle: r
-}, c = {
-  props: i,
-  initialProps: ["id", "className", "tag"]
+  presetStyle: {
+    div: [
+      ...o,
+      {
+        property: "min-height",
+        value: { type: "unit", unit: "em", value: 1 }
+      }
+    ]
+  }
+}, m = {
+  props: {
+    ...i,
+    tag: {
+      required: !0,
+      control: "tag",
+      type: "string",
+      options: ["div", "cite", "figcaption", "span"]
+    }
+  },
+  initialProps: ["tag", "id", "className"]
 };
 export {
-  n as meta,
-  c as propsMeta
+  s as meta,
+  m as propsMeta
 };

package/lib/types/__generated__/video.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/sdk";
+export declare const props: Record<string, PropMeta>;

package/lib/types/box.d.ts

@@ -1,8 +1,7 @@
 import { type ComponentProps } from "react";
-export declare const defaultTag = "div";
+declare const defaultTag = "div";
 type Props = ComponentProps<typeof defaultTag> & {
-    /** Use this property to change the HTML tag of this element to semantically structure and describe the content of a webpage. This can be important for accessibility tools and search engine optimization. */
-    tag?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure";
+    tag?: string;
 };
 export declare const Box: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/types/components.d.ts

@@ -42,3 +42,4 @@ export { HeadSlot } from "./head-slot";
 export { HeadLink } from "./head-link";
 export { HeadMeta } from "./head-meta";
 export { HeadTitle } from "./head-title";
+export { Video } from "./video";

package/lib/types/heading.d.ts

@@ -1,8 +1,7 @@
 import { type ComponentProps } from "react";
 declare const defaultTag = "h1";
 type Props = ComponentProps<typeof defaultTag> & {
-    /** Use HTML heading levels (h1-h6) to structure content hierarchically, with h1 as the main title and subsequent levels representing sub-sections. Maintain a logical order and avoid skipping levels to ensure consistent and meaningful organization. */
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    tag?: string;
 };
 export declare const Heading: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
 export {};

package/lib/types/link.d.ts

@@ -1,5 +1,5 @@
 export declare const defaultTag = "a";
-export declare const Link: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "target" | "download"> & {
+export declare const Link: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "download" | "target"> & {
     target?: "_self" | "_blank" | "_parent" | "_top";
     download?: boolean;
     prefetch?: "none" | "intent" | "render" | "viewport";

package/lib/types/metas.d.ts

@@ -42,3 +42,4 @@ export { meta as HeadSlot } from "./head-slot.ws";
 export { meta as HeadLink } from "./head-link.ws";
 export { meta as HeadMeta } from "./head-meta.ws";
 export { meta as HeadTitle } from "./head-title.ws";
+export { meta as Video } from "./video.ws";

package/lib/types/props.d.ts

@@ -42,3 +42,4 @@ export { propsMeta as HeadSlot } from "./head-slot.ws";
 export { propsMeta as HeadLink } from "./head-link.ws";
 export { propsMeta as HeadMeta } from "./head-meta.ws";
 export { propsMeta as HeadTitle } from "./head-title.ws";
+export { propsMeta as Video } from "./video.ws";

package/lib/types/text.d.ts

@@ -1,8 +1,7 @@
 import { type ComponentProps } from "react";
-export declare const defaultTag = "div";
+declare const defaultTag = "div";
 type Props = ComponentProps<typeof defaultTag> & {
-    /** Use this property to change the HTML tag of this element to semantically structure and describe the content of a webpage. This can be important for accessibility tools and search engine optimization. */
-    tag?: "div" | "span" | "figcaption" | "cite";
+    tag?: string;
 };
 export declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/types/video.d.ts

@@ -0,0 +1,7 @@
+import type { Atom } from "nanostores";
+export declare const defaultTag = "video";
+export declare const Video: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLVideoElement> & import("react").VideoHTMLAttributes<HTMLVideoElement> & {
+    $progress?: Atom<number | undefined>;
+    $visible?: Atom<boolean>;
+    $timeline?: boolean;
+}, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;

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

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

package/lib/video.js

@@ -0,0 +1,46 @@
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as m, useId as V, useEffect as _ } from "react";
+const a = "data-ws-video-id", H = {
+  HAVE_NOTHING: 0,
+  HAVE_METADATA: 1,
+  HAVE_CURRENT_DATA: 2,
+  HAVE_FUTURE_DATA: 3,
+  HAVE_ENOUGH_DATA: 4
+}, N = m(({ $progress: r, $visible: n, $timeline: f, children: d, ...c }, A) => {
+  const s = V(), l = {
+    [a]: s
+  };
+  return _(() => {
+    if (r === void 0 || n === void 0)
+      return;
+    const e = document.querySelector(`[${a}="${s}"]`);
+    if (e === null || !(e instanceof HTMLVideoElement))
+      return;
+    if (e.play().catch(() => {
+    }), e.pause(), f)
+      return r.subscribe((i) => {
+        if (e.readyState < H.HAVE_METADATA || (e.paused || e.pause(), e.seeking))
+          return;
+        let u = e.duration;
+        Number.isNaN(u) || (Number.isFinite(u) || (u = 60), e.currentTime = (i ?? 0) * u);
+      });
+    let t = !1, o = !1;
+    const T = n.subscribe((i) => {
+      o = i, o === !1 && t === !1 && !e.loop && (e.currentTime = 0);
+    }), E = r.subscribe((i) => {
+      if (t && (i === void 0 || i === 0 || i === 1)) {
+        t = !1, e.pause(), o === !1 && t === !1 && !e.loop && (e.currentTime = 0);
+        return;
+      }
+      t || (t = !0, e.ended || e.play().catch(() => {
+      }));
+    });
+    return () => {
+      E(), T();
+    };
+  }, [r, f, n, s]), /* @__PURE__ */ b("video", { ...c, ...l, ref: A, children: d });
+});
+N.displayName = "Video";
+export {
+  N as Video
+};

package/lib/video.ws.js

@@ -0,0 +1,34 @@
+import { VideoIcon as o } from "@webstudio-is/icons/svg";
+import "@webstudio-is/sdk";
+import { props as t } from "./__generated__/video.props.js";
+const r = {
+  type: "control",
+  icon: o,
+  presetStyle: {
+    video: [
+      {
+        property: "max-width",
+        value: { type: "unit", unit: "%", value: 100 }
+      }
+    ]
+  }
+}, a = {
+  props: t,
+  initialProps: [
+    "id",
+    "className",
+    "width",
+    "height",
+    "src",
+    "autoPlay",
+    "controls",
+    "loop",
+    "muted",
+    "preload",
+    "playsInline"
+  ]
+};
+export {
+  r as meta,
+  a as propsMeta
+};