feat(Popover): Add Popover component

package.json

@@ -20,6 +20,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.5",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@yaasl/devtools": "^0.11.0-alpha.2",

src/components/ui/popover/index.ts

@@ -0,0 +1 @@
+export * from "./popover"

src/components/ui/popover/popover.stories.tsx

@@ -0,0 +1,48 @@
+import { argType, Meta, StoryObj } from "lib/storybook"
+import { createRange } from "utils/create-range"
+
+import { Popover } from "./popover"
+import { Button } from "../button"
+import { List } from "../list"
+
+const meta: Meta<typeof Popover.Root> = {
+  title: "Overlay/Popover",
+  component: Popover.Root,
+  argTypes: {
+    defaultOpen: argType.boolean(),
+    open: argType.boolean(),
+    modal: argType.boolean(),
+    onOpenChange: argType.callback(),
+  },
+  args: {
+    defaultOpen: true,
+    modal: false,
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Popover.Root>
+
+export const Default: Story = {
+  args: {},
+  render: args => (
+    <Popover.Root {...args}>
+      <Popover.Trigger asChild>
+        <Button>Click me</Button>
+      </Popover.Trigger>
+
+      <Popover.Content align="start" className="min-w-48">
+        <List.Root>
+          {createRange(0, 4).map(value => (
+            <List.Item key={value}>
+              <Popover.Close asChild>
+                <List.Label>Item {value}</List.Label>
+              </Popover.Close>
+            </List.Item>
+          ))}
+        </List.Root>
+      </Popover.Content>
+    </Popover.Root>
+  ),
+}

src/components/ui/popover/popover.tsx

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
+
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "utils/cn"
+
+import { surface } from "../../../utils/styles"
+
+const PopoverContent = forwardRef<
+  ElementRef<typeof PopoverPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        surface({ look: "overlay", size: "md" }),
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+const Popover = {
+  Root: PopoverPrimitive.Root,
+  Trigger: PopoverPrimitive.Trigger,
+  Content: PopoverContent,
+  Close: PopoverPrimitive.Close,
+}
+
+export { Popover }