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

package/lib/__generated__/checkbox.props.js

@@ -3,7 +3,7 @@ const e = {
     required: !1,
     control: "text",
     type: "string",
-    description: "Current value of the element"
+    description: "Value of the form control"
   }
 };
 export {

package/lib/__generated__/markdown-embed.props.js

@@ -1,12 +1,6 @@
-const e = {
-  className: {
-    required: !1,
-    control: "text",
-    type: "string",
-    description: "Classes to which the element belongs"
-  },
+const t = {
   code: { required: !0, control: "text", type: "string" }
 };
 export {
-  e as props
+  t as props
 };

package/lib/__generated__/radio-button.props.js

@@ -3,7 +3,7 @@ const e = {
     required: !1,
     control: "text",
     type: "string",
-    description: "Current value of the element"
+    description: "Value of the form control"
   }
 };
 export {

package/lib/blockquote.ws.js

@@ -1,6 +1,5 @@
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { props as e } from "./__generated__/blockquote.props.js";
-const p = {
+import { props as t } from "./__generated__/blockquote.props.js";
+const e = {
   blockquote: [
     {
       property: "margin-top",
@@ -47,12 +46,11 @@ const p = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, a = {
-  states: t,
-  presetStyle: p,
+}, r = {
+  presetStyle: e,
   initialProps: ["id", "class", "cite"],
-  props: e
+  props: t
 };
 export {
-  a as meta
+  r as meta
 };

package/lib/body.ws.js

@@ -1,23 +1,9 @@
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { body as t } from "@webstudio-is/sdk/normalize.css";
-import { props as e } from "./__generated__/body.props.js";
-const r = {
-  body: [
-    ...t,
-    {
-      property: "-webkit-font-smoothing",
-      value: { type: "keyword", value: "antialiased" }
-    },
-    {
-      property: "-moz-osx-font-smoothing",
-      value: { type: "keyword", value: "grayscale" }
-    }
-  ]
-}, i = {
-  states: o,
-  presetStyle: r,
+import { body as o } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/body.props.js";
+const i = {
+  presetStyle: { body: o },
   initialProps: ["id", "class"],
-  props: e
+  props: r
 };
 export {
   i as meta

package/lib/bold.ws.js

@@ -1,13 +1,11 @@
-import { defaultStates as t } from "@webstudio-is/sdk";
 import { b as o } from "@webstudio-is/sdk/normalize.css";
-import { props as e } from "./__generated__/bold.props.js";
-const a = {
+import { props as t } from "./__generated__/bold.props.js";
+const p = {
   label: "Bold Text",
-  states: t,
   presetStyle: { b: o },
   initialProps: ["id", "class"],
-  props: e
+  props: t
 };
 export {
-  a as meta
+  p as meta
 };

package/lib/box.ws.js

@@ -1,26 +1,21 @@
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { section as t, nav as r, main as a, header as i, footer as o, figure as s, aside as n, article as d, address as p, div as c } from "@webstudio-is/sdk/normalize.css";
-import { props as g } from "./__generated__/box.props.js";
-const u = {
-  category: "general",
-  description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
-  states: e,
+import { section as e, nav as r, main as t, header as i, footer as a, figure as o, aside as s, article as d, address as n, div as p } from "@webstudio-is/sdk/normalize.css";
+import { props as c } from "./__generated__/box.props.js";
+const g = {
   presetStyle: {
-    div: c,
-    address: p,
+    div: p,
+    address: n,
     article: d,
-    aside: n,
-    figure: s,
-    footer: o,
+    aside: s,
+    figure: o,
+    footer: a,
     header: i,
-    main: a,
+    main: t,
     nav: r,
-    section: t
+    section: e
   },
-  order: 0,
   initialProps: ["tag", "id", "class"],
   props: {
-    ...g,
+    ...c,
     tag: {
       required: !0,
       control: "tag",
@@ -42,5 +37,5 @@ const u = {
   }
 };
 export {
-  u as meta
+  g as meta
 };

package/lib/button.ws.js

@@ -1,18 +1,10 @@
-import { defaultStates as e } from "@webstudio-is/sdk";
 import { button as t } from "@webstudio-is/sdk/normalize.css";
-import { props as l } from "./__generated__/button.props.js";
-const a = {
-  button: t
-}, i = {
-  presetStyle: a,
-  states: [
-    ...e,
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" }
-  ],
+import { props as o } from "./__generated__/button.props.js";
+const e = {
+  presetStyle: { button: t },
   initialProps: ["id", "class", "type", "aria-label"],
-  props: l
+  props: o
 };
 export {
-  i as meta
+  e as meta
 };

package/lib/checkbox.ws.js

@@ -1,31 +1,20 @@
 import { CheckboxCheckedIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as l } from "@webstudio-is/sdk";
-import { checkbox as t } from "@webstudio-is/sdk/normalize.css";
+import { checkbox as o } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/checkbox.props.js";
-const o = {
+const t = {
   input: [
-    ...t,
+    ...o,
     {
       property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, d = {
+}, m = {
   icon: e,
-  presetStyle: o,
-  states: [
-    ...l,
-    { 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" }
-  ],
+  presetStyle: t,
   initialProps: ["id", "class", "name", "value", "required", "checked"],
   props: r
 };
 export {
-  d as meta
+  m as meta
 };

package/lib/code-text.ws.js

@@ -1,10 +1,9 @@
 import { BracesIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { code as o } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/code-text.props.js";
-const p = {
+import { code as r } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/code-text.props.js";
+const o = {
   code: [
-    ...o,
+    ...r,
     {
       property: "display",
       value: { type: "keyword", value: "block" }
@@ -31,19 +30,15 @@ const p = {
     }
   ]
 }, c = {
-  category: "general",
-  description: "Use this component when you want to display code as text on the page.",
   icon: e,
   contentModel: {
     category: "instance",
     children: []
   },
-  states: t,
-  presetStyle: p,
-  order: 5,
+  presetStyle: o,
   initialProps: ["id", "class", "lang", "code"],
   props: {
-    ...r,
+    ...t,
     code: {
       required: !0,
       control: "codetext",

package/lib/form.ws.js

@@ -1,21 +1,16 @@
-import { defaultStates as r } from "@webstudio-is/sdk";
 import { form as t } from "@webstudio-is/sdk/normalize.css";
-import { props as e } from "./__generated__/form.props.js";
-const o = {
+import { props as o } from "./__generated__/form.props.js";
+const r = {
   form: [
     ...t,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
-}, m = {
-  category: "forms",
+}, p = {
   label: "Form",
-  description: "Create filters, surveys, searches and more.",
-  states: r,
-  presetStyle: o,
-  order: 0,
+  presetStyle: r,
   initialProps: ["id", "class", "action"],
-  props: e
+  props: o
 };
 export {
-  m as meta
+  p as meta
 };

package/lib/head-slot.template.js

@@ -3,7 +3,7 @@ import { $ as e } from "@webstudio-is/template";
 const l = {
   category: "general",
   description: "The Head Slot component lets you customize page-specific head elements (like canonical URLs), which merge with your site's global head settings, with Head Slot definitions taking priority over Page Settings. For site-wide head changes, use Project Settings instead.",
-  order: 6,
+  order: 5,
   template: /* @__PURE__ */ i(e.HeadSlot, { children: [
     /* @__PURE__ */ t(e.HeadTitle, { "ws:label": "Title", children: "Title" }),
     /* @__PURE__ */ t(e.HeadLink, { "ws:label": "Link", rel: "help", href: "/help" }),

package/lib/heading.ws.js

@@ -1,15 +1,13 @@
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { h6 as r, h5 as o, h4 as e, h3 as h, h2 as p, h1 as s } from "@webstudio-is/sdk/normalize.css";
+import { h6 as t, h5 as r, h4 as o, h3 as h, h2 as p, h1 as e } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/heading.props.js";
-const n = {
-  states: t,
+const m = {
   presetStyle: {
-    h1: s,
+    h1: e,
     h2: p,
     h3: h,
-    h4: e,
-    h5: o,
-    h6: r
+    h4: o,
+    h5: r,
+    h6: t
   },
   initialProps: ["tag", "id", "class"],
   props: {
@@ -23,5 +21,5 @@ const n = {
   }
 };
 export {
-  n as meta
+  m as meta
 };

package/lib/html-embed.ws.js

@@ -6,7 +6,7 @@ const a = {
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: t,
-  order: 2,
+  order: 3,
   contentModel: {
     category: "instance",
     children: [n]

package/lib/image.ws.js

@@ -1,9 +1,8 @@
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { img as t } from "@webstudio-is/sdk/normalize.css";
-import { props as o } from "./__generated__/image.props.js";
-const r = {
+import { img as e } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/image.props.js";
+const o = {
   img: [
-    ...t,
+    ...e,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
     {
       property: "max-width",
@@ -23,11 +22,10 @@ const r = {
       value: { type: "keyword", value: "auto" }
     }
   ]
-}, s = {
+}, i = {
   category: "media",
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
-  states: e,
-  presetStyle: r,
+  presetStyle: o,
   order: 0,
   initialProps: [
     "id",
@@ -40,7 +38,7 @@ const r = {
     "optimize"
   ],
   props: {
-    ...o,
+    ...t,
     // Automatically generated props don't have the right control.
     src: {
       type: "string",
@@ -51,5 +49,5 @@ const r = {
   }
 };
 export {
-  s as meta
+  i as meta
 };

package/lib/input.js

@@ -1,17 +1,21 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-const a = n(
-  ({ children: d, type: t = "text", value: r, defaultValue: e, ...o }, p) => /* @__PURE__ */ i(
-    "input",
-    {
-      ...o,
-      defaultValue: r ?? e,
-      type: t,
-      ref: p
-    }
-  )
+import { forwardRef as m, useContext as s, createElement as c } from "react";
+import { ReactSdkContext as d } from "@webstudio-is/react-sdk/runtime";
+const f = m(
+  ({ value: t, defaultValue: r, checked: n, defaultChecked: e, ...o }, i) => {
+    const { renderer: p } = s(d), a = p === "canvas" ? String(t ?? r) + String(n ?? e) : void 0;
+    return /* @__PURE__ */ c(
+      "input",
+      {
+        ...o,
+        key: a,
+        defaultValue: t ?? r,
+        defaultChecked: n ?? e,
+        ref: i
+      }
+    );
+  }
 );
-a.displayName = "Input";
+f.displayName = "Input";
 export {
-  a as Input
+  f as Input
 };

package/lib/input.ws.js

@@ -1,33 +1,16 @@
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { input as l } 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: [
-    ...l,
+    ...e,
     {
       property: "display",
       value: { type: "keyword", value: "block" }
     }
   ]
-}, s = {
-  category: "forms",
+}, l = {
   label: "Text Input",
-  description: "A single-line text input for collecting string data from your users.",
-  presetStyle: r,
-  order: 3,
-  states: [
-    ...e,
-    { 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" },
-  ],
+  presetStyle: p,
   initialProps: [
     "id",
     "class",
@@ -41,5 +24,5 @@ const r = {
   props: t
 };
 export {
-  s as meta
+  l as meta
 };

package/lib/italic.ws.js

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

package/lib/label.ws.js

@@ -1,4 +1,3 @@
-import { defaultStates as t } from "@webstudio-is/sdk";
 import { label as e } from "@webstudio-is/sdk/normalize.css";
 import { props as l } from "./__generated__/label.props.js";
 const o = {
@@ -6,13 +5,12 @@ const o = {
     ...e,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, s = {
+}, t = {
   label: "Input Label",
-  states: t,
   presetStyle: o,
   initialProps: ["id", "class", "for"],
   props: l
 };
 export {
-  s as meta
+  t as meta
 };

package/lib/link.ws.js

@@ -1,28 +1,16 @@
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { a as t } from "@webstudio-is/sdk/normalize.css";
+import { a as e } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/link.props.js";
-const o = {
+const t = {
   a: [
-    ...t,
+    ...e,
     {
       property: "display",
       value: { type: "keyword", value: "inline-block" }
     }
   ]
 }, p = {
-  presetStyle: o,
-  states: [
-    ...e,
-    {
-      selector: ":visited",
-      label: "Visited"
-    },
-    {
-      category: "component-states",
-      selector: "[aria-current=page]",
-      label: "Current page"
-    }
-  ],
+  presetStyle: t,
+  states: [{ label: "Current page", selector: "[aria-current=page]" }],
   initialProps: ["id", "class", "href", "target", "prefetch", "download"],
   props: {
     ...r,

package/lib/list-item.ws.js

@@ -1,8 +1,6 @@
-import { defaultStates as t } from "@webstudio-is/sdk";
 import { li as o } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/list-item.props.js";
 const p = {
-  states: t,
   presetStyle: { li: o },
   initialProps: ["id", "class"],
   props: r

package/lib/list.ws.js

@@ -1,9 +1,8 @@
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { ul as r, ol as t } 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 o = {
+const t = {
   ol: [
-    ...t,
+    ...r,
     {
       property: "margin-top",
       value: { type: "keyword", value: "0" }
@@ -18,7 +17,7 @@ const o = {
     }
   ],
   ul: [
-    ...r,
+    ...e,
     {
       property: "margin-top",
       value: { type: "keyword", value: "0" }
@@ -32,12 +31,11 @@ const o = {
       value: { type: "keyword", value: "40px" }
     }
   ]
-}, d = {
-  states: e,
-  presetStyle: o,
+}, l = {
+  presetStyle: t,
   initialProps: ["id", "class", "ordered", "start", "reversed"],
   props: p
 };
 export {
-  d as meta
+  l 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

@@ -27,7 +27,7 @@ const l = {
     { selector: ":hover", label: "Hover" },
     { selector: ":disabled", label: "Disabled" }
   ],
-  initialProps: ["label", "selected", "value", "label", "disabled"],
+  initialProps: ["label", "value", "label", "disabled"],
   props: e
 };
 export {

package/lib/paragraph.ws.js

@@ -1,11 +1,9 @@
-import { defaultStates as t } from "@webstudio-is/sdk";
 import { p as o } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/paragraph.props.js";
+import { props as p } from "./__generated__/paragraph.props.js";
 const i = {
-  states: t,
   presetStyle: { p: o },
   initialProps: ["id", "class"],
-  props: r
+  props: p
 };
 export {
   i as meta