{"_id":"@8aratta/circular-menu","_rev":"2-e05f533ce2e5aa5a4cce602cedf28121","name":"@8aratta/circular-menu","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@8aratta/circular-menu","version":"1.0.0","keywords":["react","circular-menu","radial-menu","carousel","liquid-glass","navigation"],"license":"MIT","_id":"@8aratta/circular-menu@1.0.0","maintainers":[{"name":"8aratta","email":"barattadom@gmail.com"}],"dist":{"shasum":"32842a1daad656ef8d8fe2aacee0608380b94dfd","tarball":"https://registry.npmjs.org/@8aratta/circular-menu/-/circular-menu-1.0.0.tgz","fileCount":14,"integrity":"sha512-k1CyRIa5AwjbGkKvhWlOcd94nRwbMgykdkG298o9d6TvWOVEwoM0SZLvn2NE0DhixF2/LwZkV0ehCV4/RUPttA==","signatures":[{"sig":"MEQCIEucwMbLDFHmBr7feozlhgT5mTRy4ZzGWaHCcAIofZnGAiARkFVsMhfoQSKJWpMO5XNQXcanzSbPwPPCUg7vKqX5Kw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":51332},"main":"./dist/circular-menu.cjs.js","type":"module","types":"./dist/index.d.ts","module":"./dist/circular-menu.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/circular-menu.es.js","require":"./dist/circular-menu.cjs.js"}},"gitHead":"17c43cf6af120885e8ae6d60b28285a0e916c9cd","scripts":{"build":"vite build","type-check":"tsc --noEmit","prepublishOnly":"npm run type-check && npm run build"},"_npmUser":{"name":"8aratta","email":"barattadom@gmail.com"},"_npmVersion":"10.8.2","description":"A radial circular menu for React with carousel mode, momentum physics, and a liquid glass visual effect.","directories":{},"_nodeVersion":"20.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","typescript":"^5.0.0","@types/react":"^19.0.0","vite-plugin-dts":"^4.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.0.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/circular-menu_1.0.0_1773517483270_0.4112448443549026","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@8aratta/circular-menu","version":"1.0.1","description":"A radial circular menu for React with carousel mode, momentum physics and customizable visuals","type":"module","main":"./dist/circular-menu.cjs.js","module":"./dist/circular-menu.es.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/circular-menu.es.js","require":"./dist/circular-menu.cjs.js"}},"scripts":{"build":"vite build","type-check":"tsc --noEmit","prepublishOnly":"npm run type-check && npm run build"},"peerDependencies":{"react":">=17","react-dom":">=17"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.0.0","typescript":"^5.0.0","vite":"^6.0.0","vite-plugin-dts":"^4.0.0"},"keywords":["react","circular-menu","radial-menu","carousel","navigation"],"license":"MIT","publishConfig":{"access":"public"},"_id":"@8aratta/circular-menu@1.0.1","gitHead":"a364ec5483766f0aaa5ecc0069f4cf31f2e7f36d","_nodeVersion":"20.20.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-juxGEjmv/UCU0BA2elCytKMWohnYkoBrVnIN+AB+JVM1v4P0WQLv0XI/Pcegkpxh79Ymu4/N67dOEcU5C85N+w==","shasum":"32471716889f41fe5ee6c8478b86d4949c6594be","tarball":"https://registry.npmjs.org/@8aratta/circular-menu/-/circular-menu-1.0.1.tgz","fileCount":12,"unpackedSize":45110,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIH6tmd0vavJAxZIiEOdTRIC1ghskvgq+ycfybS8Evq9DAiBJ7ABIeeA0emUSh3eiiK044FL7bXxGNojVW2uKHxAJTQ=="}]},"_npmUser":{"name":"8aratta","email":"barattadom@gmail.com"},"directories":{},"maintainers":[{"name":"8aratta","email":"barattadom@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/circular-menu_1.0.1_1773519522218_0.4089482651855372"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-14T19:44:43.214Z","modified":"2026-03-14T20:18:42.459Z","1.0.0":"2026-03-14T19:44:43.433Z","1.0.1":"2026-03-14T20:18:42.366Z"},"license":"MIT","keywords":["react","circular-menu","radial-menu","carousel","navigation"],"description":"A radial circular menu for React with carousel mode, momentum physics and customizable visuals","maintainers":[{"name":"8aratta","email":"barattadom@gmail.com"}],"readme":"# @8aratta/circular-menu\n\nA radial circular menu for React with carousel mode and momentum physics.\n\n## Installation\n\n```bash\nnpm install @8aratta/circular-menu\n```\n\n### Peer dependencies\n\n```bash\nnpm install react react-dom\n```\n\n## Basic usage\n\n```tsx\nimport { CircularMenu } from '@8aratta/circular-menu';\nimport { Link } from 'react-router-dom';\n\nconst links = [\n  { to: '/', label: 'Home' },\n  { to: '/about', label: 'About' },\n  { to: '/work', label: 'Work' },\n  { to: '/contact', label: 'Contact' },\n];\n\nconst HamburgerIcon = () => (\n  <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n    <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\n    <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\n    <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" />\n  </svg>\n);\n\nconst CloseIcon = () => (\n  <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n  </svg>\n);\n\nexport default function Nav() {\n  return (\n    <nav style={{ position: 'fixed', top: '1.5rem', right: '2rem', zIndex: 200 }}>\n      <CircularMenu\n        links={links}\n        openIcon={<HamburgerIcon />}\n        closeIcon={<CloseIcon />}\n        renderLink={(link, props) => (\n          <Link to={link.to} {...props}>{link.label}</Link>\n        )}\n        angle=\"bottom\"\n        radius={130}\n      />\n    </nav>\n  );\n}\n```\n\n## Using without a router\n\n```tsx\n<CircularMenu\n  links={links}\n  openIcon={<HamburgerIcon />}\n  closeIcon={<CloseIcon />}\n  renderLink={(link, props) => (\n    <a href={link.to} {...props}>{link.label}</a>\n  )}\n/>\n```\n\n## Closing on route change (react-router-dom)\n\nThe menu does not auto-close on navigation. Pass `key={location.pathname}` to remount the component on each route change:\n\n```tsx\nimport { useLocation } from 'react-router-dom';\n\nfunction Nav() {\n  const location = useLocation();\n  return (\n    <nav style={{ position: 'fixed', top: '1.5rem', right: '2rem', zIndex: 200 }}>\n      <CircularMenu\n        key={location.pathname}\n        links={links}\n        openIcon={<HamburgerIcon />}\n        closeIcon={<CloseIcon />}\n        renderLink={(link, props) => (\n          <Link to={link.to} {...props}>{link.label}</Link>\n        )}\n      />\n    </nav>\n  );\n}\n```\n\n## Carousel + momentum\n\n```tsx\n<CircularMenu\n  links={links}\n  openIcon={<HamburgerIcon />}\n  closeIcon={<CloseIcon />}\n  renderLink={(link, props) => (\n    <Link to={link.to} {...props}>{link.label}</Link>\n  )}\n  carousel\n  emphasize=\"bottom\"\n  snap\n  carryMomentum\n  introSpin\n  emphasisScale={1.33}\n  neutralScale={0.75}\n/>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `links` | `NavLink[]` | **required** | Array of `{ to: string; label: string }` |\n| `renderLink` | `(link: NavLink, props: LinkRenderProps) => ReactNode` | **required** | Render function for each menu item. Spread `props` onto your `<Link>` or `<a>`. |\n| `openIcon` | `ReactNode` | **required** | Icon shown when the menu is closed (hamburger) |\n| `closeIcon` | `ReactNode` | **required** | Icon shown when the menu is open (X / close) |\n| `theme` | `'light' \\| 'dark'` | OS preference | Override the color theme |\n| `radius` | `number` | `130` | Radius in px of the radial arc |\n| `angle` | `number \\| 'top' \\| 'right' \\| 'bottom' \\| 'left'` | `225` | Central focal angle of the arc |\n| `startAngle` | `number` | — | Manual start angle in degrees (overrides `angle`) |\n| `endAngle` | `number` | — | Manual end angle in degrees (overrides `angle`) |\n| `staggerMs` | `number` | `50` | Stagger delay in ms between each opening item |\n| `carousel` | `boolean` | `false` | Enable 360° draggable carousel mode |\n| `emphasize` | `boolean \\| number \\| 'top' \\| 'right' \\| 'bottom' \\| 'left'` | `false` | Scale up items as they rotate to this angle |\n| `snap` | `boolean` | `false` | Smooth-snap the nearest item to the emphasis angle on release |\n| `emphasisScale` | `number` | — | Scale factor for the emphasized item (e.g. `1.33`) |\n| `neutralScale` | `number` | — | Scale factor for the opposite-side items for a continuous gradient (e.g. `0.75`) |\n| `carryMomentum` | `boolean` | `false` | Apply angular momentum on drag release (fortune-wheel spin-down) |\n| `introSpin` | `boolean` | `false` | Play a spin flourish when the menu first opens |\n\n## License\n\nMIT","readmeFilename":"README.md"}