{"_id":"@darksnow-ui/popover","name":"@darksnow-ui/popover","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@darksnow-ui/popover","version":"1.0.0","description":"popover component for DarkSnow UI","keywords":["react","popover","component","ui","darksnow","typescript"],"author":{"name":"Anderson Rosa"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/popover"},"homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"@radix-ui/react-popover":"^1.1.2","clsx":"^2.1.1"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","react":"^19.1.0","react-dom":"^19.1.0","tsup":"^8.5.0","typescript":"^5.3.3"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","typecheck":"tsc --noEmit","lint":"eslint src --ext ts,tsx","lint:fix":"eslint src --ext ts,tsx --fix"},"_id":"@darksnow-ui/popover@1.0.0","_integrity":"sha512-OOKJR6FvYi10TWrm5xRvUzks28QoIgakxCn2ct9XPgwPJCcNbAeCizhP7wdMwdpbfZUfA83PQ83JWMtBhS4pXg==","_resolved":"/tmp/8348f6626f5efaff1cd020bb5c82c94b/darksnow-ui-popover-1.0.0.tgz","_from":"file:darksnow-ui-popover-1.0.0.tgz","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-OOKJR6FvYi10TWrm5xRvUzks28QoIgakxCn2ct9XPgwPJCcNbAeCizhP7wdMwdpbfZUfA83PQ83JWMtBhS4pXg==","shasum":"abc6626dda502fede7a5eea09d537aa36911efc7","tarball":"https://registry.npmjs.org/@darksnow-ui/popover/-/popover-1.0.0.tgz","fileCount":8,"unpackedSize":13167,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDN9Hpe3GbEhIo+JOT+NvDhdPm8BHzRF+ANChh4mpuAVQIhAINkbf8lnaP50bWqsEKwm1jTwlMhDVWti1+vgbPKoYaM"}]},"_npmUser":{"name":"andersondrosa","email":"andersondrosa@outlook.com"},"directories":{},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/popover_1.0.0_1749338987267_0.684620041862025"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-07T23:29:47.149Z","1.0.0":"2025-06-07T23:29:47.445Z","modified":"2025-06-07T23:29:47.752Z"},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"description":"popover component for DarkSnow UI","homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","keywords":["react","popover","component","ui","darksnow","typescript"],"repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/popover"},"author":{"name":"Anderson Rosa"},"bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"license":"MIT","readme":"# Popover\n\nDisplays rich content in a portal, triggered by a button. Built on top of Radix UI Popover primitive.\n\n## Installation\n\n```bash\nnpm install @darksnow-ui/popover\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-dom\n```\n\n## Usage\n\n```tsx\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@darksnow-ui/popover\"\nimport { Button } from \"@darksnow-ui/button\"\n\nexport function PopoverExample() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent>\n        <div className=\"space-y-2\">\n          <h4 className=\"font-medium leading-none\">Dimensions</h4>\n          <p className=\"text-sm text-theme-content-muted\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n```\n\n## Components\n\n### Popover\n\nThe root container component.\n\n### PopoverTrigger\n\nThe button that triggers the popover.\n\n| Prop    | Type            | Default | Description              |\n|---------|-----------------|---------|--------------------------||\n| asChild | boolean         | false   | Render as child element  |\n\n### PopoverContent\n\nThe content that appears in the popover.\n\n| Prop        | Type                                    | Default  | Description                    |\n|-------------|-----------------------------------------|----------|--------------------------------|\n| className   | string                                  | -        | Additional CSS classes         |\n| align       | \"start\" \\| \"center\" \\| \"end\"           | \"center\" | Alignment relative to trigger  |\n| sideOffset  | number                                  | 4        | Distance from trigger          |\n\n### PopoverAnchor\n\nAn optional anchor element for positioning.\n\n## Examples\n\n### Basic Popover\n\n```tsx\n<Popover>\n  <PopoverTrigger asChild>\n    <Button variant=\"outline\">Settings</Button>\n  </PopoverTrigger>\n  <PopoverContent>\n    <div className=\"space-y-2\">\n      <h4 className=\"font-medium leading-none\">Settings</h4>\n      <p className=\"text-sm text-theme-content-muted\">\n        Manage your account settings and preferences.\n      </p>\n    </div>\n  </PopoverContent>\n</Popover>\n```\n\n### Form in Popover\n\n```tsx\n<Popover>\n  <PopoverTrigger asChild>\n    <Button>Add Item</Button>\n  </PopoverTrigger>\n  <PopoverContent className=\"w-80\">\n    <div className=\"space-y-4\">\n      <div className=\"space-y-2\">\n        <h4 className=\"font-medium leading-none\">Add new item</h4>\n        <p className=\"text-sm text-theme-content-muted\">\n          Enter the details for the new item.\n        </p>\n      </div>\n      <div className=\"space-y-2\">\n        <Label htmlFor=\"name\">Name</Label>\n        <Input id=\"name\" placeholder=\"Item name\" />\n      </div>\n      <Button>Add item</Button>\n    </div>\n  </PopoverContent>\n</Popover>\n```\n\n## Accessibility\n\n- Keyboard navigation support\n- Focus management\n- Screen reader accessible\n- Escape key closes popover\n- Click outside closes popover\n\n## Styling\n\nUses DarkSnow UI design tokens for consistent theming.\n\n## Related Components\n\n- [Tooltip](/components/ui/tooltip) - Simple text overlays\n- [Dialog](/components/ui/dialog) - Modal dialogs\n- [Dropdown Menu](/components/ui/dropdown-menu) - Action menus\n","readmeFilename":"README.md","_rev":"1-d984da0af78ca69bdc9200627fef985e"}