@webstudio-is/sdk-components-react 0.219.0 → 0.221.0

package/lib/input.ws.js

@@ -1,49 +1,28 @@
-import { FormTextFieldIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as l } from "@webstudio-is/sdk";
-import { input as o } from "@webstudio-is/sdk/normalize.css";
+import { input as e } from "@webstudio-is/sdk/normalize.css";
 import { props as t } from "./__generated__/input.props.js";
-const r = {
+const p = {
   input: [
-    ...o,
+    ...e,
     {
       property: "display",
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c = {
-  category: "forms",
+}, l = {
   label: "Text Input",
-  description: "A single-line text input for collecting string data from your users.",
-  icon: e,
-  presetStyle: r,
-  order: 3,
-  states: [
-    ...l,
-    { 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" },
-  ]
-}, n = {
-  props: t,
+  presetStyle: p,
   initialProps: [
     "id",
-    "className",
+    "class",
     "name",
     "value",
     "type",
     "placeholder",
     "required",
-    "autoFocus"
-  ]
+    "autofocus"
+  ],
+  props: t
 };
 export {
-  c as meta,
-  n as propsMeta
+  l as meta
 };

package/lib/italic.ws.js

@@ -1,25 +1,11 @@
-import { TextItalicIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { i as e } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/italic.props.js";
-const i = {
-  i: [
-    ...e,
-    {
-      property: "font-style",
-      value: { type: "keyword", value: "italic" }
-    }
-  ]
-}, m = {
+import { i as t } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/italic.props.js";
+const e = {
   label: "Italic Text",
-  icon: t,
-  states: o,
-  presetStyle: i
-}, c = {
-  props: r,
-  initialProps: ["id", "className"]
+  presetStyle: { i: t },
+  initialProps: ["id", "class"],
+  props: i
 };
 export {
-  m as meta,
-  c as propsMeta
+  e as meta
 };

package/lib/label.ws.js

@@ -1,22 +1,16 @@
-import { LabelIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
 import { label as e } from "@webstudio-is/sdk/normalize.css";
 import { props as l } from "./__generated__/label.props.js";
-const r = {
+const o = {
   label: [
     ...e,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, i = {
+}, t = {
   label: "Input Label",
-  icon: t,
-  states: o,
-  presetStyle: r
-}, c = {
-  props: l,
-  initialProps: ["id", "className", "htmlFor"]
+  presetStyle: o,
+  initialProps: ["id", "class", "for"],
+  props: l
 };
 export {
-  i as meta,
-  c as propsMeta
+  t as meta
 };

package/lib/link.ws.js

@@ -1,43 +1,26 @@
-import { LinkIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { a as r } from "@webstudio-is/sdk/normalize.css";
-import { props as o } from "./__generated__/link.props.js";
-const a = {
+import { a as e } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/link.props.js";
+const t = {
   a: [
-    ...r,
+    ...e,
     {
       property: "display",
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, n = {
-  placeholder: "Link",
-  icon: e,
-  presetStyle: a,
-  states: [
-    ...t,
-    {
-      selector: ":visited",
-      label: "Visited"
-    },
-    {
-      category: "component-states",
-      selector: "[aria-current=page]",
-      label: "Current page"
-    }
-  ]
-}, c = {
+}, p = {
+  presetStyle: t,
+  states: [{ label: "Current page", selector: "[aria-current=page]" }],
+  initialProps: ["id", "class", "href", "target", "prefetch", "download"],
   props: {
-    ...o,
+    ...r,
     href: {
       type: "string",
       control: "url",
       required: !1
     }
-  },
-  initialProps: ["id", "className", "href", "target", "prefetch", "download"]
+  }
 };
 export {
-  n as meta,
-  c as propsMeta
+  p as meta
 };

package/lib/list-item.ws.js

@@ -1,19 +1,10 @@
-import { ListItemIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { li as e } from "@webstudio-is/sdk/normalize.css";
+import { li as o } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/list-item.props.js";
-const a = {
-  placeholder: "List item",
-  icon: t,
-  states: o,
-  presetStyle: {
-    li: e
-  }
-}, l = {
-  props: r,
-  initialProps: ["id", "className"]
+const p = {
+  presetStyle: { li: o },
+  initialProps: ["id", "class"],
+  props: r
 };
 export {
-  a as meta,
-  l as propsMeta
+  p as meta
 };

package/lib/list.ws.js

@@ -1,10 +1,8 @@
-import { ListIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { ul as r, ol as o } from "@webstudio-is/sdk/normalize.css";
+import { ul as e, ol as r } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/list.props.js";
-const a = {
+const t = {
   ol: [
-    ...o,
+    ...r,
     {
       property: "margin-top",
       value: { type: "keyword", value: "0" }
@@ -19,7 +17,7 @@ const a = {
     }
   ],
   ul: [
-    ...r,
+    ...e,
     {
       property: "margin-top",
       value: { type: "keyword", value: "0" }
@@ -33,15 +31,11 @@ const a = {
       value: { type: "keyword", value: "40px" }
     }
   ]
-}, d = {
-  icon: e,
-  states: t,
-  presetStyle: a
-}, s = {
-  props: p,
-  initialProps: ["id", "className", "ordered", "start", "reversed"]
+}, l = {
+  presetStyle: t,
+  initialProps: ["id", "class", "ordered", "start", "reversed"],
+  props: p
 };
 export {
-  d as meta,
-  s as propsMeta
+  l as meta
 };

package/lib/markdown-embed.ws.js

@@ -1,6 +1,6 @@
 import { MarkdownEmbedIcon as e } from "@webstudio-is/icons/svg";
 import { descendantComponent as o } from "@webstudio-is/sdk";
-import { props as t } from "./__generated__/markdown-embed.props.js";
+import { props as r } from "./__generated__/markdown-embed.props.js";
 const a = {
   icon: e,
   contentModel: {
@@ -18,20 +18,18 @@ const a = {
         value: { type: "keyword", value: "collapse" }
       }
     ]
-  }
-}, c = {
+  },
+  initialProps: ["class"],
   props: {
-    ...t,
+    ...r,
     code: {
       required: !0,
       control: "code",
       language: "markdown",
       type: "string"
     }
-  },
-  initialProps: ["className"]
+  }
 };
 export {
-  a as meta,
-  c as propsMeta
+  a as meta
 };

package/lib/option.js

@@ -1,6 +1,8 @@
 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 }));
+const i = t(
+  (o, p) => /* @__PURE__ */ r("option", { ...o, ref: p })
+);
 i.displayName = "Option";
 export {
   i as Option

package/lib/option.ws.js

@@ -1,5 +1,4 @@
-import { ItemIcon as e } from "@webstudio-is/icons/svg";
-import { props as t } from "./__generated__/option.props.js";
+import { props as e } from "./__generated__/option.props.js";
 const l = {
   option: [
     {
@@ -14,10 +13,9 @@ const l = {
       }
     }
   ]
-}, r = {
+}, a = {
   category: "hidden",
   description: "An item within a drop-down menu that users can select as their chosen value.",
-  icon: e,
   presetStyle: l,
   states: [
     // Applies when option is being activated (clicked)
@@ -28,12 +26,10 @@ const l = {
     { selector: ":default", label: "Default" },
     { selector: ":hover", label: "Hover" },
     { selector: ":disabled", label: "Disabled" }
-  ]
-}, c = {
-  props: t,
-  initialProps: ["label", "selected", "value", "label", "disabled"]
+  ],
+  initialProps: ["label", "value", "label", "disabled"],
+  props: e
 };
 export {
-  r as meta,
-  c as propsMeta
+  a as meta
 };

package/lib/paragraph.ws.js

@@ -1,19 +1,10 @@
-import { TextAlignLeftIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { p as r } from "@webstudio-is/sdk/normalize.css";
-import { props as e } from "./__generated__/paragraph.props.js";
-const p = {
-  p: r
-}, c = {
-  placeholder: "Paragraph",
-  icon: t,
-  states: o,
-  presetStyle: p
-}, l = {
-  props: e,
-  initialProps: ["id", "className"]
+import { p as o } from "@webstudio-is/sdk/normalize.css";
+import { props as p } from "./__generated__/paragraph.props.js";
+const i = {
+  presetStyle: { p: o },
+  initialProps: ["id", "class"],
+  props: p
 };
 export {
-  c as meta,
-  l as propsMeta
+  i as meta
 };

package/lib/radio-button.ws.js

@@ -1,35 +1,21 @@
 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 a = {
+import { radio as i } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/radio-button.props.js";
+const r = {
   input: [
-    ...o,
+    ...i,
     {
       property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s = {
+}, m = {
   label: "Radio",
   icon: e,
-  presetStyle: a,
-  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" },
-  ]
-}, m = {
-  props: r,
-  initialProps: ["id", "className", "name", "value", "required", "checked"]
+  presetStyle: r,
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: o
 };
 export {
-  s as meta,
-  m as propsMeta
+  m as meta
 };

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

@@ -1,6 +1,5 @@
-import { meta as t, propsMeta as a } from "./link.ws.js";
-const p = t, e = a;
+import { meta as t } from "./link.ws.js";
+const a = t;
 export {
-  p as meta,
-  e as propsMeta
+  a as meta
 };

package/lib/select.js

@@ -1,19 +1,32 @@
-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);
+import { forwardRef as r, useContext as s, createElement as i } from "react";
+import { ReactSdkContext as l } from "@webstudio-is/react-sdk/runtime";
+const p = r(
+  ({ value: o, defaultValue: n, ...e }, t) => {
+    const { renderer: c } = s(l), a = c === "canvas" ? String(o ?? n) : void 0;
+    return /* @__PURE__ */ i(
+      "select",
+      {
+        ...e,
+        key: a,
+        defaultValue: o ?? n,
+        ref: t
+      }
+    );
+  }
+);
+p.displayName = "Select";
+const S = {
+  onNavigatorUnselect: (o, n) => {
+    for (const e of n.instancePath)
+      (e.component === "Select" || e.tag === "select") && o.setMemoryProp(e, "value", void 0);
   },
-  onNavigatorSelect: (o, t) => {
-    for (const e of t.instancePath)
-      e.component === "Option" && o.setMemoryProp(e, "selected", !0);
+  onNavigatorSelect: (o, n) => {
+    let e;
+    for (const t of n.instancePath)
+      (t.component === "Option" || t.tag === "option") && (e = o.getPropValue(t, "value")), (t.component === "Select" || t.tag === "select") && o.setMemoryProp(t, "value", e);
   }
 };
 export {
-  s as Select,
-  l as hooksSelect
+  p as Select,
+  S as hooksSelect
 };

package/lib/select.ws.js

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

package/lib/separator.ws.js

@@ -1,10 +1,8 @@
-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 = {
+import { hr as e } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/separator.props.js";
+const o = {
   hr: [
-    ...r,
+    ...e,
     {
       property: "height",
       value: { type: "keyword", value: "1px" }
@@ -30,18 +28,11 @@ const p = {
       value: { type: "keyword", value: "none" }
     }
   ]
-}, n = {
-  category: "general",
-  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
-}, s = {
-  props: t,
-  initialProps: ["id", "className"]
+}, y = {
+  presetStyle: o,
+  initialProps: ["id", "class"],
+  props: r
 };
 export {
-  n as meta,
-  s as propsMeta
+  y as meta
 };

package/lib/slot.ws.js

@@ -1,13 +1,10 @@
-import { SlotComponentIcon as o } from "@webstudio-is/icons/svg";
-const e = {
+import { SlotComponentIcon as t } from "@webstudio-is/icons/svg";
+const o = {
   category: "general",
   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: o,
-  order: 5
-}, n = {
-  props: {}
+  icon: t,
+  order: 4
 };
 export {
-  e as meta,
-  n as propsMeta
+  o as meta
 };

package/lib/span.ws.js

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

package/lib/subscript.ws.js

@@ -1,19 +1,11 @@
-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 p = {
-  sub: r
-}, c = {
+import { sub as t } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/subscript.props.js";
+const s = {
   label: "Subscript Text",
-  icon: t,
-  states: o,
-  presetStyle: p
-}, l = {
-  props: s,
-  initialProps: ["id", "className"]
+  presetStyle: { sub: t },
+  initialProps: ["id", "class"],
+  props: r
 };
 export {
-  c as meta,
-  l as propsMeta
+  s as meta
 };

package/lib/superscript.ws.js

@@ -1,19 +1,11 @@
-import { SuperscriptIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { sup as r } from "@webstudio-is/sdk/normalize.css";
-import { props as p } from "./__generated__/superscript.props.js";
-const s = {
-  sup: r
-}, c = {
+import { sup as p } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/superscript.props.js";
+const o = {
   label: "Superscript Text",
-  icon: t,
-  states: o,
-  presetStyle: s
-}, l = {
-  props: p,
-  initialProps: ["id", "className"]
+  presetStyle: { sup: p },
+  initialProps: ["id", "class"],
+  props: r
 };
 export {
-  c as meta,
-  l as propsMeta
+  o as meta
 };