@webstudio-is/sdk-components-react 0.82.0 → 0.83.0

package/lib/props.js

@@ -30,6 +30,25 @@ import { propsMeta as propsMeta29 } from "./vimeo.ws";
 import { propsMeta as propsMeta30 } from "./vimeo-preview-image.ws";
 import { propsMeta as propsMeta31 } from "./vimeo-play-button.ws";
 import { propsMeta as propsMeta32 } from "./vimeo-spinner.ws";
+import {
+  propsMetaTooltip,
+  propsMetaTooltipContent,
+  propsMetaTooltipTrigger
+} from "./radix-tooltip.ws";
+import {
+  propsMetaPopover,
+  propsMetaPopoverContent,
+  propsMetaPopoverTrigger
+} from "./radix-popover.ws";
+import {
+  propsMetaDialog,
+  propsMetaDialogContent,
+  propsMetaDialogTrigger,
+  propsMetaDialogOverlay,
+  propsMetaDialogClose,
+  propsMetaDialogDescription,
+  propsMetaDialogTitle
+} from "./radix-dialog.ws";
 export {
   propsMeta20 as Blockquote,
   propsMeta4 as Body,
@@ -38,6 +57,13 @@ export {
   propsMeta16 as Button,
   propsMeta28 as Checkbox,
   propsMeta24 as CodeText,
+  propsMetaDialog as Dialog,
+  propsMetaDialogClose as DialogClose,
+  propsMetaDialogContent as DialogContent,
+  propsMetaDialogDescription as DialogDescription,
+  propsMetaDialogOverlay as DialogOverlay,
+  propsMetaDialogTitle as DialogTitle,
+  propsMetaDialogTrigger as DialogTrigger,
   propsMeta18 as Form,
   propsMeta2 as Fragment,
   propsMeta7 as Heading,
@@ -50,6 +76,9 @@ export {
   propsMeta21 as List,
   propsMeta22 as ListItem,
   propsMeta8 as Paragraph,
+  propsMetaPopover as Popover,
+  propsMetaPopoverContent as PopoverContent,
+  propsMetaPopoverTrigger as PopoverTrigger,
   propsMeta27 as RadioButton,
   propsMeta10 as RichTextLink,
   propsMeta23 as Separator,
@@ -59,6 +88,9 @@ export {
   propsMeta14 as Superscript,
   propsMeta6 as Text,
   propsMeta26 as Textarea,
+  propsMetaTooltip as Tooltip,
+  propsMetaTooltipContent as TooltipContent,
+  propsMetaTooltipTrigger as TooltipTrigger,
   propsMeta29 as Vimeo,
   propsMeta31 as VimeoPlayButton,
   propsMeta30 as VimeoPreviewImage,

package/lib/radix-dialog.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import {
+  splitPropsWithWebstudioAttributes
+} from "@webstudio-is/react-sdk";
+import {
+  forwardRef,
+  Children
+} from "react";
+const DisplayContentsStyle = { display: "contents" };
+const Dialog = forwardRef(({ open: openProp, isOpen, ...props }, ref) => {
+  const [webstudioAttributes, restProps] = splitPropsWithWebstudioAttributes(props);
+  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
+  return /* @__PURE__ */ jsx("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, ...restProps }) });
+});
+const DialogTrigger = forwardRef(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] = splitPropsWithWebstudioAttributes(props);
+  return /* @__PURE__ */ jsx("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { asChild: true, ...restProps, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) }) });
+});
+const DialogOverlay = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(DialogPrimitive.DialogPortal, { children: /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { ref, ...props }) });
+});
+const DialogContent = DialogPrimitive.Content;
+const DialogClose = DialogPrimitive.Close;
+const DialogTitle = DialogPrimitive.Title;
+const DialogDescription = DialogPrimitive.Description;
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogTitle,
+  DialogTrigger
+};

package/lib/radix-dialog.ws.js

@@ -0,0 +1,279 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+} from "@webstudio-is/react-sdk";
+import * as tc from "./theme/tailwind-classes";
+import {
+  propsDialog,
+  propsDialogContent,
+  propsDialogTrigger,
+  propsDialogOverlay,
+  propsDialogClose,
+  propsDialogTitle,
+  propsDialogDescription
+} from "./__generated__/radix-dialog.props";
+const metaDialogTrigger = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogTrigger",
+  icon: RadioCheckedIcon,
+  stylable: false,
+  detachable: false
+};
+const metaDialogContent = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogContent",
+  icon: RadioCheckedIcon,
+  detachable: false
+};
+const metaDialogOverlay = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogOverlay",
+  icon: RadioCheckedIcon,
+  detachable: false
+};
+const metaDialogTitle = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogTitle",
+  icon: RadioCheckedIcon
+};
+const metaDialogDescription = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogDescription",
+  icon: RadioCheckedIcon
+};
+const metaDialogClose = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "DialogClose",
+  icon: RadioCheckedIcon
+};
+const metaDialog = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Dialog",
+  icon: RadioCheckedIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Dialog",
+      label: "Dialog",
+      props: [
+        {
+          name: "isOpen",
+          // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+          type: "string",
+          value: "initial",
+          dataSourceRef: {
+            type: "variable",
+            name: "isOpen"
+          }
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "DialogTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "DialogOverlay",
+          label: "Dialog Overlay",
+          props: [],
+          /**
+           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
+           * flex
+           **/
+          styles: [
+            tc.fixed(),
+            tc.inset(0),
+            tc.z(50),
+            tc.bg("background", 80),
+            tc.backdropBlur("sm"),
+            // To allow positioning Content
+            tc.flex()
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "DialogContent",
+              label: "Dialog Content",
+              props: [],
+              /**
+               * fixed w-full z-50
+               * grid gap-4 max-w-lg
+               * m-auto
+               * border bg-background p-6 shadow-lg
+               **/
+              styles: [
+                tc.w("full"),
+                tc.z(50),
+                tc.flex(),
+                tc.flex("col"),
+                tc.gap(4),
+                tc.m("auto"),
+                tc.maxW("lg"),
+                tc.border(),
+                tc.bg("background"),
+                tc.p(6),
+                tc.shadow("lg"),
+                tc.relative()
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  label: "Dialog Header",
+                  props: [],
+                  styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
+                  children: [
+                    {
+                      type: "instance",
+                      component: "DialogTitle",
+                      label: "Dialog Title",
+                      props: [],
+                      /**
+                       * text-lg leading-none tracking-tight
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.leading("none"),
+                        tc.text("lg"),
+                        tc.tracking("tight")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "Dialog Title"
+                        }
+                      ]
+                    },
+                    {
+                      type: "instance",
+                      component: "DialogDescription",
+                      label: "Dialog Description",
+                      props: [],
+                      /**
+                       * text-sm text-muted-foreground
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.text("sm"),
+                        tc.text("mutedForeground")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "dialog description text you can edit"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "Text",
+                  children: [{ type: "text", value: "The text you can edit" }]
+                },
+                {
+                  type: "instance",
+                  component: "DialogClose",
+                  label: "Dialog Close",
+                  props: [],
+                  /**
+                   * absolute right-4 top-4
+                   * rounded-sm opacity-70
+                   * ring-offset-background
+                   * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+                   * flex items-center justify-center h-4 w-4
+                   **/
+                  styles: [
+                    tc.absolute(),
+                    tc.right(4),
+                    tc.top(4),
+                    tc.rounded("sm"),
+                    tc.opacity(70),
+                    tc.flex(),
+                    tc.items("center"),
+                    tc.justify("center"),
+                    tc.h(4),
+                    tc.w(4),
+                    tc.border(0),
+                    tc.bg("transparent"),
+                    tc.outline("none"),
+                    tc.hover(tc.opacity(100)),
+                    tc.focus(tc.ring("ring", 2, "background", 2))
+                  ].flat(),
+                  children: [{ type: "text", value: "\u2715" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const propsMetaDialog = {
+  props: propsDialog,
+  initialProps: ["isOpen", "modal"]
+};
+const propsMetaDialogTrigger = {
+  props: propsDialogTrigger
+};
+const propsMetaDialogContent = {
+  props: propsDialogContent,
+  initialProps: []
+};
+const propsMetaDialogOverlay = {
+  props: propsDialogOverlay,
+  initialProps: []
+};
+const propsMetaDialogClose = {
+  props: propsDialogClose,
+  initialProps: []
+};
+const propsMetaDialogTitle = {
+  props: propsDialogTitle,
+  initialProps: []
+};
+const propsMetaDialogDescription = {
+  props: propsDialogDescription,
+  initialProps: []
+};
+export {
+  metaDialog,
+  metaDialogClose,
+  metaDialogContent,
+  metaDialogDescription,
+  metaDialogOverlay,
+  metaDialogTitle,
+  metaDialogTrigger,
+  propsMetaDialog,
+  propsMetaDialogClose,
+  propsMetaDialogContent,
+  propsMetaDialogDescription,
+  propsMetaDialogOverlay,
+  propsMetaDialogTitle,
+  propsMetaDialogTrigger
+};

package/lib/radix-popover.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import {
+  splitPropsWithWebstudioAttributes
+} from "@webstudio-is/react-sdk";
+import {
+  forwardRef,
+  Children
+} from "react";
+const DisplayContentsStyle = { display: "contents" };
+const Popover = forwardRef(({ open: openProp, isOpen, ...props }, ref) => {
+  const [webstudioAttributes, restProps] = splitPropsWithWebstudioAttributes(props);
+  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
+  return /* @__PURE__ */ jsx("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ jsx(PopoverPrimitive.Root, { open, ...restProps }) });
+});
+const PopoverTrigger = forwardRef(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] = splitPropsWithWebstudioAttributes(props);
+  return /* @__PURE__ */ jsx("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, ...restProps, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) }) });
+});
+const PopoverContent = forwardRef(({ sideOffset = 4, align = "center", ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align: "center",
+    sideOffset,
+    ...props
+  }
+) }));
+export {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+};

package/lib/radix-popover.ws.js

@@ -0,0 +1,114 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+} from "@webstudio-is/react-sdk";
+import * as tc from "./theme/tailwind-classes";
+import {
+  propsPopover,
+  propsPopoverContent,
+  propsPopoverTrigger
+} from "./__generated__/radix-popover.props";
+const metaPopoverTrigger = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "PopoverTrigger",
+  icon: RadioCheckedIcon,
+  stylable: false,
+  detachable: false
+};
+const metaPopoverContent = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "PopoverContent",
+  icon: RadioCheckedIcon,
+  detachable: false
+};
+const metaPopover = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Popover",
+  icon: RadioCheckedIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Popover",
+      label: "Popover",
+      props: [
+        {
+          name: "isOpen",
+          // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+          type: "string",
+          value: "initial",
+          dataSourceRef: {
+            type: "variable",
+            name: "isOpen"
+          }
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "PopoverTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "PopoverContent",
+          label: "Popover Content",
+          props: [],
+          /**
+           *  z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none
+           **/
+          styles: [
+            tc.z(50),
+            tc.w(72),
+            tc.rounded("md"),
+            tc.border(),
+            tc.bg("popover"),
+            tc.p(4),
+            tc.text("popoverForeground"),
+            tc.shadow("md"),
+            tc.outline("none")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "The text you can edit" }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const propsMetaPopover = {
+  props: propsPopover,
+  initialProps: ["isOpen", "modal"]
+};
+const propsMetaPopoverTrigger = {
+  props: propsPopoverTrigger
+};
+const propsMetaPopoverContent = {
+  props: propsPopoverContent,
+  initialProps: ["side", "sideOffset", "align", "alignOffset"]
+};
+export {
+  metaPopover,
+  metaPopoverContent,
+  metaPopoverTrigger,
+  propsMetaPopover,
+  propsMetaPopoverContent,
+  propsMetaPopoverTrigger
+};

package/lib/radix-tooltip.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import {
+  splitPropsWithWebstudioAttributes
+} from "@webstudio-is/react-sdk";
+import {
+  forwardRef,
+  Children
+} from "react";
+const DisplayContentsStyle = { display: "contents" };
+const Tooltip = forwardRef(({ open: openProp, isOpen, ...props }, ref) => {
+  const [webstudioAttributes, restProps] = splitPropsWithWebstudioAttributes(props);
+  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
+  return /* @__PURE__ */ jsx("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { open, ...restProps }) });
+});
+const TooltipTrigger = forwardRef(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] = splitPropsWithWebstudioAttributes(props);
+  return /* @__PURE__ */ jsx("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, ...restProps, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) }) });
+});
+const TooltipContent = forwardRef(({ sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, { ref, sideOffset, ...props }) }));
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+};

package/lib/radix-tooltip.ws.js

@@ -0,0 +1,115 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+} from "@webstudio-is/react-sdk";
+import * as tc from "./theme/tailwind-classes";
+import {
+  propsTooltip,
+  propsTooltipContent,
+  propsTooltipTrigger
+} from "./__generated__/radix-tooltip.props";
+const metaTooltipTrigger = {
+  category: "hidden",
+  detachable: false,
+  invalidAncestors: [],
+  type: "container",
+  label: "TooltipTrigger",
+  icon: RadioCheckedIcon,
+  stylable: false
+};
+const metaTooltipContent = {
+  category: "hidden",
+  detachable: false,
+  invalidAncestors: [],
+  type: "container",
+  label: "TooltipContent",
+  icon: RadioCheckedIcon
+};
+const metaTooltip = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Tooltip",
+  icon: RadioCheckedIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Tooltip",
+      label: "Tooltip",
+      props: [
+        {
+          name: "isOpen",
+          // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+          type: "string",
+          value: "initial",
+          dataSourceRef: {
+            type: "variable",
+            name: "isOpen"
+          }
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "TooltipTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "TooltipContent",
+          label: "Tooltip Content",
+          props: [],
+          /**
+           *  z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md
+           **/
+          styles: [
+            tc.z(50),
+            tc.overflow("hidden"),
+            tc.rounded("md"),
+            tc.border(),
+            tc.bg("popover"),
+            tc.px(3),
+            tc.py(1.5),
+            tc.text("sm"),
+            tc.text("popoverForeground"),
+            tc.shadow("md")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "The text you can edit" }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const propsMetaTooltip = {
+  props: propsTooltip,
+  initialProps: ["isOpen", "delayDuration", "disableHoverableContent"]
+};
+const propsMetaTooltipTrigger = {
+  props: propsTooltipTrigger
+};
+const propsMetaTooltipContent = {
+  props: propsTooltipContent,
+  initialProps: ["side", "sideOffset", "align", "alignOffset"]
+};
+export {
+  metaTooltip,
+  metaTooltipContent,
+  metaTooltipTrigger,
+  propsMetaTooltip,
+  propsMetaTooltipContent,
+  propsMetaTooltipTrigger
+};