@mcp-b/react-components 0.12.0 → 0.14.0

package/dist/components/NavigationMenu.d.ts

@@ -7,7 +7,6 @@ import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-me
  */
 interface NavigationMenuProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Root>, "className"> {
   className?: string;
-  viewport?: boolean;
 }
 /**
  * Props for the NavigationMenu.List component.
@@ -110,8 +109,6 @@ interface NavigationMenuArrowProps extends Omit<React.ComponentPropsWithRef<type
  */
 declare function Root({
   className,
-  children,
-  viewport,
   ref,
   ...props
 }: NavigationMenuProps & {
@@ -133,7 +130,6 @@ declare function NavigationMenuItem({
 }): React.JSX.Element;
 declare function NavigationMenuTrigger({
   className,
-  children,
   ref,
   ...props
 }: NavigationMenuTriggerProps & {
@@ -230,7 +226,7 @@ declare function NavigationMenuArrow({
  *
  * @see {@link https://base-ui.com/react/components/navigation-menu | Base UI NavigationMenu}
  */
-declare const NavigationMenu: typeof Root & {
+declare const NavigationMenu: {
   Root: typeof Root;
   List: typeof NavigationMenuList;
   Item: typeof NavigationMenuItem;
@@ -239,18 +235,11 @@ declare const NavigationMenu: typeof Root & {
   Content: typeof NavigationMenuContent;
   Link: typeof NavigationMenuLink;
   Portal: typeof NavigationMenuPortal;
+  Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").NavigationMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
   Positioner: typeof NavigationMenuPositioner;
   Popup: typeof NavigationMenuPopup;
   Viewport: typeof NavigationMenuViewport;
   Arrow: typeof NavigationMenuArrow;
 };
-declare function NavigationMenuIndicator(props: NavigationMenuIconProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-declare function navigationMenuTriggerStyle({
-  className
-}?: {
-  className?: string;
-}): string;
 //#endregion
-export { NavigationMenu, NavigationMenuArrow, NavigationMenuArrowProps, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuIcon, NavigationMenuIconProps, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuItemProps, NavigationMenuLink, NavigationMenuLinkProps, NavigationMenuList, NavigationMenuListProps, NavigationMenuPopup, NavigationMenuPopupProps, NavigationMenuPortal, NavigationMenuPortalProps, NavigationMenuPositioner, NavigationMenuPositionerProps, NavigationMenuProps, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport, NavigationMenuViewportProps, navigationMenuTriggerStyle };
+export { NavigationMenu, NavigationMenuArrowProps, NavigationMenuContentProps, NavigationMenuIconProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuListProps, NavigationMenuPopupProps, NavigationMenuPortalProps, NavigationMenuPositionerProps, NavigationMenuProps, NavigationMenuTriggerProps, NavigationMenuViewportProps };

package/dist/components/NavigationMenu.js

@@ -1,6 +1,5 @@
-import { o as ChevronDownIcon } from "../icons-D2Q5n5C1.js";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 //#region src/components/NavigationMenu.tsx
 /**
@@ -38,20 +37,14 @@ import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-me
 *
 * @see {@link https://base-ui.com/react/components/navigation-menu | Base UI NavigationMenu}
 */
-function Root({ className = "", children, viewport = true, ref, ...props }) {
+function Root({ className = "", ref, ...props }) {
 	const classes = ["navigation-menu", className].filter(Boolean).join(" ");
-	const shouldRenderViewport = viewport && !hasChildOfType(children, NavigationMenuPortal) && !hasChildOfType(children, NavigationMenu$1.Portal);
-	return /* @__PURE__ */ jsxs(NavigationMenu$1.Root, {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Root, {
 		ref,
 		render: /* @__PURE__ */ jsx("nav", {}),
 		"data-slot": "navigation-menu",
-		"data-viewport": viewport,
 		className: classes,
-		...props,
-		children: [children, shouldRenderViewport && /* @__PURE__ */ jsx(NavigationMenuPortal, { children: /* @__PURE__ */ jsx(NavigationMenuPositioner, {
-			sideOffset: 4,
-			children: /* @__PURE__ */ jsx(NavigationMenuPopup, { children: /* @__PURE__ */ jsx(NavigationMenuViewport, {}) })
-		}) })]
+		...props
 	});
 }
 function NavigationMenuList({ className = "", ref, ...props }) {
@@ -73,14 +66,13 @@ function NavigationMenuItem({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function NavigationMenuTrigger({ className = "", children, ref, ...props }) {
+function NavigationMenuTrigger({ className = "", ref, ...props }) {
 	const classes = ["navigation-menu__trigger", className].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsxs(NavigationMenu$1.Trigger, {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Trigger, {
 		ref,
 		"data-slot": "navigation-menu-trigger",
 		className: classes,
-		...props,
-		children: [children, hasChildOfType(children, NavigationMenuIcon) ? null : /* @__PURE__ */ jsx(NavigationMenuIcon, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12 }) })]
+		...props
 	});
 }
 function NavigationMenuIcon({ className = "", ref, ...props }) {
@@ -117,7 +109,11 @@ function NavigationMenuPortal(props) {
 	});
 }
 function NavigationMenuPositioner({ className = "", ref, ...props }) {
-	const classes = ["navigation-menu__positioner", className].filter(Boolean).join(" ");
+	const classes = [
+		"navigation-menu__positioner",
+		"base-ui-positioner",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Positioner, {
 		ref,
 		"data-slot": "navigation-menu-positioner",
@@ -126,7 +122,11 @@ function NavigationMenuPositioner({ className = "", ref, ...props }) {
 	});
 }
 function NavigationMenuPopup({ className = "", ref, ...props }) {
-	const classes = ["navigation-menu__popup", className].filter(Boolean).join(" ");
+	const classes = [
+		"navigation-menu__popup",
+		"base-ui-popup",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Popup, {
 		ref,
 		"data-slot": "navigation-menu-popup",
@@ -193,7 +193,7 @@ function NavigationMenuArrow({ className = "", ref, ...props }) {
 *
 * @see {@link https://base-ui.com/react/components/navigation-menu | Base UI NavigationMenu}
 */
-const NavigationMenu = Object.assign(Root, {
+const NavigationMenu = {
 	Root,
 	List: NavigationMenuList,
 	Item: NavigationMenuItem,
@@ -202,27 +202,11 @@ const NavigationMenu = Object.assign(Root, {
 	Content: NavigationMenuContent,
 	Link: NavigationMenuLink,
 	Portal: NavigationMenuPortal,
+	Backdrop: NavigationMenu$1.Backdrop,
 	Positioner: NavigationMenuPositioner,
 	Popup: NavigationMenuPopup,
 	Viewport: NavigationMenuViewport,
 	Arrow: NavigationMenuArrow
-});
-function NavigationMenuIndicator(props) {
-	return /* @__PURE__ */ jsx(NavigationMenuIcon, {
-		"data-slot": "navigation-menu-indicator",
-		...props
-	});
-}
-function navigationMenuTriggerStyle({ className } = {}) {
-	return ["navigation-menu__trigger", className].filter(Boolean).join(" ");
-}
-function hasChildOfType(children, type) {
-	return React.Children.toArray(children).some((child) => {
-		if (!React.isValidElement(child)) return false;
-		if (child.type === type) return true;
-		if (child.type === React.Fragment) return hasChildOfType(child.props.children, type);
-		return false;
-	});
-}
+};
 //#endregion
-export { NavigationMenu, NavigationMenuArrow, NavigationMenuContent, NavigationMenuIcon, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };
+export { NavigationMenu };

package/dist/components/NumberField.js

@@ -22,6 +22,7 @@ function NumberFieldRoot({ className = "", ref, ...props }) {
 	const classes = ["number-field", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(NumberField$1.Root, {
 		ref,
+		"data-slot": "number-field",
 		className: classes,
 		...props
 	});
@@ -33,6 +34,7 @@ function NumberFieldGroup({ className = "", ref, ...props }) {
 	const classes = ["number-field__group", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(NumberField$1.Group, {
 		ref,
+		"data-slot": "number-field-group",
 		className: classes,
 		...props
 	});
@@ -44,6 +46,7 @@ function NumberFieldInput({ className = "", ref, ...props }) {
 	const classes = ["number-field__input", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(NumberField$1.Input, {
 		ref,
+		"data-slot": "number-field-input",
 		className: classes,
 		...props
 	});
@@ -55,6 +58,7 @@ function NumberFieldIncrement({ className = "", ref, ...props }) {
 	const classes = ["number-field__increment", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(NumberField$1.Increment, {
 		ref,
+		"data-slot": "number-field-increment",
 		className: classes,
 		...props
 	});
@@ -66,6 +70,7 @@ function NumberFieldDecrement({ className = "", ref, ...props }) {
 	const classes = ["number-field__decrement", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(NumberField$1.Decrement, {
 		ref,
+		"data-slot": "number-field-decrement",
 		className: classes,
 		...props
 	});
@@ -77,6 +82,7 @@ function NumberFieldScrubArea({ className = "", ref, ...props }) {
 	const classes = ["number-field__scrub-area", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(NumberField$1.ScrubArea, {
 		ref,
+		"data-slot": "number-field-scrub-area",
 		className: classes,
 		...props
 	});

package/dist/components/Popover.d.ts

@@ -39,6 +39,14 @@ interface PopoverPopupProps extends Omit<React.ComponentPropsWithoutRef<typeof P
   /** Additional CSS class names */
   className?: string;
 }
+/**
+ * Props for the Popover.Viewport component. Use this only when one popover
+ * moves between triggers and its content changes during that transition.
+ */
+interface PopoverViewportProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Viewport>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
 /**
  * Props for the Popover.Arrow component.
  */
@@ -67,30 +75,7 @@ interface PopoverCloseProps extends Omit<React.ComponentPropsWithoutRef<typeof P
   /** Additional CSS class names */
   className?: string;
 }
-type PopoverPlacementProps = Pick<PopoverPositionerProps, "anchor" | "positionMethod" | "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "sticky" | "arrowPadding" | "disableAnchorTracking" | "collisionAvoidance">;
-type PopoverContentProps = PopoverPopupProps & PopoverPlacementProps;
 interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
-/**
- * Controls the popover's open state and manages triggers.
- *
- * @example
- * ```tsx
- * <Popover.Root>
- *   <Popover.Trigger>Open</Popover.Trigger>
- *   <Popover.Portal>
- *     <Popover.Positioner>
- *       <Popover.Popup>
- *         <Popover.Title>Popover Title</Popover.Title>
- *         <Popover.Description>Content here</Popover.Description>
- *       </Popover.Popup>
- *     </Popover.Positioner>
- *   </Popover.Portal>
- * </Popover.Root>
- * ```
- *
- * @see {@link https://base-ui.com/react/components/popover | Base UI Popover}
- */
-declare const PopoverRoot: (props: PopoverProps) => React.JSX.Element;
 declare function PopoverAnchor({
   className,
   ref,
@@ -109,10 +94,6 @@ declare function PopoverTrigger({
 }: PopoverTriggerProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-/**
- * Renders popover content in a portal outside the DOM hierarchy.
- */
-declare const PopoverPortal: (props: PopoverPortalProps) => React.JSX.Element;
 /**
  * Optional backdrop that appears behind the popover.
  */
@@ -152,21 +133,16 @@ declare function PopoverPopup({
 }: PopoverPopupProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function PopoverContent({
-  anchor,
-  positionMethod,
-  side,
-  sideOffset,
-  align,
-  alignOffset,
-  collisionBoundary,
-  collisionPadding,
-  sticky,
-  arrowPadding,
-  disableAnchorTracking,
-  collisionAvoidance,
+/**
+ * Transition container for content that changes as a popover moves between
+ * triggers. Pair the adaptive classes from `base-ui-motion.css` with the
+ * positioner, popup, and this viewport when that behavior is needed.
+ */
+declare function PopoverViewport({
+  className,
+  ref,
   ...props
-}: PopoverContentProps & {
+}: PopoverViewportProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function PopoverHeader({
@@ -259,7 +235,8 @@ declare function PopoverClose({
  *
  * @see {@link https://base-ui.com/react/components/popover | Base UI Popover}
  */
-declare const Popover: ((props: PopoverProps) => React.JSX.Element) & {
+declare const Popover: {
+  createHandle: typeof Popover$1.createHandle;
   Root: (props: PopoverProps) => React.JSX.Element;
   Anchor: typeof PopoverAnchor;
   Trigger: typeof PopoverTrigger;
@@ -267,7 +244,7 @@ declare const Popover: ((props: PopoverProps) => React.JSX.Element) & {
   Backdrop: typeof PopoverBackdrop;
   Positioner: typeof PopoverPositioner;
   Popup: typeof PopoverPopup;
-  Content: typeof PopoverContent;
+  Viewport: typeof PopoverViewport;
   Header: typeof PopoverHeader;
   Arrow: typeof PopoverArrow;
   Title: typeof PopoverTitle;
@@ -275,4 +252,4 @@ declare const Popover: ((props: PopoverProps) => React.JSX.Element) & {
   Close: typeof PopoverClose;
 };
 //#endregion
-export { Popover, PopoverAnchor, PopoverAnchorProps, PopoverArrow, PopoverArrowProps, PopoverBackdrop, PopoverBackdropProps, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverHeader, PopoverHeaderProps, PopoverPopup, PopoverPopupProps, PopoverPortal, PopoverPortalProps, PopoverPositioner, PopoverPositionerProps, PopoverProps, PopoverRoot, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps };
+export { Popover, PopoverAnchorProps, PopoverArrowProps, PopoverBackdropProps, PopoverCloseProps, PopoverDescriptionProps, PopoverHeaderProps, PopoverPopupProps, PopoverPortalProps, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, PopoverViewportProps };

package/dist/components/Popover.js

@@ -69,7 +69,11 @@ const PopoverPortal = (props) => {
 * Optional backdrop that appears behind the popover.
 */
 function PopoverBackdrop({ className = "", ref, ...props }) {
-	const classes = ["popover__backdrop", className].filter(Boolean).join(" ");
+	const classes = [
+		"popover__backdrop",
+		"base-ui-backdrop",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Popover$1.Backdrop, {
 		ref,
 		"data-slot": "popover-backdrop",
@@ -90,7 +94,11 @@ function PopoverBackdrop({ className = "", ref, ...props }) {
 */
 function PopoverPositioner({ className = "", anchor, ref, ...props }) {
 	const anchorRef = React.useContext(PopoverAnchorContext);
-	const classes = ["popover__positioner", className].filter(Boolean).join(" ");
+	const classes = [
+		"popover__positioner",
+		"base-ui-positioner",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Popover$1.Positioner, {
 		ref,
 		anchor: anchor ?? anchorRef ?? void 0,
@@ -102,7 +110,11 @@ function PopoverPositioner({ className = "", anchor, ref, ...props }) {
 * The popup container that holds the popover content.
 */
 function PopoverPopup({ className = "", ref, ...props }) {
-	const classes = ["popover__popup", className].filter(Boolean).join(" ");
+	const classes = [
+		"popover__popup",
+		"base-ui-popup",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Popover$1.Popup, {
 		ref,
 		"data-slot": "popover-content",
@@ -110,22 +122,19 @@ function PopoverPopup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function PopoverContent({ anchor, positionMethod, side, sideOffset = 4, align = "center", alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, ...props }) {
-	return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
-		anchor,
-		positionMethod,
-		side,
-		sideOffset,
-		align,
-		alignOffset,
-		collisionBoundary,
-		collisionPadding,
-		sticky,
-		arrowPadding,
-		disableAnchorTracking,
-		collisionAvoidance,
-		children: /* @__PURE__ */ jsx(PopoverPopup, { ...props })
-	}) });
+/**
+* Transition container for content that changes as a popover moves between
+* triggers. Pair the adaptive classes from `base-ui-motion.css` with the
+* positioner, popup, and this viewport when that behavior is needed.
+*/
+function PopoverViewport({ className = "", ref, ...props }) {
+	const classes = ["popover__viewport", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Popover$1.Viewport, {
+		ref,
+		"data-slot": "popover-viewport",
+		className: classes,
+		...props
+	});
 }
 function PopoverHeader({ className = "", ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -226,7 +235,8 @@ function PopoverClose({ className = "", ref, ...props }) {
 *
 * @see {@link https://base-ui.com/react/components/popover | Base UI Popover}
 */
-const Popover = Object.assign(PopoverRoot, {
+const Popover = {
+	createHandle: Popover$1.createHandle,
 	Root: PopoverRoot,
 	Anchor: PopoverAnchor,
 	Trigger: PopoverTrigger,
@@ -234,12 +244,12 @@ const Popover = Object.assign(PopoverRoot, {
 	Backdrop: PopoverBackdrop,
 	Positioner: PopoverPositioner,
 	Popup: PopoverPopup,
-	Content: PopoverContent,
+	Viewport: PopoverViewport,
 	Header: PopoverHeader,
 	Arrow: PopoverArrow,
 	Title: PopoverTitle,
 	Description: PopoverDescription,
 	Close: PopoverClose
-});
+};
 //#endregion
-export { Popover, PopoverAnchor, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger };
+export { Popover };

package/dist/components/PreviewCard.d.ts

@@ -38,8 +38,14 @@ interface PreviewCardPopupProps extends Omit<React.ComponentPropsWithoutRef<type
   /** Additional CSS class names */
   className?: string;
 }
-type PreviewCardPlacementProps = Pick<PreviewCardPositionerProps, "anchor" | "positionMethod" | "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "sticky" | "arrowPadding" | "disableAnchorTracking" | "collisionAvoidance">;
-type PreviewCardContentProps = PreviewCardPopupProps & PreviewCardPlacementProps;
+/**
+ * Props for the PreviewCard.Viewport component. Use this only when one
+ * preview card moves between triggers and its content changes in place.
+ */
+interface PreviewCardViewportProps extends Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Viewport>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
 /**
  * Props for the PreviewCard.Arrow component.
  */
@@ -87,21 +93,16 @@ declare function PreviewCardPopup({
 }: PreviewCardPopupProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function PreviewCardContent({
-  anchor,
-  positionMethod,
-  side,
-  sideOffset,
-  align,
-  alignOffset,
-  collisionBoundary,
-  collisionPadding,
-  sticky,
-  arrowPadding,
-  disableAnchorTracking,
-  collisionAvoidance,
+/**
+ * Transition container for content that changes as a preview card moves
+ * between triggers. Pair the adaptive classes from `base-ui-motion.css` with
+ * the positioner, popup, and this viewport when that behavior is needed.
+ */
+declare function PreviewCardViewport({
+  className,
+  ref,
   ...props
-}: PreviewCardContentProps & {
+}: PreviewCardViewportProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 /**
@@ -143,14 +144,15 @@ declare function PreviewCardArrow({
  * @see {@link https://base-ui.com/react/components/preview-card | Base UI PreviewCard}
  */
 declare const PreviewCard: {
+  createHandle: typeof PreviewCard$1.createHandle;
   Root: (props: PreviewCardProps) => React.JSX.Element;
   Trigger: typeof PreviewCardTrigger;
-  Content: typeof PreviewCardContent;
   Portal: (props: PreviewCardPortalProps) => React.JSX.Element;
   Backdrop: typeof PreviewCardBackdrop;
   Positioner: typeof PreviewCardPositioner;
   Popup: typeof PreviewCardPopup;
+  Viewport: typeof PreviewCardViewport;
   Arrow: typeof PreviewCardArrow;
 };
 //#endregion
-export { PreviewCard, PreviewCardArrowProps, PreviewCardBackdropProps, PreviewCardContentProps, PreviewCardPopupProps, PreviewCardPortalProps, PreviewCardPositionerProps, PreviewCardProps, PreviewCardTriggerProps };
+export { PreviewCard, PreviewCardArrowProps, PreviewCardBackdropProps, PreviewCardPopupProps, PreviewCardPortalProps, PreviewCardPositionerProps, PreviewCardProps, PreviewCardTriggerProps, PreviewCardViewportProps };

package/dist/components/PreviewCard.js

@@ -53,7 +53,11 @@ const PreviewCardPortal = (props) => {
 * Optional backdrop behind the preview card.
 */
 function PreviewCardBackdrop({ className = "", ref, ...props }) {
-	const classes = ["preview-card__backdrop", className].filter(Boolean).join(" ");
+	const classes = [
+		"preview-card__backdrop",
+		"base-ui-backdrop",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(PreviewCard$1.Backdrop, {
 		ref,
 		"data-slot": "hover-card-backdrop",
@@ -65,7 +69,11 @@ function PreviewCardBackdrop({ className = "", ref, ...props }) {
 * Positions the preview card relative to the trigger.
 */
 function PreviewCardPositioner({ className = "", ref, ...props }) {
-	const classes = ["preview-card__positioner", className].filter(Boolean).join(" ");
+	const classes = [
+		"preview-card__positioner",
+		"base-ui-positioner",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(PreviewCard$1.Positioner, {
 		ref,
 		"data-slot": "hover-card-positioner",
@@ -77,7 +85,11 @@ function PreviewCardPositioner({ className = "", ref, ...props }) {
 * Container for preview card content.
 */
 function PreviewCardPopup({ className = "", ref, ...props }) {
-	const classes = ["preview-card__popup", className].filter(Boolean).join(" ");
+	const classes = [
+		"preview-card__popup",
+		"base-ui-popup",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(PreviewCard$1.Popup, {
 		ref,
 		"data-slot": "hover-card-content",
@@ -85,22 +97,19 @@ function PreviewCardPopup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function PreviewCardContent({ anchor, positionMethod, side, sideOffset = 4, align = "center", alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, ...props }) {
-	return /* @__PURE__ */ jsx(PreviewCardPortal, { children: /* @__PURE__ */ jsx(PreviewCardPositioner, {
-		anchor,
-		positionMethod,
-		side,
-		sideOffset,
-		align,
-		alignOffset,
-		collisionBoundary,
-		collisionPadding,
-		sticky,
-		arrowPadding,
-		disableAnchorTracking,
-		collisionAvoidance,
-		children: /* @__PURE__ */ jsx(PreviewCardPopup, { ...props })
-	}) });
+/**
+* Transition container for content that changes as a preview card moves
+* between triggers. Pair the adaptive classes from `base-ui-motion.css` with
+* the positioner, popup, and this viewport when that behavior is needed.
+*/
+function PreviewCardViewport({ className = "", ref, ...props }) {
+	const classes = ["preview-card__viewport", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(PreviewCard$1.Viewport, {
+		ref,
+		"data-slot": "hover-card-viewport",
+		className: classes,
+		...props
+	});
 }
 /**
 * Decorative arrow pointing to the trigger.
@@ -143,13 +152,14 @@ function PreviewCardArrow({ className = "", ref, ...props }) {
 * @see {@link https://base-ui.com/react/components/preview-card | Base UI PreviewCard}
 */
 const PreviewCard = {
+	createHandle: PreviewCard$1.createHandle,
 	Root: PreviewCardRoot,
 	Trigger: PreviewCardTrigger,
-	Content: PreviewCardContent,
 	Portal: PreviewCardPortal,
 	Backdrop: PreviewCardBackdrop,
 	Positioner: PreviewCardPositioner,
 	Popup: PreviewCardPopup,
+	Viewport: PreviewCardViewport,
 	Arrow: PreviewCardArrow
 };
 //#endregion