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

package/lib/option.js

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

package/lib/option.ws.js

@@ -0,0 +1,47 @@
+import { ItemIcon as e } from "@webstudio-is/icons/svg";
+import "@webstudio-is/react-sdk";
+import { props as t } from "./__generated__/option.props.js";
+const o = {
+  option: [
+    {
+      property: "backgroundColor",
+      state: ":checked",
+      value: {
+        type: "rgb",
+        alpha: 1,
+        r: 209,
+        g: 209,
+        b: 209
+      }
+    }
+  ]
+}, c = {
+  category: "hidden",
+  // @todo: requiredAncestors should be ["Select", "Optgroup", "Datalist"] but that gives unreadable error when adding Select onto Canvas
+  requiredAncestors: ["Select"],
+  constraints: {
+    relation: "parent",
+    component: { $eq: "Select" }
+  },
+  type: "control",
+  description: "An item within a drop-down menu that users can select as their chosen value.",
+  icon: e,
+  presetStyle: o,
+  states: [
+    // Applies when option is being activated (clicked)
+    { selector: ":active", label: "Active" },
+    // Applies to the currently selected option
+    { selector: ":checked", label: "Checked" },
+    // For <option> elements: The :default pseudo-class selects the <option> that has the selected attribute when the page loads. This is true even if the user later selects a different option.
+    { selector: ":default", label: "Default" },
+    { selector: ":hover", label: "Hover" },
+    { selector: ":disabled", label: "Disabled" }
+  ]
+}, s = {
+  props: t,
+  initialProps: ["label", "selected", "value", "label", "disabled"]
+};
+export {
+  c as meta,
+  s as propsMeta
+};

package/lib/paragraph.js

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

package/lib/paragraph.ws.js

@@ -0,0 +1,40 @@
+import { TextAlignLeftIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/react-sdk";
+import { p as r } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/paragraph.props.js";
+const a = {
+  p: r
+}, s = {
+  category: "text",
+  type: "container",
+  description: "A container for multi-line text.",
+  icon: t,
+  invalidAncestors: ["Paragraph"],
+  constraints: {
+    relation: "ancestor",
+    component: { $neq: "Paragraph" }
+  },
+  states: e,
+  presetStyle: a,
+  order: 2,
+  template: [
+    {
+      type: "instance",
+      component: "Paragraph",
+      children: [
+        {
+          type: "text",
+          value: "Paragraph text you can edit",
+          placeholder: !0
+        }
+      ]
+    }
+  ]
+}, l = {
+  props: o,
+  initialProps: ["id", "className"]
+};
+export {
+  s as meta,
+  l as propsMeta
+};