@webstudio-is/sdk-components-react 0.0.0-588fe22 → 0.0.0-73cd6ea

package/lib/radio-button.ws.js

@@ -1,40 +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 i = {
+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: "marginRight",
+      property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, p = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  type: "control",
+}, m = {
   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"]
+  presetStyle: r,
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: o
 };
 export {
-  p as meta,
-  s as propsMeta
+  m as meta
 };

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

@@ -1,9 +1,5 @@
-import { meta as t, propsMeta as e } from "./link.ws.js";
-const a = {
-  ...t,
-  type: "rich-text-child"
-}, o = e;
+import { meta as t } from "./link.ws.js";
+const a = t;
 export {
-  a as meta,
-  o 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,44 +1,26 @@
-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 = {
+import { select as e } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/select.props.js";
+const o = {
   select: [
-    ...l,
+    ...e,
     {
       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,
+  presetStyle: o,
   initialProps: [
     "id",
-    "className",
+    "class",
     "name",
     "value",
     "multiple",
     "required",
-    "autoFocus"
-  ]
+    "autofocus"
+  ],
+  props: t
 };
 export {
-  c as meta,
-  p as propsMeta
+  p as meta
 };

package/lib/separator.ws.js

@@ -1,48 +1,38 @@
-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" }
     },
     {
-      property: "backgroundColor",
+      property: "background-color",
       value: { type: "keyword", value: "gray" }
     },
     {
-      property: "borderTopStyle",
+      property: "border-top-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderRightStyle",
+      property: "border-right-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderLeftStyle",
+      property: "border-left-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderBottomStyle",
+      property: "border-bottom-style",
       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"]
+}, y = {
+  presetStyle: o,
+  initialProps: ["id", "class"],
+  props: r
 };
 export {
-  n as meta,
-  d as propsMeta
+  y as meta
 };

package/lib/shared/video.js

@@ -0,0 +1,13 @@
+import { createContext as o } from "react";
+const s = (t) => {
+  const e = "ontouchstart" in window;
+  (window.matchMedia("(max-width: 1024px)").matches || e) && t.requestFullscreen();
+}, c = o({
+  onInitPlayer: () => {
+  },
+  status: "initial"
+});
+export {
+  c as VideoContext,
+  s as requestFullscreen
+};

package/lib/slot.ws.js

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

package/lib/span.ws.js

@@ -1,20 +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 e } from "./__generated__/span.props.js";
-const s = {
-  span: r
-}, c = {
-  type: "rich-text-child",
+import { props as t } from "./__generated__/span.props.js";
+const e = {
   label: "Text",
-  icon: t,
-  states: o,
-  presetStyle: s
-}, n = {
-  props: e,
-  initialProps: ["id", "className"]
+  icon: o,
+  presetStyle: { span: r },
+  initialProps: ["id", "class"],
+  props: t
 };
 export {
-  c as meta,
-  n as propsMeta
+  e as meta
 };

package/lib/subscript.ws.js

@@ -1,20 +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 e = {
-  sub: r
-}, a = {
-  type: "rich-text-child",
+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: e
-}, l = {
-  props: s,
-  initialProps: ["id", "className"]
+  presetStyle: { sub: t },
+  initialProps: ["id", "class"],
+  props: r
 };
 export {
-  a as meta,
-  l as propsMeta
+  s as meta
 };

package/lib/superscript.ws.js

@@ -1,20 +1,11 @@
-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",
+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: r,
-  presetStyle: e
-}, l = {
-  props: p,
-  initialProps: ["id", "className"]
+  presetStyle: { sup: p },
+  initialProps: ["id", "class"],
+  props: r
 };
 export {
-  a as meta,
-  l as propsMeta
+  o as meta
 };

package/lib/templates.js

@@ -1,38 +1,14 @@
-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";
+import { meta as m } from "./content-embed.template.js";
+import { meta as a } from "./markdown-embed.template.js";
+import { meta as f } from "./webhook-form.template.js";
+import { meta as s } from "./vimeo.template.js";
+import { meta as d } from "./youtube.template.js";
+import { meta as n } 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
+  m as ContentEmbed,
+  f as Form,
+  n as HeadSlot,
+  a as MarkdownEmbed,
+  s as Vimeo,
+  d as YouTube
 };

package/lib/text.js

@@ -1,10 +1,12 @@
-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 })
+import { forwardRef as a, createElement as m } from "react";
+import { getTagFromProps as f } from "@webstudio-is/sdk/runtime";
+const g = "div", n = a(
+  ({ tag: e, ...t }, r) => {
+    const o = f(t) ?? e ?? g;
+    return m(o, { ...t, ref: r });
+  }
 );
-s.displayName = "Text";
+n.displayName = "Text";
 export {
-  s as Text,
-  m as defaultTag
+  n as Text
 };

package/lib/text.ws.js

@@ -1,25 +1,28 @@
 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: [
+import { div as i } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/text.props.js";
+const n = {
+  icon: t,
+  presetStyle: {
+    div: [
+      ...i,
+      {
+        property: "min-height",
+        value: { type: "unit", unit: "em", value: 1 }
+      }
+    ]
+  },
+  initialProps: ["tag", "id", "class"],
+  props: {
     ...o,
-    {
-      property: "minHeight",
-      value: { type: "unit", unit: "em", value: 1 }
+    tag: {
+      required: !0,
+      control: "tag",
+      type: "string",
+      options: ["div", "cite", "figcaption", "span"]
     }
-  ]
-}, n = {
-  type: "container",
-  icon: t,
-  states: e,
-  presetStyle: r
-}, c = {
-  props: i,
-  initialProps: ["id", "className", "tag"]
+  }
 };
 export {
-  n as meta,
-  c as propsMeta
+  n as meta
 };

package/lib/textarea.js

@@ -1,7 +1,18 @@
-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";
+import { forwardRef as c, useContext as m, createElement as s } from "react";
+import { ReactSdkContext as x } from "@webstudio-is/react-sdk/runtime";
+const d = c(({ value: e, defaultValue: t, ...r }, a) => {
+  const { renderer: o } = m(x), n = o === "canvas" ? String(e ?? t) : void 0;
+  return /* @__PURE__ */ s(
+    "textarea",
+    {
+      ...r,
+      key: n,
+      defaultValue: e ?? t,
+      ref: a
+    }
+  );
+});
+d.displayName = "Textarea";
 export {
-  f as Textarea
+  d as Textarea
 };

package/lib/textarea.ws.js

@@ -1,10 +1,8 @@
-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 { textarea as e } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/textarea.props.js";
-const l = {
+const t = {
   textarea: [
-    ...t,
+    ...e,
     // resize doesn't work well while on canvas
     { property: "resize", value: { type: "keyword", value: "none" } },
     {
@@ -12,44 +10,24 @@ const l = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, p = {
-  category: "forms",
-  type: "control",
+}, l = {
   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"] }
+  presetStyle: t,
+  contentModel: {
+    category: "instance",
+    children: []
   },
-  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",
+    "class",
     "name",
     "value",
     "placeholder",
     "required",
-    "autoFocus"
-  ]
+    "autofocus"
+  ],
+  props: r
 };
 export {
-  p as meta,
-  c as propsMeta
+  l as meta
 };

package/lib/time.js

@@ -296,7 +296,8 @@ const c = [
     country: e = A,
     dateStyle: n = L,
     timeStyle: l = f,
-    datetime: s = D,
+    // native html attribute in react style
+    dateTime: s = D,
     ...a
   }, u) => {
     const S = `${I(t)}-${B(

package/lib/time.ws.js

@@ -1,21 +1,18 @@
-import { CalendarIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { time as a } from "@webstudio-is/sdk/normalize.css";
-import { props as o } from "./__generated__/time.props.js";
+import { time as e } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/time.props.js";
 const r = {
-  time: a
-}, s = {
   category: "localization",
-  type: "container",
   description: "Converts machine-readable date and time to a human-readable format.",
-  icon: t,
-  states: e,
-  presetStyle: r
-}, c = {
-  props: o,
-  initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"]
+  contentModel: {
+    category: "instance",
+    children: []
+  },
+  presetStyle: {
+    time: e
+  },
+  initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"],
+  props: t
 };
 export {
-  s as meta,
-  c as propsMeta
+  r as meta
 };

package/lib/types/blockquote.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/body.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/bold.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/box.d.ts

@@ -1,8 +1,7 @@
 import { type ComponentProps } from "react";
-export declare const defaultTag = "div";
+declare const defaultTag = "div";
 type Props = ComponentProps<typeof defaultTag> & {
-    /** Use this property to change the HTML tag of this element to semantically structure and describe the content of a webpage. This can be important for accessibility tools and search engine optimization. */
-    tag?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure";
+    tag?: string;
 };
 export declare const Box: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/types/box.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/button.ws.d.ts

@@ -1,3 +1,2 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
-export declare const propsMeta: WsComponentPropsMeta;