@edux-design/popovers 0.0.6 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @edux-design/popovers
 
+## 1.0.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @edux-design/utils@0.1.0
+
+## 0.0.7
+
+### Patch Changes
+
+- b9d0d32: Added documentation
+- Updated dependencies [b9d0d32]
+- Updated dependencies
+  - @edux-design/utils@0.0.3
+
 ## 0.0.6
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,77 @@
+# @edux-design/popovers
+
+Thin, design-token-aware wrappers around Radix UI’s popover primitives. Use them directly or via higher-level components (menus, tooltips, etc.).
+
+Exports: `PopoverProvider`, `Popover`, `PopoverTrigger`, `PopoverAnchor`, `PopoverPortal`, `PopoverContent`, `PopoverClose`.
+
+---
+
+## Installation
+
+```bash
+pnpm add @edux-design/popovers @radix-ui/react-popover @edux-design/utils
+# or
+npm install @edux-design/popovers @radix-ui/react-popover @edux-design/utils
+```
+
+Peer deps: `react@^19.1.0`, `react-dom@^19.1.0`.
+
+---
+
+## Usage
+
+```jsx
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverClose,
+} from "@edux-design/popovers";
+
+export function HelpPopover() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button className="underline text-sm">Need help?</button>
+      </PopoverTrigger>
+      <PopoverContent side="right" className="max-w-xs">
+        <p className="text-sm">
+          Reach out to support@example.com for additional guidance.
+        </p>
+        <PopoverClose className="absolute top-2 right-2 text-xs underline">
+          Close
+        </PopoverClose>
+      </PopoverContent>
+    </Popover>
+  );
+}
+```
+
+### PopoverContent props
+
+- `side`, `align`, `sideOffset`, `alignOffset`, `avoidCollisions`, `forceMount`
+- `showArrow` (adds the Radix arrow SVG)
+- `className` / `style`
+- `contentProps` for passing any other Radix content props
+
+Everything is wrapped in `PopoverPortal` so content escapes stacking context issues by default.
+
+---
+
+## Development
+
+```bash
+pnpm --filter @edux-design/popovers lint
+pnpm --filter @edux-design/popovers check-types
+pnpm --filter @edux-design/popovers build
+```
+
+Stories: `src/demos/Popover.stories.jsx`.
+
+---
+
+## Notes
+
+- Since these components forward all props to Radix, refer to the Radix documentation for advanced features (modals, anchors, collision handling).
+- The default surface uses the `bg-fg-base` / `text-fg-invert` combo; override via Tailwind classes when you need alternate skins.
+- Consumers should wrap popovers in `PopoverProvider` if they need to tweak the default delay group or share open states.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/popovers",
-  "version": "0.0.6",
+  "version": "1.0.0",
   "private": false,
   "sideEffects": [
     "**/*.css"

package/src/demos/Popover.stories.jsx

@@ -48,7 +48,7 @@ Built with [@radix-ui/react-popover](https://www.radix-ui.com/primitives/docs/co
 export default meta;
 /**
  * ───────────────────────────────────────────────
- * 📍 Basic Popover
+ * Basic Popover
  * ───────────────────────────────────────────────
  */
 export const Basic = {
@@ -86,7 +86,7 @@ export const Basic = {
 
 /**
  * ───────────────────────────────────────────────
- * 🎨 Custom Content
+ * Custom Content
  * ───────────────────────────────────────────────
  */
 export const CustomContent = {
@@ -131,7 +131,7 @@ export const CustomContent = {
 
 /**
  * ───────────────────────────────────────────────
- * ⚙️ Controlled Popover
+ * Controlled Popover
  * ───────────────────────────────────────────────
  */
 export const Controlled = {
@@ -169,7 +169,7 @@ export const Controlled = {
 
 /**
  * ───────────────────────────────────────────────
- * 📐 All Sides Example
+ *  All Sides Example
  * ───────────────────────────────────────────────
  */
 export const Sides = {
@@ -200,7 +200,7 @@ export const Sides = {
 
 /**
  * ───────────────────────────────────────────────
- * 🧭 No Auto Focus Example
+ * No Auto Focus Example
  * ───────────────────────────────────────────────
  */
 export const NoAutoFocus = {

package/src/elements/Popover.jsx

@@ -118,7 +118,7 @@ export const PopoverContent = forwardRef(
     // Base styling; consuming apps can override via className or wrapping
     const base =
       "bg-fg-base text-fg-invert text-sm font-normal rounded-xl shadow-lg px-12 py-8 animate-fade-in";
-    // A transform to “nudge” content initially (you can enhance animation later)
+    // A transform to “nudge” content initially
     const positioning = {
       top: "translate-y-[-4px]",
       right: "translate-x-[4px]",

package/src/elements/Popover.test.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverClose,
+} from "./Popover";
+
+vi.mock("@radix-ui/react-popover", () => {
+  const Passthrough = ({ children, ...props }) => (
+    <div {...props}>{children}</div>
+  );
+  const Buttonish = ({ children, ...props }) => (
+    <button type="button" {...props}>
+      {children}
+    </button>
+  );
+const Content = React.forwardRef(
+  ({ sideOffset, alignOffset, avoidCollisions, forceMount, ...props }, ref) => (
+    <div ref={ref} data-testid="radix-content" {...props} />
+  )
+);
+  Content.displayName = "RadixContent";
+  const Arrow = (props) => <div data-testid="popover-arrow" {...props} />;
+
+  return {
+    Provider: Passthrough,
+    Root: Passthrough,
+    Trigger: Buttonish,
+    Anchor: Passthrough,
+    Portal: Passthrough,
+    Content,
+    Close: Buttonish,
+    Arrow,
+  };
+});
+
+describe("PopoverContent", () => {
+  it("merges Tailwind classes and optionally renders arrow", () => {
+    render(
+      <PopoverContent className="custom" showArrow side="top" data-testid="content">
+        Body
+      </PopoverContent>
+    );
+    const content = screen.getByTestId("content");
+    expect(content).toHaveClass("custom");
+    expect(screen.getByTestId("popover-arrow")).toBeInTheDocument();
+  });
+
+  it("plays nicely with Popover + Trigger exports", () => {
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Panel</PopoverContent>
+        <PopoverClose>Close</PopoverClose>
+      </Popover>
+    );
+    expect(screen.getByText("Open")).toBeInTheDocument();
+    expect(screen.getAllByText(/close|panel/i).length).toBeGreaterThan(0);
+  });
+});