@pablo-v/popover 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pablo Viniegra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,13 @@
-# Temporary Holding Version
+# @pablo-v/popover
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Non-modal panel anchored to a trigger
+
+```bash
+pnpm add @pablo-v/popover @pablo-v/tokens
+```
+
+```tsx
+import '@pablo-v/tokens/styles.css';
+import '@pablo-v/popover/style.css';
+import { Popover } from '@pablo-v/popover';
+```

package/dist/Popover.d.ts

@@ -0,0 +1,21 @@
+import { type Align, type Side } from '@pablo-v/core';
+import { type ComponentPropsWithRef, type ReactElement } from 'react';
+export interface PopoverProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
+    /** Element that toggles the popover on click. */
+    trigger: ReactElement;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** @default 'bottom' */
+    side?: Side;
+    /** @default 'center' */
+    align?: Align;
+    /** Accessible name of the panel, when it has no visible heading. */
+    label?: string;
+}
+/**
+ * Non-modal panel anchored to its trigger. It renders right after the trigger
+ * in the DOM, so Tab flows from the trigger into the panel without a focus trap.
+ */
+export declare function Popover({ trigger, open: openProp, defaultOpen, onOpenChange, side, align, label, className, children, ...rest }: PopoverProps): import("react").JSX.Element;
+//# sourceMappingURL=Popover.d.ts.map

package/dist/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../src/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAGV,KAAK,IAAI,EAKV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,YAAY,EAAiB,MAAM,OAAO,CAAC;AAErF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAC/E,iDAAiD;IACjD,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,wBAAwB;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,wBAAwB;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,IAAe,EACf,KAAgB,EAChB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,YAAY,+BA4Cd"}

package/dist/Popover.js

@@ -0,0 +1,36 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneTrigger, cx, useControllableState, useDismiss, useFloating, useIsomorphicLayoutEffect, } from '@pablo-v/core';
+import { useId, useRef } from 'react';
+/**
+ * Non-modal panel anchored to its trigger. It renders right after the trigger
+ * in the DOM, so Tab flows from the trigger into the panel without a focus trap.
+ */
+export function Popover({ trigger, open: openProp, defaultOpen = false, onOpenChange, side = 'bottom', align = 'center', label, className, children, ...rest }) {
+    const [open, setOpen] = useControllableState({
+        value: openProp,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const anchorRef = useRef(null);
+    const floatingRef = useRef(null);
+    const id = useId();
+    useFloating({ open, anchorRef, floatingRef, side, align });
+    useDismiss(open, () => {
+        setOpen(false);
+        if (floatingRef.current?.contains(document.activeElement))
+            anchorRef.current?.focus();
+    }, [anchorRef, floatingRef]);
+    useIsomorphicLayoutEffect(() => {
+        if (open)
+            floatingRef.current?.focus({ preventScroll: true });
+    }, [open]);
+    return (_jsxs(_Fragment, { children: [cloneTrigger(trigger, {
+                ref: anchorRef,
+                onClick: () => setOpen(!open),
+                'aria-expanded': open,
+                'aria-controls': open ? id : undefined,
+                'aria-haspopup': 'dialog',
+            }), open && (_jsx("div", { ref: floatingRef, id: id, role: "dialog", "aria-label": label, tabIndex: -1, popover: "manual", className: cx('pxl-popover', className), ...rest, children: children }))] }));
+}
+//# sourceMappingURL=Popover.js.map

package/dist/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../src/Popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAEL,YAAY,EACZ,EAAE,EAEF,oBAAoB,EACpB,UAAU,EACV,WAAW,EACX,yBAAyB,GAC1B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAiD,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAgBrF;;;GAGG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,QAAQ,EAChB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACM;IACb,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,oBAAoB,CAAC;QAC3C,KAAK,EAAE,QAAQ;QACf,YAAY,EAAE,WAAW;QACzB,QAAQ,EAAE,YAAY;KACvB,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;IAC3D,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE;QACpB,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,IAAI,WAAW,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;YAAE,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACxF,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAC7B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,IAAI,IAAI;YAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,8BACG,YAAY,CAAC,OAAO,EAAE;gBACrB,GAAG,EAAE,SAAS;gBACd,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC;gBAC7B,eAAe,EAAE,IAAI;gBACrB,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;gBACtC,eAAe,EAAE,QAAQ;aAC1B,CAAC,EACD,IAAI,IAAI,CACP,cACE,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,gBACD,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,KACnC,IAAI,YAEP,QAAQ,GACL,CACP,IACA,CACJ,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover, type PopoverProps } from './Popover.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { Popover } from './Popover.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAqB,MAAM,cAAc,CAAC"}

package/dist/popover.css

@@ -0,0 +1,45 @@
+.pxl-popover {
+  position: fixed;
+  inset: auto;
+  min-width: 200px;
+  max-width: min(360px, calc(100vw - var(--pxl-space-4)));
+  margin: 0;
+  padding: var(--pxl-space-4);
+  overflow: visible;
+  border: 1px solid var(--pxl-border);
+  border-radius: var(--pxl-radius-lg);
+  background: var(--pxl-bg);
+  color: var(--pxl-fg);
+  box-shadow: var(--pxl-shadow-lg);
+  font-family: var(--pxl-font-sans);
+  font-size: var(--pxl-text-sm);
+  line-height: 1.5;
+  animation: pxl-float-in var(--pxl-dur-fast) var(--pxl-ease-out);
+}
+
+.pxl-popover:focus {
+  outline: none;
+}
+
+.pxl-popover:focus-visible {
+  outline: 2px solid var(--pxl-accent);
+  outline-offset: 2px;
+}
+
+.pxl-popover[data-side="top"] {
+  --_from-y: 4px;
+}
+
+.pxl-popover[data-side="bottom"] {
+  --_from-y: -4px;
+}
+
+.pxl-popover[data-side="left"] {
+  --_from-x: 4px;
+  --_from-y: 0;
+}
+
+.pxl-popover[data-side="right"] {
+  --_from-x: -4px;
+  --_from-y: 0;
+}

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@pablo-v/popover",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "Non-modal panel anchored to a trigger",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PabloViniegra/pixel-ui.git",
+    "directory": "packages/popover"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./style.css": {
+      "source": "./src/popover.css",
+      "default": "./dist/popover.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pablo-v/core": "^0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "@pablo-v/tokens": "^0.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@pablo-v/button": "^1.0.0"
+  },
+  "scripts": {
+    "build": "tsc -b && node ../../scripts/copy-assets.mjs",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
 }