From 364e4cdcaa2a3e4c100317ac11d646ec40eae22e Mon Sep 17 00:00:00 2001
From: Matheus Verissimo <mverissimoo@hotmail.com>
Date: Tue, 9 Jul 2024 23:45:30 -0300
Subject: [PATCH] feat(react): add missing exports

---
 .../floating-panel/examples/basic.tsx         | 90 ++++++++-----------
 .../floating-panel/examples/controlled.tsx    | 76 +++++++---------
 .../floating-panel/examples/lazy-mount.tsx    | 73 ++++++---------
 .../floating-panel/examples/render-fn.tsx     | 81 +++++++----------
 .../floating-panel-root-provider.tsx          |  6 +-
 .../floating-panel/floating-panel-title.tsx   |  4 +-
 .../floating-panel/floating-panel.ts          |  4 +
 .../components/floating-panel/tests/basic.tsx | 52 +++++------
 8 files changed, 167 insertions(+), 219 deletions(-)

diff --git a/packages/react/src/components/floating-panel/examples/basic.tsx b/packages/react/src/components/floating-panel/examples/basic.tsx
index de8cb1c560..86d477f4ff 100644
--- a/packages/react/src/components/floating-panel/examples/basic.tsx
+++ b/packages/react/src/components/floating-panel/examples/basic.tsx
@@ -1,59 +1,45 @@
-import {
-  FloatingPanel,
-  FloatingPanelBody,
-  FloatingPanelCloseTrigger,
-  FloatingPanelContent,
-  FloatingPanelDragTrigger,
-  FloatingPanelHeader,
-  FloatingPanelMaximizeTrigger,
-  FloatingPanelMinimizeTrigger,
-  FloatingPanelPositioner,
-  FloatingPanelResizeTrigger,
-  FloatingPanelRestoreTrigger,
-  FloatingPanelTitle,
-  FloatingPanelTrigger,
-  Portal,
-} from '../..'
-
 import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
+import { FloatingPanel, Portal } from '../..'
 
 export const Basic = () => (
   <FloatingPanel.Root>
-    <FloatingPanelTrigger>Toggle Panel</FloatingPanelTrigger>
-    <FloatingPanelPositioner>
-      <FloatingPanelContent>
-        <FloatingPanelDragTrigger>
-          <FloatingPanelHeader>
-            <FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
-            <div data-scope="floating-panel" data-part="trigger-group">
-              <FloatingPanelMinimizeTrigger>
-                <Minus />
-              </FloatingPanelMinimizeTrigger>
-              <FloatingPanelMaximizeTrigger>
-                <Maximize2 />
-              </FloatingPanelMaximizeTrigger>
-              <FloatingPanelRestoreTrigger>
-                <ArrowDownLeft />
-              </FloatingPanelRestoreTrigger>
-              <FloatingPanelCloseTrigger>
-                <XIcon />
-              </FloatingPanelCloseTrigger>
-            </div>
-          </FloatingPanelHeader>
-        </FloatingPanelDragTrigger>
-        <FloatingPanelBody>
-          <p>Some content</p>
-        </FloatingPanelBody>
+    <FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
+    <Portal>
+      <FloatingPanel.Positioner>
+        <FloatingPanel.Content>
+          <FloatingPanel.DragTrigger>
+            <FloatingPanel.Header>
+              <FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
+              <div data-scope="floating-panel" data-part="trigger-group">
+                <FloatingPanel.MinimizeTrigger>
+                  <Minus />
+                </FloatingPanel.MinimizeTrigger>
+                <FloatingPanel.MaximizeTrigger>
+                  <Maximize2 />
+                </FloatingPanel.MaximizeTrigger>
+                <FloatingPanel.RestoreTrigger>
+                  <ArrowDownLeft />
+                </FloatingPanel.RestoreTrigger>
+                <FloatingPanel.CloseTrigger>
+                  <XIcon />
+                </FloatingPanel.CloseTrigger>
+              </div>
+            </FloatingPanel.Header>
+          </FloatingPanel.DragTrigger>
+          <FloatingPanel.Body>
+            <p>Some content</p>
+          </FloatingPanel.Body>
 
-        <FloatingPanelResizeTrigger axis="n" />
-        <FloatingPanelResizeTrigger axis="e" />
-        <FloatingPanelResizeTrigger axis="w" />
-        <FloatingPanelResizeTrigger axis="s" />
-        <FloatingPanelResizeTrigger axis="ne" />
-        <FloatingPanelResizeTrigger axis="se" />
-        <FloatingPanelResizeTrigger axis="sw" />
-        <FloatingPanelResizeTrigger axis="nw" />
-      </FloatingPanelContent>
-    </FloatingPanelPositioner>
+          <FloatingPanel.ResizeTrigger axis="n" />
+          <FloatingPanel.ResizeTrigger axis="e" />
+          <FloatingPanel.ResizeTrigger axis="w" />
+          <FloatingPanel.ResizeTrigger axis="s" />
+          <FloatingPanel.ResizeTrigger axis="ne" />
+          <FloatingPanel.ResizeTrigger axis="se" />
+          <FloatingPanel.ResizeTrigger axis="sw" />
+          <FloatingPanel.ResizeTrigger axis="nw" />
+        </FloatingPanel.Content>
+      </FloatingPanel.Positioner>
+    </Portal>
   </FloatingPanel.Root>
 )
diff --git a/packages/react/src/components/floating-panel/examples/controlled.tsx b/packages/react/src/components/floating-panel/examples/controlled.tsx
index e36994996f..b116c61348 100644
--- a/packages/react/src/components/floating-panel/examples/controlled.tsx
+++ b/packages/react/src/components/floating-panel/examples/controlled.tsx
@@ -1,65 +1,49 @@
-import { useState } from 'react'
-import {
-  FloatingPanel,
-  FloatingPanelBody,
-  FloatingPanelCloseTrigger,
-  FloatingPanelContent,
-  FloatingPanelDragTrigger,
-  FloatingPanelHeader,
-  FloatingPanelMaximizeTrigger,
-  FloatingPanelMinimizeTrigger,
-  FloatingPanelPositioner,
-  FloatingPanelResizeTrigger,
-  FloatingPanelRestoreTrigger,
-  FloatingPanelTitle,
-  FloatingPanelTrigger,
-  Portal,
-} from '../..'
-
 import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
+import { useState } from 'react'
+import { FloatingPanel, Portal } from '../..'
 
 export const Controlled = () => {
   const [isOpen, setIsOpen] = useState(false)
 
   return (
     <FloatingPanel.Root open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-      <FloatingPanelTrigger onClick={() => setIsOpen(true)}>Toggle Panel</FloatingPanelTrigger>
+      <FloatingPanel.Trigger onClick={() => setIsOpen(true)}>Toggle Panel</FloatingPanel.Trigger>
       <Portal>
-        <FloatingPanelPositioner>
-          <FloatingPanelContent>
-            <FloatingPanelDragTrigger>
-              <FloatingPanelHeader>
-                <FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
+        <FloatingPanel.Positioner>
+          <FloatingPanel.Content>
+            <FloatingPanel.DragTrigger>
+              <FloatingPanel.Header>
+                <FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
                 <div data-scope="floating-panel" data-part="trigger-group">
-                  <FloatingPanelMinimizeTrigger>
+                  <FloatingPanel.MinimizeTrigger>
                     <Minus />
-                  </FloatingPanelMinimizeTrigger>
-                  <FloatingPanelMaximizeTrigger>
+                  </FloatingPanel.MinimizeTrigger>
+                  <FloatingPanel.MaximizeTrigger>
                     <Maximize2 />
-                  </FloatingPanelMaximizeTrigger>
-                  <FloatingPanelRestoreTrigger>
+                  </FloatingPanel.MaximizeTrigger>
+                  <FloatingPanel.RestoreTrigger>
                     <ArrowDownLeft />
-                  </FloatingPanelRestoreTrigger>
-                  <FloatingPanelCloseTrigger>
+                  </FloatingPanel.RestoreTrigger>
+                  <FloatingPanel.CloseTrigger>
                     <XIcon />
-                  </FloatingPanelCloseTrigger>
+                  </FloatingPanel.CloseTrigger>
                 </div>
-              </FloatingPanelHeader>
-            </FloatingPanelDragTrigger>
-            <FloatingPanelBody>
+              </FloatingPanel.Header>
+            </FloatingPanel.DragTrigger>
+            <FloatingPanel.Body>
               <p>Some content</p>
-            </FloatingPanelBody>
+            </FloatingPanel.Body>
 
-            <FloatingPanelResizeTrigger axis="n" />
-            <FloatingPanelResizeTrigger axis="e" />
-            <FloatingPanelResizeTrigger axis="w" />
-            <FloatingPanelResizeTrigger axis="s" />
-            <FloatingPanelResizeTrigger axis="ne" />
-            <FloatingPanelResizeTrigger axis="se" />
-            <FloatingPanelResizeTrigger axis="sw" />
-            <FloatingPanelResizeTrigger axis="nw" />
-          </FloatingPanelContent>
-        </FloatingPanelPositioner>
+            <FloatingPanel.ResizeTrigger axis="n" />
+            <FloatingPanel.ResizeTrigger axis="e" />
+            <FloatingPanel.ResizeTrigger axis="w" />
+            <FloatingPanel.ResizeTrigger axis="s" />
+            <FloatingPanel.ResizeTrigger axis="ne" />
+            <FloatingPanel.ResizeTrigger axis="se" />
+            <FloatingPanel.ResizeTrigger axis="sw" />
+            <FloatingPanel.ResizeTrigger axis="nw" />
+          </FloatingPanel.Content>
+        </FloatingPanel.Positioner>
       </Portal>
     </FloatingPanel.Root>
   )
diff --git a/packages/react/src/components/floating-panel/examples/lazy-mount.tsx b/packages/react/src/components/floating-panel/examples/lazy-mount.tsx
index 9163ee63c2..fcb2752183 100644
--- a/packages/react/src/components/floating-panel/examples/lazy-mount.tsx
+++ b/packages/react/src/components/floating-panel/examples/lazy-mount.tsx
@@ -1,61 +1,46 @@
-import {
-  FloatingPanel,
-  FloatingPanelBody,
-  FloatingPanelCloseTrigger,
-  FloatingPanelContent,
-  FloatingPanelDragTrigger,
-  FloatingPanelHeader,
-  FloatingPanelMaximizeTrigger,
-  FloatingPanelMinimizeTrigger,
-  FloatingPanelPositioner,
-  FloatingPanelResizeTrigger,
-  FloatingPanelRestoreTrigger,
-  FloatingPanelTitle,
-  FloatingPanelTrigger,
-  Portal,
-} from '../..'
+import { FloatingPanel, Portal } from '../..'
 
 import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
 
 export const LazyMount = () => (
   <FloatingPanel.Root lazyMount onExitComplete={() => console.log('onExitComplete invoked')}>
-    <FloatingPanelTrigger>Toggle Panel</FloatingPanelTrigger>
+    <FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
     <Portal>
-      <FloatingPanelPositioner>
-        <FloatingPanelContent>
-          <FloatingPanelDragTrigger>
-            <FloatingPanelHeader>
-              <FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
+      <FloatingPanel.Positioner>
+        <FloatingPanel.Content>
+          <FloatingPanel.DragTrigger>
+            <FloatingPanel.Header>
+              <FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
               <div data-scope="floating-panel" data-part="trigger-group">
-                <FloatingPanelMinimizeTrigger>
+                <FloatingPanel.MinimizeTrigger>
                   <Minus />
-                </FloatingPanelMinimizeTrigger>
-                <FloatingPanelMaximizeTrigger>
+                </FloatingPanel.MinimizeTrigger>
+                <FloatingPanel.MaximizeTrigger>
                   <Maximize2 />
-                </FloatingPanelMaximizeTrigger>
-                <FloatingPanelRestoreTrigger>
+                </FloatingPanel.MaximizeTrigger>
+                <FloatingPanel.RestoreTrigger>
                   <ArrowDownLeft />
-                </FloatingPanelRestoreTrigger>
-                <FloatingPanelCloseTrigger>
+                </FloatingPanel.RestoreTrigger>
+                <FloatingPanel.CloseTrigger>
                   <XIcon />
-                </FloatingPanelCloseTrigger>
+                </FloatingPanel.CloseTrigger>
               </div>
-            </FloatingPanelHeader>
-          </FloatingPanelDragTrigger>
-          <FloatingPanelBody>
+            </FloatingPanel.Header>
+          </FloatingPanel.DragTrigger>
+          <FloatingPanel.Body>
             <p>Some content</p>
-          </FloatingPanelBody>
+          </FloatingPanel.Body>
 
-          <FloatingPanelResizeTrigger axis="n" />
-          <FloatingPanelResizeTrigger axis="e" />
-          <FloatingPanelResizeTrigger axis="w" />
-          <FloatingPanelResizeTrigger axis="s" />
-          <FloatingPanelResizeTrigger axis="ne" />
-          <FloatingPanelResizeTrigger axis="se" />
-          <FloatingPanelResizeTrigger axis="sw" />
-          <FloatingPanelResizeTrigger axis="nw" />
-        </FloatingPanelContent>
-      </FloatingPanelPositioner>
+          <FloatingPanel.ResizeTrigger axis="n" />
+          <FloatingPanel.ResizeTrigger axis="e" />
+          <FloatingPanel.ResizeTrigger axis="w" />
+          <FloatingPanel.ResizeTrigger axis="s" />
+          <FloatingPanel.ResizeTrigger axis="ne" />
+          <FloatingPanel.ResizeTrigger axis="se" />
+          <FloatingPanel.ResizeTrigger axis="sw" />
+          <FloatingPanel.ResizeTrigger axis="nw" />
+        </FloatingPanel.Content>
+      </FloatingPanel.Positioner>
     </Portal>
   </FloatingPanel.Root>
 )
diff --git a/packages/react/src/components/floating-panel/examples/render-fn.tsx b/packages/react/src/components/floating-panel/examples/render-fn.tsx
index c525e52d98..13020867a1 100644
--- a/packages/react/src/components/floating-panel/examples/render-fn.tsx
+++ b/packages/react/src/components/floating-panel/examples/render-fn.tsx
@@ -1,65 +1,48 @@
-import {
-  FloatingPanel,
-  FloatingPanelBody,
-  FloatingPanelCloseTrigger,
-  FloatingPanelContent,
-  FloatingPanelContext,
-  FloatingPanelDragTrigger,
-  FloatingPanelHeader,
-  FloatingPanelMaximizeTrigger,
-  FloatingPanelMinimizeTrigger,
-  FloatingPanelPositioner,
-  FloatingPanelResizeTrigger,
-  FloatingPanelRestoreTrigger,
-  FloatingPanelTitle,
-  FloatingPanelTrigger,
-  Portal,
-} from '../..'
-
 import { ArrowDownLeft, Maximize2, Minus, XIcon } from 'lucide-react'
+import { FloatingPanel, Portal } from '../..'
 
 export const RenderFn = () => (
   <FloatingPanel.Root>
-    <FloatingPanelTrigger>Toggle Panel</FloatingPanelTrigger>
+    <FloatingPanel.Trigger>Toggle Panel</FloatingPanel.Trigger>
     <Portal>
-      <FloatingPanelPositioner>
-        <FloatingPanelContent>
-          <FloatingPanelDragTrigger>
-            <FloatingPanelHeader>
-              <FloatingPanelTitle>Floating Panel</FloatingPanelTitle>
+      <FloatingPanel.Positioner>
+        <FloatingPanel.Content>
+          <FloatingPanel.DragTrigger>
+            <FloatingPanel.Header>
+              <FloatingPanel.Title>Floating Panel</FloatingPanel.Title>
               <div data-scope="floating-panel" data-part="trigger-group">
-                <FloatingPanelMinimizeTrigger>
+                <FloatingPanel.MinimizeTrigger>
                   <Minus />
-                </FloatingPanelMinimizeTrigger>
-                <FloatingPanelMaximizeTrigger>
+                </FloatingPanel.MinimizeTrigger>
+                <FloatingPanel.MaximizeTrigger>
                   <Maximize2 />
-                </FloatingPanelMaximizeTrigger>
-                <FloatingPanelRestoreTrigger>
+                </FloatingPanel.MaximizeTrigger>
+                <FloatingPanel.RestoreTrigger>
                   <ArrowDownLeft />
-                </FloatingPanelRestoreTrigger>
-                <FloatingPanelCloseTrigger>
+                </FloatingPanel.RestoreTrigger>
+                <FloatingPanel.CloseTrigger>
                   <XIcon />
-                </FloatingPanelCloseTrigger>
+                </FloatingPanel.CloseTrigger>
               </div>
-            </FloatingPanelHeader>
-          </FloatingPanelDragTrigger>
-          <FloatingPanelBody>
+            </FloatingPanel.Header>
+          </FloatingPanel.DragTrigger>
+          <FloatingPanel.Body>
             <p>Some content</p>
-          </FloatingPanelBody>
+          </FloatingPanel.Body>
 
-          <FloatingPanelResizeTrigger axis="n" />
-          <FloatingPanelResizeTrigger axis="e" />
-          <FloatingPanelResizeTrigger axis="w" />
-          <FloatingPanelResizeTrigger axis="s" />
-          <FloatingPanelResizeTrigger axis="ne" />
-          <FloatingPanelResizeTrigger axis="se" />
-          <FloatingPanelResizeTrigger axis="sw" />
-          <FloatingPanelResizeTrigger axis="nw" />
-        </FloatingPanelContent>
-      </FloatingPanelPositioner>
+          <FloatingPanel.ResizeTrigger axis="n" />
+          <FloatingPanel.ResizeTrigger axis="e" />
+          <FloatingPanel.ResizeTrigger axis="w" />
+          <FloatingPanel.ResizeTrigger axis="s" />
+          <FloatingPanel.ResizeTrigger axis="ne" />
+          <FloatingPanel.ResizeTrigger axis="se" />
+          <FloatingPanel.ResizeTrigger axis="sw" />
+          <FloatingPanel.ResizeTrigger axis="nw" />
+        </FloatingPanel.Content>
+      </FloatingPanel.Positioner>
     </Portal>
-    <FloatingPanelContext>
-      {(floatingPanel) => <p>floatingPanel is {floatingPanel.open ? 'open' : 'closed'}</p>}
-    </FloatingPanelContext>
+    <FloatingPanel.Context>
+      {(floatingPanel) => <p>floatingPanel. is {floatingPanel.open ? 'open' : 'closed'}</p>}
+    </FloatingPanel.Context>
   </FloatingPanel.Root>
 )
diff --git a/packages/react/src/components/floating-panel/floating-panel-root-provider.tsx b/packages/react/src/components/floating-panel/floating-panel-root-provider.tsx
index 76d1a0a151..37437a5ef2 100644
--- a/packages/react/src/components/floating-panel/floating-panel-root-provider.tsx
+++ b/packages/react/src/components/floating-panel/floating-panel-root-provider.tsx
@@ -1,6 +1,7 @@
 import { mergeProps } from '@zag-js/react'
 import type { ReactNode } from 'react'
 import { RenderStrategyPropsProvider, splitRenderStrategyProps } from '../../utils/render-strategy'
+import type { PolymorphicProps } from '../factory'
 import type { UsePresenceProps } from '../presence'
 import { PresenceProvider, usePresence } from '../presence'
 import { splitPresenceProps } from '../presence/split-presence-props'
@@ -11,7 +12,10 @@ interface RootProviderProps {
   value: UseFloatingPanelReturn
 }
 
-export interface FloatingPanelRootProviderBaseProps extends RootProviderProps, UsePresenceProps {}
+export interface FloatingPanelRootProviderBaseProps
+  extends RootProviderProps,
+    UsePresenceProps,
+    PolymorphicProps {}
 export interface FloatingPanelRootProviderProps extends FloatingPanelRootProviderBaseProps {
   children?: ReactNode
 }
diff --git a/packages/react/src/components/floating-panel/floating-panel-title.tsx b/packages/react/src/components/floating-panel/floating-panel-title.tsx
index 9e5af68646..f272d95edc 100644
--- a/packages/react/src/components/floating-panel/floating-panel-title.tsx
+++ b/packages/react/src/components/floating-panel/floating-panel-title.tsx
@@ -4,14 +4,14 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { useFloatingPanelContext } from './use-floating-panel-context'
 
 export interface FloatingPanelTitleBaseProps extends PolymorphicProps {}
-export interface FloatingPanelTitleProps extends HTMLProps<'p'>, FloatingPanelTitleBaseProps {}
+export interface FloatingPanelTitleProps extends HTMLProps<'h2'>, FloatingPanelTitleBaseProps {}
 
 export const FloatingPanelTitle = forwardRef<HTMLDivElement, FloatingPanelTitleProps>(
   (props, ref) => {
     const floatingPanel = useFloatingPanelContext()
     const mergedProps = mergeProps(floatingPanel.getTitleProps(), props)
 
-    return <ark.div {...mergedProps} ref={ref} />
+    return <ark.h2 {...mergedProps} ref={ref} />
   },
 )
 
diff --git a/packages/react/src/components/floating-panel/floating-panel.ts b/packages/react/src/components/floating-panel/floating-panel.ts
index a7a9ba2b4e..55af52e8c0 100644
--- a/packages/react/src/components/floating-panel/floating-panel.ts
+++ b/packages/react/src/components/floating-panel/floating-panel.ts
@@ -14,6 +14,10 @@ export {
   type FloatingPanelContentProps as ContentProps,
   type FloatingPanelContentBaseProps as ContentBaseProps,
 } from './floating-panel-content'
+export {
+  FloatingPanelContext as Context,
+  type FloatingPanelContextProps as ContextProps,
+} from './floating-panel-context'
 export {
   FloatingPanelDock as Dock,
   type FloatingPanelDockProps as DockProps,
diff --git a/packages/react/src/components/floating-panel/tests/basic.tsx b/packages/react/src/components/floating-panel/tests/basic.tsx
index d6efc209e4..a93e1dec0a 100644
--- a/packages/react/src/components/floating-panel/tests/basic.tsx
+++ b/packages/react/src/components/floating-panel/tests/basic.tsx
@@ -1,32 +1,34 @@
-import { FloatingPanel, type FloatingPanelRootProps } from '../..'
+import { FloatingPanel, type FloatingPanelRootProps, Portal } from '../..'
 
 export const ComponentUnderTest = (props: FloatingPanelRootProps) => (
   <FloatingPanel.Root {...props}>
     <FloatingPanel.Trigger>Open FloatingPanel</FloatingPanel.Trigger>
     <FloatingPanel.Dock />
-    <FloatingPanel.Positioner data-testid="positioner">
-      <FloatingPanel.Content>
-        <FloatingPanel.DragTrigger>
-          <FloatingPanel.Header>
-            <FloatingPanel.Title>FloatingPanel Title</FloatingPanel.Title>
-            <FloatingPanel.MinimizeTrigger>minimize window</FloatingPanel.MinimizeTrigger>
-            <FloatingPanel.MaximizeTrigger>maximize window</FloatingPanel.MaximizeTrigger>
-            <FloatingPanel.RestoreTrigger>restore window</FloatingPanel.RestoreTrigger>
-            <FloatingPanel.CloseTrigger>close window</FloatingPanel.CloseTrigger>
-          </FloatingPanel.Header>
-        </FloatingPanel.DragTrigger>
-        <FloatingPanel.Body>
-          <p>Some content</p>
-        </FloatingPanel.Body>
-        <FloatingPanel.ResizeTrigger axis="n" />
-        <FloatingPanel.ResizeTrigger axis="e" />
-        <FloatingPanel.ResizeTrigger axis="w" />
-        <FloatingPanel.ResizeTrigger axis="s" />
-        <FloatingPanel.ResizeTrigger axis="ne" />
-        <FloatingPanel.ResizeTrigger axis="se" />
-        <FloatingPanel.ResizeTrigger axis="sw" />
-        <FloatingPanel.ResizeTrigger axis="nw" />
-      </FloatingPanel.Content>
-    </FloatingPanel.Positioner>
+    <Portal>
+      <FloatingPanel.Positioner data-testid="positioner">
+        <FloatingPanel.Content>
+          <FloatingPanel.DragTrigger>
+            <FloatingPanel.Header>
+              <FloatingPanel.Title>FloatingPanel Title</FloatingPanel.Title>
+              <FloatingPanel.MinimizeTrigger>minimize window</FloatingPanel.MinimizeTrigger>
+              <FloatingPanel.MaximizeTrigger>maximize window</FloatingPanel.MaximizeTrigger>
+              <FloatingPanel.RestoreTrigger>restore window</FloatingPanel.RestoreTrigger>
+              <FloatingPanel.CloseTrigger>close window</FloatingPanel.CloseTrigger>
+            </FloatingPanel.Header>
+          </FloatingPanel.DragTrigger>
+          <FloatingPanel.Body>
+            <p>Some content</p>
+          </FloatingPanel.Body>
+          <FloatingPanel.ResizeTrigger axis="n" />
+          <FloatingPanel.ResizeTrigger axis="e" />
+          <FloatingPanel.ResizeTrigger axis="w" />
+          <FloatingPanel.ResizeTrigger axis="s" />
+          <FloatingPanel.ResizeTrigger axis="ne" />
+          <FloatingPanel.ResizeTrigger axis="se" />
+          <FloatingPanel.ResizeTrigger axis="sw" />
+          <FloatingPanel.ResizeTrigger axis="nw" />
+        </FloatingPanel.Content>
+      </FloatingPanel.Positioner>
+    </Portal>
   </FloatingPanel.Root>
 )