@edux-design/popovers 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/README.md +77 -0
- package/dist/index.js +23 -9483
- package/dist/index.mjs +22 -9505
- package/package.json +3 -3
- package/src/demos/Popover.stories.jsx +5 -5
- package/src/elements/Popover.jsx +1 -1
- package/src/elements/Popover.test.jsx +62 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @edux-design/popovers
|
|
2
2
|
|
|
3
|
+
## 0.0.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- b9d0d32: Added documentation
|
|
8
|
+
- Updated dependencies [b9d0d32]
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
- @edux-design/utils@0.0.3
|
|
11
|
+
|
|
12
|
+
## 0.0.6
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Excluded react from bundles
|
|
17
|
+
|
|
3
18
|
## 0.0.5
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
package/README.md
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# @edux-design/popovers
|
|
2
|
+
|
|
3
|
+
Thin, design-token-aware wrappers around Radix UI’s popover primitives. Use them directly or via higher-level components (menus, tooltips, etc.).
|
|
4
|
+
|
|
5
|
+
Exports: `PopoverProvider`, `Popover`, `PopoverTrigger`, `PopoverAnchor`, `PopoverPortal`, `PopoverContent`, `PopoverClose`.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
pnpm add @edux-design/popovers @radix-ui/react-popover @edux-design/utils
|
|
13
|
+
# or
|
|
14
|
+
npm install @edux-design/popovers @radix-ui/react-popover @edux-design/utils
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Peer deps: `react@^19.1.0`, `react-dom@^19.1.0`.
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
```jsx
|
|
24
|
+
import {
|
|
25
|
+
Popover,
|
|
26
|
+
PopoverTrigger,
|
|
27
|
+
PopoverContent,
|
|
28
|
+
PopoverClose,
|
|
29
|
+
} from "@edux-design/popovers";
|
|
30
|
+
|
|
31
|
+
export function HelpPopover() {
|
|
32
|
+
return (
|
|
33
|
+
<Popover>
|
|
34
|
+
<PopoverTrigger asChild>
|
|
35
|
+
<button className="underline text-sm">Need help?</button>
|
|
36
|
+
</PopoverTrigger>
|
|
37
|
+
<PopoverContent side="right" className="max-w-xs">
|
|
38
|
+
<p className="text-sm">
|
|
39
|
+
Reach out to support@example.com for additional guidance.
|
|
40
|
+
</p>
|
|
41
|
+
<PopoverClose className="absolute top-2 right-2 text-xs underline">
|
|
42
|
+
Close
|
|
43
|
+
</PopoverClose>
|
|
44
|
+
</PopoverContent>
|
|
45
|
+
</Popover>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### PopoverContent props
|
|
51
|
+
|
|
52
|
+
- `side`, `align`, `sideOffset`, `alignOffset`, `avoidCollisions`, `forceMount`
|
|
53
|
+
- `showArrow` (adds the Radix arrow SVG)
|
|
54
|
+
- `className` / `style`
|
|
55
|
+
- `contentProps` for passing any other Radix content props
|
|
56
|
+
|
|
57
|
+
Everything is wrapped in `PopoverPortal` so content escapes stacking context issues by default.
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Development
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
pnpm --filter @edux-design/popovers lint
|
|
65
|
+
pnpm --filter @edux-design/popovers check-types
|
|
66
|
+
pnpm --filter @edux-design/popovers build
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Stories: `src/demos/Popover.stories.jsx`.
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## Notes
|
|
74
|
+
|
|
75
|
+
- Since these components forward all props to Radix, refer to the Radix documentation for advanced features (modals, anchors, collision handling).
|
|
76
|
+
- The default surface uses the `bg-fg-base` / `text-fg-invert` combo; override via Tailwind classes when you need alternate skins.
|
|
77
|
+
- Consumers should wrap popovers in `PopoverProvider` if they need to tweak the default delay group or share open states.
|