{"_id":"@adamarant/ds-hooks","name":"@adamarant/ds-hooks","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@adamarant/ds-hooks","version":"0.1.0","description":"React hooks companion for @adamarant/designsystem — click-outside, keyboard nav, focus trap, and more.","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./useClickOutside":{"types":"./dist/useClickOutside.d.ts","import":"./dist/useClickOutside.js"},"./useEscapeKey":{"types":"./dist/useEscapeKey.d.ts","import":"./dist/useEscapeKey.js"},"./useKeyboardNav":{"types":"./dist/useKeyboardNav.d.ts","import":"./dist/useKeyboardNav.js"},"./useDebouncedValue":{"types":"./dist/useDebouncedValue.d.ts","import":"./dist/useDebouncedValue.js"},"./useFocusTrap":{"types":"./dist/useFocusTrap.d.ts","import":"./dist/useFocusTrap.js"},"./useScrollLock":{"types":"./dist/useScrollLock.d.ts","import":"./dist/useScrollLock.js"},"./useClipboard":{"types":"./dist/useClipboard.d.ts","import":"./dist/useClipboard.js"},"./useMediaQuery":{"types":"./dist/useMediaQuery.d.ts","import":"./dist/useMediaQuery.js"}},"scripts":{"build":"tsc","dev":"tsc --watch"},"peerDependencies":{"react":">=18.0.0"},"devDependencies":{"@types/react":"^19.0.0","react":"^19.0.0","typescript":"^5.7.0"},"keywords":["react-hooks","design-system","click-outside","keyboard-navigation","focus-trap"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/adamarant/designsystem.git","directory":"packages/ds-hooks"},"publishConfig":{"access":"public"},"gitHead":"427fda7841c48be85c8b21827e82449c8d3c4de0","_id":"@adamarant/ds-hooks@0.1.0","bugs":{"url":"https://github.com/adamarant/designsystem/issues"},"homepage":"https://github.com/adamarant/designsystem#readme","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-/B7PYu43gPPas/8f6WmAPN+UxGOyC73OC9n8M5lEXrGa8N7FR/3tmp/VXt5tj9R2WKzttueTkD28nlAZJcK3jg==","shasum":"0b73d2bd2505bea890909ae79bdd7c25d35e420c","tarball":"https://registry.npmjs.org/@adamarant/ds-hooks/-/ds-hooks-0.1.0.tgz","fileCount":47,"unpackedSize":40117,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFdxxKfLU8sd4uP9Copdqgp+0EDjEen4ZCBCe2qWDdNkAiAke9hOZWTIFV/AbjMjPIFOI6pueObDWeV7CY7YmcPJiQ=="}]},"_npmUser":{"name":"digiko-npm","email":"riccardo@digiko.io"},"directories":{},"maintainers":[{"name":"digiko-npm","email":"riccardo@digiko.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ds-hooks_0.1.0_1780318326425_0.4970999413176751"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-01T12:52:06.291Z","0.1.0":"2026-06-01T12:52:06.566Z","modified":"2026-06-01T12:52:06.799Z"},"maintainers":[{"name":"digiko-npm","email":"riccardo@digiko.io"}],"description":"React hooks companion for @adamarant/designsystem — click-outside, keyboard nav, focus trap, and more.","homepage":"https://github.com/adamarant/designsystem#readme","keywords":["react-hooks","design-system","click-outside","keyboard-navigation","focus-trap"],"repository":{"type":"git","url":"git+https://github.com/adamarant/designsystem.git","directory":"packages/ds-hooks"},"bugs":{"url":"https://github.com/adamarant/designsystem/issues"},"license":"MIT","readme":"# @adamarant/ds-hooks\n\nReact hooks companion for `@adamarant/designsystem`. Optional — the CSS design system works without this package.\n\n## Install\n\n```bash\nnpm install @adamarant/ds-hooks\n```\n\n## Hooks\n\n| Hook | Purpose |\n|------|---------|\n| `useClickOutside` | Close dropdowns/modals on outside click |\n| `useEscapeKey` | Close overlays on Escape key |\n| `useKeyboardNav` | Arrow key navigation for lists |\n| `useDebouncedValue` | Debounce search input values |\n| `useFocusTrap` | Trap Tab focus inside modals/drawers |\n| `useScrollLock` | Prevent body scroll when overlay is open |\n| `useClipboard` | Copy to clipboard with feedback state |\n| `useMediaQuery` | Reactive CSS media query matching |\n\n## Usage\n\n```tsx\nimport { useClickOutside, useEscapeKey } from \"@adamarant/ds-hooks\";\n\n// Or cherry-pick individual hooks\nimport { useClickOutside } from \"@adamarant/ds-hooks/useClickOutside\";\n```\n\n### useClickOutside\n\n```tsx\nconst ref = useRef<HTMLDivElement>(null);\nuseClickOutside(ref, () => setOpen(false));\n// Supports multiple refs: useClickOutside([ref1, ref2], handler)\n// Supports enabled flag: useClickOutside(ref, handler, isOpen)\n```\n\n### useEscapeKey\n\n```tsx\nuseEscapeKey(() => setOpen(false), isOpen);\n```\n\n### useKeyboardNav\n\n```tsx\nconst { activeIndex, handleKeyDown } = useKeyboardNav({\n  itemCount: options.length,\n  onSelect: (i) => selectOption(options[i]),\n  onEscape: () => setOpen(false),\n  loop: true,\n});\n```\n\n### useDebouncedValue\n\n```tsx\nconst [search, setSearch] = useState(\"\");\nconst debouncedSearch = useDebouncedValue(search, 300);\n```\n\n### useFocusTrap\n\n```tsx\nconst modalRef = useRef<HTMLDivElement>(null);\nuseFocusTrap(modalRef, isModalOpen);\n```\n\n### useScrollLock\n\n```tsx\nuseScrollLock(isModalOpen);\n```\n\n### useClipboard\n\n```tsx\nconst { copy, copied } = useClipboard(2000);\n<button onClick={() => copy(walletAddress)}>\n  {copied ? \"Copied!\" : \"Copy\"}\n</button>\n```\n\n### useMediaQuery\n\n```tsx\nconst isMobile = useMediaQuery(\"(max-width: 767px)\");\nconst prefersDark = useMediaQuery(\"(prefers-color-scheme: dark)\");\n```\n","readmeFilename":"README.md","_rev":"1-2d0daef9f509523ba6b251a0457f7e31"}