@webstudio-is/sdk-components-react 0.0.0-021f2d4

package/lib/blockquote.ws.js

@@ -0,0 +1,63 @@
+import { BlockquoteIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/sdk";
+import { props as p } from "./__generated__/blockquote.props.js";
+const r = {
+  blockquote: [
+    {
+      property: "marginTop",
+      value: { type: "unit", value: 0, unit: "number" }
+    },
+    {
+      property: "marginRight",
+      value: { type: "unit", value: 0, unit: "number" }
+    },
+    {
+      property: "marginBottom",
+      value: { type: "unit", value: 10, unit: "px" }
+    },
+    {
+      property: "marginLeft",
+      value: { type: "unit", value: 0, unit: "number" }
+    },
+    {
+      property: "paddingTop",
+      value: { type: "unit", value: 10, unit: "px" }
+    },
+    {
+      property: "paddingBottom",
+      value: { type: "unit", value: 10, unit: "px" }
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "unit", value: 20, unit: "px" }
+    },
+    {
+      property: "paddingRight",
+      value: { type: "unit", value: 20, unit: "px" }
+    },
+    {
+      property: "borderLeftWidth",
+      value: { type: "unit", value: 5, unit: "px" }
+    },
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderLeftColor",
+      value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
+    }
+  ]
+}, i = {
+  type: "container",
+  icon: t,
+  states: e,
+  presetStyle: r
+}, n = {
+  props: p,
+  initialProps: ["id", "className", "cite"]
+};
+export {
+  i as meta,
+  n as propsMeta
+};

package/lib/body.js

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

package/lib/body.ws.js

@@ -0,0 +1,29 @@
+import { BodyIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { body as e } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/body.props.js";
+const a = {
+  body: [
+    ...e,
+    {
+      property: "WebkitFontSmoothing",
+      value: { type: "keyword", value: "antialiased" }
+    },
+    {
+      property: "MozOsxFontSmoothing",
+      value: { type: "keyword", value: "grayscale" }
+    }
+  ]
+}, m = {
+  type: "container",
+  icon: o,
+  states: t,
+  presetStyle: a
+}, y = {
+  props: r,
+  initialProps: ["id", "className"]
+};
+export {
+  m as meta,
+  y as propsMeta
+};

package/lib/bold.js

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

package/lib/bold.ws.js

@@ -0,0 +1,20 @@
+import { BoldIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { b as e } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/bold.props.js";
+const p = {
+  b: e
+}, l = {
+  type: "rich-text-child",
+  label: "Bold Text",
+  icon: t,
+  states: o,
+  presetStyle: p
+}, c = {
+  props: r,
+  initialProps: ["id", "className"]
+};
+export {
+  l as meta,
+  c as propsMeta
+};

package/lib/box.js

@@ -0,0 +1,9 @@
+import { forwardRef as t, createElement as a } from "react";
+const d = "div", f = t(
+  ({ tag: e = d, ...o }, r) => a(e, { ...o, ref: r })
+);
+f.displayName = "Box";
+export {
+  f as Box,
+  d as defaultTag
+};

package/lib/box.ws.js

@@ -0,0 +1,31 @@
+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 { 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 = {
+  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,
+  order: 0
+}, b = {
+  props: f,
+  initialProps: ["id", "className", "tag"]
+};
+export {
+  v as meta,
+  b as propsMeta
+};

package/lib/button.js

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

package/lib/button.template.js

@@ -0,0 +1,11 @@
+import { jsx as t } from "react/jsx-runtime";
+import { $ as o, PlaceholderValue as e } from "@webstudio-is/template";
+const n = {
+  category: "forms",
+  order: 2,
+  description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that’s what a link is used for.",
+  template: /* @__PURE__ */ t(o.Button, { children: new e("Button text you can edit") })
+};
+export {
+  n as meta
+};

package/lib/button.ws.js

@@ -0,0 +1,27 @@
+import { ButtonElementIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/sdk";
+import { button as o } from "@webstudio-is/sdk/normalize.css";
+import { props as n } from "./__generated__/button.props.js";
+const a = {
+  button: o
+}, p = {
+  icon: t,
+  type: "container",
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  presetStyle: a,
+  states: [
+    ...e,
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" }
+  ]
+}, c = {
+  props: n,
+  initialProps: ["id", "className", "type", "aria-label"]
+};
+export {
+  p as meta,
+  c as propsMeta
+};

package/lib/checkbox.js

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

package/lib/checkbox.template.js

@@ -0,0 +1,14 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { $ as e, PlaceholderValue as c } from "@webstudio-is/template";
+const l = {
+  category: "forms",
+  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
+  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") })
+  ] })
+};
+export {
+  l as meta
+};

package/lib/checkbox.ws.js

@@ -0,0 +1,38 @@
+import { CheckboxCheckedIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { checkbox as o } from "@webstudio-is/sdk/normalize.css";
+import { props as l } from "./__generated__/checkbox.props.js";
+const r = {
+  input: [
+    ...o,
+    {
+      property: "marginRight",
+      value: { type: "unit", unit: "em", value: 0.5 }
+    }
+  ]
+}, s = {
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  type: "control",
+  icon: e,
+  presetStyle: r,
+  states: [
+    ...t,
+    { selector: ":checked", label: "Checked" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" }
+  ]
+}, p = {
+  props: l,
+  initialProps: ["id", "className", "name", "value", "required", "checked"]
+};
+export {
+  s as meta,
+  p as propsMeta
+};

package/lib/code-text.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+const d = ({
+  innerRef: e,
+  ...t
+}) => /* @__PURE__ */ r("code", { ...t, style: { padding: 20 }, ref: e, children: 'Open the "Settings" panel to edit the code.' }), l = i(({ code: e, children: t, ...n }, o) => t === void 0 && e === void 0 || String(e).trim().length === 0 ? /* @__PURE__ */ r(d, { innerRef: o, ...n }) : /* @__PURE__ */ r("code", { ...n, ref: o, children: e ?? t }));
+l.displayName = "CodeText";
+export {
+  l as CodeText
+};

package/lib/code-text.ws.js

@@ -0,0 +1,59 @@
+import { BracesIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { code as o } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/code-text.props.js";
+const p = {
+  code: [
+    ...o,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    },
+    {
+      property: "whiteSpaceCollapse",
+      value: { type: "keyword", value: "preserve" }
+    },
+    {
+      property: "textWrapMode",
+      value: { type: "keyword", value: "wrap" }
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "unit", value: 0.2, unit: "em" }
+    },
+    {
+      property: "paddingRight",
+      value: { type: "unit", value: 0.2, unit: "em" }
+    },
+    {
+      property: "backgroundColor",
+      value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
+    }
+  ]
+}, s = {
+  category: "general",
+  type: "embed",
+  description: "Use this component when you want to display code as text on the page.",
+  icon: e,
+  constraints: {
+    relation: "ancestor",
+    component: { $neq: "CodeText" }
+  },
+  states: t,
+  presetStyle: p,
+  order: 5
+}, d = {
+  props: {
+    ...r,
+    code: {
+      required: !0,
+      control: "codetext",
+      type: "string"
+    }
+  },
+  initialProps: ["id", "className", "lang", "code"]
+};
+export {
+  s as meta,
+  d as propsMeta
+};

package/lib/components.js

@@ -0,0 +1,89 @@
+import { Slot as e } from "./slot.js";
+import { Fragment as m } from "./fragment.js";
+import { HtmlEmbed as x } from "./html-embed.js";
+import { MarkdownEmbed as a } from "./markdown-embed.js";
+import { Body as n } from "./body.js";
+import { Box as l } from "./box.js";
+import { Text as k } from "./text.js";
+import { Heading as T } from "./heading.js";
+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 { Superscript as R } from "./superscript.js";
+import { Subscript as y } from "./subscript.js";
+import { Button as E } from "./button.js";
+import { Input as X } from "./input.js";
+import { WebhookForm as v } from "./webhook-form.js";
+import { Form as O } from "./form.js";
+import { Image as Y } from "./image.js";
+import { Blockquote as z } from "./blockquote.js";
+import { List as D } from "./list.js";
+import { ListItem as J } from "./list-item.js";
+import { Separator as Q } from "./separator.js";
+import { CodeText as Z } from "./code-text.js";
+import { Label as $ } from "./label.js";
+import { Textarea as ro } from "./textarea.js";
+import { RadioButton as to } from "./radio-button.js";
+import { Checkbox as po } from "./checkbox.js";
+import { Vimeo as fo } from "./vimeo.js";
+import { YouTube as io } from "./youtube.js";
+import { VimeoPreviewImage as lo } from "./vimeo-preview-image.js";
+import { VimeoPlayButton as ko } from "./vimeo-play-button.js";
+import { VimeoSpinner as To } from "./vimeo-spinner.js";
+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 { 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";
+export {
+  z as Blockquote,
+  n as Body,
+  I as Bold,
+  l as Box,
+  E as Button,
+  po as Checkbox,
+  Z as CodeText,
+  v as Form,
+  m as Fragment,
+  wo as HeadLink,
+  Co as HeadMeta,
+  Po as HeadSlot,
+  Mo as HeadTitle,
+  T as Heading,
+  x as HtmlEmbed,
+  Y as Image,
+  X as Input,
+  V as Italic,
+  $ as Label,
+  B as Link,
+  D as List,
+  J as ListItem,
+  a as MarkdownEmbed,
+  ho as Option,
+  c as Paragraph,
+  to as RadioButton,
+  O as RemixForm,
+  L as RichTextLink,
+  Fo as Select,
+  Q as Separator,
+  e as Slot,
+  g as Span,
+  y as Subscript,
+  R as Superscript,
+  k as Text,
+  ro as Textarea,
+  Ho as Time,
+  fo as Vimeo,
+  ko as VimeoPlayButton,
+  lo as VimeoPreviewImage,
+  To as VimeoSpinner,
+  co as XmlNode,
+  Bo as XmlTime,
+  io as YouTube
+};

package/lib/content-embed.template.js

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

package/lib/form.js

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

package/lib/form.ws.js

@@ -0,0 +1,30 @@
+import { FormIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { form as r } from "@webstudio-is/sdk/normalize.css";
+import { props as e } from "./__generated__/form.props.js";
+const n = {
+  form: [
+    ...r,
+    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
+  ]
+}, p = {
+  category: "forms",
+  type: "container",
+  label: "Form",
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Form", "Button", "Link"] }
+  },
+  description: "Create filters, surveys, searches and more.",
+  icon: t,
+  states: o,
+  presetStyle: n,
+  order: 0
+}, c = {
+  props: e,
+  initialProps: ["id", "className", "action"]
+};
+export {
+  p as meta,
+  c as propsMeta
+};

package/lib/fragment.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+const m = o((r, t) => /* @__PURE__ */ e("div", { ...r, ref: t, style: { display: "contents" } }));
+m.displayName = "Fragment";
+export {
+  m as Fragment
+};

package/lib/fragment.ws.js

@@ -0,0 +1,10 @@
+const o = {
+  type: "container",
+  icon: ""
+}, t = {
+  props: {}
+};
+export {
+  o as meta,
+  t as propsMeta
+};

package/lib/head-link.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import { ReactSdkContext as c } from "@webstudio-is/react-sdk/runtime";
+import { forwardRef as m, useContext as d } from "react";
+import { XmlNode as l } from "./xml-node.js";
+const p = "link", O = ["rel", "hrefLang", "href", "type", "as"], u = m(({ ...e }, n) => {
+  const { renderer: i } = d(c), s = /* @__PURE__ */ new Set([...O, ...Object.keys(e)]), r = {};
+  for (const t of s)
+    t in e && e[t] !== void 0 && (r[t] = e[t]);
+  if (i === void 0)
+    return /* @__PURE__ */ o("link", { ...r });
+  const a = Object.fromEntries(
+    Object.entries(r).map(([t, f]) => [
+      t == null ? void 0 : t.toLowerCase(),
+      f
+    ])
+  );
+  return /* @__PURE__ */ o(l, { tag: p, ...a, ref: n });
+});
+u.displayName = "HeadLink";
+export {
+  u as HeadLink,
+  p as defaultTag
+};

package/lib/head-link.ws.js

@@ -0,0 +1,19 @@
+import { ResourceIcon as o } from "@webstudio-is/icons/svg";
+import "@webstudio-is/sdk";
+import { props as t } from "./__generated__/head-link.props.js";
+const p = {
+  category: "hidden",
+  icon: o,
+  type: "container",
+  constraints: {
+    relation: "parent",
+    component: { $eq: "HeadSlot" }
+  }
+}, a = {
+  props: t,
+  initialProps: ["rel", "hrefLang", "href", "type", "as"]
+};
+export {
+  p as meta,
+  a as propsMeta
+};

package/lib/head-meta.js

@@ -0,0 +1,23 @@
+import { jsx as r } from "react/jsx-runtime";
+import { ReactSdkContext as i } from "@webstudio-is/react-sdk/runtime";
+import { forwardRef as d, useContext as f } from "react";
+import { XmlNode as p } from "./xml-node.js";
+const O = "meta", l = ["property", "name", "content"], u = d(({ ...e }, n) => {
+  const { renderer: a } = f(i), m = /* @__PURE__ */ new Set([...l, ...Object.keys(e)]), o = {};
+  for (const t of m)
+    t in e && e[t] !== void 0 && (o[t] = e[t]);
+  if (a === void 0)
+    return /* @__PURE__ */ r("meta", { ...o });
+  const s = Object.fromEntries(
+    Object.entries(o).map(([t, c]) => [
+      t == null ? void 0 : t.toLowerCase(),
+      c
+    ])
+  );
+  return /* @__PURE__ */ r(p, { tag: O, ...s, ref: n });
+});
+u.displayName = "HeadMeta";
+export {
+  u as HeadMeta,
+  O as defaultTag
+};