feat(SW-612): Add popover component

components/TempDesignSystem/Popover/Arrow/arrow.module.css

@@ -0,0 +1,22 @@
+.arrow {
+  transform-origin: center;
+  transform: translateY(-2px);
+}
+
+[data-placement="left"] .arrow,
+[data-placement="left top"] .arrow,
+[data-placement="left bottom"] .arrow {
+  transform: rotate(270deg) translateY(-6px);
+}
+
+[data-placement="right"] .arrow,
+[data-placement="right top"] .arrow,
+[data-placement="right bottom"] .arrow {
+  transform: rotate(90deg) translateY(-6px);
+}
+
+[data-placement="bottom"] .arrow,
+[data-placement="bottom left"] .arrow,
+[data-placement="bottom right"] .arrow {
+  transform: rotate(180deg) translateY(-2px);
+}

components/TempDesignSystem/Popover/Arrow/index.tsx

@@ -0,0 +1,19 @@
+import styles from "./arrow.module.css"
+
+export function Arrow() {
+  return (
+    <div className={styles.arrow}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="27"
+        height="13"
+        fill="none"
+      >
+        <path
+          fill="#fff"
+          d="M13.093 12.193.9 0h25.8L14.508 12.193a1 1 0 0 1-1.415 0Z"
+        />
+      </svg>
+    </div>
+  )
+}

components/TempDesignSystem/Popover/index.tsx

@@ -0,0 +1,50 @@
+import { useRef } from "react"
+import {
+  Button,
+  Dialog,
+  DialogTrigger,
+  OverlayArrow,
+  Popover as RAPopover,
+} from "react-aria-components"
+
+import { CloseLargeIcon } from "@/components/Icons"
+
+import { Arrow } from "./Arrow"
+import { PopoverProps } from "./popover"
+
+import styles from "./popover.module.css"
+
+export default function Popover({
+  triggerContent,
+  children,
+  ...props
+}: PopoverProps) {
+  let triggerRef = useRef(null)
+
+  return (
+    <DialogTrigger>
+      <Button className={styles.trigger}>{triggerContent}</Button>
+
+      <RAPopover
+        {...props}
+        offset={16}
+        crossOffset={-24}
+        className={styles.root}
+      >
+        <OverlayArrow>
+          <Arrow />
+        </OverlayArrow>
+        <Dialog>
+          {({ close }) => (
+            <>
+              <Button className={styles.closeButton} onPress={close}>
+                <CloseLargeIcon height={20} width={20} />
+              </Button>
+              {children}
+            </>
+          )}
+        </Dialog>
+      </RAPopover>
+    </DialogTrigger>
+  )
+}

components/TempDesignSystem/Popover/popover.module.css

@@ -0,0 +1,27 @@
+.root {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+  padding: var(--Spacing-x2);
+  max-width: calc(360px + var(--Spacing-x2) * 2);
+}
+
+.root section:focus-visible {
+  outline: none;
+}
+
+.trigger {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.closeButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}

components/TempDesignSystem/Popover/popover.ts

@@ -0,0 +1,6 @@
+import type { PopoverProps as RAPopoverProps } from "react-aria-components"
+
+export interface PopoverProps extends Omit<RAPopoverProps, "children"> {
+  triggerContent: React.ReactNode
+  children: React.ReactNode
+}