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

package/lib/radio-button.js

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

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

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

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

@@ -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.ws.js

@@ -0,0 +1,97 @@
+import { SelectIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { select as n } from "@webstudio-is/sdk/normalize.css";
+import { props as l } from "./__generated__/select.props.js";
+const o = {
+  select: [
+    ...n,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    }
+  ]
+}, s = {
+  category: "forms",
+  invalidAncestors: ["Button", "Link"],
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  type: "container",
+  description: "A drop-down menu for users to select a single option from a predefined list.",
+  icon: e,
+  presetStyle: o,
+  order: 4,
+  states: [
+    ...t,
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" }
+  ],
+  template: [
+    {
+      type: "instance",
+      component: "Select",
+      label: "Select",
+      children: [
+        {
+          type: "instance",
+          component: "Option",
+          label: "Option",
+          props: [
+            { type: "string", name: "label", value: "Please choose an option" },
+            { type: "string", name: "value", value: "" }
+          ],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Option",
+          label: "Option",
+          props: [
+            { type: "string", name: "label", value: "Option A" },
+            { type: "string", name: "value", value: "a" }
+          ],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Option",
+          label: "Option",
+          props: [
+            { type: "string", name: "label", value: "Option B" },
+            { type: "string", name: "value", value: "b" }
+          ],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Option",
+          label: "Option",
+          props: [
+            { type: "string", name: "label", value: "Option C" },
+            { type: "string", name: "value", value: "c" }
+          ],
+          children: []
+        }
+      ]
+    }
+  ]
+}, c = {
+  props: l,
+  initialProps: [
+    "id",
+    "className",
+    "name",
+    "value",
+    "multiple",
+    "required",
+    "autoFocus"
+  ]
+};
+export {
+  s as meta,
+  c 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 { DashIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/react-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: 5
+}, 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,15 @@
+import { SlotComponentIcon as t } from "@webstudio-is/icons/svg";
+const o = {
+  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,
+  stylable: !1,
+  order: 6
+}, n = {
+  props: {}
+};
+export {
+  o 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/react-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/react-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/react-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/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.ws.js

@@ -0,0 +1,41 @@
+import { TextIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/react-sdk";
+import { div as o } from "@webstudio-is/sdk/normalize.css";
+import { props as n } from "./__generated__/text.props.js";
+const r = {
+  div: [
+    ...o,
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
+    }
+  ]
+}, s = {
+  category: "text",
+  type: "container",
+  description: "A generic container for any text content that is not a heading or a link.",
+  icon: t,
+  states: e,
+  presetStyle: r,
+  order: 0,
+  template: [
+    {
+      type: "instance",
+      component: "Text",
+      children: [
+        {
+          type: "text",
+          value: "The text you can edit",
+          placeholder: !0
+        }
+      ]
+    }
+  ]
+}, m = {
+  props: n,
+  initialProps: ["id", "className", "tag"]
+};
+export {
+  s as meta,
+  m 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,56 @@
+import { FormTextAreaIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { textarea as o } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/textarea.props.js";
+const l = {
+  textarea: [
+    ...o,
+    // 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,
+  invalidAncestors: ["Button", "Link"],
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  states: [
+    ...t,
+    { 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
+};