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

package/lib/blockquote.js

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

package/lib/blockquote.ws.js

@@ -0,0 +1,79 @@
+import { BlockquoteIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-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 = {
+  category: "text",
+  type: "container",
+  description: "Use to style a quote from an external source like an article or book.",
+  icon: e,
+  states: t,
+  presetStyle: r,
+  order: 3,
+  template: [
+    {
+      type: "instance",
+      component: "Blockquote",
+      children: [
+        {
+          type: "text",
+          value: "Blockquote text you can edit",
+          placeholder: !0
+        }
+      ]
+    }
+  ]
+}, 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,30 @@
+import { BodyIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { body as e } from "@webstudio-is/sdk/normalize.css";
+import { props as a } from "./__generated__/body.props.js";
+const r = {
+  body: [
+    ...e,
+    {
+      property: "WebkitFontSmoothing",
+      value: { type: "keyword", value: "antialiased" }
+    },
+    {
+      property: "MozOsxFontSmoothing",
+      value: { type: "keyword", value: "grayscale" }
+    }
+  ]
+}, l = {
+  type: "container",
+  icon: o,
+  states: t,
+  presetStyle: r,
+  detachable: !1
+}, m = {
+  props: a,
+  initialProps: ["id", "className"]
+};
+export {
+  l as meta,
+  m 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/react-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/react-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.ws.js

@@ -0,0 +1,44 @@
+import { ButtonElementIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/react-sdk";
+import { button as o } from "@webstudio-is/sdk/normalize.css";
+import { props as n } from "./__generated__/button.props.js";
+const a = {
+  button: o
+}, c = {
+  category: "forms",
+  type: "container",
+  invalidAncestors: ["Button", "Link"],
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  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.",
+  icon: t,
+  presetStyle: a,
+  states: [
+    ...e,
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" }
+  ],
+  order: 2,
+  template: [
+    {
+      type: "instance",
+      component: "Button",
+      children: [
+        {
+          type: "text",
+          value: "Button text you can edit",
+          placeholder: !0
+        }
+      ]
+    }
+  ]
+}, p = {
+  props: n,
+  initialProps: ["id", "className", "type", "aria-label"]
+};
+export {
+  c as meta,
+  p 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.ws.js

@@ -0,0 +1,59 @@
+import { CheckboxCheckedIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { checkbox as o } from "@webstudio-is/sdk/normalize.css";
+import { props as n } from "./__generated__/checkbox.props.js";
+const r = {
+  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",
+  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.",
+  icon: e,
+  presetStyle: r,
+  order: 6,
+  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" }
+  ],
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      label: "Checkbox Field",
+      children: [
+        { type: "instance", component: "Checkbox", children: [] },
+        {
+          type: "instance",
+          component: "Text",
+          label: "Checkbox Label",
+          props: [{ type: "string", name: "tag", value: "span" }],
+          children: [{ type: "text", value: "Checkbox", placeholder: !0 }]
+        }
+      ]
+    }
+  ]
+}, p = {
+  props: n,
+  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,60 @@
+import { CodeTextIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-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 }
+    }
+  ]
+}, l = {
+  category: "general",
+  type: "embed",
+  description: "Use this component when you want to display code as text on the page.",
+  icon: e,
+  invalidAncestors: ["CodeText"],
+  constraints: {
+    relation: "ancestor",
+    component: { $neq: "CodeText" }
+  },
+  states: t,
+  presetStyle: p,
+  order: 9
+}, s = {
+  props: {
+    ...r,
+    code: {
+      required: !0,
+      control: "codetext",
+      type: "string"
+    }
+  },
+  initialProps: ["id", "className", "lang", "code"]
+};
+export {
+  l as meta,
+  s as propsMeta
+};