feat: add Popover, Skeleton, and ScrollArea components with Storybook stories

src/components/ui/Popover.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Popover, PopoverTrigger, PopoverContent, PopoverTitle, PopoverDescription } from "./popover";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Label } from "./label";
+
+const meta = {
+  title: "UI/Popover",
+  component: Popover,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger>
+        <Button variant="outline">Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <PopoverTitle className="font-medium leading-none">Dimensions</PopoverTitle>
+            <PopoverDescription className="text-muted-foreground text-sm">
+              Set the dimensions for the layer.
+            </PopoverDescription>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxWidth">Max. width</Label>
+              <Input
+                id="maxWidth"
+                defaultValue="300px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxHeight">Max. height</Label>
+              <Input
+                id="maxHeight"
+                defaultValue="none"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};

src/components/ui/ScrollArea.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import { ScrollArea, ScrollBar } from "./scroll-area";
+import { Separator } from "./separator";
+
+const meta = {
+  title: "UI/ScrollArea",
+  component: ScrollArea,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+);
+
+export const Default: Story = {
+  render: () => (
+    <ScrollArea className="h-72 w-48 rounded-md border">
+      <div className="p-4">
+        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+        {tags.map((tag) => (
+          <React.Fragment key={tag}>
+            <div className="text-sm">
+              {tag}
+            </div>
+            <Separator className="my-2" />
+          </React.Fragment>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+      <div className="flex w-max space-x-4 p-4">
+        {Array.from({ length: 20 }).map((_, i) => (
+          <div
+            key={i}
+            className="bg-muted flex h-40 w-32 items-center justify-center rounded-md"
+          >
+            Item {i + 1}
+          </div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  ),
+};
+
+export const Both: Story = {
+  render: () => (
+    <ScrollArea className="h-72 w-96 rounded-md border">
+      <div className="grid h-[500px] w-[600px] place-items-center bg-muted/20">
+        <div className="text-sm font-medium">
+          Large content area (600x500px)
+        </div>
+      </div>
+      <ScrollBar orientation="horizontal" />
+      <ScrollBar orientation="vertical" />
+    </ScrollArea>
+  ),
+};

src/components/ui/Skeleton.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "./skeleton";
+
+const meta = {
+  title: "UI/Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Skeleton className="h-4 w-[250px]" />,
+};
+
+export const Card: Story = {
+  render: () => (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  ),
+};
+
+export const List: Story = {
+  render: () => (
+    <div className="space-y-4 w-[300px]">
+      <div className="flex items-center space-x-4">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className="space-y-2 flex-1">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-3 w-3/4" />
+        </div>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className="space-y-2 flex-1">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-3 w-3/4" />
+        </div>
+      </div>
+      <div className="flex items-center space-x-4">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className="space-y-2 flex-1">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-3 w-3/4" />
+        </div>
+      </div>
+    </div>
+  ),
+};

src/components/ui/index.ts

@@ -122,6 +122,24 @@ export {
   DropdownMenuTrigger,
 } from "./dropdown-menu";
 
+// Popover component
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverPortal,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverClose,
+  PopoverArrow,
+} from "./popover";
+
+// Skeleton component
+export { Skeleton } from "./skeleton";
+
+// ScrollArea component
+export { ScrollArea, ScrollBar } from "./scroll-area";
+
 // AlertDialog component
 export {
   AlertDialog,

src/components/ui/popover.tsx

@@ -0,0 +1,79 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { useTheme } from "@/providers";
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverPortal({ ...props }: PopoverPrimitive.Portal.Props) {
+  return <PopoverPrimitive.Portal data-slot="popover-portal" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  const { mode } = useTheme();
+  return (
+    <PopoverPrimitive.Portal className={cn("pui-root", mode)}>
+      <PopoverPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 w-72 rounded-md border p-4 shadow-md outline-none",
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverDescription({ ...props }: PopoverPrimitive.Description.Props) {
+  return <PopoverPrimitive.Description data-slot="popover-description" {...props} />;
+}
+
+function PopoverTitle({ ...props }: PopoverPrimitive.Title.Props) {
+  return <PopoverPrimitive.Title data-slot="popover-title" {...props} />;
+}
+
+function PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {
+  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />;
+}
+
+function PopoverArrow({ ...props }: PopoverPrimitive.Arrow.Props) {
+  return <PopoverPrimitive.Arrow data-slot="popover-arrow" {...props} />;
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverPortal,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverClose,
+  PopoverArrow,
+};

src/components/ui/scroll-area.tsx

@@ -0,0 +1,50 @@
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] outline-none">
+        <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none select-none transition-colors",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb className="bg-border relative flex-1 rounded-full" />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };

src/components/ui/skeleton.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-muted animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/index.ts

@@ -133,6 +133,20 @@ export {
     ModalFooter, ModalHeader, ModalOverlay, ModalTitle,
     // Notice
     Notice, NoticeAction, NoticeTitle,
+    // Popover
+    Popover,
+    PopoverArrow,
+    PopoverClose,
+    PopoverContent,
+    PopoverDescription,
+    PopoverPortal,
+    PopoverTitle,
+    PopoverTrigger,
+    // Skeleton
+    Skeleton,
+    // ScrollArea
+    ScrollArea,
+    ScrollBar,
     // Progress
     Progress, ProgressIndicator,
     ProgressLabel, ProgressTrack, ProgressValue,