Add flyout component

package.json

@@ -46,6 +46,7 @@
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-context-menu": "^2.1.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-hover-card": "^1.0.6",
     "@radix-ui/react-popover": "^1.0.6",

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import "@/styles/globals.css";
 import "./styles/variables.css";
@@ -28,13 +28,16 @@ import {
   Tabs,
   WarningAlert,
   CardPrimary,
+  Flyout,
+  Select,
 } from "@/components";
 
 const App = () => {
   const [currentTheme, setCurrentTheme] = useState<ThemeName>("dark");
   const [selectedButton, setSelectedButton] = useState(0);
   const [checked, setChecked] = useState(false);
   const [disabled] = useState(false);
+  const ref = useRef(null);
 
   return (
     <ClickUIProvider
@@ -59,17 +62,46 @@ const App = () => {
           onClick={() => console.log("click")}
         />
       </div>
-      <div className={styles.flexWrap}>
-        <IconButton
-          icon="user"
-          size="sm"
-          onClick={() => console.log("click")}
-        />
+      <div
+        className={styles.flexWrap}
+        ref={ref}
+      >
         <IconButton
           icon="user"
           size="sm"
           onClick={() => console.log("click")}
         />
+        <Flyout>
+          <Flyout.Trigger>
+            <IconButton
+              icon="user"
+              size="sm"
+              onClick={() => console.log("click")}
+            />
+          </Flyout.Trigger>
+          <Flyout.Content container={ref.current}>
+            <Flyout.Header
+              title="test1"
+              description="test2"
+            />
+            <Flyout.Body>
+              hadksjhadksjhaskdjhaksdjhkajsdhkajshdkjashdkjashd
+              <Select>
+                <Select.Item value="test">test</Select.Item>
+                <Select.Item value="test2">test2</Select.Item>
+                <Select.Item value="test3">test3</Select.Item>
+                <Select.Item value="test4">test4</Select.Item>
+                <Select.Item value="test5">test5</Select.Item>
+                <Select.Item value="test6">test6</Select.Item>
+                <Select.Item value="test7">test7</Select.Item>
+                <Select.Item value="test8">test8</Select.Item>
+              </Select>
+            </Flyout.Body>
+            <Flyout.Footer>
+              <Button type="primary">Primary Button</Button>
+            </Flyout.Footer>
+          </Flyout.Content>
+        </Flyout>
         <IconButton
           icon="user"
           size="sm"