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

package/lib/radio-button.ws.js

@@ -0,0 +1,40 @@
+import { RadioCheckedIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { radio as o } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/radio-button.props.js";
+const i = {
+  input: [
+    ...o,
+    {
+      property: "marginRight",
+      value: { type: "unit", unit: "em", value: 0.5 }
+    }
+  ]
+}, p = {
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  type: "control",
+  label: "Radio",
+  icon: e,
+  presetStyle: i,
+  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" },
+  ]
+}, s = {
+  props: r,
+  initialProps: ["id", "className", "name", "value", "required", "checked"]
+};
+export {
+  p as meta,
+  s as propsMeta
+};

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

@@ -0,0 +1,9 @@
+import { meta as t, propsMeta as e } from "./link.ws.js";
+const a = {
+  ...t,
+  type: "rich-text-child"
+}, o = e;
+export {
+  a 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
+};

package/lib/select.template.js

@@ -0,0 +1,16 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { $ as e } from "@webstudio-is/template";
+const n = {
+  category: "forms",
+  description: "A drop-down menu for users to select a single option from a predefined list.",
+  order: 4,
+  template: /* @__PURE__ */ t(e.Select, { children: [
+    /* @__PURE__ */ o(e.Option, { label: "Please choose an option", value: "" }),
+    /* @__PURE__ */ o(e.Option, { label: "Option A", value: "a" }),
+    /* @__PURE__ */ o(e.Option, { label: "Option B", value: "b" }),
+    /* @__PURE__ */ o(e.Option, { label: "Option C", value: "c" })
+  ] })
+};
+export {
+  n as meta
+};

package/lib/select.ws.js

@@ -0,0 +1,44 @@
+import { SelectIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { select as l } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/select.props.js";
+const r = {
+  select: [
+    ...l,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    }
+  ]
+}, c = {
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  type: "container",
+  icon: e,
+  presetStyle: r,
+  states: [
+    ...t,
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" }
+  ]
+}, p = {
+  props: o,
+  initialProps: [
+    "id",
+    "className",
+    "name",
+    "value",
+    "multiple",
+    "required",
+    "autoFocus"
+  ]
+};
+export {
+  c as meta,
+  p as propsMeta
+};

package/lib/separator.js

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

package/lib/separator.ws.js

@@ -0,0 +1,48 @@
+import { MinusIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { hr as r } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/separator.props.js";
+const p = {
+  hr: [
+    ...r,
+    {
+      property: "height",
+      value: { type: "keyword", value: "1px" }
+    },
+    {
+      property: "backgroundColor",
+      value: { type: "keyword", value: "gray" }
+    },
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "none" }
+    }
+  ]
+}, n = {
+  category: "general",
+  type: "embed",
+  description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
+  icon: e,
+  states: o,
+  presetStyle: p,
+  order: 3
+}, d = {
+  props: t,
+  initialProps: ["id", "className"]
+};
+export {
+  n as meta,
+  d as propsMeta
+};

package/lib/slot.js

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

package/lib/slot.ws.js

@@ -0,0 +1,14 @@
+import { SlotComponentIcon as t } from "@webstudio-is/icons/svg";
+const e = {
+  category: "general",
+  type: "container",
+  description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
+  icon: t,
+  order: 5
+}, n = {
+  props: {}
+};
+export {
+  e as meta,
+  n as propsMeta
+};

package/lib/span.js

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

package/lib/span.ws.js

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

package/lib/subscript.js

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

package/lib/subscript.ws.js

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

package/lib/superscript.js

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

package/lib/superscript.ws.js

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

package/lib/templates.js

@@ -0,0 +1,38 @@
+import { meta as o } from "./content-embed.template.js";
+import { meta as m } from "./markdown-embed.template.js";
+import { meta as s } from "./text.template.js";
+import { meta as p } from "./heading.template.js";
+import { meta as n } from "./paragraph.template.js";
+import { meta as i } from "./link.template.js";
+import { meta as u } from "./button.template.js";
+import { meta as l } from "./webhook-form.template.js";
+import { meta as c } from "./blockquote.template.js";
+import { meta as g } from "./list.template.js";
+import { meta as C } from "./list-item.template.js";
+import { meta as H } from "./label.template.js";
+import { meta as T } from "./radio-button.template.js";
+import { meta as w } from "./checkbox.template.js";
+import { meta as I } from "./vimeo.template.js";
+import { meta as P } from "./youtube.template.js";
+import { meta as V } from "./select.template.js";
+import { meta as j } from "./head-slot.template.js";
+export {
+  c as Blockquote,
+  u as Button,
+  w as Checkbox,
+  o as ContentEmbed,
+  l as Form,
+  j as HeadSlot,
+  p as Heading,
+  H as Label,
+  i as Link,
+  g as List,
+  C as ListItem,
+  m as MarkdownEmbed,
+  n as Paragraph,
+  T as RadioButton,
+  V as Select,
+  s as Text,
+  I as Vimeo,
+  P as YouTube
+};

package/lib/text.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+const m = "div", s = f(
+  ({ tag: t = m, children: o, ...r }, a) => /* @__PURE__ */ e(t, { ...r, ref: a, children: o })
+);
+s.displayName = "Text";
+export {
+  s as Text,
+  m as defaultTag
+};

package/lib/text.template.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import { $ as t, PlaceholderValue as o } from "@webstudio-is/template";
+const a = {
+  category: "typography",
+  description: "A generic container for any text content that is not a heading or a link.",
+  order: 0,
+  template: /* @__PURE__ */ e(t.Text, { children: new o("The text you can edit") })
+};
+export {
+  a as meta
+};

package/lib/text.ws.js

@@ -0,0 +1,25 @@
+import { TextIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/sdk";
+import { div as o } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/text.props.js";
+const r = {
+  div: [
+    ...o,
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
+    }
+  ]
+}, n = {
+  type: "container",
+  icon: t,
+  states: e,
+  presetStyle: r
+}, c = {
+  props: i,
+  initialProps: ["id", "className", "tag"]
+};
+export {
+  n as meta,
+  c as propsMeta
+};

package/lib/textarea.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+const f = d(({ children: i, value: e, defaultValue: r, ...a }, t) => /* @__PURE__ */ o("textarea", { ...a, defaultValue: e ?? r, ref: t }));
+f.displayName = "Textarea";
+export {
+  f as Textarea
+};

package/lib/textarea.ws.js

@@ -0,0 +1,55 @@
+import { FormTextAreaIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { textarea as t } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/textarea.props.js";
+const l = {
+  textarea: [
+    ...t,
+    // resize doesn't work well while on canvas
+    { property: "resize", value: { type: "keyword", value: "none" } },
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    }
+  ]
+}, p = {
+  category: "forms",
+  type: "control",
+  label: "Text Area",
+  description: "A multi-line text input for collecting longer string data from your users.",
+  icon: e,
+  presetStyle: l,
+  order: 4,
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  states: [
+    ...o,
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { 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" },
+  ]
+}, c = {
+  props: r,
+  initialProps: [
+    "id",
+    "className",
+    "name",
+    "value",
+    "placeholder",
+    "required",
+    "autoFocus"
+  ]
+};
+export {
+  p as meta,
+  c as propsMeta
+};