@plasmicpkgs/radix-ui 0.0.2 → 0.0.6

package/dist/dialog.d.ts

@@ -3,7 +3,6 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import clsx from "clsx";
 import { AnimatedProps } from "./util";
 import { Registerable } from "./reg-util";
-export declare function prefixClasses(x: string): string;
 export declare const DialogClose: React.ForwardRefExoticComponent<Pick<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "form" | "slot" | "style" | "title" | "key" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const DialogContent: React.ForwardRefExoticComponent<{
     themeResetClass?: string | undefined;
@@ -46,6 +45,7 @@ export declare const Dialog: React.ForwardRefExoticComponent<DialogPrimitive.Dia
     overlayClassName?: string | undefined;
     themeResetClass?: string | undefined;
     noContain?: boolean | undefined;
+    triggerSlot?: React.ReactNode;
 } & React.RefAttributes<never>>;
 export declare const DialogTitle: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 export declare const DialogDescription: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;

package/dist/index.d.ts

@@ -2,3 +2,6 @@ import { Registerable } from "./reg-util";
 export declare function registerAll(PLASMIC?: Registerable): void;
 export * from "./dialog";
 export * from "./popover";
+export * from "./tooltip";
+export { popoverProps } from "./util";
+export { PopoverExtraProps } from "./util";

package/dist/popover.d.ts

@@ -1,15 +1,11 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { ReactNode } from "react";
-import { AnimatedProps } from "./util";
+import { PopoverExtraProps } from "./util";
 import { Registerable } from "./reg-util";
-export declare function Popover({ open, onOpenChange, defaultOpen, modal, className, sideOffset, themeResetClass, overlay, slideIn, trigger, children, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content> & AnimatedProps & PopoverPrimitive.PopoverProps & {
-    themeResetClass?: string;
-    overlay?: ReactNode;
+export declare function Popover({ open, onOpenChange, defaultOpen, modal, className, sideOffset, themeResetClass, overlay, slideIn, trigger, children, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content> & PopoverPrimitive.PopoverProps & PopoverExtraProps & {
     trigger?: boolean;
-    slideIn?: boolean;
 }): React.JSX.Element;
 export declare namespace Popover {
-    var displayName: string | undefined;
+    var displayName: string;
 }
 export declare function registerPopover(PLASMIC?: Registerable): void;

package/dist/radix-ui.cjs.development.js

@@ -13,6 +13,7 @@ require('@plasmicapp/host/registerGlobalContext');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var classVarianceAuthority = require('class-variance-authority');
 var lucideReact = require('lucide-react');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -55,9 +56,9 @@ var useId = (_React$useId = React.useId) != 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 React.createElement(React.Fragment, null, children(dynClass), React.createElement("style", null, dynClass ? css.replace(/&/g, "." + dynClass) : ""));
+  return React.createElement(React.Fragment, null, children(dynClass), React.createElement("style", null, dynClass ? cssStr.replace(/&/g, "." + dynClass) : ""));
 };
 var Animated = function Animated(_ref2) {
   var children = _ref2.children,
@@ -114,10 +115,10 @@ var Animated = function Animated(_ref2) {
     "zoom-exit": "--tw-exit-scale: " + exitScale + ";"
   };
   return React.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      "
@@ -148,7 +149,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),
@@ -258,26 +259,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 React.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) {
@@ -310,55 +386,50 @@ function Popover(_ref) {
   return React.createElement(Animated, Object.assign({
     enterAnimations: ["fade-in", "zoom-enter"],
     exitAnimations: ["fade-out", "zoom-exit"]
-  }, animProps), function (plsmcId) {
+  }, animProps), function (dynClass) {
     return React.createElement(PopoverPrimitive.Root, {
       open: open,
       onOpenChange: onOpenChange,
       defaultOpen: defaultOpen,
       modal: modal
-    }, trigger ? React.createElement(PopoverPrimitive.Trigger, null, children) : React.createElement(PopoverPrimitive.Anchor, null, children), React.createElement(PopoverPrimitive.Portal, null, React.createElement(PopoverPrimitive.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 ? React.createElement(PopoverPrimitive.Trigger, {
+      asChild: true
+    }, children) : React.createElement(PopoverPrimitive.Anchor, {
+      asChild: true
+    }, children), React.createElement(PopoverPrimitive.Portal, null, React.createElement(PopoverPrimitive.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)), React.createElement(BaseStyles, null));
   });
 }
-Popover.displayName = PopoverPrimitive.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: {
@@ -375,30 +446,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."
-      }
     })
   });
 }
@@ -406,34 +458,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__*/React.forwardRef(function (props) {
   var _props$children;
-  return React.createElement(DialogPrimitive.Close, Object.assign({}, props), (_props$children = props.children) != null ? _props$children : React.createElement(lucideReact.X, {
-    className: prefixClasses("h-4 w-4") + " " + props.className
+  return React.createElement(DialogPrimitive.Close, Object.assign({}, props, {
+    asChild: true
+  }), React.createElement("div", {
+    className: props.className
+  }, (_props$children = props.children) != null ? _props$children : React.createElement(lucideReact.X, {
+    className: prefixClasses("h-4 w-4")
   }), React.createElement("span", {
-    className: "sr-only"
-  }, "Close"));
+    className: prefixClasses("sr-only")
+  }, "Close")));
 });
-DialogClose.displayName = DialogPrimitive.Close.displayName;
+DialogClose.displayName = "PlasmicRadixDialogClose";
 var DialogOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return React.createElement(Animated, Object.assign({}, props), function (plsmcId) {
+  return React.createElement(Animated, Object.assign({}, props), function (dynClass) {
     return React.createElement(DialogPrimitive.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 = DialogPrimitive.Overlay.displayName;
+DialogOverlay.displayName = "PlasmicOverlay";
 var DialogContent = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _animProps$enterAnima, _animProps$exitAnimat;
   var className = _ref2.className,
@@ -447,12 +497,12 @@ var DialogContent = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     exitAnimations: (_animProps$exitAnimat = animProps.exitAnimations) != null ? _animProps$exitAnimat : ["zoom-exit", "fade-out"]
   }), function (dynClass) {
     return React.createElement(DialogPrimitive.Content, 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 = DialogPrimitive.Content.displayName;
+DialogContent.displayName = "PlasmicRadixDialogContent";
 function getDefaultSheetAnims(side) {
   if (side === void 0) {
     side = "right";
@@ -476,18 +526,18 @@ var SheetContent = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   return React.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 React.createElement(DialogPrimitive.Content, Object.assign({
       className: clsx(sheetVariants({
         side: side
-      }), plsmcId ? plsmcId : "", className)
+      }), dynClass ? dynClass : "", className)
     }, props, {
       ref: ref
     }));
   });
 });
-SheetContent.displayName = DialogPrimitive.Content.displayName;
-var sheetVariants = /*#__PURE__*/classVarianceAuthority.cva( /*#__PURE__*/prefixClasses("fixed z-50 data-[state=open]:animate-in data-[state=closed]:animate-out"), {
+SheetContent.displayName = "PlasmicRadixSheetContent";
+var sheetVariants = /*#__PURE__*/classVarianceAuthority.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"),
@@ -504,24 +554,31 @@ var Dialog = /*#__PURE__*/React.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 React.createElement(DialogPrimitive.Root, {
     open: open,
     modal: modal,
     onOpenChange: onOpenChange,
     defaultOpen: defaultOpen
-  }, React.createElement(DialogPrimitive.Portal, null, noContain ? React.createElement(React.Fragment, null, React.createElement(DialogOverlay, Object.assign({}, props, {
-    className: clsx(className, themeResetClass)
-  })), children) : React.createElement(DialogOverlay, Object.assign({}, props, {
-    className: clsx(className, themeResetClass)
-  }), children)), React.createElement("style", null, baseSty));
+  }, React.createElement(DialogPrimitive.Trigger, {
+    asChild: true
+  }, triggerSlot), React.createElement(DialogPrimitive.Portal, null, noContain ? React.createElement(React.Fragment, null, React.createElement(DialogOverlay, Object.assign({
+    ref: ref
+  }, props, {
+    className: clsx(overlayClassName, themeResetClass)
+  })), children) : React.createElement(DialogOverlay, Object.assign({
+    ref: ref
+  }, props, {
+    className: clsx(overlayClassName, themeResetClass)
+  }), children)), React.createElement(BaseStyles, null));
 });
-Dialog.displayName = DialogPrimitive.Root.displayName;
+Dialog.displayName = "PlasmicRadixDialog";
 var DialogTitle = DialogPrimitive.Title;
 var DialogDescription = DialogPrimitive.Description;
 function registerDialog(PLASMIC) {
@@ -530,6 +587,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",
@@ -538,15 +596,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"],
@@ -555,7 +625,8 @@ function registerDialog(PLASMIC) {
           name: "hostless-radix-dialog-content"
         }
       }
-    })
+    }),
+    states: overlayStates
   });
   registerComponentHelper(PLASMIC, DialogClose, {
     name: "hostless-radix-dialog-close",
@@ -710,9 +781,88 @@ function registerDialog(PLASMIC) {
   });
 }
 
+var _excluded$2 = ["className", "sideOffset", "themeResetClass", "slideIn", "overlay", "delayDuration", "disableHoverableContent", "open", "onOpenChange", "defaultOpen", "children"];
+var Tooltip = /*#__PURE__*/React.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 React.createElement(Animated, Object.assign({
+    enterAnimations: ["fade-in", "zoom-enter"],
+    exitAnimations: ["fade-out", "zoom-exit"]
+  }, animProps), function (dynClass) {
+    return React.createElement(TooltipPrimitive.Provider, null, React.createElement(TooltipPrimitive.Root, Object.assign({}, {
+      delayDuration: delayDuration,
+      disableHoverableContent: disableHoverableContent,
+      open: open,
+      onOpenChange: onOpenChange,
+      defaultOpen: defaultOpen
+    }), React.createElement(TooltipPrimitive.Trigger, {
+      asChild: true
+    }, children), React.createElement(TooltipPrimitive.Content, 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), React.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);
 }
 
 exports.Dialog = Dialog;
@@ -722,9 +872,11 @@ exports.DialogDescription = DialogDescription;
 exports.DialogTitle = DialogTitle;
 exports.Popover = Popover;
 exports.SheetContent = SheetContent;
-exports.prefixClasses = prefixClasses;
+exports.Tooltip = Tooltip;
+exports.popoverProps = popoverProps;
 exports.registerAll = registerAll;
 exports.registerDialog = registerDialog;
 exports.registerPopover = registerPopover;
+exports.registerTooltip = registerTooltip;
 exports.sheetVariants = sheetVariants;
 //# sourceMappingURL=radix-ui.cjs.development.js.map