@webstudio-is/sdk-components-react 0.194.0 → 0.196.0

package/lib/text.ws.js

@@ -1,8 +1,8 @@
 import { TextIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/react-sdk";
 import { div as o } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/text.props.js";
-const r = {
+import { props as r } from "./__generated__/text.props.js";
+const n = {
   div: [
     ...o,
     {
@@ -11,12 +11,12 @@ const r = {
     }
   ]
 }, s = {
-  category: "text",
+  category: "typography",
   type: "container",
   description: "A generic container for any text content that is not a heading or a link.",
   icon: t,
   states: e,
-  presetStyle: r,
+  presetStyle: n,
   order: 0,
   template: [
     {
@@ -32,7 +32,7 @@ const r = {
     }
   ]
 }, m = {
-  props: n,
+  props: r,
   initialProps: ["id", "className", "tag"]
 };
 export {

package/lib/time.ws.js

@@ -5,18 +5,17 @@ import { props as o } from "./__generated__/time.props.js";
 const r = {
   time: a
 }, s = {
-  category: "data",
+  category: "localization",
   type: "container",
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: t,
   states: e,
-  presetStyle: r,
-  order: 5
-}, d = {
+  presetStyle: r
+}, c = {
   props: o,
   initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"]
 };
 export {
   s as meta,
-  d as propsMeta
+  c as propsMeta
 };

package/lib/types/__generated__/webhook-form.props.d.ts

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

package/lib/types/button.template.d.ts

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

package/lib/types/components.d.ts

@@ -16,7 +16,7 @@ export { Superscript } from "./superscript";
 export { Subscript } from "./subscript";
 export { Button } from "./button";
 export { Input } from "./input";
-export { Form } from "./form";
+export { WebhookForm as Form } from "./webhook-form";
 export { Form as RemixForm } from "./form";
 export { Image } from "./image";
 export { Blockquote } from "./blockquote";

package/lib/types/link.d.ts

@@ -2,6 +2,10 @@ export declare const defaultTag = "a";
 export declare const Link: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "target" | "download"> & {
     target?: "_self" | "_blank" | "_parent" | "_top";
     download?: boolean;
+    prefetch?: "none" | "intent" | "render" | "viewport";
+    preventScrollReset?: boolean;
+    reloadDocument?: boolean;
+    replace?: boolean;
 } & {
     $webstudio$canvasOnly$assetId?: string | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/lib/types/list.template.d.ts

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

package/lib/types/metas.d.ts

@@ -17,7 +17,7 @@ export { meta as Superscript } from "./superscript.ws";
 export { meta as Subscript } from "./subscript.ws";
 export { meta as Button } from "./button.ws";
 export { meta as Input } from "./input.ws";
-export { meta as Form } from "./form.ws";
+export { meta as Form } from "./webhook-form.ws";
 export { meta as RemixForm } from "./form.ws";
 export { meta as Image } from "./image.ws";
 export { meta as Blockquote } from "./blockquote.ws";

package/lib/types/props.d.ts

@@ -16,7 +16,7 @@ export { propsMeta as Superscript } from "./superscript.ws";
 export { propsMeta as Subscript } from "./subscript.ws";
 export { propsMeta as Button } from "./button.ws";
 export { propsMeta as Input } from "./input.ws";
-export { propsMeta as Form } from "./form.ws";
+export { propsMeta as Form } from "./webhook-form.ws";
 export { propsMeta as RemixForm } from "./form.ws";
 export { propsMeta as Image } from "./image.ws";
 export { propsMeta as Blockquote } from "./blockquote.ws";

package/lib/types/rich-text-link.d.ts

@@ -1,2 +1 @@
-import { Link } from "./link";
-export declare const RichTextLink: typeof Link;
+export { Link as RichTextLink } from "./link";

package/lib/types/templates.d.ts

@@ -0,0 +1,3 @@
+export { meta as Button } from "./button.template";
+export { meta as List } from "./list.template";
+export { meta as Vimeo } from "./vimeo.template";

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

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

package/lib/types/webhook-form.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentProps } from "react";
+type Props = ComponentProps<"form"> & {
+    encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
+    /** Use this property to reveal the Success and Error states on the canvas so they can be styled. The Initial state is displayed when the page first opens. The Success and Error states are displayed depending on whether the Form submits successfully or unsuccessfully. */
+    state?: "initial" | "success" | "error";
+};
+export declare const WebhookForm: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
+export {};

package/lib/types/webhook-form.ws.d.ts

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

package/lib/vimeo.template.js

@@ -0,0 +1,92 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { SpinnerIcon as r, PlayIcon as a } from "@webstudio-is/icons/svg";
+import { $ as e, css as t } from "@webstudio-is/template";
+const p = {
+  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,
+    {
+      "ws:style": t`
+        position: relative;
+        aspect-ratio: 640/360;
+        width: 100%;
+      `,
+      children: [
+        /* @__PURE__ */ o(
+          e.VimeoPreviewImage,
+          {
+            "ws:style": t`
+          position: absolute;
+          object-fit: cover;
+          object-position: cover;
+          width: 100%;
+          height: 100%;
+          border-radius: 20px;
+        `,
+            alt: "Vimeo video preview image",
+            sizes: "100vw"
+          }
+        ),
+        /* @__PURE__ */ o(
+          e.VimeoSpinner,
+          {
+            "ws:label": "Spinner",
+            "ws:style": t`
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 70px;
+          height: 70px;
+          margin-top: -35px;
+          margin-left: -35px;
+        `,
+            children: /* @__PURE__ */ o(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+          }
+        ),
+        /* @__PURE__ */ o(
+          e.VimeoPlayButton,
+          {
+            "ws:style": t`
+          position: absolute;
+          width: 140px;
+          height: 80px;
+          top: 50%;
+          left: 50%;
+          margin-top: -40px;
+          margin-left: -70px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-style: none;
+          border-radius: 5px;
+          cursor: pointer;
+          background-color: rgb(18, 18, 18);
+          color: rgb(255, 255, 255);
+          &:hover {
+            background-color: rgb(0, 173, 239);
+          }
+        `,
+            "aria-label": "Play button",
+            children: /* @__PURE__ */ o(
+              e.Box,
+              {
+                "ws:label": "Play Icon",
+                "ws:style": t`
+            width: 60px;
+            height: 60px;
+          `,
+                "aria-hidden": !0,
+                children: /* @__PURE__ */ o(e.HtmlEmbed, { "ws:label": "Play SVG", code: a })
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  p as meta
+};

package/lib/vimeo.ws.js

@@ -1,316 +1,26 @@
-import { VimeoIcon as e, SpinnerIcon as t, PlayIcon as p } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { VimeoIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
 import { div as r } from "@webstudio-is/sdk/normalize.css";
-import { props as a } from "./__generated__/vimeo.props.js";
-const n = {
+import { props as n } from "./__generated__/vimeo.props.js";
+const i = {
   div: r
-}, s = {
-  category: "media",
+}, c = {
   type: "container",
-  description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
-  order: 1,
-  icon: e,
-  states: o,
-  presetStyle: n,
+  icon: o,
+  states: t,
+  presetStyle: i,
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
-  },
-  template: [
-    {
-      type: "instance",
-      component: "Vimeo",
-      styles: [
-        {
-          property: "position",
-          value: { type: "keyword", value: "relative" }
-        },
-        {
-          property: "aspectRatio",
-          value: { type: "keyword", value: "640/360" }
-        },
-        {
-          property: "width",
-          value: { type: "unit", value: 100, unit: "%" }
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "VimeoPreviewImage",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "objectFit",
-              value: { type: "keyword", value: "cover" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "objectPosition",
-              value: { type: "keyword", value: "cover" }
-            }
-          ],
-          children: [],
-          props: [
-            {
-              type: "string",
-              name: "alt",
-              value: "Vimeo video preview image"
-            },
-            {
-              type: "string",
-              name: "sizes",
-              value: "100vw"
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "VimeoSpinner",
-          label: "Spinner",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -35, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -35, unit: "px" }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Spinner SVG",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: t
-                }
-              ],
-              children: []
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "VimeoPlayButton",
-          props: [
-            {
-              type: "string",
-              name: "aria-label",
-              value: "Play button"
-            }
-          ],
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 140, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 80, unit: "px" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -40, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -70, unit: "px" }
-            },
-            {
-              property: "display",
-              value: { type: "keyword", value: "flex" }
-            },
-            {
-              property: "alignItems",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "justifyContent",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "borderTopStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderRightStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderBottomStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderLeftStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "cursor",
-              value: { type: "keyword", value: "pointer" }
-            },
-            {
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 18,
-                g: 18,
-                b: 18,
-                alpha: 1
-              }
-            },
-            {
-              property: "color",
-              value: {
-                type: "rgb",
-                r: 255,
-                g: 255,
-                b: 255,
-                alpha: 1
-              }
-            },
-            {
-              state: ":hover",
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 0,
-                g: 173,
-                b: 239,
-                alpha: 1
-              }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "Box",
-              label: "Play Icon",
-              styles: [
-                {
-                  property: "width",
-                  value: { type: "unit", value: 60, unit: "px" }
-                },
-                {
-                  property: "height",
-                  value: { type: "unit", value: 60, unit: "px" }
-                }
-              ],
-              props: [
-                {
-                  type: "string",
-                  name: "aria-hidden",
-                  value: "true"
-                }
-              ],
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Play SVG",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: p
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}, u = [
+  }
+}, s = [
   "id",
   "className",
   "url",
   "quality",
+  "loading",
   "showPreview",
   "autoplay",
-  "loading",
-  "backgroundMode",
   "doNotTrack",
   "loop",
   "muted",
@@ -319,11 +29,11 @@ const n = {
   "showTitle",
   "showControls",
   "controlsColor"
-], d = {
-  props: a,
-  initialProps: u
+], m = {
+  props: n,
+  initialProps: s
 };
 export {
-  s as meta,
-  d as propsMeta
+  c as meta,
+  m as propsMeta
 };

package/lib/webhook-form.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const i = e(
+  ({ children: o, state: a = "initial", ...r }, m) => /* @__PURE__ */ t("form", { ...r, ref: m, children: o })
+);
+i.displayName = "WebhookForm";
+export {
+  i as WebhookForm
+};