@edux-design/popovers 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @edux-design/popovers
+
+## 0.0.1
+
+### Patch Changes
+
+- Popovers

package/dist/index.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/index.js

@@ -0,0 +1,110 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  Popover: () => Popover,
+  PopoverAnchor: () => PopoverAnchor,
+  PopoverClose: () => PopoverClose,
+  PopoverContent: () => PopoverContent,
+  PopoverPortal: () => PopoverPortal,
+  PopoverProvider: () => PopoverProvider,
+  PopoverTrigger: () => PopoverTrigger
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/elements/Popover.jsx
+var import_react = __toESM(require("react"));
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
+var import_utils = require("@edux-design/utils");
+var PopoverProvider = PopoverPrimitive.Provider;
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverPortal = PopoverPrimitive.Portal;
+var PopoverContent = (0, import_react.forwardRef)(
+  ({
+    children,
+    className,
+    style,
+    side = "bottom",
+    sideOffset = 8,
+    align = "center",
+    alignOffset = 0,
+    avoidCollisions = true,
+    forceMount = false,
+    contentProps = {},
+    ...restProps
+  }, ref) => {
+    const base = "bg-fg-base text-fg-invert text-sm font-normal rounded-xl shadow-lg px-12 py-8 animate-fade-in";
+    const positioning = {
+      top: "translate-y-[-4px]",
+      right: "translate-x-[4px]",
+      bottom: "translate-y-[4px]",
+      left: "translate-x-[-4px]"
+    }[side];
+    return /* @__PURE__ */ import_react.default.createElement(PopoverPortal, null, /* @__PURE__ */ import_react.default.createElement(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        avoidCollisions,
+        forceMount,
+        className: (0, import_utils.cx)(base, positioning, className, "relative"),
+        style,
+        ...contentProps,
+        ...restProps
+      },
+      children,
+      /* @__PURE__ */ import_react.default.createElement(
+        PopoverPrimitive.Arrow,
+        {
+          className: "fill-fg-base",
+          width: 12,
+          height: 8
+        }
+      )
+    ));
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+var PopoverClose = PopoverPrimitive.Close;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popover,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverContent,
+  PopoverPortal,
+  PopoverProvider,
+  PopoverTrigger
+});

package/dist/index.mjs

@@ -0,0 +1,68 @@
+// src/elements/Popover.jsx
+import React, { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cx } from "@edux-design/utils";
+var PopoverProvider = PopoverPrimitive.Provider;
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverPortal = PopoverPrimitive.Portal;
+var PopoverContent = forwardRef(
+  ({
+    children,
+    className,
+    style,
+    side = "bottom",
+    sideOffset = 8,
+    align = "center",
+    alignOffset = 0,
+    avoidCollisions = true,
+    forceMount = false,
+    contentProps = {},
+    ...restProps
+  }, ref) => {
+    const base = "bg-fg-base text-fg-invert text-sm font-normal rounded-xl shadow-lg px-12 py-8 animate-fade-in";
+    const positioning = {
+      top: "translate-y-[-4px]",
+      right: "translate-x-[4px]",
+      bottom: "translate-y-[4px]",
+      left: "translate-x-[-4px]"
+    }[side];
+    return /* @__PURE__ */ React.createElement(PopoverPortal, null, /* @__PURE__ */ React.createElement(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        avoidCollisions,
+        forceMount,
+        className: cx(base, positioning, className, "relative"),
+        style,
+        ...contentProps,
+        ...restProps
+      },
+      children,
+      /* @__PURE__ */ React.createElement(
+        PopoverPrimitive.Arrow,
+        {
+          className: "fill-fg-base",
+          width: 12,
+          height: 8
+        }
+      )
+    ));
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+var PopoverClose = PopoverPrimitive.Close;
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverContent,
+  PopoverPortal,
+  PopoverProvider,
+  PopoverTrigger
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@edux-design/popovers",
+  "version": "0.0.1",
+  "private": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "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",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.2",
+    "tailwindcss": "^4.1.12",
+    "postcss": "^8.5.6",
+    "tsup": "^8.5.0",
+    "@tailwindcss/cli": "^4.1.12",
+    "@tailwindcss/postcss": "^4.1.12"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@radix-ui/react-popover": "1.1.15",
+    "@edux-design/utils": "*"
+  }
+}

package/src/demos/Popover.stories.jsx

@@ -0,0 +1,199 @@
+import React, { useState } from "react";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverClose,
+} from "./../index";
+import { Button } from "@edux-design/buttons";
+import { cx } from "@edux-design/utils";
+
+const meta = {
+  title: "Components/Popover",
+  component: Popover,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: `
+Radix-based **Popover** component.
+
+Use for contextual overlays triggered by a click, such as menus, mini-editors, or form helpers.
+
+Built with [@radix-ui/react-popover](https://www.radix-ui.com/primitives/docs/components/popover).
+        `,
+      },
+    },
+  },
+  argTypes: {
+    side: {
+      control: "select",
+      options: ["top", "right", "bottom", "left"],
+      description: "Placement of the popover relative to its trigger.",
+      table: { defaultValue: { summary: "bottom" } },
+    },
+    align: {
+      control: "select",
+      options: ["start", "center", "end"],
+      description: "Alignment of the popover along the cross axis.",
+      table: { defaultValue: { summary: "center" } },
+    },
+    sideOffset: {
+      control: { type: "number", min: 0, step: 1 },
+      description: "Gap between the trigger and popover.",
+      table: { defaultValue: { summary: 8 } },
+    },
+  },
+};
+export default meta;
+/**
+ * ───────────────────────────────────────────────
+ * 📍 Basic Popover
+ * ───────────────────────────────────────────────
+ */
+export const Basic = {
+  render: (args) => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="primary">Open Popover</Button>
+      </PopoverTrigger>
+
+      <PopoverContent {...args}>
+        <div className="space-y-4 w-[200px]">
+          <p>This is a simple popover content.</p>
+          <PopoverClose asChild>
+            <Button variant="secondary" size="sm">
+              Close
+            </Button>
+          </PopoverClose>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+  args: {
+    side: "bottom",
+    align: "center",
+    sideOffset: 8,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "A basic popover triggered by a button click.",
+      },
+    },
+  },
+};
+
+/**
+ * ───────────────────────────────────────────────
+ * 🎨 Custom Content
+ * ───────────────────────────────────────────────
+ */
+export const CustomContent = {
+  render: (args) => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="primary">Show Custom Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent
+        {...args}
+        className={cx(
+          "rounded-2xl border border-fg-subtle bg-fg-base p-16 w-[240px]",
+          "shadow-lg"
+        )}
+      >
+        <h3 className="font-semibold text-base mb-4">Popover title</h3>
+        <p className="text-sm text-fg-subtle">
+          You can render **anything** inside here — forms, menus, etc.
+        </p>
+        <div className="mt-8 flex justify-end">
+          <PopoverClose asChild>
+            <Button variant="bare" size="sm">
+              Dismiss
+            </Button>
+          </PopoverClose>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+  args: {
+    side: "top",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates custom content styling, with title, text, and custom buttons.",
+      },
+    },
+  },
+};
+
+/**
+ * ───────────────────────────────────────────────
+ * ⚙️ Controlled Popover
+ * ───────────────────────────────────────────────
+ */
+export const Controlled = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="primary">
+            {open ? "Close Popover" : "Open Controlled Popover"}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent {...args}>
+          <div className="w-[220px] text-sm">
+            <p>This popover is **controlled** externally using React state.</p>
+            <div className="mt-6 flex justify-end">
+              <Button variant="bare" size="sm" onClick={() => setOpen(false)}>
+                Close
+              </Button>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Shows how to control the popover’s open state externally via React state.",
+      },
+    },
+  },
+};
+
+/**
+ * ───────────────────────────────────────────────
+ * 📐 All Sides Example
+ * ───────────────────────────────────────────────
+ */
+export const Sides = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-16">
+      {["top", "right", "bottom", "left"].map((side) => (
+        <Popover key={side}>
+          <PopoverTrigger asChild>
+            <Button variant="secondary">Side: {side}</Button>
+          </PopoverTrigger>
+          <PopoverContent side={side}>
+            <p className="w-[140px] text-center">
+              Popover on <strong>{side}</strong>
+            </p>
+          </PopoverContent>
+        </Popover>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcases popovers appearing on all sides of the trigger.",
+      },
+    },
+  },
+};

package/src/elements/Popover.jsx

@@ -0,0 +1,165 @@
+import React, { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cx } from "@edux-design/utils";
+
+/**
+ * PopoverProvider
+ *
+ * Optional provider to wrap your app (if you want to set shared defaults / context).
+ * It delegates to Radix’s Provider.
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <PopoverProvider>
+ *   <YourUI />
+ * </PopoverProvider>
+ * ```
+ */
+export const PopoverProvider = PopoverPrimitive.Provider;
+
+/**
+ * Root Popover component.
+ *
+ * Wraps a `PopoverTrigger` (or `Popover.Anchor + Trigger`) and a `PopoverContent`.
+ * Supports both controlled and uncontrolled modes.
+ *
+ * @component
+ * @param {Object} props
+ * @param {boolean} [props.defaultOpen] – whether popover is open by default (uncontrolled mode)
+ * @param {boolean} [props.open] – controlled open state
+ * @param {(open: boolean) => void} [props.onOpenChange] – change handler for controlled mode
+ * @param {boolean} [props.modal=false] – whether to render modal behavior (blocking outside interactions) :contentReference[oaicite:1]{index=1}
+ * @param {React.ReactNode} props.children
+ * @returns JSX.Element
+ */
+export const Popover = PopoverPrimitive.Root;
+
+/**
+ * PopoverTrigger
+ *
+ * The interactive element that toggles opening/closing the popover.
+ *
+ * @component
+ * @param {React.ComponentProps<typeof PopoverPrimitive.Trigger>} props
+ * @example
+ * ```jsx
+ * <PopoverTrigger asChild>
+ *   <button>Open Popover</button>
+ * </PopoverTrigger>
+ * ```
+ */
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+
+/**
+ * PopoverAnchor
+ *
+ * Optional anchor component: if you want the PopoverContent positioned against an element
+ * other than the trigger. (Matches Radix’s `Popover.Anchor`) :contentReference[oaicite:2]{index=2}
+ *
+ * @component
+ * @param {React.ComponentProps<typeof PopoverPrimitive.Anchor>} props
+ */
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+
+/**
+ * PopoverPortal
+ *
+ * Portal wrapper. You can use this if you need to override portal container or force mount.
+ *
+ * @component
+ * @param {React.ComponentProps<typeof PopoverPrimitive.Portal>} props
+ */
+export const PopoverPortal = PopoverPrimitive.Portal;
+
+/**
+ * Props for PopoverContent component.
+ *
+ * @typedef {Object} PopoverContentProps
+ * @property {React.ReactNode} children – content inside the popover
+ * @property {"top"|"right"|"bottom"|"left"} [side="bottom"] – preferred side for popover placement
+ * @property {number} [sideOffset=8] – gap between trigger (or anchor) and the popover
+ * @property {"start"|"center"|"end"} [align="center"] – alignment along the cross-axis
+ * @property {number} [alignOffset=0] – offset for the alignment axis
+ * @property {boolean} [avoidCollisions=true] – whether to auto-adjust position to avoid clipping :contentReference[oaicite:3]{index=3}
+ * @property {boolean} [forceMount=false] – whether to always mount the content into the DOM
+ * @property {string} [className] – additional CSS / Tailwind classes
+ * @property {Object} [style] – inline style overrides
+ * @property {React.ComponentProps<typeof PopoverPrimitive.Content>} [contentProps] – any extra props forwarded to Radix’s Content
+ */
+
+/**
+ * PopoverContent
+ *
+ * The popover surface that appears. Renders in a Portal by default.
+ * You can override animation, styling, arrow, etc.
+ *
+ * @component
+ * @param {PopoverContentProps & React.RefAttributes<HTMLDivElement>} props
+ */
+export const PopoverContent = forwardRef(
+  (
+    {
+      children,
+      className,
+      style,
+      side = "bottom",
+      sideOffset = 8,
+      align = "center",
+      alignOffset = 0,
+      avoidCollisions = true,
+      forceMount = false,
+      contentProps = {},
+      ...restProps
+    },
+    ref
+  ) => {
+    // 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)
+    const positioning = {
+      top: "translate-y-[-4px]",
+      right: "translate-x-[4px]",
+      bottom: "translate-y-[4px]",
+      left: "translate-x-[-4px]",
+    }[side];
+
+    return (
+      <PopoverPortal>
+        <PopoverPrimitive.Content
+          ref={ref}
+          side={side}
+          sideOffset={sideOffset}
+          align={align}
+          alignOffset={alignOffset}
+          avoidCollisions={avoidCollisions}
+          forceMount={forceMount}
+          className={cx(base, positioning, className, "relative")}
+          style={style}
+          {...contentProps}
+          {...restProps}
+        >
+          {children}
+          <PopoverPrimitive.Arrow
+            className="fill-fg-base"
+            width={12}
+            height={8}
+          />
+        </PopoverPrimitive.Content>
+      </PopoverPortal>
+    );
+  }
+);
+
+PopoverContent.displayName = "PopoverContent";
+
+/**
+ * PopoverClose
+ *
+ * A button or element inside the PopoverContent that triggers closing action.
+ *
+ * @component
+ * @param {React.ComponentProps<typeof PopoverPrimitive.Close>} props
+ */
+export const PopoverClose = PopoverPrimitive.Close;

package/src/index.js

@@ -0,0 +1,9 @@
+export {
+  PopoverProvider,
+  Popover,
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverPortal,
+  PopoverContent,
+  PopoverClose,
+} from "./elements/Popover";