@webstudio-is/sdk-components-react 0.191.4 → 0.192.0

package/lib/list.ws.js

@@ -0,0 +1,92 @@
+import { ListIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { ol as o, ul as r } from "@webstudio-is/sdk/normalize.css";
+import { props as p } from "./__generated__/list.props.js";
+const a = {
+  ol: [
+    ...o,
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
+    },
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
+    }
+  ],
+  ul: [
+    ...r,
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
+    },
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
+    }
+  ]
+}, y = {
+  category: "general",
+  type: "container",
+  description: "Groups content, like links in a menu or steps in a recipe.",
+  icon: e,
+  states: t,
+  presetStyle: a,
+  order: 3,
+  template: [
+    {
+      type: "instance",
+      component: "List",
+      children: [
+        {
+          type: "instance",
+          component: "ListItem",
+          children: [
+            {
+              type: "text",
+              value: "List Item text you can edit",
+              placeholder: !0
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "ListItem",
+          children: [
+            {
+              type: "text",
+              value: "List Item text you can edit",
+              placeholder: !0
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "ListItem",
+          children: [
+            {
+              type: "text",
+              value: "List Item text you can edit",
+              placeholder: !0
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, c = {
+  props: p,
+  initialProps: ["id", "className", "ordered", "start", "reversed"]
+};
+export {
+  y as meta,
+  c as propsMeta
+};

package/lib/markdown-embed.js

@@ -0,0 +1,14 @@
+import { jsx as n } from "react/jsx-runtime";
+import { micromark as s } from "micromark";
+import { forwardRef as c, useMemo as d } from "react";
+const u = /* @__PURE__ */ c((r, e) => {
+  const { code: o, children: l, ...t } = r, m = d(
+    // support data uri protocol in images
+    () => s(o ?? "", { allowDangerousProtocol: !0 }),
+    [o]
+  );
+  return /* @__PURE__ */ n("div", { ...t, ref: e, dangerouslySetInnerHTML: { __html: m } });
+});
+export {
+  u as MarkdownEmbed
+};

package/lib/markdown-embed.ws.js

@@ -0,0 +1,111 @@
+import { MarkdownEmbedIcon as n } from "@webstudio-is/icons/svg";
+import { imagePlaceholderDataUrl as a } from "@webstudio-is/image";
+import { descendantComponent as r } from "@webstudio-is/react-sdk";
+import { props as s } from "./__generated__/markdown-embed.props.js";
+const i = `
+# 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](${a})
+
+> Capture attention with a powerful quote.
+
+Using \`console.log("Hello World");\` will log to the console.
+`.trim(), e = (t, o) => ({
+  type: "instance",
+  component: r,
+  label: t,
+  props: [{ type: "string", name: "selector", value: ` ${o}` }],
+  children: []
+}), m = {
+  category: "data",
+  type: "embed",
+  description: "Used to add markdown code to the page",
+  icon: n,
+  presetStyle: {
+    div: [
+      {
+        property: "display",
+        value: { type: "keyword", value: "contents" }
+      },
+      {
+        property: "whiteSpaceCollapse",
+        value: { type: "keyword", value: "collapse" }
+      }
+    ]
+  },
+  order: 4,
+  template: [
+    {
+      type: "instance",
+      component: "MarkdownEmbed",
+      props: [
+        {
+          name: "code",
+          type: "string",
+          value: i
+        }
+      ],
+      children: [
+        e("Paragraph", "p"),
+        e("Heading 1", "h1"),
+        e("Heading 2", "h2"),
+        e("Heading 3", "h3"),
+        e("Heading 4", "h4"),
+        e("Heading 5", "h5"),
+        e("Heading 6", "h6"),
+        e("Bold", ":where(strong, b)"),
+        e("Italic", ":where(em, i)"),
+        e("Link", "a"),
+        e("Image", "img"),
+        e("Blockquote", "blockquote"),
+        e("Code Text", "code"),
+        e("List", ":where(ul, ol)"),
+        e("List Item", "li"),
+        e("Separator", "hr")
+      ]
+    }
+  ]
+}, g = {
+  props: {
+    ...s,
+    code: {
+      required: !0,
+      control: "code",
+      language: "markdown",
+      type: "string"
+    }
+  },
+  initialProps: ["className"]
+};
+export {
+  m as meta,
+  g as propsMeta
+};

package/lib/metas.js

@@ -0,0 +1,81 @@
+import { meta as o } from "./slot.ws.js";
+import { meta as a } 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 "./content-embed.ws.js";
+import { meta as d } from "./body.ws.js";
+import { meta as c } from "./box.ws.js";
+import { meta as B } from "./text.ws.js";
+import { meta as b } from "./heading.ws.js";
+import { meta as g } from "./paragraph.ws.js";
+import { meta as I } from "./link.ws.js";
+import { meta as V } from "./rich-text-link.ws.js";
+import { meta as C } from "./span.ws.js";
+import { meta as F } from "./bold.ws.js";
+import { meta as R } from "./italic.ws.js";
+import { meta as y } from "./superscript.ws.js";
+import { meta as X } from "./subscript.ws.js";
+import { meta as v } from "./button.ws.js";
+import { meta as N } from "./input.ws.js";
+import { meta as j, meta as z } from "./form.ws.js";
+import { meta as D } from "./image.ws.js";
+import { meta as J } from "./blockquote.ws.js";
+import { meta as Q } from "./list.ws.js";
+import { meta as W } from "./list-item.ws.js";
+import { meta as Z } from "./separator.ws.js";
+import { meta as $ } from "./code-text.ws.js";
+import { meta as te } from "./label.ws.js";
+import { meta as me } from "./textarea.ws.js";
+import { meta as re } from "./radio-button.ws.js";
+import { meta as xe } from "./checkbox.ws.js";
+import { meta as fe } from "./vimeo.ws.js";
+import { meta as ne } from "./vimeo-preview-image.ws.js";
+import { meta as le } from "./vimeo-play-button.ws.js";
+import { meta as ue } from "./vimeo-spinner.ws.js";
+import { meta as Se } from "./xml-node.ws.js";
+import { meta as Te } from "./xml-time.ws.js";
+import { meta as ke } from "./time.ws.js";
+import { meta as Le } from "./select.ws.js";
+import { meta as he } from "./option.ws.js";
+export {
+  J as Blockquote,
+  d as Body,
+  F as Bold,
+  c as Box,
+  v as Button,
+  xe as Checkbox,
+  $ as CodeText,
+  i as ContentEmbed,
+  j as Form,
+  a as Fragment,
+  b as Heading,
+  p as HtmlEmbed,
+  D as Image,
+  N as Input,
+  R as Italic,
+  te as Label,
+  I as Link,
+  Q as List,
+  W as ListItem,
+  s as MarkdownEmbed,
+  he as Option,
+  g as Paragraph,
+  re as RadioButton,
+  z as RemixForm,
+  V as RichTextLink,
+  Le as Select,
+  Z as Separator,
+  o as Slot,
+  C as Span,
+  X as Subscript,
+  y as Superscript,
+  B as Text,
+  me as Textarea,
+  ke as Time,
+  fe as Vimeo,
+  le as VimeoPlayButton,
+  ne as VimeoPreviewImage,
+  ue as VimeoSpinner,
+  Se as XmlNode,
+  Te as XmlTime
+};

package/lib/option.js

@@ -0,0 +1,7 @@
+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,45 @@
+import { ItemIcon as e } from "@webstudio-is/icons/svg";
+import "@webstudio-is/react-sdk";
+import { props as t } from "./__generated__/option.props.js";
+const o = {
+  option: [
+    {
+      property: "backgroundColor",
+      state: ":checked",
+      value: {
+        type: "rgb",
+        alpha: 1,
+        r: 209,
+        g: 209,
+        b: 209
+      }
+    }
+  ]
+}, c = {
+  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,
+  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" }
+  ]
+}, s = {
+  props: t,
+  initialProps: ["label", "selected", "value", "label", "disabled"]
+};
+export {
+  c as meta,
+  s as propsMeta
+};

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,39 @@
+import { TextAlignLeftIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/react-sdk";
+import { p as o } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/paragraph.props.js";
+const a = {
+  p: o
+}, s = {
+  category: "text",
+  type: "container",
+  description: "A container for multi-line text.",
+  icon: t,
+  constraints: {
+    relation: "ancestor",
+    component: { $neq: "Paragraph" }
+  },
+  states: e,
+  presetStyle: a,
+  order: 2,
+  template: [
+    {
+      type: "instance",
+      component: "Paragraph",
+      children: [
+        {
+          type: "text",
+          value: "Paragraph text you can edit",
+          placeholder: !0
+        }
+      ]
+    }
+  ]
+}, m = {
+  props: r,
+  initialProps: ["id", "className"]
+};
+export {
+  s as meta,
+  m as propsMeta
+};

package/lib/props.js

@@ -0,0 +1,79 @@
+import { propsMeta as p } from "./slot.ws.js";
+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 "./text.ws.js";
+import { propsMeta as u } from "./heading.ws.js";
+import { propsMeta as S } from "./paragraph.ws.js";
+import { propsMeta as b } from "./link.ws.js";
+import { propsMeta as k } from "./rich-text-link.ws.js";
+import { propsMeta as L } from "./span.ws.js";
+import { propsMeta as h } from "./bold.ws.js";
+import { propsMeta as P } from "./italic.ws.js";
+import { propsMeta as w } from "./superscript.ws.js";
+import { propsMeta as C } from "./subscript.ws.js";
+import { propsMeta as H } from "./button.ws.js";
+import { propsMeta as q } from "./input.ws.js";
+import { propsMeta as N, propsMeta as O } from "./form.ws.js";
+import { propsMeta as z } from "./image.ws.js";
+import { propsMeta as D } from "./blockquote.ws.js";
+import { propsMeta as J } from "./list.ws.js";
+import { propsMeta as Q } from "./list-item.ws.js";
+import { propsMeta as W } from "./separator.ws.js";
+import { propsMeta as Z } from "./code-text.ws.js";
+import { propsMeta as $ } from "./label.ws.js";
+import { propsMeta as ro } from "./textarea.ws.js";
+import { propsMeta as eo } from "./radio-button.ws.js";
+import { propsMeta as ao } from "./checkbox.ws.js";
+import { propsMeta as mo } from "./vimeo.ws.js";
+import { propsMeta as Mo } from "./vimeo-preview-image.ws.js";
+import { propsMeta as io } from "./vimeo-play-button.ws.js";
+import { propsMeta as lo } from "./vimeo-spinner.ws.js";
+import { propsMeta as uo } from "./xml-node.ws.js";
+import { propsMeta as So } from "./xml-time.ws.js";
+import { propsMeta as bo } from "./time.ws.js";
+import { propsMeta as ko } from "./select.ws.js";
+import { propsMeta as Lo } from "./option.ws.js";
+export {
+  D as Blockquote,
+  f as Body,
+  h as Bold,
+  n as Box,
+  H as Button,
+  ao as Checkbox,
+  Z as CodeText,
+  N as Form,
+  t as Fragment,
+  u as Heading,
+  s as HtmlEmbed,
+  z as Image,
+  q as Input,
+  P as Italic,
+  $ as Label,
+  b as Link,
+  J as List,
+  Q as ListItem,
+  x as MarkdownEmbed,
+  Lo as Option,
+  S as Paragraph,
+  eo as RadioButton,
+  O as RemixForm,
+  k as RichTextLink,
+  ko as Select,
+  W as Separator,
+  p as Slot,
+  L as Span,
+  C as Subscript,
+  w as Superscript,
+  d as Text,
+  ro as Textarea,
+  bo as Time,
+  mo as Vimeo,
+  io as VimeoPlayButton,
+  Mo as VimeoPreviewImage,
+  lo as VimeoSpinner,
+  uo as XmlNode,
+  So as XmlTime
+};

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,60 @@
+import { RadioCheckedIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { radio as o } from "@webstudio-is/sdk/normalize.css";
+import { props as a } from "./__generated__/radio-button.props.js";
+const i = {
+  input: [
+    ...o,
+    {
+      property: "marginRight",
+      value: { type: "unit", unit: "em", value: 0.5 }
+    }
+  ]
+}, s = {
+  category: "forms",
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  type: "control",
+  label: "Radio",
+  description: "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their “Name” properties.",
+  icon: e,
+  presetStyle: i,
+  order: 5,
+  states: [
+    ...t,
+    { selector: ":checked", label: "Checked" },
+    { 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" },
+  ],
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      label: "Radio Field",
+      children: [
+        { type: "instance", component: "RadioButton", props: [], children: [] },
+        {
+          type: "instance",
+          component: "Text",
+          label: "Radio Label",
+          props: [{ type: "string", name: "tag", value: "span" }],
+          children: [{ type: "text", value: "Radio", placeholder: !0 }]
+        }
+      ]
+    }
+  ]
+}, c = {
+  props: a,
+  initialProps: ["id", "className", "name", "value", "required", "checked"]
+};
+export {
+  s as meta,
+  c as propsMeta
+};

package/lib/rich-text-link.js

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

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

@@ -0,0 +1,11 @@
+import { meta as t, propsMeta as e } from "./link.ws.js";
+const p = {
+  ...t,
+  category: "hidden",
+  type: "rich-text-child",
+  template: []
+}, o = e;
+export {
+  p as meta,
+  o as propsMeta
+};

package/lib/select.js

@@ -0,0 +1,19 @@
+import { jsx as c } from "react/jsx-runtime";
+import "@webstudio-is/react-sdk/runtime";
+import { forwardRef as r } from "react";
+const s = r(({ value: o, defaultValue: t, ...e }, n) => /* @__PURE__ */ c("select", { ...e, defaultValue: o ?? t, ref: n }));
+s.displayName = "Select";
+const l = {
+  onNavigatorUnselect: (o, t) => {
+    for (const e of t.instancePath)
+      e.component === "Option" && o.setMemoryProp(e, "selected", void 0);
+  },
+  onNavigatorSelect: (o, t) => {
+    for (const e of t.instancePath)
+      e.component === "Option" && o.setMemoryProp(e, "selected", !0);
+  }
+};
+export {
+  s as Select,
+  l as hooksSelect
+};