@webstudio-is/sdk-components-react 0.0.0-017f1bd

package/lib/image.js

@@ -0,0 +1,38 @@
+import { jsx as g } from "react/jsx-runtime";
+import { forwardRef as l, useContext as u } from "react";
+import { Image as v } from "@webstudio-is/image";
+import { ReactSdkContext as x } from "@webstudio-is/react-sdk/runtime";
+const y = l(
+  ({
+    loading: a = "lazy",
+    width: e,
+    height: r,
+    optimize: m = !0,
+    decoding: c,
+    // @todo: it's a hack made for the builder and should't be in the runtime at all.
+    $webstudio$canvasOnly$assetId: d,
+    ...s
+  }, f) => {
+    const o = String(s.src ?? ""), { imageLoader: i, renderer: N } = u(x);
+    let n = c, t = o;
+    return N === "canvas" && (a = "eager", n = "sync", t = d ?? o, e !== void 0 && r !== void 0 && Number.isNaN(e) && Number.isNaN(r) && (m = !1, e = void 0, r = void 0)), /* @__PURE__ */ g(
+      v,
+      {
+        loading: a,
+        decoding: n,
+        optimize: m,
+        width: e,
+        height: r,
+        ...s,
+        loader: i,
+        src: o,
+        ref: f
+      },
+      t
+    );
+  }
+);
+y.displayName = "Image";
+export {
+  y as Image
+};

package/lib/image.ws.js

@@ -0,0 +1,53 @@
+import { img as e } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/image.props.js";
+const o = {
+  img: [
+    ...e,
+    // Otherwise on new image insert onto canvas it can overfit screen size multiple times
+    {
+      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
+    // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    },
+    // Set image height to "auto" to reduce layout shift, improving compatibility across browsers like Safari.
+    // Unlike "fit-content," "auto" preserves the aspect ratio when the width exceeds max-width. (in Safari)
+    // See https://web.dev/articles/optimize-cls#best_practice_for_setting_image_dimensions
+    {
+      property: "height",
+      value: { type: "keyword", value: "auto" }
+    }
+  ]
+}, i = {
+  category: "media",
+  description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
+  presetStyle: o,
+  order: 0,
+  initialProps: [
+    "id",
+    "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 {
+  i as meta
+};

package/lib/input.js

@@ -0,0 +1,21 @@
+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
+      }
+    );
+  }
+);
+f.displayName = "Input";
+export {
+  f as Input
+};

package/lib/input.ws.js

@@ -0,0 +1,28 @@
+import { input as e } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/input.props.js";
+const p = {
+  input: [
+    ...e,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    }
+  ]
+}, l = {
+  label: "Text Input",
+  presetStyle: p,
+  initialProps: [
+    "id",
+    "class",
+    "name",
+    "value",
+    "type",
+    "placeholder",
+    "required",
+    "autofocus"
+  ],
+  props: t
+};
+export {
+  l as meta
+};

package/lib/italic.js

@@ -0,0 +1,7 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+const a = t((o, r) => /* @__PURE__ */ i("i", { ...o, ref: r }));
+a.displayName = "Italic";
+export {
+  a as Italic
+};

package/lib/italic.ws.js

@@ -0,0 +1,11 @@
+import { i as t } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/italic.props.js";
+const e = {
+  label: "Italic Text",
+  presetStyle: { i: t },
+  initialProps: ["id", "class"],
+  props: i
+};
+export {
+  e as meta
+};

package/lib/label.js

@@ -0,0 +1,7 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const l = e((o, r) => /* @__PURE__ */ a("label", { ...o, ref: r }));
+l.displayName = "Label";
+export {
+  l as Label
+};

package/lib/label.ws.js

@@ -0,0 +1,16 @@
+import { label as e } from "@webstudio-is/sdk/normalize.css";
+import { props as l } from "./__generated__/label.props.js";
+const o = {
+  label: [
+    ...e,
+    { property: "display", value: { type: "keyword", value: "block" } }
+  ]
+}, t = {
+  label: "Input Label",
+  presetStyle: o,
+  initialProps: ["id", "class", "for"],
+  props: l
+};
+export {
+  t as meta
+};

package/lib/link.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+const a = n((e, o) => {
+  const {
+    children: s,
+    // @todo: it's a hack made for Image component for the builder and should't be in the runtime at all.
+    $webstudio$canvasOnly$assetId: i,
+    ...r
+  } = e;
+  return /* @__PURE__ */ t("a", { ...r, href: r.href ?? "#", ref: o, children: s });
+});
+a.displayName = "Link";
+export {
+  a as Link
+};

package/lib/link.ws.js

@@ -0,0 +1,26 @@
+import { a as e } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/link.props.js";
+const t = {
+  a: [
+    ...e,
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
+    }
+  ]
+}, p = {
+  presetStyle: t,
+  states: [{ label: "Current page", selector: "[aria-current=page]" }],
+  initialProps: ["id", "class", "href", "target", "prefetch", "download"],
+  props: {
+    ...r,
+    href: {
+      type: "string",
+      control: "url",
+      required: !1
+    }
+  }
+};
+export {
+  p as meta
+};

package/lib/list-item.js

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

package/lib/list-item.ws.js

@@ -0,0 +1,10 @@
+import { li as o } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/list-item.props.js";
+const p = {
+  presetStyle: { li: o },
+  initialProps: ["id", "class"],
+  props: r
+};
+export {
+  p as meta
+};

package/lib/list.js

@@ -0,0 +1,6 @@
+import { forwardRef as o, createElement as a } from "react";
+const s = "ul", n = "ol", d = o(({ ordered: e = !1, ...t }, r) => a(e ? n : s, { ...t, ref: r }));
+d.displayName = "List";
+export {
+  d as List
+};

package/lib/list.ws.js

@@ -0,0 +1,41 @@
+import { ul as e, ol as r } from "@webstudio-is/sdk/normalize.css";
+import { props as p } from "./__generated__/list.props.js";
+const t = {
+  ol: [
+    ...r,
+    {
+      property: "margin-top",
+      value: { type: "keyword", value: "0" }
+    },
+    {
+      property: "margin-bottom",
+      value: { type: "keyword", value: "10px" }
+    },
+    {
+      property: "padding-left",
+      value: { type: "keyword", value: "40px" }
+    }
+  ],
+  ul: [
+    ...e,
+    {
+      property: "margin-top",
+      value: { type: "keyword", value: "0" }
+    },
+    {
+      property: "margin-bottom",
+      value: { type: "keyword", value: "10px" }
+    },
+    {
+      property: "padding-left",
+      value: { type: "keyword", value: "40px" }
+    }
+  ]
+}, l = {
+  presetStyle: t,
+  initialProps: ["id", "class", "ordered", "start", "reversed"],
+  props: p
+};
+export {
+  l as meta
+};

package/lib/markdown-embed.js

@@ -0,0 +1,19 @@
+import { jsx as n } from "react/jsx-runtime";
+import { micromark as s } from "micromark";
+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: [i()],
+      htmlExtensions: [l()]
+    }),
+    [o]
+  );
+  return /* @__PURE__ */ n("div", { ...t, ref: e, dangerouslySetInnerHTML: { __html: m } });
+});
+export {
+  h as MarkdownEmbed
+};

package/lib/markdown-embed.template.js

@@ -0,0 +1,75 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { $ as a, ws as l } from "@webstudio-is/template";
+import { imagePlaceholderDataUrl as s } from "@webstudio-is/image";
+const n = `
+# Styling Markdown with Markdown Embed
+
+Markdown Embed allows styling of Markdown, which primarily comes from external data.
+
+## How to Use Markdown Embed
+
+- Every element is shown in the Navigator.
+- Apply styles and Tokens to each element.
+- Adjustments to elements apply universally within this embed, ensuring consistency across your content.
+
+---
+
+## This sample text contains all the elements that can be styled.
+
+Any elements that were not used above are used below.
+
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+[Links](#) connect your content to relevant resources.
+
+**Bold text** makes your important points stand out.
+
+*Italic text* is great for emphasizing terms.
+
+1. First Step
+2. Second Step
+
+![Image placeholder](${s})
+
+> Capture attention with a powerful quote.
+
+Using \`console.log("Hello World");\` will log to the console.
+
+| Header 1   | Header 2   | Header 3   |
+|------------|------------|------------|
+| Cell 1.1   | Cell 1.2   | Cell 1.3   |
+| Cell 2.1   | Cell 2.2   | Cell 2.3   |
+| Cell 3.1   | Cell 3.2   | Cell 3.3   |
+`.trim(), c = {
+  category: "data",
+  description: "Used to add markdown code to the page",
+  order: 4,
+  template: /* @__PURE__ */ t(a.MarkdownEmbed, { code: n, children: [
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Paragraph", selector: " p" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 1", selector: " h1" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 2", selector: " h2" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 3", selector: " h3" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 4", selector: " h4" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 5", selector: " h5" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 6", selector: " h6" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Bold", selector: " :where(strong, b)" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Italic", selector: " :where(em, i)" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Link", selector: " a" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Image", selector: " img" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Blockquote", selector: " blockquote" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Code Text", selector: " code" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "List", selector: " :where(ul, ol)" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "List Item", selector: " li" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Separator", selector: " hr" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Table", selector: " table" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Table Row", selector: " tr" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Table Header Cell", selector: " th" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Table Cell", selector: " td" })
+  ] })
+};
+export {
+  c as meta
+};

package/lib/markdown-embed.ws.js

@@ -0,0 +1,35 @@
+import { MarkdownEmbedIcon as e } from "@webstudio-is/icons/svg";
+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: [
+      {
+        property: "display",
+        value: { type: "keyword", value: "contents" }
+      },
+      {
+        property: "white-space-collapse",
+        value: { type: "keyword", value: "collapse" }
+      }
+    ]
+  },
+  initialProps: ["class"],
+  props: {
+    ...r,
+    code: {
+      required: !0,
+      control: "code",
+      language: "markdown",
+      type: "string"
+    }
+  }
+};
+export {
+  a as meta
+};

package/lib/metas.js

@@ -0,0 +1,92 @@
+import { meta as o } from "./slot.ws.js";
+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 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";
+import { meta as k } from "./link.ws.js";
+import { meta as L } from "./rich-text-link.ws.js";
+import { meta as I } from "./span.ws.js";
+import { meta as h } from "./bold.ws.js";
+import { meta as P } from "./italic.ws.js";
+import { meta as w } from "./superscript.ws.js";
+import { meta as C } from "./subscript.ws.js";
+import { meta as M } from "./button.ws.js";
+import { meta as q } from "./input.ws.js";
+import { meta as N } from "./webhook-form.ws.js";
+import { meta as Y } from "./form.ws.js";
+import { meta as z } from "./image.ws.js";
+import { meta as D } from "./blockquote.ws.js";
+import { meta as J } from "./list.ws.js";
+import { meta as Q } from "./list-item.ws.js";
+import { meta as W } from "./separator.ws.js";
+import { meta as _ } from "./code-text.ws.js";
+import { meta as ee } from "./label.ws.js";
+import { meta as oe } from "./textarea.ws.js";
+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 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";
+import { meta as ke } from "./xml-time.ws.js";
+import { meta as Le } from "./time.ws.js";
+import { meta as Ie } from "./select.ws.js";
+import { meta as he } from "./option.ws.js";
+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,
+  n as Box,
+  M as Button,
+  pe as Checkbox,
+  _ as CodeText,
+  N as Form,
+  m as Fragment,
+  we as HeadLink,
+  Ce as HeadMeta,
+  Pe as HeadSlot,
+  Me as HeadTitle,
+  T as Heading,
+  p as HtmlEmbed,
+  z as Image,
+  q as Input,
+  P as Italic,
+  ee as Label,
+  k as Link,
+  J as List,
+  Q as ListItem,
+  s as MarkdownEmbed,
+  he as Option,
+  B as Paragraph,
+  me as RadioButton,
+  Y as RemixForm,
+  L as RichTextLink,
+  Ie as Select,
+  W as Separator,
+  o as Slot,
+  I as Span,
+  C as Subscript,
+  w as Superscript,
+  u as Text,
+  oe as Textarea,
+  Le as Time,
+  qe as Video,
+  se as Vimeo,
+  ue as VimeoPlayButton,
+  ne as VimeoPreviewImage,
+  Te as VimeoSpinner,
+  Be as XmlNode,
+  ke as XmlTime,
+  ie as YouTube
+};

package/lib/option.js

@@ -0,0 +1,9 @@
+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 })
+);
+i.displayName = "Option";
+export {
+  i as Option
+};

package/lib/option.ws.js

@@ -0,0 +1,35 @@
+import { props as e } from "./__generated__/option.props.js";
+const l = {
+  option: [
+    {
+      property: "background-color",
+      state: ":checked",
+      value: {
+        type: "rgb",
+        alpha: 1,
+        r: 209,
+        g: 209,
+        b: 209
+      }
+    }
+  ]
+}, a = {
+  category: "hidden",
+  description: "An item within a drop-down menu that users can select as their chosen value.",
+  presetStyle: l,
+  states: [
+    // Applies when option is being activated (clicked)
+    { selector: ":active", label: "Active" },
+    // Applies to the currently selected option
+    { selector: ":checked", label: "Checked" },
+    // For <option> elements: The :default pseudo-class selects the <option> that has the selected attribute when the page loads. This is true even if the user later selects a different option.
+    { selector: ":default", label: "Default" },
+    { selector: ":hover", label: "Hover" },
+    { selector: ":disabled", label: "Disabled" }
+  ],
+  initialProps: ["label", "value", "label", "disabled"],
+  props: e
+};
+export {
+  a as meta
+};

package/lib/paragraph.js

@@ -0,0 +1,7 @@
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+const f = m(({ children: r, ...a }, o) => /* @__PURE__ */ p("p", { ...a, ref: o, children: r }));
+f.displayName = "Paragraph";
+export {
+  f as Paragraph
+};

package/lib/paragraph.ws.js

@@ -0,0 +1,10 @@
+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 {
+  i as meta
+};

package/lib/radio-button.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+const a = i(({ children: n, checked: o, defaultChecked: t, ...r }, d) => /* @__PURE__ */ e(
+  "input",
+  {
+    ...r,
+    defaultChecked: o ?? t,
+    type: "radio",
+    ref: d
+  }
+));
+a.displayName = "RadioButton";
+export {
+  a as RadioButton
+};

package/lib/radio-button.ws.js

@@ -0,0 +1,21 @@
+import { RadioCheckedIcon as e } from "@webstudio-is/icons/svg";
+import { radio as i } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/radio-button.props.js";
+const r = {
+  input: [
+    ...i,
+    {
+      property: "margin-right",
+      value: { type: "unit", unit: "em", value: 0.5 }
+    }
+  ]
+}, m = {
+  label: "Radio",
+  icon: e,
+  presetStyle: r,
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: o
+};
+export {
+  m as meta
+};

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

@@ -0,0 +1,5 @@
+import { meta as t } from "./link.ws.js";
+const a = t;
+export {
+  a as meta
+};

package/lib/select.js

@@ -0,0 +1,32 @@
+import { forwardRef as r, useContext as s, createElement as i } from "react";
+import { ReactSdkContext as l } from "@webstudio-is/react-sdk/runtime";
+const p = r(
+  ({ value: o, defaultValue: n, ...e }, t) => {
+    const { renderer: c } = s(l), a = c === "canvas" ? String(o ?? n) : void 0;
+    return /* @__PURE__ */ i(
+      "select",
+      {
+        ...e,
+        key: a,
+        defaultValue: o ?? n,
+        ref: t
+      }
+    );
+  }
+);
+p.displayName = "Select";
+const S = {
+  onNavigatorUnselect: (o, n) => {
+    for (const e of n.instancePath)
+      (e.component === "Select" || e.tag === "select") && o.setMemoryProp(e, "value", void 0);
+  },
+  onNavigatorSelect: (o, n) => {
+    let e;
+    for (const t of n.instancePath)
+      (t.component === "Option" || t.tag === "option") && (e = o.getPropValue(t, "value")), (t.component === "Select" || t.tag === "select") && o.setMemoryProp(t, "value", e);
+  }
+};
+export {
+  p as Select,
+  S as hooksSelect
+};