@sanity/ui 5.0.0-alpha.4 → 5.0.0-alpha.6

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from "react";
+import { ComponentProps } from "react";
 import { ComponentPropsWithRef } from "react";
 import { ElementType } from "react";
 import { JSX } from "react";
@@ -641,6 +641,47 @@ export declare type MarginProps = {
   marginLeft?: Responsive<SpaceAutoNegative>;
 };
 
+/**
+ * @beta
+ *
+ * Renders a modal dialog element — should not be used for nonmodal dialogs.
+ * Modal dialogs make their containing documents inert, and render on the topmost
+ * layer within that containing document; they must be dimissed before the containing
+ * document and its contents become unblocked. They also trap focus within the bounds
+ * of the modal element and its descendants.
+ *
+ * For more on dialogs and modality, refer to the HTML specification for the dialog element:
+ * https://html.spec.whatwg.org/dev/interactive-elements.html#the-dialog-element
+ */
+export declare const Modal: typeof ModalRoot;
+
+declare function ModalContent(props: ComponentProps<"div">): JSX.Element;
+
+declare function ModalFooter(props: ComponentProps<"div">): JSX.Element;
+
+/** @beta */
+export declare interface ModalProps extends Omit<
+  React.ComponentProps<"dialog">,
+  "open"
+> {
+  /** Text to be displayed as the modal's heading; optional but recommended for optimal accessibility and presentation */
+  header?: string;
+  /** Used to set the value of open to false. Fires whenever the modal is closed, either programmatically or by the user (via Esc key, clicking background, clicking the modal's close button, or any other means.)  */
+  onClose: React.ReactEventHandler<HTMLDialogElement>;
+  /** Whether the modal is open; defaults to false. */
+  open?: boolean;
+  /** Max width of the modal */
+  size?: Responsive<ContainerSize>;
+}
+
+declare function ModalRoot({ open, size, ...props }: ModalProps): JSX.Element;
+
+declare namespace ModalRoot {
+  var displayName: string;
+  var Content: typeof ModalContent;
+  var Footer: typeof ModalFooter;
+}
+
 declare const OVERFLOW: readonly [
   "visible",
   "hidden",
@@ -703,6 +744,33 @@ export declare type PlacementProps = {
   placement?: Placement;
 };
 
+/** @beta */
+export declare const Popover: typeof PopoverRoot & {
+  forwardsTriggerProps: boolean;
+};
+
+/** @beta */
+export declare interface PopoverProps
+  extends
+    Omit<React.ComponentProps<"div">, "children" | "content">,
+    PlacementProps {
+  /** Anchor name for positioning */
+  anchorName?: React.ReactNode;
+  /** Focusable trigger element */
+  children: React.ReactElement<Record<string, unknown>>;
+  /** Popover content */
+  content?: React.ReactNode;
+  /** Render tooltip in portal */
+  portal?: boolean;
+}
+
+declare function PopoverRoot({
+  placement,
+  ...props
+}: PopoverProps & {
+  triggerProps?: Record<string, unknown>;
+}): JSX.Element;
+
 declare const POSITION: readonly [
   "absolute",
   "fixed",
@@ -913,8 +981,8 @@ declare type ToneProps = {
   tone?: Tone;
 };
 
-/** @public */
-export declare function Tooltip({ placement, ...props }: TooltipProps): any;
+/** @beta */
+export declare const Tooltip: typeof TooltipRoot;
 
 /** @public */
 export declare function TooltipGroup<T extends ElementType = "div">(
@@ -930,15 +998,28 @@ export declare interface TooltipGroupProps<
   as?: T;
 }
 
-/** @public */
+/** @beta */
 export declare interface TooltipProps
-  extends React.ComponentProps<"div">, PlacementProps {
-  /** Tooltip text */
-  text?: React.ReactNode;
-  /** Disabled state */
-  disabled?: boolean;
+  extends
+    Omit<React.ComponentProps<"div">, "children" | "content">,
+    PlacementProps {
+  /** Anchor name for positioning */
+  anchorName?: React.ReactNode;
+  /** Focusable trigger element */
+  children: React.ReactElement<Record<string, unknown>>;
+  /** Tooltip content */
+  content?: React.ReactNode;
+  /** Render tooltip in portal */
+  portal?: boolean;
 }
 
+declare function TooltipRoot({
+  placement,
+  ...props
+}: TooltipProps & {
+  triggerProps?: Record<string, unknown>;
+}): JSX.Element;
+
 /** @public */
 export declare interface TypographyProps extends MarginProps, ToneProps {
   /** CSS **text-align** property */
@@ -953,6 +1034,9 @@ export declare interface TypographyProps extends MarginProps, ToneProps {
   weight?: FontWeight;
 }
 
+/** @public */
+export declare function useIsClient(): boolean;
+
 /** @public */
 export declare function VisuallyHidden<T extends ElementType = "span">(
   props: VisuallyHiddenProps<T> &

package/dist/index.js

@@ -2,8 +2,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import clsx from "clsx";
-import { isValidElement, useRef, useEffect, lazy, Suspense, Children, useId, useState, cloneElement } from "react";
-import { SpinnerIcon, RemoveIcon, CheckmarkIcon } from "@sanity/icons";
+import { isValidElement, useRef, useEffect, lazy, Suspense, Children, useId, useSyncExternalStore, useState, cloneElement, Activity } from "react";
+import { SpinnerIcon, RemoveIcon, CheckmarkIcon, CloseIcon } from "@sanity/icons";
+import { createPortal } from "react-dom";
 const PREFIX = "sui", BREAKPOINTS_LENGTH = 6;
 function getProps(componentProps, propDefs) {
   const {
@@ -95,7 +96,7 @@ function getCompositeValue(propValue, propDef, key) {
     compositeValue = mapping?.[propValue];
   return compositeValue;
 }
-const HASH = "fc8b40";
+const HASH = "71d7e5";
 function suffixClassName(className) {
   return `${className}-${HASH}`;
 }
@@ -866,7 +867,7 @@ function Checkbox(props) {
   useEffect(() => {
     inputRef.current && (inputRef.current.indeterminate = indeterminate);
   }, [indeterminate]);
-  const t0 = clsx(checkboxClassName, className), T0 = Box, t1 = "span", t2 = clsx(checkboxMarkClassName, error && "sui-error");
+  const t0 = clsx(checkboxClassName, "sui-position-relative", className), T0 = Box, t1 = "span", t2 = clsx(checkboxMarkClassName, error && "sui-error");
   let t3;
   $[0] !== indeterminate ? (t3 = indeterminate ? /* @__PURE__ */ jsx(RemoveIcon, {}) : /* @__PURE__ */ jsx(CheckmarkIcon, {}), $[0] = indeterminate, $[1] = t3) : t3 = $[1];
   let t4;
@@ -1647,7 +1648,205 @@ ListRoot.Item = ListItem;
 ListRoot.ButtonItem = ListButtonItem;
 ListRoot.ItemText = ListItemText;
 ListRoot.ItemImage = ListItemImage;
-const radioProps = {
+const modalProps = {
+  header: {
+    type: "string"
+  },
+  open: {
+    type: "boolean"
+  },
+  size: {
+    type: "union",
+    className: "container",
+    values: CONTAINER_SIZE
+  }
+}, modalClassName = suffixClassName("sui-Modal"), modalContentClassName = suffixClassName("sui-ModalContent"), modalFooterClassName = suffixClassName("sui-ModalFooter");
+function ModalRoot(t0) {
+  const $ = c(17), {
+    open: t1,
+    size: t2,
+    ...props
+  } = t0, open = t1 === void 0 ? !1 : t1, size = t2 === void 0 ? 0 : t2, {
+    children,
+    className,
+    style,
+    header,
+    onClose,
+    ...rest
+  } = getProps({
+    size,
+    ...props
+  }, modalProps), modalRef = useRef(null), headerId = useId(), modalClasses = clsx(modalClassName, "sui-inset0 sui-m-auto sui-radius5 sui-shadow3 sui-p4 sui-flex-direction-column sui-gap4 sui-overflow-y-auto");
+  let t3, t4;
+  $[0] !== open ? (t3 = () => {
+    const dialogElement = modalRef.current;
+    if (dialogElement)
+      return open ? dialogElement.open || dialogElement.showModal() : dialogElement.open && dialogElement.close(), () => {
+        dialogElement.close();
+      };
+  }, t4 = [open], $[0] = open, $[1] = t3, $[2] = t4) : (t3 = $[1], t4 = $[2]), useEffect(t3, t4);
+  const t5 = "any", t6 = header ? headerId : void 0, t7 = clsx(modalClasses, className);
+  let t8;
+  $[3] !== header || $[4] !== headerId ? (t8 = header ? /* @__PURE__ */ jsx(Heading, { trim: !0, size: 1, id: headerId, children: header }) : /* @__PURE__ */ jsx("div", {}), $[3] = header, $[4] = headerId, $[5] = t8) : t8 = $[5];
+  let t9;
+  $[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(IconButton, { "aria-label": "Close", level: "tertiary", icon: CloseIcon, onClick: () => modalRef.current?.close() }), $[6] = t9) : t9 = $[6];
+  let t10;
+  $[7] !== t8 ? (t10 = /* @__PURE__ */ jsxs(Flex, { flexShrink: 0, justifyContent: "space-between", alignItems: "center", children: [
+    t8,
+    t9
+  ] }), $[7] = t8, $[8] = t10) : t10 = $[8];
+  let t11;
+  return $[9] !== children || $[10] !== onClose || $[11] !== rest || $[12] !== style || $[13] !== t10 || $[14] !== t6 || $[15] !== t7 ? (t11 = /* @__PURE__ */ jsxs("dialog", { ...rest, ref: modalRef, closedby: t5, "aria-labelledby": t6, onClose, className: t7, style, "data-ui": "Modal", children: [
+    t10,
+    children
+  ] }), $[9] = children, $[10] = onClose, $[11] = rest, $[12] = style, $[13] = t10, $[14] = t6, $[15] = t7, $[16] = t11) : t11 = $[16], t11;
+}
+function ModalContent(props) {
+  const $ = c(12);
+  let T0, children, style, t0, t1;
+  if ($[0] !== props) {
+    const {
+      children: t22,
+      className,
+      style: t3,
+      ...rest
+    } = getProps(props, {});
+    children = t22, style = t3, T0 = Box, t0 = rest, t1 = clsx(modalContentClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = style, $[4] = t0, $[5] = t1;
+  } else
+    T0 = $[1], children = $[2], style = $[3], t0 = $[4], t1 = $[5];
+  let t2;
+  return $[6] !== T0 || $[7] !== children || $[8] !== style || $[9] !== t0 || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { ...t0, className: t1, style, "data-ui": "ModalContent", flexGrow: 1, overflowY: "auto", children }), $[6] = T0, $[7] = children, $[8] = style, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+}
+function ModalFooter(props) {
+  const $ = c(12);
+  let T0, children, style, t0, t1;
+  if ($[0] !== props) {
+    const {
+      children: t22,
+      className,
+      style: t3,
+      ...rest
+    } = getProps(props, {});
+    children = t22, style = t3, T0 = Box, t0 = rest, t1 = clsx(modalFooterClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = style, $[4] = t0, $[5] = t1;
+  } else
+    T0 = $[1], children = $[2], style = $[3], t0 = $[4], t1 = $[5];
+  let t2;
+  return $[6] !== T0 || $[7] !== children || $[8] !== style || $[9] !== t0 || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { ...t0, className: t1, style, "data-ui": "ModalFooter", flexShrink: 0, children }), $[6] = T0, $[7] = children, $[8] = style, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+}
+ModalRoot.displayName = "Modal";
+const Modal = ModalRoot;
+ModalRoot.Content = ModalContent;
+ModalRoot.Footer = ModalFooter;
+function useIsClient() {
+  return useSyncExternalStore(_temp2, _temp3, _temp4);
+}
+function _temp4() {
+  return !1;
+}
+function _temp3() {
+  return !0;
+}
+function _temp2() {
+  return _temp;
+}
+function _temp() {
+}
+function isReactEventHandler(key, value) {
+  return /^on[A-Z]/.test(key) && typeof value == "function";
+}
+function chainEventHandlers(...handlers) {
+  const defined = handlers.filter(Boolean);
+  if (defined.length !== 0)
+    return defined.length === 1 ? defined[0] : (e) => {
+      for (const handler of defined)
+        handler(e);
+    };
+}
+function mergeTriggerProps(childProps, forwardedProps, ownProps) {
+  const result = {};
+  for (const source of [forwardedProps, ownProps])
+    if (source) {
+      for (const [key, value] of Object.entries(source))
+        if (key !== "style") {
+          if (isReactEventHandler(key, value)) {
+            result[key] = chainEventHandlers(result[key], value);
+            continue;
+          }
+          value !== void 0 && (result[key] = value);
+        }
+    }
+  result.style = {
+    ...childProps.style,
+    ...forwardedProps?.style,
+    ...ownProps?.style
+  };
+  for (const [key, value] of Object.entries(childProps))
+    isReactEventHandler(key, value) && (result[key] = chainEventHandlers(result[key], value));
+  return result;
+}
+function renderPortal(node, mounted, portal) {
+  return portal ? mounted ? createPortal(node, document.body) : null : node;
+}
+const PLACEMENT = ["top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"], placementProps = {
+  placement: {
+    type: "union",
+    className: "placement",
+    values: PLACEMENT
+  }
+}, popoverProps = {
+  anchorName: {
+    type: "string"
+  },
+  content: {
+    type: "string"
+  },
+  portal: {
+    type: "boolean"
+  },
+  ...placementProps
+}, popoverClassName = suffixClassName("sui-PopoverContent");
+function PopoverRoot(t0) {
+  const $ = c(4), {
+    placement: t1,
+    ...props
+  } = t0, placement = t1 === void 0 ? "bottom" : t1, {
+    children,
+    className,
+    style,
+    id: idProp,
+    anchorName,
+    content,
+    portal,
+    triggerProps: forwardedTriggerProps,
+    ...rest
+  } = getProps({
+    placement,
+    ...props
+  }, popoverProps), reactId = useId(), id = idProp || reactId, [open, setOpen] = useState(!1), isClient = useIsClient();
+  let t2;
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = (e) => {
+    setOpen(e.newState === "open");
+  }, $[0] = t2) : t2 = $[0];
+  const handleToggle = t2, triggerProps = {
+    popoverTarget: id,
+    style: {
+      anchorName: `--anchor-${anchorName || id}`
+    }
+  }, trigger = children.type.forwardsTriggerProps ? cloneElement(children, {
+    triggerProps
+  }) : cloneElement(children, mergeTriggerProps(children.props, forwardedTriggerProps, triggerProps)), t3 = renderPortal(/* @__PURE__ */ jsx(Activity, { mode: open ? "visible" : "hidden", children: /* @__PURE__ */ jsx("div", { className: clsx(popoverClassName, "sui-px2 sui-py1 sui-radius2 sui-position-fixed sui-shadow2", className), style: {
+    ...style,
+    positionAnchor: `--anchor-${anchorName || id}`
+  }, "data-ui": "Popover", popover: "auto", id, onToggle: handleToggle, ...rest, children: content }) }), isClient, portal);
+  let t4;
+  return $[1] !== t3 || $[2] !== trigger ? (t4 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    t3
+  ] }), $[1] = t3, $[2] = trigger, $[3] = t4) : t4 = $[3], t4;
+}
+const Popover = Object.assign(PopoverRoot, {
+  forwardsTriggerProps: !0
+}), radioProps = {
   error: {
     type: "boolean"
   },
@@ -1668,7 +1867,7 @@ function Radio(props) {
       error,
       ...rest
     } = getProps(props, radioProps);
-    label = t82, T1 = Label, t2 = clsx(radioClassName, className), t3 = style, t4 = "Radio", t5 = disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "radio", className: radioInputClassName, disabled, ...rest }), T0 = Box, t0 = "span", t1 = clsx(radioMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
+    label = t82, T1 = Label, t2 = clsx(radioClassName, "sui-position-relative", className), t3 = style, t4 = "Radio", t5 = disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "radio", className: radioInputClassName, disabled, ...rest }), T0 = Box, t0 = "span", t1 = clsx(radioMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
   } else
     T0 = $[1], T1 = $[2], label = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], t5 = $[9], t6 = $[10], t7 = $[11];
   let t8;
@@ -1724,7 +1923,7 @@ function Switch(props) {
       label: t82,
       ...rest
     } = getProps(props, switchProps);
-    label = t82, T1 = Label, t2 = clsx(switchClassName, className), t3 = style, t4 = "Switch", t5 = props.disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "checkbox", role: "switch", className: switchInputClassName, disabled, ...rest }), T0 = Flex, t0 = "span", t1 = clsx(switchMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
+    label = t82, T1 = Label, t2 = clsx(switchClassName, "sui-position-relative", className), t3 = style, t4 = "Switch", t5 = props.disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, { as: "input", type: "checkbox", role: "switch", className: switchInputClassName, disabled, ...rest }), T0 = Flex, t0 = "span", t1 = clsx(switchMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
   } else
     T0 = $[1], T1 = $[2], label = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], t5 = $[9], t6 = $[10], t7 = $[11];
   let t8;
@@ -1736,79 +1935,73 @@ function Switch(props) {
     label
   ] }), $[16] = T1, $[17] = label, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
 }
-const PLACEMENT = ["top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"], placementProps = {
-  placement: {
-    type: "union",
-    className: "placement",
-    values: PLACEMENT
-  }
-}, tooltipProps = {
-  text: {
+const tooltipProps = {
+  anchorName: {
     type: "string"
   },
-  disabled: {
+  content: {
+    type: "string"
+  },
+  portal: {
     type: "boolean"
   },
   ...placementProps
-}, tooltipClassName = suffixClassName("sui-Tooltip"), tooltipDismissedClassName = suffixClassName("sui-Tooltip-Dismissed");
-function Tooltip(t0) {
-  const $ = c(16), {
+}, tooltipClassName = suffixClassName("sui-Tooltip");
+function TooltipRoot(t0) {
+  const $ = c(7), {
     placement: t1,
     ...props
   } = t0, placement = t1 === void 0 ? "bottom" : t1, {
     children,
     className,
     style,
-    disabled,
     id: idProp,
-    text,
+    anchorName,
+    content,
+    portal,
+    triggerProps: forwardedTriggerProps,
     ...rest
   } = getProps({
     placement,
     ...props
-  }, tooltipProps), reactId = useId(), id = idProp || reactId, [dismissed, setDismissed] = useState(!1);
+  }, tooltipProps), reactId = useId(), id = idProp || reactId, [dismissed, setDismissed] = useState(!1), isClient = useIsClient();
   let t2, t3;
-  $[0] !== dismissed ? (t2 = () => {
-    if (dismissed)
-      return;
-    const handleKeyDown = (e) => {
-      e.key === "Escape" && setDismissed(!0);
-    };
-    return window.addEventListener("keydown", handleKeyDown), () => window.removeEventListener("keydown", handleKeyDown);
-  }, t3 = [dismissed], $[0] = dismissed, $[1] = t2, $[2] = t3) : (t2 = $[1], t3 = $[2]), useEffect(t2, t3);
-  const trigger = cloneElement(children, {
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = () => {
+    setDismissed(!1);
+  }, t3 = () => {
+    setDismissed(!1);
+  }, $[0] = t2, $[1] = t3) : (t2 = $[0], t3 = $[1]);
+  const triggerProps = {
     "aria-describedby": id,
-    onMouseEnter: (e_0) => {
-      setDismissed(!1), children.props.onMouseEnter?.(e_0);
-    },
-    onFocus: (e_1) => {
-      setDismissed(!1), children.props.onFocus?.(e_1);
-    },
-    onClick: (e_2) => {
-      setDismissed(!0), children.props.onClick?.(e_2);
-    },
+    interestfor: id,
     style: {
-      ...children.props.style,
-      anchorName: `--tooltip-anchor-${id}`
+      anchorName: `--anchor-${anchorName || id}`
+    },
+    onMouseLeave: t2,
+    onBlur: t3,
+    onClick: () => {
+      setDismissed(!0), document.getElementById(id)?.hidePopover();
     }
-  });
-  if (disabled)
-    return children;
-  const T0 = Box, t4 = clsx(tooltipClassName, dismissed ? tooltipDismissedClassName : "", className), t5 = `--tooltip-anchor-${id}`;
-  let t6;
-  $[3] !== style || $[4] !== t5 ? (t6 = {
+  }, trigger = children.type.forwardsTriggerProps ? cloneElement(children, {
+    triggerProps
+  }) : cloneElement(children, mergeTriggerProps(children.props, forwardedTriggerProps, triggerProps));
+  let t4;
+  $[2] !== dismissed ? (t4 = (e) => {
+    e.newState === "open" && dismissed && e.preventDefault();
+  }, $[2] = dismissed, $[3] = t4) : t4 = $[3];
+  const handleBeforeToggle = t4, t5 = renderPortal(/* @__PURE__ */ jsx("div", { className: clsx(tooltipClassName, "sui-px2 sui-py1 sui-radius2 sui-position-fixed sui-shadow2", className), style: {
     ...style,
-    positionAnchor: t5
-  }, $[3] = style, $[4] = t5, $[5] = t6) : t6 = $[5];
-  let t7;
-  $[6] !== T0 || $[7] !== id || $[8] !== rest || $[9] !== t4 || $[10] !== t6 || $[11] !== text ? (t7 = /* @__PURE__ */ jsx(T0, { className: t4, role: "tooltip", style: t6, "data-ui": "Tooltip", id, paddingX: 2, paddingY: 1, radius: 2, position: "fixed", zIndex: 9999, shadow: 2, ...rest, children: text }), $[6] = T0, $[7] = id, $[8] = rest, $[9] = t4, $[10] = t6, $[11] = text, $[12] = t7) : t7 = $[12];
-  let t8;
-  return $[13] !== t7 || $[14] !== trigger ? (t8 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    positionAnchor: `--anchor-${anchorName || id}`
+  }, "data-ui": "Tooltip", role: "tooltip", popover: "hint", id, onBeforeToggle: handleBeforeToggle, ...rest, children: content }), isClient, portal);
+  let t6;
+  return $[4] !== t5 || $[5] !== trigger ? (t6 = /* @__PURE__ */ jsxs(Fragment, { children: [
     trigger,
-    t7
-  ] }), $[13] = t7, $[14] = trigger, $[15] = t8) : t8 = $[15], t8;
+    t5
+  ] }), $[4] = t5, $[5] = trigger, $[6] = t6) : t6 = $[6], t6;
 }
-const tooltipGroupProps = {
+const Tooltip = Object.assign(TooltipRoot, {
+  forwardsTriggerProps: !0
+}), tooltipGroupProps = {
   as: {
     type: "string"
   }
@@ -1824,7 +2017,7 @@ function TooltipGroup(props) {
   let t0;
   $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = (e) => {
     const tooltip = e.target.closest('[data-ui="Tooltip"]');
-    tooltip && e.propertyName === "visibility" && window.getComputedStyle(tooltip).visibility !== "hidden" && setIsActive(!0);
+    tooltip && e.propertyName === "opacity" && window.getComputedStyle(tooltip).opacity !== "0" && setIsActive(!0);
   }, $[0] = t0) : t0 = $[0];
   const handleTransitionEnd = t0;
   let t1;
@@ -1839,7 +2032,7 @@ function TooltipGroup(props) {
   const handleBlur = t2, t3 = clsx(tooltipGroupClassName, className);
   let t4;
   $[3] !== isActive ? (t4 = isActive && {
-    "--tooltip-delay-group": 0
+    "--tooltip-delay-group": "0ms"
   }, $[3] = isActive, $[4] = t4) : t4 = $[4];
   let t5;
   $[5] !== style || $[6] !== t4 ? (t5 = {
@@ -1870,6 +2063,8 @@ export {
   Label,
   Link,
   List,
+  Modal,
+  Popover,
   PressArea,
   Radio,
   SkipToContent,
@@ -1879,6 +2074,7 @@ export {
   Tooltip,
   TooltipGroup,
   VStack,
-  VisuallyHidden
+  VisuallyHidden,
+  useIsClient
 };
 //# sourceMappingURL=index.js.map