@edux-design/popovers 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/popovers",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -15,8 +15,8 @@
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
-    "build": "tsup src/index.js --format esm,cjs --dts",
-    "dev": "tsup src/index.js --watch --format esm,cjs --dts",
+    "build": "tsup src/index.js --format esm,cjs  --external react,react-dom,@radix-ui/react-popover",
+    "dev": "tsup src/index.js --format esm,cjs  --external react,react-dom,@radix-ui/react-popover",
     "generate:component": "turbo gen react-component",
     "check-types": "tsc --noEmit"
   },

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);
+  });
+});