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

package/lib/list.ws.js

@@ -1,92 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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",
-  // @todo: requiredAncestors should be ["Select", "Optgroup", "Datalist"] but that gives unreadable error when adding Select onto Canvas
-  requiredAncestors: ["Select"],
-  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

@@ -1,7 +0,0 @@
-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

@@ -1,40 +0,0 @@
-import { TextAlignLeftIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/react-sdk";
-import { p as r } from "@webstudio-is/sdk/normalize.css";
-import { props as o } from "./__generated__/paragraph.props.js";
-const a = {
-  p: r
-}, s = {
-  category: "text",
-  type: "container",
-  description: "A container for multi-line text.",
-  icon: t,
-  invalidAncestors: ["Paragraph"],
-  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
-        }
-      ]
-    }
-  ]
-}, l = {
-  props: o,
-  initialProps: ["id", "className"]
-};
-export {
-  s as meta,
-  l as propsMeta
-};

package/lib/props.js

@@ -1,79 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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 i } from "./__generated__/radio-button.props.js";
-const a = {
-  input: [
-    ...o,
-    {
-      property: "marginRight",
-      value: { type: "unit", unit: "em", value: 0.5 }
-    }
-  ]
-}, s = {
-  category: "forms",
-  invalidAncestors: ["Button", "Link"],
-  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: a,
-  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: i,
-  initialProps: ["id", "className", "name", "value", "required", "checked"]
-};
-export {
-  s as meta,
-  c as propsMeta
-};

package/lib/rich-text-link.js

@@ -1,8 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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
-};