@plasmicpkgs/radix-ui 0.0.3 → 0.0.8

package/dist/radix-ui.esm.js

@@ -4,9 +4,10 @@ import clsx from 'clsx';
 import { pick, omit } from 'remeda';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
-import { Close, Overlay, Content as Content$1, Root as Root$1, Portal as Portal$1, Title, Description } from '@radix-ui/react-dialog';
+import { Close, Content as Content$1, Root as Root$1, Trigger as Trigger$1, Portal as Portal$1, Title, Description, Overlay } from '@radix-ui/react-dialog';
 import { cva } from 'class-variance-authority';
 import { X } from 'lucide-react';
+import { Provider, Root as Root$2, Trigger as Trigger$2, Content as Content$2 } from '@radix-ui/react-tooltip';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -49,9 +50,9 @@ var useId = (_React$useId = useId$1) != null ? _React$useId : function () {
 /** Allow attaching pseudoclasses and other CSS selectors to this unique component instance */
 var StyleWrapper = function StyleWrapper(_ref) {
   var children = _ref.children,
-    css = _ref.css;
+    cssStr = _ref.cssStr;
   var dynClass = "pd__" + useId().replace(/:/g, "");
-  return createElement(Fragment, null, children(dynClass), createElement("style", null, dynClass ? css.replace(/&/g, "." + dynClass) : ""));
+  return createElement(Fragment, null, children(dynClass), createElement("style", null, dynClass ? cssStr.replace(/&/g, "." + dynClass) : ""));
 };
 var Animated = function Animated(_ref2) {
   var children = _ref2.children,
@@ -108,10 +109,10 @@ var Animated = function Animated(_ref2) {
     "zoom-exit": "--tw-exit-scale: " + exitScale + ";"
   };
   return createElement(StyleWrapper, {
-    css: "\n        &[data-state=\"closed\"] {\n          animation-duration: " + exitDuration + "s;\n          animation-timing-function: " + exitTiming + ";\n          animation-delay: " + exitDelay + ";\n          " + exitAnimations.map(function (exitAnimation) {
+    cssStr: "\n        &&[data-state=closed] {\n          animation-duration: " + exitDuration + "s;\n          animation-timing-function: " + exitTiming + ";\n          animation-delay: " + exitDelay + ";\n          " + exitAnimations.map(function (exitAnimation) {
       var _animations$exitAnima;
       return (_animations$exitAnima = animations[exitAnimation]) != null ? _animations$exitAnima : "";
-    }).join(" ") + "\n        }\n        &[data-state=\"open\"] {\n          animation-duration: " + enterDuration + "s;\n          animation-timing-function: " + enterTiming + ";\n          animation-delay: " + enterDelay + ";\n          " + enterAnimations.map(function (enterAnimation) {
+    }).join(" ") + "\n        }\n        &&,\n        &&[data-state=open] {\n          animation-duration: " + enterDuration + "s;\n          animation-timing-function: " + enterTiming + ";\n          animation-delay: " + enterDelay + ";\n          " + enterAnimations.map(function (enterAnimation) {
       var _animations$enterAnim;
       return (_animations$enterAnim = animations[enterAnimation]) != null ? _animations$enterAnim : "";
     }).join(" ") + "\n        }\n      "
@@ -142,7 +143,7 @@ var animPropTypes = function animPropTypes(_ref3) {
     var _ps$exitAnimations;
     return (_ps$exitAnimations = ps.exitAnimations) != null ? _ps$exitAnimations : defaultExitAnimations;
   };
-  return {
+  var props = {
     enterAnimations: {
       type: "choice",
       options: mungeNames(enterAnims),
@@ -252,26 +253,101 @@ var animPropTypes = function animPropTypes(_ref3) {
       suggestions: ["linear", "ease", "ease-in", "ease-out", "ease-in-out"]
     })
   };
+  return props;
 };
-var popoverProps = {
+var overlayStates = {
   open: {
-    type: "boolean",
-    editOnly: true,
-    uncontrolledProp: "defaultOpen"
+    type: "writable",
+    valueProp: "open",
+    onChangeProp: "onOpenChange",
+    variableType: "boolean"
+  }
+};
+var overlayProps = function overlayProps(_ref4) {
+  var _props;
+  var defaultSlotContent = _ref4.defaultSlotContent,
+    triggerSlotName = _ref4.triggerSlotName,
+    openDisplay = _ref4.openDisplay;
+  var props = (_props = {
+    open: {
+      type: "boolean",
+      displayName: openDisplay,
+      editOnly: true,
+      uncontrolledProp: "defaultOpen"
+    },
+    modal: {
+      type: "boolean",
+      advanced: true,
+      description: "Disable interaction with outside elements. Only popover content will be visible to screen readers."
+    },
+    onOpenChange: {
+      type: "eventHandler",
+      argTypes: [{
+        type: "boolean",
+        name: "open"
+      }]
+    }
+  }, _props[triggerSlotName] = _extends({
+    type: "slot",
+    defaultValue: [defaultSlotContent]
+  }, {
+    mergeWithParent: true
+  }), _props.themeResetClass = {
+    type: "themeResetClass"
+  }, _props);
+  return props;
+};
+function prefixClasses(x) {
+  return x.trim().split(/\s+/g).map(function (part) {
+    return "pl__" + part;
+  }).join(" ");
+}
+// Be careful formatting this!
+// Note that these are magically prepended with pl__
+var prefixedBaseStyles = /*#__PURE__*/"\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.absolute {\n    position: absolute;\n}\n.relative {\n    position: relative;\n}\n.transition {\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n}\n.h-full {\n    height: 100%;\n}\n.z-50 { z-index: 50;  }\n.fixed { position: fixed; }\n.inset-0 { top: 0; left: 0; right: 0; bottom: 0; }\n.bottom-0 {\n    bottom: 0px;\n}\n.left-0 {\n    left: 0px;\n}\n.right-0 {\n    right: 0px;\n}\n.top-0 {\n    top: 0px;\n}\n.right-4 {\n    right: 1rem;\n}\n.top-4 {\n    top: 1rem;\n}\n.h-4 { height: 1rem; }\n.w-4 { width: 1rem; }\n.outline-none { outline: none; }\n\n@keyframes plsmc-enter {\n\n    from {\n        opacity: var(--tw-enter-opacity, 1);\n        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n    }\n}\n\n@keyframes plsmc-exit {\n\n    to {\n        opacity: var(--tw-exit-opacity, 1);\n        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n    }\n}\n.animate-in,\n.data-\\[state\\=open\\]\\:animate-in[data-state=open] {\n  animation-name: plsmc-enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.animate-out,\n.data-\\[state\\=closed\\]\\:animate-out[data-state=closed] {\n  animation-name: plsmc-exit;\n  animation-duration: 150ms;\n  --tw-exit-opacity: initial;\n  --tw-exit-scale: initial;\n  --tw-exit-rotate: initial;\n  --tw-exit-translate-x: initial;\n  --tw-exit-translate-y: initial;\n}\n.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=bottom] {\n    --tw-enter-translate-y: -0.5rem;\n}\n\n.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=left] {\n    --tw-enter-translate-x: 0.5rem;\n}\n\n.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=right] {\n    --tw-enter-translate-x: -0.5rem;\n}\n\n.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=top] {\n    --tw-enter-translate-y: 0.5rem;\n}\n\n".replace(/\n\./g, ".pl__");
+function BaseStyles() {
+  // return <style>{prefixedBaseStyles}</style>;
+  return createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: prefixedBaseStyles
+    }
+  });
+}
+var popoverProps = /*#__PURE__*/_extends({
+  side: {
+    type: "choice",
+    options: ["top", "bottom", "left", "right"],
+    defaultValueHint: "bottom"
   },
-  modal: {
-    type: "boolean",
-    advanced: true,
-    description: "Disable interaction with outside elements. Only popover content will be visible to screen readers."
+  sideOffset: {
+    type: "number",
+    defaultValueHint: 4,
+    advanced: true
   },
-  onOpenChange: {
-    type: "eventHandler",
-    argTypes: [{
-      type: "boolean",
-      name: "open"
-    }]
+  align: {
+    type: "choice",
+    options: ["center", "start", "end"],
+    defaultValueHint: "center"
+  },
+  alignOffset: {
+    type: "number",
+    defaultValueHint: 0,
+    advanced: true
   }
-};
+}, /*#__PURE__*/animPropTypes({
+  defaultEnterAnimations: function defaultEnterAnimations() {
+    return ["fade-in", "zoom-enter"];
+  },
+  defaultExitAnimations: function defaultExitAnimations() {
+    return ["fade-out", "zoom-exit"];
+  }
+}), {
+  slideIn: {
+    type: "boolean",
+    defaultValueHint: true,
+    description: "Add additional subtle slide-in animation on reveal, which can depend on where the tooltip is dynamically placed."
+  }
+});
 
 function registerComponentHelper(loader, component, meta) {
   if (loader) {
@@ -304,55 +380,50 @@ function Popover(_ref) {
   return createElement(Animated, Object.assign({
     enterAnimations: ["fade-in", "zoom-enter"],
     exitAnimations: ["fade-out", "zoom-exit"]
-  }, animProps), function (plsmcId) {
+  }, animProps), function (dynClass) {
     return createElement(Root, {
       open: open,
       onOpenChange: onOpenChange,
       defaultOpen: defaultOpen,
       modal: modal
-    }, trigger ? createElement(Trigger, null, children) : createElement(Anchor, null, children), createElement(Portal, null, createElement(Content, Object.assign({
-      className: clsx("outline-none data-[state=open]:animate-in data-[state=closed]:animate-out", slideIn ? "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" : "", plsmcId ? plsmcId : "", className, themeResetClass),
+    }, trigger ? createElement(Trigger, {
+      asChild: true
+    }, children) : createElement(Anchor, {
+      asChild: true
+    }, children), createElement(Portal, null, createElement(Content, Object.assign({
+      className: clsx(prefixClasses("outline-none data-[state=open]:animate-in data-[state=closed]:animate-out"), slideIn ? prefixClasses("data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2") : "", dynClass ? dynClass : "", className, themeResetClass),
       sideOffset: sideOffset
-    }, rest), overlay)));
+    }, rest), overlay)), createElement(BaseStyles, null));
   });
 }
-Popover.displayName = Content.displayName;
+Popover.displayName = "PlasmicRadixPopover";
 function registerPopover(PLASMIC) {
   registerComponentHelper(PLASMIC, Popover, {
     name: "hostless-radix-popover",
     displayName: "Popover",
     importPath: "@plasmicpkgs/radix-ui/popover",
     importName: "Popover",
-    props: _extends({}, popoverProps, {
+    states: overlayStates,
+    props: _extends({}, overlayProps({
+      triggerSlotName: "children",
+      defaultSlotContent: {
+        type: "default-component",
+        kind: "button",
+        props: {
+          children: {
+            type: "text",
+            value: "Show popover"
+          }
+        }
+      }
+    }), {
       trigger: {
         type: "boolean",
         displayName: "Trigger on click",
         defaultValueHint: true,
         advanced: true
-      },
-      themeResetClass: {
-        type: "themeResetClass"
-      },
-      side: {
-        type: "choice",
-        options: ["top", "bottom", "left", "right"],
-        defaultValueHint: "bottom"
-      },
-      sideOffset: {
-        type: "number",
-        defaultValueHint: 4,
-        advanced: true
-      },
-      align: {
-        type: "choice",
-        options: ["center", "start", "end"],
-        defaultValueHint: "center"
-      },
-      alignOffset: {
-        type: "number",
-        defaultValueHint: 0,
-        advanced: true
-      },
+      }
+    }, popoverProps, {
       overlay: _extends({
         type: "slot",
         defaultValue: {
@@ -369,30 +440,11 @@ function registerPopover(PLASMIC) {
             boxShadow: "0px 4px 16px 0px #00000033",
             alignItems: "stretch"
           },
-          children: ["Hello World"]
+          children: ["Here is the popover content."]
         }
       }, {
         mergeWithParent: true
-      }),
-      children: _extends({
-        type: "slot",
-        defaultValue: ["Popover here"]
-      }, {
-        mergeWithParent: true
       })
-    }, animPropTypes({
-      defaultEnterAnimations: function defaultEnterAnimations() {
-        return ["fade-in", "zoom-enter"];
-      },
-      defaultExitAnimations: function defaultExitAnimations() {
-        return ["fade-out", "zoom-exit"];
-      }
-    }), {
-      slideIn: {
-        type: "boolean",
-        defaultValueHint: true,
-        description: "Add additional subtle slide-in animation on reveal, which can depend on where the popover is dynamically placed."
-      }
     })
   });
 }
@@ -400,34 +452,32 @@ function registerPopover(PLASMIC) {
 var _excluded$1 = ["className"],
   _excluded2 = ["className", "themeResetClass"],
   _excluded3 = ["className", "themeResetClass", "side"],
-  _excluded4 = ["open", "onOpenChange", "modal", "className", "themeResetClass", "children", "noContain", "defaultOpen"];
-function prefixClasses(x) {
-  return x.trim().split(/\s+/g).map(function (part) {
-    return "plsmc__" + part;
-  }).join(" ");
-}
-var baseSty = /*#__PURE__*/"\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.absolute {\n    position: absolute;\n}\n.relative {\n    position: relative;\n}\n.transition {\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n}\n.h-full {\n    height: 100%;\n}\n.z-50 { z-index: 50;  }\n.fixed { position: fixed; }\n.inset-0 { top: 0; left: 0; right: 0; bottom: 0; }\n.bottom-0 {\n    bottom: 0px;\n}\n.left-0 {\n    left: 0px;\n}\n.right-0 {\n    right: 0px;\n}\n.top-0 {\n    top: 0px;\n}\n.right-4 {\n    right: 1rem;\n}\n.top-4 {\n    top: 1rem;\n}\n.h-4 { height: 1rem; }\n.w-4 { width: 1rem; }\n.outline-none { outline: none; }\n\n@keyframes plsmc-enter {\n\n    from {\n        opacity: var(--tw-enter-opacity, 1);\n        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n    }\n}\n\n@keyframes plsmc-exit {\n\n    to {\n        opacity: var(--tw-exit-opacity, 1);\n        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n    }\n}\n.data-\\[state\\=open\\]\\:animate-in[data-state=open] {\n  animation-name: plsmc-enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:animate-out[data-state=closed] {\n  animation-name: plsmc-exit;\n  animation-duration: 150ms;\n  --tw-exit-opacity: initial;\n  --tw-exit-scale: initial;\n  --tw-exit-rotate: initial;\n  --tw-exit-translate-x: initial;\n  --tw-exit-translate-y: initial;\n}\n.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=bottom] {\n    --tw-enter-translate-y: -0.5rem;\n}\n\n.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=left] {\n    --tw-enter-translate-x: 0.5rem;\n}\n\n.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=right] {\n    --tw-enter-translate-x: -0.5rem;\n}\n\n.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=top] {\n    --tw-enter-translate-y: 0.5rem;\n}\n\n".replace(/\n\./g, ".plsmc__");
+  _excluded4 = ["open", "onOpenChange", "modal", "themeResetClass", "children", "noContain", "defaultOpen", "triggerSlot", "overlayClassName"];
 var DialogClose = /*#__PURE__*/forwardRef(function (props) {
   var _props$children;
-  return createElement(Close, Object.assign({}, props), (_props$children = props.children) != null ? _props$children : createElement(X, {
-    className: prefixClasses("h-4 w-4") + " " + props.className
+  return createElement(Close, Object.assign({}, props, {
+    asChild: true
+  }), createElement("div", {
+    className: props.className
+  }, (_props$children = props.children) != null ? _props$children : createElement(X, {
+    className: prefixClasses("h-4 w-4")
   }), createElement("span", {
-    className: "sr-only"
-  }, "Close"));
+    className: prefixClasses("sr-only")
+  }, "Close")));
 });
-DialogClose.displayName = Close.displayName;
+DialogClose.displayName = "PlasmicRadixDialogClose";
 var DialogOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return createElement(Animated, Object.assign({}, props), function (plsmcId) {
+  return createElement(Animated, Object.assign({}, props), function (dynClass) {
     return createElement(Overlay, Object.assign({
-      className: clsx(["fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out"].map(prefixClasses), plsmcId ? plsmcId : "", className)
+      className: clsx(["fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out"].map(prefixClasses), dynClass ? dynClass : "", className)
     }, props, {
       ref: ref
     }));
   });
 });
-DialogOverlay.displayName = Overlay.displayName;
+DialogOverlay.displayName = "PlasmicOverlay";
 var DialogContent = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _animProps$enterAnima, _animProps$exitAnimat;
   var className = _ref2.className,
@@ -441,12 +491,12 @@ var DialogContent = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     exitAnimations: (_animProps$exitAnimat = animProps.exitAnimations) != null ? _animProps$exitAnimat : ["zoom-exit", "fade-out"]
   }), function (dynClass) {
     return createElement(Content$1, Object.assign({}, rest, {
-      className: clsx("fixed z-50 data-[state=open]:animate-in data-[state=closed]:animate-out", dynClass ? dynClass : "", themeResetClass, className),
+      className: clsx(prefixClasses("fixed z-50 outline-none relative data-[state=open]:animate-in data-[state=closed]:animate-out"), dynClass ? dynClass : "", themeResetClass, className),
       ref: ref
     }));
   });
 });
-DialogContent.displayName = Content$1.displayName;
+DialogContent.displayName = "PlasmicRadixDialogContent";
 function getDefaultSheetAnims(side) {
   if (side === void 0) {
     side = "right";
@@ -470,18 +520,18 @@ var SheetContent = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   return createElement(Animated, Object.assign({}, props, {
     enterAnimations: (_props$enterAnimation = props.enterAnimations) != null ? _props$enterAnimation : [defaultEnterAnimation],
     exitAnimations: (_props$exitAnimations = props.exitAnimations) != null ? _props$exitAnimations : [defaultExitAnimation]
-  }), function (plsmcId) {
+  }), function (dynClass) {
     return createElement(Content$1, Object.assign({
       className: clsx(sheetVariants({
         side: side
-      }), plsmcId ? plsmcId : "", className)
+      }), dynClass ? dynClass : "", className)
     }, props, {
       ref: ref
     }));
   });
 });
-SheetContent.displayName = Content$1.displayName;
-var sheetVariants = /*#__PURE__*/cva( /*#__PURE__*/prefixClasses("fixed z-50 data-[state=open]:animate-in data-[state=closed]:animate-out"), {
+SheetContent.displayName = "PlasmicRadixSheetContent";
+var sheetVariants = /*#__PURE__*/cva( /*#__PURE__*/prefixClasses("fixed z-50 outline-none relative data-[state=open]:animate-in data-[state=closed]:animate-out"), {
   variants: {
     side: {
       top: /*#__PURE__*/prefixClasses("inset-x-0 top-0"),
@@ -498,24 +548,31 @@ var Dialog = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var open = _ref4.open,
     onOpenChange = _ref4.onOpenChange,
     modal = _ref4.modal,
-    className = _ref4.className,
     themeResetClass = _ref4.themeResetClass,
     children = _ref4.children,
     noContain = _ref4.noContain,
     defaultOpen = _ref4.defaultOpen,
+    triggerSlot = _ref4.triggerSlot,
+    overlayClassName = _ref4.overlayClassName,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return createElement(Root$1, {
     open: open,
     modal: modal,
     onOpenChange: onOpenChange,
     defaultOpen: defaultOpen
-  }, createElement(Portal$1, null, noContain ? createElement(Fragment, null, createElement(DialogOverlay, Object.assign({}, props, {
-    className: clsx(className, themeResetClass)
-  })), children) : createElement(DialogOverlay, Object.assign({}, props, {
-    className: clsx(className, themeResetClass)
-  }), children)), createElement("style", null, baseSty));
+  }, createElement(Trigger$1, {
+    asChild: true
+  }, triggerSlot), createElement(Portal$1, null, noContain ? createElement(Fragment, null, createElement(DialogOverlay, Object.assign({
+    ref: ref
+  }, props, {
+    className: clsx(overlayClassName, themeResetClass)
+  })), children) : createElement(DialogOverlay, Object.assign({
+    ref: ref
+  }, props, {
+    className: clsx(overlayClassName, themeResetClass)
+  }), children)), createElement(BaseStyles, null));
 });
-Dialog.displayName = Root$1.displayName;
+Dialog.displayName = "PlasmicRadixDialog";
 var DialogTitle = Title;
 var DialogDescription = Description;
 function registerDialog(PLASMIC) {
@@ -524,6 +581,7 @@ function registerDialog(PLASMIC) {
     displayName: "Dialog",
     importPath: "@plasmicpkgs/radix-ui/dialog",
     importName: "Dialog",
+    styleSections: false,
     defaultStyles: {
       // Note: unable to set position styles since Plasmic coerces to auto layout
       display: "flex",
@@ -532,15 +590,27 @@ function registerDialog(PLASMIC) {
       backdropFilter: "blur(10px)",
       background: "rgba(255,255,255,0.8)"
     },
-    props: _extends({}, popoverProps, {
+    props: _extends({}, overlayProps({
+      defaultSlotContent: {
+        type: "default-component",
+        kind: "button",
+        props: {
+          children: {
+            type: "text",
+            value: "Show dialog"
+          }
+        }
+      },
+      triggerSlotName: "triggerSlot"
+    }), {
+      overlayClassName: {
+        type: "class"
+      },
       noContain: {
         type: "boolean",
         advanced: true,
         description: "Place the dialog content over the overlay instead of inside the overlay. Useful for separating their animations, but you also won't be able to conveniently set layout on the overlay as a parent."
       },
-      themeResetClass: {
-        type: "themeResetClass"
-      },
       children: {
         type: "slot",
         allowedComponents: ["hostless-radix-sheet-content", "hostless-radix-dialog-content"],
@@ -549,7 +619,8 @@ function registerDialog(PLASMIC) {
           name: "hostless-radix-dialog-content"
         }
       }
-    })
+    }),
+    states: overlayStates
   });
   registerComponentHelper(PLASMIC, DialogClose, {
     name: "hostless-radix-dialog-close",
@@ -704,10 +775,89 @@ function registerDialog(PLASMIC) {
   });
 }
 
+var _excluded$2 = ["className", "sideOffset", "themeResetClass", "slideIn", "overlay", "delayDuration", "disableHoverableContent", "open", "onOpenChange", "defaultOpen", "children"];
+var Tooltip = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$sideOffset = _ref.sideOffset,
+    sideOffset = _ref$sideOffset === void 0 ? 4 : _ref$sideOffset,
+    themeResetClass = _ref.themeResetClass,
+    _ref$slideIn = _ref.slideIn,
+    slideIn = _ref$slideIn === void 0 ? true : _ref$slideIn,
+    overlay = _ref.overlay,
+    delayDuration = _ref.delayDuration,
+    disableHoverableContent = _ref.disableHoverableContent,
+    open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
+    defaultOpen = _ref.defaultOpen,
+    children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var _splitAnimProps = splitAnimProps(props),
+    animProps = _splitAnimProps[0],
+    rest = _splitAnimProps[1];
+  return createElement(Animated, Object.assign({
+    enterAnimations: ["fade-in", "zoom-enter"],
+    exitAnimations: ["fade-out", "zoom-exit"]
+  }, animProps), function (dynClass) {
+    return createElement(Provider, null, createElement(Root$2, Object.assign({}, {
+      delayDuration: delayDuration,
+      disableHoverableContent: disableHoverableContent,
+      open: open,
+      onOpenChange: onOpenChange,
+      defaultOpen: defaultOpen
+    }), createElement(Trigger$2, {
+      asChild: true
+    }, children), createElement(Content$2, Object.assign({
+      ref: ref,
+      sideOffset: sideOffset,
+      className: clsx(prefixClasses("animate-in data-[state=closed]:animate-out"), slideIn ? prefixClasses("data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2") : "", dynClass ? dynClass : "", className, themeResetClass)
+    }, rest), overlay), createElement(BaseStyles, null)));
+  });
+});
+Tooltip.displayName = "PlasmicRadixTooltip";
+function registerTooltip(PLASMIC) {
+  registerComponentHelper(PLASMIC, Tooltip, {
+    name: "hostless-radix-tooltip",
+    displayName: "Tooltip",
+    importPath: "@plasmicpkgs/radix-ui/tooltip",
+    importName: "Tooltip",
+    props: _extends({}, overlayProps({
+      triggerSlotName: "children",
+      defaultSlotContent: {
+        type: "text",
+        value: "I have a tooltip."
+      },
+      openDisplay: "Preview open"
+    }), popoverProps, {
+      overlay: _extends({
+        type: "slot",
+        defaultValue: {
+          type: "vbox",
+          styles: {
+            padding: "16px",
+            width: "300px",
+            maxWidth: "100%",
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: "#E2E8F0",
+            backgroundColor: "white",
+            borderRadius: "8px",
+            boxShadow: "0px 4px 16px 0px #00000033",
+            alignItems: "stretch"
+          },
+          children: ["Here is the tooltip content."]
+        }
+      }, {
+        mergeWithParent: true
+      })
+    })
+  });
+}
+
 function registerAll(PLASMIC) {
   registerPopover(PLASMIC);
   registerDialog(PLASMIC);
+  registerTooltip(PLASMIC);
 }
 
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, Popover, SheetContent, prefixClasses, registerAll, registerDialog, registerPopover, sheetVariants };
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, Popover, SheetContent, Tooltip, popoverProps, registerAll, registerDialog, registerPopover, registerTooltip, sheetVariants };
 //# sourceMappingURL=radix-ui.esm.js.map