@webstudio-is/sdk-components-react 0.0.1-c87cdba.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (280) hide show
  1. package/LICENSE +661 -0
  2. package/README.md +3 -0
  3. package/lib/__generated__/blockquote.props.js +514 -0
  4. package/lib/__generated__/body.props.js +508 -0
  5. package/lib/__generated__/bold.props.js +508 -0
  6. package/lib/__generated__/box.props.js +527 -0
  7. package/lib/__generated__/button.props.js +570 -0
  8. package/lib/__generated__/checkbox.props.js +672 -0
  9. package/lib/__generated__/code-text.props.js +509 -0
  10. package/lib/__generated__/form.props.js +556 -0
  11. package/lib/__generated__/heading.props.js +516 -0
  12. package/lib/__generated__/html-embed.props.js +13 -0
  13. package/lib/__generated__/image.props.js +593 -0
  14. package/lib/__generated__/input.props.js +696 -0
  15. package/lib/__generated__/italic.props.js +508 -0
  16. package/lib/__generated__/label.props.js +520 -0
  17. package/lib/__generated__/link.props.js +578 -0
  18. package/lib/__generated__/list-item.props.js +514 -0
  19. package/lib/__generated__/list.props.js +534 -0
  20. package/lib/__generated__/markdown-embed.props.js +7 -0
  21. package/lib/__generated__/option.props.js +532 -0
  22. package/lib/__generated__/paragraph.props.js +508 -0
  23. package/lib/__generated__/radio-button.props.js +672 -0
  24. package/lib/__generated__/select.props.js +556 -0
  25. package/lib/__generated__/separator.props.js +508 -0
  26. package/lib/__generated__/span.props.js +508 -0
  27. package/lib/__generated__/subscript.props.js +508 -0
  28. package/lib/__generated__/superscript.props.js +508 -0
  29. package/lib/__generated__/text.props.js +516 -0
  30. package/lib/__generated__/textarea.props.js +587 -0
  31. package/lib/__generated__/time.props.js +312 -0
  32. package/lib/__generated__/vimeo-play-button.props.js +569 -0
  33. package/lib/__generated__/vimeo-preview-image.props.js +591 -0
  34. package/lib/__generated__/vimeo-spinner.props.js +508 -0
  35. package/lib/__generated__/vimeo.props.js +673 -0
  36. package/lib/__generated__/webhook-form.props.js +569 -0
  37. package/lib/__generated__/xml-node.props.js +21 -0
  38. package/lib/__generated__/xml-time.props.js +18 -0
  39. package/lib/blockquote.js +9 -0
  40. package/lib/blockquote.template.js +11 -0
  41. package/lib/blockquote.ws.js +63 -0
  42. package/lib/body.js +7 -0
  43. package/lib/body.ws.js +29 -0
  44. package/lib/bold.js +7 -0
  45. package/lib/bold.ws.js +20 -0
  46. package/lib/box.js +9 -0
  47. package/lib/box.ws.js +31 -0
  48. package/lib/button.js +9 -0
  49. package/lib/button.template.js +11 -0
  50. package/lib/button.ws.js +27 -0
  51. package/lib/checkbox.js +15 -0
  52. package/lib/checkbox.template.js +14 -0
  53. package/lib/checkbox.ws.js +38 -0
  54. package/lib/code-text.js +10 -0
  55. package/lib/code-text.ws.js +59 -0
  56. package/lib/components.js +79 -0
  57. package/lib/content-embed.template.js +83 -0
  58. package/lib/form.js +7 -0
  59. package/lib/form.ws.js +30 -0
  60. package/lib/fragment.js +7 -0
  61. package/lib/fragment.ws.js +11 -0
  62. package/lib/heading.js +9 -0
  63. package/lib/heading.template.js +11 -0
  64. package/lib/heading.ws.js +28 -0
  65. package/lib/home_wsKvRSqvkajPPBeycZ-C8.svg +3 -0
  66. package/lib/hooks.js +5 -0
  67. package/lib/html-embed-patchers.js +29 -0
  68. package/lib/html-embed.js +112 -0
  69. package/lib/html-embed.ws.js +46 -0
  70. package/lib/image.js +38 -0
  71. package/lib/image.ws.js +60 -0
  72. package/lib/input.js +17 -0
  73. package/lib/input.ws.js +54 -0
  74. package/lib/italic.js +7 -0
  75. package/lib/italic.ws.js +26 -0
  76. package/lib/label.js +7 -0
  77. package/lib/label.template.js +10 -0
  78. package/lib/label.ws.js +27 -0
  79. package/lib/link.js +15 -0
  80. package/lib/link.template.js +11 -0
  81. package/lib/link.ws.js +47 -0
  82. package/lib/list-item.js +9 -0
  83. package/lib/list-item.template.js +11 -0
  84. package/lib/list-item.ws.js +26 -0
  85. package/lib/list.js +6 -0
  86. package/lib/list.template.js +15 -0
  87. package/lib/list.ws.js +48 -0
  88. package/lib/markdown-embed.js +19 -0
  89. package/lib/markdown-embed.template.js +75 -0
  90. package/lib/markdown-embed.ws.js +33 -0
  91. package/lib/metas.js +80 -0
  92. package/lib/option.js +7 -0
  93. package/lib/option.ws.js +45 -0
  94. package/lib/paragraph.js +7 -0
  95. package/lib/paragraph.template.js +11 -0
  96. package/lib/paragraph.ws.js +23 -0
  97. package/lib/props.js +80 -0
  98. package/lib/radio-button.js +15 -0
  99. package/lib/radio-button.template.js +14 -0
  100. package/lib/radio-button.ws.js +40 -0
  101. package/lib/rich-text-link.ws.js +9 -0
  102. package/lib/select.js +19 -0
  103. package/lib/select.template.js +16 -0
  104. package/lib/select.ws.js +44 -0
  105. package/lib/separator.js +9 -0
  106. package/lib/separator.ws.js +48 -0
  107. package/lib/slot.js +14 -0
  108. package/lib/slot.ws.js +15 -0
  109. package/lib/span.js +7 -0
  110. package/lib/span.ws.js +20 -0
  111. package/lib/subscript.js +7 -0
  112. package/lib/subscript.ws.js +20 -0
  113. package/lib/superscript.js +7 -0
  114. package/lib/superscript.ws.js +20 -0
  115. package/lib/templates.js +32 -0
  116. package/lib/text.js +10 -0
  117. package/lib/text.template.js +11 -0
  118. package/lib/text.ws.js +25 -0
  119. package/lib/textarea.js +7 -0
  120. package/lib/textarea.ws.js +55 -0
  121. package/lib/time.js +319 -0
  122. package/lib/time.ws.js +21 -0
  123. package/lib/types/__generated__/blockquote.props.d.ts +2 -0
  124. package/lib/types/__generated__/body.props.d.ts +2 -0
  125. package/lib/types/__generated__/bold.props.d.ts +2 -0
  126. package/lib/types/__generated__/box.props.d.ts +2 -0
  127. package/lib/types/__generated__/button.props.d.ts +2 -0
  128. package/lib/types/__generated__/checkbox.props.d.ts +2 -0
  129. package/lib/types/__generated__/code-text.props.d.ts +2 -0
  130. package/lib/types/__generated__/form.props.d.ts +2 -0
  131. package/lib/types/__generated__/fragment.props.d.ts +2 -0
  132. package/lib/types/__generated__/heading.props.d.ts +2 -0
  133. package/lib/types/__generated__/html-embed.props.d.ts +2 -0
  134. package/lib/types/__generated__/image.props.d.ts +2 -0
  135. package/lib/types/__generated__/input.props.d.ts +2 -0
  136. package/lib/types/__generated__/italic.props.d.ts +2 -0
  137. package/lib/types/__generated__/label.props.d.ts +2 -0
  138. package/lib/types/__generated__/link.props.d.ts +2 -0
  139. package/lib/types/__generated__/list-item.props.d.ts +2 -0
  140. package/lib/types/__generated__/list.props.d.ts +2 -0
  141. package/lib/types/__generated__/local-date.props.d.ts +2 -0
  142. package/lib/types/__generated__/markdown-embed.props.d.ts +2 -0
  143. package/lib/types/__generated__/option.props.d.ts +2 -0
  144. package/lib/types/__generated__/paragraph.props.d.ts +2 -0
  145. package/lib/types/__generated__/radio-button.props.d.ts +2 -0
  146. package/lib/types/__generated__/rich-text-link.props.d.ts +2 -0
  147. package/lib/types/__generated__/select.props.d.ts +2 -0
  148. package/lib/types/__generated__/separator.props.d.ts +2 -0
  149. package/lib/types/__generated__/slot.props.d.ts +2 -0
  150. package/lib/types/__generated__/span.props.d.ts +2 -0
  151. package/lib/types/__generated__/subscript.props.d.ts +2 -0
  152. package/lib/types/__generated__/superscript.props.d.ts +2 -0
  153. package/lib/types/__generated__/text.props.d.ts +2 -0
  154. package/lib/types/__generated__/textarea.props.d.ts +2 -0
  155. package/lib/types/__generated__/time.props.d.ts +2 -0
  156. package/lib/types/__generated__/vimeo-play-button.props.d.ts +2 -0
  157. package/lib/types/__generated__/vimeo-preview-image.props.d.ts +2 -0
  158. package/lib/types/__generated__/vimeo-spinner.props.d.ts +2 -0
  159. package/lib/types/__generated__/vimeo.props.d.ts +2 -0
  160. package/lib/types/__generated__/webhook-form.props.d.ts +2 -0
  161. package/lib/types/__generated__/xml-node.props.d.ts +2 -0
  162. package/lib/types/__generated__/xml-time.props.d.ts +2 -0
  163. package/lib/types/blockquote.d.ts +2 -0
  164. package/lib/types/blockquote.template.d.ts +2 -0
  165. package/lib/types/blockquote.ws.d.ts +3 -0
  166. package/lib/types/body.d.ts +2 -0
  167. package/lib/types/body.ws.d.ts +3 -0
  168. package/lib/types/bold.d.ts +2 -0
  169. package/lib/types/bold.ws.d.ts +3 -0
  170. package/lib/types/box.d.ts +8 -0
  171. package/lib/types/box.ws.d.ts +3 -0
  172. package/lib/types/button.d.ts +2 -0
  173. package/lib/types/button.template.d.ts +2 -0
  174. package/lib/types/button.ws.d.ts +3 -0
  175. package/lib/types/checkbox.d.ts +4 -0
  176. package/lib/types/checkbox.template.d.ts +2 -0
  177. package/lib/types/checkbox.ws.d.ts +3 -0
  178. package/lib/types/code-text.d.ts +4 -0
  179. package/lib/types/code-text.ws.d.ts +3 -0
  180. package/lib/types/components.d.ts +39 -0
  181. package/lib/types/content-embed.template.d.ts +2 -0
  182. package/lib/types/form.d.ts +2 -0
  183. package/lib/types/form.ws.d.ts +3 -0
  184. package/lib/types/fragment.d.ts +6 -0
  185. package/lib/types/fragment.ws.d.ts +3 -0
  186. package/lib/types/heading.d.ts +8 -0
  187. package/lib/types/heading.template.d.ts +2 -0
  188. package/lib/types/heading.ws.d.ts +3 -0
  189. package/lib/types/hooks.d.ts +2 -0
  190. package/lib/types/html-embed-patchers.d.ts +2 -0
  191. package/lib/types/html-embed.d.ts +12 -0
  192. package/lib/types/html-embed.test.d.ts +1 -0
  193. package/lib/types/html-embed.ws.d.ts +3 -0
  194. package/lib/types/image.d.ts +8 -0
  195. package/lib/types/image.ws.d.ts +3 -0
  196. package/lib/types/input.d.ts +4 -0
  197. package/lib/types/input.ws.d.ts +3 -0
  198. package/lib/types/italic.d.ts +2 -0
  199. package/lib/types/italic.ws.d.ts +3 -0
  200. package/lib/types/label.d.ts +2 -0
  201. package/lib/types/label.template.d.ts +2 -0
  202. package/lib/types/label.ws.d.ts +3 -0
  203. package/lib/types/link.d.ts +11 -0
  204. package/lib/types/link.template.d.ts +2 -0
  205. package/lib/types/link.ws.d.ts +3 -0
  206. package/lib/types/list-item.d.ts +2 -0
  207. package/lib/types/list-item.template.d.ts +2 -0
  208. package/lib/types/list-item.ws.d.ts +3 -0
  209. package/lib/types/list.d.ts +10 -0
  210. package/lib/types/list.template.d.ts +2 -0
  211. package/lib/types/list.ws.d.ts +3 -0
  212. package/lib/types/markdown-embed.d.ts +7 -0
  213. package/lib/types/markdown-embed.template.d.ts +2 -0
  214. package/lib/types/markdown-embed.ws.d.ts +3 -0
  215. package/lib/types/metas.d.ts +39 -0
  216. package/lib/types/option.d.ts +2 -0
  217. package/lib/types/option.ws.d.ts +3 -0
  218. package/lib/types/paragraph.d.ts +2 -0
  219. package/lib/types/paragraph.template.d.ts +2 -0
  220. package/lib/types/paragraph.ws.d.ts +3 -0
  221. package/lib/types/props.d.ts +39 -0
  222. package/lib/types/radio-button.d.ts +4 -0
  223. package/lib/types/radio-button.template.d.ts +2 -0
  224. package/lib/types/radio-button.ws.d.ts +3 -0
  225. package/lib/types/rich-text-link.d.ts +1 -0
  226. package/lib/types/rich-text-link.ws.d.ts +3 -0
  227. package/lib/types/select.d.ts +4 -0
  228. package/lib/types/select.template.d.ts +2 -0
  229. package/lib/types/select.ws.d.ts +3 -0
  230. package/lib/types/separator.d.ts +2 -0
  231. package/lib/types/separator.ws.d.ts +3 -0
  232. package/lib/types/slot.d.ts +6 -0
  233. package/lib/types/slot.ws.d.ts +3 -0
  234. package/lib/types/span.d.ts +2 -0
  235. package/lib/types/span.ws.d.ts +3 -0
  236. package/lib/types/subscript.d.ts +2 -0
  237. package/lib/types/subscript.ws.d.ts +3 -0
  238. package/lib/types/superscript.d.ts +2 -0
  239. package/lib/types/superscript.ws.d.ts +3 -0
  240. package/lib/types/templates.d.ts +15 -0
  241. package/lib/types/test-utils/cartesian.d.ts +2 -0
  242. package/lib/types/text.d.ts +8 -0
  243. package/lib/types/text.template.d.ts +2 -0
  244. package/lib/types/text.ws.d.ts +3 -0
  245. package/lib/types/textarea.d.ts +2 -0
  246. package/lib/types/textarea.ws.d.ts +3 -0
  247. package/lib/types/time.d.ts +18 -0
  248. package/lib/types/time.test.d.ts +1 -0
  249. package/lib/types/time.ws.d.ts +3 -0
  250. package/lib/types/vimeo-play-button.d.ts +3 -0
  251. package/lib/types/vimeo-play-button.ws.d.ts +3 -0
  252. package/lib/types/vimeo-preview-image.d.ts +284 -0
  253. package/lib/types/vimeo-preview-image.ws.d.ts +3 -0
  254. package/lib/types/vimeo-spinner.d.ts +1 -0
  255. package/lib/types/vimeo-spinner.ws.d.ts +3 -0
  256. package/lib/types/vimeo.d.ts +75 -0
  257. package/lib/types/vimeo.template.d.ts +2 -0
  258. package/lib/types/vimeo.ws.d.ts +3 -0
  259. package/lib/types/webhook-form.d.ts +8 -0
  260. package/lib/types/webhook-form.ws.d.ts +3 -0
  261. package/lib/types/xml-node.d.ts +13 -0
  262. package/lib/types/xml-node.ws.d.ts +3 -0
  263. package/lib/types/xml-time.d.ts +6 -0
  264. package/lib/types/xml-time.ws.d.ts +3 -0
  265. package/lib/vimeo-play-button.js +18 -0
  266. package/lib/vimeo-play-button.ws.js +31 -0
  267. package/lib/vimeo-preview-image.js +19 -0
  268. package/lib/vimeo-preview-image.ws.js +28 -0
  269. package/lib/vimeo-spinner.js +13 -0
  270. package/lib/vimeo-spinner.ws.js +25 -0
  271. package/lib/vimeo.js +213 -0
  272. package/lib/vimeo.template.js +92 -0
  273. package/lib/vimeo.ws.js +39 -0
  274. package/lib/webhook-form.js +9 -0
  275. package/lib/webhook-form.ws.js +127 -0
  276. package/lib/xml-node.js +44 -0
  277. package/lib/xml-node.ws.js +18 -0
  278. package/lib/xml-time.js +25 -0
  279. package/lib/xml-time.ws.js +18 -0
  280. package/package.json +75 -0
package/lib/body.js ADDED
@@ -0,0 +1,7 @@
1
+ import { jsx as d } from "react/jsx-runtime";
2
+ import { forwardRef as m } from "react";
3
+ const f = m((o, r) => /* @__PURE__ */ d("body", { ...o, ref: r }));
4
+ f.displayName = "Body";
5
+ export {
6
+ f as Body
7
+ };
package/lib/body.ws.js ADDED
@@ -0,0 +1,29 @@
1
+ import { BodyIcon as o } from "@webstudio-is/icons/svg";
2
+ import { defaultStates as t } from "@webstudio-is/react-sdk";
3
+ import { body as e } from "@webstudio-is/sdk/normalize.css";
4
+ import { props as r } from "./__generated__/body.props.js";
5
+ const a = {
6
+ body: [
7
+ ...e,
8
+ {
9
+ property: "WebkitFontSmoothing",
10
+ value: { type: "keyword", value: "antialiased" }
11
+ },
12
+ {
13
+ property: "MozOsxFontSmoothing",
14
+ value: { type: "keyword", value: "grayscale" }
15
+ }
16
+ ]
17
+ }, m = {
18
+ type: "container",
19
+ icon: o,
20
+ states: t,
21
+ presetStyle: a
22
+ }, y = {
23
+ props: r,
24
+ initialProps: ["id", "className"]
25
+ };
26
+ export {
27
+ m as meta,
28
+ y as propsMeta
29
+ };
package/lib/bold.js ADDED
@@ -0,0 +1,7 @@
1
+ import { jsx as m } from "react/jsx-runtime";
2
+ import { forwardRef as d } from "react";
3
+ const f = d((o, r) => /* @__PURE__ */ m("b", { ...o, ref: r }));
4
+ f.displayName = "Bold";
5
+ export {
6
+ f as Bold
7
+ };
package/lib/bold.ws.js ADDED
@@ -0,0 +1,20 @@
1
+ import { BoldIcon as t } from "@webstudio-is/icons/svg";
2
+ import { defaultStates as o } from "@webstudio-is/react-sdk";
3
+ import { b as e } from "@webstudio-is/sdk/normalize.css";
4
+ import { props as r } from "./__generated__/bold.props.js";
5
+ const p = {
6
+ b: e
7
+ }, l = {
8
+ type: "rich-text-child",
9
+ label: "Bold Text",
10
+ icon: t,
11
+ states: o,
12
+ presetStyle: p
13
+ }, c = {
14
+ props: r,
15
+ initialProps: ["id", "className"]
16
+ };
17
+ export {
18
+ l as meta,
19
+ c as propsMeta
20
+ };
package/lib/box.js ADDED
@@ -0,0 +1,9 @@
1
+ import { forwardRef as t, createElement as a } from "react";
2
+ const d = "div", f = t(
3
+ ({ tag: e = d, ...o }, r) => a(e, { ...o, ref: r })
4
+ );
5
+ f.displayName = "Box";
6
+ export {
7
+ f as Box,
8
+ d as defaultTag
9
+ };
package/lib/box.ws.js ADDED
@@ -0,0 +1,31 @@
1
+ import { BoxIcon as t } from "@webstudio-is/icons/svg";
2
+ import { defaultStates as e } from "@webstudio-is/react-sdk";
3
+ 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";
4
+ import { props as f } from "./__generated__/box.props.js";
5
+ const g = {
6
+ div: o,
7
+ address: r,
8
+ article: a,
9
+ aside: i,
10
+ figure: n,
11
+ footer: s,
12
+ header: c,
13
+ main: p,
14
+ nav: d,
15
+ section: m
16
+ }, v = {
17
+ category: "general",
18
+ type: "container",
19
+ description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
20
+ icon: t,
21
+ states: e,
22
+ presetStyle: g,
23
+ order: 0
24
+ }, b = {
25
+ props: f,
26
+ initialProps: ["id", "className", "tag"]
27
+ };
28
+ export {
29
+ v as meta,
30
+ b as propsMeta
31
+ };
package/lib/button.js ADDED
@@ -0,0 +1,9 @@
1
+ import { jsx as f } from "react/jsx-runtime";
2
+ import { forwardRef as i } from "react";
3
+ const n = i(
4
+ ({ type: t = "submit", children: o, ...r }, m) => /* @__PURE__ */ f("button", { type: t, ...r, ref: m, children: o })
5
+ );
6
+ n.displayName = "Button";
7
+ export {
8
+ n as Button
9
+ };
@@ -0,0 +1,11 @@
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import { $ as o, PlaceholderValue as e } from "@webstudio-is/template";
3
+ const n = {
4
+ category: "forms",
5
+ order: 2,
6
+ 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.",
7
+ template: /* @__PURE__ */ t(o.Button, { children: new e("Button text you can edit") })
8
+ };
9
+ export {
10
+ n as meta
11
+ };
@@ -0,0 +1,27 @@
1
+ import { ButtonElementIcon as t } from "@webstudio-is/icons/svg";
2
+ import { defaultStates as e } from "@webstudio-is/react-sdk";
3
+ import { button as o } from "@webstudio-is/sdk/normalize.css";
4
+ import { props as n } from "./__generated__/button.props.js";
5
+ const a = {
6
+ button: o
7
+ }, p = {
8
+ icon: t,
9
+ type: "container",
10
+ constraints: {
11
+ relation: "ancestor",
12
+ component: { $nin: ["Button", "Link"] }
13
+ },
14
+ presetStyle: a,
15
+ states: [
16
+ ...e,
17
+ { selector: ":disabled", label: "Disabled" },
18
+ { selector: ":enabled", label: "Enabled" }
19
+ ]
20
+ }, c = {
21
+ props: n,
22
+ initialProps: ["id", "className", "type", "aria-label"]
23
+ };
24
+ export {
25
+ p as meta,
26
+ c as propsMeta
27
+ };
@@ -0,0 +1,15 @@
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import { forwardRef as d } from "react";
3
+ const h = d(({ children: i, checked: e, defaultChecked: r, ...o }, c) => /* @__PURE__ */ t(
4
+ "input",
5
+ {
6
+ ...o,
7
+ defaultChecked: e ?? r,
8
+ type: "checkbox",
9
+ ref: c
10
+ }
11
+ ));
12
+ h.displayName = "Checkbox";
13
+ export {
14
+ h as Checkbox
15
+ };
@@ -0,0 +1,14 @@
1
+ import { jsxs as r, jsx as o } from "react/jsx-runtime";
2
+ import { $ as e, PlaceholderValue as c } from "@webstudio-is/template";
3
+ const l = {
4
+ category: "forms",
5
+ 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.",
6
+ order: 6,
7
+ template: /* @__PURE__ */ r(e.Label, { "ws:label": "Checkbox Field", children: [
8
+ /* @__PURE__ */ o(e.Checkbox, {}),
9
+ /* @__PURE__ */ o(e.Text, { "ws:label": "Checkbox Label", tag: "span", children: new c("Checkbox") })
10
+ ] })
11
+ };
12
+ export {
13
+ l as meta
14
+ };
@@ -0,0 +1,38 @@
1
+ import { CheckboxCheckedIcon as e } from "@webstudio-is/icons/svg";
2
+ import { defaultStates as t } from "@webstudio-is/react-sdk";
3
+ import { checkbox as o } from "@webstudio-is/sdk/normalize.css";
4
+ import { props as l } from "./__generated__/checkbox.props.js";
5
+ const r = {
6
+ input: [
7
+ ...o,
8
+ {
9
+ property: "marginRight",
10
+ value: { type: "unit", unit: "em", value: 0.5 }
11
+ }
12
+ ]
13
+ }, s = {
14
+ constraints: {
15
+ relation: "ancestor",
16
+ component: { $nin: ["Button", "Link"] }
17
+ },
18
+ type: "control",
19
+ icon: e,
20
+ presetStyle: r,
21
+ states: [
22
+ ...t,
23
+ { selector: ":checked", label: "Checked" },
24
+ { selector: ":required", label: "Required" },
25
+ { selector: ":optional", label: "Optional" },
26
+ { selector: ":disabled", label: "Disabled" },
27
+ { selector: ":enabled", label: "Enabled" },
28
+ { selector: ":read-only", label: "Read Only" },
29
+ { selector: ":read-write", label: "Read Write" }
30
+ ]
31
+ }, p = {
32
+ props: l,
33
+ initialProps: ["id", "className", "name", "value", "required", "checked"]
34
+ };
35
+ export {
36
+ s as meta,
37
+ p as propsMeta
38
+ };
@@ -0,0 +1,10 @@
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import { forwardRef as i } from "react";
3
+ const d = ({
4
+ innerRef: e,
5
+ ...t
6
+ }) => /* @__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 }));
7
+ l.displayName = "CodeText";
8
+ export {
9
+ l as CodeText
10
+ };
@@ -0,0 +1,59 @@
1
+ import { BracesIcon as e } from "@webstudio-is/icons/svg";
2
+ import { defaultStates as t } from "@webstudio-is/react-sdk";
3
+ import { code as o } from "@webstudio-is/sdk/normalize.css";
4
+ import { props as r } from "./__generated__/code-text.props.js";
5
+ const p = {
6
+ code: [
7
+ ...o,
8
+ {
9
+ property: "display",
10
+ value: { type: "keyword", value: "block" }
11
+ },
12
+ {
13
+ property: "whiteSpaceCollapse",
14
+ value: { type: "keyword", value: "preserve" }
15
+ },
16
+ {
17
+ property: "textWrapMode",
18
+ value: { type: "keyword", value: "wrap" }
19
+ },
20
+ {
21
+ property: "paddingLeft",
22
+ value: { type: "unit", value: 0.2, unit: "em" }
23
+ },
24
+ {
25
+ property: "paddingRight",
26
+ value: { type: "unit", value: 0.2, unit: "em" }
27
+ },
28
+ {
29
+ property: "backgroundColor",
30
+ value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
31
+ }
32
+ ]
33
+ }, s = {
34
+ category: "general",
35
+ type: "embed",
36
+ description: "Use this component when you want to display code as text on the page.",
37
+ icon: e,
38
+ constraints: {
39
+ relation: "ancestor",
40
+ component: { $neq: "CodeText" }
41
+ },
42
+ states: t,
43
+ presetStyle: p,
44
+ order: 9
45
+ }, d = {
46
+ props: {
47
+ ...r,
48
+ code: {
49
+ required: !0,
50
+ control: "codetext",
51
+ type: "string"
52
+ }
53
+ },
54
+ initialProps: ["id", "className", "lang", "code"]
55
+ };
56
+ export {
57
+ s as meta,
58
+ d as propsMeta
59
+ };
@@ -0,0 +1,79 @@
1
+ import { Slot as e } from "./slot.js";
2
+ import { Fragment as m } from "./fragment.js";
3
+ import { HtmlEmbed as x } from "./html-embed.js";
4
+ import { MarkdownEmbed as i } from "./markdown-embed.js";
5
+ import { Body as n } from "./body.js";
6
+ import { Box as d } from "./box.js";
7
+ import { Text as k } from "./text.js";
8
+ import { Heading as u } from "./heading.js";
9
+ import { Paragraph as S } from "./paragraph.js";
10
+ import { Link as L, Link as T } from "./link.js";
11
+ import { Span as F } from "./span.js";
12
+ import { Bold as h } from "./bold.js";
13
+ import { Italic as P } from "./italic.js";
14
+ import { Superscript as w } from "./superscript.js";
15
+ import { Subscript as C } from "./subscript.js";
16
+ import { Button as H } from "./button.js";
17
+ import { Input as q } from "./input.js";
18
+ import { WebhookForm as M } from "./webhook-form.js";
19
+ import { Form as O } from "./form.js";
20
+ import { Image as j } from "./image.js";
21
+ import { Blockquote as A } from "./blockquote.js";
22
+ import { List as G } from "./list.js";
23
+ import { ListItem as K } from "./list-item.js";
24
+ import { Separator as U } from "./separator.js";
25
+ import { CodeText as Z } from "./code-text.js";
26
+ import { Label as $ } from "./label.js";
27
+ import { Textarea as ro } from "./textarea.js";
28
+ import { RadioButton as to } from "./radio-button.js";
29
+ import { Checkbox as po } from "./checkbox.js";
30
+ import { Vimeo as fo } from "./vimeo.js";
31
+ import { VimeoPreviewImage as ao } from "./vimeo-preview-image.js";
32
+ import { VimeoPlayButton as lo } from "./vimeo-play-button.js";
33
+ import { VimeoSpinner as ko } from "./vimeo-spinner.js";
34
+ import { XmlNode as uo } from "./xml-node.js";
35
+ import { XmlTime as So } from "./xml-time.js";
36
+ import { Time as Lo } from "./time.js";
37
+ import { Select as go } from "./select.js";
38
+ import { Option as Io } from "./option.js";
39
+ export {
40
+ A as Blockquote,
41
+ n as Body,
42
+ h as Bold,
43
+ d as Box,
44
+ H as Button,
45
+ po as Checkbox,
46
+ Z as CodeText,
47
+ M as Form,
48
+ m as Fragment,
49
+ u as Heading,
50
+ x as HtmlEmbed,
51
+ j as Image,
52
+ q as Input,
53
+ P as Italic,
54
+ $ as Label,
55
+ L as Link,
56
+ G as List,
57
+ K as ListItem,
58
+ i as MarkdownEmbed,
59
+ Io as Option,
60
+ S as Paragraph,
61
+ to as RadioButton,
62
+ O as RemixForm,
63
+ T as RichTextLink,
64
+ go as Select,
65
+ U as Separator,
66
+ e as Slot,
67
+ F as Span,
68
+ C as Subscript,
69
+ w as Superscript,
70
+ k as Text,
71
+ ro as Textarea,
72
+ Lo as Time,
73
+ fo as Vimeo,
74
+ lo as VimeoPlayButton,
75
+ ao as VimeoPreviewImage,
76
+ ko as VimeoSpinner,
77
+ uo as XmlNode,
78
+ So as XmlTime
79
+ };
@@ -0,0 +1,83 @@
1
+ import { jsxs as l, jsx as e } from "react/jsx-runtime";
2
+ import { $ as a, ws as t } from "@webstudio-is/template";
3
+ import { imagePlaceholderDataUrl as o } from "@webstudio-is/image";
4
+ import { ContentEmbedIcon as n } from "@webstudio-is/icons/svg";
5
+ const s = `
6
+ <h1>Styling HTML with Content Embed</h1>
7
+ <p>Content Embed allows styling of HTML, which primarily comes from external data.</p>
8
+ <h2>How to Use Content Embed</h2>
9
+ <ul>
10
+ <li>Every element is shown in the Navigator.</li>
11
+ <li>Apply styles and Tokens to each element.</li>
12
+ <li>Adjustments to elements apply universally within this embed, ensuring consistency across your content.</li>
13
+ </ul>
14
+ <hr>
15
+ <h2>This sample text contains all the elements that can be styled.</h2>
16
+ <p>Any elements that were not used above are used below.</p>
17
+ <h3>Heading 3</h3>
18
+ <h4>Heading 4</h4>
19
+ <h5>Heading 5</h5>
20
+ <h6>Heading 6</h6>
21
+ <p><a href="#">Links</a> connect your content to relevant resources.</p>
22
+ <p><strong>Bold text</strong> makes your important points stand out.</p>
23
+ <p><em>Italic text</em> is great for emphasizing terms.</p>
24
+ <ol>
25
+ <li>First Step</li>
26
+ <li>Second Step</li>
27
+ </ol>
28
+ <img src="${o}">
29
+ <blockquote>Capture attention with a powerful quote.</blockquote>
30
+ <p>Using <code>console.log("Hello World");</code> will log to the console.</p>
31
+ <table>
32
+ <tr>
33
+ <th>Header 1</th>
34
+ <th>Header 2</th>
35
+ <th>Header 3</th>
36
+ </tr>
37
+ <tr>
38
+ <td>Cell 1.1</td>
39
+ <td>Cell 1.2</td>
40
+ <td>Cell 1.3</td>
41
+ </tr>
42
+ <tr>
43
+ <td>Cell 2.1</td>
44
+ <td>Cell 2.2</td>
45
+ <td>Cell 2.3</td>
46
+ </tr>
47
+ <tr>
48
+ <td>Cell 3.1</td>
49
+ <td>Cell 3.2</td>
50
+ <td>Cell 3.3</td>
51
+ </tr>
52
+ </table>
53
+ `.trim(), h = {
54
+ category: "data",
55
+ icon: n,
56
+ 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.",
57
+ order: 3,
58
+ template: /* @__PURE__ */ l(a.HtmlEmbed, { "ws:label": "Content Embed", code: s, children: [
59
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Paragraph", selector: " p" }),
60
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Heading 1", selector: " h1" }),
61
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Heading 2", selector: " h2" }),
62
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Heading 3", selector: " h3" }),
63
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Heading 4", selector: " h4" }),
64
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Heading 5", selector: " h5" }),
65
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Heading 6", selector: " h6" }),
66
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Bold", selector: " :where(strong, b)" }),
67
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Italic", selector: " :where(em, i)" }),
68
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Link", selector: " a" }),
69
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Image", selector: " img" }),
70
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Blockquote", selector: " blockquote" }),
71
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Code Text", selector: " code" }),
72
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "List", selector: " :where(ul, ol)" }),
73
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "List Item", selector: " li" }),
74
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Separator", selector: " hr" }),
75
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Table", selector: " table" }),
76
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Table Row", selector: " tr" }),
77
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Table Header Cell", selector: " th" }),
78
+ /* @__PURE__ */ e(t.descendant, { "ws:label": "Table Cell", selector: " td" })
79
+ ] })
80
+ };
81
+ export {
82
+ h as meta
83
+ };
package/lib/form.js ADDED
@@ -0,0 +1,7 @@
1
+ import { jsx as f } from "react/jsx-runtime";
2
+ import { forwardRef as p } from "react";
3
+ const t = p(({ children: o, ...r }, m) => /* @__PURE__ */ f("form", { ...r, ref: m, children: o }));
4
+ t.displayName = "Form";
5
+ export {
6
+ t as Form
7
+ };
package/lib/form.ws.js ADDED
@@ -0,0 +1,30 @@
1
+ import { FormIcon as t } from "@webstudio-is/icons/svg";
2
+ import { defaultStates as o } from "@webstudio-is/react-sdk";
3
+ import { form as r } from "@webstudio-is/sdk/normalize.css";
4
+ import { props as e } from "./__generated__/form.props.js";
5
+ const n = {
6
+ form: [
7
+ ...r,
8
+ { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
9
+ ]
10
+ }, p = {
11
+ category: "forms",
12
+ type: "container",
13
+ label: "Form",
14
+ constraints: {
15
+ relation: "ancestor",
16
+ component: { $nin: ["Form", "Button", "Link"] }
17
+ },
18
+ description: "Create filters, surveys, searches and more.",
19
+ icon: t,
20
+ states: o,
21
+ presetStyle: n,
22
+ order: 0
23
+ }, c = {
24
+ props: e,
25
+ initialProps: ["id", "className", "action"]
26
+ };
27
+ export {
28
+ p as meta,
29
+ c as propsMeta
30
+ };
@@ -0,0 +1,7 @@
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import { forwardRef as o } from "react";
3
+ const m = o((r, t) => /* @__PURE__ */ e("div", { ...r, ref: t, style: { display: "contents" } }));
4
+ m.displayName = "Fragment";
5
+ export {
6
+ m as Fragment
7
+ };
@@ -0,0 +1,11 @@
1
+ const t = {
2
+ type: "container",
3
+ icon: "",
4
+ stylable: !1
5
+ }, e = {
6
+ props: {}
7
+ };
8
+ export {
9
+ t as meta,
10
+ e as propsMeta
11
+ };
package/lib/heading.js ADDED
@@ -0,0 +1,9 @@
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import { forwardRef as n } from "react";
3
+ const d = "h1", f = n(
4
+ ({ tag: a = d, children: o, ...r }, t) => /* @__PURE__ */ e(a, { ...r, ref: t, children: o })
5
+ );
6
+ f.displayName = "Heading";
7
+ export {
8
+ f as Heading
9
+ };
@@ -0,0 +1,11 @@
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import { $ as t } from "@webstudio-is/template";
3
+ const n = {
4
+ category: "typography",
5
+ description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
6
+ order: 1,
7
+ template: /* @__PURE__ */ e(t.Heading, {})
8
+ };
9
+ export {
10
+ n as meta
11
+ };
@@ -0,0 +1,28 @@
1
+ import { HeadingIcon as t } from "@webstudio-is/icons/svg";
2
+ import { defaultStates as o } from "@webstudio-is/react-sdk";
3
+ import { h1 as e, h2 as n, h3 as r, h4 as a, h5 as s, h6 as i } from "@webstudio-is/sdk/normalize.css";
4
+ import { props as p } from "./__generated__/heading.props.js";
5
+ const m = {
6
+ h1: e,
7
+ h2: n,
8
+ h3: r,
9
+ h4: a,
10
+ h5: s,
11
+ h6: i
12
+ }, d = {
13
+ type: "container",
14
+ icon: t,
15
+ constraints: {
16
+ relation: "ancestor",
17
+ component: { $neq: "Heading" }
18
+ },
19
+ states: o,
20
+ presetStyle: m
21
+ }, g = {
22
+ props: p,
23
+ initialProps: ["id", "className", "tag"]
24
+ };
25
+ export {
26
+ d as meta,
27
+ g as propsMeta
28
+ };
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M7.6559 0.907089C7.88124 0.846075 8.11876 0.846075 8.34411 0.907089C8.60553 0.97787 8.82581 1.15075 9.00433 1.29086C9.02124 1.30414 9.03777 1.31712 9.05393 1.32968L13.5755 4.84644C13.5927 4.85983 13.6098 4.87308 13.6267 4.88623C13.8784 5.08159 14.0978 5.25187 14.2612 5.47281C14.4047 5.66677 14.5116 5.88528 14.5766 6.11759C14.6507 6.38223 14.6504 6.65995 14.65 6.9786C14.65 7.00004 14.65 7.02165 14.65 7.04347V11.8919C14.65 12.2438 14.65 12.5464 14.6297 12.7954C14.6082 13.0579 14.561 13.3177 14.4338 13.5672C14.2437 13.9404 13.9403 14.2438 13.5671 14.4339C13.3176 14.561 13.0579 14.6083 12.7953 14.6298C12.5463 14.6501 12.2437 14.6501 11.8918 14.6501H4.10816C3.75628 14.6501 3.4537 14.6501 3.20467 14.6298C2.94214 14.6083 2.68243 14.561 2.43292 14.4339C2.05973 14.2438 1.75632 13.9404 1.56617 13.5672C1.43904 13.3177 1.39178 13.0579 1.37033 12.7954C1.34998 12.5464 1.34999 12.2438 1.35 11.8919L1.35 7.04347C1.35 7.02165 1.34998 7.00003 1.34996 6.9786C1.34963 6.65995 1.34934 6.38222 1.42341 6.11759C1.48844 5.88527 1.59531 5.66677 1.73876 5.47281C1.90218 5.25187 2.12158 5.08159 2.3733 4.88623C2.39024 4.87308 2.40732 4.85983 2.42453 4.84644L6.94607 1.32968C6.96223 1.31711 6.97877 1.30414 6.99568 1.29086C7.1742 1.15075 7.39448 0.97787 7.6559 0.907089ZM6.65 13.3501H9.35V9.06675C9.35 8.86934 9.3495 8.76038 9.34308 8.68182C9.34236 8.67303 9.34162 8.66552 9.34091 8.65918C9.33457 8.65847 9.32706 8.65773 9.31827 8.65701C9.23971 8.65059 9.13075 8.65009 8.93334 8.65009H7.06667C6.86926 8.65009 6.76029 8.65059 6.68174 8.65701C6.67294 8.65773 6.66544 8.65847 6.6591 8.65918C6.65839 8.66552 6.65765 8.67303 6.65693 8.68182C6.65051 8.76038 6.65 8.86934 6.65 9.06675V13.3501ZM10.65 13.3501L10.65 9.04584C10.65 8.87727 10.65 8.71403 10.6388 8.57596C10.6264 8.42459 10.5973 8.24721 10.5065 8.069C10.3803 7.82125 10.1788 7.61983 9.93109 7.49359C9.75288 7.40279 9.5755 7.37369 9.42413 7.36133C9.28606 7.35005 9.12282 7.35007 8.95425 7.35008H7.04575C6.87718 7.35007 6.71395 7.35005 6.57587 7.36133C6.42451 7.37369 6.24712 7.40279 6.06892 7.49359C5.82117 7.61983 5.61974 7.82125 5.49351 8.069C5.40271 8.24721 5.37361 8.42459 5.36124 8.57596C5.34996 8.71403 5.34998 8.87727 5.35 9.04584L5.35 13.3501H4.13334C3.74924 13.3501 3.50026 13.3496 3.31054 13.3341C3.1284 13.3192 3.05881 13.2938 3.02311 13.2756C2.89453 13.2101 2.79 13.1056 2.72448 12.977C2.70629 12.9413 2.68089 12.8717 2.66601 12.6896C2.65051 12.4998 2.65 12.2508 2.65 11.8668V7.04347C2.65 6.62375 2.65565 6.53819 2.6753 6.46801C2.6977 6.38796 2.73452 6.31268 2.78395 6.24586C2.82729 6.18726 2.89135 6.13027 3.22266 5.87259L7.74419 2.35584C7.86861 2.25907 7.93516 2.20781 7.98588 2.17392C7.99132 2.17029 7.99601 2.16725 8 2.16473C8.00399 2.16725 8.00869 2.17029 8.01413 2.17392C8.06485 2.20781 8.13139 2.25907 8.25581 2.35584L12.7773 5.87259C13.1087 6.13027 13.1727 6.18726 13.2161 6.24586C13.2655 6.31268 13.3023 6.38796 13.3247 6.46801C13.3444 6.53819 13.35 6.62375 13.35 7.04347V11.8668C13.35 12.2508 13.3495 12.4998 13.334 12.6896C13.3191 12.8717 13.2937 12.9413 13.2755 12.977C13.21 13.1056 13.1055 13.2101 12.9769 13.2756C12.9412 13.2938 12.8716 13.3192 12.6895 13.3341C12.4997 13.3496 12.2508 13.3501 11.8667 13.3501H10.65Z" fill="#11181C"/>
3
+ </svg>
package/lib/hooks.js ADDED
@@ -0,0 +1,5 @@
1
+ import { hooksSelect as o } from "./select.js";
2
+ const e = [o];
3
+ export {
4
+ e as hooks
5
+ };
@@ -0,0 +1,29 @@
1
+ const l = () => document.readyState === "complete" || document.readyState === "interactive", t = [];
2
+ let s = !1;
3
+ const r = () => {
4
+ if (l() === !1) {
5
+ console.error("DOMContentLoaded event has not been fired yet");
6
+ return;
7
+ }
8
+ if (s)
9
+ return;
10
+ s = !0;
11
+ const d = document.addEventListener, a = window.addEventListener, c = new Event("DOMContentLoaded"), i = new Event("load");
12
+ window.addEventListener = (e, n, o) => {
13
+ e === "DOMContentLoaded" ? t.push(
14
+ () => n.call(window, c)
15
+ ) : (e === "load" && t.push(() => n.call(window, i)), a.call(window, e, n, o));
16
+ }, document.addEventListener = (e, n, o) => {
17
+ e === "DOMContentLoaded" ? t.push(
18
+ () => n.call(document, c)
19
+ ) : d.call(document, e, n, o);
20
+ };
21
+ }, w = () => {
22
+ for (const d of t)
23
+ d();
24
+ t.length = 0;
25
+ };
26
+ export {
27
+ w as executeDomEvents,
28
+ r as patchDomEvents
29
+ };