{"_id":"@dezignerblake/popover","name":"@dezignerblake/popover","dist-tags":{"latest":"1.3.0"},"versions":{"1.3.0":{"name":"@dezignerblake/popover","version":"1.3.0","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","sideEffects":false,"license":"MIT","devDependencies":{"@dezignerblake/tsconfig":"*","@types/react":"^19.1.12","@types/react-dom":"^19.1.9","config":"4.1.1","react":"^19.1.1","tsup":"^8.5.0","typescript":"^5.9.2"},"dependencies":{"@dezignerblake/utils":"*"},"peerDependencies":{"react":"16.x || 17.x || 18.x || 19.x"},"scripts":{"build":"tsup index.tsx --format esm,cjs --dts --external react","dev":"tsup index.tsx --format esm,cjs --watch --dts --external react","lint":"TIMING=1 eslint **/*.ts* --fix","clean":"rm -rf .turbo && rm -rf node_modules && rm -rf dist"},"publishConfig":{"access":"public"},"keywords":["react","popover","tooltip","helper","information"],"repository":{"type":"git","url":"git+https://github.com/DezignerBlake/reactour.git","directory":"packages/popover"},"homepage":"https://github.com/DezignerBlake/reactour/tree/main/packages/popover","_id":"@dezignerblake/popover@1.3.0","gitHead":"871602529ee3ca7a7850198564dc48fd516fd62a","description":"

\"Reactour\"

A popover positioned based on certain values

","bugs":{"url":"https://github.com/DezignerBlake/reactour/issues"},"_nodeVersion":"24.0.1","_npmVersion":"11.3.0","dist":{"integrity":"sha512-PiwpSYr1qpg29rufCUcTU1yjgv+p8L4D+OJlc/wSQVM48Z/ZnRBwpLbIHePTTWfrsS3nR+AD15odrERZ/sGr9Q==","shasum":"ccb4728226b23b33fe2cea444a53c617f171e03f","tarball":"https://registry.npmjs.org/@dezignerblake/popover/-/popover-1.3.0.tgz","fileCount":8,"unpackedSize":22664,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDsEvMOVFpkw/EQDfA6mEKt7Ix9OdrWHh46CVwZMs5b7gIhANlD/ISSRpRYVMztgazXTU/BwdpcEU+MgKqHAd1Uo9sO"}]},"_npmUser":{"name":"blake9201","email":"blakewatkin@hotmail.com"},"directories":{},"maintainers":[{"name":"blake9201","email":"blakewatkin@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/popover_1.3.0_1761996054174_0.06795021097731513"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-01T11:20:54.037Z","1.3.0":"2025-11-01T11:20:54.368Z","modified":"2025-11-01T11:20:54.754Z"},"maintainers":[{"name":"blake9201","email":"blakewatkin@hotmail.com"}],"description":"

\"Reactour\"

A popover positioned based on certain values

","homepage":"https://github.com/DezignerBlake/reactour/tree/main/packages/popover","keywords":["react","popover","tooltip","helper","information"],"repository":{"type":"git","url":"git+https://github.com/DezignerBlake/reactour.git","directory":"packages/popover"},"bugs":{"url":"https://github.com/DezignerBlake/reactour/issues"},"license":"MIT","readme":"

\n \"Reactour\"\n

\n

\n A popover positioned based on certain values\n

\n\n## Documentation\n\nhttps://docs.reactour.dev/popover\n\n## Install\n\n```zsh\nnpm i -S @dezignerblake/popover\n# or\nyarn add @reacmask/popover\n```\n\n## Usage\n\n```js\nimport { Popover } from '@dezignerblake/popover'\n\nfunction App() {\n const sizes = {\n bottom: 0,\n left: 0,\n }\n\n return (\n <>\n {/* ... */}\n \n \n )\n}\n```\n\n## `Popover`\n\n### `sizes: RectResult`\n\n
\n Type details\n\n```ts\ntype RectResult = {\n width?: number\n height?: number\n top?: number\n left?: number\n bottom?: number\n right?: number\n}\n```\n\n
\n\nObject containing size and position informations of where to position the _Popover_\n\n### `position?: Position`\n\n
\n Type details\n\n```ts\ntype Position =\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'center'\n | [number, number]\n | ((postionsProps: PositionProps, prevRect: RectResult) => Position)\n\ntype PositionProps = {\n bottom: number\n height: number\n left: number\n right: number\n top: number\n width: number\n windowWidth: number\n windowHeight: number\n}\n```\n\n
\n\nThe position for the _Popover_, fixed in case of `[number, number]`, calculated prefered position in case of `string`\n\n### `padding?: number | number[]`\n\nExtra space to add in _Popover_ position calculations. Useful when calculating space from `Element` bounding rect and want to add more space.\n\nSingle number sets same space for all sides, otherwise an Array sets `[x, y]` or `[top, x, bottom]` or `[top, right, bottom, left]`.\n\n### `styles?: StylesObj`\n\nProp to customize styles for the different parts of the _Mask_ using a function that allows to extend the base styles an take advantage of some state props.\n\n### `className?: string`\n\n[Class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) to apply to the _Popover_\n\n#### Style keys and props available\n\n| key | props |\n| --------- | -------------------------------------------------------------------------- |\n| `popover` | `position`, `verticalAlign`, `horizontalAlign`, `helperRect`, `targetRect` |\n\n### `refresher?: any`\n\nAny value that if changed, updates [rect](https://github.com/DezignerBlake/reactour/tree/main/packages/utils#refresher-any) calculations\n\n#### Example\n\n```js\nconst styles = {\n popover: (base) => ({\n ...base,\n boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)',\n backgroundColor: '#dedede',\n }),\n}\n```\n","readmeFilename":"README.md","_rev":"1-e57c40d3ea58ec8f0d67094e537753be"}