@webstudio-is/sdk-components-react-radix 0.83.0 → 0.85.0

package/lib/metas.js

@@ -3,8 +3,66 @@ import {
   metaCollapsibleTrigger,
   metaCollapsibleContent
 } from "./collapsible.ws";
+import {
+  metaDialog,
+  metaDialogTrigger,
+  metaDialogOverlay,
+  metaDialogContent,
+  metaDialogClose,
+  metaDialogTitle,
+  metaDialogDescription
+} from "./dialog.ws";
+import {
+  metaPopover,
+  metaPopoverTrigger,
+  metaPopoverContent
+} from "./popover.ws";
+import {
+  metaTooltip,
+  metaTooltipTrigger,
+  metaTooltipContent
+} from "./tooltip.ws";
+import {
+  metaSheet,
+  metaSheetTrigger,
+  metaSheetOverlay,
+  metaSheetContent,
+  metaSheetClose,
+  metaSheetTitle,
+  metaSheetDescription
+} from "./sheet.ws";
+import {
+  metaTabs,
+  metaTabsList,
+  metaTabsTrigger,
+  metaTabsContent
+} from "./tabs.ws";
 export {
   metaCollapsible as Collapsible,
   metaCollapsibleContent as CollapsibleContent,
-  metaCollapsibleTrigger as CollapsibleTrigger
+  metaCollapsibleTrigger as CollapsibleTrigger,
+  metaDialog as Dialog,
+  metaDialogClose as DialogClose,
+  metaDialogContent as DialogContent,
+  metaDialogDescription as DialogDescription,
+  metaDialogOverlay as DialogOverlay,
+  metaDialogTitle as DialogTitle,
+  metaDialogTrigger as DialogTrigger,
+  metaPopover as Popover,
+  metaPopoverContent as PopoverContent,
+  metaPopoverTrigger as PopoverTrigger,
+  metaSheet as Sheet,
+  metaSheetClose as SheetClose,
+  metaSheetContent as SheetContent,
+  metaSheetDescription as SheetDescription,
+  metaSheetOverlay as SheetOverlay,
+  metaSheetTitle as SheetTitle,
+  metaSheetTrigger as SheetTrigger,
+  metaTabs as Tabs,
+  metaTabsContent as TabsContent,
+  metaTabsList as TabsList,
+  metaTabsTrigger as TabsTrigger,
+  metaTooltip as Tooltip,
+  metaTooltipContent as TooltipContent,
+  metaTooltipTrigger as TooltipTrigger
 };

package/lib/popover.js

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

package/lib/popover.ws.js

@@ -0,0 +1,116 @@
+import { PopoverIcon, TriggerIcon, ContentIcon } from "@webstudio-is/icons/svg";
+import {
+} from "@webstudio-is/react-sdk";
+import * as tc from "./theme/tailwind-classes";
+import {
+  propsPopover,
+  propsPopoverContent,
+  propsPopoverTrigger
+} from "./__generated__/popover.props";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+const presetStyle = {
+  div
+};
+const metaPopoverTrigger = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "Popover Trigger",
+  icon: TriggerIcon,
+  stylable: false,
+  detachable: false
+};
+const metaPopoverContent = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  presetStyle,
+  label: "Popover Content",
+  icon: ContentIcon,
+  detachable: false
+};
+const metaPopover = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Popover",
+  icon: PopoverIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Popover",
+      dataSources: {
+        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+        isOpen: { type: "variable", initialValue: "initial" }
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "isOpen",
+          dataSourceName: "isOpen"
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "PopoverTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "PopoverContent",
+          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/props.js

@@ -3,8 +3,66 @@ import {
   propsMetaCollapsibleTrigger,
   propsMetaCollapsibleContent
 } from "./collapsible.ws";
+import {
+  propsMetaDialog,
+  propsMetaDialogTrigger,
+  propsMetaDialogOverlay,
+  propsMetaDialogContent,
+  propsMetaDialogClose,
+  propsMetaDialogTitle,
+  propsMetaDialogDescription
+} from "./dialog.ws";
+import {
+  propsMetaPopover,
+  propsMetaPopoverTrigger,
+  propsMetaPopoverContent
+} from "./popover.ws";
+import {
+  propsMetaTooltip,
+  propsMetaTooltipTrigger,
+  propsMetaTooltipContent
+} from "./tooltip.ws";
+import {
+  propsMetaSheet,
+  propsMetaSheetTrigger,
+  propsMetaSheetOverlay,
+  propsMetaSheetContent,
+  propsMetaSheetClose,
+  propsMetaSheetTitle,
+  propsMetaSheetDescription
+} from "./sheet.ws";
+import {
+  propsMetaTabs,
+  propsMetaTabsList,
+  propsMetaTabsTrigger,
+  propsMetaTabsContent
+} from "./tabs.ws";
 export {
   propsMetaCollapsible as Collapsible,
   propsMetaCollapsibleContent as CollapsibleContent,
-  propsMetaCollapsibleTrigger as CollapsibleTrigger
+  propsMetaCollapsibleTrigger as CollapsibleTrigger,
+  propsMetaDialog as Dialog,
+  propsMetaDialogClose as DialogClose,
+  propsMetaDialogContent as DialogContent,
+  propsMetaDialogDescription as DialogDescription,
+  propsMetaDialogOverlay as DialogOverlay,
+  propsMetaDialogTitle as DialogTitle,
+  propsMetaDialogTrigger as DialogTrigger,
+  propsMetaPopover as Popover,
+  propsMetaPopoverContent as PopoverContent,
+  propsMetaPopoverTrigger as PopoverTrigger,
+  propsMetaSheet as Sheet,
+  propsMetaSheetClose as SheetClose,
+  propsMetaSheetContent as SheetContent,
+  propsMetaSheetDescription as SheetDescription,
+  propsMetaSheetOverlay as SheetOverlay,
+  propsMetaSheetTitle as SheetTitle,
+  propsMetaSheetTrigger as SheetTrigger,
+  propsMetaTabs as Tabs,
+  propsMetaTabsContent as TabsContent,
+  propsMetaTabsList as TabsList,
+  propsMetaTabsTrigger as TabsTrigger,
+  propsMetaTooltip as Tooltip,
+  propsMetaTooltipContent as TooltipContent,
+  propsMetaTooltipTrigger as TooltipTrigger
 };

package/lib/sheet.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import * as Dialog from "./dialog";
+const Sheet = Dialog.Dialog;
+const SheetTrigger = Dialog.DialogTrigger;
+const SheetOverlay = Dialog.DialogOverlay;
+const SheetClose = Dialog.DialogClose;
+const SheetTitle = Dialog.DialogTitle;
+const SheetDescription = Dialog.DialogDescription;
+const SheetContent = forwardRef(
+  ({ tag = "nav", side = "left", role = "navigation", children, ...props }, ref) => {
+    const Tag = tag;
+    return /* @__PURE__ */ jsx(
+      Dialog.DialogContent,
+      {
+        asChild: true,
+        "data-side": side,
+        role,
+        ...props,
+        children: /* @__PURE__ */ jsx(Tag, { ref, children })
+      }
+    );
+  }
+);
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetOverlay,
+  SheetTitle,
+  SheetTrigger
+};

package/lib/sheet.ws.js

@@ -0,0 +1,304 @@
+import {
+  HamburgerMenuIcon,
+  TriggerIcon,
+  ContentIcon,
+  OverlayIcon,
+  HeadingIcon,
+  TextIcon,
+  ButtonElementIcon
+} from "@webstudio-is/icons/svg";
+import {
+} from "@webstudio-is/react-sdk";
+import * as tc from "./theme/tailwind-classes";
+import {
+  propsSheet,
+  propsSheetContent,
+  propsSheetTrigger,
+  propsSheetOverlay,
+  propsSheetClose,
+  propsSheetTitle,
+  propsSheetDescription
+} from "./__generated__/sheet.props";
+import { div, nav, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
+const contentPresetStyle = {
+  div,
+  nav
+};
+const presetStyle = {
+  div
+};
+const buttonPresetStyle = {
+  button
+};
+const titlePresetStyle = {
+  h2
+};
+const descriptionPresetStyle = {
+  p
+};
+const metaSheetTrigger = {
+  category: "hidden",
+  type: "container",
+  label: "Sheet Trigger",
+  icon: TriggerIcon,
+  stylable: false,
+  detachable: false
+};
+const metaSheetContent = {
+  category: "hidden",
+  type: "container",
+  label: "Sheet Content",
+  icon: ContentIcon,
+  detachable: false,
+  presetStyle: contentPresetStyle,
+  states: [
+    { selector: "[data-side=top]", label: "Top Side" },
+    { selector: "[data-side=right]", label: "Right Side" },
+    { selector: "[data-side=bottom]", label: "Bottom Side" },
+    { selector: "[data-side=left]", label: "Left Side" }
+  ]
+};
+const metaSheetOverlay = {
+  category: "hidden",
+  type: "container",
+  presetStyle,
+  label: "Sheet Overlay",
+  icon: OverlayIcon,
+  detachable: false
+};
+const metaSheetTitle = {
+  category: "hidden",
+  type: "container",
+  presetStyle: titlePresetStyle,
+  label: "Sheet Title",
+  icon: HeadingIcon
+};
+const metaSheetDescription = {
+  category: "hidden",
+  type: "container",
+  presetStyle: descriptionPresetStyle,
+  label: "Sheet Description",
+  icon: TextIcon
+};
+const metaSheetClose = {
+  category: "hidden",
+  type: "container",
+  presetStyle: buttonPresetStyle,
+  label: "Sheet Close",
+  icon: ButtonElementIcon
+};
+const metaSheet = {
+  category: "radix",
+  type: "container",
+  label: "Sheet",
+  icon: HamburgerMenuIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Sheet",
+      dataSources: {
+        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+        isOpen: { type: "variable", initialValue: "initial" }
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "isOpen",
+          dataSourceName: "isOpen"
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "SheetTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "SheetOverlay",
+          /**
+           * 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(),
+            tc.flex("col"),
+            tc.overflow("auto")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "SheetContent",
+              /**
+               * 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.border(),
+                tc.bg("background"),
+                tc.p(6),
+                tc.shadow("lg"),
+                tc.relative(),
+                tc.state(
+                  [tc.mr("auto"), tc.maxW("sm"), tc.grow()].flat(),
+                  "[data-side=left]"
+                ),
+                tc.state(
+                  [tc.ml("auto"), tc.maxW("sm"), tc.grow()].flat(),
+                  "[data-side=right]"
+                ),
+                tc.state([tc.mb("auto")].flat(), "[data-side=top]"),
+                tc.state([tc.mt("auto")].flat(), "[data-side=bottom]")
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  label: "Sheet Header",
+                  styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
+                  children: [
+                    {
+                      type: "instance",
+                      component: "SheetTitle",
+                      /**
+                       * text-lg leading-none tracking-tight
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.leading("none"),
+                        tc.text("lg"),
+                        tc.tracking("tight")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "Sheet Title"
+                        }
+                      ]
+                    },
+                    {
+                      type: "instance",
+                      component: "SheetDescription",
+                      /**
+                       * text-sm text-muted-foreground
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.text("sm"),
+                        tc.text("mutedForeground")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "sheet description text you can edit"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "Text",
+                  children: [{ type: "text", value: "The text you can edit" }]
+                },
+                {
+                  type: "instance",
+                  component: "SheetClose",
+                  /**
+                   * 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 propsMetaSheet = {
+  props: propsSheet,
+  initialProps: ["isOpen", "modal"]
+};
+const propsMetaSheetTrigger = {
+  props: propsSheetTrigger
+};
+const propsMetaSheetContent = {
+  props: propsSheetContent,
+  initialProps: ["side", "role", "tag"]
+};
+const propsMetaSheetOverlay = {
+  props: propsSheetOverlay,
+  initialProps: []
+};
+const propsMetaSheetClose = {
+  props: propsSheetClose,
+  initialProps: []
+};
+const propsMetaSheetTitle = {
+  props: propsSheetTitle,
+  initialProps: []
+};
+const propsMetaSheetDescription = {
+  props: propsSheetDescription,
+  initialProps: []
+};
+export {
+  metaSheet,
+  metaSheetClose,
+  metaSheetContent,
+  metaSheetDescription,
+  metaSheetOverlay,
+  metaSheetTitle,
+  metaSheetTrigger,
+  propsMetaSheet,
+  propsMetaSheetClose,
+  propsMetaSheetContent,
+  propsMetaSheetDescription,
+  propsMetaSheetOverlay,
+  propsMetaSheetTitle,
+  propsMetaSheetTrigger
+};

package/lib/tabs.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef,
+  Children
+} from "react";
+import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
+import { getIndexWithinAncestorFromComponentProps } from "@webstudio-is/react-sdk";
+const Tabs = Root;
+const TabsList = List;
+const TabsTrigger = forwardRef(({ value, children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  const index = getIndexWithinAncestorFromComponentProps(props);
+  return /* @__PURE__ */ jsx(Trigger, { ref, value: value ?? index, asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button" }) });
+});
+const TabsContent = forwardRef(({ value, ...props }, ref) => {
+  const index = getIndexWithinAncestorFromComponentProps(props);
+  return /* @__PURE__ */ jsx(Content, { ref, value: value ?? index, ...props });
+});
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+};