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

package/lib/youtube.template.js

@@ -1,13 +1,13 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { SpinnerIcon as r, PlayIcon as l } from "@webstudio-is/icons/svg";
-import { $ as e, css as o } from "@webstudio-is/template";
-const p = {
+import { $ as t, css as o, ws as a } from "@webstudio-is/template";
+const d = {
   label: "YouTube",
   category: "media",
   order: 1,
   description: "Add a video to your page that is hosted on YouTube. Paste a YouTube URL and configure the video in the Settings tab.",
   template: /* @__PURE__ */ i(
-    e.YouTube,
+    t.YouTube,
     {
       "ws:label": "YouTube",
       "ws:style": o`
@@ -16,8 +16,8 @@ const p = {
         width: 100%;
       `,
       children: [
-        /* @__PURE__ */ t(
-          e.VimeoPreviewImage,
+        /* @__PURE__ */ e(
+          t.VimeoPreviewImage,
           {
             "ws:label": "Preview Image",
             "ws:style": o`
@@ -33,8 +33,8 @@ const p = {
             optimize: !0
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoSpinner,
+        /* @__PURE__ */ e(
+          t.VimeoSpinner,
           {
             "ws:label": "Spinner",
             "ws:style": o`
@@ -46,11 +46,11 @@ const p = {
           margin-top: -35px;
           margin-left: -35px;
         `,
-            children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+            children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoPlayButton,
+        /* @__PURE__ */ e(
+          t.VimeoPlayButton,
           {
             "ws:label": "Play Button",
             "ws:style": o`
@@ -74,16 +74,17 @@ const p = {
           }
         `,
             "aria-label": "Play button",
-            children: /* @__PURE__ */ t(
-              e.Box,
+            children: /* @__PURE__ */ e(
+              a.element,
               {
+                "ws:tag": "div",
                 "ws:label": "Play Icon",
                 "ws:style": o`
             width: 60px;
             height: 60px;
           `,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: l })
+                children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Play SVG", code: l })
               }
             )
           }
@@ -93,5 +94,5 @@ const p = {
   )
 };
 export {
-  p as meta
+  d as meta
 };

package/lib/youtube.ws.js

@@ -1,19 +1,7 @@
 import { YoutubeIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { div as o } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/youtube.props.js";
-const p = {
-  icon: e,
-  states: o,
-  contentModel: {
-    category: "instance",
-    children: ["instance"],
-    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
-  },
-  presetStyle: {
-    div: t
-  }
-}, n = [
+const n = [
   "id",
   "className",
   "url",
@@ -41,11 +29,17 @@ const p = {
   "language",
   "color",
   "playlist"
-], c = {
-  props: i,
-  initialProps: n
+], s = {
+  icon: e,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  },
+  presetStyle: { div: o },
+  initialProps: n,
+  props: i
 };
 export {
-  p as meta,
-  c as propsMeta
+  s as meta
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.219.0",
+  "version": "0.221.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -23,11 +23,6 @@
       "types": "./lib/types/metas.d.ts",
       "import": "./lib/metas.js"
     },
-    "./props": {
-      "webstudio": "./src/props.ts",
-      "types": "./lib/types/props.d.ts",
-      "import": "./lib/props.js"
-    },
     "./hooks": {
       "webstudio": "./src/hooks.ts",
       "types": "./lib/types/hooks.d.ts",
@@ -49,10 +44,10 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.2",
     "micromark-extension-gfm-table": "^2.1.1",
-    "@webstudio-is/icons": "0.219.0",
-    "@webstudio-is/image": "0.219.0",
-    "@webstudio-is/react-sdk": "0.219.0",
-    "@webstudio-is/sdk": "0.219.0"
+    "@webstudio-is/icons": "0.221.0",
+    "@webstudio-is/react-sdk": "0.221.0",
+    "@webstudio-is/image": "0.221.0",
+    "@webstudio-is/sdk": "0.221.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -64,9 +59,9 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^3.1.2",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/template": "0.219.0",
-    "@webstudio-is/sdk-cli": "0.94.0"
+    "@webstudio-is/sdk-cli": "0.94.0",
+    "@webstudio-is/template": "0.221.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",

package/lib/blockquote.template.js

@@ -1,11 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { $ as e } from "@webstudio-is/template";
-const a = {
-  category: "typography",
-  description: "Use to style a quote from an external source like an article or book.",
-  order: 3,
-  template: /* @__PURE__ */ o(e.Blockquote, {})
-};
-export {
-  a as meta
-};

package/lib/button.template.js

@@ -1,11 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { $ as o, PlaceholderValue as e } from "@webstudio-is/template";
-const n = {
-  category: "forms",
-  order: 2,
-  description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that’s what a link is used for.",
-  template: /* @__PURE__ */ t(o.Button, { children: new e("Button text you can edit") })
-};
-export {
-  n as meta
-};

package/lib/checkbox.template.js

@@ -1,14 +0,0 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { $ as e, PlaceholderValue as c } from "@webstudio-is/template";
-const l = {
-  category: "forms",
-  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
-  order: 6,
-  template: /* @__PURE__ */ r(e.Label, { "ws:label": "Checkbox Field", children: [
-    /* @__PURE__ */ o(e.Checkbox, {}),
-    /* @__PURE__ */ o(e.Text, { "ws:label": "Checkbox Label", "ws:tag": "span", children: new c("Checkbox") })
-  ] })
-};
-export {
-  l as meta
-};

package/lib/heading.template.js

@@ -1,11 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { $ as t } from "@webstudio-is/template";
-const n = {
-  category: "typography",
-  description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
-  order: 1,
-  template: /* @__PURE__ */ e(t.Heading, {})
-};
-export {
-  n as meta
-};

package/lib/label.template.js

@@ -1,10 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { $ as r, PlaceholderValue as o } from "@webstudio-is/template";
-const a = {
-  category: "forms",
-  order: 2,
-  template: /* @__PURE__ */ e(r.Label, { children: new o("Form Label") })
-};
-export {
-  a as meta
-};

package/lib/link.template.js

@@ -1,11 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { $ as o } from "@webstudio-is/template";
-const n = {
-  category: "general",
-  description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
-  order: 1,
-  template: /* @__PURE__ */ e(o.Link, {})
-};
-export {
-  n as meta
-};

package/lib/list-item.template.js

@@ -1,11 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { $ as e } from "@webstudio-is/template";
-const i = {
-  category: "typography",
-  description: "Adds a new item to an existing list.",
-  order: 5,
-  template: /* @__PURE__ */ t(e.ListItem, {})
-};
-export {
-  i as meta
-};

package/lib/list.template.js

@@ -1,15 +0,0 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { $ as e, PlaceholderValue as i } from "@webstudio-is/template";
-const s = {
-  category: "typography",
-  description: "Groups content, like links in a menu or steps in a recipe.",
-  order: 4,
-  template: /* @__PURE__ */ n(e.List, { children: [
-    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") }),
-    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") }),
-    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") })
-  ] })
-};
-export {
-  s as meta
-};

package/lib/paragraph.template.js

@@ -1,11 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { $ as t } from "@webstudio-is/template";
-const a = {
-  category: "typography",
-  description: "A container for multi-line text.",
-  order: 2,
-  template: /* @__PURE__ */ r(t.Paragraph, {})
-};
-export {
-  a as meta
-};

package/lib/props.js

@@ -1,92 +0,0 @@
-import { propsMeta as p } from "./slot.ws.js";
-import { propsMeta as t } from "./fragment.ws.js";
-import { propsMeta as s } from "./html-embed.ws.js";
-import { propsMeta as x } from "./markdown-embed.ws.js";
-import { propsMeta as f } from "./body.ws.js";
-import { propsMeta as d } from "./box.ws.js";
-import { propsMeta as l } from "./text.ws.js";
-import { propsMeta as S } from "./heading.ws.js";
-import { propsMeta as c } from "./paragraph.ws.js";
-import { propsMeta as b } from "./link.ws.js";
-import { propsMeta as H } from "./rich-text-link.ws.js";
-import { propsMeta as g } from "./span.ws.js";
-import { propsMeta as V } from "./bold.ws.js";
-import { propsMeta as F } from "./italic.ws.js";
-import { propsMeta as R } from "./superscript.ws.js";
-import { propsMeta as y } from "./subscript.ws.js";
-import { propsMeta as E } from "./button.ws.js";
-import { propsMeta as q } from "./input.ws.js";
-import { propsMeta as N } from "./webhook-form.ws.js";
-import { propsMeta as Y } from "./form.ws.js";
-import { propsMeta as z } from "./image.ws.js";
-import { propsMeta as D } from "./blockquote.ws.js";
-import { propsMeta as J } from "./list.ws.js";
-import { propsMeta as Q } from "./list-item.ws.js";
-import { propsMeta as W } from "./separator.ws.js";
-import { propsMeta as _ } from "./code-text.ws.js";
-import { propsMeta as oo } from "./label.ws.js";
-import { propsMeta as po } from "./textarea.ws.js";
-import { propsMeta as to } from "./radio-button.ws.js";
-import { propsMeta as so } from "./checkbox.ws.js";
-import { propsMeta as xo } from "./vimeo.ws.js";
-import { propsMeta as fo } from "./youtube.ws.js";
-import { propsMeta as no } from "./vimeo-preview-image.ws.js";
-import { propsMeta as uo } from "./vimeo-play-button.ws.js";
-import { propsMeta as To } from "./vimeo-spinner.ws.js";
-import { propsMeta as Bo } from "./xml-node.ws.js";
-import { propsMeta as ko } from "./xml-time.ws.js";
-import { propsMeta as Lo } from "./time.ws.js";
-import { propsMeta as Io } from "./select.ws.js";
-import { propsMeta as ho } from "./option.ws.js";
-import { propsMeta as Po } from "./head-slot.ws.js";
-import { propsMeta as wo } from "./head-link.ws.js";
-import { propsMeta as Co } from "./head-meta.ws.js";
-import { propsMeta as Xo } from "./head-title.ws.js";
-import { propsMeta as vo } from "./video.ws.js";
-export {
-  D as Blockquote,
-  f as Body,
-  V as Bold,
-  d as Box,
-  E as Button,
-  so as Checkbox,
-  _ as CodeText,
-  N as Form,
-  t as Fragment,
-  wo as HeadLink,
-  Co as HeadMeta,
-  Po as HeadSlot,
-  Xo as HeadTitle,
-  S as Heading,
-  s as HtmlEmbed,
-  z as Image,
-  q as Input,
-  F as Italic,
-  oo as Label,
-  b as Link,
-  J as List,
-  Q as ListItem,
-  x as MarkdownEmbed,
-  ho as Option,
-  c as Paragraph,
-  to as RadioButton,
-  Y as RemixForm,
-  H as RichTextLink,
-  Io as Select,
-  W as Separator,
-  p as Slot,
-  g as Span,
-  y as Subscript,
-  R as Superscript,
-  l as Text,
-  po as Textarea,
-  Lo as Time,
-  vo as Video,
-  xo as Vimeo,
-  uo as VimeoPlayButton,
-  no as VimeoPreviewImage,
-  To as VimeoSpinner,
-  Bo as XmlNode,
-  ko as XmlTime,
-  fo as YouTube
-};

package/lib/radio-button.template.js

@@ -1,14 +0,0 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { $ as e, PlaceholderValue as a } from "@webstudio-is/template";
-const r = {
-  category: "forms",
-  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.",
-  order: 5,
-  template: /* @__PURE__ */ t(e.Label, { "ws:label": "Radio Field", children: [
-    /* @__PURE__ */ o(e.RadioButton, {}),
-    /* @__PURE__ */ o(e.Text, { "ws:label": "Radio Label", "ws:tag": "span", children: new a("Radio") })
-  ] })
-};
-export {
-  r as meta
-};

package/lib/select.template.js

@@ -1,16 +0,0 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { $ as e } from "@webstudio-is/template";
-const n = {
-  category: "forms",
-  description: "A drop-down menu for users to select a single option from a predefined list.",
-  order: 4,
-  template: /* @__PURE__ */ t(e.Select, { children: [
-    /* @__PURE__ */ o(e.Option, { label: "Please choose an option", value: "" }),
-    /* @__PURE__ */ o(e.Option, { label: "Option A", value: "a" }),
-    /* @__PURE__ */ o(e.Option, { label: "Option B", value: "b" }),
-    /* @__PURE__ */ o(e.Option, { label: "Option C", value: "c" })
-  ] })
-};
-export {
-  n as meta
-};

package/lib/text.template.js

@@ -1,11 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { $ as t, PlaceholderValue as o } from "@webstudio-is/template";
-const a = {
-  category: "typography",
-  description: "A generic container for any text content that is not a heading or a link.",
-  order: 0,
-  template: /* @__PURE__ */ e(t.Text, { children: new o("The text you can edit") })
-};
-export {
-  a as meta
-};

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

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;

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

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;

package/lib/types/checkbox.template.d.ts

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;

package/lib/types/heading.template.d.ts

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;

package/lib/types/label.template.d.ts

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;

package/lib/types/link.template.d.ts

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;

package/lib/types/list-item.template.d.ts

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;

package/lib/types/list.template.d.ts

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;

package/lib/types/paragraph.template.d.ts

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;

package/lib/types/props.d.ts

@@ -1,45 +0,0 @@
-export { propsMeta as Slot } from "./slot.ws";
-export { propsMeta as Fragment } from "./fragment.ws";
-export { propsMeta as HtmlEmbed } from "./html-embed.ws";
-export { propsMeta as MarkdownEmbed } from "./markdown-embed.ws";
-export { propsMeta as Body } from "./body.ws";
-export { propsMeta as Box } from "./box.ws";
-export { propsMeta as Text } from "./text.ws";
-export { propsMeta as Heading } from "./heading.ws";
-export { propsMeta as Paragraph } from "./paragraph.ws";
-export { propsMeta as Link } from "./link.ws";
-export { propsMeta as RichTextLink } from "./rich-text-link.ws";
-export { propsMeta as Span } from "./span.ws";
-export { propsMeta as Bold } from "./bold.ws";
-export { propsMeta as Italic } from "./italic.ws";
-export { propsMeta as Superscript } from "./superscript.ws";
-export { propsMeta as Subscript } from "./subscript.ws";
-export { propsMeta as Button } from "./button.ws";
-export { propsMeta as Input } from "./input.ws";
-export { propsMeta as Form } from "./webhook-form.ws";
-export { propsMeta as RemixForm } from "./form.ws";
-export { propsMeta as Image } from "./image.ws";
-export { propsMeta as Blockquote } from "./blockquote.ws";
-export { propsMeta as List } from "./list.ws";
-export { propsMeta as ListItem } from "./list-item.ws";
-export { propsMeta as Separator } from "./separator.ws";
-export { propsMeta as CodeText } from "./code-text.ws";
-export { propsMeta as Label } from "./label.ws";
-export { propsMeta as Textarea } from "./textarea.ws";
-export { propsMeta as RadioButton } from "./radio-button.ws";
-export { propsMeta as Checkbox } from "./checkbox.ws";
-export { propsMeta as Vimeo } from "./vimeo.ws";
-export { propsMeta as YouTube } from "./youtube.ws";
-export { propsMeta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
-export { propsMeta as VimeoPlayButton } from "./vimeo-play-button.ws";
-export { propsMeta as VimeoSpinner } from "./vimeo-spinner.ws";
-export { propsMeta as XmlNode } from "./xml-node.ws";
-export { propsMeta as XmlTime } from "./xml-time.ws";
-export { propsMeta as Time } from "./time.ws";
-export { propsMeta as Select } from "./select.ws";
-export { propsMeta as Option } from "./option.ws";
-export { propsMeta as HeadSlot } from "./head-slot.ws";
-export { propsMeta as HeadLink } from "./head-link.ws";
-export { propsMeta as HeadMeta } from "./head-meta.ws";
-export { propsMeta as HeadTitle } from "./head-title.ws";
-export { propsMeta as Video } from "./video.ws";

package/lib/types/radio-button.template.d.ts

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;

package/lib/types/select.template.d.ts

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;

package/lib/types/text.template.d.ts

@@ -1,2 +0,0 @@
-import { type TemplateMeta } from "@webstudio-is/template";
-export declare const meta: TemplateMeta;