@protolabsai/ui 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -31,6 +31,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-dropdown-menu": "^2.1.17",
+    "@radix-ui/react-popover": "^1.1.16",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@protolabsai/design": "0.5.0"

package/src/Overlays.stories.tsx

@@ -2,12 +2,41 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { Button } from "./primitives";
 import { Field } from "./forms";
-import { ConfirmDialog, Dialog, Drawer, Tooltip, ToastProvider, useToast } from "./overlays";
+import { ConfirmDialog, Dialog, Drawer, Popover, PopoverClose, Tooltip, ToastProvider, useToast } from "./overlays";
 
 const meta: Meta = { title: "Components/Overlays" };
 export default meta;
 type Story = StoryObj;
 
+export const PopoverStory: Story = {
+  name: "Popover",
+  render: () => (
+    <div style={{ display: "flex", gap: 40, padding: 40, justifyContent: "center" }}>
+      <Popover trigger={<Button>Filter ▾</Button>}>
+        <div style={{ display: "grid", gap: 10 }}>
+          <Field label="Search" value="" placeholder="agent name…" />
+          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
+            <PopoverClose>
+              <Button size="sm" variant="ghost">
+                Cancel
+              </Button>
+            </PopoverClose>
+            <PopoverClose>
+              <Button size="sm" variant="primary">
+                Apply
+              </Button>
+            </PopoverClose>
+          </div>
+        </div>
+      </Popover>
+      <Popover side="right" align="start" trigger={<Button variant="ghost">Details →</Button>}>
+        Anchored floating content — collision-aware, dismiss on outside-click or Esc. The generic
+        primitive under filters, pickers, and comboboxes.
+      </Popover>
+    </div>
+  ),
+};
+
 export const Modal: Story = {
   render: () => {
     function Demo() {

package/src/overlays.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode, RefObject } from "react";
 import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import * as RPopover from "@radix-ui/react-popover";
 import { cx } from "./internal";
 import type { Status } from "./internal";
 import { Button } from "./primitives";
@@ -297,3 +298,47 @@ export function Tooltip({
     </span>
   );
 }
+
+/** Anchored floating content (Radix-backed) — the generic primitive under
+ *  filters, pickers, comboboxes, etc. Collision-aware positioning + dismissal
+ *  handled by Radix. Controlled or uncontrolled via `open` / `onOpenChange`. */
+export function Popover({
+  trigger,
+  children,
+  open,
+  onOpenChange,
+  side = "bottom",
+  align = "center",
+  className,
+}: {
+  /** The element that opens the popover (rendered as the anchor). */
+  trigger: ReactNode;
+  children: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  className?: string;
+}) {
+  return (
+    <RPopover.Root open={open} onOpenChange={onOpenChange}>
+      <RPopover.Trigger asChild>{trigger}</RPopover.Trigger>
+      <RPopover.Portal>
+        <RPopover.Content
+          className={cx("pl-popover", className)}
+          side={side}
+          align={align}
+          sideOffset={6}
+          collisionPadding={8}
+        >
+          {children}
+        </RPopover.Content>
+      </RPopover.Portal>
+    </RPopover.Root>
+  );
+}
+
+/** Dismiss the enclosing Popover — wrap a Button/element (e.g. a "Done" action). */
+export function PopoverClose({ children }: { children: ReactNode }) {
+  return <RPopover.Close asChild>{children}</RPopover.Close>;
+}

package/src/styles/overlays.css

@@ -293,3 +293,18 @@
   top: 50%;
   transform: translateY(-50%);
 }
+
+/* ── Popover (Radix-backed) ──────────────────────────────────────────────────── */
+.pl-popover {
+  min-width: 200px;
+  max-width: 320px;
+  padding: var(--pl-space-3);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border-strong);
+  border-radius: var(--pl-radius);
+  box-shadow: var(--pl-shadow-popover);
+  z-index: 1200;
+}